Ce sont des conseils pour améliorer l'UX de vos projets SANS heures d'expérience utilisateur, de prototypage papier ou de tout autre mot à la mode.

(Sérieusement, recherchez la «pensée conceptuelle». 100 500 résultats!)

À qui s'adresse cet article?

• Développeurs Vous avez créé votre propre application, mais chaque utilisateur en est tourmenté. Et vous savez: s'ils vous le disent en personne, alors le problème est vraiment grave.
  
• Graphistes . Étudier l'UX sur des articles sur Internet est une façon ... très douloureuse de mourir.
  
• Chefs de projets . Vous êtes déjà un quart designer UX. Ce serait bien d'apprendre le reste des compétences.
  
• Et les autres escrocs . Tous ceux qui empilent leurs projets le soir et le week-end. Vous serez également utile.

Si vous êtes déjà designer UX, il est peu probable que l'article vous convienne parfaitement. J'ai sauté des zones entières pour me concentrer pleinement sur la compétence principale qui manque aux nouveaux concepteurs UX (ou aux personnes de domaines connexes qui doivent le faire).

Cette compétence consiste à «comprendre la langue de l'interface» .

Au début de ma carrière, j'ai été frappé par la fréquence à laquelle les clients ont réussi les ébauches initiales (ou les prototypes en cours de fonctionnement) avec des erreurs UX complètement évidentes . Je ne parle pas d'erreurs qui peuvent être identifiées après un long test A / B. Je parle d'erreurs simples et des plus stupides .

Faute d'un meilleur exemple:


Quelque part, il y a un groupe de développeurs qui connaissent le HTML mais ne connaissent pas la différence entre un bouton radio et une case à cocher

Mes clients ne sont pas si mauvais, mais bon sang, vous n'avez pas besoin d'avoir sept travées dans votre front pour comprendre: si vous pouvez sélectionner UN élément dans la liste, vous avez besoin de COMMUTATEURS, pas de drapeaux. Pour comprendre cela , il vous suffit de connaître la langue de l'interface. Et pour moi, c'est le plus fou. La maîtrise de l'interface est accessible à tous . Vous n'avez pas besoin d'un collège, pas de cours, etc.

Pour être honnête, vous n'avez besoin que de la présence de l'esprit pour (A) vous arrêter et réfléchir quand une application vous embarrasse ou vous ennuie, (B) verbaliser ce qui vous ennuie / vous ennuie dans l'interface, puis (C) comprendre comment éviter cela bug spécifique dans vos propres projets.

Répétez cette procédure en permanence - et devenez un professionnel dans les plus brefs délais.

Aujourd'hui, je veux parler de quatre petites règles qui aideront à éliminer ces points douloureux dans vos propres projets. Ces heuristiques sont d'un à deux niveaux plus profonds que «utiliser des commutateurs si l'utilisateur ne peut sélectionner qu'un seul élément». Mais si vous respectez les exigences de cette liste, vos projets deviendront beaucoup plus faciles à utiliser dès le début, ce qui libérera du temps pour d'autres choses plus importantes.

(Il suffit ensuite de commencer à écouter les conférences d'autres concepteurs UX sur les dernières méthodes de recherche des utilisateurs universitaires!)

Voici ce que nous couvrons:

1. Loi de localité
   
2. Tout sauf les listes déroulantes
   
3. Test de strabisme
   
4. Études de cas

Pas de questions? Alors allez-y.

1. La loi de la localité

Placez les éléments d'interface là où ils provoquent le changement.

Toutes choses étant égales par ailleurs, les éléments d'interface doivent être placés à côté de l'endroit où le changement se produit . Parce que lorsque l'utilisateur souhaite apporter des modifications au système, il regarde involontairement l'endroit où ces modifications se produiront .

Disons que vous avez une liste d'articles. Où placer le bouton «AJOUTER UN NOUVEL ARTICLE»?


Question: Eh bien, où est le changement ?

Réponse: à la fin de la liste.

Ok, mettez un bouton à la fin de la liste.

ATTENDEZ. Vous pensez que c'est assez simple. Mais il y a une tentation.

La tentation est simplement de le placer là où il y a de l'espace libre.

Par exemple, si vous avez un menu, vous pourriez penser: «Nous avons un menu! Pourquoi ne pas simplement le mettre au menu!? "


Violation de la loi de la localité dans l'interface musicale

La réponse est évidente: car personne ne la recherchera.

(Et la réponse complète est que si vous placez simplement les éléments dans des endroits libres, l'application deviendra impropre à l'utilisation par le chaos, dont les gens s'enfuiront dès que possible).

Vous pensez que je plaisante? Avez-vous déjà rencontré cette interface?


Violation de la loi de localité dans l'interface Evernote

Une alternative tout aussi mauvaise et répandue consiste simplement à prendre la décision que vous avez vue chez Dear Technical Company, sans vous demander si cela a du sens pour vous . "Besoin d'un bouton" Ajouter "? Pas question. J'ai vu un de ces boutons. Tenez la bière! "



Jetez un oeil. Un autre bouton où les utilisateurs ne le chercheront jamais . De manière générale, ils soupçonneront que ce bouton ajoute quelque chose de nouveau au grand espace blanc vide. Parce que c'est là qu'elle est.

Vos utilisateurs veulent que vous respectiez la loi de la localité.

Alors maintenant, utilisons-le.



Bam.

Peut-être êtes-vous un concepteur UX né et imaginez toujours visuellement ce qui se passera s'il y a des milliers d'éléments au lieu de cinq , et vous comprenez qu'il y aura un problème. Si l'utilisateur crée une tonne de listes de lecture, le bouton descendra des centaines de pixels!

Par conséquent, il peut être préférable d'épingler le bouton au bas de la liste afin qu'il soit toujours visible, quel que soit le nombre de listes de lecture.

Brillamment! C'est exactement ce que Spotify a fait.


Pour un bonus (1), utilisez le bouton intégré jusqu'à ce qu'il sorte de l'écran, et à ce moment passez à l'élément épinglé et (2) rendez-le plus visible que le bouton Spotify, que j'ai personnellement remarqué quelques mois plus tard, en faisant un clic droit impuissant cliquez pour ajouter des chansons individuelles aux listes de lecture!

Une autre option consiste à reconnaître que nous ne pouvons pas afficher de manière fiable et cohérente le bouton au bas de la liste. Où est l'endroit approprié le plus proche pour elle?

Et la réponse (je pense que c'est assez évident) est en haut de la liste .


C'est mon souhait

Merde! C'est exactement ce que Rdio, le concurrent de Spotify, a fait avant que Pandora ne l'achète.


Reconstruction à partir de la mémoire (comme toute réalité, si vous y pensez)

La conclusion est claire. Ne vendez jamais votre entreprise et respectez toujours la loi de la localité.

(En fait, il existe trois lois de localité, et «placer les éléments d'interface utilisateur là où ils influencent le changement» n'est que la première. Si vous êtes intéressé, lisez ici ).

Prochain!

2. Tout sauf les listes déroulantes

Chaque fois que vous êtes tenté d'utiliser la liste déroulante, pensez à toutes les alternatives possibles.

Une leçon non évidente de la conception UX est que les listes déroulantes sont généralement la pire option .


Bienvenue en enfer!

Ils ne sont pas toujours mauvais, mais les facteurs suivants jouent contre vous:

• Les listes déroulantes nécessitent trop de clics / clics . Un pour ouvrir, plusieurs autres pour faire défiler jusqu'à l'option souhaitée (sur le téléphone mobile), un autre pour sélectionner la bonne option et (sur le téléphone mobile) le dernier pour fermer (comparer en un clic pour sélectionner parmi les options répertoriées).
  
• Les listes déroulantes ne présentent pas d'options ! Pour les voir, vous devez d'abord cliquer sur la liste, et sur le téléphone mobile, souvent, la liste entière n'est pas affichée à la fois.
  
• Dans les longues listes déroulantes, il est difficile de naviguer . Il peut y avoir plus de 195 éléments dans la liste déroulante des pays. À un moment donné, presque toute autre version de l'interface utilisateur sera plus rapide que de faire défiler la liste déroulante.

C'est assez simple, alors regardons les principales alternatives à la liste déroulante.

Si le choix est entre deux options ...

Nous avons des moyens fantastiques de choisir l'une des deux options. Tous (a) affichent immédiatement les options et (b) nécessitent moins de clics / clics.

Pour les questions qui n'ont pas de réponse «par défaut», essayez le bouton segmenté .



S'il y a un état par défaut qui correspond à «OFF», essayez de cocher la case . Il convient également pour les paramètres qui n'affectent pas la modification tant que l'utilisateur n'a pas cliqué sur «Enregistrer» ou «Soumettre» .



Le commutateur fonctionne de la même manière: il convient aux modifications qui doivent être appliquées immédiatement .



Les indicateurs et les commutateurs n'ont de sens que lorsqu'il existe deux options. Les éléments suivants sont utiles lorsque le nombre d'options est compris entre deux et environ cinq, vous pouvez donc essayer certaines d'entre elles.

Si le choix est entre 2-5 options ...

Ci-dessus, nous avons examiné les boutons segmentés (ici, ils sont également utilisés). Il convient de noter qu'avec plus d'options, les boutons segmentés verticaux offrent une plus grande flexibilité sur la longueur du texte.



Les commutateurs (boutons radio) fonctionnent de manière similaire, mais sont particulièrement utiles pour afficher les sous-éléments de chaque choix.



Pour un affichage détaillé de plusieurs options, les cartes sont bien adaptées.



J'aime l'astuce d'afficher les options visuelles littéralement, pas une liste.


Apparemment, Tesla l'aime aussi.

Si le choix est entre plusieurs options ...

Lorsqu'il existe de nombreuses options et que le défilement est ennuyeux, pensez à compléter le type de saisie . Il ressemble à une barre de recherche qui affiche les meilleurs résultats lors de la saisie de caractères.

Si vous choisissez une date ...

Pour une date, les listes déroulantes sont les pires. Si jamais je fais ça, alors j'ai vraiment échoué en tant que designer UX.



Quelle alternative? Eh bien, cela dépend des circonstances. Première question: quel type de date choisissez-vous ?

1. Dates de poisson . D'abord, des dates plus probables , puis en bas de la liste, des dates moins probables. Par exemple, la date d'une réunion ou d'un vol planifié.
   
2. Dates à forte volatilité . Dates qui ont approximativement la même probabilité sur une large période . Par exemple, un anniversaire.

(Oui, j'ai appelé "dates de Poisson" en l'honneur de la distribution mathématique :-)

Différents types de commandes conviennent à différents types.



Pour les dates de Poisson, nous voulons faire autant que possible pour SIMPLIFIER le choix des dates dans la plage la plus probable (par exemple, pour planifier une réunion, cela peut être le prochain, disons, 14 jours). Il est parfaitement normal de sélectionner une date en dehors de cette plage sera un peu plus difficile.

Le contrôle de calendrier répond pleinement à ces exigences pour les dates de Poisson. Si vous savez que la date est très susceptible de tomber dans les 2-4 prochaines semaines, vous êtes en chocolat.



De manière assez créative, Google Flights vous propose par défaut un vol en environ deux semaines, ce qui provoque parfois de la confusion («Je n'ai pas choisi ça!»), Mais c'est probablement le choix le plus probable pour la distribution de Poisson.



La zone de texte de date est probablement la meilleure option pour les dates à forte variabilité, où (A) il n'y a aucune raison de préférer une date à une autre, c'est-à-dire (B) toutes les options sont également difficiles à choisir.


N'oubliez pas que l'entrée [type = date] est votre ami ... au moins sur le bureau

Si vous choisissez un numéro ...

Les chiffres se présentent sous plusieurs formes. Très probablement, vous serez tenté de mettre une liste déroulante pour le montant de quelque chose: billets, personnes, chambres, etc.

À quelle fréquence avez-vous besoin d'un ticket? Très souvent .

À quelle fréquence avez-vous besoin de 10 billets? Pas trop .

À quelle fréquence avez-vous besoin de 10 000 billets? Est-ce une sorte de blague cruelle?

Ici, nous traitons à nouveau de la distribution de Poisson et devons utiliser un contrôle décalé vers des nombres inférieurs: par exemple, un stepper .



Pour les numéros dans une large gamme (par exemple, les numéros de sécurité sociale), vous n'utilisiez toujours pas la liste déroulante ... J'espère .

Puis-je utiliser des listes déroulantes au moins quelque part?

Bien sûr.

N'oubliez pas qu'ils fonctionnent bien quand ...

• Les utilisateurs ont rarement besoin de modifier la valeur par défaut.
  
• Il y a très peu d'options . Par exemple, dans le contrôle iOS, seules trois options sont visibles par défaut.
  
• L'utilisateur n'est pas sur le téléphone mobile (sur le bureau, beaucoup de ces problèmes sont atténués)

Peut-être que le plus observateur d'entre vous a remarqué que dans l'interface de Google Flights, que j'ai louée ci-dessus, il y a en fait trois listes déroulantes notables !


Ce qui est remarquable, dans l'interface mobile, il n'y a pas de liste déroulante de «Economy»

Ils ont fait du bon travail ici. Les problèmes potentiels d'utilisation sont rapidement atténués par les éléments suivants:

• Commandes spéciales qui, lorsqu'elles sont enfoncées, affichent tous les paramètres (y compris sur un téléphone portable) - et remplacent quatre listes déroulantes (adultes, enfants, bébés dans le siège, bébés dans leurs bras) par quatre steppers dans une seule liste déroulante .
  
• Suppression de la liste déroulante «Économie» dans l'interface mobile
  
• Peu d'options et de paramètres par défaut intelligents pour chaque élément

D'accord. Allons plus loin.

3. Test de strabisme

Si vous plissez les yeux, la chose la plus importante devrait être la première à attirer l'attention, et les éléments les moins importants - les derniers.

Question de sécurité: que doit faire un utilisateur pour utiliser cette page ?

(Remarque: je l'ai laissé échapper, alors suivez mon instinct, mais je peux donner un indice: c'est le formulaire de saisie des données)



Je suggérerais deux choses :

1. Cochez toutes les cases pertinentes (??) dans la zone jaune
   
2. Cliquez sur le bouton bleu Soumettre

Tu le pensais aussi?

Erreur et erreur.

1. Les "drapeaux" sont en fait de très petits champs pour entrer des données textuelles (si vous lisez la section précédente, vous savez qu'il devrait y avoir des pas à pas).
   
2. La chose la plus importante («Rechercher des options» - soit dit en passant, c'est une façon très déroutante de dire «Soumettre») est encadrée par un bouton gris et discret. Une chose beaucoup moins importante («Aide») est juste à côté, mais plus grande et plus visible.

Le test de strabisme indique que la chose la plus importante devrait être la plus visible . Quelle est la chose la plus importante ici? Il s'agit d'une zone de texte (ou d'un stepper;) et d'un bouton «Soumettre».

Si vous allez plus loin, la page suivante est encore pire.



Sur quoi allez-vous appuyer: le bouton gris à gauche ou le même bouton gris à droite ?

J'espère que vous avez choisi celui de gauche!


Pressé par ce formulaire, j'ai en fait d'abord cliqué sur le bouton Aide. Ouch. Lorsque je suis entré pour la deuxième fois, j'ai cliqué sur «Retour», même en scannant couramment les noms des deux boutons, car sur 99,999% des autres sites (avec le sens de la lettre de gauche à droite), le bouton «Retour» est toujours laissé

Encore une fois, si vous plissez les yeux, je ne peux pas dire ce qui est important.

Comme la loi de la localité et l'exclusion des listes déroulantes, le test de strabisme est assez simple. Correction du schéma en 30 secondes.


Dans une vraie refonte, je voudrais mettre une sélection du nombre de billets sur la MÊME PAGE. Mais c'est une loi différente pour un temps différent

Ça marche?



Dites-le vous-même. Quatre interrupteurs et un bouton. Et un petit lien ci-dessous.

Je n'essaye pas de trouver à redire sur le site AlaskaTrain.com , c'est fréquent.

Voici l'écran d'inscription à mon réseau social préféré basé sur les recommandations de Foursquare (bien regardé, bien sûr).



Comment envoyer réellement les données saisies (la chose la plus importante)?

Astuce: le bouton est caché derrière le texte brut dans le coin supérieur droit.



Mais Foursquare suit simplement les normes de conception d'Apple. Malheureusement, une violation du test de strabisme est souvent constatée même parmi les leaders de l'industrie.



Une façon d'identifier l'élément principal d'une page consiste à considérer la proportion des vues de page qui comprend une action particulière. Voici les indicateurs pertinents du programme Anki (un programme pour mémoriser des mots, des expressions et toute autre information utilisant des répétitions d'intervalles - environ Per.).



Pour chaque centaine de cartes que j'ai consultées, je vais aller à ...

• Afficher la réponse (environ 95 fois)
  
• Retour à la liste des cartes (deux fois)
  
• Commencez à ajouter des cartes (deux fois)
  
• Quelques autres fonctionnalités (très rares)

Une telle analyse indique vraiment quelle interface fonctionnera mieux ici.

• Accentuer les fonctions les plus fréquemment utilisées (en première approximation, la «plus utilisée» équivaut à la «plus importante»)
  
• Desserrez, masquez ou supprimez les fonctionnalités moins utilisées

Mais ce n'est que le début (par exemple, j'aimerais voir si les utilisateurs comprennent qu'un bouton avec un plus sans signature ajoute des cartes ). Mais avec seulement quelques heuristiques simples, nous avons réduit l'interface désordonnée et confuse de dix éléments d'interface utilisateur à seulement cinq. Ceci ... vérifiez ici mes calculs ... moitié moins.

Pour plus d'informations sur le test de strabisme, vous pouvez regarder ma vidéo montrant la refonte de l'application Web Timezon.es . Ou, si vous ne disposez pas de dix minutes, voici un article de blog illustré avec la même refonte étape par étape.

4. Études de cas

Si vous initiez les utilisateurs à de nouveaux concepts, alors quelques exemples valent mille mots que les gens ne liront toujours pas.

Nous avons une étrange tendance à essayer de tout expliquer par des mots, lorsque les exemples sont beaucoup plus clairs.

Prenez la nouvelle startup Teeming.ai, qui m'a récemment contacté pour me consulter sur la conception de la page principale. Rubriques sur cette page:

• «Teeming élimine l'isolement dans le travail à distance »
  
• «Teeming aide à créer des équipes à distance », c'est aussi « apprendre, résoudre des problèmes, s'amuser et se motiver »
  
• «Teeming et vidéo pour synchrone [communication] »
  
• "Fonctionne avec toutes vos plateformes vidéo préférées "

Mais voici la question. Que fait vraiment grouiller?



C'est difficile à dire. Il est clair que cela est en quelque sorte lié à ... positif pour les travailleurs à distance ? Mais je n'ai pas d'idées concrètes sur la façon dont cela m'aidera personnellement, je ne vais donc pas essayer ce service, le recommander, etc.

(Désolé, Teeming, tu sais, je t'aime).

Ensuite, jetez un œil à IFTTT . Peut-être que vous savez déjà ce qu'ils font - alors faites comme si vous ne saviez pas , et essayez de comprendre cela à partir des titres de la page principale:

• Éclairer automatiquement la route pour un gars avec livraison de pizza (dominos + teinte)
  
• (Instagram+Twitter)
  
• (Google Assistant+iOS Calendar)

Vous n'avez pas besoin de lister beaucoup d'exemples pour dessiner une image assez claire: IFTTT connecte les applications ensemble pour faire ce dont elles ne sont pas capables séparément .

Ce qui est fou, c'est que sur la page principale, ils l'expliquent d'abord avec le texte:

IFTTT aide vos applications et vos appareils à fonctionner ensemble d'une nouvelle manière. IFTTT est un moyen gratuit de faire communiquer toutes les applications et tous les appareils. Tout ne fonctionne pas bien sur Internet, notre mission est donc de construire un monde plus connecté.

Bliiin.

Question: qu'est - ce qui explique le mieux l'idée de l'application ? Exemples ou description?

Pensez à des exemples. La description n'est complètement claire que lorsque je vois quelques exemples de la façon dont cela peut m'aider.

Mais des exemples sont nécessaires non seulement sur la page de destination. C'est ce que nous constatons lorsque nous entrons pour la première fois dans l'outil de gestion de projet Basecamp .



Au lieu d'une page complètement vierge, vous voyez deux projets clairement préparés qui enseignent par des exemples comment fonctionne l'ensemble de l'application (et donnent également une idée de l'apparence du système lorsque vous l'utilisez pendant un certain temps).

Sérieusement, je peux lire de faux chats de faux utilisateurs qui discutent de faux téléchargements de fichiers et de fausses tâches dans le planificateur .



Y a-t-il même une sympathique ... montagne? ... qui dit que je peux regarder une vidéo explicative de deux minutes sur ce didacticiel.

Et merci, M. Gora, pour vos conseils: les vidéos de démonstration sont une autre façon d'apprendre par l'exemple ! Les exemples montrent à quoi ressembleront mes projets et la vidéo montre comment utiliser le logiciel.

Brillamment.

Si votre application donne aux utilisateurs quelque chose à créer , une démo est un excellent moyen de montrer les possibilités avec un exemple.

Grande application de dessin Procreate a remporté l'Apple Design Award, le Choix de l'éditeur sur l'App Store et l'App Store Essential, et John Gruber l'a qualifié de «révolutionnaire», etc. - mais aucun prix ne ravit comme des exemples réels du travail créé dans cet éditeur.


Ce n'est pas une application de dessin

wow ordinaire .

Ce n'est pas MS Paint.

La démonstration est un outil puissant pour comprendre les capacités de votre application.

Donc, si votre application fait quelque chose de nouveau et de peu familier ou s'appuie sur des concepts nouveaux et peu familiers - vous devriez apprendre à apprendre avec des exemples . Si les utilisateurs n'ont jamais vu cette application auparavant, vous devez immédiatement poser la question: comment donner un exemple pour le rendre plus clair?

En bref, mes façons préférées de le faire sont:

1. Sur toute page qui essaie d'offrir à l'utilisateur une fonction / application, etc., montrez des exemples de ce qui peut être fait avec cet outil.
   
2. Utilisez la méthode «bootstrap», montrez des exemples de données et un exemple de l'apparence d'une application qui fonctionne correctement.
   
3. Intégrez stratégiquement des informations générales (telles que des articles, des vidéos ou des conseils) ainsi que des exemples d'utilisation.
   
4. Votre application vous permet-elle de créer quelque chose de créatif? Montrez une galerie d'œuvres pour stimuler l'imagination.

Est-ce que cela a du sens? Venez et arrondissez.