页脚基础知识

作为UX专业人士,我们倾向于将我们的时间和精力致力于一切above the fold。这是因为全球导航,搜索和高优先级内容位于折叠之上,用户倾向于花一个在顶部的时间不成比例的时间任何给定页面。因此,出现在网页底部的页脚,获取UX时间和资源预算的短期。但是,你仍然应该注意页脚,因为它们可以大大提高用户的体验。

定义:A website’s页脚是位于网站上的每个页面底部的区域,低于主体内容。

The term “footer” comes from the print world, in which the “footer” is a consistent design element that is seen across all pages of a document. However, as we explained 20 years ago, the印刷设计与网页设计之间的差异means that design elements like footers change their meaning (in this case by becoming actionable) when they’re ported from print to online.

过去的网站页脚是小型公用事业区域,具有很少的信息或大倾销场,用于杂项链接。在视觉上,他们经常包含在内微小文本这很难易读。Today, footers have matured and now serve as an important reference point for people as they complete a variety of tasks on websites.

人们使用页脚

虽然页脚比页面顶部的关注量少,但它们仍然会获得相当数量的使用量。这些是页脚的两个最常见的用例:

  1. 用户扫描或读取页面,无论都找不到他们想要的或需要更多信息。它们滚动到页面的底部并使用页脚:
    1. A second chance to be convinced
      例如,用户可能已经决定,readi之后ng all the details, that she doesn’t want to sign up for a bank account, but she was still impressed with the banking institution and wants to become a customer. The footer is a good opportunity to remind or teach potential customers about the company’s other offerings.
    2. 最后一次resort for hard-to-find content
      Sometimes users turn to the footer for additional options that might not be present in the global navigation. For example, those interested in applying for a job with an ecommerce company — a task that is different from those of the typical ecommerce customer—might look to the footer for relevant information.
  2. Users故意滚动到了页脚查找他们希望在那里出现的信息,例如联系信息,有关公司,社交媒体帖子或链接的详细信息,甚至在网站上发现新的或相关内容。有些用户甚至使用了导航的页脚:当它们已经滚动到页面的末尾时,由于页脚靠近,它们使用它而不是滚动到全局导航的顶部。

在这两种情况下,无论页脚中包含什么内容,该页脚都应该是一致的、可预测的,并且易于发现。在确定要提供哪种页脚类型和页脚中要提供哪种内容时,请考虑这些用例、网站目标和页脚目标。

虽然满足这些用户方案可能不是网站的绝对优先级目标,但设计一个好的页脚仍然是一个值得的努力,因为页脚具有特别精彩的可用性特征:他们永远不会妨碍获得他们需求的用户页面上满意更高。因此,除了可能会延迟页面下载或渲染的过度膨胀的页脚外,页脚是用户体验的成本不足之外。它可以提供帮助,但它不能伤害。

页脚元素

由于各种原因,网站设计人员为页脚选择许多不同类型的内容。可以根据业务和用户目标组合页脚元素。以下是其中一些最常见的页脚组件,示例和推荐的情况:

  • Utility links
  • 门垫导航
  • 二级任务链接
  • Site map
  • 推荐书或奖项
  • 组织内的品牌
  • 客户参与(电子邮件通讯和社交媒体)
uscreen.tv页脚
vescreen.tv包含多种类型的页脚内容,例如(1)次要任务内容(2)实用程序内容,以及(3)社交媒体链接。

实用程序链接

Most sites, at a minimum, tend to include实用程序导航在页脚中,指向:

  • 联系方式:公司的地址,电话号码和Live Chat的链接
  • 客户服务信息
  • 隐私政策
  • 使用条款

虽然许多网站具有位于其网站的顶级区域的公用事业导航,但页脚是用户在搜索这些特定项目时查找的地方。用户经常将直接转到页脚,以查找联系信息或找到方法以获得客户支持。无论您是否有页面顶部的这些实用程序项目链接,始终将它们包含在页脚中。(页面顶部的实用区域仍应用于诸如搜索,登录/帐户信息和语言选择等工具的实用程序。)

Use for:所有网站

清晰的钱的页脚
Clarity Money’s footer keeps things simple by including links to the使用条款Privacy Policy,加上链接 social-media帐户(见下文欲了解更多信息)。
JCrew页脚
J.船员以链接的形式提供联系信息,以其专用 客户服务Twitter帐户,其电话号码和支持电子邮件地址。

门垫导航

Like the physical mat at people’s homes, a doormat navigation is the first thing you see when you arrive and the last thing you see when you leave — that is, it is included both at the top and the bottom of the page. Thus, a footer can include the global navigation. This component is beneficial when the pages are long (as it is the case with many modern mobile designs), since it allows users to quickly move to a different section of the site without scrolling back to reach the main navigation.

Use for:具有长页面的站点,特别是在页面底部的全局导航不可用时

联合液集团页脚
United Healthcare uses doormat navigation: with the main categories being displayed both in the top navigation bar (top) and in the footer (bottom).

Secondary Tasks

页脚可能包含用户对用户感兴趣的次要任务的链接。次要任务的一些示例包括:

  • 申请公司工作
  • 内容创建者的任务
  • 访问投资者信息
  • 寻找产品或服务的文档或规格
  • 访问媒体套件和其他公关信息
  • 寻找公司的附属公司

这些辅助任务通常不存在于全局导航或公用事业导航中。这种类型的页脚内容在具有不同用户旅行的多个用户组的站点上是常见的。

Use for:helping users find secondary content that might not be directly related to the main purpose of the site

例如,Dwell杂志的网站展示了杂志主题之外的类别,包括关于,Dwell杂志,专业人士,商人- 这可能会感兴趣其辅助用户组:媒体和设计专业人员,商家,投资者和广告商(以及潜在员工)。

居住页脚
DWELL杂志的页脚包括与二级任务的链接(除了阅读文章之外)manbetx官网手机登陆

Site Map

网站地图样式的页脚组件显示了全局导航和其他不在全局导航中的重要页面的组合。与doormat导航不同,它公开了主类别的较低级别子类别。它有助于:

  • exposing underlying topics which are not obvious at the global-navigation level
  • 提高对该网站的主要内容的认识
  • 提醒用户提供的用户产品

除非网站有几页(约25或更少),否则站点地图页脚组件不包括完整站点地图。不仅仅是那个和页脚风险令人不安,难以使用。(或者,您可以在单独的页面上提供一个全功能的网站地图,并在页脚中链接到用户,这是用户希望找到这样的链接的位置。)

Use for:具有多个信息或子域的大站点

CNN页脚
CNN的页脚包含顶级导航和低级分类的链接。

奖状或奖状

我们的许多学习参与者描述了在该网站收到的奖项和推荐方面选择一个网站。在页脚中突出显示股票可以是一个良好的策略建立权威和信誉。然而,展示了太多的推荐和奖项也可以为客户提高一个红旗,这给人的印象是公司需要显示推荐,因为它没有成熟或稳定。解决方案是将此内容添加到页脚。

可用性测试A / B测试与你的观众一起决定这个策略是否适合你的页脚,以及推荐信的正确数量。

Use为了:初创公司或品牌知名度较少的公司

Reykjavik游览页脚页脚
在它的页脚中,Reykjavik短途旅行成功地包括获得认可的奖项和董事会,以便抵销信誉和权威。

组织内的品牌

有些公司如此庞大,他们拥有或主持几十多家其他公司。有些用途通用导航将这些儿童公司与父母联系在一起。它还可以有助于包括页脚中的子公司和品牌列表,加强对本组织投资组合下的其他品牌或公司的认识,并帮助用户找到自己的方式。

Use for:具有许多子公司或合作品牌的大型跨国组织

沃尔玛页脚
沃尔玛的页脚呼唤公司拥有的其他品牌,例如Hayneeedle,Jet和Modcloth等。

客户订婚

用户通常会直接进入页脚,以查找优惠券和促销活动,或者只是与公司的销售和产品发布保持最新状态。因此,页脚可以包括允许客户与公司携带的信息 - 社交媒体链接(或至少链接到公司的社交媒体账户)和邮件列表注册提示。

在页脚中包含嵌入式社交媒体提要小部件之前,请考虑公司在每个社交媒体网站上发布帖子的频率。一个不太活跃的社交媒体帐户可能无法保证嵌入社交媒体feed,但仍然可以从链接到社交帐户中获益。

Use for:如果使用社交媒体链接,则所有类型的网站;如果使用嵌入式社交媒体饲料小部件,则重点强调视觉或美学(艺术,美容,生活方式品牌或创意空间)

The Good Trade Footer
GoodTrade.com上的所有页面都包含一个大型多组分页脚,包括:(1)邮件列表注册提示符,(2)带有Instagram Feed的小部件,(3)链接 social-mediaaccounts, (4) links to secondary tasks, and (5) a disclaimer with copyright information.

页脚上的变体

Infinite Scroll & the Mini Footer

许多鼓励浏览选择的电子商务,娱乐和其他网​​站无限滚动为了让用户保持在页面上。内容不断加载,因此每个页面上没有一致的底部,因此没有页脚部分。但是,在页脚(通常,公用事业导航链路)中的内容显示为右侧导轨中的“迷你页脚”,或者在更大的扩展全球导航中。

For the footer to be helpful it needs to be present on all pages of the site. Some sites try to utilize the same footer for both static-length and dynamic-length pages. However, when users attempt to use these footers on sites with infinite scroll, it often becomes a frustrating game of “whack-a-mole” where users try to click on links as quickly as possible before they vanish again below the fold. Instead, if you plan on using infinite scroll, consider placing a mini footer in the right rail and ensure that it is sticky alongside the main content as the user scrolls.

Use for:具有无限卷轴的页面

LinkedIn Right Rail.
Sites with infinite scroll, like LinkedIn.com, often feature footer content in other locations, like at the bottom of the right rail.
Barstool Sports Global Navigation
BarstoolSports.com具有传统上出现在全球导航中的页脚中的大部分内容。
Barstool.com还有一个页脚,它被作为新内容负载流离失所。
(在大多数浏览器中,如果它们尚不可见,则鼠标悬停在视频上以显示控件。)

上下文页脚

虽然传统上的页脚在许多页面中保持一致,但有时会根据页面上呈现的信息,自定义页脚可以有助于自定义页脚。特别是对于具有多个受众的站点,一个上下文页脚可以表面内容可能没有使其进入全局导航,但对某些用户可能仍然至关重要。

例如,Medium.com主页没有页脚;该页面显示无限滚动的文章列表。manbetx官网手机登陆(页面与上面推荐的右轨迷你页脚有关。但是,在特定的故事的页面上,媒体显示了基于任务的页脚,这取决于观众是否是订户。

Use for:具有不同用户角色的站点(例如“内容创建者”与“内容消费者”或“成员”与“非Member”)

Medium’s footer includes few links related posts and emphasizes Medium membership benefits for people who are not signed into a Medium account.

常见的页脚陷阱(&解决方案)

自20世纪90年代以来,页脚已经走了很长的路,但到这一天,他们仍然受到共同设计陷阱:

  • 超过两级的信息层次结构
    特别是对于大型网站,包括整个站点地图不是您的页脚的答案。页脚是专用的房地产数量,应该才能致力于应发现的重要信息。当我母亲恰好恰当地说:“如果一切都很重要,那就没有什么重要。”
    • 解决方案:Consider reprioritizing the content and only displaying links to first- and second-level categories in your IA, not the entire site. If a single lower-level page is important enough, surface that specific link in the footer, but you don’t have to show all levels of the information hierarchy to make it discoverable.
  • 页脚中不清楚的链接名称(例如。公司信息或者帮助versus联系我们
    The notorious资源链接在许多页脚上是过去页脚的不幸遗迹之一。
    • 解决方案:Teams should try to adhere to conventional, clear terms. If the team is unsure which term would be more appropriate, acard sort或可用性测试可以帮助揭示可能会使用户混淆的术语。
  • 结构或信息层次不清
    页脚有时可能是孤儿链路的“倾倒地面” - 即似乎与全局导航或辅助任务无关的链接。如果页脚没有组织模式,则用户将要做一个详尽评论或花很少看看页脚。
    GM’s footer does not have a clear structure due to its lack of information hierarchy. This setup makes it difficult to scan or find content.
    • 解决方案:通过使用指示视觉层次结构的分组或其他可视化设计模式清楚地传达页脚中的项目的信息层次结构(例如,粗体高级页面链接和正常权重的下级页面链接)。
  • 隐藏或难以辨认的页脚
    有时,公司选择使用小型字体大小用于页脚链路,以便容纳所有链接或使链接不太分散注意力。更糟糕的是,某些网站可能会使用动画或手风琴功能来完全隐藏出色的页脚以用于美学目的。虽然页脚不是主要导航,但人们仍然使用它并依赖它,所以不要试图隐藏它。
    rectented.com页脚的早期迭代使用默认情况下折叠的手风琴功能,使其内容难以找到。
    rectented.com页脚的早期迭代使用默认情况下折叠的手风琴功能,使其内容难以找到。
    • 解决方案:使用清晰的字体大小和字体颜色(具有体面contrast)避免使用装饰性字体。最重要的是,不要隐藏或折叠页脚-人们希望它在那里。

Conclusion

在他们丢失的用户时,用户是用户的。如果我们想留下一个持久的印象,我们不会忽略页面底部的重要意义。毕竟,即使是最平凡的界面的实用部分也可以对用户体验产生最大的影响。

在我们的全天课程中获取更好地执行Web页面的更多提示Web Page UX Design

资源

Jakob Nielsen&Kara Pernice,2010年,Eyetracking Web Usability新骑手