當(dāng)前位置：新聞中心響應(yīng)式網(wǎng)站專題針對移動設(shè)備進(jìn)行優(yōu)化的預(yù)訂體驗(yàn)

12-242009

觀點(diǎn)

針對移動設(shè)備進(jìn)行優(yōu)化的預(yù)訂體驗(yàn)

2009-12-24 響應(yīng)式網(wǎng)站專題

即使他們在開始旅行之前花大量時間研究要做的事情，但大多數(shù)旅行者還是會做出最后的決定。尋找酒店和航班相對容易，但是在旅行和活動方面，問題在于并非總是可以提供最后或最晚的預(yù)訂。而且，如果有的話，通常很難在網(wǎng)上進(jìn)行購買。由于許多網(wǎng)站運(yùn)行緩慢或預(yù)訂過程漫長而復(fù)雜，因此移動體驗(yàn)也可能受到限制。

在本文中，我們將提供一個案例研究，并分享對我們設(shè)計(jì)和建造的項(xiàng)目GetLocal的觀察，GetLocal是冰島的在線旅行社和預(yù)訂平臺。我們將分享我們?nèi)绾瓮ㄟ^構(gòu)建具有超快速搜索和針對移動設(shè)備進(jìn)行優(yōu)化的預(yù)訂體驗(yàn)的響應(yīng)式網(wǎng)站來創(chuàng)建解決移動用戶面臨的多個挑戰(zhàn)的預(yù)訂平臺的方法。盡管本文重點(diǎn)介紹旅行，但是設(shè)計(jì)師和開發(fā)人員可以將我們學(xué)到的知識應(yīng)用到任何類型的電子商務(wù)和移動搜索中。

正確建立移動電子商務(wù)網(wǎng)站

如果您正計(jì)劃下一個移動電子商務(wù)網(wǎng)站，請記住在開始之前要考慮很多事情，以及您需要問自己的問題。

閱讀相關(guān)文章→

尋找最難解決的問題

我們首先編寫一個業(yè)務(wù)計(jì)劃，概述要解決的問題。Google的一項(xiàng)研究表明，有85％的旅行者在到達(dá)目的地后做出購買決定，而50％的旅行者使用手機(jī)進(jìn)行預(yù)訂。考慮到這一點(diǎn)，我們構(gòu)建了滿足不同角色的多個用例。我們需要解決的最困難的問題是旅途中正在使用連接速度較慢的移動設(shè)備，需要找到具有最后一刻可用性的特定活動并且需要能夠在線完成預(yù)訂的人。

Web表單是每個有意義的交互的中心，因此值得牢記處理。認(rèn)識Adam Silver的“ 表單設(shè)計(jì)模式”，這是設(shè)計(jì)和構(gòu)建Web表單的實(shí)用指南。

跳轉(zhuǎn)到目錄?

功能面板

客戶旅行旅程

我們對客戶旅程的看法，到達(dá)目的地后興奮和移動使用增加。

想象一群朋友沿著冰島的南海岸旅行，該瀑布以瀑布和黑沙海灘而聞名?，F(xiàn)在是上午10:00，該小組希望借此機(jī)會在附近的一個名為Sólheimaj?kull的冰川進(jìn)行冰川遠(yuǎn)足；他們需要找到具有認(rèn)證的冰川向?qū)У挠斡[，該向?qū)Р拍茉谕惶斓南挛缬斡[中適應(yīng)他們。他們將手機(jī)連接到租車隨附的無線路由器，但是在農(nóng)村，如果能夠找到穩(wěn)定的3G連接，他們將很幸運(yùn)。他們想在線預(yù)訂并確保自己的位置。

GetLocal搜索引擎的實(shí)際應(yīng)用

在GetLocal.is上搜索具有多個屬性的冰川之旅。

超越移動設(shè)計(jì)

對我們來說，移動設(shè)計(jì)超越了視覺設(shè)計(jì)。我們研究了從渲染速度到內(nèi)容的每一個方面。從一開始，GetLocal就被設(shè)計(jì)為移動優(yōu)先。從第一個線框工程圖到Sketch中的高清設(shè)計(jì)，我們始終將移動體驗(yàn)保持在最前沿。

牢記這一點(diǎn)有助于我們簡化導(dǎo)航以及信息體系結(jié)構(gòu)；這也意味著所有元素都是為觸摸而設(shè)計(jì)的，并且我們使用了諸如水平滑動之類的移動設(shè)計(jì)模式。我們還必須覆蓋許多本機(jī)表單元素，并用更易于使用的簡單菜單替換它們。

預(yù)訂界面的第一版

您需要單擊，滾動并單擊以更改成人人數(shù)的預(yù)訂UI的第一個版本。

預(yù)訂界面的最新版本

當(dāng)前版本僅需單擊即可，并且不需要本機(jī)瀏覽器元素，因此更易于在移動設(shè)備上使用。

如果將我們的桌面版本與移動版本進(jìn)行比較，您會發(fā)現(xiàn)我們只是將移動預(yù)訂表格復(fù)制到了桌面版本。那不是計(jì)劃，但是一旦移動版本制作完成，我們就沒有必要為臺式機(jī)創(chuàng)建不同的體驗(yàn)。

桌面瀏覽詳細(xì)信息頁面

預(yù)訂表格查詢實(shí)時可用性API，并立即通知您每天的可用性。如果出發(fā)的座位少于10個，我們會告訴您確切的預(yù)訂數(shù)量。我們通過連接各種庫存解決方案來做到這一點(diǎn)。加載產(chǎn)品后，我們將調(diào)用API并獲取可用的日期以及剩余的座位數(shù)。這使我們可以禁用沒有庫存的日期，并向客戶顯示剩余的座位數(shù)。

實(shí)時具有這種直接訪問權(quán)限為用戶節(jié)省了不必不必開始預(yù)訂過程即可發(fā)現(xiàn)想要的東西在其首選日期已售罄或不可用的麻煩。

極品飛車

我們希望客戶能感覺到我們的網(wǎng)站超快，我們希望縮短1秒的開始渲染時間。這不是一件容易的事，尤其是當(dāng)您在一個非常漂亮的網(wǎng)站上加載了精美的圖片時。

我們挑戰(zhàn)了領(lǐng)先的前端開發(fā)人員，來自Gateway Technolabs的Alpesh Prajapati，將請求減少了40％，并將渲染速度提高了60％。我們希望比主要競爭對手快四倍。首先，他認(rèn)為設(shè)定這樣一個雄心勃勃的目標(biāo)很瘋狂，但是一旦我們開始仔細(xì)研究到目前為止所做的一切，我們就一直在尋找改善和接近目標(biāo)的方法。

在竭盡全力之后，我們聘請了哈里·羅伯茨（Harry Roberts）來審核我們的表現(xiàn)。哈里提供了非常深入的分析，并指出了我們可以做得更好的幾個地方。結(jié)果，我們修改了緩存策略并重構(gòu)了一些CSS，從而帶來了進(jìn)一步的改進(jìn)。

提出更少的請求

我們切換到HTTP / 2以便并行加載請求。但是，由于從服務(wù)器到客戶端的每個請求仍然需要時間，因此我們通過合并和壓縮CSS和JavaScript文件，使用圖標(biāo)的精靈等來減少請求的數(shù)量。合并和壓縮給更新和發(fā)行期間的開發(fā)帶來了一些開銷，但他們?nèi)匀恢档谩?/span>

我們還分解了JavaScript和CSS文件，僅加載頁面上所需的內(nèi)容。例如，我們的博客不需要日歷所需的CSS和JavaScript。我們還刪除了開始使用的一些庫，因?yàn)槲覀冋业搅私鉀Q它們的方法。例如，我們放棄了Font Awesome，就這樣。

壓縮圖像并提供最佳尺寸

我們使用了很多圖像，但發(fā)現(xiàn)Photoshop和Sketch的壓縮程度不夠高。我們開始通過ImageOptim（僅Mac）傳遞所有圖像，然后將CMS與ImageOptim Web服務(wù)集成在一起，以便所有上傳的圖像在存儲并發(fā)布到CDN之前都要經(jīng)過適當(dāng)?shù)膲嚎s。

通過ImageOptim壓縮本文中的高分辨率圖像后的結(jié)果

通過ImageOptim壓縮高分辨率圖像后的結(jié)果。（查看大圖）

盡管壓縮圖像會大大減小尺寸，但是我們知道根據(jù)設(shè)備的屏幕尺寸提供不同尺寸的圖像會有所幫助。這也使我們能夠調(diào)整裁剪點(diǎn)，甚至可以將不同的圖像提供給不同的設(shè)備，以充分利用空間。

我們使用該picture元素在不同的斷點(diǎn)處提供尺寸合適的圖像。

對于每個圖像，我們創(chuàng)建480、780、1200和2560像素寬的版本。我們使用Slack模板以最佳方式定位和裁剪英雄橫幅，以適應(yīng)常見的屏幕尺寸，有時，如果適合的話，可以使用其他圖像。

用于橫幅廣告定位的Slack模板的屏幕截圖

我們用于橫幅定位的Slack模板（查看大圖）

我們預(yù)先加載了英雄橫幅，并在標(biāo)題中內(nèi)聯(lián)了最合適的尺寸，以實(shí)現(xiàn)最佳的尺寸和設(shè)計(jì)（盡管preload并非所有瀏覽器都支持）。

我們有來自世界各地的客戶，我們希望來自巴西，澳大利亞和中國的客戶能體驗(yàn)到與來自歐洲的客戶相同的速度。除關(guān)鍵CSS和JavaScript文件外，所有常見文件都存儲在Amazon S3上，并通過CloudFront內(nèi)容交付網(wǎng)絡(luò)（CDN）提供服務(wù)。對于大多數(shù)文件，我們將瀏覽器緩存設(shè)置為不可變的，這基本上意味著瀏覽器將永遠(yuǎn)不會嘗試再次獲取該文件。為了打破該緩存，我們更改了文件的版本號。作為不支持不可變緩存的瀏覽器的備份，我們將有效期定為很遠(yuǎn)的將來。

復(fù)制

我們將Redis用于大多數(shù)頁面的服務(wù)器端緩存，但是我們不緩存所有內(nèi)容，因?yàn)榍鍐螜z查需要實(shí)時進(jìn)行并通過AJAX進(jìn)行填充。

當(dāng)頁面加載時，我們：

獲取產(chǎn)品詳細(xì)信息，

加載評論，

調(diào)用實(shí)時可用性API并填充日歷，

最后，加載類似的游覽。

在我們的游覽詳細(xì)信息頁面上加載AJAX的順序

在我們的游覽詳細(xì)信息頁面上加載AJAX的順序（查看大圖）

內(nèi)聯(lián)移動折疊樣式

速度與感知能力息息相關(guān)。能夠在一秒鐘內(nèi)開始呈現(xiàn)頁面很重要，因?yàn)榧词拐麄€呈現(xiàn)時間較慢，它也會給人以快速的印象。

性能測試結(jié)果

WebPagetest.org上的性能測試的結(jié)果。B級歸因于第三方腳本。（查看大圖）

我們通過獲取部分主要CSS文件（即呈現(xiàn)頁面第一部分所需的內(nèi)容）并將其包含在head模板的模板中來完成此操作，這使瀏覽器可以開始呈現(xiàn)頁面，即使它沒有下載了所有CSS。加載CSS文件會導(dǎo)致渲染阻塞，因此我們使用loadCSS異步加載完整樣式表。

持續(xù)優(yōu)化-它永遠(yuǎn)不會結(jié)束！

優(yōu)化有點(diǎn)像節(jié)食：一旦達(dá)到目標(biāo)，您就會開始懈怠，忘記優(yōu)化。速度是我們的主要功能之一，因此我們經(jīng)常檢查以確保我們?nèi)匀唤】?。我們使用Pingdom的速度測試儀來自動測試各個頁面并向我們發(fā)送每周結(jié)果；如果出現(xiàn)問題或變得健忘，這會提醒我們。

使用工具并獲得外部幫助

我們已經(jīng)使用Lighthouse，WebPagetest和Google的PageSpeed Insights來更好地了解我們可以做些什么來改善我們的網(wǎng)站。我們建議您找到一個基準(zhǔn)，設(shè)定目標(biāo)并進(jìn)行優(yōu)化，直到達(dá)到目標(biāo)為止。

在Smashing Magazine上查看一些表演文章。也有很多關(guān)于該主題的精彩視頻和書籍。不要害羞地聘請專家進(jìn)行審核或給您建議。這個主題確實(shí)很棘手，需要很多專業(yè)知識。

太快會成問題嗎？

上線不久后，我們意識到我們最大的挑戰(zhàn)之一就是找到有空的游覽。在像冰島這樣相對較小的市場中，旅游業(yè)每年以超過20％的速度增長，因此越來越難以找到離境較近的可用座位，尤其是在人氣較高的旅游中。我們不是元搜索引擎，我們直接在庫存解決方案之上進(jìn)行集成。我們處理從搜索到預(yù)訂的整個生命周期。因此，我們不必通過關(guān)聯(lián)密鑰將客戶轉(zhuǎn)移到另一個銷售平臺，而是可以通過購買渠道來跟蹤客戶，從而確保優(yōu)化每個步驟。

我們需要找到一種方法來映射市場中可用的活動，因此我們使用相對數(shù)據(jù)點(diǎn)（例如位置，活動類型，價格，持續(xù)時間，出發(fā)時間，車輛類型和景點(diǎn)）構(gòu)建了搜索引擎。一旦您開始研究挑戰(zhàn)并將預(yù)訂截止時間和可用性納入考慮范圍，數(shù)據(jù)集的大小就會開始迅速增長。

一年365天，一日三班的旅行包含多個方面，這將需要一千多行復(fù)雜數(shù)據(jù)。將其乘以一千次游覽，您將獲得一百萬行以上的數(shù)據(jù)。

擁有如此眾多的產(chǎn)品庫存，但搜索面如此之多（我們使用一百多個數(shù)據(jù)點(diǎn)進(jìn)行分類），我們需要找到一種解決方案，該解決方案不僅滿足我們對速度的需求，而且具有靈活性和可擴(kuò)展性足以在幾毫秒內(nèi)處理多達(dá)一百萬條記錄的處理負(fù)載。

我們考慮過要構(gòu)建自己的搜索引擎，并制作了一些原型，但隨后我們遇到了阿爾戈利亞，魔術(shù)開始出現(xiàn)。但是，與Algolia的集成非常棘手，因?yàn)槲覀冃枰O(shè)計(jì)一個數(shù)據(jù)集，以容納所有信息和構(gòu)面，但每條記錄的限制為10 KB（Algolia設(shè)置的限制）。我們還需要在Algolia的API之上構(gòu)建自定義窗口小部件，因?yàn)槲覀兿胧褂米约旱脑O(shè)計(jì)。

在我們的數(shù)據(jù)庫中，我們存儲了我們從與之集成的庫存解決方案中匯總的所有產(chǎn)品信息。這包括元數(shù)據(jù)和描述，照片，搜索方面的分類以及價格和可用性。這就要求我們建立cron作業(yè)，在一天中的特定時間間隔內(nèi)向庫存解決方案的API發(fā)送請求；這些請求將檢查接下來幾周的更新可用性，并采用最新價格。更新完成后，我們將通過其API將更改推送到Algolia，以便搜索數(shù)據(jù)集同步并顯示實(shí)時可用性和價格。

集成多種庫存解決方案和Algolia并非易事，但最終結(jié)果使我們感到非常自豪。搜索引擎會在25毫秒內(nèi)給出響應(yīng)-太快了！

來自我們的Algolia儀表板的平均響應(yīng)時間

25毫秒的問題

結(jié)果集在25毫秒內(nèi)立即更新，我們意識到我們需要以某種方式讓用戶知道發(fā)生了更改，因?yàn)榻Y(jié)果可能會出現(xiàn)在折疊以下。

要解決此問題，我們使用“提交”按鈕模擬了表單的提交進(jìn)行了測試，但是該按鈕實(shí)際上沒有任何作用，因?yàn)橐坏└牧巳魏芜^濾器，結(jié)果集就會更新。所有按鈕的作用都像錨一樣，將您導(dǎo)航到結(jié)果集，從而使您感覺到下面的結(jié)果集已發(fā)生更改。

我們還測試了黃色淡入淡出技術(shù)，以突出顯示結(jié)果集編號中的更改，只是讓人們知道發(fā)生了更改并且結(jié)果數(shù)量已更改。

最近，我們一直在嘗試滑動面板，如果結(jié)果集發(fā)生更改，該面板會顯示兩秒鐘。在移動設(shè)備上，我們固定了此預(yù)覽的位置，以便人們可以立即看到他們的更改對結(jié)果產(chǎn)生的影響。

結(jié)果集更新時，我們會巧妙地通知用戶。

微妙地通知結(jié)果集中的更改

內(nèi)容仍為王

對于我們來說，內(nèi)容是設(shè)計(jì)的關(guān)鍵部分-不僅是標(biāo)簽和標(biāo)題，而且是我們銷售產(chǎn)品的描述。我們經(jīng)營一個市場，因此我們的供應(yīng)商向我們提供他們自己的營銷材料，包括文字和圖像。因?yàn)槲覀兣c200個供應(yīng)商合作，并且有1000多個旅行團(tuán)可供銷售，所以您可以想象每個項(xiàng)目之間的巨大差異。

這導(dǎo)致我們需要重寫我們提供的大多數(shù)產(chǎn)品的說明。我們利用這個機(jī)會來增強(qiáng)描述，使描述更短，更直接。我們將自己放在旅行者的鞋子上，閱讀并嘗試?yán)斫馕覀兂鍪鄣拿糠N產(chǎn)品。什么信息是必要的，什么僅僅是浪費(fèi)的絨毛？是否缺少我們可以嘗試回答的關(guān)鍵要素，并且可以突出顯示我們認(rèn)為重要的關(guān)鍵細(xì)節(jié)。

這個過程既緩慢又重要。它仍在進(jìn)行中，但是它使我們能夠在我們出售的所有產(chǎn)品中添加個人風(fēng)格和品牌。我們希望我們的語氣是朋友或友善的當(dāng)?shù)厝说膽B(tài)度，他們能為您提供誠實(shí)直接的答案，而不是美化旅行者的陷阱（可能會如此宏偉）。這使我們還可以使用稍微簡單一些的語言，因?yàn)槲覀兊脑S多客戶都是非母語的英語使用者。在海明威的應(yīng)用程序是一個偉大的工具來幫助我們改一下，形成我們的句子使它們更容易閱讀和理解。

使用海明威應(yīng)用程序編輯內(nèi)容前后測量清晰度

使用海明威應(yīng)用程序編輯內(nèi)容之前和之后以測量清晰度。

消除摩擦

電子商務(wù)充滿了障礙，不安全感以及復(fù)雜的形式和標(biāo)簽。用戶通常必須注冊或放棄不必要的個人信息才能完成購買。一個小錯誤，您就永遠(yuǎn)失去了客戶。我們的處境更加困難，因?yàn)榇蠖鄶?shù)客戶在逗留期間僅購物一次，因此我們沒有太多機(jī)會與他們建立關(guān)系。

因此，我們不需要任何人注冊即可簽出產(chǎn)品或?qū)a(chǎn)品添加到他們的收藏夾列表中。我們將他們的選擇存儲在cookie中，但允許他們共享一個鏈接，以顯示其已保存列表的內(nèi)容。

用戶無需注冊或提供電子郵件地址即可共享自己喜歡的旅行的集合。

我們將相同的理念應(yīng)用于結(jié)帳，沒有任何隱藏費(fèi)用，也不會索要我們不需要的任何信息。我們解釋了為什么我們需要收集的信息；我們自動建議國家/地區(qū)電話代碼；并且我們確保輸入字段提供正確的鍵盤格式。

使使用手機(jī)輸入信用卡號碼更容易

對我們來說，電子商務(wù)有兩個主要障礙。第一個是讓訪問者放棄其電子郵件地址，第二個是獲取其信用卡信息。我們嘗試先詢問他們的信用卡，然后再詢問他們的姓名，電話號碼和電子郵件地址。這背后的想法是，如果他們愿意跨越提供信用卡的最大障礙，那么提供其余的信用卡就不會有問題。盡管我們沒有看到轉(zhuǎn)換發(fā)生重大變化，但實(shí)驗(yàn)還是成功的。因此，我們恢復(fù)了經(jīng)典方法，因?yàn)樗杏X更自然。

結(jié)論

打造出色的移動體驗(yàn)確實(shí)非常困難且耗時，但是只要對細(xì)節(jié)足夠重視，您就可以成功。對我們來說，距離上線僅8個月，因此盡管取得了良好的進(jìn)展，但我們距離目標(biāo)還很遙遠(yuǎn)。

我們的目標(biāo)是在六個星期內(nèi)推出最低可行產(chǎn)品（MVP），包括設(shè)計(jì)和開發(fā)第一個版本。在第一個版本中，我們必須采取一些捷徑，但是我們想證明我們能夠進(jìn)行轉(zhuǎn)換。在上線的兩天內(nèi)，我們進(jìn)行了首次銷售，即$ 2500的雪地摩托之旅。從那以后，成千上萬的旅行者使用我們的服務(wù)來預(yù)訂他們的夢想假期?，F(xiàn)在我們已經(jīng)開始專注于產(chǎn)品的下一階段，敬請期待。

上一篇：讓構(gòu)建響應(yīng)式網(wǎng)站更簡單返回觀點(diǎn)列表下一篇：具有流體響應(yīng)性的版式

本文標(biāo)簽：

本文地址： http://www.bmwdream.cn/a/677.html

案例

網(wǎng)站建設(shè)

應(yīng)用開發(fā)

觀點(diǎn)

針對移動設(shè)備進(jìn)行優(yōu)化的預(yù)訂體驗(yàn)

相關(guān)專題

開始您的數(shù)字化品牌體驗(yàn)！ 0571-85815193 期待您的來電！

企業(yè)微信

電話

浙江·杭州

郵箱

我們正使用 cookies 來改善您的訪問體驗(yàn)

Cookie 偏好

管理cookie偏好

基本 cookies

性能 cookies

功能性 cookies

定位 Cookies

我們正使用 cookies 來改善您的訪問體驗(yàn)

案例

網(wǎng)站建設(shè)

應(yīng)用開發(fā)

觀點(diǎn)

針對移動設(shè)備進(jìn)行優(yōu)化的預(yù)訂體驗(yàn)

相關(guān)專題

開始您的數(shù)字化品牌體驗(yàn)！ 0571-85815193 期待您的來電！

企業(yè)微信

電話

浙江·杭州

郵箱

我們正使用 cookies 來改善您的訪問體驗(yàn)

Cookie 偏好

管理cookie偏好

基本 cookies

性能 cookies

功能性 cookies

定位 Cookies

我們正使用 cookies 來改善您的訪問體驗(yàn)

開始您的數(shù)字化品牌體驗(yàn)！ 0571-85815193 期待您的來電！