1 / 29

Interfaces universelles

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?.

xanthe
Download Presentation

Interfaces universelles

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

More Related