Nouveau projet de conception de l’interface d’un site d’une agence fictive avec un objectif personnel : réaliser les interfaces mobile et desktop dans un temps court. Ceci pour permettre de faire évoluer l’approche de conception des UI, de pouvoir tester rapidement les hypothèses, les rendus et s'amuser un peu 😉
Tout comme pour le projet précédent, OAK, j'ai souhaité créer une identité pour ce nouveau projet dans le but de d'aller plus loin que la partie UI et pour compléter l'ensemble. Quelques précisions sur le choix du nom :
Le jeu avec la lettre "b" renvoie aux 3 grands piliers/expertises que sont : l’UX design, la stratégie digitale et la performance marketing.
Le symbole infini symbolise quant à lui les échanges en continu, le cycle itératif, la méthode agile.
La légère inclinaison évoque plus légèrement l’évolution ainsi que le dynamisme, un peu comme le conduit de la cheminée du volcan, quelque chose qui crée du mouvement.
La typographie sans empattements a été créée sur la base du rond pour créer un logo simple et pour faciliter la lecture. La couleur bleue a été choisie pour exprimer la fraîcheur, la lumière bleue des écrans, notamment avec l'association du blanc et gris clair.
“Est-ce que vous travaillez mobile first ?”, une des questions que j’entends régulièrement lors d’échange avec des clients qui souhaitent être rassurés sur la bonne prise en compte des smartphones dans la conception des interfaces.
Ce n’est pas une nouveauté, mais il est vrai que ce terminal est souvent mis de côté au profit d’une intégration responsive “basique”, les éléments s’affichant les uns sous les autres en une colonne par exemple, avec un menu burger à gauche ou à droite.
Néanmoins, il est nécessaire d’apporter une réflexion particulière autour du mobile et surtout de son usage par les utilisateurs.
Il nous accompagne partout, chez nous, dans les transports, dans la rue, au travail, etc. la diversité des environnements doit être intégrée à la conception.
En effet, à la différence d’un ordinateur que les utilisateurs consultent dans un cadre souvent plus adapté, le mobile se trouve dans notre poche et nous l’utilisons quel que soit le type d’environnement et ce qui le compose (sources de lumière, de bruit).
C’est en prenant en compte ces conditions plus contraignantes qu’il est important d’optimiser l’interface, sans oublier la partie technique (temps de chargement par exemple).
Le principal point d’attention dans le contexte de projet a été la prise de rendez-vous sur mobile, ceci pour proposer un checkout optimisé depuis le choix du contexte à celui du jour et de l’heure, jusqu’à la complétion des coordonnées et l’écran de confirmation.
Je crois que les conventions ne doivent pas brider la conception dans son ensemble. C’est en respectant aussi les lois de la Gestalt, telle que l’appartenance ou encore la similitude entre les éléments, que l’on peut proposer une structure équilibrée, cohérente, visuellement différente tout en apportant des fonctionnalités qui peuvent faciliter la navigation des utilisateurs en fonction des objectifs de la marque.
Le principe des 12 colonnes a été ainsi conservé pour délimiter le cadre du contenu à l’intérieur duquel les éléments ont été positionnés pour mettre en avant les textes et les visuels (photos, vidéos).
C’est pourquoi certaines sections sont volontairement axées sur l’image, afin de mettre en avant l’agence et l’Humain. Ceci pour inviter les utilisateurs à découvrir l’univers et leur dire : “nous vous présentons notre cadre de travail, venez nous rencontrer pour échanger sur votre projet, nous serons ravis de vous accueillir”.
Les espaces de respiration sont importants pour laisser les yeux se poser sur un message à la fois et éviter une charge cognitive trop forte, une sensation d’oppression.
Test de navigation entre les catégories depuis la page de présentation, pour essayer de proposer une autre façon (secondaire) de naviguer. Au clic sur l'élément sous le titre, dézoome via une légère transition et possibilité de sélectionner sa grande catégorie.
Visuellement, j’ai choisi la typographie Eina qui offre plusieurs niveaux de graisse et un lettrage adapté aux différents terminaux, plutôt arrondi ce qui permet de faire le lien avec le logo “kibo”. Précision sur les visuels, ils sont issus de la banque d’images gratuites et libres de droits Unsplash et proviennent de la collection de Jud Mackrill.
