Graphisme et ergonomie des projets… horribles - Kiwi Party 2014
description
Transcript of Graphisme et ergonomie des projets… horribles - Kiwi Party 2014
![Page 1: Graphisme et ergonomie des projets… horribles - Kiwi Party 2014](https://reader033.fdocument.pub/reader033/viewer/2022051817/5478b3e1b4795995098b4568/html5/thumbnails/1.jpg)
Graphisme et ergonomie des projets...horriblesLe graphisme en projet hostile
Guillaume Hurst @ KiwiParty Strasbourg 2014
![Page 2: Graphisme et ergonomie des projets… horribles - Kiwi Party 2014](https://reader033.fdocument.pub/reader033/viewer/2022051817/5478b3e1b4795995098b4568/html5/thumbnails/2.jpg)
Guillaume HurstDirecteur artistique grands
comptesResponsable UX
Architecte de l’Informationactency.fr
![Page 3: Graphisme et ergonomie des projets… horribles - Kiwi Party 2014](https://reader033.fdocument.pub/reader033/viewer/2022051817/5478b3e1b4795995098b4568/html5/thumbnails/3.jpg)
Au programme…
1. Faisons connaissance2. Les projets « horribles »3. Aborder le projet4. WD & UX5. Sources d’inspiration6. Exemples7. Conclusion et questions
Comment apprivoiser la phase de création graphique pour les projets types extranet, GED... les trucs par définition pas sexy.
Contraintes rencontrées sur ces projets, les façons de les détourner à l'avantage du créatif. Comment voir l'expérience utilisateur comme un levier pour réaliser une charte agréable
![Page 4: Graphisme et ergonomie des projets… horribles - Kiwi Party 2014](https://reader033.fdocument.pub/reader033/viewer/2022051817/5478b3e1b4795995098b4568/html5/thumbnails/4.jpg)
Les projets horriblesEn quelques mots...
Les projets qui laissent peu de place au graphisme :
Extranets, intranets
Gestion électronique de documents
Backoffices
Dashboards…
Généralement composés de :
Formulaires
Tableaux
Listes…
Reconnue comme une des agences
leader en France de la solution Drupal
![Page 5: Graphisme et ergonomie des projets… horribles - Kiwi Party 2014](https://reader033.fdocument.pub/reader033/viewer/2022051817/5478b3e1b4795995098b4568/html5/thumbnails/5.jpg)
Aborder le projet
La vision globale :Il ne faut pas voir ces projets comme des sites Internet.
Ils sont plus complexes, ont souvent beaucoup d’éléments dans chaque page.
Ils ont de très nombreux gabarits.
![Page 6: Graphisme et ergonomie des projets… horribles - Kiwi Party 2014](https://reader033.fdocument.pub/reader033/viewer/2022051817/5478b3e1b4795995098b4568/html5/thumbnails/6.jpg)
GraphismeComment faire
Eviter de surcharger des pages déjà souvent complexes
Design simple
Comment ?
Flat design ?
Grille stricte
Orienter le design pour l’utilisateur
![Page 7: Graphisme et ergonomie des projets… horribles - Kiwi Party 2014](https://reader033.fdocument.pub/reader033/viewer/2022051817/5478b3e1b4795995098b4568/html5/thumbnails/7.jpg)
Expérience utilisateurComment faire
Un design orienté utilisateurTout faire pour que l’utilisateur s’y retrouve dans les pages et l’arborescence du projet.
Définir les zones d’action
Comment ?
Palette de couleurs réfléchie
Rassembler les fonctionnalités
![Page 8: Graphisme et ergonomie des projets… horribles - Kiwi Party 2014](https://reader033.fdocument.pub/reader033/viewer/2022051817/5478b3e1b4795995098b4568/html5/thumbnails/8.jpg)
Hiérarchiser, optimiser, rationaliser :
Réduire la profondeur de navigations
Revoir l’arborescence
Hiérarchiser le contenu
Réorganiser les fonctionnalités
Expérience utilisateurComment faire
![Page 9: Graphisme et ergonomie des projets… horribles - Kiwi Party 2014](https://reader033.fdocument.pub/reader033/viewer/2022051817/5478b3e1b4795995098b4568/html5/thumbnails/9.jpg)
On peut alléger une page grâce aux fonctionnalités.Rendre les actions plus intuitives, moins chonophages.
Expérience utilisateurOptimiser
![Page 10: Graphisme et ergonomie des projets… horribles - Kiwi Party 2014](https://reader033.fdocument.pub/reader033/viewer/2022051817/5478b3e1b4795995098b4568/html5/thumbnails/10.jpg)
Expérience utilisateurLe parcours
Comment définir le parcours de l’utilisateur ?
Etudier les différents profils
Ce qu’il doit faire
Ce qu’il veut faire
![Page 11: Graphisme et ergonomie des projets… horribles - Kiwi Party 2014](https://reader033.fdocument.pub/reader033/viewer/2022051817/5478b3e1b4795995098b4568/html5/thumbnails/11.jpg)
IdentificationEntrée de niveau 1Entrée de niveau 2, 3, 4…Calendriers partagésCalendrier de MathildePatron de Georges qui arrive !
Expérience utilisateurLe parcours… de Georges
Le parcours de Georges :
![Page 12: Graphisme et ergonomie des projets… horribles - Kiwi Party 2014](https://reader033.fdocument.pub/reader033/viewer/2022051817/5478b3e1b4795995098b4568/html5/thumbnails/12.jpg)
Simplifier l’accès aux informations ou actions nécessaires à Georges !
Expérience utilisateurLe parcours… de Georges
![Page 13: Graphisme et ergonomie des projets… horribles - Kiwi Party 2014](https://reader033.fdocument.pub/reader033/viewer/2022051817/5478b3e1b4795995098b4568/html5/thumbnails/13.jpg)
Inspirations
![Page 14: Graphisme et ergonomie des projets… horribles - Kiwi Party 2014](https://reader033.fdocument.pub/reader033/viewer/2022051817/5478b3e1b4795995098b4568/html5/thumbnails/14.jpg)
Sources d’inspirationRessources
Le Flat Design se prête très bien aux interfaces complexes :
Facile de trouver des templates, des UI Kits ou des ressources
OS mobiles (IOS7 – WP8…)
Applications mobiles/tablettes
![Page 15: Graphisme et ergonomie des projets… horribles - Kiwi Party 2014](https://reader033.fdocument.pub/reader033/viewer/2022051817/5478b3e1b4795995098b4568/html5/thumbnails/15.jpg)
Alléger la page : Planning
ExemplesPlanning
![Page 16: Graphisme et ergonomie des projets… horribles - Kiwi Party 2014](https://reader033.fdocument.pub/reader033/viewer/2022051817/5478b3e1b4795995098b4568/html5/thumbnails/16.jpg)
ExemplesPlanning
![Page 17: Graphisme et ergonomie des projets… horribles - Kiwi Party 2014](https://reader033.fdocument.pub/reader033/viewer/2022051817/5478b3e1b4795995098b4568/html5/thumbnails/17.jpg)
ExemplesTicketing
Réorganiser les informations : Redmine
![Page 18: Graphisme et ergonomie des projets… horribles - Kiwi Party 2014](https://reader033.fdocument.pub/reader033/viewer/2022051817/5478b3e1b4795995098b4568/html5/thumbnails/18.jpg)
ExemplesTicketing
![Page 19: Graphisme et ergonomie des projets… horribles - Kiwi Party 2014](https://reader033.fdocument.pub/reader033/viewer/2022051817/5478b3e1b4795995098b4568/html5/thumbnails/19.jpg)
Questions
![Page 20: Graphisme et ergonomie des projets… horribles - Kiwi Party 2014](https://reader033.fdocument.pub/reader033/viewer/2022051817/5478b3e1b4795995098b4568/html5/thumbnails/20.jpg)
MERCI
En savoir plus,Visitez notre site, téléchargez nos supports :
www.actency.fr www.twitter.com/actency www.facebook.com/actency
Notre book de références www.actency.fr/book
Notre Factsheet Drupal www.actency.fr/drupal