菜单 关闭

footers 101:设manbetx官方网站手机版计模式和使用时间

通过 特蕾丝·费森登2月24日,二千零一十九

总结:在几乎每个网页的底部都可以找到页脚,通常有多种形式,取决于网站上的内容类型。不管他们采取什么形式,他们的存在是至关重要的(而且被高度低估)。


脚注基础

作为用万博官网manbetx下载户体验专业人员,我们倾向于把我们的时间和精力奉献给每一件事褶皱之上.这是因为全球导航,搜索,高优先级内容位于折叠上方,用户倾向于他们在高层的时间不成比例任何给定页面的。因此,脚注,出现在网页底部,获取用户体验时间和资源预算的短端。万博官网manbetx下载然而,您仍然应该注意脚部,因为它们可以大大提高用户的体验。

定义:网站的页脚是位于网站每页底部的区域,主体内容下方。

术语“页脚”来自印刷世界,其中“footer”是一个一致的设计元素,可以在文档的所有页面上看到。manbetx官方网站手机版然而,正如我们20年前解释的那样,这个印刷设计和网页设计的区别manbetx官方网站手机版也就是说,当设计元素从manbetx官方网站手机版印刷品移植到网上时,像页脚这样的设计元素会改变它们的含义(在本例中是通过可操作性实现的)。

过去的网站浏览者要么是信息很少的小型公用事业区,要么是各种链接的大垃圾场。视觉上,它们经常包含微小文本那很难清晰的.今天,footers已经成熟,现在成为人们在网站上完成各种任务的重要参考点。

人们使用脚

虽然页脚的关注度不如页面顶部,它们仍然可以得到相当数量的使用。这是页脚最常见的两个用例:

  1. 用户扫描或阅读页面,要么找不到他们想要的,要么需要更多信息。它们滚动到页面底部,并将页脚用作:
    1. 第二次被说服的机会
      例如,也许用户已经决定,在阅读了所有细节之后,她不想注册银行账户,但她仍然对银行机构印象深刻,希望成为客户。页脚是提醒或教导潜在客户公司其他产品的好机会。
    2. 最后一个寻求难以找到的内容
      有时,用户转向页脚以获取可能在全局导航中不存在的其他选项。例如,那些有兴趣在电子商务公司申请一份工作的人——这项任务不同于典型的电子商务客户——可能会在页脚处查找相关信息。
  2. 用户有意滚动到页脚查找他们希望显示在那里的信息,比如联系方式,公司详情,社交媒体帖子或链接,甚至可以在网站上发现新的或相关的内容。有些用户甚至使用页脚进行导航:当他们已经滚动到页面末尾时,因为页脚很近,他们使用它而不是滚动到顶部进行全球导航。

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

虽然满足这些用户场景可能不是网站的绝对最高优先级目标,manbetx官方网站手机版设计一个好的页脚仍然是一项值得努力的工作,因为页脚有一个特别好的可用性特征:他们永远不会妨碍那些在页面上更高层次上满足他们需求的用户。因此,除了过度膨胀的页脚会延迟页面下载或呈现,页脚是对用户体验的免费添加。它可以帮助,但不会受伤。

页脚元素

网站设计者manbetx官方网站手机版为他们的页脚选择了许多不同类型的内容,原因有很多。页脚元素可以根据业务和用户目标进行组合。下面是一些最常见的页脚组件,例子,以及推荐使用它们的情况:

  • 实用链接
  • 门垫导航
  • 辅助任务链接
  • 站点地图
  • 证词或奖励
  • 组织内的品牌
  • 客户参与度(电子邮件通讯和社交媒体)
uscreen.tv页脚
uscreen.tv包含多种页脚内容,如(1)辅助任务内容(2)实用程序内容,(3)社交媒体链接。

实用链接

大多数网站,至少,倾向于包括实用导航在页脚中,指向:

  • 联系方式:公司地址,电话号码,并链接到实时聊天
  • 客户服务信息
  • 隐私政策
  • 使用条款

虽然许多网站在其网站的最上面的区域都有实用程序导航,页脚是用户在搜索这些特定项目时查看的位置。用户通常会直接到页脚查找联系信息或找到获得客户支持的方法。无论您是否在页面顶部有指向这些实用程序项的链接,总是在页脚中包含它们。(页面顶部的实用程序区域仍应用于实用程序等工具,比如搜索,登录/帐户信息,以及语言选择。)

用途:所有站点

Clarity Money的页脚
Clarity Money的页脚通过包含指向使用条款 隐私政策 ,加上链接 社交媒体 帐户(有关详细信息,请参阅下文)。
JWS页脚
J机组人员的联系方式是与专用设备的链接。 客户服务 Twitter帐户,它的电话号码,以及支持电子邮件地址。

门垫导航

就像人们家里的垫子一样,门垫导航是你到达时看到的第一件事,也是你离开时看到的最后一件事——也就是说,它包含在页面的顶部和底部。因此,页脚可以包括全局导航。当页面较长时(许多现代移动设计都是如此),此组件非常有用。manbetx官方网站手机版因为它允许用户快速移动到站点的不同部分,而不必向后滚动以到达主导航。

用途:有长页面的网站,尤其是当全局导航在页面底部不可用时。

UnitedHealth组页脚
United Healthcare使用门垫导航:主要类别显示在顶部导航栏(顶部)和底部(底部)。

次要任务

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

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

这些次要任务通常不存在于全局导航或实用程序导航中。这种类型的页脚内容在具有不同用户行程的多个用户组的网站上很常见。

用途:帮助用户查找可能与网站的主要目的不直接相关的辅助内容

例如,dwell杂志的网站展示了杂志主题之外的类别,包括关于,驻留杂志,专业人士,商人-它的第二用户群可能会感兴趣:媒体和设计专业人士,manbetx官方网站手机版商人,投资者,以及广告商(和潜在雇员)。

驻留页脚
dwell杂志的页脚包含到次要任务的链接(阅读文章除外)manbetx官网手机登陆

站点地图

一个站点地图样式的页脚组件展示了全局导航和其他不在全局导航中的重要页面的组合。与门垫导航不同,它公开了主要类别的下级子类别。它有助于:

  • 公开在全球导航级别不明显的基础主题
  • 提高对网站主要内容的认识
  • 提醒用户公司产品

站点地图页脚组件不包括完整的站点地图,除非网站只有几页(大约25页或更少)。除此之外,页脚还可能变得笨重,难以使用。(可选地,您可以在单独的页面上提供完整的站点地图,并在页脚链接到它,用户希望在这里找到这样的链接。)

用途:具有多级信息或子域的大型站点

美国有线电视新闻网脚注
CNN的页脚包含到顶级导航和低级分类的链接。

证词或奖励

我们的许多研究参与者描述说,他们有动机根据该网站收到的奖项和证词来选择一个网站。在页脚中突出显示荣誉可能是一个很好的策略建筑权威与信誉.然而,表现出太多的证词和奖项也会给客户带来危险。给人的印象是,公司由于不成熟或不稳定而需要出具证明。解决方案是将此内容添加到页脚。

可用性测试A/B测试让你的观众来决定这个策略是否适合你的页脚,正确的证词数量是多少?

使用为: 初创企业或品牌知名度较低的公司

雷克雅未克远足页脚
在页脚中,雷克雅未克远足成功地包括奖项和董事会,从中获得了认可,以加强信誉和权威。

组织内的品牌

有些公司规模庞大,拥有或主持了几十家其他公司。一些使用通用导航把这些子公司和母公司联系起来。在页脚中包含子公司和品牌的列表也很有帮助,以增强对属于组织投资组合的其他品牌或公司的认识,并帮助用户找到他们的出路。

用途:大的,拥有多个子公司或合作品牌的跨国公司

沃尔玛脚注
沃尔玛的页脚显示了该公司拥有的其他品牌,像Hayneel,喷气式飞机,和模型布。

客户参与度

用户通常会直接到页脚查找优惠券和促销等信息,或者只是更新公司的销售和产品发布。因此,页脚可以包含允许客户与公司保持联系的信息-社交媒体链接(或至少,链接到公司的社交媒体帐户)和邮件列表注册提示。

在页脚中包含嵌入式社交媒体源小部件之前,考虑公司在每个社交媒体网站上发布的频率。一个不太活跃的社交媒体帐户可能不需要嵌入社交媒体源,但仍可能受益于与社会账户的联系。

用途:使用社交媒体链接的所有类型的网站;重点关注视觉或美学(艺术,美女,生活方式品牌,或创意空间)如果使用嵌入式社交媒体订阅小工具

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

脚的变化

无限滚动和迷你页脚

许多电子商务,娱乐,和其他鼓励浏览的网站选择无限滚动以保持用户在页面上。内容不断加载,因此每个页面都没有一致的底部,因此没有页脚部分。然而,可能在页脚中的内容(通常,实用程序导航链接)在右栏中显示为“迷你页脚”,或者在更大的范围内,扩展的全局导航。

为了使页脚有帮助,它需要出现在网站的所有页面上。有些网站尝试对静态长度和动态长度的页面使用相同的页脚。然而,当用户试图在无限滚动的网站上使用这些页脚时,它经常成为一个令人沮丧的“恶作剧-鼹鼠”的游戏,用户试图在链接消失之前尽快点击链接。相反,如果你打算使用无限卷轴,考虑将一个小页脚放在右侧的横栏中,并确保在用户滚动时,它与主要内容一起是粘性的。

用途:带无限滚动的页面

LinkedIn右轨道
无限滚动的网站,像linkedin.com一样,通常在其他位置使用页脚内容,就像在右栏杆的底部。
高脚凳运动全球导航
barstoolsports.com提供了大部分传统上出现在全局导航页脚中的内容。
barstool.com也有一个页脚,随着新内容的加载而移位。
(在大多数浏览器中,将鼠标悬停在视频上方以显示控件(如果控件尚不可见)。

上下文页脚

虽然页脚传统上在许多页面上保持一致,有时,根据页面上显示的信息自定义页脚会有所帮助。尤其是对于拥有多个访问群体的网站,上下文页脚可以显示可能未进入全局导航的内容,但对某些用户来说仍然是至关重要的。

例如,medium.com主页没有页脚;页面显示无限滚动的文章列表。manbetx官网手机登陆(该页面具有如上建议的右栏杆迷你页脚。)但是,在特定故事的页面上,介质显示基于任务的页脚,该页脚随查看器是否为订阅服务器而变化。

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

Medium的页脚包含一些链接相关的帖子,并强调未登录到Medium帐户的用户可以享受中等会员资格的好处。

常见的页脚陷阱(&solutions)

自20世纪90年代以来,步行者已经走了很长的路,但直到今天,它们仍然受制于常见的设计缺陷:manbetx官方网站手机版

  • 两级以上的信息层次结构
    尤其是对于大型场地,包含整个站点地图并不是对页脚的回答。页脚是一个专用的不动产数量,应该只用于重要的信息应该被发现。正如我母亲曾经恰当地说的,“如果一切都很重要,什么都不重要。”
    • 解决方案:考虑重新排定内容的优先级,只显示IA中一级和二级类别的链接,不是整个网站。如果一个较低级别的页面足够重要,显示页脚中的特定链接,但是,您不必显示信息层次结构的所有级别,就可以发现它。
  • 页脚中的链接名称不清楚(例如)公司信息帮助对战联系我们
    声名狼藉资源链接在许多步行者身上,都是过去步行者不幸留下的痕迹之一。
    • 解决方案:团队应该努力坚持传统,明确条款。如果团队不确定哪个术语更合适,一卡片分类或者可用性测试可以帮助揭示可能混淆用户的术语。
  • 结构或信息层次不明确
    页脚有时可能是孤立链接的“垃圾场”—也就是说,似乎与全局导航或辅助任务无关的链接。如果页脚没有组织模式,用户将执行详尽的审查或者花很少的时间看页脚。
    由于缺乏信息层次结构,通用汽车的页脚没有清晰的结构。此设置使扫描或查找内容变得困难。
    • 解决方案:通过使用分组或其他指示可视层次结构的可视设计模式(例如manbetx官方网站手机版粗体高级页面链接和普通粗体低级页面链接)。
  • 隐藏或难以辨认的页脚
    有时公司会选择在页脚链接中使用一个很小的字体大小,以便容纳所有链接或减少链接的干扰。更糟的是,有些网站可能会使用动画或手风琴功能完全隐藏页脚,以达到美观的目的。虽然页脚不是主导航,人们仍然使用它并依赖它,所以不要试图隐藏它。
    Reserved.com页脚的早期迭代使用了默认折叠的Accordion功能,使其内容难以找到。
    Reserved.com页脚的早期迭代使用了默认折叠的Accordion功能,使其内容难以找到。
    • 解决方案:使用清晰的字体大小和字体颜色对比)避免使用装饰性字体。最重要的是,不要隐藏或折叠页脚-人们希望它在那里。

结论

页脚是当用户丢失时用户要去的地方。如果我们想离开持久的好印象,重要的是我们不要忽略页面的底部。毕竟,即使是最平凡的,界面的功利主义部分可以对用户体验产生最大的影响。

在我们的全天课程中获得更多关于更好地执行网页的提示网页UX设计万博官网manbetx下载manbetx官方网站手机版.

资源

Jakob Nielsen和Kara Pernice,2010,眼睛跟踪网络可用性新骑手