Le Responsive Desig

n impact sur les processus de production

Assistance à la Maîtrise d’ouvrage (AMOA)

Ergonomie

Design

2011: 600 nouveaux terminaux

C’est quoi le web?

Trafic moyen par type de terminal

% des utilisateurs

2011 2015

Mobiles non-Smartphones 0,11 % 0,06 %

Objets connectés (M2M) 0,2 % 3,6 %

Ebook readers 0,7 % 3,9 %

Tablettes 2,7 % 11,2 %

Smartphones 4,9 % 16,8 %

Laptops et desktops 91,4 % 64,4 %

Source: http://newsroom.cisco.com/press-release-content?type=webcontent&articleId=668380

2015 en France

• 28% des visiteurs sous tablettes et mobiles

• Résolution moyenne mobile : 960×640 / 3,5 pouces / 326 ppp

• 33% des visiteurs sous terminaux tactiles

• + 600 nouveaux terminaux sur le marché.

« Le Responsive Design et une approche de conception Web qui permet à une interface de s’adapter aux différentes tailles et résolutions des terminaux qui la consultent. »

Responsive design: Définition

• Division des coûts de conception

• Division des coûts/temps de maintenance

• Amélioration globale de l’expérience utilisateur sur TOUS les supports

• Anticipation sur l’avenir des usages

Les bénéfices (théoriques)

L’approche responsive peut affecter:• Le modèle économique: Pas de régie pub• La RH :Compétences rares / chères• La direction des projets: Nouveaux processus

L’approche responsive impacte• Le choix des contenus (Flash, propriétaire, taille..)• Le choix des fonctionnalités• La relation client: Livrables plus abstraits• Les coûts de tests

La réalité

• 0% ou 100% Responsive?

• Responsive partielle?Étudier la « compatibilité responsive »

• Des contenus (Content first)• Des supports (Mobile first)• Tenter l’approche «Patterns first»?

Responsive ou pas?

96X65

128X

128

128X

160

176X

208/220

240X

320

320X

480

640X

200/360/480

800 X 352/400/480 1024 X 768 1280 X 720/800/1024

2550 x 1440

1920 x 1200

Smartphones Smartphones / tablettes / e-Readers / NetBookd Desktop / TV, etc….

• Listez les terminaux à prendre en compte • Constituez vos familles de résolution• Définissez les points de ruptures

Responsive jusqu’où?

Mobiles

Compatibilité des contenus

Une interface responsive restreint le contenu aux limites «physiologiques» de chaque terminal.

TIPS: Précisez le degré de compatibilité de chaque contenu avec chaque terminal retenu dès l'inventaire des contenus. Vous devez définir si un design pattern ou un type de contenu posera des problèmes d’affichage ou une expérience utilisateur pénible sur une résolution ou un terminal.

Solutions:• Limiter la longueur des articles• découper les contenus en plusieurs parties (= gabarit spécifique pour

les petites résolutions).• Modifier la taille des éléments pour les grandes résolutions• Faire disparaître le contenu sur certaines résolutions

Bonnes pratiques 1: Le contenu

Compatibilité des fonctionnalités

• Toutes les fonctionnalités ne sont pas disponibles sous tous les terminaux.

• Toutes les fonctionnalités ne sont pas pertinentes sous tous les terminaux.

Attention aux contraintes hardware

• La géolocalisation• Aux interactions riches (Formulaires complexes, un configurateur, etc…)• Orientations• Cameras ou photos

Bonnes pratiques 2: les fonctionnalités

Considérations ergonomiques

Attention aux

• Systèmes d'information complexes• Navigations multiples• Méga menus• Arborescences à quatre ou cinq niveaux de profondeur.• Performances!

TIPS:• Pour optimiser l'accessibilité : limiter le masquage de fonctionnalités entre

les différentes versions.• Si vous choisissez malgré tout de cacher certaines fonctionnalités, alors

pensez à mettre un switch "Version desktop" / "Version smartphone", qui puisse désactiver / réactiver les media-queries, à l’aide de javascript.

Bonnes pratiques 3: l’ergonomie

Ne pensez pas « webdesign », pensez « Direction Artistique»!!!!

Bonnes pratiques 4: le design

Phase préparato

ire

UX Prototypage

Production

• Inventaire des contenus & fonctionnalités

• Inventaire des design patterns

• Modèle de données

• Inventaire des incompatibilités

• Définition du nombre de versions dédiées

• Liste des points de ruptures

• Architecture de l’information (siteflow)

• Zoning

• Prototypes HTML

• Tests sur terminaux

• Liste des terminaux visés

• Etc…

Le processus de conception « Patterns first »

• Design

• Intégration finale

• Développement

• Mapping

• Etc…

Compétences:

• Connaissances des patterns natives

• Flux HTML

• Possibilités JavaScript

• Connaissance des contraintes Devices

• Expérience des usages

• Anticiper les contraintes de conception

Compétences:

• Ergonomie IHM

• Flux HTML

• Intégration

• Developpement JavaScript

• Connaissance des contraintes Devices

• Expérience des usages

• Anticiper les contraintes de conception

Layout Pattern

s

Prototypes

(HTML/CSS/JS)

Inventaire des

Design patterns

Tests

Arborescence

Version 2

Design

(re)-Intégratio

n

Version 1

Version 3

Prototypage

Phase de prototypage

UX Production

Layout patterns

11 1 1

1 1 1 1

2

2 2 2

2

2

2 2 3

33

3

333

3

1 1

12 2

2

3

33

12

3

12 3 12 3 12 3

12 3

Conclusion

Adaptez vos processus de production à votre contexte d’entreprise, aux profils de vos clients et aux projets!

Merci!

laurent@demontiers.com

Twitter: @L_Demontiers