对漂亮应用程序设计的咆哮

已发表: 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 设计最佳实践和常见错误
  • 空状态——用户体验中最容易被忽视的方面
  • 简单是关键——探索最小的网页设计
  • 移动界面的启发式原则
  • 可读性设计——网页排版指南