網(wǎng)站如何做好用戶體驗(yàn)(三)
建議先閱讀:
結(jié)構(gòu)層:交互設(shè)計(jì)與信息架構(gòu)
1. 結(jié)構(gòu)層是五個(gè)層面中的第三層,適當(dāng)?shù)膶⑽覀兊年P(guān)注點(diǎn)從抽象的決策與范圍問題,轉(zhuǎn)移到更能影響最后的用戶體驗(yàn)的具體因素。它是范圍層的上面一層,為網(wǎng)站創(chuàng)建一個(gè)概念結(jié)構(gòu),將分散的片段組成一個(gè)整體。
交互設(shè)計(jì):關(guān)注于描述“可能的用戶行為”,同時(shí)定義“系統(tǒng)如何配合與響應(yīng)”這些用戶行為。
概念模型(conceptual model):用戶對于“交互組件將怎樣工作”的觀點(diǎn)成為稱為概念模型。一個(gè)概念模型可以反映系統(tǒng)的一個(gè)組件或是整個(gè)系統(tǒng),用于在交互設(shè)計(jì)的開發(fā)過程中保持使用方式的一致性。
2. 錯(cuò)誤處理:系統(tǒng)要如何防止人們繼續(xù)犯錯(cuò)?
(1)將系統(tǒng)設(shè)計(jì)成不可能犯錯(cuò)的
(2)使錯(cuò)誤難以發(fā)生。萬一發(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)建分類體系,該分類體系將會對應(yīng)并符合網(wǎng)站目標(biāo)、希望滿足用戶需,以及將被合并在網(wǎng)站中的內(nèi)容。創(chuàng)建的方式:
- 從上到下(top-down approach):從“網(wǎng)站目標(biāo)與用戶需求的理解”開始直接進(jìn)行結(jié)構(gòu)設(shè)計(jì),先從最廣泛的滿足決策目標(biāo)的潛在內(nèi)容與功能開始分類,然后再依據(jù)邏輯細(xì)分出次級分類。?局限性:導(dǎo)致內(nèi)容的重要細(xì)節(jié)被忽略。
- 從下到上(bottom-up approach):根據(jù)“內(nèi)容和功能需求的分析”而來,從已有資料開始,把該資料放到最低級別分類中,然后將它們分別歸屬到高一級的類別。局限性:導(dǎo)致架構(gòu)過于精確地反映了現(xiàn)有內(nèi)容,而不能靈活的容納未來內(nèi)容的變化或增加。
一個(gè)有效結(jié)構(gòu)的特點(diǎn),具備“容納成長和適應(yīng)變動”的能力。
(2)信息架構(gòu)的基本單位是節(jié)點(diǎn)(node),可以對應(yīng)任意的信息片段或組合。
節(jié)點(diǎn)的安排方式:
- 層級結(jié)構(gòu)(hierarchical structure):節(jié)點(diǎn)與其他相關(guān)節(jié)點(diǎn)之間存在父/子級關(guān)系。
- 矩陣結(jié)構(gòu)(matrix structure):允許用戶在節(jié)點(diǎn)與節(jié)點(diǎn)之間沿著兩個(gè)或更多的“維度”移動。
- 自然結(jié)構(gòu)(organic structures):不會遵循任何一致的模式。
- 線性結(jié)構(gòu)(sequential structures):連貫的語言流程。
節(jié)點(diǎn)的組織原則(organizing principle):哪些節(jié)點(diǎn)要編成一組,哪些要保持獨(dú)立的標(biāo)準(zhǔn)。一般來說,在網(wǎng)站最高層級使用的組織原則應(yīng)該緊密與“網(wǎng)站目標(biāo)”和“用戶需求”相關(guān),而在結(jié)構(gòu)中較低的層級,內(nèi)容與功能需求的考慮將對你所采用的組織原則產(chǎn)生很大影響。
(3)語言與元數(shù)據(jù):
命名原則(nomenclature):描述、標(biāo)簽和網(wǎng)站使用的其他術(shù)語。
要注意“使用用戶的語言”且“保持一致性”,常用來強(qiáng)調(diào)一致性的工具被稱為“控制性詞典”(controlled vocabulary),即網(wǎng)站使用的一套標(biāo)準(zhǔn)語言。還有種方式是創(chuàng)造類詞詞典(thesaurus),即提供常用的、但未納入該網(wǎng)站標(biāo)準(zhǔn)用語的詞匯以供選擇。
使用控制性詞典或類詞詞典對于建立包含有元數(shù)據(jù)(metadata)的系統(tǒng)特別有用。元數(shù)據(jù)簡單的說就是“關(guān)于信息的信息”,以一種結(jié)構(gòu)化的方式來描述內(nèi)容。
好的元數(shù)據(jù)能幫助我們迅速地運(yùn)用已有的內(nèi)容創(chuàng)造出適應(yīng)用戶需求的一個(gè)新部分,還能提供更可靠的搜索結(jié)果。
(4)團(tuán)隊(duì)角色和流程
文檔:
視覺辭典(the Visual Vocabulary)
界面設(shè)計(jì)、導(dǎo)航設(shè)計(jì)和信息設(shè)計(jì)
框架層:什么樣的功能形式來實(shí)現(xiàn),處理更精準(zhǔn)的細(xì)節(jié)問題。
界面:提供給用戶做某些事情的能力。通過它用戶能真正接觸到那些“在結(jié)構(gòu)層的交互設(shè)計(jì)中”確定的“具體功能”。
導(dǎo)航設(shè)計(jì):提供給某個(gè)用戶區(qū)某個(gè)地方的能力。用戶能通過它在“結(jié)構(gòu)中自由穿行”。
信息設(shè)計(jì):傳達(dá)想法,它是這個(gè)層面中范圍最廣的一個(gè)要素。
1. 界面設(shè)計(jì)要尊重習(xí)慣,但非死守。當(dāng)一種不同的方式有很明顯的益處時(shí),應(yīng)試著違背習(xí)慣,但要求在做每一個(gè)決定的時(shí)候都有充分的明確的理由。
要抵制在網(wǎng)站四周建立起比喻(metaphor)的沖動。比喻往往不能揭示特性的本質(zhì),反而會混淆。避免比喻,減少對用戶“在理解和使用網(wǎng)站功能”時(shí)的心理要求。
2. 成功的界面設(shè)計(jì)能讓用戶一眼就看到“最重要的東西”。
(1)程序員要改變思考問題的方式。
好的程序員總要考慮到“邊緣情況”,但界面設(shè)計(jì)中,一個(gè)設(shè)計(jì)良好的界面是要組織好用戶最常采用的行為,同時(shí)讓這些界面元素用最容易的方式獲取和使用。
TIPS:第一次呈現(xiàn)給用戶時(shí),考慮每個(gè)選項(xiàng)的默認(rèn)值;能自動記住某個(gè)用戶最后一次選擇狀態(tài)的系統(tǒng)。
(2)HTML和FLASH
HTML最初是用于簡單的超級文本信息,后來它的一小部分元素就成為了標(biāo)準(zhǔn)界面元素:
復(fù)選框、單選框、文本框、下拉菜單、多選菜單、按鈕
Flash靈活性更強(qiáng),界面對用戶的響應(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)系,對于用戶理解“哪些選擇對他們是有效的”非常必要。
- 導(dǎo)航設(shè)計(jì)必須傳達(dá)出它的內(nèi)容和用戶當(dāng)前瀏覽頁面之間的關(guān)系,幫助用戶理解“哪個(gè)有效的選擇會最好的支持他們的任務(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)識(wayfinding):導(dǎo)航、顏色、圖標(biāo)等
線框圖(wireframe)/頁面示意圖:它是整合在結(jié)構(gòu)層的全部三要素的方法。通過安排和選擇界面元素來整合界面設(shè)計(jì);通過識別和定義核心導(dǎo)航系統(tǒng)來整合導(dǎo)航設(shè)計(jì);通過放置和排列信息組成部分的優(yōu)先級來整合信息設(shè)計(jì)。線框圖可以確定一個(gè)建立在基本概念結(jié)構(gòu)上的架構(gòu),同時(shí)指出了視覺設(shè)計(jì)應(yīng)該前進(jìn)的方向。
作者:王洛堇
文章轉(zhuǎn)自:http://www.wangxuntian.com/
- 目前還沒評論,等你發(fā)揮!