Interfaces et Scénarisation (COM2571) 5 novembre 2013 Grégory Petit

Présentation au sujet: "Interfaces et Scénarisation (COM2571) 5 novembre 2013 Grégory Petit"— Transcription de la présentation:

1 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 aujourdhui? 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 dutilisation 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 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

13 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é-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.)

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 TabletteMobile

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

29 Des questions??? Merci de votre attention! A la semaine prochaine! gregory.petit@polymtl.ca http://lrcm.com.umontreal.ca/greg/COM2571/