【產品經理】網站、App|企劃、設計時須注意的X種情境和規格

產品經理 PM

文/ 小悶  原文出處/好奇小悶

所謂「規格寫得好,開發沒煩惱」,想想自己從3C數位編輯,轉職產品經理也有幾年經歷了,但在寫規格時,仍有疏漏或沒想清楚的情境。剛好最近公司內訓上課,講師提到產品設計的6種狀態,想起業界前輩<嫁給 RD 的 UI Designer>也曾介紹過頁面的極限狀態,決定先筆記列下項目,而且之後一定還會用到,可以當成企劃網站或App規格時的checklist,隨時拿出來檢查。因為使用者情境真的太多,清單會不定期更新。

  • 理想狀態(Ideal State)

    使用者正常操作網站或App的資料呈現狀態,也是我們在網站介紹或App Store、Google Play的螢幕截圖,吿知使用者,產品的功能特色和操作流程。

  • 空白狀態(Empty State)

    又可分為初次使用、使用者清除資料、找不到資料等不同情境下的資料空白狀態。因應不同狀況,後續也要規劃不同的提示或文案,引導使用者進行下一步動作。

  • 極限狀態(Maximum State)

    1. 考量資料輸入或呈現時,有最大值、最小值的極限狀態。

2. 除此之外,資料欄位也有輸入限制,包含特殊符號、表情符號的顯示。

  • 錯誤狀態(Error State)

    1. 錯誤情況有很多,網站或App最常見的有網路異常、server連線異常、資料載入異常、無法儲存…等,都要事先準備因應對策,例如404頁面。
    2. 錯誤狀態可加註錯誤碼,方便給使用者回報,也可以埋log,讓工程師能提早偵錯,盡快查出問題。

  • 局部資料狀態(Partial State)

    1. 如果有些欄位使用者沒填,要引導他完成,同時要避免系統因為收到空值發生錯誤。
    2. 資料輸入欄位,要多考量必填或選填。選項是單選、複選、多選等情境。

  • 載入中狀態(Loading State)

    1. 資料載入中的過場是網路服務一定會遇到的情境,除了讓一顆圈圈在畫面中央一直轉,可適時發揮小創意,例如用百分比呈現資料完成度,或是火箭升空的小動畫,減緩使用者因不耐煩而跳出網站。
    2. 當網站或App頁面載入中,要避免讓使用者連續點擊或點擊頁面的其他項目,有可能會導致資料重複發送或取得資料時有衝突。
    3. 載入資料難免會有TimeOut連線逾時的情況,須事先準備此錯誤的應對方法,有可能是使用者本身網路問題,也有可能是我們sever掛掉,或是IP被擋等可能。

 

不同於PC Web,App受限於手機螢幕大小、偏線性的操作流程,還有以下情境規格可參考

  • App新舊版本相容性

    1. App若不強制使用者更新,通常會有多個版本同時使用中。
    2. 若新版本有變更欄位或增加新的資料欄位,皆須留意載入資料時的衝突。

  • 首次下載安裝與再次開啟的差異

    1. 首次開啟新App,通常都有功能的介紹說明。
    2. 避免重複提示讓使用者反感,再次開啟就要多判斷不再顯示。

  • 系統要求使用者同意開啟的權限

    1. 不論Android或iOS,若App功能會用到通訊錄、相機、照片、定位、麥克風、Push推播通知等,皆須在使用前跳出提示請使用者授權同意。
    2. 若使用者一開始不同意,某天忽然想用了,須偵測其系統設定,跳提示請使用者到系統設定,設為開啟後才能使用功能。

  • 前後頁面繼承

    1. “列表”的資料欄位若和“詳細頁內容頁“有相關連,須同步連動。
    2. 最常見的是“加入最愛的收藏功能”,列表和內容頁的星星icon會同時填滿。

  • 頁面動線

    1. App比較像是線性操作,從哪個頁面進去,返回就是哪個頁面。
    2. 規劃功能動線時,隨時要記得 按左上角”返回箭頭“或Android的“返回按鈕”會回到哪裡。
    3. 不同頁面切換時,可設計轉換效果,例:向左滑動、向右推出、向上彈出都不一樣,整支App的頁面互動邏輯要統一。

  • 開啟Webview

    1. App難免有些內容無法呈現,就會以Webview呈現。這時就須考慮要在App內嵌瀏覽器,或是乾脆點擊後,跳出App外開Chrome、Safari瀏覽器。
    2. 內嵌的好處是使用者仍留在App內,避免跳出後就不回來了。但缺點是若要開啟的網站結構複雜、動態效果很多,App內嵌瀏覽器就無法呈現,增加維護成本。
    3. 因為目前不管是Android或iOS,若跳離App,其實按一下左上角或返回鍵,很快就能回到App,所以近期都會評估要開啟的網站內容,若太複雜,建議就直接外開。

  • 資料分次載入

    近幾年的手機硬體效能已提升許多,甚至超過電腦配備,但還是不建議App一開啟就把上千筆資料全部載入進來,應該要分次處理,滑動幾頁之後再陸續載入後半內容,或是讓使用者自己按“想看更多”再載入資料。

  • 手勢下拉畫面是重整

    1. 智慧型手機發展史已超過十年,一路衍生許多使用者的慣用操作邏輯,這也是App企劃開發時要特別留意的規格。
    2. 例如:下拉手勢就是重新整理目前畫面,載入新資料。還有iPhone本身系統操作行為,點擊上方鬧鐘,會快速捲動畫面,回到最上方。
    3. App可結合功能加入使用者習慣的操作邏輯,規劃頁面動線則要避開系統的基本手勢,避免兩邊打架。

  • 手勢往左滑、往右滑,可以有不同功能

    1. 除了往下拉以外,使用者也愈來愈熟練不同手勢,例如 在單個項目往左滑和往右滑,會分別開啟不同功能選項,可參考Gmail。
    2. 整個App畫面,可區分多個觸控區域,使用者的觸控手勢又可分為要滑動“整個畫面”或列表的”單一項目“,依App特性和內容而定,不一定要一開始就規劃複雜的手勢操作。

  • 長壓、用力壓畫面,開啟設定或其他功能

    1. 長壓可選取內容或開啟其他功能,也是使用者習以為常的手勢了,若是文字內容的欄位,會建議不要漏掉長壓可複製文字的功能,方便使用者即時擷取分享,也有助於內容擴散。
    2. iPhone的3D Touch,愛用的人會說很好用,不喜歡的自然怎麼用力壓也不習慣,如果能針對3D Touch手勢開發便捷的功能捷徑,相信還是能吸引一群果粉,只是未來iPhone可能會拿掉了QQ。

  • 特殊的超連結

    若資料欄位有網址、地址、電話號碼等,為了讓使用者能更順暢進行下個動作,不要只是純文字顯示,可串接手機系統功能,用藍字的超連結標示,方便辨識和點擊。點網址能直接開新網頁、點地址要能串接Google Maps,點電話號碼能直接撥打電話,甚至目前也能直接撥打分機了。