Éléments à abandonner ou à réutiliser sur mobile

Accordez-vous une pause en 2019. Inutile de maîtriser de nouvelles techniques de conception. la plupart de ce qui était à la mode cette année le sera encore l'année prochaine. Au lieu de cela, réfléchissez aux moyens de nettoyer les sites Web mobiles de vos clients et d’établir de meilleures normes pour la conception mobile d’abord.

À l'approche de la fin de l'année, tout le monde communique ses prévisions concernant les tendances en matière de conception de sites Web pour 2019. Pour l’essentiel, je pense que ces prédictions ressemblent beaucoup à celles de 2018 – ce qui est surprenant.

À mesure que nous nous rapprochons du territoire de la téléphonie mobile, nous ne pouvons pas adhérer aux mêmes prédictions qui avaient un sens pour sites visités sur le bureau. Bien sûr, nous ne pouvons pas oublier l’expérience des ordinateurs de bureau, mais il faut passer au second plan. C'est pourquoi je souhaite que les prévisions pour 2019 (et au-delà) soient de nature plus pratique.

Nous devons concevoir des sites Web principalement pour les utilisateurs mobiles, ce qui suppose un système de diffusion de contenu plus efficace.

Comme le disait le peintre expressionniste abstrait Hans Hofmann :

«La capacité de simplifier des moyens pour éliminer l'inutile afin que le nécessaire puisse parler. »

Donc, aujourd'hui, je vais parler des éléments de conception mobile que nous avons conservés un peu trop longtemps et de ce que vous devriez faire à leur sujet à l'avenir. .

Pourquoi devons-nous nous débarrasser des éléments de conception mobiles en 2019?

Bien que la réactivité et le minimalisme nous aient rapprochés de l'effet souhaité du mobile d'abord, je ne pense pas que cela nous a poussé aussi loin que nous le pouvons. aller. Cela tient en partie au fait que nous sommes réticents à abandonner les éléments de conception qui existent depuis longtemps. Elles peuvent sembler essentielles, mais je suppose que beaucoup d’entre elles peuvent être supprimées des sites Web sans nuire à l’expérience.

C’est pourquoi: Sur le bureau, il ya beaucoup de place pour jouer. Même si vous ne remplissez pas chaque centimètre de l'écran avec du contenu, vous trouvez des moyens créatifs d'utiliser cet espace. Avec mobile, vous avez considérablement réduit l’immobilier. L'un des principaux effets secondaires de cette situation est la quantité de défilement que les visiteurs mobiles doivent faire.

Une étude réalisée en 2018 par le groupe Nielsen Norman sur le défilement et attention montre que de nombreux utilisateurs (57%) ne voient pas d'inconvénient à faire défiler la ligne au-dessus du pli . Cela dit, 74% de la totalité du temps d’écoute s’écoule entre les deux premiers écrans.

Si vous essayez d'intégrer tous les éléments de conception superflus de l'expérience de bureau traditionnelle au modèle mobile, il y a de grandes chances que vos visiteurs ne les rencontrent jamais.

Bien qu'un défilement plus long sur mobile puisse être assez facile Pour exécuter, vous pouvez également trouver vos visiteurs souffrent de fatigue de défilement. Ma suggestion est de supprimer les éléments de conception sur mobile qui génèrent des parchemins excessifs et, par conséquent, de mettre à l'épreuve la patience des visiteurs.

4 éléments de conception mobile à éviter en 2019

Si nous n'allons pas changer radicalement les tendances en matière de conception Web 2018 à 2019, alors je pense que le moment est venu de nettoyer l'expérience du Web mobile. Si vous souhaitez augmenter le temps passé sur le site et augmenter votre taux de conversion, créer une expérience plus élégante et plus efficace améliorerait considérablement la conception de votre site Web mobile.

Afin d'expliquer les éléments de conception mobile à abandonner cette année, Je vais opposer les expériences bureau et mobile. De cette façon, vous comprendrez pourquoi vous devez dire au revoir à votre mobile.

1. Barres latérales

La barre latérale est depuis longtemps un élément de conception de sites Web très utile pour les blogs et les autres autorités. Cependant, avec le design réactif et mobile-first prenant le dessus, l'encadré a tendance à se faire bousculer tout en bas des publications de blog. Mais est-ce le meilleur endroit pour cela?

The Blonde Abroad est l'exemple de celui qui place l'essentiel du contenu de la barre latérale au bas d'un article.

Voici comment un article apparaît sur Bureau:

Notez que ce n’est pas la fin de la barre latérale non plus. Il existe un certain nombre d'autres widgets en dessous de ceux illustrés dans cette capture d'écran. C'est pourquoi la contrepartie mobile est trop longue pour ce site:

Ce que vous voyez ici n’est pas une page centrée sur les médias sociaux. Voici ce que les utilisateurs mobiles trouvent après avoir défilé:

• Une promotion de son magasin en ligne,
• Articles recommandés / connexes,
• Un formulaire d'abonné,
• Un formulaire de commentaire. [19659041] Le flux Instagram apparaît, suivi du formulaire d'abonné une fois de plus! Au total, il faut environ la moitié du défilement de la page pour accéder à la fin du contenu. Le reste de la page est ensuite rempli de matériel auto-promotionnel. C’est beaucoup trop.

  Si Instagram est une plate-forme aussi importante pour elle, elle devrait avoir un lien vers celle-ci dans l’en-tête. Je suggérerais également de réduire le nombre de formulaires sur les pages Web mobiles. Trois formulaires (dont deux sont des doublons) est excessif. Et je recommanderais probablement également de transformer les publications recommandées contenant des images et des titres en liens en texte brut.

  Le site MarketingSherpa est un exemple de site d'autorité qui gère bien les barres latérales. Comme vous pouvez le constater ici, l'expérience de l'ordinateur de bureau comprend une barre latérale assez dense.

  
  

  Portez votre attention sur mobile, cependant, et la barre latérale disparaît complètement. Vous rencontrerez plutôt une expérience extrêmement légère:

  
  

  Au-dessous de chaque article du blog, vous trouverez une liste succincte de liens recommandés par l’auteur. Il existe également un widget Précédent / Suivant qui permet aux lecteurs de passer rapidement au prochain article publié. C’est un excellent moyen de faire en sorte que les lecteurs continuent de naviguer sur le site sans avoir à créer une page Web mobile inutilement longue.

  2. Modal Pop-ups

  Je sais que les pop-ups mobiles ne meurent pas du moins en ce qui concerne Google. Mais les pop-ups intrusives mises à part, la pop-up traditionnelle a-t-elle encore une place sur le mobile? Si nous réfléchissons vraiment aux moyens d'optimiser l'expérience utilisateur, ne serait-il pas logique de supprimer complètement le modal?

  Voici un exemple tiré de Akamai :

  
  

  En parcourant l'une des pages internes du site mobile, cette fenêtre contextuelle est apparue sur mon écran. Au début, je me suis dit: «Oh, cool! Un pop-up avec un graphique et des statistiques. ”Mais ensuite, je l'ai lu et compris qu'il s'agissait d'un pop-up à défilement !

  
  

  Honnêtement, je ne suis pas sûr d’en avoir déjà vu un auparavant, mais je pense que c’est le parfait exemple de la raison pour laquelle les pop-ups mobiles modaux ne sont jamais une bonne idée. En plus de bloquer presque complètement le contenu du site, la fenêtre contextuelle oblige le visiteur à travailler pour afficher l'intégralité du message.

  J'ai rencontré un autre exemple de mauvaise fenêtre contextuelle. Celui-ci se trouve sur le site Web Paul Mitchell :

  
  

  Je trouvais étrange de placer la même promotion dans les images contextuelles et défilantes du héros. Celui-ci, cependant, est assez facile à rejeter puisqu'il est clair en quoi consistent la fenêtre contextuelle et l'image.

  Sur mobile, il est difficile de distinguer:

  
  

  Si je n’avais pas vu la fenêtre contextuelle correspondante sur le bureau, j’aurais probablement pensé que cette page Web comportait une erreur lorsqu’elle a tout d’abord vu la duplication. Il est également utile que la bannière du héros ait maintenant une icône en forme de flèche dans une boîte noire, ce qui peut facilement être confondu avec le «X» qui ferme la fenêtre contextuelle correspondante.

  C'est un choix de conception très étrange et un Je dirais à tout le monde de rester à l'écart. Non seulement la fenêtre contextuelle apparaît instantanément sur la page d'accueil (ce qui est un non-non), mais elle crée une première impression confuse. Ce n'est peut-être pas le modal traditionnel, mais ça a toujours l'air mauvais.

  Le site Web Four Seasons passe à la vitesse supérieure et gère très bien ses fenêtres contextuelles. Voici le widget contextuel de bureau:

  
  

  Cliquez sur la fenêtre contextuelle pour ouvrir une offre contextuelle en plein écran. C'est une bonne idée, car il donne au visiteur un contrôle total sur s'il veut voir la fenêtre contextuelle ou non.

  
  

  La contrepartie des fenêtres pop-up mobiles fait quelque chose de similaire:

  
  

  L'offre contextuelle est bien calée contre l'en-tête, sans jamais empiéter sur l'expérience du site mobile.

  
  

  Même lorsque l'utilisateur clique sur la fenêtre contextuelle, elle ne bloque jamais l'affichage du site Web mobile. Cela ne fait que pousser le contenu plus loin sur la page. Il est simplement conçu, facile à suivre et donne tout le contrôle sur l’utilisateur mobile en termes d’engagement. C’est un excellent choix en matière de conception et j’aimerais voir davantage de concepteurs mobiles utiliser ceux-ci lors de la conception d’éléments contextuels.

  3. Sticky Side Elements

  Je pense qu'une barre de navigation ou une barre inférieure collantes sur un site Web mobile est une idée brillante. Comme nous l’avons déjà vu, les visiteurs sont disposés à faire défiler un site Web. Mais les visiteurs sont plus susceptibles de faire défiler une page s'ils ont un moyen facile d'aller ailleurs – vers une autre page, pour consulter une offre, pour une offre de remise spéciale, etc.

  Cela dit, je ne suis pas un fan d'éléments collants sur le côté des sites Web mobiles. Sur le bureau, ils fonctionnent bien. Il s’agit généralement d’icônes ou de widgets minuscules qui s’accrochent au coin inférieur ou inférieur du site. Ils sont colorés, faciles à reconnaître et offrent aux visiteurs le choix d'interagir lorsqu'ils sont prêts.

  Sur mobile, les éléments collants sont une mauvaise idée.

  Jetons un coup d'œil au Par exemple, le site Web de Sofitel .

  
  

  Comme vous pouvez le constater, un bouton orange “Feedback” est collé à gauche de l’écran. Lorsque vous faites défiler la page, elle reste en place, ce qui permet aux visiteurs de laisser une phrase au développeur en cas de problème.

  Voici comment le même bouton apparaît sur le mobile:

  
  

  Bien que le bouton “Commentaires” ne bloque pas toujours le contenu, il arrive parfois qu'il chevauche une image ou un texte lorsque l'utilisateur la fait défiler. Cela peut sembler un inconvénient mineur, mais cela pourrait facilement inciter un visiteur à se sentir complètement ennuyé ou frustré par un site Web.

  Wreaths Across America est un autre exemple d'élément collant. être dans le chemin. Sur le bureau, le widget de chat en direct bleu est bien placé.

  
  

  Ensuite, déplacez-le sur mobile et le chat en direct couvre en permanence une quantité décente de contenu situé dans le coin inférieur droit.

  
  

  Si vos visiteurs ne participent pas activement au chat en direct ou à d’autres éléments collants sur le mobile (et que vos statistiques devraient vous le dire), ne les laissez pas là. Ou, à tout le moins, présentez un moyen facile de les écarter.

  Un moyen de contourner le problème des chevauchements épineux est la solution choisie par [BuzzFeed .

  Ces dernières années, de nombreux sites Web ont été utilisés icônes de médias sociaux flottants et collants. C'était un choix logique, car vous ne saviez pas combien de temps il faudrait au lecteur pour décider qu'il avait juste à partager votre page Web ou à publier avec ses connexions dans les réseaux sociaux.

  
  

  Comme nous l’avons vu avec les widgets de chat en direct et de commentaires ci-dessus, les éléments qui collent sur le côté de l’écran ne fonctionnent tout simplement pas sur mobile. Au lieu de cela, nous devrions regarder ce que BuzzFeed a fait ici et faire en sorte que ces icônes restent alignées au bas de l'écran.

  Nous savons déjà que la navigation et les barres de fond collantes ne sont pas gênées par le contenu, utilisons donc ces zones clés. de l’appareil mobile pour y placer des éléments collants avec lesquels nous voulons que les gens s’engagent.

  4. Contenu

  Ce n’est pas seulement ces éléments de conception superflus ou ces valeurs aberrantes que vous devriez envisager de supprimer de l’expérience mobile. Je crois qu'il y a des moments où le contenu lui-même n'a pas besoin d'être là.

  Si vous voulez amener les visiteurs au cœur de votre message en seulement quelques rouleaux, vous ne pouvez pas avoir peur de couper du contenu qui ne l'est pas. t 100% nécessaire.

  Je pense que les publicités sont l’un des pires contrevenants. TechRepublic en fournit un exemple particulièrement désagréable, aussi bien pour les ordinateurs de bureau que pour les téléphones mobiles. ]) ( Grand aperçu )
  

  Voici à quoi ressemble le site Web de bureau TechRepublic lors de votre première visite. Cela seul est horrible. Pourquoi utilise-t-on des bannières publicitaires au-dessus de l'en-tête? Et pourquoi celui-ci doit-il être si grand? Les internautes ne devraient-ils pas utiliser le logo et la navigation de TechRepublic?

  J’espérais que lors de la visite du site mobile, la publicité serait disparue. Malheureusement, ce n'était pas le cas.

  
  

  Nous avons ici une annonce Best Buy qui occupe environ un tiers de la page d'accueil mobile de TechRepublic. Bien sûr, une fois qu'un visiteur défile, il disparaîtra. Mais où pensez-vous que les yeux des visiteurs iront en premier? Je suis prêt à parier que certains d'entre eux verront le logo en haut à gauche et se demanderont comment ils se sont retrouvés sur le site Web de Best Buy.

  C'est l'un de ces moments où il est préférable de repenser votre stratégie de monétisation si c'est le cas.

  Voyons maintenant ce qu'il y a de mieux.

  Kohl propose une page de produits plutôt standard pour un site Web de commerce électronique:

  
  

  Toutefois, les affichages de produits disparaissent lorsque vous les affichez sur un téléphone portable:

  
  

  Au lieu d'essayer de leur faire de la place, les différentes vues de produits sont masquées sous un curseur. C'est un bon choix si vous préférez ne pas compromettre la quantité de contenu affiché, en particulier s'il est essentiel à la vente du produit.

  Un autre excellent exemple de sélection et de choix de vos batailles lors de l'affichage de contenu sur mobile provient de The Blonde Abroad.

  Les lecteurs de son blog peuvent choisir un contenu en fonction de la destination globale, comme indiqué sur le site Web:

  
  

  C’est une fonction de recherche très soignée, d’autant plus qu’elle place le contenu dans le contexte d’une carte réelle.

  Plutôt que d’obliger un graphique de ce type à s’adapter au mobile, The Blonde Abroad n’inclut que l’essentiel nécessaire pour effectuer une recherche:

  
  

  Alors que les lecteurs mobiles risquent de manquer du contenu cartographié, cela procure une expérience beaucoup plus simple. Les utilisateurs mobiles ne souhaitent pas avoir à faire défiler l'écran vers la gauche, la droite, le haut ou le bas pour pouvoir rechercher du contenu à partir d'un graphique trop grand. À la base, cette section du site concerne la recherche. Et, sur mobile, cette présentation claire des options de recherche suffit à impressionner les lecteurs et à les inciter à lire davantage.

  En conclusion

  Dans le guide de Stephen King, On Writing il dit quelque chose. dans cette mesure:

  «Créez votre contenu. Puis, examinez-le et supprimez 10% de ce que vous avez créé. ”

  Certes, cela s'applique à l'écriture d'un récit, mais je pense que la même logique s'applique à la conception d'un site Web mobile. En d'autres termes: pourquoi tester la patience de vos visiteurs – ou pire encore – créer une expérience trop lourde d'une expérience leur manquant des parties les plus importantes? Allez-y et traduisez l'idée que vous aviez du paysage de bureau traditionnel en un environnement mobile. Ensuite, examinez-le sur votre mobile et supprimez tous les éléments inutiles de contenu ou d'éléments de conception.

  (ra, yk, il)