Sites Web et MobilesStratégies et enjeux de l'ergonomie

Webdesign

Oliv

ier D

omm

ange

Oliv

ier D

omm

ange

L'ergonomiedu Web

Oliv

ier D

omm

ange

Supports – tailles des écrans

Variété innombrable de tailles d' écrans

Oliv

ier D

omm

ange

Supports – résolution

La concentration de pixels par pouces est élevée et relative

Oliv

ier D

omm

ange

Supports – taille d'écran

La tailles des écrans

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 ?

Oliv

ier D

omm

ange

Les solutionset stratégies

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

Oliv

ier D

omm

ange

Supports – solutions

2. Interface fluideLargeur des interfaces définies en pourcentage

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

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

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,...)

Oliv

ier D

omm

ange

https://twitter.com https://twitter.comhttp://mobile.twitter.com

Supports

Exemple : Twitter

Oliv

ier D

omm

ange

http://w3.orghttp://w3.org http://w3.org

Supports

Exemple : W3C

Oliv

ier D

omm

ange

http://www.apple.com http://www.apple.comhttp://www.apple.com http://www.apple.com

Supports

Exemple : Apple

Oliv

ier D

omm

ange

Responsive designMedia queries

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)" />

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

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

Oliv

ier D

omm

ange

http://screensiz.es/phone

Responsive design

Viewport : La surface de la fenêtre du navigateur

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)

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" />

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" />

Oliv

ier D

omm

ange

MobileInterface & outils

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 :

Oliv

ier D

omm

ange

Mobile - navigation

Les menus sont rétractables et invisibles. Accessibles en un «touch clic». Priorité au contenu.

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é).

Oliv

ier D

omm

ange

Mobile - contenu

Les accordéons facilitent un aperçu groupé du contenu.

Oliv

ier D

omm

ange

Mobile - contenu

Ajuster les textes et les espaces afin de faciliter la lecture.

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

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

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.

Oliv

ier D

omm

ange

UI DesignInterface utilisateur

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

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.

Oliv

ier D

omm

ange

UI Design : étude de cas

Le formulaire d’enregistrement (login)

1. La composition graphique

Oliv

ier D

omm

ange

UI Design : étude de cas

Le formulaire d’enregistrement (login)

2. Le contenu

Oliv

ier D

omm

ange

UI Design : étude de cas

Le formulaire d’enregistrement (login)

3. Les outils

Oliv

ier D

omm

ange

UI Design : étude de cas

Le formulaire d’enregistrement (login)

D'autres exemples

Oliv

ier D

omm

ange

UI Design : étude de cas

Le formulaire d’enregistrement (login)

D'autres exemples

Oliv

ier D

omm

ange

UI Design : étude de cas

Le formulaire d’enregistrement (login)

D'autres exemples

http://www.linkedin.com/in/olivierdommange

Olivier Dommange