Tooltips設計指南

原文地址:

Tooltips並不是新東西,但仍然經常被誤用。

Tooltips可以附加在頁面上的任何元素上(圖標,文本鏈接,按鈕等)。它們為這些元素提供描述和解釋。Tooltips具有高度的關聯性和特定性,並不是用來解釋框架或整個任務流程的。

Tooltips的一個重要特性是它們是由用戶觸發的。所以主動彈出的,通知用戶功能更新或展示如何使用特定功能的提示不屬於Tooltips。

由於Tooltips由懸停手勢啟動,因此它隻能在有鼠標或鍵盤的設備上使用。Tooltips通常不適用於觸摸屏。(也許將來某天,當用戶註視在GUI元素上並停留一段時間後,可以在啟用眼睛跟蹤的設備上顯示Tooltips。)

Tooltips與彈出提示

雖然Tooltips主要限於臺式計算機和筆記本電腦,但有一個常見的兄弟元素常在觸摸屏設備上出現:彈出提示。Tooltips和彈出提示都有相同的目標:提供額外的有用的內容。下表顯示瞭彈出提示和Tooltips的主要相同點和不同點。

本文重點介紹Tooltips及其在桌面網站上的使用。

Tooltips使用指南

1.不要用Tooltips來顯示對任務至關重要的信息。

用戶應該不需要查看Tooltips即可完成任務。Tooltips適合用來為一些用戶不熟悉的表單字段提供附加說明。記住工具提示不是固定顯示的,因此說明性的信息、指導操作的信息(如字段要求)不應位於Tooltips中。(如果這些信息位於Tooltips中,用戶需將其保存到工作記憶中,然後再執行操作。)

錯誤:

正確

2. 在Tooltips中提供簡短有用的內容。

Tooltips中的內容如果是顯而易見的或者冗餘的,那對用戶就沒什麼用。如果您無法想到特別有用的內容,請不要使用Tooltips。否則就是向UI中添加信息污染,並浪費用戶激活Tooltips的時間。

內容如果冗長,那就不再是“tip”,所以請保持簡短。

錯誤:

正確:

3.支持鼠標懸停和鍵盤懸停。

通過鍵盤訪問的用戶無法訪問僅在鼠標懸停時出現的Tooltips。你的設計應該具有包容性,確保你的Tooltips可通過鍵盤訪問。

錯誤:

正確:

4.當附近有多個元素時,在Tooltips中使用箭頭。

箭頭有助於清楚地顯示Tooltips與哪個元素相關聯。當附近有多個元素時,這些箭頭有助於避免混淆。

錯誤:

正確:

5.在整個站點中保持Tooltips的一致性。

沒有明確的視覺線索,Tooltips很難發現。如果站點中的Tooltips未能一以貫之的設計,人們可能永遠不會發現它們。保持一致,為所有元素提供Tooltips,不要僅給部分元素添加Tooltips。如果僅有一些元素需要額外的解釋,請給這些元素的設計彈出提示。

錯誤:

正確:

其他建議

  • 為無標簽的圖標提供Tooltips。

大多數圖標的含義都有一定程度的模糊性,所以我們推薦為所有圖標添加說明。即使無法為網站上的所有圖標提供文字標簽,至少要做到為每個無標簽的圖標提供Tooltips。

  • 確保Tooltips和背景具有中等對比度。

中等程度的對比度確保用戶能看清tooltips中的內容。對於有視力障礙的用戶,白色背景上的淺灰Tooltips非常難以閱讀。

  • 定位Tooltips示,以便它們不會阻擋相關內容。

如果Tooltips阻擋瞭與其相關的內容,會導致用戶重復操作(即移動鼠標以關閉工具提示,再次讀取信息或字段,懸停以顯示工具提示)。測試您的Tooltips的位置,以確保內容不會阻擋其他相關信息。

結論

Tooltips能有效幫助用戶理解功能。但如果人們遵循其他設計指南(例如,給圖標加上標記),那麼大部分情況下Tooltips可以省略。記住,重要信息應始終在頁面上。Tooltips對於用戶的操作不應該是必不可少的。

我們越是追求極簡,我們需要的Tooltips就越多,我們的用戶就需要越多操作。下次考慮使用Tooltips時,問問自己:Tooltips中的信息對於用戶操作是必須的嗎?如果答案是否定的,那麼適合使用Tooltips。否則,就把這些信息直接展示在屏幕上。

赞(0)