Interfaces universelles

1. Interfaces universelles Interfaces et Scénarisation (COM2571) 5 novembre 2013 Grégory Petit http://lrcm.com.umontreal.ca/greg/COM2571/

2. La semaine dernière … • Introduction à Omnigraffle • Environnement de travail • Diagrammes • Wireframes

3. Et donc on fait quoi aujourd’hui? • Interfaces pour mobiles • Interfaces pour tablettes • Responsive design

4. Pourquoi? • Beaucoup de choses sont différentes : • Lieu et contexte d'utilisation • Taille et orientation de l'écran • Connexion continue Vs. intermittente • Interaction souris Vs. gestuelle • Bande passante

5. Contexte d’utilisation • Sessions d'utilisation relativement courtes • Utilisation non limitée à un lieu ou à un certain temps • Peu utile pour travailler de manière poussée • Utilisation en groupe  Interaction sociale en changement

6. Interfaces pour mobile http://www.webcredible.co.uk/user-friendly-resources/web-usability/mobile-guidelines.shtml

7. Réduire le contenu • Tout le contenu rentrant sur une interface Bureau ne rentrera pas sur une interface mobile  Réduire la quantité de contenu • Distinguer les contenus prioritaires des contenus secondaires • Secondaires : bannière, liens de dehors de la zone principale (colonne de droite) ... • Site ou app mobile = centré principalement sur la tâche • On veut éviter de lire beaucoup et des temps de chargement trop longs

8. Mise en page

9. Mise en page • Interface mobile = largeur minimale • Si aucune adaptation de la mise en page  Contenu trop petit  Obligation de zoomer (ajoute des étapes)  Une seule colonne adaptée sur toute la largeur du mobile • Propose un défilement vertical plus intuitif sur mobile qu'un défilement horizontal

10. Navigation • Il faut généralement présenter la navigation différemment • Les menus horizontaux ne fonctionnent pas sur une seule colonne • Les menus verticaux occupent toute la colonne • Page d'accueil = ne mettre que la navigation principale et la barre de recherche • On garde le contenu pour les pages • Provoque généralement plus de clics mais facilite la navigation

11. Navigation

12. Navigation

13. Navigation • Donner accès à la navigation principale depuis toutes les pages • Clic dans un endroit de l'entête fixe (ex : burger) • Préférer les boutons aux liens

14. Formulaires • Minimiser la saisie de données • Plus difficile et plus lent d'utiliser un clavier sur mobile que sur une interface bureau • Provoque aussi plus d'erreurs • Désactiver l'autocorrection pour certains champs • Pré-populerles champs lorsque l'utilisateur est connecté • Code NIP plutôt qu'un mot de passe • Empreinte digitale? Reconnaissance faciale? • Activer le clavier adaptatif (courriel, téléphone, etc.)

15. Utiliser les fonctionnalités intégrées • Faire un appel lors d'un clic sur un numéro de téléphone • Voir une adresse sur la carte - Calculer mon itinéraire depuis ma position • Trouver les magasins proches de votre position

16. Orientation • Le mode portrait est le plus utilisé car • C'est le plus intuitif (sauf pour certains jeux et les vidéos) • Il permet d'afficher plus de contenus, surtout avec des entêtes fixes • Si le site ou l'app demande pas mal d'utilisation du clavier, activer le support du mode paysage

17. Interfaces pour tablettes

18. Deux orientations utiles • Le passage du mode portrait au mode paysage peut faire apparaître des fonctionnalités, et vice-versa • Navigation principale, filtres, favoris • Il faut néanmoins "éduquer" les utilisateurs

19. Besoin réel? • Avec les plus grandes résolutions des nouvelles tablettes, est-ce que cela vaut la peine de faire des interfaces spécifiques pour les tablettes? • Les bonnes interfaces bureau s'affichent bien sur les tablettes • Textes et liens peuvent tout de même est trop petits. • Interface bureau légèrement modifiée Vs. Nouvelle interface exclusivement pour tablette

20. Adaptation des interfaces bureau Même si on peut garder l'interface bureau sur une tablette, l'interaction se fait tout de même avec nos doigts. L'interface doit donc être légèrement modifiée : • Vérifier la taille des textes • Transformer les liens principaux en boutons • Augmenter la taille des champs de formulaire • Application des fonctionnalités intégrées

21. Un site? Plusieurs sites? • Si on peut utiliser la version bureau d'un site pour la tablette, pourquoi ne pas faire un site pour le bureau et un pour le mobile? • Il y a des dizaines de modèles de mobiles, et de tablettes. • Il y a aussi plusieurs systèmes d'exploitations et fureteurs sur les tablettes et les mobiles.

22. Responsive design

23. Responsive design? • Un seul site pour mobile, tablette et bureau • Le site reconnait sur quel appareil il est affiché • Contenu et mise en page changent automatiquement en fonction de la largeur et de l'orientation de l'écran • Permet de prendre en compte la majorité des modèles de mobiles et tablettes

24. Blocs de contenus • Les blocs de contenus vont se déplacer en fonction de l'appareil. Certains vont même disparaître.

25. Exemple : Beta de Telus http://www.telus.com/?INTCMP=MobilityTELUSBetaOptIn Bureau

26. Exemple : Beta de Telus http://www.telus.com/?INTCMP=MobilityTELUSBetaOptIn Tablette Mobile

27. Atelier

28. Interfaces mobiles Faites les wireframes d'une version mobile du site de l'UdeM • Faites la page d'accueil, la page Etudiants de l'UdeM et Programmes d'études (si vous avez le temps) • Repensez la navigation • Pensez à quels contenus garder sur ces pages