Les doigts gros comme des pouces. La mobilité et l'ergonomie des sites internet éducatifs

La clientèle étudiante est majoritairement branchée et mobile. Si les ordinateurs portables sont populaires, les téléphones intelligents le sont encore plus et servent à accéder aux informations éducatives...

Sur un écran de moins de 9 cm de diagonale, c’est fou ce que les choses paraissent différentes !  Si les possibilité d’agrandissement permettent de voir les détails du contenu, c’est au prix de la perte de la vue d’ensemble et de la plupart des repères. Devant la difficulté de tout afficher, que peut-on faire pour améliorer l’expérience ?

Voici quelques éléments de base à considérer dans la construction de pages web compatibles avec les mini écrans.

L’ergonomie graphique à la rescousse

Des liens explicites et bien séparés les uns des autres.

Un doigt doit pouvoir ne couvrir qu’un seul lien à la fois. Des séries de liens les uns au dessus des autres entraînent des frustrations puisque l’utilisateur aura de la difficulté à les activer sans faire d’erreur à moins d’agrandir énormément.  Chaque lien doit être séparé de ses voisins par suffisamment d’espace, d’images ou de texte.  Mieux, on doit savoir ce qui arrivera si on clique sur un lien : si c’est un document .pdf de 1 meg, on doit l'indiquer sinon on ne se fera pas beaucoup d'amis.

Priorités, importances temporelles, organisation

Dans l’espace réduit de l’écran d’accueil, on doit retrouver les «répartiteurs de priorité» qui amèneront les usagers dans les sections où ils trouveront du premier coup ce qu’ils recherchent. La plupart du contenu détaillé n’est pas présenté au premier niveau. Cela prendra un effort d’organisation et de priorisation du contenu en fonction des habitudes des usagers, qui peuvent changer plus ou moins rapidement.

Par exemple, au début d’une session de cours ou d’une saison, on ne cherchera pas les mêmes informations que durant la période d’examen; le matin, l’après-midi ou le soir, les services recherchés ne seront pas les mêmes, des événements exceptionnels peuvent attirer plus d’attention, etc... Les sites dynamiques affichent ce qui est recherché en priorité.

De l’info, pas du tape-à-l’oeil

Les animations à effet, les textes rhétoriques, les «mots de bienvenue» et la plupart des éléments «administratifs» n’apportent pas grand chose à celui qui ne les recherche pas. Les usagers recherchent de l’information utile, pas une «mise dans l’ambiance»; ils regardent un téléphone portable entre deux activités. Tout ce qui étire le temps d’acquisition de l’information ressemblera à une source de frustration.

Légèreté

Photos, images, animations, applets ou documents prennent du temps à télécharger et coûtent de l’argent à l’utilisateur.  S’il ne choisit pas d’y accéder, on ne gagne rien à lui imposer.  Les sites web «compatibles» sont légers et rapides à afficher. Critère simple, mais dont la mise en application demande une discipline constante.  Flash, fenêtres popup, «embeds», dimensions des images non-spécifiées, tables insérées dans des tables, tous les éléments qui nécessitent des calculs de remplacement en attendant le chargement complet ralentissent le traitement et l'affichage.

Liens avec les autres outils de communication

Un téléphone est un outil de communication et son utilisateur un être social. Pour chaque pièce de contenu, on devrait trouver les liens vers les autres outils et services de communication : Twitter, FB, sites de partage et autres à venir. L’exploitation des outils de communication par le site est une caractéristique qui le fera s’intégrer aux habitudes de l’utilisateur et qui aidera à sa diffusion.

Contenus et contextes

Le principe derrière les sites compatibles «mobiles» est l’attention qui lie les contenus aux contextes de l’utilisateur : le canal d’accès, l’outil utilisé, le moment et l’endroit où il se situe sont tous des éléments à considérer et qu’il est possible de prendre en compte, soit automatiquement par une programmation plus sophistiquée qui affichera les choses différemment selon les différents paramètres, soit par une ergonomie graphique qui aiguillera les utilisateurs vers les sections qui leur sont destinées.

Testez votre site pour voir

Deux outils vous permettront de connaître la compatibilité mobile de votre site et vous détailleront les points à corriger :

• Le W3C Mobile OK Checker
• Mobi Ready

Thot Cursus n'est pas un bon exemple de site compatible pour les mobiles; trop d'information sur la page d'accueil la rend trop lourde; on ne devrait y afficher que les manchettes de la semaine et le lien vers les dossiers et l'outil de recherche.

Ajouter à mes listes de lecture