Abduzeedo Material Design – Navigation dans l’application

Le week-end dernier, j’ai commencé le processus de conception de l’application mobile et du site Web Abduzeedo pour Android. Le but est d’appliquer Conception matérielle de Google style à la nouvelle application, mais pour ce faire, nous devons repenser pas mal de choses. La première chose que nous avons faite la semaine dernière a été de nous habituer au spécification, préparez des fichiers, des actifs et des ressources pour commencer à explorer. Le week-end dernier, j’ai passé plus de temps à réfléchir à la façon dont la navigation serait, puis à concevoir l’apparence de l’application.

Dans cet article, je vais vous expliquer certains des concepts de base que j’ai en tête pour la navigation dans l’application.

La navigation

L’une des applications qui, à mon avis, offre une excellente navigation est Newstand et Play Store. Il y a quelques choses que j’aime chez eux :

https://www.youtube.com/watch?v=200E9e8_hHY

• Gestes pour la navigation
• Transition transparente pour différents secteurs verticaux
• L’expérience semble naturelle

Ce modèle n’est pas nouveau, je me souviens de certaines des premières applications iPad, était Wired Magazine, si je ne me trompe pas, utilisait le même style. En fait, les magazines sur tablettes utilisent toujours le même modèle. Défilement vertical pour le contenu sur ce sujet et horizontal pour différentes verticales.

Certaines choses me dérangent un peu :

• La navigation horizontale limite les interactions pour la verticale spécifique, nous ne pourrions pas avoir une autre navigation horizontale
• Découvrabilité : il devient compliqué pour les utilisateurs de voir toutes les catégories, qu’elles soient horizontales ou verticales.
• Si les utilisateurs font défiler 3 panneaux vers la droite, il leur faudrait encore 3 écrans pour exposer la navigation.

Prototype simple dans Keynote

Keynote est un excellent outil pour les études de mouvement simples. Vous pouvez simplement créer des diapositives et utiliser Magic Move pour animer les objets d’une diapositive à l’autre. Ci-dessous, vous pouvez voir le prototype simple que j’ai assemblé pour voir à quoi ressemblerait cette idée.

D’après les statistiques du blog, nous savons que les utilisateurs réussissent à peu près la deuxième pagination. Nous savons également qu’ils ne cliquent pas non plus très souvent sur la navigation. Le site est à peu près ce qu’ils voient.

Pour cette raison, je pense que rendre l’application plus navigable fera une grande différence. Le coût du geste semble être beaucoup moins cher que le fardeau des clics et des demandes de page.

https://www.youtube.com/watch?v=tmSHIO5OWxk

La navigation supérieure me dérange toujours. J’aimerais avoir juste le contenu, et pas de navigation du tout. L’une des applications qui le fait très bien est Facebook Paper. J’aime la façon dont ils gèrent la navigation en utilisant du contenu réel.

Il y a quelques idées à considérer :

• Exposez la navigation lorsque l’utilisateur fait défiler, verticalement ou horizontalement
• Utilisez le pull pour rafraîchir le style pour exposer la navigation

Sur la base de simples animations de keynote, je pense qu’un mélange des deux cas pourrait faire l’affaire.

https://www.youtube.com/watch?v=VZupurFtqFQ

Les wireframes simples m’ont donné un aperçu de la façon dont la navigation pourrait fonctionner. En termes d’UX/navigation, l’application est assez simple et elle n’aura pas plus de 2 niveaux de hiérarchie. Les utilisateurs voient un teaser d’article, puis la vue complète. La vue complète pourrait avoir des articles connexes, mais l’idée est que chaque détail d’article serait un modal, en cliquant sur des articles connexes, les utilisateurs quitteraient le modal. En cliquant sur un article différent, les utilisateurs reviendraient à nouveau à un modal.

La semaine prochaine, mon objectif est de prototyper ce modèle avec HTML et Javascript pour tester sur mon téléphone. Rien d’extraordinaire, je veux juste voir comment ça se sent sous la main. Après cela, nous pouvons revenir au design visuel et au motion design. Il est important maintenant d’avoir une vue d’ensemble, avant de trop s’immerger dans les détails.