Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Graphisme et ergonomie des projets… horribles - Kiwi Party 2014

3 116 vues

Publié le

Les slides de la conférence de Guillaume Hurst - Directeur artistique grands comptes et Responsable UX chez Actency - lors de la Kiwi Party 2014, 13 juin 2014, Strasbourg.

"Comment apprivoiser la phase de création graphique pour les projets types extranet, GED… les trucs par définition pas sexy. Les contraintes rencontrées sur ces projets, les façons de les détourner à l'avantage du créatif, et comment voir l'expérience utilisateur comme un levier pour réaliser une charte agréable."

Le contenu du slide 17 (Exemples Ticketing Réorganiser les informations : Redmine) est inspiré de http://www.jepsonrae.com/

Publié dans : Design
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Graphisme et ergonomie des projets… horribles - Kiwi Party 2014

  1. 1. Graphisme et ergonomie des projets...horribles Le graphisme en projet hostile Guillaume Hurst @ KiwiParty Strasbourg 2014
  2. 2. Guillaume Hurst Directeur artistique grands comptes Responsable UX Architecte de l’Information actency.fr
  3. 3. Au programme… 1. Faisonsconnaissance 2. Lesprojets«horribles» 3. Aborderleprojet 4. WD& UX 5. Sourcesd’inspiration 6. Exemples 7. Conclusionetquestions 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
  4. 4. Les projets horribles En 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
  5. 5. Aborderle 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.
  6. 6. Graphisme Comment faire Eviter de surcharger des pages déjà souvent complexes Design simple Comment ? Flat design ? Grille stricte Orienter le design pour l’utilisateur
  7. 7. Expérience utilisateur Comment faire Un design orienté utilisateur Tout 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
  8. 8. Hiérarchiser, optimiser, rationaliser : Réduire la profondeur de navigations Revoir l’arborescence Hiérarchiser le contenu Réorganiser les fonctionnalités Expérience utilisateur Comment faire
  9. 9. On peut alléger une page grâce aux fonctionnalités. Rendre les actions plus intuitives, moins chonophages. Expérience utilisateur Optimiser
  10. 10. Expérience utilisateur Le parcours Comment définir le parcours de l’utilisateur ? Etudier les différents profils Ce qu’il doit faire Ce qu’il veut faire
  11. 11. Identification Entrée de niveau 1 Entrée de niveau 2, 3, 4… Calendriers partagés Calendrier de Mathilde Patron de Georges qui arrive ! Expérience utilisateur Le parcours… de Georges Le parcours de Georges :
  12. 12. Simplifier l’accès aux informations ou actions nécessaires à Georges ! Expérience utilisateur Le parcours… de Georges
  13. 13. Inspirations
  14. 14. Sources d’inspiration Ressources 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
  15. 15. Alléger la page : Planning Exemples Planning
  16. 16. Exemples Planning
  17. 17. Exemples Ticketing Réorganiser les informations : Redmine
  18. 18. Exemples Ticketing
  19. 19. Questions
  20. 20. MERCI En savoir plus, Visitez notre site, téléchargez nos supports : www.actency.fr www.twitter.com/actency www.facebook.com/actency Notre bookde références www.actency.fr/book Notre FactsheetDrupal www.actency.fr/drupal

×