Conseils pour la conception de sites Web mobiles
NouvellesJe viens de le dire et le dire: les sites Web et les applications Web doivent d'abord être conçus pour le mobile.
Pendant des années, la plupart des équipes ont fait le contraire. Le cas échéant, le mobile était un port de la version de bureau conçue, conçue et construite avant même que quiconque ne considère l'expérience mobile.
Et pendant longtemps, cela prenait tout son sens: naviguer sur le Web sur un téléphone mobile était pénible; les transporteurs contrôlent l'accès au Web sur leurs appareils; et les vitesses de réseau mobile ont tout bloqué trop souvent.
Temps changeants
Mais les choses ont tellement changé au cours des dernières années que commencer par l’ordinateur de bureau risque de devenir une façon de penser de plus en plus rétrograde. Concevoir pour le mobile d'abord peut ouvrir de nouvelles possibilités de croissance et améliorer l'expérience globale des utilisateurs..
Explorons les trois principales raisons pour lesquelles: le mobile connaît une croissance explosive; le mobile vous oblige à vous concentrer; et mobile étend vos capacités.
Tout d'abord, la croissance. Au cas où vous ne seriez pas au courant des dernières statistiques, je vais vous résumer rapidement: le mobile grandit comme un fou. Alors que les analystes considèrent depuis longtemps le mobile comme "la prochaine grande chose", leurs prophéties portent enfin leurs fruits.
L'ensemble de statistiques le plus complet et le plus inspirant provient peut-être du Mobile Internet Report de Morgan Stanley Research. Ce trésor de données sur ce qui se passe dans le mobile met en lumière des chiffres vraiment choquants: l'adoption de l'Internet mobile dépasse la croissance stupéfiante de l'adoption de l'Internet de bureau; les smartphones devraient dépasser le marché mondial des PC en 2012; et les grands utilisateurs de données mobiles vont tripler pour atteindre un milliard d’ici 2013. C’est un public énorme qui émerge très rapidement. Le moment est donc venu de saisir l'opportunité mobile!
Mais ce n’est pas seulement une occasion de créer une version mobile d’un produit Web pour tirer parti de cette croissance; c'est l'occasion de fournir une expérience grandement améliorée à vos utilisateurs.
Considérons le service de réseau social Facebook. Plus de 100 millions d'utilisateurs actifs accèdent actuellement à Facebook via leurs appareils mobiles. Ces utilisateurs sont deux fois plus actifs sur Facebook que les utilisateurs non mobiles.
La combinaison d’expériences mobiles et de postes de travail permet de mobiliser davantage d’utilisateurs dans les deux ensembles de périphériques. En effet, Facebook ne considère pas uniquement son expérience mobile comme un port du site de bureau. Il l’adopte comme un moyen d’améliorer l’ensemble de l’expérience Facebook..
Joe Hewitt, développeur principal de l'application iPhone de Facebook, a déclaré: "Mon objectif initial était simplement de créer un compagnon mobile, mais j'ai été convaincu qu'il était possible de créer une version de Facebook réellement meilleure que le site Web." C'est vraiment l'occasion mobile en bref.
Maintenant… comment les contraintes et les capacités des appareils mobiles vous aident à vous y rendre?
Obligé de se concentrer
Concevoir pour l'environnement mobile est soumis à un ensemble naturel de contraintes. Bien que certains puissent soutenir que ces contraintes limitent la conception mobile, je pense qu'elles sont intrinsèquement bénéfiques pour l'expérience utilisateur et, par conséquent, pour l'ensemble de l'entreprise..
En particulier, les petits écrans, les connexions lentes et le contexte d'utilisation des appareils mobiles sont des catalyseurs puissants pour une excellente conception Web..
Peut-être la plus importante de ces contraintes est l’espace écran. Lorsque vous travaillez avec un écran de 480 x 320 pixels (présent sur les trois premières générations de l'iPhone d'Apple, de la première génération de téléphones Android et du Palm Pre), vous disposez de 80% de l'espace d'écran de 1024 x 768 (courant pour la plupart des sites Web. sur le bureau) est parti.
Cela signifie que 80% du contenu, de la navigation, des promotions et des interactions que vous pourriez insérer sur le bureau doivent être utilisés. Et c'est… génial.
Perdre autant d’espace à l’écran oblige les équipes Web à se concentrer. Vous devez vous assurer que les fonctionnalités les plus importantes pour vos clients et votre entreprise restent à l'écran. Il n'y a tout simplement pas de place pour des débris d'interface ou un contenu de valeur discutable. Vous devez savoir ce qui compte le plus.
Pour ce faire, vous devez vraiment connaître vos clients et votre entreprise. Un bon design 101. Concevoir pour le mobile vous oblige à y arriver, que vous le vouliez ou non. Examinez la différence entre l'écran d'itinéraires de voyage d'Expedia sur son site Web et son expérience sur iPhone..
L'objectif principal de cette page est de permettre à un client de revoir ses projets de voyage. Si vous regardez de très près au milieu de cette page Web, vous pourrez peut-être repérer cette information..
À l'opposé, l'expérience iPhone d'Expedia met les mêmes informations à l'avant-plan et avec une meilleure hiérarchie visuelle - permettant à l'utilisateur de vérifier rapidement les heures d'arrivée et de départ. Finis tous les débris d'interface, les promotions et les crocs présents sur le site de bureau. Il ne reste plus que ce dont les utilisateurs d'Expedia ont besoin pour accomplir leur tâche. Pourquoi le site de bureau ne pourrait-il pas en faire autant??
Autre exemple, considérons la différence entre le site Web de Southwest Airlines sur le bureau et son expérience sur iPhone. Comme de nombreux pixels sont disponibles sur le Web de bureau, ils ont été remplis de nombreuses promotions, fonctionnalités, options et plus encore - car ils peuvent être.
L’expérience mobile, quant à elle, met l’accent sur les besoins des clients et ceux de Southwest: réserver un voyage, vérifier, vérifier l’état du vol, vérifier les miles et recevoir des alertes. Pas de place pour autre chose. Seulement ce qui compte le plus.
Se concentrer sur l'essentiel aide à résoudre l'un des problèmes les plus anciens en matière de conception de sites Web: le problème de «tout, y compris l'évier de cuisine». Ce problème existe parce que l'ajout d'éléments à un site Web est relativement facile. Beaucoup de choses sont ajoutées - en particulier lorsque plusieurs parties prenantes sont impliquées.
Les différents services internes, propriétaires de fonctionnalités, entreprises et particuliers ont des exigences différentes pour les sites Web. Les équipes Web doivent donc souvent essayer d’équilibrer de nombreuses promotions, interactions, modules de contenu, options de navigation, etc. dans une seule et même présentation. Sur un écran 1024x768, il y a beaucoup de pixels à remplir!
Si vous concevez d'abord pour mobile, vous pouvez d'abord créer un accord sur ce qui compte le plus. Vous pouvez ensuite appliquer la même justification à la version de bureau de votre produit Web. "Nous avons convenu qu'il s'agissait de l'ensemble le plus important de fonctionnalités et de contenu pour nos clients et nos entreprises" - pourquoi cela devrait-il changer avec plus d'espace à l'écran??
Il existe bien sûr des différences basées sur les contextes mobile et desktop. Mais la valeur fondamentale d'un service Web reste la même dans les deux formats. Lorsqu'une équipe conçoit d'abord pour mobile, le résultat final est une expérience axée sur les tâches clés que les utilisateurs souhaitent accomplir, sans les détours superflus et les débris d'interface généraux qui jonchent de nombreux sites Web actuels. Il n'y a tout simplement pas de place dans un écran de 320 x 480 pixels pour les éléments superflus. Vous devez donner la priorité.