您的位置:首頁>正文

從三個角度分析提示設計

本文作者以移動端為例, 從三個角度分析提示設計——重要程度、出現位置和內容構成。 enjoy~

稍微複雜一點的產品都少不了提示功能,

這種全域模組即需要整體解決方案, 也需要具體運用規則。 以手機 App 為例, 提示種類很多(操作成功、操作失敗、收藏點贊、二次確認…);展示形式也很多。

我最近對這一方面有所思考, 結合外網資料整理了一套提示設計的方法和建議。 為了方便解釋, 下面會以移動端為例, 但是核心的方法理念是適用於各種終端平臺的。

1. 重要程度

提示種類之多, 幾乎無法完全枚舉, 況且很多Bug提示是無法在設計時就預料到的。 所以比較實際的方法是用重要程度劃分提示。 但是以什麼為依據呢?我這裡參考了的可用性問題評級規則, 利用“如果沒有提示, 可能對用戶產生的影響”來判斷提示的重要程度。

想要瞭解可用性問題評級規則的話,

可以去看我早期寫的這篇理論性較強的文章:《正視可用性問題》

1.1 重度提示

設計方向:

確保用戶能夠看到提示, 哪怕打斷當前任務必須用戶主動操作或進行選擇才能繼續

1.2 中度提示

使用者可能需要瞭解、感興趣的變更資訊, 如:好友消息、網路錯誤、帳號升級…

設計方向:

在儘量不打斷當前任務的前提下, 確保用戶可以看到提示不自動消失, 但用戶可以選擇忽視

1.3 輕度提示

使用者可以預料的變更資訊, 如:發送成功、添加收藏、開啟省流量模式…

設計方向:

避免對當前任務產生任何干擾, 讓感興趣的用戶能夠發現提示自動消失, 無需任何操作

2. 出現位置

位置對於注意力來說非常重要, 提示出現在不同地方會產生完全不同的效果。

因為可能的位置太多, 這裡主要將其分為三類:

2.1 原位

在用戶原本操作之處、視線焦點出現提示肯定是最好的方式。

因為無論引導如何強烈, 對用戶來說有一個代價是無可避免的——轉移視線。 尤其是有時候用戶做某件事情太過集中時, 可能再強的旁側提示都無法引起注意。

所以像這樣相當於把資訊放到使用者眼前, 就消減了很多問題和代價。

這種方式固然好, 但是可行性卻相對較低。 像上例中收藏圖示點一下加個動效變實心這種當然簡單, 但是很多提示(如載入失敗)都不存在觸發操作或不確定視線焦點, 對於這類提示要用原位展示的話, 視線成本就比較高了。

也就是 Google 這種量級的公司, 才敢在構架 Material Design 時提出, 我之前也在《穀歌 Material Design 從這些方面打破了我思維局限》中用“不是視線追蹤元素, 而是元素追蹤視線”進行了闡釋。 可也就連 Google 這種量級的公司, 都沒有辦法真正將這套理念鋪展運用起來, 實際上他們大部分產品並沒有實現 Material Design 中的很多理想化的設計。

但是從技術發展的發展速度來看,

這些應該都不是太遙遠的事情。

2.2 中央

中央彈窗、浮層可能是我們印象最深刻的提示位置了, 無需過多解釋。

這種提示必然從視覺上打斷了當前任務, 所以更加適合重度程度較高的提示。

如果自動消失, 也是可以運用於弱提示的, 但是這樣的效果遠比不上在原位提示更好。尤其是如果觸發操作或視線焦點在介面邊緣,之後螢幕中央出現一閃即逝的弱提示未必能夠引起注意。

總的來說,中央位置算是比較省事保險的方案。

2.3 邊緣

消息推送、角標這類利用介面邊緣位置的提示也很常見。

這種位置的好處是不會打擾當前任務,且頂部或底部位置可以擺放較多文字,適合中度或輕度提示。

缺點也很明顯,即很容易被忽略,所以通常要搭配動效、音效。更糟糕的情況是,這種邊緣很有可能距離觸發操作和視線焦點較遠,如果不巧發生了,那麼用戶很有可能看不到。

3. 結構組成3.1 關閉

傳統Windows都是清一色帶有關閉按鈕的,但是大部分情況可能並不需要這個按鈕。因為:

重度提示會在用戶進行選擇操作後自動消失,所以不需要關閉。輕度提示會很快自動消失,也不需要關閉。只有無必選項的中度提示才可能需要關閉按鈕。

3.2 標題

為了不干擾用戶,提示應該是越簡潔易懂越好,所以標題這個東西就很雞肋了。由於一些系統彈窗的結構限制,有時在配置提示的時候為了填充標題區域,不得不寫上“提示”、“二次確認”這種毫無意義的文字。

沒有必要就不要強塞標題了,除了給用戶造成閱讀負擔之外沒有任何好處。

3.3 圖片

從純碎的人機交互上來說,大部分提示其實完全不用配圖,尤其有些系統為了強行配圖,每個提示框都加上一個等級強度的圖示,這樣做其實沒有什麼意義。

但是從視覺美感和易於記憶的角度來看,搭配一些真正合適好看的圖也是不錯的。

3.4 選項

重度提示通常都是要求用戶選擇操作的;輕度提示一般自動消失不需要進行任何選擇。

所以關鍵在於中度提示是否需要提供選項呢?最好是能夠提供可選操作,哪怕用戶可以叉掉或無視提示。

例如在打開新頁面時,因為流量太大問題而出錯。如果簡單處理,給用戶講一下出錯理由就好了。但是如果要真正為體驗而設計,就要考慮用戶此時的心理。使用者發現頁面打不開,不管理由如何就是會覺得不開心。如果這裡有一個回饋入口,提供一個宣洩途徑,哪怕實際上並不能夠解決任何問題,至少能讓用戶在心理上有“做出了努力”的感覺。

3.5 情感

這是很有意思的一點,也是近幾年來才出現的設計趨勢。大部分人都對可愛的事物持有較高的容忍度,例如一個成年人走路摔了一下會被嘲笑,而一個小孩子走路摔了一跤會被說可愛,這可能和呵護下一代的天性有關吧。

利用人的感性這一點,如果將系統包裝成一個較為可愛的人物形象,就能提高用戶對問題的容忍度。提示通常會對用戶造成一定干擾,尤其是問題提示,這些情況是最需要容忍度的,所以此處也是情感包裝的良機。

作者:Z Yuhan,知乎專欄:交互進階

但是這樣的效果遠比不上在原位提示更好。尤其是如果觸發操作或視線焦點在介面邊緣,之後螢幕中央出現一閃即逝的弱提示未必能夠引起注意。

總的來說,中央位置算是比較省事保險的方案。

2.3 邊緣

消息推送、角標這類利用介面邊緣位置的提示也很常見。

這種位置的好處是不會打擾當前任務,且頂部或底部位置可以擺放較多文字,適合中度或輕度提示。

缺點也很明顯,即很容易被忽略,所以通常要搭配動效、音效。更糟糕的情況是,這種邊緣很有可能距離觸發操作和視線焦點較遠,如果不巧發生了,那麼用戶很有可能看不到。

3. 結構組成3.1 關閉

傳統Windows都是清一色帶有關閉按鈕的,但是大部分情況可能並不需要這個按鈕。因為:

重度提示會在用戶進行選擇操作後自動消失,所以不需要關閉。輕度提示會很快自動消失,也不需要關閉。只有無必選項的中度提示才可能需要關閉按鈕。

3.2 標題

為了不干擾用戶,提示應該是越簡潔易懂越好,所以標題這個東西就很雞肋了。由於一些系統彈窗的結構限制,有時在配置提示的時候為了填充標題區域,不得不寫上“提示”、“二次確認”這種毫無意義的文字。

沒有必要就不要強塞標題了,除了給用戶造成閱讀負擔之外沒有任何好處。

3.3 圖片

從純碎的人機交互上來說,大部分提示其實完全不用配圖,尤其有些系統為了強行配圖,每個提示框都加上一個等級強度的圖示,這樣做其實沒有什麼意義。

但是從視覺美感和易於記憶的角度來看,搭配一些真正合適好看的圖也是不錯的。

3.4 選項

重度提示通常都是要求用戶選擇操作的;輕度提示一般自動消失不需要進行任何選擇。

所以關鍵在於中度提示是否需要提供選項呢?最好是能夠提供可選操作,哪怕用戶可以叉掉或無視提示。

例如在打開新頁面時,因為流量太大問題而出錯。如果簡單處理,給用戶講一下出錯理由就好了。但是如果要真正為體驗而設計,就要考慮用戶此時的心理。使用者發現頁面打不開,不管理由如何就是會覺得不開心。如果這裡有一個回饋入口,提供一個宣洩途徑,哪怕實際上並不能夠解決任何問題,至少能讓用戶在心理上有“做出了努力”的感覺。

3.5 情感

這是很有意思的一點,也是近幾年來才出現的設計趨勢。大部分人都對可愛的事物持有較高的容忍度,例如一個成年人走路摔了一下會被嘲笑,而一個小孩子走路摔了一跤會被說可愛,這可能和呵護下一代的天性有關吧。

利用人的感性這一點,如果將系統包裝成一個較為可愛的人物形象,就能提高用戶對問題的容忍度。提示通常會對用戶造成一定干擾,尤其是問題提示,這些情況是最需要容忍度的,所以此處也是情感包裝的良機。

作者:Z Yuhan,知乎專欄:交互進階

同類文章
Next Article
喜欢就按个赞吧!!!
点击关闭提示