SlideShare une entreprise Scribd logo
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

Contenu connexe

En vedette

La communication média et hors média
La communication média et hors médiaLa communication média et hors média
La communication média et hors média
oz ressourcesorg
 
Changement et communication
Changement et communication Changement et communication
Changement et communication
Toulouse3C
 
Enquete : l'entreprise ideale
Enquete : l'entreprise idealeEnquete : l'entreprise ideale
Enquete : l'entreprise ideale
HelloWork
 
Livre blanc Apec LinkedIn - Lancer sa marque employeur sur le web
Livre blanc Apec LinkedIn - Lancer sa marque employeur sur le webLivre blanc Apec LinkedIn - Lancer sa marque employeur sur le web
Livre blanc Apec LinkedIn - Lancer sa marque employeur sur le web
Apec
 
Toi moi nous dossier de presse
Toi moi nous dossier de presseToi moi nous dossier de presse
Toi moi nous dossier de presseLaetitia Macé
 
Le Persuasive Design : Théories de la communication et de la psychologie huma...
Le Persuasive Design : Théories de la communication et de la psychologie huma...Le Persuasive Design : Théories de la communication et de la psychologie huma...
Le Persuasive Design : Théories de la communication et de la psychologie huma...
Arnaud Robin
 
Activité après la lecture
Activité après la lectureActivité après la lecture
Activité après la lecture
Panora Mix
 
Dossier de production groupe 34
Dossier de production groupe 34Dossier de production groupe 34
Dossier de production groupe 34
GP34Skema
 
Dossier de prod perf durable
Dossier de prod perf durableDossier de prod perf durable
Dossier de prod perf durable
Groupe110
 
EPI arts plastiques, EMC sur le thèmde de l'identité
EPI arts plastiques, EMC sur le thèmde de l'identitéEPI arts plastiques, EMC sur le thèmde de l'identité
EPI arts plastiques, EMC sur le thèmde de l'identité
Académie de Dijon - Histoire-géo
 
Dossier de production Powerpoint Groupe 3
Dossier de production Powerpoint Groupe 3Dossier de production Powerpoint Groupe 3
Dossier de production Powerpoint Groupe 3
Stefen Razafindralambo
 
Parcours cefa boost your talent
Parcours cefa boost your talentParcours cefa boost your talent
Parcours cefa boost your talent
Groupe One
 
Formes scénarios
Formes scénariosFormes scénarios
Formes scénarios
Martial Martin
 

En vedette (17)

La communication média et hors média
La communication média et hors médiaLa communication média et hors média
La communication média et hors média
 
Changement et communication
Changement et communication Changement et communication
Changement et communication
 
Enquete : l'entreprise ideale
Enquete : l'entreprise idealeEnquete : l'entreprise ideale
Enquete : l'entreprise ideale
 
Livre blanc Apec LinkedIn - Lancer sa marque employeur sur le web
Livre blanc Apec LinkedIn - Lancer sa marque employeur sur le webLivre blanc Apec LinkedIn - Lancer sa marque employeur sur le web
Livre blanc Apec LinkedIn - Lancer sa marque employeur sur le web
 
Les femmes
Les femmes Les femmes
Les femmes
 
Toi moi nous dossier de presse
Toi moi nous dossier de presseToi moi nous dossier de presse
Toi moi nous dossier de presse
 
Le Persuasive Design : Théories de la communication et de la psychologie huma...
Le Persuasive Design : Théories de la communication et de la psychologie huma...Le Persuasive Design : Théories de la communication et de la psychologie huma...
Le Persuasive Design : Théories de la communication et de la psychologie huma...
 
Parties corps
Parties corpsParties corps
Parties corps
 
Activité après la lecture
Activité après la lectureActivité après la lecture
Activité après la lecture
 
Jeu des mois
Jeu des moisJeu des mois
Jeu des mois
 
Dossier de production groupe 34
Dossier de production groupe 34Dossier de production groupe 34
Dossier de production groupe 34
 
Dossier de prod perf durable
Dossier de prod perf durableDossier de prod perf durable
Dossier de prod perf durable
 
Self Esteem
Self EsteemSelf Esteem
Self Esteem
 
EPI arts plastiques, EMC sur le thèmde de l'identité
EPI arts plastiques, EMC sur le thèmde de l'identitéEPI arts plastiques, EMC sur le thèmde de l'identité
EPI arts plastiques, EMC sur le thèmde de l'identité
 
Dossier de production Powerpoint Groupe 3
Dossier de production Powerpoint Groupe 3Dossier de production Powerpoint Groupe 3
Dossier de production Powerpoint Groupe 3
 
Parcours cefa boost your talent
Parcours cefa boost your talentParcours cefa boost your talent
Parcours cefa boost your talent
 
Formes scénarios
Formes scénariosFormes scénarios
Formes scénarios
 

Similaire à Graphisme et ergonomie des projets… horribles - Kiwi Party 2014

Créer un site web ? Méthode illustrée par la médiathèque de Roubaix - PARTIE 1
Créer un site web ? Méthode illustrée par la médiathèque de Roubaix - PARTIE 1Créer un site web ? Méthode illustrée par la médiathèque de Roubaix - PARTIE 1
Créer un site web ? Méthode illustrée par la médiathèque de Roubaix - PARTIE 1
Médiathèque de Roubaix - La Grand-Plage
 
Introduction Gestion Projet web
Introduction Gestion Projet webIntroduction Gestion Projet web
Introduction Gestion Projet web
guest6d3f53
 
introduction à la gestion de projet
introduction à la gestion de projetintroduction à la gestion de projet
introduction à la gestion de projetlaureno
 
FLUPA UX-Day 2014 - Leslie Matté et Risvan Asif : "Pourquoi l’UX Design va s’...
FLUPA UX-Day 2014 - Leslie Matté et Risvan Asif : "Pourquoi l’UX Design va s’...FLUPA UX-Day 2014 - Leslie Matté et Risvan Asif : "Pourquoi l’UX Design va s’...
FLUPA UX-Day 2014 - Leslie Matté et Risvan Asif : "Pourquoi l’UX Design va s’...
Flupa
 
FLUPA UX-Day 2014 - Sophie Henry : "L’UX sans papier, ou comment faire de l’U...
FLUPA UX-Day 2014 - Sophie Henry : "L’UX sans papier, ou comment faire de l’U...FLUPA UX-Day 2014 - Sophie Henry : "L’UX sans papier, ou comment faire de l’U...
FLUPA UX-Day 2014 - Sophie Henry : "L’UX sans papier, ou comment faire de l’U...
Flupa
 
Le management d’une équipe UX par le profil en T
Le management d’une équipe UX par le profil en TLe management d’une équipe UX par le profil en T
Le management d’une équipe UX par le profil en T
Guillaume Abel
 
test
testtest
Storyboarding for the web : Methodology and Tools
Storyboarding for the web : Methodology and ToolsStoryboarding for the web : Methodology and Tools
Storyboarding for the web : Methodology and Tools
Eric DI POL
 
L'innovation par le web 2
L'innovation par le web 2L'innovation par le web 2
L'innovation par le web 2
Cap'Com
 
Designers, prenez le pouvoir !
Designers, prenez le pouvoir !Designers, prenez le pouvoir !
Designers, prenez le pouvoir !
David Koss
 
Conf EXALT TLD - ChatGPT impact Design
Conf EXALT TLD - ChatGPT impact DesignConf EXALT TLD - ChatGPT impact Design
Conf EXALT TLD - ChatGPT impact Design
TanguyLeDuff1
 
les outils du management organisationnel
les outils du management organisationnelles outils du management organisationnel
les outils du management organisationnel
Anne-Gaëlle Gaudion
 
FLUPA UX-Day 2012 : L’UX, d’accord, mais que fait le storyboard ? par Ewane P...
FLUPA UX-Day 2012 : L’UX, d’accord, mais que fait le storyboard ? par Ewane P...FLUPA UX-Day 2012 : L’UX, d’accord, mais que fait le storyboard ? par Ewane P...
FLUPA UX-Day 2012 : L’UX, d’accord, mais que fait le storyboard ? par Ewane P...
Flupa
 
Design thinking et Agilité
Design thinking et AgilitéDesign thinking et Agilité
Design thinking et Agilité
Matthieu Gioani
 
081001 Option Entrepreneuriat Cours Visualisation
081001 Option Entrepreneuriat Cours Visualisation081001 Option Entrepreneuriat Cours Visualisation
081001 Option Entrepreneuriat Cours Visualisation
Amaury de Buchet
 
Usability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik
Usability & Wireframe par Nathalie Gouzée - Co-Founder RubbikUsability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik
Usability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik
La FeWeb
 
Conf 2023 TLD - ChatGPT impact dans le Design
Conf 2023 TLD - ChatGPT impact dans le DesignConf 2023 TLD - ChatGPT impact dans le Design
Conf 2023 TLD - ChatGPT impact dans le Design
TanguyLeDuff1
 
Agile Wake Up #3 : Lean UX
Agile Wake Up #3 : Lean UXAgile Wake Up #3 : Lean UX
Agile Wake Up #3 : Lean UX
Zenika
 
Introduction à l'ergonomie - Drupal Lyon
Introduction à l'ergonomie - Drupal LyonIntroduction à l'ergonomie - Drupal Lyon
Introduction à l'ergonomie - Drupal Lyon
Olivier Lorrain
 

Similaire à Graphisme et ergonomie des projets… horribles - Kiwi Party 2014 (20)

Créer un site web ? Méthode illustrée par la médiathèque de Roubaix - PARTIE 1
Créer un site web ? Méthode illustrée par la médiathèque de Roubaix - PARTIE 1Créer un site web ? Méthode illustrée par la médiathèque de Roubaix - PARTIE 1
Créer un site web ? Méthode illustrée par la médiathèque de Roubaix - PARTIE 1
 
Introduction Gestion Projet web
Introduction Gestion Projet webIntroduction Gestion Projet web
Introduction Gestion Projet web
 
introduction à la gestion de projet
introduction à la gestion de projetintroduction à la gestion de projet
introduction à la gestion de projet
 
FLUPA UX-Day 2014 - Leslie Matté et Risvan Asif : "Pourquoi l’UX Design va s’...
FLUPA UX-Day 2014 - Leslie Matté et Risvan Asif : "Pourquoi l’UX Design va s’...FLUPA UX-Day 2014 - Leslie Matté et Risvan Asif : "Pourquoi l’UX Design va s’...
FLUPA UX-Day 2014 - Leslie Matté et Risvan Asif : "Pourquoi l’UX Design va s’...
 
FLUPA UX-Day 2014 - Sophie Henry : "L’UX sans papier, ou comment faire de l’U...
FLUPA UX-Day 2014 - Sophie Henry : "L’UX sans papier, ou comment faire de l’U...FLUPA UX-Day 2014 - Sophie Henry : "L’UX sans papier, ou comment faire de l’U...
FLUPA UX-Day 2014 - Sophie Henry : "L’UX sans papier, ou comment faire de l’U...
 
Le management d’une équipe UX par le profil en T
Le management d’une équipe UX par le profil en TLe management d’une équipe UX par le profil en T
Le management d’une équipe UX par le profil en T
 
Ux
UxUx
Ux
 
test
testtest
test
 
Storyboarding for the web : Methodology and Tools
Storyboarding for the web : Methodology and ToolsStoryboarding for the web : Methodology and Tools
Storyboarding for the web : Methodology and Tools
 
L'innovation par le web 2
L'innovation par le web 2L'innovation par le web 2
L'innovation par le web 2
 
Designers, prenez le pouvoir !
Designers, prenez le pouvoir !Designers, prenez le pouvoir !
Designers, prenez le pouvoir !
 
Conf EXALT TLD - ChatGPT impact Design
Conf EXALT TLD - ChatGPT impact DesignConf EXALT TLD - ChatGPT impact Design
Conf EXALT TLD - ChatGPT impact Design
 
les outils du management organisationnel
les outils du management organisationnelles outils du management organisationnel
les outils du management organisationnel
 
FLUPA UX-Day 2012 : L’UX, d’accord, mais que fait le storyboard ? par Ewane P...
FLUPA UX-Day 2012 : L’UX, d’accord, mais que fait le storyboard ? par Ewane P...FLUPA UX-Day 2012 : L’UX, d’accord, mais que fait le storyboard ? par Ewane P...
FLUPA UX-Day 2012 : L’UX, d’accord, mais que fait le storyboard ? par Ewane P...
 
Design thinking et Agilité
Design thinking et AgilitéDesign thinking et Agilité
Design thinking et Agilité
 
081001 Option Entrepreneuriat Cours Visualisation
081001 Option Entrepreneuriat Cours Visualisation081001 Option Entrepreneuriat Cours Visualisation
081001 Option Entrepreneuriat Cours Visualisation
 
Usability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik
Usability & Wireframe par Nathalie Gouzée - Co-Founder RubbikUsability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik
Usability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik
 
Conf 2023 TLD - ChatGPT impact dans le Design
Conf 2023 TLD - ChatGPT impact dans le DesignConf 2023 TLD - ChatGPT impact dans le Design
Conf 2023 TLD - ChatGPT impact dans le Design
 
Agile Wake Up #3 : Lean UX
Agile Wake Up #3 : Lean UXAgile Wake Up #3 : Lean UX
Agile Wake Up #3 : Lean UX
 
Introduction à l'ergonomie - Drupal Lyon
Introduction à l'ergonomie - Drupal LyonIntroduction à l'ergonomie - Drupal Lyon
Introduction à l'ergonomie - Drupal Lyon
 

Plus de Actency

RETOURS D’EXPÉRIENCE DE STRATÉGIES MARKETING AUTOMATION : ÉCUEILS & SUCCÈS Ac...
RETOURS D’EXPÉRIENCE DE STRATÉGIES MARKETING AUTOMATION : ÉCUEILS & SUCCÈS Ac...RETOURS D’EXPÉRIENCE DE STRATÉGIES MARKETING AUTOMATION : ÉCUEILS & SUCCÈS Ac...
RETOURS D’EXPÉRIENCE DE STRATÉGIES MARKETING AUTOMATION : ÉCUEILS & SUCCÈS Ac...
Actency
 
Démystifions l'Agile - Actency Paris Open Source Summit 2019
Démystifions l'Agile - Actency Paris Open Source Summit 2019Démystifions l'Agile - Actency Paris Open Source Summit 2019
Démystifions l'Agile - Actency Paris Open Source Summit 2019
Actency
 
REX Mutuelle Mutest : témoignage d'une transformation digitale sur Drupal 8 e...
REX Mutuelle Mutest : témoignage d'une transformation digitale sur Drupal 8 e...REX Mutuelle Mutest : témoignage d'une transformation digitale sur Drupal 8 e...
REX Mutuelle Mutest : témoignage d'une transformation digitale sur Drupal 8 e...
Actency
 
Télérama et la méthode Agile : les pièges et les bonnes pratiques - Actency D...
Télérama et la méthode Agile : les pièges et les bonnes pratiques - Actency D...Télérama et la méthode Agile : les pièges et les bonnes pratiques - Actency D...
Télérama et la méthode Agile : les pièges et les bonnes pratiques - Actency D...
Actency
 
Usine à Sites Drupal 7 Drupal 8 : Témoignage ARTE, PERNOD RICARD - Actency ...
Usine à Sites Drupal 7 Drupal 8 : Témoignage ARTE, PERNOD RICARD -   Actency ...Usine à Sites Drupal 7 Drupal 8 : Témoignage ARTE, PERNOD RICARD -   Actency ...
Usine à Sites Drupal 7 Drupal 8 : Témoignage ARTE, PERNOD RICARD - Actency ...
Actency
 
Usine à Sites : CCI Alsace - Actency Drupagora 2015
Usine à Sites : CCI Alsace - Actency Drupagora 2015Usine à Sites : CCI Alsace - Actency Drupagora 2015
Usine à Sites : CCI Alsace - Actency Drupagora 2015
Actency
 
Les défis de l'intégration Drupal dans un SI complexe - Actency Drupagora 2019
Les défis de l'intégration Drupal dans un SI complexe - Actency Drupagora 2019Les défis de l'intégration Drupal dans un SI complexe - Actency Drupagora 2019
Les défis de l'intégration Drupal dans un SI complexe - Actency Drupagora 2019
Actency
 
DRUPAL EUROPE SESSION 2018 - FORMS STEPS, COMPLEX FORMS, SIMPLE UI : DRUPAL 8...
DRUPAL EUROPE SESSION 2018 - FORMS STEPS, COMPLEX FORMS, SIMPLE UI : DRUPAL 8...DRUPAL EUROPE SESSION 2018 - FORMS STEPS, COMPLEX FORMS, SIMPLE UI : DRUPAL 8...
DRUPAL EUROPE SESSION 2018 - FORMS STEPS, COMPLEX FORMS, SIMPLE UI : DRUPAL 8...
Actency
 
Drupalcon 2014 - A Large scale personalization with Drupal
Drupalcon 2014 - A Large scale personalization with DrupalDrupalcon 2014 - A Large scale personalization with Drupal
Drupalcon 2014 - A Large scale personalization with Drupal
Actency
 
Drupagora 2018 - Refonte des Mutuelles SIMA sur Drupal 8 : Difficultés et Sol...
Drupagora 2018 - Refonte des Mutuelles SIMA sur Drupal 8 : Difficultés et Sol...Drupagora 2018 - Refonte des Mutuelles SIMA sur Drupal 8 : Difficultés et Sol...
Drupagora 2018 - Refonte des Mutuelles SIMA sur Drupal 8 : Difficultés et Sol...
Actency
 
Usine à site avec Drupal - Meet up Drupal 2014
Usine à site avec Drupal - Meet up Drupal 2014Usine à site avec Drupal - Meet up Drupal 2014
Usine à site avec Drupal - Meet up Drupal 2014
Actency
 
inbound marketing & marketingautomation
inbound marketing & marketingautomationinbound marketing & marketingautomation
inbound marketing & marketingautomation
Actency
 
Industrialisation de Drupal : Usines à Sites, retour sur le cas CCI Alsace
Industrialisation de Drupal : Usines à Sites, retour sur le cas CCI AlsaceIndustrialisation de Drupal : Usines à Sites, retour sur le cas CCI Alsace
Industrialisation de Drupal : Usines à Sites, retour sur le cas CCI Alsace
Actency
 
Échapper à la refonte complète pour passer au Mobile avec le Témoignage de Bo...
Échapper à la refonte complète pour passer au Mobile avec le Témoignage de Bo...Échapper à la refonte complète pour passer au Mobile avec le Témoignage de Bo...
Échapper à la refonte complète pour passer au Mobile avec le Témoignage de Bo...
Actency
 
Vis ma vie de chef de projet Drupal | Drupagora 2013, Paris
Vis ma vie de chef de projet Drupal | Drupagora 2013, ParisVis ma vie de chef de projet Drupal | Drupagora 2013, Paris
Vis ma vie de chef de projet Drupal | Drupagora 2013, Paris
Actency
 
DrupalCamp Paris 2013 - Drupal : un CMS orienté métier
 DrupalCamp Paris 2013 - Drupal : un CMS orienté métier DrupalCamp Paris 2013 - Drupal : un CMS orienté métier
DrupalCamp Paris 2013 - Drupal : un CMS orienté métier
Actency
 
DrupalCamp Paris 2013 : Sites mobiles avec Drupal
DrupalCamp Paris 2013 : Sites mobiles avec DrupalDrupalCamp Paris 2013 : Sites mobiles avec Drupal
DrupalCamp Paris 2013 : Sites mobiles avec Drupal
Actency
 
DrupalCamp Paris 2013 : Faire une GED sous Drupal
DrupalCamp Paris 2013 : Faire une GED sous DrupalDrupalCamp Paris 2013 : Faire une GED sous Drupal
DrupalCamp Paris 2013 : Faire une GED sous Drupal
Actency
 
L'intranet collaboratif avec Drupal - Drupagora 2012
L'intranet collaboratif avec Drupal - Drupagora 2012L'intranet collaboratif avec Drupal - Drupagora 2012
L'intranet collaboratif avec Drupal - Drupagora 2012
Actency
 

Plus de Actency (19)

RETOURS D’EXPÉRIENCE DE STRATÉGIES MARKETING AUTOMATION : ÉCUEILS & SUCCÈS Ac...
RETOURS D’EXPÉRIENCE DE STRATÉGIES MARKETING AUTOMATION : ÉCUEILS & SUCCÈS Ac...RETOURS D’EXPÉRIENCE DE STRATÉGIES MARKETING AUTOMATION : ÉCUEILS & SUCCÈS Ac...
RETOURS D’EXPÉRIENCE DE STRATÉGIES MARKETING AUTOMATION : ÉCUEILS & SUCCÈS Ac...
 
Démystifions l'Agile - Actency Paris Open Source Summit 2019
Démystifions l'Agile - Actency Paris Open Source Summit 2019Démystifions l'Agile - Actency Paris Open Source Summit 2019
Démystifions l'Agile - Actency Paris Open Source Summit 2019
 
REX Mutuelle Mutest : témoignage d'une transformation digitale sur Drupal 8 e...
REX Mutuelle Mutest : témoignage d'une transformation digitale sur Drupal 8 e...REX Mutuelle Mutest : témoignage d'une transformation digitale sur Drupal 8 e...
REX Mutuelle Mutest : témoignage d'une transformation digitale sur Drupal 8 e...
 
Télérama et la méthode Agile : les pièges et les bonnes pratiques - Actency D...
Télérama et la méthode Agile : les pièges et les bonnes pratiques - Actency D...Télérama et la méthode Agile : les pièges et les bonnes pratiques - Actency D...
Télérama et la méthode Agile : les pièges et les bonnes pratiques - Actency D...
 
Usine à Sites Drupal 7 Drupal 8 : Témoignage ARTE, PERNOD RICARD - Actency ...
Usine à Sites Drupal 7 Drupal 8 : Témoignage ARTE, PERNOD RICARD -   Actency ...Usine à Sites Drupal 7 Drupal 8 : Témoignage ARTE, PERNOD RICARD -   Actency ...
Usine à Sites Drupal 7 Drupal 8 : Témoignage ARTE, PERNOD RICARD - Actency ...
 
Usine à Sites : CCI Alsace - Actency Drupagora 2015
Usine à Sites : CCI Alsace - Actency Drupagora 2015Usine à Sites : CCI Alsace - Actency Drupagora 2015
Usine à Sites : CCI Alsace - Actency Drupagora 2015
 
Les défis de l'intégration Drupal dans un SI complexe - Actency Drupagora 2019
Les défis de l'intégration Drupal dans un SI complexe - Actency Drupagora 2019Les défis de l'intégration Drupal dans un SI complexe - Actency Drupagora 2019
Les défis de l'intégration Drupal dans un SI complexe - Actency Drupagora 2019
 
DRUPAL EUROPE SESSION 2018 - FORMS STEPS, COMPLEX FORMS, SIMPLE UI : DRUPAL 8...
DRUPAL EUROPE SESSION 2018 - FORMS STEPS, COMPLEX FORMS, SIMPLE UI : DRUPAL 8...DRUPAL EUROPE SESSION 2018 - FORMS STEPS, COMPLEX FORMS, SIMPLE UI : DRUPAL 8...
DRUPAL EUROPE SESSION 2018 - FORMS STEPS, COMPLEX FORMS, SIMPLE UI : DRUPAL 8...
 
Drupalcon 2014 - A Large scale personalization with Drupal
Drupalcon 2014 - A Large scale personalization with DrupalDrupalcon 2014 - A Large scale personalization with Drupal
Drupalcon 2014 - A Large scale personalization with Drupal
 
Drupagora 2018 - Refonte des Mutuelles SIMA sur Drupal 8 : Difficultés et Sol...
Drupagora 2018 - Refonte des Mutuelles SIMA sur Drupal 8 : Difficultés et Sol...Drupagora 2018 - Refonte des Mutuelles SIMA sur Drupal 8 : Difficultés et Sol...
Drupagora 2018 - Refonte des Mutuelles SIMA sur Drupal 8 : Difficultés et Sol...
 
Usine à site avec Drupal - Meet up Drupal 2014
Usine à site avec Drupal - Meet up Drupal 2014Usine à site avec Drupal - Meet up Drupal 2014
Usine à site avec Drupal - Meet up Drupal 2014
 
inbound marketing & marketingautomation
inbound marketing & marketingautomationinbound marketing & marketingautomation
inbound marketing & marketingautomation
 
Industrialisation de Drupal : Usines à Sites, retour sur le cas CCI Alsace
Industrialisation de Drupal : Usines à Sites, retour sur le cas CCI AlsaceIndustrialisation de Drupal : Usines à Sites, retour sur le cas CCI Alsace
Industrialisation de Drupal : Usines à Sites, retour sur le cas CCI Alsace
 
Échapper à la refonte complète pour passer au Mobile avec le Témoignage de Bo...
Échapper à la refonte complète pour passer au Mobile avec le Témoignage de Bo...Échapper à la refonte complète pour passer au Mobile avec le Témoignage de Bo...
Échapper à la refonte complète pour passer au Mobile avec le Témoignage de Bo...
 
Vis ma vie de chef de projet Drupal | Drupagora 2013, Paris
Vis ma vie de chef de projet Drupal | Drupagora 2013, ParisVis ma vie de chef de projet Drupal | Drupagora 2013, Paris
Vis ma vie de chef de projet Drupal | Drupagora 2013, Paris
 
DrupalCamp Paris 2013 - Drupal : un CMS orienté métier
 DrupalCamp Paris 2013 - Drupal : un CMS orienté métier DrupalCamp Paris 2013 - Drupal : un CMS orienté métier
DrupalCamp Paris 2013 - Drupal : un CMS orienté métier
 
DrupalCamp Paris 2013 : Sites mobiles avec Drupal
DrupalCamp Paris 2013 : Sites mobiles avec DrupalDrupalCamp Paris 2013 : Sites mobiles avec Drupal
DrupalCamp Paris 2013 : Sites mobiles avec Drupal
 
DrupalCamp Paris 2013 : Faire une GED sous Drupal
DrupalCamp Paris 2013 : Faire une GED sous DrupalDrupalCamp Paris 2013 : Faire une GED sous Drupal
DrupalCamp Paris 2013 : Faire une GED sous Drupal
 
L'intranet collaboratif avec Drupal - Drupagora 2012
L'intranet collaboratif avec Drupal - Drupagora 2012L'intranet collaboratif avec Drupal - Drupagora 2012
L'intranet collaboratif avec Drupal - Drupagora 2012
 

Graphisme et ergonomie des projets… horribles - Kiwi Party 2014

  • 1. Graphisme et ergonomie des projets...horribles Le graphisme en projet hostile Guillaume Hurst @ KiwiParty Strasbourg 2014
  • 2. Guillaume Hurst Directeur artistique grands comptes Responsable UX Architecte de l’Information actency.fr
  • 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
  • 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. 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. Alléger la page : Planning Exemples Planning
  • 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

Notes de l'éditeur

  1. 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…
  2. Qu’est ce que j’entend par projet moche : Où la fonction prime sur l’esthétique
  3. En tant que graphiste le tablx je vais le faire joli
  4. Charte bien définie pour adaptibilité aux gabarits parfois nombreux (bien prévoir les gabarits et les contenus possibles)
  5. 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
  6. 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
  7. 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
  8. +/- 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
  9. 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…
  10. 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é
  11. Palette de couleurs redéfinie, information mise en avant. Travail sur l’arborescence
  12. 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…
  13. Inspiration : agence londonienne (www.jepsonrae.com)