網站設計中的跟蹤器設計實例和做法.
 

設計一個大型網站，特別是一個商店，你可能會被要求設計一個系統，網上訂購，或一個多步驟的過程，另一種。走用戶可以通過這個過程，很容易和直觀的是，有助于提高轉換率的關鍵。任何前進的道路上的挫折，可能會導致他們離開，并尋求其他選擇。進展跟蹤的目的是幫助用戶通過一個多步驟的過程，這是非常重要的，這種跟蹤器經過精心設計，以讓用戶了解什么部分，他們目前的，什么節，他們已經完成了，什么任務保持。

在這篇文章中，我們將著眼于各種用途的進度跟蹤，看看他們是如何被執行，什么他們都做得很好，他們做得還不夠好。
進度跟蹤是什么？

你可能不熟悉的“進度追蹤器，也被稱為”進度指示器“ - 但有很好的機會，你遇到了一個在同一時間或其他。它們被用來在網上商店在訂貨時，簽署了一個在線的產品或服務，甚至在網上預訂度假。為了完成一個指定的進程，進度跟蹤指導用戶完成一系列步驟。

進度跟蹤示例
例如在游戲的進度跟蹤
進度跟蹤和面包的區別

正如我們前面介紹的網頁設計：實例和最佳做法的面包屑，面包屑是一種方法，通過顯示用戶的當前位置，提高導航。最初，面包屑和進度跟蹤可能看起來非常相似，然而，在許多方面，他們是有顯著的差異。

面包屑告訴你，只有在你已經（或部分高于目前的應用程序的層次結構中的部分），而進度跟蹤指定一組用戶的路徑如下，以完成特定的任務。進度跟蹤顯示你不僅你目前所在的地方，但也什么步驟，您以前，你是采取什么步驟。

面包屑例
例如在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進度跟蹤


重慶網絡公司