高效的設(shè)計(jì)可視化
每一天,人們都淹沒在信息的海洋中。用戶在主動(dòng)獲取和被動(dòng)接受過程中,都始終避免不開一個(gè)“效率”的訴求。在這信息海洋,用戶目前面對(duì)了什么樣的困境呢?
- 一些設(shè)計(jì)細(xì)節(jié)的 “隱藏式”、“折疊式”、“漸進(jìn)式”設(shè)計(jì)消耗了用戶的快速認(rèn)知訴求;
- 偏于復(fù)雜和龐大的功能,給界面呈現(xiàn)帶來了負(fù)擔(dān),加重了用戶操作映射的錯(cuò)亂,讓用戶理解也模棱兩可;
- 設(shè)計(jì)過多的操作點(diǎn)擊,用戶手部肌肉不停運(yùn)動(dòng),切換不同頁面去查看;
??
作為信息傳達(dá)的設(shè)計(jì)師,如何讓信息更直觀清晰、剔除不確定性理解,是工作中的重中之重。而“可視化”就是多種高效傳遞信息方式中的一種,對(duì)于信息可視化、視覺化、圖形化,也成了設(shè)計(jì)圈熱捧的觀點(diǎn)和研究方向。
對(duì)于產(chǎn)品的可視化設(shè)計(jì),主要旨在借助于圖形化等直觀手段,清晰有效地傳達(dá)與溝通信息,形成高效的功能、使用映射,完成用戶任務(wù)目標(biāo)。為用戶想完成的任務(wù)選擇正確的界面元素,通過一種能迅速理解和易于使用的表達(dá)方式,展現(xiàn)在頁面上,降低用戶的認(rèn)知負(fù)擔(dān)和物理負(fù)擔(dān)。大概分為四個(gè)層次:功能可視化、結(jié)構(gòu)可視化、操作可視化、控件可視化。
功能可視化:即確定需求優(yōu)先級(jí)的前提下,確保優(yōu)先級(jí)高的功能展現(xiàn)給用戶,讓用戶易于識(shí)別和查找,使設(shè)計(jì)有正確的層次結(jié)構(gòu)。用戶對(duì)信息層次的理解需要兩個(gè)過程,首先是快速捕捉,其次是對(duì)具體內(nèi)容更詳細(xì)的理解。在快速捕捉階段,其過程中時(shí)間跨度短暫,通過顏色、對(duì)比、定位等運(yùn)用,突出產(chǎn)品的主要功能點(diǎn)。例如圖1韓國(guó)著名門戶/搜索引擎網(wǎng)站Naver旗下的Naver Shopping,其產(chǎn)品定位即提供商品的搜索服務(wù),通過搜索商品名稱,可以按照商品類別列出幾乎韓國(guó)所有的大型電子商務(wù)網(wǎng)站提供的該商品鏈接。所以在界面上,用強(qiáng)對(duì)比色調(diào)突出搜索功能和導(dǎo)航區(qū)。通過視覺化引導(dǎo),讓用戶專注于核心內(nèi)容,聚焦用戶視線的焦點(diǎn),在白色為主色調(diào)的頁面,視線會(huì)先看到強(qiáng)色調(diào)的部分,所以也可以用強(qiáng)色調(diào)來突出核心內(nèi)容,讓用戶的視覺聚焦在那里。
結(jié)構(gòu)可視化:即采用用戶易于理解的結(jié)構(gòu),讓用戶對(duì)于界面元素關(guān)系清晰。如百度統(tǒng)計(jì)3.0的搜索推廣效果查看,結(jié)構(gòu)采用了漏斗的圖形方式,達(dá)到真正的圖表于意,表達(dá)轉(zhuǎn)化率的概念,形象直觀。
流程可視化:即讓用戶在操作時(shí)不要迷失方向,幫助用戶定位,避免不明確操作的高成本。美國(guó)益智游戲網(wǎng)站Lumosity,在建立定制化大腦訓(xùn)練計(jì)劃時(shí)的流程時(shí),頂部采用步驟軸的圖形化方式,不僅用圖標(biāo)“紅圈”表明了用戶所在的位置,也用圖標(biāo)“對(duì)號(hào)”標(biāo)明了用戶完成了哪些步驟,讓用戶對(duì)于整個(gè)流程熟悉。
控件可視化:由于控件是產(chǎn)品的最小界面元素,是產(chǎn)品質(zhì)量的基礎(chǔ),所以本文重點(diǎn)與大家分享基礎(chǔ)控件的一些可視化案例。
控件是創(chuàng)建界面的主要構(gòu)造模塊,是用戶可與之交互以輸入或操作數(shù)據(jù)的最直接對(duì)象??丶枰脩粝拇罅康淖⒁饬褪髽?biāo)操作,從可視化角度,示例以下四個(gè)元素的設(shè)計(jì)區(qū)別:
控件元素一:?jiǎn)芜x框
單選框(Radio Button),又叫選項(xiàng)按鈕或單選按鈕,它容許用戶在一組選項(xiàng)中選擇并且只能其中一個(gè)時(shí)使用的控件形式,選項(xiàng)之間彼此互斥。
圖4某產(chǎn)品界面,控件單選框使用錯(cuò)誤,同時(shí)用戶必須在腦中想象空間位置,再轉(zhuǎn)化為對(duì)應(yīng)文字,點(diǎn)擊兩次,輸入兩次,才能完成。
圖5修改后采用圖形化表達(dá),直觀,并且減少用戶的點(diǎn)擊次數(shù)(一次);當(dāng)用戶輸入邊距時(shí),在圖形中對(duì)應(yīng)的邊距會(huì)出現(xiàn)動(dòng)態(tài)三角,給予用戶引導(dǎo),防止用戶輸錯(cuò)。
控件元素二:下拉列表控件
下拉列表(Drop-down List)相對(duì)于單選框,同時(shí)用于從一組互斥值列表中進(jìn)行選擇一個(gè)選項(xiàng),不同的是下拉列表的按鈕數(shù)量通常較多。
圖6為新藥品查詢系統(tǒng)的下拉列表篩選控件,通過藥品形狀、顏色、類型等進(jìn)行篩選,對(duì)于用戶來說,認(rèn)知成本較高,不夠形象化。
圖7Naver的醫(yī)療藥品的查找篩選控件,將品牌、藥品形狀、顏色、藥品材質(zhì)、藥面紋理等通過圖形化表達(dá),使信息更直觀、形式更有趣,增強(qiáng)用戶的認(rèn)知能力,提升操作效率,集合了趣味性與實(shí)用性。一圖勝千言,但同時(shí)要平衡空間占用和頁面加載成本等因素。
控件元素三:樹形控件
樹型控件是供用戶瀏覽按分層方式排列的內(nèi)容,并可與這些內(nèi)容互動(dòng),進(jìn)行單選或多選的控件。
圖8淘寶商城_廚房用具二級(jí)頁的樹形篩選控件,比如用戶要查找高壓鍋,對(duì)于一般新手用戶,會(huì)來回點(diǎn)擊廚房/餐飲用具的子分類,展開子分類,然后掃視每行字是否有高壓鍋,直到確認(rèn)找到。樹形控件承載的信息越多,認(rèn)知的負(fù)擔(dān)就會(huì)越重,瀏覽查找越困難。新手用戶可能無法完全理解樹的布局,只有當(dāng)他們?cè)趯?duì)樹操作一段時(shí)間之后可能會(huì)形成一個(gè)關(guān)于其關(guān)系的心理模型,成本較高。
圖9 Naver Shopping_廚房用具二級(jí)頁的分類篩選,采用了圖標(biāo)加文字的形式,同樣是查找高壓鍋,雖然是韓語,但是恰當(dāng)?shù)氖褂镁呦蠡瘓D標(biāo),使用戶基本上看懂,可以縮短用戶操作時(shí)間,讓用戶更快捷地找到目標(biāo)鏈接。對(duì)于中高級(jí)用戶,對(duì)網(wǎng)站更加熟悉后,圖標(biāo)就更方便了。
與軟件的設(shè)計(jì)主要針對(duì)中間級(jí)用戶的不同,web界面設(shè)計(jì)需要針對(duì)新手及初級(jí)用戶。用戶在網(wǎng)站上愿意為之所付出的學(xué)習(xí)成本更低,更加缺乏耐心,則web界面需要更直接,讓用戶認(rèn)知過程更短。而文字本身并沒有視覺傳達(dá)功能,恰當(dāng)?shù)氖褂脠D標(biāo),把要表述的功能可視化呈現(xiàn)給用戶,可以縮短用戶操作時(shí)間,往往效果更好。但也要根據(jù)用戶效率,否則會(huì)成為雞肋。
控件元素四:列表視圖
列表視圖(List View)是一個(gè)顯示項(xiàng)目集合的擴(kuò)展列表框控件,用于通過單選或多選的方式,查看并操作一個(gè)數(shù)據(jù)對(duì)象集合。
圖10 SNS常用的好友分組和管理,采用列表的方式,列表目錄清晰,但用戶對(duì)其的選擇管理成本稍大,特別是對(duì)于批量管理復(fù)雜。
圖11 google+“圈子”,查看更直觀,批量管理操作也更簡(jiǎn)單,通過拖拽方式對(duì)用戶分組,強(qiáng)調(diào)對(duì)好友的少層級(jí)管理,保證頁面簡(jiǎn)潔,讓體驗(yàn)變得有趣而可愛,更符合用戶的心理模型。
總之,圍繞著“快、明確、高效”的信息傳遞定位,揭其根本從功能模塊、任務(wù)流程、界面控件元素、信息承載等方面去提升體驗(yàn)的有效性和合理性,設(shè)計(jì)中根據(jù)目標(biāo)受眾的需求、行為,合理運(yùn)用可視化方式,使產(chǎn)品更易用,提高用戶體驗(yàn)。
來源:UEO
- 目前還沒評(píng)論,等你發(fā)揮!