Leçons de la conception Web mobile
Le développement mobile fait fureur et l’industrie interactive est en plein bouleversement alors que d’innombrables tablettes et smartphones arrivent sur le marché.
Le développement des applications mobiles attire le plus d’attention, tandis que le Web mobile se fait discret. Mais le Web mobile progresse chaque jour au fur et à mesure que de plus en plus de développeurs lancent des interfaces optimisées pour les mobiles.
La grande chose au sujet du Web mobile est qu'il est fondamentalement construit avec tous les mêmes outils utilisés dans la conception et le développement Web traditionnels.
Cela le rend beaucoup plus accessible que le développement d'applications. En outre, de nombreux utilisateurs voudront visiter le site Web d'une entreprise en déplacement, sans nécessairement avoir besoin d'une application complète.
La création de sites Web optimisés pour les mobiles est tellement similaire, mais si différente, que la conception pour le bureau. Certains facteurs jouent un rôle beaucoup plus important. Par exemple, les variations de la taille de l'écran, les niveaux d'attention de l'utilisateur et les problèmes de convivialité sont plus importants que jamais.
Ces mêmes problèmes sont toujours présents sur le bureau mais sont parfois plus faciles à négliger. Nous examinerons ici quelques leçons à tirer de l’optimisation en cours sur le Web mobile. Les leçons peuvent directement informer comment nous concevons et comment nous pensons à la conception de sites Web traditionnels et à l'architecture de sites Web.
Navigation simplifiée sur les sites Web mobiles
L'une des premières choses qui devient évidente lorsque l'on explore les sites Web mobiles est l'extrême simplification de la navigation. La navigation devient non seulement très importante et centrale sur un site Web mobile, mais elle est également assez souvent réduite pour ne porter que sur les éléments les plus critiques.
Je trouve incroyable que la navigation de haut niveau se réduise à deux ou quatre éléments sur la plupart des sites Web mobiles. Bien entendu, je reconnais que le contenu d’un site Web mobile est assez souvent optimisé pour le public visé. Par exemple, Église du Tabernacle Vérité dispose de six options dans sa navigation principale, dont une seule est entrée dans la navigation version mobile ; et celui qui l'a créé ("Contact") est au centre de toute la page d'accueil.
Le contenu qui n’a pas été intégré à la version mobile reste, bien entendu, tout à fait pertinent. L'interface mobile a pour but d'attraper les personnes essayant de trouver l'église ou de vérifier les horaires de service ou simplement de les contacter. Ce sont les objectifs les plus probables de l'internaute mobile. Ceux qui accèdent au site Web complet sur un ordinateur de bureau ont autant de chances de vouloir ces choses que de vouloir étudier l'église pour voir si c'est le genre d'endroit qu'ils aimeraient visiter.
Alors, quelle est la leçon à apprendre? Ces deux interfaces ne ciblent-elles pas des publics totalement différents et ont des objectifs totalement différents? Peut-être, mais nous pouvons apprendre beaucoup du point de vue extrême de l'interface mobile. Remarquez comment tout est sur les actions que vous pouvez entreprendre? L'église a éliminé tous les éléments de navigation qui ressemblent à des cases à cocher.
Un élément intéressant est l'option de navigation "À propos" sur le site Web complet. Le site Web mobile peut être optimisé pour les personnes en déplacement, mais il n’ya aucune raison de penser qu’elles ne seraient pas intéressées par la lecture de l’Eglise et de ses croyances. Quelqu'un a peut-être mentionné l'église à vous en passant, vous invitant à consulter votre téléphone.
Ainsi, l'option de navigation pour cet élément doit être modifiée. Et si, au lieu de cela, il communiquait quelque chose comme: «Que devriez-vous savoir sur nous»? Bien qu'un peu long, cela reflète une attitude plus utile. Un seau général "À propos" ressemble à un endroit où contenir toutes les informations que personne ne lit. "Un guide du visiteur de notre église" se sent beaucoup plus utile et ciblé.
La simplicité et l’orientation de l’interface mobile montrent que tout doit avoir pour but de gagner un emplacement sur le site Web. S'il en était de même pour le site Web complet, nous serions moins enclins à le remplir avec un contenu apparemment important et plus enclin à faire en sorte que tout fonctionne clairement.
Cela reflète une mentalité très axée sur les tâches. Chaque option invite l'utilisateur à prendre des mesures actives. C'est comme si chaque option passive avait été purgée et réduite à des éléments pouvant faire l'objet d'une action sur le site Web mobile. Cela nous amène à la prochaine leçon: être extrêmement orienté vers les tâches.
Les sites Web mobiles sont axés sur les tâches
Avec un état d'esprit orienté vers la tâche, revenons sur le site Web complet. Bien que la page d'accueil soit magnifiquement conçue, l'appel à l'action est beaucoup moins évident. Le contenu est plein de fragments d’informations en attente de votre intérêt.
Par exemple, la grande bannière mettant en évidence un événement à venir ne parvient pas à appeler à une sorte d'action; très passif Avec une mentalité orientée vers les tâches, nous pourrions grandement améliorer l'appel à l'action "En savoir plus". Cela pourrait être aussi simple que de rendre l'appel à l'action beaucoup plus important; par exemple, un gros bouton dans une orange contrastante. En outre, l'appel peut être modifié pour "En savoir plus et vous inscrire".
Un autre exemple est le message de bienvenue. J'apprécie l'intention et le message transmis ici. Le message montre que de vraies personnes sont derrière le site Web et il essaie de rendre la page personnelle. Mais encore une fois, disséquons-le avec une mentalité orientée vers la tâche. Un excellent suivi d'une introduction comme celle-ci serait un appel à l'action clair encourageant les visiteurs à passer à l'étape suivante. Après tout, les seules personnes qui liront ceci sont les nouveaux venus. Les membres actuels passeront tout de suite à des choses comme le calendrier des événements. Donc, offrir un point de conversion pour les utilisateurs, comme "Posez-nous une question difficile" ou "À quoi vous attendre lorsque vous visitez".
En revanche, la boîte "Invité spécial" est fantastique. Il aborde des questions clés et incite les gens à approfondir leurs connaissances. Je me demande seulement si cela pourrait être un élément plus important de la page. Encore une fois, les membres arriveront là où ils doivent aller; Ainsi, se concentrer sur ceux qui sont nouveaux sur le site Web et dans l’Église contribuerait grandement à maximiser les possibilités.
Je sais que je bat vraiment ce site, mais ce n'est pas parce que je ne l'aime pas ou que je pense que cela ne sert pas sa fonction. Mon but est seulement de remettre en question notre réflexion et nos idées préconçues sur ce qu’un site Web devrait ressembler et faire. Je félicite en fait cette église d'avoir un site Web beau et fonctionnel, avec une extension mobile pour démarrer!
Les sites Web mobiles réduisent considérablement leur contenu
Une autre leçon évidente liée à la réduction de la navigation est que les sites Web mobiles réduisent invariablement leur contenu. Non seulement le nombre d'options est-il réduit à la fonctionnalité et à l'objectif du site Web, mais la copie est également considérablement réduite.
Dans certains cas, une grande partie de la copie est entièrement éliminée! Cela pose la question suivante: ce contenu est-il nécessaire sur le site Web complet si la version mobile fonctionne bien sans elle? Divi Aruba est un bon exemple de cela. Le discours marketing séduisant posé sur la photo peut sembler être un élément indispensable de la page d'accueil, mais il a site web micro mobile .
Sur la version mobile, le logo est placé au-dessus de la même image, et pourtant il transmet toujours le même message: si vous voulez aller dans un endroit comme celui-ci, lisez la suite. Pourquoi ne pas utiliser cet endroit important pour amener les gens à l'action souhaitée? Les concepteurs savent sûrement quel est l'élément le plus critique pour convertir les visiteurs en clients. Mettez cette information au travail et amenez les gens là-bas avec un appel important à l'action au lieu d'un discours marketing flou.
Toutes les bonnes choses, sans peluches
Cela nous amène à la leçon suivante: perdre la peluche. L'exemple suivant en est une démonstration positive. Voyage Tex est un site d'information sur les voyages pour l'État du Texas. Il a un but clair et un public en tête. Heureusement, les concepteurs ont pleinement adopté l’état d’esprit moins moelleux.
Non seulement le mini site web mobile concentrez-vous entièrement sur le sujet à l’étude et sur les principaux éléments pouvant donner lieu à une action, tout comme le site Web complet! Quel soulagement de voir presque pas de peluches du tout. Inclure quelque chose de morne comme une histoire du Texas serait trop tentant. Si les gens voulaient une leçon d'histoire, ils ne viendraient pas sur ce site. Vous aurez du mal à trouver du contenu qui ne soit pas pertinent pour le but unique de ce site.
Prenez l'habitude de tout remettre en question. C’est la seule façon de faire bouillir un site Web jusqu’à ses éléments critiques, ce qui est exactement ce qui se passe sur un bon site Web mobile. Des choix difficiles sont faits et, par ailleurs, le contenu précieux est réduit afin de rationaliser le site Web. Appelez les peluches pour ce qu'elles sont et empochez-les!
La marque est roi sur le web mobile
Je suis tout au sujet de la créativité sur le web. En fait, bon nombre des changements les plus importants survenus dans l’industrie sont le résultat d’un refus de respecter le statu quo. Mais il y a un temps et un lieu pour tout. Tant de concepteurs utilisent leurs missions comme une excuse pour libérer leur créativité, dans un but autre que créatif. Cela transforme le site Web en une conception pour le concepteur, pas pour le client et leurs besoins. C'est une chose contre laquelle le Web mobile met en garde de manière assez audacieuse.
L'image de marque est incroyablement cohérente sur le Web mobile, et l'une des parties les plus cohérentes est l'emplacement du logo. Sur les sites Web mobiles, vous ne trouverez pas de logos délirants avec des pieds de page fixes. La fonctionnalité est roi et les logos apparaissent toujours en haut. Pouvez-vous imaginer frapper un site Web mobile et ne pas voir le logo tout de suite? Pourtant, cela est courant sur de nombreux sites Web complets.
Voici quelques sites Web qui, bien que minimes et dépourvus de style époustouflant, offrent une image de marque à ne pas manquer.
La leçon ici peut avoir un impact profond sur votre façon d'aborder votre travail et sur la valeur fondamentale que vous posez à vos clients. Pour chaque concepteur qui estime que les besoins du client doivent être la finalité du projet, il y en a un autre qui veut montrer au monde à quel point ils sont créatifs et originaux.
Comme toute autre personne impliquée dans la production d'un site Web, le concepteur Web doit être très déterminé à servir le client, à aider son entreprise et à améliorer ses résultats. Avec chaque élément que vous mettez sur un site Web mobile, examinez son rôle et les avantages qu’il apportera. Appliquez cette mentalité à tout ce que vous faites, et vous trouverez bientôt un allié fort chez votre client.
Plus nous répondons aux besoins du client et faisons tout notre possible pour apporter de la valeur à son site Web, plus nous verrons un changement fondamental dans notre travail. Nous allons passer de la construction de «trucs sympas» à tout regarder du point de vue du client. Cette fonctionnalité est-elle susceptible d’augmenter leur profit? Comment modifier le design pour améliorer leur activité? Si un sous-produit de votre travail représente plus d’argent pour le client, alors vous trouverez des opportunités partout.
Sites Web sans les trucs
L'une des plus grandes réalisations du web mobile est le manque total de trucs. Pour être juste, il existe un temps et un lieu pour les gadgets sur le web. En fait, je leur dédie des sections entières de mes livres. Mais le manque de trucs sur les sites Web mobiles montre que ces idées apparemment géniales ne servent à rien.
Tout ce qui se passe sur un site Web mobile doit passer par plusieurs filtres. Le contenu est-il pertinent et totalement utile? Le contenu est-il critique et sert-il l'objectif principal du site Web? Le site Web est-il facile à utiliser et à comprendre? La navigation est-elle non conventionnelle? Dans l'affirmative, est-ce essentiel pour la fonction du site Web? La réponse pourrait bien être oui, mais le plus souvent, ce sera un non décisif.
Parmi les astuces remarquablement absentes du développement mobile, citons les écrans de démarrage, la navigation inhabituelle, les animations et l’interactivité sans signification, les zones de défilement en ligne, les mises en page impaires et les mises en page à largeur fixe. L'efficacité du Web mobile est incroyable.
Conclusion
Comme vous pouvez le constater, nous avons plusieurs leçons à tirer du Web mobile. en particulier, sa capacité à révéler des éléments inutiles d’un site Web. Comme pour beaucoup de choses dans la vie, un léger changement de perspective nous ouvre souvent les yeux sur la valeur réelle des choses que nous tenons depuis longtemps pour acquises.
Je ne suggère pas que nous avons perdu de vue l'objectif du web. Je propose plutôt que nous adoptions une mentalité beaucoup plus stratégique.
Patrick McNeil 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. Le dernier projet de livre de Patrick est Le manuel Web du concepteur ; il comprend de nombreux sujets dans le sens de cet article. Vous pouvez en savoir plus à ce sujet sur TheWebDesignersIdeaBook.com . Suivez Patrick sur Twitter @designmeltdown .
Ce post vous a été présenté par DudaMobile, un site mobile société de création.
Quels aspects du design mobile tentez-vous de traduire sur le bureau? Voyez-vous la simplicité et la rapidité dans le Web mobile vous-même?