從小菜單發現網站設計的大學問!.

 

 

定義使用情境可方便了解使用者與產品之間的互動關係,由此設計出符合使用者需求的流程、功能與介面。不過,在網頁設計或產品設計的過程當中,往往規劃者就只專注於使用情境所描繪的故事主線上,這樣產品雖然可以符合企劃方向,最終的結果卻很容易讓人使用不便。

在生活中我們時常可以發現這種令人困擾的例子。
前一陣子和朋友去吃飯,一群人浩浩蕩蕩到了小吃店,拿了菜單準備點餐,卻不知道該怎麼填寫,因為菜單是這樣設計的:

rootdesign0529

店家很貼心的在菜單每一項食物上分為大和小兩種份量,並有加蛋包、魚丸、貢丸和餛飩的四種選項提供選擇
但是這樣的菜單設計問題出在!如果點了一種以上的同樣食物,就無法區分食物分量的大小;這份菜單使用情境適用於只想吃一種相同食物的顧客,卻忽略了同樣食物可能被點一次以上的狀況。

原也設計覺得像下圖這種菜單設計,比較容易讓人一眼就清楚瞭解是要表達什麼也很方便店家自己在忙碌的時候,不會眼花撩亂看錯食物做錯或多做產品出來。

rootdesign0529

 

在設計使用情境時,如果能考慮網站規劃的使用上是能夠避免使用者踏入陷阱。
當然,一個產品或網頁的產出很難考量到所有的狀況,所以通常是在產品開發時或推出後發現錯誤再從中補強修正,原也設計覺得如果你的網頁一直讓人覺得使用不良的話,可以試著設想以下這三種狀況並做好事先的完整規劃

 

重複動作與錯誤動作

rootdesign0529

介面中的功能較常需要考慮這種狀況。
以網站註冊時寄送給使用者的啟動帳號信件為例,需考慮的狀況包括:

1. 當使用者已經啟動帳號,又重複再按啟動帳號按鈕的狀況(重複動作)
2. 當使用者沒有啟動帳號就登入的狀況,回應的介面該呈現何種資訊與功能(錯誤動作)

 

多筆內容與無內容

rootdesign0529

資料呈現的介面較常需要考慮這些狀況。
以多筆內容狀況而言則需考慮如何設計排序規則以及瀏覽方式,才能在使用上快速又方便
而無內容狀況則要考慮到當無內容時,介面該呈現何種資訊才適當。
以上圖右邊的那張顯示來看,當 Wishlist 新功能在 Google Play 推出時,無資料狀況就會呈現使用功能說明。

 

資料變動與功能變動

rootdesign0529

資料變動狀況需考慮版面呈現,以部落格文章瀏覽頁面中的文章標題為例,如果規劃時想像文章標題的文字多為一行內,還是要規劃當文章標題超過一行時該如何呈現在頁面中,比如是要換行繼續顯示標題文字,還是在第一行尾端以「……」節錄呈現?

而功能變動則要考慮產品全面的影響,需思考是否會影響到其他功能或其他頁面,以及如何讓使用者知曉新的功能變動

 

開發產品時的確難以考慮到所有的狀況,通常也是遇到問題時再想因應對策!
不過,因為有時解決方法會讓產品產生大改變,影響梗個開發時程,所以最好還是能在企劃初期就考慮進去。
畢竟我們不太可能期待所有使用者都隨者規劃的情境走,狀況規劃能夠讓使用者再度回到正軌,也是支持整體使用經驗的一環。

 

《圖文轉編自:科技報橘、google》