页脚基础知识

As UX professionals, we tend to dedicate our time and energy to everything在折叠之上。That’s because global navigation, search, and high-priority content are positioned above the fold and users tend to spend adisproportionate amount of their time at the top任何给定页面。因此,出现在网页底部的页脚,获取UX时间和资源预算的短期。但是,你仍然应该注意页脚,因为它们可以大大提高用户的体验。

Definition:一个网站的页脚是位于网站上的每个页面底部的区域,低于主体内容。

术语“页脚”来自印刷品世界,其中“页脚”是文档的所有页面中看到的一致设计元素。然而,正如我们20年前解释的那样,difference between print design and web design意味着当它们从打印到在线移植时,设计元素像页脚一样改变它们的含义(在这种情况下通过可操作)。

过去的网站页脚是小型公用事业区域,具有很少的信息或大倾销场,用于杂项链接。在视觉上,他们经常包含在内小文本that was hardlylegible。今天,页脚已经成熟,现在是人们在网站上完成各种任务时的重要参考点。

人们使用页脚

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

  1. 用户扫描或读取页面,无论都找不到他们想要的或需要更多信息。它们滚动到页面的底部并使用页脚:
    1. 第二次相信的机会
      For example, maybe a user has decided, after reading 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. 最后一个险地难以找到的内容
      有时用户转向页脚,以了解可能在全局导航中可能不存在的其他选项。例如,有兴趣使用电子商务公司申请作业的人 - 一个与典型电子商务客户的任务不同 - 可能会向页脚查找相关信息。
  2. 用户故意滚动到了页脚查找他们希望在那里出现的信息,例如联系信息,有关公司,社交媒体帖子或链接的详细信息,甚至在网站上发现新的或相关内容。有些用户甚至使用了导航的页脚:当它们已经滚动到页面的末尾时,由于页脚靠近,它们使用它而不是滚动到全局导航的顶部。

在这两种情况下,无论内容什么都在页脚中最终结束,那个页脚应该是一致的,可预测的,并且容易被发现。在确定提供哪种类型的页脚时考虑这些用例,您的网站的目标和您的网站目标以及页脚中提供的内容。

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

页脚元素

Site designers choose many different types of content for their footers for various reasons. Footer elements can be combined depending on the business and user goals. Here are some of the most common footer components, examples, and recommended situations in which to use them:

  • 实用程序链接
  • 门垫导航
  • Secondary-task links
  • 网站地图
  • 奖状或奖
  • 组织内的品牌
  • Customer engagement (email newsletters and social media)
UScreen.tv Footer
vescreen.tv包含多种类型的页脚内容,例如(1)次要任务内容(2)实用程序内容,以及(3)社交媒体链接。

实用程序链接

大多数网站,至少往往包括公用事业导航在页脚, pointing to:

  • contact information: the company’s address, phone number, and link to live chat
  • 客户服务信息
  • 隐私政策
  • 使用条款

While many sites have utility navigation located in the top-most areas of their site, the footer is where users look when they search for these specific items. Users will often go directly to the footer to find contact information or locate ways to get customer support. Whether you have links to these utility items at the top of your page or not, always include them in the footer as well. (A utility area at the top of the page should still be used for tools-like utilities, such as search, login/account information, and language-selection.)

用来:所有网站

清晰的钱的页脚
Clarity Money的页脚通过包括链接来保持简单的东西Terms of Use隐私政策, plus links to 社交媒体帐户(见下文欲了解更多信息)。
jcrew页脚
J. Crew features contact information in the form of links to its dedicated 客户服务推特account, its phone number, and a support email address.

Doormat Navigation

就像人们家里的物理垫子一样,一个门卫导航是你到达时所看到的第一件事以及你离开时的最后一件事 - 即,它在页面的顶部和底部都包含在内。因此,页脚可以包括全局导航。当页面很长时间时,此组件是有益的(因为它具有许多现代移动设计的情况),因为它允许用户快速移动到站点的不同部分而不滚动以到达主导航。

用来:具有长页的网站,尤其是如果在页面底部时全局导航不可用

联合液集团页脚
United Healthcare使用Doormat导航:主要类别在顶部导航栏(顶部)和页脚(底部)中显示。

二次任务

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

  • applying for a job with the company
  • 内容创建者的任务
  • 访问投资者信息
  • 寻找产品或服务的文档或规格
  • 访问media kits and other公关信息
  • 寻找公司的附属公司

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

用来:帮助用户找到可能与网站的主要目的直接相关的二级内容

例如,Dwell Magazine的网站展示了杂志主题以外的类别,包括关于,Dwell杂志,专业人士,商人— which might interest its secondary user groups: media and design professionals, merchants, investors, and advertisers (and prospective employees).

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

网站地图

站点地图样式的页脚组件展示了全局导航和全局导航中不存在的其他重要页面的组合。与门窗导航不同,它暴露了主要类别的较低级别子类别。这有帮助:

  • 暴露在全球导航级别不明显的底层主题
  • 提高对该网站的主要内容的认识
  • 提醒用户提供的用户产品

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

用来:具有多个信息或子域的大站点

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

推荐书或奖项

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

可用性测试A/B tests与您的受众确定此策略是否适合您的页脚,以及正确数量的推荐。

使用for:初创公司或品牌知名度较少的公司

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

组织内的品牌

Some companies are so massive that they own or preside over dozens of other companies. Some use通用导航将这些儿童公司与父母联系在一起。它还可以有助于包括页脚中的子公司和品牌列表,加强对本组织投资组合下的其他品牌或公司的认识,并帮助用户找到自己的方式。

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

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

客户订婚

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

在页面中包含嵌入式社交媒体馈送小部件之前,请考虑公司在每个社交媒体网站上的帖子频率。一个较少的活动社交媒体账户可能无法保证嵌入式的社交媒体饲料,但仍可能受益于与社会账户的联系。

用来:all types of sites if using social-media links; sites with heavy emphasis on visuals or aesthetics (arts, beauty, lifestyle brands, or creative spaces) if using an embedded social-media feed widget

良好的贸易页脚
GoodTrade.com上的所有页面都包含一个大型多组分页脚,包括:(1)邮件列表注册提示符,(2)带有Instagram Feed的小部件,(3)链接 社交媒体账户,(4)与次要任务的链接,(5)具有版权信息的免责声明。

页脚的变化

无限滚动和迷你页脚

许多鼓励浏览选择的电子商务,娱乐和其他网​​站infinite scrollin order to keep users on the page. Content continually loads so there is no consistent bottom on every page, and thus no footer section. However, the content that would have been in the footer (typically, utility-navigation links) appears as a “mini footer” in the right rail, or within a larger, expanded global navigation.

对于有用的页脚,它需要在网站的所有页面上存在。有些网站尝试用于静态长度和动态长度页面的相同页脚。但是,当用户尝试在具有无限滚动的网站上使用这些页脚时,它通常成为“Whack-a-mole”的令人沮丧的游戏,其中用户在再次在折叠下方消失之前尽快点击链接。相反,如果您计划使用无限滚动,请考虑将迷你页脚放在右侧导轨中,并确保它与用户滚动一起粘稠。

用来:具有无限卷轴的页面

LinkedIn Right Rail.
具有无限滚动的网站,如LinkedIn.com,通常在其他位置中的页脚内容,如右轨的底部。
Barstool Sports全球导航
BarstoolSports.com具有传统上出现在全球导航中的页脚中的大部分内容。
Barstool.com还有一个页脚,它被作为新内容负载流离失所。
(In most browsers, hover over the video to display the controls if they're not already visible.)

上下文页脚

While footers traditionally stay consistent across many pages, sometimes it can be helpful to customize the footer based on information that’s presented on the page. Particularly for a site with multiple audiences, a contextual footer can surface content that may not have made it into the global navigation, but might still be critical for some users.

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

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

媒体的页脚包括少数环节相关员额,并强调了未签署中账户的人的中等成员福利。

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

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

  • More than two levels of information hierarchy
    特别是对于大型网站,包括整个站点地图不是您的页脚的答案。页脚是专用的房地产数量,应该才能致力于应发现的重要信息。当我母亲恰好恰当地说:“如果一切都很重要,那就没有什么重要。”
    • 解决方案:考虑严格恢复内容,并仅显示IA中的第一和第二级别类别的链接,而不是整个站点。如果单个较低级别的页面足够重要,则在页脚中的特定链接的表面,但您不必显示所有级别的信息层次结构,以使其可发现。
  • 页脚中不清楚的链接名称(e.g.公司信息或者帮助相对联系我们)
    臭名昭着的资源关联在许多页脚上是过去页脚的不幸遗迹之一。
    • 解决方案:团队应尽量遵守常规,清晰的条款。如果团队不确定哪个术语更合适,a卡片排序或可用性测试可以帮助揭示可能会使用户混淆的术语。
  • 不明确的结构或信息层次结构
    The footer may sometimes be a “dumping ground” for orphaned links — that is, links which seem to have no relation to the global navigation or to secondary tasks. If the footer has no pattern of organization, users will either do an详尽评论或花很少看看页脚。
    由于其缺乏信息层次结构,GM的页脚没有明确的结构。此设置难以扫描或查找内容。
    • 解决方案:通过使用指示视觉层次结构的分组或其他可视化设计模式清楚地传达页脚中的项目的信息层次结构(例如,粗体高级页面链接和正常权重的下级页面链接)。
  • Hidden or illegible footers
    Sometimes companies opt to use a tiny font size for footer links in order to accommodate all the links or to make the links less distracting. Worse, some sites might use an animation or accordion feature to hide the footer completely for aesthetics purposes. While the footer is not the primary navigation, people still use it and rely upon it, so don’t try to hide it.
    rectented.com页脚的早期迭代使用默认情况下折叠的手风琴功能,使其内容难以找到。
    rectented.com页脚的早期迭代使用默认情况下折叠的手风琴功能,使其内容难以找到。
    • 解决方案:使用a legible font size and font color (with decent对比)避免使用装饰字体。最重要的是,不要隐藏或折叠页脚 - 人们期望它在那里。

结论

A footer is the place users go when users they’re lost. If we want to leave alasting good impression,我们不会忽略页面底部的重要意义。毕竟,即使是最平凡的界面的实用部分也可以对用户体验产生最大的影响。

Get more tips for better-performing web pages in our full-day course网页UX设计

资源

Jakob Nielsen&Kara Pernice,2010年,eyetrack web可用性,新骑手