Good UI

之前重新設計了博客的界面,對網站User Interface的設計又多了一些想法。於是決定把它們用圖文的形式記錄下來。設計一個好的用戶界面目的是要讓用戶方便使用,但要真的做到這一點並不容易。為了達到這個設計目標我做了一些嘗試。

1. One column layout instead of multi-columns

單欄的頁面佈局相較兩欄或者三欄的設計可以讓用戶更加專注於你的內容本身。自上到下的把用戶的視線集中在屏幕正中,相比之下多欄的佈局很容易讓用戶在瀏覽到一半時就被旁邊的鏈接分散掉注意力。

idea01
One Column Layout

2. Merging similar functions instead fragmenting the UI

在設計頁面元素的時候很容易一不注意的放置許多功能類似的條目,過多功能類似的條目容易讓用戶的視線分散開,在尋找他們需要的功能時也會陷入麻煩,徒增了用戶的適應曲線。檢查一下自己的頁面上有沒有可以結合到一起的功能鍵。

idea02
Merging Similar Functions

3. Repeating primary action instead of showing it just once

在較長的頁面頂端和底部重複出現主要選項。你當然不希望在同一個頁面中反覆多次出現相同的選項來煩惱用戶,但對於一個較長的頁面來說,當用戶下滾到頁面底端後開始思考下一步做什麼時如果出現幾個重要的選項會帶來很大的方便。

idea03
Repeating Primary Action

4. Recommending instead of showing equal choices

當你在向用戶offer多個產品時,一個突出的建議產品能在用戶做決定時在背後輕推一把。心理學解釋說人在做決定時面對的選項越多作出決定的幾率也越低。沒必要讓用戶在做選擇時糾結致死,試著突出某個特定的選項吧。

idea04
Recommending

5. Undos instead of prompting for confirmation

想像你的某個用戶剛點了一個按鈕或者鏈接,這時候如果彈出一個窗口要求用戶確認是否執行此項操作,這就好像是用戶不知道自己在做什麼一樣,讓用戶以為你在懷疑他的智商。相較之下劃出一個不那麼突兀的Undo選項就要平滑的多。用戶在訪問時人為的操作失誤肯定是有的,但比例不會很高,從效率和美觀的角度考慮彈出式的窗口也是很不人性化的體驗。

idea05
Undos

6. Telling who it's for instead of targeting everyone

你的產品有特定的針對市場,訪問你網站的用戶也可能是一批特殊的人群。比起告訴你的用戶你什麼都會,如果能把 “你是這方面的專家,你所服務的用戶是這一批特定人群。”這樣的信息傳遞出去也許可以得到更多的用戶。細分化的定位也許會讓你損失一些些潛在的用戶。但是透明更能建立起信任的關係。

idea06
Telling Who It's For

7. More contrast instead of similarity

把頁面中某些重要的按鈕或者選項與周圍元素區分開,能更加突出你的界面。增加對比度的方法有很多。比如明暗度,你可以將特定元素表現的偏暗或者偏亮。比如深淺度,網站頁面不是一個平面,你可以使用陰影效果來浮起某個元素。還有就是顏色,使用對比度強烈的顏色來提升對比度。

idea07
More Contrast

8. Fewer form fields instead of asking for too many

抗拒單調枯燥的勞動是人們的固有屬性,填表格也屬於這類活動。你的表格中每多一個空格就意味著多一份風險讓你的用戶放棄完成這份表格。填表格會帶來的問題也很多,有些年長者打字速度很慢,更不喜歡填表格。(我常幫我老闆填網購表格… ) 另外如果用戶在手機上打開你的網站的話那填表格就又是一項苦差事。解決方法就是,質問每個填空的必要性然後盡可能的拿掉不必要的填空。但如果你確實需要向用戶收集許多信息,可以考慮看看將表格拆開,把填空分散到不同的頁面中去。

idea08
Fewer Form Fields

9. Exposing options instead of hiding them

下拉菜單的使用有時會隱藏掉一些重要的訊息。每個下拉菜單的使用都會隱藏掉一組選項,而這些選項都需要多一個步驟才能被看到。所以如果不是像選擇日期或者地區之類,而是一些可預見的選項,與其做成下拉菜單倒不如設計為更加直觀的按鈕。

idea09
Exposing Options

10. Suggesting continuity instead of false bottoms

如果你的頁面很長,設計的時候要注意連貫性,給一些連續性的暗示。以防用戶在看完頁面的一部分後就以為到底了。有時候頁面內容之間在電腦屏幕上顯示的一小塊gap到了手機屏幕中會因為比例的關係變成一大塊。

idea10
Suggesting Continuity