【译文】来看看糟糕的用户体验如何毁掉一个设计

文章目录[隐藏]

【译文】来看看糟糕的用户体验如何毁掉一个设计

作者:JAKE ROCHELEAU;译者:岩盐盐盐

 

谷歌团队近几年的数据研究表明,用户体验的重要性在网页设计中越来越突出。然而现在还是还有好多网站采用中心提示用来阻碍网站的可用性,它们有些疏忽导致,有些确实故意为之。这种故意通常都是为了达到销售目的而设置的。

但是,我们作为设计师,就是为了提高用户体验而战的,当中最好的方法就是反思那些不好的例子,然后加以改善提升。所以接下来让我们来看看坏的用户体验是怎么样的,了解它们为什么会出现和应该怎么样修正。

 

1、多余的窗口

弹窗其实是一种非常高明的想法,它能够让开发者在页面当中不依靠JavaScript就能置顶在页面上。其实弹窗并不是问题,问题是这种“多余”的窗口总是在拉低用户的体验感数值。总的来说,这些不需要的窗口可以分为三类:

  1. 鼠标不在页面当中时在标签页上出现的窗口
  2. 打开页面后几秒钟就会出现的窗口
  3. 用户滚动鼠标下拉页面不久出现的窗口

你可以看看以下弹窗的例子:

【译文】来看看糟糕的用户体验如何毁掉一个设计

MaxTraffic post

尽管我经常斥责这样的页面,但是从市场营销的立场来看,这种窗口是有效的。所以问题的核心并不是为什么这样的窗口会存在,而是你觉得你的网页是否需要添加一个这样的窗口。

为了得到高转换率而惹怒用户值得吗?

如果你关注的是极好的用户体验,那么答案肯定是不值得。尤其是谷歌现在开始会对使用没有交互作用的烦人窗口的网站进行警告,这种降低用户体验的事当然是尽量别做啊。

其实在UI设计当中,这些弹窗的设置都是有目的性的,不过有时候因为内容的关系经常被人嫌弃就是了。对于注册或者问卷类的弹窗用户一般都愿意点击鼠标,不过那些出现得很频繁的广告就很惹人烦了。特别是那些拼命点击背景都关不掉的弹窗真的是让人非常抓狂。尽管这些广告弹窗毁掉了每个人在网页上的用户体验,但不得不承认它们的转化率真的好高。

 

2、勾起愧疚感的文案

我承认近年来这种类型的文案成为了趋势,不过在读了Katie Notopoulos的文章以后我才敢写写这一点。她用了很多优秀的例子来力证这种让人觉得有愧疚感的文案是如何通过惹恼用户来提高网站注册率的。

这种文案会出现在上述所有类型的弹窗上面,但是也会出现在注册或是问卷表格上。下面来看看Good Housekeeping这个置顶在页面想要人们点击的糟糕弹窗:

【译文】来看看糟糕的用户体验如何毁掉一个设计

如果用户点击了关闭窗口,就会有一种莫名的愧疚感,这就是它的目的。套路就是在关闭窗口的按钮上写上一个荒谬的观点,而这个观点其实根本跟关闭窗口没有任何关系。

又例如,有一个弹窗的内容是免费获得关于网页设计的电子书,它的订阅按钮非常直接明了,但是取消按钮却写着“谢谢,我就喜欢设计一坨翔”。Tumblr就是这种羞辱性文案的忠实用户。

这又是一个典型的运营技巧,但是对用户体验来说真的完全没有价值。

 

3、全屏占据

不用怎么解释,也能感受到全屏的置顶方式怎的让人十分讨厌,它的流行程度不亚于弹窗。它们通常占据并且锁定了整个页面,除非你关闭窗口,否则什么都无法浏览。最可恶的是,有时候甚至根本无法关闭。

【译文】来看看糟糕的用户体验如何毁掉一个设计

Backlinko是一个提供SEO技巧的好网站,但是糟糕在于老是过度卖广告。用户第一次浏览页面的时候,眼球都会被一个全屏的页面所占据,它的背景却是一个谷歌搜索结果页面的视频,让人觉得又丑又困惑。

一个小到可以说看不到的X设置在右上方的角落,“no thanks”也写得比其他文本要小,不留意根本很难注意到。对于手机端来说这样的设置简直就是噩梦,类似的例子多不胜数,更可怕的是这样的页面居然成为了一种趋势。

 

4、侧栏广告和浮窗

有时候你滚动页面的时候,会发现页面旁边会有一个小窗口也跟着滚动,它们通常是邀请你填写反馈,或者是社交媒体分享、广告之类的。一般而言我都会接受这样的窗口,只要它们能静静地在旁边待着。但是如果是像AccessPress这样同时在两边都有。窗口的页面,我是拒绝的,更别提有时候甚至会有三个窗口出来妨碍我浏览。

【译文】来看看糟糕的用户体验如何毁掉一个设计

并不是要批评AccessPress或是其他同类型的网页,只是举个例子说明用户体验是如何在糟糕的道路上越走越远的。

如果有客户让你设置侧栏广告浮窗,尝试一下让它们变得顺眼和舒服。例如,不要用“叮叮叮”的提示音,别用闪烁变化的图片,最好还不要加奇怪的动画进去。如果用户想要了解更多信息,他们自然而然就会花时间点进去看。

 

6、自定义滚动效果

到此为止提到的很多例子,带有些市场运营扯上了关系,因为就像Gary V所说的:商业化毁掉了所有东西。

但是自定义滚动不能怪罪于任何人,这并不是最近才出现了,它更像是一种过时了的网络设定。现在谷歌浏览器已经有了一个让用户自行修改自定义滚动的功能了。

像是Click and Grow这样的网站,现在还用JS编写的自定义滚动来引导用户浏览网页的,实在是有点让人心烦。

通常页面滚动的时候,都会有一两个动画效果,不是当你想看剩下页面的时候没有任何缓冲唰地就过去了,就是换得太慢了使人忍不住滚动鼠标。为什么会有设计师觉得这两种效果会比默认效果好啊?太反人类了!

我所观察到的新趋势就是,将自定义滚动绑定到单个页面当中。这种页面就像是篇幅很大的全屏中的“一部分”,每一次鼠标的滚动,只能往下看下一个部分。例如Gladly的主页就采用了这种方式。

【译文】来看看糟糕的用户体验如何毁掉一个设计

类似这样固定式的滚动,让用户失去了控制权。Gladly的设置是人想要完成整个页面浏览就要花不少时间。但是互联网阅读时代,人们的看什么都快,所以其实无论是哪种自定义滚动最终都会降低用户体验。

 

6、导航栏没有点击区域

这是一个很难解释的趋势,但是你们都肯定看过。导航栏是网站必不可少的一部分,通常都会有点击的区域。然而现在有些导航栏却无法点击了,变为了引导人们点击文本本身。实在是让我抓狂!

其实只要花30秒的时间在CSS写法改一下,就能让用户点击导航栏文本附近区域也能跳转页面了,而导航栏外观不需要改变,多简单啊!

Tilde’s navigation就是一个只能点击文本跳转的鲜活例子,但是它们的手机端却能点击文本周围的区域跳转,简直要疯。

【译文】来看看糟糕的用户体验如何毁掉一个设计

只要随便打开一些网站,你都会发现当中不少网站都明白导航栏这一点微妙的细节是多么的重要。像Think With Google一样,它们的导航栏就有点击区域。

【译文】来看看糟糕的用户体验如何毁掉一个设计

在你的脑海中记住这一点,因为尽管它只是一个很小的变化,但是对用户体验却有着巨大的影响。

 

7、将文章分为一页一页

最后的一点,不过不是我讨厌的一点。至少我在这种要一遍遍戳下一页的博客当中享受到了乐趣。但是应该不会每个人都像我一样喜欢这样不断点“下一页”按钮来继续阅读的网站的,其实这种完全不考虑用户体验的网站并不罕见。

【译文】来看看糟糕的用户体验如何毁掉一个设计

这种趋势主要是因为浏览量和广告收入挂勾了,这也是为什么设计师很难去控制它们,但是这事关用户体验,网站管理员或者是设计师都要努力尝试去避免这样的多页面文章的出现。

我可以想象得到有多少人日常上网的时候会因为这些页面而抓狂,所以我才希望通过这篇文章,让设计师知道避开这些坑设计出更好的网页。

 

最后

以上就是七个在UI设计上应该避开的问题,赶紧查漏补缺看看自己有没有犯错误或者准备犯错误吧。如果老板或是甲方想要你往坑里走,试着用这篇文章,说服他们吧!

原文来源:Web Design Blog

文章转载来源:优秀网页设计(公众号:youshege)

 


推荐阅读

从“注意力”的角度谈体验设计如何避免入坑

设计效果检验之道

【案例解析】设计思维方法赋能设计落地

【视频课】6周锻造1名优秀的产品设计师

如何设计完美的移动端表单【UXRen译#169】

 

UXRen公众账号
关注UXRen微信公众号(cnUXRen)

UXRen社区欢迎各界用户体验从业者及学生投稿优质原创文章。投稿请关注UXRen社区公众账cnUXRen(上面有二维码)留言“我要投稿”,小编会及时与您取得联系。

版权声明:除转载文章外,本站所有文章版权归UXRen社区所有,转载请注明出处:UXRen社区,并保留本站原文链接地址。本站部分文章来自互联网及公开渠道,如有侵权请及时联系我们。邮箱:contact@13tech.com.cn

原创文章,作者:震天下,如若转载,请注明出处:https://www.iamue.com/21024/

(0)
震天下震天下
上一篇 2023-03-03
下一篇 2023-03-03

相关推荐

  • 无限滚屏、分页亦或加载更多,到底怎么选?【UXRen译#139】

    作者:Christian Holst(翻译:xiuxiu  审校:Gogi) 电商网站里展示商品的最佳交互形式是什么?是分页、“加载更多”按钮还是无限滚屏?我们在Baymard机构开展了几项持续整年的大规模可用性测试,研究了50多家主流电…

    2017-08-04
  • 【笔记】服务设计方法及手机操作系统设计

    2017年7月9日,UXRen深圳分舵在ThoughtWorks大型培训教室主办了《手机系统设计、服务设计和可视化思维,这次全都有!》的分享活动,本文基于下面2位嘉宾的主题分享整理而成:   嘉宾1:庞博(ThoughtWorks用户体验…

    交互专题 2023-03-03
  • 搜索结果页优化的10条最佳实践方法【UXRen译#175】

    作者:Nick Babich   |  翻译:猫猫DE爪,校审:兔兔瑶   搜索就像是用户和系统之间的对话:用户键入他们的信息需求作为问询关键词,系统则展现出它的回答作为一组结果。搜索结果页是搜索体验的一个重要部分:它提…

    交互专题 2023-03-03
  • 【交互新人】交互设计面试,常见问题汇总

    作者:高杰   今天给大家分享面试交互设计岗时面试官常问的问题、分析目的和建议回答!但这并不表示你在面试时一定会遇到这些问题。任何一个问题,都不存在绝对正确的标准唯一答案。仅供参考!   1、自我介绍 分析…

    交互专题 2017-08-17
  • 互联网设计的互惠原则:索取前请先给予【UXRen译#187】

    作者:凯特. 迈耶、 金. 弗莱厄蒂 |  翻译:毛毛,校审:天蛙   摘要:人类倾向于回报别人的好意,投之以木桃,报之以琼瑶。这种社会心理学理论可被应用于用户交互设计中,来获得用户的信任并让他们积极参与到你的…

    交互专题 2017-11-23
  • 交互设计师的60日计划之第三天

    此次分享的 [button type="info" text="交互设计师的60日计划" url="https://www.iamue.com/tag/interaction-designers-of-60-days" open_new_tab="false"] 来自 Killa.G 让我们一起跟着学习和并学会做自己的总结与…

    2015-08-20
  • 交互设计自学攻略

    交互设计是一个现在很热的岗位,工资待遇,发展前景都比较好。一些学工业设计,计算机,心理学及相关专业的人都想加入其中。 但国内大学只有少量开设相关的专业,而且集中在设计名校,如(清华,西交大,北理,江南…

    2015-08-19
  • 腾讯多个品牌LOGO重设之思路

    作者:飛兒     在SNG(腾讯社交网络事业群)品牌系统语言里,LOGO系统承载品牌视觉的最核心容器,是整个品牌视觉系统的灵魂,是品牌的精神文化理念、信誉、服务等特点的浓缩表现,直接影响着社交网络品牌的发展。…

    交互专题 2017-08-07
  • 一年多的时间中经历2次爆发,Faceu在运营方面的过人之处在哪?

    作者:思达维琦   1. 产品介绍 1.1 产品形态与定位 faceu激萌是一款主要面向年轻用户(15-35岁女性为主)的自拍P图工具、视频社交工具,在app store中的官方描述为“Faceu激萌—动态贴纸、美颜自拍、视频聊天、卖萌神…

    交互专题 2017-08-07
  • 2018 阿里UCAN设计论坛会议纪要

    阿里UCAN设计论坛会议纪要 1.开幕词—张建锋 阿里巴巴首席技术官 1.1 UED的关键词 用户体验背景下ued未来的两个关键词是创意与智能。从产品的角度来说是与用户的交互和视觉表达,依赖于三个部分: 第一,信息架构的…

    交互专题 2018-04-24