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

申請免費試用、咨詢電話：400-8352-114

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

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

進度跟蹤是什么？

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

例如在游戲的進度跟蹤

進度跟蹤和面包的區(qū)別

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

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

例如在Coolspotters面包屑

進度跟蹤是最好的，當有一個具體的目標來實現(xiàn)的。他們是同義轉換，用于提高可用性的一種方式- 優(yōu)化轉換率時，這是關鍵。轉換是所有關于網上銷售，以便以某種形式在幾乎每一個網上商店，你會看到一個進度跟蹤。

現(xiàn)在，我們已經檢討進度跟蹤器是什么，讓我們來看看在的情況下，要求，甚至受益于一個精心設計的實施進度跟蹤。

利用進度跟蹤

正如前面提到的，進展跟蹤器可以用在各種上下文中。下面的三個是最常見的。

1。
到目前為止，最常見的應用進展情況跟蹤的在線訂購與網上購買，因為這通常涉及多個步驟。

HMV的進度跟蹤。

在Etsy的進度跟蹤。

2。功能導游的
進展跟蹤器也用來引導用戶通過在線產品和服務的特點，主要表現(xiàn)在下面的例子：

進度跟蹤所使用的視頻搜索里面。

Flickr的頁游的特點，看看他們的服務。

3。多步的形式，
如果一個表單需要大量的用戶輸入，它可能是最好的，分裂成多個步驟。

Livestream的的進度跟蹤器設計。

使用Buffalo的項目規(guī)劃形式的進度跟蹤

進展跟蹤設計的最佳實踐

表示一個合乎邏輯的發(fā)展
進度跟蹤，從左至右顯示的步驟。大部分土地，由左到右的人閱讀，因此它是有道理的，進度跟蹤，模式。這不是足夠的，雖然-必須有東西，通知用戶他們正在執(zhí)行一個多步驟的過程。

重磅炸彈包括兩個箭頭和數(shù)字在他們的進度跟蹤，從而清楚地傳達一個合乎邏輯的發(fā)展。

讓用戶了解他們的位置
的一個重要方面取得良好進展跟蹤設計讓用戶了解用戶是在這個過程中。這補充了合乎邏輯的發(fā)展，因為用戶會知道他們在哪里的地方，他們已經和哪些部分是遵循。

史密斯夫婦表示用戶當前的位置，明確強調當前的步驟和轉向箭頭向下。

定位
進度跟蹤導航的一種形式，它是最好的，把它們放在下面的一級和二級導航（如面包屑）及以上的進度跟蹤涉及到的內容。另外，在一個進度跟蹤器可以作為一個網頁的標題，它是最好放置在當前節(jié)的標題下方的進度跟蹤，以鞏固當前的位置。

Gamestation他們的進度跟蹤，明顯低于小學和中學的導航。

進度跟蹤器的實現(xiàn)

純文本
下面是一個例子，一個純文本進度跟蹤媒體寺的網站上。一個純文本進展跟蹤器的一個好處是，它可以容易地進行編輯。

雪碧為基礎的
主權采用了時下流行的CSS sprites的技術建立自己的進度跟蹤和減少HTTP請求，通過網上預訂的過程中。

設計應該避免的錯誤

從面包屑
TypePad等的設計助手，可以非常容易混淆的面包屑導航系統(tǒng)沒有什么區(qū)別。

沒有足夠的信息
easyJet的酒店預訂路徑的舊進度跟蹤執(zhí)行錯誤的。雖然它給了你總人數(shù)的步驟，在這個過程中，它并沒有表明你已經完成了哪些步驟或其余。

，在過去的幾個星期內推出他們的新進展跟蹤，是一個很大的進步，這表明目前的位置，過去步驟和步驟來?，F(xiàn)在，他們也很好地利用頁面的標題具有描述性的文字，以配合目前的進度跟蹤標簽。

沒有意義的進展
daniblack錯誤地使用了他們的進度跟蹤標簽系統(tǒng)。這個問題是標簽不提供任何進展的可視化表示。數(shù)字或箭頭的添加將使至少某種形式的指示在這個例子中的進展。

進度跟蹤展示

現(xiàn)在，我們知道一個進度跟蹤器是什么，它是如何被使用的，而最好的方法，它的設計，讓我們來看看目前在使用的一些精心設計的進度跟蹤。

Battle.net使用的方法逐步填補了吧，你的進步，通過他們的注冊表單中的步驟。

宜家（Ikea）

亞馬遜有一個購物車，穿越他們的進度跟蹤，標志著它已經在那里留下一條橙色的線。

有機超市

Threadless的

城市原稿

Firebox的

蘋果

Vitradirect

鼠標Minx的

CafePress

Topshop的

約翰·劉易斯使用圖像的一輛卡車沿著自己的進度跟蹤。

彗星蜱關閉部分已經完成。

靴子的進展跟蹤橫跨頁面的寬度。

網絡醫(yī)學博士使用一個進度條和百分比值作為對他們的健康檢查問卷調查方式，跟蹤進展情況。

雅高

Altrec

SurfRide

iWorkwear

Zumiez

玩具“反”斗城

eBags

Foot Locker的

終極綠色商店

Crate and Barrel公司

手槍服裝

美國服裝

PC世界

阿貝爾與科爾

愛步美國

設計公共

Golfsmith結合使用的數(shù)字和箭頭的進度條。

PETCO

足球癡迷者

人居公司

沃爾頓園林建筑

lookfantastic使用圖標直觀地提高他們的進度跟蹤。

B＆Q

本文作者來自北京北京信，轉載請注明出處：北京北京信（http://www.alistair-chisholm.com/）

選擇北京網站建設公司-北京信，優(yōu)質服務，絕對不容錯過 ！