眼睛跟蹤和UX導航
1)為什麼使用Eye-tracking
Aitreking準確地顯示了用戶如何掃描界面:他們註意到他們忽略了丟失的地方。它通過揭示註意力路徑和視覺層次結構與用戶任務的一致性來補充點擊和滾動度量。
關鍵案例:- 檢查導航和信息體系結構(菜單、過濾器、搜索)。
- 驗證第一個屏幕/在折疊和重音排列。
- 卡/目錄/表的變體比較(F-Pattern,Z-Pattern,Gutenberg圖)。
- 橫幅失明,過載和「視覺噪聲」診斷。
- 高精準率產品:金融,投註,輕量級市場,緩存。
2)收視率產生的文物是什麼
Heatmap(熱圖):整個區域的聚合固定強度。
Gaze plot/Scanpath:固定序列(編號點)和sakkad(箭頭)。
AOI度量標準:按指定接口區域(按鈕、字段、菜單、橫幅、卡片、表格)計算。
過渡矩陣:用戶如何在區域之間「跳躍」(導航習慣)。
分段報告:在角色/設備/經驗方面的註意力差異。
3)基本註意模式
F-Pattern(文本/表):上行→左欄→下面水平。
Z-Pattern(登陸):左頂部→右頂部→對角線→右非傳染性。
古騰堡圖:強/弱象限,自然閱讀路徑。
盲點:密集屏幕上的右/下部區域,「橫幅盲點」。
競爭的主播:折扣條紋,閃爍的元素,動畫橫幅-「竊取」CTA的註意力。
4)我們操作的度量
對於每個AOI和整個屏幕:- TTFF(時間到第一次修復)-在區域上首次提交之前的時間。
- 固定計數/持續時間-提交的數量/總持續時間。
- Dwell時間-區域中的總時間(包括重復運行)。
- Revisits是返回AOI的數量(困難/重要性的標誌)。
- 過渡性提案-從AOI A到B的概率。
- 序列得分/提交順序-區域進入序列的早期程度。
- Scanpath length/Entropy-路線的長度/混沌性(低熵=清晰的層次結構)。
- Coverage/Convex hull是視覺測量區域(過量繞行=過度)。
- CTA上低TTFF和高dwell-很好(很快註意到,思考和點擊)。
- 高的TTFF導航不佳(尋找菜單很長)。
- 許多返回一個單元的原因是懷疑模糊或沒有提示的強制性行動。
5)研究計劃(模板)
目的:檢查用戶是否能快速、可預測地找到導航的關鍵元素。
細分:2-3(初學者/經驗豐富;Desktop/Mobile)。
樣本:每段6-8(定性)或25-60(準定量)。
任務:5-7個可控啟動現實場景(見下文)。
設備:固定跟蹤器/移動安裝/網絡攝像頭(見第7節)。
AOI:提前標記關鍵項目(徽標/搜索/菜單/過濾器/STA/橫幅/卡/表/緩存)。
過程:校準→任務→結果提交→簡短的debrief,沒有問題。
產出:heatmap,scanpath,AOI度量表,建議和A/B假設。
任務腳本模板
1.「查找並啟用黑暗主題(或設置博彩限制)」。
2.「通過X提供程序過濾目錄,然後按RTP排序。」
3.「打開緩存器並查看可用的輸出方法。」
4.「找到輕量級事件,並將結果添加到betslip中。」
5.「查找規則和負責任的遊戲頁面。」
對於每個步驟,我們捕獲TTFF,過渡,成功率和運行時。
6)AOI標記: 最佳實踐
使區域語義化:「完整的主菜單」,「搜索」,「過濾器」,「遊戲卡:封面」,「CTA:播放」,「橫幅促銷」,「面包屑」。
共享告密者(標簽、狀態)和交互式(按鈕)。
在移動中,將隱藏的面板(漢堡/窗簾)視為單獨的AOI。
表/單位:按列分列的AOI(「聯賽」,「Live指標」,「-1X2」,「CTA Add」)。
不要粉碎像素:每個屏幕10-15 AOI是分析的最佳選擇。
7)設備、準確性和限制
硬件跟蹤器(桌面/移動跟蹤器):高精度,適用於密集型UI(表,系數)。
網絡攝像頭(remote ET):更便宜/更快,但噪音更高,小用途更差;適合粗糙的層次結構。
校準-關鍵:5-9點;在位移/疲勞時重復。
Think-aloud可以扭曲外觀模式-使用最少,更好的任務後訪談。
8)分析管道
1.數據質量:跟蹤精度、損失百分比、有效固定。
2.任務目錄:成功,時間,錯誤,主觀量表(SEQ/UMUX-Lite)。
3.AOI表:TTFF,dwell,revisits,過渡,entropy-按細分市場和設備。
4.Heatmap+Scanpath:尋找額外的關註錨點,「zalips」,跳過。
5.假設和解決方案:重新排列/擴大/重命名/隱藏的內容;什麼提示/scaffolding。
6.優先級:Impact × Effort;快速編輯→原型→重新測試。
7.驗證:關鍵指標上的A/B(導航的CTR,任務時間,步驟轉換)。
9)典型的發現以及如何應對它們
高搜索/過濾器TTFF →使它們永久可見,增加對比/標簽。
橫幅從主要CTA吸引註意力→降低橫幅的視覺重量,交換位置,增加CTA字體的邊框/重量。
長長的卡片掃描→簡化視覺原語(較少的標記/標簽),並標準化預覽。
弱狀態/誤差檢測→顏色/圖標+接近字段,ARIA標簽,微操作。
導航死胡同→顯而易見的「退貨」,breadcrumbs,固定帽子重復CTA。
10)對於iGaming/財務 UI: AOI和解決方案示例
緩存:存款/輸出選項卡、方法、限制、傭金、ETA →檢查TTFF和確認路徑。
Betslip:添加結果,更改總和,系數提示,風險反轉→最大限度地減少外觀微動。
Live標記/表格:系數列優先級、粘性帽、更改突出顯示。
插槽大廳:提供商卡,徽章(頭獎/飛盤),機械過濾器→避免視覺噪音,以便CTA「播放」不會丟失。
負責任的遊戲:在高註意力區域放置限制,不要藏在漢堡後面。
11)報告模板(復制到wiki)
上下文: 產品/版本/設備
任務: 名單,成功標準
片段: 每個片段的N
AOI: 計劃/清單
關鍵指標: TTFF/dwell/revisits/轉換表
發現(Top-5): 簡短+視覺(heatmap/scanpath)
建議: 排名(Impact × Effort)
實驗: A/B計劃,預期效果,截止日期
風險/意見: 數據限制/綜合性
12)發射前支票清單
- 研究的目標/問題
- 任務是現實的和原子的(≤60秒/任務)
- AOI標記,傳說一致
- 校準已驗證,位移時重播
- 反平衡接口選項(A/B順序)
- 同意收集和隱私政策準備就緒
- 分析計劃/表格模板已打包
- UX控制指標(成功率、時間、SEQ)已連接
13)反模式和解釋陷阱
計算「更多固定=更好」。有時是混亂。
僅在沒有序列的heatmap上得出結論(scanpath)。
將不同的屏幕/分辨率混合到一個熱圖中。
忽略任務的內容和上下文(橫幅可能合適)。
將引線傳輸到所有用戶,而無需細分/設備。
在定量研究中對5名參與者做出引人註目的結論。
14)道德與隱私
知情同意:目標,記錄,存儲,匿名。
最小化PII,限制存儲原始數據,使用ID。
對於敏感場景(財務/遊戲)-軟語言,跳過問題的能力,安全的演示數據。
15)快速啟動(單頁)
1.描述3-5個關鍵導航任務。
2.在目標屏幕上標記10-15個AOI。
3.舉行8-10次會議(10-12分鐘):校準→任務→簡短的工作。
4.將AOI表(TTFF、dwell、轉換、entropy)合並為細分/設備。
5.形成Top-5發現和3-5 A/B假設(位置,尺寸,復印件,可見性)。
6.在相同的任務上運行快速編輯→檢查評分。