Wunderlist｜AppObservationExercises #2

An app-studying exercise to build up UX design mindset.

這是 App Observation Exercise 系列之二，在這個系列行動中，我會觀察一些熱門的 Apps，並把一些關於流程、空間等等的 UX Design 發現記錄下來。這完全是個人練習，如果有任何回饋或建議也歡迎在下面留言給我唷！

這次的 App 是 Wunderlist

Wunderlist 是一個讓人輕鬆管理日常生活的待辦清單工具，自用共用兩相宜，沒錯他還能與他人共享協作，感覺上功能非常強大。一直有聽說這個app有著真實流暢的介面互動設計。

雖然他最常被人所推崇的就是簡潔流暢的互動介面設計，但已有太多文章推崇過，我這邊還是專注在整個流程跟空間的設計以及初次使用者的心得感想。

先來談談整體空間感

（中間粗線為主要任務流程，其他為非主要任務流程；深淺兩區塊意味著兩塊屬於不同張紙、不同空間。）

1. 非主要任務的部分：轉場方式為由下而上插入，因此感覺像是藏在主要任務下方的另一張紙。包括 Profile、Activity、Conversation，及 To-do list page 下方 bar 上的 Share with others、Sort。
2. 主要任務：

• Start page（下圖左）要轉場進入 To-do list（下圖右）時，由右而左滑入，雖在同一張紙上，但兩者相異的背景及 layout 還是明顯創造出層級差異。

start page(左) 與 to-do list(右)

• To-do list（下圖左）要轉場進入個別 To-do（下圖右）時，To-do list 整頁後縮，同時所點選的to-do由右而左整頁滑入，To-do list 的後縮及兩者完全不同的 layout 讓人明顯感受到兩者屬不同層級，讓個別 To-do 的獨立性、富含此 App 重點功能的靈魂人物主角特質明顯跳脫出來。

• 藍色加加鍵：用於在 Start page（下圖左）快速 Add a to-do。點選此鍵後出現的頁面（下圖右），看似獨立於 Start page 系統外，原因有二，一因為他是 hover 在 Start page 之上，感覺像是一張便條紙，二是因為轉場方式為由下而上插入。會這樣設計的原因，我已列在下方「 Start page 快捷功能」段落中。

再來說說更細部的體驗

User Onboarding

1. 要先註冊，雖然可以直接連結臉書帳戶，但不知是甚麼緣故無法連結。停留在這步無法直接體驗核心功能確實會降低使用這個 App 的動機。
2. 為何第一步就是註冊？為何不讓用戶先體驗產品或了解註冊的好處（跨裝置連結及協作）再引導註冊？順帶說明，若一開始為引導用戶註冊先說明註冊的好處時，亦要考慮到新用戶最初想解決的問題可能純粹是記事，突然出現太多功能（好處）可能會讓他覺得太複雜而不想用。
3. 在 on boarding 的最後一步，秀出 suggested list sample，並先 default 勾選出幾個較常見的 list，是個讓用戶能快速進入使用情境的好方法。[圖]

start page

好奇什麼是 inbox？圖示不一樣會讓人覺得是相異於其他 item 的，但一一點進去後又不知道是相異在哪，新用戶可能會好奇但暫時選擇忽略（沒有太大干擾，亦能因此預期到這個 App 是有對外互動的功能）。

start page 快捷功能：create a to-do

1. 這個快捷鍵顛倒了原本流程（原本流程：先選擇類別再增加 To-do ），讓使用者可以一打開 App 就可以立刻 get the job done，趕快把東西記起來。而非依照制式流程，先煩惱分類再記事。快捷鍵的存在有助於同時保有快速記事的功能及記事本的空間層次感。
2. 如下圖，所屬 list、due date、reminder setting 為同層級的功能，卻用不同的格式，在螢幕鍵盤上方的 due date、reminder setting 很容易被忽略掉，因為那區塊已有太多提示字詞相關的資訊。

to-do list

• Add a todo時，Done 鍵應該出現在同層級的區塊，而非出現在 heading處。

2. 在上圖 header bar 上的 list 名稱或許可以直接點就能編輯？像 trello 那樣直覺。

3. Edit 功能

點選To-do list頁面（左上圖）的edit鍵後會進入Editor頁面（右上圖）

• 預期 To-do list 頁面（左上圖）右上角的 edit 鍵是指可以 edit 整個頁面，包括 To-do list 名稱、個別 To-do 名稱及個別 To-do 狀態（Complete、Star、順序…)，但點擊 Edit 鍵進入 Editor 頁面（右上圖）後，發現只能編輯各個 To-do 的狀態。
• 會點Edit的人通常是新手（因為老手會知道 Editor 頁面的功能基本上都可以在 To-do list 頁面中用不同手勢完成），但 Editor 頁面的 UI 卻讓人困惑，因為下面突然出現一排選項，沒有任何 call to action hint，用戶會不知道第一步要做什麼。或許可將用戶該做的第一件事（供勾選的圓框）設計的更明顯，目前的顏色太淺。
• Editor 頁面中的回到上一頁圖示鍵及 Done 鍵，會有點搞混。編輯完後會直覺的點選回到上一頁鍵，因為相對於 Done 鍵，回到上一頁鍵是圖示較簡單，且使用 iphone 的習慣使然，容易在編輯完後直覺按回到上一頁鍵而非 Done 鍵。

整體來說 Wunderlist 的體驗是舒服的，也能立刻解決我想要解決的問題，流程順暢，空間感強烈，互動設計也很優雅，唯有一些層級方面的設計會讓人困惑。

以上是我很粗淺的 UX 觀察練習，謝謝你看到這裡，如果有任何回饋或建議可以在下面告訴給我唷！有任何成長學習的機會我都會很開心的：Ｄ

下回見！