網(wǎng)站如何做好用戶體驗(yàn)(三)

0 評(píng)論 2724 瀏覽 2 收藏 10 分鐘

建議先閱讀:

網(wǎng)站如何做好用戶體驗(yàn)(一)

網(wǎng)站如何做好用戶體驗(yàn)(二)

 

結(jié)構(gòu)層:交互設(shè)計(jì)與信息架構(gòu)

1. 結(jié)構(gòu)層是五個(gè)層面中的第三層,適當(dāng)?shù)膶⑽覀兊年P(guān)注點(diǎn)從抽象的決策與范圍問(wèn)題,轉(zhuǎn)移到更能影響最后的用戶體驗(yàn)的具體因素。它是范圍層的上面一層,為網(wǎng)站創(chuàng)建一個(gè)概念結(jié)構(gòu),將分散的片段組成一個(gè)整體。結(jié)構(gòu)層

用戶體驗(yàn)

交互設(shè)計(jì):關(guān)注于描述“可能的用戶行為”,同時(shí)定義“系統(tǒng)如何配合與響應(yīng)”這些用戶行為。

概念模型(conceptual model):用戶對(duì)于“交互組件將怎樣工作”的觀點(diǎn)成為稱為概念模型。一個(gè)概念模型可以反映系統(tǒng)的一個(gè)組件或是整個(gè)系統(tǒng),用于在交互設(shè)計(jì)的開(kāi)發(fā)過(guò)程中保持使用方式的一致性。

2. 錯(cuò)誤處理:系統(tǒng)要如何防止人們繼續(xù)犯錯(cuò)?

(1)將系統(tǒng)設(shè)計(jì)成不可能犯錯(cuò)的

(2)使錯(cuò)誤難以發(fā)生。萬(wàn)一發(fā)生,系統(tǒng)應(yīng)該幫助用戶找出錯(cuò)誤并改正它們。

(3)系統(tǒng)應(yīng)該為用戶提供從錯(cuò)誤中恢復(fù)的方式。最著名的是Undo(重做)。

3. 信息架構(gòu):著重于設(shè)計(jì)組織分類和導(dǎo)航的結(jié)構(gòu),從而讓用戶可以高效率、有效率地瀏覽網(wǎng)站的內(nèi)容。

(1)信息架構(gòu)要求創(chuàng)建分類體系,該分類體系將會(huì)對(duì)應(yīng)并符合網(wǎng)站目標(biāo)、希望滿足用戶需,以及將被合并在網(wǎng)站中的內(nèi)容。創(chuàng)建的方式:

  • 從上到下(top-down approach):從“網(wǎng)站目標(biāo)與用戶需求的理解”開(kāi)始直接進(jìn)行結(jié)構(gòu)設(shè)計(jì),先從最廣泛的滿足決策目標(biāo)的潛在內(nèi)容與功能開(kāi)始分類,然后再依據(jù)邏輯細(xì)分出次級(jí)分類。?局限性:導(dǎo)致內(nèi)容的重要細(xì)節(jié)被忽略。
  • 從下到上(bottom-up approach):根據(jù)“內(nèi)容和功能需求的分析”而來(lái),從已有資料開(kāi)始,把該資料放到最低級(jí)別分類中,然后將它們分別歸屬到高一級(jí)的類別。局限性:導(dǎo)致架構(gòu)過(guò)于精確地反映了現(xiàn)有內(nèi)容,而不能靈活的容納未來(lái)內(nèi)容的變化或增加。

一個(gè)有效結(jié)構(gòu)的特點(diǎn),具備“容納成長(zhǎng)和適應(yīng)變動(dòng)”的能力。

(2)信息架構(gòu)的基本單位是節(jié)點(diǎn)(node),可以對(duì)應(yīng)任意的信息片段或組合。

節(jié)點(diǎn)的安排方式:

  • 層級(jí)結(jié)構(gòu)(hierarchical structure):節(jié)點(diǎn)與其他相關(guān)節(jié)點(diǎn)之間存在父/子級(jí)關(guān)系。
  • 矩陣結(jié)構(gòu)(matrix structure):允許用戶在節(jié)點(diǎn)與節(jié)點(diǎn)之間沿著兩個(gè)或更多的“維度”移動(dòng)。
  • 自然結(jié)構(gòu)(organic structures):不會(huì)遵循任何一致的模式。
  • 線性結(jié)構(gòu)(sequential structures):連貫的語(yǔ)言流程。

節(jié)點(diǎn)的組織原則(organizing principle):哪些節(jié)點(diǎn)要編成一組,哪些要保持獨(dú)立的標(biāo)準(zhǔn)。一般來(lái)說(shuō),在網(wǎng)站最高層級(jí)使用的組織原則應(yīng)該緊密與“網(wǎng)站目標(biāo)”和“用戶需求”相關(guān),而在結(jié)構(gòu)中較低的層級(jí),內(nèi)容與功能需求的考慮將對(duì)你所采用的組織原則產(chǎn)生很大影響。

(3)語(yǔ)言與元數(shù)據(jù):

命名原則(nomenclature):描述、標(biāo)簽和網(wǎng)站使用的其他術(shù)語(yǔ)。

要注意“使用用戶的語(yǔ)言”且“保持一致性”,常用來(lái)強(qiáng)調(diào)一致性的工具被稱為“控制性詞典”(controlled vocabulary),即網(wǎng)站使用的一套標(biāo)準(zhǔn)語(yǔ)言。還有種方式是創(chuàng)造類詞詞典(thesaurus),即提供常用的、但未納入該網(wǎng)站標(biāo)準(zhǔn)用語(yǔ)的詞匯以供選擇。

使用控制性詞典或類詞詞典對(duì)于建立包含有元數(shù)據(jù)(metadata)的系統(tǒng)特別有用。元數(shù)據(jù)簡(jiǎn)單的說(shuō)就是“關(guān)于信息的信息”,以一種結(jié)構(gòu)化的方式來(lái)描述內(nèi)容。

好的元數(shù)據(jù)能幫助我們迅速地運(yùn)用已有的內(nèi)容創(chuàng)造出適應(yīng)用戶需求的一個(gè)新部分,還能提供更可靠的搜索結(jié)果。

(4)團(tuán)隊(duì)角色和流程

文檔:

用戶體驗(yàn)

視覺(jué)辭典(the Visual Vocabulary)

用戶體驗(yàn)

 

界面設(shè)計(jì)、導(dǎo)航設(shè)計(jì)和信息設(shè)計(jì)

框架層:什么樣的功能形式來(lái)實(shí)現(xiàn),處理更精準(zhǔn)的細(xì)節(jié)問(wèn)題。

用戶體驗(yàn)

界面:提供給用戶做某些事情的能力。通過(guò)它用戶能真正接觸到那些“在結(jié)構(gòu)層的交互設(shè)計(jì)中”確定的“具體功能”。

導(dǎo)航設(shè)計(jì):提供給某個(gè)用戶區(qū)某個(gè)地方的能力。用戶能通過(guò)它在“結(jié)構(gòu)中自由穿行”。

信息設(shè)計(jì):傳達(dá)想法,它是這個(gè)層面中范圍最廣的一個(gè)要素。

1. 界面設(shè)計(jì)要尊重習(xí)慣,但非死守。當(dāng)一種不同的方式有很明顯的益處時(shí),應(yīng)試著違背習(xí)慣,但要求在做每一個(gè)決定的時(shí)候都有充分的明確的理由。

要抵制在網(wǎng)站四周建立起比喻(metaphor)的沖動(dòng)。比喻往往不能揭示特性的本質(zhì),反而會(huì)混淆。避免比喻,減少對(duì)用戶“在理解和使用網(wǎng)站功能”時(shí)的心理要求。

2. 成功的界面設(shè)計(jì)能讓用戶一眼就看到“最重要的東西”。

(1)程序員要改變思考問(wèn)題的方式。

好的程序員總要考慮到“邊緣情況”,但界面設(shè)計(jì)中,一個(gè)設(shè)計(jì)良好的界面是要組織好用戶最常采用的行為,同時(shí)讓這些界面元素用最容易的方式獲取和使用。

TIPS:第一次呈現(xiàn)給用戶時(shí),考慮每個(gè)選項(xiàng)的默認(rèn)值;能自動(dòng)記住某個(gè)用戶最后一次選擇狀態(tài)的系統(tǒng)。

(2)HTML和FLASH

HTML最初是用于簡(jiǎn)單的超級(jí)文本信息,后來(lái)它的一小部分元素就成為了標(biāo)準(zhǔn)界面元素:

復(fù)選框、單選框、文本框、下拉菜單、多選菜單、按鈕

Flash靈活性更強(qiáng),界面對(duì)用戶的響應(yīng)更積極。

3. 導(dǎo)航設(shè)計(jì)

(1)必須同時(shí)完成以下3個(gè)目標(biāo):

  • 導(dǎo)航設(shè)計(jì)必須提供給用戶一種在網(wǎng)站間跳轉(zhuǎn)的方法,必須選擇能促進(jìn)用戶行為的。
  • 導(dǎo)航設(shè)計(jì)必須傳達(dá)出這些元素和它們所包含內(nèi)容之間的關(guān)系,對(duì)于用戶理解“哪些選擇對(duì)他們是有效的”非常必要。
  • 導(dǎo)航設(shè)計(jì)必須傳達(dá)出它的內(nèi)容和用戶當(dāng)前瀏覽頁(yè)面之間的關(guān)系,幫助用戶理解“哪個(gè)有效的選擇會(huì)最好的支持他們的任務(wù)或他們想要達(dá)到的目標(biāo)”。

(2)多重的導(dǎo)航系統(tǒng)(navigation system)

全局導(dǎo)航、局部導(dǎo)航、輔助導(dǎo)航、上下文導(dǎo)航、友好導(dǎo)航、遠(yuǎn)程導(dǎo)航

4. 信息設(shè)計(jì):如何呈現(xiàn)這些信息。

指示標(biāo)識(shí)(wayfinding):導(dǎo)航、顏色、圖標(biāo)等

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

 

作者:王洛堇

文章轉(zhuǎn)自:http://www.wangxuntian.com/

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒(méi)評(píng)論,等你發(fā)揮!