Post on 04-Apr-2015
Interfaces universelles
Interfaces et Scénarisation (COM2571)5 novembre 2013
Grégory Petithttp://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’utilisationSessions 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 contenuTout 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
Mise en pageInterface 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
NavigationIl 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
Navigation
NavigationDonner accès à la
navigation principale depuis toutes les pagesClic dans un endroit
de l'entête fixe (ex : burger)
Préférer les boutons aux liens
FormulairesMinimiser 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é-populer les 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éesFaire 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
OrientationLe 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
Interfaces pour tablettes
Deux orientations utilesLe passage du mode portrait au mode
paysage peut faire apparaître des fonctionnalités, et vice-versaNavigation principale, filtres, favorisIl 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
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 contenusLes blocs de contenus vont se déplacer en
fonction de l'appareil. Certains vont même disparaître.
Exemple : Beta de Telushttp://www.telus.com/?INTCMP=MobilityTELUSBetaOptIn
Bureau
Exemple : Beta de Telushttp://www.telus.com/?INTCMP=MobilityTELUSBetaOptIn
Tablette Mobile
Atelier
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
Des questions???
Merci de votre attention!
A la semaine prochaine!
gregory.petit@polymtl.cahttp://lrcm.com.umontreal.ca/greg/COM2571/