Qu'est ce qu'une bonne UI ? Les conseils dénichés par Iscomigoo Webdesign

Mise à jour cet article.
Vous pourrez trouver l'article original, en anglais, en suivant ce lien: A Good User Interface. C'est une très bonne source, d'où mon envie de la traduire et de la partager avec vous.

Vous entendez souvent parler d'UI, d'UX... Et bien aujourd'hui, je vous propose cet article sur Iscomigoo Webdesign entièrement dédié à l'UI, c'est-à-dire l'Interface Utilisateur (User Interface).



Définition by Iscomigoo webdesign :
Une bonne Interface Utilisateur a un taux de conversion élevé et est simple d'utilisation



En d'autres mots, l'UI est agréable du côté de l'entreprise qui doit concevoir une telle interface mais également du côté de l'utilisateur qui navigue au sein de cette interface.

Je vous propose dans cet article plus d'une quarantaine d'idées phare pour faire de votre interface une bonne interface utilisateur.



#01 : Favorisez les colonnes uniques



Conseils UI by Iscomigoo Webdesign
Conseils UI dénichés par Iscomigoo Webdesign


Une seule colonne dans votre mise en page vous donnera plus de contrôle sur votre récit. Ca vous permettra de guider vos lecteurs d'une manière plus prévisible de haut en bas. Une approche multi-colonnes peut être un risque car c'est parfois source de distraction et le lecteur peut perdre l'objectif principal de la page. Une seule colonne aide à guider le lecteur avec une simple histoire et un call to action.



#02 : Offrez un cadeau pour inciter à l'achat



Conseils UI by Iscomigoo Webdesign
Conseils UI dénichés par Iscomigoo Webdesign


Un geste amical, comme par exemple offrir un cadeau à un client lors de sa souscription, est une tactique de persuasion efficace qui est fondée sur la règle de la réciprocité. Aussi évident que cela puisse paraître, être gentil avec quelqu'un en offrant un petit signe de reconnaissance peut s'avérer plus que bénéfique pour vous.



#03 : Rassemblez les actions/fonctions similaires



Conseils UI by Iscomigoo Webdesign
Conseils UI dénichés par Iscomigoo Webdesign


Au cours du temps, il est facile de créer involontairement plusieurs sections avec les éléments et caractéristiques qui jouent tous la même fonction. Gardez un œil sur les fonctionnalités qui se dupliquent. Généralement, plus votre interface est fragmentée, plus la lecture se complique pour les internautes. Faites un point régulièrement pour ré-organiser votre interface en fusionnant les fonctions similaires.



#04 : Favorisez les témoignages plutôt que de parler de vous-même



Conseils UI by Iscomigoo Webdesign
Conseils UI dénichés par Iscomigoo Webdesign


La preuve sociale est une autre grande tactique de persuasion qui augmente de manière significative le taux de conversion. Montrer que les autres vous approuvent et parlent de votre offre, peut être un excellent moyen de renforcer un call to action.



#05 : N'hésitez pas à répéter l'action principale



Conseils UI by Iscomigoo Webdesign
Conseils UI dénichés par Iscomigoo Webdesign


Répéter votre call to action est une stratégie qui s'applique essentiellement aux pages plus longues, ou alors lorsqu'il y a de nombreuses pages. Certes, vous ne voulez pas que votre offre soit affichée 10 fois sur le même écran pour ne pas frustrer l'internaute. Cependant, la tendance actuellement est au scroll et aux pages web à rallonge. Il n'y a donc pas de mal un call to action léger en haut et un plus poussé en bas de page.



#06 : Proposez de la cohérence et du contraste avec les zones cliquables et sélectionnées



Conseils UI by Iscomigoo Webdesign
Conseils UI dénichés par Iscomigoo Webdesign


Certains styles visuels comme la couleur, la profondeur et le contraste peuvent être utilisés comme repères fiablse pour aider les internautes à comprendre la navigation dans votre interface: où suis-je, et où puis-je aller. Afin de communiquer clairement à vos utilisateurs, les styles de vos actions cliquables (liens, boutons), des éléments sélectionnés (articles choisis), et le texte brut doivent être clairement distincts les uns des autres et appliqués de manière uniforme à travers toute votre interface. Lorsque tout est cohérent, les internautes vont plus facilement apprendre à utiliser ces indices pour naviguer dans votre interface.



#07 : Essayez de recommander plutôt que de proposer de multiples choix égaux



Conseils UI by Iscomigoo Webdesign
Conseils UI dénichés par Iscomigoo Webdesign


A la présentation de plusieurs offres, mettre l'une d'entre elles en avant peut être une bonne idée pour donner un petit coup de pouce. Plus il y a des choix, plus l'internaute hésite. Afin de lutter contre cette "paralysie", essayez de souligner et mettre en évidence certaines options.



#08 : Préferez la possibilité d'annuler plutôt que de multiples étapes de confirmation



Conseils UI by Iscomigoo Webdesign
Conseils UI dénichés par Iscomigoo Webdesign


Imaginez que vous venez d'appuyer sur un bouton d'action ou un lien. Vous demander si vous êtes sûr de vouloir faire cette action sans même réellement savoir ce qui va se produire ne vous encourage pas à cliquer. Alors que si la transition se fait doucement et que l'on vous indique que vous pouvez annuler ce que vous venez de faire, vous vous sentez tout de même plus en confiance. C'est un petit peu l'effet Cmd Z (ou Ctrl Z).



#09 : Ne ciblez pas tout le monde, suggérez selon votre cible



Conseils UI by Iscomigoo Webdesign
Conseils UI dénichés par Iscomigoo Webdesign


Ciblez-vous tout le monde ou êtes-vous précis avec votre public? En ciblant davantage votre cible et en lui proposant des produits/services qui lui sont desstinés vous lui apportez un sentiment d'exclusivité.



#10 : Soyez directs, évitez de paraître indécis



Conseils UI by Iscomigoo Webdesign
Conseils UI dénichés par Iscomigoo Webdesign


Vous pouvez transmettre votre message avec de l'incertitude dans votre voix, ou vous pouvez le communiquer avec confiance. En mettant plus de confiance dsans votre message vous arriverez à convaincre votre auditoire. Si vous souhaitez qu'un internaute réalise l'action que vous voulez, il vous ser aplus facile de le convaincre en étant direct et confiant.



#11 : Contrastez vos éléments pour attirer l'attention de l'utilisateur et lui faciliter la lecture



Conseils UI by Iscomigoo Webdesign
Conseils UI dénichés par Iscomigoo Webdesign


Faire en sorte que vos call to action soient un peu plus importants et dissociés par rapport aux éléments qui les entourent, rendra votre interface utilisateur plus claire et efficace. Vous pouvez facilement augmenter le contraste de vos actions principales, faire en sorte que certains éléments apparaissent plus sombres et d'autres plus légers, etc. Un contraste plus élevé doit donc être fait entre votre call to action et le reste de la page.



#12 : Mettez en avant l'origine de vos produits/services



Conseils UI by Iscomigoo Webdesign
Conseils UI dénichés par Iscomigoo Webdesign


En indiquant l'origine de votre entreprise, votre produit ou service, vous paraissez tout de suite plus "humain" et accessible. Concernant vos produits, cela apporte souvent une valeur ajoutée et également un sentiment de qualité légèrement supérieure. C'est un gagnant-gagnant.



#13 : Limitez le nombre de champs



Conseils UI by Iscomigoo Webdesign
Conseils UI dénichés par Iscomigoo Webdesign


Les êtres humains n'aiment pas les tâches de travail intensif et cela vaut également pour le remplissage des champs de formulaires. Chaque champ est un risque de plus qui incite l'utilisateur à abandonner. De même, si l'on pense mobile, remplir des champs de formulaires sur une interface de smartphone est une vraie corvée. Il faut donc se demander si chaque champ est vraiment nécessaire et supprimer autant de domaines que possible. Si vous avez vraiment de nombreux champs optionnels, il faut alors penser à les déplacer après la soumission du formulaire sur une autre page (par exemple). Moins il y a de champs, plus le taux de conversion est élevé.



#14 : Exposez clairement les différentes options, ne les cachez pas



Conseils UI by Iscomigoo Webdesign
Conseils UI dénichés par Iscomigoo Webdesign


Chaque menu déroulant que vous utilisez cache un ensemble d'actions. Il nécessite donc d'un effort: être ouvert pour découvrir ce qui s'y cache. L'internaute est fénéant et il n'a pas envie de chercher bien longtemps ce qu'il cherche. En mettant une certaine option dans un menu déroulant, vous prenez le risque qu'elle soit ignorée par l'internaute. Essayez de réserver des menus déroulants pour les options qui sont prévisibles et ne nécessitent pas de nouvel apprentissage. Par exemple pour un calendrier lors du choix de la date ou même de l'heure, ou encore pour des choix géographiques.



#15 : Suggérez de la continuité et non des "doubles fonds"



Conseils UI by Iscomigoo Webdesign
Conseils UI dénichés par Iscomigoo Webdesign


Un "double fond" (ou faux fond) est un tueur de conversion. Oui, scroller sur des pages à rallonge est tendance, mais attention de donner à vos visiteurs un sentiment de continuité. Lorsqu'il aura l'impression qu'il n'y a plus rien en dessous, il changera de page, même s'il n'est pas descendu jusqu'au footer. Si vos pages défilent, essayer d'établir un motif visuel ou rythme que l'utilisateur peut apprendre et sur lequel il peut se baser lors de sa navigation dans votre interface.



#16 : Ne noyez pas le lecteur avec des liens: restez focalisés sur votre information"



Conseils UI by Iscomigoo Webdesign
Conseils UI dénichés par Iscomigoo Webdesign


Il est facile de créer une page avec beaucoup de liens dans le but de répondre aux plus grand nombre des besoins des clients. Par contre, si vous souhaitez avoir une page de contenu aboutissant sur un call to action spécifique, évitez d'y intégrer des liens qui pourraient détourner l'utilisateur de votre contenu. Soyez conscient que tout lien au-dessus du principal CTA court le risque de prendre vos clients loin de ce que vous espériez qu'ils fassent. Gardez un œil sur le nombre de liens sur vos pages et éventuellement équilibrer pages de style de découverte (un peu plus lourd sur les liens) avec des pages de style de tunnel (avec moins de liens et des conversions plus élevées). Retrait liens étrangères peut être un moyen sûr d'augmenter les chances de quelqu'un d'atteindre ce bouton importante.



#17 : Mettez en avant les états des différentes actions



Conseils UI by Iscomigoo Webdesign
Conseils UI dénichés par Iscomigoo Webdesign


Dans n'importe quelle interface utilisateur, nous montrons très souvent des éléments qui peuvent avoir différents états. Les courriels peuvent être lus ou non lus, les factures peuvent être payées ou non, etc. Informer les utilisateurs sur l'état dans lequel un article est, est un bon moyen de fournir une rétroaction. Le états peuvent aider les gens à comprendre si oui ou non leurs actions passées ont été menées avec succès, et s'il le reste des actions à effectuer.



#18 : Faites du call to action en mettant en avant les bénéfices



Conseils UI by Iscomigoo Webdesign
Conseils UI dénichés par Iscomigoo Webdesign


Imaginez deux simples boutons affichés sur une page. Un bouton vous dit qu'il va vous faire "économiser de l'argent", tandis que l'autre vous demande de "Sign Up". Le premier aura sûrement plus de chances de vous séduire. Un processus d'inscription demande des efforts et est souvent associé à de longs formulaires. Alors à vous d'attirer et de motiver les internautes (sans pour autant leur mentir, bien évidemment...)



#19 : Proposez des actions directs



Conseils UI by Iscomigoo Webdesign
Conseils UI dénichés par Iscomigoo Webdesign


Lors de l'affichage des listes de données, par exemple, nous voulons généralement permettre à l'utilisateur de faire quelque chose avec les éléments de cette liste. En cliquant dessus, ou en version hover, des actions directes peuvent être exprimées (supprimer, renommer, etc.) Un autre exemple d'actions directe: cliquer sur un élément qui se transforme alors en un champ modifiable. Ce genre d'actions permet un gain de temps, de clic, et rend l'internaute plus heureux !



#20 : Affichez les champs au lieu de créer une page supplémentaire



Conseils UI by Iscomigoo Webdesign
Conseils UI dénichés par Iscomigoo Webdesign


Fusionner les pages présentant le call to action avec celles présentant les champs d'inscription peut parfois être une idée pour diminuer le nombre d'étapes. La tâche à accomplir prend moins de temps et la simplicité de cette première étape peut séduire l'internaute. Bien sûr, cela fonctionne si le nombre de champs apparaissant au premier abord est peu élevé.



#21 : Faites des transitions et limitez les changements instantanés trop brutaux



Conseils UI by Iscomigoo Webdesign
Conseils UI dénichés par Iscomigoo Webdesign


Au cours de la navigation de l'internaute, les éléments d'interface sont affichés, masqués, redimensionnés etc. Comme le "mouvement" des différents éléments dépend de l'action que l'on vient d'effectuer, il est parfois plus facile et surtout plus clair d'avoir le temps de vois et de comprendre ce qui vient de se passer après avoir cliqué sur tel ou tel bouton. Pensez donc à faire des transitions, d'ajouter un léger retard, afin de donner le temps à l'internaute de s'y retrouver. Gardez cependant à l'esprit qu'au delà de 0,5 secondes, il y aura des situations où les gens pourraient commencer à ressentir de l'attente. Pour les internautes les plus rapides, attendre trop longtemps peu les pousser à abandonner.



#22 : Optez pour l'engagement progressif et non pour une inscription hâtive



Conseils UI by Iscomigoo Webdesign
Conseils UI dénichés par Iscomigoo Webdesign


Au lieu de demander aux visiteurs de signer immédiatement, pourquoi ne pas leur demander d'effectuer d'abord une tâche très simple qui ne leur demandera aucun effort. En procédant étape par étape, vous pouvez également montrer les avantages de votre offre, procéder à de la personnalisation... en bref, séduire l'internaute et l'amener tout naturellement à souscrire pour votre offre. Lorsque les utilisateurs commencent à voir la valeur de votre produit et voir comment ils peuvent se l'approprier, ils seront alors plus disposés à partager avec vous des informations supplémentaires. L'engagement progressif est vraiment une façon de reporter le processus d'inscription et de le convertir, tout en collectant de la data et en personnalisant votre offre.



#23 : Evitez les frontières pour ne pas perdre l'attention du lecteur



Conseils UI by Iscomigoo Webdesign
Conseils UI dénichés par Iscomigoo Webdesign


Frontières (ou bordures) et contenu ne font pas bon ménage. Certes, les frontières peuvent être utilisés pour définir un espace très clair et précis, mais il nous coûte aussi de l'énergie de passer d'une zone à l'autre. Afin de définir les relations entre les éléments présents à l'écran qui utilisent moins d'attention, les éléments peuvent aussi être simplement regroupés par la proximité, être alignés, ou même simplement partager un style typographique similaire. Les bordures ne sont pas indispensables, bien au contraire.



#24 : Mettez en avant les bénéfices plutôt que les fonctionnalités



Conseils UI by Iscomigoo Webdesign
Conseils UI dénichés par Iscomigoo Webdesign


Les internautes prêtent plus attention aux bénéfices qu'aux fonctionnalités. En leur présentant les avantages que votre offre leur apporte, les internautes se visualisent plus entrain d'utiliser votre produit. C'est donnant-donnant. Pourquoi l'internaute souscrirait pour votre offre ? Qu'y gagne-t-il ?



#25 : Pensez à designer lorsque vous n'avez pas encore de Data afin d'inciter l'action de l'utilisateur



Conseils UI by Iscomigoo Webdesign
Conseils UI dénichés par Iscomigoo Webdesign


Il y a des cas où vous aurez 0, 1, 10, 100, ou 10 000 résultats de données et qui pourraient avoir besoin d'être affichés à l'écran. Nous oublions souvent de concevoir une interface ne présentant aucune donnée et nous courons donc le risque de négliger les utilisateurs. Un monde de "données zéro" est un endroit froid. Lorsque les utilisateurs découvrent première fois votre application, ils se retrouvent face à des écrans vierges, absolument pas attractifs. Sautez sur cette occasion pour inciter l'internaute à effectuer une action, à démarrer son expérience. C'est une occasion parfaite pour convaincre les utilisateurs en leur montrant ce qu'il faut faire ensuite.



#26 : Utilisez des Opt-Out au lieu des Opt-In



Conseils UI by Iscomigoo Webdesign
Conseils UI dénichés par Iscomigoo Webdesign


Il ya deux bonnes raisons pour lesquelles opt-out fonctionne mieux que l'opt-in. D'abord, il atténue la résistance sur le chemin de l'action car l'utilisateur n'a pas à faire quoi que ce soit. Deuxièmement, c'est aussi une forme de recommandation qui implique une sorte de norme - " puisque tout le monde fait ce choix, je pourrais aussi faire la même chose". Bien sûr, la stratégie de l'opt-out est souvent perçue comme controversée car il y a les commerçants véreux qui pourraient en abuser.



#27 : Soyez cohérents pour ne pas que l'utilisateur ait à ré-apprendre



Conseils UI by Iscomigoo Webdesign
Conseils UI dénichés par Iscomigoo Webdesign


Avoir une interface ou une interaction cohérente est tout simplement une excellente façon de réduire l'apprentissage de l'internaute et donc son temps de recherche. Si lorsque vous cliquer sur un bouton il y a une interaction spécifique, ou une certaine transition, gardez-la dans toute votre interface. Si l'internaute se retrouve face à une autre transition ou interaction, il risque de se sentir perdu: "Sur quoi ai-je cliqué? Que s'est-il passé? Est-ce normal?". Pour établir cette cohérence vous pouvez utiliser: les couleurs, les directions, les comportements, le positionnement, la taille, la forme, la langue etc.



#28 : Essayer le remplissage par défaut "intelligent" pour éviter l'utilisateur de travailler



Conseils UI by Iscomigoo Webdesign
Conseils UI dénichés par Iscomigoo Webdesign


L'utilisation de champs pré-remplis dans un formulaire est un gain de temps et demande beaucoup moins d'efforts de la part de l'internaute. C'est une technique courante pour aider les utilisateurs à remplir des formulaires plus rapidement. Il est insupportable de devoir remplir encore et encore des informations déjà fournies auparavant. Moins l'internaute traville, plus il sera enclin à accomplir les actions que vous souhaitez.



#29 : Ne réinventez pas les habitudes déjà bien ancrées des utilisateurs



Conseils UI by Iscomigoo Webdesign
Conseils UI dénichés par Iscomigoo Webdesign


Si nous conservons les bonnes habitudes adoptées par les internautes dans notre interface, ils n'auront pas à lutter pour y naviguer. Par exemple, quand nous conduisons nous associons le feu vert au départ et le feu rouge à l'arrêt. Si nous changions ces couleurs, il nous faudrait à tous un temps d'adaptation et notre conduite serait beaucoup moins fluide. Il se produit exactement la même chose avec une interface. Il faut se différencier, certes, mais il ne faut pas perdre complètement l'internaute.



#30 : Essayez l'aversion aux pertes au lieu de souligner les gains



Conseils UI by Iscomigoo Webdesign
Conseils UI dénichés par Iscomigoo Webdesign


Nous aimons gagner, mais nous détestons perdre. Selon les règles de la psychologie de persuasion, nous sommes plus susceptibles de préférer éviter les pertes que de réaliser des gains. Ceci peut être appliqué à la façon dont les offres de produits sont encadrées et communiquées. Une telle stratégie pourrait être plus efficace que d'essayer de fournir à un client quelque chose de plus qu'il possède déjà.



#31 : Hierarchisez visuellement l'information pour éviter l'ennui



Conseils UI by Iscomigoo Webdesign
Conseils UI dénichés par Iscomigoo Webdesign


Une bonne hiérarchie visuelle peut être utilisée pour séparer vos éléments importants de ceux qui le sont moins. Une hiérarchie visuelle résulte de divers éléments tels que l'alignement, la proximité, la couleur, le ton, la taille de l'élément, l'espacement, etc. Lorsque ces éléments de langage visuel sont appliqués correctement, ils peuvent travailler ensemble pour diriger et attirer l'attention des utlisateurs dans une page. De plus, ça permet d'améliorer la lisibilité générale. Avec une bonne hiérarchie visuelle, bien que nous pourrions passer un peu plus de temps sur la page, le résultat final devrait être que nous retenons plus d'informations. Par exemple, pour vous rendre en voiture à une destination vous pouvez, prendre l'autoroute (trajet plus simple et plus direct que vous rentenez plus facilement) ou prendre les petites routes (trajet plus long et plus complexe qui peut être plus difficile à mémoriser).



#32 : Regroupez les éléments



Conseils UI by Iscomigoo Webdesign
Conseils UI dénichés par Iscomigoo Webdesign


Regrouper les éléments similaires est un moyen de simplifier votre interface. Lorsque vous cherchez un couteau dans une cuisine, vous vous dites spontanément que les fourchettes et les cuillères seront rangées avec. C'est le même principe lorsque l'on navigue dans une interface. Si ce n'est pas le cas, l'utilisateur sera vite perdu et trouvera que naviguer dans votre interface lui demande beaucoup trop d'effort.



#33 : Essayez de valider en "ligne" au lieu de retarder l'affichage des erreurs



Conseils UI by Iscomigoo Webdesign
Conseils UI dénichés par Iscomigoo Webdesign


Lorsque vous traitez avec des formes et des erreurs, il est habituellement préférable de détecter l'erreur le plus rapidement possible. Le modèle d'interaction le plus souvent utilisé est bien sûr celui de la validation en ligne. En montrant un message d'erreur directement à l'endroit de l'erreur (c'est-à-dire à la droite du champ de saisie), elle peut être corrigée plus rapidement, sans devoir faire l'effort de retrouver le champs qui pose problème. D'autre part, lorsque les messages d'erreur sont affichés plus tard (par exemple après avoir soumis le formulaire), il oblige les utilisateurs à faire un travail cognitif supplémentaire et à se souvenir de leur erreur, de la retrouver et de la modifier.



#34 : Ne soyez pas trop stricts avec la collecte de data



Conseils UI by Iscomigoo Webdesign
Conseils UI dénichés par Iscomigoo Webdesign


Être plus clément en termes de données entrées par l'utilisateur est important. Le fait de "pardonner" lorsque les données entrées par l'utilisateur permet d'anticiper et de comprendre une variété de formats de données et de ce fait rend votre interface utilisateur plus conviviale. Un parfait exemple est lorsque nous demandons aux internautes d'entrer leur numéro de téléphone qui peut être écrit de plusieurs façons différentes - avec des extensions, des tirets, des codes de la région, etc​​. Lorsque les informations à entrer dans les champs sont trop "strictes" les utilisateurs abandonnent régulièrement. Ils aiment pas s'y reprendre à plusieurs reprises.



#35 : Privilégiez l'urgence pour provoquer une action rapide



Conseils UI by Iscomigoo Webdesign
Conseils UI dénichés par Iscomigoo Webdesign


L'urgence est une tactique de persuasion qui peut être appliquée afin de faire en sorte que les internautes agissent dans l'immédiat plutôt que plus tard (ou peut-être jamais). Cette stratégie fonctionne parce qu'elle implique souvent un certain degré de rareté: c'est disponible maintenant mais pourrait ne plus l'être demain. L'être humain n'aime pas perdre des occasions et jouer sur l'urgence pourrait le convaincre pour que l'internaute se dise qu'il a pu profiter d'une bonne affaire et donc qu'il a eu raison d'acheter ou de souscrire.



#36 : Pensez "rareté" et non "abondance"



Conseils UI by Iscomigoo Webdesign
Conseils UI dénichés par Iscomigoo Webdesign


C'est connu, lorsqu'il n'y a pratiquement plus de place pour le trajet en train Paris-Bayonne que vous souhaitez prendre, vous vous dites 'okay, tant pis pour le prix, sinon demain il n'y en aura plus". S'il reste beaucoup de places, vous vous direz que ça peut attendre. Parfois, il peut donc être intéressant de jouer sur la rareté plutôt que sur l'abondance.



#37 : Proposez différentes réponses pour guider l'utilisateur



Conseils UI by Iscomigoo Webdesign
Conseils UI dénichés par Iscomigoo Webdesign


Il s'agit d'un principe classique du design lié fortement à la psychologie qui suggère qu'il est plus facile de reconnaître quelque chose existant, plutôt que d'avoir à le rappeler de mémoire, sans aucune aide. La reconnaissance repose sur une sorte de repère ou conseil qui nous aide en touchant à notre expérience passée. Le rappel nous oblige à sonder les "profondeurs" de notre mémoire. Cela pourrait être la raison pour laquelle répondre à des questions à choix multiples durant les examens peut être beaucoup plus rapides. Pensez à donner aux utilisateurs la possibilité de choisir parmi des informations et éléments auxquels ils ont déjà été exposés auparavant, au lieu de leur demander de s'en souvenir.



#38 : Faites des zones cliquables plus grandes



Conseils UI by Iscomigoo Webdesign
Conseils UI dénichés par Iscomigoo Webdesign


Les liens, les formes et les boutons sont beaucoup plus visibles et plus facilement cliquables s'ils sont plus grands. En effet, avoir un call to action sur un bouton trop petit peut faire passer l'internaute complètement à côté. Pensez également mobile. Quand tout est trop petit, nous abandonnons plus rapidement. Il est vraiment désagréable de cliquer sur plusieurs zones à la fois tout simplement parce que le bouton sur lequel nous souhaitons cliquer est trop petit.



#39 : Favoriser le chargement rapide pour ne pas faire attendre l'utilisateur



Conseils UI by Iscomigoo Webdesign
Conseils UI dénichés par Iscomigoo Webdesign


La vitesse est importante. Que ce soit la rapidité de chargement ou la vitesse de réponse à une action, la vitesse peut avoir une forte incidence sur le comportemet de l'internaute. Il y a donc plusieurs techniques pour ça comme par exemple diminuer le temps de chargement des images et des écrans grâce au code, une autre est d'utiliser une barre de chargement pour ne pas faire attendre l'internaute dans "le vide" et le motiver à attendre. Garde les utilisateurs occupés pendant que l'on charge quelque chose d'autre est encore une autre méthode pour gérer le temps d'attente et la vitesse d'exécution. C'est un facteur vraiment important.



#40 : N'utilisez pas que des boutons: pensez aux raccourcis clavier



Conseils UI by Iscomigoo Webdesign
Conseils UI dénichés par Iscomigoo Webdesign


Les internautes vont souvent chercher des moyens qui leur permettent d'effectuer des tâches répétitives plus rapidement et sans effort. Les raccourcis clavier sont un moyen plutôt efficace dans certains cas puisqu'une fois les touches de raccourcis rappelées, ils peuvent accélérer l'exécution des tâches de façon spectaculaire. Un exemple : celui de l'utilisation des touches de raccourci J et K pour suivant et précédent qui ont été populariser par des applications telles que Gmail, Google Reader (désormais de l'histoire), Twitter et Tumblr. Les boutons ne sont pas mauvais, mais ils peuvent être complétés avec des raccourcis plus rapides.



#41 : Proposez des offres chiffrées plutôt qu'un simple prix fixe



Conseils UI by Iscomigoo Webdesign
Conseils UI dénichés par Iscomigoo Webdesign


Les êtres humains ont une prise de décision affectée par les premières quantités/données chiffrées qui leur sautent aux yeux. Quand nous commençons par apercevoir un nombre élevé et que ce dernier diminue au fur et à mesure, psychologiquement le chiffre final nous paraît beaucoup plus accessible. Mais le premier nombre que nous voyons et qui peut nous convaincre ne doit pas frocément être un prix. Un exemple typique: lorsque les commerçants vous présentent différents prix pour vous convaincre que le leur est le moins cher.



#42 : Ne démarrez pas vos barres de progression en partant de zéro



Conseils UI by Iscomigoo Webdesign
Conseils UI dénichés par Iscomigoo Webdesign


Plus nous nous rapprochons du but, plus nous sommes motivés pour atteindre ce but. Il en est de même sur internet et c'est pour cela qu'il est toujours ffrustrant pour un internaute de se retrouver face à une barre de progression vide, lui montrant qu'il a encore tout à faire. Alors motivez-le, montrez lui qu'il a déjà franchi quelques étapes sans même s'en rendre compte.



#43 : Dévoilez progressivement les étapes plutôt que d'en faire trop d'un coup



Conseils UI by Iscomigoo Webdesign
Conseils UI dénichés par Iscomigoo Webdesign


La divulgation progressive protège l'utilisateur d'un trop plein d'informations non pertinentes. Avec ce modèle, vous dévoiler votre message au fur et à mesure que l'internaute navigue et interagit avec votre interface.Si trop de champs, de formes ou d'informations apparaissent d'un coup, le lecteur est effrayé et abandonne la tâche. Il faut donc afficher et exposer uniquement ce qui est pertinent pour la situation dans laquelle se trouve l'internaute.



#44 : Essayez de créer plusieurs petits engagements au lieu d'un grand



Conseils UI by Iscomigoo Webdesign
Conseils UI dénichés par Iscomigoo Webdesign


Demandez aux gens de commencer avec un engagement plus faible suivi de quelques autres par la suite. Lorsqu'un internaute se trouve face à un "gros engagement", il a peur et hésite. Utiliser un engagement plus faible pour amener l'internaute à l'action souhaitée est une stratégie de persuasion puissante. C'est prouvé, les êtres humains rechignent moins pour exécuter une série d'actions plus petites et connectées qu'une seule et unique grosse action. Un exemple typique: vous préférez payer une somme plus petite de manière mensuelle qu'une seule et unique somme très élevée en une seule fois.



Si vous souhaitez vous lancer dans la conception de votre propre interface, Iscomigoo Webdesign vous propose un kit UI à télécharger gratuitement et également un redesign d'application mobile

RGB UI kit by Stoilovskikh Ivan

Conseils UI by Iscomigoo Webdesign: RGB UI kit, Stoilovskikh Ivan
Conseils UI by Iscomigoo Webdesign: RGB UI kit, Stoilovskikh Ivan




Redesign de l'application Scoop it! pour iPhone by David Grand

Conseils UI by Iscomigoo Webdesign: Redesign application Scoop it! pour iPhone, David Grand
Conseils UI by Iscomigoo Webdesign: Redesign application Scoop it! pour iPhone, David Grand







Iscomigoo Webdesign sur Facebook

Iscomigoo Webdesign sur Twitter

Iscomigoo Webdesign sur Google +

Follow on Bloglovin








Iscomigoo Webdesign sur Facebook

Iscomigoo Webdesign sur Twitter

Iscomigoo Webdesign sur Google +

Follow on Bloglovin



0 commentaires :