首页 > 知识•资讯 > 网站设计中的跟踪器设计实例和做法. > 正文

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

2012/9/15 0:00:00 · 稿源:传诚信


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

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

进度跟踪是什么?

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

进度跟踪示例
例如在游戏的进度跟踪

进度跟踪和面包的区别

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

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

面包屑例
例如在Coolspotters面包屑

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

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

利用进度跟踪

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

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

HMV网上订单进度跟踪
HMV的进度跟踪。

Etsy的进展跟踪
在Etsy的进度跟踪。

2。功能导游的
进展跟踪器也用来引导用户通过在线产品和服务的特点,主要表现在下面的例子:

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

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

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

Livestream频道创建表单
Livestream的的进度跟踪器设计。

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

进展跟踪设计的最佳实践

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

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

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

城市原生的进度跟踪
史密斯夫妇表示用户当前的位置,明确强调当前的步骤和转向箭头向下。

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

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

进度跟踪器的实现

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

媒体寺的进展跟踪

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

主权sprite图像

设计应该避免的错误

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

TypePad等设计助理

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

easyJet的老预订路径

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

EasyJet的预订路径

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

上daniblack进度跟踪

进度跟踪展示

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

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

Battle.net的进度跟踪

宜家(Ikea)

宜家的进度跟踪

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

亚马逊的进度跟踪

有机超市

有机超市的进度跟踪

Threadless的

Threadless的进度跟踪

城市原稿

城市原生的进度跟踪

Firebox的

Firebox的进度跟踪

苹果

苹果的进度跟踪

Vitradirect

Vitradirect的进度跟踪

鼠标Minx的

鼠标Minx的进度跟踪

CafePress

CafePress的进度跟踪

Topshop的

Topshop的进度跟踪

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

约翰·刘易斯的进度跟踪

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

彗星的进度跟踪

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

Boots的进度跟踪

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

网络医学博士的进度跟踪

雅高

雅高的进度跟踪

Altrec

Altrec的进度跟踪

SurfRide

SurfRide的进度跟踪

iWorkwear

iWorkwear的进度跟踪

Zumiez

Zumiez的进度跟踪

玩具“反”斗城

玩具“反”斗城的进度跟踪

eBags

eBags的进度跟踪

Foot Locker的

Foot Locker的进度跟踪

终极绿色商店

终极绿色商店的进度跟踪

Crate and Barrel公司

板条箱和桶的进度跟踪

手枪服装

手枪服装的进度跟踪

美国服装

American Apparel的进度跟踪

PC世界

PC World的进度跟踪

阿贝尔与科尔

阿贝尔与科尔的进度跟踪

爱步美国

爱步美国的进度跟踪

设计公共

设计公共的进度跟踪

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

Golfsmith的进度跟踪

PETCO

PETCO的进度跟踪

足球痴迷者

足球痴迷者的进度跟踪

人居公司

人居公司的进度跟踪

沃尔顿园林建筑

沃尔顿园林建筑的进度跟踪

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

lookfantastic的进度跟踪

B&Q

B&Q的进度跟踪

本文作者来自北京传诚信,转载请注明出处:北京传诚信(www.ccxcn.com)


选择北京网站建设公司-传诚信,优质服务,绝对不容错过 !

1. 优秀的网络资源,稳定的网站和速度保证
(配送双线独立ip空间,国际A级BGP机房,99.5% 的主机在线时间)
2. 7年北京网站建设经验,优秀的技术和设计水平,更放心
3. 全程省心服务,不必担心自己不懂网络,更省心。



  • 相关推荐
  • 大家在看
客户服务
咨询热线

010-62199213

24小时咨询热线

139-1050-5354