觸控時代的菲茨定律

已發表: 2022-03-10
快速總結 ↬在本文中,Steven Hoober 將焦點放在菲茨定律上,並解釋了為什麼我們應該始終提出問題並考慮特定的指導方針和教訓對我們的用戶和我們的產品意味著什麼。

當我開始為移動界面編寫觸控設計時,我經常會發現一個有趣的話題或切線,這些話題或切線會導致雜草叢生,並且不得不阻止自己過分追求它。 我不想成為一個隱士,死在一個從未完成的十五卷作品中,主題不斷變化。

但是很多都值得單獨討論,你可能會喜歡的一個是菲茨定律,以及它如何與觸摸屏一起工作。 大多數任何類型的交互設計師都會認識到這一點,並且通常會死記硬背地知道一些非常小的課程子集。 所述的法律是:

“一個人將指針移動到目標區域所需的時間是到目標的距離除以目標大小的函數。”

然後有一系列術語和可利用的教訓。 一些常見的:

  • 零點
    鼠標指針或光標下的像素立即可用,無需移動。
  • 越大越好
    較大的目標總是比較小的目標更容易點擊。
  • 魔法邊緣
    屏幕邊緣“無限深”; 當鼠標到達那裡時,您不會錯過邊緣。 例如,頂部邊緣的菜單比相同大小的項目更容易單擊,只是稍微偏移。
  • 魔術角
    這種無限深度對於角落來說是雙重的,所以這些是最容易選擇不在鼠標下方的區域。

當然,我們都知道這在很多情況下並非普遍適用。 還有其他因素在起作用。 過大的按鈕實際上很難使用,因為它們不再被視為按鈕。 人們專注於動作對象,因此會嘗試單擊按鈕內的圖標或文本標籤,從而削弱一些大小的力量。

或者,也許邊緣不是邊緣。 或者我們知道鼠標在哪裡,但不知道用戶的手。 或者根本沒有鼠標。

注意你的假設

保羅·菲茨(Paul Fitts)是一名心理學家,在戰爭期間曾是美國空軍的高級軍官。 他堅信,由於所謂的人為因素考慮不足,導致飛機和機組人員損失過多。 他在俄亥俄州立大學建立了航空心理學研究實驗室,除了著名的研究之外,還進行了許多重要的航空安全工作。

我們在用戶體驗設計中所做的很多事情都植根於人為因素標準,但我們必須小心應用它們。 例如,他們經常對用戶是誰做出假設。 只研究了健康、年輕、非色盲、通常是歐洲白人的男性,因為他們駕駛飛機,並且(在大多數情況下)在標准進入工業時操作複雜的機器。

但他們也會對環境做出假設。 雖然飛機可能是苛刻和無情的,但我們確實知道飛行員相對於控制裝置的位置。 即使在計算機工作站; 但是,我們不知道用戶的手在哪裡。 Fitts 工作的應用假設手一直在鼠標上; 零時間或精力單擊指針下的內容。 但是,如果我正在打字,或者在紙上寫字,或者剛剛掛斷電話,或者其他一千種事情怎麼辦? 這實際上是關於人的運動,而不是鼠標的運動,不是嗎?

在設計中,我們做了很多假設而不考慮它們。 我們將控件放在網站和應用程序的邊緣,但視口的邊緣通常不是顯示器的邊緣。 Web 瀏覽器周圍有 chrome,甚至 Windows 中的最大化應用程序也不會覆蓋任務欄。 你的應用程序的底部邊緣和角落現在不是無限深的,是嗎?

當然,要如此輕鬆無縫地應用觸摸也是相當困難的。

跳躍後更多! 繼續往下看↓

你的手在哪裡?

當然,菲特的工作是真實的。 距離和目標大小幾乎普遍適用。 但是鼠標驅動的計算機系統中的假設所產生的簡單性並不真正適用於觸摸系統。

儘管我剛剛提出了用戶可能沒有握住鼠標的問題,但對於觸摸,我們真的不知道手在哪裡。 真的,我們沒有。 如果你沒有讀過我的任何作品,你可能會認為每個人都用一隻手拿著手機,然後用拇指輕敲,像這樣:

有人用一隻手拿著手機,然後用拇指輕敲的插圖
(大預覽)

但他們根本沒有。 我們在“移動界面的觸控設計”的第 5 章中詳細了解了人們握持手機的多種方式,並不斷改變他們握持的方式。 即使對於個別任務類型,也沒有一種方法是首選的,因此我們無法設計以任何程度的準確度預測人們在做什麼。

條形圖,顯示與手機上所需目標相關的手的不同方式和位置
(大預覽)

那麼,您的手相對於手機、平板電腦或觸摸屏計算機上的預期目標在哪裡? 我們不知道。 計算機無法檢測到它,我們沒有關於手在哪裡的指導或概率。 沒有一個目標,事實上,屏幕的任何部分都比另一個更靠近指針——用戶的手——。

道德設計原則

在 Fitts 之前的幾代人中,FW Taylor 正在使用 Gilbreth 的時間和運動研究充分探索的分析原理創建科學管理領域。 所有這些都被認為是管理實踐,旨在通過找到完成任務的“最佳方式”來優化產出和效率。

即使在航空等專業領域,這也被證明過於簡單化了。 人不是機器,因此過去幾十年通過 CRM 等實踐再次提高了航空安全。 以人為本的團隊資源管理,讓團隊一起工作,解決問題——或者更常見的是,避免問題——以及清單和程序。

一種最好的思維方式在今天仍然很流行。 它甚至是沃爾瑪最近應用的一系列流程改進的名稱。 我肯定看到它被過濾到數字產品設計團隊、開發人員甚至設計師身上。 如果你總是從快樂的道路開始,並且有點不擔心用戶可能使用系統的其他方式,錯誤消息或錯誤避免並不重要,因為那隻是用戶做錯了。

UX 應該是一個用戶倡導者,所以至少對於我的實踐領域,我說這種想法是不道德的。

建立數字流程和標準的許多標準和假設都假設工作站,但我們長期以來一直對計算機的位置和位置非常鬆散。

現在,隨著向觸摸和移動設備的轉變,我們真的必須承認,這種僵化的世界觀沒有立足之地。 我們可以預測但不能假設很多關於用戶在哪里以及他們如何工作的事情。 正如我們將看到的,這些假設並不總是適用,因此強迫它們適應可能會導致混亂和失敗。

試圖應用菲茨的作品去觸摸

雖然 Fitts 和其他人的研究背景是航空、機器或控制,但其背後的實際數學只涉及一維運動。 即使不跨越控件平面或屏幕移動,而是以一定的精度將控件從一個位置滑動到另一個位置需要多長時間。

雖然您可以使用它,但鼠標驅動界面的默認解釋會產生一些麻煩的假設。 例如,目標大小始終作為水平分量進行測量。 是的,即使它是一個比高度寬得多的按鈕,並且光標從目標下方開始。 這是個問題。

對於移動設備,點擊控件或滾動後的默認行為是清除工作區。 有時,這意味著手指或拇指離開焦點區域以查看發生了什麼,但大多數情況下,這意味著手指完全離開屏幕,並懸停或停在一段距離之外。 當然,一些用戶會轉向脫離模式,他們希望在一段時間內根本不必與設備交互。 無論是喝一杯,還是把手機放在口袋裡,或者放下它看視頻。 手機現在已經很遠了,用戶必須採取其他動作才能開始交互,並執行一些冗長的認知轉變才能返回交互模式。

很快我意識到,嘗試應用 Fitts 的公式來獲得難度指數,然後使用我的實驗數據來嘗試將時間值的斜率擬合到這將是愚蠢的差事。 變量太多,因此將多種類型的交互編碼為一生的工作。

此外,眾所周知,Fitts 的工作並不普遍適用。 它僅適用於具有肢體運動的系統。 這意味著你的整個手臂,而不僅僅是移動你的手指。 想想您如何使用鼠標、觸控板、操縱桿、軛或數位板。 你移動,如果輕微,你的整個手臂大部分。

對於一個經過充分研究的反例,等距操縱桿和其他使用力感應而不是運動的控件沒有很好地建模或需要它們自己的修改或模型。 儘管可能,但很難應用這些,因為您必須以不同的方式對系統不同部分的交互進行建模。 你聽說過 SK Card 在 1970 年代和 80 年代在這方面的工作嗎? 不,當然不是,因為它很複雜。 從業者需要一個精簡的、簡化的版本。

通過對研究結果的一些分析和調查,我發現觸摸交互也是如此。 研究結果具有可預測性和可重複性,但它們並不完全適合任何現有模型。

總而言之,這就是我給出指導方針而不是數學模型的原因。 對於便攜式觸摸屏平板電腦和手機,人們觸摸中心比邊緣更快、更準確。

手握電話,拇指位於屏幕中央的插圖
(大預覽)

有這些關於目標大小的指導方針(所有這些都在書中詳述),還有一些令人困惑的問題需要牢記——所有這些都可以幫助你設計界面和交互。

用於設計兩部手機上顯示的界面的不同目標尺寸的插圖
(大預覽)

考慮日常生活的速度

在我迄今為止的工作中,比如在書中,我並沒有故意分享點擊時間,因為它們因使用環境而有很大差異。 但我們現在可以在這裡提供另一個指導方針,關於移動設備在使用中與工作站心態有何不同。 當然,這意味著大多數設計應該嘗試拋開鼠標驅動、集中註意力使用的假設。

我最喜歡的是消失的控件。 我們經常看到它們:滾動條、chrome 等等。 但是讓我們看看無處不在的視頻播放器,因為現在在線視頻已成為常態。 比如說,您點擊視頻播放器開始播放。 控件會在短時間內淡出或滑出,因此您可以全屏觀看視頻。 當專注時,通常使用鼠標,效果很好。 您可以播放然後“啊,學分”並立即跳過它們,因為跳過控件或進度條就在附近。 此外,您可以將指針推過一點以將播放移動很長時間,然後坐下來觀看,因為控件逐漸消失。

在觸摸屏上,雖然也會因正常生活或隨意觀看而分心,但應用控件淡出的時間相同,但不足以使用。 手指是不透明的,所以我們點擊,然後將手指或拇指移離屏幕。 但也許我們安頓下來觀看它,然後意識到我們必須跳過愚蠢的部分。 所以,現在我們必須將我們的大腦轉移回交互模式。 我們以所見為導向,並一路返回採取行動。 當然,到那時,控件——一切都是為鼠標設置的——已經消失了。

正如我所說,很難為時代提供有用且可操作的指導方針。 如果我引用了觸摸交互的時間,我還需要為鼠標驅動的系統提供相同的時間,以進行比較。 我的一般觀察 - 沒有專門為此進行全面測試 - 類似交互的時間會相似,但並非所有交互和環境都是平等的。

您可以嘗試這樣做以確保您的設計正確,或者在評論和演示中更好地評估它。 想一想上下文,把手機塞進口袋裡,或者坐下來看著系統工作,到時候再回到互動。 請記住,即使是可用性測試也可能導致用戶過多關注,因此對使用模式和預期速度設置不切實際的期望。 觀看分析,嘗試走出真正的民族志,盡可能整天觀察用戶,並認真思考人們如何在上下文中實際使用您的產品。

從 WIMP 到 Touch

好的,您可能認為要記住並嘗試弄清楚如何應用到您的工作中需要很多東西。 我有你。 就像書中一樣,在我吐槽歷史、深入研究數學、認知、生理學或倫理學之後,我回來並以一份簡單的清單作為結論。

這個特別難組合,因為我不得不出去尋找所有當前關於設計 UI 的建議,尤其是菲茨定律。 雖然有些是好的或盡力而為,但也有一些非常非常糟糕的建議。

請注意此圖表並未完全從鼠標的最佳實踐轉移到觸摸的最佳實踐,因為它正在將當前的建議(無論好壞)轉變為我可以提供的新的最佳建議。

鼠標和桌面的傳統智慧觸控和移動的最佳實踐
從上到下、從左到右排列內容,最重要的在左上角。 人們在屏幕中心以最佳和最快的方式閱讀和互動。 將您的關鍵信息放在中間的大滾動區域中。
注意折疊,這樣用戶就可以看到他們需要的所有信息。 不信任滾動,因為滾動條很遠。 每個人都在滾動,因為手勢既簡單又常見。 確保用戶知道還有更多內容,但希望他們自己發現。
關閉所有控制選項以減少鼠標移動。 “取消”和“提交”必須緊挨著。 事故發生了,所以要遠離積極行動,遠離不同的、特別是破壞性的選擇。
保護對話框(“你確定嗎?”)可以很好地防止意外激活。 完全避免破壞性操作,並在需要時確保它們都有撤消方法(或假撤消),而不是在操作之前進行防護。
人們專注於手頭的任務,並希望速度高於一切。 人活在世上,所以分心。 不要讓通知超時或提供有限的時間來執行操作。
邊緣和角落是無限深的,因此將菜單放在那里以便快速訪問。 邊緣和角落是最難點擊的區域,但卻是隱藏低使用率菜單和錨定動作的好地方。 但只有少數; 使它們變大以確保用戶可以成功點擊它們。
彈出窗口是最好的,因為它們可以出現在鼠標下方,因此與菜單和抽屜相比,所需的移動更少。 彈出窗口在很多方面都很糟糕,尤其是它們與上下文無關。 在 UI 中放置項目,或使用抽屜、手風琴和其他上下文項目進行選擇。
為用戶提供快速選擇的工具,包括將鼠標跳轉到主要操作。 使用戶能夠做出明智的決定。 給他們足夠的信息來做出正確的選擇。 對於相應的選擇,延遲採取行動是好的,並提供了一個思考他們是否真的希望執行該行動的時間。
越大越好,所以請隨意填充按鈕,並為最重要的按鈕使用很長的標籤。 使按鈕之類的交互式元素僅與屏幕上預期位置的需要一樣大。 使標籤清晰簡潔,以便用戶閱讀。
徑向菜單是最快的,因為所有選項與初始點的距離相等。 當您離開光標時,徑向菜單會失去大部分價值,而且它們是出乎意料的,因此學習曲線妨礙了它們的理論價值。

結論

我在我工作過的很多地方都看到了一個普遍的假設,即其他人都非常清楚自己在做什麼。 我們不只是抄襲蘋果或亞馬遜,或者毫無疑問地使用 Material Design,而是從競爭對手或我們使用的最喜歡的產品中汲取“靈感”,並且毫無疑問地相信所有的設計建議都是正確的。

正如我剛才所展示的,標準和約定可能是錯誤的。 它們可能是過時的,特定於我們現在不使用的技術,適用範圍狹窄且過度應用,誤解和過度簡化,或應用不當。

技術、工作場所和日常生活經常改變使先前假設不再相關的方式。 我們正在經歷這些重大變化之一——從普通計算機(例如帶有鼠標和鍵盤的 PC)到移動觸摸屏。

但更重要的是,我們應該始終提出問題並尋求更深入的理解。 我們不應該只是盲目地遵循它們,而應該始終考慮這些指導方針和教訓對我們的用戶和我們的產品意味著什麼。

編者按在“移動界面的觸控設計”中,Steven 分享了他對觸控設計的深入研究,其中包含指導和啟發式方法,您可以立即將其應用到您的工作中。 閱讀摘錄或立即獲取書籍。