Conseils essentiels pour la conversion d'un site de bureau en mobile
Étant donné que les appareils mobiles ont maintenant dépassé le bureau en popularité, il est nécessaire que les concepteurs conçoivent avec le mobile en tête. Mobile-first est une technique populaire, car il est plus facile de faire évoluer le mobile, que de réduire le bureau.
Cependant, parfois le choix est retiré de vos mains. Les concepteurs se retrouvent généralement à adapter des conceptions de bureau existantes au mobile. Et parce que certains éléments ne se traduisent pas bien, il est essentiel que les concepteurs comprennent les ajustements spécifiques à effectuer lors de la conception pour le petit écran. Voici comment…
Embrassez le minimalisme
Le minimalisme a été populaire dans la conception de sites Web depuis des années, simplement parce qu’il facilite souvent l’utilisation et qu’il est également agréable. En ce qui concerne le mobile, cependant, le minimalisme est moins un choix esthétique, car il est basé uniquement sur la facilité d'utilisation.
Selon le groupe Nielsen Norman, les fonctions de coupe sont une nécessité dans le design mobile. Qu'est-ce que cela signifie pour les concepteurs qui tentent de créer un site mobile à partir d'un ordinateur de bureau déjà établi?
Cela signifie qu'il faut supprimer ce qui n'est pas essentiel à l'expérience de l'utilisateur mobile. Par exemple, si vous faites la transition d'un magasin de commerce électronique du bureau au mobile, conservez le même nombre de produits affichés sur le site mobile; Cela n'a de sens que parce que les acheteurs veulent pouvoir trouver tout ce qu'un magasin en ligne peut offrir, tout comme le magasin en ligne veut montrer tout ce qu'il doit vendre à ses visiteurs. Un grand carrousel publicitaire pour les dernières offres pourrait toutefois être légèrement réduit.
Masquer la navigation
L'une des caractéristiques les plus courantes sur les écrans mobiles est le menu hamburger, cette petite icône presque omniprésente avec trois segments de ligne horizontaux empilés les uns sur les autres. Ceci est un autre cas parfait où la taille d’écran réduite des mobiles oblige les concepteurs à modifier les éléments qui sont censés se présenter d’une certaine façon sur les ordinateurs de bureau.
Malgré la divergence d'opinions sur la présence du menu hamburger, il est quasiment omniprésent sur les écrans mobiles simplement parce que c'est la meilleure solution que les concepteurs ont trouvée pour réduire le menu de navigation des ordinateurs de bureau aux appareils mobiles.
Découvrez le site Web du célèbre chef Bobby Flay pour son restaurant de la chaîne appelé Bobby's Burger Palace. Comme prévu, le menu de navigation est disposé horizontalement en haut de la page d'accueil, mais lorsque vous accédez à la version mobile du site, le menu horizontal a disparu. À sa place se trouve le menu de hamburger soigné et bien rangé, au même endroit que l’écran où le menu horizontal le plus long serait sur la version de bureau.
Walmart utilise également le menu hamburger dans sa transition de conception bureau à mobile.
Sur son site de bureau, Walmart affiche la navigation déroulante "Tous les départements" qui ouvre une deuxième couche de choix de navigation sur la même page. Sur le site mobile, cependant, cette fonctionnalité n’est pas possible en raison de la petite taille de l’écran. Un remplacement a donc été conçu: la deuxième couche de choix de navigation se trouve dans le menu hamburger et offre de plus en plus de choix de navigation. -Comme presque les pages d'un livre de gauche à droite.
Passer à une seule colonne
En raison du fait qu’il est plus simple de concevoir des appareils mobiles, vous ferez bien pour vos clients si vous vous rappelez qu’une disposition à une seule colonne est plus propre et plus facile à utiliser pour les utilisateurs sur un écran plus petit. Le grand avantage d'une mise en page à une seule colonne est que vous supprimez le défilement horizontal, comme si vous aviez beaucoup de texte sur une page et que vous vouliez que vos lecteurs balaient l'écran de gauche à droite, pour continuer à lire.
Lorsque vous introduisez une mise en page à une seule colonne, vous rationalisez l'expérience utilisateur en encourageant les utilisateurs à simplement faire défiler la liste pour lire ou à cliquer sur un lien qu'ils souhaitent voir sur une nouvelle page. Cela les oblige à balayer de gauche à droite, ce qui est plus difficile que de simplement faire défiler la page, en particulier lorsque vous considérez la position du pouce de votre utilisateur par rapport à la manière dont elle tient un appareil mobile.
Le site Web du journal The New York Times comporte plusieurs colonnes. C'est facile à utiliser sur un bureau, lorsque les utilisateurs de votre client peuvent simplement déplacer le curseur de gauche à droite sans aucun problème sur un trackpad ou une souris.
Bien sûr, le site mobile du New York Times comprend la façon dont les choses doivent évoluer sur des écrans plus petits. Il introduit donc une conception à colonne unique propre et efficace qui optimise l’expérience des utilisateurs. .
Considérations mobiles
En raison de l'influence des mobiles sur les utilisateurs actuels, les concepteurs doivent toujours concevoir pour le mobile. Il ne suffit pas de concevoir un site mobile avec le site de bureau et d’appeler cette conception pour mobile, cependant!
Concevoir pour mobile signifie réellement tenir compte des ajustements spécifiques que vous devrez effectuer pour le site de votre client lorsque vous concevez le petit écran. Cela inclut tout ce dont nous avons parlé ci-dessus, du minimalisme dans la conception au masquage de la barre de navigation en passant par une disposition à une seule colonne.
En adoptant ces meilleures pratiques dans vos compétences, vous créerez des sites parfaitement adaptés au mobile.