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

文章目录[隐藏]

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

作者: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

相关推荐

  • 一年多的时间中经历2次爆发,Faceu在运营方面的过人之处在哪?

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

    交互专题 2017-08-07
  • 交互设计自学攻略

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

    2015-08-19
  • 教育产品组件化交互设计的实践与思考

    作者:王媛媛   组件化设计,就是设计模块化,组件可复用。是以通用化的视角审视模块设计,根据业务方需求支持多个产品的接入与使用。在线教育领域内,题目是线上线下教学场景内校验学习的一种基本方式,同时,题目…

    交互专题 2017-11-13
  • 阿里设计师实战案例解读内容化设计

      前言 如果说好的产品是运营出来的,那么内容作为用户体验中的重要部分不容忽视。然而我们在设计中经常缺乏内容体验的意识。借着第十三届用户体验大会User Friendly 2016的分享,手淘的设计师和业内的同学们一起做…

    交互专题 2017-08-07
  • Axure神器:用母版打造模块化设计【UXRen原创】

    作者:Petrel(UXRen社区Axure金牌讲师,资深交互设计师) Axure原型的制作过程中,你一定遇到过这样的问题,出现在不同页面的功能模块,如果你是通过复制粘贴来完成的,那么当该模块发生变动需要修改时,麻烦就大…

    2017-08-04
  • 欧洲(非英国)交互设计申请攻略

    今天为大家带来欧洲(非英国)地区交互设计专业留学申请攻略,从学校/专业/费用等方便分析每个学校的优缺点,让大家在选择学校时更有的放矢。 1.代尔夫特理工大学/Technische Universiteit Delft 学位:Master of S…

    2015-11-04
  • 内容为王的时代,阿里设计师用实战案例解读内容化设计!

    作者:阿里设计师   编者按:什么是内容化设计?设计师为什么要关注内容?如何通过设计的手段提高内容体验?阿里设计师用一个手淘的实战案例,帮你掌握内容化设计的精髓!   前言 如果说好的产品是运营出来的,那么…

    交互专题 2017-08-07
  • 如何做让老年人也能方便使用的网站【UXRen译#176】

    作者:保罗•克瑞斯顿(Paul Crichton)  |  翻译:阿陌,校审:天蛙   英国有近三分之一的人口都超过50岁。 他们在2015年的网络消费额就达到了14.45万亿英镑。 他们中76%的人会每周至少一次进行网上购物。 50岁以上…

    交互专题 2023-03-03
  • 用户体验设计必须知道的产品9种状态

    作者:Yjjj @ UI设计狮联盟   之前在脉脉上有看见过有人提到的这12种状态,但是明确的说应该是用户在使用产品时的状态,但是细想之后觉得有几个状态应该修改一下,那么我们重新定义为9种状态吧: 等待 初始 寻找 无…

    交互专题 2017-08-07
  • 进阶必读的15本交互与用户体验设计经典书!

    今天小创整理了交互设计与用户体验设计领域的经典书单推荐给大家,不过真的想要在交互、用户体验领域的学习有所提升,除了读书外,多下载APP,多研究热搜榜上的应用,同时iPhone、Adroid等各类设计规范,是最好的交…

    2015-11-03