interfaces universelles n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Interfaces universelles PowerPoint Presentation
Download Presentation
Interfaces universelles

Loading in 2 Seconds...

play fullscreen
1 / 29

Interfaces universelles - PowerPoint PPT Presentation


  • 83 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Interfaces universelles' - xanthe


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
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
La semaine dernière …
  • Introduction à Omnigraffle
  • Environnement de travail
  • Diagrammes
  • Wireframes
et donc on fait quoi aujourd hui
Et donc on fait quoi aujourd’hui?
  • Interfaces pour mobiles
  • Interfaces pour tablettes
  • Responsive design
pourquoi
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 utilisation
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

interfaces pour mobile
Interfaces pour mobile

http://www.webcredible.co.uk/user-friendly-resources/web-usability/mobile-guidelines.shtml

r duire le contenu
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
mise en page1
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
navigation
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
navigation3
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
formulaires
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.)
utiliser les fonctionnalit s int gr es
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
orientation
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
deux orientations utiles
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
besoin r el
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
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
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 design1
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 contenus
Blocs de contenus
  • Les blocs de contenus vont se déplacer en fonction de l'appareil. Certains vont même disparaître.
exemple beta de telus
Exemple : Beta de Telus

http://www.telus.com/?INTCMP=MobilityTELUSBetaOptIn

Bureau

exemple beta de telus1
Exemple : Beta de Telus

http://www.telus.com/?INTCMP=MobilityTELUSBetaOptIn

Tablette

Mobile

interfaces mobiles
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