如何系統地規劃出具備上乘用戶體驗的網站?
現今,網站和web技術已經不算是新興技術了,但是不得不承認,在當下的移動互聯網時代,web技術仍然算得上是新潮的技術之一,并且網站也是各企業商業價值中的重要一環。因此,規劃、設計具有優秀用戶體驗的網站,仍然是我們的重要技能之一。
前戲:明確網站的業務模型
在開始正式地規劃網站之前,我們有必要了解網站的主要業務模型。盡管人們都更加愿意獲得免費的信息,但信息提供方(企業)還是希望能夠由此得到回報的。
要明白,大多數企業要想存活,就必須要掙錢。在為企業建設網站之前,我們要知道公司的業務模型是什么,如果不了解業務模型,就無法知道用戶哪些行為是有意義的,哪些行為是毫無價值的。
主流的業務模型包括:
- 市場/電子商務模型(比如B2B/B2C/C2C);
- 廣告模型(需要很大的用戶訪問量);
- 會員模型(增值服務);
- 社區模型(收入來源輔助產品或服務的銷售);
- 訂購模型(訂購服務)。
找準了業務模型,我們就可以開始設計出支持業務需求的網站了。
一、明確目標用戶
在開始網站設計之前,我們首先要問自己一個問題:“網站是為誰搭建的?”不是每個網站的設計者都能準確有效地回答這個問題,有的人會說“網上的每一個人”,還有的會說“所有喜愛某類產品的人”、“所有愛看書的人”或者“所有喜歡美食的人”。
這些回答都不是準確的回答,因為你無法從這些回答中得到精確的用戶角色。
我們可以采取如下工作方式,去明確目標用戶:
- 找到公司的市場/運營部門,市場/運營部門的人員或許對公司用戶的統計數據結果以及心理方面做過了大量的研究。
- 咨詢公司負責人或高管,了解他們希望產品所面向的用戶,以及他們所認為的具有價值的用戶行為。
在和各相關部門同事的談話中,并不只是收集用戶的統計信息,真正要做的是得到一些合適的行為信息來幫助我們更好的設計網站。
比如,我們了解到用戶的年齡較大,就要做出一些初步的設計決策。如:字體要放大、交互操作要盡量簡單、以及頁面上哪些元素更應該突出等。
二、與目標用戶交流
招募目標用戶通常需要公司內部其他部門的配合,比如客服部門,可以通過諸如電話邀約、郵件邀約等方式,如果目標用戶是企業,則可以通過公司高層或市場部門,向企業致電或發送邀請函等方式,總之,盡量通過其他部門的協助完成用戶的邀約。
在訪談的過程中,我們要注意理解得到的反饋。比如,用戶可能會說“我希望按鈕大一些?!倍麄兊膶嶋H想法可能是“付款的過程太復雜了?!被蛘哂脩艨赡軙f“我希望這個的演顏色是紅色?!彼麄冋嬲囊馑伎赡苁恰耙械轿蚁胍臇|西太耗費時間。”
最佳的方式是:當用戶在正常的環境中具體完成任務時實際地跟蹤用戶的行為。
所以,在訪談中,我們可以問一些諸如“你想做什么?”、“你希望得到什么”這樣的問題,而避免去問“你認為這個按鈕應該放在哪里?”這種問題。我們要把重點放在用戶完成任務時遇到的難題上。
三、創建用戶角色模型
角色模型可以幫助我們更深入地理解設計所針對的對象,以及怎樣才能真正滿足這個用戶的需求。當然,也可以不去創建復雜的角色模型,只不過,如果能針對一個特定的“人”來進行設計,會讓我們的設計更加有效。
1. 總結用戶交流結果,把結果分發給各利益相關者或相關部門人員
在第二步中,我們會收集到一些信息??赡芤呀浀玫接脩舻南嚓P信息,比如:性別、地理位置、上網習慣、技術水平或是他們使用競品的方式。
我們了解到用戶當前遇到的麻煩,也了解到哪些方面還算不錯等信息。
針對于收集到的信息,我們需要建立一份報告,這份報告可能會涉及以下信息:
- 用戶群體的技術程度;
- 年齡段,性別分布等;
- 用戶想要通過產品完成的任務過程;
- 用戶使用同類產品的使用模式;
- 用戶感興趣的競品;
- 常見問題;
- 用戶價值觀、文化背景等內容。
這里需要注意的是:
- 要保證每個信息盡可能準確,去除諸如“用戶希望….”這樣的信息;
- 信息要與我們的產品相關;
- 信息要針對網站整體成立,去除諸如“用戶無法找到付款按鈕”這類的信息,取而代之的是“我們有一類用戶,他們知道想購買什么,現在需要提供一種方法能加快購買流程”。
2. 與各相關部門人員召開會議,腦暴形成用戶角色
尋求各部門相關人員的協作,往往比單槍匹馬作戰更高效。
每一個部門都會對用戶有自己的理解,是男人還是女人?年齡段如何?住在哪里?如果大家不確定,可以參照上一步的報告文檔。
當大家提出了大量用戶特征后,可以開始合并這些特征,并將其改進為角色,比如:女性+25~35+華北地區=來自北京的27歲女性,甚至還可以為她取一個名字。
3. 讓角色成為真正的人
為用戶角色增加一些具體的個性化內容,比如:照片、姓名、職業、個人背景、職業、教育背景、目標、愛好、最喜歡的網站、他的愿望等信息。確保用戶角色的真實是這一步的關鍵。
4. 為人物角色加入場景表達
通過創建場景,會使得人物更加豐滿,同時有助于我們完成網站交互系統的設計。場景,就是人物角色使用產品時的背景故事簡介。
比如:王強(人物角色名字)打開瀏覽器,從網站上看到了感興趣的電影介紹,首先他回選擇自己關心的電影類型,然后網站會推薦給他可能相看的電影;接下來,他會選擇真正感興趣的電影,并進行觀看。
四、繪制用戶路徑草圖
用戶路徑草圖可以幫助我們確定不同類型用戶會完成哪些類型的動作,由此我們可以決定需要為網站設計什么。通過畫出不同用戶的路徑,可以幫助我們查看是否有遺漏。舉一個例子:
比如,要建立一個小型電子商務網站的用戶路徑草圖,可以有這樣一個場景故事:買禮物的人瀏覽主頁,找到適合的禮物,買下禮物,寫下一張賀卡,寫上朋友的信息,付款。
起初的用戶路徑草圖如下:
接下來可以考慮,網站的用戶不只是送禮物的人,也會有給自己買禮物的用戶、不滿意的用戶、失業想要在線賣東西的用戶、其他渠道接收到廣告的用戶,我們可以繼續為這些用戶添加用戶路徑:
五、明確業務流程與任務流程
繪制了全用戶的全路徑草圖,現在就要拆解用戶的全部任務,明確交互中每一步的細節。
其實這一步,就是根據用戶的任務,完成各個任務/功能的流程圖設計,以及和網站后臺系統交互的業務流程圖設計。
關于功能流程與業務流程,網上已有不少文章做出詳述,本文不再詳細闡述。
六、網站的用戶體驗設計
本步驟不再敘述如何繪制網站的原型圖,這里要談的是在網站的設計中,值得注意的要點。
1. 網站上的一切要井井有條
網站中會含有豐富的信息,用戶來到我們的網站時為了查找信息或者完成任務或者二者兼有,作為網站的設計者,我們的任務就是用好的設計幫助用戶達到他們的目的。
(1)幫助確認是否到達了正確的位置
來到網站,用戶希望知道這是不是他所需要的,也就是他是否達到了正確的位置。
用戶來到我們的網站時,首先看到的就是網站的組織方案。
組織方案有兩個作用:
- 導向作用,會告訴用戶這是一個什么類型的網站;
- 告訴用戶要做什么,它會向用戶展示“在這里你可以瀏覽/購買/閱讀/分享/查看/收聽的東西”。
因此,組織方案需要為用戶展示所有的產品范圍。比如,淘寶網站的分類導航:
(2)幫助用戶找到他們需要的東西
用戶知道他們訪問了正確的網站,接下來他們需要標識導引來找到他們想要的東西,標識導引有四方面的內容:
- 使用熟悉的組織系統。組織系統包括,字母(例如通訊錄);地理位置;時間;連續區間(比如排名1~10,或一些數值范圍);數字;種類(例如博客種類)。使用用戶已經習慣的組織系統,用戶就更容易上手我們的網站,不必從頭學起,我們的網站也就更易用。
- 明顯的標簽。標簽信息可以幫助用戶更好的找到他們想要的東西,比如一個標記著“流行”標簽的歌曲,會吸引來眾多不喜歡古典音樂的用戶。
- 控件的主觀能動性。也就是,鏈接看起來要像鏈接,按鈕看上去要像按鈕,僅供閱讀的文本和可以單機的文本看上去應該是有區別的。
- “面包屑”。要讓用戶知道他正在網站的哪個位置,是從哪里來的,如何才能回到之前的頁面。面包屑導引或通過改變導航條的外觀都可以提供網站位置的反饋。
(3)讓用戶知道網站上有更好的東西
無論用戶是否在網站上找到了他們需要的東西,他們都會想找到更多的類似的更好的內容。在這里,可以有效利用導航或面包屑導引,突出顯示用戶在網站中的當前位置,并顯示相關的內容,讓用戶可以鏈接到其他的地方。
另外,也可以使用提供“更多內容”的選項,可以向用戶提供相關商品的快捷途徑?!案鄡热荨睂Ш焦ぞ邔τ谝唤M相關商品以及相關種類的快捷途徑最為有效,例如電商網站的“猜你喜歡”,文章網站的“相關文章”。
(4)為用戶提供下一步操作
用戶已經找到了他們想要的東西,我們要為用戶的下一步操作提供相應的選擇,我們應該在設計網站時詢問自己“用戶希望在找到他們需要的東西后,做些什么?”
對于一個電商網站,用戶肯定是要購買到找到的商品,電商網站提供的“加入購物車”和“購買”按鈕有效幫助用戶解決了問題。對于一個文章網站,用戶閱讀一篇文章后需要做些什么呢?應該是評論、分享、收藏、復制、粘貼這篇文章。
用戶會利用網站提供的“下一步”操作拉近與其目標的距離。
2. 網站導航的細節闡述
這里之所以把網站的導航設計拿出來,是因為看似簡單的導航設計,里面含有很多的設計細節。
在討論導航的細節之前,我們先要明確用戶查找信息的方式,用戶訪問我們的網站就是為了獲取查找相關信息,而導航可以幫助用戶去完成這一操作,所以有必要了解用戶查找信息的方式。
(1)用戶查找信息的方法
- 已知內容查找:用戶明確知道自己想要查詢什么,此時他們會直接通過搜索工具去查找。此時導航應該適當地處理搜索,使用戶能夠到達他們想去的地方。
- 探測內容查找:用戶此時可能有一個需求,但是不能確定具體怎樣才能滿足這個需求。此時就會記性探測內容查找,用戶想買一個數碼相機,但是不知道哪種數碼相機好,所以需要查找很多相機對比。
- 不知道自己要查找什么:有時用戶連需要什么都不清楚,比如用戶想買新房子,卻發現需要了解所在城市的相關政策,在尋找某個東西時,卻發現實際上需要了解另外一些東西。
- 歷史查找:用戶可能想查看以前找到的某些東西,這一點通常在設計中被忽略。
(2)導航的分類
- 結構導航:展示網站內容的層次結構,包括全局導航和局部導。全局導航一般是網站的頂層級別,用戶可以通過全局導航很容易地訪問重要內容。局部導航可以把用戶帶到網站層次結構中鄰近當前所在位置的層次。結構導航對于“已知內容查找”和“探測內容查航找”很有用,對于“不知道自己要查找什么”的用戶也會有一些幫助。
- 關聯導航:將一個頁面與包含類似內容的其他頁面相關聯。關聯導航適合于“探測內容查找”,并且能幫助“不知道自己要查找什么”的用戶找到相關信息。
- 可用性導航:包括登錄,訪問用戶信息等內容,主要內容組織以外的所有內容都可以納入可用性導航。
三類導航分別對應不同的用戶查找信息方法:
(3)全局導航
在很多網站上,全局導航就是導航條,比如:
對網站內容分類并選擇組織系統時,全局導航作為頂層類別,對用戶和企業來說是意義重大的,因為它展現了網站的頂層架構。
全局導航需要再每個頁面都出現,不論用戶現在在哪里,都能通過全局導航繼續訪問網站的任何位置。
同時,全局導航還有一個作用,就是會告訴告訴用戶網站是關于什么的,以及用戶可以利用網站來做些什么。
全局導航通常會顯示在頁面的最上方,因為這樣就能將頁面的其余部分聚焦于內容數據。
當然,垂直的全局導航也是一種選擇,但是這樣會限制局部導航以及頁面內容的可用空間。
(4)局部導航
局部導航也稱為欄目導航,因為它提供了一組鏈接。當點擊了一個全部導航時,會進入到相應頁面,此時會在全局導航下方出現新的一組導航條,這就是局部導航。
利用局部導航,只需要提供一個欄目下其他頁面的鏈接即可。在一個復雜的分類系統中,用戶希望從一個類別移到子類別,然后再移回來,設計局部導航就是為了讓用戶能夠輕松地在不同類別間導航。
局部導航可以有效的幫助“探測內容查找”型用戶,這些用戶知道他們需要某些東西,但是又不確定到底是什么。
選擇一個全局導航后,局部導航可以幫助他們瀏覽更加具體的內容。而對于“不知道自己要查找什么”的用戶,局部導航可以為他們提供一組相關的選項,幫助他們做出決策。
局部導航通常出現在全局導航的下方(或頁面的左側)。這種布局方式也強調了內容的組織方式:子類在類別下方,把相關性最強的鏈接放在最接近用戶需要的位置。
用戶在訪問網站的一個頁面時,會關注頁面的內容,如果他看到的頁面上沒有需要的內容,那么局部導航通常要放在離頁面內容更近的位置,用戶想要訪問其他類別時,首先要找的便會是局部導航。
(5)導航訪問模式
在全局導航和局部導航這里,介紹一下用戶訪問導航的模型,用戶查找網站內容的方式取決于網站的導航,通過導航訪問內容有兩種基本模式(我喜歡這么叫這兩種方式):彈跳模型和爬行模型。
彈跳模型:這種模型會使用戶前往一個子類,然后必須回到其父類(首頁)來選擇另一個不同的子類。
此模型適用于用戶瀏覽龐大的異構內容集的時候,眾多分類龐雜的網站如電商網站、素材類網站,這些類型網站中面包屑導引工具就顯得異常重要,用戶會沿著面包屑導航的軌跡返回。
采用該模型,為了讓用戶在網站中轉移時將其余的頂層類別隱藏,使用戶更沉浸當前類別中。
同時,對于包含大量內容的網站,不可能把所有頂層類別連同所有局部導航都顯示在一起。
例如,京東的面包屑還自帶了篩選功能:
爬行模型:在該模型中,用戶可以采用橫向的方式在各類別間轉移,用戶選擇一個類別后,可以繼續選擇頁面上的“兄弟”類別的導航,用戶只需要單擊一次就可以進行切換。
做一個簡單的總結:全局和局部導航統稱為結構導航,優秀的結構導航能支持用戶的所有信息搜尋行為,包括前文中三類查找信息的用戶。
(6)關聯導航
關聯導航就是網站頁面上能為該頁面上的內容關聯到額外內容的鏈接,比如:文章詳情的“更多文章”、電商網站的“猜你喜歡”、新聞詳情的“相關新聞”等。
關聯導航有時很容易被我們忘記,因為它們相當于跨越了網站信息架構體系結構的快捷方式。
但是,不得不承認,關聯導航是保證網站可用性強大的驅動力,可以促使用戶沉浸于我們的內容。
關聯導航關注兩方面內容:
- 用戶找到了需要的東西后,下一步做什么?
- 如果頁面并不是用戶想要的,那么如何能把用戶繼續留在網站?下一步做什么?
a. 上文中已經提到過“下一步”操作。當用戶找到了他們希望的東西時,下一步要做什么?
如果是訪問了一篇文章,就應該為用戶提供更多相關文章的鏈接;如果是觀看了一個視頻,就可以提供更多相關的視頻鏈接給用戶。
例如:在36kr網站,當用戶閱讀了一篇文章后,網站提供了收藏、評論、分享等功能。或者,用戶心情不錯想要繼續查看相關內容,為此,網站提供了相關文章和感興趣文章的鏈接。又或者,用戶不想看類似文章了,此時網站提供了下一篇文章的鏈接。
b. 如果當前頁面展示的不是用戶想要的,那么該怎么辦呢?我們當然不能保證每一個頁面都是用戶想要的。
我們要做的,就是要提供一些其他的內容給用戶看到,可以提供一些相關內容的鏈接,或者是提供同一內容不同格式的鏈接,比如在一個新聞詳情內,可以給用戶提供文字、音頻以及視頻多種查看方式。
例如:在用百度搜索內容時,并不是一下子就能搜索到用戶想找的內容,此時在搜索頁面上提供了多種格式的搜索類型,同時還提供了搜索工具幫助用戶篩選搜索的結果,在界面的右側也提供了一些與搜索關鍵字相關的鏈接。
(7)可用性導航
信息架構領域的美國知名作家James Kalbach給出了可用性導航的定義“可用性導航將工具和特性相連接,這些特性可以幫助訪問者使用網站?!?/strong>
好吧,專家的定義總是這么晦澀。
其實我們對可用性導航并不陌生,網站的登錄/注冊、搜索、個人信息、個人賬戶、客服、我的訂單等都是可用性導航。
可用性導航通常放在全局導航附近,比如頁面的右上方,因為可用性導航也需要在網站的所有地方都能訪問到。
在設計可用性導航時,要利用視覺線索和頁面上的屋里位置將它和全局導航分開。
不同類型網站可用性導航包含的信息不同,根據網站各自的業務進行具體設計,比如:京東的“登錄/注冊、我的訂單、我的京東、京東會員、企業采購、客戶服務、手機京東”、站酷網的“搜索、上傳、消息、個人信息”等。
(8)小結:
全局導航和局部導航可以幫助用戶縮小網站的內容范圍。關聯導航可以將用戶連接到相關的內容,提供不同情況的“下一步”??捎眯詫Ш娇梢苑胖昧硗馊悓Ш轿茨芡咨铺幚淼钠渌匾溄?。
三部分導航綜合到一起,就可以得到一個可用性很高的網站了。
如果在設計網站的導航時,還是無從下手,試著回答自己三個問題“內容如何組織?”“用戶希望通過網站做什么?”“你希望用戶通過網站做什么?”
3. 網站內容的基石—元數據
元數據是網站組織系統的基礎,搜索以及電商網站上的導航系統都依賴于元數據。
網站上的信息可以有不同的形式,比如:一篇文章、一張圖片或者是一個視音頻。
元數據可以確保以上各種形式的內容都能夠被用戶查找瀏覽到,元數據就是每一項內容的所有信息。比如,一首歌曲,元數據可能包括:出處,版本,作詞人,作曲人,演唱者,專輯名,時長,音樂類型等等。
元數據通常包括以下三種:
- 固有性元數據。與內容構成有關的元數據,比如這是一個word文檔、jpeg圖片、ZIP文件。
- 管理性元數據。與內容構成有關的元數據,比如圖片的用途、編輯人、是否已發表。
- 描述性元數據。與內容本質有關的元數據,比如一個圖片的描述性元數據:狗、犬科、可愛等。
下圖展示一些元數據的類型:
我們要根據網站的具體定位,組織具體的內容及其元數據,明確每一個元數據對用戶來說是否有用。
4、網站設計要遵循的基本原則
用戶體驗設計部分的最后,總結一些常用的設計原則吧:
- 標識引導設計:幫助用戶明確他們身在何處;他們要尋找的內容在哪里;如何得到用戶搜尋的內容;用戶已經搜尋過哪些地方。比如,經典的面包屑導航。
- 設定期望并提供反饋:在動作發生之前要讓用戶知道動作還未發生;提示用戶正處在過程中的哪個階段。比如,向導式導航設計,一直顯示用戶的操作進度。
- 保持一致性:同種類型頁面的架構一致、交互操作一致、視覺效果一致等。比如,所有商品的詳情頁都使用同樣的布局。
- 提供防錯性:預防用戶出錯;保護用戶正在編輯的操作內容;及時通知錯誤。比如,在表單交互中,保留用戶已編輯信息,及時反饋錯誤信息等。
- 依靠辨識,不憑記憶:提供明顯且精確的可辨識要素,避免用戶憑記憶與網站交互。比如,保留用戶的搜索歷史,保留用戶的瀏覽歷史等。
- 考慮到不同水平的用戶:《交互設計精髓》書中提到,用戶分為新手用戶、中級用戶以及專家用戶,新手用戶往往會很快過度到中級用戶,而專家用戶鳳毛麟角,所以我們的一般策略是為新手及中級用戶創建簡單的產品,為專家用戶構建一些特殊屬性。
- 提供幫助(說明)鏈接或文檔:及時的幫助說明文檔,可以有效幫助用戶解決使用網站過程中的燃眉之急。比如,網站關于會員體系的說明。
七、目標(種子)用戶測試網站
可以給用戶測試我們的網站原型,也可以快速搭建第一個版本后讓用戶使用得到反饋。無論采用哪一種方式,目標都是要盡快得到用戶的反饋,以及時調整解決出現的問題。
同時,我們要為發現的問題預留出足夠的處理時間。
八、迭代優化我們的網站
接下來,就是不斷的去迭代、優化網站了,根據公司業務的調整、或是配合其他產品線、或是增加產品功能,不斷的去完善網站。
九、總結
本文討論了系統規劃網站的大致流程,重點討論了提升網站用戶體驗的設計要點,從中又引出了導航、元數據以及基本的設計原則,希望本文的內容能給大家帶來一些幫助。
#專欄作家#
流年,人人都是產品經理專欄作家?;ヂ摼W產品設計師,4年互聯網產品設計經驗。擅長用戶體驗設計,喜歡鉆研需求功能背后的技術實現方式;在成為綜合型產品設計師的道路上不斷努力前進!
本文原創發布于人人都是產品經理。未經許可,禁止轉載
題圖來自 Unsplash ,基于 CC0 協議
- 目前還沒評論,等你發揮!