十項使用者體驗設計優化原則 - Medium
文章推薦指數: 80 %
10 Heuristics for User Interface Design. Heuristic這個詞常常在UX界聽到,實際上他代表的意思並不是“啟發式”,正確的意思是指“ ...
GetunlimitedaccessOpeninappHomeNotificationsListsStoriesWritePublishedinUXeastmeetswest十項使用者體驗設計優化原則JakobNielsen(NielsenNormanGroup的共同創辦人)在2005年時提出十項做使用者體驗設計的大致原則。
10HeuristicsforUserInterfaceDesignHeuristic這個詞常常在UX界聽到,實際上他代表的意思並不是“啟發式”,正確的意思是指“藉由過往經驗去得到啟發”,因為不知道簡短的翻譯是什麼我就沒翻了。
這十項原則在念UX相關科系時往往都會讀到,提供設計師設計時大致上遵循的原則,這篇文章我會將它翻譯並拿出一些實例提供參考。
1.明確顯示系統狀態(Visibilityofsystemstatus)Thesystemshouldalwayskeepusersinformedaboutwhatisgoingon,throughappropriatefeedbackwithinreasonabletime.藉由合理時間和適當回饋,系統應該讓使用者知道現在的狀態是什麼。
一般比較常見的可能就像是loadingbar,或是顯示剩餘時間等等讓使用者可以有概念現在狀態是什麼,以免失去耐性或是對產品產生焦躁感。
其他例子像是你在推特tweet的時候,或是寄email的時候發出聲音也是其中的案例。
IOSmailapp的顯示系統狀態範例2.連結系統與真實世界(Matchbetweensystemandtherealworld)Thesystemshouldspeaktheusers’language,withwords,phrasesandconceptsfamiliartotheuser,ratherthansystem-orientedterms.Followreal-worldconventions,makinginformationappearinanaturalandlogicalorder.系統應該以使用者熟悉的文字、語言和句法來呈現,而不是使用系統導向的術語。
遵循現實世界的習俗慣例,讓資訊已有邏輯而自然的方式呈現。
許多軟體(尤其非大眾消費產品)都會放置許多工程術語,這樣常常使用上會讓使用者混淆,使用者也不習慣這些語言,當然有些產品是針對專業者使用的,但就要更小心要讓每個專業術語都有邏輯性,而不是有些使用者叫一個名詞其他人又用其他名詞。
小編Wei現在在工作上做的音頻軟體常常有這種困擾,譬如靜音(Mute)有各種可能,可能是RFmute(把音頻關掉)也有可能是Audiomute(聲音靜音)等等。
3.提供使用者控制權和自由度(Usercontrolandfreedom)Usersoftenchoosesystemfunctionsbymistakeandwillneedaclearlymarked“emergencyexit”toleavetheunwantedstatewithouthavingtogothroughanextendeddialogue.Supportundoandredo.使用者常常會點到錯誤的功能,因此系統需要一個清楚的“出口”讓使用者離開不應該在的狀態,而不需要透過繁瑣的步驟。
另外系統也應支持“回覆動作”和“重新動作”。
常常使用者會不小心按到不該按到的地方,像是寫email時不小心按到取消。
以下例子就是emailapp在你不小心按到取消時會給你確認的按鈕。
4.一致性和標準化(Consistencyandstandards)Usersshouldnothavetowonderwhetherdifferentwords,situations,oractionsmeanthesamething.Followplatformconventions.使用者不應被不同的文字、狀態和動作是否包含相同的意思而感到混淆。
PlatformConventions提供大致上做設計標準的準則。
一致性和標準化是讓產品使用者體驗優化的關鍵。
譬如手機的app裡面,如果一個按鈕在許多頁面顏色不一致,或是按鈕的不同狀態也有諸多差異,則累積下來會造成使用者混淆,也無法讓使用者熟悉產品,這就是為什麼AgileProcess裡UX設計師會先建立一個設計標準或是designspec,讓工程師和開發者遵循設計的標準進行開發。
以下是Google所建立的MaterialDesignGuideline,讓給AndroidAPP做設計的開發者有標準化的視覺效果、動畫。
GoogleMaterialDesignGuideline5.錯誤預防(ErrorPrevention)Evenbetterthangooderrormessagesisacarefuldesignwhichpreventsaproblemfromoccurringinthefirstplace.Eithereliminateerror-proneconditionsorcheckforthemandpresentuserswithaconfirmationoptionbeforetheycommittotheaction.比起讓使用者知道“你這步做錯了”,更好的方式是讓使用者一開始就預防錯誤。
可以減少錯誤導向的狀況或是在使用者進行行動之前給使用者確認的步驟。
以下是Google在建立帳號時在使用者建立帳號前,一步步地跟使用者確認和提供使用者帳號的限制資訊。
6.讓使用者去認知而非記住系統(Recognitionratherthanrecall)Minimizetheuser’smemoryloadbymakingobjects,actions,andoptionsvisible.Theusershouldnothavetorememberinformationfromonepartofthedialoguetoanother.Instructionsforuseofthesystemshouldbevisibleoreasilyretrievablewheneverappropriate.減少使用者需要記憶的事情、行動和可見的物件。
使用者不應該去記住資訊的流程和步驟。
使用說明應在適當的方式都可以讓使用者輕易的看到和取回。
OpenTable(餐廳訂位APP)顯示我之前搜尋過的餐廳,讓使用者不用再絞盡腦汁想之前搜過什麼。
7.提供使用時的自由度和效率(Flexibilityandefficiencyofuse)Accelerators—unseenbythenoviceuser—mayoftenspeeduptheinteractionfortheexpertusersuchthatthesystemcancatertobothinexperiencedandexperiencedusers.Allowuserstotailorfrequentactions.產品應該提供自由度來滿足專進階使用者和沒有經驗的使用者。
提供沒經驗的使用者預定的功能和提供進階使用者所需要的操作。
8.美觀和極簡設計(Aestheticandminimalistdesign)Dialoguesshouldnotcontaininformationwhichisirrelevantorrarelyneeded.Everyextraunitofinformationinadialoguecompeteswiththerelevantunitsofinformationanddiminishestheirrelativevisibility.資訊呈現不應該包括不相關或少用的資訊。
對話框裡任何多餘的資訊都會讓重要的資訊的視覺明顯度下降。
Uber是個很好的例子,在產品中最重要的就是使用者要去哪裡,任何其他的資訊都被藏在下一層。
9.幫助使用者去瞭解、偵錯和恢復錯誤(Helpusersrecognize,diagnose,andrecoverfromerrors)Errormessagesshouldbeexpressedinplainlanguage(nocodes),preciselyindicatetheproblem,andconstructivelysuggestasolution.錯誤訊息應該讓使用者認知問題是什麼,和提供解決方案。
許多例子像是:ErrorCode:XXXX或是404之類的就是很好的例子,ErrorCode可能讓使用者並不知道到底錯誤是什麼。
10.幫助和說明文件(Helpanddocumentation)Eventhoughitisbetterifthesystemcanbeusedwithoutdocumentation,itmaybenecessarytoprovidehelpanddocumentation.Anysuchinformationshouldbeeasytosearch,focusedontheuser’stask,listconcretestepstobecarriedout,andnotbetoolarge.雖然最好的系統可以在不需要使用說明文件下完成任務,但是提供幫助和說明仍是必要的。
這些資訊應該讓使用者輕易查詢,注重在使用者的任務上,並且條列式說明所需步驟,而且檔案不應太大。
下例是Framer及提供使用者非常簡單易懂的說明文件,並讓使用者可以輕易搜尋使用者所需要的資訊。
這些原則是在做設計網頁或是手機APP都可以大致遵循的原則,當然任何案例可能都稍有不同,但重點是做設計時必須要站在使用者的鞋子裡,感同身受使用者的需求,並判斷怎樣才能讓使用者更簡單明瞭的使用產品!另外這是JakobNielsen在1995年發表的原則了,在現今軟硬件的界線愈來愈模糊的時代當中,大家還認為這些原則仍然適用嗎?感謝大家收看!-Wei--MorefromUXeastmeetswestWearefourpassionateUXersfromTaiwan,workingacrossAsiaandtheU.S.Weshareourinsightsandworkexperiencestothecommunity.UX四神湯是四位臺灣清華畢業的UX海外工作者所建立的內容平台,每週定期發布文章。
內容涵蓋中美的工作環境與生活體驗、互聯網巨頭與新創公司的工作內容、設計趨勢、UX實務技能分享等ReadmorefromUXeastmeetswestAboutHelpTermsPrivacyGettheMediumappGetstarteduxeastmeetswest5KFollowersWeare4passionateUXdesigners,workinginbothChinaandtheUS.Weshareourworkexperiences,culturaldifferencesandpersonalUXperspectives.FollowMorefromMediumDeborahBrownMajekodunmiHowDoesWebsite“Cookies”impactuserswithdisabilities?NicoleAllgeyerTheDesignisJustBeginningANGTianTeckDesigningslidesforteachingRachelGinsberginTheInteractionLabDesignRetrospective:ArtClockHelpStatusWritersBlogCareersPrivacyTermsAboutKnowable
延伸文章資訊
- 1心理學在UI / UX 設計中的運用(一) - 政府網站營運交流平台
席克定律Hick's Law · 費茲定律Fitts' Law · 米勒定律Miller's Law · 格式塔原則Gestalt Principles · 泰思勒定律Tesler's Law ...
- 2網站設計規律:盤點UX視覺設計原則 - 香港網頁集團
PS. 界面設計中,元素的比例一般不超過3種不同尺寸,否則會打破界面層級的平衡,反而無法突出界面重要內容。 UX視覺設計原則二:視覺 ...
- 3Gremlin Works 打造完善使用者體驗:UI & UX 設計團隊
組織客戶提供的資訊,掌握這些原則,提供一個優秀體驗設計的關鍵。快速創建原型,以便溝通和評估設計,UX的角度要站在全局觀察和考慮事情,如果處理不到位,那麼即使UI ...
- 4UX/UI不一樣,UI/UX設計是什麼? - 達文西數位科技
UI/UX常常放在一起,但是使用者介面(UI)不是使用者體驗(UX),UI跟UX雖然是 ... 設計與優化,依照CIS設計原則設計,以上就是一個完整的餐廳UI/UX設計。
- 5UX設計師都應知道的15條設計原則 - 人人焦點
UX設計師都應知道的15條設計原則 · 1.UX不僅僅只是UI. UI是UX的一部分 · 2. 了解你的用戶. 用戶研究是設計流程中關鍵的一步 · 3. 你不是用戶. 與真實的目標 ...