Alternative au menu hamburger? Exemple d'interface utilisateur à l'intérieur
Je conçois une application qui a beaucoup de fonctionnalités secondaires (elle doit être là), telles que "Guides vidéo", "À propos", "FAQ", "Guide de connexion" etc.
Auparavant, nous avions une barre d'onglets avec 3 onglets (Accueil, Programmes et Plus), donc toutes ces fonctionnalités secondaires étaient dans le menu "Plus". Maintenant, nous avons combiné l'onglet Accueil et programmes en un seul onglet, ce qui rend l'utilisation d'une barre d'onglets un peu ridicule. Nous avons décidé d'utiliser un menu hamburger dans le coin supérieur gauche, car il s'agit d'une navigation secondaire que l'utilisateur utilisera rarement de toute façon.
Cependant, j'ai froid aux yeux en le faisant de cette façon, car tout le monde dit "abandonnez le menu des hamburgers" et tout ce jazz. Et cela semble mauvais sur l'iPhone X. Cependant, je ne sais pas quelles sont mes alternatives? Je veux dire, faire une barre d'onglets avec "Home and More" n'a aucun sens. Au plaisir d'entendre vos idées. Voici une capture d'écran de l'interface utilisateur actuelle:
Juste pour clarifier certaines choses:
Je ne peux pas retirer la batterie et l'icône d'aide. C'est une application pour les aides auditives, donc l'icône de la batterie indique le niveau de batterie des aides auditives (et si les deux HA sont réellement connectés). Vous pouvez appuyer sur l'icône pour afficher plus d'informations. Appuyer sur le point d'interrogation permet une superposition d'aide. Nos utilisateurs ont ~ 65 ans, ils en ont donc besoin - croyez-moi.
Et oui, je ne cherche pas une meilleure icône. Je crains que "masquer" cette navigation ne nuise, mais comme ce sont toutes des fonctionnalités secondaires que les utilisateurs utiliseront rarement (et j'en suis sûr à 100%), je pense qu'il est prudent de dire qu'il est correct de le cacher, car il ne causera alors aucune perturbation pour ce qui est réellement important. Je cherchais plutôt un modèle qui convient à la fois à iOS et à Android, car iOS dit généralement "n'utilisez pas un tiroir de navigation coulissant", ce que ce menu hamburger finira très probablement par être.
De nos jours, il existe de nombreuses options pour afficher la navigation cachée.
Tout se résume à ce que votre nourriture préférée est!:
Blague à part, idéalement vous voulez n moyen évident de montrer où vous vivez . Cependant, j'oserais dire que les menus de hamburgers sont devenus si courants que les gens les attendent maintenant et comprennent les fonctionnalités derrière eux.
Il peut y avoir quelques éléments à considérer en fonction de qui sont vos utilisateurs.
Connaissent-ils la technologie? Auront-ils déjà rencontré un menu hamburger?
Sinon, ou si vous avez des utilisateurs des deux côtés du camp, peut-être qu'une icône de menu avec le mot "menu" vous servirait mieux.
Comme toujours, faites des tests. Découvrez comment vos utilisateurs interagissent avec l'application. Les tests utilisateur Guerilla et les tests A/B sont parfaits pour ce type de problèmes.
En fin de compte, ne soyez pas défini par ce que vos pairs vous disent. Selon le cas, ils peuvent avoir tort ou raison. Découvrez comment vos utilisateurs interagissent avec votre interface utilisateur.
P.S Si vous choisissez d'utiliser une icône de hamburger, choisissez une icône de hamburger réelle. Celui que vous avez actuellement ressemble à du texte aligné à gauche.
La meilleure icône est toujours du texte
Cela étant dit, décortiquons un peu votre problème: tout d'abord, cela ne ressemble pas du tout à un menu de hamburger, et le cercle le rend encore plus confus.
En plus de cela, toute l'iconographie est un peu déroutante. Par exemple ... pourquoi avez-vous une icône de batterie sur l'application, puis une icône de batterie de l'appareil? Cela sert-il à quelque chose de réel? Si oui ... n'appartient-il pas aux paramètres (donc à l'intérieur d'une autre icône ou peut-être même du menu hamburger)?
Très honnêtement, sans savoir ce que font vos boutons, je dirais que vous devriez probablement tout ajouter sur le hamburger et avoir une seule icône . Et si vous voulez un hamburger ... il doit ressembler à une icône de hamburger pour que les utilisateurs puissent comprendre le prix à première vue. Ces cercles le rendent bruyant, encombré et déroutant.
N'oubliez pas que l'iconographie est une discipline avec des préceptes très serrés, vous ne pouvez pas simplement ajouter une icône aléatoire (dans ce cas, c'est l'icône pour texte aligné à gauche sur presque toutes les applications) et en haut ajouter un cercle avec les mêmes lignes que l'icône, car vous créez quelque chose de complètement différent. Et à moins que vous en sachiez beaucoup sur l'iconographie, il y a de fortes chances que vous ratiez la cible (je sais que je le ferais probablement et j'ai beaucoup d'expérience dans le sujet)
En bref
Débarrassez-vous de ce bruit, utilisez une simple icône de hamburger et une étiquette de texte et vous pourrez afficher toutes ces icônes d'application comme Universal , Musique , etc. dans la même vue sans charge cognitive supplémentaire pour les utilisateurs. Vous pouvez aller aussi simple que cela:
Que se passe-t-il si vous découvrez certaines des options de menu qui vous donnent le plus froid, puis que vous fournissez un bouton "Plus ..."? Vous pouvez personnaliser les boutons à votre guise et en avoir autant ou aussi peu que vous le souhaitez.
Toutes les choses que vous dites sont nécessaires pour que le menu du hamburger sonne comme s'il s'agissait généralement d'un contenu basé sur l'aide. Ne pourraient-ils pas ensuite être fusionnés dans votre point d'interrogation/bouton d'aide existant. Je ne sais pas ce que le bouton vous emmène déjà aussi, mais à moins qu'il ne s'agisse d'un lien vers l'application (qui ne devrait pas vraiment avoir un bouton de toute façon, les utilisateurs devraient toujours être clairement informés s'ils quittent l'application) des options pour accéder à ces éléments sous cette page, soit en tant que liens/boutons, soit en tant que barre d'onglets dédiée pour ces éléments d'aide étendus?
Utilisez toujours une icône + un texte.
L'icône signifie que l'élément est convivial et interactif.
Le texte signifie qu'il s'agit d'un menu et non décoratif.
S'il n'y a pas d'icône, c'est un lien sur un site Web, n'importe où ailleurs doit être une icône dans UX.
S'il n'y a pas de texte pour un élément de menu, la seule explication logique est que la largeur d'écran de l'utilisateur doit être de seulement 40 pixels de largeur. Cela ou le développeur ne comprend pas les utilisateurs. Cela peut être pardonné car d'excellents exemples de pratiques GUI/UX sont restés silencieux. C'est comme les développeurs JavaScript professionnels: nous n'utilisons jamais volontiers des frameworks ou des bibliothèques; ceux-ci ne sont devenus établis que parce que les amateurs ne comprennent pas le concept de code réutilisable. Les tendances négatives qui entravent et détruisent carrément la productivité des utilisateurs peuvent cependant être annulées.
À plusieurs reprises, Microsoft déclare avoir fait des études de cas d'utilisateurs. Avec qui? Leurs managers?! Moins l'utilisateur est techniquement averti (qui a toujours besoin de ce qui est testé), meilleure est étude de cas réelle de l'utilisateur. Il en va de même pour les utilisateurs expérimentés. Vous voulez maximiser votre gamme de compréhension non seulement qui utilise votre produit/service mais aussi comment .
Regardez tous les menus sur mobile et à moins que vous ne jouiez à un jeu surchargé de trucs pour perdre du temps, vous allez massivement (sinon littéralement en absolu) toujours voir l'espace vide à côté du menu d'icônes uniquement.
... et si pour une raison quelconque vous ne le faites pas, la mise en page devrait être remise en question.
(Réel/classique) Le programme d'installation d'Opera est un exemple parfait (et le seul) d'un programme d'installation d'application. Une fois ouvert, un seul clic installe le programme pour les personnes qui ne lisent jamais rien à l'écran bien qu'il existe des options et des options avancées avec un nombre minimal d'étapes pour y parvenir buts.
Les nouveaux utilisateurs moins ou complètement inexpérimentés sont pardonnés de ne pas avoir l'expérience nécessaire pour comprendre comment ce sur quoi ils travaillent va se développer. Dans de tels cas: n'engagez pas trop avant d'avoir prouvé que ce sur quoi vous travaillez ne sera pas rejeté dans un an ou deux. Restez agile jusqu'à ce que vous découvriez ce qui restera. Une fois que vous savez ce qui colle gracieusement adaptez votre UX au fil du temps afin que vous le fassiez pas aliéner vos premiers adoptants!
Du point de vue d'un concepteur UX expérimenté, nous avons une très bonne compréhension de la hiérarchie UX. Plus il y a de parties d'une application utilisées, moins il doit y avoir d'étapes pour accéder à quelque chose.
Les maîtres UX ne sont pas seulement des utilisateurs expérimentés, mais des utilisateurs empathiques. Personnalisation complète de la barre d'outils (positionnement de la barre d'outils sur d'autres barres d'outils d'un côté et des côtés également) ainsi que positionnement des éléments sur les barres d'outils. Si vous disposez d'un ensemble légitimement étendu d'options de premier niveau, votre interface graphique doit permettre aux utilisateurs d'ajouter/supprimer des icônes de commande + des boutons de texte et même de modifier les affichages individuels des boutons de la barre d'outils (icônes uniquement, texte uniquement et icône + texte). Un véritable utilisateur expérimenté maître UX qui utilise largement sa propre application est non seulement capable de satisfaire ses propres besoins avec une interface graphique, mais est également capable de satisfaire complètement un autre véritable utilisateur expérimenté du maître UX qui a largement utilisé la première application du maître UX .
Étant donné que vous êtes sur mobile et que vous aurez beaucoup d'options différentes, je vous recommande de consulter le Android Nova Launcher, c'est un bon exemple de personnalisation de l'interface graphique et l'émuler est une excellente idée.
En outre, vous devez considérer la zone cible des doigts/pouces. Certaines personnes ont des doigts/pouces gros, d'autres ont des doigts/pouces maigres et certaines personnes ont des ongles suffisamment longs pour pouvoir empaler et tuer Godzilla en une seule frappe.
Enfin jamais sous-estimer la personne qui personnalise l'interface graphique d'une manière qui vous donne envie de les gifler. En supposant qu'ils ont eux-mêmes volition saine choisi certains paramètres, il est important de se rappeler: ils utilisent votre application, pas celle de quelqu'un d'autre. Utilisez ces cas finaux pour vous assurer que lorsque vous effectuez des mises à jour majeures que vous ne perdez pas tout le temps! Il y a un article quelque part sur le Web qui montre la personnalisation des utilisateurs qui s'arrête complètement à chaque mise à niveau de Windows à partir de la version 1.0 et ultérieure.
Donc en résumé:
- Les nouveaux concepteurs UX ne doivent pas sur-engager jusqu'à ce qu'ils comprennent la hiérarchie de l'interface utilisateur à long terme.
- Les concepteurs UX expérimentés minimisent les perturbations UX avec les nouvelles versions.
- Les maîtres concepteurs UX éliminent les perturbations UX avec les nouvelles versions.
- Icône + texte pour vos menus par défaut .
- L'icône au-dessus ou l'icône à gauche dépend du rapport hauteur/largeur de l'écran.