Case study
Sur cette page, je vous explique quelles sont les difficultés que j'ai rencontrées durant la conception de ce travail de fin d'études et comment se sont déroulées les étapes de mon journal.
Voir mon journal1. Ma thématique
Dans la quinzaine de pistes que j’avais proposées, mes professeurs m'ont donné le choix parmi deux d'entre elles:
Ce qui arrive à nos téléphones une fois jetés.
L’utilisation de la tablette graphique.
Étant donné que je possède une tablette graphique et que j’adore tout simplement l’utiliser j’ai décidé de partir sur la deuxième thématique.
2. Le problème cible
La question qui me restait en tête dès l’instant où j’avais noté cette thématique est la suivant:
De quelle manière pourrais-je réussir à montrer aux nouveaux utilisateurs comment utiliser tout le potentiel de leur nouvel outil ?
Cette question m’est survenue lorsqu'une amie s’est mise à utiliser sa nouvelle tablette, elle perdait un temps considérable à cause de son ignorance par rapport à certaines fonctionnalités !
Alors comment faire en sorte de mettre toutes les cartes entre les mains de ces nouveaux utilisateurs ? Comment leurs faire voir tout le potentiel que cet outil leur met à disposition ?
Formulaire effectué pour le projet
3. Ma solution
Pour trouver une solution optimale, j’ai réalisé un formulaire qui m’a aidé à déterminer quels seraient les facteurs les plus et moins important pour composer ma solution. Quelques jours après sa mise en ligne, une cinquantaine de réponses sont arrivées, et c'est sur la base de ces réponses sont nés les facteurs primaires et secondaires.
Résultats du formulaire effectué pour le projet
4. Facteurs primaires de ma solution
Un total de 9 éléments c'est accumulé. Il fallait donc que me solution:
Soit fournie avec la tablette
S’adapte au modèle de la tablette
Présente et fasse connaître toutes les fonctionnalités de la tablette de l’utilisateur
Permette à l'utilisateur de tester toutes les fonctionnalités de sa tablette
Aide l’utilisateur à configurer sa tablette
Laisse l’utilisateur apprendre par lui-même
Montre l’utilité de faire varier son trait en dessinant
Vous oriente vers les bons programmes
Vous pouvez voir ce qu'apporte chaque facteur à ma solution en cliquant ici.
Premiers wireframes de Handist
5. Développement de ma solution
Au départ, j’étais persuadé que mon idée allait évoluer vers un site internet visant à enseigner aux utilisateurs à utiliser leur tablette graphique, mais grâce aux résultats du formulaire une idée bien meilleure s’est dévellopée. Je pensais de plus en plus à sortir du format “site internet” et à me diriger vers quelque chose de local, quelque chose qui faudrait installer.
En la développant, cette idée est devenue une sorte de widget mettant à disposition les descriptions et paramètres de chaque fonctionnalité de la tablette en deux clicks à peine. De plus en plus, l’idée à évolué vers une solution à court terme: un outil auquel l'utilisateur ne ferait appel que durant ses premières heures d’utilisation de l’outil.
Évolution et résultat final
6. Users testings et wireframes
Ma solution étant en place je pouvais désormais me mettre à lui donner une forme visuelle. Par chance, l’étape précédente m’a permis d’en avoir une idée relativement bonne, dès le début.
Les résultats des users testings effectués ont démontré qu’il ne s’agissait pas d’une mauvaise solution, mais elle pouvait cependant être améliorée à certains niveaux. Par exemple, la navigation, qui a subi quelques changements, notamment au niveau de la manière dont étaient présentés les onglets. Désormais, «informations» et «paramètres» laissent place à «tablette» et «stylet», et «paramètre» est alors accessible via chacune des fiches de fonctionnalités.
Vous pouvez accéder à la version finale de Handist pour Mobile ici, et la version finale de Handist pour ordinateur ici.
Exemple de pictogramme
7. Design
Encore une fois, je savais déjà vers quoi me diriger et je n’ai pas pris énormément de temps à l’obtenir. Voici un pictogramme qui m’aidera à vous expliquer les piliers du visuel et du contenu de mon site:
Ponctuel: apporté le texte, certains angles plus pointus des pictogrammes, les couleurs et la typographie relativement droite.
Amical: apporté par l’aspect fort rond des pictogrammes, les couleurs et le texte.
Direct: présente et donne les informations recherchées sans dialogue superflu. Cette règle s'applique également au niveau du design général, il faut donc éviter d'afficher trop de petites décorations superflues.
Bleu: évoque la confiance et le calme.
Orange: évoque l’investissement et le dynamisme, utilisée pour montrer une interaction possible.
Noir: il doit légèrement partir vers l'une des couleurs principales. Dans ce cas il s'agit donc d'un noir bleuté.
Blanc: même règle que pour le noir, la seule différence étant que cette couleur est moins utilisée.
Un blanc pur: utilisé comme couleur de fond principale du site.
Apparence très arrondie pour l’aspect amical du Voice&Tone.
Certains aplats de couleurs doivent s'intersecter avec un aplat blanc, et seul l'ensemble qu'ils forment peut être arrondi (exemple: la tablette).
Un contraste de couleurs élevé pour l'esthétique et apporter plus de dynamisme.
L'utilisation d'ombres portées très légères dans le cas où une forme passe par dessus une autre de la même couleur.
Pictogramme extrait de la première page du site
8. Évolution des pictogrammes
Les pictogrammes jouent un grand rôle dans mon design, il s'agit même des seuls réels éléments graphiques de mon site.
Ils sont passés par deux phases d'évolutions:
Dans la première, vous observerez que les tonalités sont beaucoup plus sombres et que ce qu'ils représentent est moins figuratif du contenu
Dans la deuxième, les tonalités sont désormais plus claires et les pictogramme accompagnent mieux le contenu.
« Un logiciel répondant à vos besoins »
« Les bonnes habitudes »
« Ce qu'offre Handist »
9. Contenu
Un premier jet de contenu s’est fait bien avant le Voice&Tone, mais là était le problème: il ne prenait pas compte du Voice&Tone… C’est en construisant petit à petit mes wireframes et le design que le contenu est arrivé.
10. Code du site
Html codé sans difficultés, css appliqué presque sans difficultés, et javascript construit avec (étonnement) peu de difficultés. J’étais très très peu confiant en ce qui concerne le javascript de mon site internet, mais après l’atelier scolaire «DataPlay» c’est devenu un langage de programmation soudainement très compréhensible ! Ceci mis à part, les seules difficultés rencontrées en CSS concernaient le formulaire triant les logiciels à la page «Logiciels conseillés». Jusqu’à aujourd’hui je n'avais fait le css que de très peu de formulaires, et celui-ci, étant en plus dépliant, ne m’a pas facilité la tâche.