Conception de sites Web mobiles 10 conseils pour améliorer la convivialité

La navigation sur le Web mobile devrait devenir la prochaine plate-forme Internet majeure. Il est maintenant facile de naviguer sur Internet de presque partout en utilisant des appareils mobiles qui tiennent dans une main grâce à la technologie. Étant donné la brièveté de la convivialité dans la conception de sites Web mobiles, il est difficile de naviguer à travers différents sites Web mobiles populaires. La conception pour les appareils mobiles doit être plus simple que son site Web standard et davantage axée sur les tâches, car les utilisateurs recherchent quelque chose de spécifique et d'urgence..

Vous devez prendre en compte l'utilisation optimale du minimum d'espace disponible pour vos contenus principaux et rester intéressant pour les utilisateurs mobiles. Évitez les grandes images et les animations flash, car cela ralentirait votre site. N'oubliez pas que la fonctionnalité est plus importante que le style pour les sites Web mobiles. Si votre site Web n'est pas codé et conçu correctement, il pourrait sembler meilleur sur un téléphone, pire sur un autre ou pire, ne pas s'afficher du tout. Tester, valider et vérifier s'il est compatible avec tous les appareils mobiles.

Pour vous aider à créer un site Web accessible non seulement sur des ordinateurs de bureau ou portables, mais également sur des appareils mobiles, voici quelques éléments à prendre en compte dans la conception de sites Web mobiles avec des exemples d'images, ainsi que le lien direct vers la version du site Web mobile..

1. Décidez de la résolution de l'écran

Le monde mobile contient une riche variation de considérations de conception, allant de différentes tailles d'écran et résolution à une variété de formes. Essayez de trouver un équilibre entre une largeur d'écran suffisante et la taille de l'audience. Découvrez les spécifications des appareils mobiles actuels et utilisez votre meilleur jugement. Ce qui est difficile pour les développeurs mobiles, c'est de trouver le moyen de s’afficher correctement sur une gamme de tailles d’écran sans avoir à recréer de pages pour différentes plates-formes..

Voici une liste des résolutions Web populaires sur les appareils mobiles à partir de février 2011 présentées par Uxbooth.com avec leur article publié, Considérations pour la conception Web mobile (partie 2): Dimensions, par David Leggett. L'auteur explique quelques points sur les dimensions d'affichage et les solutions pour la mise en page.

2. Divisez les pages Web en petites portions

Les longues sections de texte peuvent être difficiles à lire. Il est donc difficile de les faire défiler sur plusieurs pages. Débarrassez-vous du contenu de faible priorité. S'en tenir à une seule colonne de texte qui enveloppe afin qu'il n'y ait pas de défilement horizontal.

Pour l'exemple ci-dessous, la version du site Web mobile de CBS News ne montre que la section des nouvelles principales et divise les articles en petites parties. Alors que Treehugger se présente avec ses articles récents et ses derniers tweets avec certaines des fonctionnalités du site complet. Sur les deux sites, l'utilisateur clique sur un lien textuel pour afficher le reste de l'article..

CBS News

Treehugger

3. Simplifier la conception

La simplicité équivaut à la convivialité. Laissez-les se déplacer sur le site sans aucune difficulté. Évitez d'inclure des tableaux, des cadres et d'autres formats. Si vous utilisez le remplissage, n'oubliez pas de le garder à un minimum absolu bien inférieur à celui que vous utiliseriez pour une page Web normale. Comparativement aux ordinateurs de bureau, plus vous cliquez sur les liens des sites Web mobiles, plus vous attendez à cause du temps de chargement. Avec cela, vous devez dépouiller et simplifier votre site Web avec un équilibre entre contenu et navigation.

Pour notre exemple, le site Web de la version mobile de Best Buy ne répertorie que les catégories de produits les plus essentielles réduisant le niveau de hiérarchie du contenu. Alors que la page d'accueil de YouTube pour mobile n’affiche que les quatre dernières vidéos phares.

Meilleur achat

Youtube

4. Option pour voir le site complet

Fournissez un lien permettant à vos visiteurs mobiles de revenir à votre site Web complet pour permettre à l'utilisateur de rechercher et d'afficher les autres contenus et fonctionnalités accessibles uniquement à la version de bureau du site. Vos téléspectateurs vont sûrement faire beaucoup de défilement vertical, alors aidez-les avec les liens «Retour en haut» pour qu'ils puissent aller au haut de la page..

Par exemple, Ars Technica a son bouton de lien vers le site Web standard placé dans l’en-tête. Alors que les Shangri-La ont leur lien de site Web complet placé sur le pied de page.

Ars Technica

Shangri-La

5. Emplacement de la navigation

Apprenez à connaître votre public et soyez conscient de ce qu'il recherche. Découvrez comment ils voudront naviguer sur votre site. Positionnez votre menu de navigation sous le contenu si les utilisateurs de votre mobile ciblés souhaitent modifier rapidement le contenu. Le contenu et le titre doivent d'abord être visibles pour ne pas gêner la visualisation du contenu de la page. Pour les utilisateurs qui souhaitent naviguer immédiatement dans une catégorie particulière, placez la navigation en haut de la page. Vous trouverez ci-dessous divers exemples de positionnement de navigation utilisés dans la conception de sites Web mobiles..

D & G

Politico

Horoscope journalier

6. Utilisez des liens de texte

Votre site Web principal peut utiliser des menus volants, des survols ou d’autres gadgets sophistiqués, mais ce n’est probablement pas le cas pour les navigateurs mobiles. Sachez que les éléments de page dynamiques et les liens graphiques consomment des ressources, alors optez pour des liens de texte bien étiquetés..

Une liste à part

Reddit

7. Faites une distinction entre le lien sélectionné

Déplacer le curseur vers le bas fait défiler la page et met en surbrillance les liens en même temps. Il est donc important d'indiquer clairement à l'utilisateur quel élément est actif. Cela peut être fait en changeant la couleur de la police et de l’arrière-plan des liens et des boutons ou en ajoutant simplement des renforts autour des liens pour agrandir la zone cliquable d’environ 44px sur 44px. Geek Squad et Diesel ont utilisé des polices de grande taille pour le texte cliquable.

Geek Squad

Diesel

8. Liens d'équilibre

Chaque téléchargement de page consomme du temps et des ressources système, ces dernières étant rares, essayez donc de ne pas forcer le visiteur du site à consulter une multitude de pages pour pouvoir accéder aux informations recherchées. Trouvez un équilibre entre le nombre de liens sur chaque page et la profondeur du site..

Flickr

Gazouillement

9. Réduire la saisie de texte de l'utilisateur

Il est difficile de saisir du texte dans les versions mobiles de sites Web. Remplacez par des boutons radio ou une liste afin qu'ils puissent choisir ce dont ils ont besoin facilement. N'oubliez pas que les utilisateurs de mobiles n'ont pas accès au clavier et à la souris classiques. Plus l'URL est courte, mieux c'est parce qu'il est monotone de taper des URL longues.

Pour notre exemple ci-dessous, Fedex a utilisé une liste de contrôle et des menus déroulants. Alors que Tumblr vous a fait choisir votre langue en utilisant le menu déroulant.

Fedex

Tumblr

10. Pas de pops ou rafraîchit

Les navigateurs mobiles ne prennent normalement pas en charge les fenêtres contextuelles. Et s'ils le faisaient, ils auraient un espace très étroit pour entrer. Évitez de les utiliser pour éviter des résultats imprévisibles. De plus, évitez de rafraîchir périodiquement les pages pour éviter de remplir la mémoire limitée de l'appareil. Laisser l'utilisateur actualiser le contenu.

En un mot

Faites preuve de créativité et appliquez votre conception Web mobile d'une nouvelle manière. Rendez votre contenu suffisamment attrayant et utilisable. Donnez à vos utilisateurs ce qu'ils veulent, quand ils le veulent. Les utilisateurs ne veulent pas creuser plus profondément dans le site simplement pour trouver ce qu'ils recherchent sur le Web mobile.

Avez-vous des sites mobiles préférés qui vous ont vraiment inspiré? Pouvez-vous partager certains de vos conseils de conception de sites Web mobiles? Laissez nous savoir!

Lectures complémentaires

1. Site Web adaptatif (alistapart.com)
2. Rendez votre site mobile convivial (thinkvitamin.com)
3. W3C mobileOK Checker (w3.org)
4. iPhone simulateur