BAD UX

別讓這三個常見的 UX 錯誤 壞了你的好設計

身處於科技業的設計師是無法一人扮演產品開發中的所有角色。可是顧客與相關權益人又常對設計流程產生誤解,他們也許不知道後端的程式開發與 UX 設計是不同的學門,甚至認為設計師應該要解決所有網站開發的問題。當你帶著這些刻板印象踏入到這個相對較新的 UX 領域時,你也可能會犯了一些錯誤。我們收集了一些大家較常犯的 UX 錯誤 (使用者體驗上),並提供一些方針來避免。

Photo credit: “brain picture”. Allan Ajifo. Creative Commons.

Photo credit: “brain picture”. Allan Ajifo. Creative Commons.

 

錯誤 1:為自己設計

我們常會因設計、藝術與美感的天賦,而對某些事物有獨到的看法,但也顯得不夠客觀。其實在創意領域工作的我們都知道,過去的教育被養成必須有獨到的主見,導致自我的經驗往往會成為我們判斷事實的依據。不過要成為一位成功的設計師,有時必須辨析自我主觀意識與需求的差異(不是自爽而已)。你最大的目的並不是試圖證明自己的設計無誤,而是檢視有沒有替使用者打造出印象深刻的體驗。

當然,要區隔自己想要的與使用者的真正需求確實有點困難。設計師對自己的作品負責就像自己對小孩一樣,但你必須搞清楚負責的對象應該是使用者,而非設計師的自我感受。如果想要平衡自我想法與使用者需求,最好的方式就是分析別人的作品。這邊有個優秀的網站設計介紹給讀者,由 Weber Grills (戶外烤具公司)推出能表現 BBQ Cultures 網站。

Photo credits: BBQ Cultures

Photo credits: BBQ Cultures

Photo credits: BBQ Cultures

Photo credits: BBQ Cultures

 

這網站的設計應用了鮮明大膽的顏色、清晰的大圖與有著陽剛配音的介紹影片,完完全全的營造出戶外活動等的意象。在網站上還刻意做出了一個互動元件,就是讓使用者由左至右拖拉隔熱手套的 icon,藉此觸發打開烤肉蓋看到裡面熱騰騰肉片的興奮感!這種透過提示來讓使用者自我發覺的互動方式,確實是一種網站設計的好概念,同時也會帶給使用者莫名的自信感(特別是男性族群)!

這個網站充分地掌握了說故事的力量,將一群好友露營時與產品的互動故事呈現的很好,但又沒有過度的設計,譬如長度洽到好處的動畫與影片,能勾起你的興趣卻不感到冗長;而且圖文並茂的表達使用產品的實際情境與方法。

Photo: Google Mobile Friendly Test Tool

Photo: Google Mobile Friendly Test Tool

 

此外,BBQ Cultures 這個網站在不同的移動裝置上,也維持了一致的體驗。當我們將這個網站丟到 Google 推出的移動裝置友善程度測試平台上 進行測試,它拿到相當高的分數。

目前為止,我們已經探索了一些視覺上的案例,現在就讓我們在設計流程上嘗試更多小方法(可參考免費電子書):

  1. 在整個設計過程中,要時時刻刻提醒自己思考使用者的處境與狀態。
  2. 創建一個完整的 使用者旅程表 來呈現不同的使用者族群如何使用產品
  3. 創建 顧客人物誌 ,在開發中透過它來更深入地了解不同使用者族群會如何使用產品?並知悉他們對產品與公司的期待有何差異等。
  4. 首先,釐清與發現介面設計時可能會發生困難之處,接著打造最初的 wireframes,並搭配使用者的旅途表等工具來確保能有好的使用者體驗。
  5. 盡可能的以各種裝置來進行測試。如果專案夠大,你可以進行 田野調查(field research) 來觀察使用者(如果都無資源進行,至少也可以實施使用性測試)。
  6. 嘗試透過 A/B testing 來測試不同設計因子的成效,例如顏色、按鈕、文字或圖片等。

錯誤 2:認為 UX 就是 UI

因軟體創新的趨勢,UX 與 UI 兩門學科引起了大家的興趣,不過將其混為一談是普遍犯的錯誤,設計師應該隊這現象不意外。而對此領域較陌生的人們而言,使用者體驗與使用者介面的縮寫(UX 與 UI)很相似,確實一開始會造成困惑。

另一個容易造成混淆的原因是,這兩個科目有部分相似。例如,UI 關注於使用者如何透過介面與產品互動,而這部分又屬於 UX 在探討的一部分。但其實這兩個學門還是有很大的差異,UI 是考量使用者的目標後,設計按鈕要放哪?下一步是那個頁面或要做什麼等;而 UX 主要是考量設計會帶給使用者甚麼樣的感受(feel)。

Image source: Hello Erik

Image source: Hello Erik

 

最後簡單的總結,UI 設計的目標是創造有效率的介面,來協助創造好的使用者體驗。

回顧一下上面有提到的一個觀點,就是進行使用性測試,所得到結果可以確保設計師隨時都能專注於設計符合使用者期待的體驗。千萬別犯了只求打造爭奇鬥艷的介面,而忽略的真正要解決的問題之錯誤(國外有一篇文章 Dribbblisation of Design 在探討這個問題,Dribbble 是著名的設計師社群,作者批判很多作品屬於表現性質,就商業面與體驗面而言,並不成熟) 在你開始要透過 Photoshop 或 Sketch 等工具繪製前,一定要了解你的用戶,包含他們擔憂什麼、目標、期待、行為與理想。

就如同上方的圖片,UX 包含各領域的學門,要有優秀的產品體驗,以上元素缺一不可!例如,設計出美麗的介面,但能保證它運作良好嗎?亦或,能做出機能性很強的介面,但能保證使用者都喜愛它嗎?

當要進行 UX 或 UI 設計之前,請先保持一個想法,就是內容優先(定義使用者最想由你的產品或服務得到的資訊,可以是文字、圖片或影片等)。並進行初期使用者研究後,再思考整個產品的架構與互動方式,接著應用一些工具將網站地圖繪製出來,這樣就可以具體的探討整個流程中的使用者體驗。

Photo credit: UXPin via Barrel NY

Photo credit: UXPin via Barrel NY

 

上方圖片為 Barrel NY 以資訊架構的方法,透過好用的線上互動原型工具(UXPin)做的網站地圖。一旦有了思考縝密的網站地圖,設計師就可輕易的繪製出 wireframe 或 prototype。而網站地圖的繪製工具很多,非設計師的族群可以使用能簡報與繪圖的軟體即可。

我們推薦設計流程的順序為:

  1. 呈現內容的架構
  2. 互動設計
  3. 視覺設計

這樣的流程相當合理,因為內容構成了設計的基礎,而且這也是使用者確實關心與在乎的。其次,不斷的透過低仿真的原型來測試互動的效果,也可以確保你更能掌握好的流程。最後,進行視覺設計來打造吸引人的體驗。

錯誤 3:要求使用者提供過多的資訊

使用者沒那麼多時間(有時也很懶惰)。你越是增加表格的欄位,使用者填寫或使用的動機就越低!

就像我們在 Interaction Design Best Practices 一文中提到,在設計時應盡可能的減少使用者體驗中的阻力。例如 Duolingo 這個語言學習平台,註冊時它僅讓使用者填入"想學習哪個語言"與"基本的聯絡方式"而已。

Photo credit: Duolingo Signup form

Photo credit: Duolingo Signup form

 

以下的案例是 Imaginary Landscapes 在幾年前進行的實驗,主要探討過多的表單是否會影響使用者註冊的意願,對照組分為要填入11項與4項資訊的表單。最後再以選擇題的方式,詢問測試者對個別網站的看法。

以下為需填入11項資訊的表單:

  1. 姓名
  2. 公司名稱
  3. 地址
  4. 城市
  5. 郵遞區號
  6. 電話
  7. 傳真
  8. Email
  9. 希望的聯繫方式
  10. 留言

以下為需填入4項資訊的表單:

  1. 姓名
  2. 電話
  3. Email
  4. 留言

其實透過移除電話與留言的欄位就可以或多或少的降低使用者負擔(通常這兩個也是最沒幫助的),但可能你所屬產業的特性,認為使用者的電話相當重要,因此想要透過表格得到該資料。但換個角度來想,使用者可能不太願意接起陌生的電話,而失去你原本的目的。

最後,這個實驗發現較短的比起較長的表單註冊數高14倍;轉換率也高將近12倍。此外,這個實驗也發現 “移除的欄位項目" 並不會影響到轉換率。換句話說,會影響註冊表單轉換率的是欄位的數量多寡,但欄位的項目內容是不影響的。
Photo credit: Squarespace

Photo credit: Squarespace

老實說,我們無法告訴你多少欄位數量才是最好的選擇,因為不同的產業領域可能都有最適合的表單數量,但你可藉由研究使用者來初步定義不可或缺的資料有哪些。然而,在公司內我們常見到團隊在爭論表單資訊的項目,銷售團隊認為想要收集更多使用者資訊,但設計師考量了使用者不想填太多資料的體驗問題。因此平衡與判斷此議題,最好的方法就是實驗。

舉個例子, Expedia(智遊網) 發現當他們拿掉表單上的一個欄位後(這個欄位就是"公司名稱",而它常讓使用者誤認為必填),銷售額大幅成長。上述案例的結果,應該讓你有足夠的理由進行 A/B testing 來驗證表單上的元素了吧!

 

更多的方針與建議

我們僅精簡的描述以下的方針與建議,而這些簡單的原則建議大家還是必須在設計時想到:

  • 保持簡單、易學習 – 極簡與扁平化設計日趨受到大家歡迎,主要原因就是它拿掉了許多使用者不在乎的元素,讓使用者專注於內容。就如同先前的文章 Web Design for the Human Eye 指出好的網站設計手法之一,即是採取內容傳達為第一順位、及減法的設計哲學
  • 良好的導航架構(Navigation)– 網站的導航設計需優先考量移動裝置 ,確保可點擊的功能附近保留足夠的留白空間,避免使用者在移動裝置上誤觸。更重要的,設計每一頁時,都要考量使用者第一次訪問可能產生的問題。初次訪問的使用者就像迷失方位的遊客,你必須帶給他們明確的方向感(目前所在位置),另外也要給予簡單明確的指示(下一步)
  • 運用心理學 – 心理學就是設計的基礎,你的設計應該要讓使用者產生信任、喚起情感等,所以更要經常接觸與學習相關知識, 例如色彩心理學、 人的行為 與 如何表現介面吸引力等。

 

我們明白剛接觸此領域的設計師或其他職業者,還有相當多的知識需要學習。若此時遇到問題,我們建議設計師們試著去思考或詢問使用者會怎麼使用,然後再考量商業目標來尋求最佳設計。會以這樣的順序來思考,是因為商業目標雖美好,但無法滿足使用者的需求,也無法成功。

如果大家還有興趣了解如何設計良好的體驗,可以下載免費的電子書 – Interaction Design Best Practices: Time & Behavior。內容含有超過30間公司的案例,如:Google、AirBnB、Facebook 與 Yahoo 等。  

 

本文章已獲得作者授權,翻譯自:3 common UX mistakes killing good design by Jerry Cao ,原文出處 TNW News

本文章所屬設計大舌頭與作者所有,未經授權,不得轉載!如需轉載,煩請通知

如果你也喜歡我們的文章,請 Follow 我們的 Facebook 專頁,每天都會分享許多精選文章!

分享此文: