- Web交互界面設(shè)計與制作(微課版)
- 張曉穎 石磊主編
- 3706字
- 2024-11-21 15:53:19
1.3.3 用戶體驗的5個層面要素
用戶體驗的開發(fā)流程,就是為了確保用戶使用產(chǎn)品時的所有體驗都不會令其產(chǎn)生“明確的、有意識的意圖”。這就是說,要考慮用戶采取每一個行動的每一種可能性,并且理解在用戶使用產(chǎn)品的過程中每一個步驟的期望值。這包含巨大的工作量,但是我們可以把開發(fā)用戶體驗的工作分解成各個環(huán)環(huán)相扣的組成要素,這種方式可以幫我們解決工作量過大的問題。

用戶體驗的要素
1. 初識用戶體驗的5個層面要素
用戶體驗的5個層面要素如下。
表現(xiàn)層——感知設(shè)計:一系列網(wǎng)頁,由圖片和文字組成。
框架層——界面、導(dǎo)航和信息設(shè)計:按鈕、控件、照片和文本區(qū)域的位置,主要用于優(yōu)化設(shè)計布局。
結(jié)構(gòu)層——交互設(shè)計和信息架構(gòu):與框架層相比更加抽象的是結(jié)構(gòu)層,框架是結(jié)構(gòu)的具體表達方式;它用來設(shè)計用戶如何進入某個頁面,并且在他們做完事情之后去什么地方??蚣軐涌梢杂糜诙x導(dǎo)航條上的各個要素的排列方式及分類,結(jié)構(gòu)層則用于確定哪些類別應(yīng)該出現(xiàn)在哪里;哪些按鈕點擊之后進行什么操作;欄目內(nèi)容里的信息如何統(tǒng)籌、規(guī)劃。
范圍層——功能規(guī)格和內(nèi)容需求:結(jié)構(gòu)層所確定的網(wǎng)站各種特性和功能就構(gòu)成了網(wǎng)站的范圍層。
戰(zhàn)略層——產(chǎn)品目標(biāo)和用戶需求:網(wǎng)站的范圍基本上是由戰(zhàn)略層決定的(網(wǎng)站想經(jīng)營什么和用戶想得到什么都是戰(zhàn)略層的范疇)。
每一個層面都用一個圖標(biāo)表示,如圖1-3所示。

圖1-3 5個層面圖標(biāo)示意
這5個層面提供了基本框架。在基本框架下,更容易解決用戶體驗的問題。每一個層面都會解決一些問題,有的抽象,有的具體。在戰(zhàn)略層,我們不用考慮網(wǎng)站、產(chǎn)品或者服務(wù)最終呈現(xiàn)的樣子,只關(guān)心網(wǎng)站如何實現(xiàn)戰(zhàn)略目標(biāo),也就是滿足用戶的需求。在表現(xiàn)層,我們關(guān)心產(chǎn)品呈現(xiàn)的外觀細(xì)節(jié)?;诨究蚣?,我們的決策一點點變得具體、清晰。
每個層面都是根據(jù)它下面的那個層面來界定的。所以表現(xiàn)層由框架層決定,框架層由結(jié)構(gòu)層決定,結(jié)構(gòu)層由范圍層決定,范圍層由戰(zhàn)略層決定,環(huán)環(huán)相扣。當(dāng)某一層面的決定沒有和上一層面的決定保持一致時,項目常常會脫離正常軌道,完成時間也會延遲。而在開發(fā)團隊試圖把各個環(huán)節(jié)強行拼合在一起時,往往又會增加開發(fā)費用。因為5個層面存在依賴關(guān)系,從而可能產(chǎn)生某種自上而下的“連鎖效應(yīng)”。
但是,這也并不意味著必須在下一層面完成后,才能考慮上一層面的內(nèi)容。所有決策產(chǎn)生的“連鎖效應(yīng)”都應(yīng)該是雙向的。所以,我們應(yīng)該好好規(guī)劃項目,以確保任何一個層面的工作都不能在下一層面完成之后進行,如圖1-4所示。

圖1-4 層面完成時間軸
用戶體驗五要素將產(chǎn)品分成了兩類,一類是功能型產(chǎn)品,另一類是信息型產(chǎn)品。對于功能型產(chǎn)品,主要偏向于用戶通過產(chǎn)品功能解決問題,因此框架層關(guān)注的核心是任務(wù),所有的操作都被容納進一個過程,在這個過程中我們思考用戶行為,研究用戶該怎樣進行每一個操作,把產(chǎn)品看成是完成一個或者一組任務(wù)的工具;而對于信息型產(chǎn)品,我們關(guān)注的核心是信息,產(chǎn)品應(yīng)該提供哪些信息,這些信息對于用戶而言有什么意義。因此,做用戶體驗開發(fā)過程時,要做好產(chǎn)品的定位,明確產(chǎn)品是功能型產(chǎn)品還是信息型產(chǎn)品。
隨著國內(nèi)互聯(lián)網(wǎng)企業(yè)的發(fā)展,用戶體驗?zāi)K也變得異常重要。在殘酷的市場競爭中,產(chǎn)品體驗差有時對于產(chǎn)品本身而言將會是致命的。尤其是在涉及使用的核心環(huán)節(jié),如支付環(huán)節(jié)體驗很差,將是產(chǎn)品使用終結(jié)的“罪魁禍?zhǔn)住?。但是,互?lián)網(wǎng)企業(yè)也應(yīng)該對用戶體驗保持克制,不可一味地盲從。
2. 深入理解用戶體驗5個層面要素
(1)戰(zhàn)略層
通常產(chǎn)品周期很長,只有定好戰(zhàn)略,有規(guī)劃,有指導(dǎo)思想,才能夠做好產(chǎn)品。在戰(zhàn)略層需考慮“產(chǎn)品目標(biāo)”和“用戶需求”這兩個要素。
① 產(chǎn)品目標(biāo):比如,賺一個億;再如,先干一年,積累100萬個用戶。這就是產(chǎn)品要達到的商業(yè)目標(biāo)。
② 用戶需求:比如,有的用戶打車?yán)щy,有的用戶的車總是自己一個人開,浪費空間,所以想到共享經(jīng)濟,可以做個共享平臺,讓沒車的用戶坐有車的用戶的車。這就是用戶需求。
用戶需求需要好好挖掘,可以通過問卷調(diào)查、訪談等方式挖掘用戶的核心需求。為了避免我們的做法與用戶需求偏離,可以對用戶進行分類,把典型的用戶劃分種類并制作用戶畫像,甚至可以把用戶畫像打印出來掛在墻上,在以后做決定的時候想著用戶的需求,這樣我們就不至于做出嚴(yán)重偏離用戶需求的決定。
產(chǎn)品目標(biāo)是公司內(nèi)部需求,用戶需求是公司外部需求,它們共同組成戰(zhàn)略層的核心內(nèi)容。
(2)范圍層
我們的產(chǎn)品要有哪些功能?例如,使用打車軟件打車,用戶輸入出發(fā)地,就能讓司機輕松地找到乘客;要給他們提供便利的支付方式,就要讓乘客和司機能夠通過某種聯(lián)系方式交流;要能夠動態(tài)地、實時地把最合適的乘客推薦給最合適的司機,就要獲取雙方的定位信息。
上面描述了產(chǎn)品功能,這就是范圍層要考慮的,哪些功能要實現(xiàn),哪些功能不實現(xiàn),哪些先實現(xiàn),哪些后實現(xiàn),這些內(nèi)容寫下來之后就變成需求文檔了,以后在開發(fā)的排期、優(yōu)先級、實現(xiàn)不實現(xiàn)某個功能產(chǎn)生分歧的時候,都可以參考需求文檔。
在戰(zhàn)略層,解決的是為什么做的問題,在范圍層,解決的是做什么的問題。那么,接下來的結(jié)構(gòu)層、框架層、表現(xiàn)層,解決的都是怎么做的問題。它們由抽象到具體,由框架到細(xì)節(jié),步步推進。
(3)結(jié)構(gòu)層
在結(jié)構(gòu)層,要考慮兩個要素:“交互設(shè)計”和“信息架構(gòu)”。
① 交互設(shè)計指的是針對用戶的操作,產(chǎn)品要怎么反應(yīng)。
在這里有一個“概念模型”的概念,比如,在電商網(wǎng)站中,購物車的概念模型是現(xiàn)實中的購物推車,那么它就有往里面放東西、從里面移除東西等功能,在電商網(wǎng)站中設(shè)計購物車功能時,就可以對應(yīng)考慮它與用戶的交互方式。
尤其需要注意一點,設(shè)計的交互方式不要與用戶默認(rèn)的思維習(xí)慣相背離。比如,按用戶的思維習(xí)慣,瀏覽器右側(cè)的ScrollBar是用來上下滑動頁面的,如果你的產(chǎn)品把它設(shè)計為拖動ScrollBar可放大、縮小字體,就會讓用戶很難接受,因為這與他們的習(xí)慣不相符。
② 信息架構(gòu)是指信息的組織方式。
產(chǎn)品肯定會有很多內(nèi)容,那么這些內(nèi)容應(yīng)該怎么組織起來,讓用戶覺得好用、易用呢?比如操作文件夾的時候,會有一個文件夾,嵌套另一個文件夾,再嵌套另一個文件夾……一共嵌套十幾層文件夾的組織方式,打開這類文件夾時令人心生倦意。在進行信息架構(gòu)時,可以把每個產(chǎn)品的內(nèi)容分別當(dāng)作一個節(jié)點,然后把這些節(jié)點有序地組織起來。具體的結(jié)構(gòu)有層級結(jié)構(gòu)、矩陣結(jié)構(gòu)、自然結(jié)構(gòu)、線形結(jié)構(gòu)等,可以根據(jù)自己產(chǎn)品的特點來進行針對性的設(shè)計。
(4)框架層
結(jié)構(gòu)層只是對產(chǎn)品的交互方式和內(nèi)容組織方式進行了大概的設(shè)計。那么在框架層,就需要進一步進行設(shè)計了??蚣軐又邪缑嬖O(shè)計、導(dǎo)航設(shè)計和信息設(shè)計。
① 界面設(shè)計:界面設(shè)計要做的是選擇合適的界面交互控件,這些控件既能夠讓用戶易于理解其含義,又能夠讓用戶借此來圓滿完成任務(wù)。
② 導(dǎo)航設(shè)計:導(dǎo)航設(shè)計要做的是讓用戶在使用產(chǎn)品的時候知道自己在什么位置,知道下一步可以到哪里,知道怎么返回上一步,避免讓用戶有云里霧里的感覺。具體而言,索引表、網(wǎng)站地圖、導(dǎo)航鏈接、當(dāng)前位置導(dǎo)航信息等,都可以是導(dǎo)航設(shè)計的一部分。
③ 信息設(shè)計:信息設(shè)計要做的是把各種設(shè)計元素融合在一起并呈現(xiàn)出來,讓用戶更好地理解和使用它們。
在產(chǎn)品設(shè)計中有一個很重要的概念:線框圖。線框圖是上述的界面設(shè)計、導(dǎo)航設(shè)計和信息設(shè)計三者的綜合體現(xiàn),是產(chǎn)品的雛形和大致形態(tài)。需要注意的是,線框圖與產(chǎn)品原型略有差別,產(chǎn)品原型是對線框圖更細(xì)致描述的產(chǎn)品體現(xiàn),產(chǎn)品原型要求必須有交互,而線框圖則可以是靜態(tài)的,沒有交互也可以,如圖1-5所示。

圖1-5 網(wǎng)站線框圖
(5)表現(xiàn)層
表現(xiàn)層可以讓用戶真真切切地感受到產(chǎn)品的外在表現(xiàn),這是離用戶最近的一層。在這一層,可以通過設(shè)計產(chǎn)品的配色方案、排版、對比、風(fēng)格等,充分研究和使用用戶的感知方式(如嗅覺、味覺、觸覺、視覺、聽覺等),將產(chǎn)品的風(fēng)格完整呈獻給用戶,如圖1-6所示。

圖1-6 網(wǎng)頁界面
產(chǎn)品開發(fā)過程中,要做好用戶體驗5個層面要素的設(shè)計,必須做好產(chǎn)品調(diào)研。按照調(diào)研者在組織調(diào)查樣本過程中的行為特點來劃分,調(diào)研過程可劃分為4個階段。
① 主動調(diào)研階段:調(diào)研者主動組織調(diào)研樣本,完成統(tǒng)計調(diào)查分析。
② 被動調(diào)研階段:調(diào)研者被動地等待調(diào)查樣本造訪或提供信息完成統(tǒng)計調(diào)查分析。
按收集信息所采用的技術(shù)手段劃分,調(diào)研方法可分為:站點法、電子郵件法、隨機IP法、視頻會議法。按收集信息的方法劃分,調(diào)研方法可分為:網(wǎng)上問卷調(diào)研法、網(wǎng)上討論法、網(wǎng)上觀察法。
網(wǎng)絡(luò)市場調(diào)研的關(guān)鍵是規(guī)劃好6W2H。
WHO:誰從事某項工作,責(zé)任人是誰,對人員的學(xué)歷、專業(yè)知識與技能、經(jīng)驗以及職業(yè)化素養(yǎng)等資格要求。
WHAT:做什么,即本職工作或工作內(nèi)容是什么,負(fù)什么責(zé)任。
WHOM:為誰做,即顧客是誰。這里的顧客不僅指企業(yè)外部的客戶,還指企業(yè)內(nèi)部的員工,包括與從事相應(yīng)工作的人有直接關(guān)系的人:直接上級、下級、同事、客戶等。
WHY:為什么做,即工作對其從事者的意義所在。
WHEN:工作的時間。
WHERE:工作的地點、環(huán)境等。
HOW:如何從事或者要求如何從事某項工作,即工作程序、規(guī)范,以及從事某工作所需的權(quán)限。
HOW MUCH:為某項工作所需支付的費用、報酬等。
③ 實施階段:主要工作是查詢調(diào)研對象、編寫調(diào)研問卷。
注意:與傳統(tǒng)方式相結(jié)合,如搜集資料、設(shè)計調(diào)查表格、設(shè)計抽樣、實地調(diào)查。
④ 結(jié)果處理和分析階段:把調(diào)查信息存入數(shù)據(jù)庫,通過數(shù)據(jù)庫和分析策略提取所需資料;編寫調(diào)查報告,為網(wǎng)絡(luò)營銷提出建議和意見;事后追蹤調(diào)查。
- .NET之美:.NET關(guān)鍵技術(shù)深入解析
- Raspberry Pi Networking Cookbook(Second Edition)
- PaaS程序設(shè)計
- 網(wǎng)店設(shè)計看這本就夠了
- ASP.NET 3.5程序設(shè)計與項目實踐
- Responsive Web Design by Example
- 軟件測試技術(shù)指南
- HTML5從入門到精通 (第2版)
- Learning Vaadin 7(Second Edition)
- Oracle 18c 必須掌握的新特性:管理與實戰(zhàn)
- 軟件品質(zhì)之完美管理:實戰(zhàn)經(jīng)典
- C語言程序設(shè)計
- Python算法詳解
- Spring Boot實戰(zhàn)
- Go語言底層原理剖析