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. 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

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

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.

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

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

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

On peut alléger une page grâce aux fonctionnalités.
Rendre les actions plus intuitives, moins chonophages.
Expérience utilisateur
Optimiser

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

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 :

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 templates, des UI Kits ou des
ressources
OS mobiles (IOS7 – WP8…)
Applications mobiles/tablettes

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.com/actency
Notre bookde références
www.actency.fr/book
Notre FactsheetDrupal
www.actency.fr/drupal