290 likes | 393 Views
Interfaces universelles. Interfaces et Scénarisation (COM2571) 5 novembre 2013 Grégory Petit http://lrcm.com.umontreal.ca/greg/COM2571/. La semaine dernière …. Introduction à Omnigraffle Environnement de travail Diagrammes Wireframes. Et donc on fait quoi aujourd’hui?.
E N D
Interfaces universelles Interfaces et Scénarisation (COM2571) 5 novembre 2013 Grégory Petit http://lrcm.com.umontreal.ca/greg/COM2571/
La semaine dernière … • Introduction à Omnigraffle • Environnement de travail • Diagrammes • Wireframes
Et donc on fait quoi aujourd’hui? • Interfaces pour mobiles • Interfaces pour tablettes • Responsive design
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
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
Interfaces pour mobile http://www.webcredible.co.uk/user-friendly-resources/web-usability/mobile-guidelines.shtml
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
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
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
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
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.)
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
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
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
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
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
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.
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
Blocs de contenus • Les blocs de contenus vont se déplacer en fonction de l'appareil. Certains vont même disparaître.
Exemple : Beta de Telus http://www.telus.com/?INTCMP=MobilityTELUSBetaOptIn Bureau
Exemple : Beta de Telus http://www.telus.com/?INTCMP=MobilityTELUSBetaOptIn Tablette Mobile
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