_看看不良设计的例子与好设计的反实例不仅有趣,而且为设计者吸取了重要的教训. 它们突出了设计者避免的陷阱,让我们了解如何将设计理论转化为在现实世界行之有效的解决办法。 美国作家、研究员和可用性专家贾里德·斯普尔曾说 : “ 良好的设计,当它做得好时,就变得无形。 只有在做得不好时,我们才注意到。 让我们看看五个明显不良设计的例子, 照亮设计如何有效,
□□一. 信息超载
洛杉矶的停车标志
洛杉矶的停车标志几十年来一直是信息超载的缩影. 他们总是很难理解, 因为交通规则复杂,
这些迹象有多混乱? 从2010年代开始,
随着洛杉矶停车标志的去,这个例子已经是一个相当简单的例子.
Jorge Gonzalez, CC BY-SA 2.
想象一下你是周二早上9点 沿着这条路的司机 你能在这停车吗? 听起来简单的问题需要很多精神处理才能回答.
作为设计者,我们经常面临我们必须设计出许多信息在小空间展示的情况。 洛杉矶的停车标志可能是一个极端的例子,但多次为移动应用设计意味着面临同样的问题. 停车标志和一般的设计者都有出路吗?
尼基·西利安滕的停车标志
设计一个显示所有信息同时容易理解的标志,听起来是不可能完成的任务. 布鲁克林设计师Nikki Sylianteng就是这样做的。
Nikki提议的停车标志最终被洛杉矶用作试运行的一部分.
Nikki Sylianten, CC BY-NC-SA 4.0 (英语).
Nikki的设计效果良好, Nikki意识到,司机只是想知道他们是否可以在某处停车. 是或否-这是所有司机所需要的,
她的设计使用视觉而非文字来传递信息. 结果是令人难以置信的直观—— 绿色的OK,红色的不停车。 连彩色盲人都设计,
星期二上午9时, 栏杆显示什么是一目了然。
经验教训: 最佳做法
- 了解用户需要什么,然后在此基础上设计. 这有助于减少信息超载。
- 如果您有许多信息需要传递, 请尝试使用视觉而不是文本. 在这里更多地了解数据可视化.
□□二. 神秘肉类导航
坏消息:LazorOffice.com
1998年由Web Pages That Sucks的Vincent Flanders(英语:Vincent Flanders)制成,"神秘肉类导航"(MMN)是指一个链接的目的地在用户点击它或者指向它的光标之前,无法看到的情况. “神秘肉”一词指的是在美国公立学校食堂供餐的肉类,这些肉类经过加工后,其确切类型已不可辨识。
MMN是坏的,因为它降低了导航元素的_发现_. 这增加了用户的认知负载,因为他们现在必须_guess_如何导航或者点击什么东西做什么.
多数MMN在较旧的网站上, 以拉佐尔办公室为例,是一家创建预制房屋的设计公司.
LazorOffice.com主页上有MMN图像的网格. 如你所见,这张桌子 几乎没有说明该去哪里 相反,9幅图像只是坐着,让我们有些人思考一个谜题,而不是与一页互动。
拉佐办公室、专卖局长、公平使用
在他们主页的折叠下,一个图像缩略图的网格在等待. 它们可以点击吗? 是的 如果你把鼠标光标移到图像上 它会变成指针 但你点击一个图像会怎样?
“点击查找!”从来都不是一个很好的用户体验(UX)解决方案。 您的用户可能会放弃导航,
Good:互动设计基金会网站的课程卡
幸好MMN问题很容易解决. 关键是要意识到,您必须明确标签链接。 仅仅添加鼠标悬浮上的“视频项目”将会提高拉佐尔办事处上面的网页的可用性。
我们的课程卡和链接一样不神秘
互动设计基金会,公平使用
对于互动设计基金会的课程卡,我们不仅在每张卡片的底部有“View Course ” 来表示将要发生的动作,而且我们还有“上路”的文字的徘徊状态。 许多网站也遵循类似的惯例,
经验教训: 最佳做法
总是标注你的链接! 也不愿点击神秘链接。
□□三. 向用户动作添加闪存
QQ Bad: iFly50.com (中文(简体) ).
作为设计者,我们应该极其谨慎地在用户动作中加入摩擦,除非关键在于_dissuade_用户执行此动作. 然而,有时,我们甚至可能无意地(主要是由于美学或新颖的原因)对用户造成有害UX的动作进行摩擦。
一个例子是iFly50.com,由KLM为_iFly_杂志的周年纪念而创建. iFly 50是一个垂直滚动的网站,显示50个旅行目的地,在一些目的地(如下面的目的地),一个靠近底部的按钮要求用户点击并按住几秒钟以查看更多的照片.
(单位:千美元) Fly 50期望它的用户在每次想看到更多照片时点击并握住几秒钟.
Koninklijke Luchtvaart Maatschappij NV (KLM 荷兰皇家航空公司),公平使用。
在每个动作中增加几秒摩擦的动作,可以造成极其贫困的UX. 想象一下,如果点击而不是立即加载一个页面,你现在必须点击并握住两秒钟,以在浏览器中点击_每个_链接。 网路在几度点击后,
我们的设计者常常被最新的交互风格或动作所忘却,但当你的设计可能给用户动作增加摩擦时,必须始终保持谨慎. 大多数时候,经过试验和试验的公约(例如,简单的点击或刷卡)运作得完美。
iOS上的弹性滚动
有趣的是,在用户动作中小心添加摩擦可以导致_great_设计. 苹果公司在其移动操作系统iOS中最受欢迎的发明之一是创建弹性卷轴,在某些情况下(如网页结尾)卷轴越来越困难.
在iOS的弹性卷轴中,在某些情况下会刻意添加摩擦.
互动设计基金会,公平使用
可以在上面的动作中看到这一点,当用户滚动到网页结尾时,摩擦会增加. 加入了Friction,以表示滚动是_不再允许_的结果是一种直观的经验。
经验教训: 最佳做法
尽量避免在用户动作中增加任何摩擦——并在没有其他选择时小心执行.
□□四. 忽略可用性的“ Clever” 设计
恶人:Bolden.nl
有时,聪明的设计可能对UX不利. 让这个错误更危险的是,我们设计师喜欢聪明的设计. 这些小的图形奇迹给我们带来微笑。 可悲的是,大多数人类都是_不是_设计师. 甚至更悲哀的是,并非所有聪明的设计都是好的设计,特别是当它们创造了无障碍,可发现性或使用性问题时.
例如,
你能知道他们的主页想说什么吗? 是吗? 这是因为你必须把鼠标移到页面的角落,
博尔登,公平使用
这是一个聪明的设计? 是的,当然。 但这样设计不好吗? 当然!
博尔登, 公平使用
这是为_设计者(而不是用户)设计的伟大例子,网站在创作者提供新设计的决心中严重降低了网站头条的清晰度。 用户应该把鼠标移到角落, 这意味着头条的发现依赖于_happensance_。 此外,即使标题被披露,由于您仍然可以看到重叠的文本,所以文本与背景的对比也很差。 这一切加起来会创建一个用户-un_友好网站.
QQ好:栽培Wit.com (中文(简体) ).
种植 Wit网站是一个很好的反例,
种植 Wit的网页上显示的是一只插图猫头鹰。
栽培的宽度,公平使用
培养 Wit 的主页 猫头鹰在鼠标上移动时眨眼的插图:
惊喜! 惊喜吗? 猫头鹰用光标指着你 注意白空间的明智分配也.
栽培的宽度,公平使用
这里的关键区别在于,这并不构成网站的_基本_部分,因此即使用户没有发现这个巧妙的设计元素,它也不会降低可用性.
此外,它们有明显的向下箭头来暗示折叠下方的东西. 当你向下滚动 你会看到:
网站可以聪明而不牺牲UX.
栽培的宽度,公平使用
这份副本(可辨别且具有良好的对比性)创造了一种智慧感——与博尔登试图实现的并不相同——而不降低网站用户的经验。 唯一小的问题是“加入我们的电子邮件俱乐部”的文字应该更加清晰,
经验教训: 最佳做法
聪明的设计应始终尽可能做到防伪和/或对实际用户进行测试。 有时,聪明的设计会反射,并伤害可用性.
□□五. 超级流体动画
坏: Dribble 的 PayPal 接收概念
动画是互动设计的一个关键要素,但它们应始终服务于目的. 为了动画, 不幸的是,设计师往往与动画有爱情恋情,部分原因是动画如此有趣,创作到我们可能不知道何时停止.
Vladyslav Tyzun在Dribbble上张贴的PayPal电子邮件收据的动画概念,
动画虽然漂亮,但还是多余的. 总共需要3.5秒才能看到交易细节。 简单的收条的淡出会更加优雅,因为它花费的时间更少,对用户来说也更好.
弗拉迪斯拉夫·蒂宗,公平使用
当设计者似乎得不到足够的动画时, 截至2016年,Vladyslav的动画将获得超过500个喜欢和8000个观看. 这显示了设计者对动画的误解。 了解设计者倾向喜欢史诗而不是更直接的表述,在向动画投稿之前抓住自己,可以节省你很多时间,防止许多头痛。 请记住,用户来网站的目的——我们想在短短的空间和时间里向他们展示他们追求的东西,而不是在画廊的盛大的巡演中扣留他们.
获取“ Bad UI 设计错误以及如何避免它们” 的自由模板
QQ 好: 条纹检查的动画
但是,当我们做动画... 目的... 当用户收到校验代码时, 请查看 Strape 的动画 :
Frade使用动画让事物看起来比它们更快:它向用户提供更新(如"Sent"),尽管他们可能还没有收到短信. 这可以防止用户对不得不等待感到沮丧,并可以保证短信正在路上。
公平使用
在W3C的网络动画专家Rachel Nabors提出五项原则,
- ** 故意**: 在每部动画创作前先思考一遍.
- ** 需要12项以上的原则**: 迪士尼的12条动画原则为电影工作,但不一定为网站和app服务.
- ** 有用和必要,**** 如此美丽 ** : 美学应该把后座带到UX.
- 速度快四倍**: 好动画是无侵扰性的,这意味着它们跑得很快.
- 安装杀机开关: 对于大动画,如parallax效果,创建一个选择退出按钮.
经验教训: 最佳做法
动画总是有目的的 太多可以杀死一个产品的UX。 美人必须拉起重量,发挥功能.
以设计不良为例, 幸运的是, 以下是从好坏设计的五个例子中汲取的主要经验教训和最佳做法:
- **了解用户需要什么,然后提供这些信息。
若您有许多信息需要传递,
- 始终标注你的链接! 用户不喜欢神秘链接。
除非他们想阻止行动,
- 测试你的聪明设计 并小心地纳入其中。
- **动画就像咒语。 如果你过度使用它,它会失去它的所有影响.
下次你会在设计不好的情况下皱眉, 停下来思考:理解为何设计失败, 然后分享爱:在讨论论坛上与其他设计师分享你的教训!