嫁給RD的 UI Designer

UI/UX 設計、教育訓練、課程演講

高雄-6月份 UI 設計師入門班,報名頁面

各種狀態與突發狀況

| Comments

即使畫了非常精細的 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 處理方式不一樣也請各位補充喔。

UI ux

Comments

comments powered by Disqus