L’agence Kirk, spécialisée en UX Design, lance une grande enquête auprès des startups françaises intitulée “l’UX au pays des gaulois”.
#Sondage : L’UX au pays des gaulois, les pratiques de l’ #UX Design au sein des #startups Click To Tweet
L’UX au coeur de la strategie startup
Les startups sont de plus en plus nombreuses à utiliser l’UX design pour accélérer le succès de leurs produits, c’est un fait. Mais qui l’utilise vraiment en France ? Et qu’en pensent les premiers concernés ? C’est pour répondre à ces questions que Kirk lance, en septembre 2015, une enquête sur l’usage de l’UX Design par les startups françaises. Objectif : établir un baromètre.
Chaque fondateur ou associé d’une startup implantée en France peut y répondre, en seulement cinq minutes. Les résultats, présentés sous forme de statistiques anonymes, lui permettront de se positionner par rapport aux autres. Ils seront publiés sur le web à partir de janvier 2016 et envoyés aux participants qui en auront fait la demande. Cette édition proposera un premier état des lieux qui sera ensuite complété et affiné au fil des années.
À propos de l’agence Kirk
Kirk est une agence de design d’expérience utilisateur, qui utilise la recherche et le travail collaboratif comme accélérateur de croissance. Elle développe des produits et services avec celles et ceux qui placent l’utilisateur au coeur de la démarche de développement de produit.
L’humain est devenu le cœur de la recherche d’interface graphique, c’est une des priorités de l’expérience utilisateur. Le design ne doit pas plaire mais transmettre et lorsqu’il s’agit de communiquer, la solution c’est l’interaction.
Le principe de base lors d’un échange entre deux humains, c’est d’associer son positionnement à celui de son auditeur. Il faut savoir ajuster ses propos, sa posture, son éloquence à celui qui nous écoute. Exemple : Si une personne parle de haute voix et rapidement, lui répondre à voix basse et très lentement posera un malaise relationnel. En design d’interaction, c’est le même principe, on cherche à communiquer ainsi il faut savoir analyser, s’adapter et réagir comme notre cible, l’Homme.
Voici les principes de base du design d’interaction définit à travers ces trois notions : l’analyse, l’adaptation et la réaction.
L’analyse : « Human First »
On entend partout « mobile first« , ceci est dû à l’utilisation exponentielle des smartphones/tablettes et autres interfaces réduites et tactiles. Mais si le portable fait fureur auprès des utilisateurs, c’est parce que son écran (interface) se rapproche d’avantage vers l’humain. On tient l’appareil dans nos mains, on dépose nos doigts dessus et on interagit avec le toucher et la voix. Ces méthodes d’utilisation facilitent la cohésion entre l’homme et la machine, ce qui devient un terrain de jeux pour le design d’interaction.
Avant de jouer il faut étudier et dans ce cas là, c’est la cible qu’il faut connaître pour en déduire ses méthodes de navigations et ses habitudes de consommation ( oui Internet se consomme comme un produit ). Les interactions ne vont pas être les mêmes pour un fervent Apple Addict à celui d’une personne hermétique aux nouvelles technologies.
Il est nécessaire de savoir ce que l’utilisateur s’attend à voir sur un site et ce qu’il va être destiné à chercher. Ceci est variable en fonction de chaque personne. Cependant on peut distinguer un utilisateur d’un autre grâce à plusieurs critères : emploi, objectifs, préférences, désirs, situation, expérience, etc…
L’élaboration de ce persona va permettre de réfléchir à un design centré sur les besoins de l’utilisateur tout en lui offrant des « surprises » visuelles. Si, au préalable, vous connaissez les mouvements de vos utilisateurs, vous pourrez alors envisager leurs futures actions et ainsi mettre à disposition facilement ce qu’ils recherchent.
L’adaptation entre l’humain et le virtuel
Le design d’interaction s’appuie ( essentiellement ) sur la relation homme-machine, ainsi il faut prendre en compte la manipulation faite par l’homme. Afin d’adapter ce traitement à une utilisabilité agréable, il est nécessaire d’ajuster l’interface aux notions d’ergonomie cognitive.
On parle alors d’affordance et de recommandations ergonomiques :
Ainsi le design d’interaction se distingue principalement sur les boutons, les formulaires, la navigation et sur l’affichage dynamique du contenu. Parmi tout ces moyens il faut pouvoir surprendre l’utilisateur en y ajoutant des aspects humains et « naturels ». On sait tous que la nature trouve sa beauté dans les détails, en design d’interaction c’est pareil. Les détails sont souvent perçus instinctivement, mais c’est grâce à eux que nous faisons la distinction entre le réel et le fictif, entre une photo et la réalité par exemple. Ce sont ces détails qui font le design d’interaction aussi efficace.
De plus l’œil humain est capable ( et habitué ) de discerner plusieurs mouvements à la fois sans perde le fil ( en dessous de 25 images/s ). Les remous et déplacement qui nous entourent ne sont pas saccadés et irréguliers, mais bien continus et fluides. Ainsi une interface doit s’en rapprocher en ajoutant une continuité interactive dans sa navigation.
La réaction post-action
Si un bouton à une forme de bouton et que lorsqu’on l’actionne il y a réaction, l’objectif du design d’interaction est réussi. Evidemment aujourd’hui c’est plus compliqué que ça, car une action peut en entraîner une autre qui va offrir d’autres options et ainsi de suite. Ceci s’avère être la subtilité du design d’interaction, offrir des possibilités à l’utilisateur tout en le guidant vers ce qu’il recherche, simplement avec les composants d’une interface.
Pour ce faire il faut établir le parcours que l’utilisateur empruntera tout au long de son voyage sur votre site/application. Ainsi il faut pouvoir faciliter ce chemin de plusieurs manières différentes, comme réduire le nombre de page ou encore l’espace entre chaque interaction. L’important c’est de garder de la constance et de la familiarité avec l’utilisateur durant cette traversé numérique.
Sur n’importe quel site, chaque utilisateur va avoir ses propres objectifs et besoins. C’est là que la complexité du design d’interaction entre en jeu. Cependant des habitudes communes sont constatables parmi de larges panels d’utilisateurs. Ainsi il est possible de « prédire » les gestes et réactions des utilisateurs pour finalement améliorer leurs expériences.
Les clés vous l’aurez compris, c’est le storytelling, la maîtrise technologique et la connaissance de son utilisateur.
6 Exemples de design d’interaction
Voici des mises en situation du design d’interaction sous plusieurs formes.
1 – Proposer un formulaire (Input) visuellement agréable
La plupart d’entre vous connaissent surement Adblock, vous l’utilisez peut-être à ce moment même ( inutile sur NewflUX cela dit ) . Ce plugin de navigateur permet d’effacer tout contenu publicitaire sur n’importe quel site (ou presque). Ainsi il libère nos yeux de la pollution visuelle entretenue par la pub, mais évidemment cela pose un gros problème aux annonceurs, aux médias ou tous les autres sites générant des revenus grâce à la publicité.
La publicité est le cœur d’Internet, pour faire simple sans contenu sponsorisé, il n’y apas de revenu, sans retour sur investissement il n’y a pas de site, sans annonceurs il n’y a pas de navigateur, donc pas de Google ni de Yahoo ou autre, bref personne (ou alors que des skyblog ).
Conséquence de quoi, Internet s’est rempli de publicité dissimulée un peu partout sur vos pages. Sur la page d’accueil de certains navigateurs, lors d’une recherche sur le web, durant la navigation sur un site, avant, pendant et aussi après la lecture d’une vidéo, au final la pub est (presque) partout.
Alors on peut comprendre le désarroi ressenti par les utilisateurs de ces intrusions intempestives de suggestions aléatoires. Et évidemment les plus réfractaires à ces recommandations rémunératrices sont les européens -les utilisateurs les plus grognons !
L’utilisation d’Adblock par les internautes en Europe.by Secret Media via 01net
Sans s’éterniser sur les chiffres, Adblock représente environ 200 millions d’utilisateurs actifs dans le monde et cause une perte sèche de 20 milliards aux revenus publicitaires. Ceux qui en pâtissent le plus sont forcément les éditeurs de contenus en ligne, car beaucoup ne misent que sur ces revenus pour prospérer.
Adblock fait d’avantage parler de lui avec son arrivée sur mobile, ce qui agace encore plus les annonceurs.
De plus Apple et Google appuient ce phénomène en pénalisant les sites imposants des pop-up ou bannières trop intrusives via leurs navigateurs respectifs, Safari et Chrome.
En 2015, l’affichage « display » représente 28% du marché de la publicité française et le mobile représente 63% de la globalité du chiffre d’affaire généré ( 425 M€ le 1 er trimestre 2015 source : SRI).
Les éditeurs doivent réagir vite, pour ceux à qui ce n’est pas déjà trop tard.
Un choix cornélien
Les utilisateurs aiment le contenu gratuit, très peu veulent donner de l’argent pour avoir accès à une information alors qu’on connaît Internet pour sa « gratuité ». Le format d’abonnement comme sur papier ne séduit pas assez. L’utilisateur préfère payer pour un magazine qui sera plus personnel que de l’information déposée sur un écran. Ainsi beaucoup de petites structures qui misaient principalement sur la publicité ont dû mettre la clé sous la porte.
Les géants des médias génèrent des revenus via d’autres moyens donc ils ne subissent qu’une faible influence du blocage de publicité -ou ils payent pour s’ajouter à la liste blanche de Adblock. Cependant tous les autres ne peuvent se séparer de la publicité « display ». Beaucoup d’entre eux ont réagi à la croissance d’Adblock en demandant aux développeurs de détecter le plugin et d’inciter furtivement à l’utilisateur de désactiver le “bloqueur de revenus ».
Demander de désactiver Adblock via un pop-up, contre productif ?
Sans réel succès, les utilisateurs continuent à utiliser Adblock et réduisent la croissance des petits sites et ainsi le champs s’élargie pour les gros médias qui appartiennent généralement à des firmes multinationales. Donc si on souhaite de l’information engagée et différente des mégalodons habituels, il faut accepter les publicités car finalement tout travail mérite salaire.
Mais alors, si on accepte d’afficher de la publicité sur un site d’éditeurs qui prône la liberté d’expression et d’information, laissez nous accéder à votre contenu sans se saigner les yeux. Les bannières en milieu de texte, les vidéos qui se lancent lorsqu’on ouvre un article ou les background de site qui pollue totalement la lecture d’une page, ceci est à bannir !
La lecture est plus agréable sans intrusion d’images / vidéos / gif et la compréhension se voit améliorée
La navigation est moins engageante avec des bannières en fond d’écran qui occupent l’espace utile
Si l’utilisateur n’est pas à l’aise, il va vouloir quitter le site, ce qui va augmenter le taux de rebonds, donc réduire le chiffre d’affaire, donc l’annonceur va vouloir afficher d’avantage de publicité, et c’est ainsi que le cercle vicieux s’amorce…
Pour contrer à ce phénomène, beaucoup ont choisi de proposer une offre sans publicités ( notamment pour les services vidéos/streaming où la publicité est vraiment imposée et souvent non négligeable ) Cependant cela amène à une problématique sociale, Internet se transforme t-il en deux régimes, celui des pauvres et celui des riches ?
Je pense qu’il y a plusieurs moyens d’éviter cette radicalisation qui va rendre Internet une source d’information totalement payante ou faussée.
Utiliser avec parcimonie – Use with caution /!\
Tout n’est que question de récurrence et de placement, il faut établir les priorités, le contenu ou les revenus ?
Si vous misez sur le contenu avec en second plan les revenus, alors voici quelques conseils qui peuvent satisfaire vos lecteurs tout en vous rémunérant.
Règle n°1 : Ne jamais imposer visuellement ou par action un service/dispositif/offre à l’utilisateur s’il ne vient pas pour ça.
Règle n°2 : Régir les publicités en fonction de la ligne éditoriale et de la stratégie de contenu du site.
Règle n°3 : Ne pas afficher des « display » surdimensionnés occupant plus 1/5 de l’espace visible d’une page
Règle n°4 : Rendre accessible la fermeture des publicités plein écran ( sur mobile notamment et dans le cas où la règle n°3 n’est pas respectée )
Règle n°5 : Préférer des espaces distincts du contenu de la page, en dessous au dessus ou à coté, mais en respectant la loi de proximité
Si ces règles sont respectées, la publicité peut devenir un vrai atout pour l’image de marque, ou au moins une proposition attrayante qui va générer de l’engagement. La publicité est l’art de dissuasion sans intrusion, sans quoi c’est juste de la pollution. Cela va de soit, les emplacements publicitaires les plus voyants sont évidement les plus rémunérateurs, c’est pourquoi les grands espaces sont souvent privilégiés (comme sur papier).
Des alternatives sont aussi envisageables, la publicité ne doit pas essentiellement être au centre d’un business plan. Diversifier ses activités, ses supports ou améliorer ses offres d’abonnements sont des ouvertures pour afficher moins de publicités.
Voici quelques solutions que j’ai pensé pour diversifier des offres et ainsi réduire l’affichage de bannières sponsorisés :
Organiser des évènements en relation avec une thématique populaire
Créer une application tierce payante
Proposer des contenus uniques et payants, achetable à l’unité ou par très petite quantité/ temporairement
Faire une campagne publicitaire collaborative et créée pour les utilisateurs
Demander à l’utilisateur s’il souhaite afficher ou non les publicités ?
Impliquer l’utilisateur dans la cause/service/produit mis en avant dans une publicité
etc…
L’important c’est de centrer les potentiels besoins de l’utilisateur et de lui proposer des suggestions rémunératrices qui ne vont pas paraître agressives. Enocre une fois, une bonne connaissance de la cible améliorera la pertinence des publicités.
La pub a du bon (parfois)
Pour finir voici des exemples de format publicitaire extrêmement intéressants et rentables. Simplement un peu d’imagination, et l’utilisateur se trouve attiré par ces bannières qui s’avèrent être une véritable valeur ajoutée au site.
Ces pratiques sont généralement plus coûteuses, mais le retour d’engagement est nettement supérieure à la normal, l’identité de marque de l’éditeur n’est pas touchée et le résultat est probant pour l’annonceur.
Générer de l’intérêt avec une bannière actualisée en direct
Acura s’associe avec une ligue de Basketball et ESPN pour commenter en direct le match sur leur bannière. Ajoutez à ça un peu d’humour et l’utilisateur totalement surpris, va se voir suivre le match sur une publicité, génial.
Proposer une autre expérience avec du contenu ajustable
Sony & FIFA propose de modifier intégralement le contenu de la home de ce site d’information ( Russe ? ) en n’affichant que l’information relative au football. Le choix à l’utilisateur est possible via un imposant bouton dynamique qui change le flux d’information.
Voyages SNCF propose un billet de train de deux façons : la facile ( acheter le ticket sur le site dédié ) et la difficile ( scroller la bannière pendant 24h ). Demander l’implication de l’utilisateur on lui montrant sa reconnaissance avec un cadeau à la clé, cela peut être une solution très rentable si l’idée mise en place est attractive.
Rien de mieux que de se projeter dans un futur qui n’est pas le notre, IKEA modifie sa bannière Youtube en petit salon ajustable en fonction de vos choix de couleurs, textures, mobiliers. L’utilisateur s’approprie ce salon et s’imagine dedans. Promesse d’achat assurée tout en divertissant le client, encore une belle démonstration marketing de l’enseigne Suédoise.
Prouver son efficacité avec un service interactif et utile
Quand on peut prouver son efficacité à l’aide d’un service simple et gratuit, il faut pas hésiter. Le gratuit amorce le payant, et cela donne un avant goût du service, ce qui rassure le futur client. Cette bannière interactive est une réussite quant à son engagement et son efficacité.
Amuser l’utilisateur avec beaucoup d’auto-dérision
Finalement on peut rire de la pub, tout en faisant de la pub. C’est ce qu’a fait Virgin en créant une bannière publicitaire qui s’en va en vacances… Ils ont repris le cliché des « display » web pour les caricaturer en faisant partir les personnages en vacances. L’humour ça fonctionne toujours, cependant ce n’est jamais évident à trouver et le format reste le même, c’est juste le fond de campagne qui est ingénieux.
Quand il s’agit d’outils de travail, les professionnels de conception UI/UX, se divisent systématiquement en deux clans qui se font une guerre de préférence.
Dans le premier clan, il y a les adeptes de Photoshopqui se sont accommodés du puissant logiciel de retouche photo de chez Adobe et l’ont aussi adopté pour la conception d’interfaces. Ceux du second clan, trouvent que Photoshop n’est aucunement adapté à ce genre de travail et est d’ailleurs trop complexe pour un débutant. Pour ça, leur alternative est Sketch App qu’ils disent simple, pratique et fonctionnel. Mais ça c’était avant!
Projet Comet une App desktop et mobile dédiée UX Design by Adobe.
C’est dans la soirée du Lundi 05 Octobre 2015 lors de la keynote de sa grande messe annuelle #AdobeMax regroupant près de 6000 créatifs du monde que la firme a annoncé le nouvel outil que je vous laisse découvrir en vidéo :
Comme vous l’avez vu dans la vidéo ci-dessusComet est un puissant outil qui vous permettra de créer des wireframes, maquettes graphiques, prototypes avec une prévisualisation en temps réel de votre création sur vos différents périphériques (smartphone, tablette et desktop).
Si on reprochait à Photoshop son interface un peu surchargé, on dirait presque que Comet n’a pas d’interface du tout et que Sketch à du soucis à se faire.
Grande joie pour les UX Designer qui utilisent Windows.
S’il est vrai Sketch App a raflé une bonne part de marché des designers UI et Ux, il n’en demeure pas moins vrai que ces derniers sont exclusivement des utilisateurs de Mac OX. C’est sûrement la plus grosse frustration des designers qui utilisent Windows car Sketch est compatible avec les Mac uniquement. Mais avec Comet, la donne va changer et l’outil sera bien disponible sur Windows sans oublier l’application mobile pour rester fidèle à la politique de mobilité qui prend de plus en plus d’importance chez Adobe.
Sketch App + Invision le tout en un?
On est en droit de se poser la question car le N°1 mondial de conception d’application numérique ne s’est pas contenté de développer un outil de création d’interfaces, non non, il est allez beaucoup plus loin que sont concurrent direct.
En effet, Comet permet, une fois le prototype conçu, d’ajouter des interactions (gestuelles ou clics) et des animations afin de tester dans les conditions proches d’une app déjà codée comme avec « InVision« .
Et comme si ça ne suffisait pas, le volet collaboratif s’est ajouté pour permettre aux concepteurs de partager leurs créations avec les membres des différentes équipes et les clients afin que ses derniers puissent donner leur avis sous forme de commentaires.
Démonstration de l’application, la facilité d’utilisation est déconcertante. by VentureBeat
Pas encore né que déjà parrainé
Comme à son habitude, pour toutes ses apps, Adobe crée une compatibilité d’utilisation entre elles. Ainsi donc, le futur bébé se verra encadrer par ses aînés Illustrator et Photoshop pour offrir des solutions plus poussées aux concepteurs qui en voudraient plus. Il est également à noter que l’outil sera à même de générer du vectoriel et du bitmap.
En gros, la guerre lancée à Photoshop par Sketch il y a quelques mois déjà est très loin d’être terminée car Adobe sort l’artillerie lourde. Bonne nouvelle, Sketch aura un peu de répit, il faudra attendre jusqu’à 2016 pour voir sortir son nouveau concurrent selon l’annonce d’Adobe.
« Un écran de portable c’est plus petit, donc la typo sera plus petite, normal » Bah non… Inversement ! Pour que le contenu soit lisible et manipulable, le corps de police doit s’ajuster en conséquence. La gestion typographique a une importance cruciale dans la lecture d’une page/interface
Il n’existe pas de solution clé, chaque interface va avoir ses particularités qui guideront le choix de la taille, de l’écartement, de la police, du contraste, etc…
Néanmoins, il y a une règle à respecter : offrir à l’utilisateur un contenu accessible. C’est alors qu’un terrain harmonieux entre l’espace et les mots doit se former.
L’utilisateur est d’autant plus exigeant en matière de lisibilité sur mobile du fait que l’environnement dans lequel il est utilisé est changeant et dérangeant. La luminosité de l’écran, les reflets de la lumière, les rayures ou les éclats sur l’écran ( si si ) peuvent perturber la lecture.
La première erreur a éviter, c’est d’utiliser la même taille de police sur écran d’ordinateur et sur mobile. Même si le contenu s’adapte bien il est préférable d’augmenter légèrement la taille du texte courant ( 16px sur grand écran, 18px sur petit écran ). L’idéal c’est d’obtenir entre 30 et 40 caractères par ligne.
L’espacement est aussi primordiale, les lettres doivent respirer entre elles afin d’éviter des blocs compacts de mots illisibles. Il faut également éviter de juxtaposer les paragraphes entres eux et aligner le texte aux bordures de l’écran sans espacement.
L’utilisateur perçoit qu’une partie de la page, avec généralement une restriction en largeur, mais le déffilement en longueur est souvent libre. Ainsi sur mobile, une longue colonne de texte peut être facilement dissimulée sous la facilité du scroll. Il ne faut pas pour autant privilégier deux colonnes plutôt qu’une, tout dépendra du contenu du texte et du nombre de caractères par lignes.
Il faut savoir qu’une ligne entière sur grand écran va se retrouver divisée en plusieurs lignes sur mobile, donc inconsciemment cela va paraître plus long pour l’utilisateur de lire sur mobile que sur ordinateur. Sauf si l’espace entre chaque ligne est suffisant pour laisser respirer le texte. Notamment lorsqu’il s’agit de liste, il faut bien différencier un saut de ligne avec l’écart entre deux pastilles.
Une typographie lisible pour une lecture tout terrain
On ne lit pas un livre sur un écran portable, on lit difficilement un article et parfois on a du mal à déposer nos yeux sur les deux phrases introductives d’une home page. Donc il faut simplifier au maximum la lecture pour les utilisateurs dans toutes les situations et ceci commence par un contraste notable entre la typo et le fond.
Le texte gris clair sur fond blanc, on est d’accord ça rend bien sur un écran Mac 4K 15 pouces, mais pas sur un écran mobile avec le reflet des néons du métro dessus.
Typo gris foncée sur fond gris clair, cela peut vite devenir illisible avec des reflets lumineux
Les puristes diront que trop de contraste peut gêner l’œil et être contre productif. Je pense qu’il y a un juste milieu, ne pas forcer le blanc & noir et miser sur des couleurs légèrement nuancées.
Sans compter qu’il faut penser aux dyslexiques et daltoniens qui peuvent présenter des troubles de la lecture en fonction des couleurs choisies. Par exemple le texte en noir #FFFFFF sur fond blanc peut engendrer des effets de vibrances déreangeantes pour l’utilisateur.
C’est pourquoi il faut opter pour une couleur différente du noir total, comme un gris très foncé ou un noir légèrement contrasté, comme ci dessous :
Exemple de noir à utiliser pour éviter le « noir absolu »
Vous pouvez tester la qualité de votre contraste grâce à cet outil qui affiche également les valeurs de la W3C
Quelle police choisir pour ses utilisateurs
La question se pose en effet, et je suis sûr que vous vous demandez aussi : Avec ou sans Serif ? Le choix de la police sur mobile est d’avantage compliqué que le nombre de résolution d’écrans différents est large.
En effet, en impression (print), la Serif est reconnue pour améliorer la lisibilité et faciliter la lecture en guidant l’œil horizontalement grâce aux empattements.
Cependant des études ont prouvé que sur écran, la différence entre sans serif et serif est nettement moins comparable. De plus les écrans sont faits de pixels carrés, donc la typo serif ( possédant + de courbes que la sans serif ) a tendance à « baver » sur des écrans à faible résolution. Ceci n’avantage pas la typo favorite des manuscrits, ainsi la sans serif se retrouve en grande majorité sur les interfaces digitales, au grand bonheur des dyslexiques et malvoyants.
The New York Times à gauche. Un article Medium à droite.
Pourtant il existe bien d’irréductibles gaulois, comme TNYT ou Medium qui favorisent encore la Serif. The New York Times on peut se dire que c’est pour des raisons d’intégrité et d’image de l’enseigne, cependant pour Medium c’est purement intentionnel. Vous remarquerez quand même l’espacement entre les lignes sur Medium (à droite) est plus agréable que sur le TNYT (à gauche)
Encore une fois il n’y a pas de règle précise, cependant si votre contenu mise uniquement sur le texte, vous pouvez peut être envisager une police Serif qui soit propre et espacée, sinon il est préférable d’utiliser une sans serif.
Mettre le titre en sans serif et le texte courant en serif c’est devenu très courant. by Bilal | S&N
La police est juge de la tournure du contenu
La typographie doit être le reflet de l’intention de votre site / application. Grâce aux codes instaurés avec le temps, l’utilisateur développe une opinion générale du site avec le simple choix de police. Imaginez le site de l’assemblée Nationale avec la typo et les codes couleurs du site Studio Bagel… Bon vous comprenez l’importance maintenant ?
Il faut donc apporter une importance au choix de la typographie d’une manière globale pour le site et ses utilisateurs. Il ne faut pas se concentrer sur juste un élément en particulier mais sur l’ensemble du service/produit.
En considérant les fonctionnalités et le contenu du site on peut plus facilement determiner l’intention graphique qu’on souhaite apporter. Il sera plus évident de faire un choix cohérent après avoir pris connaissance de l’image que le site souhaite refleter.
La réflexion ne sera pas la même pour une police de texte courant que pour la typographie utilisée pour des boutons. Par exemple pour une application qui permet de commander un taxi, la typographie se devra affordante afin de répondre aux actions mécaniques de l’utilisateur dans le but d’éviter la confusion.
La typographie c’est aussi une question de rythme
Tout ne se lit pas de la même manière, avec la même allure et concentration. On peut alors facilement jouer de ces codes pour rythmer la navigation de l’utilisateur. Vous l’aurez compris, une typographie très manuscrite s’appuyant beaucoup sur les pleins et les déliés est plus difficile à décrypter qu’une typographie baton. L’utilisateur va prendre plus de temps et va en profiter pour s’attarder sur d’autres éléments visibles, ce qui peut être un bon moyen de faire passer des informations importantes.
Cela fonctionne aussi avec les typos batons très fines et très compactes, si l’objectif est de ralentir l’utilisateur, il faut alors privilegier une belle mise en forme.
C’est toujours bon de regarder derrière soi afin d’évaluer le chemin parcouru, c’est sur cette idée qu’ UXtimeline est né ! Ce site propose de visualiser l’historique des interfaces de site web et mobile, de leurs naissances à aujourd’hui. Une très bonne façon d’avoir un apércu rapide des améliorations graphiques et UX faites au cours des années.
On (re)découvre les premieres interfaces mobiles, le skeuomorphisme de l’époque et les couleurs flamboyantes des logos du début d’Internet.
C’est important de voir l’évolution des sites à grand succés, voir les tendances UI au fil des années, constater l’épuration graphique des logos et apprendre des refontes effectuées.
Ce site vient à peine de sortir qu’il comporte déjà 3 références : Airbnb, Deezer et Uber.
On peut y apprécier l’évolution du logo d’Airbnb, comme la première interface de Deezer qui s’appelait en réalité « Blogmusik » lors de sa création ou encore la toute dernière version très épurée du site Uber.
Luke Wroblewski est une référence en matière de design centré sur l’utilisateur, il est actuellement Directeur produit à Google. Auteur de 3 livres sur la conception et le design d’interface (Mobile First, Web Form Design & Site-Seeing: A Visual Approach to Web Usability ). Ce qui est grandement appréciable avec Luke c’est son désire de partager ses connaissances et ses expériences au grand public. Il publie réguliérement des articles / vidéos et autres photos sur son site et son Twitter.
L’UX Design, le terme que tout le monde utilise en ce moment. C’est particulièrement vrai dans le milieu du digital. Les agences se réjouissent d’avoir un pôle « UX » sans vraiment en connaître les grands principes. On reconnaît l’efficacité et le besoin de se concentrer d’avantage sur les utilisateurs, ainsi la promotion de l’UX est vite faite. Pour autant si le processus UX n’est pas bien intégré en amont et adapté aux étapes de développement digital déjà implantées , cela reviendrait à utiliser une perceuse électrique sans alimentation.
En cherchant sur internet la définition d’UX Designer vous pourrez facilement comprendre que le bénéfice apporté par les étapes de conception UX sont fondamentales pour améliorer le rendement d’une plateforme digitale. Mais il ne suffit pas de recruter un « UX designer senior » pour que d’un coup tous les projets se retrouvent centrés sur l’amélioration de l’expérience utilisateur. L’UX design intervient à plusieurs moments de conception d’un projet, avec plusieurs branches de métier différentes, ainsi il faut prévenir de ces changements afin d’accueillir au mieux l’approche UX.
Préparer ses équipes aux changements
Si vous êtes une agence et que vous vous apprêtez à recruter un UX designer, voici quelques conseils à suivre pour intégrer au sein de vos équipes les changements qui toucheront leurs processus.
C’est essentiel de prévenir ses chefs de projet, développeurs, planeur stratégique et créatifs, car à fortiori leurs méthodes de travail vont être bousculés.
– Les créatifs vont recevoir des livrables qui ne voyaient que partiellement auparavant ( wireframe / zoning – Le planning sera bousculé de manière générale ( méthode SCRUM, test et interview utilisateur )
– Le développeur sera d’avantage guidé sur les animations et les principes de navigation à intégrer.
Le but n’étant pas d’apprendre chaque étapes de conception UX aux équipes correspondantes mais plutôt d’apprehender au mieux les changements et continuer à exercer ses compétences conjointement au processus UX.
Pour que ce soit efficient, il faut au maximum faciliter le contact entre les différentes équipes et faire de l’UX le pivot de chacun de ces échanges. En correlation avec le chef de projet, l’UX designer décidera des meilleures solutions à envisager pour répondre à la demande.
Pour ce faire il faut lui laisser le temps d’analyser la cible, la concurrence et de connaître les besoins des utilisateurs. ( Consacrer une à deux semaines idéalement pour ces étapes )
Sans communication entre chaque équipe, le résultat ne sera pas le même et le risque que chacun parte dans sa propre direction devient incontournable.
Impliquer davantage le client dans le processus
Lorsque l’on arrive à l’étape d’idéalisation du concept grâce aux zonings, aux wireframes puis aux principes d’interaction, l’échange avec le client est évident. Cette grande étape est séquencée par l’échange entre l’UX designer, le client et les équipes mais aussi par des tests utilisateurs.
C’est là qu’intervient la tutelle du client, qu’il faut habituer à examiner des wireframes ( des maquettes d’interface non finies ) afin qu’il puisse se projeter sans s’attarder sur des détails de wording ou de forme qui ne sont évidemment pas l’objet de la présentation.
Un oeil non averti aura des difficultés à imaginer des éléments d’habillage graphique sur un wireframe en noir et blanc. Pourtant l’intérêt d’un prototype c’est de s’intéresser aux fonctionnalités techniques plutôt qu’à la forme.
Cependant si le client se prend au jeu il peut intervenir à de nombreuses reprises lors de la phase de prototype en « jouant » à l’utilisateur sur des maquettes papiers ou interactives. Ainsi il comprendra plus facilement les principes de navigation et il pourra également identifier des erreurs ou des frictions.
Créer une relation solide avec les graphistes
Après la première validation du client, le « flambeau » se passe entre UX et graphiste pour laisser place à la mise en forme. Certains graphistes pensent que l’UX designer devient un frein à l’imagination en structurant trop le squelette du projet. Je pense que c’est une erreur qui vient de ce manque de cohésion entre les deux parties.
Les UX designers apportent la tournure fonctionnelle et les grandes lignes du storytelling, cependant les directeurs artistiques sont là pour bonifier et donner une forme améliorée à la structure de base
Répondre au besoin des utilisateurs ne signifie pas que l’on bloque toute opportunité d’innover graphiquement.
Il faut pouvoir expliquer l’intention principale de l’interface et sa navigation, cependant il ne faut pas être fermé à une structure graphique poussée tant que son utilisation est efficiente.
Par exemple, l’UX designer va décider que pour rafraichir une page sur mobile, il faut appuyer et glisser vers le bas en maintenant le temps du chargement. Le graphiste va intervenir pour rajouter à cette animation un effet graphique et émotionnel. Ceci peut être soumis par l’UX, cependant c’est au graphiste d’imaginer la finalité, en fonction du ton et de l’intention graphique.
L’UX et le directeur artistique doivent pouvoir échanger librement sur les aspects visuels et fonctionnels d’un projet. Néanmoins suivant l’objectif du site, l’efficacité d’utilisation devra primer ou non sur l’extravagance graphique.
Nous espérons que vous appréciez la nouveauté visible ce soir sur Twitter et Vine : l’apparition des cœurs !
C’est en ces mots que le réseau social de microblogging a annoncé ce qui selon lui était l’innovation du siècle, des « cœurs » sur Twitter pour « liker » (principe déjà présent sur Facebook) avant d’expliquer :
GIF
Un changement qui n’est pas l’avis de tous les utilisateurs
« Avec ce changement, nous souhaitons simplifier et enrichir l’usage de Twitter. Nous savions que parfois les étoiles pouvaient porter à confusion, en particulier chez les nouveaux utilisateurs. Vous pouvez aimer beaucoup de choses, mais toutes ne peuvent pas être vos favorites. »
Nous pouvons comprendre aisément que ce changement est basé sur une ambition noble, néanmoins il reste à savoir à qui tout ceci profite réellement ?
Sûrement pas aux 316 millions d’utilisateurs actuels pour qui « la petite étoile » ne portait pas franchement à confusion. En tout cas ces derniers n’ont pas tant apprécié que ça :
Faire des tests est une obligation quand on adopte les principes de conception centrée utilisateur. Ainsi donc, que ce soit pour un nouveau service ou pour l’amélioration d’un service déjà existant, il est primordial de savoir en amont comment les utilisateurs s’approprient ou accueillent les nouveaux changements.
Pourtant Twitter s’avère être fervent des tests A/B sur des panels bien ciblés de ses utilisateurs (Twitter Moments, changements liés au profil … ). Dans le cas des « cœurs », Twitter affirme avoir procédé de la même manière, pourtant le résultat n’est pas convaincant pour un large nombre d’utilisateurs actifs sur le réseau.
«Lors de nos précédents tests, nous avons constaté que les gens ont adoré l’utilisation de ces cœurs. Vous avez adopté les cœurs de manière exceptionnelle sur Périscope, et nous sommes ravis aujourd’hui de les intégrer à Twitter et Vine, homogénéisant ainsi les échanges pour l’ensemble de notre communauté.»
Il y a peu de chance que l’identité des sujets de ces tests soit divulguée un jour, nous savons que différentes méthodes ont été utilisées. Mais face à la déception d’un si grand nombre, nous sommes en droit de nous demander d’où vient l’erreur ?
C’est alors que la question du panel de testeurs devient essentielle. On sait que chaque utilisateur aura sa propre utilisation, ainsi le choix des testeurs doit être judicieux afin d’être le plus hétérogène possible. L’intérêt d’élargir au possible son champ de test, c’est l’assurance de couvrir plus de distinctions dans les usages et ainsi recevoir des avis différents et complémentaires.
Peut-être que Twitter aurait dû étendre ses tests plus longtemps et sur un panel plus diversifié.
Pour les utilisateurs « la petite étoile jaune » ne voulait pas forcément signifier « j’aime ».
Comme on le dit : si vous voulez savoir ce que les gens font vraiment, observez leur comportement. Parce qu’entre ce que les gens (comprenez les utilisateurs) disent et ce qu’ils font, ce que vous (concepteur) pensez que ces utilisateurs font et ce qu’ils font réellement, il y a très souvent une très grande différence. Le cas actuel est un très bon exemple. Il aurait peut-être fallu chercher à mieux comprendre le comportement des utilisateurs qui l’expriment très bien ici :
L'etoile ca voulait pas dire que j'aime mtn c un coeur ca va etre ambigu
Avant l’Internet c’était du grand n’importe quoi et avec pas grand chose. Les gens partaient de rien en expérimentant leur imagination en fonction des technologies possibles (principalement html/css/flash). Il y avait donc une diversité incroyable de formats, de formes, de couleurs et de dispositions entre chaque site internet.
On n’avait pas peur d’utiliser des effets sonores, des dégradés imposants ou encore des patterns à répétition. C’était un peu comme un comptoir de bar de village, où on n’était jamais très fier d’y être, mais où on était sûr de s’y amuser. Tandis que maintenant Internet c’est devenu les Galeries Lafayette, c’est blindé, tout se ressemble, on ne veut pas y aller alors on y fait toujours bonne figure.
Certes, le web de 2005 était moche et fou mais au moins c’était drôle, on pouvait s’attendre à tout, cliquer sur un lien devenait une vraie expérimentation dont on se souvenait forcément. Aujourd’hui, tout est bizarrement similaire.
Internet a perdu son âme d’enfant
Internet a grandi, et comme tout être qui grandit, il mûrit et il appréhende davantage le risque au détriment de sa folie. Le web s’est pourvu de règles de lecture et de navigation qui ont au fil des années formaté la structure globale des sites.
Avant, les sites internet étaient beaucoup plus scénarisés, la gamification était davantage utilisée, l’expérience était donc mémorable. Mais les récentes lois de compatibilité et de présence sur tous supports ont fait chuter et ont enterré le langage Flash. A mon avis, la mort de Flash est le résultat de cette perte de créativité et d’extravagance que l’on pouvait retrouver lorsque le langage d’animation, devenu obsolète aujourd’hui, était encore le plus utilisé.
Aujourd’hui Flash a été largement remplacé par des grilles Bootstrap permettant principalement l’adaptation aux différents supports et tailles d’écran.
Evidemment que le responsive et le usability d’un site sont essentiels. Cependant la généralité des supports de développement, les mêmes grilles de construction, l’échange de code pré-fait (Purecss / Codyhouse), ou l’achat de thème (+7000 sur themeforest), tout ceci ramène au manque de distinction global entre chaque site.
De nos jours, qui n’est pas tombé sur ce genre de site composé d’un grand encart en full screen avec un imposant call to action, suivi de plusieurs sections similaires (image à gauche, texte à droite ou vice versa) pour finir avec un autre call to action en fin de page … ennuyeux n’est-ce pas ?
Evidemment ce modèle fonctionne plutôt bien, il est clair et plaît à l’utilisateur. D’autant que l’habitude de naviguer sur ce genre de template facilite d’autant plus la compréhension sachant que nous savons déjà à quoi nous attendre. Et bien qu’il existe de très beaux sites Bootstrap (exemple bootstrap) cela n’empêche que le web design est entrain de mourir à petit feu.
Le web design est mort, vive l’UX
Les technologies ont dominé la créativité, pourtant il n’y a pas que du mauvais, grâce au html5 / css3, nous sommes à même de reproduire les délirantes plateformes de l’époque, comme le prouve Chrome Experiments, le webGL a encore pleins de choses à nous montrer. Mais faut-il encore que les designers, développeurs et UX s’affranchissent des limites données par le « copie ton voisin en mieux et c’est gagné ».
L’UX designer ne doit pas seulement rendre un contenu appréciable et accessible, car dans la plupart des cas, les contenus sont similaires ou équivalents. Un UX doit aussi et surtout rendre l’expérience mémorable et distinctive.
Ceci passe donc obligatoirement par une recherche approfondie du besoin d’interaction et des valeurs que doit dégager le site. L’important c’est de se détacher le plus possible des codes et ressemblances des milliers de thèmes WordPress – Bootstrap déjà existants (plus de 6 millions de sites fonctionnent sur bootstrap).
Pas facile dit comme ça, mais lorsqu’il s’agit de gros budgets, c’est une honte de proposer des sites qui pourraient être faits à l’aide d’un thème à 70$ et d’un CMS gratuit.
Let’s break the rules : l’utilisateur doit se sentir déconcerté sur un site, il faut qu’il ressente des sensations différentes plutôt qu’une simple lecture uniforme et « scrollée » du site.
Arrêtons les boutons rectangulaires aux bords arrondis, arrêtons les menus linéaires et épurés, arrêtons les sliders plein écran en haut de page. Reconstruisons le web et son interface. Il suffit parfois de simples détails pour que la différence se fasse ressentir, alors faisons un petit effort …
Pensez aux interactions invisibles, aux interfaces 3D, aux effets sonores et au storytelling. On peut également mettre en avant l’échange avec l’utilisateur grâce au capteur de voix, d’image ou de toucher qui sont quasiment tous présents sur les supports mobiles et qui sont hélas si peu utilisés.
Nous sommes actuellement dans la vague d’une mode où chacun veut tirer son épingle du jeu, mais aucun des géants du web ne veut prendre les devants. Ils ont peur de dévoiler l’aisance qu’ils peuvent avoir auprès des utilisateurs sur le fait que oui, un site peut avoir accès à votre micro, à votre caméra ou encore à votre localisation, evidemment avec ou sans votre autorisation. Cependant ceci serait l’amorce d’une nouvelle ère de design web.
Une fois que le temps de la sécurisation des données et des règles de confidentialité sera passé, nous pourrons retourner sur un Internet plus libre au niveau créatif comme au niveau de l’expérience.
Evidemment Newflux tourne sous WordPress avec un thème utilisant Bootstrap, et c’est là toute la contradiction de la chose, faut-il choisir la simplicité ou miser sur la démesure ? Pour ma part c’était avant tout une restriction due à mes capacités en développement. De plus lorsque l’on a pas les moyens financiers ou intellectuels de faire quelque chose de différent, merci WordPress.
Mais dans le cas contraire merci de faire travailler des UX designers, votre site et vos utilisateurs vous en remercieront.
Infographie : 10 statistiques surprenantes sur l’#UX Design #data Click To Tweet
Ces informations sont à prendre avec parcimonie, car en effet certaines sont datées et d’autres se basent sur des études pas forcement représentatives. Cependant cela donne une tendance globale des comportements des utilisateurs ainsi que le bénéfice que peut apporter l’UX dans le design de site web.
Cette infographie a été faite avec Picktochart, une petite web app bien sympa qui permet de réaliser facilement des infographies rapidement et facilement.
La conception d’expérience utilisateur est une notion complexe qui demande une vigoureuse attention pédagogique et une connaissance méthodologique évidente. Comme toute connaissance, elle se perfectionne avec le temps et l’expérience, néanmoins il faut connaitre un grand nombre de principes théoriques si l’on souhaite s’améliorer ou alors se lancer dans ce métier.
Pour ça il existe évidemment des formations continues ou initiales mais la matière étant récente, il existe peu d’écoles en France à ce jour. De plus il n’y a pas encore de programme scolaire établit et la qualité des formations dépendent énormément des intervenants.
Il demeure également et de plus en plus des conférences UX un peu partout sur l’hexagone (FLUPA, UX Rennes et bien d’autres) pour s’informer sur le design UX. Assister à des conférences c’est essentiel pour établir de bons contacts et approfondir ou découvrir plusieurs sujets bien précis.
En complément à tout ceci : Internet et sa source inépuisable d’articles professionnels ou personnels venant des quatre coins du monde.
Vu comme ça, il n’y a pas de raison que cela ne suffise pas !? Et bien si. Et ceci pour une raison qui s’avère plutôt simple : le design d’expérience utilisateur et les domaines environnants sont trop larges et complexes pour être entièrement retenus par une seule personne.
On peut connaître toutes les méthodologies UX, cependant les appliquer toutes parfaitement sans rappels écrits ou oraux, cela relève de l’exploit.
Le livre est à l’UX ce que le code civil est à l’avocat.
Dans le même principe qu’un avocat, l’UX designer doit savoir utiliser les pratiques adéquates aux situations auxquelles il fait face. La flexibilité et la pluralité des méthodes de conception UX ne permettent pas de toutes les appliquer sur un seul projet.
C’est d’ailleurs ce qui déterminera le bon du mauvais UX Designer suite aux choix qu’il fera concernant les solutions méthodiques utilisées.
Les technologies rythment l’évolution du métier sans compter le contexte psychosocial et ethnique des utilisateurs qui est changeant et évolutif. C’est donc compliqué d’être à la fois pointu dans les nouveautés et être aussi connaisseur de toutes les méthodologies qui définissent l’UX design. Même les meilleurs UX designer du monde doivent s’informer continuellement et apprendre des autres chaque jours s’ils souhaitent concevoir les expériences de demain.
C’est pourquoi les supports écrits et notamment les livres sont INDISPENSABLES pour apprendre, developper et affuter son savoir sur le sujet. Ils constituent une base théorique et pédagogique très complète et toujours à portée de main.
De plus ces livres méthodiques sont souvent très bien faits et construits de façon à pouvoir comprendre et appliquer une méthode ou un principe UX de manière très protocolaire et pédagogue.
Les livres sont véritablement des outils qui servent de support lors de l’application du processus UX.
Le seul petit inconvénient des livres sur l’UX design c’est qu’au bout de quelques années ils peuvent vite devenir désuets du fait qu’Internet change constamment. Mais pour contrer à ça il existe une solution : acheter les livres récents !
C’est l’occasion parfaite de vous conseiller vivement d’acheter ces deux livres français qui viennent d’être publiés :
Ils vous occuperont parfaitement jusqu’aux fêtes de Noël ainsi que pendant le reste de l’hiver. Après ça vous serez incollables sur la mise en pratique de l’UX et spécifiquement sur mobile, le futur support le plus utilisé dans le monde.
Expérience utilisateur mobile : UX design pour smartphones et tablettes
Amélie Boucher, s’est concentrée dans son nouvel ouvrage sur l’ergonomie appliquée web mobile. Beaucoup d’exemples pratiques et de visuels complètent ce livre, ce qui est vraiment agréable et efficace en matière de compréhension. Les 6 grandes parties qui forment ce livre sont différenciées par des couleurs ce qui facilite l’assimilation des différents points abordés.
Dans cet ouvrage, on découvre comment les champions du mobile parviennent à créer des expériences engageantes. L’apprentissage se fait à travers plus de 600 cas pratiques parmi lesquels on retrouve des pure players, des grands du web (Airbnb, spotify, Waze…) mais aussi des acteurs plus confidentiels. Amélie Boucher explique avec pédagogie comment optimiser l’UX design pour smartphones et tablettes. Expérience sensorielle, gestes, navigation, gestion de l’attente ou encore design émotionnel : tous les sujets sont abordés pour donner au lecteur les clés d’une expérience mobile réussie !
Véritable encyclopédie de l’expérience utilisateur, ce livre regroupe 30 méthodes fondamentales pour concevoir et évaluer les systèmes interactifs. Ce livre est à conseiller aussi bien aux UX designer et product designer mais aussi à tout ceux qui conçoivent des systèmes interactifs. Extrêmement complet et méthodique ce livre conviendra à tous : professionnels, étudiants, chefs de projets chercheurs ou patrons, cet ouvrage est une ressource précieuse pour mener à bien leurs projets.
Articulant théorie et pratique, cet ouvrage présente 30 fiches méthodologiques couvrant l’essentiel du design UX et de l’ergonomie des interactions homme-machine. Vous serez guidé pas à pas à travers les étapes de réalisation de chaque méthode et accompagné pour prendre les décisions les plus adaptées à votre projet.
Je ne peux que vous conseiller d’acheter ces deux livres et remercier leurs auteurs de rendre accessible l’UX design en France et de contribuer à son développement.
Le géant d’Internet cherche à unifier ses services en Material Design afin de déployer son enseigne Alphabet de manière cohérente graphiquement et fonctionnellement.
Google+ revoit son interface, des changements UX importants modifient son utilisation Click To Tweet
C’est donc dans cet esprit que Google a mis à jour son réseau social Google+ en se concentrant sur l’utilisation qu’en avaient les utilisateurs réguliers. Mais cette 3ème refonte sera t-elle vraiment bénéfique et réussira t-elle à propulser le réseau à la hauteur des attentes espérées par l’enseigne de Montain View ?
Luke W. explique dans son post que l’équipe en charge de la refonte du réseau a procédé à une large série d’examinations des utilisateurs en condition réelle ainsi qu’à une pointilleuse analyse des usages. Ceci avec pour ambition de faciliter et améliorer l’utilisation des Communautés et des Collections, deux fonctionnalités du réseau qui font son succès auprès des passionnés de Google+ (car oui il y en a !).
Le mot d’ordre : simplifier
On le sait tous, Google+ a un vrai problème de popularité auprès des internautes. En effet on possède tous une adresse Gmail, voire un compte Google+ mais personne ne va suivre le fil d’actualité et/ou partager des publications non automatisées.
Il y avait donc un gros problème de compréhension des utilisateurs concernant l’utilité et les grands principes du réseau. Je pense que Google voulait positionner son réseau social comme un pont liant les différents services de l’enseigne (Hangout, Google photo, Google Search, Blogger, Google page, etc.). Mais la confusion était notoire lorsqu’il s’agissait de suivre son fil d’actualité ou alors de discuter avec un ami, la famille, une connaissance ou plus.
L’ancien Google+ structurait ses pages en trop de sections de navigation différentes : header / sous menu / discussion Hangout à droite / onglet de discussion en bas / menu contextuel à gauche / fil d’information en pleine page.
Maintenant cela est bien plus clair, le menu n’est plus en onglet apparaissant qu’en hover (ce qui était particulièrement agaçant).
Les statistiques et les observations des usages ont du être décisives concernant l’inutilité de « Populaire sur Google+ » et « Evénements » dans la navigation principale du réseau, du coup ils n’y apparaissent plus. Google Hangouts, quant à lui a maintenant son site dédié avec ses propres fonctionnalités, gardant toujours pour objectif de devenir son propre opérateur mobile.
Le réseau se veut maintenant être une simple place de partage et d’échange, sans messagerie privée ni instantanée où des discussions se superposent et s’affichent sur le fil d’actualité ou encore sur Gmail. Désormais Google+ est juste une plateforme sociale simple.
Ainsi sans ces fonctionnalités qui sont maintenant externalisées, le réseau se retrouve allégé et épuré. Cependant lorsqu’on fait une refonte d’une plateforme complète en souhaitant tronquer des possibilités d’action ou d’accès à des services, on se confronte à la perte de certains repères auprès des utilisateurs …
Un focus sur les Communautés et Collections
Dans sa nouvelle version, G+ se concentre principalement sur ce qui fonctionnait sur le réseau, c’est à dire : les Communautés et les Collections. Ces items se retrouvent donc juste en dessous de l’onglet « Accueil » présent dans la navigation de gauche, contrairement à avant (cf. screenshot en bas). Ceci témoigne d’un travail sur l’architecture de l’information en fonction de la priorité des besoins utilisateurs.
Pour ceux qui ne connaissent pas Google+, les Communautés sont comme des forums et les Collections sont comme tableaux Pinterest avec la possibilité de mettre des liens et des vidéos. D’un côté on est membre, de l’autre on suit, bref Google+ mise entièrement sur le partage social sans featuring inutile.
Qui dit réseau social dit boutons de partage. Google se soumet à cette contrainte de mettre ses propres concurrents (Facebook, Twitter …) dans la boucle pour le bien de tous :
3 fonctionnalités qui laissent perplexes
En ce qui concerne la clarté et l’épuration du contenu, le Material Design accomplit pleinement cette mission. La grille des cartes, l’effet Ripple sur les boutons et les meaningful transitions ont désormais leur place ici.
Cependant quelques choix restent étonnants
L’encart pour publier une nouvelle s’affiche en contextuel alors qu’avant il se « morphait » pour venir se placer au centre de l’écran sans recouvrir le contenu. Ceci s’explique par la pastille flottante en bas à droite qui permet de publier un statut sur toutes les pages simultanément (Communautés, Accueil et Collections) notez que cette option n’est présente que sur l’Accueil.
Dans les Communautés il existe des catégories, dans l’ancienne version elles étaient toutes affichées, maintenant elles sont cachées sous une liste déroulante. C’est défendable, cependant ce qui l’est moins c’est l’alternative qu’a choisi Google au problème d’une liste déroulante qui est d’afficher un maximum d’items en obstruant le moins possible le contenu déjà présent, et ça peu importe le nombre d’items en liste.
Troisième remarque due à la simplification, la séparation de la page Google+ et de Google My business est définitive. Néanmoins la confusion est toujours notoire entre la page G+ et un profil G+, les deux ne possédant pas les mêmes fonctionnalités. On peut le constater avec les items disponibles dans le menu gird en haut à droite qui sont différents (profil = perso / page = pro) cependant maintenant, seule la photo de profil permet de faire la différence entre les deux. Un gros manque d’affordance pour l’utilisateur.
Merci à Benjamin Lupu pour sa vidéo et ses échanges sur le sujet.
Et vous, que pensez-vous de cette refonte ? Est-ce que vous irez plus facilement y faire un tour ? Ou vous resterez hermétique au réseau d’Alphabet ?
Des centaines de sites Internet sont créés par jour, on a dépassé le milliard de site web en ligne il y a peu. On estime en 2013 pas moins de 100 milliards d’applications qui ont été téléchargées, autant dire que maintenant les utilisateurs, nous, avons largement le choix. Un panel d’opportunités différentes s’offre à nous.
Comprendre les grandes étapes de conception UX via des exemples concrets Click To Tweet
Nous commençons naturellement à s’accoutumer aux différents usages et nous développons des réactions émotionnelles (ou physiques) aux interfaces auxquelles nous faisons face. C’est pourquoi il est important de se démarquer et de « plaire » à l’utilisateur.
Pour ça il faut faciliter l’aboutissement de son parcours en répondant à ses besoins. Si l’utilisateur se plaît sur une interface, ce n’est pas pour autant qu’il y restera ou qu’il comprendra ce que le service souhaite transmettre comme message.
Avec les méthodologies basées sur la recherche et l’amélioration de l’expérience utilisateur, les services numériques qui tendent à suivre ces méthodes améliorent largement leurs rendements. Un bénéfice énorme peut éclore suite à de simples changements d’interface. Ceux-ci auront une répercussion directe sur l’appréciation générale de l’utilisateur. Et l’avis de l’utilisateur c’est ce qui est le plus engageant pour une marque.
Les usages évoluent chaque jour donc le design d’expérience utilisateur aussi, c’est pourquoi c’est si compliqué d’assimiler parfaitement l’intégralité des principes UX.
Ces exemples permettent de comprendre des principes qu’emploient les designers UX afin de rendre une navigation appréciable tout le long de son utilisation.
La majeure partie des utilisateurs ne se soucient pas de l’intérêt et de la qualité de l’interface qu’ils voient, cependant ils le ressentent et agissent en conséquence. Nous retenons plus facilement ce qui nous déplaît plutôt que l’inverse, donc des mises en situation d’interface que nous connaissons (et visitions) c’est le meilleur moyen pour se rendre compte des écueils à éviter et des grandes lignes à suivre.
Recherche utilisateur
L’étude de l’utilisateur en amont (ou en aval) de la réalisation d’un site permet de (re)définir ses objectifs en fonction des personnes qu’on souhaite toucher (les cibles). Écouter ce qu’il veut et regarder comment il l’utilise s’avère être le meilleur moyen pour toucher un maximum de personne.
En 2014, les utilisateurs français préfèrent encore les moyens traditionnels pour communiquer.
Hiérarchisation de l’information
La navigation c’est le chemin qu’emprunte l’utilisateur pour trouver ce qu’il cherche. S’il y a trop de directions différentes on s’y perdra. Faciliter l’accès à l’objectif c’est faire gagner du temps à l’utilisateur et augmenter ses chances qu’il revienne et s’engage.
La hiérarchie de l’information des pages Paramètres des différents OS peut avoir un réel impact sur le nombre d’items d’une liste
Affordance
Un principe fondamental du design UX et de l’ergonomie en général. Une interface se lit, comme un livre, elle a des principes de lecture dont l’affordance en est l’une règle. Comme une interface est pavée de différents modules, la capacité de ceux-ci à suggérer leur propre utilisation est primordiale. Si un bouton ne ressemble pas à module cliquable, personne n’ira cliquer dessus.
L’affordance d’un bouton peut radicalement augmenter le nombre d’interaction
Wireframe
Une étape de conception d’interface indispensable pour structurer une interface. Le wireframe permet de mettre rapidement à plat les ébauches d’un site ou d’une application. C’est le squelette qui sert à vérifier si les articulations fonctionnent correctement. De plus cette étape permet de se concentrer davantage sur les versions responsive
Le wireframing permet d’avoir une vision globale sur l’ensemble des écrans et des différents écrans.
Storytelling
Une manière de disposer et de choisir une tonalité aux contenus qui affecte la lecture de l’utilisateur. Nous aimons tous les histoires, surtout quand elles sont biens racontées, c’est sur cette idée que le designer UX peut faire d’une interface un récit qui provoque l’enthousiasme et l’intérêt.
Le storytelling joue sur l’émotion en facilitant la lecture du contenu et capte l’attention de l’utilisateur
Gamification
Une interaction avec l’utilisateur qui implique directement l’utilisateur par le biais d’une présentation qui fonctionne toujours : le divertissement. Le fait d’interagir avec une interface facilite la compréhension et marque l’esprit. On apprend mieux en s’amusant et en pratiquant plutôt qu’en étant contraint d’utiliser les méthodes traditionnelles.
La gamification fait assimiler à l’utilisateur des notions parfois complexes ou émouvantes à travers des moyens ludiques.
Iconographie
Les images parlent, inspirent et font assimiler rapidement des idées/ actions aux utilisateurs. Pour autant chacun peut avoir sa propre interprétation sur une forme ou un visuel, c’est pourquoi il est important de se soucier de ce qu’on utilise comme icon ou visuel pour transmettre le bon message.
Les icones ne représentent pas forcément la même idée pour tout le monde, même si certains se suffisent à eux-mêmes il est préférable de les labelliser
Design émotionnel
Une façon d’humaniser une interface en utilisant des codes humains et similaires à un contexte réel. Une interface se loge dans une machine qui agit de manière robotique et répond à un programme, le design émotionnel permet de réduire cette distance entre la machine et l’homme. Le dialogue et l’échange entre l’utilisateur et l’interface se dote de règles et tonalités similaires à un dialogue entre deux humains.
Le design émotionnel est habilement utilisé par MailChimp (numéro 1 en email marketing) qui utilise sa mascotte, un singe coursier, pour toucher l’affectif humain.
Design d’interaction
Le design permet de communiquer des idées ou du contenu, et pour que l’utilisateur sente du répondant, le seul moyen est l’interaction. Une interface doit réagir aux actions faites par l’utilisateur, cela guide et accompagne la navigation de l’utilisateur. Le design doit être cohérent avec l’usage qu’on en fait et ce qu’il doit transmettre.
Le design d’interaction fonctionne particulièrement bien sur mobile. La réponse graphique faite à l’interaction menée par notre doigt permet de comprendre rapidement la réussite ou non de notre action.
Test utilisateur
Les retours des utilisateurs sont essentiels pour l’amélioration d’une expérience, ce sont eux qui guident les objectifs principaux d’un service. Leurs avis permettent de mieux cibler ces besoins et d’en tirer des changements structurels qui bonifieront la navigation dans son ensemble. Savoir ce qui intéresse l’utilisateur permet également de hiérarchiser ses priorités et ainsi d’être plus efficace.
Les tests utilisateurs ont permis de connaître l’impact de la refonte du site de Virgin America auprès de ses clients.
Marre de passer des heures sur un projet pour qu’au final il soit rejeté en quelques secondes par un utilisateur ? Voici quelques conseils pour vous montrer comment et pourquoi le prototype Lo-Fi vous fera économiser du temps et des efforts, tout en améliorant la qualité de votre produit.
LE PROTOTYPE LO-FI C’EST QUOI ?
Le prototype, ou la maquette, est une représentation plus ou moins détaillée d’un futur produit.
On parle de prototype Lo-Fi (contraction de Low-fidelity) pour désigner des maquettes basse fidélité, c’est à dire une représentation simple et approximative du futur produit. Contrairement au prototype Hi-Fi pour High–Fidelity (en français haute fidélité), le prototype Lo-fi demande moins de temps et de ressources puisque crayon et feuille peuvent suffirent.
Il existe des logiciels tel que Balsamiq qui reprend les outils nécessaires à la conception de prototype Lo-Fi pour vous faire encore plus gagner de temps.
POURQUOI L’UTILISER ?
La maquette vous permettra dès le début de la conception de valider des fonctionnalités qui apporteront une UX positive à votre produit. Quelque soit l’interface conçue, le prototype Lo-Fi vous aidera sur les points suivants :
Le prototypage apporte une base nécessaire pour répondre dès le début de la conception aux besoins des utilisateurs.
En plus d’aider à détecter les problèmes majeurs, le maquettage nous donne aussi la motivation nécessaire pour les régler. Dans une étude de 2012 sur les conséquences psychologique du prototypage, des chercheurs de Stanford University et Northwestern University ont constaté que « le maquettage basse fidélité […] conduit à placer l’échec comme une occasion d’apprentissage, tout en favorisant un sentiment de progrès, et un renforcement des capacités créatives ».
L’étude a conclu que le maquettage basse fidélité affecte non seulement le produit final, mais notre niveau d’engagement dans le processus de conception lui-même.
2- Valider les concepts clés du produit
Comme le souligne le designer Marc Retting dans son article « Prototyping for Tiny Fingers », en travaillant avec des prototypes Hi-Fi vous risquez d’avoir des feeds-backs centrés sur l’esthétique de l’application. Les commentaires tels que : « La police n’est pas bien » ou « la taille des boutons est trop grande » vous font passer à côté de réflexions importantes concernant des concepts plus profonds comme la navigation, la mise en page, la facilité d’utilisation …
Plutôt que d’être axé sur la validation de base du produit, les maquettes haute fidélité dirigent l’attention vers l’esthétique du produit. Le prototype Lo-Fi quant à lui force l’utilisateur à se concentrer sur le contenu et non pas sur l’apparence.
3- Faciliter l’itération
Puisque le maquettage basse fidélité demande nettement moins de ressources et d’efforts, nous sommes moins réticents à changer complètement le prototype.
Quand a-t-il été plus facile pour vous d’abandonner complètement quelque chose sur lequel vous avez travaillé ?
Lorsque vous avez investi quelques minutes dans un croquis ou lorsque vous avez passé d’innombrables heures à perfectionner un prototype ? Comme Retting le dit : « Plus vous passez de temps à quelque chose plus vous êtes susceptible d’en tomber en amoureux ».
L’itération est la clé dans un processus de conception agile. C’est seulement en constante évolution de nos concepts que nous serons en mesure de créer des solutions intuitives qui réussiront dans le marché actuel. Les prototypes Lo-Fi encouragent ce type de méthode, sans stress de l’itération. Modifier le prototype, le critiquer ou même repartir à zéro ne sera plus difficile puisque vous n’aurez pas passé des heures sur ce prototype.
4- Vous remettre en question
Que vous ayez peu ou pas de compétences techniques, les prototypes Lo-Fi peuvent être facilement construits. Tant que les objectifs du produit et du projet sont clairs, le maquettage basse fidélité mettra l’accent sur les prochaines étapes de conception : « Où devrions-nous investir nos prochaine ressources? Où devrions-nous éviter de les investir? Quelles caractéristiques seront un élément clé pour l’utilisateur? Dirigeons-nous dans la bonne direction avec ce concept ? Avons-nous besoin de nous tourner vers de nouveaux modèles ou d’explorer d’autres options ? »
Les meilleurs prototypes Lo-Fi peuvent être construits de manière ingénieuse, avec un petit budget et dans un laps de temps court tout en répondant à vos problématiques.
5- Transporter et partager Le prototype Lo-Fi ne devient pas une galère
Alors que certains prototypes Hi-FI nécessitent un dispositif ou un environnement spécial pour être montré, la plupart des prototypes Lo-Fi peuvent être facilement transporté et partagé. Quoi de plus simple que de transporter une feuille papier ? Ou de l’afficher sur tableau ? On est ainsi libéré des exigences techniques et de portabilité.
Si vous décidez de construire un prototype Lo-Fi en utilisant un logiciel demandez-vous si le montrer sur un écran est le meilleur choix. Une étude a montré que le papier encourage plus facilement le travail collaboratif que les écrans. Des chercheurs de l’Université de Nottingham de Surrey et de Cambridge Europarc ont examiné comment le papier et les écrans favorisent la collaboration dans trois milieux de travail différents: un cabinet d’architecte, un centre médical et la salle de contrôle du métro de Londres.
Ils ont conclu que le papier génère une flexibilité qui permet aux individus d’interagir et de collaborer dans un large éventail de moyens.
Les chercheurs ont remarqué, entre autres, que par l’écriture (dessiner un prototype, écrire un commentaire), les participants ont pu prendre des notes rapidement, tout en restant concentré sur le sujet. Cette flexibilité est particulièrement importante lors de la conception en collaboration et la communication avec les utilisateurs pour obtenir des retours intéressants.
La polyvalence naturelle du papier (il peut être plié, coupé, griffonné) fait de la coopération une tâche beaucoup plus facile. Pensez à ces avantages lorsque vous décidez d’exposer les utilisateurs à un prototype Lo-Fi. Imprimez vos captures d’écran ou maquettes pourrait changer radicalement vos feeds-backs.
COMMENT L’UTILISER ?
Le principe du prototype Lo-Fi est de l’utiliser pour des tests utilisateurs afin qu’ils puissent diriger votre projet vers le succès. Pour cela, expliquez tout d’abord aux utilisateurs que le test se fait à partir d’une maquette simple puisque le but étant de comprendre les objectifs du projet, de poser des questions, de communiquer et d’améliorer le produit.
Pour vous aider, préparez un petit guide avec les questions à poser aux utilisateurs ainsi qu’une introduction qui permettra aux utilisateurs de contextualiser le test.
Voici un exemple de questions à poser:
Pour les avantages perçus « À votre avis quel est le principal avantage de ce produit ? » « De toutes les fonctionnalités que vous avez pu voir, quelles sont celles qui vous feront utiliser ce produit ? » « Quelles fonctionnalités voudriez-vous apporter en plus à ce produit ? »
Pour les réactions positives ou négatives « Sur une échelle de 1 à 5, comment aimez-vous ce produit ? » « Pourquoi ? »
Pour la sensibilité « De quoi vous souvenez-vous le plus sur ce produit ? »
Pour la comparaison (Si vous avez montré aux utilisateurs plusieurs versions de produit) « Laquelle de ces options vous intéresse le plus? » « Notez les sur une échelle de 1 à 5 »
Pour les émotions « Qu’est-ce que ce produit vous fait ressentir ? »
Aidez-les en fournissant une liste des émotions : joie, frustration, colère, excitation, ennuie, etc.
En ce qui concerne l’intention d’utilisation « Après avoir examiné ce produit aujourd’hui, seriez-vous prêt à l’utiliser une fois qu’il a été lancé? » « Pourquoi? »
Pour l’appréciation générale « Proposez-nous des modifications ou corrections qui pourront améliorer le produit. »
Une fois que vous avez recueilli les retours utilisateurs, essayez de trouver des similitudes dans leurs évaluations. Aidez vous d’un diagramme pour identifier les commentaires les plus courants. Utilisez ces commentaires pour une prochaine maquette et répétez la séance avec plusieurs utilisateurs. Après avoir apporté vos améliorations, vous pourrez ensuite passer au maquettage Hi-Fi qui, après validation des utilisateurs, sera une représentation beaucoup plus fidèle et détaillée du futur produit.
Voici un extrait d’un cours de James Williamson où vous pouvez voir comment peut se passer un test utilisateur à l’aide du prototype Lo-Fi :
J’espère que cet article vous a aidé à comprendre les avantages du prototype Lo-Fi sur la conception de votre produit. Cette méthode va sûrement améliorer la qualité de votre travail de conception. Pensez aux projets sur lesquels vous travaillez en ce moment et demandez-vous comment vous pourriez les valider avant d’investir du temps et des efforts pour les affinés.
Pensez qu’une simple représentation de ce qu’on construit peut mettre en évidence des questions cruciales nécessaires à l’amélioration de votre produit.
) . Ce plugin de navigateur permet d’effacer tout contenu publicitaire sur n’importe quel site (ou presque). Ainsi il libère nos yeux de la pollution visuelle entretenue par la pub, mais évidemment cela pose un gros problème aux annonceurs, aux médias ou tous les autres sites générant des revenus grâce à la publicité.
).
