使用者體驗設計:高效清晰的可視化設計

來源:互聯網
上載者:User

文章描述:圍繞著“快、明確、高效”的資訊傳遞定位,揭其根本從功能模組、任務流程、介面控制項元素、資訊承載等方面去提升體驗的有效性和合理性,設計中根據目標受眾的需求、行為,合理運用可視化方式,使產品更易用,提高使用者體驗。

每一天,人們都淹沒在資訊的海洋中。使用者在主動擷取和被動接受過程中,都始終避免不開一個“效率”的訴求。在這資訊海洋,使用者目前面對了什麼樣的困境呢?

1 一些設計細節的 “隱藏式”、“摺疊式”、“漸進式”設計消耗了使用者的快速認知訴求;

2 偏於複雜和龐大的功能,給介面呈現帶來了負擔,加重了使用者操作映射的錯亂,讓使用者理解也模稜兩可;

3 設計過多的操作點擊,使用者手部肌肉不停運動,切換不同頁面去查看;

……

作為資訊傳達的設計師,如何讓資訊更直觀清晰、剔除不確定性理解,是工作中的重中之重。而“可視化”就是多種高效傳遞資訊方式中的一種,對於資訊可視化、視覺化、圖形化,也成了設計圈熱捧的觀點和研究方向。

對於產品的可視化設計,主要旨在藉助於圖形化等直觀手段,清晰有效地傳達與溝通訊息,形成高效的功能、使用映射,完成使用者任務目標。為使用者想完成的任務選擇正確的介面元素,通過一種能迅速理解和便於使用的表達方式,展現在頁面上,降低使用者的認知負擔和物理負擔。大概分為四個層次:功能可視化、結構可視化、操作可視化、控制項可視化。

功能可視化:即確定需求優先順序的前提下,確保優先順序高的功能展現給使用者,讓使用者易於識別和尋找,使設計有正確的階層。使用者對資訊層次的理解需要兩個過程,首先是快速捕捉,其次是對具體內容更詳細的理解。在快速捕捉階段,其過程中時間跨度短暫,通過顏色、對比、定位等運用,突出產品的主要功能點。例如圖1韓國著名門戶/搜尋引擎網站Naver旗下的Naver Shopping,其產品定位即供應商品的搜尋服務,通過搜尋商品名稱,可以按照商品類別列出幾乎韓國所有的大型電子商務網站提供的該商品連結。所以在介面上,用強對比色調突出搜尋功能和導航區。通過視覺化引導,讓使用者專註於核心內容,聚焦使用者視線的焦點,在白色為主色調的頁面,視線會先看到強色調的部分,所以也可以用強色調來突出核心內容,讓使用者的視覺聚焦在那裡。

結構可視化:即採用使用者易於理解的結構,讓使用者對於介面元素關係清晰。如百度統計3.0的搜尋推廣效果查看,結構採用了漏鬥的圖形方式,達到真正的圖表於意,表達轉化率的概念,形象直觀。

流程可視化:即讓使用者在操作時不要迷失方向,協助使用者定位,避免不明確操作的高成本。美國益智遊戲網站Lumosity,在建立定製化大腦訓練計劃時的流程時,頂部採用步驟軸的圖形化方式,不僅用表徵圖“紅圈”表明了使用者所在的位置,也用表徵圖“對號”標明了使用者完成了哪些步驟,讓使用者對於整個流程熟悉。

控制項可視化:由於控制項是產品的最小介面元素,是產品品質的基礎,所以本文重點與大家分享基礎控制項的一些可視化案例。

控制項是建立介面的主要構造模組,是使用者可與之互動以輸入或操作資料的最直接對象。控制項需要使用者消耗大量的注意力和滑鼠操作,從可視化角度,樣本以下四個元素的設計區別:

控制項元素一:單選框

單選框(Radio Button),又叫選項按鈕或選項按鈕,它容許使用者在一組選項中選擇並且只能其中一個時使用的控制項形式,選項之間彼此互斥。

圖4某產品介面,控制項單選框使用錯誤,同時使用者必須在腦中想象空間位置,再轉化為對應文字,點擊兩次,輸入兩次,才能完成。

圖5修改後採用圖形化表達,直觀,並且減少使用者的點擊次數(一次);當使用者輸入邊距時,在圖形中對應的邊距會出現動態三角,給予使用者引導,防止使用者輸錯。

控制項元素二:下拉式清單控制項

下拉式清單(Drop-down List)相對於單選框,同時用於從一組互斥值列表中進行選擇一個選項,不同的是下拉式清單的按鈕數量通常較多。

圖6為新藥品查詢系統的下拉式清單篩選控制項,通過藥品形狀、顏色、類型等進行篩選,對於使用者來說,認知成本較高,不夠形象化。

圖7Naver的醫學藥品的尋找篩選控制項,將品牌、藥品形狀、顏色、藥品材質、藥面紋理等通過圖形化表達,使資訊更直觀、形式更有趣,增強使用者的認知能力,提升操作效率,集合了趣味性與實用性。一圖勝千言,但同時要平衡空間佔用和頁面載入成本等因素。

控制項元素三:樹形控制項

樹型控制項是供使用者瀏覽按分層方式排列的內容,並可與這些內容互動,進行單選或多選的控制項。

圖8淘寶商城_廚房用具二級頁的樹形篩選控制項,比如使用者要尋找高壓鍋,對於一般新手使用者,會來回點擊廚房/餐飲用具的子分類,展開子分類,然後掃視每行字是否有高壓鍋,直到確認找到。樹形控制項承載的資訊越多,認知的負擔就會越重,瀏覽尋找越困難。新手使用者可能無法完全理解樹的布局,只有當他們在對樹操作一段時間之後可能會形成一個關於其關係的心理模型,成本較高。

圖9 Naver Shopping_廚房用具二級頁的分類篩選,採用了表徵圖加文字的形式,同樣是尋找高壓鍋,雖然是韓語,但是恰當的使用具象化表徵圖,使使用者基本上看懂,可以縮短使用者操作時間,讓使用者更快捷地找到目標連結。對於中進階使用者,對網站更加熟悉後,表徵圖就更方便了。

與軟體的設計主要針對中間級使用者的不同,web介面設計需要針對新手及初級使用者。使用者在網站上願意為之所付出的學習成本更低,更加缺乏耐心,則web介面需要更直接,讓使用者認知過程更短。而文字本身並沒有視覺傳達功能,恰當的使用表徵圖,把要表述的功能可視化呈現給使用者,可以縮短使用者操作時間,往往效果更好。但也要根據使用者效率,否則會成為雞肋。

控制項元素四:列表視圖

列表視圖(List View)是一個顯示項目集合的擴充列表框控制項,用於通過單選或多選的方式,查看並操作一個資料對象集合。

圖10 SNS常用的好友分組和管理,採用列表的方式,列表目錄清晰,但使用者對其的選擇管理成本稍大,特別是對於批量管理複雜。

圖11 google+“圈子”,查看更直觀,批量管理操作也更簡單,通過拖拽方式對使用者分組,強調對好友的少層級管理,保證頁面簡潔,讓體驗變得有趣而可愛,更符合使用者的心理模型。

總之,圍繞著“快、明確、高效”的資訊傳遞定位,揭其根本從功能模組、任務流程、介面控制項元素、資訊承載等方面去提升體驗的有效性和合理性,設計中根據目標受眾的需求、行為,合理運用可視化方式,使產品更易用,提高使用者體驗。



相關文章

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 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。