【PM筆記】網站、App|企劃、設計時須注意的X種情境和規格

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

因為使用者情境真的太多,本篇清單不定期更新

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

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

極限狀態(Maximum State)
>考量資料輸入或呈現時,有最大值、最小值的極限狀態。
>除此之外,資料欄位也有輸入限制,包含特殊符號、表情符號的顯示。

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

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

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

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

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

・首次下載安裝與再次開啟的差異
>首次開啟新App,通常都有功能的介紹說明。
>避免重複提示讓使用者反感,再次開啟就要多判斷不再顯示。

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

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

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

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

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

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

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

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

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

 

#先寫到這邊,想到再補或另文詳細寫
#寫於 未完待續

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料