Une vitrine du commerce électronique mobile
Optimiser les sites Web pour le Web mobile est une corvée. Et l'optimisation des sites de commerce électronique pour le Web mobile est une bête que les concepteurs et les développeurs ont commencé à apprivoiser.
Il n'est pas surprenant que les grandes entreprises adoptent d'abord le média, probablement parce qu'elles disposent des ressources et des flux de vente nécessaires pour le justifier. Après tout, même si un site Web de commerce électronique génère un trafic important, un petit pourcentage de celui-ci sera mobile. Et un pourcentage encore plus faible de ce trafic complétera réellement ses ventes.
Avec l’élan qui commence vraiment dans ce domaine, l’expérience des gens avec les transactions de commerce électronique mobile est limitée. Cela fait de la niche une expérience au mieux. Heureusement, compte tenu de la nature du commerce électronique, le succès peut être soigneusement mesuré et testé. C'est un média qui nécessite encore une définition.
La rareté des exemples est un obstacle majeur au progrès. Surfer sur les galeries pour trouver une tonne d'idées intéressantes n'est même pas près d'être rapide et facile. Il existe peu de petites collections de design mobile, encore moins pour le commerce électronique. Pour y remédier, j'ai rassemblé 10 exemples fantastiques de commerce électronique mobile. QR des codes ont été inclus pour faciliter la navigation. Vous pouvez trouver de nombreuses applications pour vos téléphones portables capables de lire ces codes.
1. Walmart
Une approche commune à tous les sites Web présentés ici consiste à avoir une page d'accueil de type portail. Walmart n'est pas différent. Cependant, alors que la plupart des sites Web s'appuient sur des listes textuelles, celle-ci comporte une grille d'icônes beaucoup plus facile à parcourir. Beaucoup de sites Web mobiles couverts ici ont des listes si petites qu’elles sont difficiles à utiliser. Walmart combine des icônes avec du texte pour rendre les cibles faciles à atteindre.
Le plus gros problème sur le site Web de Walmart est que vous devez accéder au site Web principal pour effectuer une transaction. Cependant, les informations et les boutons sont extrêmement faciles à utiliser, clairs et fonctionnels.
2. Toys-R-Us
le Toys r us le site Web est un pas dans la bonne direction. Mais il pourrait mieux faire quelques choses clés. Tout d'abord, j'ai trouvé que la liste des boutons de la page d'accueil était trop petite. Je comprends la tentation de les réduire pour préserver l’espace, mais ils seraient beaucoup plus faciles à utiliser avec juste un peu plus de place. Bien sûr, je devrais faire défiler plus, mais c'est un bon compromis.
Une fois que vous avez passé la page d'accueil, cela devient beaucoup mieux. En particulier, ce site Web présente l’une des meilleures pages de shopping-cart. Les boutons sont clairs et l’équilibre entre la densité et la capacité de frappe semble correct. Dans l'ensemble, c'est un bon exemple de la manière de communiquer clairement les points d'action.
3. Crocs
Le développement mobile est encore très largement dominé par les développeurs, donc trouver un site Web mobile magnifiquement conçu est un soulagement. Tel est le cas avec Crocs . Son site internet est bien implanté et une beauté à regarder.
La vue de liste de catalogue est particulièrement propre. La seule façon de le rendre plus mince serait d’éliminer les noms de produits. Indépendamment de cela, chaque ligne constitue une cible facile, avec des informations claires et pertinentes.
4. JC Penny
Un problème que les concepteurs de la JC Penny magasin mobile face à la portée du produit. Comment permettez-vous aux utilisateurs de parcourir efficacement un large éventail d'options dans une section telle que les pantalons pour hommes? La solution, un simple système déroulant, permet aux clients de filtrer rapidement les critères pour accéder aux produits dont ils ont besoin.
Les grandes images sont également très intéressantes. Notez combien il est facile de voir les éléments réels dans la vue détaillée du produit. Je soupçonne que le taux de conversion des sites Web mobiles est extrêmement faible, et je ne peux pas m'empêcher de penser que de superbes photographies comme celle-ci sont l'une des rares armes pour lutter contre cela.
5. Grange à poterie
La formule devrait être assez claire maintenant: le logo en haut, une recherche en dessous, un graphique pour promouvoir un produit ou une vente, suivi d'une liste des principales catégories de produits. Et nous trouvons cette structure exacte sur Poterie Grange Site web mobile.
Un détail absolument génial est la solution de ce site Web au problème des longues miettes de pain. Vous remarquerez dans la liste des catégories de produits que le fil d'Ariane a été considérablement réduit pour inclure uniquement la dernière partie de la chaîne. Comparez cela au caractère intrusif du fil d'Ariane sur Toys-R-Us, et vous apprécierez cette solution compacte.
6. sans fil
Ce n'est pas une surprise que Sans fil «Le site Web mobile est fantastique. La page d'accueil suit la formule de portail de catégorie, mais avec une torsion. Tout comme le site Web de Walmart, l'approche de la grille est beaucoup plus facile à utiliser que la plupart. La photographie est engageante et fait du magasin une véritable expérience de magasinage. Quelque chose à ce sujet semble moins mécanique que la plupart des autres magasins couverts ici.
Vous trouverez cette même approche de grille dans la vue de la liste de produits, ce qui est un bon soulagement et présente très bien les produits. Les concepteurs ont réussi à minimiser les pertes d’espace tout en conservant une facilité d’utilisation.
7. Brookstone
Brookstone La boutique mobile souffre d'une page d'accueil dense. Mais une fois passé, le site Web s'améliore. La grande photographie claire est très appréciée. Je ne sais pas si les images ont été optimisées pour les appareils mobiles, mais elles sont certainement parmi les plus faciles à voir dans tout ce lot.
Un point faible est la quantité de défilement requise sur la page du panier pour accéder au bouton de paiement. Le contenu pourrait faire l’élagage et l’optimisation pour conclure le marché.
8. Dooney & Bourke
J'apprécie vraiment la photographie sur Dooney et Bourke La page d'accueil de Il transmet exactement ce que l'entreprise vend dès que vous arrivez sur la page. Un détail subtil pour le moins, mais certainement quelque chose à considérer.
Un point irritant concernant la vue détaillée du produit est que le champ de quantité est vide par défaut. J'ai dû ajouter un "1" pour ajouter un produit à mon panier. Mais il est peu probable que je commande plus d’un des mêmes sacs de 150 $.
En outre, la page du panier d'achat ressemble un peu à une réflexion après coup. Mais je donnerai le crédit à l'entreprise pour avoir mis des actions clés au sommet. Les chances que les clients oublient ce qu'ils viennent de mettre dans leur panier sont minces. Il est donc judicieux de les aider à accéder à la page de paiement.
9. Buy.com
La page d'accueil de Buy.com a quelque chose qu'aucune autre page d'accueil de cet article n'a: un produit réel. L'idée de la plupart des magasins de commerce électronique est de créer un portail mobile qui permet aux utilisateurs de découvrir toute la gamme de produits. Bien que cela puisse être essentiel, Buy.com m'inspire à envisager des alternatives.
Et si une meilleure approche consiste à se concentrer sur les transactions? La page d'accueil est un immobilier de premier choix; Étant donné le défi de la fermeture des ventes, pourquoi ne pas consacrer tous vos efforts à mettre quelque chose d'irrésistible devant les clients. Notez qu'avant d'accéder à la liste des départements sur ce site, vous voyez le produit présenté et quatre liens distincts vers les ventes, les offres et les offres spéciales.
10. Petco
Une grande caractéristique du Web mobile est qu'il élimine les peluches. Donc, quand je vois la page d'accueil de Petco Le site Web mobile, je ne peux pas m'empêcher de me demander si la grande photo est utile en aucune façon. Le nom de la société et l’icône accompagnant le chien et le chat communiquent le focus du produit. Alors, pourquoi montrer cette image idiote? Au lieu de cela, je mettrais une offre spéciale ou une grille d'icônes de catégorie. Bien que j'apprécie le raffinement du site Web, il pourrait être légèrement modifié.
L'entreprise met en avant une idée ingénieuse dans la vue détaillée du produit en mettant en avant les ventes uniquement sur Internet. Pourquoi ne pas aller plus loin et faire de certaines d’entre elles des offres exclusivement réservées aux mobiles. Mis à part le libellé, la page de détails du produit est incroyablement propre et claire. Remplir les descriptions complètes sous les fonctions et informations clés semble également être une décision judicieuse.
Conclusion
La conception de sites Web mobiles est difficile, et la conception de sites Web de commerce électronique mobiles le double peut-être. Savoir comment aider les clients à trouver le bon produit et comment convertir ce processus en vente est loin d'être facile. J'espère que cette petite collection de ressources apportera de nouvelles idées à votre prochaine (ou peut-être première) conception de site Web mobile.
Écrit exclusivement pour WDD par Patrick McNeil . Il est rédacteur pigiste, développeur et designer. En particulier, il aime écrire sur la conception de sites Web, former des personnes sur le développement Web et créer des sites Web. La passion de Patrick pour les tendances et les modèles de conception Web se retrouve dans ses livres sur TheWebDesignersIdeaBook.com . Suivez Patrick sur Twitter @designmeltdown .
Que pensez-vous si ces exemples? S'il vous plaît partager dans les commentaires ci-dessous ...