Optimalizace webových stránek pro mobilní web je práce. A optimalizace webových stránek elektronického obchodování pro mobilní web je zvíře, které návrháři a vývojáři začali zkrotit.

Není divu, že největší podniky obdrží médium jako první, pravděpodobně proto, že mají zdroje a prodejní tok, které jej ospravedlňují. Koneckonců, i když webové stránky elektronického obchodování získají značnou návštěvnost, malé procento z nich bude založeno na mobilních zařízeních. A ještě menší procento této dopravy skutečně dokončí svůj prodej.

S rychlostí, která se v této aréně opravdu začíná, jsou zkušenosti lidí s plně mobilními transakcemi elektronického obchodu omezené. To dělá výklenek experimentální v nejlepším případě. Naštěstí vzhledem k povaze elektronického obchodu může být úspěch pečlivě měřen a testován. Toto je médium, které ještě potřebuje definovat.

Velkou překážkou pokroku je nedostatek příkladů. Surfování galerií, které najdou spoustu zajímavých nápadů, není ani rychlé a snadné. Existuje jen několik malých sbírek mobilního designu, dokonce i méně pro elektronický obchod. Abych to řešil, shromáždil jsem 10 fantastických příkladů mobilního elektronického obchodování. QR kódy byly zahrnuty pro snadnější procházení. Najdete zde mnoho aplikací pro mobilní telefony, které si mohou přečíst tyto kódy.

1. Walmart

Jedním společným přístupem všech webových stránek, které zde naleznete, je domovská stránka portálu. Walmart není jinak. Nicméně, zatímco většina webových stránek se spoléhá na seznamy založené na textu, má tato ikona mřížky ikon, která je mnohem jednodušší procházet. Mnoho z mobilních webových stránek, které jsou zde zahrnuty, má seznamy, které jsou tak malé, že jsou těžko použitelné. Walmart kombinuje ikony s textem, které usnadňují dosažení cílů.

Největší gotcha na webu Walmartu je, že musíte dokončit transakci na hlavní webové stránky. Přesto jsou informace a tlačítka extrémně jednoduché, funkční a dobře organizované.

2. Hračky-R-Us

The Hračky-R-Us web je krok správným směrem. Ale mohlo by to udělat několik klíčových věcí lépe. Nejprve jsem našel seznam tlačítek na domovské stránce, které jsou jen příliš malé. Chápu, že je pokoušelo je zmenšit, aby se ušetřilo místo, ale bylo by mnohem jednodušší používat jen trochu více prostoru. Jistě, musel bych se pohybovat více, ale je to dobrý obchod.

Jakmile se dostanete přes domovskou stránku, dostane se mnohem lepší. Tato webová stránka má zejména jednu z lepších stránek nákupního vozíku. Tlačítka jsou jasná a rovnováha mezi hustotou a schopností klepnutí se zdá být správná. Celkově je dobrým příkladem, jak jasně komunikovat body akce.

3. Crocs

Mobilní vývoj je stále velmi ovlivněn vývojáři, takže nalezení krásně navržené mobilní webové stránky je úleva. Takový je případ Crocs . Její webové stránky jsou dobře implementovány a mají krásný pohled.

Zobrazení seznamu katalogů je obzvláště čisté. Jediný způsob, jak by mohl být nějaký štíhlý, by bylo odstranění názvů produktů. Bez ohledu na to, že každý řádek umožňuje snadný cíl, s jasnými a relevantními informacemi.

4. JC Penny

Jeden problém, že návrháři JC Penny mobilní prodejní stojící byl produktový rozsah. Jak povolíte uživatelům efektivně procházet širokou škálu možností v sekci, jako jsou pánské kalhoty? Řešení, jednoduchý rozbalovací systém, umožňuje zákazníkům rychle filtrovat kritéria pro získání potřebných produktů.

Velké obrazy jsou také opravdu hezké. Všimněte si, jak snadné je vidět skutečné položky v detailním zobrazení produktu. Mám podezření, že míra konverze mobilních webových stránek je extrémně nízká a nemůžu si pomoct myslet, že skvělá fotografie jako je tato je jedna z mála zbraní, která se proti tomu mohou potlačit.

5. Keramická stodola

Vzorec by měl být docela jasný: loga nahoře, vyhledávání pod ním, grafický návod na propagaci produktu nebo prodej, následovaný seznamem hlavních kategorií produktů. A najdeme tu přesnou strukturu Hrnčířská dílna Mobilní webové stránky.

Jedním z absolutně brilantních detailů je řešení tohoto webu k problému dlouhé strouhání. V seznamu kategorií produktů si všimnete, že trasa skokanů byla výrazně zkrácena, aby zahrnovala pouze poslední část řetězce. Porovnejte to s intrusivitou strouhanky na stránkách Toys-R-Us a oceníte toto úsporné řešení.

6. Bez závitů

Není překvapením Bez závitů "mobilní webové stránky jsou fantastické. Domovská stránka se řídí vzorem portálu kategorie, avšak s kroucením. Stejně jako webová stránka společnosti Walmart, přístup k síti je mnohem jednodušší než většina. Fotografování je úžasné a dělá z obchodu pocit skutečného nákupního zážitku. Něco o tom se cítí méně mechanické než většina ostatních obchodů, na které se vztahuje.

Stejný přístup k mřížce najdete v zobrazení seznamu produktů, což je příjemný reliéf a velmi dobře zobrazuje výrobky. Návrháři se podařilo minimalizovat zbytečný prostor při zachování snadného používání.

7. Brookstone

Brookstone Mobilní prodejny trpí hustou domovskou stránkou. Ale jakmile se dostanete kolem, webové stránky se zlepší. Velké jasné fotografie jsou velmi oceňovány. Nevím, jestli jsou obrázky optimalizovány pro mobilní zařízení, ale určitě patří k nejsnadnějším v celé této dávce.

Jedním slabým bodem je množství posouvání požadované na stránce nákupního košíku, které se dostanete na tlačítko pro odhlášení. Obsah mohl udělat s nějakým prořezáním a optimalizací k uzavření obchodu.

8. Dooney & Bourke

Opravdu si vážím fotografie Dooney & Bourke Domovská stránka. Vysvětluje přesně to, co společnost prodává, jakmile přistanete na stránce. Ten nejmenší detail, ale jistě něco, co byste měli zvážit.

Jeden dráždivý bod o zobrazení podrobností o produktu spočívá v tom, že políčko množství je ve výchozím nastavení prázdné. Musel jsem přidat "1" za účelem přidání zboží do mého vozu. Ale je nepravděpodobné, že bych si objednal více než jednu stejnou tašku o 150 dolarů.

Také stránka nákupního košíku se cítí trochu jako nápad. Dávám však společnosti zásluhu na tom, že na vrcholu představují klíčové akční body. Možnosti, že zákazníci zapomínají, co právě vložili do svého vozu, jsou štíhlé, takže se zaměřením na to, že jim pomohou dostat se na stránku odhlášení, je chytrý nápad.

9. Buy.com

Domovská stránka stránky Buy.com má něco, co žádná další domovská stránka v tomto článku nemá: skutečný produkt. Myšlenka většiny obchodů s elektronickým obchodem je vytvoření mobilního portálu, který umožňuje uživatelům nahlédnout do celé produktové řady. Zatímco to může být zásadní, Buy.com mě inspirová, abych zvážila alternativy.

Co když lepší přístup je zaměření na obchody? Domovská stránka je hlavní nemovitostí; vzhledem k výzvě uzavření prodeje, proč ne věnovat veškerou svou snahu dát něco neodolatelného před zákazníky. Všimněte si, že předtím, než se dostanete na seznam oddělení na této webové stránce, uvidíte zobrazený produkt a čtyři oddělené odkazy na prodej, nabídky a speciality.

10. Petco

Skvělou funkcí mobilního webu je, že odstraňuje chmýří. Takže když vidím domovskou stránku Petco Je to mobilní web, nemohu si pomoct, ale přemýšlím, jestli je velká fotografie užitečná jakýmkoliv způsobem. Název firmy a doprovodná ikona pes a kočka sdělují produktové zaměření. Tak proč ukázat tento hloupý obraz? Namísto toho bych udělal buď zvláštní dohodu, nebo mřížku kategorií ikon. I když si vážím lesku webových stránek, mohlo by to být trochu upravené.

Společnost zaznamenává nápaditý nápad v detailním zobrazení produktu tím, že zvýrazňuje prodej pouze na internetu. Proč nepůjdeš o krok dál a uděláš některé z nich mobilními speciály. Zmatek stranou, stránka s podrobnostmi o produktu je fantasticky čistá a čistá. Zaznamenávání úplných popisů pod klíčovými funkcemi a informacemi se také zdá být moudrým rozhodnutím.

Závěr

Navrhování mobilních webových stránek je obtížné a navrhování webových stránek pro mobilní e-commerce je asi dvojnásobné. Zjištění, jak pomoci zákazníkům najít správný produkt a jak tento proces převést na prodej, není daleko snadné. Doufám, že tato malá sbírka zdrojů přinese některé nové nápady na váš další (nebo možná první) mobilní web design.


Napsáno výhradně pro WDD Patrick McNeil . Je autorkou, vývojářem a designérem na volné noze. Zejména se mu líbí psát o designu webu, školení lidí o vývoji webových stránek a vytváření webových stránek. Patrickova vášeň pro trendy a vzory webového designu naleznete v jeho knihách TheWebDesignersIdeaBook.com . Sledujte Patrika na Twitteru @designmeltdown .

Co si myslíte, že by tyto příklady? Podělte se prosím o níže uvedené komentáře ...