引導性交互界面怎么設計才能直觀有效?

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