第三方帐号登录

第三方帐号登录

使用邮箱登录

找回密码

全站搜索 传播新资讯,发掘源创意!

UI交互设计的5个常见错误

2015-09-02  6557

本文介绍了一些普遍存在的交互设计误区,学习如何避开它们,可以解决绝大多数网站的问题。

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

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

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

1. 铺天盖地的创新

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

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

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

 

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

 

2. 令人困惑的导航

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

 

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

 

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

3. 杂乱无章

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

 

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

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

 

4. 注意对比,大哥!

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

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

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

 

5. 忽视表单样式

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

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

 

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

 

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

 

最后……

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

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

原文链接: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.


诚邀设计同行分享干货、文章、报告等
投稿请发邮件 yaqi@gewuer.com
新闻报道及人物专访 804509071
1   4988

文章评论(0)

发 表