总结网站Web端交互式设计的一些误区与注意点

发布时间:2021-11-02作者:帝国建站网

交互设计的5个常见错误

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

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

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的表单高亮显示了所有的空白框,甚至包括非必填项。

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

最后……

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

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

交互设计需要注意什么

1、一看就懂

这个说起来挺好理解的,就是让用户直观的理解产品功能,而事实上,这个概念包含的东西太多了,这里简单说下常见的2点。

图形化:图片相对文字来说,所承载的信息更直观,也更能渲染气氛,给用户留下更深的印象。常见于各种小图标,比如下载按钮,通常会看到用一个向下的箭头来表示。对于重要的按钮来说,一般会将其图形化,就算没有采用小图标来辅助表达,也会采用“色块”来讲“文字”图形化。

文字:刚说了图形化,其实并不是说,所以文字都可以用图形来替代,文字的存在还是很有必要的,特别是一些具有“独特性”的功能按钮,用户接触得少,没有相关的理解经验,难以图形化。大多数情况,文字不会删去,而会保留,辅助说明图形内容。文字还有一个很常见的问题,就是文字太多,用户没有耐心去看,或者看完后没有理解到所表达的核心。在设计的时候,要将文字删了再删,把“介绍文段”变成“产品口号”,有助于用户更好的了解产品。用词也很重要,如果产品定位是专业人员使用,那么可以使用一些专业术语,如果不是,请把各种专业术语“平民化”。

这一点,更偏向产品的表面形式,这需要交互设计师跟视觉设计师相配合,把产品页面中,需要突出的重点,更视觉设计师沟通好。这一步,也是用户感觉这个产品好不好用,最先接触到的一层,即从视觉效果反馈的结果。

2、一用就对

这点可以说是”一看就懂“的骨架,更多涉及产品的框架,让用户眼中的产品跟设计的产品一样。

归纳:同类功能归到一起去,这就像电商网站的导航,把各种商品归纳分类。在这里,交互设计师需要根据需求档,整理产品的框架,然后把同一类型的功能归到一起去。归纳说起来挺容易的,但是做起来涉及的因素就比较多了。经常看到一些产品,把同一个功能,重复出现在同个页面中,这种做法,不一定是不合理的。比如:登陆功能,一个页面经常有多个入口,一般也是合理的。在工作中,最常遇到产品经理想要突出某个新产品,明明这个产品功能应该归到A页面,但是产品经理要求去B页面宣传,这时候就要留意,这个位置是否合 理了。(这里要展开也讨论的话,都可以单独写一篇了,这里就简单举个例子:在电商里,如果把“手机套”放到“手机页面”去宣传,这里不一定是框架错了,如 果把“手机套”放到“电脑页面”去宣传,这里的框架就有问题了。)

一致性:这是交互设计最基础的知识之一,保证产品各种元素的一致性,不要让用户迷茫。比如标题的一致性,同一个功能,这里用A来表达,到了另一个页面,也要用A来表达。这里保障用户不会在使用过程中迷茫的基础。除了产品本身要保持一致性之外,在于产品所属的行业来说,这点还有一些有趣的方面可以讨论。对于产品的同行,特别是该行业中的老大,他们的设计是怎 样的,这点需要交互设计师去了解清楚。因为用户长期使用这些产品,会养成一些操作习惯,比如现在很多信息类APP,下拉代表刷新页面,如果你设计的信息类 软件,没有这个功能,那么在用户体验上,就会有所影响。

这点说白了,就是要搭建合理的结构框架,也是交互设计师工作的核心之一。保障用户操作顺畅,就靠它了。不过这里的标题“一用就对”,其实也不太严 谨,因为产品一般都允许用户“试错”,用户可以通过错误操作,来学会使用产品。这里就引出了下一点反馈的内容了,当然,这个错误不能是“致命错误”。

3、别发呆了

这点主要讲的是“反馈”,反馈也是交互设计的一个基础知识,涉及的范围挺广,但是核心就是要让用户别发呆,了解当前的操作,明白怎么去操作。

错误各种错误操作的反馈提醒,这点需要交互设计师去发现,一个产品可以存在的各种情况,简单点说,就是找茬,还不能找太少。比如:留言超过100个字符怎么办?再极端点,服务器空间不够,保存不了留言怎么办?用户短期内持续留言,服务器超负荷怎么办?这些情况都需要交互设计师考虑好,当然有些涉及开发编程的内容,这部分内容就需要跟相关技术人员沟通下。考虑后,还需要给出适当的视觉提醒,比如,提醒“你刚刚已经留言了,我们会尽快回复,如需补充内容,请30秒后重试”。

等待漫漫的等待,是大多数用户无法忍受的事,如果还没有适当的提醒,用户基本不会继续等待。对于长时间的等待,最好有具体时间倒计时,而不是以单纯进度 条的方式。而对于1-5秒之类的短时间等待,有时候采用纯进度条的方式会带来意外的收获。比如在游戏的跳转过程,因为读取数据需要等待,而这个过程大概要 2-3秒,这时候,如果采用读秒的方式,用户容易产生烦躁,特别是需要重复操作时,容易让用户觉得,游戏没优化好,怎么这里还要等待2-3秒啊;如果采用 进度条的方式,用户会把对游戏加载慢的原因,怪罪到自己的设备配置低。

导航导航相对于产品的游园指南,除了告诉用户有什么东西外,还承担着用户的指南功能,时刻告诉用户,当前位置在哪,不要让用户迷路了。这也是交互设计的基础之一,适当的指引,别让用户发呆。

反馈虽然也是属于表面层,但是这部分工作却是交互的重点之一。

4、总结

一看就懂,通过视觉上的优化,让用户更直观的理解产品功能

一用就对,通过产品框架上的优化,让用户更顺畅的使用产品

别发呆了,通过用户的眼睛,让用户开开心心使用产品

小技巧:

(1)设计好一个产品后,把文字重新读一篇,思考,如果这段文字删了,会不会对用户使用造成影响,不会的话,那就删了吧。

(2)随便打开一个页面,然后看看有没有合适的“当前位置”指南,会不会迷路,如何返回之类的。

(3)重新检查一次里面的用词/图标,是否一致。

(4)常见的遗漏情况:软件/硬件(兼容性问题比较常见);网络状态(无网、超时、慢等);转场(过程是否可以取消,是否有反馈等)

(5)大必杀,找几个“新用户”(没有接触过该产品的人),看他们操作。

写在最后,情感化设计,从我大学开始,就一直对这块内容很感兴趣,而如今作为一名初级交互设计师,我觉得情感化设计可以更好的融入产品之中去,就比如各个网站的404页面,这个页面的设计也间接表达了各个网站的情怀。

上一篇:营销型网站建设需要考虑哪些方面 从企业自身说起

下一篇:网站有收录无排名怎么办?从这几个细节入手