“減少點擊”“我需要看到所有內(nèi)容，創(chuàng)造概覽““用戶討厭滾動“

錯誤1：所有內(nèi)容都在一個頁面中顯示

這是最常見的錯誤交互。

你要做的小型app是一個密密麻麻的界面，在你充分了解這個app之前就已經(jīng)添加了很多功能，你的整屏充滿了按鈕。

不要著急，我們也曾經(jīng)歷過這些。

爭論點：“減少點擊”“我需要看到所有內(nèi)容，創(chuàng)造概覽““用戶討厭滾動“

當(dāng)我看到這個方案時，它讓我想起了展開了所有工具的瑞士軍刀，而我唯一想使用的是開瓶器。

內(nèi)容超負(fù)荷

讓所有選項分散開來看起來像是創(chuàng)建了概覽，但問題在于，你的大腦最多只能理解9個選項，并且實際上可能有95%的按鈕是用戶不常用的。

相關(guān)聯(lián)

另一個問題是按鈕應(yīng)該接近與它們相關(guān)聯(lián)的數(shù)據(jù)。擁有更多按鈕意味著失去視覺相關(guān)度。

用戶不討厭滾動

“用戶討厭滾動”常常是因為在頁面中內(nèi)容安排不合理，這是在單個屏幕內(nèi)擠入了過多的信息來輔助理解內(nèi)容而造成的副作用。

“但在我們的分析中，我們發(fā)現(xiàn)在落地頁只有10％的用戶能滾動屏幕到頁面底部”這似乎使90％的觀眾不喜歡滾動成為了一個合理的說法。

其實問題不在于滾動，而在于信息量。在頁面上提供更多信息并不意味著用戶會吸收這些信息，而會更快是他們失去耐心離開。

觀點來自UX法則中的：米勒法則和接近法則。

錯誤2:關(guān)于下拉菜單

你已經(jīng)清理了你的屏幕，并把所有的按鈕放在下拉菜單中。

爭論點：“更多焦點““減少混亂，更容易找到我需要的東西“

平衡是關(guān)鍵

將你的界面視為物理空間，如果你將一個物品隱藏在一組抽屜中，則需要打開每個抽屜，直到找到所需的內(nèi)容。數(shù)字用戶界面也是如此。

如果你的抽屜是合乎邏輯的，并且處于正確的位置，這種方式運作良好。但舉個例子，在花園棚的抽屜里放置花園用品聽起來很合理，那么你的燒烤用品也放在花園里？還是在廚房里？或兩個地方都放一些？

保持一個良好的平衡要考慮很多。你多久使用一次燒烤爐來決定它應(yīng)該放入棚屋還是廚房。

如果你只有5個按鈕，他們可能不需要下拉，如果有6個按鈕，就會需要下拉。

錯誤3:導(dǎo)航不清晰讓用戶迷失

你的項目擁有一致的設(shè)計系統(tǒng)和品牌風(fēng)格，所有頁面都一樣。很快你就會感覺迷失在頁面中，不知道你是否曾經(jīng)看過這個頁面，或者是否打開了一個具有類似狀態(tài)的不同頁面。

爭論點：“一致的視覺風(fēng)格”“設(shè)計系統(tǒng)驅(qū)動設(shè)計”“高效利用界面空間”

這是星期五下午，你有工作要做，并忙于處理社交媒體、同事談話和一些私人信息。你腦中的關(guān)注點就在你剛才點擊的鏈接上和你此時身處的流程中。

如何為這個用戶創(chuàng)建一個界面？

1、為頁面提供清晰的標(biāo)題或頁面名稱

2、如果你的菜單層級超過1級，請使用面包導(dǎo)航

3、如果流程有多個步驟，請顯示這些步驟。

錯誤4:一行文字過長和使用小號文字

這是希望充分利用屏幕的另一個例子。

爭論點：“用戶討厭滾動”“高效利用界面空間”

網(wǎng)頁排版的經(jīng)驗法則是每行不超過9個單詞。當(dāng)你讀完一行時，你的眼睛需要移動到下一行，如果這行文字太長了，你的眼睛很難做到這一點。

“ 但是我們正在浪費界面空間 ”

你在閱讀medium的文章時，你有沒有注意到他們浪費了多少界面空間？

你所謂的浪費實際上是一種掌控，如果你想要掌控這些的留白，就要刪除無效內(nèi)容，只留下最重要的。

觀點來自1910年電子郵件的排版方法

錯誤5:在窗口中彈出窗口

為了節(jié)省空間，點擊一個按鈕進(jìn)入通知的彈窗。

在通知彈窗中還有一個按鈕，點擊彈出另一個彈窗。

爭論點：“創(chuàng)建更多的內(nèi)容關(guān)聯(lián)”

用戶點擊后會發(fā)生什么？

問題在于毀掉了用戶操作的心理模型。如果他關(guān)閉第二個彈窗，他會回到上一級彈窗還是回到原始頁面？

第一個彈窗應(yīng)該設(shè)計成一個頁面，或者第二個彈窗應(yīng)該改成內(nèi)嵌的錯誤信息。

錯誤6:卡片里包含卡片

目前卡片化趨勢正在發(fā)展，那么有什么比單張卡片更好的方法？想一下卡片里面包含卡片是否可行？

爭論點：“嵌套卡片來創(chuàng)造視覺層級感?！?/p>

交互設(shè)計師經(jīng)常談?wù)撘曈X層級。元素在界面上的層級關(guān)系，表達(dá)了它對于用戶的重要性。

久而久之，引入了卡片這類物理元素。

在傳統(tǒng)的卡片組中，卡片的大小都是相同的。

卡片被放置在其他卡片的旁邊或下方來顯示某些狀態(tài)或表達(dá)某種關(guān)系。

當(dāng)你將一張卡片嵌入另一張卡片時，用戶對于卡片使用方法的心理模型開始崩潰。用戶下意識地開始質(zhì)疑頁面中其他對象的關(guān)系，并且失去了應(yīng)有的邏輯。

其實解決問題的辦法很簡單！

不要嵌入卡片，而是將它們放在彼此靠近的位置，彼此相鄰，或放置在同一區(qū)域內(nèi)（就像將卡片放在場的桌上）。

錯誤7:不知該如何處理表單字段

我應(yīng)該有一長串表單輸入框嗎？也許把它分成多個步驟？或者有3列的表單輸入框，把它們放在同一界面里？

爭論點：“用戶討厭滾動?！?/p>

主要問題不在于頁面數(shù)量或表單數(shù)量，而在于一次能在屏幕上顯示多少表單。像按鈕一樣，在保證提供內(nèi)容和便于使用的基礎(chǔ)上，盡可能減少表單。

始終使用單個列

好做法是始終將輸入字段放入單個列中。

方便用戶的視線移動來查看每個部分。

你在講一個故事嗎？

有時你設(shè)計的輸入字段的位置是在用戶剛開始打開app時（引導(dǎo)頁），或輸入的內(nèi)容對用戶有很大影響（稅單），這時候是將你的字段分解為多個頁面的好時間。

這時可以在頁面中創(chuàng)造一些留白來創(chuàng)造空間感，并向用戶解釋他們正在做什么，和這個操作的重要性。

下拉菜單

如果只有1-5個項目可供選擇，請不要將它們放在下拉列表中。我知道它可能看起來很美觀，但不值得為它增加用戶的操作步驟。放置單選按鈕是一個更友好的方法。

觀點來自UX Collective的設(shè)計更好的表格

和Stackoverflow的單頁還是多頁表單

錯誤8:不合理的按鈕指示

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

爭論點：“但是蘋果或者谷歌這樣做”

最常見的例子是接受和取消按鈕的左右位置問題。經(jīng)驗法則是，當(dāng)你在流程中通往下一步時，該按鈕是綠色的，在右側(cè)，并配有文案來解釋其功能，例如“接受”、“繼續(xù)”或“下一步”。

還要避免一些“破壞性操作”的按鈕的文案使用戶感到迷惑，比如你想要取消訂閱時應(yīng)該點擊“取消”還是“取消訂閱”。

觀點來自UX Collective的破壞性操作的文案編寫

觀點快速回顧：

1、不超過9個按鈕

2、如果有其他辦法就不要使用下拉菜單

3、給每個頁面一個標(biāo)題

4、當(dāng)頁面層級超過1級時，用面包導(dǎo)航

5、在多個步驟中，顯示步驟

6、每行不超過9個字。

7、切勿在彈窗中使用彈窗

8、切勿將卡片嵌入卡片中

9、將表單字段放置在單個列中

10、給按鈕描述性名稱

當(dāng)前名稱：“減少點擊”“我需要看到所有內(nèi)容，創(chuàng)造概覽““用戶討厭滾動“
標(biāo)題路徑：http://muchs.cn/news17/45417.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、外貿(mào)網(wǎng)站建設(shè)、定制開發(fā)、關(guān)鍵詞優(yōu)化、虛擬主機(jī)、定制網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)