网站设计中的跟踪器设计实例和做法.

设计一个大型网站，特别是一个商店，你可能会被要求设计一个系统，网上订购，或一个多步骤的过程，另一种。走用户可以通过这个过程，很容易和直观的是，有助于提高转换率的关键。任何前进的道路上的挫折，可能会导致他们离开，并寻求其他选择。进展跟踪的目的是帮助用户通过一个多步骤的过程，这是非常重要的，这种跟踪器经过精心设计，以让用户了解什么部分，他们目前的，什么节，他们已经完成了，什么任务保持。

 

在这篇文章中，我们将着眼于各种用途的进度跟踪，看看他们是如何被执行，什么他们都做得很好，他们做得还不够好。

进度跟踪是什么？

 

你可能不熟悉的“进度追踪器，也被称为”进度指示器“ - 但有很好的机会，你遇到了一个在同一时间或其他。它们被用来在网上商店在订货时，签署了一个在线的产品或服务，甚至在网上预订度假。为了完成一个指定的进程，进度跟踪指导用户完成一系列步骤。

 

例如在游戏的进度跟踪

 

进度跟踪和面包的区别

 

正如我们前面介绍的网页设计：实例和最佳做法的面包屑，面包屑是一种方法，通过显示用户的当前位置，提高导航。最初，面包屑和进度跟踪可能看起来非常相似，然而，在许多方面，他们是有显着的差异。

 

面包屑告诉你，只有在你已经（或部分高于目前的应用程序的层次结构中的部分），而进度跟踪指定一组用户的路径如下，以完成特定的任务。进度跟踪显示你不仅你目前所在的地方，但也什么步骤，您以前，你是采取什么步骤。

 

 

例如在Coolspotters面包屑

 

进度跟踪是最好的，当有一个具体的目标来实现的。他们是同义转换，用于提高可用性的一种方式- 优化转换率时，这是关键。转换是所有关于网上销售，以便以某种形式在几乎每一个网上商店，你会看到一个进度跟踪。

 

现在，我们已经检讨进度跟踪器是什么，让我们来看看在的情况下，要求，甚至受益于一个精心设计的实施进度跟踪。

 

利用进度跟踪

 

正如前面提到的，进展跟踪器可以用在各种上下文中。下面的三个是最常见的。

 

1。
到目前为止，最常见的应用进展情况跟踪的在线订购与网上购买，因为这通常涉及多个步骤。

 

 

 

HMV的进度跟踪。

 

 

 

在Etsy的进度跟踪。

 

2。功能导游的

进展跟踪器也用来引导用户通过在线产品和服务的特点，主要表现在下面的例子：

 

 

 

 

进度跟踪所使用的视频搜索里面。

 

 

 

Flickr的页游的特点，看看他们的服务。

 

3。多步的形式，

 

如果一个表单需要大量的用户输入，它可能是最好的，分裂成多个步骤。

 

 

Livestream的的进度跟踪器设计。

 

 

 

 

使用Buffalo的项目规划形式的进度跟踪

 

 

进展跟踪设计的最佳实践

 

 

表示一个合乎逻辑的发展

 

进度跟踪，从左至右显示的步骤。大部分土地，由左到右的人阅读，因此它是有道理的，进度跟踪，模式。这不是足够的，虽然-必须有东西，通知用户他们正在执行一个多步骤的过程。

 

 

 

重磅炸弹包括两个箭头和数字在他们的进度跟踪，从而清楚地传达一个合乎逻辑的发展。

 

让用户了解他们的位置

 

的一个重要方面取得良好进展跟踪设计让用户了解用户是在这个过程中。这补充了合乎逻辑的发展，因为用户会知道他们在哪里的地方，他们已经和哪些部分是遵循。

 

 

 

 

史密斯夫妇表示用户当前的位置，明确强调当前的步骤和转向箭头向下。

 

定位

进度跟踪导航的一种形式，它是最好的，把它们放在下面的一级和二级导航（如面包屑）及以上的进度跟踪涉及到的内容。另外，在一个进度跟踪器可以作为一个网页的标题，它是最好放置在当前节的标题下方的进度跟踪，以巩固当前的位置。

 

 

 

Gamestation他们的进度跟踪，明显低于小学和中学的导航。

 

进度跟踪器的实现

 

纯文本

下面是一个例子，一个纯文本进度跟踪媒体寺的网站上。一个纯文本进展跟踪器的一个好处是，它可以容易地进行编辑。

 

 

 

 

雪碧为基础的

 

主权采用了时下流行的CSS sprites的技术建立自己的进度跟踪和减少HTTP请求，通过网上预订的过程中。

 

 

设计应该避免的错误

从面包屑
TypePad等的设计助手，可以非常容易混淆的面包屑导航系统没有什么区别。

没有足够的信息
easyJet的酒店预订路径的旧进度跟踪执行错误的。虽然它给了你总人数的步骤，在这个过程中，它并没有表明你已经完成了哪些步骤或其余。

，在过去的几个星期内推出他们的新进展跟踪，是一个很大的进步，这表明目前的位置，过去步骤和步骤来。现在，他们也很好地利用页面的标题具有描述性的文字，以配合目前的进度跟踪标签。

没有意义的进展
daniblack错误地使用了他们的进度跟踪标签系统。这个问题是标签不提供任何进展的可视化表示。数字或箭头的添加将使至少某种形式的指示在这个例子中的进展。

进度跟踪展示

现在，我们知道一个进度跟踪器是什么，它是如何被使用的，而最好的方法，它的设计，让我们来看看目前在使用的一些精心设计的进度跟踪。

Battle.net使用的方法逐步填补了吧，你的进步，通过他们的注册表单中的步骤。

宜家（Ikea）

亚马逊有一个购物车，穿越他们的进度跟踪，标志着它已经在那里留下一条橙色的线。

有机超市

Threadless的

城市原稿

Firebox的

苹果

Vitradirect

鼠标Minx的

CafePress

Topshop的

约翰·刘易斯使用图像的一辆卡车沿着自己的进度跟踪。

彗星蜱关闭部分已经完成。

靴子的进展跟踪横跨页面的宽度。

网络医学博士使用一个进度条和百分比值作为对他们的健康检查问卷调查方式，跟踪进展情况。

雅高

Altrec

SurfRide

iWorkwear

Zumiez

玩具“反”斗城

eBags

Foot Locker的

终极绿色商店

Crate and Barrel公司

手枪服装

美国服装

PC世界

阿贝尔与科尔

爱步美国

设计公共

Golfsmith结合使用的数字和箭头的进度条。

PETCO

足球痴迷者

人居公司

沃尔顿园林建筑

lookfantastic使用图标直观地提高他们的进度跟踪。

B＆Q