web-dev-qa-db-fra.com

Comment réaliser une navigation rapide, pour les onglets horizontaux déroulants sur Android appareils mobiles

Problème

Les étiquettes sont une fonctionnalité assez courante, dans l'application de prise de notes, pour classer les notes.

La plupart des applications de prise de notes sur les marchés placeront la sélection des étiquettes dans la barre de navigation du hamburger. Par exemple, voici à quoi ressemble Google Keep

enter image description here

Je peux comprendre pourquoi ils veulent concevoir ainsi. Je pense que la raison principale est que le concepteur ne veut pas que les commandes de navigation de Label suppriment le domaine de l'écran, de l'affichage des notes principales.

Cependant, il comporte également des lacunes. La navigation dans les différentes étiquettes n'est pas facile, car elles sont cachées dans le menu hamburger . L'utilisateur doit d'abord ouvrir le menu de navigation en appuyant sur l'icône du hamburger, avant de pouvoir parcourir la liste des étiquettes.

J'ai essayé de choisir un nouveau design, en plaçant des étiquettes sur des onglets horizontaux.

enter image description here

Jusqu'à présent, après avoir distribué à 20 000 personnes, la plupart des utilisateurs apprécient cette conception. Ils ont évalué l'application comme 4.8/5. Ils ont confirmé la conception des onglets, facilitent la navigation entre les étiquettes.

Cependant, la conception des onglets présente également des lacunes.

enter image description here

Lorsque vous avez une énorme liste d'étiquettes (Dit 10), avoir à faire défiler les onglets horizontaux pour localiser l'étiquette souhaitée, devient encombrant.


Idée de solution proposée

L'une des améliorations auxquelles je peux penser est que, lorsque l'utilisateur tape sur l'onglet actif actuel, une boîte de dialogue apparaît, qui permet à l'utilisateur de voir une liste d'étiquettes. Lorsque l'utilisateur tape sur l'étiquette souhaitée, il "saute" directement à la page de l'onglet d'étiquette souhaitée.

Mais, une telle UX n'est pas facile à découvrir!


Avez-vous une idée de la façon dont nous pouvons améliorer encore la conception de cet onglet horizontal?


p/s Si vous souhaitez avoir une véritable sensation UX sur la façon dont la navigation par onglet se sent pour les étiquettes, vous pouvez l'essayer à partir de https://wenote.jstock.co

1
Cheok Yan Cheng

Vous devez utiliser une liste déroulante/modale pour répertorier les étiquettes si la limite d'étiquette dépasse ce qui peut tenir à l'écran. Imaginez laving 20 étiquettes et avoir à faire défiler en continu pour trouver ce que vous cherchez.

Ce que vous pouvez faire est de faire changer l'interface utilisateur dynamiquement en fonction du nombre total d'étiquettes, ou de vous en tenir à une liste déroulante/modale uniquement et d'ajouter des opportunités pour indiquer que vous pouvez interagir avec elles.


La navigation dans les différentes étiquettes n'est pas facile, car elles sont cachées dans le menu hamburger.

Vous n'avez pas besoin d'utiliser un menu hamburger, en fait je m'opposerais à l'utilisation de cette icône. L'utilisation du terme label et le fait d'avoir une flèche déroulante suggéreraient à l'utilisateur qu'il y a plus d'étiquettes à filtrer. Votre premier exemple utilise une icône d'engrenage, ce qui le rend confus et vise à afficher plus d'étiquettes.


Voici différentes Android Reddit à examiner qui ont une structure d'étiquette (subreddit) différente:

reddit est amusant , Boost pour reddit , Maintenant pour reddit

Le premier a une navigation déroulante, tandis que le second utilise le défilement horizontal avec un menu déroulant, et le troisième utilise le défilement horizontal.

Par expérience, la première solution est la meilleure car elle est plus rapide, plus facile à lire et n'utilise l'espace d'écran que lorsque j'en ai besoin.

1
mrchaarlie

Pensons-y une seconde

Vous voyez, nous pouvons trouver d'infinies solutions insolites et folles, mais nous serions toujours entourés de risques (nouveau modèle, cela fonctionnera-t-il, etc.)

  1. Faire pivoter le texte
  2. Diminuez progressivement la taille de la police (de gauche la plus grande à la droite la plus petite)
  3. Afficher la première lettre

etc...

Nous ne fournirons probablement jamais de solution globale dans ce sens.

Peut-être 20/80

Bien que je ne connaisse pas votre produit ou vos utilisateurs, je peux presque parier que le principe 20/80 fonctionnerait bien ici.

Disons que le 99e centile du nombre maximum de catégories pour vos utilisateurs est de 20 catégories.

Cela signifie que selon le principe 20/80, vos utilisateurs utilisent 4 catégories 80% du temps, et les 16 catégories restantes sont utilisées 20% du temps.

Si cela se vérifie, il est plus logique d'opter pour quelque chose comme Wireframe

Comme vous pouvez le voir, vous donnez toujours à l'utilisateur la possibilité d'accéder aux catégories importantes avec facilité et rapidité, leur permettez d'avoir la flexibilité de définir quelles sont les catégories importantes et quand ils ont besoin des autres, ils doivent faire une étape supplémentaire , de cette façon, vous avez divisé le problème en deux et résolu les deux.

0
UX Labs