SlideShare une entreprise Scribd logo
1  sur  8
Télécharger pour lire hors ligne
LES 5 FONDAMENTAUX
D’UNE INTERFACE RÉUSSIE
AVRIL2017
Nous concevons et créons des interfaces depuis bientôt 20 ans.
De cette expérience nous avonstiré ces 5 fondamentaux qui
n’ont pasvaleurde règles mais plutôt de conseils et de bonnes
pratiques.
Ils s’appliquent dans l’ordre bien sûrmais s’abordent aussi
comme untout, chacun enrichissant les 4 autres.
Certainsvous paraitrons peut être évidents mais à cause même
de cette évidence ils restenttrop souvent ignorés. D’autres seront
plus étonnants et sont issus directement de notre expérience.
Nous espérons qu’ilsvous aideront.
LES 5 FONDAMENTAUX
D’UNE INTERFACE RÉUSSIE
Rangez et classez !
Bien établi dans la cultureweb, souvent survolé dans
celle de l’application métier, letravail de structure des
fonctionnalités et de leurs relations est primordial
> Cartographierles contenus
> Hiérarchiserles fonctionnalités parnature
> Etablirune arborescence
> Construire les parcours utilisateurs / profils
Structurerles
fonctionnalités1-
Concevoir
l’interactivité2-
Ne partez pas à l’aventure sans un plan !
C’est untravail de conception en amont qui se mène en
collaboration avec les équipestechnique
> Spécifierles éléments permanents
> Structurerla navigation
> Définirles zones d’affichage
> Indiquerles comportements
Multiplierles accès3-
Utilisez plusieurs langages !
Les utilisateurs et leurs objectifs sont multiples, il faut
diversifierles scénarios de navigation en fonction des
usages
> Représenterles données (dashboard)
> Créerdes raccourcis
> Penserlatransversalité
>Adapteraux différents devices
Communiquez !
Il ne s’agit pas simplement de placerun logo en haut à
gauche.Votre interface est un grand support de com !
Tout doit participeràvotre identité
> Consolidervotre image de marque
> Créerdes zones communicantes
> Charterles éléments graphiques
> Designerles représentations de données
Affirmervotre
identité4-
Créez l’expérience !
La cohérence surl’ensemble de l’interface crée l’expérience.
Nevous arrêtez pas aux écrans structurants mais soignez
les détails
>Assurerun suivi de direction artistique
> Garantirla cohérence des écrans
> Homogénéiserles pictogrammes
> Rédigerune charte graphique
Soignerles
déclinaisons5-
CONCEPTION
& CRÉATION DE
DESIGN D’INTERFACE
WWW.HIGHBOLD.COM

Contenu connexe

Similaire à High bold 5fondamentaux2017

RCS, Réseau Communication Santé - Delphine Rémy Boutang
RCS, Réseau Communication Santé - Delphine Rémy BoutangRCS, Réseau Communication Santé - Delphine Rémy Boutang
RCS, Réseau Communication Santé - Delphine Rémy Boutangthe bureau, digital agency
 
Le guide d'un entretien gagnant - by Mycvfactory
Le guide d'un entretien gagnant - by MycvfactoryLe guide d'un entretien gagnant - by Mycvfactory
Le guide d'un entretien gagnant - by MycvfactoryPauline Lahary
 
Conférence Paris Web 2015 - Vers une bonne pratique du Pair Design
Conférence Paris Web 2015 - Vers une bonne pratique du Pair DesignConférence Paris Web 2015 - Vers une bonne pratique du Pair Design
Conférence Paris Web 2015 - Vers une bonne pratique du Pair DesignCatherine Verfaillie
 
mark, Marque et Marques
mark, Marque et Marquesmark, Marque et Marques
mark, Marque et MarquesArcbees
 
Aligner les conversations sur les objectifs business
Aligner les conversations sur les objectifs businessAligner les conversations sur les objectifs business
Aligner les conversations sur les objectifs businessAnthony Poncier
 
Guide de l'identité numérique - Août 2012
Guide de l'identité numérique - Août 2012Guide de l'identité numérique - Août 2012
Guide de l'identité numérique - Août 2012Agence Double Numérique
 
Guide de l'identité numérique aliaz
Guide de l'identité numérique aliazGuide de l'identité numérique aliaz
Guide de l'identité numérique aliazHelloWork
 
Conférence Rebooster_votre_carrière_grâce_au_réseau_ et à linked_in
Conférence Rebooster_votre_carrière_grâce_au_réseau_ et à linked_in Conférence Rebooster_votre_carrière_grâce_au_réseau_ et à linked_in
Conférence Rebooster_votre_carrière_grâce_au_réseau_ et à linked_in L'Espace Dirigeants
 
Atelier sur l'utilisation efficace de linkedin et viadeo, gilles payet pour s...
Atelier sur l'utilisation efficace de linkedin et viadeo, gilles payet pour s...Atelier sur l'utilisation efficace de linkedin et viadeo, gilles payet pour s...
Atelier sur l'utilisation efficace de linkedin et viadeo, gilles payet pour s...Transmission RH
 
Un Réseau Social pour gérer des projet!
Un Réseau Social pour gérer des projet!Un Réseau Social pour gérer des projet!
Un Réseau Social pour gérer des projet!afisi
 
Quelle place pour un réseau social dans un intranet
Quelle place pour un réseau social dans un intranetQuelle place pour un réseau social dans un intranet
Quelle place pour un réseau social dans un intranetAnthony Poncier
 
Grosjean Agile User Experience XP DAY France 2009
Grosjean Agile User Experience XP DAY France 2009Grosjean Agile User Experience XP DAY France 2009
Grosjean Agile User Experience XP DAY France 2009Jean Claude GROSJEAN
 
Les réseaux sociaux professionnels et l'identité numérique - Dispo cadres - s...
Les réseaux sociaux professionnels et l'identité numérique - Dispo cadres - s...Les réseaux sociaux professionnels et l'identité numérique - Dispo cadres - s...
Les réseaux sociaux professionnels et l'identité numérique - Dispo cadres - s...Le Groupe La Poste
 
Faciliter le changement d’une culture d’entreprise grâce à l’EX (employee eXp...
Faciliter le changement d’une culture d’entreprise grâce à l’EX (employee eXp...Faciliter le changement d’une culture d’entreprise grâce à l’EX (employee eXp...
Faciliter le changement d’une culture d’entreprise grâce à l’EX (employee eXp...Capian
 
Conférence Rebooster votre carrière grâce au réseau et à LinkedIn !
Conférence Rebooster votre carrière grâce au réseau et à LinkedIn !Conférence Rebooster votre carrière grâce au réseau et à LinkedIn !
Conférence Rebooster votre carrière grâce au réseau et à LinkedIn !L'Espace Dirigeants
 
Flupa ux days2017 "Trier tout cela! 10 façons créatives d'utiliser le tri par...
Flupa ux days2017 "Trier tout cela! 10 façons créatives d'utiliser le tri par...Flupa ux days2017 "Trier tout cela! 10 façons créatives d'utiliser le tri par...
Flupa ux days2017 "Trier tout cela! 10 façons créatives d'utiliser le tri par...Flupa
 
Développer en mode kick-ass à Scrum Day
Développer en mode kick-ass à Scrum DayDévelopper en mode kick-ass à Scrum Day
Développer en mode kick-ass à Scrum DaySamuel Le Berrigaud
 
Tunis 2.0 : les fondamentaux de l'entreprise 2.0
Tunis 2.0 : les fondamentaux de l'entreprise 2.0Tunis 2.0 : les fondamentaux de l'entreprise 2.0
Tunis 2.0 : les fondamentaux de l'entreprise 2.0Anthony Poncier
 

Similaire à High bold 5fondamentaux2017 (20)

RCS, Réseau Communication Santé - Delphine Rémy Boutang
RCS, Réseau Communication Santé - Delphine Rémy BoutangRCS, Réseau Communication Santé - Delphine Rémy Boutang
RCS, Réseau Communication Santé - Delphine Rémy Boutang
 
Le guide d'un entretien gagnant - by Mycvfactory
Le guide d'un entretien gagnant - by MycvfactoryLe guide d'un entretien gagnant - by Mycvfactory
Le guide d'un entretien gagnant - by Mycvfactory
 
Conférence Paris Web 2015 - Vers une bonne pratique du Pair Design
Conférence Paris Web 2015 - Vers une bonne pratique du Pair DesignConférence Paris Web 2015 - Vers une bonne pratique du Pair Design
Conférence Paris Web 2015 - Vers une bonne pratique du Pair Design
 
Livre blanc "Design des portails de formation"
Livre blanc "Design des portails de formation"Livre blanc "Design des portails de formation"
Livre blanc "Design des portails de formation"
 
mark, Marque et Marques
mark, Marque et Marquesmark, Marque et Marques
mark, Marque et Marques
 
Aligner les conversations sur les objectifs business
Aligner les conversations sur les objectifs businessAligner les conversations sur les objectifs business
Aligner les conversations sur les objectifs business
 
Guide de l'identité numérique - Août 2012
Guide de l'identité numérique - Août 2012Guide de l'identité numérique - Août 2012
Guide de l'identité numérique - Août 2012
 
Guide de l'identité numérique aliaz
Guide de l'identité numérique aliazGuide de l'identité numérique aliaz
Guide de l'identité numérique aliaz
 
Conférence Rebooster_votre_carrière_grâce_au_réseau_ et à linked_in
Conférence Rebooster_votre_carrière_grâce_au_réseau_ et à linked_in Conférence Rebooster_votre_carrière_grâce_au_réseau_ et à linked_in
Conférence Rebooster_votre_carrière_grâce_au_réseau_ et à linked_in
 
Atelier sur l'utilisation efficace de linkedin et viadeo, gilles payet pour s...
Atelier sur l'utilisation efficace de linkedin et viadeo, gilles payet pour s...Atelier sur l'utilisation efficace de linkedin et viadeo, gilles payet pour s...
Atelier sur l'utilisation efficace de linkedin et viadeo, gilles payet pour s...
 
Un Réseau Social pour gérer des projet!
Un Réseau Social pour gérer des projet!Un Réseau Social pour gérer des projet!
Un Réseau Social pour gérer des projet!
 
Article Duperrin
Article DuperrinArticle Duperrin
Article Duperrin
 
Quelle place pour un réseau social dans un intranet
Quelle place pour un réseau social dans un intranetQuelle place pour un réseau social dans un intranet
Quelle place pour un réseau social dans un intranet
 
Grosjean Agile User Experience XP DAY France 2009
Grosjean Agile User Experience XP DAY France 2009Grosjean Agile User Experience XP DAY France 2009
Grosjean Agile User Experience XP DAY France 2009
 
Les réseaux sociaux professionnels et l'identité numérique - Dispo cadres - s...
Les réseaux sociaux professionnels et l'identité numérique - Dispo cadres - s...Les réseaux sociaux professionnels et l'identité numérique - Dispo cadres - s...
Les réseaux sociaux professionnels et l'identité numérique - Dispo cadres - s...
 
Faciliter le changement d’une culture d’entreprise grâce à l’EX (employee eXp...
Faciliter le changement d’une culture d’entreprise grâce à l’EX (employee eXp...Faciliter le changement d’une culture d’entreprise grâce à l’EX (employee eXp...
Faciliter le changement d’une culture d’entreprise grâce à l’EX (employee eXp...
 
Conférence Rebooster votre carrière grâce au réseau et à LinkedIn !
Conférence Rebooster votre carrière grâce au réseau et à LinkedIn !Conférence Rebooster votre carrière grâce au réseau et à LinkedIn !
Conférence Rebooster votre carrière grâce au réseau et à LinkedIn !
 
Flupa ux days2017 "Trier tout cela! 10 façons créatives d'utiliser le tri par...
Flupa ux days2017 "Trier tout cela! 10 façons créatives d'utiliser le tri par...Flupa ux days2017 "Trier tout cela! 10 façons créatives d'utiliser le tri par...
Flupa ux days2017 "Trier tout cela! 10 façons créatives d'utiliser le tri par...
 
Développer en mode kick-ass à Scrum Day
Développer en mode kick-ass à Scrum DayDévelopper en mode kick-ass à Scrum Day
Développer en mode kick-ass à Scrum Day
 
Tunis 2.0 : les fondamentaux de l'entreprise 2.0
Tunis 2.0 : les fondamentaux de l'entreprise 2.0Tunis 2.0 : les fondamentaux de l'entreprise 2.0
Tunis 2.0 : les fondamentaux de l'entreprise 2.0
 

High bold 5fondamentaux2017

  • 1. LES 5 FONDAMENTAUX D’UNE INTERFACE RÉUSSIE AVRIL2017
  • 2. Nous concevons et créons des interfaces depuis bientôt 20 ans. De cette expérience nous avonstiré ces 5 fondamentaux qui n’ont pasvaleurde règles mais plutôt de conseils et de bonnes pratiques. Ils s’appliquent dans l’ordre bien sûrmais s’abordent aussi comme untout, chacun enrichissant les 4 autres. Certainsvous paraitrons peut être évidents mais à cause même de cette évidence ils restenttrop souvent ignorés. D’autres seront plus étonnants et sont issus directement de notre expérience. Nous espérons qu’ilsvous aideront. LES 5 FONDAMENTAUX D’UNE INTERFACE RÉUSSIE
  • 3. Rangez et classez ! Bien établi dans la cultureweb, souvent survolé dans celle de l’application métier, letravail de structure des fonctionnalités et de leurs relations est primordial > Cartographierles contenus > Hiérarchiserles fonctionnalités parnature > Etablirune arborescence > Construire les parcours utilisateurs / profils Structurerles fonctionnalités1-
  • 4. Concevoir l’interactivité2- Ne partez pas à l’aventure sans un plan ! C’est untravail de conception en amont qui se mène en collaboration avec les équipestechnique > Spécifierles éléments permanents > Structurerla navigation > Définirles zones d’affichage > Indiquerles comportements
  • 5. Multiplierles accès3- Utilisez plusieurs langages ! Les utilisateurs et leurs objectifs sont multiples, il faut diversifierles scénarios de navigation en fonction des usages > Représenterles données (dashboard) > Créerdes raccourcis > Penserlatransversalité >Adapteraux différents devices
  • 6. Communiquez ! Il ne s’agit pas simplement de placerun logo en haut à gauche.Votre interface est un grand support de com ! Tout doit participeràvotre identité > Consolidervotre image de marque > Créerdes zones communicantes > Charterles éléments graphiques > Designerles représentations de données Affirmervotre identité4-
  • 7. Créez l’expérience ! La cohérence surl’ensemble de l’interface crée l’expérience. Nevous arrêtez pas aux écrans structurants mais soignez les détails >Assurerun suivi de direction artistique > Garantirla cohérence des écrans > Homogénéiserles pictogrammes > Rédigerune charte graphique Soignerles déclinaisons5-
  • 8. CONCEPTION & CRÉATION DE DESIGN D’INTERFACE WWW.HIGHBOLD.COM