互動設計檢測的好幫手

  • April 30, 2018
  • UIUX

想象一下,在一個沒有任何路標的城市裡面,所有人都沒有辦法在視覺上獲得指引,所有的人和交通工具都只能在混亂中前進,摩擦和衝突會無處不在。沒有指引的城市,就像黑箱一樣。

同樣的,功能和效果再炫酷的 APP,如果沒有新用戶引導流程、沒有工具提示、沒有基礎的教學,就像沒有路標的城市一樣讓人迷惑頭疼。

這個類比也許不那麼精準,但是應該不難理解。

最可悲的地方在於,當用戶因為混亂的體驗而感到痛苦的時候,它並不會打電話給客服咨詢或者在後台留言提問,絕大部分用戶會選擇直接關閉並卸載 APP,還有少量用戶會在社交媒體或者留言區罵完之後再卸載。

好看固然會吸引人,但是在此之前必須保證可用性才行。即使在設計上盡量利用到了最佳實踐,但是並非所有功能和服務都是一目瞭然的,用戶並不會每次都能福至心靈瞬間了解導航和每個功能模塊的具體特性。

這就是為什麼需要新用戶引導流程,需要有新手教程,需要有工具提示。借助這些環節,設計師能夠引導用戶對於產品的功能或者使用方法有基本的了解,避免用戶一開始就迷失在他們並不熟悉的功能當中。

在20年前,我們新買回來的洗衣機、電視和收音機都會搭配上一小本厚厚的說明書,現如今,這些常用的家電已經擁有了更為優秀的交互設計,也有了更加優秀的新用戶引導方式,通常只需要提供一些核心的說明和基本的用戶指引,用戶就能進行基本的操作。而這些就是最常見的工具提示。

工具提示在如今 APP 的新用戶流程中,是非常常見也非常有用的一種用戶引導策略。工具提示作為一種類似註釋的教程/引導訊息呈現形式,在新用戶引導流程中,被廣泛地運用。

1. 為什麼使用工具提示?

當你需要展示產品的核心功能的時候,工具提示能夠提供交互性較強、自由度較高的展示方式。不過,在許多產品的新用戶引導流程當中,工具提示這一功能被濫用,使得訊息過載,從而讓工具提示成為了一個非常惱人的功能。

在 Google 的 Material Design 的設計規則當中是這麼說的:

工具提示應當在用戶懸停、聚焦或者觸摸某一控制項的時候顯示。通常,工具提示是針對特定的元素來進行說明的,它會包含簡要的文字來闡述其功能、效果或者交互方式,比如它可能以文本的形式闡述某個圖標所涉及到的功能。不過,工具提示也僅僅只是提示,它不會替代特定的功能。

那麼,如何避免讓工具提示真正發揮作用,而不是讓人覺得訊息過載呢?下面的幾個技巧,能夠讓它真正發揮作用。

2. 一次顯示一條提示

一次顯示過多的訊息是工具提示讓人覺得訊息過載的主要原因之一,盡量一次提供一條有效的提示,讓用戶易於理解,不會覺得煩躁。下面是 Hotjar 的工具提示:

3. 添加進度指示器

在 Hotjar 的案例當中,設計師使用小點來指示進度,對於新用戶而言,這樣的進度指示是很貼心的,讓他們對於訊息展示的進度有個明確的預期,還需要多久才能瀏覽完。

4. 每個工具指示包含一個交互

這個原則也需要設計師堅定不移地執行。工具提示的內容可以適當地長一點,而提示的條目也可以適當多一點,但是無論如何都要確保每個工具提示僅包含一個交互的說明,否則用戶會因為訊息量和內容的混亂而被誤導。

5. 允許用戶跳過教程

正如同你所看到的,在 Hotjar 這個案例當中,用戶並沒有辦法直接跳過工具提示這個環節,然而這個過程實際上還是蠻長的,對於一部分用戶而言這可能是非常令人難受的。用戶應該在任何時候都有權利跳過教程,不然則會讓工具提示變成垃圾郵件一樣令人難受的存在。

6. 為用戶提供返回的選項

有的內容對於用戶而言很重要,有的表述可能一開始並不夠清晰,因此要為用戶提供返回瀏覽的選項,確保他們想看的時候還能找回去看看。

結語

工具提示往往出現在新用戶引導流程當中,它是整個應用的門面之一,能否給用戶留下好印象,工具提示也發揮著至關重要的作用。可以通過 A/B 測試等方式協助測試工具提示的可用性和易用性,千萬不要濫用它。


Also published on Medium.

GogoShark 小編主要分享: 網頁設計, 數位行銷, SEO, 品牌策略...等領域。是你的數位行銷解決方案專家。提供數位行銷知識、分析工具、解決方案與資源夥伴;精準蒐羅數位網路行銷懶人包、關鍵字行銷、社群行銷、內容行銷等。GogoShark 是間位於台北的網頁設計公司

客服支援

您的問題,由我們來解決 - 位於台北的專業網頁設計服務 GogoShark 可協助您拓展事業版圖,透過更加簡單快速的方法將一切數位化