作者都是各自领域经过审查的专家,并撰写他们有经验的主题. 我们所有的内容都经过同行评审,并由同一领域的Toptal专家验证.
Bojan Janjanin的头像

Bojan Janjanin

Bojan是一名精通UX设计的资深网页设计师和前端开发人员,拥有12年的网页和移动设计经验.

工作经验

23

分享

“当所有多余的东西都被丢弃,人类发现简单和专注时,优雅就会实现:姿势越简单,越清醒。, 它就会越漂亮.” 保罗科埃略

网页设计师的任务是创造引人入胜的用户体验, 帮助网站访问者完成任务, 提高转化率. 在这个过程中, 他们通常只关注美学, 走捷径, 并最终依赖于各种常见的设计模式和趋势. 这样做的危险在于,他们可能会被流行趋势所误导, 因此, 常见的用户体验设计错误是由于趋势部署不当造成的.

当涉及到网络时,人们不想这样做 学习 事情,他们想要 do 的事情. 网上有很多这样的例子 设计师 选择只关注视觉吸引力,这样做牺牲了可用性. 他们认为,“惊艳时刻”本身就足以吸引用户. 但遗憾的是, 用户很难理解UI, 使用网站真的有困难吗, 网站的跳出率也直线上升.

As 凯特·拉特 “丑陋但有用胜过漂亮但毫无意义。.“有效使用网页设计模式和趋势的关键是在美观和增值之间找到平衡.

常见的用户体验错误会让人望而却步.

让我们来看看一些常见的用户体验错误.

网页设计常见的用户体验错误. 1:大,固定头

越来越高 粘性的头 能在网站上看到吗. “品牌块”和导航菜单有一个固定的位置,占用大量的空间. 它们一直粘在浏览器窗口的顶部(“粘头”),当内容在它们下面滚动时,它们经常会阻塞内容.

一些大品牌网站的标题高度超过150像素. 它们的价值在哪里?? 固定元素,如粘头可以有 实实在在的利益,但是网页设计师应该小心使用它们——有几个重要的用户体验问题需要考虑.

大的粘头是一个主要的用户体验错误.

粘性导航页眉可能太大而不舒服

如果已经决定使用粘性导航页眉, 最好在用户中进行测试. 这是一个常见的用户体验错误,过分地用内容填充粘性导航页眉. 有了固定的页眉,浏览对访问者来说仍然应该是舒适的. 未能找到适当的平衡可能会导致留给主要内容的空间很小,并且令人窒息, 为游客提供幽闭恐惧症现场体验.

有时有一个简单的CSS解决方案:通过使粘头稍微透明, 人们仍然可以在滚动时看到内容, 哪一个让内容区感觉更充实.

下面是一个高粘性页眉的例子: ATP的球员资料页上罗杰·费德勒.

网站上的大型粘性导航是最常见的用户体验错误之一.

这个站点的粘性页眉高度超过180px! 在一些笔记本电脑上,这超过了整个页面高度的30%:糟糕的用户体验是可以避免的.

没有考虑移动设备上导航页眉的粘性用户体验问题

有些人可能会用大号, 在高分辨率的计算机显示器上,粘性导航页眉可以加快交互速度, 但是移动设备呢?? 毫无疑问,大量的网站访问者将通过移动设备访问网站, 因此,固定标题可能不是最好的主意. 幸运的是, 响应式设计技术 为不同的平台设计不同的解决方案, 坚持使用粘性导航标题——双关语——这是为桌面浏览器设计的.

和警察一起喝咖啡 站点也有固定的页眉,但是要小得多——小于80像素高.

网页设计师常犯的用户体验错误.

标题导航, 在这种情况下, 这是高分辨率屏幕的正确解决方案吗, 因为它使导航更有效. 在较小分辨率的屏幕上,标题也是固定的,但占用了相当多的空间. 在移动设备上,一个很好的替代粘性导航页眉的选择是无处不在的汉堡包菜单. 尽管这种模式不是万能的问题解决方案, 它确实释放了大量的空间.

招聘美国全职自由用户体验设计师

网页设计常见的用户体验错误. 2:轻薄字体

如今,轻薄的字体在众多移动应用程序和网站上随处可见. 随着屏幕技术的进步和渲染的改进, 许多设计师都在使用它们,因为它们很优雅, 清洁, 和时尚. 但是,细字体会导致可用性问题,从而妨碍用户体验.

网站上所有文字的目标都是清晰易读,而细字体会严重影响可读性. 并不是所有的访问者都会在显示细字体的显示器上浏览网站. 在带有Retina显示屏的iPhone或iPad上阅读一些轻型字体比较困难.

最重要的是,文字必须清晰可辨. 如果用户无法阅读应用中的文字,那么字体再漂亮也没用.

苹果人机界面指南

苹果指的是移动应用,但同样的原则也适用于网站. 易读性是强制性的,而不是可选的 为了更好的可用性. 如果网站上的内容是不可读的,那就没有意义了.

细字体也是手机设计中常见的用户体验错误.

下面是一些在使用瘦类型之前需要考虑的常见UX错误:

使用轻薄的字体,因为这是时尚

字体不仅要好看,而且要易读. 以达到适当的对比和易读性, 设计师应该努力在他们的设计中寻找最佳组合:尺寸, 重量, 和颜色.

最好在各种设备和屏幕尺寸上测试网站,以确保所有网站文本都清晰可辨.

这就引出了下一个常见的用户体验错误:

没有在所有主要设备上测试文本易读性

薄, 光型可能会在许多设计师的昂贵上看起来不错, 微妙的监控, 但是普通用户经常看到我们的设计更便宜, 还必须考虑不合格的显示. 最好的做法是检查字体在所有主要设备上的外观:台式电脑, 笔记本电脑, 平板电脑, 和智能手机.

例如, 在测试手机设计时, 参与者是否在白天在移动设备上使用网站?现实世界的用户并不总是有完美的浏览和照明条件. 如果在网站上使用细字体, 有一个简单的方法来适应移动用户:在移动设备上指定一个更粗的字体,以获得更好的可读性.

网站的用户体验问题.

网页设计常见的用户体验错误. 3:低对比度文本

使用低颜色对比元素在现代用户界面设计中也成为潮流. 它源于极简主义的设计趋势,因为通过减少某些区域的对比度, 这样的设计会显得“极简主义”.“设计师无法减少需要呈现的信息的复杂性, 所以他们在设计中使用了低对比度.

我们已经介绍了细字体,但是还有一个更大的陷阱:a 结合 低对比度的轻字体会严重影响用户体验,因为可读性很差. 设计师应该尽其所能避免这种可用性陷阱.

正文文本对比度低

清凉泉金融 在其网站上使用了一种细长的Helvetica字体作为正文. 虽然它看起来很优雅,并有助于美观的UI, 在几个平台上阅读很困难. 虽然低对比度并不一定是坏事, 它会使文本难以阅读,从而对网站的可用性产生负面影响.

低对比度文本的用户体验趋势示例.

不测试文本对比度

在网上有一个很棒的对比检查工具叫做 似是而非的 这将有助于设计师根据文本设置正确的对比度 网页内容易读性指引. 一旦设计师知道他们使用了正确的文本对比度, 他们可以调整网站上的其他颜色,做一个快速的多设备/用户测试,以确保文本是可读的.

网页设计常见的用户体验错误. 4 .卷轴劫持

另一个高风险的趋势是“滚动劫持”.实现这一趋势的网站控制页面滚动(通常使用JavaScript)。. 当人们遇到它的时候, 他们不再控制页面滚动,也无法预测其行为, 这很容易导致困惑和沮丧. 这是一个冒险的实验,可能会损害网站的可用性,在最坏的情况下,会导致电脑的愤怒.”

一些网站可以逃脱滚动劫持,但这并不意味着每个人都可以. 例如,许多 网页设计师 跟踪苹果网站的滚动劫持, 视差的影响, 以及各种产品的高分辨率图像. 苹果公司有自己的目标市场,有自己独特的理念,有自己网站的独家内容. 因为每个网站都有独特的问题,它也必须有针对这些问题的独特解决方案.

没有对真实用户进行测试

当借用流行的想法或UI模式时, 最好在真实用户身上测试网站原型,以避免常见的用户体验问题. 简单的可用性测试将揭示是否执行滚动劫持, 例如, 是否可行. 没有测试, 设计师 没有办法知道滚动劫持是否有效,并且做出假设通常代价高昂.

常见的用户体验问题.

Tumblr,一个受欢迎的个人博客网站,在他们的主页上使用了卷轴劫持. 虽然这样做可能有风险, 可以肯定的是,他们很了解自己的目标用户,也很了解什么是“酷”, 他们想要呈现的时尚用户体验. 当网站访问者开始滚动时,滚动被劫持,人们被带到下一个部分.

长长的滚动页被分成几个部分,通过大量的饱和色和窗口左侧突出的指示点来区分. 结果是, Tumblr的主页感觉就像一个巨大的垂直旋转木马,访问者可以控制, 而不是不愉快的, 有自己想法的实验性网站.

另一个常见的用户体验错误是网页设计中的滚动劫持

网页设计常见的用户体验错误. 5:旋转木马

旋转木马——一种用于在各种内容之间旋转的幻灯片UX——在web上非常常见, 尤其是登陆页面和主页. 虽然它们是有用的, 它们有许多可用性问题,因此是另一个常见的用户体验错误. 根据 尼尔森诺曼集团: “人们通常会立即滚动这些大图片,而忽略了其中的所有内容.“这可能会对用户体验产生负面影响,因为访问者可能无法在一些旋转幻灯片中看到有价值的内容.

网站上图像轮播的糟糕UX示例.

网站轮播可能不会为用户提供价值

如果做得好,旋转木马可以用引人注目的大图像吸引用户. 问题是, 旋转木马通常不会增加任何额外的价值,只是为了装饰而存在,只是因为其他人都在使用它们. 测试网站旋转木马是否有意义的一种方法是:写下旋转木马为访问者提供的三个好处. 如果找不到三个有意义的好处,它就不会增加任何价值.

以前的下一个 箭的可发现性较低

重要的信息在一个网站的旋转木马可能保持隐藏,如果 下一个以前的 箭头是不可发现的. 这些控件还应该与移动设备兼容.

Often there are no arrows to control the carousel; only the slide indicator dots are included to advance the slides. 然而,它们通常对比度较低,可发现性较低,缺乏足够大的可点击性 tappable区域. 小的可点击目标可能会导致糟糕的用户体验, 沮丧的网站访问者, 快速退出网站.

例如, 弗洛雷斯塔·朗戈基金会 网站的主页上有一个旋转的旋转图像. 它设置为自动播放,并通过五张照片旋转. 上一个和下一个箭头, 然而, 小而透明, 这使得它们很难被发现,很难点击. 幻灯片上没有访问者的指示器, 没有标签来表示图像代表什么. 这些图片不是链接,只是作为纯粹的装饰. 虽然这种类型的旋转木马可能对吸引游客有一定的价值, 总的来说,还有很多需要改进的地方.

糟糕的用户体验和粘性导航用户体验的网站.

结论

网页设计趋势, 如果不仔细考虑和谨慎执行, 会导致几个常见的用户体验设计错误. 用户体验设计师 应该运用他们最好的判断力,不要害怕创新吗, 但是为了确保网站的可用性,他们应该让真实世界的用户彻底测试他们的设计.

在大量疯狂的网页设计趋势中,流行的事物来来去去. 在混乱中, 美学的平衡运用, 效率, 可用性在区分用户体验趋势方面发挥着重要作用,这些趋势已被证明是最强的,并获得了最多的用户接受.

网页设计师可以想出最酷的配色方案, 最华丽的滚动动画, 或者是最神奇的视差效果, 但如果人际交往因此受到影响, 用户体验会很差, 人们很快就会离开. 另一个网站只需点击一下.

了解基本知识

  • 什么是固定标题?

    固定标题通常指的是在网页设计中固定位置的导航条,它“粘”在浏览器窗口的顶部. 它是, 然而, 一个常见的用户体验错误是在使用它时不考虑它对网站可用性的影响, 尤其是在手机上. 最好不要在移动浏览器上使用它.

  • 响应式设计的好处是什么?

    响应式设计在网页设计中有很多好处. 它们可以一次性开发,而不是针对不同设备开发多个版本, 响应式网站适应所有屏幕尺寸和分辨率, 不仅在台式机上,在移动设备上也是如此, 平板电脑, 有时甚至看电视.

  • 为什么我们需要响应式网页设计?

    我们需要响应式网页设计的原因是,没有移动网站的企业将被抛在后面. 如果网站在他们的设备上显示不佳,大多数网站访问者就会停止访问. 更重要的是,谷歌把那些没有响应的网站排在搜索结果的后面.

  • 什么是正常字体粗细?

    普通字体粗细是指设置字体的粗细(粗大), 它指的是“正常”,或字体的规则外观. 其他字体的大小可以是粗体、粗体、半粗体、细体、轻体等. 哪些是指普通字体的粗细类型变体.

  • 色彩理论中的对比是什么?

    颜色对比是两种颜色之间的视觉差异. 看到对比的一个好方法是把一种颜色放在另一种颜色的上面. 如果颜色对比度高,就很容易区分. 如果它们的对比度很低,它们就会混合在一起. 对比对色彩的可访问性至关重要.

  • 什么是好的用户体验?

    优秀的用户体验首先要满足客户的确切需求, 没有大惊小怪或麻烦. 优秀的用户体验会在正确的地方提供人们想要的东西, 在适当的时候, 以正确的方式, 如果数字产品设计想要成功,这些都是必须的.

就这一主题咨询作者或专家.
预约电话
Bojan Janjanin的头像
Bojan Janjanin

位于 Zabok,克罗地亚

成员自 2014年8月22日

作者简介

Bojan是一名精通UX设计的资深网页设计师和前端开发人员,拥有12年的网页和移动设计经验.

Toptal作者都是各自领域经过审查的专家,并撰写他们有经验的主题. 我们所有的内容都经过同行评审,并由同一领域的Toptal专家验证.

工作经验

23

世界级的文章,每周发一次.

订阅意味着同意我们的 隐私政策

世界级的文章,每周发一次.

订阅意味着同意我们的 隐私政策

Toptal设计师

加入总冠军® 社区.