Comment reconcevoir un site Web pour qu'il soit incroyable sur mobile
Publié: 2016-01-24[ Proto .io est un outil de prototypage d'applications mobiles utilisé par les entrepreneurs et les startups pour créer des prototypes réalistes entièrement interactifs qui ressemblent à de vraies applications.]
Il y a quinze ans, la refonte d'un site Web était une entreprise beaucoup plus simple - vous décidiez simplement à quoi ressemblerait votre expérience de bureau, organisiez votre contenu en conséquence et construisiez le site Web. Incroyablement, certains sites Web manquent encore d'une véritable expérience mobile, qu'il s'agisse d'une refonte de site Web distincte ou d'une conception réactive bien planifiée.
La conception peut parfois ressembler à un jeu de rattrapage sans fin, mais ces experts en applications mobiles peuvent vous guider tout au long du processus de refonte de votre expérience Web afin qu'elle ait fière allure sur n'importe quel appareil, ordinateur de bureau ou mobile.
Comment reconcevoir un site Web pour une belle expérience mobile
Handsome (@HandsomeMade) est une entreprise de conception et de technologie dont les valeurs fondamentales incluent "la pensée centrée sur l'humain à tous les niveaux" et "un logiciel délibérément beau et délicieux". Le directeur créatif Brandon Termini et le directeur technique Alex Zub expliquent comment ils appliquent ces principes à la refonte du site Web mobile :
Selon Termini, la clé d'une refonte de site Web Handsome est d'adopter une «approche de conception axée sur le mobile», rendant l'expérience utilisateur aussi élégante et facile à utiliser que possible. "L'une des façons dont nous appliquons la conception axée sur le mobile consiste à commencer par des tailles d'écran plus petites, ce qui nous oblige à simplifier l'interface autant que possible et à ne mettre que ce qui compte vraiment le plus à l'écran."
Zub ajoute : « L'utilisation des technologies et des meilleures pratiques, telles que la conception réactive et la conception adaptative, avec leur mise en œuvre technique compatible, est la clé. Pour de nombreux produits, il est logique de s'en tenir à des systèmes de grille réactifs, ce qui simplifie l'effort requis pour le construire, tout en conservant le superbe look sur tous les types d'écrans.
Comment reconcevoir un site Web pour qu'il soit beau sur mobile
Nous avons demandé à Termini de partager quelques-unes de ses meilleures pratiques en matière de conception visuelle. « Il y a des centaines de choses à faire et à ne pas faire que nous avons compilées au fil des ans », dit-il. Voici les trois meilleures pratiques qu'il met en place chez Beau :
- Réfléchissez bien à votre hiérarchie de mise en page. "Une mise en page réussie signifie qu'un utilisateur doit être en mesure de vous guider à travers ce qu'il voit / lit dans l'ordre que vous avez prévu. La bonne utilisation de l'espace blanc, la théorie des couleurs, la typographie, etc. jouent tous un rôle central à cet égard.
- Utilisez la couleur de manière appropriée. "Choisissez des couleurs qui conviennent à votre marque et assurez-vous qu'elles s'harmonisent bien ensemble. Utilisez une couleur de héros que vous associez à des éléments importants de l'interface utilisateur tels que les boutons d'appel à l'action. Assurez-vous d'utiliser la couleur avec parcimonie aux bons endroits qui permettent à votre utilisateur de parcourir l'interface et de ne pas rester bloqué.
- La typographie doit être agréable pour les yeux. "Assurez-vous que votre typographie est appropriée pour la marque et lisible sur les appareils pour lesquels vous concevez, et utilisez le type ornemental avec parcimonie."
Tester la refonte de votre site Web mobile
Bien sûr, une fois que vous avez construit le site mobile, vous devez le mettre à l'épreuve pour garantir une excellente expérience utilisateur. Selon Termini, « Tester fréquemment et ajuster est essentiel. Commencez les tests dès que vous montrez les premiers croquis dessinés à la main avec des utilisateurs potentiels, et continuez à tester tout au long de votre processus, jusqu'aux systèmes conçus entièrement construits. Être configuré pour pouvoir entendre, synthétiser et itérer sur les commentaires est très important pour le succès de tout produit. »
Recommandé pour vous:
Que signifie la disposition anti-profit pour les startups indiennes ?
Comment les startups Edtech aident la main-d'œuvre indienne à se perfectionner et à se préparer pour l'avenir...
Stocks technologiques de la nouvelle ère cette semaine : les problèmes de Zomato continuent, EaseMyTrip publie des...
Les startups indiennes prennent des raccourcis à la recherche de financement
La plate-forme de marketing numérique Logicserve met en sac un financement INR 80 Cr et se rebaptise LS Dig ...
Un rapport met en garde contre un examen réglementaire renouvelé sur l'espace Lendingtech
Zub ajoute : « L'assurance qualité est un élément essentiel de la conception d'un produit utilisé sur différents types d'appareils. Et comme il est pratiquement impossible d'avoir tous les appareils possibles au bureau, nous utilisons des services en ligne qui donnent accès à des dizaines d'appareils « virtuels » dans le cloud, en les automatisant autant que possible. Avec des investissements d'automatisation appropriés, il est facile et rapide d'effectuer des tests multi-appareils sur la route. »
Nous voulions en savoir encore plus sur la façon de tester et d'évaluer la refonte d'un site Web mobile. Pour cela, nous avons entendu Simon Papineau, PDG de Crowdsourced Testing(@crowdsourcingqa). Papineau a créé Crowdsourced Testing pour résoudre certains des problèmes qu'il avait rencontrés au cours de son expérience de test de nombreuses applications mobiles, sites Web, jeux et plus encore.
Ce qui fonctionne sur ordinateur ne fonctionne pas toujours sur mobile - et vice versa
Selon Papineau, « La seule chose que les développeurs ont tendance à oublier, c'est que vous n'avez pas besoin de la même profondeur ou du même contenu sur votre site mobile que vous afficheriez sur votre site de bureau. L'intention, l'état d'esprit et l'objectif de l'utilisateur mobile sont complètement différents. Les visiteurs ne passeront pas 20 minutes sur leur téléphone à lire l'histoire de votre entreprise et ses petits caractères.
Au lieu de cela, donnez-leur ce qu'ils veulent aussi directement et aussi rapidement que possible. S'il s'agit de vos coordonnées, mettez-les directement sur la page d'accueil sans aucun détail supplémentaire.
L'un des défis, dit Papineau, est de s'assurer que la refonte de votre site Web mobile aura fière allure et fonctionnera bien sur une multitude d'appareils : « Tester pour voir si les sites Web sont réactifs peut être très long et coûteux. La meilleure chose qu'une entreprise puisse faire est de se concentrer sur les 15 à 20 premiers appareils qui représentent la majorité de ses visites. Il y aura toujours un appareil mobile sur lequel le site n'aura pas l'air parfait. Mais si cet appareil représente 0,05 % de vos visiteurs, cela ne vaut probablement pas l'effort de développement supplémentaire. »
Comment reconcevoir un site Web à l'aide d'un design réactif
Bob Bentz est président d'ATS Mobile (@atsMobile), une agence de marketing mobile à service complet qui supervise la refonte de sites Web pour des clients de plusieurs secteurs. Bentz est passionné par le fait de s'assurer qu'une expérience de site Web est aussi agréable sur un appareil mobile que sur un écran de bureau haute résolution, et l'un des principaux moyens par lesquels ATS Mobile y parvient pour ses clients est d'utiliser une conception réactive.
Pourquoi le Responsive Design ? Une introduction
"La conception Web réactive (RWD), le plus souvent conçue avec HTML5, sera le choix probable dans presque toutes les nouvelles versions de sites Web mobiles", déclare Bentz. « Il peut également être conçu en utilisant CSS3 et Javascript. La conception réactive a l'avantage frappant d'être très flexible car elle change de manière fluide pour s'adapter à n'importe quel appareil. RWD fonctionne en envoyant le même code, quel que soit l'appareil, puis en le réorganisant côté client, permettant ainsi d'afficher la même page Web sur n'importe quel appareil.
Pour voir la conception réactive en action, affichez ce billet de blog sur un écran de bureau, si vous ne l'avez pas déjà fait (nous attendrons !). Vous remarquerez qu'il existe plusieurs tailles de fenêtre auxquelles l'interface utilisateur "casse" et se réorganise, de sorte que la page semble différente en fonction de l'appareil que vous utilisez (et de la taille de la fenêtre à l'intérieur de cet appareil).
Alors, comment fonctionne exactement la conception réactive - et pourquoi devriez-vous l'utiliser pour la refonte de votre site Web ? "Une refonte de site Web réactif sert le même code HTML sur la même URL, que l'appareil de l'utilisateur soit un ordinateur de bureau, une tablette, une phablette, un smartphone, un téléphone polyvalent ou un appareil portable (comme l'Apple Watch)", déclare Bentz. "Il peut également réagir différemment en fonction de la taille de l'écran du site. Les développeurs peuvent décider quels graphiques et contenus seront utilisés pour les utilisateurs de mobiles et de tablettes. Le texte et les images peuvent s'ajuster en fonction de n'importe quel navigateur ou taille d'écran.
Avec une conception réactive, vous vous assurez de ne pas effectuer de nouvelle mise à jour chaque fois que quelque chose change dans le statu quo de l'appareil mobile. "Lorsqu'un nouvel appareil arrive sur le marché et accède à votre site Web, aucune programmation supplémentaire n'est requise si le site est construit sur une conception réactive", explique Bentz. "Le plus important, cependant, c'est que la conception réactive est la meilleure pratique de conception recommandée par Google. Pour de nombreux sites Web, RWD atteint un équilibre raisonnable entre la convivialité mobile et la facilité de mise en œuvre. »
Meilleures pratiques en matière de conception visuelle réactive
Selon Bentz, la prise en compte des meilleures pratiques suivantes vous aidera à donner à votre site Web réactif une apparence et un fonctionnement optimaux :
- Un en-tête simple et frappant. « L'en-tête et la tête de mât doivent être simples afin de ne pas nuire aux principaux arguments de vente. Le logo est l'image clé de la marque ; un logo trop horizontal peut ne pas avoir fière allure sur des écrans verticaux plus petits.
- Navigation facile à utiliser. « La navigation est beaucoup plus délicate sur un petit écran. Souvent, les concepteurs utiliseront un bouton de navigation représenté par trois lignes horizontales, généralement en haut à droite du site. C'est ce qu'on appelle un «menu hamburger», car il ressemble à un hamburger entouré de pain. Certains sites utilisent une navigation sur le côté gauche qui peut s'étendre vers l'extérieur pour couvrir la majeure partie de l'écran.
- Beaucoup d'images. "Il est difficile d'inclure trop d'images sur l'écran du mobile, mais les mots peuvent rapidement submerger l'interface utilisateur. Par conséquent, les concepteurs utilisent souvent des carrousels d'images qui permettent aux utilisateurs de parcourir plusieurs images de produits au lieu de surcharger l'écran avec des copies.
- Utilisation intelligente du pied de page. « Les consommateurs sont habitués à utiliser le pied de page comme outil de navigation, et il n'occupe pas un espace aussi précieux que l'en-tête au-dessus du pli. Il devrait également inclure le lien très important "Contactez-nous".
Une magnifique refonte de site Web commence par un magnifique prototype
Apprendre à repenser un site Web pour mobile n'est pas une mince affaire, mais disposer d'un puissant outil de prototypage rapide pour vous aider à tester l'expérience fait la plus grande différence. Après avoir coupé la copie, réduit les éléments et déterminé votre schéma de navigation, vous pouvez rapidement obtenir des commentaires des utilisateurs pour savoir si la refonte de votre site Web mobile est toujours utilisable et intuitive. Ensuite, comme l'a suggéré Termini, continuez à itérer jusqu'à ce que vous ayez un prototype dont vous êtes vraiment fier.