商城網(wǎng)站建設(shè)用戶體驗(yàn)三要素!

　　商城網(wǎng)站建設(shè)要素一：別讓我等

　　曾有研究表明用戶最滿意的打開網(wǎng)頁時(shí)間是2-5秒，如果等待超過10秒，99%的用戶會(huì)關(guān)閉這個(gè)網(wǎng)頁。也許這樣講，各位還不會(huì)有太多感觸，筆者獲取了一組數(shù)據(jù)：Google網(wǎng)站訪問速度每慢400ms就導(dǎo)致用戶搜索請(qǐng)求下降0.59%;雅虎如果有400ms延遲會(huì)導(dǎo)致流量下降5-9%。那么，是什么原因會(huì)導(dǎo)致網(wǎng)站打開慢?有什么辦法解決呢?別急，筆者現(xiàn)在一一道來。以下內(nèi)容有些偏技術(shù)層面，各位需要耐心閱讀：

　　1、減少移動(dòng)商城網(wǎng)站建設(shè)HTTP請(qǐng)求數(shù)

　　用戶在打開一個(gè)網(wǎng)頁的時(shí)候，后臺(tái)程序響應(yīng)用戶所需的時(shí)間并不多，用戶等待的時(shí)間主要花費(fèi)在下載網(wǎng)頁元素上了，即HTML、CSS、JavaScript、Flash、圖片等，統(tǒng)計(jì)顯示，每增加一個(gè)元素，網(wǎng)頁載入的時(shí)間就增加25-40毫秒(取決于用戶的帶寬情況)。

　　所以，想要提高網(wǎng)頁打開速度，就要減少HTTP請(qǐng)求數(shù)，方法有3種：

　　1)減少不必要的HTTP請(qǐng)求，例如用CSS圓角代替圓角圖片，減少圖片的使用。

　　2)合并文件，對(duì)于文本文件，可以直接合并內(nèi)容。例如將多個(gè)JS(JavaScript的簡(jiǎn)稱)文件合并成一個(gè)，將多個(gè)CSS文件合并成一個(gè)。

　　3)優(yōu)化緩存，對(duì)于沒有變化的網(wǎng)頁元素(如頁頭、頁尾等)，用戶再次訪問的時(shí)候沒有必要重新下載，直接從瀏覽器緩存里讀取就可以了。

　　2、使用CDN(Content Delivery Network，內(nèi)容分發(fā)網(wǎng)絡(luò))

　　CDN由一系列分散到各個(gè)不同地理位置上的Web服務(wù)器組成，它根據(jù)和用戶在網(wǎng)絡(luò)上的靠近程度來指定某臺(tái)服務(wù)器響應(yīng)用戶的請(qǐng)求。當(dāng)你的網(wǎng)站圖片很多事，就一樣要使用CDN了，比如現(xiàn)在的電商網(wǎng)站，幾乎都在使用CDN。

　　3、壓縮網(wǎng)頁元素

　　網(wǎng)頁中的每個(gè)元素越小，下載所需的時(shí)間就越少，這個(gè)很好理解?，F(xiàn)在比較成熟和流程的壓縮網(wǎng)頁的方式，是通過Gzip，我自己的實(shí)操經(jīng)驗(yàn)來看，一般可以將網(wǎng)頁文本內(nèi)容減少70%以上。

　　4、樣式表放在網(wǎng)頁Head部分

　　這也是我實(shí)際操作過的案例，把樣式表(CSS文件)移到網(wǎng)頁的Head部分，可以提高頁面的加載速度，讓頁面元素順序顯示。

　　5、把JS文件放到網(wǎng)頁底部

　　網(wǎng)頁打開時(shí)，所有元素是順序顯示的。由于JS文件的特殊性，其相比其他元素來說，會(huì)加載的很慢，在JS文件下載完成之前，其他后面元素的順序顯示將被阻塞，因此把JS文件盡量放在底部，意味著內(nèi)容能被快速顯示。

　　6、把樣式表和JS腳本放到外部文件中

　　盡管將樣式表和JS腳本直接寫入網(wǎng)頁HTML中，可以減少外部文件調(diào)用數(shù)量，但是，這樣做會(huì)增加網(wǎng)頁的文件大小。綜合來看，將樣式表和JS腳本放到外部文件中，也許用戶首次訪問時(shí)會(huì)有點(diǎn)慢，但是后續(xù)在訪問網(wǎng)站時(shí)，用戶直接通過瀏覽器緩存就可以用，從而達(dá)到減少HTTP請(qǐng)求數(shù)的目的，為最優(yōu)的做法。

　　商城網(wǎng)站建設(shè)要素二：別讓我想

　　用戶不會(huì)使用一個(gè)網(wǎng)站絕對(duì)不是用戶的錯(cuò)，他會(huì)打開電腦，會(huì)使用鍵盤和鼠標(biāo)，會(huì)打開瀏覽器上網(wǎng)，經(jīng)過這么步驟最終到達(dá)了你的網(wǎng)站，然后發(fā)現(xiàn)網(wǎng)站上一團(tuán)糟，搞不懂這是什么，那是什么，也懶得學(xué)習(xí)如何使用，于是就會(huì)眼都不眨一下就關(guān)閉你的網(wǎng)站。這是很現(xiàn)實(shí)的一個(gè)用戶行為。

　　在網(wǎng)站能夠快速觸達(dá)用戶之后，網(wǎng)站運(yùn)營(yíng)人員面臨的下一個(gè)重要問題就是：如何留住用戶?

　　一、包裝好你的網(wǎng)站

　　1、你是誰

　　我們辨識(shí)一個(gè)人，并不需要記住他從頭到腳所有細(xì)節(jié)，看他的臉就OK了;當(dāng)我們辨識(shí)一個(gè)網(wǎng)站時(shí)，也是同樣的道理，網(wǎng)站的Logo就是臉。Logo可以讓用戶輕松知道網(wǎng)站是誰，無論瀏覽到網(wǎng)站中的任何一個(gè)網(wǎng)頁，都能知道這是哪個(gè)網(wǎng)站在提供服務(wù)。

　　2、你是干什么的

　　有了網(wǎng)站Logo，還要告訴用戶，網(wǎng)站是提供什么服務(wù)的，是購(gòu)物網(wǎng)站，新聞網(wǎng)站，還是社交網(wǎng)站。尤其是對(duì)于一個(gè)新網(wǎng)站，清晰的一句話介紹至關(guān)重要。

　　3、你能帶來什么好處

　　這就是網(wǎng)站的差異化優(yōu)勢(shì)介紹，相比同行競(jìng)爭(zhēng)網(wǎng)站來說，用戶使用你的網(wǎng)站，好處是什么，可以和“你是干什么的”整合成一句話至于Logo下方。

　　經(jīng)過對(duì)網(wǎng)站的基礎(chǔ)包裝之后，我們算是完成了留住用戶的第一步工作，接下來，我們希望用戶在網(wǎng)站中做進(jìn)一步的嘗試，如何做呢?

　　二、關(guān)注用戶及其任務(wù)，給予明確指引

　　對(duì)于用戶來說，登陸任何一個(gè)網(wǎng)站，一定都有其目的。上購(gòu)物網(wǎng)站是買東西，上門戶網(wǎng)站是為看新聞，上SNS網(wǎng)站是為分享信息、聯(lián)絡(luò)朋友等，要達(dá)到這些目的，一定需要進(jìn)行一系列操作。如果能讓用戶以最方便、最快捷的方式完成這些操作，順利完成任務(wù)，毋庸置疑，用戶一定會(huì)留下。

　　舉例來說，如果是一家電商網(wǎng)站，是否有清晰的站內(nèi)搜索功能提示，清晰的商品分類導(dǎo)航，醒目的購(gòu)買按鈕，以及靈活的付款結(jié)算系統(tǒng)等，這些都是圍繞著用戶及其任務(wù)(網(wǎng)上購(gòu)物)展開的。因此，在設(shè)計(jì)網(wǎng)站的時(shí)候，我們一定要給予用戶醒目、清晰的操作指引，以幫助用戶盡快且順利地進(jìn)入下一步，下一步，直至最終完成任務(wù)(下單付款)。

　　滿足用戶，其實(shí)很簡(jiǎn)單，做到貼心、用心、上心，用戶自然會(huì)向你靠近。

　　商城網(wǎng)站建設(shè)要素三：別讓我煩

　　用戶都是喜歡偷懶的，如果你的網(wǎng)站操作效率很低，就會(huì)令用戶煩躁，進(jìn)而導(dǎo)致不好的體驗(yàn)，甚至出現(xiàn)壞口碑。有一個(gè)粗略的說話是，完成任務(wù)的難度與其所需步驟的平方成正比，那么，縮短完成路徑就是幫用戶偷懶，就是好的用戶體驗(yàn)。

　　舉個(gè)正面的網(wǎng)站實(shí)例來說明。登陸美國(guó)亞馬遜網(wǎng)站，當(dāng)你進(jìn)入一個(gè)商品頁面之后可以無刷新切換商品的規(guī)格，比如我要購(gòu)買一臺(tái)蘋果筆記本電腦，我打開了商品頁(大家自己登錄試試)，商品右側(cè)會(huì)有個(gè)版本切換的選項(xiàng)，在這里我可以快速查看不同配置的電腦價(jià)格，只需將鼠標(biāo)移動(dòng)上去，商品圖片、價(jià)格等信息就會(huì)自動(dòng)發(fā)生變化。這種人性化的設(shè)計(jì)，為想要比較商品的多個(gè)版本的用戶提供了極高的操作效率，用戶自然喜歡。

　　目標(biāo)信息要醒目而親近

　　在關(guān)注縮短完成路徑這個(gè)問題的時(shí)候，優(yōu)化操作步驟是第一位的，因?yàn)槲覀兪紫纫?jiǎn)化用戶的任務(wù)。接下來，我們要在任務(wù)內(nèi)部?jī)?yōu)化指點(diǎn)設(shè)備(鼠標(biāo)或手指等)運(yùn)動(dòng)軌跡和眼球運(yùn)動(dòng)軌跡等細(xì)節(jié)。根據(jù)費(fèi)茨定律，使用指點(diǎn)設(shè)備到達(dá)一個(gè)目標(biāo)的時(shí)間與以下2個(gè)因素有關(guān)：

　　1.設(shè)備當(dāng)前位置和目標(biāo)位置的距離，距離越短，所用時(shí)間越短。

　　2.目標(biāo)的面積，面積越大，所用時(shí)間越短。

　　通俗來說，就是如果我們希望用戶注意或點(diǎn)擊某個(gè)元素(如文字、圖片、按鈕等)，那么這個(gè)元素就不應(yīng)該距離指點(diǎn)設(shè)備的當(dāng)前位置太遠(yuǎn)(比如出現(xiàn)在屏幕的右側(cè))，并且它的面積要足夠大。伴隨著Web2.0的熱浪，網(wǎng)站設(shè)計(jì)也有了一系列的革新，其中最大的一個(gè)革新就是“以大為美”，大大的LOGO，大大的圖片，大大的按鈕，它們不光看起來更有沖擊力，也更方便用戶的識(shí)別和點(diǎn)擊。

　　提醒方式要溫和并及時(shí)

　　除了簡(jiǎn)化任務(wù)流程之外，在用戶完成任務(wù)的過程中，網(wǎng)站有時(shí)需要給用戶提供幫助和指引。之前常見的做法是采用彈框方式進(jìn)行提示，用戶需要關(guān)閉對(duì)話框才能繼續(xù)自己的任務(wù)，無形中降低了操作效率。

　　最佳的提醒方式應(yīng)該轉(zhuǎn)向溫柔的方式，將打斷降低到最低，舉個(gè)例子：當(dāng)在你注冊(cè)一個(gè)郵箱時(shí)，當(dāng)輸入用戶名后，最佳的檢驗(yàn)方式應(yīng)是自動(dòng)查詢此用戶名是否可用，如不可用，應(yīng)給出建議，yeah.net郵箱就做的很好，圖略(大家可以登錄嘗試)。

　　其實(shí)，有時(shí)候操作效率的降低，并不是因?yàn)楣δ茉O(shè)計(jì)得不夠好，或者提示和建議處理得不夠好，而是由于強(qiáng)行的塞進(jìn)了一些用戶不想要的信息或任務(wù)。比如，用戶正在閱讀一篇文章，忽然飄出來一個(gè)廣告擋住了用戶想要閱讀的部分，用戶怎么能不惱火?

　　經(jīng)營(yíng)網(wǎng)站，盡管是盈利為本，但是過分的不重視用戶體驗(yàn)，忽視用戶感受，小心衣食父母離你而去，并一去不返。

　　當(dāng)用戶犯錯(cuò)的時(shí)候，你是如何做的呢?

　　在我們做好一切運(yùn)營(yíng)優(yōu)化后，有一種情況需要另外注意，就是用戶會(huì)自己出錯(cuò)。

　　當(dāng)用戶出錯(cuò)的時(shí)候他也會(huì)很煩躁，他不會(huì)認(rèn)為是他自己的問題，反倒會(huì)把責(zé)任推給網(wǎng)站，所以要盡可能降低用戶出錯(cuò)的機(jī)會(huì)。