 |
| XX Zhang 菜單 |
這時，我們來做一個情境聯想 ~ 就來想像一下我們是一位來台灣度假的米國背包客：
- 魯肉飯是2塊還是33塊？
- 如果外國人看到這個菜單會不會以為是美金2塊？
- 小魯A & 小魯B是一個248一個249嗎?
- 紅字看似標示了重要資訊，但若是使用者沒有注意到頂部那兩個小小的"單價"會知道那是單價嗎？
- 編號如此不規則的排序方式是從哪一個公式算出來的我也很困惑？
What ever.....
這讓我思考到一件事情：
即使這不是另人生氣的登入頁面(sign up page)，顧客只需選擇一個自己想要的食物就好。
但對於使用者來說一個"明瞭簡單"的表單與頁面設計其實是很重要的。而登入表單這件事情又是一門大學問，光是不同device的表單設計就是一件令人頭痛的事情。
這邊我舉出一些簡單的設計原則供各位參考：
Web forms
- 簡易的表單頁面設計，頁面無須增添無謂的廣告或是資訊最好。
- 93% 的表單偏向於單頁式註冊形式，而非setup wizard 一步驟一步驟的感覺，因為我們知道使用者不會有耐心去一步步設定完註冊程序，且還有一個例外情況，當使用者乖乖的在註冊的道路上時，不小心被中斷或是失敗，他會在註冊程序中迷失方向。
- 若以標籤對齊來說，靠右對齊的表單相對於靠左對齊的表單更易觀看。這件事可參考文字編排的原則，當我們把表單齊右會有一種把文字框與title緊連在一起的群體性(上圖)，但是但我們齊左的時候，會感覺title與文字框有段似有非有的距離感，像是一個分房的夫妻一般(下圖)，較不易閱讀。
 |
| title齊右 |
 |
| title齊左 |
Mobile forms
而在手機上的表單設計基本上依循著web的設計原則，但必須注意的是：使用者在手機操作，不是用鍵盤操作，那是不是有更快更直覺的設計模式或互動方式用手機填寫表單呢？
- Geo-location 的使用：加入手機的優勢，可以隨時隨地偵測使用者的方位這塊我們將它應用在填寫表單的時候，自動填入區域碼與地址就是一個很好的應用形式。例如一個簡易的訂票系統表單，手機自動在使用者填寫標單的同時偵測到起始位置，對於急迫訂票使用者來說就是一個很好的互動介面。
 |
| 高鐵T-EX app |
- user account ： 當使用者使用手機進行sign up的動作，我們可以考慮抓取使用者在google or apple 的帳號資料，讓手機自動填入號碼、性別、email等等資訊，減少使用者的sign up effort 。
- 創新表單設計：Typeform
總之，把我們當作使用者來思考，不想在小小螢幕輸入一堆資訊還要滑來滑去這件事情一直是使用者最厭煩的，把表單的輸入與device的優勢結合在一起，就可以設計出最直覺的表單了。
POINT : 沒有人喜歡也沒有耐心把所有表單填完，我們應該設計出一個 直覺、快速、簡單 的表單，並刪除干擾用戶的所有動作。
Reference
Will Hacker (2012, December 19). Boost Your Mobile E-Commerce Sales With Mobile Design Patterns. Message posted to http://uxdesign.smashingmagazine.com/2012/12/19/boost-your-mobile-e-commerce-sales-with-mobile-design-patterns/
Vitaly Friedman (2008, July 04). Web Form Design Patterns: Sign-Up Forms. Message posted to http://uxdesign.smashingmagazine.com/2008/07/04/web-form-design-patterns-sign-up-forms/
Written By Rice Tseng
沒有留言:
張貼留言