智能手機(jī)網(wǎng)站設(shè)計(jì)的表現(xiàn)!

2019-07-23    分類: 網(wǎng)站設(shè)計(jì)

人們?cè)絹?lái)越多地使用他們的智能手機(jī),臺(tái)式電腦的替代品,即使是活動(dòng),如購(gòu)物和采購(gòu)。越來(lái)越多的人擺脫臺(tái)式機(jī)和手機(jī)優(yōu)化的網(wǎng)站上購(gòu)買的產(chǎn)品和服務(wù),網(wǎng)站創(chuàng)建者可以使用建立的設(shè)計(jì)模式,以幫助啟動(dòng)一項(xiàng)移動(dòng)電子商務(wù)項(xiàng)目。

有一個(gè)很好的移動(dòng)電子商務(wù)的經(jīng)驗(yàn)是相當(dāng)重要的。事實(shí)上,最近的研究發(fā)現(xiàn),人們有67%的可能進(jìn)行購(gòu)買,如果一個(gè)網(wǎng)站,他們已經(jīng)達(dá)到了自己的手機(jī)是智能手機(jī)友好的。

電源的設(shè)計(jì)模式,他們告訴你其他設(shè)計(jì)師如何解決類似的問(wèn)題,所以,你是不是總是重新發(fā)明輪子。它們還可以使您設(shè)計(jì)的方式,以滿足人們的期望開(kāi)發(fā)從他們使用的其他網(wǎng)站,他們鼓勵(lì)你考慮的設(shè)計(jì)方法,你會(huì)不會(huì)想到在自己的網(wǎng)站。

在這篇文章中,專注于智能手機(jī),而不是平板電腦,我們來(lái)看看設(shè)計(jì)模式和方法用于移動(dòng)電子商務(wù)功能,包括以下內(nèi)容:

  • 首頁(yè)頁(yè)面,
  • 網(wǎng)站導(dǎo)航,
  • 建議搜索,
  • 搜索結(jié)果中,
  • 搜索過(guò)濾和排序,
  • 產(chǎn)品頁(yè),
  • 照片畫廊,
  • 購(gòu)物車,
  • 檢查的帳戶或作為嘉賓,
  • 表格。

本文中的所有例子都來(lái)自運(yùn)行在智能手機(jī)上的瀏覽器的移動(dòng)網(wǎng)站。大多數(shù)是從大型跨部門的零售商,因?yàn)樗麄冇写罅康漠a(chǎn)品目錄的功能,如搜索,過(guò)濾和排序的搜索結(jié)果,需要一個(gè)深思熟慮的方法。電子商務(wù)也有無(wú)數(shù)的本地應(yīng)用程序,這些模式可以適用于他們。

(非凡的注意:訂閱的粉碎電子書(shū)圖書(shū)館,并得到即時(shí)的無(wú)限訪問(wèn)所有粉碎圖書(shū),公布在過(guò)去和未來(lái),包括數(shù)字版本,我們的印刷書(shū)籍。至少有24質(zhì)量電子圖書(shū)一年,60電子書(shū)在第一年。訂閱?。?/div>

主頁(yè)

在移動(dòng)設(shè)備上訪問(wèn)時(shí),主頁(yè)的有關(guān)內(nèi)容,幫助用戶找到他們所尋找的。常見(jiàn)的模式是簡(jiǎn)單的單欄布局的特色網(wǎng)站或產(chǎn)品類別的促銷和單欄列表。關(guān)鍵字搜索,通常包括主頁(yè),鏈接到商店定位器和注冊(cè)形式的宣傳電郵及忠誠(chéng)度計(jì)劃。


亞馬遜和梅西的混合使用的促銷內(nèi)容和列表菜單中。


目標(biāo)的宣傳內(nèi)容占用更多的屏幕空間,不是一個(gè)簡(jiǎn)單的列表,但更強(qiáng)的視覺(jué)沖擊。Threadless的使用的儀表盤模式,這是比較常見(jiàn)的,在本機(jī)應(yīng)用程序在移動(dòng)電子商務(wù)網(wǎng)站。

如果購(gòu)物者來(lái)到你的網(wǎng)站快速比較價(jià)格,然后一個(gè)簡(jiǎn)單的列表模式和搜索功能可能是更可取的。如果他們是來(lái)探索促銷和銷售,然后由目標(biāo)所采取的方式可能是比較合適的。為了回答這些問(wèn)題,你需要挖掘分析,以了解消費(fèi)者在您的網(wǎng)站正在做的。

站點(diǎn)范圍的導(dǎo)航

除了使用作為主導(dǎo)航中心的主頁(yè),也有許多網(wǎng)站導(dǎo)航菜單大部分自己的網(wǎng)頁(yè)中,通常會(huì)在標(biāo)頭中。這使購(gòu)物者能夠很容易地從一個(gè)網(wǎng)站的一部分,到另一個(gè),而無(wú)需返回到主頁(yè)。


Lowe的站點(diǎn)范圍內(nèi)的菜單的每個(gè)選項(xiàng)的圖標(biāo)。百思買的菜單中有兩欄布局,導(dǎo)航按鈕,而不是列表項(xiàng)。Lowe的菜單包括頁(yè)面出現(xiàn)時(shí),而百思買的頁(yè)面的內(nèi)容推下來(lái)的畫面。


梅西的站點(diǎn)范圍內(nèi)的菜單,其中包含的子菜單選項(xiàng)。CVS有兩列菜單的每個(gè)選項(xiàng)的圖標(biāo)。在這兩種情況下,菜單被顯示在頁(yè)面頂部的。

正如你可以看到從上面的截圖中,有幾種方法來(lái)設(shè)計(jì)站點(diǎn)范圍內(nèi)的菜單。Lowe的設(shè)計(jì)是簡(jiǎn)單的,和圖標(biāo)添加一個(gè)漂亮的視覺(jué)拋光位。事實(shí)上,其余的頁(yè)面淡出到背景中,當(dāng)用戶選擇使用的導(dǎo)航幫助用戶專注于當(dāng)前的任務(wù)。CVS似乎比較混亂中,有兩列選項(xiàng),每個(gè)項(xiàng)目都配有圖標(biāo)。CVS'菜單還放置的特定抽頭目標(biāo)彼此靠近,可呈現(xiàn)的觸摸屏上的可用性問(wèn)題。

有趣的是,大型電子商務(wù)網(wǎng)站通常沒(méi)有太多的導(dǎo)航選項(xiàng)一次顯示。他們?cè)噲D平衡視覺(jué)的導(dǎo)航與您的網(wǎng)站的信息架構(gòu)設(shè)計(jì),仔細(xì)考慮的項(xiàng)目,應(yīng)在全球?qū)Ш?。使用網(wǎng)站分析看菜單選項(xiàng)購(gòu)物單擊幫助你決定了什么應(yīng)該是在菜單中。不同的設(shè)計(jì)方案進(jìn)行A / B測(cè)試和可用性測(cè)試,看一個(gè)人是否有太多的選項(xiàng)和壓倒的人,不只是建議,但必須找到好的解決方案 - 為您的企業(yè)和您的用戶。

建議搜索

建議搜索,也被稱為提前鍵入或自動(dòng)完成,結(jié)果顯示潛在的,作為購(gòu)物鍵入幾個(gè)字符。常用搜索到的條件,這是一個(gè)真正的方便購(gòu)物者,特別是如果搜索詞是長(zhǎng)期的。建議搜索的一個(gè)限制是,點(diǎn)擊虛擬鍵盤上錯(cuò)誤的字符是很容易的,這將改變建議的結(jié)果。顯示常見(jiàn)的“正確”的結(jié)果,而不是可能是有用的。另外,考慮使用一個(gè)改進(jìn)的自動(dòng)推薦圖案鍵入需要輸入查詢,以減少的量,以最有效的方式,并利用移動(dòng)帶寬較慢。


Office Depot的網(wǎng)站在搜索框中:鍵入“DRAF” 帶來(lái)了幾種可能的結(jié)果。錯(cuò)誤輸入“拖”而不是“DRAF”的人誰(shuí)是試圖找到起草用品會(huì)導(dǎo)致意外的結(jié)果。攻牙到預(yù)定的相鄰的信1是虛擬鍵盤上的常見(jiàn)問(wèn)題。

雖然設(shè)計(jì)者人錯(cuò)誤輸入查詢不能做任何事情,他們可以確保有其他的方法來(lái)得到到產(chǎn)品頁(yè)面輸入錯(cuò)誤的結(jié)果,如鉆的產(chǎn)品類別或站點(diǎn)范圍內(nèi)的菜單中的頂級(jí)類別的下拉列表。網(wǎng)站管理人員也可以罰款調(diào)整自己的搜索功能,建議“草案”查詢類型為“dragt的結(jié)果?!蹦阌心芰ψ龅竭@一點(diǎn),將取決于您使用的搜索引擎技術(shù)。

搜索結(jié)果

用于移動(dòng)電子商務(wù)網(wǎng)站的搜索結(jié)果:表顯示和網(wǎng)格顯示兩種主要的模式。表格顯示縮略圖的照片和一些基本信息,如產(chǎn)品名稱和價(jià)格在一個(gè)緊湊的行。網(wǎng)格顯示大圖片的描述性信息較少。有些網(wǎng)站允許消費(fèi)者在這兩種視圖之間切換。


Zappos的搜索結(jié)果中顯示其一個(gè)網(wǎng)格,允許其產(chǎn)品的大照片,一個(gè)明智的選擇,像鞋的銷售市場(chǎng)。沃爾格林有一個(gè)表,其中包括在商店尋找項(xiàng)目,將項(xiàng)目添加到購(gòu)物車按鈕。


OfficeMax公司要求消費(fèi)者在選擇一個(gè)子類別廣泛的搜索字詞,如“紙”。一個(gè)子類一旦被選中,結(jié)果顯示為一個(gè)表。搜索的“剪刀”,其中就有更少的子類,消費(fèi)者直接到表視圖的結(jié)果。

有消費(fèi)者選擇一個(gè)子類別,可能會(huì)出現(xiàn)問(wèn)題,如果它不清除的產(chǎn)品適合在一個(gè)復(fù)雜的層次結(jié)構(gòu)。在的OfficeMax公司上面的例子中,有人找他們的家用打印機(jī)為8.5×11英寸的紙張可能不知道是否在“復(fù)制”或“多用途紙激光打印紙。”一個(gè)更好的方法可能是在搜索過(guò)濾器中列出的子類別,在那里他們可以在上下文中與其它過(guò)濾器一樣,“顏色”和“大小”。定期測(cè)試(每4-6個(gè)星期)具有代表性的用戶,通常搜索的術(shù)語(yǔ)和最暢銷的產(chǎn)品可以讓您深入了解哪種方法是更好的。A / B測(cè)試也可以發(fā)現(xiàn)其中的一個(gè)方法是否得到更多的人的產(chǎn)品頁(yè)面,并導(dǎo)致更高的轉(zhuǎn)換率。


Gap的網(wǎng)站的訪問(wèn)者看到一個(gè)表,顯示默認(rèn)情況下,看到一個(gè)網(wǎng)格顯示的選項(xiàng)。請(qǐng)注意,差距也保持在關(guān)鍵字字段中的搜索字詞。

峽讓消費(fèi)者選擇如何,讓他們從一個(gè)簡(jiǎn)單的掃描列表的視圖放大圖片查看搜索結(jié)果。差距可能保留一些產(chǎn)品的信息,但-例如價(jià)格-在網(wǎng)格顯示(作為Zappo的)。詳細(xì)信息,如價(jià)格和顏色使它更容易為購(gòu)物者確定哪些產(chǎn)品,他們希望了解更多有關(guān)。

保持該領(lǐng)域中的術(shù)語(yǔ)也提醒消費(fèi)者他們尋找什么,并讓他們很容易縮小結(jié)果的另一個(gè)詞(如“紅”)的搜索字詞。

搜索峽為“男裝T恤”需要購(gòu)物的頁(yè)面沒(méi)有結(jié)果(未顯示),并沒(méi)有鏈接到搜索結(jié)果為“男子噸的襯衫?!遍g隙可以提高其搜索通過(guò)添加一個(gè)“難道你的意思嗎?”的類型結(jié)果頁(yè)面的問(wèn)題。谷歌處理這種情況,列出“男裝T恤”建議的查詢,然后提交結(jié)果為“男裝T恤”,如果該建議被忽略。

排序結(jié)果

結(jié)果排序,幫助消費(fèi)者組織沿著一個(gè)連續(xù)的值,通常是數(shù)字的,如價(jià)格和消費(fèi)者的評(píng)級(jí)結(jié)果一大套。通用接口模式進(jìn)行排序的按鈕和下拉菜單。


沃爾瑪讓消費(fèi)者選擇三個(gè)按鈕對(duì)結(jié)果進(jìn)行排序。西爾斯使用類似的方法,但與“分段控制”。JavaScript框架,如jQuery Mobile的這些應(yīng)用程序接口部件更容易為設(shè)計(jì)者提供。


JC Penney公司可以通過(guò)下拉菜單進(jìn)行排序,稍微定制的風(fēng)格,而Eddie Bauer的使用瀏覽器的默認(rèn)下拉菜單。這兩個(gè)觸發(fā)瀏覽器的本地控制下拉菜單(在這些例子中,iPhone選擇器)。

沃爾瑪?shù)陌粹o之間的間距的大小和大方,讓您更好的自來(lái)水的目標(biāo),不過(guò),公平地說(shuō),沃爾瑪只有三個(gè)選項(xiàng),而西爾斯有四個(gè)。西爾斯列入“全部”按鈕可以讓購(gòu)物者回到原來(lái)的結(jié)果頁(yè)面,如果他們沒(méi)有找到他們想要的東西后,排序。使用下拉菜單是一個(gè)比較安全的選擇,因?yàn)樗乾F(xiàn)代移動(dòng)瀏覽器的支持,并允許較長(zhǎng)的列表的排序選項(xiàng)。然而,它也需要花費(fèi)大量寶貴的空間。這些類型的設(shè)計(jì)權(quán)衡,可以定期檢測(cè)與評(píng)估。

篩選結(jié)果

過(guò)濾器使購(gòu)物者,縮小其結(jié)果的基礎(chǔ)上的一個(gè)或多個(gè)屬性,如顏色,品牌和規(guī)模。過(guò)濾器通常是組織的類型(稱為面),與每個(gè)小刻面(例如下出現(xiàn)的幾個(gè)值,顏色是一個(gè)面,和紅色的一個(gè)方面是值)。通用接口模式顯示過(guò)濾選項(xiàng)的下拉菜單,下拉列表和手風(fēng)琴顯示。從一個(gè)面內(nèi)時(shí),可以應(yīng)用一個(gè)或多個(gè)值中選擇濾波。雖然允許一個(gè)單一的搜索值超過(guò)一個(gè)方面,技術(shù)上是可行的,它帶有一個(gè)更高的互動(dòng)成本,并可能導(dǎo)致的任何結(jié)果(例如,交叉培訓(xùn),成本不超過(guò)75美元的運(yùn)動(dòng)鞋)。


CVS使用下拉菜單中的“篩選”選項(xiàng)卡中進(jìn)行篩選。選擇一個(gè)菜單選項(xiàng),將立即對(duì)結(jié)果進(jìn)行篩選。JC Penney公司提供了一個(gè)下拉列表中,選擇過(guò)濾器和顯示產(chǎn)品的數(shù)量相匹配的過(guò)濾器值。JC Penney公司也可以在一個(gè)屏幕上,貿(mào)易是購(gòu)物者點(diǎn)擊“應(yīng)用”按鈕被選中多個(gè)值從一個(gè)方面。


科爾的每個(gè)過(guò)濾器類型,使用的手風(fēng)琴公開(kāi)了一組復(fù)選框。Threadless的暴露了其搜索方面作為按鈕的值。在這兩個(gè)網(wǎng)站,選擇一個(gè)過(guò)濾器值將立即篩選結(jié)果。

顯示項(xiàng)目的數(shù)量可根據(jù)每個(gè)面值到什么樣的消費(fèi)者將得到每次選擇提供了更大的透明度。Threadless的“的方式顯示所有可用的內(nèi)容值占據(jù)整個(gè)屏幕,但它為消費(fèi)者提供了在一目了然地查看所有的過(guò)濾提供給他們的選擇。無(wú)論你采取這種方式,或者使用像科爾的手風(fēng)琴很可能依賴上的方面值是多少目前對(duì)于一個(gè)給定的產(chǎn)品類別。如果您的目錄具有高度的變異面值為每個(gè)類別的數(shù)量,那么您將需要進(jìn)行實(shí)驗(yàn),以找到合適的設(shè)計(jì)。你可以因?yàn)橄M(fèi)者使用這些產(chǎn)品類別過(guò)濾器的最優(yōu)化過(guò)濾界面。

產(chǎn)品頁(yè)

產(chǎn)品頁(yè)面是電子商務(wù)網(wǎng)站,真正展示他們的產(chǎn)品在細(xì)節(jié)。他們是不是一個(gè)“模式”這個(gè)詞的真正意義上的,而是一個(gè)集合的模式,包括如制表符,的手風(fēng)琴和照片畫廊。兩種常見(jiàn)的方法到產(chǎn)品頁(yè)面的所有產(chǎn)品的信息或一個(gè)網(wǎng)頁(yè)的標(biāo)簽或手風(fēng)琴,以便逐步披露的信息,消費(fèi)者需要一個(gè)很長(zhǎng)的網(wǎng)頁(yè)。


三星和戴爾的逐步披露內(nèi)容上的產(chǎn)品頁(yè)面,其中有很多購(gòu)物者的信息。三星使用的手風(fēng)琴公開(kāi)的信息塊,而戴爾使用制表符。


Cabela的辦公用品都使用了一個(gè)很長(zhǎng)的網(wǎng)頁(yè)顯示的產(chǎn)品信息。這種方法需要更多的刷卡向上和向下得到的信息,但它使購(gòu)物與小標(biāo)簽,或操縱手風(fēng)琴頭。你的選擇將取決于信息的量與產(chǎn)品相關(guān)聯(lián)的信息可以被分解成邏輯部分以及如何。

龍產(chǎn)品比分解成可管理的數(shù)據(jù)塊用制表符或手風(fēng)琴的頁(yè)面,頁(yè)面需要更多的滾動(dòng)。他們還要求消費(fèi)者把更多的精力放在尋找特定的信息,他們正在尋找。在我自己的可用性測(cè)試,我聽(tīng)到有人表示這兩種方法的喜好,但他們似乎有一個(gè)簡(jiǎn)單的工作分解成邏輯塊的頁(yè)面。如果你使用這種方法,請(qǐng)確保最初沒(méi)有顯示任何內(nèi)容呈現(xiàn)快速購(gòu)物者點(diǎn)擊的選項(xiàng)卡或手風(fēng)琴。

最明顯的方式來(lái)完成,這是加載頁(yè)面的所有內(nèi)容,一度讓隱藏的內(nèi)容幾乎立即出現(xiàn)。這種方法有它的優(yōu)勢(shì),為用戶的網(wǎng)絡(luò)連接時(shí)下降,而他們之間的切換部分。大的缺點(diǎn)是,所有的產(chǎn)品信息已被下載,無(wú)論是實(shí)際查看或不增加更多的負(fù)載對(duì)服務(wù)器和使用更多的購(gòu)物者的數(shù)據(jù)計(jì)劃,該計(jì)劃可計(jì)量。

圖片庫(kù)

照片畫廊特別是在電子商務(wù)行業(yè),如服裝和消費(fèi)電子產(chǎn)品的關(guān)鍵。您可能需要從三個(gè)不同的角度,家得寶在購(gòu)物時(shí),看到一個(gè)扳手,但更多的圖像時(shí)找衣服,鞋子或者高端智能手機(jī)或平板。幾個(gè)常用的模式是swipeable畫廊,“雙點(diǎn)擊放大,縮小”,用于選擇照片的縮略圖。


Payless使用一個(gè)swipeable的畫廊,從不同的角度,以顯示其產(chǎn)品。用戶也可以點(diǎn)擊放大才能看到細(xì)節(jié),如縫合和扣眼。

Payless明智地保持其“絲錐放大”調(diào)出屏幕上的幾秒鐘,給購(gòu)物者的時(shí)間去了解如何瀏覽網(wǎng)頁(yè),仍然注意到它。放大照片查看產(chǎn)品的詳細(xì)信息的能力是非常重要的服裝和鞋。


碼頭工人(上圖左)有一個(gè)swipeable照片畫廊,雙,挖掘到放大的細(xì)節(jié)的,消費(fèi)者可以看到一個(gè)產(chǎn)品在不同的顏色。列維的(右上圖)采取了類似的做法,加上縮略圖的表示照片在畫廊的角度。泊塢窗“網(wǎng)站上選擇一個(gè)新的顏色會(huì)導(dǎo)致整頁(yè)刷新,而李維斯沒(méi)有。

李維斯保持大多數(shù)的頁(yè)面刷新時(shí),購(gòu)物者改變顏色,起初似乎是一個(gè)更好的用戶體驗(yàn)。但是,從簡(jiǎn)要回顧了兩個(gè)網(wǎng)站于同日在同一天的時(shí)間,碼頭工人的整頁(yè)刷新,出現(xiàn)了運(yùn)行速度更快的時(shí)候,我拍了拍色樣頁(yè)的新的照片出現(xiàn)的那一刻。列維的緩慢可能已造成需要被刷新,除了主照片,照片,或其他看不見(jiàn)的因素,如交通繁忙的負(fù)載由五個(gè)縮略圖。每種方法都有其取舍。


三星(左上圖)和戴爾(上圖右)都使用他們的產(chǎn)品swipeable照片畫廊。三星采用了畫廊到的手風(fēng)琴在其產(chǎn)品上,而戴爾使用一個(gè)單獨(dú)的頁(yè)面。

三星的做法似乎更加人性化,因?yàn)樗哂休^少的頁(yè)面瀏覽。三星和戴爾都去大型的高清晰度照片,在昂貴的產(chǎn)品時(shí),因?yàn)楹苊黠@的圖像質(zhì)量是至關(guān)重要的。戴爾的方法的一個(gè)優(yōu)點(diǎn)是,它可以讓購(gòu)物者把重點(diǎn)放在自己的照片,沒(méi)有任何分散注意力的頁(yè)面內(nèi)容。

購(gòu)物車

購(gòu)物車顯示產(chǎn)品通常使用表模式。除了要購(gòu)買的內(nèi)容顯示,他們還提供額外的功能,例如能夠保存命令,保存到我的最愛(ài)我的喜愛(ài),刪除或更新的數(shù)量,選擇送貨或店內(nèi)取貨,適用于促銷或優(yōu)惠券代碼,并檢查了。一旦產(chǎn)品已被添加,購(gòu)物車被普遍達(dá)到通過(guò)在網(wǎng)站的頁(yè)眉或全球?qū)Ш讲藛沃械倪x項(xiàng)圖標(biāo)。


每個(gè)表行的羅威的購(gòu)物車(左上圖)允許用戶刪除相應(yīng)的產(chǎn)品從他們的車,它包括用于運(yùn)輸或店內(nèi)取貨的選項(xiàng)。床浴和超越(右上圖)也允許刪除的項(xiàng)目;表中的每一項(xiàng)產(chǎn)品的數(shù)量可以改變一個(gè)按鈕上越走越遠(yuǎn)更新的頁(yè)面。


板條箱和桶(左上圖),允許用戶刪除產(chǎn)品,保存到收藏夾和更新數(shù)量的表中的行。每一行還包括運(yùn)輸成本和交貨時(shí)間等信息。Payless(右上圖),也可以讓消費(fèi)者更新的數(shù)量和刪除項(xiàng)目,它的車還提供了一個(gè)選擇的交付選項(xiàng),包括將產(chǎn)品送到一個(gè)Payless專賣店(未顯示)。

購(gòu)物車應(yīng)提供大的效用,因?yàn)橄M(fèi)者購(gòu)買的最后一點(diǎn)是接近的。讓購(gòu)物更改數(shù)量,移除項(xiàng)目和應(yīng)用推廣或優(yōu)惠券代碼,而不必去到另一個(gè)頁(yè)面,讓他們迅速通過(guò)采購(gòu)渠道的關(guān)鍵。如果你覺(jué)得這增加了太多的內(nèi)容的頁(yè)面,你可以使用漸進(jìn)披露背后的手風(fēng)琴,直到它需要隱藏一些內(nèi)容(如促銷代碼字段)。

結(jié)帳

Checkout是更多的比的圖案的方法,形成模式,雖然可以應(yīng)用到付款處流量。許多電子商務(wù)網(wǎng)站允許客戶使用移動(dòng)自己的網(wǎng)站上檢查出與現(xiàn)有的帳戶或作為嘉賓。人誰(shuí)已經(jīng)有一個(gè)帳戶,結(jié)帳過(guò)程是通過(guò)使用現(xiàn)有的付款和發(fā)貨信息,大大簡(jiǎn)化。


克拉奇菲爾德和諾德斯特龍都允許客戶檢查作為嘉賓或通過(guò)使用他們現(xiàn)有的帳戶。讓手機(jī)購(gòu)物已簽出作為嘉賓把他們的訂單后,創(chuàng)建一個(gè)帳戶和密碼重置都支持。


亞馬遜的電子郵件地址,要求的第一頁(yè),結(jié)賬時(shí),顧客是否有一個(gè)帳戶,或作為嘉賓被檢查出。的經(jīng)驗(yàn)是非常像網(wǎng)站用戶的桌面上。目標(biāo)移動(dòng)網(wǎng)站上提供的選項(xiàng)中的帳戶,以檢查為客人或創(chuàng)建一個(gè)帳戶。兩者都支持密碼重置。

允許客戶登錄或檢查作為嘉賓,并重置其密碼是一個(gè)必須為移動(dòng)電子商務(wù)的網(wǎng)站。另外,還要考慮邀請(qǐng)消費(fèi)者到自己的手機(jī)上創(chuàng)建一個(gè)帳戶后,把他們的訂單,因?yàn)樗麄円呀?jīng)給了你足夠的信息(輸入密碼除外),這樣做的。這可以讓客人更有可能的努力創(chuàng)建一個(gè)帳戶,因?yàn)樵谶@一點(diǎn)上應(yīng)該是最小的。

的“創(chuàng)建一個(gè)Target.com”的按鈕可能會(huì)導(dǎo)致一些廢棄的購(gòu)物車如果購(gòu)物者走這條路,并決定這是太多的努力。確認(rèn)訂單,然后再邀請(qǐng)注冊(cè)在發(fā)票上頁(yè)可能會(huì)更好。限制初始結(jié)帳屏幕兩種選擇,可以提高轉(zhuǎn)換,因?yàn)橘?gòu)物者將有更少的決定,使工作時(shí),在小屏幕上。更少選擇的關(guān)鍵任務(wù),如檢查出效果更好。

表格

形式是最常用的移動(dòng)電子商務(wù),搜索,檢查,登記,并輸入優(yōu)惠券和促銷代碼。請(qǐng)注意形式為小屏幕設(shè)計(jì)時(shí)的一些良好做法:

  • 將表格上面的標(biāo)簽輸入字段,使他們不推卸屏幕,當(dāng)用戶放大到輸入。
  • 使用HTML5輸入類型顯示相應(yīng)的鍵盤使用領(lǐng)域。對(duì)于電子郵件地址,使用類型=“電子郵件”。對(duì)于數(shù)字字段,如郵政編碼,使用類型=“數(shù)字”或“電話”(后者將顯示一個(gè)數(shù)字鍵盤,更大的按鈕)。
  • 領(lǐng)域的強(qiáng)制性只有在絕對(duì)必要。這將減少摩擦,讓客戶通過(guò)了結(jié)帳過(guò)程。

最好的方式來(lái)處理形式的智能手機(jī)是使用很少能可能。您可以使用地理位置建議購(gòu)物者的ZIP代碼,你可以讓客戶使用他們先前輸入的帳戶信息時(shí),使用你的網(wǎng)站。請(qǐng)記住,最好的形式是一個(gè)購(gòu)物者從來(lái)沒(méi)有完成。


CVS(上圖左一)不帶數(shù)字鍵盤,當(dāng)用戶點(diǎn)擊“郵政編碼”字段,并在結(jié)賬頁(yè)面。這需要從購(gòu)物者,以獲得正確的鍵盤的一個(gè)不必要的抽頭。,CVS也贊同標(biāo)簽左邊的表單域,在那里他們可以得到推過(guò)屏幕,如果用戶縮放到一個(gè)領(lǐng)域。板條箱和桶(右上圖),有更多的移動(dòng)友好的形式。它帶來(lái)了大的數(shù)字鍵盤,當(dāng)有人點(diǎn)擊“郵政編碼”字段中。它還頂部對(duì)齊表單標(biāo)簽,這樣他們就不會(huì)滑落的頁(yè)面。

請(qǐng)記住,形式是如何的購(gòu)物網(wǎng)站上完成交易。要特別注意他們,并盡你所能來(lái)完成他們的互動(dòng)成本降低。有時(shí),它甚至可能意味著試圖完全不同的東西。例如,Typeform最近提出了一種新的經(jīng)驗(yàn),反應(yīng)更迅速,簡(jiǎn)單和用戶友好的Web表單。我們的想法是要求在一個(gè)時(shí)間只有一個(gè)問(wèn)題,但它突出顯示,讓用戶鍵入快捷鍵,填寫表格時(shí)。這不是選項(xiàng),在任何情況下,將工作,但某些形式可能是相當(dāng)有幫助的。

結(jié)論

隨著移動(dòng)電子商務(wù)作為零售商的收入來(lái)源的重要性日益增加,手機(jī)優(yōu)化的網(wǎng)站都提供很多的功能,消費(fèi)者所需要和期望的基礎(chǔ)上桌面的購(gòu)物體驗(yàn)。的研究工作英鎊品牌和SmithGeiger顯示的,移動(dòng)的消費(fèi)者更愿意購(gòu)買時(shí),該網(wǎng)站是移動(dòng)的。

通過(guò)使用現(xiàn)有的設(shè)計(jì)模式,能夠更迅速地得到您的電子商務(wù)網(wǎng)站準(zhǔn)備的小屏幕,你就可以開(kāi)始探索不同的選擇。但不停止現(xiàn)有的模式,使用它們作為出發(fā)點(diǎn),探索設(shè)計(jì),并幫助您考慮的選項(xiàng),你可能沒(méi)有想到的。瀏覽器功能的增加,使界面設(shè)計(jì)和交互模式從本地應(yīng)用程序到您的瀏覽器為基礎(chǔ)的智能手機(jī)的購(gòu)物體驗(yàn)。

文章標(biāo)題:智能手機(jī)網(wǎng)站設(shè)計(jì)的表現(xiàn)!
網(wǎng)頁(yè)URL:http://www.bm7419.com/news/80147.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營(yíng)銷seo公司;服務(wù)項(xiàng)目有網(wǎng)站設(shè)計(jì)

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)