Sites Web et Mobiles 
Stratégies et enjeux de l'ergonomie 
Webdesign 
Olivier Dommange
Olivier Dommange 
L'ergonomie 
du Web
Olivier Dommange 
Supports – tailles des écrans 
Variété innombrable de tailles d' écrans
Olivier Dommange 
Supports – résolution 
La concentration de pixels par pouces est élevée et relative
Olivier Dommange 
Supports – taille d'écran 
La tailles des écrans
Olivier Dommange 
source : http://www.businessinsider.com/mobile-will-eclipse-desktop-by-2014-2012-6 
source : http://www....
Olivier Dommange 
Les solutions 
et stratégies
Olivier Dommange 
Supports – solutions 
1. Ne rien faire... 
Les supports mobiles et navigateurs disposent d'outils d'agra...
Olivier Dommange 
Supports – solutions 
2. Interface fluide 
Largeur des interfaces définies en pourcentage
Olivier Dommange 
Supports – solutions 
3. Application Web : reponsive design 
Styles (CSS), outils (JS) et contenus adapt...
Olivier Dommange 
Supports – solutions 
4. Site Web dédié 
Redirection automatique vers un site Web dédié aux supports mob...
Olivier Dommange 
Supports – solutions 
5. Application native 
En interaction avec les périphériques et outils du support ...
Olivier Dommange 
https://twitter.c http://mobile.twitter.com om https://twitter.com 
Supports 
Exemple : Twitter
Olivier Dommange 
http://w3.org 
http://w3.org http://w3.org 
Supports 
Exemple : W3C
Olivier Dommange 
http://www.apple.com http://www.apple.com 
http://www.apple.com http://www.apple.com 
Supports 
Exemple ...
Olivier Dommange 
Responsive design 
Media queries
Olivier Dommange 
Responsive design 
Egalement appelé « Media queries ». Modifie le le style (CSS) selon deux critères 
Mé...
Olivier Dommange 
Responsive design 
Médias 
all 
screen 
handheld 
print 
aural / speech 
braille 
embossed 
projection 
...
Olivier Dommange 
Responsive design 
Profondeur de la couleur (bits/pixel) 
Table de couleurs indexées 
Ratio de la taille...
Olivier Dommange 
http://screensiz.es/phone 
Responsive design 
Viewport : La surface de la fenêtre du navigateur
Olivier Dommange 
Responsive design 
Les points de rupture : quelques repères 
1024px demeure la 
référence minimum de la ...
Olivier Dommange 
Responsive design 
Viewport fixé 
initial-scale=1.0 : Elimine la possibilité d’agrandir manuellement l’i...
Olivier Dommange 
Responsive design 
Impression de la page 
Faire disparaître les outils de navigations. 
Modifier la tail...
Olivier Dommange 
Mobile 
Interface & outils
Olivier Dommange 
Mobile 
Les supports mobiles nécessitent une 
adaptation des interfaces et 
des outils de navigation. 
F...
Olivier Dommange 
Mobile - navigation 
Les menus sont 
rétractables et 
invisibles. 
Accessibles en un 
«touch clic». 
Pri...
Olivier Dommange 
Mobile - contenu 
Il n’y a pas d’état 
de survol (:hover). 
Retour aux 
standards du Web 
(bleu et souli...
Olivier Dommange 
Mobile - contenu 
Les accordéons 
facilitent un 
aperçu groupé du 
contenu.
Olivier Dommange 
Mobile - contenu 
Ajuster les textes 
et les espaces afin 
de faciliter la 
lecture.
Olivier Dommange 
Mobile – Les boutons 
Ajuster les 
boutons afin de 
faciliter leur 
accès. 
Espace cliquables 
Minimum—1...
Olivier Dommange 
Mobile – Les champs des formulaires 
Ajuster les textes 
et les espaces afin 
de faciliter la 
lecture. ...
Olivier Dommange 
Mobile – Les outils des formulaires 
Privilégier des outils 
proposant le «touch 
clic» à l’utilisation ...
Olivier Dommange 
UI Design 
Interface utilisateur
Olivier Dommange 
UI Design 
Le design de l’interface utilisateur (UI) fait 
parti de l’expérience utilisateur et consiste...
Olivier Dommange 
UI Design : étude de cas 
Le formulaire d’enregistrement (login) 
Doit comprendre comment 
donner des in...
Olivier Dommange 
UI Design : étude de cas 
Le formulaire d’enregistrement (login) 
1. La composition graphique
Olivier Dommange 
UI Design : étude de cas 
Le formulaire d’enregistrement (login) 
2. Le contenu
Olivier Dommange 
UI Design : étude de cas 
Le formulaire d’enregistrement (login) 
3. Les outils
Olivier Dommange 
UI Design : étude de cas 
Le formulaire d’enregistrement (login) 
D'autres exemples
Olivier Dommange 
UI Design : étude de cas 
Le formulaire d’enregistrement (login) 
D'autres exemples
Olivier Dommange 
UI Design : étude de cas 
Le formulaire d’enregistrement (login) 
D'autres exemples
Olivier Dommange 
http://www.linkedin.com/in/olivierdommange
Prochain SlideShare
Chargement dans…5
×

Webdesign sites web et mobiles-strategies et enjeux-ergonomie

3 925 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
2 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
3 925
Sur SlideShare
0
Issues des intégrations
0
Intégrations
16
Actions
Partages
0
Téléchargements
66
Commentaires
0
J’aime
2
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

×