SlideShare une entreprise Scribd logo
DES105 – 8 Fév. – 13h00


                   palais des
                   congrès
                   Paris




                   7, 8 et 9
                   février 2012
Concevoir des Interfaces
Utilisateur Efficaces &
Vendeuses
DES105
Mercredi 8 Février 2012
Olivier Dahan
Direction
                          MVP Silverlight 2012
                          MVP Silverlight 2011
                          MVP CAD 2010
                          MVP C# 2009
60 minutes pour…
  Comprendre ce qu’est le Design de logiciel
     Sa nature
     Ses méthodes
  Comprendre comment se créent les bonnes UI
  Comprendre que le Design n’est pas la cerise sur le gâteau mais une
  partie non négociable du processus de création d’une application
  moderne
  Comprendre comment mieux planifier et intégrer le Design dans la
  conception de vos logiciels
  Comprendre le travail du Designer pour mieux gérer la collaboration
  avec ce professionnel et vous éviter les déconvenues du syndrome du
  « designer sapeur pompier ».
  Le tout pour vous aider à concevoir des UI Efficaces et Vendeuses !

  Ce que nous ne pourrons pas faire en 60 minutes :
    Vous transformez en Designer
    Vous formez à Expression Design et Blend
    Faire de vous un expert en UI et UX
Please…. Avant, pas après…


                                        Binding               View non
       ViewModel
                                                              designée

                        String Activity                       TextBlock
                        "Active" "Inactive"
                                                                          $$$ !


                                        Binding                 View
       ViewModel
                                                              designée
                        String Activity                       Animation
                        "Active" "Inactive"                d’un UserControl


     Bool Active
  New/Old Properties,
                                              Converters
  ICommand , …
Objectif
Concevoir des UI efficaces et vendeuses

Efficaces

Rendre la tâche
plus aisée, rendre
l’utilisateur plus
intelligent, plus                                 Vendeuses
habile
                                                   Savoir séduire
                                                           sur une
                                                     démo, savoir
                                                 plaire sur le long
                                                             terme

        1er constat : UI efficace et vendeuse = Bonne UX !
                       Donc un bon Design !
Raisons

         Rationnelles                            Commerciales
   Seul lien       entre   le   code   et   Battre la concurrence, Attirer le
   l’utilisateur                            client, Créer le besoin


         Romantiques                             Economiques
   Art, Beauté, Séduction…                  Rentabilité, Meilleur ROI



         Pratiques                               Stratégiques
   Ergonomie, Rapidité d’exécution          Image de marque, Fidélisation
   des tâches, gain de temps                des    clients, Positionnement
                                            médias,          Obsolescence
                                            programmée
Un nouveau paradigme


  1976 : Algorithms + Data Structures = Program (Niklaus Wirth)


  2012 : Design + Code = Application


  « Un bon Design consiste en une
  communication efficace, pas en décorations au
  détriment de la lisibilité. »
  Vitaly Friedman


                               « Un Design de qualité communique avec son
                               public. Il délivre le message qu’il est censé
                               diffuser. Rien de plus, rien de moins. »
                               Paul Scrivens
L’importance du Design
« Quand même votre concierge possède un IPhone vous
ne pouvez plus fournir de logiciels au look XP ! » - Olivier
Dahan.




            Laquelle de ces UI vous fait peur, laquelle vous fait rêver ?
                                   Pourquoi ?
Qu’est ce que le Design ?

  « Le génie d’un bon Designer n’est pas défini par son habileté à
  représenter le monde tel qu’il le voit, mais par son habilité entraînée à
  le représenter comme les autres s’attendent à le voir. »
  Nishant Kothary – MS – Creative Director Mix Online.
Sémantique & Syntaxe

  Sémantique
    Le sens. La recherche du
     sens de ce qui doit être
     Designé
  La Syntaxe
    Le   contrôle de l’usage
     correct de la grammaire
     dans la construction des
     phrases d’un langage, le
     Design.
    Relation entre les grilles,
     la structure générale, le
     texte, les dessins.
Le Pragmatisme


  Un projet parfait
  sémantiquement et
  syntaxiquement mais que
  personne ne comprend est
  un échec !
  Approche réaliste
  Chercher à informer plus
  qu’à plaire
  La clarté des intentions doit
  s’imposer et les artefacts
  doivent être auto-explicatifs.
La Pertinence
  La recherche des racines de ce qu’on doit Designer amène à
  définir le champ des solutions possibles qui sont appropriées.

  La recherche de la spécificité de tout problème posé.

  La pertinence guide le choix des couleurs, des formes, des
  médias à utiliser, soit en les précisant directement soit en
  permettant d’éliminer ceux qui, a contrario, ne sont pas
  appropriés.

  La pertinence est locale-sensitive, contextuelle, socio-
  culturellement liée à la cible visée. Il n’y a pas de pertinence
  absolue (sauf rares codes internationaux et trans-
  générationnels comme « SOS »).
L’unité

Un bon Design reflète une unité   D’un objet à l’autre, d’un écran
de concept.                       à l’autre, d’un bouton à
                                  l’autre, cette unité d’aspect et
                                  de comportement doit être
                                  évidente.
La Puissance Visuelle
Nous aimons les Designs

visuellement
puissants                 Les       Designs      conceptuellement
                          faibles, aux formes, couleurs et textures
                          mal définies n’impressionnent pas, ne
                          marquent pas.




                          Il y a une infinité de
                          manières pour rendre une
                          expression puissante : jeu
                          de couleurs, d’échelles, de
                          fontes, de graisses…
L’Elégance intellectuelle


          L’élégance intellectuelle n’a rien à
          voir    avec     l’élégance      des
          manières.
          C’est une force créatrice qu’on
          retrouve    dans      les    statues
          grecques, les toiles de la
          Renaissance,       dans     certains
          théorèmes mathématiques, dans
          des formules de physique comme
          E=MC2



           P.V = m.r.T
Le processus d’un bon Design
                  Empathie, Persona
                          s,               Navigation,                        Feedback
                     Schémas               commandes         Papier, fak
                                                                                users
                    directeurs....                            e, Blend
                                                                             réels, tests
                                                             Sketching
                                                                             utilisabilité
     Le
                                                                                   …
 problème à
  résoudre
                    Connaître Users             Prototypage

                                  Interaction Design                       Evalutation
      Le Brief      Rôles                                Spécifications         &
                                 Information Design                         Itération
  Répartition
Rôles : contact     Analyse Paysage               Design visuel
  client, user,
 informatique                                         « polish »           Décisions.
                              Contenu               tonalité, typos,       Documenta
Contexte, conc               application              couleurs…               tion
urrents, bonne
        s
pratiques, term         Divergence                  Convergence
    inologie
Connaître les utilisateurs
Les buts de l’utilisateur
Il veut accomplir une ou plusieurs tâches
précises, le plus vite possible, le plus
simplement possible

                                              L’utilisateur n’aime pas se sentir
                                              « idiot », une bonne UI doit savoir le
                                              guider en accord avec ses buts, sa
                                              façon de pensée, de procéder.
                                              (Sentiment de proximité, empathie).
Il faut connaître parfaitement ces tâches
pour proposer des méthodes originales et
                                              Il est parfois « forcé » d’utiliser le
efficaces pour les réaliser
                                              logiciel, autant atténuer le rejet…
                                              S’il choisit lui-même : ne pas
                                              décevoir son attente !




Dans tous les cas il faut bien connaître
chaque profil d’utilisateur pour répondre à
ses besoins…
Les Personas

  Personne fictive qui représente un groupe cible.
  Lors de la création on lui assigne des attributs (âge, sexe,
  métier, hobbies…)
  Cela permet de créer des scénarios d’utilisation (qu’on
  retrouvera en miroir généralement dans les Use Cases
  UML) en accord avec le public visé.
  Très utilisé pour l’amélioration de l’ergonomie des logiciels
  et des sites Web.
  Utilisé aussi pour la stratégie de promotion, le marketing
  afin que application + promotion soient en cohérence
Exemple de Persona
                              Nom:        Caroline Dupond
                              Sexe:       F
                              Prof:       Directrice des ventes
                              Fam.:       Mère de famille active, 2 enfants
                              Note:       Utilise souvent la fonction loupe de son
                              PC
                                          pour afficher ce qui l’intéresse en plus
Caroline Dupond est à la foisgros.
                               une mère de famille vivant en banlieue et une directrice des ventes d’une
société d’informatique. Elle partage son temps entre sa lunettes. travail et des week-ends de loisir en
                                          Porte des semaine au
famille : balades en vélo avec ses enfants, manifestations sportives, et quelques fois des repas seule avec
son mari dans des restaurants de la capitale avant ou après avoir assisté à une pièce de théâtre, plus
rarement un film .

Caroline mène une vie active, mais sans une suite d’assistants technologiques, elle ne serait pas en mesure
de percevoir les expressions sur les visages de ses enfants, lire un menu de restaurant, ou un e-mail.
Caroline à une vision assez mauvaise, à la limite du handicap.

Née avec une vision dégradée, Allison utilise un agrandisseur d'écran sur son ordinateur portable et une
loupe pour lire les menus et les signes. Son logiciel de grossissement d'écran agrandit son écran d'ordinateur
à la maison et au travail, lui permettant de lire un texte et voir les images. Elle s'appuie également sur un
lecteur d'écran pour lire le texte à haute voix, ce qui réduit également la fatigue oculaire et des maux de tête.

Cette combinaison de produits améliore les différents aspects de la vie personnelle et professionnelle de
Caroline, lui permettant de se concentrer sur ce qui importe le plus, comme le visage de sa fille quand elle
explose de joie à Noël en découvrant ses cadeaux.
L’habileté

  Débutant pendant un temps assez court, l’utilisateur
  s’arrêtera aux solutions qu’il a trouvé sans plus jamais
  cherché plus loin.
  Seul un petit nombre ira plus loin. Les « power users ».
  La majorité des utilisateurs seront dans la moyenne
  (distribution gaussienne).
  Exception : Les applications publiques (type annuaire,
  distributeur de billet) et les applications non choisies et
  que l’utilisateur n’aime pas - La majorité des utilisateurs
  ne fera AUCUN effort pour comprendre et rejettera la
  faute sur le système…
Les schéma directeurs
 Approche du logiciel en fonction d’a
 priori personnels, sociaux, culturels,
 de réflexes, de schémas directeurs qui
 dépendent       des      connaissances
 passées relatives au domaine du
 problème traité par l’application.




                                    L’utilisateur va s’attendre à
                                    ce que l’application suive
                                    certains modèles, un certain
                                    schéma de fonctionnement.
Cognitive Friction
 Défini par Alan Cooper dans son 2d livre en 98 « the inmates are
 running the asylum : why High-Tech product drive us crazy and
 how to restore the sanity ».
              “la friction cognitive est la résistance rencontrée par
              l’intellect humain quand il est confronté à un système
              complexe de règles qui changent en même temps que
              le problème évolue”.
   Une Règle : si l’utilisateur n’y comprend rien c’est que votre interface
   est bonne à jeter, c’est aussi simple que ça…

 Exemples :
       Menu « démarrer » pour arrêter Windows XP
       Plus de « croix » pour fermer les applis sous Windows 8
       Le Menu « démarrer » type Windows 7 de Windows 8 qui n’ouvre pas de
        menu et qui renvoie sur le menu Metro Style…
       Table de caractères de Windows qui donne un code abscons et non le ALT-
        xxx qui permettrait de s’en servir…
       Le dialogue de conflit de fichier à la copie de Vista/7, incompréhensible…
Pour le plaisir…
On en trouve partout !
Sur la piste d’une bonne UX
« L’apprentissabilité »
(learnability)
  Question essentielle à se poser :
    L’utilisateur peut-il rapidement découvrir l’application et

      apprendre à s’en servir efficacement ?
  Ne pas confondre avec la 1ère impression qui est souvent
  trompeuse grâce à un design accrocheur.
  Cela se mesure avec des panels d’utilisateurs testeurs et
  des choix d’UI différents.
  Si vous ne pouvez pas réunir
  un panel même restreint
  d’utilisateurs pour tester vos
  UI : arrêter la conception
  de logiciels…
L’Utilisabilité

   Le degré d’intuitivité et de productivité de l’UI
   Cela se mesure aussi
     Assigner un tâcher à réaliser, chronométrer. Changer

       l’UI et recommencer. Choisir la meilleure !
   Une haute « utilisabilité » permet aux utilisateurs
   d’effectuer toutes les tâches courantes directement, sans
   détour.
   Utilisabilité <>Apprentissabilité
   Les bêta sont un moyen gratuit pour les éditeurs de
   remplacer un large panel d’utilisateurs testeurs…
La Clarté

  Clarté, lisibilité, priorité à l’information, c’est l’essentiel
  d’une UI réussie et d’une bonne UX.
  Viser une conception « pacifiée », « calme ». Metro Style
  est un bon exemple.
  Objets aux formes douces, simples, reconnaissables que
  l’œil repère, trie facilement, des fontes lisibles, jeu sur les
  tailles sans mélanger plusieurs fontes
  Création de groupes visuels qui respectent la sémantique.
  Une règle : se concentrer sur la clarté plutôt qu’ajouter
  des infobulles car l’UI n’est pas claire…
La liberté d’action

  Souplesse réelle, l’utilisateur ne doit pas se sentir
  « piégé » dans un choix, une procédure.
  Le retour en arrière doit être évident
  Le droit à l’erreur est essentiel
  Guider sans limiter
  Ne pas proposer de choix qui ne sont pas de la
  compétence de l’utilisateur
  Proposer des choix par défauts, masquer certaines
  options en fonction du profil de l’utilisateur
  => une fois encore : Bien connaître les utilisateurs !
Utiliser les bonnes métaphores
  Les métaphores sont essentielles : elles font venir le
  monde réel de l’utilisateur dans l’espace du logiciel
  Une métaphore réussie supprime le besoin d’un
  libellé, d’une bulle d’aide, elle participe à la clarté, à la
  lisibilité, à la mise en avant de l’information.
  La plus célèbre : la corbeille (Mac et PC)
  La notion de « bureau », de
  « dossier », « répertoire », « document », ce sont des
  métaphores tellement évidentes qu’on a du mal à en sortir
  (les tuiles de Windows 8 arriveront-elles à détrôner la
  notion de bureau ?)
  Attention : elles sont culturelles ! Dans le doute mieux vaut
  un texte qu’une métaphore dessinée ou filmée (non
  localisable).
Ne pas abuser des métaphores
!Les métaphores hyperréalistes ne sont pas forcément les meilleures
Design en action
Exemple




          Des outils de surveillance de NAS
               VB + Windows Forms
Exemple designé

           ReadyNasMonitor (E-Naxos, WPF)
Exemple designé avec
métaphores
Console Silverlight
Autres conférences

• Le livre de recette du design et de l'ergonomie pour le développeur (DES101)
• Mise en pratique de l'ergonomie et du design sur un exemple concret : Mishra
  reader (DES201)
• Au cœur d'un projet Kinect innovant (DES202)
• 2012 : les utilisateurs prennent le pouvoir ? (KEY202)
• Blend 4 pour les Designers (et pour les développeurs) (DES203)
• Retour d'expérience sur la conception et la construction d'une application
  METRO pour WP7 (DES103)
Merci de votre participation !




  Questions ?


Contact :         odahan@gmail.com
Dot Blog :        www.e-naxos.com/blog
Pour aller plus loin

                                               Prochaines sessions des Dev Camps
  Chaque semaine, les                            10
                                                          Live     Open Data - Développer des applications riches avec le
                                               février
  DevCamps                                      2012

                                                 16
                                                         Meeting   protocole Open Data


  ALM, Azure, Windows Phone, HTML5, OpenData   février
                                                          Live
                                                         Meeting
                                                                   Azure series - Développer des applications sociales sur
                                                                   la plateforme Windows Azure
                                                2012
  http://msdn.microsoft.com/fr-fr/devcamp
                                                 17
                                                          Live     Comprendre le canvas avec Galactic et la librairie
                                               février
                                                         Meeting   three.js
                                                2012

  Téléchargement, ressources                     21
                                               février
                                                          Live     La production automatisée de code avec CodeFluent
                                                         Meeting   Entities
  et toolkits : RdV sur MSDN                    2012

                                               2 mars     Live     Comprendre et mettre en oeuvre le toolkit Azure pour
  http://msdn.microsoft.com/fr-fr/              2012     Meeting   Windows Phone 7, iOS et Android

                                               6 mars     Live
                                                                   Nuget et ALM
                                                2012     Meeting

  Les offres à connaître                       9 mars
                                                2012
                                                          Live
                                                         Meeting
                                                                   Kinect - Bien gérer la vie de son capteur


         90 jours d’essai gratuit de Windows   13 mars
                                                2012
                                                          Live
                                                         Meeting
                                                                   Sharepoint series - Automatisation des tests

         Azure                                 14 mars    Live     TFS Health Check - vérifier la bonne santé de votre
          www.windowsazure.fr                   2012     Meeting   plateforme de développement

                                               15 mars    Live     Azure series - Développer pour les téléphones, les
                                                2012     Meeting   tablettes et le cloud avec Visual Studio 2010
         Jusqu’à 35% de réduction sur Visual   16 mars    Live     Applications METRO design - Désossage en règle d'un
         Studio Pro, avec l’abonnement MSDN     2012     Meeting   template METRO javascript

                                               20 mars    Live     Retour d'expérience LightSwitch, Optimisation de
          www.visualstudio.fr                   2012     Meeting   l'accès aux données, Intégration Silverlight

                                               23 mars    Live     OAuth - la clé de l'utilisation des réseaux sociaux dans
                                                2012     Meeting   votre application

Contenu connexe

Tendances

Cours (A) Gobelins Master 2 MICNI
Cours (A) Gobelins Master 2 MICNICours (A) Gobelins Master 2 MICNI
Cours (A) Gobelins Master 2 MICNI
David Raichman
 
7. Du Design UX au Design de la collaboration
7. Du Design UX au Design de la collaboration7. Du Design UX au Design de la collaboration
7. Du Design UX au Design de la collaboration
Laurent Barbat
 
Design Thinking & user expérience
Design Thinking  & user expérienceDesign Thinking  & user expérience
Design Thinking & user expérience
Mustapha BOUBEKRI, MBA, PMP, PMI-ACP
 
Design, ergonomie et lisibilité des sites internet, Frederique Game
Design, ergonomie et lisibilité des sites internet, Frederique GameDesign, ergonomie et lisibilité des sites internet, Frederique Game
Design, ergonomie et lisibilité des sites internet, Frederique Game
Frédérique Game
 
M2i Webinar - Motivation, mémorisation, efficacité : zoom sur la gamification...
M2i Webinar - Motivation, mémorisation, efficacité : zoom sur la gamification...M2i Webinar - Motivation, mémorisation, efficacité : zoom sur la gamification...
M2i Webinar - Motivation, mémorisation, efficacité : zoom sur la gamification...
M2i Formation
 
Pres Strass Fr
Pres Strass FrPres Strass Fr
Pres Strass Frnielsvdm
 
FLUPA UX-Days 2016 - "La transdisciplinarité et la co-conception. retour d'ex...
FLUPA UX-Days 2016 - "La transdisciplinarité et la co-conception. retour d'ex...FLUPA UX-Days 2016 - "La transdisciplinarité et la co-conception. retour d'ex...
FLUPA UX-Days 2016 - "La transdisciplinarité et la co-conception. retour d'ex...
Flupa
 
FLUPA UX-Days 2016 - "Construire de vrais personas à partir de données réelle...
FLUPA UX-Days 2016 - "Construire de vrais personas à partir de données réelle...FLUPA UX-Days 2016 - "Construire de vrais personas à partir de données réelle...
FLUPA UX-Days 2016 - "Construire de vrais personas à partir de données réelle...
Flupa
 
Mobile design
Mobile designMobile design
Mobile design
Hadina RIMTIC
 
User Experience
User ExperienceUser Experience
UX Mobile - Experience Utilisateur Mobile
UX Mobile - Experience Utilisateur MobileUX Mobile - Experience Utilisateur Mobile
UX Mobile - Experience Utilisateur Mobile
Audrey CHATEL
 
Modèle de brief UX, par *designers interactifs*
Modèle de brief UX, par *designers interactifs*Modèle de brief UX, par *designers interactifs*
Modèle de brief UX, par *designers interactifs*
designers interactifs
 
Bien passer le Store : Le respect des guidelines
Bien passer le Store : Le respect des guidelinesBien passer le Store : Le respect des guidelines
Bien passer le Store : Le respect des guidelines
Microsoft Technet France
 
Ux design & ergonomie des interfaces 6ème édition (extrait)
Ux design & ergonomie des interfaces 6ème édition (extrait) Ux design & ergonomie des interfaces 6ème édition (extrait)
Ux design & ergonomie des interfaces 6ème édition (extrait)
Usabilis
 
La matinale le fil : Design experience utilisateur pour tous
La matinale le fil : Design experience utilisateur pour tousLa matinale le fil : Design experience utilisateur pour tous
La matinale le fil : Design experience utilisateur pour tous
Kiss The Bride
 
Mix07 Ergonomie et Experience Utilisateur Steria
Mix07 Ergonomie et Experience Utilisateur SteriaMix07 Ergonomie et Experience Utilisateur Steria
Mix07 Ergonomie et Experience Utilisateur Steria
Steria
 
Kafecom Communication - L'Agence
Kafecom Communication - L'AgenceKafecom Communication - L'Agence
Kafecom Communication - L'Agence
Catherine Barradeau
 
Le Rapid Prototyping, ça marche !
Le Rapid Prototyping, ça marche !Le Rapid Prototyping, ça marche !
Le Rapid Prototyping, ça marche !
Catherine Verfaillie
 
Ux design
Ux designUx design
Ux design
niklofr
 
Designer l'expérience utilisateur @ Web_UX 2011
Designer l'expérience utilisateur @ Web_UX 2011Designer l'expérience utilisateur @ Web_UX 2011
Designer l'expérience utilisateur @ Web_UX 2011
Sylvie Daumal
 

Tendances (20)

Cours (A) Gobelins Master 2 MICNI
Cours (A) Gobelins Master 2 MICNICours (A) Gobelins Master 2 MICNI
Cours (A) Gobelins Master 2 MICNI
 
7. Du Design UX au Design de la collaboration
7. Du Design UX au Design de la collaboration7. Du Design UX au Design de la collaboration
7. Du Design UX au Design de la collaboration
 
Design Thinking & user expérience
Design Thinking  & user expérienceDesign Thinking  & user expérience
Design Thinking & user expérience
 
Design, ergonomie et lisibilité des sites internet, Frederique Game
Design, ergonomie et lisibilité des sites internet, Frederique GameDesign, ergonomie et lisibilité des sites internet, Frederique Game
Design, ergonomie et lisibilité des sites internet, Frederique Game
 
M2i Webinar - Motivation, mémorisation, efficacité : zoom sur la gamification...
M2i Webinar - Motivation, mémorisation, efficacité : zoom sur la gamification...M2i Webinar - Motivation, mémorisation, efficacité : zoom sur la gamification...
M2i Webinar - Motivation, mémorisation, efficacité : zoom sur la gamification...
 
Pres Strass Fr
Pres Strass FrPres Strass Fr
Pres Strass Fr
 
FLUPA UX-Days 2016 - "La transdisciplinarité et la co-conception. retour d'ex...
FLUPA UX-Days 2016 - "La transdisciplinarité et la co-conception. retour d'ex...FLUPA UX-Days 2016 - "La transdisciplinarité et la co-conception. retour d'ex...
FLUPA UX-Days 2016 - "La transdisciplinarité et la co-conception. retour d'ex...
 
FLUPA UX-Days 2016 - "Construire de vrais personas à partir de données réelle...
FLUPA UX-Days 2016 - "Construire de vrais personas à partir de données réelle...FLUPA UX-Days 2016 - "Construire de vrais personas à partir de données réelle...
FLUPA UX-Days 2016 - "Construire de vrais personas à partir de données réelle...
 
Mobile design
Mobile designMobile design
Mobile design
 
User Experience
User ExperienceUser Experience
User Experience
 
UX Mobile - Experience Utilisateur Mobile
UX Mobile - Experience Utilisateur MobileUX Mobile - Experience Utilisateur Mobile
UX Mobile - Experience Utilisateur Mobile
 
Modèle de brief UX, par *designers interactifs*
Modèle de brief UX, par *designers interactifs*Modèle de brief UX, par *designers interactifs*
Modèle de brief UX, par *designers interactifs*
 
Bien passer le Store : Le respect des guidelines
Bien passer le Store : Le respect des guidelinesBien passer le Store : Le respect des guidelines
Bien passer le Store : Le respect des guidelines
 
Ux design & ergonomie des interfaces 6ème édition (extrait)
Ux design & ergonomie des interfaces 6ème édition (extrait) Ux design & ergonomie des interfaces 6ème édition (extrait)
Ux design & ergonomie des interfaces 6ème édition (extrait)
 
La matinale le fil : Design experience utilisateur pour tous
La matinale le fil : Design experience utilisateur pour tousLa matinale le fil : Design experience utilisateur pour tous
La matinale le fil : Design experience utilisateur pour tous
 
Mix07 Ergonomie et Experience Utilisateur Steria
Mix07 Ergonomie et Experience Utilisateur SteriaMix07 Ergonomie et Experience Utilisateur Steria
Mix07 Ergonomie et Experience Utilisateur Steria
 
Kafecom Communication - L'Agence
Kafecom Communication - L'AgenceKafecom Communication - L'Agence
Kafecom Communication - L'Agence
 
Le Rapid Prototyping, ça marche !
Le Rapid Prototyping, ça marche !Le Rapid Prototyping, ça marche !
Le Rapid Prototyping, ça marche !
 
Ux design
Ux designUx design
Ux design
 
Designer l'expérience utilisateur @ Web_UX 2011
Designer l'expérience utilisateur @ Web_UX 2011Designer l'expérience utilisateur @ Web_UX 2011
Designer l'expérience utilisateur @ Web_UX 2011
 

Similaire à Concevoir des Interfaces Utilisateur efficaces et vendeuses

Slide presentation ideoscop-2013 v5
Slide presentation ideoscop-2013 v5Slide presentation ideoscop-2013 v5
Slide presentation ideoscop-2013 v5Ideoscop.com
 
Présentation des métiers du design numérique à l'ESSEC - mai 2009
Présentation des métiers du design numérique à l'ESSEC - mai 2009Présentation des métiers du design numérique à l'ESSEC - mai 2009
Présentation des métiers du design numérique à l'ESSEC - mai 2009
France
 
Les métiers du design interactif (2011)
Les métiers du design interactif (2011)Les métiers du design interactif (2011)
Les métiers du design interactif (2011)
designers interactifs
 
Applications tactiles : Design en mode maquette papier et story-board
Applications tactiles : Design en mode maquette papier et story-boardApplications tactiles : Design en mode maquette papier et story-board
Applications tactiles : Design en mode maquette papier et story-board
Microsoft
 
Présentation Métier / Responsable Webdesign
Présentation Métier / Responsable WebdesignPrésentation Métier / Responsable Webdesign
Présentation Métier / Responsable Webdesign
takaclike
 
Présentation Bertin Ergonomie - Transformation digitale
Présentation Bertin Ergonomie - Transformation digitalePrésentation Bertin Ergonomie - Transformation digitale
Présentation Bertin Ergonomie - Transformation digitale
Hugues Randriatsoa
 
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
 
Guide des metiers du design interactif 2015 par Aquent et *designers interact...
Guide des metiers du design interactif 2015 par Aquent et *designers interact...Guide des metiers du design interactif 2015 par Aquent et *designers interact...
Guide des metiers du design interactif 2015 par Aquent et *designers interact...
Benoit Drouillat
 
Guide des metiers du design interactif 2015 par Aquent et *designers interact...
Guide des metiers du design interactif 2015 par Aquent et *designers interact...Guide des metiers du design interactif 2015 par Aquent et *designers interact...
Guide des metiers du design interactif 2015 par Aquent et *designers interact...
designers interactifs
 
Construire son système d'exploitation
Construire son système d'exploitationConstruire son système d'exploitation
Construire son système d'exploitation
Julian Legendre
 
Le skeuomorphisme et l'approche authentiquement numérique de Microsoft
Le skeuomorphisme et l'approche authentiquement numérique de MicrosoftLe skeuomorphisme et l'approche authentiquement numérique de Microsoft
Le skeuomorphisme et l'approche authentiquement numérique de Microsoft
Microsoft Décideurs IT
 
Optimiser l'expérience utilisateur de l'Open Source
Optimiser l'expérience utilisateur de l'Open SourceOptimiser l'expérience utilisateur de l'Open Source
Optimiser l'expérience utilisateur de l'Open Source
Marc Wabnitz
 
OnMap la solution saas de la business transformation
OnMap la solution saas de la business transformationOnMap la solution saas de la business transformation
OnMap la solution saas de la business transformation
Nomia
 
La datavisualisation en entreprise
La datavisualisation en entrepriseLa datavisualisation en entreprise
La datavisualisation en entreprise
EXPOVIZ
 
🇫🇷 Product Managers & Product Designers : perspective sur ces rôles en évolution
🇫🇷 Product Managers & Product Designers : perspective sur ces rôles en évolution🇫🇷 Product Managers & Product Designers : perspective sur ces rôles en évolution
🇫🇷 Product Managers & Product Designers : perspective sur ces rôles en évolution
Jeremy Barre
 
Tendances 2021
Tendances 2021Tendances 2021
Tendances 2021
Agence 50A
 
Ou et comment recruter un.e UX designer pour ma startup ? @GEN
Ou et comment recruter un.e UX designer pour ma startup ? @GENOu et comment recruter un.e UX designer pour ma startup ? @GEN
Ou et comment recruter un.e UX designer pour ma startup ? @GEN
FrenchTechCentral
 
L'architecture de l'information
L'architecture de l'informationL'architecture de l'information
L'architecture de l'information
France
 
Atelier - Bienvenue dans l'ère post-webdesign
Atelier - Bienvenue dans l'ère post-webdesignAtelier - Bienvenue dans l'ère post-webdesign
Atelier - Bienvenue dans l'ère post-webdesign
Medialibs
 

Similaire à Concevoir des Interfaces Utilisateur efficaces et vendeuses (20)

Slide presentation ideoscop-2013 v5
Slide presentation ideoscop-2013 v5Slide presentation ideoscop-2013 v5
Slide presentation ideoscop-2013 v5
 
Présentation des métiers du design numérique à l'ESSEC - mai 2009
Présentation des métiers du design numérique à l'ESSEC - mai 2009Présentation des métiers du design numérique à l'ESSEC - mai 2009
Présentation des métiers du design numérique à l'ESSEC - mai 2009
 
Les métiers du design interactif (2011)
Les métiers du design interactif (2011)Les métiers du design interactif (2011)
Les métiers du design interactif (2011)
 
Applications tactiles : Design en mode maquette papier et story-board
Applications tactiles : Design en mode maquette papier et story-boardApplications tactiles : Design en mode maquette papier et story-board
Applications tactiles : Design en mode maquette papier et story-board
 
Présentation Métier / Responsable Webdesign
Présentation Métier / Responsable WebdesignPrésentation Métier / Responsable Webdesign
Présentation Métier / Responsable Webdesign
 
Présentation Bertin Ergonomie - Transformation digitale
Présentation Bertin Ergonomie - Transformation digitalePrésentation Bertin Ergonomie - Transformation digitale
Présentation Bertin Ergonomie - Transformation digitale
 
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...
 
Guide des metiers du design interactif 2015 par Aquent et *designers interact...
Guide des metiers du design interactif 2015 par Aquent et *designers interact...Guide des metiers du design interactif 2015 par Aquent et *designers interact...
Guide des metiers du design interactif 2015 par Aquent et *designers interact...
 
Guide des metiers du design interactif 2015 par Aquent et *designers interact...
Guide des metiers du design interactif 2015 par Aquent et *designers interact...Guide des metiers du design interactif 2015 par Aquent et *designers interact...
Guide des metiers du design interactif 2015 par Aquent et *designers interact...
 
Construire son système d'exploitation
Construire son système d'exploitationConstruire son système d'exploitation
Construire son système d'exploitation
 
Le skeuomorphisme et l'approche authentiquement numérique de Microsoft
Le skeuomorphisme et l'approche authentiquement numérique de MicrosoftLe skeuomorphisme et l'approche authentiquement numérique de Microsoft
Le skeuomorphisme et l'approche authentiquement numérique de Microsoft
 
Optimiser l'expérience utilisateur de l'Open Source
Optimiser l'expérience utilisateur de l'Open SourceOptimiser l'expérience utilisateur de l'Open Source
Optimiser l'expérience utilisateur de l'Open Source
 
OnMap la solution saas de la business transformation
OnMap la solution saas de la business transformationOnMap la solution saas de la business transformation
OnMap la solution saas de la business transformation
 
La datavisualisation en entreprise
La datavisualisation en entrepriseLa datavisualisation en entreprise
La datavisualisation en entreprise
 
Projet et strategie
Projet et strategieProjet et strategie
Projet et strategie
 
🇫🇷 Product Managers & Product Designers : perspective sur ces rôles en évolution
🇫🇷 Product Managers & Product Designers : perspective sur ces rôles en évolution🇫🇷 Product Managers & Product Designers : perspective sur ces rôles en évolution
🇫🇷 Product Managers & Product Designers : perspective sur ces rôles en évolution
 
Tendances 2021
Tendances 2021Tendances 2021
Tendances 2021
 
Ou et comment recruter un.e UX designer pour ma startup ? @GEN
Ou et comment recruter un.e UX designer pour ma startup ? @GENOu et comment recruter un.e UX designer pour ma startup ? @GEN
Ou et comment recruter un.e UX designer pour ma startup ? @GEN
 
L'architecture de l'information
L'architecture de l'informationL'architecture de l'information
L'architecture de l'information
 
Atelier - Bienvenue dans l'ère post-webdesign
Atelier - Bienvenue dans l'ère post-webdesignAtelier - Bienvenue dans l'ère post-webdesign
Atelier - Bienvenue dans l'ère post-webdesign
 

Plus de Microsoft

Uwp + Xamarin : Du nouveau en terre du milieu
Uwp + Xamarin : Du nouveau en terre du milieuUwp + Xamarin : Du nouveau en terre du milieu
Uwp + Xamarin : Du nouveau en terre du milieu
Microsoft
 
La Blockchain pas à PaaS
La Blockchain pas à PaaSLa Blockchain pas à PaaS
La Blockchain pas à PaaS
Microsoft
 
Tester, Monitorer et Déployer son application mobile
Tester, Monitorer et Déployer son application mobileTester, Monitorer et Déployer son application mobile
Tester, Monitorer et Déployer son application mobile
Microsoft
 
Windows 10, un an après – Nouveautés & Démo
Windows 10, un an après – Nouveautés & Démo Windows 10, un an après – Nouveautés & Démo
Windows 10, un an après – Nouveautés & Démo
Microsoft
 
Prenez votre pied avec les bots et cognitive services.
Prenez votre pied avec les bots et cognitive services.Prenez votre pied avec les bots et cognitive services.
Prenez votre pied avec les bots et cognitive services.
Microsoft
 
Office 365 Dev PnP & PowerShell : exploitez enfin le potentiel de votre écosy...
Office 365 Dev PnP & PowerShell : exploitez enfin le potentiel de votre écosy...Office 365 Dev PnP & PowerShell : exploitez enfin le potentiel de votre écosy...
Office 365 Dev PnP & PowerShell : exploitez enfin le potentiel de votre écosy...
Microsoft
 
Créer un bot de A à Z
Créer un bot de A à ZCréer un bot de A à Z
Créer un bot de A à Z
Microsoft
 
Microsoft Composition, pierre angulaire de vos applications ?
Microsoft Composition, pierre angulaire de vos applications ?Microsoft Composition, pierre angulaire de vos applications ?
Microsoft Composition, pierre angulaire de vos applications ?
Microsoft
 
Les nouveautés SQL Server 2016
Les nouveautés SQL Server 2016Les nouveautés SQL Server 2016
Les nouveautés SQL Server 2016
Microsoft
 
Conteneurs Linux ou Windows : quelles approches pour des IT agiles ?
Conteneurs Linux ou Windows : quelles approches pour des IT agiles ?Conteneurs Linux ou Windows : quelles approches pour des IT agiles ?
Conteneurs Linux ou Windows : quelles approches pour des IT agiles ?
Microsoft
 
Administration et supervision depuis le Cloud avec Azure Logs Analytics
Administration et supervision depuis le Cloud avec Azure Logs AnalyticsAdministration et supervision depuis le Cloud avec Azure Logs Analytics
Administration et supervision depuis le Cloud avec Azure Logs Analytics
Microsoft
 
Retour d'expérience de projets Azure IoT "large scale" (MicroServices, portag...
Retour d'expérience de projets Azure IoT "large scale" (MicroServices, portag...Retour d'expérience de projets Azure IoT "large scale" (MicroServices, portag...
Retour d'expérience de projets Azure IoT "large scale" (MicroServices, portag...
Microsoft
 
Plan de Reprise d'Activité avec Azure Site Recovery
Plan de Reprise d'Activité avec Azure Site RecoveryPlan de Reprise d'Activité avec Azure Site Recovery
Plan de Reprise d'Activité avec Azure Site Recovery
Microsoft
 
Modélisation, déploiement et gestion des infrastructures Cloud : outils et bo...
Modélisation, déploiement et gestion des infrastructures Cloud : outils et bo...Modélisation, déploiement et gestion des infrastructures Cloud : outils et bo...
Modélisation, déploiement et gestion des infrastructures Cloud : outils et bo...
Microsoft
 
Transformation de la représentation : De la VR à la RA, aller & retour.
Transformation de la représentation : De la VR à la RA, aller & retour.Transformation de la représentation : De la VR à la RA, aller & retour.
Transformation de la représentation : De la VR à la RA, aller & retour.
Microsoft
 
Quelles architectures pour vos applications Cloud, de la VM au conteneur : ça...
Quelles architectures pour vos applications Cloud, de la VM au conteneur : ça...Quelles architectures pour vos applications Cloud, de la VM au conteneur : ça...
Quelles architectures pour vos applications Cloud, de la VM au conteneur : ça...
Microsoft
 
Introduction à ASP.NET Core
Introduction à ASP.NET CoreIntroduction à ASP.NET Core
Introduction à ASP.NET Core
Microsoft
 
Open Source et Microsoft Azure, rêve ou réalité ?
Open Source et Microsoft Azure, rêve ou réalité ?Open Source et Microsoft Azure, rêve ou réalité ?
Open Source et Microsoft Azure, rêve ou réalité ?
Microsoft
 
Comment développer sur la console Xbox One avec une application Universal Win...
Comment développer sur la console Xbox One avec une application Universal Win...Comment développer sur la console Xbox One avec une application Universal Win...
Comment développer sur la console Xbox One avec une application Universal Win...
Microsoft
 
Azure Service Fabric pour les développeurs
Azure Service Fabric pour les développeursAzure Service Fabric pour les développeurs
Azure Service Fabric pour les développeurs
Microsoft
 

Plus de Microsoft (20)

Uwp + Xamarin : Du nouveau en terre du milieu
Uwp + Xamarin : Du nouveau en terre du milieuUwp + Xamarin : Du nouveau en terre du milieu
Uwp + Xamarin : Du nouveau en terre du milieu
 
La Blockchain pas à PaaS
La Blockchain pas à PaaSLa Blockchain pas à PaaS
La Blockchain pas à PaaS
 
Tester, Monitorer et Déployer son application mobile
Tester, Monitorer et Déployer son application mobileTester, Monitorer et Déployer son application mobile
Tester, Monitorer et Déployer son application mobile
 
Windows 10, un an après – Nouveautés & Démo
Windows 10, un an après – Nouveautés & Démo Windows 10, un an après – Nouveautés & Démo
Windows 10, un an après – Nouveautés & Démo
 
Prenez votre pied avec les bots et cognitive services.
Prenez votre pied avec les bots et cognitive services.Prenez votre pied avec les bots et cognitive services.
Prenez votre pied avec les bots et cognitive services.
 
Office 365 Dev PnP & PowerShell : exploitez enfin le potentiel de votre écosy...
Office 365 Dev PnP & PowerShell : exploitez enfin le potentiel de votre écosy...Office 365 Dev PnP & PowerShell : exploitez enfin le potentiel de votre écosy...
Office 365 Dev PnP & PowerShell : exploitez enfin le potentiel de votre écosy...
 
Créer un bot de A à Z
Créer un bot de A à ZCréer un bot de A à Z
Créer un bot de A à Z
 
Microsoft Composition, pierre angulaire de vos applications ?
Microsoft Composition, pierre angulaire de vos applications ?Microsoft Composition, pierre angulaire de vos applications ?
Microsoft Composition, pierre angulaire de vos applications ?
 
Les nouveautés SQL Server 2016
Les nouveautés SQL Server 2016Les nouveautés SQL Server 2016
Les nouveautés SQL Server 2016
 
Conteneurs Linux ou Windows : quelles approches pour des IT agiles ?
Conteneurs Linux ou Windows : quelles approches pour des IT agiles ?Conteneurs Linux ou Windows : quelles approches pour des IT agiles ?
Conteneurs Linux ou Windows : quelles approches pour des IT agiles ?
 
Administration et supervision depuis le Cloud avec Azure Logs Analytics
Administration et supervision depuis le Cloud avec Azure Logs AnalyticsAdministration et supervision depuis le Cloud avec Azure Logs Analytics
Administration et supervision depuis le Cloud avec Azure Logs Analytics
 
Retour d'expérience de projets Azure IoT "large scale" (MicroServices, portag...
Retour d'expérience de projets Azure IoT "large scale" (MicroServices, portag...Retour d'expérience de projets Azure IoT "large scale" (MicroServices, portag...
Retour d'expérience de projets Azure IoT "large scale" (MicroServices, portag...
 
Plan de Reprise d'Activité avec Azure Site Recovery
Plan de Reprise d'Activité avec Azure Site RecoveryPlan de Reprise d'Activité avec Azure Site Recovery
Plan de Reprise d'Activité avec Azure Site Recovery
 
Modélisation, déploiement et gestion des infrastructures Cloud : outils et bo...
Modélisation, déploiement et gestion des infrastructures Cloud : outils et bo...Modélisation, déploiement et gestion des infrastructures Cloud : outils et bo...
Modélisation, déploiement et gestion des infrastructures Cloud : outils et bo...
 
Transformation de la représentation : De la VR à la RA, aller & retour.
Transformation de la représentation : De la VR à la RA, aller & retour.Transformation de la représentation : De la VR à la RA, aller & retour.
Transformation de la représentation : De la VR à la RA, aller & retour.
 
Quelles architectures pour vos applications Cloud, de la VM au conteneur : ça...
Quelles architectures pour vos applications Cloud, de la VM au conteneur : ça...Quelles architectures pour vos applications Cloud, de la VM au conteneur : ça...
Quelles architectures pour vos applications Cloud, de la VM au conteneur : ça...
 
Introduction à ASP.NET Core
Introduction à ASP.NET CoreIntroduction à ASP.NET Core
Introduction à ASP.NET Core
 
Open Source et Microsoft Azure, rêve ou réalité ?
Open Source et Microsoft Azure, rêve ou réalité ?Open Source et Microsoft Azure, rêve ou réalité ?
Open Source et Microsoft Azure, rêve ou réalité ?
 
Comment développer sur la console Xbox One avec une application Universal Win...
Comment développer sur la console Xbox One avec une application Universal Win...Comment développer sur la console Xbox One avec une application Universal Win...
Comment développer sur la console Xbox One avec une application Universal Win...
 
Azure Service Fabric pour les développeurs
Azure Service Fabric pour les développeursAzure Service Fabric pour les développeurs
Azure Service Fabric pour les développeurs
 

Dernier

Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
OCTO Technology
 
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
OCTO Technology
 
OCTO TALKS : 4 Tech Trends du Software Engineering.pdf
OCTO TALKS : 4 Tech Trends du Software Engineering.pdfOCTO TALKS : 4 Tech Trends du Software Engineering.pdf
OCTO TALKS : 4 Tech Trends du Software Engineering.pdf
OCTO Technology
 
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Laurent Speyser
 
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'universitéDe l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
Université de Franche-Comté
 
Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024
UNITECBordeaux
 

Dernier (6)

Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
 
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
 
OCTO TALKS : 4 Tech Trends du Software Engineering.pdf
OCTO TALKS : 4 Tech Trends du Software Engineering.pdfOCTO TALKS : 4 Tech Trends du Software Engineering.pdf
OCTO TALKS : 4 Tech Trends du Software Engineering.pdf
 
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
 
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'universitéDe l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
 
Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024
 

Concevoir des Interfaces Utilisateur efficaces et vendeuses

  • 1. DES105 – 8 Fév. – 13h00 palais des congrès Paris 7, 8 et 9 février 2012
  • 2. Concevoir des Interfaces Utilisateur Efficaces & Vendeuses DES105 Mercredi 8 Février 2012 Olivier Dahan Direction MVP Silverlight 2012 MVP Silverlight 2011 MVP CAD 2010 MVP C# 2009
  • 3. 60 minutes pour… Comprendre ce qu’est le Design de logiciel  Sa nature  Ses méthodes Comprendre comment se créent les bonnes UI Comprendre que le Design n’est pas la cerise sur le gâteau mais une partie non négociable du processus de création d’une application moderne Comprendre comment mieux planifier et intégrer le Design dans la conception de vos logiciels Comprendre le travail du Designer pour mieux gérer la collaboration avec ce professionnel et vous éviter les déconvenues du syndrome du « designer sapeur pompier ». Le tout pour vous aider à concevoir des UI Efficaces et Vendeuses ! Ce que nous ne pourrons pas faire en 60 minutes :  Vous transformez en Designer  Vous formez à Expression Design et Blend  Faire de vous un expert en UI et UX
  • 4. Please…. Avant, pas après… Binding View non ViewModel designée String Activity TextBlock "Active" "Inactive" $$$ ! Binding View ViewModel designée String Activity Animation "Active" "Inactive" d’un UserControl Bool Active New/Old Properties, Converters ICommand , …
  • 5. Objectif Concevoir des UI efficaces et vendeuses Efficaces Rendre la tâche plus aisée, rendre l’utilisateur plus intelligent, plus Vendeuses habile Savoir séduire sur une démo, savoir plaire sur le long terme 1er constat : UI efficace et vendeuse = Bonne UX ! Donc un bon Design !
  • 6. Raisons Rationnelles Commerciales Seul lien entre le code et Battre la concurrence, Attirer le l’utilisateur client, Créer le besoin Romantiques Economiques Art, Beauté, Séduction… Rentabilité, Meilleur ROI Pratiques Stratégiques Ergonomie, Rapidité d’exécution Image de marque, Fidélisation des tâches, gain de temps des clients, Positionnement médias, Obsolescence programmée
  • 7. Un nouveau paradigme 1976 : Algorithms + Data Structures = Program (Niklaus Wirth) 2012 : Design + Code = Application « Un bon Design consiste en une communication efficace, pas en décorations au détriment de la lisibilité. » Vitaly Friedman « Un Design de qualité communique avec son public. Il délivre le message qu’il est censé diffuser. Rien de plus, rien de moins. » Paul Scrivens
  • 8. L’importance du Design « Quand même votre concierge possède un IPhone vous ne pouvez plus fournir de logiciels au look XP ! » - Olivier Dahan. Laquelle de ces UI vous fait peur, laquelle vous fait rêver ? Pourquoi ?
  • 9. Qu’est ce que le Design ? « Le génie d’un bon Designer n’est pas défini par son habileté à représenter le monde tel qu’il le voit, mais par son habilité entraînée à le représenter comme les autres s’attendent à le voir. » Nishant Kothary – MS – Creative Director Mix Online.
  • 10. Sémantique & Syntaxe Sémantique  Le sens. La recherche du sens de ce qui doit être Designé La Syntaxe  Le contrôle de l’usage correct de la grammaire dans la construction des phrases d’un langage, le Design.  Relation entre les grilles, la structure générale, le texte, les dessins.
  • 11. Le Pragmatisme Un projet parfait sémantiquement et syntaxiquement mais que personne ne comprend est un échec ! Approche réaliste Chercher à informer plus qu’à plaire La clarté des intentions doit s’imposer et les artefacts doivent être auto-explicatifs.
  • 12. La Pertinence La recherche des racines de ce qu’on doit Designer amène à définir le champ des solutions possibles qui sont appropriées. La recherche de la spécificité de tout problème posé. La pertinence guide le choix des couleurs, des formes, des médias à utiliser, soit en les précisant directement soit en permettant d’éliminer ceux qui, a contrario, ne sont pas appropriés. La pertinence est locale-sensitive, contextuelle, socio- culturellement liée à la cible visée. Il n’y a pas de pertinence absolue (sauf rares codes internationaux et trans- générationnels comme « SOS »).
  • 13. L’unité Un bon Design reflète une unité D’un objet à l’autre, d’un écran de concept. à l’autre, d’un bouton à l’autre, cette unité d’aspect et de comportement doit être évidente.
  • 14. La Puissance Visuelle Nous aimons les Designs visuellement puissants Les Designs conceptuellement faibles, aux formes, couleurs et textures mal définies n’impressionnent pas, ne marquent pas. Il y a une infinité de manières pour rendre une expression puissante : jeu de couleurs, d’échelles, de fontes, de graisses…
  • 15. L’Elégance intellectuelle L’élégance intellectuelle n’a rien à voir avec l’élégance des manières. C’est une force créatrice qu’on retrouve dans les statues grecques, les toiles de la Renaissance, dans certains théorèmes mathématiques, dans des formules de physique comme E=MC2 P.V = m.r.T
  • 16. Le processus d’un bon Design Empathie, Persona s, Navigation, Feedback Schémas commandes Papier, fak users directeurs.... e, Blend réels, tests Sketching utilisabilité Le … problème à résoudre Connaître Users Prototypage Interaction Design Evalutation Le Brief Rôles Spécifications & Information Design Itération Répartition Rôles : contact Analyse Paysage Design visuel client, user, informatique « polish » Décisions. Contenu tonalité, typos, Documenta Contexte, conc application couleurs… tion urrents, bonne s pratiques, term Divergence Convergence inologie
  • 18. Les buts de l’utilisateur Il veut accomplir une ou plusieurs tâches précises, le plus vite possible, le plus simplement possible L’utilisateur n’aime pas se sentir « idiot », une bonne UI doit savoir le guider en accord avec ses buts, sa façon de pensée, de procéder. (Sentiment de proximité, empathie). Il faut connaître parfaitement ces tâches pour proposer des méthodes originales et Il est parfois « forcé » d’utiliser le efficaces pour les réaliser logiciel, autant atténuer le rejet… S’il choisit lui-même : ne pas décevoir son attente ! Dans tous les cas il faut bien connaître chaque profil d’utilisateur pour répondre à ses besoins…
  • 19. Les Personas Personne fictive qui représente un groupe cible. Lors de la création on lui assigne des attributs (âge, sexe, métier, hobbies…) Cela permet de créer des scénarios d’utilisation (qu’on retrouvera en miroir généralement dans les Use Cases UML) en accord avec le public visé. Très utilisé pour l’amélioration de l’ergonomie des logiciels et des sites Web. Utilisé aussi pour la stratégie de promotion, le marketing afin que application + promotion soient en cohérence
  • 20. Exemple de Persona Nom: Caroline Dupond Sexe: F Prof: Directrice des ventes Fam.: Mère de famille active, 2 enfants Note: Utilise souvent la fonction loupe de son PC pour afficher ce qui l’intéresse en plus Caroline Dupond est à la foisgros. une mère de famille vivant en banlieue et une directrice des ventes d’une société d’informatique. Elle partage son temps entre sa lunettes. travail et des week-ends de loisir en Porte des semaine au famille : balades en vélo avec ses enfants, manifestations sportives, et quelques fois des repas seule avec son mari dans des restaurants de la capitale avant ou après avoir assisté à une pièce de théâtre, plus rarement un film . Caroline mène une vie active, mais sans une suite d’assistants technologiques, elle ne serait pas en mesure de percevoir les expressions sur les visages de ses enfants, lire un menu de restaurant, ou un e-mail. Caroline à une vision assez mauvaise, à la limite du handicap. Née avec une vision dégradée, Allison utilise un agrandisseur d'écran sur son ordinateur portable et une loupe pour lire les menus et les signes. Son logiciel de grossissement d'écran agrandit son écran d'ordinateur à la maison et au travail, lui permettant de lire un texte et voir les images. Elle s'appuie également sur un lecteur d'écran pour lire le texte à haute voix, ce qui réduit également la fatigue oculaire et des maux de tête. Cette combinaison de produits améliore les différents aspects de la vie personnelle et professionnelle de Caroline, lui permettant de se concentrer sur ce qui importe le plus, comme le visage de sa fille quand elle explose de joie à Noël en découvrant ses cadeaux.
  • 21. L’habileté Débutant pendant un temps assez court, l’utilisateur s’arrêtera aux solutions qu’il a trouvé sans plus jamais cherché plus loin. Seul un petit nombre ira plus loin. Les « power users ». La majorité des utilisateurs seront dans la moyenne (distribution gaussienne). Exception : Les applications publiques (type annuaire, distributeur de billet) et les applications non choisies et que l’utilisateur n’aime pas - La majorité des utilisateurs ne fera AUCUN effort pour comprendre et rejettera la faute sur le système…
  • 22. Les schéma directeurs Approche du logiciel en fonction d’a priori personnels, sociaux, culturels, de réflexes, de schémas directeurs qui dépendent des connaissances passées relatives au domaine du problème traité par l’application. L’utilisateur va s’attendre à ce que l’application suive certains modèles, un certain schéma de fonctionnement.
  • 23. Cognitive Friction Défini par Alan Cooper dans son 2d livre en 98 « the inmates are running the asylum : why High-Tech product drive us crazy and how to restore the sanity ». “la friction cognitive est la résistance rencontrée par l’intellect humain quand il est confronté à un système complexe de règles qui changent en même temps que le problème évolue”. Une Règle : si l’utilisateur n’y comprend rien c’est que votre interface est bonne à jeter, c’est aussi simple que ça… Exemples :  Menu « démarrer » pour arrêter Windows XP  Plus de « croix » pour fermer les applis sous Windows 8  Le Menu « démarrer » type Windows 7 de Windows 8 qui n’ouvre pas de menu et qui renvoie sur le menu Metro Style…  Table de caractères de Windows qui donne un code abscons et non le ALT- xxx qui permettrait de s’en servir…  Le dialogue de conflit de fichier à la copie de Vista/7, incompréhensible…
  • 25. On en trouve partout !
  • 26. Sur la piste d’une bonne UX
  • 27. « L’apprentissabilité » (learnability) Question essentielle à se poser :  L’utilisateur peut-il rapidement découvrir l’application et apprendre à s’en servir efficacement ? Ne pas confondre avec la 1ère impression qui est souvent trompeuse grâce à un design accrocheur. Cela se mesure avec des panels d’utilisateurs testeurs et des choix d’UI différents. Si vous ne pouvez pas réunir un panel même restreint d’utilisateurs pour tester vos UI : arrêter la conception de logiciels…
  • 28. L’Utilisabilité Le degré d’intuitivité et de productivité de l’UI Cela se mesure aussi  Assigner un tâcher à réaliser, chronométrer. Changer l’UI et recommencer. Choisir la meilleure ! Une haute « utilisabilité » permet aux utilisateurs d’effectuer toutes les tâches courantes directement, sans détour. Utilisabilité <>Apprentissabilité Les bêta sont un moyen gratuit pour les éditeurs de remplacer un large panel d’utilisateurs testeurs…
  • 29. La Clarté Clarté, lisibilité, priorité à l’information, c’est l’essentiel d’une UI réussie et d’une bonne UX. Viser une conception « pacifiée », « calme ». Metro Style est un bon exemple. Objets aux formes douces, simples, reconnaissables que l’œil repère, trie facilement, des fontes lisibles, jeu sur les tailles sans mélanger plusieurs fontes Création de groupes visuels qui respectent la sémantique. Une règle : se concentrer sur la clarté plutôt qu’ajouter des infobulles car l’UI n’est pas claire…
  • 30. La liberté d’action Souplesse réelle, l’utilisateur ne doit pas se sentir « piégé » dans un choix, une procédure. Le retour en arrière doit être évident Le droit à l’erreur est essentiel Guider sans limiter Ne pas proposer de choix qui ne sont pas de la compétence de l’utilisateur Proposer des choix par défauts, masquer certaines options en fonction du profil de l’utilisateur => une fois encore : Bien connaître les utilisateurs !
  • 31. Utiliser les bonnes métaphores Les métaphores sont essentielles : elles font venir le monde réel de l’utilisateur dans l’espace du logiciel Une métaphore réussie supprime le besoin d’un libellé, d’une bulle d’aide, elle participe à la clarté, à la lisibilité, à la mise en avant de l’information. La plus célèbre : la corbeille (Mac et PC) La notion de « bureau », de « dossier », « répertoire », « document », ce sont des métaphores tellement évidentes qu’on a du mal à en sortir (les tuiles de Windows 8 arriveront-elles à détrôner la notion de bureau ?) Attention : elles sont culturelles ! Dans le doute mieux vaut un texte qu’une métaphore dessinée ou filmée (non localisable).
  • 32. Ne pas abuser des métaphores !Les métaphores hyperréalistes ne sont pas forcément les meilleures
  • 34. Exemple Des outils de surveillance de NAS VB + Windows Forms
  • 35. Exemple designé ReadyNasMonitor (E-Naxos, WPF)
  • 38. Autres conférences • Le livre de recette du design et de l'ergonomie pour le développeur (DES101) • Mise en pratique de l'ergonomie et du design sur un exemple concret : Mishra reader (DES201) • Au cœur d'un projet Kinect innovant (DES202) • 2012 : les utilisateurs prennent le pouvoir ? (KEY202) • Blend 4 pour les Designers (et pour les développeurs) (DES203) • Retour d'expérience sur la conception et la construction d'une application METRO pour WP7 (DES103)
  • 39. Merci de votre participation ! Questions ? Contact : odahan@gmail.com Dot Blog : www.e-naxos.com/blog
  • 40. Pour aller plus loin Prochaines sessions des Dev Camps Chaque semaine, les 10 Live Open Data - Développer des applications riches avec le février DevCamps 2012 16 Meeting protocole Open Data ALM, Azure, Windows Phone, HTML5, OpenData février Live Meeting Azure series - Développer des applications sociales sur la plateforme Windows Azure 2012 http://msdn.microsoft.com/fr-fr/devcamp 17 Live Comprendre le canvas avec Galactic et la librairie février Meeting three.js 2012 Téléchargement, ressources 21 février Live La production automatisée de code avec CodeFluent Meeting Entities et toolkits : RdV sur MSDN 2012 2 mars Live Comprendre et mettre en oeuvre le toolkit Azure pour http://msdn.microsoft.com/fr-fr/ 2012 Meeting Windows Phone 7, iOS et Android 6 mars Live Nuget et ALM 2012 Meeting Les offres à connaître 9 mars 2012 Live Meeting Kinect - Bien gérer la vie de son capteur 90 jours d’essai gratuit de Windows 13 mars 2012 Live Meeting Sharepoint series - Automatisation des tests Azure 14 mars Live TFS Health Check - vérifier la bonne santé de votre www.windowsazure.fr 2012 Meeting plateforme de développement 15 mars Live Azure series - Développer pour les téléphones, les 2012 Meeting tablettes et le cloud avec Visual Studio 2010 Jusqu’à 35% de réduction sur Visual 16 mars Live Applications METRO design - Désossage en règle d'un Studio Pro, avec l’abonnement MSDN 2012 Meeting template METRO javascript 20 mars Live Retour d'expérience LightSwitch, Optimisation de www.visualstudio.fr 2012 Meeting l'accès aux données, Intégration Silverlight 23 mars Live OAuth - la clé de l'utilisation des réseaux sociaux dans 2012 Meeting votre application