Webdesign sites web et mobiles-strategies et enjeux-ergonomie

3 301 vues

Publié le

Solutions et alternatives face aux problématiques des tailles d'écran (responsive design, tailles fluide, site dédié aux mobiles ou application mobile). Analyses et ajustements des interfaces, navigation et outils pour les mobiles.

Publié dans : Design
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
3 301
Sur SlideShare
0
Issues des intégrations
0
Intégrations
18
Actions
Partages
0
Téléchargements
63
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Webdesign sites web et mobiles-strategies et enjeux-ergonomie

  1. 1. Sites Web et Mobiles Stratégies et enjeux de l'ergonomie Webdesign Olivier Dommange
  2. 2. Olivier Dommange L'ergonomie du Web
  3. 3. Olivier Dommange Supports – tailles des écrans Variété innombrable de tailles d' écrans
  4. 4. Olivier Dommange Supports – résolution La concentration de pixels par pouces est élevée et relative
  5. 5. Olivier Dommange Supports – taille d'écran La tailles des écrans
  6. 6. Olivier Dommange source : http://www.businessinsider.com/mobile-will-eclipse-desktop-by-2014-2012-6 source : http://www.cruxcollaborative.com/the-mobile-web-an-illustrated-look Supports – mobile vs desktop L'avenir est au mobile ?
  7. 7. Olivier Dommange Les solutions et stratégies
  8. 8. Olivier Dommange Supports – solutions 1. Ne rien faire... Les supports mobiles et navigateurs disposent d'outils d'agrandissement du contenu et de la page
  9. 9. Olivier Dommange Supports – solutions 2. Interface fluide Largeur des interfaces définies en pourcentage
  10. 10. Olivier Dommange Supports – solutions 3. Application Web : reponsive design Styles (CSS), outils (JS) et contenus adaptés pour différentes largeurs de support
  11. 11. Olivier Dommange Supports – solutions 4. Site Web dédié Redirection automatique vers un site Web dédié aux supports mobiles Interface, outils et contenus créés sur mesure
  12. 12. Olivier Dommange Supports – solutions 5. Application native En interaction avec les périphériques et outils du support mobile. (géolocalisation, contacts, appareil photo,...)
  13. 13. Olivier Dommange https://twitter.c http://mobile.twitter.com om https://twitter.com Supports Exemple : Twitter
  14. 14. Olivier Dommange http://w3.org http://w3.org http://w3.org Supports Exemple : W3C
  15. 15. Olivier Dommange http://www.apple.com http://www.apple.com http://www.apple.com http://www.apple.com Supports Exemple : Apple
  16. 16. Olivier Dommange Responsive design Media queries
  17. 17. Olivier Dommange Responsive design Egalement appelé « Media queries ». Modifie le le style (CSS) selon deux critères Média : définit le support <link rel="stylesheet" type="text/css" href="css/s960.css" media="screen and (min-width:740px) and (max-width:960px)" /> Fonction : fixe les limites d'application
  18. 18. Olivier Dommange Responsive design Médias all screen handheld print aural / speech braille embossed projection tty tv Tous (par défaut) Ecrans Téléphones mobiles Impression Vocales Plages braille Imprimante braille Projecteurs Terminal (caractères mono espace) Télévision
  19. 19. Olivier Dommange Responsive design Profondeur de la couleur (bits/pixel) Table de couleurs indexées Ratio de la taille (ex. 16/9) Ratio de la zone d'affichage du périphérique Hauteur en pixel du périphérique Largeur en pixels du périphérique Affichage (bitmap ou grid – ex. lcd) Hauteur en pixel de la zone d'affichage Profondeur des niveaux de gris (bits/pixel) Orientation du périphérique (portait ou landscape) Résolution d'affichage du périphérique Balayage des téléviseurs (progressive ou interlace) Largeur en pixels de la zone d'affichage color color-index aspect-ratio device-aspect-ratio device-height device-width grid height monochrome orientation resolution scan width Fonctions min/max min/max min/max min/max min/max min/max min/max min/max min/max min/max
  20. 20. Olivier Dommange http://screensiz.es/phone Responsive design Viewport : La surface de la fenêtre du navigateur
  21. 21. Olivier Dommange Responsive design Les points de rupture : quelques repères 1024px demeure la référence minimum de la largeur des écrans de bureau (~9%, sept. 2014)
  22. 22. Olivier Dommange Responsive design Viewport fixé initial-scale=1.0 : Elimine la possibilité d’agrandir manuellement l’interface. Impose une proportion de 100% de la taille des contenus. <meta name="viewport" content="initial-scale=1.0, width=device-width" /> width=device-width : Ajuste la taille des contenus (images) à la taille réelle de l’écran.
  23. 23. Olivier Dommange Responsive design Impression de la page Faire disparaître les outils de navigations. Modifier la taille des caractères en pt. Modifier les dimensions en mm, cm ou in. Indiquer les coupures (sauts) de page. <link rel="stylesheet" type="text/css" href="css/print.css" media="print" />
  24. 24. Olivier Dommange Mobile Interface & outils
  25. 25. Olivier Dommange Mobile Les supports mobiles nécessitent une adaptation des interfaces et des outils de navigation. Facteurs : Point d’impact large Navigation simplifiée Mobilité
  26. 26. Olivier Dommange Mobile - navigation Les menus sont rétractables et invisibles. Accessibles en un «touch clic». Priorité au contenu.
  27. 27. Olivier Dommange Mobile - contenu Il n’y a pas d’état de survol (:hover). Retour aux standards du Web (bleu et souligné).
  28. 28. Olivier Dommange Mobile - contenu Les accordéons facilitent un aperçu groupé du contenu.
  29. 29. Olivier Dommange Mobile - contenu Ajuster les textes et les espaces afin de faciliter la lecture.
  30. 30. Olivier Dommange Mobile – Les boutons Ajuster les boutons afin de faciliter leur accès. Espace cliquables Minimum—17 pt / 6 mm Préférable—23 pt / 8 mm Maximum—43 pt / 15 mm
  31. 31. Olivier Dommange Mobile – Les champs des formulaires Ajuster les textes et les espaces afin de faciliter la lecture. Espace cliquables Minimum—17 pt / 6 mm Préférable—23 pt / 8 mm Maximum—43 pt / 15 mm Espace entre les éléments afin d'éviter les interférences Minimum—23 pt / 8 mm Préférable—28 pt / 10 mm
  32. 32. Olivier Dommange Mobile – Les outils des formulaires Privilégier des outils proposant le «touch clic» à l’utilisation du clavier. L’attribut type notament enrichi en HTML 5 permet de créer des outils de formulaires pratiques pour les supports mobiles. Leur aspect sera cependant celui défini par le navigateur. Le Javascript sera cependant nécessaire pour des outils personnalisés.
  33. 33. Olivier Dommange UI Design Interface utilisateur
  34. 34. Olivier Dommange UI Design Le design de l’interface utilisateur (UI) fait parti de l’expérience utilisateur et consiste à augmenter la valeur de l’interface. Aspects Valeur Ce qui concerne... Composition graphique Contenus Outils Esthétisme Accessibilité Utilisabilité Organisation des éléments dans la page Mise en évidence de contenus Positionnement stratégique d’éléments Terminologie cohérente Textes descriptifs et exemples Facilite l’utilisation des fonctionnalités et objets Propose des alternatives d’utilisation Intègre des ressources tiers tels que les réseaux sociaux
  35. 35. Olivier Dommange UI Design : étude de cas Le formulaire d’enregistrement (login) Doit comprendre comment donner des informations Doit être aidant, aisé et intuitif.
  36. 36. Olivier Dommange UI Design : étude de cas Le formulaire d’enregistrement (login) 1. La composition graphique
  37. 37. Olivier Dommange UI Design : étude de cas Le formulaire d’enregistrement (login) 2. Le contenu
  38. 38. Olivier Dommange UI Design : étude de cas Le formulaire d’enregistrement (login) 3. Les outils
  39. 39. Olivier Dommange UI Design : étude de cas Le formulaire d’enregistrement (login) D'autres exemples
  40. 40. Olivier Dommange UI Design : étude de cas Le formulaire d’enregistrement (login) D'autres exemples
  41. 41. Olivier Dommange UI Design : étude de cas Le formulaire d’enregistrement (login) D'autres exemples
  42. 42. Olivier Dommange http://www.linkedin.com/in/olivierdommange

×