亚洲欧美日韩综合系列在线_91精品人妻一区二区_欧美大肥婆一级特大AA片_九色91视频免费观看_亚洲综合国产精品_av中文字幕在线不卡_久久精品色综合网_看黄色视频的软件_无卡无码高清中文字幕码2024_亚洲欧美日韩天堂网

交互入門指南—常見(jiàn)的8個(gè)交互錯(cuò)誤

來(lái)源:小小Shell糯米 發(fā)布時(shí)間:2019-01-11 14:26:47 閱讀量:1306

文章講解了企業(yè)開發(fā)者常犯的8個(gè)交互錯(cuò)誤,以及10個(gè)交互觀點(diǎn)總結(jié),在工作中非常實(shí)用。


背景介紹

在我擔(dān)任a Mendix partner交互設(shè)計(jì)師的工作中,經(jīng)常遇到自己組建的團(tuán)隊(duì),創(chuàng)建出色的內(nèi)部app。我的工作是優(yōu)化這些app的交互邏輯。

最有意思的我會(huì)被一些很有創(chuàng)意的解決問(wèn)題的方法所吸引,迫使我來(lái)解釋為什么一些看起來(lái)很有邏輯的方案是不適當(dāng)?shù)摹?/p>

我給出的解決方案不是一個(gè)“單一的事實(shí)”,總有例外,不要把我在這里寫的內(nèi)容照搬到項(xiàng)目里,而是用它作為開始溝通項(xiàng)目的靈感。

錯(cuò)誤1:所有內(nèi)容都在一個(gè)頁(yè)面中顯示


這是最常見(jiàn)的錯(cuò)誤交互。

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

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

爭(zhēng)論點(diǎn):

“減少點(diǎn)擊”

“我需要看到所有內(nèi)容,創(chuàng)造概覽“

“用戶討厭滾動(dòng)“

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

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

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

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

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

用戶不討厭滾動(dòng)

“用戶討厭滾動(dòng)”常常是因?yàn)樵陧?yè)面中內(nèi)容安排不合理,這是在單個(gè)屏幕內(nèi)擠入了過(guò)多的信息來(lái)輔助理解內(nèi)容而造成的副作用。

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

其實(shí)問(wèn)題不在于滾動(dòng),而在于信息量。在頁(yè)面上提供更多信息并不意味著用戶會(huì)吸收這些信息,而會(huì)更快是他們失去耐心離開。


觀點(diǎn)來(lái)自UX法則中的:米勒法則和接近法則。


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

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

爭(zhēng)論點(diǎn):

“更多焦點(diǎn)“

“減少混亂,更容易找到我需要的東西“

平衡是關(guān)鍵

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

如果你的抽屜是合乎邏輯的,并且處于正確的位置,這種方式運(yùn)作良好。但舉個(gè)例子,在花園棚的抽屜里放置花園用品聽(tīng)起來(lái)很合理,那么你的燒烤用品也放在花園里?還是在廚房里?或兩個(gè)地方都放一些?

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

如果你只有5個(gè)按鈕,他們可能不需要下拉,如果有6個(gè)按鈕,就會(huì)需要下拉。


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

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

爭(zhēng)論點(diǎn):

“一致的視覺(jué)風(fēng)格”

“設(shè)計(jì)系統(tǒng)驅(qū)動(dòng)設(shè)計(jì)”

“高效利用界面空間”

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

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

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

2、如果你的菜單層級(jí)超過(guò)1級(jí),請(qǐng)使用面包導(dǎo)航

3、如果流程有多個(gè)步驟,請(qǐng)顯示這些步驟。


錯(cuò)誤4:一行文字過(guò)長(zhǎng)和使用小號(hào)文字

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

爭(zhēng)論點(diǎn):

“用戶討厭滾動(dòng)”

“高效利用界面空間”

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

“ 但是我們正在浪費(fèi)界面空間 ”

你在閱讀medium的文章時(shí),你有沒(méi)有注意到他們浪費(fèi)了多少界面空間?

你所謂的浪費(fèi)實(shí)際上是一種掌控,如果你想要掌控這些的留白,就要?jiǎng)h除無(wú)效內(nèi)容,只留下最重要的。


觀點(diǎn)來(lái)自1910年電子郵件的排版方法


錯(cuò)誤5:在窗口中彈出窗口

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

在通知彈窗中還有一個(gè)按鈕,點(diǎn)擊彈出另一個(gè)彈窗。

爭(zhēng)論點(diǎn):

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

用戶點(diǎn)擊后會(huì)發(fā)生什么?

問(wèn)題在于毀掉了用戶操作的心理模型。如果他關(guān)閉第二個(gè)彈窗,他會(huì)回到上一級(jí)彈窗還是回到原始頁(yè)面?

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


錯(cuò)誤6:卡片里包含卡片

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

爭(zhēng)論點(diǎn):

“嵌套卡片來(lái)創(chuàng)造視覺(jué)層級(jí)感?!?/p>

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

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

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

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

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

其實(shí)解決問(wèn)題的辦法很簡(jiǎn)單!

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


錯(cuò)誤7:不知該如何處理表單字段

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

爭(zhēng)論點(diǎn):

“用戶討厭滾動(dòng)。”

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

始終使用單個(gè)列

最佳做法是始終將輸入字段放入單個(gè)列中。

方便用戶的視線移動(dòng)來(lái)查看每個(gè)部分。

你在講一個(gè)故事嗎?

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

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

下拉菜單

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


觀點(diǎn)來(lái)自UX Collective的設(shè)計(jì)更好的表格

和Stackoverflow的單頁(yè)還是多頁(yè)表單


錯(cuò)誤8:不合理的按鈕指示

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

爭(zhēng)論點(diǎn):

“但是蘋果或者谷歌這樣做”

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

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


觀點(diǎn)來(lái)自UX Collective的破壞性操作的文案編寫


觀點(diǎn)快速回顧:

1、不超過(guò)9個(gè)按鈕

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

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

4、當(dāng)頁(yè)面層級(jí)超過(guò)1級(jí)時(shí),用面包導(dǎo)航

5、在多個(gè)步驟中,顯示步驟

6、每行不超過(guò)9個(gè)字。

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

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

9、將表單字段放置在單個(gè)列中

10、給按鈕描述性名稱



標(biāo)簽: 設(shè)計(jì)
分享:
評(píng)論:
你還沒(méi)有登錄,請(qǐng)先