Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. UX
Webdesign

定制化的用戶界面消息體驗

by
Length:MediumLanguages:
This post is part of a series called UX Foundations.
Defining And Applying Personas to UX Design
Applying Fitts’ Law To Mobile Interface Design

Chinese (Traditional) (中文(繁體)) translation by Stypstive (you can also view the original English article)

設計有效且友好的用戶提示信息本身是一種藝術形式。 不過設計者們總是會花很多時間在主要的用戶界面上,而對提示類信息頁面的考慮和設計一般都是有空再說。 良好的信息提示可以讓用戶和系統保持互動,如果缺失了反饋,用戶有時會不知所措。

提示信息類別

在深入探討之前,還是先看一下實際生活中的各種UI反饋信息。

網站類提示

我們最常遇到的錯誤信息是404頁面找不到的錯誤提示。 這通常發生在用戶如果不小心輸入了錯誤的網址,或者之前的網頁不再允許訪問時。

服務器停機,或出現了意外狀況時, 會出現網站關閉的提示信息。


Tumblr網站關停提示信息

下面是網站計劃內的維護通知信息。


計劃內停機 credit

著名的twitter訪問失敗鯨魚標識

下面這些信息則是在用戶某項操作後用於告知用戶操作結果。

如下圖,Versions告訴用戶,已經開始下載,文件將保存在下載文件夾中。

這個常見的網站頂部的通知信息條則是提醒用戶要去確認郵件。

Zootool則會用整個頁面提醒用戶確認郵件以激活帳號,激活前是不能進行下一步操作的。

這是用戶完成郵件確認後的感謝信息。

表單類信息

我們還會常常遇到表單類的提示信息。 最為常見的是信息確認時,用戶提交信息後,script會校驗所填信息是否有效時,頁面會給出相應的信息。


針對每個表單項的校驗信息 source

除了校驗失敗時給出提示外,表單類提示信息也可加點創意。 比如用一種可愛的方式引導用戶更好地填寫信息。


密碼強度提示

這是用戶信息提示成功後頁面提出的反饋信息。

應用程序提示信息

現在web頁面應用和app越來越相似。 很多web應用在使用上和本地的app沒什麼不同。 比如,750words.com網站會給出提示-當你用快捷鍵保存文章時會彈出提示信息。

你也可以在特定區域顯示特定的信息,來鼓勵用戶執行一些操作。 如Twitter.com會在有更新的時候通知用戶。

如果給移動應用設計提示框情況會有所不同,主要是因為移動端的屏幕會小,提示信息必須要醒目。


一個app的狀態通知消息。

再次強調,如果出現的時機恰當,可以把提示信息設計得像是一個使用技巧。


在這裡,UI提示看起來就像是一個用戶使用說明

也可以用來表示對用戶完成一項任務的激勵。


Credit

站在用戶的角度思考

我們需要以用戶的立場來看待問題。 當他們瀏覽網站時,或使用你的應用時,你希望他們的感覺是什麼? 你可能會希望他們信任你,如果他們覺得使用你的網站時感覺很有意思,那就更棒了。 但是如果沒有精心設計你的提示信息,那網站給用戶帶來的則可能是失望或沮喪。

絕大多數瀏覽網站或使用應用時,都有著明確的目標。 象查找一個公司的資料,購買某個商品,或用app完成某項工作,等等。 你可以想像如果用戶在網站上想買點什麼。 他點完‘加入購物車’後如果跳轉到空白頁面,用戶的感覺會怎樣? 這種情況下如果操作後發生錯誤了,系統必須得給出恰當且明確的信息。


例:加入購物車出錯時頁面給出高亮和文字提示。

還有一種場景,用戶正在你的網站上進行某項重要的操作流程。 可能是試圖通過你負責的金融網站付房租。 如果在整個付錢過程中網站停止響應了,用戶的感覺會有多麼的擔心鬱悶和著急。


img credit網站

上面的出錯信息並沒有給出明確的信息原因,壓力一下子就轉移給了正在操作的用戶身上。

最佳實踐

先看幾個反饋和提示都做得不錯的幾個例子。

盡可能地明确

又簡單又特別的提示信息,Dealotto有個不錯的範例。

  • 頂部的綠色banner看起來就是一個特別的狀態信息。
  • 視覺上用了圖標,進一步強調了標題信息。
  • 提示用戶後續還需要操作。
  • 頁面設計精良並提供了足夠的信息,給出了後續操作說明。
dealotto confirmation

盡可能的醍目

Vimeo網站上註冊時沒人會看不見錯誤提示信息。

  • 信息使用了強烈的顏色
  • 提示信息顯示在出錯的表格項旁邊,信息框上還有三角形的指向出錯位置。
Vimeo signup validation

37signals(現在的Basecamp網站)在用戶還沒有任何內容時,會顯示下圖這個藝術化的界面(而不是一個空白的頁面)。

basecamp blank slate

但是也不能信息過剩。

有的應用會把整個頁面占得滿滿的。 上圖用了所有的UI已有的信息展示樣式,提示窗、逐行提示、置頂提示,要求你必須去做這件事。

過於醒目和持續不斷的提示會導致反效果:用戶乾脆放棄了。

Overwhelming form errors
切忌把錯誤提示信息設計成到處都是的報錯紅海。

產當你首次登陸並想瀏覽Huffington郵報的新聞文章時,頁面會給出下圖的提示窗。 用戶很容易會困惑,他會想:讀個新聞需要一個twitter帳號。

Huffington Post Twitter modal

提供相關的幫助

不管顯示給用戶是的錯誤提示還是提示信息,增加些相關的幫助或提示的話,效果會很實用。 尤其是在網站出錯的情況下,這種情況不可避免,不過我們可以盡可能地優化用戶感知。

Vimeo會在這種情況下給提供其他部分的操作鏈接,還會在頁面下方附上幫助鏈接。

Vimeo 404

還有下圖,雖然只用了小小的幫助圖標,但效果卻會很好。

Ticket Trunk Help
Credit網站

下圖的幫助技巧也很實用,用一個鏈接用戶點擊時可以看到更多信息。


表格來自Postmark. Credit

Invisionapp在內容加載的圖片上加了一個有效的使用技巧信息。

预测的藝術

提前預測是設計出好的反饋信息的基礎。 需要預先明確的內容如下:

  • 用戶的感覺是怎樣的
  • 用戶會做哪些操作
  • 他們可能會遇到哪些錯誤。
  • 有些場景你需要用戶耐心等待。
  • 你想在哪些場景保存導致失敗的原因

Kicksend發現有些用戶沒有去確認他們的郵件。 經過數據分析發現沒有確認的原因是用戶因為輸入的問題導致郵件地址輸錯了。 所以他們設計了一個jquery插件,mailcheck.js腳本,當用戶輸入郵件地址時,便檢查他們是否犯了常見的輸入錯誤。 簡單的檢查措施,就將郵件(不)確認的情況減少了50%。

Fab.com預測到有些用戶可能會取消帳號。 當用戶取消帳號時,網站希望可以了解取消的原因。

有時場景預測可以帶來生機。

tumblr unfinished post

或者有時會挽救回會丟失的訂單。

Threadless cart item is running out

這都與小的細節有關。 Gmail郵件的登陸頁面猜到,你改了密碼,但你現在忘記了這件事。

gmail forgot password

Gmail還提供了其他一些預測後的信息:我相信有無數人都遇到過這樣的錯誤:發郵件忘記加附件。


Credit

狀態提示也是UI信息中一種重要的形式。 Foursequare精心設計了一個信息,在加載數據時告訴用戶系統正在定位他的位置,尋找周邊有趣的地方。 這樣做有兩個目的。

  1. 讓用戶在頁面加載時有點耐心
  2. 同時暗示系統正在後台分析數據,執行某個很智能的操作

Teuxduex認為todo清單的同步非常重要,然後在網絡斷掉的時候會幽默地給出警告。


Credit

還有許許多多其他的例子,如何去預測,然後在用戶界面上放置防範措施。

注入幽默和情感

之前我們提過像用戶那樣去思考的重要性。 最小化他們的挫敗感非常重要,我們還可以採取些其他的辦法。 許多人都是長時間對著屏幕。 如果可以加進一些幽默感,就會將普普通通或者是糟糕的場景變得有趣一些。

這個散架的機器人讓你笑了,不是嗎?

想看到更多的404錯誤頁面,可以參考這個Pinterest圖片集。 不僅僅是出錯信息,辛苦一天之後,簡單的提醒也能讓你會心一笑。

hootsuite feedback

我們都為"收件箱中沒有待讀郵件"而苦苦折扎,不過當看到Gmail的這條信息的時候,也許感覺值了

Gmail inbox zero

來自Buffer網站的信息用討好和幽默的方式希望得到更多的註冊。


Credit

另一個提示範例:聰明的文案會讓你不由微笑。


Credit

如果你對此感興趣想了解更多和幽默有關的設計,可以參考excellent deck網站上aaron Walter的演示(情感設計大拿,Mailchimp的首席設計師)。

結論

我真心希望本篇關於用戶界面上的信息製作能對你有所幫助。 下方是相關資源,你可以進一步學習並進行研究。 信息設計上不要去區分好壞,而是要引起用戶的情感,經驗共鳴,還有能提供用戶的反饋就好。

不要著急,這需要大量的實踐和迭代才能找到合適的信息設計感覺。 請用戶提供反饋,可以故意設計一些給用戶的信息起步,如果有效果,再加一點幽默或情感來強化整體體驗。 希望對大家有幫助。

有任何問題請留言給我。 欢迎反馈,它可以讓我在webdesigntuts+網站上寫出更好的文章。

相關文章

相關图书

设计模式

关注我们的公众号
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.