Introduction
On dit souvent que le manque ne vient pas du fait d’avoir des idées, mais de la conviction de les réaliser. Je m’identifie assez bien à un tel constat les ami(e)s codeurs. À plusieurs reprises déjà au sein de mon parcours d’apprentissage du développement web et de la programmation, des projets se sont vu avorté avant leur fin.
Et si ce n’est pas toujours le cas, une majorité de ces arrêts prématurés réside dans un blocage bel et bien précis : le design.
Le développeur que je suis aujourd’hui vient d’une formation autodidacte pour maîtriser l’intégration web (Un bien grand mot) et d’un bootcamp de quelques mois chez O’Clock pour acquérir les bases du développement web et du langage de programmation qu’est Javascript. Je n’ai effectivement jamais traversé de notion de design web durant mon parcours. Par ailleurs, mon travail résolument tourné vers du développement back-end ne m’a pas non plus permis d’aborder ce sujet.
Mais je suis un homme qui aime l’expérimentation. C’est pourquoi, sur un coup de tête, je me suis lancé dans la tentative d’élaboration d’un design d’une application web Pokedex-like. Un classique, mais que j’ai cherché à réinventer à ma manière, avec ma fibre artistique à moi les ami(e)s codeurs.
Objectif
Mon idée de départ est simpliste: créer un Pokedex. En d’autres termes, une base de données de l’ensemble des Pokemon existants, accessible et lisible afin de retrouver des informations au sujet de chacun d’entre eux.
Au travers d’un tel constat, plusieurs composantes essentielles me sont apparus intéressantes à prendre en compte dans ma réflexion de design :
- Lors de l’arrivée initiale sur l’application web, j’aimerais ne pas avoir une page de Pokemon affichée directement mais plutôt une page d’accueil.
- L’utilisateur doit pouvoir accéder à une liste des Pokemon claire permettant de cibler celui voulu avec facilité.
- La liste de l’ensemble des Pokemon est conséquente. L’utilisateur doit pouvoir faciliter sa recherche d’un Pokemon précis sans avoir à parcourir l’ensemble des Pokemon de la liste un à un.
- La lecture des informations d’un Pokemon doit être agréable à l’oeil de l’utilisateur. Il doit pouvoir trouver l’information qu’il souhaite sans aucune difficulté.
C’est en se basant sur ces élements de réflexion qu’à alors débuter l’élaboration du design de mon application. Pour ce faire, je me suis muni de l’outil Whimsical pour démarrer une première ébauche. Par ailleurs, je sais que ce n’est pas forcément une pratique de bon augure pour la suite mais je me suis actuellement concentré sur une version ordinateur et n’ai pour l’instant pas réfléchi du tout à une implémentation mobile.
Page d’accueil
Parfois, le moins est l’arme principale d’un bon design les ami(e)s codeurs. Ou du moins prenez cela avec des pincettes car cette règle est tiré de ma propre conclusion, moi, grand gourou du design web. Ainsi, je me suis décidé de mon propre chef à appliquer ce commandement au sein de la page d’accueil de mon Pokedex-like.
Peu de fioritures ici, l’idée est d’aller droit au but. De faire comprendre directement à l’utilisateur où il met les pieds.
Cet objectif me paraît rempli à travers l’insertion d’une image, soit prenant la totalité de la page web, soit s’incorporant à une page de fond, celle-ci rappelant l’univers Pokemon.
Par ailleurs, l’ajout d’un titre et d’une phrase d’accroche ne pourront qu’apporter encore plus de précision sur l’objectif de l’application. On veillera cependant à essayer de sortir des sentiers battus pour ne pas s’en tenir au simple “Pokedex” qui m’apparaît peu attrayant bien que terriblement parlant.
Enfin, l’ajout d’un résumé des fonctionnalités du site de manière accrocheuse terminera de détailler à l’utilisateur les utilisations qu’il va pouvoir faire de ce Pokedex-like. Celles-ci devront être accrocheuses, mettre en avant la vraie résolution de besoins existants.
Listes & Options
Mon image de cette application se veut comme un utilitaire, un outil. Et en ce sens, je ne la vois pas comme quelque chose au sein duquel il faudrait naviguer de page en page tel Wikipedia mais au contraire comme un environnement dans lequel les fonctionnalités serait toutes regroupées et utilisable au même endroit.
C’est pour cela qu’il existe une barre de navigation et c’est pour cela que lors d’un clic sur une icône de celle-ci, l’utilisateur ne sera pas redirigé vers une nouvelle page mais se verra ouvrir une barre verticale. Au sein de celle-ci il trouvera alors la liste des Pokemon ainsi que diverses options.
Le détail d’un Pokemon se fera au sein d’une page dédiée à chacun d’entre eux. Ainsi, la liste n’a pas vocation à mettre en avant une grande majorité d’informations. Simplement le minimum nécessaire pour permettre à l’utilisateur de déterminer efficacement sa cible. Ainsi, une image suffisamment visible et le nom sont pour moi suffisante pour répondre à un tel besoin. A des fins de possible besoin, je me suis permis de rajouter également le numéro du Pokemon ainsi que les types qui le définisse. Ces derniers étant listés sous forme de logo, j’estime nécessaire d’afficher en toute lettre ces derniers lorsque l’utilisateur passe son curseur dessus.
Le tri. Ce fut pour moi une vraie question. Non pas en terme de design, mais bel et bien en terme de besoin. Est-ce vraiment nécessaire ? En me mettant à la place du dresseur, j’en suis arrivé à la conclusion que j’aimerais effectivement avoir la possibilité d’utiliser des fonctions de tri en fonction de certains critères : les caractéristiques des Pokemon. Ici peut d’originalité en terme de design car ca ne me paraît nullement nécessaire de partir dans l’extravagant.
Une liste déroulante s’ouvre pour choisir l’une des caractéristiques dès lors qu’un clic sur la mention “trier par” est réalisé (le bouton associé changeant de sens). Dès qu’une caractéristique est cliqué, elle passe en surbrillance avec un logo de validation pour confirmer l’activation du choix à l’utilisateur.
Par défaut, j’estime que la logique veut que l’on affiche les Pokemon en fonction de la caractéristique choisie dans l’ordre de ceux ayant la plus grande valeur à la plus basse mais peut être que je me trompe. Dans tous les cas, j’ai préféré insérer un bouton permettant d’inverser le sens de tri pour switcher facilement d’un ordre croissant à un ordre décroissant.
Une des composantes qui m’apparaît également importante pour ne pas avoir à lire une liste de nombreux Pokemon si l’on recherche un Pokemon en particulier réside dans les options de filtre. C’est également une option intéressante si l’on souhaite rechercher au sein d’une catégorie particulière de Pokemon.
J’avoue ne pas avoir encore ciblé très précisément les élements de filtre cohérent pour l’utilisateur. Les types m’apparaissent comme une évidence. Derrière, je n’ai implémenter les autres qu’à titre d’exemple.
J’aimerais vraiment que les clics de sélection et de désélection de chacun des filtres mettent à jour dynamiquement la liste de Pokemon. Cela m’apparaît effectivement comme une mauvaise expérience utilisateur de devoir à chaque fois cliquer sur un bouton de validation pour mettre à jour cette dernière. De plus, l’utilisateur doit pouvoir selon moi avoir le choix de sélectionner plusieurs filtres en même temps pour obtenir une liste de Pokemon au plus près de ses envies.
Enfin pour rester sur le sujet de la mise à jour dynamique de la liste Pokemon, j’aimerais implémenter une barre de recherche où chaque caractère entré impacte la liste, permettant à l’utilisateur de ne pas avoir à entrer l’ensemble du nom du Pokemon si il n’a par exemple qu’un souvenir eloigné du nom de celui-ci. J’aime l’idée du petit placeholder au sein de la barre lorsque rien n’est entré dedans pour mettre en avant la fonctionnalité de celle-ci.
Détails Pokemon
La page par excellence de mon application Pokedex-like, le but majeur de celle-ci. Elle doit être à la fois attrayante tout en permettant de fournir les informations nécessaires à l’utilisateur.
Pour ce faire, j’aime à diviser la page en deux.
Une partie supérieure chargée d’offrir une vraie illustration du Pokemon. Ma conception n’est pas encore bien précise, mais j’imagine forcément une illustration du Pokemon au centre de celle-ci. Je pense qu’il serait également attrayant de changer la couleur de fond en fonction du type principal du Pokemon avec également le logo de ce type en transparence dans une variante plus clair de la couleur. Enfin le nom et le numéro du Pokemon pourrait également apparaître sur cette partie supérieure. Cela fait peut être trop d’élements sur une seule section. J’aviserais en fonction du rendu dans mes réflexions de design plus poussées. L’utilisation d’une certaine superposition entre les élements peut également être une solution.
A travers cette partie supérieure, l’utilisateur doit pouvoir également avoir accès a des boutons gauche et droite de chaque part horizontale pour switcher entre les Pokemon suivant et précédent de la liste. Est-ce que ce switch doit prendre en compte la liste filtrer et sauter les Pokemon qui ne sont plus dans la liste ou toujours suivre simplement l’ordre des numéro basique malgré les filtres ? Question encore à débattre, même si ma préférence va a la première option.
Une partie inférieure existe également. C’est au sein de celle-ci que l’on retrouve des informations plus détaillées. La description du Pokemon, son ou ses types s’ils sont multiples, une carte d’identité contenant de multiples informations annexes. Tout ne doit pas être graphique selon moi, et ces informations seront basiquement renvoyés textuellement sans pour autant dénaturer le design de l’application selon moi.
En ce qui concerne les statistiques de base du Pokemon, mon attrait pour les jeux vidéos ont refait surface. Tel un jeu de combat, elles seront représentés par des barres horizontales dont la longueur respective dépendra de la valeur du Pokemon dans chacune des caractéristiques.
Enfin, je pense qu’il peut être intéressant de pouvoir d’un simple clic être redirigés directement vers les éventuelles évolutions précédentes et suivante du Pokemon.
Conclusion
Je n’ai pour l’instant effectué qu’une réflexion très sommaire en terme de design de mon application web de Pokedex-like les ami(e)s codeurs, et pourtant déjà ce squelette m’a poussé à avoir des pensées annexes sur de nombreux sujets tels que les besoins utilisateurs, sa facilité et son confort d’utilisation de l’application.
Je pense que c’est en cela que le design est un sujet à part qui demande un vrai apprentissage, car il ne consiste pas simplement à poser des blocs à droite à gauche sur une page blanche ne serait-ce qu’à une telle étape de squelette.
A la vue de mes croquis, je suis cependant plutôt satisfait de ce premier rendu même si je pense que je passe au travers de potentielles fonctionnalités ou informations intéressante qui nécessiterait d’être implémenter sur une telle application.
Lors d’un prochain article, j’entrerais dans les détails d’une implémentation plus détaillée du design de l’application. Ses couleurs, ses styles d’écriture, etc… En attendant, n’hésitez pas à me faire des retours sur Twitter, je suis preneur de tout conseils et avis les ami(e)s codeurs !
