交互设计的5个常见错误

交互设计从来都不容易。它包括了用户行为的深度分析,和一丝不苟的规划。随着新技术和交互设计模式的出现,事情并不会变容易。

艳丽的图片、顺畅的鼠标悬停效果和意外的动画,不再那么容易引起用户注意了。但难题却没有解决——如何创造令人愉快的用户体验,让用户面带笑容完成转化?如果你对常见的设计陷阱有所警觉,就能更少犯错。

9

为了方便——可能也为了让你知道你不是独自一人——以下总结了最常见的交互设计误区

1. 铺天盖地的创新

网页设计师都非常有创造力。我们希望通过作品来表达自我。我们总是在寻求创新的设计方法来脱颖而出。但是,当涉及到交互设计时,创新并不总是好事。甚至会给你的网站带来坏的影响。用户渴望熟悉的事物,他们总是会遵循一些特定的操作方式。

Randy J. Hunt,Etsy的创意总监和Product Design for the Web作者,清晰地陈述过:“嘿,设计师:别再TM自作聪明了。”在文章中,他详细解释了为什么别在网页设计上过分热衷创新。

以Iotorama网站为例。它挺漂亮,音乐深情,但是看着满屏幕移动的球,用户不知所措。不要误解我的意思,这个项目非常出色,超级有创造力!我喜欢这个大胆的创意,但它一点也不直观。

1

还有一个例子。Safety on the Slopes项目背后的创作者想到一个巧妙的交互式图形,用来警告用户冬季运动的危险。非常创新,同时也很直观、有趣、令人印象深刻。

2

2. 令人困惑的导航

不要自作聪明”的准则也可以沿用到导航上。有些设计师试图使用折衷的名称来寻求新颖。比如Chijoff网站就让用户不知道他们究竟提供什么,如何聘请他们。需要看上好一阵子,才能理解“共同创造”页面实际上就等同于“服务”。甚至还有,通读整页后用户仍然不知道该怎么做……页面末尾只有个小注册表单用来获取最新的行业新闻和提示!在“联系”页面也没有表单,只有邮编和邮箱地址。使人们联络或聘用他们非常困难。

3

你能猜出“Universe”在Maison Margiela网站中是什么意思吗?实际上它链接到他们的Facebook主页。谁能想到?

5

相反,看看legworkstudio的网站。它的创意与超凡令人震撼。导航非常清晰不含糊。用户绝对不会迷路。

3. 杂乱无章

有一段时期,网站都试图把一切可能的东西摆上台面。那些日子已经一去不复返,但是很多网站仍然在犯这个错误。看看这个在线商城:

6

设计师试图坚持一种单色配色,但是大量颜色不同的色块、logo和字体,在这个页面上就足够让用户步履蹒跚。搜索框有着醒目的文案:“那么,今天你想要什么?”,但整个布局的外观和感觉非常过时。

EBay是主要在在线零售商之一,在这点上做得不错。没有用产品图片、促销和各种行动召唤塞满整个页面,而是保持它干净简洁,强调他们确实希望用户首先关注的东西,并附上清晰的提示,接下来该怎么做。

7

4. 注意对比,大哥!

对比是创造视觉层级、吸引用户注意特定元素的最重要的方式之一。在网页设计中,对比不仅仅意味着颜色使用,也包括尺寸、形状和位置。

这个网站是最简单生动的例子。他们做到了统一一致,但整体背景和按钮并不够吸引人,尤其是在订购按钮上。

8

相比来看这个。颜色选用很接近,但结果却完全不同。而且,创新的滚动效果,流畅地介绍了产品的新功能——反光材料。很酷,对吧?

91

5. 忽视表单样式

表单设计是用户体验最基本的部分。每个网站都有一个目标——无论是树立榜样、直接售卖产品或是提供信息。不幸的是,许多网站有着光鲜的首页,却宁可用长表单和复杂的验证码来使用户厌烦致死。除非用户有强烈的先导动机,否则他们就会离开。

有了JCF这样的有效的跨浏览器的解决方案,是时候忘记那些丑陋的默认表单元素了,转向一种更加沉浸的用户体验吧。

10

另一件气人的事,是表单要求太多信息,或者没通过完善测试。例如sketchybusiness.io的表单高亮显示了所有的空白框,甚至包括非必填项。

11

如果你看了mostlyserious.io的表单,你绝对会喜欢它的鼠标悬停和按钮按下状态。而且,“别害羞”的提示文案增加了一丝亲切幽默的感觉。

12

最后……

不要懒于测试!对你重要的对于顾客未必重要。他们在哪里遇到问题卡住?是导航、奇特的视觉差滚动效果、还是长时间加载的视频?用户测试的最大好处之一,是你可以通过用户的视角来观察,关注他们的需求、做出改进。不要抑制你的创造力。要牢记网站访客可能会感到困惑和沮丧。

你见过最糟的交互设计错误是什么?可以在评论中分享你的想法和故事。


原文链接:http://designmodo.com/5-interaction-design-mistakes/

作者信息:
Anna Lisnyak
Anna Lisnyak is the Art Director at PSD2HTML.com, the leading PSD to HTML and web development company. With over 8 years of graphic design experience, Anna is an avid reader and blogger. She has an exceptional eye for details and enjoys everything related to typography, web and UI/UX design.

http://colachan.com/post/3458

原创文章,作者:ioued,如若转载,请注明出处:https://www.iamue.com/10547/

(0)
iouedioued
上一篇 2015-11-09
下一篇 2015-11-09

相关推荐

  • 沃尔沃自主驾驶概念交互设计欣赏

    沃尔沃自主驾驶的概念交互设计来自设计师Keke Le用户调研 |  HMI设计 |  UE/UI设计 |  HMI培训  |  HMI评测  | 体验咨询

    2018-03-21
  • 【用户体验.春节特辑】我拿什么记住你(总第268期)

    亦可访问www.koushutianxia.com了解详情编家谱   修家史   留视频建祠堂   亲互动   传万代总第268期时间是这个世界上最锋利的武器,没有任何事物能够阻挡。所有的一切,人、物、事都随着时间的磨砺逐渐模糊、逐渐消逝。父亲的突然去世,一直是我心中最深切的痛,他的离去是那样的突然,突然到我完全无法接受他已经永远离去的事实。总觉得父亲依然还在,总会幻想我下班回家,父亲还会像往常一样在门口笑眯眯的看着我说:“回来啦,儿子...

    2018-02-19
  • 【交互设计】在人工智能实验室做产品设计是怎样一种体验?

    ‍当你看到这行字时,我知道我已经成功把你“引诱”了过来——用“人工智能“这样一个令人“哇”的字眼。我猜,你是设计师?产品经理?”人工智能+设计师” 这个搭配正好戳中了你那满满好奇蠢蠢欲动的心。一年前误打误撞加入了…

    2017-08-01
  • 交互设计——绘制流程图

    在上一篇文章中了解如何寻找接触点、梳理接触点,在这篇文章中主要就是如何来绘制流程图。现在普遍对流程图的分类有四种:业务流程图、页面流程图、功能流程图、程序流程图。在这主要通过现有的APP分析来进行区分不同流程图以及如何交互设计师或者产品经理选择应该使的流程图。何为流程图在上文中讲到了流程,流程是事物进行中的次序或顺序的布置和安排。流程是自然而然就存在的,它可以不规范,可以不固定,可以充满问题。而流程图的核心就在于如何排布事物进行的次序,...

    2018-05-06
  • 【总结】我的产品工作心得

    作者:Wiki 由于负责公司UED工作的原因,经常会和公司的产品经理/交互设计师沟通需求,他们每天都会很忙,时刻都在修改网站,优化app,但我从没看出他们忙的价值在哪里?原因是,很多人只是依照某BOSS的指示去做一些意淫…

    交互设计WiKi 2015-06-08
  • 38个界面设计技巧

    1 尽量使用单列而不是多列布局单列布局能够让对全局有更好的掌控。同时用户也可以一目了然内容。而多列而已则会有分散用户注意力的风险使你的主旨无法很好表达。最好的做法是用一个有逻辑的叙述来引导用户并且在文…

    2014-10-28
  • 网易UEDC的交互设计书单 (上)

    为什么列这个书单?常有读者留言:想要学习(或精进)交互设计,有什么书可以推荐的?其实网上已经有很多交互设计的书单可以参考啊,那么我想读者问这个问题的真正含义应该是:有哪些书是真正值得读的?于是我们让…

    2017-08-04
  • 设计的组件化

    我们在设计一个系统的时候会不可避免的与各个不同的角色互动:不同的设计师、不同的前端工程师,这其中不可避免的会出现大量的沟通和协作问题,如何在这类多角色互动中提高效率,降低沟通损耗就不可避免的成为一个…

    交互设计 2016-06-16
  • 实例分享|在界面排版中,需要注意的七大原则(下)

    在上篇《实例分享|在界面排版中,需要注意的七大原则(上)》大家了解了界面排版的前四个原则,今天接着将后面三个原则也分享出来。一、亲密原则
    二、对比原则
    三、平衡原则
    四、相似原则
    五、简洁原则
    六、封闭原则
    七、情感原则

    2017-05-08
  • 无形的设计!聊聊为应用创建「一致性设计」的几个原则

    「一致性」可以理解为统一或者更通俗的规范,这篇文章有一定深度,作者从多方面阐述了一致性对于UI设计的重要性。最后给出了为应用创建“一致性设计”的几个原则。下面让我们来阅读发表在Medium上的,由交互设计师兼工程师的Joe Toscano创作的文章。我们在创造某些体验后,需要一些理由给它们做出定义。伟大的设计是无形的,因为他们具有一致性,并让人熟悉。

    2017-05-24