Mobile Web UX Design : Quelques directives simples

Si vous faites du design pour mobile, il est probable que vous devrez tenir compte de la façon dont l’appareil est utilisé et des spécificités de l’appareil lui-même. Il y a quelques principes généraux qui peuvent vous aider à commencer à créer pour le mobile, mais n’oubliez pas que ceux-ci ne remplacent pas le besoin de recherche de l’utilisateur. Ce sont des directives, pas des règles strictes.

Il y a beaucoup de choses à considérer lors du design pour mobile. En plus des considérations UX standard, il y aura également des considérations de design spécifiques aux mobiles. Par exemple, allez-vous intégrer votre offre mobile à votre offre actuelle ? Utiliserez-vous un design réactif ou un design adaptatif ?

Une grande partie de cela se résumera au contexte, c’est-à-dire au contexte dans lequel les utilisateurs utiliseront leurs appareils mobiles pour faire toutes les tâches que nous avons en tête. Si vos utilisateurs accèdent au Web mobile depuis leur bureau, c’est génial, mais ce n’est pas le cas de nombreux utilisateurs. Ils essaieront de les utiliser au supermarché, dans leurs déplacements quotidiens, sur la promenade jusqu’au café, etc.

Si votre entreprise n’est pas adaptée aux mobiles, votre entreprise est morte.

— Jonathan Stark, auteur best-seller sur la technologie mobile

L’espace et l’occasion (c.-à-d., Le contexte) devraient être au premier plan dans votre esprit. Comme l’ère a libéré les gens de devoir s’ancrer aux bureaux pour se mettre en ligne, les endroits où ils interagissent avec leurs appareils sont virtuellement illimités.

Cela signifie que vous allez devoir réfléchir à la manière de réduire les distractions et de faciliter la tâche de l’utilisateur.

Josh Clark, l’auteur de Tapworthy – Designing Great iPhone Apps, propose trois catégories d’accès web mobile :

1. Microtasking : lorsque les utilisateurs interagissent avec leurs appareils pour des périodes d’activité brèves mais frénétiques
2. Local : Quand les utilisateurs veulent savoir ce qui se passe autour d’eux
3. Bored : Quand les utilisateurs n’ont rien de mieux à faire et cherchent à se divertir ou autrement distraits

Considérations de design de base pour le web mobile

Petits écrans

Vous n’avez pas autant d’écran pour les appareils mobiles que pour les PC et les ordinateurs portables. Cela signifie que normalement, vous allez concevoir pour plusieurs tailles d’écran. Vous devez prendre une décision rapide quant à l’utilisation du design responsive (où l’appareil gère les changements dans l’affichage) ou du design adaptatif (où vos serveurs gèrent les changements).

Vous voulez vous concentrer sur une approche « mobile-first », ce qui signifie créer pour les plus petites plateformes mobiles et augmenter la complexité à partir de là.

Un bon processus à suivre serait :

• Regroupez les types de périphériques en fonction de tailles d’écran similaires, et essayez de limiter ce nombre à un nombre de groupes gérable.
• Définissez des règles de contenu et concevez des règles d’adaptation qui vous permettent d’afficher correctement les choses sur chaque groupe de périphériques.
• Essayez d’adhérer le plus possible aux normes web lors de l’implémentation de mises en page flexibles.

N’oubliez pas qu’il existe de nombreux types de navigateurs disponibles pour le web mobile et Internet. Vous voulez vous assurer que vous en considérez autant que possible.

Gardez la navigation simple

Les claviers et les écrans tactiles ne permettent pas une navigation précise comme le font les souris, alors essayez de :

• Prioriser la navigation en fonction de la façon dont les utilisateurs travaillent avec les fonctionnalités — les plus populaires vont en haut
• Minimiser les niveaux de navigation impliqués
• Assurez-vous que l’étiquetage est clair et concis pour la navigation
• Offrez un accès raccourci aux différentes fonctionnalités
• N’oubliez pas d’offrir un espace de 30×30 pixels pour les points de contact à l’écran tactile
• Assurez-vous que les liens sont visuellement distincts, et indiquez clairement quand ils ont été activés, également
• Facilitez le passage entre le site mobile et le site complet (si vous choisissez d’implémenter des versions séparées)

Gardez le contenu à un minimum

Ne saturez pas vos utilisateurs : respectez l’espace réduit disponible sur l’écran. Gardez le contenu au minimum réservez le traitement deluxe pour la plateforme de bureau (tout en faisant attention à ne pas donner l’impression à l’utilisateur mobile d’être à court si la version de bureau semble très supérieure).

Assurez-vous que le contenu est universellement pris en charge sur tous les appareils ou évitez-le. Pensez Flash, puis ne l’utilisez pas, par exemple.

Faites des descriptions de pages courtes et précises — pour les signets pertinents.

Réduisez les saisies requises des utilisateurs

Moins les utilisateurs doivent manipuler leurs téléphones, plus ils apprécieront l’utilisation de votre offre web mobile.

Pensez à :

• Garder les URL courtes
• Proposer des mécanismes de saisie alternatifs (vidéo, voix, etc.)
• Minimiser les entrées dans les formulaires (vous pouvez toujours demander plus de données lorsque l’utilisateur se connecte au desktop.)
• Autoriser la connexion permanente (la plupart des smartphones sont protégés par mot de passe ou par empreinte digitale — les risques de rester connecté sont moins dangereux que sur le desktop.)
• Garder le défilement au minimum et ne permettre que le défilement dans une direction

Rappelez-vous que les connexions mobiles ne sont pas stables

Les connexions mobiles peuvent être une douleur colossale dans le cul dans les zones avec un service inégal. Ne rendez pas les choses difficiles pour vos utilisateurs. Comme le montre la carte mondiale de pénétration de l’Internet haut débit mobile ci-dessous, toutes les régions du monde ne disposent pas de connexions mobiles facilement accessibles.

Essayez de :

• Conserver les données pour qu’elles ne soient pas perdues lors d’une interruption de connexion
• Réduire la taille de la page pour un chargement rapide
• Tuer des réseaux publicitaires, etc. sur des sites mobiles qui consomment d’énormes quantités de bande passante et de données
• Garder les images au minimum et réduire la taille de ces images
• Réduire le nombre d’images incorporées au minimum (accélérer les temps de chargement)

Expériences intégrées continues

Lorsque les utilisateurs se déplacent entre le mobile et le bureau, ils vont s’attendre à des expériences similaires.

Pensez à :

• Maintenir la continuité. S’ils se connectent sur votre boutique en ligne sur mobile, ils devraient être en mesure de suivre les commandes et faire des achats comme ils le feraient sur le desktop.
• Maintenir la cohérence. Offrez la possibilité de basculer entre les offres mobiles et de desktop à volonté.
• Maintenir la marque. L’apparence de chaque version devrait être similaire. Toute déviation entre le logo et un tel logo peut avoir des répercussions désastreuses en raison d’une perte de confiance.

Ce qu’il faut retenir

Le mobile est différent de l’environnement desktop traditionnel. De plus, bien que des considérations standard d’UX et d’utilisabilité soient nécessaires dans un contexte mobile, l’environnement mobile exige également des considérations de design qui lui sont propres. Cela implique souvent un équilibrage lorsque vous essayez de condenser les fonctionnalités requises à partir de la version de bureau tout en réduisant les demandes de données, et ce pendant tout le temps.

Veiller à maintenir la présence de l’organisation grâce à une présentation crédible afin de gagner et de conserver la confiance des utilisateurs. Faites-le bien, cependant, et vous ferez un pas de plus vers des designs percutants qui peuvent attirer des utilisateurs n’importe où, n’importe quand.

Quand nous voyons le prochain milliard d’utilisateurs de smartphones à l’horizon, nous savons que le mobile est la super chose maintenant. Vous ne pouvez pas prendre de risque en ce qui concerne le design mobile — la bonne chose est que vous ne devez pas… vous inscrire à notre cours « Mobile User Experience (UX) Design » maintenant !