Le Responsive Design
impact sur les processus de production

Assistance à la Maîtrise d’ouvrage (AMOA)
Ergonomie
Design
C’est quoi le web?

2011: 600 nouveaux terminaux
Trafic moyen par type de terminal
% des utilisateurs
2011

2015

Mobiles non-Smartphones

0,11 %

0,06 %

Objets connectés...
Responsive design: Définition
« Le Responsive Design et une approche de conception Web qui
permet à une interface de s’ada...
Les bénéfices (théoriques)
• Division des coûts de conception
• Division des coûts/temps de maintenance
• Amélioration glo...
La réalité
L’approche responsive peut affecter:
• Le modèle économique: Pas de régie pub
• La RH :Compétences rares / chèr...
Responsive ou pas?
• 0% ou 100% Responsive?
• Responsive partielle?

Étudier la « compatibilité responsive »
• Des contenu...
Responsive jusqu’où?

Mobiles

Smartphones

Smartphones / tablettes / e-Readers / NetBookd

Desktop / TV, etc….

1920 x 12...
Bonnes pratiques 1: Le contenu
Compatibilité des contenus
Une interface responsive restreint le contenu aux limites «physi...
Bonnes pratiques 2: les fonctionnalités
Compatibilité des fonctionnalités
• Toutes les fonctionnalités ne sont pas disponi...
Bonnes pratiques 3: l’ergonomie
Considérations ergonomiques
Attention aux
•
•
•
•
•

Systèmes d'information complexes
Navi...
Bonnes pratiques 4: le design

Ne pensez pas « webdesign »,
pensez « Direction Artistique»!!!!
Le processus de conception « Patterns
first »
Phase
préparatoir
e
• Liste des terminaux visés
• Etc…

UX

Prototypa
ge

• ...
Phase de prototypage
UX

Prototypage

Product

Version 1
Version 2
Desi
gn
Inventaire
des
Design
patterns

Arboresce
nce

...
Layout patterns
1

1

1

1
1

2

2

3

3

2

1

3

2

1

2

1

2

2

2

3

3

1

1

2

2

3

1

2
3

1

3

3

2
2

1

3

2...
Conclusion
Adaptez vos processus de production à votre
contexte d’entreprise, aux profils de vos clients et
aux projets!
M...
Prochain SlideShare
Chargement dans…5
×

Responsive Design : impact sur les processus de production

658 vues

Publié le

Intervention de 20 min aux Rencontres Interactives de Caen - Mai 2012.

0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

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

Aucune remarque pour cette diapositive

Responsive Design : impact sur les processus de production

  1. 1. Le Responsive Design impact sur les processus de production Assistance à la Maîtrise d’ouvrage (AMOA) Ergonomie Design
  2. 2. C’est quoi le web? 2011: 600 nouveaux terminaux
  3. 3. 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é.
  4. 4. Responsive design: Définition « 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. »
  5. 5. Les bénéfices (théoriques) • 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
  6. 6. La réalité 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
  7. 7. Responsive ou pas? • 0% ou 100% Responsive? • Responsive partielle? Étudier la « compatibilité responsive » • Des contenus (Content first) • Des supports (Mobile first) • Tenter l’approche «Patterns first»?
  8. 8. Responsive jusqu’où? Mobiles Smartphones Smartphones / tablettes / e-Readers / NetBookd Desktop / TV, etc…. 1920 x 1200 2550 x 1440 96 X 65 128 X 128 128 X 160 176 X 208/220 240 X 320 320 X 480 640 X 200/360/480 800 X 352/400/480 1024 X 768 1280 X 720/800/1024 • Listez les terminaux à prendre en compte • Constituez vos familles de résolution • Définissez les points de ruptures
  9. 9. Bonnes pratiques 1: Le contenu Compatibilité des contenus Une interface responsive restreint le contenu aux limites «physiologiques» de chaque 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 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.
  10. 10. Bonnes pratiques 2: les fonctionnalités 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
  11. 11. Bonnes pratiques 3: l’ergonomie 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.
  12. 12. Bonnes pratiques 4: le design Ne pensez pas « webdesign », pensez « Direction Artistique»!!!!
  13. 13. Le processus de conception « Patterns first » Phase préparatoir e • Liste des terminaux visés • Etc… UX Prototypa ge • Inventaire des contenus & fonctionnalités • Architecture de l’information (siteflow) • Inventaire des design patterns • Zoning • Modèle de données • Inventaire des incompatibilités • Définition du nombre de versions dédiées • Liste des points de ruptures Compétences: • Connaissances des patterns natives • Flux HTML • Possibilités JavaScript • Connaissance des contraintes Devices • Expérience des usages • Anticiper les contraintes de conception • Prototypes HTML • Tests sur terminaux Productio n • Design • Intégration finale • Développement • Mapping • Etc… Compétences: • Ergonomie IHM • Flux HTML • Intégration • Developpement JavaScript • Connaissance des contraintes Devices • Expérience des usages • Anticiper les contraintes de conception
  14. 14. Phase de prototypage UX Prototypage Product Version 1 Version 2 Desi gn Inventaire des Design patterns Arboresce nce Version 3 Layout Patterns Prototypes (HTML/CSS/JS) Test s (re)Intégration
  15. 15. Layout patterns 1 1 1 1 1 2 2 3 3 2 1 3 2 1 2 1 2 2 2 3 3 1 1 2 2 3 1 2 3 1 3 3 2 2 1 3 2 1 3 2 1 3 2 1 3 3 3 3
  16. 16. 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

×