Pourquoi cette conception est-elle considérée comme encombrée ou écrasante?
Je développe une application Web pour les navigateurs de bureau et de tablette. Toutes mes connaissances UX proviennent de l'expérience personnelle et de l'itération - je n'ai jamais été formellement formé. J'ai pris grand soin de présenter les informations sur ce site Web afin de les garder aussi organisées que possible, mais de nombreuses personnes qui m'ont fait part de leurs commentaires la décrivent comme "encombrée" et "écrasante". J'ai du mal à trouver comment je peux présenter les mêmes informations tout en les améliorant.
Quels éléments de cette conception de barre latérale à double menu basée sur une carte déclenchent cette réponse?
C'est là que l'UX devient difficile
Il n'y a rien de fondamentalement mauvais avec votre interface. Il semble traiter une grande quantité d'informations de manière raisonnablement claire et standardisée.
Mais il y a un problème avec votre interface: Les utilisateurs ne s'y sentent pas à l'aise.
C'est un problème compliqué à résoudre, mais c'est le cœur de tout projet de conception UX. Cela dépend totalement du public que vous servez et du contexte dans lequel ils utiliseront votre application.
Où commencer
- Assurez-vous de ne pas surévaluer les opinions d'un petit sous-ensemble d'utilisateurs. C'est tout le problème de la "roue qui grince". Ils peuvent avoir des préoccupations valables, mais vous devez vous assurer qu'ils sont représentatifs de la plus grande population d'utilisateurs.
- Asseyez-vous avec de vrais utilisateurs qui font de vraies choses avec votre application. Voyez ce qui se passe, quelles tâches ils essaient d'accomplir, où ils se retrouvent coincés ou confus ou frustrés.
- Testez une solution à la fois. Plus vos modifications peuvent être atomiques, plus vous pouvez retirer avec précision du test.
- Encerclez vos utilisateurs lorsque vous pensez avoir corrigé quelque chose. Recueillez beaucoup de commentaires et assurez-vous d'avoir résolu ce que vous pensiez avoir résolu.
tl; dr
- Comprenez exactement ce que votre utilisateur veut accomplir.
- Éliminez chaque
[action, mot, image, icône, couleur, forme, pixel]
que cela ne les rend pas meilleurs au # 1.
Observations générales
Avertissement: je ne suis pas votre utilisateur et je ne le serai peut-être jamais. Prenez mes observations pour les suppositions sans réserve qu'elles sont.
Hiérarchie
Les titres des cartes attirent définitivement mon attention, grâce au petit triangle de coin. Cela semble être un élément important. Alors, où dois-je aller ensuite?
Le Create Game le bouton semble important une fois que je l'ai trouvé. La localisation semble être trop de travail car elle se cache sur le bord de l'écran et utilise la seule couleur de surbrillance que vous avez, qui est déjà utilisée ailleurs.
Que diriez-vous des choses Games et Users vers le haut qui ressemblent à nav? Actuellement, je ne sais pas lequel est actif ou ce qu'il ferait.
D'une manière générale, il y a beaucoup de choses qui demandent mon attention. Cela m'amène à ...
Bruit visuel
Essayez de réduire le nombre de choses discrètes en affinant les choses qui sont là. Par exemple, votre indicateur Online pourrait-il perdre le cercle et être simplifié comme suit:
Une autre opportunité réside dans les détails de la carte. Quelle quantité de ces informations est nécessaire au niveau de l'aperçu? Pourriez-vous en développer une partie en survol/tapotement? Et les icônes de détails n'ajoutent aucune information utile, mais ajoutent beaucoup de bruit visuel à la page en raison de leur fréquence. Pourquoi pas seulement des étiquettes de texte:
Toujours dans les cartes de jeu, je n'ai pas de contexte pour la ligne jaune-orange. À première vue, il ressemble à un indicateur d'onglet sous l'icône de contacts et il peut y avoir un autre onglet pour Private. Dès que je pense cela, je réalise que cela n'a aucun sens. Plus d'attention gaspillée.
Monotonie
Malgré les problèmes de complexité, il pourrait être possible d'ajouter quelque chose pour briser la monotonie. Serait-il utile d'autoriser les images de couverture pour les jeux? Ou peut-être utiliser ce coin bleu L comme couleur d'en-tête complète (en supposant qu'ils ne seraient pas tous tous les mêmes)?
La répétition de ces étiquettes de lignes de table pour chaque boîte de jeu contribue beaucoup à l'encombrement perçu de l'OMI. Toutes ces informations sont-elles également nécessaires? Vous pouvez peut-être essayer de simplifier, mais ajouter la possibilité de développer si nécessaire.
Vous avez une bonne interface utilisateur, mais certaines choses me frappent qui peuvent peut-être être améliorées:
- Trop de lignes (vous pouvez en supprimer la plupart je crois)
- Trop peu de contraste entre les différentes parties de votre design (essayez de vous estomper les yeux et voyez si vous pouvez toujours discerner les différentes parties de votre design). Les cartes sont particulièrement problématiques. Faites-les éclater.
J'ai supprimé quelques lignes et fait ressortir les cartes un peu plus et je pense que cela rend votre design un peu moins encombré. Jugez par vous-même.
Les données affichées par les cartes auraient beaucoup plus de sens dans une liste ou un tableau. Chaque carte a les mêmes champs exacts avec des valeurs différentes et vous affichez les étiquettes des champs à chaque fois. Un tableau avec des en-têtes n'afficherait qu'une seule fois les étiquettes "Heure", "Langue", etc.
En tant que note sur les cartes, elles semblent plus adaptées au contenu mixte ou de forme libre, où chaque carte présente une interface utilisateur unique adaptée à son contenu unique. Votre contenu est une liste de jeux disponibles, il est donc logique de représenter cela dans l'interface utilisateur avec une liste.
personnellement, je ne pense pas que ce soit encombré, mais oui, c'est un peu écrasant.
Fondamentalement, je vois votre écran et je n'ai aucune idée où regarder et quoi faire. Les aspects les plus importants semblent être un L dans un coin et le fait que quelqu'un soit en ligne (c'est à cause de votre utilisation des couleurs), alors vous mélangez les informations en donnant à tout le même niveau de hiérarchie. CTA s sont grisés (!!!!), votre fil d'Ariane est bizarre en fonction de l'écran donné (vous affichez des jeux tout en affichant votre fil d'Ariane Utilisateurs et il s'agit d'un niveau sous Jeux , ce qui est également étrange, sauf si vous voulez dire Joueurs ), vous avez une barre latérale de message/chat qui semble être liée au contenu principal, mais il est vraiment difficile de trouver une connexion ... eh bien, c'est un peu déroutant. La bonne nouvelle est que tous ces aspects pourraient être facilement modifiés, votre problème principal semble être la concentration sur les hiérarchies, ce qui est important et ce qui ne l'est pas. Il suffit de changer quelques couleurs (principalement le CTA) et de tester. Je suis sûr que vous verrez des résultats immédiatement
Quoi qu'il en soit, je pense que vous devriez faire des tests extensifs, étudier les comportements et les interactions et poser des questions à de vrais utilisateurs, pas à des amis, pas à des collègues
Les réponses fournies ici sont excellentes, mais quelques observations:
Mettez l'avatar de l'utilisateur dans un cercle gris (plusieurs cercles gris semblent encombrés), de la même manière, mettez des informations significatives dans toutes les cartes de jeu.
Conservez uniquement le cercle vert en tant que notion pour les utilisateurs en ligne, supprimez le texte, c'est-à-dire "En ligne" de la liste d'amis, mais conservez le texte dans les statuts des utilisateurs connectés car cela les aidera à comprendre la signification de divers cercles colorés comme vert = en ligne , rouge = hors ligne, orange = inactif, etc.
Supprimez l'icône de messagerie des 'Amis | Tous les en-têtes, car ils sont déjà placés dans l'en-tête de votre application. Reportez-vous à l'image suivante pour ces 3 points.
![]()
Mettez votre menu Jeux et utilisateurs dans l'onglet de navigation comme celui-ci.
![]()
Augmentez la taille du coin supérieur droit et de la lettre comme celle-ci.
![]()
J'ai quelques guides fondamentaux à offrir, qui devraient s'appliquer à tous les UX, et sont particulièrement importants ici:
La commodité n'a pas à rivaliser avec la clarté.
Un concepteur est censé profiter au maximum de l'espace d'écran tout en présentant des informations qui ne déroutent pas ou ne submergent pas l'utilisateur. Mais cela ne signifie pas signifie que nous, les concepteurs, devons échanger la quantité d'informations disponibles pour la clarté dans laquelle elles sont présentées. Tirez parti de la conception dynamique, avec une interaction utilisateur.
En devenant à l'aise avec un médium fluide ...
Nous, les concepteurs, trouvons généralement naturel de concevoir des interfaces dans un éditeur de disposition vectorielle, où nous ne câblons pas un tas d'animations, de transitions et de transformations. C'est ce qui limite nombre d'entre nous dans notre capacité à concevoir des mises en page innovantes qui exposent (et cachent) des informations via l'interaction avec l'utilisateur. Alors, apprenez d'abord à concevoir dans un environnement où vous pouvez créer des interfaces mobiles, animées et transformantes. Personnellement, je viens de concevoir mes interfaces avec HTML, JS et CSS - après un certain temps, cela devient un support de conception naturel.
... nous pouvons créer des environnements qui exposent et cachent des informations, tout en attirant l'attention de l'utilisateur.
Ensuite, profitez de la liberté fluide dont vous disposez dans la conception de votre interface pour afficher des indices d'informations qui "tirent" le focus de l'utilisateur d'un élément à l'autre dans l'ordre que vous souhaitez, ou l'ordre dont ils ont besoin, et interagissent avec l'interface pour accéder à différents groupes d'informations.
En nous concentrant sur l'interaction utilisateur dynamique, nous pouvons utiliser une hiérarchie d'interface simple pour guider l'utilisateur vers les informations dont il a besoin, quand il le souhaite.
Vous voulez exposer beaucoup d'informations à l'utilisateur, mais il y a une limite au montant avec lequel les gens se sentent à l'aise à la fois. Limitez le nombre de détails exposés en vous appuyant sur l'interaction de l'utilisateur liée à une animation fluide et simple, en particulier lorsque vous traitez des tableaux d'informations en double comme dans ce cas.
Par exemple, dans votre cas, au lieu d'afficher tous ces blocs de jeu avec des informations en double, essayez d'afficher les blocs avec uniquement une étiquette identifiant le jeu, puis lorsque l'utilisateur interagit avec lui (au toucher ou au survol par exemple), affichez les détails Du jeu. Ce changement à lui seul simplifierait considérablement votre interface et rendrait l'utilisateur moins contraint d'absorber autant d'informations exposées à la fois.
Eh bien, de bonnes réponses mais ne vous aidant pas avec la cause autre que "Monotony" - ce qui n'est pas un grand terme, mais proche.
Un excellent design dans les magazines, les affiches et les interfaces utilisateur est le produit de la police , la taille de la police et espaces blancs , encore améliorés avec couleur , et non endommagé avec la ligne .
Ces propriétés: police, taille de police, espace et couleur entraînent l'utilisateur à comprendre (a) ce qui est important, (b) comment rechercher des informations, et (c) comment voir les tendances dans les données en un coup d'œil plutôt que d'y penser directement.
La lecture est un effort très coûteux pour les gens, donc numériser pour identifier "laquelle de ces choses ne ressemble pas aux autres" ou une variante du principe est ce que vous voulez trouver.
La localisation spatiale se développe au fil du temps avec l'expertise, une fois que l'utilisateur a inconsciemment mémorisé l'interface utilisateur. (Les utilisateurs expérimentés aiment une interface de style Excel et pas les nouveaux utilisateurs.)
En d'autres termes , vous ne pouvez pas compter sur l'introspection lors de la conception d'une interface, sauf si vous savez si vous 'testez' la conception pour un niveau d'entrée ou un utilisateur expérimenté.
Vous "apprenez" à l'utilisateur comment parcourir les informations en utilisant la taille de police (priorité), le style de police (les polices véhiculent une signification relative). Après les polices, utilisez des formes (comme l'onglet d'angle conseillé par quelqu'un d'autre). Après les formes, utilisez la couleur . La couleur doit être la dernière.
La couleur doit indiquer soit le type , soit indiquer "cette chose est comme les autres". Si vous devez "décorer" avec de la couleur (une barre ou un arrière-plan coloré), cela représente généralement un échec, car il n'a pas de "signification".
Testez votre conception en faisant des éléments séparés dans des "calques", puis activez et désactivez les calques. Votre œil devrait vous le dire.
Interface de carte
Maintenant, vous avez combiné des "cartes" (disposition spatiale), mais utilisez un "tableau" de polices et de couleurs.
Il ne semble certainement pas que les cartes soient un bon modèle d'interface utilisateur pour votre solution, alors assurez-vous d'abord que vous aidez l'utilisateur. Les cartes fonctionnent principalement si elles contiennent des images et doivent être constamment réorganisées. Sinon, les tableaux sont généralement meilleurs, car ils sont plus faciles à analyser.
Par exemple, si vous prenez un paquet de cartes à jouer et que vous les jetez par terre, vous pouvez toujours les distinguer indépendamment de leur direction. Si vous jetez vos "cartes" par terre, elles se ressembleront toutes.
Donc, vous comptez sur l'indexation de position par votre utilisateur, alors vous utilisez le mauvais modèle ou vous devez résoudre la métaphore de la carte à jouer.
Conseils utiles
J'essaie de conseiller aux gens de trouver une mise en page de page de magazine sur laquelle travailler. Bien sûr, l'étalon-or est le papier et le site Web du NYT. Tout type et espace blanc.
Mais commencer par un modèle visuel (le jeu de société monopolistique par exemple) aidera généralement les concepteurs à éviter le "problème des boîtes" qui afflige les amateurs.
Lorsque nous, les humains, regardons quelque chose de quelque peu structuré, comme une interface utilisateur, nous avons tendance à construire un modèle mental.
Afin d'atteindre cet objectif, nous scannons l'interface utilisateur en un instant, inconsciemment, et prenons note de chaque élément de ladite interface utilisateur.
Dans ce processus, nous consommons de la "puissance mentale", une quantité qui dépend du nombre d'éléments dans l'interface utilisateur. Ceci est lié à charge cognitive.
Après avoir fait cela un certain nombre de fois, nous nous "fatiguons", selon la charge cognitive consommée.
Eh bien, votre interface utilisateur comporte un certain nombre d'éléments, et ce que vos utilisateurs se plaignent, c'est la quantité de charge cognitive requise pour chaque analyse.
Le nombre d'éléments n'est pas les panneaux "Hé les gars", mais le nombre d'icônes, de textes, de lignes, tout!
C'est une bonne nouvelle car il y a beaucoup de marge pour s'améliorer.
Je vais énumérer quelques exemples pour que vous compreniez ma suggestion:
- chaque "Hé les gars ..." a un certain nombre de lignes internes qui, si elles étaient supprimées, allègeraient la charge cognitive sans gêner la compréhension de l'utilisateur
- la ligne sous "Créé par Jack"
- les limites des cellules du tableau sous "DÉTAILS"
- le mot "DÉTAILS" lui-même
- les lignes d'artefact "Amis | Tous | ✉5" (apparaissent comme un bouton en survol)
- les rayures zébrées sous les amis | Tous les artefacts
- le "En ligne ●" pourrait être seulement la partie couleur mais avec un ✓ vert à la place et une croix rouge
- dans Trier/Filtres/Tous les jeux essayez de placer la flèche déroulante plus près du texte pour qu'ils deviennent une seule chose
- au lieu d'images rondes, utilisez des images carrées atteignant les trois bordures
- etc ...
Comme premier test, essayez d'étendre la table "DETAILS" afin qu'elle touche toutes ses quatre frontières (en perdant ses beaux coins arrondis et la rubrique "DETAILS") et vous verrez.
Cela deviendra plus simple et donc plus facile à grogner.
Alors vous pourriez croire et vous lancer dans une frénésie de suppression d'éléments visuels.
Idées:
Créer un jeu
Peut-être que la première carte pourrait être votre gros bouton de création de jeu! J'aimerais vraiment avoir ce type d'entrées où vous pouvez simplement cliquer sur le texte que vous souhaitez modifier et le remplir juste là. Je penserais à le rendre réactif aussi, alors peut-être que quand vous le voyez, c'est très simple, il n'y a qu'un "+" et "Créer un jeu", puis cliquez dessus pour l'animer en douceur dans ces champs de saisie automatique. (Disons que la carte fait un retournement en 3D. Il y a des options infinies pour la créativité ici!)
Cartes de jeu
Idée similaire pour la réactivité: supprimez le bouton Join-Game et faites-le apparaître en survol comme l'un de ces effets de superposition semi-transparent. J'aime l'idée de captures d'écran/art du jeu comme fond d'écran.
Voici ce que je viens de réaliser à propos de ces cartes: ce n'est en fait pas nécessairement la meilleure approche pour ce type de données. Chaque carte a les mêmes détails et informations présentés. Pourquoi pas juste une table quelconque? Les joueurs pouvaient ensuite les trier par champ.
Vous pouvez faire preuve de créativité et avoir les étiquettes de champ à gauche ou à droite, tout en conservant une large orientation de type carte avec du papier peint. Des idées sans fin ici aussi! Peut-être qu'ensuite ils peuvent faire défiler de gauche à droite, ET faire défiler de haut en bas pourrait déplacer le groupe de cartes par classification, peut-être par type de jeu. (Les touches fléchées peuvent maintenant s'impliquer!)
Liste des joueurs
Ceci (et peut-être l'en-tête) est la partie qui semble un peu encombrée. Je pense que c'est juste beaucoup d'informations visuelles dans le périphérique. Alors, comment pourrions-nous résoudre ce problème? Encore une fois, il y a beaucoup d'options, il suffit de faire preuve de créativité! Encore une fois, commençons par aller avec des papiers peints. Et puis peut-être une interface accordéon? Peut-être qu'au lieu de "o en ligne", vous pourriez avoir un cercle rempli contre un cercle à moitié plein ou vide. Ou tout autre indicateur thématique, comme un ruban! (ou utilisez un dégradé semi-transparent avec une icône évidée.)
Une idée est peut-être même de n'inclure que des personnes en ligne, tandis que les personnes hors ligne sont répertoriées ci-dessous sous forme de liens séparés par des virgules, un peu comme ce que vous voyez dans les forums:
Qwerty Uiop , Plok Min Juhby , Wes X Qwaz , Kip HG Jolumny , Ferd 3rd , Chasbyn Q Jon Klimp-Werdguft ZCXV , Guy T. Fred , Ty Hug
(BTW, ma mère et moi avons trouvé ces noms en jouant à un jeu pour voir ce que nous pourrions faire avec les régions du clavier.)
Ces suggestions sont juste pour le démarrer. J'espère que cela aide!
Ajoutez plus de contraste pour faire ressortir le contenu important (les jeux de cartes), en ajoutant une couleur d'arrière-plan plus sombre par exemple.
Faites le coup jaune plus significatif en augmentant la taille du pourcentage de joueurs qui sont actuellement dans la salle. Une salle pleine obtiendrait un trait rouge par exemple.
La police du "L" bleu semble être une autre police, ce qui la rend vraiment étrange.
Sans doute: Supprimez les icônes avant "Round", "Time", "Language" et "Words". Ils sont amusants mais aussi distrayants et ne semblent pas ajouter de logique car le texte lui-même suffit.
Notez que je n'ai changé que les 2 premières cases à 100% (la 2ème case a toujours l'ancien L cependant, c'était juste pour montrer à titre indicatif).
Selon Jonathan Ive d'Apple, une bonne interface ne présente que des informations qui sont IMMÉDIATEMENT pertinentes pour l'utilisateur . Découvrez https://www.youtube.com/watch?v=3q6ULOT9Q4M
C'est peut-être un petit point mineur, j'ai eu le même problème. Avec mon client, le problème est d'avoir trop d'espace blanc dans l'interface. Pour une mise en page basée sur CARD comme la vôtre, essayez:
Ajout d'une couleur d'arrière-plan comme
#EEEvers la section principale du contenuPour le chat de la barre latérale, supprimez la ligne supplémentaire en gris
Avoir la possibilité de rendre les cartes pliables, si vous devez présenter des données numériques à titre de comparaison, essayez des tableaux/graphiques
Le manque de hiérarchie et de définition des éléments sur la page est le principal problème. L'utilisation des couleurs de surbrillance, de l'échelle et une compréhension de la façon dont vous voulez que l'utilisateur interprète et digère les informations que vous lui présentez l'aideront