Graphisme et ergonomie des projets...horriblesLe graphisme en projet hostile

Guillaume Hurst @ KiwiParty Strasbourg 2014

Guillaume HurstDirecteur artistique grands

comptesResponsable UX

Architecte de l’Informationactency.fr

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

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

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.

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

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

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

Expérience utilisateurOptimiser

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

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 :

Simplifier l’accès aux informations ou actions nécessaires à Georges !

Expérience utilisateurLe parcours… de Georges

Inspirations

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

Alléger la page : Planning

ExemplesPlanning

ExemplesPlanning

ExemplesTicketing

Réorganiser les informations : Redmine

ExemplesTicketing

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 book de références www.actency.fr/book

Notre Factsheet Drupal www.actency.fr/drupal