通過合理的指示元素引導(dǎo)用戶發(fā)現(xiàn)隱藏內(nèi)容
來源:網(wǎng)站推廣 2012-06-01
天氣甚好,不冷不熱,微困。搞掉這篇就上房頂子發(fā)發(fā)呆。如果哪位覺得今次的圖標(biāo)有些許驚悚的話,歡迎在評論中吐槽,或者直接在微博上跟我念叨。
之前連續(xù)更新了兩章iOS Wow體驗(yàn),分別是關(guān)于應(yīng)用上下文環(huán)境以及iOS技術(shù)特性這兩方面的話題。今天換換腦子吧,放下移動應(yīng)用這攤子事,回到Web端,遛一篇圖文并茂篇幅簡短的小譯文,關(guān)于隱藏內(nèi)容及相應(yīng)的提示元素使用方式blah blah的。走著。
標(biāo)簽(Tab)、下拉菜單、手風(fēng)琴風(fēng)格的折疊控件…漸進(jìn)呈現(xiàn)(progressive disclosure)的交互方式可以有效的幫助我們降低界面的視覺復(fù)雜度,同時(shí)盡可能多的向用戶展示內(nèi)容。
不過凡事有利亦有弊,在視覺上不可見的東西確實(shí)很有可能被用戶所忽略掉。因此,把界面元素隱藏起來還不算完,我們必須通過一些恰當(dāng)?shù)姆绞较蛴脩暨M(jìn)行提示,讓他們意識到隱藏元素的存在。
用戶的預(yù)期
這里所說的預(yù)期,是指用戶對自己能否在站點(diǎn)中找到隱藏元素所做出的假設(shè)和預(yù)判。如果用戶認(rèn)為某些內(nèi)容一定是藏在什么地方的,他們就會主動的進(jìn)行尋找;反之,他們也有可能受到一些因素的影響,過早的認(rèn)定那些內(nèi)容根本不存在。
在購物網(wǎng)站中,多數(shù)用戶認(rèn)為自己能夠并且應(yīng)該獲取到商品詳情、退換政策、運(yùn)費(fèi)等方面的信息。在這種預(yù)期的作用下,即使那些內(nèi)容并沒有直截了當(dāng)?shù)某尸F(xiàn)出來,他們也會主動尋找。
另一方面,諸如用戶點(diǎn)評、額外的商品圖片集、視頻演示等附加內(nèi)容并非是所有購物網(wǎng)站的標(biāo)配,如果它們在默認(rèn)狀態(tài)下是不可見的,那么對于那些不熟悉該站點(diǎn)的用戶來說,通常不會花費(fèi)太多時(shí)間進(jìn)行尋找,因?yàn)樵谒麄兊念A(yù)期中,這些內(nèi)容可能就是不存在的。
用戶的預(yù)期取決于他們長久以來的認(rèn)知和行為習(xí)慣。作為設(shè)計(jì)師,如果不能確保用戶會從主觀上積極主動的尋找隱藏元素,我們就要借助可視化的觸發(fā)指示,引導(dǎo)他們獲取更多的內(nèi)容。
觸發(fā)指示
任何一種對隱藏內(nèi)容的存在起到提示作用的界面元素都可以被稱為觸發(fā)指示。它們大致分為五類:
1.方向與空間
具有指向性的界面元素通常可以用于對隱藏內(nèi)容的指示。方向指示(directional indicator)的視覺表現(xiàn)形式能夠很準(zhǔn)確的描繪出虛擬空間當(dāng)中位置及移動的概念,符合用戶直覺。
此外,方向指示本身通常會以圖標(biāo)的形式存在,這也使得后面的文字標(biāo)題在用戶看來具有更強(qiáng)的可點(diǎn)擊性,進(jìn)一步增強(qiáng)了隱藏內(nèi)容被發(fā)現(xiàn)的可能性。
在Fox的主導(dǎo)航當(dāng)中,前兩個(gè)菜單項(xiàng)會各自觸發(fā)一個(gè)“大數(shù)據(jù)量菜單”的展開(mega menu,趕上這種已然約定俗成的詞兒我是真心不想翻成中文——譯者C7210注),其中作為觸發(fā)指示的正是標(biāo)題文字后面的下三角圖標(biāo)。這類元素從視覺上來看是很微小的,但它們對于用戶能否正確領(lǐng)會頁面的交互方式卻是至關(guān)重要的。
空間指示(spatial indicators)與方向指示具有比較密切的相關(guān)性。在這種模式中,通常會有一個(gè)“高亮”的界面元素向用戶提示當(dāng)前所處的位置或是已做過的選擇,而其他那些處于普通狀態(tài)的同級別導(dǎo)航元素則暗示著當(dāng)前區(qū)域當(dāng)中有更多內(nèi)容可以被發(fā)現(xiàn)。
分頁控件是一個(gè)比較典型的例子,這種模式可以很直白的讓用戶知道自己看過多少內(nèi)容、現(xiàn)在正處于怎樣的位置、接下來還有多少東西可看。另外,導(dǎo)航菜單中的“當(dāng)前”狀態(tài)標(biāo)識,以及瀏覽器的滾動條等等,從本質(zhì)上講都屬于空間指示。
2.隱喻
隱喻是一種非常有效的引導(dǎo)方式。例如,將用戶界面設(shè)計(jì)成為書籍或雜志的樣式,在交互方式上也模擬真實(shí)的物理效果。通過這種高度隱喻化的表現(xiàn)形式來承載在線內(nèi)容,可以讓用戶會很自然的去瀏覽那些在當(dāng)前可視區(qū)域“后面”的東西,就像在現(xiàn)實(shí)中看書那樣。
隱喻的方式確實(shí)非常符合用戶的直覺及預(yù)期;作為設(shè)計(jì)師,我們必須確保擬真界面的外觀和交互方式能夠準(zhǔn)確的體現(xiàn)出真實(shí)物體的視覺及物理特性。不過,由于技術(shù)等客觀條件所限,真實(shí)物體的行為規(guī)律未必能夠被準(zhǔn)確的還原到網(wǎng)頁當(dāng)中,我們需要在選擇設(shè)計(jì)方案的時(shí)候?qū)@方面的問題加以考慮。
3.圖標(biāo)
圖標(biāo)可以使觸發(fā)指示元素在整個(gè)頁面當(dāng)中以相對凸顯的方式呈現(xiàn)出來,例如Macy在“Reviews”標(biāo)簽中所使用的星級圖標(biāo)。
圖標(biāo)一類的視覺元素可以使平淡枯燥的文字內(nèi)容具有更強(qiáng)的可辨識性,進(jìn)而引導(dǎo)用戶發(fā)現(xiàn)附近的隱藏元素。不過這類做法也具有一定的風(fēng)險(xiǎn),有時(shí)它們吸引到的注意力太多了,以至于使用戶忽略掉了其他的重要信息。
4.漸變褪色
我們還可以通過改變內(nèi)容自身外觀的方式來指示更多的隱藏內(nèi)容,而不必使用圖標(biāo)一類的可視化界面元素作為觸發(fā)指示。其中最典型的方法就是為內(nèi)容文字設(shè)置漸變褪色效果,Amazon的商品描述頁面當(dāng)中就使用了這種方式。
逐漸褪色的文字可以很有效的吸引用戶的注意力,并促使他們探索更多內(nèi)容。配合可視化的觸發(fā)指示元素,例如“ Show More”文字鏈接及相關(guān)的圖標(biāo),這種引導(dǎo)效果就會進(jìn)一步的增強(qiáng)。
5.短暫呈現(xiàn)
所謂短暫呈現(xiàn),是指我們可以策略性的讓內(nèi)容在一個(gè)時(shí)間段內(nèi)保持可見。例如,在購物網(wǎng)站的商品詳情頁面中,當(dāng)頁面完成加載后,完整的商品描述內(nèi)容可以在短時(shí)間內(nèi)保持呈現(xiàn)狀態(tài),然后通過動畫方式收起,并在內(nèi)容最終消失的位置提供一個(gè)可視的觸發(fā)指示元素,這樣用戶就很清楚有哪些內(nèi)容被隱藏了起來,當(dāng)他們需要獲取相關(guān)信息的時(shí)候,可以到哪里去找到這些內(nèi)容。當(dāng)然,這種模式的實(shí)現(xiàn)當(dāng)中有一個(gè)重要的前提,那就是用戶必須注意到了內(nèi)容消失的過程及相應(yīng)的動畫效果。
關(guān)于短暫呈現(xiàn),另外一個(gè)典型的例子就是輪播。在這種模式中,多項(xiàng)內(nèi)容會依次呈現(xiàn)一段時(shí)間;這樣不僅能夠讓用戶了解到更多內(nèi)容的存在,更重要的是,它們會“主動”的顯現(xiàn)出來,用戶無需執(zhí)行任何交互操作就可以獲取到完整的信息。
最佳實(shí)踐
我們對五類觸發(fā)指示進(jìn)行了大致的了解。光是這樣還欠點(diǎn)兒火候,更重要的是,我們必須知道在實(shí)際工作中以怎樣的方式、怎樣的程度來使用這些觸發(fā)指示,因?yàn)檫@類元素或多或少會為界面整體帶來一定的視覺噪音,搞不好會使整個(gè)界面變得相當(dāng)凌亂,不僅不能有效的起到提示作用,反而會影響用戶對于其他內(nèi)容和功能的瀏覽使用。我建議大家在實(shí)踐中首先對以下四個(gè)方面的問題進(jìn)行考慮:
確定隱藏內(nèi)容的重要程度,判斷它們對于轉(zhuǎn)化率的提升能夠起到多大的作用,它們是否只是對于某種特定類型的用戶才有意義。
確定這些內(nèi)容被瀏覽的頻率,通過統(tǒng)計(jì)工具查看能夠?yàn)g覽到這些內(nèi)容的用戶所占的百分比。
判斷用戶對于隱藏內(nèi)容的預(yù)期,通過用研來了解用戶在特定的界面當(dāng)中最希望獲取哪些方面的信息。
匯總前三個(gè)方面的分析結(jié)果,判斷是否有必要使用“隱藏內(nèi)容+觸發(fā)指示”的模式。如果確實(shí)需要,那么指示元素采用怎樣的視覺表現(xiàn)形式更加得當(dāng);會吸引更多注意力的輪播動畫?還是視覺效果相對較弱的漸變褪色?
如果你確定隱藏內(nèi)容確實(shí)非常重要(1),但當(dāng)前的瀏覽量很低(2),而且用戶的預(yù)期當(dāng)中并沒有包含這些內(nèi)容(3),那么你就應(yīng)該考慮對觸發(fā)指示元素進(jìn)行調(diào)整了,看看能否讓它們吸引到用戶更多的注意力;抑或是這些內(nèi)容根本就不應(yīng)該隱藏起來。
本站原創(chuàng)編譯文章。如需轉(zhuǎn)載,請注明:本文來自Be For Web
英文原文:
baymard.com/blog/trigger-indicators
譯者信息: c7210 – 用戶體驗(yàn)設(shè)計(jì)與前端玩家,現(xiàn)就職于大眾點(diǎn)評網(wǎng)產(chǎn)品部UED
文章編輯: 365webcall客服軟件(www.365webcall.com)
我的評論
| 登錄賬號： | 密碼： | 快速注冊 | 找回密碼 |  |
