App設計中,真的可以忽視各種狀態與突發狀況嗎?

每次專案後期,RD 抱怨:「這狀況沒預料到啊!」設計時若忽略各種狀態與突發狀況,開發時就只能手忙腳亂地補救。

即使畫了非常精細的 UI FLOW、每一頁 Wireframe 旁也寫上詳盡的註解,但在專案後期 RD 仍是發現許多在前期規畫階段沒有被考慮進去的情況,這是為什麼呢?有一種可能性是漏了思考「各種狀態」和使用者的「突發狀況」。

這會導致開發時程延後,因為訂定的規則不夠準確而再次召開討論會議確認細節。

甚至發現此路不通但該功能已經做下去了無法修改進退兩難的情況。

不管是 iPhone、iPad、Android,都有可能會在移動的情境中被操作,這就代表使用者會在相對惡劣的環境中把玩 App。

像是在通勤時間的捷運站拿出 iPhone 收發信件,網路怎麼連就是連不上的情況、或是斷斷續續讀不到資料。

在這種情況下 App 該怎麼提示使用者目前運行不順呢?考慮到在這種情境下 App 要以何種方式讓使用者操作呢?

舉例來說,就是需要使用網路像搜尋美食餐廳之類的 App,如果在沒有網路的情況下使用者輸入關鍵字按下搜尋,App 該如何反應。

或是可以撥打電話的 App 被安裝在 iPod 或 iPad 上時,使用者要怎麼使用這個功能?下載檔案載到一半網路斷線,未載完的檔案會發生什麼事?

1.jpg
(App:Food,搜尋關鍵字與下載資料的進度提示。)

網路

最常見的一定是「網路」功能,網路會有三種情況,有網路、無網路、網路狀態不佳。
有網路就讓使用者正常使用這沒問題。
無網路情況下可區分成很多種情況處理。

  1. 一進入 App 就告知使用者無網路,鎖住所有操作直到重新連線。
  2. 僅在使用者進行某種行為後才跳出提示告知無網路連線,所有功能依照原本 Flow 執行。
  3. 某塊區域長期顯示無網路狀態直到恢復連線。
  4. 不理會無網路狀態,讓使用者自行察覺(喂)。

iOS 可以自動區分出是使用者忘記將網路打開、或是已開啟網路但連線品質不佳,開發者能依此設計兩種不同的提示方式,告訴使用者是他自己忘記開網路、還是該換個連線順暢的地方再來使用 App。

2.jpg
(App:Safari,在飛航模式中開啟網頁出現的提示。)

3.jpg
(App:Miu Ptt,中斷連線後的提示,有自動重連功能喔!)

GPS

取得使用者目前位置有幾種方法,一種是 GPS。
GPS 與網路無關,它是藉由收取 GPS 衛星的訊號進行定位。

另一種是透過 WIFI,尋找附近的 WIFI 基地台進行三角定位來判斷使用者目前的位置。
基本上以 GPS 定位較精準,但在室內或是高樓大廈多的都市裡誤差較大。

所以這兩種方式通常會一起被使用。

使用定位功能會有 2 種情況,可被定位、無法取得定位。
有 GPS 的情況就是使用者正常操作。
無 GPS 則會出現兩種使用情境,一是使用者有打開 GPS,但所在位置無訊號。

另一種是使用者根本就沒開啟 GPS 功能。
第一次使用到定位服務時 App 皆會詢問使用者是否允許,此時若使用者拒絕,則該 App 無法使用定位功能直到使用者在「設定」裡重新開啟。

所以 App 在開發時需判斷使用者是否已開啟 GPS 功能,若無開啟要給予什麼樣的提示訊息。

4.jpg
(App:圈點,第一次開啟 App 的 GPS 權限設定。)

電話

電話撥打功能是個很有趣卻常被遺忘的部分,目前可安裝 iOS 的機型有3種,iPhone、iPod、iPad,其中只有 iPhone 能夠撥打電話。

所以當 App 被安裝在 iPod、iPad 上,使用者點擊撥打電話鈕時該如何回應?是告知硬體限制所以無法使用,還是乾脆拿掉這個按鈕?(RD 辦得到偵測機型決定該按鈕是否顯示,UI 快去追殺他們。)

5.jpg
(App: Youlu Address Book,裝在 iPad 上。)

會員系統

會員系統十分複雜,尤其現在幾乎每支 App 都要和 Facebook 做串接的情況下,就不只有會員登入一項這麼簡單了。

共有 6 種可能性會發生:無帳號、有帳號、輸入錯誤、忘記密碼、串接成功、串接失敗。
無論是發生哪一種,皆有相對應的提示或後續操作。
6.png

  1. 無帳號,進入註冊程序
  2. 有帳號,會分成輸入正確、輸入錯誤兩種。
  3. 輸入錯誤,提示使用者帳號密碼輸入錯誤。
  4. 忘記帳號密碼,進入查詢程序。
  5. 突然斷線,在使用者輸入帳號密碼、等待伺服器驗證時網路突然中斷,需告知使用者目前因網路狀態而無法登入。
  6. 串接成功,串接 Facebook 帳號成功,畫面轉至已登入的 App 操作頁面。
  7. 串接失敗,提示使用者串接失敗,詢問是否稍後再試,或是註冊新會員。

下載檔案

下載檔案的突發狀況也很多種,且有可能數種狀態同時發生。

如下載到一半的檔案使用者是否可以刪除、還是得等檔案下載完成才給與使用者刪除的功能等等。

共有可下載、無法下載、下載中、已下載、刪除、重新取回、突然斷線等。

  1. 可下載,可正常下載網路上的檔案。
  2. 無法下載,網路上的檔案因某種關係無法被下載,此時下載按鍵狀態為不可點擊。
  3. 下載中,給予使用者正在下載的提示,最好能告知下載目前進度。如進度條、下載百分比等等。
  4. 已下載,已下載的檔案需和未下載的檔案做視覺區隔。
  5. 刪除,已下載、未下載、下載中的檔案是否皆可讓使用者自由刪除?
  6. 重新取回,類似 App Store 的作法,已下載過的檔案不用再次輸入帳號密碼即可取回。
  7. 突然斷線,若網路突然斷線,下載到一半的檔案要如何處理?是否有續傳功能?

7.jpg
(App:iBooks,只有下載完成的檔案才能刪除)

地圖

地圖也是App常見的功能,牽涉到網路、GPS定位、顯示筆數等等。

網路和GPS可參考前述的「網路」狀態。
顯示筆數則關係到硬體效能和網路傳輸速度。
超出地圖顯示範圍和使用者的操作有關。
這幾種是最容易發生需給予提示的狀態。

  1. 無網路,參考前述「網路」部份。
  2. 無定位,參考前述「定位」部份。
  3. 筆數太多,當使用者查詢某項資訊,符合筆數可能會超出預期,可以告知使用者筆數太多請縮小查詢範圍。
  4. 超出範圍,使用者想搜尋的目標不在地圖顯示的範圍內,需提醒使用者移動地圖。

8.jpg
(App:PTT美食地圖,非常多筆資料同時呈現,密密麻麻的…)

搜尋

指的是條列式的搜尋功能,可分成兩種,需連接網路或是搜尋本地端資料。
使用者可以輸入文字、或是選擇內建的篩選條件。

  1. 有資料,顯示條列資料,可以進行第二次篩選。
  2. 無資料,提示使用者無相關資料。
  3. 編輯狀態下的搜尋,有的時候列表頁擁有編輯刪除和搜尋功能,要注意在編輯模式下若進行搜尋,頁面該如何呈現,最好簡化操作。
  4. 搜尋範圍,有許多種作法,例如 Mail 的關鍵字搜尋,輸入框下方還可設定更詳細的條件。
    如果讓使用者自訂一個範圍,要注意最大值和最小值之間的關係,比如說已設定最低售價為 1000 元,那最高售價就不會小於 1000,需限制使用者的操作避免不合理的情況發生。

9.jpg
(App:博客來快找,私心偷渡我最喜歡的作家 XD)

編輯

列表的編輯模式,內建可以進行刪除、排序、修改文字等,要注意的是和其他功能同時運作時可能會出現的狀況。

  1. 刪除,列表頁中的刪除通常會有兩種,點擊右上角的編輯按鈕、點擊該欄位前方的刪除圓鈕、點擊確定。或是直接在瀏覽模式中在欲刪除的欄位上由右往左滑動、點擊刪除。
  2. 大量刪除,最常見的是欄位前方放置勾選框,使用者一次點擊多項後再點選刪除。
  3. 排序,通常使用內建元素,欄位右方會有 icon 可以按住拖曳。
  4. 修改,列表欄位的左、中、右可以擁有不同的操作,左方會是刪除、右方是排序,點擊中間會跳出鍵盤可修改文字。
  5. 讀取更多,可編輯的列表頁不見得只限定在本地資料,有可能會出現連網狀態。為了防止一次讀取太多筆數造成使用者等待,一次只顯示固定筆數,待使用者下拉到列尾再讀入更多資料。若採取這種設計,則需考慮使用者該如何操作編輯模式下的「讀取更多」。

10.jpg
(App:提醒事項,編輯模式下左方有刪除 icon、右方有排序 icon。)

操作中斷

手持行動裝置最大的特色就是隨時可以跳出目前操作的 App,這時就需考慮使用者離開再進入後,畫面的呈現。

區分為兩種,一種是 App 在背景模式待命,另一種是完全關閉。

  1. App 背景模式再度被開啟,應該要回到使用者最後操作的畫面。
    遊戲類 App 最常見的就是暫停頁,安全性較高的如銀行、與錢有關 App 的登入頁面通常有時間限制,即使在背景模式中,超過預定時間仍會自動登出。
    若 App 同步或上傳中途進入背景模式,就需要考慮續傳或提示同步失敗請重新再試。
  2. 關閉,需保存重要資料,以便使用者下次開起能接續使用。

11.jpg

以上文章內容是我做了很多個 App 累積下來的經驗(感謝被我拷問的老公),截圖很舊就別再念了,反正概念是共通的嘛!

歡迎大家接力補完,美好的情況下是集眾人力量統整出各種突發狀態和對應處理方案,未來整理成 Pattern 照作就成,省得老是遇到同樣狀況還是東漏西漏煩都煩死。

我比較熟 iOS 系統,所以大部份的觀點都是從 iOS 出發,如果 Android 處理方式不一樣也請各位補充喔。

Akane Lee

Akane Lee

嗨,我是【嫁給 RD 的 UI Designer】,12 年設計經驗、專職教學 8 年,幫助 1000+ 學員成功轉職。這裡不只談設計理論,更用實戰經驗帶你破解職場難題!

Related

wave

Comments

wave
comments powered by Disqus

Press ESC to close