Graphisme et ergonomie des projets...horribles
Le graphisme en projet hostile
Guillaume Hurst @ KiwiParty Strasbourg 2014
Guillaume Hurst
Directeur artistique grands comptes
Responsable UX
Architecte de l’Information
actency.fr
Au programme…
1. Faisonsconnaissance
2. Lesprojets«horribles»
3. Aborderleprojet
4. WD& UX
5. Sourcesd’inspiration
6. Exem...
Les projets
horribles
En quelques mots...
Les projets qui laissent
peu de place au graphisme :
Extranets, intranets
Gestio...
Aborderle projet
La vision globale :
Il ne faut pas voir ces projets comme des sites Internet.
Ils sont plus complexes, on...
Graphisme
Comment faire
Eviter de surcharger des pages déjà souvent complexes
Design simple
Comment ?
Flat design ?
Grille...
Expérience utilisateur
Comment faire
Un design orienté utilisateur
Tout faire pour que l’utilisateur s’y retrouve
dans les...
Hiérarchiser, optimiser, rationaliser :
Réduire la profondeur de
navigations
Revoir l’arborescence
Hiérarchiser le contenu...
On peut alléger une page grâce aux fonctionnalités.
Rendre les actions plus intuitives, moins chonophages.
Expérience util...
Expérience utilisateur
Le parcours
Comment définir le parcours de l’utilisateur ?
Etudier les différents profils
Ce qu’il ...
Identification
Entrée de niveau 1
Entrée de niveau 2, 3, 4…
Calendriers partagés
Calendrier de Mathilde
Patron de Georges ...
Simplifier l’accès aux informations ou actions nécessaires à Georges !
Expérience utilisateur
Le parcours… de Georges
Inspirations
Sources d’inspiration
Ressources
Le Flat Design se prête très bien
aux interfaces complexes :
Facile de trouver des templa...
Alléger la page : Planning
Exemples
Planning
Exemples
Planning
Exemples
Ticketing
Réorganiser les informations : Redmine
Exemples
Ticketing
Questions
MERCI
En savoir plus,
Visitez notre site, téléchargez nos supports :
www.actency.fr
www.twitter.com/actency
www.facebook.c...
Prochain SlideShare
Chargement dans…5
×

Graphisme et ergonomie des projets… horribles - Kiwi Party 2014

2 663 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
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
2 663
Sur SlideShare
0
Issues des intégrations
0
Intégrations
230
Actions
Partages
0
Téléchargements
27
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • 15 ans - Travaillé en agence de com ou travaillé sur projets type bancaire, assurance, gros comptes sur plusieurs années
    Déclic : depuis 3 ans actency – drupal donc gros projets, souvent applicatifs avec profiling, ged…
  • Qu’est ce que j’entend par projet moche :
    Où la fonction prime sur l’esthétique
  • En tant que graphiste le tablx je vais le faire joli
  • Charte bien définie pour adaptibilité aux gabarits parfois nombreux (bien prévoir les gabarits et les contenus possibles)
  • Zones : but que l’utilisteur s’y retrouve, et d’avoir des gabarits simples à décliner, adaptables
    Palette : actions, titres, zones --- classique pour accessibilité, mais ici pour conserver le focus sur les actions
    Fonctionnalités : Filtres, hierarchie des listes
  • Profondeur : onglets, raccourcis, quick access…
    Arbo : Plusieurs niveaux, isoler l’important du secondaire
    Hierarchiser : différencier contenu rédactionel, applicatif…
    Assembler : on peut consulter, filtrer, editer en une seule page
  • Plutôt que : Menu / mon compte / Mes coordonnées / modifier // formulaire / enregistrer…
    On a supprimé une entrée dans le menu, on est + user friendly et Georges Doe est content
  • +/- Personnas – checker les ventes, ajouter des produits… profiling mais ca = défini par AI
    Veut : important pour retour d’experience – client satisfait
    Ex : Jérôme, légèrement dégarni entre son planning a la fin de chaque projet
  • 15 ans - Travaillé en agence de com ou travaillé sur projets type bancaire, assurance, gros comptes sur plusieurs années
    Déclic : depuis 3 ans actency – drupal donc gros projets, souvent applicatifs avec profiling, ged…
  • Flat : Je n’aime pas le flat pour le flat (esthetique). Mais pas d’éléments inutiles, iconographie efficace, priorité au contenu (ce qu’on cherche)
    OS : WP = hub
    Tablettes : souvent contrainte de taille / on peu pas y mettre 10 entrées de nav, pk le faire sur PC?
    Kits UI : relativiser – ok style, mais important = fonctionnalité
  • Palette de couleurs redéfinie, information mise en avant. Travail sur l’arborescence
  • Navigation d’actions à 9 entrées
    Des listes Des filtres
    Une recherche… en plus, choisir le type de filtre, le paramétrer, valider, recharger la page…
  • Inspiration : agence londonienne (www.jepsonrae.com)
  • 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

    ×