行動互動設計 Thumb Zone —— Mobile UX
▲Photo by Andrea Natali on Unsplash
當薩哈跟隨 2019 換機潮從萬年的 iPhone6 更新到 iPhone 11，拿到新手機的那一刻不是欣喜與期待，而是默默在心中大驚「怎麼那麼大！好重好不習慣！」從 4.7 寸直上 6.1 吋螢幕的 iPhone 11 手感是全新的體驗，第一件事擔心的是躺在床上滑手機砸到一定超痛（誤）原本隻手能遮天的範圍，縮小到只能按到螢幕寬度 3/4 是極限，甚至要按關機鍵都得在手掌上挪個位置，對於單手使用者轉換期需要較長適應的時間。這讓我回想起以前看過的拇指法則，如果應用在近年的裝置上，是否會改變設計師遵循的介面設計法則呢？
▲iPhone 6 vs. iPhone 11
你都使用單手滑手機嗎？如果是的話，仔細思考一下是否主要依賴大拇指的移動來操作呢？資深互動設計師 Steven Hoober 在 2013 年針對一千三百名手機用戶的量化研究發現以下數據：
- 單手使用手機的比率49%
- 以右手拇指操控的比率為67%
- 以左手拇指操控比率為33%
透過 Steven 的研究發現，有一半的使用者單手持拿手機，依靠拇指進行操作，而在近年大螢幕手機的趨勢下，不得不利用雙手持握手機時，人們大部分仍依賴拇指進行互動。而 Josh Clark 的研究也支持這個結果說明 75% 互動任務是由拇指完成。
拇指 vs. 小螢幕
根據 2016 年 Samantha 提供的模型，以一個 4.7 寸手機女生能觸及的範圍如下圖所示，綠色是輕鬆可以觸碰到的，橘黃色區域是需要伸展甚至移動抓握區域，而紅色則是困難碰到的地方。
▲The Thumb Zone: Designing For Mobile Users
透過這個模型，我們可以發現許多 APP 介面的趨勢由上方的 button 默默移至下方綠色拇指區域，讓使用者常用的功能可以更輕鬆的達成任務。例如舊版的 Facebook 將上方漢堡 menu 和訊息功能統一放到下方工具列，並擺出最常用的四大功能，其他就合併在漢堡裡收納；而 Airbnb 的固定式工具列則簡單明瞭列出所有五大項功能在最下方。台灣區我則舉蝦皮為例，除了工具列外，可以看到蝦皮將主要服務也都置放在易觸碰的位置，並往左滑看更多。
那大螢幕手機呢？
透過我自身使用 iPhone 11 的經驗，這個模型已經改變。我利用手機內建繪圖軟體簡單繪製了以 S 號手掌在 6.1 吋手機上的觸碰軌跡如下，可見手機上層幾乎是觸碰不到的，而右手持握者則是觸碰不到左側 1/5 處螢幕。
▲6.1吋手機拇指觸碰軌跡 (不移動手機的情況下)
若是將此模型套在 airbnb 現在的手機 APP 上，可以看到下方工具列的「探索」如果單利用右手持手機，是無法不變換手掌位置輕鬆用大拇指按到的。這也是為什麼在 2020 年的介面設計趨勢裡，不但主功能往下移，甚至連 IMDb 和微軟 APP 都將搜尋欄直接挪至下方，讓拇指可以做的事一氣呵成。再來看看台灣 Richart 的 APP 支付頁面，將五大主功能羅列在畫面底部，讓使用者在點擊工具列的收付後可以輕鬆用拇指按到下一個功能選單。比起以前開方塊或 list 的呈現方式，又更符合手機上的行為互動了。這個 UI 真的是要給台新銀行拍拍手，不愧是年輕人的行動銀行當之無愧啊！
大手機已是基本盤
一年前大手機只是趨勢，而現在大手機已經基本款。
在 2018 十月 Missbeez (one of the hottest startups in Tel Aviv) 在 on-demand app 的數據顯示使用大手機 (iPhone X/XS/XR, etc.)占比約 16.3%，而在 2019 十二月經歷一波 iPhone 11 的換機潮，大手機的佔比已經來到 41% 且尚在穩定的成長中。可以預估明年 iPhone 12 在雙模式解鎖且支援 5G 的情況下，苦苦支撐的小螢幕手機使用者將會加入這波風潮，大增大手機用戶的佔比。
而 iPhone 本身因應超高屏佔比的措施，從小手機時代其實就已經做了在 home 鍵點按兩下就會畫面下拉的互動設計。而在取消 home 鍵後的 X 系列則是在設定> 一般 > 輔助使用開啟「螢幕上方觸控」，便可以使用稍微下滑橫條的手勢來下拉螢幕畫面。而在 iPhone 11 則是直接在設定 > 輔助使用(Accessibility) > Touch 開啟 Reachability 就可以使用畫面下拉功能。聽說 Andriod 手機是直接開大絕，單手模式讓畫面往右下縮到拇指觸及範圍內。這個方式的確比 ios 又更進一步增加拇指觸及範圍了。但我自己是還不習慣這個下拉畫面功能的行為模式，且對使用者來說其實是多兩個拉收步驟增加認知負擔，蠻好奇真正使用這個功能的比率有多少。
▲iPhone 11 輔助畫面下拉
PS. 如果你覺得玩遊戲的時候那橫條很礙眼的話，可以看看這篇文章教你怎麼隱藏 home indicator 喔！
互動設計的改變
產品的本質沒變，但會隨著科技的演變而改變它的形式。因應大手機螢幕的風潮，為了讓單手使用者可以更順暢的瀏覽網站，介面互動模式也逐漸改變。從以前的按鈕式互動，2020 的 call to action 形式產生變化。
從 2020 mobile UX design trend 來看，IG 經營的 Stories 形式就是一個最佳的例子。除了可以簡單使用大拇指左右滑動查看前後則內容，往下滑關閉 Story 模式，甚至利用往上滑的方式達成 call to action 的任務。IG stories 的成功也引領的這股“故事風” UI 概念落實在其他 APP 的表現形式裡。
▲Mobile UX design trends to watch out for in 2020
結語
其實手機的形式從早期超級大，到超級小，到現在因為內容王道的世代漸漸做越大，互動模式也跟著使用方式逐漸改變。從基本的點按觸發，到現在使用者也早已習慣左右滑動的行為模式。在我換 11 的時候曾和弟弟抱怨過手機太大握不住，他回答我說“沒關係拉，妳的手會變長”，雖然我當時是白眼以對，但仔細回想的確自己會漸漸習慣大手機的握法，找到適合的偷懶方式滑手機。也許使用者會因為大手機而漸漸改回用兩隻手滑手機也不一定，不然就要看設計師們能祭出像手勢等創新的互動設計來滿足單手使用者囉！
https://www.smashingmagazine.com/2016/09/the-thumb-zone-designing-for-mobile-users/#problems-with-navigation
https://medium.com/@hitech.qb/mobile-ux-design-trends-to-watch-out-for-in-2020-5a27270ad0ec
本文經作者 Saha Chuang 同意，轉載於 手機拿法也能影響介面設計，談談拇指法則