|
知識普及 ? 用戶體驗(yàn)與網(wǎng)頁界面設(shè)計(jì)
|
|
用戶體驗(yàn)與網(wǎng)頁界面設(shè)計(jì)
|
|
奈薇網(wǎng)頁設(shè)計(jì)
|
于2019-07-12 22:13發(fā)表
|
|
閱讀次數(shù)
|
2263次
|
|
對于青島網(wǎng)站制作交互設(shè)計(jì)師和用戶體驗(yàn)設(shè)計(jì)師來說，最困難的莫過于如何考慮用戶體驗(yàn)的各個(gè)維度，從而做出平衡與結(jié)合，并創(chuàng)造最優(yōu)的產(chǎn)品。菲茨定律嘗試著為用戶體驗(yàn)設(shè)計(jì)師們提供一些可以量化的數(shù)學(xué)性質(zhì)的標(biāo)準(zhǔn)來使得設(shè)計(jì)決定更容易。
通常，運(yùn)用數(shù)字很容易來衡量界面的質(zhì)量和效能：某個(gè)操作的點(diǎn)擊越少越好，定位導(dǎo)航越快越好。常用按鈕被放置的距離操作越近，鼠標(biāo)移動(dòng)越少。
事實(shí)上，你應(yīng)當(dāng)像尊重菲茨定律一樣，尊重各種人類學(xué)準(zhǔn)則和定律，只要它們能夠真正的提升你的用戶體驗(yàn)設(shè)計(jì)。
然而，界面終究是為人服務(wù)的，界面需要具有一致性，需要體貼包容人們，需要具有一定的可玩性，功能需要易被發(fā)現(xiàn)：這類指標(biāo)很難像點(diǎn)擊數(shù)或是像素移動(dòng)距離那樣容易被衡量。那些精確的數(shù)字和簡化的數(shù)學(xué)模型可能會(huì)比無法衡量的各種體驗(yàn)維度更容易獲得設(shè)計(jì)師們的偏好。但數(shù)學(xué)定律應(yīng)當(dāng)被用戶體驗(yàn)設(shè)計(jì)師當(dāng)作設(shè)計(jì)工具和參考，而非金科玉律。
缺陷
為了驗(yàn)證上述菲茨定律的理論研究而進(jìn)行的實(shí)際測試表明，環(huán)形菜單在尋找選項(xiàng)和使用錯(cuò)誤率上較垂直線性菜單有微小的優(yōu)勢。然而當(dāng)問及被試的主觀偏好時(shí)，環(huán)形菜單卻不是人們所愛。
事實(shí)上，菲茨定律所偏愛的環(huán)形菜單，的確具有一些缺陷，這些缺陷在特定情況下甚至遠(yuǎn)遠(yuǎn)超過它帶來的好處。
其中一點(diǎn)就是環(huán)形當(dāng)環(huán)形菜單的選項(xiàng)較多時(shí)，所能提供的選項(xiàng)點(diǎn)擊范圍非常有限。解決這個(gè)問題的方法之一是依據(jù)Hick’s定律移除一些不重要的選項(xiàng)。例如，如果菜單選項(xiàng)不適用于當(dāng)前選中的內(nèi)容，或是它們在界面當(dāng)中的其他位置已經(jīng)存在，那么它們也不一定非要出現(xiàn)在右鍵菜單當(dāng)中。（例如，“撤銷”“重做”“新建文件””保存文件”“打印”或是“放大/縮小”這類操作與“剪切”“復(fù)制”“粘貼”這類通常針對選中項(xiàng)的操作相比，與選項(xiàng)內(nèi)容關(guān)聯(lián)并不強(qiáng)，因此可以把它們放置在工具欄當(dāng)中而非右鍵菜單中）。
第二種管理多選項(xiàng)菜單的方式是次級菜單。與線性菜單相比，在環(huán)形菜單中使用次級菜單會(huì)很容易鋪滿整個(gè)屏幕并且顯得雜亂無章。在這點(diǎn)上面，線性菜單有巨大的優(yōu)勢：線性菜單固有的結(jié)構(gòu)使其很容易展現(xiàn)層級關(guān)系。
分組的菜單選項(xiàng)在線性菜單中更加容易表達(dá)。（圖例：Word2013，截圖PCPro.co.uk）
最后，環(huán)形菜單需要更多的空間。這會(huì)導(dǎo)致兩個(gè)問題：菜單可能會(huì)遮擋選中的選項(xiàng)，并且當(dāng)鼠標(biāo)在屏幕邊緣右擊時(shí)，它們可能很容易彈出在其他位置而非鼠標(biāo)附近。
綜上，有以下情況時(shí)，應(yīng)當(dāng)盡力使用線性菜單而非環(huán)形菜單：
菜單中需要有多個(gè)選項(xiàng)
可能有次級菜單
菜單選項(xiàng)需要被分組和存在優(yōu)先級
屏幕空間非常寶貴
最后，在使用鼠標(biāo)操作的設(shè)備時(shí)，對于屏幕邊緣和角落可能有2個(gè)潛在的問題。在大屏幕中，鼠標(biāo)移動(dòng)的距離很長，由此點(diǎn)擊到邊緣的控件并不一定省力。而且，網(wǎng)頁設(shè)計(jì)師們可能無法有效的利用屏幕的邊緣和角落，這是因?yàn)榫W(wǎng)頁通常運(yùn)行在瀏覽器當(dāng)中。而且網(wǎng)頁也通常被要求使用更好兼容性的居中布局。
在使用非鼠標(biāo)操作的設(shè)備例如觸摸屏?xí)r，將界面元素放在邊角可能不僅不會(huì)帶來易用的提升，甚至可能帶來操作交互的倒退。在大觸摸屏上，這樣的布局可能會(huì)需要用戶不斷的拉伸他們的手臂，從而迅速產(chǎn)生疲勞。因此，在大屏幕界面設(shè)計(jì)中，一些經(jīng)常用到的工具應(yīng)當(dāng)被設(shè)計(jì)成為可以拖拽的。這樣用戶就可以按照自己的意愿來拜訪這些工具欄。而通常用戶可能會(huì)放在他們當(dāng)前主要工作區(qū)域的附近，這樣就又符合了菲茨定律所述節(jié)省移動(dòng)距離的原理。
優(yōu)勢
用更少的體力來完成輸入的好處是非常顯而易見的，尤其是當(dāng)人們使用一些笨重的輸入設(shè)備時(shí)。最具代表性的就是垂直懸掛的觸摸屏，這類觸摸屏通常被放在專業(yè)的辦公環(huán)境當(dāng)中，用于創(chuàng)建，視覺化或是管理大數(shù)據(jù)量的信息數(shù)據(jù)。
菲茨定律將會(huì)促進(jìn)并延長垂直觸摸屏的使用。（圖例：PerceptivePixel）
當(dāng)試用垂直觸摸屏?xí)r，長時(shí)間保持手臂向上會(huì)迅速的導(dǎo)致三角肌疲勞，從而產(chǎn)生各種各樣的錯(cuò)誤，或是最終迫使用戶放棄操作。
因此，避免復(fù)雜和高強(qiáng)度的這類輸入方法有助于促進(jìn)和延長人們對這類設(shè)備的使用。
風(fēng)險(xiǎn)
復(fù)雜難以進(jìn)行的輸入方法有時(shí)卻能夠避免錯(cuò)誤發(fā)生。例如，移動(dòng)設(shè)備通常都是被放在口袋中隨身攜帶，很容易意外的觸發(fā)設(shè)備。在這種情況下，高精度的輸入方法應(yīng)運(yùn)而生。這種輸入方法有著更高的輸入難度從而保證每一個(gè)輸入指令不是意外產(chǎn)生的。并且，這類高精度的輸入方法會(huì)提醒用戶他們正在進(jìn)行的操作相對重要。iPhone關(guān)機(jī)時(shí)的操作，就是最好的范例。
根據(jù)操作結(jié)果的重要性來選擇UI控件元素：滑動(dòng)操作通常被用于危險(xiǎn)的操作（圖例：iPhone，截圖源自tankehu.com）
關(guān)機(jī)或是重啟設(shè)備是非常重要的操作，一旦觸發(fā)，就無法撤銷。因此，它們被設(shè)計(jì)成滑動(dòng)條控件，需要高精度的操作才能觸發(fā)。與其相對的，這里的取消操作產(chǎn)生的后果非常小，因此被設(shè)計(jì)成為一個(gè)普通按鈕。
滑動(dòng)操作和其他需要高精度操作的手勢既是最安全的輸入方法，同時(shí)也是最冗長的輸入方法。為了平衡安全性和易用性，這些操作通常被保留用在較為危險(xiǎn)而又很少執(zhí)行的命令，例如解鎖屏幕，關(guān)閉設(shè)備，進(jìn)行系統(tǒng)定制設(shè)置，運(yùn)行管理員任務(wù)或是關(guān)閉鬧鐘等等。當(dāng)另外一些危險(xiǎn)的指令在使用中會(huì)被頻繁使用時(shí)，例如編輯，刪除或移動(dòng)操作，合理的圖標(biāo)和包含確認(rèn)的兩步輸入法而非高精度輸入就更加合適。盡管兩部輸入法并不像高精度輸入方式那樣安全，但是它們更好的照顧到了易用性，因?yàn)檫@些操作發(fā)生的頻率較高。
另外一個(gè)采用復(fù)雜高精度輸入法的原因是為了利用手勢操作的重要特性–節(jié)省輸入空間。根據(jù)菲茨定律關(guān)于效率的評價(jià)標(biāo)準(zhǔn)，包含一定的拖拉手勢需要更高強(qiáng)度的肌肉緊張，因此，菲茨定律更推薦點(diǎn)擊操作。然而，手勢操作具有一個(gè)很大的優(yōu)勢—無需放置界面控件在屏幕中就可以完成功能操作。
以在deviantART管理藝術(shù)收藏為例，為了將一個(gè)選項(xiàng)添加到你的收藏，你不需要點(diǎn)擊一個(gè)按鈕。你只需要拖動(dòng)一幅打算收藏的作品，收藏面板會(huì)自動(dòng)觸發(fā)顯示，允許你把藏品放置其中。
由拖拉操作觸發(fā)并完成的操作無需在界面中放置觸發(fā)操作的控件元素（圖例deviantART）
由于拖拉操作不需要按鈕或是其他UI控件來觸發(fā)功能，因此，它對于節(jié)省界面空間，提升利用率很有幫助。當(dāng)然，不足也同樣明顯，缺乏明顯的視覺提示告訴用戶關(guān)于手勢操作的存在（除非通過tooltip提示）無論如何，如果屏幕空間確實(shí)很緊張，那么手勢輸入雖然麻煩，但卻絕對值得。
菲茨定律第四條：利用主要像素
主要像素的理論表明，某些像素比其他像素更加容易獲得。例如，屏幕的邊緣和角落更容易接近。然而，最容易接近到的像素還是那些鼠標(biāo)當(dāng)前所在的位置，這也是右鍵點(diǎn)擊彈出菜單的緣由。
優(yōu)勢
右鍵菜單會(huì)在用戶當(dāng)前鼠標(biāo)指針右擊時(shí)出現(xiàn)，并且提供給用戶與當(dāng)前內(nèi)容相關(guān)的選項(xiàng)。因此，你不需要再移動(dòng)鼠標(biāo)一定距離到某個(gè)特定的位置。通常有兩種右鍵菜單：線性右鍵菜單和圓弧形或環(huán)形菜單。
按照菲茨定律，環(huán)形菜單會(huì)比垂直線性才對那更優(yōu)。這是因?yàn)椋菏紫?，梯形的菜單選項(xiàng)擁有更大的點(diǎn)擊響應(yīng)區(qū)域。其次，由于菜單采用的環(huán)形排列，鼠標(biāo)距離每一個(gè)選項(xiàng)的距離都是基本想通的。由此帶來的一致性會(huì)幫助用戶的肌肉產(chǎn)生記憶反射。與此相對的，在線性菜單當(dāng)中，只有最接近鼠標(biāo)初始位置的選項(xiàng)是最容易被點(diǎn)擊到的，因此，這個(gè)位置應(yīng)當(dāng)放置最常用的菜單選項(xiàng)。
菲茨定律更偏好環(huán)形菜單（左例：OneNote2013,右例：Firefox）
將界面控件放置在屏幕邊緣或是角落的另外一個(gè)好處是鼠標(biāo)的移動(dòng)受限于屏幕的自然空間，從而更容易達(dá)到。
屏幕邊緣和角落是屏幕最重要的位置（圖例：Particletree)
用戶可以直接將鼠標(biāo)大幅度移動(dòng)到屏幕的邊緣或是角落而不用進(jìn)一步微調(diào)。因此，目標(biāo)也會(huì)更容易被點(diǎn)擊到。
|