Aperçu du projet
Redesign d’une application web d’ebooks.
Contexte
« Vivlio est une plateforme de lecture numérique populaire, mais son application de bureau actuelle souffre d’une interface datée et peu intuitive. Ce projet de redesign UX/UI vise à moderniser l’application et à améliorer l’expérience utilisateur globale, en mettant l’accent sur la simplicité, la clarté et l’esthétique, sans oublier l’accessibilité. »
Quand était-ce ?
Janvier 2025 (défi New Year)
Mon rôle
conceptrice d’expérience
UX/UI Designer
Les défis du projet
- redéfinir une identité graphique plus moderne à partir d’un logo existant
- proposer un concept accessible aussi bien en light mode qu’en dark mode
- conserver une partie de l’existant afin de ne pas perdre les utilisateurs
- réorganiser les fonctionnalités existantes tout en ajoutant celles demandées par les utilisateurs
Mes solutions
- adopter un design épuré et actuel
- simplifier la navigation, rendre les fonctionnalités clés plus accessibles et réduire la charge cognitive pour l’utilisateur
- offrir des options de filtrage et de tri claires, faciliter la gestion des collections et des listes de lecture
- proposer une barre d’outils de lecture personnalisable et des options de personnalisation enrichies
Responsabilité de conception
- concevoir une identité graphique (couleurs, fonts, icônes…)
- proposer des wireframes et maquettes
- respecter les normes RGAA d’accessibilité
Mon approche
Comprendre
Etape 1
- benchmarks
- étude ethnographique
Définir
Etape 2
- vision du produit
- cas d’utilisation
Diverger
Etape 3
- recherches de visuels
- wireframing low-fi
Décider
Etape 4
- choix d’une identité graphique
- wireframing mid-fi
Prototyper
Etape 5
- wireframing high-fi
- prototype figma
Comprendre
Etape 1
- benchmarks
- étude ethnographique
Définir
Etape 2
- vision du produit
- cas d’utilisation
Diverger
Etape 3
- recherches de visuels
- wireframing low-fi
Décider
Etape 4
- choix d’une identité graphique
- wireframing mid-fi
Prototyper
Etape 5
- wireframing high-fi
- prototype figma
Contexte et recherches
Dans mon entourage, nombreux sont les grands lecteurs. Par soucis de place la plupart ont également une liseuse. Pourtant, les plus anciens comme les plus jeunes ont noté de nombreuses différences dans les diverses liseuses et leurs outils, surtout les propriétaires de tablettes Vivlio.
Tous ces éléments sont reliés entre eux via un compte de lecteur auquel on peut accéder depuis plusieurs comptes dits « libraires ».
Vivlio et ses applications
- plusieurs liseuses différentes
- une application pour le web (my vivlio)
- une seconde application pour tablette et smartphone
Tous ces éléments sont reliés entre eux via un compte de lecteur auquel on peut accéder depuis plusieurs comptes dits « libraires ».
Si l’application mobile semble régulièrement mise à jour par souci de « mobile first », il ne faut pas en oublier l’application web. En effet, bon nombre de personnes refusent encore de faire des achats en ligne via un smartphone et préfèrent leur ordinateur pour cela. C’est notamment le cas des personnes plus âgées qui sont également les plus grands lecteurs…
Poblèmes et pistes de solutions
Une application web posant plusieurs problèmes
- navigation et organisation de la bibliothèque complexe
- barre de navigation contre-intuitive
- options de tri et filtrage réduite
- gestion des collections / « étagères » et listes de lecture non visible
- bibliothèque peu personnalisable
- obligation de passer par les filtres pour retrouver ses livres commencés et non terminés
- impossibilité d’avoir un synopsis de l’ouvrage avant de commencer sa lecture
- aucun visuel disponible pour savoir si le livre fait partie d’une série ou non
- aspect visuel et ergonomie complexes
- design manquant de cohérence et de modernité (nombreuses fonts et couleurs différentes sur des éléments similaires, etc.)
- site ne facilitant pas l’accessibilité web (contrastes des couleurs, navigation au clavier, etc.)
Décisions
Ma première décision a été de modifier la palette de couleurs en passant uniquement par des teintes bleues venant du bandeau de navigation de l’actuelle application. J’ai donc obtenu un dégradé de bleus permettant d’aller du noir au blanc, facilitant les possibles changements de light et dark mode, améliorant les contrastes pour l’accessibilité tout en gardant une certaine unicité.
Pour terminer la nouvelle charte graphique, j’ai également fait le choix de ne me baser que sur une seule font. En effet, l’application actuelle en compte au moins 3 différentes et certaines sont utilisées pour des éléments similaires ce qui peut perturber les utilisateurs. Avec une seule font et en utilisant une hiérarchie de tailles et épaisseurs différentes, la lecture des éléments est simplifiée et guide efficacement les utilisateurs naturellement.
Les cartes des différents ouvrages littéraires
Itérations
- première reprise des cartes existantes
- peu de lisibilité
- éléments repris trop imposants
- espacements restreints avec l’ajout partiel du synopsis
- accessibilité des paramètres restreints si la carte n’est pas déroulée
- erreurs de hiérarchisation des contenus cliquables
- itérations de cartes verticales
- difficulté à accéder aux paramètres de la carte
- genres littéraires peu visibles
- manque d’espace si les noms sont plus longs
Design final
- correction des problèmes d’accessibilité
- contraste des couleurs RGAA validé AAA
- espacement des différents éléments selon une grille
- options et synopsis bien distincts du reste du contenu
- nombreux ajouts
- lecture de synopsis au choix de l’utilisateur
- étiquettes représentant les genres littéraires des œuvres
- dans les options possibilité de modifier le contenu de la carte (nom du livre et auteurs si besoin, les étiquettes, modification de la jauge de lecture, etc.)
- animations du livre et hover du synopsis
L'organisation de la bibliothèque
Itérations
- interface qui change beaucoup de celle actuelle (peut perturber les visiteurs plus anciens si l’on masque le panneau latéral et ses options)
- option de recherche mise en haut du design, paraît trop petit et questionne sur son positionnement mais difficile de lui trouver un autre emplacement
- panneau d’options qui semble avoir peu de choix
- bouton primaire trop visible dans les options
- probable confusion de l’utilisation de switch pour un second niveau de tri dans les possibilités de trier par genre ou auteurs
- aucune solution sur que faire si trop d’options secondaires dans les noms d’auteurs ou de genres littéraires
- 3 ouvrages maximum lorsque le panneau latéral est ouvert contre 4 si le panneau est fermé, l’espacement entre les livres semble donc énorme
Design final
- interface plus proche de l’interface actuelle tout en la modernisant afin de pas trop perdre les utilisateurs
- barre de navigation plus claire (shop pour acheter de nouveaux livres, télécharger pour ajouter de nouveaux livres, synchroniser pour avoir ses livres sur tous ses appareils, options pour trouver les options de la bibliothèque ainsi que son compte)
- ajout de la partie « lecture en cours » pour retrouver plus rapidement ses ouvrages commencés
- zone de recherche dans la partie bibliothèque complète
- tab bar avec les différentes options de tri et possibilité d’inverser l’ordre de tri ainsi qu’ajouter une catégorie de tri
- on peut également imaginer qu’au choix de genre ou auteur on puisse avoir les différents ouvrages rangés par ordre alphabétique avec option de masquage des diverses sous-catégories pour gagner en simplicité
- bouton d’ajout de catégorie en secondaire afin de ne pas obnubiler la vue des utilisateurs
Résultat final
Réflexions et résultats
Ne pas avoir peur d'itérer
Se concentrer sur une conception spécifique peut conduire à l’attachement, mais il est important de mettre de côté les coûts irrécupérables et d’itérer lorsque cela est nécessaire pour construire quelque chose de formidable.
L'impact de l'esthétique
La modernisation passe souvent par la simplification, la clarté et l’adoption de standards de design actuels. Supprimer les éléments superflus, utiliser des espaces blancs généreux, privilégier la clarté visuelle améliore considérablement l’expérience utilisateur.
Les fondamentaux de l'ergonomie restent la clé
Une navigation claire et logique est essentielle pour que l’utilisateur se repère facilement dans l’application et trouve rapidement ce qu’il cherche. Des menus bien structurés, des icônes claires et des flux utilisateurs guidés sont indispensables. Il ne faut jamais négliger la hiérarchie visuelle et conserver de bons espacements pour guider ses utilisateurs. Penser à l’accessibilité dès la conception est crucial pour rendre l’application utilisable par le plus grand nombre, y compris les personnes ayant des besoins spécifiques.
