對漂亮應用程序設計的咆哮

已發表: 2022-03-11

“提防那種追求讚美或被讚美所滋養的虛榮心。” ——查默斯

用我的炒作、批判性的 UX 射線眼睛瀏覽一些設計靈感的網站 :) 我經常帶著煙霧從我的耳朵裡冒出來。 正如標題所說,這是一個咆哮,但不要太認真。 我試圖說明一點。

是的,我知道其中一些設計展示網站不一定適用於現實世界的產品,但我仍然說它們需要反映一種深思熟慮的設計方法,主要是通過詢問主要問題“這是給誰的? ”、“人們將如何使用我的產品”和“它真的可用嗎?”。

遵循最新時尚並公然忽略基本可用性約定、UX 最佳實踐和交互設計基本原則的膚淺應用程序設計很可能在現實世界中失敗! 幸運的是,他們通常不會超越 Dribbble 和 Behance 上普遍荒謬、自我炫耀的幻想世界。

不幸的是,這些“概念設計”,一個想像中的應用程序中的一個屏幕,只會讓設計師永遠被貼上藝術家的標籤——他們只是在乎單板、漂亮的顏色和字體的偽裝者。 如今,任何應用程序設計都必須超越這一點。

我說的是用戶體驗。

如果現實世界中的人們嘗試實際使用這些應用程序,我保證超過 50% 的人會很難這樣做,隨後會在困惑中放棄。

天氣應用 - 糟糕的應用設計
誰不需要另一個天氣應用程序? 沒有提示用戶如何使用它。 (Jona Dinges 在 Dribbble 上)

數字產品設計師值得他們的鹽分並希望提升他們的遊戲水平,他們知道將他們的自我拒之門外並避免不必要的繁榮、自私自利的公眾遊行和毫無意義的觀眾誘惑是至關重要的。 #UX失敗!

旅行應用程序設計 - 糟糕的應用程序設計
再多花哨的 GIF 動畫都無法解決設計糟糕的應用程序的嚴重用戶體驗問題,例如隱藏的手勢交互、無意義的圖標或低對比度的文本。 (Arunraj 在 Dribbble 上的旅行應用程序)

放棄奉承的可用性

如果數字產品設計要在市場上取得成功,就必須擁有出色的用戶體驗。 可以肯定的是,美學——外觀和感覺的設計很重要,但它們只是補充可用產品的最後一點,使用起來也很愉快。 在放棄可用性的同時只追求美學完美最終是失敗者的遊戲。

正如常被稱為“實用技術大師”的唐·諾曼所說,“偉大的設計師創造出令人愉悅的體驗。”

愉快的體驗是那些在提供流暢、無縫的交互和預期體驗的同時產生最少摩擦的體驗(即,讓事情看起來像魔法一樣。正確的事情,在正確的時間,以正確的方式)。

到達那裡的方法絕對不是忽略已建立的最佳實踐和設計慣例,而只關注外觀。 很明顯,Dribbble 步履蹣跚:1) 你不了解你的用戶,2) 你在模仿時尚。

移動應用 UX 設計最佳實踐
你的設計是否在問這些問題?

忽略約定,後果自負

設計慣例,無論是數字產品設計還是工業設計——例如汽車或自行車——都植根於人類行為、力學、物理學、科學和廣泛的研究。 它們遵循最佳實踐和人類對事物運作方式的期望,因為我們已經習慣了它們,並且遵循了這些慣例。 這些約定是通過反複試驗制定的,並且隨著時間的推移被證明是非常有效的; 有點像進化論。

忽視或違反設計慣例是魯莽且有些傲慢的。 它們是基礎,是我們可以創新的基礎。 這是關於預期的。 沒有它們,您可能會惹惱人們。 想像一下,如果每輛自行車、每一個門把手——或者每輛汽車的踏板和方向盤——都以不同的方式工作,所有這些都純粹是為了“創新”。

兩個字:徹底的混亂。

用戶界面就像一個笑話。 如果你必須解釋它,它是行不通的。

移動用戶體驗設計技巧和竅門
Dribbble 的另一個應用程序設計。 (Aaron 1991 在 Dribbble 上)

注意啟發式

努力成為可用產品的精心設計的應用程序遵循公認的設計慣例、基本可用性指南和交互設計原則(除其他外),並通過啟發式評估並取得優異成績。 (“啟發式”是因為它們是廣泛的經驗法則,而不是特定的可用性指南。)

為了讓應用程序設計在現實世界中運行良好,他們應該遵守 20 年來在用戶體驗領域處於領先地位的 Nielsen Norman Group 定義的用戶界面設計的 10 項可用性啟發式。 這些是:

  1. 系統狀態的可見性
  2. 系統與現實世界的匹配
  3. 用戶控制和自由
  4. 一致性和標準
  5. 錯誤預防
  6. 識別而不是回憶
  7. 使用的靈活性和效率
  8. 美學和極簡設計
  9. 幫助用戶識別、診斷錯誤並從錯誤中恢復
  10. 幫助的可用性(這可能是“快速瀏覽”或演練)

在此處更詳細地了解交互設計的 10 條一般原則。

以創新之名迷戀

通常,應用程序概念屏幕是由設計師設計的,他們在作品集展示網站上尋找很多喜歡的人,目的是將他們推向 Dribbble 上的每日熱門照片部分。 一些花哨的、極簡的 UI 設計並不是產品。 這類似於設計一扇車門,卻沒有提供任何關於汽車其餘部分的外觀或它在現實世界場景中的工作原理的想法。

移動應用程序設計移動用戶界面設計最佳實踐
來自 Dribbble 的交易應用程序設計。 它運行的不是一個而是兩個充滿神秘圖標和低對比度文本的菜單。

不要誤會我的意思! 設計創新是必要的。 任何學科或創意領域的蓬勃發展都是健康和關鍵的。 但這不應該以犧牲良好的用戶體驗為代價。 讓我們在這裡做個區分,稱之為設計實驗。 在乾淨、極簡設計的自負下,只想與眾不同和酷,在這些網站上炫耀的許多所謂的創新設計,犧牲了基本的可用性。

可用性 101

可用性是出色用戶體驗的基石,是一種質量屬性,用於評估用戶界面的易用性。 可用性一詞還指在設計過程中提高易用性的做法。

應用程序是否有用是根據實用性和可用性來定義的。 實用程序為用戶提供他們需要的功能; 可用性是指使用這些功能的容易程度和愉快程度。 因此,忽略這些基本可用性原則的精美應用程序設計最終將毫無用處。

設計師正在尋找創新和有趣的方式來設計他們的應用程序的導航,這是可以理解的。 但在意外和不可用之間有一條細線。 導航設計中要考慮的三件事是一致性、用戶期望和上下文線索。 無論您的電子商務(例如應用程序概念設計)多麼花哨。 如果用戶找不到產品,他們就無法購買。

有用的設計

正如史蒂夫喬布斯所說,“這不僅僅是它的外觀和感覺。 設計就是它的運作方式。”

他在談論有用的設計

如果設計師過多地混淆了一個人關於事物應該如何工作的心理模型,那麼應用程序就會失敗。 如果用戶的心智模型和概念模型之間存在巨大的不匹配,那麼這款應用就完蛋了。 心理模型,顧名思義,是人們頭腦中的概念模型,代表了他們對事物如何運作的理解。

交互設計最基本的原則之一是,如果 UI 要有用,它必須具有指示符。 如果用戶在 UI 中沒有視覺提示來指示他們可用的動作或手勢交互(稱為符號),那麼您的產品設計就是 DOA。

儘管您作為設計師可能會迷戀您的產品,但用戶更關心實用性。 他們不想學習你的應用程序,也不想通過嘗試在 UI 中滑動來了解什麼是有效的。 正如 20 多年的可用性顧問史蒂夫·克魯格 (Steve Krug) 在他的《不要讓我思考》一書中所說,“[可用性] 是最重要的原則,是決定設計是否有效的最終決勝局。”

占星術應用程序移動應用程序設計
一個人如何使用這個應用程序? (Dribbble 上 Brandon Termini 的占星術應用程序)

誠然,正如 70 年代布勞恩 (Braun) 的傳奇德國設計師、蘋果一切事物的靈感來源迪特·拉姆斯 (Dieter Rams) 所說:

產品的美學品質對其有用性是不可或缺的,因為我們每天使用的產品會影響我們的人和我們的福祉。 但只有執行良好的對象才能美麗。

換句話說,設計必須適用於所有層面。

極簡主義的移動應用程序設計
由 Dieter Rams 設計的 Braun 收音機。 真正的功能極簡主義。

以下是迪特·拉姆斯 (Dieter Rams) 提出的優秀設計的 10 條誡命:

移動應用程序設計極簡主義

讓我們記住,視覺設計——美學——只是用戶體驗設計的一個方面。 最後一層應該提昇在用戶體驗設計過程中之前發生的所有事情,即定義業務目標、識別核心用戶(角色)、用戶研究、草圖、構思、線框圖、模型、原型和可用性測試. 它是提升整體用戶體驗與情感設計相一致的最後一層飾面。

減少腦力勞動

移動應用程序設計最佳實踐
大多數人不知道未標記的圖標是什麼意思,並且標題中缺乏對比度會使大多數用戶看不到導航。 (電子商務應用 Fancy)

由於設計不佳,設計師先生和女士正在做的是要求人們破譯和解釋模糊的圖標和象徵意義,從而增加他們的認知負荷(用於工作記憶的腦力總量)。 另一方面,良好的用戶體驗設計會減少認知負擔。 這種自私的設計——是的,我去過那裡——在人們的道路上設置了路障,增加了摩擦和挫敗感。 這真的是目標嗎?

移動應用程序設計心智模型UI設計
“開和關”是什麼意思? 圖標有什麼作用? 這種設計要求用戶解釋和學習太多。 (斯坦·雅庫塞維奇在 Behance 上)

設計師需要提供清晰的標籤(鏈接和按鈕)和明顯的路標(清晰的導航),以幫助用戶形成應用程序的心理地圖,並直觀地了解事物在哪里以及如何使用它們。 導航應該是清晰的、面向任務的和合乎邏輯的(例如,屏幕控制建議如何使用它),並且它的位置應該始終保持一致(例如,在菜單欄上)。

如果用戶可以滑動並使目標足夠大以便輕鬆點擊,請明確用戶應該點擊的位置。 防止錯誤。 不要讓人們猜測某事是什麼意思。 不要偷懶。 避免使用漢堡包和烤肉串菜單(三個點),因為它們會隱藏導航並使內容不易被發現。 特別是,避免使用看起來不像漢堡包菜單的漢堡包! 是的,空間是有限的,但事實證明,選項卡(頂部底部)和漢堡菜單的組合比單個漢堡的效果要好得多。

移動應用程序設計漢堡菜單
頂部的漢堡式菜單。 需要解釋的未標記圖標。 (Dribbble上小鳥酒的記賬應用)


最佳移動應用程序設計
即使是優步也是設計良好的應用程序中的一個大用戶體驗違規者。 你能看到那個漢堡菜單嗎? 大多數人也不會。


糟糕的移動應用程序設計
Turo 是另一個大罪犯,其標籤欄中的圖標未標記。 關於它們的含義,零線索。


移動應用程序設計錯誤
現實世界中的大多數人都很難弄清楚如何使用這個應用程序。 (Tubik 的家庭預算應用程序)

這不是一個完美的世界

如果您的產品進入用戶手中,他們是否能夠找到並實際使用它? 他們可能無法使用您用來設計這些屏幕的超級設置。 再想想可用性和可訪問性(視覺障礙、身體障礙、認知障礙)。 根據人口普查數據,在美國,至少有 19% 的人患有殘疾,而欠發達國家的這一比例可能更高。 如果視力不夠完美的人選擇了您的應用程序,他們是否能夠使用它?

你的設計是“手指友好”還是使用起來很痛苦? 人們需要用多大的力才能到達應用程序屏幕的不同部分? 您是否正在考慮用戶任務流程,將可操作的項目放在人們的指尖下,而不是讓他們在屏幕的四個角落跳來跳去? 設計真的符合觸控要求嗎? 您是否考慮過拿著手機的手下的模糊區域?

正如 Luke Wroblewski 在為大屏幕智能手機設計中指出的那樣,您是否考慮過您的設計在大屏幕上的表現?

更好的移動應用程序設計以獲得更好的用戶體驗
較大的移動屏幕使某些 UI 元素難以觸及。

您的設計是否真的遵循 Apple 的 iPhone 人機界面指南建議的最小目標尺寸為 44 像素寬 44 像素高? Microsoft 的 Windows Phone UI 設計和交互指南建議觸摸目標大小為 34 像素,最小觸摸目標大小為 26 像素。

不要愛上文本和背景之間的極小對比度或難以辨認的微小文本,因為它使您的設計“時髦、乾淨和簡約”。

移動應用用戶體驗設計
由於元素之間缺乏對比,幾乎無法辨認。 三個位置的圖標,一些未標記。


移動應用程序設計糟糕的設計
由於對比度低,導航幾乎無法閱讀。 (Rono 在 Dribbble 上的速度跟踪器應用程序)


更好的用戶體驗

Spotify 移動應用程序設計
Spotify 的應用程序設計簡潔明了。 它的主要功能很快就被理解了。 (但是有那個討厭的烤肉串菜單!)


星巴克移動應用用戶體驗設計
星巴克的設計師不會偷懶。 看,沒有漢堡菜單! 設計師甚至取消了圖標並選擇了簡單的文本標籤。


良好的移動應用程序設計
即使設計師通過圖標獲得創意,如果清楚地標記,也沒有猜測。 (由 Toptal 設計師 Mohammed Bilal 設計的應用程序)

我們需要莫更好的設計

那麼,什麼是好的設計? 這種討論可能會寫滿一本書,但一般來說,“好的設計”是為該設計的用戶提供的所有內容。

這意味著要使設計“好”並對用戶有用,它必須考慮到成功所必須交付的多個層次和因素。

設計趨勢來來去去。 平均設計趨勢只會持續一兩年; 良好的可用性,用戶體驗設計的基礎,將繼續存在。

根據優秀 UX 的七個因素設計的產品將保證比任何設計趨勢都更持久。 注重可用性、UX 最佳實踐、交互設計慣例以及影響用戶體驗的因素的設計師將比那些不關注的設計師產生更大的影響。 最終,他們將獲得回報,他們的數字產品將在市場上得到更廣泛的認可和成功。

移動應用交互設計
影響用戶體驗的七個因素。 (來自交互設計基金會)

如果,作為一名設計師,你想在 UX 方面做得更好——創建有用的移動和桌面應用程序,而不僅僅是漂亮的應用程序——花一些時間至少學習 UX 的基礎知識。 從關注 UX 博客開始,訂閱新聞通訊和在線出版物,例如 Toptal Design Blog、UX Magazine、UX Matters、UserTesting、uxdesign.cc、UX Design Weekly 或 Interaction Design Foundation。

閱讀對活生生的、會呼吸的參與者(真實的人)進行的用戶研究。 正如他們所說,數字不會說謊。 其他一切都是假設和假設。

在 Twitter 上關注 UX 思想領袖。 閱讀 UX 文章和白皮書,最重要的是 Nielsen Norman Group 和 Adaptive Path。

Medium 是我最喜歡在線閱讀 UX/UI 設計文章的目的地之一。 世界各地的設計師都在使用它來閱讀有關設計、用戶體驗、可用性以及與創建和構建出色的數字產品相關的其他主題。 以下是 Medium 上要關注的設計師。

閱讀我認識的每個 UXer 書架上的一些基礎經典書籍,並將它們視為經文。

  1. 唐·諾曼關於設計的開創性著作《日常事物的設計》
  2. 唐諾曼的情感設計:為什麼我們喜歡(或討厭)日常事物
  3. 史蒂夫克魯格的別讓我思考
  4. Jeff Gothelf 的精益用戶體驗:應用精益原則改善用戶體驗
  5. Jakob Nielsen 的可用性工程
  6. Susan Weinschenk 的每位設計師都需要了解的關於人的 100 件事

閱讀有關可用性指南、交互設計原則和 UX 最佳實踐的信息性在線資源:研究、白皮書、文章等。

  1. 交互設計的第一原則
  2. 來自 NNGroup 的全套 2,397 份可用性指南(跨多個報告)
  3. 來自 NNGroup 的 10 個用戶界面設計可用性啟發式
  4. Baymard Institute 文章:Baymard 研究電子商務網站上的行為
  5. UX 精通文章:UX 的一切

最後,將這五個 UX 播客添加到您的 iTunes 資料庫中:

  1. UX Pod:與 UX 設計師討論以及一般的可用性
  2. Inside Intercom:採訪領先公司的頂級設計師
  3. 面向熱衷於平衡業務、技術和用戶的用戶的 UX 播客
  4. UIE 播客:用戶界面工程對設計世界的見解
  5. 真北:揭開突出設計測試和研究的設計故事

• • •

進一步閱讀 Toptal 設計博客:

  • UI 設計最佳實踐和常見錯誤
  • 空狀態——用戶體驗中最容易被忽視的方面
  • 簡單是關鍵——探索最小的網頁設計
  • 移動界面的啟發式原則
  • 可讀性設計——網頁排版指南