修复或坚持:网站开发中的标题

Headers: Friend or Foe? Optimizing Website Navigation for User Experience
你永远不会有第二次机会给人留下第一印象。
~ 安德鲁·格兰特

 

现在,为什么会有这样的哲学路线?

因为这是真的!

尤其是在网站和消费者心理方面!

第一印象是成败,在网页上看到的第一件事就是标题!少即是多,用户寻找这种微妙之处,即使是极简主义者也会感到羞耻!视觉图像在但没有达到它超越顶部的地步!今天的 Web 开发人员必须在标头上投入更多的精力,因为根据 Google,只需 50 毫秒即可形成对网站的意见和一些意见在难以置信的 17 毫秒内发展。如果您的目标是为您的品牌建立消费者基础,这是第一个接触点!认为它是蛋糕上的樱桃,只是樱桃是你吃的第一件事!

那么,标题到底是什么?

简单地说,它是用户在开始滚动之前看到的网页顶部。通常被称为站点菜单,它们被定位为 navigation 和 UX 的关键元素!总体而言,一个好的标题可以让您的网站更易于浏览、树立您的品牌并在整个网站上创造一致的浏览体验。

根据 Kate Shokurova 在她的文章中的说法。“2020 年网站标题设计:最佳实践和示例”标题以前被视为网站顶部的窄条,其中包含徽标、号召性用语和联系信息。然而,在现代设计的今天,首页首屏上方的整个空间都被视为标题。处于重要的战略位置,它可以作为一种邀请,让用户在最初的几秒钟内查看网站提供的内容!

让我们看一些出色的电子商务示例:

ZARA:

NYKAA:

超底:

如果您在上面的图片中注意到,所有 3 个品牌都有不同之处!这将我们带到本文的下一部分; 标题的组成部分:

广泛分类,标题包括以下内容:

  • 标志
  • 导航菜单
  • 标语
  • 电话号码
  • 地址
  • 搜索框
  • 按钮
  • 社交媒体图标
  • 登录或我的帐户链接
  • 选择加入框

如上所示,Nykaa 和 Superbottoms 都使用传统的标题,其中所有必需的信息都在页面顶部的细条中提供给用户。来到Zara,视觉上,我们可以看到不一样的东西。这是因为,在现代设计和开发中,许多电子商务品牌更喜欢使用横幅和轮播来展示其明星系列和最佳优惠作为标题的一部分。从技术上讲,这是两个不同的东西,但是从用户的角度来看,这两者融合在一起创造了一个很棒的产品!

查看 Tubik 博客关于 “网站标题设计的最佳实践” 的文章,了解用户如何直观地查看标题信息以及如何它会影响您网站的成功!

这给我们带来了一个重要的问题; “应该如何选择标题?”

要理解这一点,我们先来了解一下不同的类型!从广义上讲,它们分为两种格式; 固定和粘性。

固定标题 被视为作为网页起点的传统标题 当用户向下滚动时,标题会向上移动并与其余元素一起消失。根据 EnvatoElements 的说法,在他们的文章中,“粘性与固定导航:比较”它确实有其优缺点!

优点

  • 它有助于减少用户分心,因为他们不会经常看到他们可能不需要的菜单
  • 降低网站混乱或跳动的风险,有助于改善用户体验

缺点

  • 用户感到困惑或迷路的风险很高,这可能会导致他们反弹。
  • 您网站上的其他页面的浏览量可能会减少,因为没有反复提醒客户他们可以探索的其他内容。

Organic India 网站是用户滚动时不会移动的固定标题的一个很好的例子:

Sticky headers, 另一方面, 被认为是 Web 开发人员的真正天才!他们被认为是“粘”在主页的顶部。现代 Web 开发需要一些能够帮助锚定用户并将性能提升一个档次的东西,因此出现了粘性导航。当用户滚动时,包含所有必需信息的标题会随着页面的其余部分移动。当它移动时,它会覆盖其他元素,例如图像等,同时不断为用户提供导航帮助。与任何技术一样,这也有其优缺点! EnvatoElements 文章再次很好地解释了这些!

优点

  • 由于用户继续看到菜单栏,它可以帮助他们更快地在站点中移动,而无需向上滚动到顶部。
  • 它可以提醒页面上的其他选项,这些选项可能已经被遗忘,或者除了用户当前正在查看的任何内容之外没有意识到。
  • 它减少了故障,因为它不占用其他元素的空间。
  • 它有助于提高品牌召回率,因为带有粘性标题,您的徽标始终位于用户的外围。

缺点

  • 这可能会分散那些不想总是被提醒菜单的用户的注意力!
  • 这需要有经验的开发人员来处理它们,因为它们本质上比较狡猾,而且实施不当可能会导致菜单跳动或将其他元素推到一边。

Manolo Blahnik 网站是一个很好的示例,该网站具有随用户滚动而移动的粘性标题:

那么,如何在固定标题或粘性标题之间进行选择?

根据 WISDMLabs 在他们的文章 “UX 讨论:您是否应该顺应粘性导航趋势”,答案并非非黑即白。

与数字世界的几乎所有方面一样,从来没有一个具体的答案。这完全取决于一个人需要的网站类型、首选受众、他们的需求以及品牌试图销售的产品类型。根据利弊,一个人可以选择继续进行,或者甚至是动态的并选择将两者结合起来。一个很好的做法是从用户那里获得反馈,以在您的网站设计中实施更改!作为一个品牌,您可能有一些想法可以堆积到山上。珠穆朗玛峰,但如果您的最终用户对它们不满意,最终,这对您来说是收入、转化和销售的损失!网站开发没有对错!对一个人有用的东西可能对另一个人不起作用,反之亦然!

然而,我们从事这个行业已经有一段时间了,不管你信不信,我们都看到了!所以这是我们多年来在网络开发中看到的两分钱!

  •  避免使用大标题!

当涉及到粘性标题时,使用带有图像或内容的大标题是不可以的 想象一下,看到一个占据页面一半的大块,并且当你滚动时,这个块会随着你不断移动。它妨碍了可读性、导航和整体用户体验!

  • 到处玩

使用粘性标题时,分析网站的视觉效果。分析所使用的颜色是否与网站的其余部分相得益彰。如果需要,请尝试使用透明度,看看它是否可以减少您网站上因过多元素导致标题混乱而导致的幽闭恐惧症!

  • 想想你的滚动数据

分析到达您网站末尾的用户百分比很重要,但分析到达您网页上 25%、50% 和 75% 标记的用户百分比同样重要。这些中的下降有助于澄清可能出现的问题。如果您的标头占用了大部分空间,那么您的数据很可能在很大程度上仍是不确定的!

  • 思考移动

大多数用户通过智能手机访问网站!大型高分辨率计算机显示粘性标题可以加速交互,但这在移动设备上可能会完全出错。探索响应式设计技术,为手机、iPad 等设计不同的解决方案,并为桌面浏览器坚持使用粘性标题

结论

修复、粘贴、固定、冻结、使用组合,一切由您决定!网站开发是一个不断发展的动态行业。今天有效,明天可能就过时了!因此,作为品牌,您需要不断掌握您的游戏并与您的用户保持联系,以了解他们偏好的范式转变是否会对您的盈利能力产生负面影响。没有针对所有人的一站式解决方案。每个元素都有一个目的,在用户转化和销售增长的某些方面同样重要!

无论你是修复它还是坚持它,一旦你得到所有答案就去做!

参考文献:

https://www.toptal.com/designers/ux/top-5-common-ux-mistakes

https://www.wiseoldsayings.com/first-impressions-quotes/

https://wisdmlabs.com/blog/sticky-navigation-trend/

https://1stwebdesigner.com/sticky-vs-fixed-navigation-a-comparison/

https://www.webfx.com/blog/web-design/five-types-of-effective-headers-in-web-design/

https://blog.tubikstudio.com/best-practices-for-website-header-design/

https://www.muse-themes.com/blogs/news/what-is-a-website-header

https://vtldesign.com/web-strategy/navigation-header-design/

https://www.markbrinker.com/parts-of-a-website

https://www.shopify.in/blog/homepage-design

https://truenorthsocial.com/blog/e-commerce-headers-footers-the-most-under-rated-piece-of-your-online-store/

https://uxplanet.org/website-header-design-in-2020-best-practices-and-examples-1992f80ddd69

https://www.clicktale.com/resources/blog/the-3-golden-rules-of-sticky-navigation/

https://code.ourskycom/should-you-use-sticky-header/

https://www.toptal.com/designers/ux/top-5-common-ux-mistakes

https://11web.com/parts-of-a-website/

Get In touch