interfaces et scénarisation (com2571) 5 novembre 2013 grégory petit

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/