文章觀點評論:防止誤觸按鈕(1)

評論:How to Prevent Users from Mistapping Icon Buttons

【手機版web按鈕】

近期執行的任務剛好有類似案例,就拿手機版web按鈕來論述,於各個不同頁面中添加“轉贈彩幣”按鈕,此功能目的是希望提升轉幣操作的便利性,而添加的頁面,並未全區都針對手機使用者放大元素,按鈕則有特定使用族群,從不同面向來發表個人觀點

玩運彩手機版web畫面

整體畫面

  • 所有周邊元素都未放大的條件下,出現顯而易見的手機版樣式按鈕,雖然點擊容易,但也會影響其他重要功能?當殺手販售預測時,焦點應該是“預測內容”,整體視覺效果並不融洽。
  • 使用者點擊其他按鈕時,可能也會放大畫面,此時“轉贈彩幣”按鈕會變得更大,若非玩競猜使用者,應該會迫切想要關閉它。
  • 若與畫面內其他按鈕大小差不多,則又影響了快速轉幣功能的轉換率,在資訊量繁雜的畫面內,很難馬上意識到新增的元素。
  • 手機版web介面並沒有鎖定畫面,使用者縮放畫面後,按鈕仍是容易點擊。
左圖:按鈕立體化;右圖:按鈕扁平化
  • 個人頁畫面中,包含header選單,按鈕樣式大致分為立體與扁平兩種,面對站上使用者,立體化按鈕操作習慣已形成,使用族群也較偏愛立體化按鈕,無法貿然更改;玩競猜使用的“轉贈彩幣”按鈕樣式扁平與放大,與頁面內按鈕區隔,能強化玩競猜產品辨識度(目前個人頁僅投注記錄有放大畫面)。
  • 如果按鈕位置不改變,是否可從樣式先著手,嘗試將按鈕樣式一致化看看效果如何…

操作習慣

玩運彩討論區列表、內頁、回文介面
  • 以討論區列表、內頁為例,僅將常用功能字級、按鈕放大,瀏覽貼文主要為聯盟選單、文章列表與內容的字級、推文按鈕,僅回覆表情符號的貼文也不在少數,重視“瀏覽”與“回文”過程的操作體驗,按鈕也是一樣,取決於重要程度。
  • 若為頻繁操作類型的點擊,內容資訊豐富的介面,個人習慣偏好手機版web,新功能上線前期,或許可以加上提示或放大元素,後期則回歸整體畫面內元素的一致大小,習慣手機版web的使用者,或許會認為不差這一次縮放。
  • 若為選單、瀏覽類型的按鈕,則偏向規範做法,給予適合大小與熱區範圍,可搭配介面其他元素作適當調整。

區塊限制

  • 添加於左側選單下方,按鈕寬度受到限制,需在按鈕熱區、間距、畫面協調性三者取得平衡,連結轉跳畫面,等於是給予點擊回饋。
  • 可視範圍超出手指,按鈕可作直向發展,但與一般按鈕認知樣式會有差異,也與產品中所應用的按鈕樣式不同,需評估介面整體易用性大於單一按鈕易用性(上圖直向樣式)。
  • 設定頁面中的開關按鈕,再切換時給予動態效果,當點擊至手指離開的瞬間,顏色、提示文字的變化,使用者清楚意識到操作成功,在獨立按鈕樣式設計,可視範圍其實不一定要超出手指(上圖開關樣式)

【結論】

注意按鈕熱區、元素間距,其實就很難發生誤觸,比較有可能是未感應,或接觸不良造成,不過可視範圍超出手指(確認程度)與微互動(操作回饋)是有加分效果,可提升使用者操作感受。

可視範圍與熱區

左側:文章範例;右側更多作法依序:APP系統、web玩運彩回文、webMobile選單與回文
  • 以文章圖一左錯誤範例所示(如上圖),APP內一列的按鈕包含搜尋、設定、更多,左側空間非常充裕的情況下,依照規範設計,是不會發生的問題;如在一列當中若有數個按鈕需要放置,則有其他做法,或依按鈕重要性放置,其餘選擇收納。
  • 若熱區大於按鈕可視範圍,可聚焦點擊位置,需注意熱區與周邊元素間距,可視範圍能調整按鈕在畫面整體的視覺平衡。
  • APP按鈕、手機版web獨立按鈕,可視範圍超出手指的優化較容易,若在資訊量繁雜的手機版web頁面內,要放大畫面中哪些重點元素都須調查評估;可視範圍超過手指的效益可能有限,在單手操作APP時,無論是滑動或點擊,個人主要使用“拇指”操作,遮蓋範圍比“食指”高出許多,幾乎大部分按鈕都會被遮蓋,在裝置平放時才會使用食指操作。

按鈕語意

  • 可視範圍可作為吸引點擊的目標,熱區則是扮演操作易用性的角色,按鈕名稱說明為何用途,“轉贈彩幣”按鈕名稱告訴使用者明確功能、與產品認知,比起使用“快速轉幣”來的明瞭,“快速轉幣”容易讓使用者誤會噱幣也能轉移。
  • 承上,從語意理解,“快速轉幣”按鈕是我們採取的策略目標,名稱含義也包含動作行為產生的結果,“轉贈彩幣”則單純指意該做什麼動作,且與各處轉幣按鈕名稱一致。

系統按鈕

左圖:系統鍵盤預設;右圖:手機版web模擬
  • 系統鍵盤既不能縮放,也容易出錯,是常用、非用不可的系統功能,當你習慣符號位置,切換流暢的時候,就會開始比較哪種裝置的系統鍵盤較人性化,若不談觸摸手勢與觸摸可用性研究,更換大螢幕裝置是最佳解法
  • 將APP操作體驗帶入手機版web,如版標、發表文章獨立按鈕使用即時預覽,不如直接放大;若添加在擁擠的選單按鈕,是否可以保留原按鈕大小,節省畫面空間,必須評估必要程度技術可行性,並通過各裝置實際檢測,實作上有一定的難度

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *