Image for post
Image for post

Wireframes & user-testing — TFE#5

Création de la démo de ma web application

Je vous invite à lire mon dernier rapport de TFE afin de mieux comprendre la suite de mes idées.

Maintenant que mon contenu et mes fonctionnalités ont été listés et classés ensemble, je me suis lancé dans la création de wireframes. Les wireframes vont me permettre de pouvoir créer une version draft de mon projet afin de pouvoir évaluer et visualiser ma futur web application. Cela me permettra également d’avoir un retour utilisateur qui me sera très bénéfique pour la suite de mon design process.

Créer des Esquisses

J’ai d’abord commencé à créer des brèves esquisses afin de projeter mes idées sur papier. Je préfère dessiner grossièrement d’abord pour ensuite mettre au propre sur mes futurs wireframes papier.

Voici quelques esquisses réalisées :

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Les différentes esquisses (Mobile — Tablette — Desktop)

Grâce à tout ces écrans dessinés vite fait, j’ai déjà pu avoir une idée de comment organiser mes éléments.

Création des wireframes

J’ai donc commencé à créer mes wireframes sur base de mes esquisses. J’ai décidé de tout créer sur ordinateur pour ensuite l’imprimer et découper mes différents écrans sur papier. C’est toujours plus propre et plus soigné.

J’ai donc commencé à créer tout dans sketch. J’ai réalisé les versions mobile, desktop ainsi que ma landing page.

Les écrans mobile

Voici un aperçu plus détaillé des wireframes mobiles.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Les wireframes mobile

Les écrans desktop/tablette

Voici un aperçu des wireframes. (Ici ce ne sont que les écrans principaux car certains éléments sont grandement modifié. Les autres écrans ce sera les mêmes mais en responsive).

Image for post
Image for post
Image for post
Image for post
Les wireframes desktop/tablette

Imprimer les wireframes

Maintenant que mes wireframes ont été réalisé, il est temps pour moi de les imprimer et les découper pour faire tester mes prototypes à différentes personnes pour avoir un retour sur l’expérience utilisateur qui se verra être très bénéfique pour la suite de mon design process.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Wireframes imprimés sur papier (mobile et desktop/tablette)

User testing

Avant de faire tester, j’ai d’abord élaboré les objectifs à atteindre sur chaque prototype afin que les testeurs sachent ce qu’ils doivent faire.

Les objectifs

  • Créer un compte
  • Faire un dépôt d’argent et acheter du Bitcoin
  • Vendre du Bitcoin
  • Ecrire un post sur le fil d’actualité
  • Surfer sur une channel spécifique
  • Completer les données sur son profil
  • Faire un retrait d’argent sur son compte bancaire
  • Commenter un post
  • Envoyer de la crypto-monnaie

J’ai déjà fait faire le test à 5 personnes, et voici ce que j’ai pu constater en analysant leurs performances et leurs comportements de manière générale :

1La plupart des testeurs n’ont pas tout de suite compris que l’on pouvait cliquer sur les graphiques des cryptos sur la page d’accueil. Ils passent plutôt via “mes comptes” pour acheter de la crypto-monnaie.

Je dois trouver un moyen de les rendre plus affordant.

2 Les testeurs n’ont pas compris que le montant de l’argent présent sur la page d’accueil représente l’argent total de tous les portefeuilles confondus.

Je dois rajouter une petite phrase en dessous du genre “Solde total”.

3Une partie des testeurs n’ont pas compris le principe de channels et ce que cela permettait.

Je dois dans ce cas trouver un mot plus parleur que “chaine”.

4 Les testeurs n’ont pas compris ce qu’est l’adresse de reception quand on envoie une crypto-devise. Il s’agit en fait du destinataire.

Je vais donc rajouter des informations afin de ne pas se perdre. Je vais également rajouter des infos pour mon futur tutoriel qui se trouvera dans la partie “profil”.

5Les testeurs m’ont rappelé que c’était bien de mettre des timezones pour les graphiques détaillé du Bitcoin afin de pouvoir regarder les performances passées et de plus prêt.

Je vais rajouter une liste en dessous des graphiques détaillés avec “J”, “S”, “M”, “A” afin qu’on puisse regarder sur les différentes périodes.

6 Une partie des testeurs n’ont pas compris que on pouvait cliquer sur les notifications pour aller directement sur le post.

Je dois aussi rendre cela plus affordant.

7 Une partie des testeurs n’ont pas compris qu’ils devaient passer par le fil d’actualité pour écrire un post, ils passent plutôt par “profil”.

Je dois alors placer une icon “créer un post” dans l’onglet “profil”.

Globalement, les navigations se passe bien. Il s’agit ici des écrans principaux, il n’y a pas tous les “sous-écran” avec leurs fonctionnalités, comme par exemple le fait de pouvoir modifier le profil sur chaque rubrique, cela ferrait beaucoup trop d’écrans à tester.

Néanmoins je suis content des commentaires et je vais effectuer toutes les modifications nécessaire afin de rendre l’expérience au top. Je vais également continuer de faire du user-testing autour de moi avec beaucoup plus de personnes. Il est important de bien scruter chaque point de la plate-forme.

Toi aussi fait un test de mon prototype !

J’ai réunis tous mes écrans sur InVision, donc tu peux aller tester ma version brouillon dessus ! N’hésite pas à me partager tes commentaires après ton test cela me serait super utile ! N’oublie néanmoins pas que tous les sous-écrans ne sont pas tous présent ainsi que leurs fonctionnalités. Il n’y a ici que les écrans principaux de l’architecture de mon information.

https://invis.io/KQGJ20S2JBZ#/287146386_Web_Application_-_Mobile_-_Connexion_Copy_12

Une fois que mes tests et analyses seront terminées, je m’attaquerai aux visuels de ma web application dans mon prochain articles médium. Je présenterai aussi mes choix de couleurs, mes typos et toust le UI design.

Roadmap

Pour me suivre sur les réseaux sociaux c’est par ici ↓

Written by

UX/UI Designer. Based in Brussels, Bel. I like crafting digital stuff & beautiful user experiences. Also Science thinker in my free time. Twitter : @S_Seghers

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store