8個常見的交互細(xì)節(jié)問題

11 評論 13669 瀏覽 66 收藏 15 分鐘

平時的工作中,經(jīng)常會遇到一些不舒服但是又說不上理由的交互問題。本文作者從爭論的點(diǎn)出發(fā),有理有據(jù)的說明這些問題,并給出了修改建議,當(dāng)然作者也說了他的觀點(diǎn)并非就一定正確,只是希望能夠提供一些思路,但我相信大家應(yīng)該還是能夠從作者的觀察中學(xué)到不少干貨的。

背景介紹

在我為合作企業(yè)Mendix擔(dān)任用戶體驗(yàn)顧問的那段時間中,我經(jīng)常能遇到他們團(tuán)隊(duì)內(nèi)部創(chuàng)造出的一些優(yōu)秀應(yīng)用,我的工作也會涉及到幫助提升那些產(chǎn)品的用戶體驗(yàn)。

最美好的時刻是當(dāng)自己突然來了靈感做出一些創(chuàng)造性設(shè)計(jì)時,也能清晰的看到一些很常見的交互邏輯問題。

我所給出的解決方案也并非真理,要根據(jù)實(shí)際情況來辦,不要照搬我寫的東西,只是把我寫的內(nèi)容當(dāng)做是靈感就好了。

問題一:所有內(nèi)容全部平鋪在一個頁面上

這些最常見的用戶體驗(yàn)錯誤

剛開始工作的時候,你可能會遇到做一個功能眾多的小應(yīng)用,當(dāng)你想再添加一些特色功能之前,會發(fā)現(xiàn)已經(jīng)被你弄的滿屏幕都是按鈕了。

別怕,我們都是這么過來的。

(1)爭論的點(diǎn)

  1. 更少的點(diǎn)擊;
  2. 我可以在功能概覽上看到一切我想要的功能;
  3. 用戶不喜歡滾動。

當(dāng)我看到這個解決方案時,它讓我想起了瑞士軍刀的段子,所有的工具都打開了,但唯一使用的卻是開瓶器。

(2)認(rèn)知負(fù)擔(dān)

讓所有選項(xiàng)全部展開似乎可以創(chuàng)建功能概覽,但問題是:人的大腦最多只能理解9個選項(xiàng),而且老實(shí)說,95%的按鈕用戶并不經(jīng)常使用。

(3)親近原則

另一個問題是按鈕應(yīng)該與它們影響的數(shù)據(jù)放在一起,把所有按鈕都擺在一起便意味著失去了視覺上的關(guān)聯(lián)。

(4)用戶并不討厭滾動

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

“但是在我們的研究中,會發(fā)現(xiàn)只有10%的用戶會滾動到頁面底部”這似乎在說明90%的用戶不喜歡滾動。

其實(shí)問題的關(guān)鍵不在于滾動,而在于信息量。在頁面上提供更多的信息并不意味著用戶能消化,但是會更快的消耗掉用戶的精力而讓他們關(guān)掉頁面。

依據(jù):

  • 米勒定律(https://lawsofux.com/millers-law)
  • 親近原則(https://lawsofux.com/law-of-proximity)

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

所以你已經(jīng)清理了界面,并把所有的按鈕都放到了下拉菜單中。

(1)爭論的點(diǎn)

  1. 更多的焦點(diǎn);
  2. 減少混亂,更容易找到我想要的東西。

(2)平衡才是關(guān)鍵

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

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

好的平衡是需要反復(fù)改進(jìn)的,你多久用一次燒烤用具決定它是否應(yīng)該放到棚屋還是廚房。

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

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

問題三:當(dāng)前位置不清晰

因?yàn)橐恢碌脑O(shè)計(jì)系統(tǒng)和品牌風(fēng)格,所有的頁面看起來都類似。很快,你就會感覺自己好像正漫步在一片森林中,不知道你以前是否看過這個頁面,或者這是否是一個具有類似狀態(tài)的不同頁面。

爭論的點(diǎn):

  1. 一致的視覺風(fēng)格;
  2. 設(shè)計(jì)系統(tǒng)驅(qū)動的設(shè)計(jì);
  3. 高效的頁面使用率。

試想一下這個場景,這是一個星期五的下午,你在一些社交媒體,同事和私人信息之間來回查看,并同時在做工作。你腦子里的最后一件事是你剛才點(diǎn)擊的鏈接和你所在流程中的位置。

在每個頁面中考慮給用戶創(chuàng)建:

  • 為頁面提供清晰的標(biāo)題或頁面名稱;
  • 如果你的頁面層級深度超過1級,則需要考慮采用面包屑導(dǎo)航;
  • 如果流程有多個步驟,則需要顯示這些步驟。

問題四:太長的內(nèi)容寬度和太小的文字

希望充分利用頁面的另一個例子。

爭論的點(diǎn):

  1. 用戶討厭滾動;
  2. 高效的頁面使用率。

網(wǎng)頁上的經(jīng)驗(yàn)告訴我們每行不要超過9個單詞。(譯者注:我并不贊同作者這個觀點(diǎn),9個單詞太短了,作者說的可能是在很老的小屏幕上才會有如此規(guī)定,現(xiàn)在應(yīng)該不會有每行這么少的字?jǐn)?shù)要求,我倒是覺得這里的重點(diǎn)是每行文字不要過長就行)。

當(dāng)你讀完一行時,你的眼睛需要找到下一行的開始,如果這行太長了,你的眼睛就很難做到這一點(diǎn)。

“但是看看每個頁面我們浪費(fèi)了多少空間?”

比如:你現(xiàn)在正在閱讀這篇文章,你有注意到那些沒有利用上的空間嗎?

你猜怎么著,所謂的浪費(fèi)實(shí)際上也是一種投資,如果有很長的一行文本對你來說也沒問題,那說明這些文本對你來說是非常重要的(譯者注:我的理解是你會認(rèn)真的去看這些文字而忽略掉文字的長短),如果不是這樣,還是盡可能的短一些。

1910的電子郵件的排版方法:(http://blog.weare1910.com/post/78113100010/a-typographic-approach-to-email)(譯者注:1910不是年份,是一個網(wǎng)站的名字)

問題五:在彈窗上再彈窗

為了節(jié)省空間,設(shè)計(jì)了一個帶有彈窗的按鈕,點(diǎn)擊按鈕會繼續(xù)彈出另一個窗口。

爭論的點(diǎn):上下文更加連貫。

問題是,這樣會打破用戶在這個過程中的心理模型。如果他完成了第二個彈窗上的操作,他會回到原來的彈窗還是回到原來的界面?

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

問題六:卡片嵌套卡片

卡片設(shè)計(jì)現(xiàn)在很流行,所以怎么樣才能比單張卡片更有效率呢?

卡片嵌套卡片,頭腦風(fēng)暴的時候就很容易想到。

爭論的點(diǎn):嵌套的卡片可以創(chuàng)建好的視覺層級

用戶體驗(yàn)設(shè)計(jì)師經(jīng)常會探討視覺層級結(jié)構(gòu),元素在界面中的組織方式,被認(rèn)為是對用戶來說最重要的。在這一過程中,我們引入了現(xiàn)實(shí)世界中的類似卡片一樣的模型元素。

在傳統(tǒng)的卡片組中,卡片的大小都是相等的??ㄆ环胖迷谄渌ㄆ匣蚺赃?,以傳達(dá)某些狀態(tài)或關(guān)系。當(dāng)你在另一張卡片內(nèi)嵌上一張卡片時,用戶的心理模型就會開始崩潰。用戶會下意識地開始疑惑這與其他對象的關(guān)系,這個時候邏輯就開始變得混亂了。

解決的辦法其實(shí)也很簡單!不要把它們放在一起,而是把它們放在彼此附近,或者放置在一個版面區(qū)域內(nèi)(好比在一張賭桌上打牌)。

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

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

(1)爭論的點(diǎn):用戶不喜歡滾動。

主要問題在于頁面數(shù)量或者表單數(shù)量,一次只能在界面中顯示多少表單。像按鈕一樣,應(yīng)該盡可能減少到最小程度,這仍然需要考慮上下文和易用性。

(2)使用單列

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

(3)邏輯流暢

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

這給了你一些視覺空間來創(chuàng)造一些喘息的機(jī)會,并向用戶解釋他們在做什么,以及為什么它很重要。

(4)下拉菜單

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

UX Collective——設(shè)計(jì)更好的表格(https://uxdesign.cc/design-better-forms-96fadca0f49c?epik=0KSYeE_IWH4Bw)

Stackoverflow——單頁還是多頁?(https://ux.stackexchange.com/questions/36956/single-page-or-multi-page-forms)

問題八:按鈕規(guī)范不明確

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

爭論的點(diǎn):但是蘋果/谷歌是這樣做的。

最常見的例子是:“接受”和“取消”按鈕,是放在左邊還是右邊。按經(jīng)驗(yàn)來說,當(dāng)你在流程中前進(jìn)時,繼續(xù)的那個按鈕應(yīng)該是綠色的,放在右邊,并且按鈕上有一個文本,解釋它的功能,比如:“同意”,“繼續(xù)”或“購買”。

譯者注:這里關(guān)于按鈕擺放的位置,有2點(diǎn)需要去注意的:

  1. 流程前進(jìn)的順序與閱讀習(xí)慣有關(guān)系,文中說的是從左往右閱讀的方式。但有些地區(qū)的閱讀順序是從右往左讀,比如:阿拉伯國家,那么此時前進(jìn)的方向應(yīng)該在左邊;
  2. 保持每個界面中的相同含義的按鈕順序一致性。

UX Collective——為按鈕選擇合適的文案(https://uxdesign.cc/the-microcopyist-cancellation-confirmation-conflagration-8a6047a4cf9)

快速回顧

  • 不要超過9個按鈕;
  • 把下拉菜單作為最后手段;
  • 給每個頁面加一個標(biāo)題;
  • 當(dāng)頁面層級超過1時,給它加一個面包屑導(dǎo)航;
  • 在多步驟操作中,顯示具體步驟;
  • 每行不超過9個文字(譯者注:這條我不是很同意,見上文解釋);
  • 切勿在彈窗中再使用彈窗;
  • 切勿卡片嵌套卡片;
  • 盡可能使用一列表單;
  • 注意按鈕的描述文字。

 

原文鏈接:https://blog.prototypr.io/common-ux-mistakes-made-by-business-developers-e837d0b31379

原文作者:Jason Teunissen

譯者:彩云Sky,公眾號:彩云譯設(shè)計(jì)

本文由 @彩云Sky 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載

題圖來自Unsplash,基于CC0協(xié)議

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. dont make me think 這本書里也有講這個 不錯 總結(jié)的很好

    來自上海 回復(fù)
  2. 交互新手,求大神指導(dǎo) ??

    來自北京 回復(fù)
  3. 移動端 還是web端,你都不說,三端都有各自的原則和規(guī)范

    回復(fù)
  4. 說的很對啊

    回復(fù)
  5. 大佬,厲害,就是有些鏈接網(wǎng)頁打不開呀。。。。。

    來自浙江 回復(fù)
    1. 有些鏈接需要翻墻

      來自廣東 回復(fù)
  6. 我逼格不高想發(fā)言行么

    回復(fù)
    1. 行吧

      回復(fù)
  7. 老哥,穩(wěn)了…????

    回復(fù)
    1. ??

      來自廣東 回復(fù)