那些看上去不舒服的交互究竟錯在哪裡?

平時的工作中,經常會遇到一些不舒服但是又說不上理由的交互問題。

話不多說,看看幾個例子吧!

問題一:所有內容全部平鋪在一個頁面上

那些看上去不舒服的交互究竟錯在哪裡?

這些最常見的用戶體驗錯誤。

認知負擔

讓所有選項全部展開似乎可以創建功能概覽,但問題是,人的大腦最多隻能理解9個選項,而且老實說,95%的按鈕用戶並不經常使用。

親近原則

另一個問題是按鈕應該與它們影響的數據放在一起,把所有按鈕都擺在一起便意味著失去了視覺上的關聯。

用戶並不討厭滾動

太多的時候可以用滾動,“用戶討厭滾動”通常是在正確的時間沒有正確的上下文,然後通過在一個屏幕上使用盡可能多的信息,來幫助創建上下文來解決滾動問題的副作用。

問題二:下拉菜單分類不清晰

那些看上去不舒服的交互究竟錯在哪裡?

平衡才是關鍵

把你做的界面想象成現實世界,如果你的一個頁面是藏在一堆抽屜中,則需要打開每個抽屜,直到找到所需的內容。這在數字界面中道理也一樣。

如果你的抽屜是合乎邏輯的,並且在正確的地方,這樣做就很好。在花園裡放一些園藝用品聽起來是很不錯的想法,但是你的燒烤用具是否也應該放進去呢?還是放在廚房裡?還是兩個都放?

好的平衡是需要反覆改進的。你多久用一次燒烤用具決定它是否應該放到棚屋還是廚房。

如果只有5個按鈕,可能下拉菜單都不需要,但是如果到了6個以上,這就需要仔細去分析了。

(譯者注:這裡的問題,我理解是把按鈕放在一個大分類或是放在多個小分類,並沒有絕對的對錯,關鍵在於要平衡好。如果分類足夠清晰,則分類可能會更好,但如果分類比較模糊,則全放在一個選項中,也許也不錯。)

問題三:當前位置不清晰

那些看上去不舒服的交互究竟錯在哪裡?

在每個頁面中考慮給用戶創建:

為頁面提供清晰的標題或頁面名稱

如果你的頁面層級深度超過1級,則需要考慮採用麵包屑導航

如果流程有多個步驟,則需要顯示這些步驟。

問題四:太長的內容寬度和太小的文字

那些看上去不舒服的交互究竟錯在哪裡?

網頁上的經驗告訴我們每行不要超過9個單詞(譯者注:我並不贊同作者這個觀點,9個單詞太短了,作者說的可能是在很老的小屏幕上才會有如此規定,現在應該不會有每行這麼少的字數要求,我倒是覺得這裡的重點是每行文字不要過長就行)。當你讀完一行時,你的眼睛需要找到下一行的開始,如果這行太長了,你的眼睛就很難做到這一點。

“但是看看每個頁面我們浪費了多少空間?”

問題五:在彈窗上再彈窗

那些看上去不舒服的交互究竟錯在哪裡?

為了節省空間,設計了一個帶有彈窗的按鈕,點擊按鈕會繼續彈出另一個窗口。

解決辦法是,第一個彈窗做成一個完整的界面,或者把第二個彈窗做在第一個消息彈窗的裡面。

問題六:卡片嵌套卡片

那些看上去不舒服的交互究竟錯在哪裡?

卡片設計現在很流行,所以怎麼樣才能比單張卡片更有效率呢?卡片嵌套卡片。。。頭腦風暴的時候就很容易想到。

當你在另一張卡片內嵌上一張卡片時,用戶的心理模型就會開始崩潰。用戶會下意識地開始疑惑這與其他對象的關係,這個時候邏輯就開始變得混亂了。

解決的辦法其實也很簡單!

不要把它們放在一起,而是把它們放在彼此附近,或者放置在一個版面區域內(好比在一張賭桌上打牌)。

問題七:一個頁面有太多的表單元素

那些看上去不舒服的交互究竟錯在哪裡?

我應該有一長串表單輸入嗎?也許可以分成多個步驟?或者有3列的表單輸入,所以它們都適合放在同一個界面上?

使用單列

最好的做法是把輸入表單維持在一列。這樣用戶的眼睛就能夠很自然地看下來,並且也能很方便的檢查每個輸入內容。

邏輯流暢

有時,你的輸入字段是用戶即將開始的旅程,或者對他們會造成嚴重的後果(比如:稅務單)。這是將字段分割為多個頁面的最佳時機。

這給了你一些視覺空間來創造一些喘息的機會,並向用戶解釋他們在做什麼,以及為什麼它很重要。

下拉菜單

如果真有1-5個選項,就不要將它們放在下拉菜單中。我知道那樣看起來可能會更加優雅,但是對用戶來說卻並不方便。採用單選按鈕會是一個很友好的方式。

問題八:按鈕規範不明確

那些看上去不舒服的交互究竟錯在哪裡?

頁面上的某些元素可以幫助你確定正在瀏覽的頁面,其他元素應該儘可能清晰一致。

最常見的例子是,“接受”和“取消”按鈕,是放在左邊還是右邊。按經驗來說,當你在流程中前進時,繼續的那個按鈕應該是綠色的,放在右邊,並且按鈕上有一個文本,解釋它的功能,比如“同意”,“繼續”或“購買”。

(譯者注:這裡關於按鈕擺放的位置,有2點需要去注意的:1、流程前進的順序與閱讀習慣有關係,文中說的是從左往右閱讀的方式。但有些地區的閱讀順序是從右往左讀,比如阿拉伯國家,那麼此時前進的方向應該在左邊;2、保持每個界面中的相同含義的按鈕順序一致性)

快速回顧下

不要超過9個按鈕

把下拉菜單作為最後手段

給每個頁面加一個標題

當頁面層級超過1時,給它加一個麵包屑導航

在多步驟操作中,顯示具體步驟

每行不超過9個文字(譯者注:這條我不是很同意,見上文解釋)

切勿在彈窗中再使用彈窗

切勿卡片嵌套卡片

儘可能使用一列表單

注意按鈕的描述文字


分享到:


相關文章: