引導性交互界面怎么設計才能直觀有效?
在任務流程較為復雜的時候,用戶容易迷失在流程中,從而放棄任務,導致轉化率不盡人意。所以我們在交互界面上需要引導用戶。人機交互中不論是文字、圖像、色彩、動態效果等,主要是通過視覺反饋信息,所以視覺的引導尤為直觀有效。
1. 形色引導
形狀、色彩、大小等進行引導。當人們大腦接收到一定量信息時,會對相似的的信息進行分類來簡化信息的處理,所以我們在設計中可以把同類型的元素使用相同的形狀或色彩等。比如在選擇購買電影票或賓館時,我們所需要篩選的信息較多,如日期、位置、影院/賓館,這時候把這些信息使用相同的樣式展示,用戶很自然的認為這些信息是有關聯的,都是為了篩選影院/賓館所需的條件。
使用形色引導用戶篩選信息
在移動也可以采用這種方式,在信息較多時建議適當隱藏。
移動上的應用
2. 方向引導
默認情況下,我們都習慣從左往右,從上往下的掃描信息,所以我們設計時一般也是依照這個慣例。
方向性視覺線
有時候在一個任務流中或者一個頁面中,難免會遇見迷惑的地方,這時候我們就要引導用戶通向真正的目的地。最典型的就是iOS解鎖提示。
slide to unlock
3. 運動引導
人們最容易捕捉的就是運動的物體,這個運動不是只位移,像iOS解鎖提示同時也使文字有方向閃爍來產生運動,就好像你已經迷失在人海中,有人再向你招手一樣。比如點擊加入購物車之后商品飛到了購物車圖標里、選好觀影座位后座位號飛到了購票訂單處等,視覺自然的就過渡到了下一步驟。
?Mac OS 窗口最小化
移動端同樣適用,如Path。
Path
4. 向導控件
如果一個任務需要多步操作跨越多個頁面,那么可以用向導控件來引導用戶完成多步操作。同時還可以告訴用戶完成這個任務一共需要多少步、現在在哪個階段、剩下多少可以完成任務等。
Amazon
豆瓣同城
End.
本文由 @陳正曦? 授權發布于人人都是產品經理?,未經許可,禁止轉載。
- 目前還沒評論,等你發揮!