Usaddict http://www.ergonomie-interface.com Ressources sur l’ergonomie des interfaces (le blog Usabilis) Wed, 25 May 2016 07:22:54 +0000 fr-FR hourly 1 Usabilis présente une étude au FLUPA UX-Days http://www.ergonomie-interface.com/blog-usaddict-informations/usabilis-presente-une-etude-au-flupa-ux-days/ http://www.ergonomie-interface.com/blog-usaddict-informations/usabilis-presente-une-etude-au-flupa-ux-days/#respond Wed, 25 May 2016 07:22:54 +0000 http://www.ergonomie-interface.com/?p=8262 Les FLUPA UX-Days sont le rendez-vous annuel des professionnels de l'ergonomie des interfaces. Cette année, les experts d'Usabilis ont choisi de s'y rendre, les 16 et 17 juin, pour présenter leur étude sur l'UX multi-écran.

UXDays-photo1

Les outils et les enjeux de l'UX multi-écran : voilà les problématiques ô combien actuelles qu'abordera Hugo Labonde au deuxième jour des UX-Days, le 17 juin, à partir de 15 heures. Le consultant ergonome UX d'Usabilis l'assure : « Mon étude a permis d'identifier de bonnes et mauvaises pratiques pour la conception d’une expérience multi-écran. »

L'étude approfondie s'appuie sur les résultats de 23 tests utilisateurs. Le fil conducteur de ces tests : la transition d’un appareil à l’autre pour la réalisation d’une tâche. « Désormais, l’expérience utilisateur va au-delà d’une interface sur un appareil, dans un univers où les utilisateurs ont en moyenne accès à 3,2 appareils connectés », explique Hugo Labonde. « L’UX doit s’inscrire dans la continuité d’usage entre les différents écrans. »

Quatre services mettant en scène cette nécessaire continuité d’usage seront développés en détail par l'expert : la VOD, les réseaux sociaux, l'actualité et l'e-commerce.

UXDays-photo-et-logo

Les UX-Days, un environnement idéal pour partager le savoir

La direction d'Usabilis n'a pas ciblé les UX-Days au hasard pour faire la démonstration de ses compétences. « Usabilis a depuis ses débuts joué un rôle d’évangélisation de l'ergonomie et de l'UX en France. Le message s’est fait à travers des formations, le livre “Ergonomie des interfaces” et le blog Usaddict. Mais également à travers les différents événements du secteur. C'est dans cette logique de partage du savoir que nous participons aux événements FLUPA », développe Jules Leclerc, directeur d'Usabilis et co-auteur de l'étude.

Les UX-Days seront donc l'occasion de partager avec la communauté en même temps que de faire connaître encore davantage l'expertise maison. « La thématique présentée cette année représente un fort enjeu pour les UX de demain, nous souhaitons sensibiliser tous les acteurs des IHM », continue Jules Leclerc, qui compte sur cette occasion pour poursuivre la réflexion sur le multi-écran.

La conférence d'Hugo Labonde se tiendra dans l'Espace Adenauer vendredi 17 juin entre 15 h et 15 h 45.

Infos pratiques UX-days sur le site de Flupa

]]>
http://www.ergonomie-interface.com/blog-usaddict-informations/usabilis-presente-une-etude-au-flupa-ux-days/feed/ 0
Jules Leclerc, un altruiste au service de l’interface http://www.ergonomie-interface.com/blog-usaddict-informations/jules-leclerc-un-altruiste-au-service-de-linterface/ http://www.ergonomie-interface.com/blog-usaddict-informations/jules-leclerc-un-altruiste-au-service-de-linterface/#respond Thu, 19 May 2016 08:04:45 +0000 http://www.ergonomie-interface.com/?p=8079 Directeur et consultant ergonome UX, Jules Leclerc a connu un parcours au sein d’Usabilis qui lui permet de saisir la globalité des problématiques de  l’expérience utilisateur. Découvrez le portrait d’un perfectionniste qui a des rêves plein la tête.

Jules-Leclerc

Jules Leclerc

Quête de sens

A sa sortie de l’école de Design de Nantes-Atlantique, Jules Leclerc s’oriente vers la conception et la création de sites web, jeux vidéo et applis. « Je voulais m’épanouir dans un domaine liant la créativité, la technique et l’humain. »

Pourtant, tout n’a pas été si simple. « J’ai commencé à travailler dans une agence de com’. La dimension créative prenait le pas sur les usages réels. » Jules ne s’y retrouvait pas. Faire du beau pour du beau manquait de sens, l’humain était laissé de côté dans la démarche. « Je n’avais pas l’impression que ce que je faisais améliorait la vie des gens au quotidien, ce qui pourtant devrait être le but du design. »

La rencontre avec Usabilis, il y a huit ans, est arrivée à point nommé. Une évidence. «C’était une des rares entreprises à l’époque qui plaçait l’utilisateur au cœur de la démarche de conception. » Embauché en tant que designer graphique des interfaces, il travaille d’abord sur l’aspect visuel sur des sujets où l’usage était vraiment mis au centre. «  J’ai apprécié cette approche qui me correspondait profondément, même si je ne touchais pas encore à la conception ni à la mécanique de navigation. »

Très vite, ses centres d’intérêt convergent encore davantage avec ses nouvelles tâches. Expertise en UX design et ergonomie web deviennent ses dadas. « Pour la première fois, j’étais en contact direct avec les utilisateurs. »

Nouvelles fonctions

Un costume qu’il endosse si bien qu’il se voit confier un rôle de formateur, au bout de deux ans. « J’ai conçu la formation Ergonomie mobile et tactile, qui est venue compléter l’offre formation déjà proposée par Usabilis. » Le module existe toujours, évolue au fil des avancées technologiques et trouve un écho notamment  auprès des chefs de projets,  qui y voient un moyen de combler leurs besoins de concepts UX et de vocabulaire pour pouvoir dialoguer sereinement avec les spécialistes de l’UX.  Webdéveloppeurs, graphistes et ergonomes, pour leur part, y puisent une mise à jour de leurs connaissances.

Parallèlement à ses missions de conseil en design, Jules se voit progressivement attribuer des fonctions commerciales. Son rôle de consultant manager lui ouvre des perspectives : « Je rencontrais les prospects, construisais les propositions commerciales et occupais un rôle de directeur de missions. »

Depuis un an, ce grand minutieux, féru de piano minimaliste sur son temps libre, travaille en étroite collaboration avec Jean-François Nogier, président fondateur. Promu directeur, au même titre que Ghyslain Olier, il gère avec lui les problématiques stratégiques, les RH et le management des équipes. Ces dernières, qui sont amenées à s’étoffer, offrent des profils variés. « Nos consultants sont principalement issus de la psychologie cognitive, du design d’interaction et de l’ingénierie web. »

Jules-Leclerc-atelier

Jules pendant une enquête de terrain

Le succès de la Lyonnaise des Eaux (SUEZ)

Un projet dont il est particulierement fier ?  La refonte totale du site de la Lyonnaise des eaux. Une œuvre de longue haleine, qui a vu l’arrivée d’un portail totalement remodelé pour être en responsive webdesign et la refonte complète de l’espace client. « C’est la première fois que le groupe Suez impliquait autant ses clients, avec des tests  utilisateurs sur chaque phase de création de maquette. » Un succès tel que le travail a été primé par deux fois : l’avatar « Olivier » a reçu la médaille d’argent du concours des conseillers virtuels, et les palmes de la relation client 2014 sont revenues à l’interface pour avoir su renforcer l’accompagnement des clients de la Lyonnaise dans leurs démarches quotidiennes.

Diversité des contenus, rencontre avec différents profils, immersion dans des milieux par nature inaccessibles (le trading, la police…), voilà ce qui nourrit Jules Leclerc. « L’empathie auprès des utilisateurs, c’est tout l‘intérêt de notre métier », assure celui qui voyage pour s’ouvrir à d’autres modes de pensée. Une éthique qu’il applique dans sa vie privée, en s’intéressant par exemple à l’agriculture bio ou en optant pour une banque coopérative où les clients ont leur mot à dire.

Les bonnes pratiques pour étendard

L’avenir ? Outre un mariage prévu cet été, les projets professionnels se bousculent avec des contrats signés aussi bien avec Adobe, La Poste, PMU, que des start-up prometteuses. Son rêve caché : travailler avec un grand constructeur automobile pour développer les interfaces embarquées.

Plus largement, Jules Leclerc a pour ambition de remettre les bonnes pratiques au sein de l’UX en cultivant toujours cette rigueur propre à Usabilis. « En 2002, nous étions pionniers, désormais l’UX est partout : il en résulte un flottement. Chez Usabilis, nous nous attachons depuis toujours à une rigueur scientifique, avec une véritable pédagogie dans la démarche. » Un cheval de bataille plus que jamais au goût du jour. Son crédo : « Comprendre l’utilisateur tout en s’en faisant oublier, ici réside la clé du succès ! »

]]>
http://www.ergonomie-interface.com/blog-usaddict-informations/jules-leclerc-un-altruiste-au-service-de-linterface/feed/ 0
UX et Animation http://www.ergonomie-interface.com/conception-maquettage/ux-et-animation/ http://www.ergonomie-interface.com/conception-maquettage/ux-et-animation/#respond Wed, 20 Apr 2016 16:23:51 +0000 http://www.ergonomie-interface.com/?p=7872 Tant du point de vue utilisateur que de celui du concepteur, l’animation nourrit une certaine méfiance.  Elle nuirait à la simplicité en diminuant l'efficacité. Elle serait une source d’erreurs et de bugs. En définitive, elle n’apporterait rien d’autre qu’une surcharge de travail en conception pour un résultat souvent mitigé.

Pourtant l’animation a toute sa place lorsqu’il s’agit de bâtir une expérience utilisateur robuste, agréable et intelligente :

  • Elle attire l’attention de l’utilisateur sur des zones et objets importants de l’interface
  • Elle donne des indices sur la marche à suivre
  • Elle donne un feedback rassurant à l’utilisateur après une action
  • Elle explique visuellement le fonctionnement de l’interface.

Il faut voir l’animation comme un mode de dialogue avec l’utilisateur. Il s’agit d’un guide discret, capable d’intervenir au bon moment, pour offrir une aide, voire même une solution.

Les qualités requises d’une animation sont plus difficiles à lister tant l’objectif et le contexte changent. Mais voici quelques grandes règles :

  • Elle ne doit ni polluer ni parasiter l’expérience utilisateur.
  • Elle ne doit être composée que d’éléments utiles.
  • Elle doit avoir le bon timing pour être fluide et compréhensible.

Voici quelques exemples d’animations réussies qui enrichissent l'expérience utilisateur.

animation de bouton d'ouverture se transformant en bouton de fermeture

L'animation permet ici de limiter le nombre de boutons ainsi que le temps nécessaire pour les localiser ( Alexander Lehnert – Dribble )

 

animation de barre de progression qui se transforme en pastille verte

Ici l'animation transforme un élément pour qu'il reflète plus précisément et plus visiblement son état qui a changé ( Simon van Acht – Dribble )

 

formulaire avec des animations pour renforcer sa compréhension

L'animation permet d'accentuer et de mieux identifier les changements de l'interface et les nouvelles interactions possibles ( Jade Tan SP – Dribble )

 

Une animation qui permet de localiser le bouton d'ouverture d'un menu

L'animation d'ouverture et de fermeture créent un lien visuel entre le bouton et les fonctionnalités qu'il permet d'afficher​ ( Roman Shelekhov – Dribble )

Une animation d'interface

Les étapes de ce scénario simple sont visuellement et logiquement liées entre elles ( Tyler Zenk – Dribbble )

 

Comme nous le voyons le diable est dans les détails et l'animation peut apporter un supplément d'âme à l'interface tout en facilitant sa compréhension. La conception d'une interface ne s’arrête donc pas à la juxtaposition de composants fonctionnels statiques, mais implique également une mise en mouvement.

Pour aller plus loin : nous abordons en détail l'apport des animations dans l'expérience utilisateur dans notre formation ergonomie mobile et tactile.

 

]]>
http://www.ergonomie-interface.com/conception-maquettage/ux-et-animation/feed/ 0
Les clés d’une collaboration UX / UI réussie http://www.ergonomie-interface.com/methodes-process-techniques/les-cles-dune-collaboration-ux-ui-reussie/ http://www.ergonomie-interface.com/methodes-process-techniques/les-cles-dune-collaboration-ux-ui-reussie/#respond Tue, 15 Mar 2016 13:36:17 +0000 http://www.ergonomie-interface.com/?p=7793 La mise en oeuvre des méthodes de conception en ergonomie (UX) et design graphique (UI) n’est plus à démontrer pour la réussite d’un projet d’application quel qu’il soit (web, responsive, mobile, tactile…) La maitrise de ces expertises est évidemment essentielle, mais peut devenir insuffisante sans une bonne collaboration entre les différents acteurs d’un projet.

Intéressons nous à la relation particulière entre l’UX designer et le designer graphique. Voici 7 clés d’une collaboration réussie :

1) Idéalement, le designer graphique doit intervenir avant d’intervenir.

enquête terrain 
Étude terrain

Le brief graphique est normalement la réunion de lancement qui permet au designer graphique de créer ses premières pistes graphiques. La qualité des données tirées de cette réunion permet au designer de comprendre les besoins stratégiques, techniques et communicationnels afin d’y répondre le plus efficacement possible.

En incluant le designer graphique dans les phases amont d’ergonomie comme l’enquête terrain ou le test utilisateur, celui-ci interprétera de manière plus sensible ces besoins et développera plus d’empathie envers les utilisateurs finaux.

2) Partager un objectif commun

personaFiche persona

Si le designer graphique n’a pas la possibilité de s’immiscer dès les phases d’ergonomie, il doit veiller à emmagasiner les connaissances acquises par l’UX designer. Les documents rédigés par l’UX designer deviennent une mine d’or pour le designer graphique afin qu’il s'immerge dans le projet et comprenne les besoins des utilisateurs.

Lire les résultats d’une enquête terrain permet de prendre le temps de connaître les utilisateurs tandis qu’afficher au mur les personas qui en découlent permet de ne pas perdre de vue ces utilisateurs.

3) Se confronter pour se dépasser

peer review
Session de peer review

Partager un objectif commun n’est pas synonyme de consensus. La confrontation d’idée est vitale pour offrir les meilleures solutions de conception à l’utilisateur final.

Les phases de peer review sont ainsi essentielles pour valider des solutions mais surtout pour débloquer des problématiques non résolues. Lorsque ces peer reviews sont faites entre un binome UX designer – designer graphique, l'échange est d'autant plus enrichissant car l'expérience utilisateur est principalement définie par le travail de ces deux derniers.

4) Un relationnel sain

relationnel UX UI 

La capacité de se confronter ne doit pas être source de friction. L’égo des designers (autant UX que UI ;-) ne doit pas parasiter la qualité du projet. Tout échange doit se dérouler dans la non-agressivité et l’écoute de l’autre. Regardons dans la même direction : celle de l’utilisateur.

5) Être curieux dans l’expertise de l’autre afin de faciliter son travail

grille wireframeWireframe avec grille de mise en page 

Chaque acteur d’une phase d’un projet doit être un facilitateur du démarrage de la phase suivante. Lorsque l’UX designer conçoit un wireframe avec l'effort d'utiliser une grille de mise en page ou de réfléchir à une hiérarchie claire des typographies, cela permet au designer graphique de s’approprier plus rapidement l’interface. Chacun conserve son propre rôle, mais l'usage d'outils communs permet de fluidifier l'avancée d'un projet.

6) Non… le designer n’est pas un coloriste !

crayon de couleur

Le rôle du designer graphique est de prolonger les intentions conçues par l’ergonome en affinant et en enrichissant les interactions prévues par celui-ci. Bien sûr le designer graphique ne doit pas balayer les choix de conception d’un revers de la main. La sensibilité du designer graphique permet d’amener de la profondeur dans une interface et de créer un engagement émotionnel chez l’utilisateur.

L’UX designer veillera à jouer le garde-fou de la créativité débordante du designer graphique ;-)

7) Voir plus loin que son intervention

panier de basket

Avez vous déjà vu un basketteur tirer un lancer franc? Son regard fixe le panier même après son lancer jusqu’à ce que le ballon y rentre. S’il détourne son regard après le lancer, le ballon a peu de chance de scorer. Cette philosophie doit être la même pour l'UX designer et le designer graphique. 

Chacun met en œuvre sa compétence, son énergie et sa passion pour concevoir une interface. Après réalisation de ces éléments, on se doit d’observer comment ils vont évoluer jusqu’à la naissance du produit. Garder le contact avec les équipes et suivre les développements permet de s’assurer que son travail sera bien interprété.

Conclusion

Cette force de collaboration entre l'UX designer et le designer graphique est un avantage qui doit évidemment s’étendre à l’ensemble de l’équipe d’un projet (chefs de projets, développeurs, marketing…). N'oubliez pas : Faites intervenir les membres d'un projet au plus tôt, partagez, échangez, tissez des liens, soyez curieux des métiers des uns et des autres. Voici les ingrédients d'une collaboration réussie.

C’est notre vision chez Usabilis. Et vous, quelle est la vôtre ?

 

]]>
http://www.ergonomie-interface.com/methodes-process-techniques/les-cles-dune-collaboration-ux-ui-reussie/feed/ 0
FLUPA UX-DAYS 2016 : rencontrons-nous ! http://www.ergonomie-interface.com/methodes-process-techniques/flupa-ux-days-2016/ http://www.ergonomie-interface.com/methodes-process-techniques/flupa-ux-days-2016/#respond Fri, 04 Mar 2016 13:11:35 +0000 http://www.ergonomie-interface.com/?p=7750 Depuis sa première édition en 2012, le FLUPA UX-Day s’est rapidement imposé comme le rendez-vous incontournable pour les professionnels de l’expérience utilisateur (acteurs des secteurs publics ou privés, chercheurs, étudiants). Réunissant chaque année plusieurs centaines de participants, les FLUPA UX-Days offrent un moment d’échanges privilégié aux professionnels de l’UX en leur laissant la parole à travers un appel à orateurs.

Cette année, les 16 et 17 juin, vous aurez l'occasion de croiser l'équipe Usabilis – Usaddict :)

Des ateliers et des conférences

Les thèmes abordés concernent : l’expérience utilisateur • l’ergonomie des smartphones et des tablettes tactiles • la conception ergonomique et l’agilité • l’émergence de la gestural interaction • la persuasion technologique • l’ergonomie au service de l’innovation • le e-learning et les serious games • et tout autre sujet relatif à l’UX

Flupa UX day

Usabilis projette d'animer plusieurs conférences

Cette année, nous proposons de présenter notre étude sur la conception d'une expérience utilisateur multiécran ainsi qu'un retour d'expérience sur un de nos projets de conception fortement centrés utilisateurs. Nous espérons vous rencontrer pendant ces deux jours d'échanges afin partager avec vous nos expériences.

Plus d'informations sur l'évènement : site officiel FLUPA UX-DAYS 2016

 

]]>
http://www.ergonomie-interface.com/methodes-process-techniques/flupa-ux-days-2016/feed/ 0
Project Comet : L’outil d’Adobe pour l’UX design http://www.ergonomie-interface.com/outils-conception-methodes/project-comet-loutil-dadobe-pour-lux-design/ http://www.ergonomie-interface.com/outils-conception-methodes/project-comet-loutil-dadobe-pour-lux-design/#comments Tue, 09 Feb 2016 10:55:23 +0000 http://www.ergonomie-interface.com/?p=7753 Au mois d’octobre dernier se tenait à Los Angeles une Keynote organisée par Adobe dans laquelle on pouvait découvrir bon nombre de nouveautés, dont le nouveau logiciel Comet. Ce dernier est annoncé comme un logiciel révolutionnaire de design et de prototypage d’interface web et mobile. Regroupant la création de wireframe et le design d’interaction, Comet semble se positionner comme un trouble-fête dans un marché de plus en plus concurrentiel. En effet si le logiciel Axure est en position de force auprès des UX designer, Sketch et Invision ont déjà entamé son monopole. Dans cet article nous vous expliquerons pourquoi Comet a de grandes chances d’être adopté par beaucoup d’agences de design.

comet-demo

Keynote organisée par Adobe

Grâce à cette application, Adobe souhaite ouvrir de nouvelles perspectives pour les concepteurs d’expérience utilisateur (UX) et pour les designers graphiques qui pourront désormais travailler dans le même univers logiciel. À ce titre il est fort à parier que ce nouvel espace de conception va modifier la façon de travailler au sein des agences d’ergonomie et de design. En effet, aborder le design graphique (UI) et l’ergonomie des interfaces (UX) en concomitante va permettre des gains de temps et d’instaurer un dialogue plus efficace entre les deux corps de métiers.

Enfin, la possibilité de publier sur un navigateur la maquette aux possibilités d’interactions et d’animations poussées va faciliter la mise en place de tests utilisateurs afin de proposer une expérience utilisateur toujours améliorée.

Vidéo promotionnelle d’Adobe Comet 

Environnement de travail

Côté interface, Project Comet reprend la philosophie d’utilisation d’Illustrator en proposant un grand espace de travail ou toutes les pages de la maquette sont visibles. Cet espace de travail est éditable grâce au mode « Design » et au mode « Prototype » qui offrent respectivement la possibilité de designer des pages puis de les rendre interactives.

Dans le mode « Design », le concepteur dessine les écrans de son application et/ou site web dans un espace de travail qui permet une vision d’ensemble au fur et à mesure de la réalisation. Il est intéressant de noter que cet espace de travail unique proposant une vue en hauteur peut permettre une meilleure visualisation des parcours clients.

Le mode « Prototype » permet de lier les pages créées par des interactions configurables en fonction des besoins utilisateurs. Le mode d’application des interactions semble très innovant et intuitif, en effet il suffit de relier les pages ou éléments par des câbles bleus pour rendre hautement itératives les créations.

Comet_Preview

Environnement de travail d'Adobe Comet

Qualité et gain de temps

Un outil de répétition d’éléments aide les concepteurs à réaliser des interfaces précises en un temps record. Ce même outil permet en plus une gestion simplifiée de la conception responsive. Enfin, une logique de classes est proposée afin de gérer le style graphique de groupe d’éléments et/ou de typographie. Cette fonction permet de gagner un temps certain en rationalisant l’application de formes, couleurs et comportements pendant la phase de production des différents templates de pages.

Vidéo d'introduction d’Adobe Comet 

Ces différents outils pensés pour les UX designers et les graphistes vont apporter un confort d’utilisation et des possibilités de gain de temps qui vont certainement faire d’Adobe Comet un leader du marché.

Reste à confirmer si ce nouveau logiciel  saura faire sa place face à Axure qui permet de maquetter des interfaces aux interactions très poussées.

Nous avons hâte de tester ce nouvel outil qui dès 2016 sera un atout supplémentaire pour répondre efficacement aux besoins en ergonomie des interfaces de nos clients. Nous vous ferons alors un compte-rendu détaillé :) !

]]>
http://www.ergonomie-interface.com/outils-conception-methodes/project-comet-loutil-dadobe-pour-lux-design/feed/ 2
Nos voeux 2016 : l’UX multi-écrans http://www.ergonomie-interface.com/blog-usaddict-informations/ux-design-multi-ecrans-2016/ http://www.ergonomie-interface.com/blog-usaddict-informations/ux-design-multi-ecrans-2016/#respond Thu, 14 Jan 2016 15:55:34 +0000 http://www.ergonomie-interface.com/?p=7721  

Gif animé voeux Usabilis 2016

Différents appareils, différents usages..
..un seul objectif : la meilleure expérience utilisateur !

Usabilis vous souhaite une excellente année 2016

 

 

]]>
http://www.ergonomie-interface.com/blog-usaddict-informations/ux-design-multi-ecrans-2016/feed/ 0
Les 7 tendances de l’UX Design en 2016 http://www.ergonomie-interface.com/internet-web-site/7-tendances-ux-design-2016/ http://www.ergonomie-interface.com/internet-web-site/7-tendances-ux-design-2016/#respond Tue, 12 Jan 2016 11:54:40 +0000 http://www.ergonomie-interface.com/?p=7685 Les tendances UX design 2016 vont toutes dans le mêmes sens : personnaliser l’interface afin de proposer à l'utilisateur une expérience unique et simple. Comment faire pour y parvenir ?

Voici le top 7 des tendances à suivre.

1) La continuité multi-écran

A chaque situation d’usage, il est important de proposer une expérience utilisateur (UX) adaptée. Usabilis mène une étude en 2015 sur « L’expérience utilisateur dans un écosystème multi-écran » qui conclut que les utilisateurs se servent en moyenne de 3.2 écrans par personne.

Afin de répondre aux problématiques induites par ces nouvelles pratiques,  les conceptions de type Responsive Web Design ou Adaptative Design sont de plus en plus présentes. Mais au-delà d'un choix de conception, le véritable défi pour les concepteurs est de proposer une continuité dans et pour l'usage, d'écran en écran.

Alors que le défi de ces dernières années était de proposer une interface dédiée aux tailles variées des écrans (mobile, tablette, ordinateurs petits et grands …), il s'agit aujourd'hui de permettre aux utilisateurs d'utiliser plusieurs écrans simultanément ou de poursuivre sur l'un ce qu'ils avaient commencé sur un autre.

UX multiécran expérience utilisateur homogène site airbnbLe site airbnb est conçu pour permettre une navigation fluide, d'un écran à l'autre, et ainsi proposer une interface adaptée aux usages de l'utilisateur.

2) De grandes images authentiques

Dans le but d’humaniser un site et de laisser une trace émotionnelle, le recours à de grandes images, de haute qualité, est devenu une valeur sûre et cela, peu importe le secteur d’activité. La tendance UX 2016 est de privilégier les photos naturelles, sans artifice. Le marque d'aucy bio applique ce principe sur la majorité des pages de son site.

grandes images site daucybioVoici un exemple de grandes images avec le site daucybio.fr

L’arrière-plan est à l’honneur en 2016, il est donc important d’y apporter un soin particulier. Privilégiez les images floues afin d’habiller le fond, sans pour autant surcharger visuellement la page.

3) Une vidéo à la place du texte

L’insertion d’une vidéo sur la page d’accueil d’un site est un excellent moyen de présenter une marque ou un service, avec un minimum d’effort pour l’internaute. Qu’on se le dise, les internautes préfèrent regarder que lire.

D’après une étude menée par eyeviewdigital.com, l'utilisation de la vidéo sur des pages d'atterrissage peut augmenter la conversion de 80%.

Utilisation de la vidéao sur Home page site scrapd.nl/Le site scrapd  propose une vidéo sur la page d'acceuil en plein écran

4) Le Material Design de Google

Plus structuré que le Flat design, le Material Design de Google s’appuie sur une charte graphique et ergonomique, qui a pour but d’uniformiser les pratiques de conception. Cette charte  « Mobile First » a pour ambition de catalyser le meilleur des interactions tactiles.

L’idée est de renforcer l’effet d’apprentissage d’une application à l’autre, d’un logiciel à l’autre en utilisant les mêmes codes, avec l’innovation technologique en plus. L’utilisateur est guidé visuellement, ce qui permet une meilleure expérience utilisateur. Vous trouverez toutes les informations utiles pour tenter l’expérience du Material Design sur Google Guidelines Material design.

Si vous voulez en savoir plus sur le Material Design, n’hésitez pas à lire notre article sur le Material Design de Google, une formalisation de la conception

material-design-illustrationIllustration du Material Design de Google

5) Flat Design, encore et toujours !

Tendance majeure depuis quelques années, le flat design reste une valeur sûre en 2016 malgré l’arrivée du Material Design.

Plus que jamais, la tendance est d’avoir des composants vectoriels souples et légers, qui s’adaptent à la taille des écrans.

Le flat design est parfaitement adapté au responsive design. L’utilisation de formes simples, de couleurs vives et de typologies garantissent une navigation simple voire intuitive, ce qui répond parfaitement aux attentes des utilisateurs.

suez-web-mobile-ux-designIllustration de Flat Design pour la conception du site responsive Lyonnaise des Eaux sur mobile

6) Un contenu fixe

Le recours à un ou des éléments fixes, comme la barre de navigation par exemple, permet une utilisation facile et un apprentissage rapide de la navigation au sein du site. L’utilisateur peut faire défiler le reste du site.

La démocratisation du scroll infini (A lire l’article : « UX : Le scroll n’est plus tabou ») permet ainsi à l'utilisateur de trouver rapidement ce qu’il cherche, tout en gardant des repères de navigation.

 content fixe the guardianSur le site theguardian, le défilement de la page vers le bas de la page a pour effet de réduire le header initial pour maximiser l'affichage de l'information, tout en gardant un répère de navigation dans une zone fixe.

La tendance 2016 est également de faire disparaitre l'élément fixe au profit du contenu, tout en le faissant réapparaitre par un mouvement du doigt ou de la souris. Cette approche permet de mettre en valeur le contenu avant les contrôles.

 

7) Des micro-interactions

Transformer une page statique en y intégrant des éléments dynamiques est une méthode très appréciée des utilisateurs car cela permet de rendre le contenu d’une interface plus vivant. Poster un commentaire, laisser une note, évaluer une vidéo … rend la galaxie du web plus personnelle et intuitive, à la condition d'en dispersé avec parcimonie.


Cette barre d'action Material Design s'ouvre accompagnée d'une micro-interaction 

Tendance ne veut pas dire standard

La tendance en UX design 2016 est de faire en sorte que chaque tap du doigt ou clic soit une expérience simple et unique, où l’interactivité avec l’utilisateur est au centre de l’interface pour personnaliser au maximum l’expérience utilisateur. Ce sont les détails qui font la différence.

Une mise en garde avant tout : tendance ne veut pas dire standard. Le plus important est de proposer une expérience en accord avec le contexte d’usage et les utilisateurs.
Prenons l’exemple du burger menu. Très vite adopté par les concepteurs mobiles, son utilisation commence à être mise en cause par certaines études pour des problèmes d’apprentissage et d’efficacité auprès des utilisateurs.

En 2016, encore plus qu'en 2015, n'oublions pas de placer l'utilisateur au centre !

]]>
http://www.ergonomie-interface.com/internet-web-site/7-tendances-ux-design-2016/feed/ 0
UX multi-écran : Concevoir une bonne expérience utilisateur multi-écran (3/3) http://www.ergonomie-interface.com/conception-maquettage/ux-multi-ecran-concevoir-bonne-experience-utilisateur-multi-ecran/ http://www.ergonomie-interface.com/conception-maquettage/ux-multi-ecran-concevoir-bonne-experience-utilisateur-multi-ecran/#respond Mon, 07 Dec 2015 11:15:33 +0000 http://www.ergonomie-interface.com/?p=7584 Pour conclure notre série d'articles sur l’expérience utilisateur dans un environnement multi-écran, nous présentons ici un résumé des résultats de l’étude conduite en interne chez Usabilis.
Nous naviguons au quotidien entre nos appareils et développons ainsi de nouveaux usages. On constate que certaines pratiques favorisent une bonne expérience utilisateur et certains outils comme les chartes ergonomiques et graphiques accompagnent les concepteurs dans la création d’un service multicanal.
Les résultats suivants viennent d’observations directes lors de tests utilisateurs.
 

Présentation de l’étude UX multi-écran

L’usage numérique évolue rapidement. Afin d’observer les nouvelles pratiques multi-écrans, nous avons réalisé des tests utilisateurs individuels semi-dirigés avec 23 utilisateurs. Chaque utilisateur devait accomplir un scénario sur deux types de service : consultation d’actualité & e-commerce ou réseaux sociaux & vidéo en ligne. 
L’objectif est l’analyse de l’usage séquentiel de deux appareils dans l’accomplissement d’une tâche. Par exemple, J’utilise mon mobile pour consulter un article dans les transports et je finis de le lire chez moi sur ma tablette. Pour reproduire ces conditions, les utilisateurs sont interrompus lors de l’accomplissement d’une tâche pour la finir sur un second appareil. 

salle-de-test-utilisateur-multi-écran-1

Configuration des tests utilisateurs multi-écran

Comprendre l’utilisateur pour concevoir

Pour comprendre l’usage multi-écran, il faut d’abord connaitre les raisons qui poussent à l’utilisation de plusieurs appareils : la mobilité que procure le smartphone, la précision d’un poste fixe, le confort d’une tablette, etc…

On constate deux usages de l’écosystème numérique pour les utilisateurs :

  • Utilisateurs favorisant l’usage d’un seul appareil pour la réalisation d’une tâche. Ils changent d’appareil uniquement lorsqu’ils sont confrontés à un élément bloquant sur l’un d’eux (batterie déchargée, opération impossible sur cet appareil,…), évitant au maximum la transition entre les appareils.
     
  • Utilisateurs favorisant l’usage de l’appareil le plus approprié pour l’accomplissement des différentes étapes d’une tâche. Ces derniers ont pour but d’optimiser les conditions de réalisation d’une tâche grâce aux spécificités de chaque appareil.

Dans ces deux cas de figure, les utilisateurs souhaitent une transition facilitée entre les appareils et une homogénéité entre les interfaces.

site-Lemonde-ordinateur-mobile-multi-ecran-UX

Consultation du site LeMonde sur PC et mobile. Une bonne expérience utilisateur selon les participants

Lors des tests, les utilisateurs ont soulevé trois facteurs déterminant le choix des appareils pour la réalisation d’une tâche :

  • Le contexte d’usage : le lieu d’utilisation, la mobilité, le temps disponible,…
  • Morphologie de l’appareil : poids de l’appareil, taille de l’appareil, taille de l’écran, moyen de saisie, autonomie de l’appareil, facilité d’accès à internet,…
  • La nature de la tâche : complexité, durée, priorité,…

En fonction de l’un ou plusieurs de ces critères, les utilisateurs choisissent un mobile, une tablette, un ordinateur ou une combinaison d’appareils pour accomplir leur tâche.

La transition, un élément majeur de l’usage séquentiel

Observé lors des tests utilisateurs, la cohésion des interfaces facilite le passage entre les appareils. La prise en compte des spécificités du terminal (comme le tactile des mobiles et tablettes) favorise cette transition. Une prise en compte de l’expérience dans sa globalité est nécessaire pour proposer une expérience multi-écran de qualité.

Voici les résultats principaux des tests sur la transition entre les appareils et les attentes des utilisateurs en vers leurs services multi-écran :

  • L’image est le premier repère des utilisateurs pour retrouver du contenu, le titre est le second, permettant de confirmer l’adéquation du contenu.
    Lorsqu’un utilisateur souhaite retrouver un contenu dans une liste déjà consultée sur un autre appareil, c’est l’image qu’il percevra en premier, suivit du titre qu’il utilisera pour confirmer la validité du contenu puis au besoin le chapeau de l’information.
     
  • Une légère incohérence entre les contenus des appareils est préjudiciable voir critique pour la poursuite de la tâche.
    Les tests montrent qu’une incohérence entre les informations affichées sur mobile et celles affichées sur ordinateur provoque un fort désengagement de la part des utilisateurs voir un abandon de la tâche.
     
  • Un contenu simplifié sur smartphone est justifié pour les utilisateurs. Les tests nous montrent que les utilisateurs sont prêts à faire l’impasse sur les contenus et les fonctionnalités les moins pertinentes favorisant le confort de navigation et de consultation.
    Une fiche produit sur une interface mobile de e-commerce n’a pas à être aussi précise que celle sur ordinateur.
     
  • Les utilisateurs préfèrent une mise en page adaptée à l’appareil plutôt que des structures similaires entre les appareils.
    Les repères des utilisateurs entre les interfaces ne sont pas les mêmes entre le mobile, la tablette et l’ordinateur. Les habitudes de navigation de l’utilisateur avec son service vont dépendre en premier lieu de l’appareil utilisé, viennent ensuite les habitudes d’usage liées au service.
    Une application web sur mobile est plus simple à utiliser si elle respecte les règles d’interaction déjà utilisées sur le smartphone plutôt que si elle respecte les mêmes règles de navigation que sur la version PC.

appli-citymapper-tablette-mobile-multi-ecran-UX

Citymapper, offre une expérience adaptée sur chaque appareil, profitant de toutes les spécificités du terminal support.

  • Une navigation différente entre deux appareils dégrade fortement les capacités de l’utilisateur à retrouver ce qu’il cherche.
    Pour la majorité des internautes, la stratégie pour retrouver un contenu consiste à réaliser le même parcours sur le nouvel appareil. Une répartition des contenus différente entre les terminaux ajoute de la complexité au parcours de l’utilisateur.
    A noter, l’aspect graphique d’une navigation n’impacte pas la recherche de l’utilisateur si les contenus sont ordonnés de la même manière.
     
  • Les participants interviewés n’ont spontanément pas d’attente sur la sauvegarde de leurs informations personnelles et données de navigation d’un appareil à l’autre. Lorsque l’utilisateur enrichit son panier de produit  ou qu’il débute une vidéo sur sa tablette, il ne s’attend pas à reprendre sa tâche au même endroit lorsqu’il transite sur son ordinateur.
    Cependant les services proposant une continuité des données entre les appareils sont très appréciés des utilisateurs.

site-asos-ordinateur-mobile-multi-ecran-UX

Les données personnelles sur Asos sont synchronisées entre les appareils lorsque l'utilisateur est connecté.

  • Le smartphone est considéré comme plus rapide et plus simple pour consulter son espace connecté. Fréquemment cité, la consultation de ses finances sur mobile est plébiscitée par les utilisateurs car le mobile permet d’accéder très rapidement aux informations recherchées.
     
  • La durée d’une tâche détermine le choix de l’écran. Plus la consultation de l’interface est longue, plus l’utilisateur s’orientera vers un grand écran.
     
  • Les utilisateurs ont encore des appréhensions à réaliser des tâches sensibles sur des appareils mobiles. Le paiement en ligne sur tablette et mobile n’est pas rassurant pour les utilisateurs les plus précautionneux.

Des outils pour la conception multi-écran

La conception d’une expérience utilisateur multi-écran homogène nécessite une vision globale de l’ensemble des applications et interfaces composant un service. L’envergure d’une conception multi-écran  implique une méthodologie rigoureuse pour garantir l’homogénéité entres les appareils.

Expérience map

Réalisé en amont lors de l’étude utilisateur, l'expérience map consiste à retracer le parcours d’un utilisateur (persona) dans l’accomplissement d’une tâche, et de détailler toutes les étapes qu’il traverse pour l’accomplir.

Atouts : outil intéressant pour aborder les différentes étapes de l’expérience d’un utilisateur, notamment les changements d’appareils au sein d’une tâche.

Contraintes : cet outil n’est pas exhaustif pour l’ensemble des usages d’un service.

exemple-experience-map-adaptative-path

Expérience map élaborée par Adaptative Path

Tests utilisateurs

Ils consiste à observer et interviewer les utilisateurs cibles d’un produit pour comprendre leurs objectifs réels et relever les difficultés d’utilisation. Dans le cadre du multi-écran, il est intéressant de tester les changements d’appareil les plus fréquents durant la réalisation d’une tâche comme le paiement d’une commande sur ordinateur débuté sur mobile.

Atouts : permet de repérer la majorité des difficultés que peuvent rencontrer les utilisateurs du service. Fournit aux concepteurs les attentes et objectifs des utilisateurs.

Contraintes : pour les services les plus vastes, il est difficile de tester tous les cas de figure.

Charte ergonomique et graphique (ou guidelines)

La charte regroupe et traduit ergonomiquement et graphiquement tous les éléments d’une interface. Ce document est fondamental pour l’homogénéisation d’une interface ou d’un écosystème d’interfaces. De plus en plus courant, les grands groupes tels que Google avec le matérial design ou Facebook communiquent sur leurs chartes.

Atouts : permet d’harmoniser les écrans d’une interface et d’un groupe d’interface. Cela permet aussi un gain important de temps dans la conception de nouveaux produits.

Contraintes : restreint les possibilités de conception par les règles imposées par la charte.

exemple-charte-graphique-usabilis

L’équipe Usabilis est souvent amenée à rédiger ces documents : voir notre description de la charte ergonomique et graphique

Critères d’évaluation de l’expérience multi-écran

Suite à notre étude quantitative et qualitative, nous avons construit une grille d’évaluation pour l’expérience multi-écran. Celle-ci s’appuie sur les critères heuristiques de Bastien et Scapin qui ont été adaptés.
Cet outil qui permet d’évaluer une expérience multi-écran, met en œuvre un scénario d’usage faisant appel à plusieurs appareils.

Atouts : permet d’évaluer la majorité des aspects d’un service multi-écran pour concevoir ou revoir un service sur plusieurs appareils. 

Contraintes : les critères heuristiques sont utilisés par des ergonomes. Ils n’intègrent pas le point de vue de l’utilisateur dans l’évaluation, essentiel à la réalisation d’une bonne UX. 

L’interface (ou les interfaces) sont passées en revue selon les critères suivants :

  • Guidage :
    • Repère dans l’appareil : reconnaissance et accessibilité des points d’entré au service par l’utilisateur (nom, icône, type d’interface, lien dans le moteur de recherche, e-mail,…).
    • Repère dans l’interface (zoning) : d’un appareil à l’autre identifier rapidement la structure et organisation.
  • Continuité :
    • Homogénéité : cohésion et uniformité des éléments graphiques entre les interfaces (forme ; champ lexical, icônes, interaction …).
    • Cohérence : similarité du fonctionnement entre les appareils (fond ; fonctionnalité, contenu, utilité,…)
    • Architecture de l’information : stratégie d’organisation des contenus et de la navigation entre les terminaux.
  • Synchronisation :
    • Conservation de l’information : les données sont-elles conservées entre les applications et à partir de quel moment.
    • Décalage (temps de latence) : temps nécessaire pour la mise à jour des contenus entre les interfaces.
  • Feedback :
    • Informer sur la synchronisation : les informations entre les appareils sont-elles synchronisées, la connexion entre les appareils est-elle établie, les utilisateurs sont-ils conscients  de la connexion entre les appareils, l’utilisateur sait-il que les informations sont à jour.
  • Gestion des erreurs
    • Hors connexion : comment sont gérées les informations lorsque l’appareil n’est pas connecté.
    • Gestion des compatibilités : la  synchronisation des données et la compatibilité entre les appareils
  • Flexibilité
    • Couverture : couvrir au maximum le panel d’appareils existant.
    • adaptabilité : offrir une expérience prenant en compte les spécificités de chaque appareil d’un point de vue fonctionnel.
  • Environnement d’usage
    • Spécificité : prise en compte des spécificités de l’appareil d’un point de vue physique (la mobilité, la morphologie, les interactions).
    • Contexte : prise en compte de l’environnement d’usage de l’appareil (Dans les transports, à l’extérieur, à l’intérieur,…).
  • Sécurité
    • Protection : comment les données de l’utilisateur sont-elles protégées sur les appareils.
    • Contrôle : main qu’a l’utilisateur sur ses données personnelles entre les appareils.

L'expérience utilisateur multi-écran enjeux majeur

Les études quantitatives sur le multi-écran montrent que l’usage séquentiel et simultané de plusieurs appareils est aujourd’hui répandu chez les utilisateurs. En respectant des principes de conception et d’ergonomie orientés multi-écran, nous pouvons agir sur la qualité de l’expérience utilisateur. Les outils de conception cités précédemment structure le service et accroissent l’engagement des utilisateurs pour celui-ci.

Il faut garder en tête que chaque service a ses particularités et demande une validation par ses utilisateurs finaux lors d’un test utilisateur.

L’expérience multi-écran n’est encore qu’aux prémices de ce que l’avenir laisse envisager. Il y a fort à parier que la continuité d’usage entre les appareils devienne un enjeu majeur pour les entreprises comme l’a été l’avènement des interfaces tactile ces dernières années.

Vous pouvez consulter les deux premiers articles de la série :
UX multi-écran : un écosystème d’appareils autour de l’utilisateur (1/3)
UX multi-écran : des opportunités pour enrichir l’expérience utilisateur (2/3)

Source :

]]>
http://www.ergonomie-interface.com/conception-maquettage/ux-multi-ecran-concevoir-bonne-experience-utilisateur-multi-ecran/feed/ 0
Concevoir une bonne page 404 en 8 conseils http://www.ergonomie-interface.com/conception-maquettage/concevoir-une-bonne-page-404-en-8-conseils/ http://www.ergonomie-interface.com/conception-maquettage/concevoir-une-bonne-page-404-en-8-conseils/#respond Tue, 10 Nov 2015 11:10:07 +0000 http://www.ergonomie-interface.com/?p=7538  

Lorsque l’utilisateur tente d’accéder à une page qui n’existe pas ou qui a été déplacée, il accède à la page 404.
Il est important de ne pas négliger la conception de cette page qui permet à l’utilisateur de comprendre ce qui se passe. Donner des options de navigation au visiteur permet d’éviter de laisser celui-ci dans une impasse, ce qui pourrait l’amener à quitter le site.

Voici 8 conseils qui vous assurent de créer une page 404 efficace !

1) Parler le langage de l'utilisateur

Le message doit être clair et compréhensible par l’utilisateur. 

La page affichée ne correspond pas aux attentes initiales de l’utilisateur, celui-ci doit donc comprendre pourquoi il est dirigé sur une autre page.

1.Air France

Dans cet exemple d’Air France, le message d’erreur est clair et bien mis en évidence.

Il est également important d’utiliser le langage connu des utilisateurs et d’éviter un “jargon informatique”. La référence “page 404” n’est pas forcément connue du grand public !

Mauvais message de Google.fr

Le langage employé par Google est trop technique. De plus, il est rédigé en anglais sur le site google.fr, ce qui complique la compréhension du message.

2) Ne pas culpabiliser l’utilisateur

D’autre part, le message ne doit pas “rejeter la faute” sur l’utilisateur ni le culpabiliser ! Ce conseil est d’ailleurs généralisable à tous messages d’erreurs de l’interface.
Dans l’exemple précédent, Air France s’excuse que la page demandée ne soit pas accessible.

3) Ne pas le laisser dans une impasse

Il ne faut pas que l’utilisateur soit bloqué sur cette page d’erreur 404! Le risque étant qu’il abandonne sa tâche et quitte le site.

Dans l’exemple précédent, Google ne propose aucune alternative, pas même la barre de recherche… ce qui est particulièrement paradoxal pour Google !

Mauvaise redirection de l'espace client LCL

Dans cet exemple, LCL ne propose pas de redirection vers le site d’origine.
Le seul lien proposé ici est une redirection vers l’espace personnel de gestion de comptes alors que le message est affiché depuis le site vitrine.

Il est crucial de proposer des alternatives à l’utilisateur pour qu’il reprenne sa navigation de façon la plus naturelle possible. Voici les principales possibilités :

Retour page d’accueil

Avantage : Un lien de retour explicite à la page d’accueil est le moyen le plus simple de relancer la navigation.
Inconvénient : Ce lien ne guide pas l’utilisateur : il doit reprendre sa recherche à zéro.

4.La Poste

La poste suggère un retour à la page d’accueil suite à son message.

Moteur de recherche

Avantage : La mise en évidence du moteur de recherche est très efficace pour les sites de contenu. L’utilisateur peut reprendre directement sa recherche.
Inconvénient : L’utilisateur doit connaître les mots clés de sa recherche. Le guidage est moins présent que dans les autres alternatives.

Moteur de recherche du site Youtube

Moteur de recherche du site Deezer

Youtube et deezer mettent bien en évidence le moteur de recherche.

Liens importants

Certains sites optent pour la présentation des liens vers les éléments les plus recherchés ou les rubriques principales.
Avantage : Cette option représente un bon guidage pour l’utilisateur qui serait un peu perdu sur le site.
Inconvénient : La présentation de ces liens ne pouvant être exhaustive, il est possible que l’utilisateur ne trouve pas d’éléments pertinents correspondant à son besoin.

Liens importants du site EDF
EDF met en avant les 4 rubriques correspondant aux interrogations principales des utilisateurs.

Arborescence du site 

Avantage : Cette solution donne une vision globale à l’utilisateur de l’information disponible et lui permet de se familiariser avec l’architecture de l’information.
Inconvénient : La quantité d’information présentée risque d’effrayer l’utilisateur et d'accroître sa confusion.

Plan du site Le bon coin
Leboncoin.fr présente les rubriques de recherche possibles. Attention toutefois à conserver un nombre de liens raisonnable et à soigner la présentation !

Menu de navigation ou menu simplifié

Avantage : Le menu de navigation principale est bien mis en évidence. L’utilisateur y a accès sans avoir besoin de revenir à la page d’accueil.
Inconvénient : Seuls les premiers niveaux de navigation peuvent être affichés dans certains cas pour ne pas surcharger la page.

Plan du site Etam

Combinaison des moyens de redirection

Comme on peut le voir sur les exemples précédents, il est souvent utile de combiner plusieurs de ces moyens de navigation. Ceci offre de la flexibilité à l’utilisateur qui se redirige plus efficacement.

4) Ne pas complexifier la page 404

Il faut rester vigilant à ce que la page et les moyens de redirection soient facilement interprétés par le visiteur. En particulier, éviter de fournir trop de liens, ce qui contribue à la sensation de confusion de l’utilisateur.

Trop de liens affichés sur Rue du commerce

En voulant TOUT présenter à l’utilisateur, Rue du commerce rajoute de la charge mentale à l’utilisateur au lieu de l’aider.

L’étude d’A/B Testing menée par GetElastic prouve ainsi que les pages 404 trop chargées provoquent des taux de rebond importants. Pour éviter que l’utilisateur abandonne le site, il faut privilégier des moyens de recherche succincts et clairement identifiables.

5) Rester dans le thème du site 

La page 404 doit faire l’objet d’un travail de conception et de design graphique à part entière. Grâce à cette homogénéité avec le reste du site, l’utilisateur n’a pas l’impression d’avoir quitté le site suite à sa manipulation.

Page 404 dans le thème d'Easyvoyage

6) Dédramatiser l’erreur !

Le ton humoristique peut être adopté pour “dédramatiser” l’erreur… Mais attention à conserver un message explicite.

Message humoristique de la FNAC

La FNAC joue la carte de l’humour avec une image décalée. Attention toutefois à conserver un message suffisamment explicite. 

7) S’adapter à la cible

En fonction des profils des utilisateurs, il est nécessaire d’adapter le ton et le vocabulaire employés. 

Ton humoristique du site du Gouvernement

En restant cohérent avec l’objectif du site et une pointe d'auto-dérision, le site du gouvernement propose une bonne page 404.

Image d'erreur animée d'Airbnb
Le site d’Airbnb fidèle à sa communication conviviale, propose une image animée d’une petite fille qui fait tomber sa boule de glace…

Airbnb et le site du gouvernement proposent 2 moyens différents de décrocher un sourire à l’utilisateur en fonction du style de communication adopté !

8) Ne pas ramener l’utilisateur sur la page d’accueil automatiquement

Mettre en place une redirection automatique vers la page d’accueil plutôt que d’accéder à la page 404 entraîne une sensation de perte de contrôle de l’utilisateur. Celui-ci ne comprend pas ce qu’il s’est passé et risque de réitérer cette action.

 

Redirection automatique du site LaFourchette

En redirigeant l'utilisateur après quelques secondes, La Fourchette risque de déstabiliser l'utilisateur.

En conclusion, la page 404 est une page à part entière du site. Il est donc nécessaire d’y consacrer un temps de réflexion au moment de sa conception. Une bonne page 404 permet à l’utilisateur de comprendre ce qui s’est passé et de naviguer efficacement vers la page recherchée. Au contraire, si la page ne répond pas à ses attentes, l’utilisateur ressent de la frustration, pouvant l’amener à abandonner son objectif initial et quitter le site… Dans un effort de conception centrée utilisateur, et pour vérifier l'utilisabilité de votre site, et en particulier de la page 404, pensez à mettre en place des tests utilisateurs.

Le design émotionnel s’applique parfaitement à la conception de la page 404. En travaillant cette page, vous provoquez une agréable surprise pour votre utilisateur… en renversant le risque de frustration !
Pensez à utiliser l’humour dans votre message et travaillez le rendu graphique pour que cette page se transforme en expérience positive pour l’utilisateur !

]]>
http://www.ergonomie-interface.com/conception-maquettage/concevoir-une-bonne-page-404-en-8-conseils/feed/ 0