Een showcase van mobiele e-commerce
Het optimaliseren van websites voor mobiel internet is een hele klus. En het optimaliseren van e-commerce websites voor het mobiele web is een beest dat ontwerpers en ontwikkelaars pas beginnen te temmen.
Het is niet verrassend dat grotere bedrijven eerst het medium omarmen, waarschijnlijk omdat ze over de middelen en de verkoopstroom beschikken om dit te rechtvaardigen. Immers, zelfs als een e-commerce website aanzienlijk verkeer krijgt, zal een klein percentage daarvan mobiel zijn. En een nog kleiner percentage van dat verkeer zal hun verkoop daadwerkelijk voltooien.
Nu het momentum pas echt begint in deze arena, is de ervaring van mensen met volledige mobiele e-commercetransacties beperkt. Dit maakt de nis op zijn best een experimentele. Gelukkig kan succes gezien de aard van e-commerce zorgvuldig worden gemeten en getest. Dit is een medium dat nog steeds moet worden gedefinieerd.
Een enorme hindernis voor vooruitgang is de schaarste aan voorbeelden. Surfen in galeries om een hoop interessante ideeën te vinden, komt niet eens in de buurt van snel en eenvoudig zijn. Er zijn slechts een paar kleine collecties mobiel ontwerp, nog minder voor e-commerce. Om dit aan te pakken, heb ik 10 fantastische voorbeelden van mobiele e-commerce verzameld. QR codes zijn opgenomen voor gemakkelijker browsen. U kunt vele apps voor uw mobiele telefoons vinden die deze codes kunnen lezen.
1. Walmart
Een algemene aanpak van alle websites die hier worden weergegeven, is een startpagina van het portaltype. Walmart is niet anders. Hoewel de meeste websites op tekstgebaseerde lijsten vertrouwen, heeft deze een raster met pictogrammen, dat veel gemakkelijker te doorbladeren is. Veel van de mobiele websites die hier worden behandeld, hebben lijsten die zo klein zijn dat ze moeilijk te gebruiken zijn. Walmart combineert pictogrammen met tekst om de doelen eenvoudig te raken.
De grootste goudvis op de Walmart-website is dat je naar de hoofdwebsite moet gaan om een transactie te voltooien. Toch zijn de informatie en knoppen buitengewoon gebruiksvriendelijk, overzichtelijk en overzichtelijk.
2. Toys-R-Us
De Toys-R-Us website is een stap in de goede richting. Maar het zou een paar belangrijke dingen beter kunnen doen. Ten eerste vond ik de lijst met knoppen op de startpagina net iets te klein. Ik begrijp de verleiding om ze in te krimpen om ruimte te behouden, maar ze zouden veel gemakkelijker te gebruiken zijn met slechts een beetje meer ruimte. Natuurlijk zou ik meer moeten scrollen, maar dat is een goede afweging.
Zodra je voorbij de startpagina bent, wordt het veel beter. In het bijzonder heeft deze website een van de betere winkelwagenpagina's. De knoppen zijn duidelijk en de balans tussen dichtheid en tikbaarheid lijkt goed. Al met al een goed voorbeeld van hoe je actiepunten duidelijk kunt communiceren.
3. Crocs
Mobiele ontwikkeling wordt nog steeds erg gedomineerd door ontwikkelaars, dus het vinden van een prachtig ontworpen mobiele website is een verademing. Dat is het geval met Crocs . De website is goed geïmplementeerd en een schoonheid om naar te kijken.
De cataloguslijstweergave is bijzonder schoon. De enige manier om dit te verhelpen, is om productnamen te elimineren. Hoe dan ook, elke rij zorgt voor een gemakkelijk doelwit, met duidelijke en relevante informatie.
4. JC Penny
Een probleem dat ontwerpers van de JC Penny mobiele winkel geconfronteerd met de productomschrijving. Hoe stel je gebruikers in staat om effectief te bladeren in een breed scala aan opties in een sectie zoals herenbroeken? Met de oplossing, een eenvoudig drop-downsysteem, kunnen klanten snel criteria filteren om bij de producten te komen die ze nodig hebben.
De grote afbeeldingen zijn ook echt een leuke functie. Merk op hoe gemakkelijk het is om de werkelijke items in de detailweergave van het product te zien. Ik vermoed dat de conversieratio van mobiele websites extreem laag is, en ik kan niet anders dan denken dat geweldige fotografie zoals deze een van de weinige wapens is om dit te bestrijden.
5. Pottery Barn
De formule zou nu vrij duidelijk moeten zijn: logo bovenaan, zoek hieronder, een inleidende afbeelding om een product of verkoop te promoten, gevolgd door een lijst met hoofdproductcategorieën. En we vinden die exacte structuur aan Pottery Barn Mobiele website.
Een absoluut briljant detail is de oplossing van deze website voor het probleem van lange broodkruimels. In de lijst met productcategorieën ziet u dat het broodkruimelpad sterk verkort is en alleen het laatste deel van de reeks bevat. Vergelijk dit met de opdringerigheid van het broodkruim op Toys-R-Us, en u zult deze ruimtebesparende oplossing waarderen.
6. Threadless
Het is geen verrassing dat draadloos 'mobiele website is fantastisch. De startpagina volgt de categorieportaalformule, maar met een twist. Net zoals de website van Walmart is de rasteraanpak hier veel gemakkelijker te gebruiken dan de meeste. De fotografie is boeiend en maakt de winkel als een ware winkelervaring. Iets erover voelt gewoon minder mechanisch aan dan de meeste andere winkels die hier worden behandeld.
U vindt dezelfde rasterbenadering in de productlijstweergave, wat een mooi reliëf is en de producten zeer goed weergeeft. De ontwerpers slaagden erin verspilde ruimte te minimaliseren met behoud van gebruiksgemak.
7. Brookstone
Brookstone De mobiele winkel heeft een dichte homepage. Maar als je er eenmaal voorbij bent, wordt de website beter. De grote heldere fotografie wordt zeer op prijs gesteld. Ik weet niet of de afbeeldingen zijn geoptimaliseerd voor mobiele apparaten, maar ze zijn zeker de gemakkelijkste om te zien in deze hele batch.
Een zwak punt is de hoeveelheid scrollen die nodig is op de winkelwagenpagina om naar de uitcheckknop te gaan. De inhoud kan enige snoei en optimalisatie gebruiken om de deal te sluiten.
8. Dooney & Bourke
Ik waardeer de fotografie enorm Dooney en Bourke Startpagina. Het geeft precies weer wat het bedrijf verkoopt zodra u op de pagina belandt. Een subtiel detail om het zachtjes uit te drukken, maar zeker iets om over na te denken.
Een irriterend punt van de detailweergave van het product is dat het veld voor de hoeveelheid standaard leeg is. Ik moest een "1" toevoegen om een product aan mijn winkelwagen toe te voegen. Maar het is onwaarschijnlijk dat ik meer dan één van dezelfde $ 150 tas zou bestellen.
Ook voelt de winkelwagenpagina een beetje als een soort nabeschouwing. Maar ik geef het bedrijf de eer om belangrijke actiepunten bovenaan te plaatsen. De kans dat klanten vergeten wat ze zojuist in hun winkelwagentje hebben gedaan, is klein, dus het is een slim idee om je te concentreren op het helpen om naar de kassa te gaan.
9. Buy.com
De startpagina van Buy.com heeft iets dat geen enkele andere startpagina in dit artikel heeft: een echt product. Het denken van de meeste e-commerce winkels is om een mobiel portaal te creëren waarmee gebruikers in de volledige productlijn kunnen graven. Hoewel dit misschien essentieel is, inspireert Buy.com me om alternatieven te overwegen.
Wat als een betere aanpak is om te focussen op deals? De startpagina is uitstekend onroerend goed; gezien de uitdaging van het sluiten van de verkoop, waarom zou u dan niet al uw moeite doen om iets onweerstaanbaars voor klanten te plaatsen? Merk op dat voordat u de lijst met afdelingen op deze website bereikt, u het afgebeelde product en vier afzonderlijke links naar verkopen, deals en specials ziet.
10. Petco
Een geweldige functie van het mobiele web is dat het pluis elimineert. Dus als ik de startpagina van zie Petco 'S mobiele website, ik vraag me af of de grote foto op wat voor manier dan ook nuttig is. De bedrijfsnaam en het bijbehorende hond-en-kattenpictogram communiceren de focus van het product. Waarom zou je dit dwaze beeld laten zien? In plaats daarvan zou ik een speciale deal of een rooster met categoriepictogrammen plaatsen. Hoewel ik de Pools van de website waardeer, kan het een beetje worden aangepast.
Het bedrijf sloeg een ingenieus idee aan in de detailweergave van producten door de nadruk te leggen op verkopen via internet. Waarom niet een stap verder gaan en een aantal van hen alleen-mobiel specials maken. Verwoording terzijde, de productdetailpagina is fantastisch schoon en duidelijk. Het weglaten van de volledige beschrijvingen onder de belangrijkste functies en informatie lijkt ook een verstandige beslissing.
Conclusie
Het ontwerpen van mobiele websites is moeilijk en het ontwerpen van mobiele e-commerce websites is misschien wel dubbel zo. Uitzoeken hoe klanten kunnen helpen het juiste product te vinden en hoe dat proces in een verkoop kan worden omgezet, is verre van eenvoudig. Ik hoop dat deze kleine verzameling bronnen nieuwe ideeën met zich meebrengt voor uw volgende (of misschien wel eerste) mobiele websiteontwerp.
Exclusief geschreven voor WDD door Patrick McNeil . Hij is een freelance schrijver, ontwikkelaar en ontwerper. Hij houdt vooral van schrijven over webdesign, mensen trainen in webontwikkeling en websites bouwen. Patrick's passie voor webdesign trends en patronen is te vinden in zijn boeken TheWebDesignersIdeaBook.com . Volg Patrick op Twitter @designmeltdown .
Wat denk je als deze voorbeelden? Deel deze alsjeblieft in de comments hieronder ...