空白狀態頁面改造 — 愛食記
個人設計筆記 + 一點重新設計。
文章結構
- 什麼是空白狀態？
- 如何做
- 改造前
- 改造後
- 設計理念
- Prototype
- 其他重新設計
- 結語
什麼是空白狀態？
我覺得未經設計的空白狀態，像一道空白的牆，使用者被你引導到這裡，打開門，結果印入眼簾只有一道白牆，這時候尷尬的使用者只能原路回去甚至最嚴重的因為覺得無趣而離開。
怎麼做比較好呢？就算牆上還沒掛東西，也許我們可以幫它加裝一扇門之類的，不讓使用者碰壁並繼續體驗，這就是本次我想要練習的項目 — 空白狀態 Empty State。
如何做？
這裡有一篇很棒的參考文章：
提到空白狀態會出現的時機有三種：
- 首次使用： 首次開啟 App
- 發生錯誤：觸發某事件
- 使用者主動清除：當使用者把內容都清空時
好的空白狀態可以達到這三種效果：
- 教學與幫助：告訴第一次來到頁面的使用者該怎麼操作。
- 讓使用者開心：即使是因為錯誤而彈出的頁面，也可以用幽默容易理解的圖文告知使用者錯誤發生了，並引導他離開。
- 激勵使用者行動：“還沒有收藏的文章嗎？點這裡去看看吧！”，可以趁這個時機引導使用者作出行動填滿這個頁面。
改造前
愛食記會將我推薦過的食記記錄在這裡，對於喜愛收集美食資訊但不會很仔細分類的我相當實用，但對於第一次的使用者就會看到這個畫面，只有告知使用者清單沒有食記，但是要怎麼、在哪裡推薦呢？如果在這個時候加入引導的話，可以促進更多的互動吧！
改造後
設計理念
- 教學與幫助：更改原本的文案，讓調性更加活潑一些。
- 刺激使用者行動：加入 CTA 按鈕，引導使用者互動。
- Icon 的圖案是提示使用者在按下 CTA 按鈕後該尋找什麼 Icon，精美的 Icon 應該也有讓『使用者開心』的作用吧！（自己看了覺得很開心lol）
我還有改造一些其他畫面：
整合推薦人數、評論人數、收藏人數到按鈕裡，讓版面更簡潔；調整一些文字層級，讓標題突出，將原本放在漢堡選單中的目前位置移動到標題列，讓使用者可以直接看見目前設定的位置。
如果你收藏的餐廳在附近時會特別顯示出來，會想做這個功能是因為我自己常常會有收藏美食在 Google 地圖，出去玩的時候會看看地圖如果附近剛好有收藏的餐廳就可能會順路去吃吃看。
修改了文字層級，讓距離的顏色更明顯方便使用者掃視，右上角的篩選則是可以選擇像是早餐、午餐、飲料店之類的。
結語
空白狀態是一個經常被設計師忘記的頁面，其實是一個可以把握促進更多與使用者互動的機會。
會選擇愛食記，是因為前陣子有參與過他們的視訊面試，也是我第一次參與視訊面試，很想要在面試前做出一個不錯的 Redesign 可以驚豔到對方，結果高估自己的製作能力，沒能在面試前做好，也沒時間好好準備自己的面試題目，面試完的當下就覺得完蛋了orz，覺得很可惜蠻喜歡這家公司的，如果有妥善準備不知道現在會怎麼樣…
不過也因為這次經驗讓我學到面試的經驗，相信下一次會更好的，也在這邊再次謝謝兩位創辦人願意給一個設計菜鳥機會聊聊xD。
