從功能、結(jié)構(gòu)、操作到控件,闡述信息可視化的四層階梯

0 評(píng)論 6800 瀏覽 4 收藏 11 分鐘

思考來(lái)源

每一天,人們都淹沒(méi)在信息的海洋中。用戶(hù)在主動(dòng)獲取和被動(dòng)接受過(guò)程中,都始終避免不開(kāi)一個(gè)“效率”的訴求。在這信息海洋,用戶(hù)目前面對(duì)了什么樣的困境呢?

1 一些設(shè)計(jì)細(xì)節(jié)的 “隱藏式”、“折疊式”、“漸進(jìn)式”設(shè)計(jì)消耗了用戶(hù)的快速認(rèn)知訴求;
2 偏于復(fù)雜和龐大的功能,給界面呈現(xiàn)帶來(lái)了負(fù)擔(dān),加重了用戶(hù)操作映射的錯(cuò)亂,讓用戶(hù)理解也模棱兩可;
3 設(shè)計(jì)過(guò)多的操作點(diǎn)擊,用戶(hù)手部肌肉不停運(yùn)動(dòng),切換不同頁(yè)面去查看;
……

作為信息傳達(dá)的設(shè)計(jì)師,如何讓信息更直觀清晰、剔除不確定性理解,是工作中的重中之重。而“可視化”就是多種高效傳遞信息方式中的一種,對(duì)于信息可視化、視覺(jué)化、圖形化,也成了設(shè)計(jì)圈熱捧的觀點(diǎn)和研究方向。

可視化概述

對(duì) 于產(chǎn)品的可視化設(shè)計(jì),主要旨在借助于圖形化等直觀手段,清晰有效地傳達(dá)與溝通信息,形成高效的功能、使用映射,完成用戶(hù)任務(wù)目標(biāo)。為用戶(hù)想完成的任務(wù)選擇 正確的界面元素,通過(guò)一種能迅速理解和易于使用的表達(dá)方式,展現(xiàn)在頁(yè)面上,降低用戶(hù)的認(rèn)知負(fù)擔(dān)和物理負(fù)擔(dān)。大概分為四個(gè)層次:功能可視化、結(jié)構(gòu)可視化、操 作可視化、控件可視化。

功能可視化:即 確定需求優(yōu)先級(jí)的前提下,確保優(yōu)先級(jí)高的功能展現(xiàn)給用戶(hù),讓用戶(hù)易于識(shí)別和查找,使設(shè)計(jì)有正確的層次結(jié)構(gòu)。用戶(hù)對(duì)信息層次的理解需要兩個(gè)過(guò)程,首先是快速 捕捉,其次是對(duì)具體內(nèi)容更詳細(xì)的理解。在快速捕捉階段,其過(guò)程中時(shí)間跨度短暫,通過(guò)顏色、對(duì)比、定位等運(yùn)用,突出產(chǎn)品的主要功能點(diǎn)。例如圖1韓國(guó)著名門(mén)戶(hù) /搜索引擎網(wǎng)站Naver旗下的Naver Shopping,其產(chǎn)品定位即提供商品的搜索服務(wù),通過(guò)搜索商品名稱(chēng),可以按照商品類(lèi)別列出幾乎韓國(guó)所有的大型電子商務(wù)網(wǎng)站提供的該商品鏈接。所以在界 面上,用強(qiáng)對(duì)比色調(diào)突出搜索功能和導(dǎo)航區(qū)。通過(guò)視覺(jué)化引導(dǎo),讓用戶(hù)專(zhuān)注于核心內(nèi)容,聚焦用戶(hù)視線(xiàn)的焦點(diǎn),在白色為主色調(diào)的頁(yè)面,視線(xiàn)會(huì)先看到強(qiáng)色調(diào)的部 分,所以也可以用強(qiáng)色調(diào)來(lái)突出核心內(nèi)容,讓用戶(hù)的視覺(jué)聚焦在那里。

 

結(jié)構(gòu)可視化:即采用用戶(hù)易于理解的結(jié)構(gòu),讓用戶(hù)對(duì)于界面元素關(guān)系清晰。如百度統(tǒng)計(jì)3.0的搜索推廣效果查看,結(jié)構(gòu)采用了漏斗的圖形方式,達(dá)到真正的圖表于意,表達(dá)轉(zhuǎn)化率的概念,形象直觀。

 

 

流程可視化:即 讓用戶(hù)在操作時(shí)不要迷失方向,幫助用戶(hù)定位,避免不明確操作的高成本。美國(guó)益智游戲網(wǎng)站Lumosity,在建立定制化大腦訓(xùn)練計(jì)劃時(shí)的流程時(shí),頂部采用 步驟軸的圖形化方式,不僅用圖標(biāo)“紅圈”表明了用戶(hù)所在的位置,也用圖標(biāo)“對(duì)號(hào)”標(biāo)明了用戶(hù)完成了哪些步驟,讓用戶(hù)對(duì)于整個(gè)流程熟悉。

 

 

控件可視化:由于控件是產(chǎn)品的最小界面元素,是產(chǎn)品質(zhì)量的基礎(chǔ),所以本文重點(diǎn)與大家分享基礎(chǔ)控件的一些可視化案例。

控件可視化

控件是創(chuàng)建界面的主要構(gòu)造模塊,是用戶(hù)可與之交互以輸入或操作數(shù)據(jù)的最直接對(duì)象??丶枰脩?hù)消耗大量的注意力和鼠標(biāo)操作,從可視化角度,示例以下四個(gè)元素的設(shè)計(jì)區(qū)別:

控件元素一:?jiǎn)芜x框

單選框(Radio Button),又叫選項(xiàng)按鈕或單選按鈕,它容許用戶(hù)在一組選項(xiàng)中選擇并且只能其中一個(gè)時(shí)使用的控件形式,選項(xiàng)之間彼此互斥。
圖4某產(chǎn)品界面,控件單選框使用錯(cuò)誤,同時(shí)用戶(hù)必須在腦中想象空間位置,再轉(zhuǎn)化為對(duì)應(yīng)文字,點(diǎn)擊兩次,輸入兩次,才能完成。
圖5修改后采用圖形化表達(dá),直觀,并且減少用戶(hù)的點(diǎn)擊次數(shù)(一次);當(dāng)用戶(hù)輸入邊距時(shí),在圖形中對(duì)應(yīng)的邊距會(huì)出現(xiàn)動(dòng)態(tài)三角,給予用戶(hù)引導(dǎo),防止用戶(hù)輸錯(cuò)。

控件元素二:下拉列表控件

下拉列表(Drop-down List)相對(duì)于單選框,同時(shí)用于從一組互斥值列表中進(jìn)行選擇一個(gè)選項(xiàng),不同的是下拉列表的按鈕數(shù)量通常較多。

圖6為新藥品查詢(xún)系統(tǒng)的下拉列表篩選控件,通過(guò)藥品形狀、顏色、類(lèi)型等進(jìn)行篩選,對(duì)于用戶(hù)來(lái)說(shuō),認(rèn)知成本較高,不夠形象化。

圖7Naver的醫(yī)療藥品的查找篩選控件,將品牌、藥品形狀、顏色、藥品材質(zhì)、藥面紋理等通過(guò)圖形化表達(dá),使信息更直觀、形式更有趣,增強(qiáng)用戶(hù)的認(rèn)知能力,提升操作效率,集合了趣味性與實(shí)用性。一圖勝千言,但同時(shí)要平衡空間占用和頁(yè)面加載成本等因素。


控件元素三:樹(shù)形控件

樹(shù)型控件是供用戶(hù)瀏覽按分層方式排列的內(nèi)容,并可與這些內(nèi)容互動(dòng),進(jìn)行單選或多選的控件。

圖 8淘寶商城_廚房用具二級(jí)頁(yè)的樹(shù)形篩選控件,比如用戶(hù)要查找高壓鍋,對(duì)于一般新手用戶(hù),會(huì)來(lái)回點(diǎn)擊廚房/餐飲用具的子分類(lèi),展開(kāi)子分類(lèi),然后掃視每行字是 否有高壓鍋,直到確認(rèn)找到。樹(shù)形控件承載的信息越多,認(rèn)知的負(fù)擔(dān)就會(huì)越重,瀏覽查找越困難。新手用戶(hù)可能無(wú)法完全理解樹(shù)的布局,只有當(dāng)他們?cè)趯?duì)樹(shù)操作一段 時(shí)間之后可能會(huì)形成一個(gè)關(guān)于其關(guān)系的心理模型,成本較高。

圖9 Naver Shopping_廚房用具二級(jí)頁(yè)的分類(lèi)篩選,采用了圖標(biāo)加文字的形式,同樣是查找高壓鍋,雖然是韓語(yǔ),但是恰當(dāng)?shù)氖褂镁呦蠡瘓D標(biāo),使用戶(hù)基本上看懂,可 以縮短用戶(hù)操作時(shí)間,讓用戶(hù)更快捷地找到目標(biāo)鏈接。對(duì)于中高級(jí)用戶(hù),對(duì)網(wǎng)站更加熟悉后,圖標(biāo)就更方便了。

與 軟件的設(shè)計(jì)主要針對(duì)中間級(jí)用戶(hù)的不同,web界面設(shè)計(jì)需要針對(duì)新手及初級(jí)用戶(hù)。用戶(hù)在網(wǎng)站上愿意為之所付出的學(xué)習(xí)成本更低,更加缺乏耐心,則web界面需 要更直接,讓用戶(hù)認(rèn)知過(guò)程更短。而文字本身并沒(méi)有視覺(jué)傳達(dá)功能,恰當(dāng)?shù)氖褂脠D標(biāo),把要表述的功能可視化呈現(xiàn)給用戶(hù),可以縮短用戶(hù)操作時(shí)間,往往效果更好。 但也要根據(jù)用戶(hù)效率,否則會(huì)成為雞肋。

控件元素四:列表視圖

列表視圖(List View)是一個(gè)顯示項(xiàng)目集合的擴(kuò)展列表框控件,用于通過(guò)單選或多選的方式,查看并操作一個(gè)數(shù)據(jù)對(duì)象集合。

圖10 SNS常用的好友分組和管理,采用列表的方式,列表目錄清晰,但用戶(hù)對(duì)其的選擇管理成本稍大,特別是對(duì)于批量管理復(fù)雜。

圖11 google+“圈子”,查看更直觀,批量管理操作也更簡(jiǎn)單,通過(guò)拖拽方式對(duì)用戶(hù)分組,強(qiáng)調(diào)對(duì)好友的少層級(jí)管理,保證頁(yè)面簡(jiǎn)潔,讓體驗(yàn)變得有趣而可愛(ài),更符合用戶(hù)的心理模型。

總之,圍繞著“快、明確、高效”的信息傳遞定位,揭其根本從功能模塊、任務(wù)流程、界面控件元素、信息承載等方面去提升體驗(yàn)的有效性和合理性,設(shè)計(jì)中根據(jù)目標(biāo)受眾的需求、行為,合理運(yùn)用可視化方式,使產(chǎn)品更易用,提高用戶(hù)體驗(yàn)。

 

原文來(lái)自:互聯(lián)網(wǎng)分析沙龍

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒(méi)評(píng)論,等你發(fā)揮!