Download - Interfaces universelles
![Page 1: Interfaces universelles](https://reader036.vdocuments.us/reader036/viewer/2022062520/56816445550346895dd60add/html5/thumbnails/1.jpg)
Interfaces universelles
Interfaces et Scénarisation (COM2571)5 novembre 2013
Grégory Petithttp://lrcm.com.umontreal.ca/greg/COM2571/
![Page 2: Interfaces universelles](https://reader036.vdocuments.us/reader036/viewer/2022062520/56816445550346895dd60add/html5/thumbnails/2.jpg)
La semaine dernière …Introduction à Omnigraffle
Environnement de travail
Diagrammes
Wireframes
![Page 3: Interfaces universelles](https://reader036.vdocuments.us/reader036/viewer/2022062520/56816445550346895dd60add/html5/thumbnails/3.jpg)
Et donc on fait quoi aujourd’hui?Interfaces pour mobiles
Interfaces pour tablettes
Responsive design
![Page 4: Interfaces universelles](https://reader036.vdocuments.us/reader036/viewer/2022062520/56816445550346895dd60add/html5/thumbnails/4.jpg)
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
![Page 5: Interfaces universelles](https://reader036.vdocuments.us/reader036/viewer/2022062520/56816445550346895dd60add/html5/thumbnails/5.jpg)
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
![Page 6: Interfaces universelles](https://reader036.vdocuments.us/reader036/viewer/2022062520/56816445550346895dd60add/html5/thumbnails/6.jpg)
Interfaces pour mobile
http://www.webcredible.co.uk/user-friendly-resources/web-usability/mobile-guidelines.shtml
![Page 7: Interfaces universelles](https://reader036.vdocuments.us/reader036/viewer/2022062520/56816445550346895dd60add/html5/thumbnails/7.jpg)
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
![Page 8: Interfaces universelles](https://reader036.vdocuments.us/reader036/viewer/2022062520/56816445550346895dd60add/html5/thumbnails/8.jpg)
Mise en page
![Page 9: Interfaces universelles](https://reader036.vdocuments.us/reader036/viewer/2022062520/56816445550346895dd60add/html5/thumbnails/9.jpg)
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
![Page 10: Interfaces universelles](https://reader036.vdocuments.us/reader036/viewer/2022062520/56816445550346895dd60add/html5/thumbnails/10.jpg)
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
![Page 11: Interfaces universelles](https://reader036.vdocuments.us/reader036/viewer/2022062520/56816445550346895dd60add/html5/thumbnails/11.jpg)
Navigation
![Page 12: Interfaces universelles](https://reader036.vdocuments.us/reader036/viewer/2022062520/56816445550346895dd60add/html5/thumbnails/12.jpg)
Navigation
![Page 13: Interfaces universelles](https://reader036.vdocuments.us/reader036/viewer/2022062520/56816445550346895dd60add/html5/thumbnails/13.jpg)
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
![Page 14: Interfaces universelles](https://reader036.vdocuments.us/reader036/viewer/2022062520/56816445550346895dd60add/html5/thumbnails/14.jpg)
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.)
![Page 15: Interfaces universelles](https://reader036.vdocuments.us/reader036/viewer/2022062520/56816445550346895dd60add/html5/thumbnails/15.jpg)
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
![Page 16: Interfaces universelles](https://reader036.vdocuments.us/reader036/viewer/2022062520/56816445550346895dd60add/html5/thumbnails/16.jpg)
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
![Page 17: Interfaces universelles](https://reader036.vdocuments.us/reader036/viewer/2022062520/56816445550346895dd60add/html5/thumbnails/17.jpg)
Interfaces pour tablettes
![Page 18: Interfaces universelles](https://reader036.vdocuments.us/reader036/viewer/2022062520/56816445550346895dd60add/html5/thumbnails/18.jpg)
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
![Page 19: Interfaces universelles](https://reader036.vdocuments.us/reader036/viewer/2022062520/56816445550346895dd60add/html5/thumbnails/19.jpg)
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
![Page 20: Interfaces universelles](https://reader036.vdocuments.us/reader036/viewer/2022062520/56816445550346895dd60add/html5/thumbnails/20.jpg)
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
![Page 21: Interfaces universelles](https://reader036.vdocuments.us/reader036/viewer/2022062520/56816445550346895dd60add/html5/thumbnails/21.jpg)
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.
![Page 22: Interfaces universelles](https://reader036.vdocuments.us/reader036/viewer/2022062520/56816445550346895dd60add/html5/thumbnails/22.jpg)
Responsive design
![Page 23: Interfaces universelles](https://reader036.vdocuments.us/reader036/viewer/2022062520/56816445550346895dd60add/html5/thumbnails/23.jpg)
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
![Page 24: Interfaces universelles](https://reader036.vdocuments.us/reader036/viewer/2022062520/56816445550346895dd60add/html5/thumbnails/24.jpg)
Blocs de contenusLes blocs de contenus vont se déplacer en
fonction de l'appareil. Certains vont même disparaître.
![Page 25: Interfaces universelles](https://reader036.vdocuments.us/reader036/viewer/2022062520/56816445550346895dd60add/html5/thumbnails/25.jpg)
Exemple : Beta de Telushttp://www.telus.com/?INTCMP=MobilityTELUSBetaOptIn
Bureau
![Page 26: Interfaces universelles](https://reader036.vdocuments.us/reader036/viewer/2022062520/56816445550346895dd60add/html5/thumbnails/26.jpg)
Exemple : Beta de Telushttp://www.telus.com/?INTCMP=MobilityTELUSBetaOptIn
Tablette Mobile
![Page 27: Interfaces universelles](https://reader036.vdocuments.us/reader036/viewer/2022062520/56816445550346895dd60add/html5/thumbnails/27.jpg)
Atelier
![Page 28: Interfaces universelles](https://reader036.vdocuments.us/reader036/viewer/2022062520/56816445550346895dd60add/html5/thumbnails/28.jpg)
Interfaces mobilesFaites 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
![Page 29: Interfaces universelles](https://reader036.vdocuments.us/reader036/viewer/2022062520/56816445550346895dd60add/html5/thumbnails/29.jpg)
Des questions???
Merci de votre attention!
A la semaine prochaine!
[email protected]://lrcm.com.umontreal.ca/greg/COM2571/