ios介面指南03

安裝APP後於平時使用,使用者常見操作模式,內容屬於基礎應用架構、用戶互動,說明在何種樣設計之下,能讓使用者直覺操作。

六、應用架構 App Architecture

【新手上路 Onboarding】

在安裝APP後會出現的前導頁、說明步驟,或是重要更新跳出操作提示,都是具有一定存在意義,尤其需要繁瑣操作的APP類型,使用者可能會立即關閉,但必須在需要時刻容易找到。

圖左1、2:奇摩拍賣APP(舊);圖右1、2:奇摩拍賣APP(新)

無論是何種類型說明提示,都將使用適合的狀況觸發,縮減內容、減少複雜教學過程,或者直接在APP操作中顯示教學;是否可以預測使用者行為,來做到即時出現提示呢?目前常見做法是將“教學”收納於設定內。讓教學變得有趣能吸引使用者閱讀,圖文比例與互動效果影響學習過程(若APP教學過多,就該檢討APP本身)。

圖左1:玩運彩討論區、圖左2:奇摩拍賣APP
圖右1:androidAPP、圖右2:google地圖(來源google圖片)

玩運彩討論區APP在新功能上線時,決定使用操作提示做實驗。置入提示對於部分使用者來說非常干擾,尤其對新功能興致缺缺,自然就會直接關閉;最後決議由特定路徑(從推播內)進入顯示,提示共顯示兩次,必須由使用者點擊“我知道了“按鈕後才會關閉,“回文通知”對於特定族群是非常需求。

必要時,讓操作回到使用者上次停留處繼續,或使用自動儲存方式保留內容,是否在點擊啟動圖示時,略過啟動螢幕直接進入操作畫面,可以達到APP重啟、切換時的良好體驗。

【載入中 Loading】

可以添加互動巧思,操作後得到第一個回饋,當載入內容時提供互動元素讓使用者確定APP正在執行;若APP內容較多可選擇批次載入,較不影響使用者閱讀時間。三種優化載入中方法:

圖左:臉書APP(android)、圖中/右:佔位符模擬、教學模擬
  • 顯示佔位符、框架無法操作,讓使用者知道接下來畫面內容大致上的樣子。
  • 置入下個頁面相關操作提示、使用教學內容、短片或圖像,僅適用於較長等待時間。
  • 微互動形式(完成時直接進入下個頁面)。

【導航 Navigation】

導航往往是貫穿整個APP重要元素,指南中提供了三種常用導航模式,分別有適合應用的APP頁面,以APP類型與使用者操作習慣,來決定該使用何種導航模式,若APP當中有特殊操作,也可視情況來混用導航模式,以頁面動線流暢度為前提考量,必須合乎邏輯、可預測。如同使用者對討論區APP既定印象,有個漢堡選單與分類。

  • 分層導航:僅可做一個選擇,直到目的頁面;無法移動至其他分層頁面,必須回到首頁來重新選擇,設定、郵件、輸入使用此模式。此模式將動線靈活度降至最低,適合使用在重要頁面,在垂直線性頁面下完成操作。
  • 平面導航:可再多個類別頁面間切換,音樂、APP商店使用此模式。水平切換模式可快速預覽APP功能與類型,適合做宣傳及導覽用途。
  • 內容/體驗導航:透過頁面中自訂義導航,提升動線自由度,但是有固定範圍的移動,遊戲與拍賣APP使用此模式。太過複雜的頁面動線必須累積操作學習,適合使用於多功能性APP。
圖左:永慶APP(分層)、圖中:ios商店APP(平面)、圖右:蝦皮APP(內容)

進入APP後使用平面導航,接著進入每個類別後使用分層導航,是目前APP常見的混合導航模式,若頁面中同時有多個分層路徑時,指南則建議使用操作表(Action Sheets)、彈出視窗或模態視窗;同類型內容頁面,可有效使用頁面控件(Page Controls),當看見這些導航模式,APP慣用者已經大概了解操作了。

  • 模態視窗(Modality)螢幕佔比範圍可大可小,也可以在模態視窗內使用導航欄,可作為簡單的說明提示/輸入操作、複雜且有分層路徑操作,指南則建議使用於必須完成/放棄任務繼續其他操作時、保存重要數據時,如討論區回文介面。

分層導航通為進入類別的兩層內為最佳體驗,必須提供返回上一層的按鈕(若超過兩層也相同),勿讓動線直接返回首頁或關閉,雖然快速,但容易中斷使用者操作,迷失回到原頁面的路徑。可使用平面導航來區分更多類別,自由在平行類別中來回,並不影響各類別中正在執行的任務。

七、用戶互動 User Interaction

【反饋 Feedback】

圖左1、2:玩運彩討論區、圖右1、2:Opera Touch

用互動體驗中非常非常重要之一的環節,即使是小地方,也能讓使用者了解目前正在做什麼、下一步可做什麼、執行後結果,操作即時回饋能清楚閱讀,且不干擾使用者,提示、彈出視窗、微互動效果,都可以應用於反饋。指南中說明在反饋重要性高時,可配合系統觸覺效果,頁面操作滑動至目標位置時,視線被手指遮住,可適當添加觸覺效果提示。

【手勢 Gestures】

圖左:Gmail、圖右:ios推播通知

點擊與滑動為直覺手勢,幾乎適用APP大部分頁面操作,無論使用何種系統裝置,手勢操作有不分你我一致性,主要影響頁面關聯性、動向或功能操作流暢性。適當運用人們直覺手勢,如使用縮放(pinch)進行頁面操作。

FB留言介面 圖左:ios、圖右:android

開啟FB動態列留言視窗(android),滑動範圍敏感導致視窗關閉,在多則留言時容易觸發,再次開啟留言視窗時自動更新訊息,對於正在閱讀留言的使用者非常不便,因閱讀手勢與關閉手勢相同;必要時如何讓使用者習慣、或直覺使用特殊手勢來操作頁面,指南中並不建議自訂規範以外手勢,越多特殊手勢亦會增加APP操作負擔;滑動手勢刪除,在信件、APP列表常見,也避免將相同操作手勢運用在APP其他地方。

【拖放 Drag and Drop】

可移動或複製內容,常用於選取功能、相簿照片,是手勢與反饋融合操作模式,一個看似簡單的拖放,卻包含數種體驗過程,例如:

  1. 長按(Touch and hold),點擊按住後觸覺反饋、區塊動態效果、提示。
  2. 移動(Drag ),拖曳區塊時頁面效果、預覽區塊內容、取消效果。
  3. 放開( Drop),區塊動態效果、提示、loading。

拖放本身已是直覺操作,若針對可複製/插入內文、照片、影片APP使用,使用“拖放”來達到目標在“移動”的過程,提升互動需求,讓使用者確實體驗“我成功操作了”。

【輸入 Data Entry】

圖左1:玩運彩討論區、圖右1~3:王道銀行Obank

APP註冊頁最能感受到體驗上差異,應注意幾個細微處,如在欄位輸入時提供對應鍵盤、提示說明、儘可能自定選項列表或合理預設、下一步驟前確認必填欄位與立即檢查、帶入使用者相關資訊,都能大幅降低操作時間。

  • 輸入是一件繁瑣的過程,確認欄位是否必填,減少輸入項目可提高轉換率;開啟對應鍵盤可減少使用者1~2次額外點擊切換;在元素周邊或使用佔位符提示描述更明確。
  • 從系統中獲取使用者資料自動載入,或Obank的影像辨識帶入資料,並提醒“檢查”動作。
  • 若有固定範圍,可使選擇器(Pickers)、提供適合預設值;但部分情況可能例外,選擇項目過多如“國家”,同時也可自行輸入。
  • 表單輸入不見得都是短短幾個填寫項目,添加按鈕判斷提示,在必填欄位都確認輸入、格式,啟用下一步按鈕。重要欄位可在當下進行檢查,不用等最後如有輸入錯誤再回頭修改,節省時間。

發表迴響

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