網(wǎng)站設計中的跟蹤器設計實(shí)例和做法.
 

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

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

你可能不熟悉的“進(jìn)度追蹤器，也被稱(chēng)為”進(jìn)度指示器“ - 但有很好的機會(huì )，你遇到了一個(gè)在同一時(shí)間或其他。它們被用來(lái)在網(wǎng)上商店在訂貨時(shí)，簽署了一個(gè)在線(xiàn)的產(chǎn)品或服務(wù)，甚至在網(wǎng)上預訂度假。為了完成一個(gè)指定的進(jìn)程，進(jìn)度跟蹤指導用戶(hù)完成一系列步驟。

進(jìn)度跟蹤示例
例如在游戲的進(jìn)度跟蹤
進(jìn)度跟蹤和面包的區別

正如我們前面介紹的網(wǎng)頁(yè)設計：實(shí)例和最佳做法的面包屑，面包屑是一種方法，通過(guò)顯示用戶(hù)的當前位置，提高導航。最初，面包屑和進(jìn)度跟蹤可能看起來(lái)非常相似，然而，在許多方面，他們是有顯著(zhù)的差異。

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

面包屑例
例如在Coolspotters面包屑

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

現在，我們已經(jīng)檢討進(jìn)度跟蹤器是什么，讓我們來(lái)看看在的情況下，要求，甚至受益于一個(gè)精心設計的實(shí)施進(jìn)度跟蹤。
利用進(jìn)度跟蹤

正如前面提到的，進(jìn)展跟蹤器可以用在各種上下文中。下面的三個(gè)是最常見(jiàn)的。

1。
到目前為止，最常見(jiàn)的應用進(jìn)展情況跟蹤的在線(xiàn)訂購與網(wǎng)上購買(mǎi)，因為這通常涉及多個(gè)步驟。

HMV網(wǎng)上訂單進(jìn)度跟蹤
HMV的進(jìn)度跟蹤。

Etsy的進(jìn)展跟蹤
在Etsy的進(jìn)度跟蹤。

2。功能導游的
進(jìn)展跟蹤器也用來(lái)引導用戶(hù)通過(guò)在線(xiàn)產(chǎn)品和服務(wù)的特點(diǎn)，主要表現在下面的例子：

里面搜索視頻的進(jìn)度跟蹤
進(jìn)度跟蹤所使用的視頻搜索里面。

Flickr的頁(yè)游
Flickr的頁(yè)游的特點(diǎn)，看看他們的服務(wù)。

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

Livestream頻道創(chuàng )建表單
Livestream的的進(jìn)度跟蹤器設計。

Buffalo的項目規劃表
使用Buffalo的項目規劃形式的進(jìn)度跟蹤
進(jìn)展跟蹤設計的最佳實(shí)踐

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

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

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

城市原生的進(jìn)度跟蹤
史密斯夫婦表示用戶(hù)當前的位置，明確強調當前的步驟和轉向箭頭向下。

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

Gamestation的進(jìn)度跟蹤
Gamestation他們的進(jìn)度跟蹤，明顯低于小學(xué)和中學(xué)的導航。
進(jìn)度跟蹤器的實(shí)現

純文本
下面是一個(gè)例子，一個(gè)純文本進(jìn)度跟蹤媒體寺的網(wǎng)站上。一個(gè)純文本進(jìn)展跟蹤器的一個(gè)好處是，它可以容易地進(jìn)行編輯。

媒體寺的進(jìn)展跟蹤

雪碧為基礎的
主權采用了時(shí)下流行的CSS sprites的技術(shù)建立自己的進(jìn)度跟蹤和減少HTTP請求，通過(guò)網(wǎng)上預訂的過(guò)程中。

主權sprite圖像
設計應該避免的錯誤

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

TypePad等設計助理

沒(méi)有足夠的信息
easyJet的酒店預訂路徑的舊進(jìn)度跟蹤執行錯誤的。雖然它給了你總人數的步驟，在這個(gè)過(guò)程中，它并沒(méi)有表明你已經(jīng)完成了哪些步驟或其余。

easyJet的老預訂路徑

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

EasyJet的預訂路徑

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

上daniblack進(jìn)度跟蹤


重慶網(wǎng)絡(luò )公司