網站的Information Architecture--構建一個最優使用者體驗的site structure

世有因果知因求果發表於2015-12-15

http://conversionxl.com/website-information-architecture-optimal-user-experience/

在網站上應該有什麼型別的content?應該如何結構化選單?第一級的選單應該有哪些item?一個或者兩個menus?選單連結應該如何被呼叫?

Information architecture是非常重要的,然而大部分商業網站這樣構建資訊架構: IMO method(In my opinion)。雖然說常識對建立site structure是一個可行的選項,特別是頁面非常少的網站,這種IMO方式或許就足夠了。但是無論大小網站,應該還會有更好的方法。

如果在你的網站上你有數十個page,你就應該做一下information architeture analysis. 指導人們穿過一大堆的關於offer的資訊最終達成購買是需要認真的思考和研究的。形成憑著直覺去瀏覽網頁從而達到我們希望的使用者目標不會憑空發生的,這需要我們嚴肅思考這個問題。

什麼是Information architecture?

從wikipedia拷貝出來的事情,IA是一個關於科學地,藝術性地組織和標籤化(lablelling)關於websites,intranets,online communities,software,books and other mediums of information的資料,以便有更好的使用者體驗和可用性。我們可以簡化為“組織web網頁的藝術和科學。”

Louis Rosenfeld(IA之父),對IA定義了三個領域‘

content,users和context of use.

它是關於組織content和flow of a website的工作,該工作必須紮根於認真的研究和計劃。IA的最後目標是:產生一個平衡使用者期望和網站商業目標的structure/design。

一個使用者當訪問一個website時,通常他們會有四個基本的問題: 

1. 我是在對的地方嗎?

2.網站有我在尋找的嗎?

3.如果當前的頁面並不是我所需要的,那麼這個網站有更好一點的東西來供我挑選嗎?

4.我應該如何做去到下一步?

關於IA計劃的最重要工作就是對網站的每一個頁面來回答上面的四個問題。這意味著,你必須:

確保訪客就在他們該在的頁面上(總是列清楚他們現在在什麼位置)

使得訪客易於尋找到他們正在尋找的(clear navigation,search etc)

確保訪客能夠知道網站能提供的其他options(比如關於see also, related products連線)

可以讓他們輕易地找到採取行動的方法(clear CTAs)。

What is the end deliverable?

IA分析的最終目標是產出網站的資訊架構。最終的產出可能包括:site maps, site-flow diagrams, wireframes

所有這些輸出將決定了網站的big picture-通過有效地組織網站內容,來支援使用者方便輕鬆地完成他希望在本網站的任務。

IA也應該包括類似於決定在search page頁面上產品是否應該由price還是由名字來排序的“小”的工作。

所有的這些輸出都必須基於實際的研究和資料,並沒有更多的主管意願在這裡。

有很多達成設計優良的web IA的方法,下面我列出這麼多年來,我所使用的五步法:

當你通過幫助人們達成他們的目標時,你將達成你自己的商業目標。你只有完完全全理解了你的使用者的目標,問題痛點和願望時,你才能真正幫助到你的使用者達成他們的目標,從而你達到你自己的目標

step1: 收集關於使用者的資料

我們必須附體到使用者的頭腦中,這一點非常重要。在你開始著手設計IA之前,你必須知道以下幾個問題的答案:

What problem are we solving?我們在解決什麼問題

Who needs it? 誰需要這個服務?

What is this site for?我們的網站是因為什麼而存在的?

關於網站存在的目的和需要達成的目標越早清晰定義(必須書面化下來),那麼我們要解決的問題和解決問題的方案就越容易清晰。越容易聚焦,就越容易達成好的IA輸出。

和你的使用者直接交談。通過面對面地交流或者電話交流都很不錯,同時也可以通過online survery。在這個步驟上你的目標是真正理解你的使用者到底需要什麼以及為什麼他們想要這個產品或服務。往往可能使用者希望瞭解閱讀一個網頁,會有不同的目的或者use cases.

step2:建立一個虛構的客戶角色並且開始寫user stories

你的網站一般是為特定群體來設計的,而絕不是任何人都適合的。這就是為什麼我們會引入一個個假設的客戶來幫助我們理清需求。

虛構客戶是從你的使用者研究中依據事實來虛構出來的,模型化你的真實使用者。他們承載著他們的目標,動機,興趣愛好和最重要使用者群體的行為特徵。

下面是一個樣本虛構客戶的例子,你可以給你的虛構任務貼上一個圖片,這有助於你來設想網站的一個真實的使用者影像:

下一步要做的是將use case和你的假象客戶關聯起來。use cases提供了一個來決定和描述專案的目的的簡單有效的方法。

use case需要有兩個元件: actors/goals。

actors就是哪些使用我們網站的人們(客戶)。你首先需要聚焦於最重要的使用者群體-模型化為虛擬客戶。研究這些虛構使用者群體分別需要達成什麼目標。每一個Use case必須有一個特定的目標以及需要執行特定任務就能達成他的目標的actors(網站使用者的角色)

目標可能是類似於:讀一個blog post,檢查信用卡賬單,預定酒店,下載軟體,做一些測試等等。use cases定義了goals and purpose: 也就是我們要解決的問題本身

當你通過思考虛構客戶他們希望達成什麼目標來研究你的網站IA時,你就可以更有信心:我做的事情是使用者需要的,有意義的。

step 3: Metadata, scenarios, pages

一旦你對你的使用者有了真正的理解:他們的目的,以及他們應該如何達到他們的目標有了清晰的認識,你可以開始規劃我們應該如何以對使用者有用的方式來組織呈現網站的內容。同樣地,也會有很多鍾方法,但我更喜歡下面的方法:

尋找指出metadata

Metadata是關於資訊的資訊。他可以幫助使用者找到他們要找的content.比如說,你希望買一個咖啡研磨機,而去訪問一個你知道的會賣這些東西的網站。如果你在網站上瀏覽後卻無法找到你所想要的咖啡機,這就是一個關於不良metadata的訊號。如果你正確定義組織了好的metadata,你已經有效克服了IA的第一個障礙。

你必須決定人們通過一個什麼品類,就能找到咖啡機。或許,他們可能希望通過刀片尺寸或者顏色,或者品牌來搜尋?知道了search的不同引數和變數,你就需要在你的系統中儲存這些索引資訊,這樣也方便高效輸出很棒的檢索內容。

一本書的metadata可能包含title,description,author,releaese date, ISBM,comments,cover image等。

create user scenarios

為了設計出最佳的使用者體驗,開始想想scenarios來如何服務一個訪客的。一個scenario是一個關於通過使用你的網站來執行一定任務或者達成一定目標的某個人的故事(你的虛構客戶):比如預定一個航班,購買瑜伽墊,或者預定一個研討會。 scenarios往往就隱含了為什麼你的虛構使用者要來你網站的原因

你的虛構使用者到底希望完成什麼目標呢?有什麼方法能夠簡單地幫助他們來達成目標?什麼會造成問題?你應該聚焦於使用者和他們的任務,而不是聚焦於你的網站本身內部結構。作為這樣聚焦的結果,你可能就會對我們的網站到底需要什麼樣的內容以及如何組織site map有了深入的洞悉。

Map user tasks to individual web pages

在你開始思考實際設計之前,你應該需要相關的conent就緒了。(content precedes design) Design in the absence of content is not design, it is decoration.

下一步是要決定在你的web pages上堆積什麼內容,完成什麼功能,以及需要有多少頁面。你必須在下面兩點中平衡:幫助我們的使用者完成他們當前的task,同時關於下一步他們要做什麼也是清晰的。

每一個page必須做兩件事:

1. 幫助使用者完成一個特定的task;

2.使得下一步非常容易被找到和訪問。

當你設計網站的時候,確保訪客完成每個任務是非常重要的。然而,達成他們的目標通常包含了一系列小的tasks,正是這一系列的小的task之間的關係決定了網站的真正體驗。你的網站的每個page都需要有助於構建這個任務鏈。

通常在你的網站上有三種型別的pages:

1.Navigation pages. 這些幫助使用者決定到哪裡去找他們要的東西。這種頁面的目的是send users somewhere else. 典型地,這是一個home page或者search result page;

2. consumption pages. 這些就是第一步中的"somewhere else"的頁面,通常比如articles,videos,pricing information等

3. interaction pages.這些頁面允許使用者輸入和運算元據,比如search page或者sign-up form

沒一種型別的page都來匹配不同型別的user task. 深刻地理解你需要哪些型別的page將有助於你來優化你的ui設計。當你畫一個site map或者user flow時,非常重要的一點是需要表明這個頁面到底是navigation page,還是consumption page還是interaction page,根據這個資訊做相應的design;

 offer the right help at the right moment in the most unobtrusive way possible

有一些頁面是非常容易使用的,而有部分頁面可能需要學習。需要在適當的時候計劃並且顯示一些help text,有助於使用者沒有任何混淆地完成他們的任務。

資訊應該是在特定上下文情景中提供的。使用者應該在他們做酒店預定的頁面時能夠得到所有關於預定相關問題的答案。

On-page FAQ用的好能起到很好的作用。下圖是Groupon的on-page FAQ徹底回答了相關context下的問題:

step4: create user flows

既然你已經清楚地理順在你的網站上應該有哪些型別的頁面,將這些頁面map出來形成優化的user flow就可以了。

當設計flow時,也需要知道搜尋資訊的四種模式:

1. known-item search.通常,當人們清楚地知道他們在找什麼以及叫什麼名字時,他們大多數用search來找。但是也有部分使用者可能更喜歡自己去瀏覽最終定位到自己要的東西;

2.exploratory seeking(探究性地搜尋)當使用者有一個需求,但是又不太清楚什麼能夠滿足使用者的需求時,這種性質的查詢就發生了。人們往往會對他們的問題接受一個答案,但是他們可能並不知道他們是否真的找到了正確的答案(不知道是否還有更加合適的option在那裡)

3.Don't know waht i need to know.有時人們甚至不知道他們應該知道什麼。如果有個人需要購買一些珠寶首飾,那麼他會發現他必須學習珍貴金屬,處理流程,寶石純度,硬度等等。他們或許在找一樣東西:珠寶首飾,但是你會發現他們需要懂得更多(這些相關的資訊就是他感興趣的!)

4.re-finding: 重新發現。人們可能希望跑到他前面已經發現的頁面去。如果他們在上次訪問時看到他們喜歡的,你應該讓他輕易地找到他曾經看過的感興趣的!

每種資訊檢索的習慣依賴於特定的navigation tool來取得成功

相關文章