ux學(xué)習(xí)之路:《用戶體驗(yàn)的要素》

我們的目標(biāo)是:user-centered!


戰(zhàn)略層:關(guān)注點(diǎn)都是一樣的——user need用戶需求與product objective產(chǎn)品目標(biāo)。

在我們開始寫第一行程序、畫第一個(gè)像素之前,我們首先要弄明白兩個(gè)問題的答案:

1、我們要通過這個(gè)產(chǎn)品得到什么?

2、我們的用戶要通過這個(gè)產(chǎn)品得到什么?

大部分產(chǎn)品失敗的原因就是因?yàn)樵谶€沒有明確這兩個(gè)問題的答案之前就操之過急。歷史一次又一次地告訴我們,速度太快是要出問題的。無論是六十年前的人民運(yùn)動(dòng),還是二十年前什么都是“第一個(gè)”的雅虎。

Explicit!

產(chǎn)品目標(biāo)必須能夠通過口頭表達(dá)出來,否則一千個(gè)哈姆雷特會(huì)做出一千種不一樣的東西。

品牌識別brand identity

品牌形象是在無意之中形成的,而且是在產(chǎn)品設(shè)計(jì)者精心安排下的結(jié)果,這使得品牌無法不被用戶所注意。品牌形象不只是視覺上的表現(xiàn),如商標(biāo)、色調(diào)和字體設(shè)計(jì)之類的,更是概念系統(tǒng)或情緒反應(yīng)之類。

成功目標(biāo)

一些可追蹤的目標(biāo),能夠幫我們判定項(xiàng)目各階段的決策該如何籌劃,衡量用戶體驗(yàn)工作是否取得了預(yù)想的成果。

印象數(shù)和轉(zhuǎn)化率

用戶需求

用戶細(xì)分

? ? ? ?人口統(tǒng)計(jì)學(xué)(demographic):性別、年齡、教育水平、婚姻狀況、收入等。

? ? ? ?消費(fèi)心態(tài)檔案(psycho graphic profile):人們對產(chǎn)品有關(guān)的事物的觀點(diǎn)。

可用性和用戶研究

? ? ? ?現(xiàn)場調(diào)查:用戶行為的調(diào)研。

? ? ? ?任務(wù)分析:具體流程的跟蹤。

? ? ? ?用戶測試:請用戶測試產(chǎn)品。

? ? ? ? ? ? ? 卡片排序法:給用戶一沓索引卡片,每一張卡片附有信息元素的名字、描述,一張圖像或內(nèi)容的類型。然后用戶根據(jù)小組或類別,依照自己感到最自然的方式將卡片排列出來。

創(chuàng)建人物角色:創(chuàng)建若干符合用戶人群的代表角色,在設(shè)計(jì)產(chǎn)品時(shí),始終想著:如果是xxx的話,ta會(huì)希望這樣嗎?

決策

在擬定決策時(shí)有一群人經(jīng)常被忽略——普通員工。

戰(zhàn)略文檔應(yīng)該讓所有參與者知曉。


范圍層:功能規(guī)格。

在范圍層,我們從戰(zhàn)略層面的抽象問題:“我們?yōu)槭裁匆_發(fā)這個(gè)產(chǎn)品?”轉(zhuǎn)為“我們要開發(fā)的是什么?”

范圍蠕動(dòng)(scope creep):每一個(gè)額外的要求看上去沒有增加太多工作量,但它們越滾越大沖向山腳,你的整個(gè)項(xiàng)目就會(huì)失去控制地膨脹,結(jié)束時(shí)間遙遙無期。

內(nèi)容管理系統(tǒng)(Content Management System, CMS): CMS的必備功能取決于你將要管理的內(nèi)容的性質(zhì)。內(nèi)容元素是否要根據(jù)每一個(gè)用戶的喜好或訪問終端來動(dòng)態(tài)組合?如果要,那么CMS就必須要能完成這一類高級別的復(fù)雜輸出。

具有諷刺意味的是,那些很少去想象產(chǎn)品新方向的人,恰恰是參與創(chuàng)建和設(shè)計(jì)產(chǎn)品最深入的人。當(dāng)你把所有的時(shí)間都投入到維持現(xiàn)有產(chǎn)品時(shí),你經(jīng)常會(huì)忘掉哪些是真正的限制條件,而哪些是為了簡化產(chǎn)品而曾經(jīng)做過的選擇。出于這個(gè)原因,匯集企業(yè)各個(gè)部門的成員或不同類型的用戶代表來進(jìn)行頭腦風(fēng)暴會(huì)議,是一種打開設(shè)計(jì)者思路、讓他們考慮以前從未想到的可能性的、非常有效的工具。

specific具體:量化地定義一些功能來避免主觀性。

內(nèi)容性:應(yīng)該提供每一個(gè)特性規(guī)模的大致預(yù)估:文本的字?jǐn)?shù)、圖片的像素大小、下載的文件字節(jié)等元素的大小等。

留意那些看上去有可能需要改變戰(zhàn)略的特性建議,它們在制定愿景文檔期間并不明顯。但是任何不符合當(dāng)前項(xiàng)目的戰(zhàn)略目標(biāo)的特性建議,都要通過范圍定義將其排除出去。

但是如果有這樣一個(gè)特性,它不在項(xiàng)目范圍內(nèi),也超越了任何一個(gè)限制條件,但聽起來像一個(gè)不錯(cuò)的想法,那么此時(shí)你可能要重新審視某些戰(zhàn)略目標(biāo)。


結(jié)構(gòu)層:交互設(shè)計(jì)(功能型產(chǎn)品)or信息架構(gòu)(信息型產(chǎn)品)

與其針對機(jī)器的最佳工作方式來設(shè)計(jì)系統(tǒng),還不如設(shè)計(jì)一個(gè)對用戶而言最好的系統(tǒng)。

任何一個(gè)交互設(shè)計(jì)都要牽涉處理“用戶錯(cuò)誤”。第一個(gè)防止錯(cuò)誤的方法,是將系統(tǒng)設(shè)計(jì)成絕對不可能犯錯(cuò)的那種;第二個(gè)避免錯(cuò)誤的方法就是使錯(cuò)誤難以發(fā)生,而在錯(cuò)誤發(fā)生之后,系統(tǒng)應(yīng)該幫用戶自動(dòng)改正錯(cuò)誤——但是千萬不能向word那樣過度修正。

結(jié)構(gòu)化內(nèi)容:

信息架構(gòu)需要?jiǎng)?chuàng)建分類體系,我們可以使用以下兩種方式來建立分類體系:從上到下或從下到上。

從上到下(top-down):從產(chǎn)品目標(biāo)和用戶需求開始進(jìn)行結(jié)構(gòu)設(shè)計(jì)。從廣泛到細(xì)節(jié),然后對號入座。缺陷:可能導(dǎo)致重要細(xì)節(jié)被忽略。

從下到上(bottom-up):根據(jù)對“內(nèi)容和功能需求的分析”而來。將網(wǎng)站發(fā)布后存在的資料放到最低級別,然后將它們歸納到更高的級別中,從而逐漸構(gòu)建出能反映我們產(chǎn)品目標(biāo)和用戶需求的結(jié)構(gòu)。缺陷:可能導(dǎo)致框架太過精細(xì),缺乏靈活度。

有些人喜歡以“用戶到達(dá)某一地點(diǎn)的點(diǎn)擊數(shù)”作為衡量網(wǎng)站結(jié)構(gòu)質(zhì)量的指標(biāo),然而,結(jié)構(gòu)質(zhì)量最重要的標(biāo)準(zhǔn),不是“整個(gè)過程一共需要多少步驟”,而是“用戶認(rèn)為每一個(gè)步驟都是合理的”,并且“當(dāng)前步驟是自然地延續(xù)了上一個(gè)步驟中的任務(wù)”。

網(wǎng)站需要持續(xù)的維護(hù),但是滿足新的需求不應(yīng)該導(dǎo)致重新考慮網(wǎng)站的整體結(jié)構(gòu)。一個(gè)高效結(jié)構(gòu)的有點(diǎn)就是具備“容納成長和適應(yīng)變動(dòng)”的能力。

受控詞典:具有一致性的用戶語言。創(chuàng)造并遵守一個(gè)反映了用戶語言的受控詞典是防止企業(yè)內(nèi)部的專用術(shù)語侵入網(wǎng)站的最佳方法,那些專用術(shù)語只會(huì)讓你的用戶感到confused。

類詞詞典:與簡單列出所使用詞匯的清單不同,類詞詞典會(huì)提供常用的、但未納入該網(wǎng)站標(biāo)準(zhǔn)用于的詞匯以供選擇。在類詞詞典中,可以添加內(nèi)部專用術(shù)語、俚語或縮寫詞等。此外,類詞詞典還可能包含詞匯之間的類型關(guān)系,提供更廣義、狹義或相關(guān)詞匯的建議。

使用受控詞典和類詞詞典對于建立包含元數(shù)據(jù)(metadata)的系統(tǒng)特別有用。將搜索引擎與類詞詞典連接起來,再加上元數(shù)據(jù),就能讓搜索引擎變得更聰明。搜索引擎使用類詞詞典來區(qū)分“禁用詞”與“首選詞”;接著從元數(shù)據(jù)中查找“首選詞”。與搜索結(jié)果為零相反的是,用戶在得到高精準(zhǔn)、高相關(guān)的搜索結(jié)果的同時(shí),甚至還能獲得一些用戶可能感興趣的相關(guān)主題的推薦。

架構(gòu)圖(architecture diagram):記錄概念關(guān)系:哪些類別需要放在一起,而哪些需要保持獨(dú)立?在交互過程中哪些步驟要怎么相互配合?

作者創(chuàng)造了一個(gè)名叫“視覺辭典(visual vocabulary)”的工具,用以圖解網(wǎng)站結(jié)構(gòu)。詳見http://www.jjg.net/ia/visvocab/chinese.html#page


框架層:信息設(shè)計(jì),界面設(shè)計(jì)(功能型)——人機(jī)互動(dòng),導(dǎo)航設(shè)計(jì)(信息型)——屏幕上元素的組合

界面設(shè)計(jì)——提供用戶做某些事的能力

習(xí)慣和反射是我們與這個(gè)世界交互時(shí)的基礎(chǔ),讓你的界面與用戶早已養(yǎng)成的某些習(xí)慣保持一致很重要,但是更重要的是,界面要與它自身保持一致。

界面設(shè)計(jì)可以采用各種各樣的技巧,一個(gè)簡單的技巧,就是在這個(gè)界面第一次呈現(xiàn)給用戶的時(shí)候,仔細(xì)考慮每一個(gè)選項(xiàng)的默認(rèn)值。

導(dǎo)航設(shè)計(jì)——提供用戶去某個(gè)地方的能力

要讓用戶在你的網(wǎng)站中時(shí)時(shí)保持方向感,導(dǎo)航系統(tǒng)(navigation system)不能只是單一的全局導(dǎo)航。常見的幾種導(dǎo)航還有:

局部導(dǎo)航:提供用戶到這個(gè)架構(gòu)中“附近地點(diǎn)”的通路,在一個(gè)嚴(yán)格的層次結(jié)構(gòu)中,局部導(dǎo)航可能只提供一個(gè)頁面的父級、兄弟級和子級通路。

輔助導(dǎo)航:提供全局導(dǎo)航或局部導(dǎo)航不能快速到達(dá)的相關(guān)內(nèi)容的快捷途徑。這樣用戶需要轉(zhuǎn)移他們的瀏覽方向時(shí),不需要從頭開始。

上下文導(dǎo)航:當(dāng)用戶閱讀文本時(shí),他們可能需要一些額外的信息,與其讓用戶求助搜索引擎,不如放一些與之閱讀內(nèi)容相關(guān)的鏈接。比如:在閱讀Python學(xué)習(xí)筆記(三)的時(shí)候,以免造成困惑,可以將Python學(xué)習(xí)筆記(二)Python學(xué)習(xí)筆記(一)作為上下文導(dǎo)航。

友好導(dǎo)航:提供給用戶他們通常不會(huì)需要,但是能夠提供便利的鏈接,比如聯(lián)系信息、反饋表單和法律聲明。

信息設(shè)計(jì)——傳達(dá)想法給用戶

線框圖:

線框圖是整合在結(jié)構(gòu)層中的全部三要素的方法:通過安排和選擇界面元素來整合界面設(shè)計(jì);通過識別和定義核心導(dǎo)航系統(tǒng)來整合導(dǎo)航設(shè)計(jì);通過放置和排列信息組成部分的優(yōu)先級來整合信息設(shè)計(jì)。把這三者放到一個(gè)文檔中,線框圖就可以確定一個(gè)建立在基本概念結(jié)構(gòu)上的架構(gòu),同時(shí)指出了表現(xiàn)層的設(shè)計(jì)應(yīng)該前進(jìn)的方向。


表現(xiàn)層:創(chuàng)建感知體驗(yàn)

鑒于對于網(wǎng)頁或者應(yīng)用軟件設(shè)計(jì)來講,視覺、聽覺和觸覺是主要的感官體驗(yàn),而在這之中,聽覺又是最重要的,所以首先討論視覺設(shè)計(jì)。

評估一個(gè)產(chǎn)品視覺設(shè)計(jì)的簡單方法之一,是提出這樣的問題:你的視線首先落在什么地方?哪個(gè)設(shè)計(jì)要素在第一時(shí)間吸引了用戶的注意力?它們是對戰(zhàn)略目標(biāo)來講很重要的東西嗎?或者用戶第一時(shí)間注意到的東西與他們的(或你的)目標(biāo)是背道而馳的?

(你可以試著從遠(yuǎn)處走過來看這個(gè)界面)

人視線的移動(dòng)方式大多是無意識的、本能的移動(dòng)。如果我們的設(shè)計(jì)是成功的,那么用戶眼睛的移動(dòng)軌跡應(yīng)該有以下兩個(gè)重要的特點(diǎn):

首先,它們要遵循一條流暢的路徑。如果人們評論一個(gè)設(shè)計(jì)是“擁擠”或“局促”的,這表明這個(gè)設(shè)計(jì)確實(shí)沒能順利地引導(dǎo)他們在頁面上移動(dòng)。所有元素都在試圖引起他們的注意。

其次,引導(dǎo)應(yīng)該支持用戶試圖在此刻通過與產(chǎn)品交互去完成的某個(gè)目標(biāo)或任務(wù),要不要分散他們的注意力。

幸運(yùn)地是,作為設(shè)計(jì)師,我們已經(jīng)發(fā)展出了各種各樣有效的視覺手段,來吸引或分散注意力。

1、對比和一致性

對比是我們用于吸引用戶注意的一個(gè)主要工具。一個(gè)沒有對比的設(shè)計(jì),會(huì)被看成一個(gè)灰色的、平凡的東西,導(dǎo)致用戶視線游離、注意力分散。對比的功能有,把用戶的注意力引到界面中的關(guān)鍵部分,幫助用戶理解頁面導(dǎo)航元素之間的關(guān)系,傳達(dá)信息設(shè)計(jì)中的概念群組。


a——左上,b——右上,c——左下,d——右下

a中沒有任何元素突出,b和c中標(biāo)注了一些關(guān)鍵元素,過度對比會(huì)導(dǎo)致視覺上的混亂(d)。

2、一致性

當(dāng)兩個(gè)設(shè)計(jì)元素有“差異”時(shí),用戶會(huì)思考:“為什么這些不一樣?是有什么我需要注意的東西嗎?”為了避免不必要的誤解,我們應(yīng)該重視元素的“一致性”。

基于柵格線(grid-based layout)是來自平面設(shè)計(jì)的一種技術(shù),對網(wǎng)頁也同樣有效。這個(gè)方法通過使用“母版”來確保設(shè)計(jì)的一致性,各種布局都是根據(jù)這個(gè)模板來創(chuàng)建的,不是每一個(gè)布局都要使用柵格的每一個(gè)部分,但是每一個(gè)元素在網(wǎng)格上的位置應(yīng)該是統(tǒng)一和一致的。


但是因?yàn)椴煌O(shè)備屏幕分辨率千差萬別,把柵格應(yīng)用到屏幕交互式產(chǎn)品上不會(huì)像平面設(shè)計(jì)一樣簡單。不可掉入“堅(jiān)持使用柵格系統(tǒng)”的漩渦之中。

內(nèi)部一致性與外部一致性

內(nèi)部一致性指的是產(chǎn)品的兩個(gè)不同地方能夠反映出相同的設(shè)計(jì)方法。

外部一致性指的是同一企業(yè)的其他產(chǎn)品能夠反映出使用了相同的設(shè)計(jì)方法。


寫在最后:

看完全書,最大的感受是,光有高屋建瓴的知識體系是遠(yuǎn)遠(yuǎn)不夠的,關(guān)于用戶體驗(yàn)的每個(gè)細(xì)節(jié),我們都需要在一次次的實(shí)踐中仔細(xì)琢磨體會(huì)。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,786評論 6 534
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 98,656評論 3 419
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,697評論 0 379
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,098評論 1 314
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 71,855評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 55,254評論 1 324
  • 那天,我揣著相機(jī)與錄音,去河邊找鬼。 笑死,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,322評論 3 442
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 42,473評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 49,014評論 1 335
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 40,833評論 3 355
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 43,016評論 1 371
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,568評論 5 362
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 44,273評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,680評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,946評論 1 288
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 51,730評論 3 393
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 48,006評論 2 374

推薦閱讀更多精彩內(nèi)容