所有趋势都值得吗（ Web设计人员最常犯的5个错误） _Web

本文概述

Web设计常见UX错误1：大型固定标头
Web设计常见UX错误2：细字体
Web设计常见UX错误3：低对比度文字
Web设计常见UX错误4：滚动劫持
网页设计常见的UX错误5：轮播
总结

“ 当所有多余的东西都被丢弃, 人类发现简单而专心时, 就会达到优雅：姿势越简单, 越清醒, 它就会越漂亮。” -保罗·科埃略
网页设计师的任务是创造引人入胜的用户体验, 帮助网站访问者完成任务并增加转化次数。在此过程中, 他们通常只关注美学, 走捷径, 最终依赖于各种常见的设计模式和趋势。这样做的危险是它们可能会被流行趋势所绕开, 因此, 由于趋势部署不当, 会导致常见的UX错误。
当涉及到网络时, 人们不想学习东西, 他们想要做事。网上有很多例子, 设计师选择只关注视觉吸引力, 而这样做却牺牲了可用性。他们认为这是一个” 惊叹时刻” , 它驱使设计本身强大到足以吸引用户。但是令人遗憾的是, 用户很难理解UI, 在使用该网站时确实遇到了困难, 并且该网站的跳出率猛增。
正如凯特·鲁特(Kate Rutter)所说：” 丑陋但有用的王牌漂亮但毫无意义。” 有效使用网页设计模式和趋势的关键是要在美观的外观和增值的位置之间找到平衡。

文章图片
设计人员应尽一切可能避免常见的UX错误, 并在用户的路径中设置障碍。
让我们看看一些常见的UX错误。
Web设计常见UX错误1：大型固定标头在网站上可以看到越来越高的粘性标头。具有固定位置并占用大量空间的” 商标块” 和导航菜单。它们始终固定在浏览器窗口的顶部(“ 粘性标头” ), 并经常在滚动到其下方时阻止内容。
大品牌网站上的某些标头的高度超过150像素。它们的价值在哪里？固定元素(例如粘性标头)可以带来真正的好处, 但是Web设计人员应谨慎使用它们-需要考虑几个重要的UX问题。

文章图片
这个网站上的标头超过160像素高, 占用了大量可见区域。
Sticky Nav Header可能太大而无法舒适
如果已经决定使用粘性导航头, 则最好与用户进行测试。落伍并用内容填充粘性导航头是一个常见的UX错误。使用固定的标题, 浏览器仍应适合访问者。未能找到合适的平衡点可能会给主要内容留出少量空间, 并给访客带来令人窒息的幽闭恐怖的网站体验。
【所有趋势都值得吗（ Web设计人员最常犯的5个错误）】有时候CSS有一个简单的解决方法：通过使粘性标头稍微透明一些, 人们仍然可以在滚动时通过它看到内容, 这使内容区域感觉更加丰富。
这是个高个头的例子：Roger Federer上ATP的球员资料页面。

文章图片
这个网站的标头超过180像素！这是某些笔记本电脑上整个页面高度的30％以上：可避免的糟糕的用户体验。
不考虑移动版Sticky Nav Header UX问题
某些人可能正在使用大型高分辨率计算机显示器, 其中粘性导航头可以加快交互速度, 但是移动设备又如何呢？毫无疑问, 大量的站点访问者将从移动设备访问该站点, 因此, 固定标头可能不是最好的主意。幸运的是, 响应式设计技术可以为不同的平台设计不同的解决方案, 并坚持使用台式机浏览器所用的粘性导航头(双关语)。
带有Cop的Coffee网站还具有固定的标头, 但标头要小得多, 不到80像素高。

文章图片
在这种情况下, 标题导航可以说是高分辨率屏幕的正确解决方案, 因为它可以实现更高效的导航。在较小分辨率的屏幕上, 标头也固定, 但占用了大量空间。随时出现的汉堡包菜单是移动导航中粘贴导航头的绝佳替代方法。尽管此模式不是通用的解决问题的方法, 但它确实释放了大量空间。
Web设计常见UX错误2：细字体如今, 许多移动应用程序和网站上普遍使用轻薄字体。随着屏幕技术的进步和渲染效果的改善, 许多设计师都在使用它们, 因为它们优雅, 干净, 时尚。但是, 字体太薄会导致可用性问题, 因此会影响UX。
网站上所有文本的目标都是清晰易读, 而细字体会严重影响可读性。并非所有的访客都会在显示效果很好的显示器上浏览网站。在配备Retina显示屏的iPhone或iPad上阅读某些光类型非常困难。

首先, 文字必须清晰易读。如果用户看不到你应用程序中的文字, 那么版式的精美程度就无关紧要。苹果人机界面指南

苹果指的是移动应用程序, 但相同的原则也适用于网站。可读性是强制性的, 对于良好的可用性不是可选的。如果内容不可读, 就没有必要在网站上放置内容。

文章图片
移动网站上的细字体的示例, 这些字体会对可读性产生负面影响。
这是在使用精简类型之前要考虑的一些常见UX错误：
使用细字体和轻字体, 因为它很时髦
字体不仅应该看起来不错, 而且还应该清晰易读。为了获得适当的对比度和清晰度, 设计师应在设计中力求最佳组合：尺寸, 重量和颜色。
最好在各种设备和屏幕尺寸上测试网站, 以确保所有网站文字清晰可见。
这导致我们遇到下一个常见的UX错误：
不在所有主要设备上测试文本清晰度
薄型, 轻型在许多设计师的昂贵的, 经过微调的显示器上看起来不错, 但通常必须考虑经常在便宜, 不合格的显示器上看到我们设计的普通用户。最佳做法是检查字体在所有主要设备上的外观：台式机, 笔记本电脑, 平板电脑和智能手机。
例如, 在测试移动设计时, 让参与者在白天使用移动设备上的网站-现实世界中的用户将不会总是拥有完美的浏览和照明条件。如果在网站上使用细字体, 则有一种适合移动用户的简单方法：在移动设备上指定较粗的字体, 以提高可读性。

文章图片
早期版本的Apple Music网站上的对比度较低的文本。
Web设计常见UX错误3：低对比度文字在现代用户界面设计中, 使用低色彩对比元素也已成为流行趋势。它源于极简主义的设计趋势, 因为通过降低某些区域的对比度, 设计将显得” 极简主义” 。设计师无法减少需要呈现的信息的复杂性, 因此他们在设计中的对比度较低。
我们已经介绍过细字体, 但是有一个更大的陷阱：低可读性的浅色字体的组合由于可读性差而严重阻碍了UX。设计人员应尽一切可能避免这种可用性陷阱。
正文中的文本对比度较低
Cool Springs Financial在其网站上使用Helvetica的变体作为正文。它看起来很优雅, 并且有助于创造美观的用户界面, 但很难在多个平台上阅读。虽然低对比度不一定很糟糕, 但是它可能会使文本难以阅读, 从而对网站的可用性产生负面影响。

文章图片
网站上的文字小, 薄, 对比度低, 很难阅读。
不测试文本对比度
Web上有一个漂亮的对比检查工具, 称为Colorable, 它将帮助设计人员根据Web Content Accessibility Guidelines设置正确的文本对比。一旦设计人员知道他们使用的是正确的文字对比, 他们便可以在网站上调整其他颜色, 并进行快速的多设备/用户测试以确保文字可读。
Web设计常见UX错误4：滚动劫持在网络上流行的另一种高风险趋势是” 滚动劫持” 。实现这种趋势的网站可以控制页面滚动(通常使用JavaScript)。当人们遇到它时, 他们将不再能够控制页面滚动并且无法预测其行为, 这很容易导致混乱和沮丧。这是一个冒险的实验, 可能会损害网站的可用性, 最坏的情况是诱发” 计算机愤怒” 。
某些网站可以摆脱滚动劫持, 但这并不意味着每个人都可以。例如, 许多Web设计师通过滚动劫持, 视差效果和各种产品的高分辨率图像来跟踪Apple的站点。苹果有其目标市场, 独特的概念以及其网站的独家内容。由于每个站点都有独特的问题, 因此还必须有针对这些问题的独特解决方案。
不对真实用户进行测试
当借用新潮的想法或UI模式时, 最好在现实世界中的用户上测试网站的原型, 以避免UX问题。简单的可用性测试将揭示例如滚动劫持的实施是否可行。如果不进行测试, 设计人员将无法知道滚动劫持是否会起作用, 并且进行假设通常会耗费大量成本。

文章图片
Tumblr滚动会劫持其网站, 这可能是常见的UX错误。
受欢迎的个人博客网站Tumblr在其首页上使用了滚动劫持。尽管这样做可能会有风险, 但可以放心, 他们可以很好地了解目标受众以及他们想要呈现的凉爽, 时髦的用户体验。当站点访问者开始滚动时, 滚动被劫持, 人们被带到下一部分。
长滚动页面分为几个部分, 可通过在窗口左侧使用大量饱和色和醒目的指示点来区分它们。这样一来, Tumblr的首页就好像是一个大型的垂直轮播访问者可以控制自己, 而不是让人讨厌的实验性网站。

文章图片
像Bryter一样, 某些网站可能会通过似乎被卡住而人们无法滚动页面的滚动劫持来挫败访问者。
网页设计常见的UX错误5：轮播轮播(一种用于在各种内容之间循环播放的幻灯片)在网络上非常普遍, 尤其是在登录页面和主页上。尽管它们可能有用, 但它们具有许多可用性问题, 因此可以视为另一个常见的UX错误。根据尼尔森·诺曼集团(Nielsen Norman Group)的说法：” 人们经常会立即滚动通过这些大图像, 而错过其中的所有内容。” 由于访问者可能看不到某些旋转幻灯片中的有价值的内容, 因此可能会对UX产生负面影响。

文章图片
自动转发轮播不是一个好主意, 尤其是如果其中包含供人们阅读的文字时, 因为网站访问者通常无法控制时间。
网站轮播可能无法为用户提供价值
如果操作正确, 则轮播可以吸引用户观看大尺寸的图像。麻烦的是, 旋转木马通常不会增加任何附加值, 而只是在装饰上而已, 只是因为其他所有人都在使用它们而已。测试网站轮播是否有意义的一种方法：写下轮播为访问者提供的三项好处。如果找不到三个有意义的好处, 那就没有任何价值。
上一个和下一个箭头的可发现性较低
如果找不到下一个和上一个箭头, 则可以隐藏网站轮播中的重要信息。控件也应与手机兼容。
通常没有箭头来控制旋转木马。仅包括幻灯片指示符点可以使幻灯片前进。但是, 它们通常对比度低, 可发现性低并且缺少足够大的可单击或可点击区域。较小的可点击目标可能会导致用户体验不佳, 网站访问者沮丧以及从网站快速退出。
例如, Floresta Longo基金会网站的主页上有旋转的图像轮播。它设置为自动播放并旋转五张照片。但是, 上一个和下一个箭头很小且透明, 这使得它们很难被发现并且难以点击。没有用于幻灯片访问者的指示器, 也没有用于表示图像所代表的标签。图像不是链接, 而是纯装饰。虽然这种类型的轮播可以为吸引访问者带来一些价值, 但总体而言, 还有很多不足之处。

文章图片
网站轮播的另一个常见的UX错误是没有滑动指示器点和几乎看不见的下一个/上一个箭头。
总结如果不仔细考虑并谨慎实施, Web设计趋势可能会导致一些常见的UX错误。用户体验设计师应该运用最佳判断力, 不要害怕创新, 但要确保出色的网站可用性, 它将很好地帮助他们与现实世界的用户一起全面测试其设计。
在网页设计趋势的疯狂泛滥中, 流行的事物来来往往。在这种混乱中, 美学, 效率和可用性的平衡使用在区分用户体验趋势方面起着重要作用, 用户体验趋势已被证明是最强大的, 并且得到了用户的最大认可。
Web设计师可以提出最酷的配色方案, 最奇妙的滚动动画或最奇妙的视差效果, 但是如果人与人之间的互动因此受到影响, 用户体验将变差, 人们将继续前进。只需单击即可访问另一个站点。
? ? ?
在srcmini设计博客上进一步阅读：