首頁設計的可用性和PET

來源:互聯網
上載者:User

  網站的首頁是一個讓人頭疼的東西。有時它看起來很簡單:首頁就是網站內容的整合,一個產品經理隨便從網站裡拿點東西出來,就能堆出一個看上去靠 譜的首頁。也正因此,它往往非常麻煩:很多人都可以發表自己的見解,而這時互動設計師的一些手段(比如流程圖、概念圖等),在面對首頁設計時也難派上用 場,以致最終陷入到無盡的爭執中。所以,本文希望尋找一些實用的方法一定程度上協助設計師來決策,也讓大家在爭執過程也有些共同的依據。

  首頁之所以難設計,我認為因為它不僅要解決使用者“能做”的問題,更多時候要解決使用者“想做”的問題。“能做”對應的是可用性,相對容易解決,專 家評估、可用性測試可以很有效地協助設計師;而“想做”對應的是PET(Persuation,Emotion,Trust,說服、情感、信任),可能涉 及到心理學,人種學,營銷學等陌生的知識,互動設計師在這方面就不再是專家了,但一些經驗和方法仍可以有效,下文中會講到。

  將可用性和PET分開考慮

  瀏覽首頁的使用者基本分為兩種:有目標的使用者和無目標的使用者。Alan Cooper的“目標導向”理念告訴我們,使用者的目標驅動任務,有目標的使用者直接開始“任務”,我們只要為他們解決可用性的問題。而那些無目標的使用者,他 們只是隨便逛逛,需要首頁的PET足夠好,將此類使用者“轉化”成有目標的使用者,盡量避免他們“流失”。

  所以我將瀏覽首頁的使用者分為這兩類,針對兩類使用者不同的特點來進行設計,會讓我們的思路變得清晰。

  一些現執行個體子

  Google首頁

  對於搜尋型產品,所有使用者都是有明確目標的,即便首頁是多麼“死板”,因為沒有任何幹擾,使用者都可以迅速進入自己的任務。所以Google首頁沒有任何PET的內容

  趕集網(或58同城)

  這類網站的設計也完全服務於“有目標的使用者”,把“無目標使用者”無情地拋棄,本人覺得這種設計並不是最高效的方式,因為畢竟浪費掉了大量使用者。

  京東商城

  對於電子商務網站,存在兩種典型的使用者劇本:

  理性消費者,想要找的東西很明確,或者挑選的範圍很小,這就要求首頁有很好的可用性,協助他找到商品,如下圖中的藍色部分就是服務這類使用者。

  衝動型消費者,並不知道自己需要什麼,只是隨便看看有沒有合適的或促銷的東西可以買,這就要求首頁有很好的PET,吸引使用者點擊,如下圖中的紅色部分就是服務於這類使用者。

  倘若京東商城不考慮無目標的使用者,也許首頁就會長成下面這樣:

  對於想找商品的使用者,也許更方便直觀了,而對於沒有目標的使用者,就只能離開了。

  人人網

  對SNS類網站來說,使用者大多數時間是在“隨便看看大家都在幹什麼”,當然也有時,使用者來到首頁進行發表日誌,上傳照片等目標明確的操作。

  討論:“隨便看看”是不是一種使用者目標?

  我覺得不是,“隨便看看”不能直接驅動任務,故不能用來測試產品可用性;在可用性測試中的任務設計時,隨便看看不能作為任務。“隨便看看”的過程中,使用者決定要做某件事了,這才是使用者目標。

  澄清一些可能存在的誤解

  服務無目標的使用者的模組(如上面例子中的紅色地區),並不是說不需要可用性,只是在設計的難度上,要把PET做好更難更需要思考,而可用性要求較容易滿足。反之亦然。

  比如京東商城中的促銷模組設計,是很典型的服務於無目標使用者的模組,PET要求能表現產品品質好,價格便宜,買的人多,存貨不多等等難以表現的資訊;而可用性只要求商品易瀏覽,可點擊等,任何設計者都不會出錯。首頁設計中如何協調可用性和PET

  在設計之前,調查分析網站使用者,是“有目標”的多,還是“無目標”的多,以確定頁面上兩類別模組的比例。

  一般網站同時兼顧兩種使用者。但“可用性“和“PET”這兩點,存在天然矛盾,前者要求頁面清晰,而從後者的角度來說,清晰意味著死板,後者要求頁面豐富,而從前者的角度來說,豐富意味著雜亂。故在設計時要注意權衡。

  為解決上述矛盾,那就要求“可用性模組”和“PET模組”要明確區分,可以識別,不能相互摻雜。讓兩類使用者能第一時間關注到需要看的部分。

  可用性是基礎,一定要先做好,PET是更高要求,屬於上層建築,切不可為上層建築放棄基礎。

  設計首頁的可用性

  應該尊重習慣用法的時候,不要擅自創新,如採用使用者習慣的網站頭,包括主導航,全域導航,搜尋,LOGO。如下圖。

  若有更多導航–如電子商務網站的商品分類–須在第一屏內出現,突出且易識別。導航中的資訊架構,在需要時可用卡片分類法對導航內容進行分類。易迅網的商品分類導航,在左邊第一屏最顯眼處。

  首頁整體布局規矩,使用網頁柵格系統設計頁面,允許頁面有合理留白。、

  盡量保持頁面架構簡單,最好不出現兩列和三列混排的設計。

  首頁的模組中使用儘可能簡單的列表,簡單列表更容易被理解和讀懂,且設計運營開發成本低。當然,“非對稱列表”也有優勢,見下圖,設計師應該根據使用者類型和設計目標來靈活運用。

  設計首頁的PET

  1. 清晰表現品牌和產品服務類型。這首先實現PET中的Trust,只有使用者第一時間瞭解網站品牌和服務(特別是一些大品牌),才能 夠立即建立使用者的信任。但這個實踐起來卻相當有難度,特別是一些全新的服務,篇幅小了說不清,篇幅大了使用者直接略過。這裡只能介紹一種方法來驗證此目的有 沒有達到:

  5秒測試:

  給一個新使用者(目標使用者)看首頁設計5秒,讓它說出:

  這是什麼網站?

  這個網站提供什麼服務?

  首先吸引你的是什麼內容?

  這個網站和類似競爭者有什麼不一樣嗎?

  你對這個網站和它的服務有沒有興趣?

  然後讓使用者仔細瀏覽該首頁,再糾正上面的答案。

  2. 使用迷人的圖片和標題。說白了就是標題黨,雖然這招定被廣大設計師唾棄,但它的效果絕對不容小覷。

  3. 使用非對稱的設計,有主有次,展現豐富性。但注意,非對稱設計會增加認知負擔,降低可用性。見上文。

  4. 利用好數字來說服使用者,因為數字“不會說慌”。

  4.1 電子商務網站中,限量限時促銷。如下圖中的易迅網首頁的截圖。

  4.2 電子商務網站中,突出價格和價格對比。如下圖中團購網站的首頁。

  4.3 用數字來突顯“豐富的概念”。如下圖是網易愛拍首頁的設計。

  5. 在首頁顯示其他使用者的活動來說服使用者(其他使用者購買記錄,評價,曬單等)。調查顯示,讓使用者信任一個網站的最有效途徑,就是線上其他消費者的意見。

  6. 另外,視覺設計上要符合產品和服務的定位,在情感上與使用者拉近距離。

  7. 頁面更新頻率,使用者需要適時的刺激。太頻繁的更新,不僅浪費資源和成本,使用者也要不斷適應,增加學習成本;而長時間不更新,也會讓使用者慢慢失去粘性,轉化率降低。

  文章來源:uedc.163.com 轉載請註明出處連結。

相關關鍵詞:
相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。