Interview de Jean-François Nogier, auteur de “UX Design & ergonomie des interfaces”

À l’occasion de la sortie du nouveau livre de Jean-François Nogier, ” UX Design & ergonomie des interfaces “, nous avons pu poser nos questions à l’auteur :

 

portrait jean francois nogier - Interview de Jean-François Nogier, auteur de "UX Design & ergonomie des interfaces"1. Avez-vous un conseil pour les jeunes UX designer ?

Le conseil que je donnerais aux jeunes UX Designers, c’est qu’ils soient prêts à se remettre en question ! Lorsqu’on fait de l’UX, qu’on conçoit pour des êtres humains, il n’y a ni vérité absolue, ni certitude, et surtout pas d’a priori. Nous ne pouvons pas aborder un design avec des idées préconçues, car le propre de la démarche UX c’est que le design résulte de l’étude des utilisateurs, de leur activité et du contexte dans lequel ils la réalisent.

Qu’il ne pense pas que l’UX c’est une question de talent, qu’il a lui la chance de mieux savoir ce dont les utilisateurs ont besoin. L’UX c’est avant tout une démarche méthodologique rigoureuse qui permet de concevoir un service adapté au besoin des utilisateurs et à leur contexte d’utilisation.

Qu’il ne commette pas l’erreur si souvent rencontrée qui consiste à penser qu’après tout l’UX c’est du bon sens ou bien encore une question de tendance, qu’une interface performante, c’est l’interface qu’il souhaite (lui, UX designer).

L’UX c’est faire preuve d’empathie, oublier ses préjugés pour n’écouter que les utilisateurs.

Peu importe ses propres goûts, ou encore les tendances du moment, pour être un bon UX Designer, il faut savoir écouter et comprendre les utilisateurs. C’est ainsi qu’il concevra une interface durable au delà des effets de mode.

2. Qu’est-ce que cela signifie et que faut-il pour être un grand UX designer ?

Pour être franc, je ne sais pas ce que signifie « grand UX designer » ! Qu’est-ce qu’un grand UX design ? Un design n’est pas intrinsèquement bon ou mauvais. La qualité de l’expérience utilisateur (UX) dépend du contexte d’usage et des utilisateurs visés. Un même design peut sembler évident pour certains et compliqué pour d’autres.

Mais pour répondre à votre question, je dirais qu’un grand UX designer sait concevoir le design qui va permettre aux utilisateurs visés de réaliser leurs tâches efficacement dans le contexte qui est le leur.

Bien maîtriser l’UX Design, c’est le résultat d’une pratique régulière de la conception des interfaces, et c’est aussi faire preuve de créativité, d’écoute et d’empathie.

3. Comment en êtes-vous venu à travailler dans le domaine de l’UX design ?

J’ai un background technique, acquis principalement chez IBM. Je suis venu à l’UX car j’étais persuadé que l’informatique devait avant tout servir l’humain. Dans mon premier job, au Centre Scientifique IBM, j’ai conduit des recherches en informatique linguistique.

J’ai conçu un algorithme de production automatique de langage capable de choisir ses mots, ses tournures de phrases et d’appliquer les règles de grammaire de notre langue, comme nous le faisons lorsque nous écrivons.

C’est en arrivant chez Thales, dans une équipe de recherche en interaction homme-machine, que je me suis intéressé à la manière dont l’être humain interagit avec le système informatique et, surtout, en quoi les logiciels que nous développions pouvaient lui apporter quelque chose, l’aider dans sa tâche quotidienne.

C’est dans ce contexte que j’ai commencé à intervenir comme expert en ergonomie pour le groupe Thales, travaillant sur de nombreux projets à la fois civils et militaires pour les différentes entités du groupe. De projet en projet, j’ai mis en place une démarche méthodologique ‘centrée utilisateur’ (on ne parlait pas d’UX à l’époque ;).

Cette démarche (analyse de l’activité,  maquettage, test utilisateur) nous a permis d’obtenir de très bons résultats en terme de satisfaction client. Elle a aussi permis aux équipes de développement de partir sur des bases solides, limitant ainsi les risques dès le début du projet.

Parallèlement, je suivais les travaux conduits en France et aux États-Unis sur l’ergonomie digitale et les méthodologies centrées utilisateurs par Don Norman, Jakob Nielsen, Alan Cooper, Bill Buxton, etc.

Un nouveau domaine était en train de naître, c’est ce que nous appelons maintenant l’UX. Finalement, j’ai monté Usabilis en m’appuyant sur ces méthodes. Et c’est ainsi que maintenant et depuis plus de 15 ans nous accompagnons les entreprises sur les questions d’UX.

livre ux design004 700x465 - Interview de Jean-François Nogier, auteur de "UX Design & ergonomie des interfaces"

4. Quel est le projet le plus intéressant sur lequel vous avez travaillé ?

Chez Usabilis, j’ai eu la chance d’intervenir sur de nombreux projets dans des contextes très variés pour la plupart des grands groupes français, mais le projet qui m’a le plus marqué est l’un des premiers projets sur lequel je suis intervenu en tant qu’expert en ergonomie.

Il s’agit de la conception de l’interface du système ODS France qui est le logiciel utilisé par les  contrôleurs aériens français pour guider les avions qui traversent notre espace aérien.

C’est une interface complexe utilisée par un binôme de contrôleurs travaillant en équipe dans une salle de contrôle, un gros projet de développement avec une équipe importante travaillant sur un ensemble d’applications diverses qu’il a fallu mettre en cohérence tout en découvrant  un métier complexe et passionnant.

A mes yeux, c’est ma plus belle expérience en termes de conception d’interface. Le résultat a été une interface relativement épurée mais très fonctionnelle de manière à pouvoir être utilisée 24h sur 24, 7 jours sur 7 par les contrôleurs.

Cette interface est encore utilisée aujourd’hui par les contrôleurs français. Comme quoi, l’UX est synonyme de pérennité !

5. A qui s’adresse le livre ?

« UX Design et Ergonomie des interfaces » est destiné à toutes les personnes impliquées dans la conception des produits digitaux.

L’ouvrage représente pour eux une source de recommandations et de conseils pour concevoir une expérience utilisateur intuitive. L’ouvrage est facile d’accès. Il touche un public très large.

Il ne s’adresse pas uniquement aux spécialistes de l’UX. Il est lu par tous les métiers intervenant dans la conception, depuis le product manager jusqu’à l’intégrateur, mais également par les acteurs du marketing.

En effet, l’UX et le marketing ont toujours été étroitement liés. Le marketing a compris qu’un produit qui n’est pas conçu de manière centrée utilisateur est un produit qui ne fonctionne pas.

Les marketeurs trouvent donc dans « UX Design et Ergonomie des interfaces » les principes d’ergonomie sur lesquels ils peuvent s’appuyer pour concevoir un produit performant.

Nous-mêmes, UX designers, nous ne nous intéressons plus seulement à la conception des écrans. L’interaction est devenue ubiquitaire. De nos jours, l’utilisateur n’interagit plus sur un seul device. Son expérience se construit sur plusieurs appareils. Le paradigme de l’interaction homme-machine a changé.

Désormais, c’est l’expérience qui prime et pas l’appareil. Notre métier a donc changé. Nous ne concevons plus seulement des interfaces, mais bien une expérience globale ; nous concevons un service.

 

UX Design & ergonomie des interfaces
ux design ergonomie interfaces couverture dunod - Interview de Jean-François Nogier, auteur de "UX Design & ergonomie des interfaces"

 

 

logo usabilis 170x170 - Interview de Jean-François Nogier, auteur de "UX Design & ergonomie des interfaces"A propos d’Usabilis

Usabilis accompagne les entreprises dans la conception des produits digitaux. Depuis l’idéation jusqu’au design graphique des écrans, les ergonomes et designers d’Usabilis vous aident à réaliser des applications intuitives et esthétiques. En savoir plus sur l’agence UX Usabilis

5 mockups device gratuit pour UX designer

Hey salut à toutes et à tous, cela faisait longtemps que je n’avais pas réalisé d’article sur mon blog, je m’en excuse d’avance, je suis sur un gros projet en ce moment avec une entreprise innovante.

Le mockup est un outil idéal pour illustrer vos interfaces auprès de clients ou même au sein de votre entreprise lors de présentation.

Du coup, pour me faire pardonner, je vous partage 5 mockups gratuits. Idéal pour illustrer votre interface dans un environnement réel et ainsi permettre au client de se projeter avec votre site ou application.

1 – The Desk Template

Mockup apple, ecran et téléphone portable

Un ensemble de maquettes photographiques apple, incluant un iMac, un iPad et un iPhone.

2 – iPhone 7 Psd

iphone7 free mockups - 5 mockups device gratuit pour UX designer

Mockup gratuit classique d’un Iphone 7, source photoshop .psd. Un mockup de qualité qui vous

 

3 – Mockup Apple Watch

free applewatch mockup psd 1000x683 697x476 - 5 mockups device gratuit pour UX designer

2000 x 1334 px format PSD

Besoin d’un mockup de l’apple watch ? Voici un mockup idéal pour la présentation de votre application !

4 – Mockup photo DSLR Camera

dslr camera mockup 635x476 - 5 mockups device gratuit pour UX designer

Découvrez ce superbe mockup gratuit, pour présenter votre photo. Cette maquette de caméra est gratuite est conçue dans le format de fichier PSD.

5 – Tablet / iPad Mock-Up

iPad mockup 1 632x476 - 5 mockups device gratuit pour UX designer

Mockup iPad, créé pour vous aidez à afficher vos projets de manière réaliste. Cette maquette est tout ce dont vous avez besoin pour obtenir d’excellents résultats.

 

Pour terminé, voici le lien d’un site qui regroupe des centaines de mockups différents. https://www.mockupworld.co/

Prévoir les conflits de développement dans la conception du projet

Face à une deadline trop serrés, la collaboration entre développeur et UX designer peut devenir catastrophique.

Garder les concepteurs et les développeurs sur la même longueur d’onde est assez compliqué. Donnez leur un site web qui doit être fonctionnel rapidement et les bureaux brulerons.

Nous devons donc concevoir rapidement, de façon transparente pour fournir un site de classe mondiale à la fin ?

Dans cet article, je vous propose quelques conseils du quotidien pour réduire vos maux de tête au travail. Les conseils tirent de mes expériences vécues au cours des dernières années en tant qu’UX Designer.

1 – La conception réactive : système de grille

Vous ne travaillez peut-être pas avec des grilles lors de vos wireframe, voici un problème auquel les développeurs sont confronté.

Définir une largeur à votre grille

Il est utile de commencer son wireframe avec une largeur spécifique à votre grille et de connaître la taille des gouttière exacte pour chaque partie de la grille. Avec cette information, vous pouvez déjà uniformiser votre conception, ce qui vous empêchera de faire des ajustements tout au long de la conception du wireframe.

Si vous définissez un bloc de 50 pixels, il doit être exactement à 50 pixels. Si votre grille a une largeur de 1200px dans son intégralité, elle doit être de 1200px de large. Si vous définissez une base solide à votre projet web et notamment pendant votre wireframe, cela devrais fonctionner sur tout type d’appareil et tout type de système, il est important d’avoir un point de départ en béton.

Ne laissez pas le hasard réaliser vos vues mobiles

Tout semple beau sur desktop, mais attendez… et la vue mobile ?

Dans beaucoup de projets, le développeur doit prendre des décisions sur la composition de la vue mobile…

Pour mieux collaborer sur un projet web, les UX designer doivent impliquer sur le design desktop l’ordre d’empilement mobile. Si le temps le permet, il est extrêmement utile de fournir une maquette fidèle de la vue mobile. Fournir une vue mobile vous permettra d’obtenir une interprétation mobile au pixel près !

wierframe valentino puleo 700x332 - Prévoir les conflits de développement dans la conception du projet

Utiliser un système de grille desktop pour la conception d’un site mobile n’a pas de sens. C’est souvent le cas avec les éléments d’interface utilisateur étendus, qui ne se compriment généralement pas bien lorsqu’ils sont placés sur des périphériques mobiles.

En tant qu’UX designer, vous devez résoudre ces problèmes afin que les développeurs du projet ne viennent pas avec des idées en conflit avec vos intentions.

2 – Utilisez des outils modernes pour une représentation précise

Polices de caractères

Dans un premier temps, la cohérence entre les polices de caractères entre Photoshop et le Web n’existe pas.

Souvent, les polices avec lesquelles je travaille sur Photoshop sont complètement éteintes. Même les polices open-source peuvent sembler différentes lorsqu’elles sont comparé sur Photoshop et le Web.

En tant qu’UX designer, nous aurions besoin d’ajuster la conception en fonction du poids des polices. Lorsqu’ils ne sont pas correctement représentes,

En tant que concepteur, vous aurez besoin d’ajuster la conception en fonction du poids des polices. Lorsqu’ils ne sont pas correctement représentés, vous prenez des décisions basées sur des données ou une représentation visuelle de la police qui va être incohérente.

Problèmes de performance

L’un des aspects de la représentation du pixel parfait se rapporte à la façon dont les designers créés la plupart des documents Photoshop.

Utilisons les ombres portées comme exemple.

Photoshop comme vous le savez surement, contient une option d’ombre portée. Les designers ont beaucoup de souplesse lorsqu’ils créent des ombres, ainsi que des masques et autres éléments de conception. Mais quand un développeur recrée ces mêmes ombres sur le web, les options sont beaucoup plus limitées.

Quand un développeur entame la création du front-end d’un site web, il ou elle est très préoccupé par les performances de celui-ci. Chaque fois qu’ils ont besoin d’utiliser une image en PNG transparent ou translucide de 32 bits pour un élément UI, le site prendra plus de temps à charger. Multipliez l’exemple par des centaines de composants et votre site va être très lent.

La solution idéale est de recréer les ombres portées avec CSS.

Vous pouvez créer de nombreux effets avec le CSS, y compris les ombres portées. Si un développeur peut utiliser CSS pour faire des ombres au lieu d’intégrer un PNG. Le coté positif du CSS, c’est qu’il est plus léger, il vous permettra donc d’obtenir un poids de page réduit. En revanche pour la typographie et les ombres portées, ils ne seront pas 

Sur le côté positif, CSS est plus léger, vous permettant d’obtenir des actifs à une taille beaucoup plus petite. En revanche, la typographie et les ombres portées ne seront pas identiques à celles créées en CSS.

png et svg 700x332 - Prévoir les conflits de développement dans la conception du projet

Une des images ci-dessus est un PNG, l‘autre est un SVG.

Bien que les deux images soient visuellement identiques, le PNG à un poids de XX ko tandis que le SVG obtient le poids de XX ko seulement. De plus, l’ombre sur le SVG peut être articulée.

3. Prototypes collaboratifs : communication claire et concise.

Lorsqu’on travaille sur des projets sans prototype, la communication autour du projet devient difficile, entre les appels téléphoniques et les notes gribouillées à la vas vite.

Voici un processus de travail pour améliorer la clarté en réduisant la documentation autour du projet et de vos attentes :

  • Au début d’un projet de site web, dite vous que la documentation doit agir comme noyau de connaissances plutôt que d’une encyclopédie. Par exemple, définissez la conception des bases et les principes techniques, puis reportez-vous à d’autres outils pour présenter votre vision du projet. Découvrez une liste d’outils de prototypage ou notre boite à outils pour les projets web.
  • Une fois le projet démarré, créez des flux utilisateurs pour planifier les interactions pour l’ensemble du système. InVision vous permet par exemple d’ajouter des commentaires pour que les développeurs puissent poser des questions et comprendre le système.

Si vous avez trouvé ces conseils utiles, continuez à consulter mon blog. N’hésitez pas à me donner votre avis et à noter les articles.

Je recherche actuellement un passionné du métier d’UX designer pour rédiger des articles sur Blog UX designer.fr. Contactez-moi ici !

 

Nintendo Switch : une nouvelle approche de l’expérience utilisateur

Vendredi dernier a eu lieu la présentation officielle de la console Switch de Nintendo, une console nouvelle génération qui regroupe le jeu vidéo de salon à la mobilité d’une console portable.

N’étant pas un blog d’actualité jeux vidéo, nous allons dans cet article, parler exclusivement de l’expérience que peu apporter la nouvelle console de Nintendo.

Expérience utilisateur de la console Switch

Comme vous pouvez le voir dans la vidéo de présentation ci-dessous, la console Switch vous permet de jouer dans plusieurs situations possibles, vous pouvez très bien être assis sur votre canapé et passer d’un instant à l’autre dans le métro à continuer la partie commencée plutôt.

 

Nintendo ajoute une immersion supplémentaire dans le domaine du jeu vidéo, vous ne devrais plus vous adaptez à la console, c’est la console qui s’adapte à votre quotidien et à votre style de vie.

img slider 02 pc tab 700x457 - Nintendo Switch : une nouvelle approche de l'expérience utilisateur

Trois expériences possibles

La console Switch, vous permet trois expériences possibles :

  • Mode téléviseur
    • Vous permet de joueur avec vos amis dans un espace ouvert.
  • Mode sur table
    • Vous permet de joueur avec vos amis dans un espace plus réduit.
  • Mode portable
    • Vous permet une immersion solo dans le métro ou pendant une pause déjeuné.

Conclusion

Fini l’abandon d’un jeu parce que vous n’avez pas assez de temps, la console Switch s’adapte à la situation et vous emmène dans une nouvelle expérience de jeu. Nintendo à su apporté une avancée dans le domaine de l’expérience utilisateur.

Les entreprises ne finiront jamais de nous surprendre grâce à l’expérience utilisateur, nos amis UX designers de Nintendo ont vraiment trouvé le produit qui répond aux nouveaux besoins des joueurs. La mobilité de jeu.

Source des images

Inspiration UX design – Food site

Pour cette fin d’année 2016 et avec les fêtes de fin d’année, rien de mieux que de parler de nourriture ou plus exactement, mon inspiration du moment pour la conception d’un site e-commerce autour de la gastronomie française en livraison à domicile. Voici une compilation pour votre inspiration ui design.

Mon client souhaite accroitre la vente de ces plats à domicile avec un site e-commerce totalement administrable, il souhaite axer son site avec le meilleurs parcours client possible.

Inspiration autour du parcours client

Avant toute réalisation graphique, il est important de réaliser un site maps pour établir le parcours client idéal. En plus d’avoir une vue global sur la totalité du parcours de votre utilisateur, il vous permettra d’ajouter les emails transactionnel.

J’ajoute systématiquement les emails transactionnel au site maps, pour avoir une vue d’ensemble sur la parcours client, mais aussi sur les interactions d’aura le client avec notre site.

site maps parcours clientSource : Behance

Inspiration UI / UX design

Voici quelques images qui ont inspiré la conception du site mobile et desktop.

a8fd1b30774141.564d7fa8e5393 - Inspiration UX design - Food site

Source : Behance

inspiration ui d'une cards

Source : Dribbble

Inspiration pour site de nourriture

Source : Dribbble

UI pour les recettes de cuisine

Source : Dribbble

Présentation dynamique des aliements UI design

Source : Dribbble

Petit bonus : les icons

Icons pour UI designer food

Source : Dribbble

evernote food cuisine icons 635x476 - Inspiration UX design - Food site

Source : Dribbble