Friday, July 13, 2012

UI 的想法


前年寫的一篇文章,雖然後來沒有被發佈,但也是寫的很辛苦的一篇,就放上來啦

=======================================================================
前一陣子,筆者教母親使用入口網站查詢資料,從尋找輸入框 → 按下〔確認〕鍵 → 到篩選結果的呈現,這些在操作上對年輕人非常簡單的動作,對於母親來說卻如登天一般的難。為何這些看似簡單的操作流程,對母親而言會如此的不順暢呢?經過我後續的觀察與思索,終於發現了問題的源頭,原來是網站上呈現的資訊太多且過於凌亂,讓較高齡的使用者產生了距離感;也就是說,若是網站的親和度不夠,就會讓使用者不容易找到畫面的重點。這讓我開始反思自已設計的網站,是不是也存有相類似的問題呢?




如何設計出讓人沒有距離感又好用的網站呢?實務上是聚焦在「易用性(Usability)」這個概念來進行探討及改善。什麼是易用性呢?根據維基百科的定義,易用性是一種以使用者為中心的設計概念,重點在於讓網站設計能夠符合多數使用者的習慣與需求。這樣的設計理念,能讓使用者在瀏覽網頁的過程中不會產生過多的壓力或是感到挫折,並讓使用者在使用網站功能時,能耗費最少的時間但獲得最充足的資訊(註一)。

所以、定義的核心理念是以使用者為中心的設計概念,以及符合使用者習慣與需求的操作流程,就這二點而言,每個使用者都有自己個人的習慣及需求,當大家進入一個網站平台時,就好比一群婆婆媽媽們進入大賣場買東西一樣,每個人想要的東西不同,逛的路線也不一樣,要如何設計出讓每個人都能順暢操作,微笑帶著所需資訊離開,且下次還會再來的網站系統其實並不容易,為了達到這個目標,網站開發者真的需要花上不少的精力和時間,才能做出讓多數使用者都滿意的網站平台。

自由軟體鑄造場的工作團隊今年在整合 OpenFoundry 網站平台的工作上,花費了相當多的時間在設計站台整合後的使用者介面(User Interface, 以下簡稱為 UI),我們嘗試將各項功能依照它的重要程度及使用頻率,去調整它在網站架構上的優先順序,特別是這些功能在首頁上的呈現樣貌,期間花費了相當多時間在討論如何將頁面做的更友善,架構從初版到拍定歷經七、八次的修改,最終才完成一個多數同仁大致滿意的二層式網站架構。但在後續進行網站易用性測試(Usability Testing)的過程中才發現,使用者的使用偏好和原先同仁們所構思的架構,確實有著不小的出入,在經過這次多方調整的經歷之後,我們發現在網站設計上,網站開發者必須時時提醒自己並精準地把握以下的原則,才不會讓網站設計到最後失去它本來應有的功能與服務性。


【Who are your users?】

網站架構的設計人員必須反覆詢問自己下列的問題:你的使用者是誰?你的平台會想要吸引什麼樣的使用者進來使用?這些問題設計師必須要和網站的經營策略一同構思,要回答上述的問題,首先要確認這個網站的使用群組會是誰,例如OpenFoundry上的主要使用群組就是軟體專案的開發人員,第二步則是探查網站的「潛在使用者」,完成這部份的工作較為困難,但其實發掘並吸引網站的潛在使用者,對於網站的成功維運也是非常重要的一門功課,因為一個網站平台是否真的能夠營運成功,很大程度是依其潛在使用族群的多寡而定。而為了探查使用者對網站的使用需求,一般書籍會指示你進行問卷調查,這是量化的研究方法,但問卷調查其實會耗損非常鉅額的時間成本,而且有時候調查結果與實際使用群組的需求也未必相符,所以筆者的建議是,如果初期網站的建置規模還不是那麼龐大,可以改用質化的研究方法,找出該網站關鍵族群的使用者,透過質性訪談的方式,仔細觀察這些關鍵族群的使用偏好(註二),這將會是更具效率的調查方式。

【What are they thinking about?】

探求網站使用者的具體需求,除了進行上述關鍵族群的質性訪談外,其實還有其他便利的軟體工具可以協助完成這項工作!這邊舉 UserVoice (http://uservoice.com/)這個線上網站為例說明,UserVoice 同時提供了免費及收費二種不同內容的服務項目,透過這個網站,使用者可以提報他對特定網站的建議意見,而這些建議還可以透過 UserVoice 網站進行優先性的投票,票數愈高的項目就代表了更高程度的優先性,透過這樣的方式,個別網站的設計者就可以得知,那些功能是大部份使用者想要的東西,哪些功能具有較高的使用者需求性,進而便可以將這些功能列入更優先的開發順序。

【Make everything simple!】

而有時網站開發者,會想要增加更多功能在網頁平台上,但若是新功能的配置失當,便很有可能讓網站架構變得更加複雜,引發更多的使用困擾。從這個觀點來看,此時網站開發者就必須要掌握第三個重點「Make everything simple!」,但切記這樣的「簡化原則」並不能被無限上綱!有的網站設計師會認為既然 80% 的使用者只會操作網站 20% 的功能,那是不是只要突顯這 20% 的功能,刪去看似累贅的其他功能,就可以讓網站系統變得更適合使用?其實不然,如同本篇文章一開頭提到的「大賣場理論(註三)」所說的:商場設計的重要概念之一,就是用最清楚簡便的規劃方式,協助消費者快速採買到他所需要的貨品。而易用網站的概念,就是依循設計原則協助使用者,直覺式地找到他所需要的網站資訊,為了達到這個目的,以賣場銷售的流程來比喻,網站開發者的責任是將消費購物的路線指引標示好,不要讓貨品的分類與購物路線過於複雜,這樣才能夠便利消費者用最快的速度採購到他所需要的貨品,而不是一昧的刪減貨品供應的品項。

今年 5 月份時筆者有幸參與了由 UPA(Usability Professional Association)所舉辦的「Embracing Cultural Diversity: User Experience Design for the Word」研討會(註四),該會議的參展廠商也特別針對「介面易用性」這個概念,展示了許多能夠協助開發者提升操作平台易用性的輔助工具,包括:使用者需求分析、介面測試、操作流程簡化,以及快速建置 UI 畫面的相關服務,筆者當時訪談了一些有趣的廠商,便透過此篇文章羅列如下供讀者參考:

Etnoteam Finlandhttp://www.etnoteam.fi/):協助顧客產品進行全球的易用性測試(Usability Testing),受測試的國家範圍包含了國民所得較低的第三世界國家,值得一提的是,其測試方式非常多元化,例如讓受測者在線上網站上觀看影帶,並具體分析記錄使用者與線上網站之間的互動模式。

Loop11http://www.loop11.com/):專精於網站易用性測試方面的服務,強項是以專案的方式進行網站測試的操作流程,其將客戶的網站內嵌至他們的服務平台進行測試,透過這種方式,專案測試員的每一個動作都將被服務平台自動記錄。

Tobiihttp://www.tobii.com/):擅長利用使用者視線追蹤(Eye Tracking)的方式來分析客戶網站的易用性,其測試裝置能透過隱藏式的攝影機,精確地抓取受測者的視線位置,並自動記錄這些資訊以利後續分析。廠商當場並以亞馬遜網路書店(http://www.amazon.com/)為例,說明視線追蹤技術的強項,在於錄製測試者閱讀網站畫面的視線重點,這將有助於網站設計師了解 UI 設計所應強化的視覺點為何,並以此為基礎協助使用者在操作流程上可以更為順暢。

UIDhttp://www.uid.com/):致力於推廣人性化操作介面(Natural User Interfaces, NUI)設計理念的公司,現場並提供操作測試機給與會者試玩。所謂的人性化操作介面,是指使用者可以透過自然的方式,例如利用手指隨心所欲地操作測試系統,以此發掘並記錄使用者「自然而然」的直覺式運用習慣,就功能而論,是一種富含創意的使用者習慣探索與記錄系統。

RGOSIGNhttp://www.ergosign.de/):開發名為 Antetype 的操作系統原型(Prototype)建置平台,此平台可協助建置手機、網頁的操作介面,甚至是汽車系統的儀表板,只要是使用者的操作介面,都可以透過它來快速設計原型,其實 Antetype 的操作概念類同傳統上的紙繪設計(Paper Prototyping),所謂紙繪設計的方式就是透過紙本繪圖的方法,協助網站開發者以圖示拼裝的方式,快速整理網站系統的操作架構,但當所欲建置的系統有太多的操作畫面時,這樣的圖繪過程又顯得過於費時耗工,而 Antetype 平台就是設計來解決這類問題,透過 Antetype 內建的操作工具(Widget),使用者可以將任何想要使用的圖示或是按鈕(Button),透過滑鼠拖拉的方式將操作畫面描繪出來!

最後,網站易用性的設計理念其實也還存有許多的不同派別,而操作畫面的流程亦會隨著使用族群的偏好而有所改變,但究其要裡,易用性的核心理念不會輕易改變,那就是「盡量設計出符合使用者需求的網站平台」。網站系統的設計工程人員必須確實了解:「網站架構該適應的不是平台開發者的開發理念,而是日後會真正使用平台功能的使用者需求」。除了這個原則之外,在實作上另一個重要的概念就是「落實使用者的試用分析(Testing)」,並翔實的記錄這些試用意見,因為唯有透過使用族群的試用分析,網站開發者才能具體得到使用者的需求回饋,後續也才能夠依據這些重要資訊來改進網站的操作架構!

註一:更多「易用性」的相關定義,可參照維基百科提供的說明資訊:http://zh.wikipedia.org/zh/%E6%98%93%E7%94%A8%E6%80%A7
註二:許多時尚產品的製作商在推出新品之前,常會針對其消費族群,直接進行一對一的訪談觀察,透過此種前置作業所設計出來的產品,實際推出後的銷售率,多高於不進行訪談便直接設計銷售的一般產品。
註三:請參考 Steve Krug, Don't Make Me Think: A Common Sense Approach to Web Usability.>
註四:研討會 2010 年的活動網址如右所示:http://www.usabilityprofessionals.org/conference/2010/index.new.html

No comments: