8個常見的交互細(xì)節(jié)問題
平時的工作中,經(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)
- 更少的點(diǎn)擊;
- 我可以在功能概覽上看到一切我想要的功能;
- 用戶不喜歡滾動。
當(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)
- 更多的焦點(diǎn);
- 減少混亂,更容易找到我想要的東西。
(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):
- 一致的視覺風(fēng)格;
- 設(shè)計(jì)系統(tǒng)驅(qū)動的設(shè)計(jì);
- 高效的頁面使用率。
試想一下這個場景,這是一個星期五的下午,你在一些社交媒體,同事和私人信息之間來回查看,并同時在做工作。你腦子里的最后一件事是你剛才點(diǎn)擊的鏈接和你所在流程中的位置。
在每個頁面中考慮給用戶創(chuàng)建:
- 為頁面提供清晰的標(biāo)題或頁面名稱;
- 如果你的頁面層級深度超過1級,則需要考慮采用面包屑導(dǎo)航;
- 如果流程有多個步驟,則需要顯示這些步驟。
問題四:太長的內(nèi)容寬度和太小的文字
希望充分利用頁面的另一個例子。
爭論的點(diǎn):
- 用戶討厭滾動;
- 高效的頁面使用率。
網(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)需要去注意的:
- 流程前進(jìn)的順序與閱讀習(xí)慣有關(guān)系,文中說的是從左往右閱讀的方式。但有些地區(qū)的閱讀順序是從右往左讀,比如:阿拉伯國家,那么此時前進(jìn)的方向應(yīng)該在左邊;
- 保持每個界面中的相同含義的按鈕順序一致性。
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é)議
dont make me think 這本書里也有講這個 不錯 總結(jié)的很好
交互新手,求大神指導(dǎo) ??
移動端 還是web端,你都不說,三端都有各自的原則和規(guī)范
說的很對啊
大佬,厲害,就是有些鏈接網(wǎng)頁打不開呀。。。。。
有些鏈接需要翻墻
我逼格不高想發(fā)言行么
行吧
老哥,穩(wěn)了…????
??