Quelles sont les meilleures pratiques / lignes directrices pour la première approche mobile pour un site Web de commerce électronique?
Je travaille sur la refonte d'un site Web ecom des années 90 - l'objectif est de le rendre convivial pour les téléphones portables/tablettes et nous avons décidé de privilégier le mobile car le site Web a plus de visiteurs mobiles. Mon premier livrable est un ensemble de wireframes. Existe-t-il des ressources sur les meilleures pratiques auxquelles je peux me référer avant de commencer? La plupart des informations disponibles en ligne soulignent l'importance d'avoir un site Web adapté aux mobiles ou se plongent beaucoup dans les CSS. J'apprécierais toute contribution sur la façon de commencer.
Il y a tellement de considérations, et si vous avez cherché des articles sur la conception adaptative par rapport à adaptative pour le web/mobile, vous rencontrerez la plupart des plus courants. J'en ai énuméré ici pour vous aider à démarrer (désolé, je n'ai pas les références exactes):
Considérations relatives aux appareils mobiles
- Orientation de l'appareil (optimisée pour chaque orientation ou apparence cohérente)
- Résolution d'affichage (création d'icônes et de graphiques détaillés pour l'affichage de la rétine)
- Dimension d'affichage (conception adaptative ou réactive pour répondre aux variations)
- Système d'exploitation (compatibilité descendante et contrôle de version)
- Interactions tactiles et gestuelles (optimisées pour le système d'exploitation et l'appareil ou une apparence cohérente)
Considérations de conception réactive
Quel cadre de grille convient au contenu à afficher?
Impact de l'utilisation de la requête multimédia pour déterminer le type d'appareil
Concevoir des images évolutives et les implémenter dans la conception
Largeurs d'affichage maximales et minimales prises en charge
Existe-t-il des points d'arrêt logiques indépendants des contraintes physiques?
Quels sont les points d'arrêt clés lorsque la conception de la mise en page doit changer?
À quoi ressemblent les principaux modèles à chaque point d'arrêt?
À quoi ressemblent l'en-tête et le pied de page?
Le contenu variera-t-il en différentes tailles/résolutions?
Stratégie de navigation avec des tailles d'affichage plus petites
Structure du tableau et présentation du contenu à des tailles d'affichage plus petites
Problèmes de compatibilité du navigateur
Considérations CSS
Navigateur: l'apparence est-elle cohérente et utilisable avec les navigateurs les plus récents et les plus populaires? Est-il utilisable sur les anciennes versions de différents navigateurs?
Plate-forme: la conception fonctionne-t-elle sur des machines PC, Mac et Linux?
Appareil: la conception s'adapte-t-elle aux appareils à faible résolution et aux appareils mobiles à pleine résolution?
Résolution d'écran: la conception fonctionne-t-elle pour différentes largeurs de fenêtre? La conception s'adapte-t-elle aux fenêtres extrêmement étroites ou larges (par exemple en utilisant les propriétés min-width et max-width)?
Tailles de police: la conception prend-elle en compte différentes tailles de police par défaut et lorsque la taille de police est modifiée?
Couleur: le design a-t-il un sens et le contenu est-il lisible en noir et blanc? Cela fonctionne-t-il pour les utilisateurs daltoniens ou les personnes qui ne peuvent pas distinguer les détails à faible contraste?
Présence JavaScript: comment fonctionnera la page sans JavaScript?
Présence d'images: le contenu est-il compréhensible sans images (en arrière-plan ou au premier plan)?
Technologie d'assistance: le lecteur d'écran de page est-il convivial? Le contrôle/navigation est-il possible sans souris?
Quelques articles liés au responsive design:
- http://alistapart.com/article/responsive-web-design
- http://www.smashingmagazine.com/2013/03/01/logical-breakpoints-responsive-design/
- http://www.netmagazine.com/features/top-responsive-web-design-problems-and-how-avoid-them
- http://informationarchitects.net/blog/responsive-typography-the-basics/
Outils et ressources:
- http://www.browserstack.com/responsive
- https://quirktools.com/screenfly/
- http://www.thismanslife.co.uk/projects/lab/responsivewireframes/
- http://blog.cloudfour.com/a-comprehensive-guide-to-mobile-statistics/
- http://opensignal.com/reports/fragmentation-2013/ ?
Faites-moi savoir si vous en trouvez utile.
Il vaut la peine d'examiner des outils de prototypage tels qu'Axure ou Proto.io qui prennent assez bien en charge le mobile. La dernière version bêta d'Axure 7 prend également en charge les mises en page réactives de base pour mobile.
Il convient également de garder à l'esprit, en particulier avec une première solution mobile, qu'il faut rester simple, garder le client concentré sur une tâche à la fois et agrandir les zones de prise (7 mm est un bon guide car c'est la largeur typique d'une touche d'humour du doigt et ne dépend pas de la résolution). En outre, autoriser ces zones de prise plus grandes forcera la conception à se simplifier - et se rendra plus apte au portage, en particulier aux androïdes de résolution inférieure.
Avant de se laisser trop entraîner dans une conception adaptative réactive (ou même plus sophistiquée), il convient de se demander si la conception réactive est applicable à l'utilisateur. L'utilisateur effectue-t-il réellement les mêmes tâches dans un contexte mobile que ce qu'il fait en ligne? De nos jours, il est préférable d'adopter une approche multicanal pour modéliser le comportement des utilisateurs et concevoir des offres en ligne et mobiles pour se compléter mutuellement. Il vaut la peine de consulter des études de journal/des tests qualitatifs, etc. pour savoir ce que les clients veulent faire sur mobile ... et "y a-t-il d'autres choses qu'ils s'attendent à faire en ligne" ... cela pourrait aider à encadrer la conversation lors de la découverte des besoins des utilisateurs. Ceci est beaucoup plus important pour le succès du produit que de se soucier initialement trop de la compatibilité des appareils, etc. - ces discussions viendront plus tard.
En ce qui concerne la création "d'icônes très détaillées" - cela devient désormais démodé, en particulier avec le lancement d'iOS7 ... le skeuomorphisme est une chose du passé ... chose plate et simple. En outre, cette tendance est également la norme/attendue pour Windows mobile et devient également de plus en plus courante sur les appareils Android également.
D'autres considérations incluent si la solution mobile sera une application, une webapp, une application Shell - par exemple une application hébergeant une solution Web, etc. Une application Web, avec une application Shell pour la présence de l'Appstore, peut être une bonne approche en fonction de la nature du produit.