Retour

Home modulaire

Ecrit par le Vendredi 7 Avril 2017

La Home, c'est le premier écran de votre app. Cet écran est important. C'est autour de lui que tout s'articule. GoodBarber 4.0 propose un système modulaire, ultra flexible, pour gérer la Home et en faire le point de départ d'une expérience utilisateur incomparable dans votre app.
Home modulaire

Navigation principale et contenus sélectionnés

C'est sur la home que se concentre l'essentiel de l'activité de vos utilisateurs. 90% des utilisateurs consultent uniquement la première section de l'app ! C'est ce que nous révèlent les stats d'utilisation des apps conçues avec les versions antérieures de GoodBarber.  

Parallèlement, d'une manière générale dans notre industrie, on remarque qu'un nombre croissant d'apps utilisent la home pour gérer leur navigation principale. 

Ces observations nous ont conduit à imaginer un concept de home radicalement nouveau pour les apps V4. Avec GoodBarber 4.0, la home offre la possibilité de choisir les contenus à mettre en avant dès l'ouverture de l'app. Elle permet également de proposer des liens vers les destinations que vous considérez principales dans votre projet. Nous croyons fermement que ce concept va vous permettre de mieux répartir le trafic au sein de votre application.
Home modulaire

Infinie modularité

Avec GoodBarber 4.0, chaque home est unique. Cette nouvelle fonctionnalité reste fidèle à l'orientation prise dès la naissance de GB : chaque app doit posséder un design qui lui est propre et incomparable. C'est la raison pour laquelle nous avons développé 66 widgets, disponibles dès la sortie de GoodBarber 4.0, pour construire sa home.  

Les widgets sont des modules fonctionnels. Pour les concevoir, nous avons dans un premier temps imaginé différents templates d'affichage sur mobile. La surface utile dans une UI mobile est une ressource rare. Pensez Mobile first nous pousse à être encore plus créatifs. Cela donne naissance à un design résolument moderne, qui réussit à maintenir de la richesse fonctionnelle dans une interface épurée. 

Home modulaire
Dans le back office, la conception de la home s'effectue depuis la vue mobile. Imaginez votre home comme un bandeau vertical de hauteur variable. Ce bandeau est divisé en tranches horizontales. Chaque tranche contient un widget. La variété des widgets permet de rythmer la page.

Les templates associées aux widgets ont une déclinaison mobile, tablette et desktop. Lorsque vous ajoutez un widget à votre home, les vues qui correspondent à chaque taille d'écran sont déduites automatiquement. Cela n'empêche pas de vous laisser la main pour apporter des petits détails spécifiques à une taille d'écran.

Les widgets

Home modulaire
Les widgets sont organisés en 2 catégories. Les  widgets de contenu et les widgets de navigation.

Sur la page UI Index du portail GoodBarber, vous pouvez consulter les mockups de toutes les templates disponibles pour les widgets de navigation et pour les widgets de contenu relatifs à chaque type de section.

WIDGETS DE CONTENU

Les widgets de contenus s'utilisent pour afficher sur la home des items appartenant aux sections de l'application. Ils se déclinent en 3 familles.

- list : Le contenu est affiché sous forme de liste, avec possibilité de mettre en avant certains items (widget n°1 et n°6 dans l'exemple). Vous pouvez choisir d'afficher des items appartenant à une catégorie d'une section (le widget n°2 affiche les articles de la catégorie "Radar" de la section "News")

- banner : Ces widgets permettent d'optimiser l'utilisation de la surface utile de la home. La consultation du contenu s'effectue avec un scroll horizontal (widget n°3)

- highlight : Ce sont des widgets semi-dynamiques. La premier élément affiché est un lien vers la section, les éléments suivants sont des items appartenant à la section (widget n°5). Les options de tri pour afficher les items sont nombreux : par date, aléatoire, ordre alphabétique, ...

WIDGETS DE NAVIGATION

Ces widgets s'utilisent pour faire des liens vers des sections, déclencher des actions ou partir vers des urls externes. Ils sont organisés en 3 familles.

- list : le maximum de surface est utilisé par ces widgets. Les liens s'affichent sous forme de liste. Ils peuvent afficher un titre, un sous-titre, un bouton, des images ou des icônes, pour mettre en valeur l'action à effectuer (widget n°4 dans l'exemple).

- banner : la consultation des liens ajoutés dans ces widgets s'effectue par un scroll horizontal. Ils s'utilisent pour minimiser l'utilisation de l'espace. Titres, sous-titres, boutons, images et icônes sont également disponibles dans cette famille.

- remote : ces widgets permettent d'afficher jusqu'à 6 liens, avec simplement un titre et une icône. Ils sont compacts et trouvent généralement leur place en bas de la home, pour servir de footer.

La home modulaire de GoodBarber 4.0 vous permet de valoriser au maximum le trafic capté dès l'ouverture de votre app. En combinant widgets de contenus et widgets de navigation, votre home devient unique. A vous maintenant de construire la meilleure expérience utilisateur dans votre app !

Bonus

Des infos complémentaires dans cette vidéo. Elle est sous-titrée en français.



Entrez votre adresse email