在這篇文章中，我們將規劃一個高轉換率的移動電子商務網站時，遍歷所有的重要步驟。 你要問最重要的問題是：
- 我們是誰建立這個移動網站？
- 我們將如何衡量成功轉換？
- 什么樣的設計因素會影響移動電子商務的轉化率？
- 什么是理想的產品頁面？
讓我們開始吧。
那么，誰正在我們建立這個手機網站的？
移動客戶是誰，我們都在不斷學習作為移動應用變得更加廣泛和過濾器到日常生活。 要規劃一個移動電子商務商店，我們需要把自己在移動客戶的心態，了解他們的意圖和情緒。
手機使用位置
移動設備是一個生命入侵的設備。 我們用它在各種不同的情況：
- 一邊看電視;
- 購物時或在晚上出去;
- 在床上，或在浴室;
- 而吃了一頓（寵物恨我的！）;
- 無聊或守候在我們的辦公桌，在火車站或汽車乘客的時候。
在上述每一種情況中，人的心靈會處于不同的狀態，并可能會或可能不會在“采購模式?！蔽覀冞€用手機在一天中的不同時段。
這是如何幫助我們呢？ 嗯，比如說，你可以策略性地放置不同的橫幅您的手機電子商務網站，如降價促銷，折扣或優惠券，或許提供清晨折扣乘客，同時提供電視晚餐觀眾別的東西在的主頁上晚上（類似“看無聊的肥皂??？現在抓住一個DVD捆綁！”）。
移動購物者的主要類型
哥倫比亞大學商學院確定的五種類型的移動購物者在展廳和專賣店：剝削者，savvys，價格敏感者，體驗者和傳統主義者。 我已經走了一步，思考人們如何使用他們的手機在展廳外面來決定是否購買產品。
- 該比較器
該比較器瀏覽的產品在磚和迫擊炮商店，而他們的移動設備上的價格檢查。 他們可能會在店內購買，使用網上價格作為談判籌碼。 但是，如果網上報價是足夠強大，產品可用，他們將購買他們的電話那里，然后，或當他們回家后。 - 這筆交易的愛人
此人喜歡便宜貨，而當他們在店里，他們會找一個在線優惠券，一個Groupon的交易或東西從買在高街的價格拯救他們。 他們不同于他們愿意相信他們所得到特殊處理，在有限的要約或獨家推廣（想秘密逃逸的獨家協議或Booking.com的最低價格保證），該比較器。 - 社交購物者
不斷地連接到各種社會渠道，社會的購物者如下名流，行業領袖和品牌上的Instagram，Twitter和Pinterest的，尋找最新的流行趨勢，小工具等。 點擊通過一切從復古過濾的照片，嚴重喜歡的衣服，他們只需要購買要準備好周末。 - 時間匆匆過客
此人只需要打發時間，等待某人或某事。 他們沖動買家通常，瀏覽商店，他們已經知道（指揮交通的一種形式）的最新產品。 他們可能會訂閱新聞提要或電子郵件列表，并通過點擊直接推動社會渠道了。
所有這些類型的手機購物者有移動電子商務門店很高的期望。
為什么這很重要？ 你需要確保你迎合各種不同類型的購物者誰可能訪問移動設備上的存儲。 你得找出他們，給他們他們尋求和展示信息的格式，他們習慣使用的選項。 如果沒有，你最終會討厭他們，而不是增加你的客戶的底線。
我們如何將測量轉換成功？
我們需要定義的成功看起來是什么樣的轉換。 通常情況下，轉換分為以下類別之一：
- 采購
訪問者已完成購買交易。 - 社會促進
訪問者可以按照你的社會渠道;份額，鳴叫或喜歡你的產品或品牌，寫評論，訂閱時事通訊，等等 - 完成任務
訪問者已經完成了一些任務，無論是玩游戲，填寫調查顯示，進入一個競爭等。
然后，我們需要給自己訂了一些SMART目標 （由Paul J.邁耶所定義）來跟蹤和衡量我們的成功。 這些目標也將幫助我們專注于項目，而不是得意忘形過spec’ing或過度設計的網站。 那么，什么是SMART目標？
- S pecific
我們的目標應該是明確的，應該定義我們希望達到的目標。 - M easureable
我們如何來衡量呢？ 通過什么方法？ 我們可以說誰是負責報告這一點，就是他們將報告走得更遠。 - 一個 ttainable
如何將這個目標可以實現嗎？ 需要做的事情要做到這一點呢？ 我們有沒有預算，技術和時間？ - ?elevant
這是與我們的整體愿景？ 是市場準備好了嗎？ 是我們合適的人這樣做呢？ - 噸輸入法綁定
如何快速才能實現這一目標？ 我們什么時候開始和結束？
以下是三組，我們已經在過去設定的目標。 這些將直接影響怎么一去有關設計和開發移動電子商務商店。
SMART目標1
- 具體
增加35％的移動電子商務轉換。 - 測
在Magento分部銷售報告。 - 達到
通過創建一個具有響應性的電子商務商店做到這一點。 - 相應
這符合我們整體轉換的目標和目的采用移動技術。 - 時限
網站的推出在三個月內完成它。
SMART目標2
- 具體
通過5英鎊增加移動平均訂單。 - 測
結合分割銷售報告在Magento給日均訂單價值。 - 達到
改善向上銷售和交叉銷售的商品頁面，并在購物車推薦配套產品。 - 相應
這符合我們整體轉換的目標。 - 時限
在30天內完成這項工作，然后通過不斷的測試和迭代改進。
SMART目標3
- 具體
降低跳出率低于56％的頂級類別。 - 測
分析一組時間段在谷歌Analytics（分析）頁面訪問的報告。 - 達到
改善加載時間低于3G網絡在四秒，并提高著陸頁面設計。 - 相應
雖然不是直接變換本身，這將提高其他所有的轉化率通過保持用戶在網站上的時間更長，提高訪問的每個用戶的頁面數。 - 時限
測試超過14天的滾動周期，迭代的設計，直到我們擊中目標。
小提示：打印這些目標在一個大的字體大小，并把它們所在的整個團隊可以看到他們。 問團隊成員的工作將如何有助于共同目標。 如果任務不出力的話，那么質疑它的需要。
哪些設計因素影響移動電子商務轉換率？
讓我們通過對影響客戶如何瀏覽一個電子商務網站的因素，從移動的角度。
層次結構和導航
空間是在移動的溢價。 我們沒有提供大型的菜單供用戶瀏覽多類別的奢侈品。 因此，我們需要優先考慮的主要功能和內容，并提供一個搜索框，這是在一致的位置很方便。 采納了帆布導航正成為普遍的用戶開始了解如何使用它。
Currys的’敏感網站通過提供離線帆布頂級導航，搜索下拉框，即時購物車和帳戶訪問和存儲取景器，所有在一個非常小的空間，仍然是整個客戶的全程一貫做這非常好。
當你再向下滾動，標志區消失，五個主菜單項上移，減少了報頭所占用的空間，并給訪問者所感興趣的內容優先
貿易可用性和品牌導航加載時間
有時候，你需要做一個權衡。 當我們開發克羅克特和瓊斯的移動網站，我們的品牌指導方針和公司的傳統和質量信譽使我們更加畫報菜單系統，以強化品牌。 我們嘗試了5直觀的導航方法：
從我們的研究進入了領先的移動電子商務網站，我們認為，在頂部有一個固定的菜單將提供最佳的可用性。 像Currys的那些圖標觀眾的網站克羅克特和瓊斯不會是正確的“。 相反，我們使用一個菜單按鈕し下降到一個導航列表，與通過一個矩陣菜單加載子頁面。 這使我們空間添加圖像，給那的外觀和感覺的英國遺產。
固定導航比。 非固定式導航
固定導航坐的地方，總是看到他們是否向上或向下滾動用戶。 非固定導航是相反的，可見的，只有當用戶是在頁面的頂部。
基于各大品牌我都跟著電子商務網站，但趨勢是固定的導航，我認為這是有道理的。 對于我來說，固定導航的手中奪下來，不得不一路往回滾動到頁面頂部找到菜單欄是煩人。 有了固定的導航，你永遠只能快速的手指運動遠離訪問網站的深層部分。 實現這個很容易與MeanMenu jQuery插件或引導的導航條 。
圖像和產品攝影
我們都知道，攝影可以使或打破一個網站的外觀和感覺。 移動用戶希望看到的影像深深吸引他們，激勵他們進行購買，無論是度假或鍋里。 產品攝影的基礎知識是永遠重要的位置，所以一定要得到所有的客戶需要做出決定的圖片。
- 個人拍攝
這是一個鏡頭的產品處于最佳角度，通常對一個白色的背景。
- 詳細拍攝
這是一個特寫鏡頭顯示產品的特殊功能或設計的細節 – 例如，拼接的質量，所用的材料，標簽或手工制作的細節。
- 拍攝組件
如果它是一個家庭影院系統，然后利用它的各個部分的鏡頭，包括DVD播放機，音箱，遙控器及配件。
- 360°拍攝
這是一個動畫圖像組，允許用戶通過旋轉360°的自旋的乘積。 它通常由36次射門，每10°。 我們用這個夢幻般的效果與上克羅克特和瓊斯的網站鞋 。 我們拍攝的EME數字的大360攝影系統 ，然后編寫自定義jQuery來控制旋轉的效果。
- 組鏡頭
這通常是用在類別層次或組合產品。 集體照 – 無論是為了一系列的鍋或比薩餅，一邊喝 – 展示配套產品，并幫助廠商追加銷售給客戶。
- 在使用拍攝
一個重要但經常被遺忘的鏡頭是正在使用的產品之一。 例如，衣服看起來平放時比當上一個真人模特表現得非常不同。 這些鏡頭是理想，可以高度激勵顧客購買。
在移動，速度是一個障礙，所以記得要優化圖像快速加載，不影響質量。 當然，很多的努力正在投入開發一個響應的圖像解決方案 ，但是你采取任何方式只會不如你的攝影。 彼得·克勞福德越過如何“ 提高你的電子商務設計與輝煌的產品照片 ?！?/p>
活版印刷
想知道如何關閉移動用戶很快？ 使他們不得不捏和縮放閱讀文字！ 不必放大，使在手機上的文字清晰易讀是很煩人的，因此請確保您的字體是可讀的，對比，反應迅速，以及間隔。 有技術響應排版 ，我們可以遵循。
我們用一個簡單的CSS媒體查詢來實現上面的版式的基礎上，引導3的斷點設備寬度，以確保所有設備的一致性。
@media screen and (max-width: 320px) { .hero h2 { color: white; font-size: 2em; font-weight: 100; font-family: "bebas-neue"; } }
手指友好
所有這些關鍵的呼吁行動應足夠大，以用手指按壓。 據“ 手指友好的設計：理想的移動觸摸屏目標尺寸 ，“那是約57個像素寬的手指和72個像素寬的拇指。 文章還指出，“這是一致的菲茨定律 ，它說，要達到一個目標的時間較長，如果目標是較小的。 一個小目標用戶減慢下來，因為他們要格外注意準確地命中目標?！拔視f，我們大多數人都忽略了這個事實了很多年，尤其是我們調整了我們的1024×768的心態。
這是通用于移動電子商務網站的所有領域非常重要的：
- 類別樹的導航;
- 搜索按鈕和過濾器（需要精確的觸摸特別是復選框）;
- 所有按鈕，包括“添加到購物車”和“現在安全支付”;
- 表單字段中輸入付款和發貨的細節;
- 產品圖片的縮略圖;
- 刷卡，而不是攻左，右箭頭的產品照片，。
對比的色彩和光線條件
無論調色板您選擇，強烈的反差是刻不容緩的按鈕，并呼吁采取行動。 如果一個對象在融合，用戶很可能會錯過它。
考慮移動用戶的照明條件和如何將它們容納在該網站的外觀和感覺。 試試關掉燈，走出去到明亮的陽光下反射燈緊緊地團結在一起，看看你的調色板執行。 您可以調整CSS來解釋不同的光線條件與什么被稱為輕級別的媒體查詢 。
@media (light-level: normal) { p { background: url("texture.jpg"); color: #333 } } @media (light-level: dim) { p { background: #222; color: #ccc } } @media (light-level: washed) { p { background: white; color: black; font-size: 2em; } }
雖然沒有瀏覽器目前支持這些，光級媒體查詢是，希望能采納，因為一旦移動設備真的是在不同的光照條件下使用一個很酷的功能。 這種技術可以提高轉化率，在黑暗和明亮的陽光下移動使用。 人們甚至可以想像交換宣傳標語為白天和夜間！
提示：不要害怕紅色按鈕。 轉換已經增加了一噸的網站切換到紅色的強烈對比。 測試和迭代！
白色的空間和封裝
白色的空間讓內容喘息的機會，輔助眼流和declutters。 它可以在決定購買時，放松身心的游客。
使用封裝提請游客注意的元素，比如一個“添加到購物車”按鈕。 創建按鈕的容器用對比的背景顏色。 Unbounce做了偉大的工作，解釋封裝 。
文案
廣大客戶將向您提供一份他們的產品，類別和通用的頁面，因為我們的設計師和開發人員總是不知道該產品，以及我們的客戶（希望如此）。 然而，我們確實知道有說服力的措辭，以及如何使用它呼吁采取行動。 例如，“支付安全現在是”更激勵和灌輸更多的信任不僅僅是“退房”。
龍的描述，可惱人的小屏幕上。 認為“閱讀更多”的鏈接以顯示更多的文字，或分裂的描述成幾個標簽，讓移動用戶能夠翻翻他們正在尋找的信息。
提示：如果您的客戶端寫產品說明，讓他們讀克雷格·安德森的“ E 商貿文案：本教程以銷售更多 ，“這將遍歷編寫好的副本的基本知識。
表格
表格大家慢下來。 用戶必須停下來想一想在加油吧，提供正確的數據，掃描精度，檢查并取消勾選框等。 形式可以是特別麻煩的移動設備上，所以一定要確保你的手指是友好的和清晰的。 記住要使用正確的輸入類型（URL，電子郵件，電話等），以便在移動瀏覽器中顯示相應的鍵盤。
顯示給用戶他們在結帳過程中的地位，也讓他們看到自己的進步，看到了光在隧道的盡頭。 德里克·納爾遜說得好在“ 設計一個更好的移動結帳過程 ?！?/p>
理想的產品頁面
我不認為你所能得到的“完美”的產品頁面，因為很多是留給旁觀者的眼睛。 然而，Currys的“產品頁面變得相當的接近。 讓我們把它分解。
Currys的“具有以下屬性：
- 明確產品稱號，并于企業調色板響應排版;
- 價格對比色，響應排版突出的，是可讀高于其他所有的價格信息;
- 行動突出的上述網頁上的所有其他環節非常清晰的通話（與簡單的形式封裝和手指友好）;
- 偉大的攝影，所有用戶需要做出購買決策（包括個人，分量和細節鏡頭）的鏡頭;
- 簡短的描述給人的產品的功能的簡要概述;
- 關于產品的研究型客戶更詳細的信息;
- 指示的可用性，顯示何時何地，客戶可以得到它（用簡單的形式封裝）。
總體而言，該頁面是很好間距，與20像素的塊級元素之間的空白。 企業品牌是存在不使頁面變得混亂，而目標渠道得到明確界定。 如果游客有興趣的產品和價格是正確的，那么他們就沒有障礙購買它。
這一切值得嗎？
克羅克特和瓊斯
該結果克羅克特和瓊斯是壓倒性的，增加的時間在頁，360°照片（我們設定為在谷歌Analytics（分析）轉換目標來衡量其有效性）和降低跳出率，為移動用戶，我強烈地增加了看法相信是由于內容的質量，圖像和視頻。 訪問過的網頁也漲了，這是我的屬性的導航布局。 不斷擴大的菜單固定在頂部使得它很容易為??用戶跳來跳去的網站，并找到自己的方式回來，同時堅持品牌的傳統。 頁面速度肯定會有所改善，但我們不得不與體現品牌的高品質圖像的優化平衡，這肯定是我們還在努力。
總結
組建了一個手機電子商務網站，它包括企業管理，設計，開發和營銷一個多學科的任務。 無論你的機構的大小，創建一個樣板的過程，你可以按照對所有的網站，但你能適應每個項目的具體情況。 在這個過程中的規劃階段，包括以下內容：
- 你是誰設計的（即你的客戶）？ 什么是他們的購買習慣，是什么驅使他們購買？
- 放在一起，讓您和客戶的共同愿景SMART目標。
- 創建一個樣式指南，適合于移動設備，包括按鍵設計，字體大小等等。
- 生成線框，詳情所有關鍵頁面（首頁，分類頁，產品頁，搜索和購物車）。
- 將所有的數字資產（攝影，錄像及復印件）在一起。
規劃以這種方式將幫助您實現一個電子商務網站，是很適合移動優化，這是針對你的客戶的客戶和覆羽更多的游客到買家。
