為了讓你用著舒服,設計師想到頭都炸了 #034

俊鐵導讀:

用戶體驗是「有味道」的,如果要設計出好的產品,設計師得聞到這些「味道」才行。

今天分享的這篇文章告訴你,怎麼樣才能提高設計師的「嗅覺」?

只有更好地了解用戶體驗中存在的不足,才能設計出更好的產品。

「我該怎樣開始」是軟體開發的第一道坎,當我跨過這道坎開始做產品時,所接觸到最有用的靜態參考(靜態是指在編譯時而非運行中進行數據類型檢查),還屬傑夫·阿特烏(Jeff Atwood)原創的代碼味道清單。這份清單列舉了各種在代碼庫界面出現的小情況,而這些小情況往往反映了更大的架構問題

代碼「味道」很實用,只要你學會識別它們,就能通過迅速重構代碼,把有缺陷的架構扼殺在搖籃中。除了幫你節約大量時間,還能避免因各種大大小小的補救行為而付出的巨大代價。

在產品設計這個領域我也犯過不少有關用戶體驗的錯誤,經驗也隨之豐富起來,我意識到這個概念同樣適用於界面設計。有些產品和界面的特徵,是不能用於設計優良產品上的。

因為當你在產品看到或者植入這些特徵時,便是產品在用戶體驗方面出現深層次問題的警告了(俊鐵註:這即是所謂的用戶體驗的「味道」)。而學會識別它們,你可以設計出更好的產品,成本也會大大降低。

關於用戶體驗的「味道」,我認為有以下 3 個普通的、可及時糾正的、不明顯的注意點:

1.「高級用戶」幫助文檔

針對各種不同複雜性的 App 里的「高級用戶」幫助文檔,眾多團隊腦洞大開,想了各種辦法,以下是一些舉例:

  • 單獨的文檔門戶網頁,點擊進入後可以查看常見問題解答(FAQ)以及用戶指南文檔。比如,下圖中微軟網頁的 Excel 幫助頁面。

  • 為社區提供支持的門戶網頁,其最初是用於幫助用戶更好地使用產品。比如,大量類似

    TuxRadar 的在線論壇,其主要功能是幫助用戶使用 Shell 語言中的 Bash(俊鐵註:Shell 指的是 Linux/Unix 系統下的 Shell 腳本語言。它有不同的版本,比如 sh/bash/ksh/csh/tcsh/pdksh 等,最常用的是 Bash)。

  • 軟體內置的提示和指南界面,比如蘋果在 2014 年 6 月隨 iOS8 首發推出的 Tips 這個 App。

  • 介紹界面的「導覽功能」,作為新用戶產品熟悉階段的一部分。比如,使用 Bootstrap Tour 工具(A 君註: Bootstrap Tour 以最簡單的方式向人們展示如何使用你的網站)。

它可能帶出什麼警告?

以上是指導用戶了解界面的全然不同的方法。可為什麼都不好呢?——因為最好的界面根本不需要指南,一切本已自然明顯了。

iPad 觸摸界面可以讓用戶直接憑直覺正確地操作,即便是兒童,在沒有指導的情況下也知道如何使用。

當用戶要求你為其提供產品指南時,說明你的產品對他們來說,根本不好用

你又可以做點什麼?

就我個人經驗而言,產品設計及維護、奮力和界面「作鬥爭」通常屬於以下 3 種情況其一:

首先,用戶界面使用了平台搭建不規範的設計。這不僅常見於各平台上有著相似「大眾」界面的 App 里,還常見於富有創新能力的設計師團隊設計出的產品上。

這些設計師花大量時間定製核心的用戶界面和用戶體驗元素,而這些元素的設計本應視平台而定,而不是視產品而定。(你可以從圖標到內容導航仔細查看一遍)。

一旦你意識到這個問題後,解決方案就迎刃而解了:使用符合平台的設計元素,這樣用戶在不用閱讀用戶指南的情況下也能明白。我保證,無論是你的用戶,還是考核你 KPI 的人,都會樂意看到這個結果。

其次,產品的使用對象來自各行各業,其使用目的也不盡相同。Excel 就是一個典型的例子:無論是財務分析行業的人士,還是獨立的個人用戶,或是統計工作者,又或是產品經理,他們都在使用 Excel 的某些功能來處理數據,但他們用的功能並不全然相同。

因為涉及到太多的用戶群體,界面無法做到為單一個體用戶「私人定製」,所以必然會導致某些用戶群體在使用過程中犯暈。

要解決這個問題,如果所有條件都可能的話,將你的產品拆分為幾個產品,為不同的用戶群體定製不同的產品。(如果要按重要性來說的話,從目前及將來增長兩方面來考慮,挑一兩個最重要的市場。)

通過對用戶群體的產品定製,你就能進一步簡化界面,產品藍圖也會更加具體,這是一個人人皆樂的結果。

最後,界面排版布局並不易發現。這種情況出現的原因大多是因為導航,導航要麼不易發現,要麼就給用戶太多選擇,而整個架構也並不合理、並不簡單。解決這個問題,要向用戶提供基於用戶真實的使用行為的簡單上手的導航,此外,導航也不需要任何幫助文檔。

當然,也有可能你的產品設計比較複雜,原創性比較強,這種情況下可能真的需要一個複雜又全新的界面。雖然這不常見,但若真有這種情況的話,你需要儘可能設計出可以讓用戶憑直覺就可以方便操作的界面,但有可能仍需少量的幫助文檔。

2. 難以實現的界面布局

在我過去個人經歷的項目中,當真正開始設計界面時,我遇到過不少難以實現的界面布局:

  • 網頁上需要滾動滑鼠來瀏覽的內容。有時候,加入側邊欄工具是一個不錯的選擇,這樣就可以讓用戶滾動滑鼠至頁面某特定部分。
  • 複雜、具有層次的導航。有時,各類應用需要加入許多定製導航邏輯,從而解決不同架構層級、以及同級架構層之內的切換問題。
  • 複雜、非標準的動畫。大多數界面平台都有一套自始自終都在使用的標準動畫。其實,不妨試試設計一套具有獨自特色的動畫。

總之,如果僅僅是為了設計出整個界面布局和標準的界面元素(而非產品的核心增值界面),而需在編程方面投入大量工作的,不妨回過頭再考慮下這些問題。

它可能帶出什麼警告?

難以實現的界面布局通常和與平台相關的界面和用戶體驗的傳統認知是相衝突的。因此,這麼做可能會讓用戶產生疑惑。此外,通常還會花時間適應意料之外的各方面問題。

平台的內置架構和設計是之前被測試過,在不明顯和異常的屏幕方向、內容寬度、設備裝置上都適用的,那你真能花那麼多時間做測試並調整這些不重要的細節元素嗎?

這個問題在帶有介面或跨設備的布局(比如在基於網路視圖的移動應用)上更加常見,但是這個問題即常見又容易發現。

你又可以做點什麼?

無論如何,一定要使用適用於平台的標準界面和用戶體驗元素。如果和你的品牌稍有不搭,可以根據實際情況微調——但不能徹底改變。如果和你的設計完全不搭,或者和你的設計相比略遜一籌,那就從用戶角度認真思考這個問題到底有多重要。

3. 過量的圖標

文檔的字數有多少?我該怎樣快速地數出來?

Mac 2016 年版微軟辦公軟體 Ribbon 視圖

我頻繁地使用這個軟體,但我完全不知道怎麼數。下圖是圖標下帶有文字標籤的 Ribbon 視圖(為保證原樣,下圖為默認視圖,未做任何改動):

它可能帶出什麼警告?

先等等。如果這些圖標沒什麼意義,又不帶文字標籤的話,那它們存在的原因是什麼?給你一個小提示:

看看上圖凌亂的界面!太多不同的功能了,為了顯示全部內容,只好把字體變小!

加入圖標,特別是主導航菜單的圖標,是一種經常使用的通過界面使較差的用戶體驗變得更有吸引力的手段。但 MS Word 主菜單的核心問題不是圖標太難被理解,而是任何時候都顯示了太多功能。

再舉 1 個例子:

Xcode 新建項目界面

Xcode 向用戶顯示了過量的高度複雜功能,雖然實際用戶體驗太差,使用不方便,但因為圖標的加入看起來還是挺有吸引力的。可以試想一下,如果所有的圖標都被同一小塊的文字標籤所代替,界面效果會怎樣?

你又可以做點什麼?

簡化產品,將核心的功能植入各項交互里。交互界面要足夠小,以舒適地顯示僅以文字為基礎的操作提示(文字標籤)。

通常,這需要你認真思考用戶會如何使用你的產品,並精心設計界面的導航層,這樣,不同的功能就可以恰當地設計和顯示。有時,也可能需要你將產品拆分成幾個全新的產品。指南不是必須的,但你知道什麼時候恰到好處。

和代碼味道一樣,也總有例外的情況。如果在設計過程中你知道如何捨棄不必要的幫助文檔、難以實現的界面布局和過量的圖標,那不管怎樣你的產品都會提升一個檔次。

作者 | Aaron Yodaiken 美國哥倫比亞大學學者,曾發起初創了 Upward 和 RealityStep 兩個產品

譯者 | 俊鐵

題圖 | Pexels

原文鏈接 UX Smells,已獲原作者授權翻譯。

本文首發於愛范兒。商業轉載請聯繫獲得授權,非商業轉載請註明出處。


推薦閱讀:

TAG:用戶體驗 | 圖標 | 用戶界面設計 |