百試不厭,提升“閱讀體驗”的方法

6 評論 4748 瀏覽 42 收藏 9 分鐘

編輯導語:平時項目或產(chǎn)品設計中難免會遇到列表相關的需求,本文結合“完形心理學” “尼爾森視覺閱讀模型”,通過通俗易懂的方式來優(yōu)化一個列表頁,一起來看看吧。

一、改版契機

經(jīng)過一段時間,最初的版本首頁中從用戶反饋中得知對于“推薦閱讀”模塊很難去理解,閱讀比較費時,三個模塊堆疊在一處不明確要先看哪個而且每次都要通過tab切換。從業(yè)務層面來說目前的使用體驗對熱銷產(chǎn)品的商業(yè)轉化上也構成了一定的影響。

雖然后來有過一次優(yōu)化由于時間成本的壓縮從最初的版本版本停留在了過渡期。發(fā)現(xiàn)頁本質是所承載的內(nèi)容其實是想更有效的提供給用戶保險相關的認知信息,提升健康意識的目的。

現(xiàn)階段業(yè)務新增視頻需求、為了補齊同行競品中的通用功能,滿足用戶多場景訴求,需要重新對發(fā)現(xiàn)頁內(nèi)容重新梳理優(yōu)化。

1. 提煉問題

2. 任務路徑

二、設計策略

基于目前發(fā)現(xiàn)的問題和新增需求,通過內(nèi)部討論以及用戶回訪制定了以下設計策略。

1.用戶易理解的內(nèi)容

2.符合用戶的閱讀習慣

1. 內(nèi)容分層

從原有的頁面中不難發(fā)現(xiàn),目前頁面中有很多不同類型的內(nèi)容,而且輔助信息內(nèi)容過長,容易引起閱讀厭倦,導致大部分用戶其實對于這些內(nèi)容沒有一個準確的定位,且現(xiàn)有內(nèi)容欠缺規(guī)劃對于用戶查看效率低。我們需要提煉梳理出不同的各分類信息。

2. 結構搭建

基于這些問題,整個結構需要更直觀、易懂是降低用戶思考成本關鍵所在。我們通過將現(xiàn)內(nèi)容做出梳理分類,按照全部、每日資訊、保險干貨、健康養(yǎng)生的順序排列,保證用戶能更輕松、準確的觸達所需信息。并且根據(jù)業(yè)務需求和不同用戶瀏覽場景添加視頻內(nèi)容。

3. 視覺動線

先分析下原有的頁面中列表信息包括標題、左圖片、右輔助信息、左時間、右閱讀數(shù)量信息。整個視覺動線非常復雜這樣的閱讀非常影響用戶的閱讀體驗。

基于尼爾森的F型閱讀視線模型中用戶瀏覽頁面時從上到下、從左到右的順序來閱讀顯然現(xiàn)有頁面用戶瀏覽習慣與之相違背。

文章也好,圖文列表也罷首先要考慮用戶的閱讀的先后順序。讓用戶視線按照順序自然流暢的移動,能更好地傳達列表信息。相反若視線移動停頓、不斷折返會使用戶產(chǎn)生不必要的疲勞,也很難表達出設計目的。根據(jù)不同的設計,思考并正確引導視線移動方向,是為設計添彩的有力手段。

我們盡可能要讓列表中的圖文閱讀保持一致性。目前現(xiàn)有很多信息傳達為主的頁面中也是更傾向于通過文字優(yōu)先,而圖片作為輔助信息。其實圖片的視覺引導會大于文字的但是由于此頁面中除了特殊的圖片與文案標題相呼應大部分情況是不能專業(yè)性表達出內(nèi)容。所以圖片放在文字后面也是可包容的。再結合尼爾森的F型閱讀視線模型將現(xiàn)有列表修改為信息放在左邊圖片放在右邊,也更有利于用戶獲取信息。

4. 建立條理

1.信息的整理(理解設計的意圖、提取要素、正確布置是設計的第一步)/也可以理解為信息降噪

  • 這個工作可分為“理解”“提取”“布置”三步。
  • 第一步是“理解”階段考慮以什么樣的方式展現(xiàn)。
  • 第二步是“提取”這里首先要明確列表中什么是最重要的,根據(jù)重要程度進行排序。
  • 第三步是“布置”的階段。提取完元素之后,重新梳理信息層級。強化列表內(nèi)有效信息,刪除冗余信息,以便更有效的傳遞給用戶。

2.貼近和遠離 (將同類型要素貼近搭配,使整體頁面更容易閱讀)

讓用戶感覺整個頁面有條理其實并不困難。因為人們會下意識地想從看到的東西中找出某些條理或意思。這種被稱為“完形心理”的現(xiàn)象,主張研究直接經(jīng)驗(即意識)和行為,強調經(jīng)驗和行為的整體性,認為整體不等于并且大于部分之和,主張以整體的動力結構觀來研究心理現(xiàn)象。該心理學學派的創(chuàng)始人是韋特海默,代表人物還有苛勒和考夫卡。

3.排列和對齊 (將細節(jié)部分設計得整齊有序,為頁面帶來整潔、有條不紊的美感)

在先前文章中我們對首頁進行改版時已經(jīng)制定了柵格系統(tǒng),可以運用柵格系統(tǒng)來更有條理的排列元素間距,加強頁面閱讀一致性。

頁面中所展示的圖片來源于網(wǎng)絡,在此僅用于展示,學習用,不作為商業(yè)用途

通過用戶的閱讀順序(習慣)來做出相應的思考并正確引導視線移動方向。理清用戶更易理解的內(nèi)容來提升瀏覽效率。這種設計策略并非適用所有產(chǎn)品要看當下業(yè)務需求和用戶角度中尋找一個平衡點是相對關鍵的。以上就是本次分享的內(nèi)容了。希望對大家有幫助。

參考文獻:

《版面設計的原理》 伊達千代&內(nèi)藤孝彥 著

“完形心理” 即 格式塔心理學

尼爾森用戶體驗原則

資訊流到底該左文右圖還是左圖右文?

 

作者:KG? ?公眾號:KG的設計沉淀

本文由 @KG 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉載。

題圖來自Unsplash,基于CC0協(xié)議

更多精彩內(nèi)容,請關注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 文章表述清晰,圖文并茂,有理有據(jù)學習了

    來自吉林 回復
    1. ?? 一起加油~

      來自吉林 回復
  2. 寫的真好!感謝。

    來自江蘇 回復
    1. 謝謝支持 一起加油~

      來自吉林 回復
  3. 文章講的很詳細,也很全面,以后在實踐中再不斷練習

    回復
    1. 一起共同進步 ??

      來自香港 回復