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/
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. 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. 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. 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. 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. 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. On peut alléger une page grâce aux fonctionnalités.
Rendre les actions plus intuitives, moins chonophages.
Expérience utilisateur
Optimiser
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. Simplifier l’accès aux informations ou actions nécessaires à Georges !
Expérience utilisateur
Le parcours… de Georges
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 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 listesDes filtres
Une recherche… en plus, choisir le type de filtre, le paramétrer, valider, recharger la page…