webdesign sites web et mobiles-strategies et enjeux-ergonomie
TRANSCRIPT
![Page 1: Webdesign sites web et mobiles-strategies et enjeux-ergonomie](https://reader033.vdocuments.mx/reader033/viewer/2022060205/55a1b68b1a28abf9398b45d8/html5/thumbnails/1.jpg)
Sites Web et MobilesStratégies et enjeux de l'ergonomie
Webdesign
Oliv
ier D
omm
ange
![Page 2: Webdesign sites web et mobiles-strategies et enjeux-ergonomie](https://reader033.vdocuments.mx/reader033/viewer/2022060205/55a1b68b1a28abf9398b45d8/html5/thumbnails/2.jpg)
Oliv
ier D
omm
ange
L'ergonomiedu Web
![Page 3: Webdesign sites web et mobiles-strategies et enjeux-ergonomie](https://reader033.vdocuments.mx/reader033/viewer/2022060205/55a1b68b1a28abf9398b45d8/html5/thumbnails/3.jpg)
Oliv
ier D
omm
ange
Supports – tailles des écrans
Variété innombrable de tailles d' écrans
![Page 4: Webdesign sites web et mobiles-strategies et enjeux-ergonomie](https://reader033.vdocuments.mx/reader033/viewer/2022060205/55a1b68b1a28abf9398b45d8/html5/thumbnails/4.jpg)
Oliv
ier D
omm
ange
Supports – résolution
La concentration de pixels par pouces est élevée et relative
![Page 5: Webdesign sites web et mobiles-strategies et enjeux-ergonomie](https://reader033.vdocuments.mx/reader033/viewer/2022060205/55a1b68b1a28abf9398b45d8/html5/thumbnails/5.jpg)
Oliv
ier D
omm
ange
Supports – taille d'écran
La tailles des écrans
![Page 6: Webdesign sites web et mobiles-strategies et enjeux-ergonomie](https://reader033.vdocuments.mx/reader033/viewer/2022060205/55a1b68b1a28abf9398b45d8/html5/thumbnails/6.jpg)
Oliv
ier D
omm
ange
source : http://www.businessinsider.com/mobile-will-eclipse-desktop-by-2014-2012-6source : http://www.cruxcollaborative.com/the-mobile-web-an-illustrated-look
Supports – mobile vs desktop
L'avenir est au mobile ?
![Page 7: Webdesign sites web et mobiles-strategies et enjeux-ergonomie](https://reader033.vdocuments.mx/reader033/viewer/2022060205/55a1b68b1a28abf9398b45d8/html5/thumbnails/7.jpg)
Oliv
ier D
omm
ange
Les solutionset stratégies
![Page 8: Webdesign sites web et mobiles-strategies et enjeux-ergonomie](https://reader033.vdocuments.mx/reader033/viewer/2022060205/55a1b68b1a28abf9398b45d8/html5/thumbnails/8.jpg)
Oliv
ier D
omm
ange
Supports – solutions
1. Ne rien faire...Les supports mobiles et navigateurs disposent d'outils d'agrandissement du contenu et de la page
![Page 9: Webdesign sites web et mobiles-strategies et enjeux-ergonomie](https://reader033.vdocuments.mx/reader033/viewer/2022060205/55a1b68b1a28abf9398b45d8/html5/thumbnails/9.jpg)
Oliv
ier D
omm
ange
Supports – solutions
2. Interface fluideLargeur des interfaces définies en pourcentage
![Page 10: Webdesign sites web et mobiles-strategies et enjeux-ergonomie](https://reader033.vdocuments.mx/reader033/viewer/2022060205/55a1b68b1a28abf9398b45d8/html5/thumbnails/10.jpg)
Oliv
ier D
omm
ange
Supports – solutions
3. Application Web : reponsive designStyles (CSS), outils (JS) et contenus adaptés pour différentes largeurs de support
![Page 11: Webdesign sites web et mobiles-strategies et enjeux-ergonomie](https://reader033.vdocuments.mx/reader033/viewer/2022060205/55a1b68b1a28abf9398b45d8/html5/thumbnails/11.jpg)
Oliv
ier D
omm
ange
Supports – solutions
4. Site Web dédiéRedirection automatique vers un site Web dédié aux supports mobilesInterface, outils et contenus créés sur mesure
![Page 12: Webdesign sites web et mobiles-strategies et enjeux-ergonomie](https://reader033.vdocuments.mx/reader033/viewer/2022060205/55a1b68b1a28abf9398b45d8/html5/thumbnails/12.jpg)
Oliv
ier D
omm
ange
Supports – solutions
5. Application nativeEn interaction avec les périphériques et outils du support mobile.(géolocalisation, contacts, appareil photo,...)
![Page 13: Webdesign sites web et mobiles-strategies et enjeux-ergonomie](https://reader033.vdocuments.mx/reader033/viewer/2022060205/55a1b68b1a28abf9398b45d8/html5/thumbnails/13.jpg)
Oliv
ier D
omm
ange
https://twitter.com https://twitter.comhttp://mobile.twitter.com
Supports
Exemple : Twitter
![Page 14: Webdesign sites web et mobiles-strategies et enjeux-ergonomie](https://reader033.vdocuments.mx/reader033/viewer/2022060205/55a1b68b1a28abf9398b45d8/html5/thumbnails/14.jpg)
Oliv
ier D
omm
ange
http://w3.orghttp://w3.org http://w3.org
Supports
Exemple : W3C
![Page 15: Webdesign sites web et mobiles-strategies et enjeux-ergonomie](https://reader033.vdocuments.mx/reader033/viewer/2022060205/55a1b68b1a28abf9398b45d8/html5/thumbnails/15.jpg)
Oliv
ier D
omm
ange
http://www.apple.com http://www.apple.comhttp://www.apple.com http://www.apple.com
Supports
Exemple : Apple
![Page 16: Webdesign sites web et mobiles-strategies et enjeux-ergonomie](https://reader033.vdocuments.mx/reader033/viewer/2022060205/55a1b68b1a28abf9398b45d8/html5/thumbnails/16.jpg)
Oliv
ier D
omm
ange
Responsive designMedia queries
![Page 17: Webdesign sites web et mobiles-strategies et enjeux-ergonomie](https://reader033.vdocuments.mx/reader033/viewer/2022060205/55a1b68b1a28abf9398b45d8/html5/thumbnails/17.jpg)
Oliv
ier D
omm
ange
Responsive design
Egalement appelé « Media queries ». Modifie le le style (CSS) selon deux critères
Média : définit le support
Fonction : fixe les limites d'application
<link rel="stylesheet" type="text/css" href="css/s960.css" media="screen and (min-width:740px) and (max-width:960px)" />
![Page 18: Webdesign sites web et mobiles-strategies et enjeux-ergonomie](https://reader033.vdocuments.mx/reader033/viewer/2022060205/55a1b68b1a28abf9398b45d8/html5/thumbnails/18.jpg)
Oliv
ier D
omm
ange
Responsive design
Médiasallscreenhandheldprintaural / speechbrailleembossedprojectionttytv
Tous (par défaut)EcransTéléphones mobilesImpressionVocalesPlages brailleImprimante brailleProjecteursTerminal (caractères mono espace)Télévision
allscreenhandheldprintaural / speechbrailleembossedprojectionttytv
![Page 19: Webdesign sites web et mobiles-strategies et enjeux-ergonomie](https://reader033.vdocuments.mx/reader033/viewer/2022060205/55a1b68b1a28abf9398b45d8/html5/thumbnails/19.jpg)
Oliv
ier D
omm
ange
Responsive design
Profondeur de la couleur (bits/pixel)Table de couleurs indexéesRatio de la taille (ex. 16/9)Ratio de la zone d'affichage du périphériqueHauteur en pixel du périphériqueLargeur en pixels du périphériqueAffichage (bitmap ou grid – ex. lcd)Hauteur en pixel de la zone d'affichageProfondeur des niveaux de gris (bits/pixel)Orientation du périphérique (portait ou landscape)Résolution d'affichage du périphériqueBalayage des téléviseurs (progressive ou interlace)Largeur en pixels de la zone d'affichage
colorcolor-indexaspect-ratiodevice-aspect-ratiodevice-heightdevice-widthgridheightmonochromeorientationresolutionscanwidth
Fonctionsmin/maxmin/maxmin/maxmin/maxmin/maxmin/max
min/maxmin/max
min/max
min/max
![Page 20: Webdesign sites web et mobiles-strategies et enjeux-ergonomie](https://reader033.vdocuments.mx/reader033/viewer/2022060205/55a1b68b1a28abf9398b45d8/html5/thumbnails/20.jpg)
Oliv
ier D
omm
ange
http://screensiz.es/phone
Responsive design
Viewport : La surface de la fenêtre du navigateur
![Page 21: Webdesign sites web et mobiles-strategies et enjeux-ergonomie](https://reader033.vdocuments.mx/reader033/viewer/2022060205/55a1b68b1a28abf9398b45d8/html5/thumbnails/21.jpg)
Oliv
ier D
omm
ange
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)
![Page 22: Webdesign sites web et mobiles-strategies et enjeux-ergonomie](https://reader033.vdocuments.mx/reader033/viewer/2022060205/55a1b68b1a28abf9398b45d8/html5/thumbnails/22.jpg)
Oliv
ier D
omm
ange
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.
width=device-width : Ajuste la taille des contenus (images) à la taille réelle de l’écran.
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
![Page 23: Webdesign sites web et mobiles-strategies et enjeux-ergonomie](https://reader033.vdocuments.mx/reader033/viewer/2022060205/55a1b68b1a28abf9398b45d8/html5/thumbnails/23.jpg)
Oliv
ier D
omm
ange
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" />
![Page 24: Webdesign sites web et mobiles-strategies et enjeux-ergonomie](https://reader033.vdocuments.mx/reader033/viewer/2022060205/55a1b68b1a28abf9398b45d8/html5/thumbnails/24.jpg)
Oliv
ier D
omm
ange
MobileInterface & outils
![Page 25: Webdesign sites web et mobiles-strategies et enjeux-ergonomie](https://reader033.vdocuments.mx/reader033/viewer/2022060205/55a1b68b1a28abf9398b45d8/html5/thumbnails/25.jpg)
Oliv
ier D
omm
ange
Mobile
Les supports mobiles nécessitent une adaptation des interfaces etdes outils de navigation.
Point d’impact large
Navigation simplifiée
Mobilité
Facteurs :
![Page 26: Webdesign sites web et mobiles-strategies et enjeux-ergonomie](https://reader033.vdocuments.mx/reader033/viewer/2022060205/55a1b68b1a28abf9398b45d8/html5/thumbnails/26.jpg)
Oliv
ier D
omm
ange
Mobile - navigation
Les menus sont rétractables et invisibles. Accessibles en un «touch clic». Priorité au contenu.
![Page 27: Webdesign sites web et mobiles-strategies et enjeux-ergonomie](https://reader033.vdocuments.mx/reader033/viewer/2022060205/55a1b68b1a28abf9398b45d8/html5/thumbnails/27.jpg)
Oliv
ier D
omm
ange
Mobile - contenu
Il n’y a pas d’état de survol (:hover). Retour aux standards du Web (bleu et souligné).
![Page 28: Webdesign sites web et mobiles-strategies et enjeux-ergonomie](https://reader033.vdocuments.mx/reader033/viewer/2022060205/55a1b68b1a28abf9398b45d8/html5/thumbnails/28.jpg)
Oliv
ier D
omm
ange
Mobile - contenu
Les accordéons facilitent un aperçu groupé du contenu.
![Page 29: Webdesign sites web et mobiles-strategies et enjeux-ergonomie](https://reader033.vdocuments.mx/reader033/viewer/2022060205/55a1b68b1a28abf9398b45d8/html5/thumbnails/29.jpg)
Oliv
ier D
omm
ange
Mobile - contenu
Ajuster les textes et les espaces afin de faciliter la lecture.
![Page 30: Webdesign sites web et mobiles-strategies et enjeux-ergonomie](https://reader033.vdocuments.mx/reader033/viewer/2022060205/55a1b68b1a28abf9398b45d8/html5/thumbnails/30.jpg)
Oliv
ier D
omm
ange
Mobile – Les boutons
Ajuster les boutons afin de faciliter leur accès.
Espace cliquablesMinimum—17 pt / 6 mmPréférable—23 pt / 8 mmMaximum—43 pt / 15 mm
![Page 31: Webdesign sites web et mobiles-strategies et enjeux-ergonomie](https://reader033.vdocuments.mx/reader033/viewer/2022060205/55a1b68b1a28abf9398b45d8/html5/thumbnails/31.jpg)
Oliv
ier D
omm
ange
Mobile – Les champs des formulaires
Ajuster les textes et les espaces afin de faciliter la lecture.
Espace cliquablesMinimum—17 pt / 6 mmPréférable—23 pt / 8 mmMaximum—43 pt / 15 mm
Espace entre les éléments afin d'éviter les interférencesMinimum—23 pt / 8 mmPréférable—28 pt / 10 mm
![Page 32: Webdesign sites web et mobiles-strategies et enjeux-ergonomie](https://reader033.vdocuments.mx/reader033/viewer/2022060205/55a1b68b1a28abf9398b45d8/html5/thumbnails/32.jpg)
Oliv
ier D
omm
ange
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.
![Page 33: Webdesign sites web et mobiles-strategies et enjeux-ergonomie](https://reader033.vdocuments.mx/reader033/viewer/2022060205/55a1b68b1a28abf9398b45d8/html5/thumbnails/33.jpg)
Oliv
ier D
omm
ange
UI DesignInterface utilisateur
![Page 34: Webdesign sites web et mobiles-strategies et enjeux-ergonomie](https://reader033.vdocuments.mx/reader033/viewer/2022060205/55a1b68b1a28abf9398b45d8/html5/thumbnails/34.jpg)
Oliv
ier D
omm
ange
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 pageMise en évidence de contenusPositionnement stratégique d’éléments
Terminologie cohérenteTextes descriptifs et exemples
Facilite l’utilisation des fonctionnalités et objetsPropose des alternatives d’utilisationIntègre des ressources tiers tels que les réseaux sociaux
![Page 35: Webdesign sites web et mobiles-strategies et enjeux-ergonomie](https://reader033.vdocuments.mx/reader033/viewer/2022060205/55a1b68b1a28abf9398b45d8/html5/thumbnails/35.jpg)
Oliv
ier D
omm
ange
UI Design : étude de cas
Le formulaire d’enregistrement (login)
Doit comprendre comment donner des informations
Doit être aidant, aisé et intuitif.
![Page 36: Webdesign sites web et mobiles-strategies et enjeux-ergonomie](https://reader033.vdocuments.mx/reader033/viewer/2022060205/55a1b68b1a28abf9398b45d8/html5/thumbnails/36.jpg)
Oliv
ier D
omm
ange
UI Design : étude de cas
Le formulaire d’enregistrement (login)
1. La composition graphique
![Page 37: Webdesign sites web et mobiles-strategies et enjeux-ergonomie](https://reader033.vdocuments.mx/reader033/viewer/2022060205/55a1b68b1a28abf9398b45d8/html5/thumbnails/37.jpg)
Oliv
ier D
omm
ange
UI Design : étude de cas
Le formulaire d’enregistrement (login)
2. Le contenu
![Page 38: Webdesign sites web et mobiles-strategies et enjeux-ergonomie](https://reader033.vdocuments.mx/reader033/viewer/2022060205/55a1b68b1a28abf9398b45d8/html5/thumbnails/38.jpg)
Oliv
ier D
omm
ange
UI Design : étude de cas
Le formulaire d’enregistrement (login)
3. Les outils
![Page 39: Webdesign sites web et mobiles-strategies et enjeux-ergonomie](https://reader033.vdocuments.mx/reader033/viewer/2022060205/55a1b68b1a28abf9398b45d8/html5/thumbnails/39.jpg)
Oliv
ier D
omm
ange
UI Design : étude de cas
Le formulaire d’enregistrement (login)
D'autres exemples
![Page 40: Webdesign sites web et mobiles-strategies et enjeux-ergonomie](https://reader033.vdocuments.mx/reader033/viewer/2022060205/55a1b68b1a28abf9398b45d8/html5/thumbnails/40.jpg)
Oliv
ier D
omm
ange
UI Design : étude de cas
Le formulaire d’enregistrement (login)
D'autres exemples
![Page 41: Webdesign sites web et mobiles-strategies et enjeux-ergonomie](https://reader033.vdocuments.mx/reader033/viewer/2022060205/55a1b68b1a28abf9398b45d8/html5/thumbnails/41.jpg)
Oliv
ier D
omm
ange
UI Design : étude de cas
Le formulaire d’enregistrement (login)
D'autres exemples
![Page 42: Webdesign sites web et mobiles-strategies et enjeux-ergonomie](https://reader033.vdocuments.mx/reader033/viewer/2022060205/55a1b68b1a28abf9398b45d8/html5/thumbnails/42.jpg)
http://www.linkedin.com/in/olivierdommange
Olivier Dommange