從三個角度分析提示設計
本文作者以移動端為例,從三個角度分析提示設計——重要程度、出現位置和內容構成。enjoy~
稍微復雜一點的產品都少不了提示功能,這種全局模塊即需要整體解決方案,也需要具體運用規則。以手機 App 為例,提示種類很多(操作成功、操作失敗、收藏點贊、二次確認…);展示形式也很多。
我最近對這一方面有所思考,結合外網資料整理了一套提示設計的方法和建議。為了方便解釋,下面會以移動端為例,但是核心的方法理念是適用于各種終端平臺的。
下文會從三個角度分析提示設計——重要程度、出現位置和內容構成。
1. 重要程度
提示種類之多,幾乎無法完全枚舉,況且很多Bug提示是無法在設計時就預料到的。所以比較實際的方法是用重要程度劃分提示。但是以什么為依據呢?我這里參考了的可用性問題評級規則,利用“如果沒有提示,可能對用戶產生的影響”來判斷提示的重要程度。
想要了解可用性問題評級規則的話,可以去看我早期寫的這篇理論性較強的文章:《正視可用性問題》
1.1 重度提示
不可逆、涉及金錢或不建議的變更信息,如:永久刪除、購買、取消關注…
設計方向:
- 確保用戶能夠看到提示,哪怕打斷當前任務
- 必須用戶主動操作或進行選擇才能繼續
1.2 中度提示
用戶可能需要了解、感興趣的變更信息,如:好友消息、網絡錯誤、賬號升級…
設計方向:
- 在盡量不打斷當前任務的前提下,確保用戶可以看到提示
- 不自動消失,但用戶可以選擇忽視
1.3 輕度提示
用戶可以預料的變更信息,如:發送成功、添加收藏、開啟省流量模式…
設計方向:
- 避免對當前任務產生任何干擾,讓感興趣的用戶能夠發現提示
- 自動消失,無需任何操作
2. 出現位置
位置對于注意力來說非常重要,提示出現在不同地方會產生完全不同的效果。因為可能的位置太多,這里主要將其分為三類:
2.1 原位
在用戶原本操作之處、視線焦點出現提示肯定是最好的方式。
因為無論引導如何強烈,對用戶來說有一個代價是無可避免的——轉移視線。尤其是有時候用戶做某件事情太過集中時,可能再強的旁側提示都無法引起注意。所以像這樣相當于把信息放到用戶眼前,就消減了很多問題和代價。
這種方式固然好,但是可行性卻相對較低。像上例中收藏圖標點一下加個動效變實心這種當然簡單,但是很多提示(如加載失敗)都不存在觸發操作或不確定視線焦點,對于這類提示要用原位展示的話,視線成本就比較高了。
也就是 Google 這種量級的公司,才敢在構架 Material Design 時提出,我之前也在《谷歌 Material Design 從這些方面打破了我思維局限》中用“不是視線追蹤元素,而是元素追蹤視線”進行了闡釋??梢簿瓦B Google 這種量級的公司,都沒有辦法真正將這套理念鋪展運用起來,實際上他們大部分產品并沒有實現 Material Design 中的很多理想化的設計。
但是從技術發展的發展速度來看,這些應該都不是太遙遠的事情。
2.2 中央
中央彈窗、浮層可能是我們印象最深刻的提示位置了,無需過多解釋。
這種提示必然從視覺上打斷了當前任務,所以更加適合重度程度較高的提示。
如果自動消失,也是可以運用于弱提示的,但是這樣的效果遠比不上在原位提示更好。尤其是如果觸發操作或視線焦點在界面邊緣,之后屏幕中央出現一閃即逝的弱提示未必能夠引起注意。
總的來說,中央位置算是比較省事保險的方案。
2.3 邊緣
消息推送、角標這類利用界面邊緣位置的提示也很常見。
這種位置的好處是不會打擾當前任務,且頂部或底部位置可以擺放較多文字,適合中度或輕度提示。
缺點也很明顯,即很容易被忽略,所以通常要搭配動效、音效。更糟糕的情況是,這種邊緣很有可能距離觸發操作和視線焦點較遠,如果不巧發生了,那么用戶很有可能看不到。
3. 結構組成
3.1 關閉
傳統Windows都是清一色帶有關閉按鈕的,但是大部分情況可能并不需要這個按鈕。因為:
- 重度提示會在用戶進行選擇操作后自動消失,所以不需要關閉。
- 輕度提示會很快自動消失,也不需要關閉。
- 只有無必選項的中度提示才可能需要關閉按鈕。
3.2 標題
為了不干擾用戶,提示應該是越簡潔易懂越好,所以標題這個東西就很雞肋了。由于一些系統彈窗的結構限制,有時在配置提示的時候為了填充標題區域,不得不寫上“提示”、“二次確認”這種毫無意義的文字。
沒有必要就不要強塞標題了,除了給用戶造成閱讀負擔之外沒有任何好處。
3.3 圖片
從純碎的人機交互上來說,大部分提示其實完全不用配圖,尤其有些系統為了強行配圖,每個提示框都加上一個等級強度的圖標,這樣做其實沒有什么意義。
但是從視覺美感和易于記憶的角度來看,搭配一些真正合適好看的圖也是不錯的。
3.4 選項
重度提示通常都是要求用戶選擇操作的;輕度提示一般自動消失不需要進行任何選擇。
所以關鍵在于中度提示是否需要提供選項呢?最好是能夠提供可選操作,哪怕用戶可以叉掉或無視提示。
例如在打開新頁面時,因為流量太大問題而出錯。如果簡單處理,給用戶講一下出錯理由就好了。但是如果要真正為體驗而設計,就要考慮用戶此時的心理。用戶發現頁面打不開,不管理由如何就是會覺得不開心。如果這里有一個反饋入口,提供一個宣泄途徑,哪怕實際上并不能夠解決任何問題,至少能讓用戶在心理上有“做出了努力”的感覺。
3.5 情感
這是很有意思的一點,也是近幾年來才出現的設計趨勢。大部分人都對可愛的事物持有較高的容忍度,例如一個成年人走路摔了一下會被嘲笑,而一個小孩子走路摔了一跤會被說可愛,這可能和呵護下一代的天性有關吧。
利用人的感性這一點,如果將系統包裝成一個較為可愛的人物形象,就能提高用戶對問題的容忍度。提示通常會對用戶造成一定干擾,尤其是問題提示,這些情況是最需要容忍度的,所以此處也是情感包裝的良機。
作者:Z Yuhan,知乎專欄:交互進階
來源:https://zhuanlan.zhihu.com/p/35974525?group_id=971686050897227776
本文由 @Z Yuhan?授權發布于人人都是產品經理。未經許可,禁止轉載。
題圖來自 Pexels,基于 CC0 協議
非常有價值,謝謝分享
最近越來越意識到交互設計的重要性了
有情感的產品都是需要money的
不明覺厲 ?
哈哈,回想幾個月前的評論,目前來看覺得沒有說明白,我主要指的是那些已經成型,并且需要提高用戶體驗的產品,需要投入大量的資源進行改版提升用戶體驗,所以在產品定義之初做一個統一的交互規范還是非常有必要的。