Design web & mobile

Pray

ETUDE DE CAS – Pray (Web Application).

Adapter et améliorer l’experience

Reboot Factory est le nom du projet que nous, étudiants, avons dû réaliser pour le cours de Web et multimédia (DWM) à la HEAJ. Par groupe de 4, nous nous sommes concertés afin de créer une application web de façon à améliorer l’expérience utilisateur dans un domaine qui nous donnaient envie, envie d’apporter une solution au besoin des autres.

Chercher, définir, tester

Notre premier grand défi a été de trouver un besoin utilisateur et d’y apporter une valeur.
Une tâche qui s’est avéré difficile à maîtriser et qui a donné suite à de nombreuses concertations et débats entre nous.

Nous avons établi des phases clées comportant plusieurs étapes à suivre afin d’organiser une structure et ainsi trouver des idées.

Une des étapes importante a été l’écriture sur Post-it. Nous avons écrit chacune de nos idées individuellement. D’un premier point de vue, cela semble anodin mais il est important de noter tout ce qui nous passe par la tête car le meilleur survient souvent de manière inconsciente.

Petit à petit, quelques idées communes ont fait leur apparition et nous avons décidé de s’accorder sur une d’entres-elles qui nous parlait le plus.

Le sujet était maintenant clé et le concret s’est peu à peu installé.

Penser à tout types d’utilisateurs

Nous avons ensuite créer des personnas de façon à nous éclairer. Telle est le nom qu’on donne à des personnages fictifs qui ont pour but de définir les principaux besoins de tous types d’utilisateurs. Il est important de cerner ce point car ce qui est inutile est inutile et par conséquent, ce n’est pas la peine d’y accorder de l’attention. Les personnas permettent d’éviter de créer du contenu et des fonctionnalitées non conformes.

Textualiser l’information

Il est avant tout nécessaire d’établir le contenu textuel; également nommé “contenu brut”.
Celui-ci définit la base de notre application web, – car nous lisons le contenu et le contenu n’existerait pas sans lecture; du moins rationnellement. Il faut réfléchir au contenu et adapter celui-ci en fonction des utilisateurs. Il doit être le plus pertinent possible et être compréhensible pour tous rapidement car il s’agit d’une application mobile. Il faut hiérarchiser l’information. Nous avons donc réfléchi sur notre contenu et nous l’avons travaillé pour qu’il devienne de l’adaptive content.

Elaborer un plan d’action

Suite à ces étapes et recherches, nous avons décidé d’aborder les wireframes papier. Ces “brouillons” représentent le plan de construction du projet, son squelette..Les éléments dessinés traduisent une fonctionnalité et sont regroupés dans des sections qui ensuite forment une architecture de l’information. Il est éssentiel de faire plusieurs tests de manière à avoir une représentation globale et un première aperçu de notre application. Cela permet également de différencier le mauvais contenu du contenu pertinent.

Tester pour adapter

Suite à cela, nous avons testé nos wireframes grâce à la méthode du prototyping qui consiste à simuler une utilisation de notre application web au moyen des divers papiers représentant les diverses pages et fonctionnalitées. Le test est éffectué par des personnes extérieures de manière à avoir les premiers feedbacks. Ce procédé nous a été très utile et nous a permi de comprendre comment améliorer l’utilisation de notre application.

Composer une structure

Une fois la structure validée et les wireframes testés, nous nous sommes tourné vers la charte graphique. Il est essentiel de créer une palette de couleurs fixes de façon à garder une cohérence visuelle. Nous avons longuement cherché et nous nous sommes mis d’accord sur 6 couleurs de base. Ces couleurs sont utilisées pour le site et l’application.

Construire pour l’utilisateur

Notre deuxième plus grand défi a été de concevoir un visuel. Nous avons mis au point plusieurs visuels individuellement et nous nous sommes concerté ensuite afin d’élaborer un visuel strict. La difficulté a été dans le fait que chacun proposait des styles différents et très intéressant à la fois. Nous avons gardé les meilleurs idées et écarté les moins bonnes pour finalement arriver sur des visuels bien plus pertinent.
Nous avons effectué quelques feedbacks et nous nous somme finalement rendu compte que l’interface ne s’accordait pas encore avec le contenu. Nous avons donc jugé utile de reprendre nos travaux depuis le début pour chercher ce qui n’allait pas.
Nous nous sommes concerté à nouveau pour repenser le visuel sur base de nos précédents prototypes et nous avons conclu qu’il était plus judicieux de concevoir l’application avec une interface plus sobre et plus claire sans aller trop dans les détails.

Intégrer et visualiser

Une fois tout en place et validé, nous avons procédé à l’intégration de notre application web en HTML & CSS. Nous avons également rajouté des animations JavaScript de manière à la rendre parfaitement interactive. Cela n’a pas été facile car les interactions doivent être le plus naturel possible afin d’optimiser l’expérience de l’utilisateur sur notre application. Nous y sommes parvenu en vain à placer et coder tout nos éléments.

Adapter à tout types d’écrans

Nous avons ensuite pris le temps de tester notre application sur différents formats d’écrans mobiles de façon à adapter celui-ci. Il est aujourd’hui important de répondre à la demande des utilisateurs de smartphones. Autrement dit, il faut que notre application web soit entièrement responsive.

     Projet au hasard