L'application AlloCiné est la marque référence pour la recherche de séance de cinéma en France. Sa base de données est extrêmement riche avec plus de 125 000 films, 7 000 séries, 1 900 salles de cinéma...
L'objectif est de proposer une refonte de l'application afin qu'elle soit dans les tendances design UX/UI du moment. Pour cela, nous avons proposé des fonctionnalités UX et des changements UI qui suivent les tendances mobiles 2020.
CLIENT
Webedia
ROLE
Directeur Artistique
LOCALISATION
Levallois-Perret
Méthodologie UX
Personas
Tout d'abord, nous avons conçu des personas pour définir notre segment d'utilisateurs. Nous nous sommes basé sur des rapports analytiques et une base de données clients. Nous avons par exemple déterminé l'âge, le sexe ou les centres d'intérêts des utilisateurs pour définir les personas.
Workshops
Par la suite , nous avons organisé de nombreux ateliers UX. L'objectif étant de formaliser les exigences du produit, identifier les problèmes et les besoins utilisateurs.
Nous avons, par exemple, mis en place un système de recommandation personnalisé permettant d'évaluer le degré d'affinité de l'utilisateur avec des films ou des séries. La notation des utilisateurs permet à la base de données de déterminer si il aimera ou non un autre film qu'il n'a pas encore vu.
User Flow
Ensuite, en prenant en compte les informations récoltées lors de notre benchmark et celles que nous avons recueillies lors de nos ateliers, nous avons mis en place un user flow.
Le User Flow nous a permis de concevoir nos parcours génériques et de comprendre l'expérience de l'utilisateur ainsi que ses interactions dans l'application.
Wireframes
L'étape des wireframes est nécessaire dans le processus de création car elle nous permet de rédiger et de créer rapidement des éléments graphiques. Cette méthode était parfaite pour valider les maquettes fonctionnelles avec l'équipe commerciale et l'équipe dev.
Design System
Le Design System peut s'apparenter à un guide de conception. Il regroupe les lignes directrices, le langage et une bibliothèque nomenclaturée en une sorte de charte globale. Le Design System est un outil essentiel pour le design et le développement de l'application.
Le contenu d'une interface Design System dépend alors de l'identité, de l'écosystème digital et de la vocation d'une entreprise donnée. On y retrouve toutefois les caractéristiques communes comme les patterns et les composantes UI, la typographie, les couleurs, l'imagerie et l'iconographie.
Couleurs
#FFCC00
#2F2E2E
Typographies
Aa
Montserrat
abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789
Aa
Roboto
abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789
Tendances UX/UI
Bottom Nav et Tab Bar
L'iPhone original avait un écran de 3,5 pouces. L'iPhone 12 dispose d'un écran de 6,1 pouces. Les grands écrans éloignent les éléments interactifs du mouvement naturel du pouce. Les éléments de l'interface utilisateur qui étaient historiquement placés en haut de l'écran ne sont plus accessibles, ce qui conduit à de nouvelles alternatives de navigation.
Comme il est de plus en plus difficile d'atteindre le haut de l'écran, les boutons de navigation se trouve de plus en plus sur le bas de l'écran.
AVANT
ZONE DU POUCE
APRES
Animations et micro-interactions
Les animations sont un moyen efficaces de capter l'attention des utilisateurs et les inciter à s'engager avec un produit. Que ce soit pour donner de la vie à des boutons, à des icônes, des illustrations, des images... les animations rendent en général les interfaces plus attrayantes.
Les micro-interactions ont pour objectif de rendre l’UX plus efficace. C’est le cas lorsque l’on utilise des micros animations pour informer l’utilisateur que la page est en train de charger. Cela permet donc de donner un retour visuel à l’utilisateur afin de lui faire savoir ou il en est dans sa navigation et de rendre l’interface plus intuitive. La micro-interaction est le détail qui va créer de l’émotion chez l’utilisateur, améliorer son expérience en apportant plus de vie aux interfaces.
Dark Mode
Le dark mode apporte plusieurs bénéfices :
-
Il aide à la lisibilité car les couleurs plus sombres aide à alléger la fatigue des yeux, notamment le soir.
-
La lumière blanche a tendance à consommer de la batterie. Avec le dark mode, les couleurs sombres sont dominantes ce qui aide à l’économiser.
-
Il apporte des bienfaits esthétiques et designs, car un bon nombre d'utilisateurs préfère les couleurs sombres.
-
Proposer une version sombre à un produit permet de donner à l'utilisateur un choix de personnalisation, qui est un point-clé de l'expérience utilisateur.
Maquettes
