使用者體驗設計:引導使用者找到隱藏內容

來源:互聯網
上載者:User

文章描述:通過合理的指示元素引導使用者發現隱藏內容。

天氣甚好,不冷不熱,微困。搞掉這篇就上房頂子發發獃。如果哪位覺得今次的表徵圖有些許驚悚的話,歡迎在評論中吐槽,或者直接在微博上跟我念叨。

之前連續更新了兩章iOS Wow體驗,分別是關於應用上下文環境以及iOS技術特性這兩方面的話題。今天換換腦子吧,放下行動裝置 App這攤子事,回到Web端,遛一篇圖文並茂篇幅簡短的小譯文,關於隱藏內容及相應的提示元素使用方式blah blah的。走著。

標籤(Tab)、下拉式功能表、手風琴風格的摺疊控制項...漸進呈現(progressive disclosure)的互動方式可以有效協助我們降低介面的視覺複雜度,同時儘可能多的向使用者展示內容。

不過凡事有利亦有弊,在視覺上不可見的東西確實很有可能被使用者所忽略掉。因此,把介面元素隱藏起來還不算完,我們必須通過一些恰當的方式向使用者進行提示,讓他們意識到隱藏元素的存在。

使用者的預期

這裡所說的預期,是指使用者對自己能否在網站中找到隱藏元素所做出的假設和預判。如果使用者認為某些內容一定是藏在什麼地方的,他們就會主動的進行尋找;反之,他們也有可能受到一些因素的影響,過早的認定那些內容根本不存在。

在購物網站中,多數使用者認為自己能夠並且應該擷取到商品詳情、退換政策、運費等方面的資訊。在這種預期的作用下,即使那些內容並沒有直截了當的呈現出來,他們也會主動尋找。

另一方面,諸如使用者點評、額外的商品圖片集、視頻示範等附加內容並非是所有購物網站的標配,如果它們在預設狀態下是不可見的,那麼對於那些不熟悉該網站的使用者來說,通常不會花費太多時間進行尋找,因為在他們的預期中,這些內容可能就是不存在的。

使用者的預期取決於他們長久以來的認知和行為習慣。作為設計師,如果不能確保使用者會從主觀上積極主動的尋找隱藏元素,我們就要藉助可視化的觸發指示,引導他們擷取更多的內容。

觸發指示

任何一種對隱藏內容的存在起到提示作用的介面元素都可以被稱為觸發指示。它們大致分為五類:

1.方向與空間

具有指向性的介面元素通常可以用於對隱藏內容的指示。方向指示(directional indicator)的視覺表現形式能夠很準確的描繪出虛擬空間當中位置及移動的概念,符合使用者直覺。

此外,方向指示本身通常會以表徵圖的形式存在,這也使得後面的文字標題在使用者看來具有更強的可點擊性,進一步增強了隱藏內容被發現的可能性。

在Fox的主導航當中,前兩個功能表項目會各自觸發一個“大資料量菜單”的展開(mega menu,趕上這種已然約定俗成的詞兒我是真心不想翻成中文——譯者C7210注),其中作為觸發指示的正是標題文字後面的下三角表徵圖。這類元素從視覺上來看是很微小的,但它們對於使用者能否正確領會頁面的互動方式卻是至關重要的。

空間指示(spatial indicators)與方向指示具有比較密切的相關性。在這種模式中,通常會有一個“高亮”的介面元素向使用者提示當前所處的位置或是已做過的選擇,而其他那些處於普通狀態的同層級導航元素則暗示著目前範圍當中有更多內容可以被發現。

分頁控制項是一個比較典型的例子,這種模式可以很直白的讓使用者知道自己看過多少內容、現在正處於怎樣的位置、接下來還有多少東西可看。另外,導覽功能表中的“當前”狀態標識,以及瀏覽器的捲軸等等,從本質上講都屬於空間指示。

2.隱喻

隱喻是一種非常有效引導方式。例如,將使用者介面設計成為書籍或雜誌的樣式,在互動方式上也類比真實的物理效果。通過這種高度隱喻化的表現形式來承載線上內容,可以讓使用者會很自然的去瀏覽那些在當前可視地區“後面”的東西,就像在現實中看書那樣。

隱喻的方式確實非常符合使用者的直覺及預期;作為設計師,我們必須確保擬真介面的外觀和互動方式能夠準確的體現出真實物體的視覺及物理特性。不過,由於技術等客觀條件所限,真實物體的行為規律未必能夠被準確的還原到網頁當中,我們需要在選擇設計方案的時候對這方面的問題加以考慮。

3.表徵圖

表徵圖可以使觸發指示元素在整個頁面當中以相對凸顯的方式呈現出來,例如Macy在“Reviews”標籤中所使用的星級表徵圖。

表徵圖一類的視覺元素可以使平淡枯燥的文字內容具有更強的可辨識性,進而引導使用者發現附近的隱藏元素。不過這類做法也具有一定的風險,有時它們吸引到的注意力太多了,以至於使使用者忽略掉了其他的重要訊息。

4.漸層褪色

我們還可以通過改變內容自身外觀的方式來指示更多的隱藏內容,而不必使用表徵圖一類的可視化介面元素作為觸發指示。其中最典型的方法就是為內容文字設定漸層褪色效果,Amazon的商品描述頁面當中就使用了這種方式。

逐漸褪色的文字可以很有效吸引使用者的注意力,並促使他們探索更多內容。配合可視化的觸發指示元素,例如“ Show More”文字連結及相關的表徵圖,這種引導效果就會進一步的增強。

5.短暫呈現

所謂短暫呈現,是指我們可以策略性的讓內容在一個時間段內保持可見。例如,在購物網站的商品詳情頁面中,當頁面完成載入後,完整的商品描述內容可以在短時間內保持呈現狀態,然後通過動畫方式收合,並在內容最終消失的位置提供一個可視的觸發指示元素,這樣使用者就很清楚有哪些內容被隱藏了起來,當他們需要擷取相關資訊的時候,可以到哪裡去找到這些內容。當然,這種模式的實現當中有一個重要的前提,那就是使用者必須注意到了內容消失的過程及相應的動畫效果。

關於短暫呈現,另外一個典型的例子就是輪播。在這種模式中,多項內容會依次呈現一段時間;這樣不僅能夠讓使用者瞭解到更多內容的存在,更重要的是,它們會“主動”的顯現出來,使用者無需執行任何互動操作就可以擷取到完整的資訊。

最佳實務

我們對五類觸發指示進行了大致的瞭解。光是這樣還欠點兒火候,更重要的是,我們必須知道在實際工作中以怎樣的方式、怎樣的程度來使用這些觸發指示,因為這類元素或多或少會為介面整體帶來一定的視覺噪音,搞不好會使整個介面變得相當淩亂,不僅不能有效起到提示作用,反而會影響使用者對於其他內容和功能的瀏覽使用。我建議大家在實踐中首先對以下四個方面的問題進行考慮:

  1. 確定隱藏內容的重要程度,判斷它們對於轉化率的提升能夠起到多大的作用,它們是否只是對於某種特定類型的使用者才有意義。
  2. 確定這些內容被瀏覽的頻率,通過統計工具查看能夠瀏覽到這些內容的使用者所佔的百分比。
  3. 判斷使用者對於隱藏內容的預期,通過用研來瞭解使用者在特定的介面當中最希望擷取哪些方面的資訊。
  4. 匯總前三個方面的分析結果,判斷是否有必要使用“隱藏內容+觸發指示”的模式。如果確實需要,那麼指示元素採用怎樣的視覺表現形式更加得當;會吸引更多注意力的輪播動畫?還是視覺效果相對較弱的漸層褪色?

如果你確定隱藏內容確實非常重要(1),但當前的瀏覽量很低(2),而且使用者的預期當中並沒有包含這些內容(3),那麼你就應該考慮對觸發指示元素進行調整了,看看能否讓它們吸引到使用者更多的注意力;抑或是這些內容根本就不應該隱藏起來。



相關文章

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