Créer un wireframe avec

Balsamiq

Tous droits réservés à STUDI - Reproduction interdite

 Table des matières

Table des matières

I. Contexte 3

II. Découverte de l'interface 3

III. Exercice : Appliquer la notion 9

IV. Créer son premier modèle de conception 9

V. Exercice : Appliquer la notion 20

VI. Essentiel 21

VII. Auto-évaluation 21
A. Exercice final ...............................................................................................................................................................21
B. Exercice : Défi ..............................................................................................................................................................22

Solutions des exercices 23

2 Tous droits réservés à STUDI - Reproduction interdite

I. Contexte
Durée : 1h
Environnement de travail : Balsamiq Mockup 3 ou Balsamiq Cloud

Contexte
Balsamiq wireframe est un outil de création d'interfaces graphiques fréquemment utilisé par les UX et UI
Designers, en phase d'idéation, pour concevoir des wireframes.
À travers ce cours vous allez apprendre à concevoir votre premier modèle filaire. Nous allons dans un premier
temps découvrir l'interface de l'outil et ses principales fonctionnalités. Nous poserons ensuite les premiers
éléments graphiques qui façonneront votre modèle de conception. Et pour finir nous découvrirons comment bâtir
une navigation entre chacun de vos wireframes. Nous aborderons, également, les formats d'exports disponibles

II. Découverte de l'interface

Objectifs
Découvrir l'interface de Balsamiq

Mise en situation
Balsamiq wireframes est un outil de conception d'interfaces graphiques complet dont nous allons découvrir
l'interface pour en dégager les principales fonctionnalités.
 Découverte de l'interface

L'interface principale
Une fois Balsamiq wireframes téléchargé ici1 ou via l'interface web : https://balsamiq.com/buy/#cloud. L'écran
principal de l'application se présente sous la forme suivante :

Le canvas
Le canvas est la zone principale de l'outil dans laquelle vous allez positionnez vos composants graphiques.

La librairie de composants
La librairie de composants est un panneau, que vous pouvez ouvrir ou fermer, grâce à l'icône présente à droite,
dans la barre d'outils. Elle vous propose un certain nombre de contrôles préconçus que vous retrouvez dans les
applications et sites web. Ils sont classés par typologies de contenus : boutons, texte, formulaires, etc. Vous pouvez
placer ces composants dans le canvas central par simple glisser-déposer.

1 https://balsamiq.com/wireframes/desktop/

4 Tous droits réservés à STUDI - Reproduction interdite

Découverte de l'interface

Si les composants proposés par l'outil ne sont pas suffisants, vous pouvez également en importer en vous rendant
dans le menu Aide > Télécharger plus de contrôles... ou en les créant vous même à l'aide des
composants géométriques et autres icônes et symboles à votre disposition.

Le panneau de propriétés
Le panneau de propriétés est un panneau de paramétrages qui contient des actions communes (alignement,
superposition) et des propriétés spécifiques à chaque contrôle d'interface utilisateur. Il peut également être ouvert
ou fermé à l'aide de son icône associée, à droite dans la barre d'outils.

Tous droits réservés à STUDI - Reproduction interdite 5

 Découverte de l'interface

6 Tous droits réservés à STUDI - Reproduction interdite

Découverte de l'interface

Tous droits réservés à STUDI - Reproduction interdite 7

 Découverte de l'interface

Le panneau de navigation
Le panneau de navigation affiche l'ensemble des wireframes créés pour le projet et que vous pourrez lier plus tard
par un système de liens interactifs.

8 Tous droits réservés à STUDI - Reproduction interdite

Exercice : Appliquer la notionsolution

Syntaxe À retenir
Balsamiq wireframes présente une interface générale permettant d'accéder rapidement à la plupart de ses
fonctionnalités et centre son utilisation sur un espace graphique, le canvas, sur lequel il est possible d'ajouter
différents composants d'interface utilisateur. Ceux-ci peuvent être ajoutés directement depuis une librairie de
composants ou créés de toutes pièces. Chaque composant dispose de son propre menu de configuration et un
panneau de navigation permet de passer d'un wireframe à un autre au sein du projet.

Complément
https://balsamiq.com/wireframes/desktop/
https://balsamiq.com/buy/#cloud

Exercice : Appliquer la notion [solution n°1 p.25]

Exercice
Quel profils de métier utilisent l'outil Balsamiq pour concevoir un wireframe ?

 L'UI Designer

 Les développeurs

 L'UX Designer

 Le product owner

Exercice
Comment s'appelle la zone dans laquelle on place les éléments graphiques ?
 Cadenas

 Canvas

 Calebas

Exercice
Dans quel panneau peut on modifier les attributs d'un composant ?

 Panneau de propriétés

 Panneau de navigation

 Panneau de la librairie de composants graphiques

IV. Créer son premier modèle de conception

Objectifs
Apprendre à écrire un modèle de conception
Réaliser des wireframes interactifs

Tous droits réservés à STUDI - Reproduction interdite 9

 Créer son premier modèle de conception

Mise en situation
L'étape de création des wireframes est une étape primordiale qu'il ne faut pas délaisser car c'est une première
ébauche filaire de votre projet, qui va vous permettre de vous poser les bonnes questions : quels éléments dois-je
positionner dans la page ? où doivent-ils être placés ?
Créons aujourd'hui notre premier modèle de conception c'est-à-dire une architecture, une structure graphique qui
va répondre à un problème type et qui pourra être réutilisée comme base de réflexion pour un autre projet de
conception d'interface.

Les éléments d'un modèle de conception

À l'instar des scénarios, les modèles de conception sont généralement pré-rédigés comme une histoire décrivant les
éléments clés auxquels l'interface devra répondre.
Un modèle de conception peut se présenter sous la forme suivante :
Nom du modèle : Il doit être précis et spécifique.
Description : Décrit les éléments principaux attendus.
Problème : Décrit quand utiliser ce modèle.
Contexte d'utilisation : Décrit comment le problème est résolu et pourquoi ce modèle existe.
Solution : Explique d'une manière détaillée le fonctionnement attendu.
Recommandation : Liste les points conseillés pour améliorer le modèle.
Exemple : Présente un site de référence sur lequel s'appuyer.

Écriture des premières catégories d'un modèle de conception

Pour illustrer la constitution d'un modèle de conception nous prendrons l'exemple d'un site web d'un parc
d'attraction souhaitant offrir la possibilité à ses utilisateurs de consulter les offres d'entrées et d'acheter des billets
en ligne :
Nom du modèle : Tunnel d'achat d'un site de billetterie pour Parc de loisirs
Description : Le tunnel d'achat doit, en premier lieu, présenter l'offre de prix et afficher clairement un bouton
pour effectuer un achat en ligne. La seconde étape consiste, via ce bouton de réservation, à entamer le tunnel
d'achat jusqu'à la confirmation du paiement.
Problème : Les futurs visiteurs souhaitent acheter leurs billets en ligne.
Contexte d'utilisation : Ce parcours utilisateur est à utiliser quand les parcs de loisirs offrent la possibilité de
faire des réservations ou achats en ligne. Il est d'autant plus recommandé lorsque les contacts physiques sont
à limiter à l'extérieur et que la capacité d'accueil du parc est restreinte.

10 Tous droits réservés à STUDI - Reproduction interdite

Créer son premier modèle de conception

Écriture détaillée de la solution

La partie solution d'un modèle de conception nécessite une analyse précise des interactions souhaitées, illustrée si
possible par des exemples existants, nous nous contenterons ici de présenter la structure attendue jusqu'à la
constitution d'un panier d'achat par l'utilisateur :

Présentation des offres tarifaires et accès au bouton de

réservation : il existe différentes offres en fonction du profil des
visiteurs et des options de découvertes souhaitées. L'interface se
doit de les représenter par l'affichage de grilles tarifaires se
mettant à jour dynamiquement en fonction des options
sélectionnées. Une fois que le visiteur a cliqué sur le bouton
« Réserver », il est redirigé vers un nouvel onglet du navigateur (il
est important de préciser cela car dans l'interface présentée il
n'existe pas de fil dʼAriane ou breadcrumb pour retourner en
arrière et consulter la grille tarifaire).

Première étape du tunnel d'achat : cette nouvelle page se

présente comme un tunnel d'achat avec 4 étapes apparentes.
L'utilisateur a deux options à sélectionner :
1. La durée de sa visite :
Réserver un billet seul : visite d'une journée (option
sélectionnée par défaut, car la plus fréquemment
plébiscitée par les utilisateurs du site)
Réserver un séjour : billet d'entrée pour une journée +
hôtel
En fonction de cette première option, les tarifs des billets se
mettent à jour ainsi que les offres promotionnelles.
2. Les options de découverte et leur prix de départ :
Billet d'entrée uniquement
Billet d'entrée + cinéscénies
Billet cinéscénies uniquement
Une zone doit indiquer les moyens de paiement à distance pris
en charge par le site.

Dès que l'utilisateur aura sélectionné la durée de son séjour ainsi

que ses options de découverte, il avancera automatiquement à
l'étape 2 du tunnel d'achat. Cette étape est un formulaire à
compléter :
Le formulaire doit demander la durée de la visite et le
nombre d'entrées nécessaires en fonction du profil des
visiteurs.
Un bouton « Retour » doit permettre de revenir en arrière et
de modifier le choix de l'offre initiale.
Une zone dédiée doit présenter le contenu du panier et les
moyens de paiement autorisés.

Tous droits réservés à STUDI - Reproduction interdite 11

 Créer son premier modèle de conception

Un bouton « Continuer » doit pouvoir valider le formulaire

et passer à l'étape suivante.

Finalisation du modèle de conception

Recommandation : Le parc de loisir possède une renommée européenne, il serait donc judicieux de proposer une
traduction de l'interface en Anglais.
Par ailleurs ce site est accessible et en conformité pour l'accueil des personnes souffrant de handicap, notamment
auditif et visuel. Par conséquent une version « accessibilité web » du site doit être proposée dans l'interface.
Exemple cité : Site web du Puy du Fou

Conception du premier wireframe proposé dans la solution

Pour créer le premier mockup, commençons par ajouter dans le canevas, le composant Fenêtre de
navigation ou Browser que vous pouvez retrouver dans le groupe de composants Containers. Nous lui
fixerons les dimensions suivantes : 1024 x 768

Vous pouvez renseigner l'URL de votre site web en double cliquant sur le composant ou en appuyant sur Entrée
lorsque ce dernier est sélectionné. Cette action permet d'éditer le contenu textuel.
Continuez ensuite en ajoutant un titre, du texte, des boutons, des grilles et des images. Pour aller plus vite, vous
pouvez utiliser le champ de recherche situé à droite, dans la barre d'outils.

12 Tous droits réservés à STUDI - Reproduction interdite

Créer son premier modèle de conception

Pour modifier la taille du texte ou du composant, sélectionnez le contrôle et modifiez la taille de la police à l'aide de
l'inspecteur des propriétés.
Si vous avez besoin de faux contenu, balsamiq génère duLorem ipsum dans le mode édition de certains de ses
composants. Pour cela commencez à taper « lorem »

Tous droits réservés à STUDI - Reproduction interdite 13

 Créer son premier modèle de conception

Pour ajouter des icônes, il vous suffit de :

Chercher la représentation visuelle que vous souhaitez intégrer, depuis la librairie de composants, dans la
catégorie Icons,
Ou taper dans le champs de recherche, le label de l'icône,
Ou taper « icon » dans le champs de recherche, de le sélectionner puis dans le panneau de propriétés, de
rechercher l'icône la plus appropriée à votre besoin :

14 Tous droits réservés à STUDI - Reproduction interdite

Créer son premier modèle de conception

En cumulant tous ces éléments, le wireframe de la page de présentation des grilles tarifaires proposées dans la
solution du modèle de conception est le suivant :

Terminer votre wireframe en le nommant. Pour cela il vous suffit de double cliquer sur le nom du wireframe, dans le
panneau de navigation.

Conseil
Vos projets pouvant être exportés plus tard au format PNG, il est recommandé de préfixer ses wireframes par un
chiffre. Cela permettra un classement automatique de vos vues dans vos fichiers d'export.

Tous droits réservés à STUDI - Reproduction interdite 15

 Créer son premier modèle de conception

Création des wireframes suivants

Poursuivons la conception de nos wireframes avec la seconde étape proposée dans le modèle de conception, le
choix de l'offre dans la première partie du tunnel d'achat.
Pour cela ajoutez un wireframe en cliquant sur le bouton + , à gauche dans la barre d'outils.

Vous aurez surtout besoin de formes géométriques : shapes, rectangles, ainsi que de labels et de textes pour obtenir
le résultat attendu.

16 Tous droits réservés à STUDI - Reproduction interdite

Créer son premier modèle de conception

Pour finir, ajoutez et réalisez votre dernier wireframe avec les composants et informations nécessaires, à savoir des
boutons de formulaires, des labels et des images.

Tous droits réservés à STUDI - Reproduction interdite 17

 Créer son premier modèle de conception

Remarque
Il est très important de limiter l'usage de la couleur dans les wireframes et de ne mettre que les informations de
premier niveau en avant dans les maquettes.
Vous pouvez à la fois mettre du vrai contenu, si celui-ci est fixé et définitif, et du contenu générique s'il reste
incertain au niveau de sa formulation.

Gérer l'intéraction entre les wireframes

Vous venez de terminer votre structure filaire. Il s'agit désormais de les lier les unes aux autres via un système
d'interactions.
Positionnez vous sur votre premier wireframe, qui correspond à l'interface des offres tarifaires. Puis sélectionnez le
composant bouton Réserver.
Dans le panneau de propriétés des composants, vous pouvez voir une option links / Liens.

18 Tous droits réservés à STUDI - Reproduction interdite

Créer son premier modèle de conception

Ouvrez le menu déroulant de l'option et sélectionnez le nom de votre deuxième wireframe (ex :
2.Réservation_étape1).

Tous droits réservés à STUDI - Reproduction interdite 19

 Exercice : Appliquer la notion

Votre bouton affiche désormais une flèche rose qui indique qu'il est lié à un wireframe par un lien d'interaction :

Pour vérifier que celui-ci est bien effectif, passez votre espace de travail en mode « Présentation » grâce au menu
View > Full screen presentation ou CTRL + F.
Par défaut, un pointeur de souris apparaît dans l'interface quand vous vous déplacez. Dès qu'une interaction est
présente, la souris devient une main et indique le nom du wireframe vers lequel le composant redirige.
Cliquez sur le bouton Réserver. Vous devez être redirigé vers l'étape 1 du tunnel de réservation.
Faîtes de même avec les 2 wireframes suivantes : liez l'étape 1 et 2 du tunnel, entre elles, via les boutons qui le
permettent.
Maintenant que le projet de wireframes est terminé, vous pouvez l'exporter en :
PNG via le menu Projet > Export > All mockups to PNG
PDF via le menu Projet > Export to PDF

Syntaxe À retenir
La conception de wireframes passe par la définition préalable d'un modèle de conception qui décrit le plus
précisément possible les résultats attendus.
L'utilisation de Balsamiq Wireframe permet ensuite de réaliser un projet contenant les différents wireframes
représentant les interfaces et les interactions prévues dans le modèle de conception.

Complément
https://balsamiq.com/learn/resources/ui-control-guidelines/

V. Exercice : Appliquer la notion

Question [solution n°2 p.25]
Dans le cadre de la création d'un site web pour le parc d'attraction MyParc vous intervenez en tant que designer
UX/UI. Le Product Owner en charge de la gestion du projet vous a indiqué qu'une fonctionnalité de boutique en
ligne est prévue et souhaite que vous lui fassiez une proposition fonctionnelle graphique permettant de réaliser
cela.
Plusieurs catégories de produits sont prévues et il devra être possible de naviguer entre elles facilement.
Une page de détail d'un produit devra être proposée, elle contiendra une description du produit ainsi que ses
modalités de livraison.
L'utilisateur devra pouvoir ajouter autant de produits que souhaité dans un panier et accéder à un tunnel d'achat lui
permettant de saisir ses informations de livraison et de paiement.
Vous devez donc réaliser les maquettes en wireframe décrivant les fonctionnalités demandées.
Vous pouvez vous inspirer de mécanismes existants sur d'autre sites pour réaliser ces maquettes.

20 Tous droits réservés à STUDI - Reproduction interdite

Essentiel

Indice :
Vous pouvez vous inspirez des sites suivants :
amazon.fr
Decathlon.fr

VI. Essentiel

VII. Auto-évaluation
A. Exercice final
Exercice 1 [solution n°3 p.33]

Exercice
Quelle est l'utilité de l'application Balsamiq ?

 Elle permet de réaliser des maquettes au plus proche de la réalité en tenant compte de la charte graphique
souhaitée.

 Elle permet de réaliser des maquettes fonctionnelles sans tenir compte des contraintes graphiques.

Exercice
Qu'est ce qu'un modèle de conception ?
 Une description de la structure graphique qui va répondre à un problème donné.

 Une solution qui permet de définir une interface pour la création d'un objet.

 Un modèle d'analyse qui décrit de façon très détaillée la structure du système et la manière dont celui-ci sera
implémenté.

Exercice
Parmi ces propositions, quels éléments sont essentiels à la rédaction d'un modèle ?
 Solution

 Problème

 Adaptateur

 Description

 Conclusion

Exercice
Un wireframe doit être le plus fidèle possible, graphiquement, de la solution finale.
 Vrai

 Faux

Exercice

Tous droits réservés à STUDI - Reproduction interdite 21

 Auto-évaluation

C'est à l'étape de la conception des wireframes, que l'UI Designer va intégrer la charte graphique de la marque.

 Vrai

 Faux

Exercice
Les tests utilisateurs sont primordiaux afin d'améliorer un wireframe.
 Vrai

 Faux

Exercice
Les wireframes sont exportables en HTML.
 Vrai

 Faux

Exercice
Lors de quelle phase du Design Thinking intervient la conception des wireframes ?

 Idéation

 Itération

 Intégration

Exercice
À quoi sert le contexte d'utilisation dans la rédaction d'un modèle de conception ?
 À décrire le problème que les fonctionnalités résolvent et pourquoi ce modèle existe

 À décrire quand utiliser ce modèle

 À décrire les éléments principaux attendus

B. Exercice : Défi
Dans le cadre de la conception graphique du site pour le parc MyParc vous intervenez en tant qu'UX designer afin de
proposer des interfaces les plus ergonomiques possible pour mettre en place une fonctionnalité.
Question [solution n°4 p.35]
Les différentes analyses de besoins menées par l'équipe du projet MyParc ont fait émerger une volonté des
utilisateurs de pouvoir déterminer, directement depuis le site, le moyen de transport le plus adapté pour se rendre
sur le parc.
Il vous est donc demandé de proposer une maquette en wireframe d'une page « Calculer votre itinéraire » sur
laquelle les utilisateurs pourront sélectionner les modes de transport suivants : Train, Voiture, Avion.
Vous détaillerez ensuite une interface complète permettant la visualisation des résultats de recherche pour le choix
d'un trajet en voiture puis pour le choix d'un trajet en train.
Les maquettes proposées devront contenir les éléments suivants :
Ajout d'une page « Comment venir à MyParc ».
Les mécanismes de navigation jusqu'à la page de calcul d'itinéraire.

22 Tous droits réservés à STUDI - Reproduction interdite

Solutions des exercices

Peu importe le choix du type de transport, il devra être possible de choisir un point de départ et une
destination, ainsi qu'une date de départ.
Un bouton permettra de lancer la recherche.
Les différents trajets avec leur longueur seront alors affichés et visibles sur une carte.
Pour réaliser ces maquettes vous réutiliserez le template de page utilisé lors de l'exercice précédent.
Vous pouvez vous inspirer de mécanismes et d'interfaces présents sur les sites de votre choix pour réaliser ces
maquettes.
N'oubliez pas qu'à ce stade de la conception il n'y a pas de mauvaise solution et qu'il n'y a pas de solution unique,
vos réalisations doivent être des propositions d'interfaces intégrant, a minima, tous les éléments présents dans la
description du besoin.
Indice :
Voici quelques exemples de sites dont vous pouvez vous inspirer pour réaliser les maquettes demandées :
SNCF
Google map

Solutions des exercices

Tous droits réservés à STUDI - Reproduction interdite 23

Solutions des exercices

Exercice p. 9 Solution n°1

Exercice

Quel profils de métier utilisent l'outil Balsamiq pour concevoir un wireframe ?

 L'UI Designer

 Les développeurs

 L'UX Designer

 Le product owner
Les principaux métiers concernés par l'utilisation de Balsamiq sont les métiers d'UI Designer et d'UX Designer.

Exercice

Comment s'appelle la zone dans laquelle on place les éléments graphiques ?

 Cadenas

 Canvas

 Calebas

La zone de représentation des objets graphiques s'appelle Canvas.

Exercice

Dans quel panneau peut on modifier les attributs d'un composant ?

 Panneau de propriétés

 Panneau de navigation

 Panneau de la librairie de composants graphiques

Les attributs d'un composant sont modifiés grâce au panneau de propriétés.

p. 20 Solution n°2

Tous droits réservés à STUDI - Reproduction interdite 25

 Solutions des exercices

Afin de répondre aux besoins utilisateurs décris, la boutique en ligne devra présenter, sous forme de menu de
navigation, différentes catégories de produits que les utilisateurs pourront commander.
Comme le présente la proposition de maquette ci-dessous, un champ de recherche devra permettre une recherche
rapide d'un produit en particulier et, dans le header du site, l'utilisateur pourra accéder à son panier, suivre sa
commande, accéder aux coordonnées du service client en cas de besoin et se connecter à son compte :

Le menu de navigation doit pouvoir se déplier avec un simple mouse over et afficher pour chaque catégorie, les
sous-catégories de produits ainsi que la typologie des produits proposés.
Une image doit illustrer, à l'intérieur du menu déroulant, la catégorie principale en focus.
La sélection d'une sous-catégorie doit pouvoir afficher tous les produits correspondant tandis que la sélection d'un
type de produit ne doit afficher que ce type.

26 Tous droits réservés à STUDI - Reproduction interdite

Solutions des exercices

Quelque que soit la sélection des produits réalisée, par catégorie ou par type, la page en faisant la liste devra être
unique.
La partie haute de l'interface devra être constante dans sa construction :
le header, la zone de recherche et le menu de navigation devront rester à la même place ;
une zone dédiée devra faire apparaître un breadcrumb pour permettre à vos utilisateurs de revenir en arrière
et de se souvenir du contexte.
Les informations contenues dans les parties centrale et basse seront contextualisées en fonction de la sous-
catégorie ou type de produit en cours, on devra y retrouver :
une image pour illustrer la sous-catégorie ou le type de produit en cours ;
le nombre de produits proposés à la vente ;
un système de tri de l'affichage ;
une zone dédiée aux filtres d'affichage ;
une présentation des produits sous forme de carte contenant une image, un titre, un prix et un bouton
panier.

Tous droits réservés à STUDI - Reproduction interdite 27

 Solutions des exercices

Un clic sur le bouton panier d'une carte produit doit ajouter automatiquement le produit au panier et un
message doit confirmer que le produit a bien été ajouté au panier.
L'utilisateur doit pouvoir avoir le choix, à l'aide de 2 boutons dédiés, entre poursuivre ses achats ou valider son
panier en vue de passer commande.

28 Tous droits réservés à STUDI - Reproduction interdite

Solutions des exercices

Si l'utilisateur souhaite poursuivre ses achats, dans le header du site, le panier doit indiquer le nombre de produits
qu'il contient :

La sélection d'une carte produit doit permettre de naviguer sur la fiche de détails du produit.
Les éléments fixes présents dans la page de liste des produits seront toujours présents dans cette page (pour
rappel : header, zone de recherche, menu de navigation et breadcrumb à une place fixe).
La fiche de détails devra afficher pour chaque produit :
une image principale du produit ;
des images miniatures présentant le produit sous un autre angle (optionnel) ;
un rappel de l'intitulé du produit ;
un rappel de son prix ;
une petite description ;
des détails techniques tels que le poids et les dimensions (optionnel) ;
la quantité à commander ;
un bouton pour ajouter le produit au panier.
Au clic sur le bouton d'ajout le message de validation précédent doit être affiché.

Tous droits réservés à STUDI - Reproduction interdite 29

 Solutions des exercices

Lors de la visualisation du panier, l'interface dédiée devra être rapidement et facilement identifiable, par rapport
au reste du site.
Cette interface devra proposer un tunnel d'achat en 4 étapes : récapitulatif, livraison, paiement, validation.
Seule la partie sous les onglets du tunnel d'achat se modifiera en fonction du contexte.
Dans l'étape 1 « Récapitulatif », vous devrez rappeler à l'utilisateur le nombre de produits qu'il a dans son panier et
en présenter le détail : photo, titre, prix, quantité.
Il devra pouvoir ajouter des quantités pour chaque produit ou décider d'en supprimer, le montant individuel
associé à chaque produit devra être mis à jour automatiquement.
Un bouton doit pouvoir lui permettre de reprendre ses achats.
Un encart devra présenter un récapitulatif de son ticket de caisse en cours, comprenant le montant de la livraison.
Un bouton devra lui permettre de poursuivre sa commande et d'avancer dans le tunnel d'achat.

30 Tous droits réservés à STUDI - Reproduction interdite

Solutions des exercices

Dans l'étape 2 « Livraison », l'utilisateur devra renseigner ses coordonnées de contact via un formulaire contenant
essentiellement des inputs texte.
Ce formulaire devra demander de renseigner obligatoirement :
les prénom et nom du contact
le téléphone
le mail
Sous le formulaire de contact, l'utilisateur devra remplir une adresse de livraison, également à l'aide d'un
formulaire contenant des inputs texte.
L'encart qui présente le récapitulatif de la commande en cours devra être à la même place sur toutes les pages.
Un bouton doit permettre d'aller à l'étape suivante et de procéder au paiement.
Un bouton doit pouvoir lui permettre de reprendre ses achats.

Tous droits réservés à STUDI - Reproduction interdite 31

 Solutions des exercices

Dans l'étape 3 « Paiement », l'utilisateur devra avoir le choix entre payer par carte ou par un autre moyen de
paiement, si il décide de payer par carte, il devra renseigner ses coordonnées bancaires via un formulaire dont tous
les champs sont requis.
L'encart qui présente le récapitulatif de la commande en cours devra être à la même place que sur les autres pages.
Un bouton doit permettre d'aller à l'étape suivante et de valider le paiement.
Un bouton doit pouvoir lui permettre de reprendre ses achats.

32 Tous droits réservés à STUDI - Reproduction interdite

Solutions des exercices

Dans l'étape 4 « Validation », vous devez informer l'utilisateur que la commande a été validée en fournissant un
numéro de commande.
Vous devez également rappeler :
la date de la commande
la date estimée de la livraison
l'adresse de la livraison
le détail de la commande
Un bouton doit permettre à l'utilisateur d'annuler sa commande.
Un bouton doit également lui permettre d'effectuer un nouvel achat.

Exercice p. 21 Solution n°3

Exercice

Quelle est l'utilité de l'application Balsamiq ?

 Elle permet de réaliser des maquettes au plus proche de la réalité en tenant compte de la charte graphique
souhaitée.

 Elle permet de réaliser des maquettes fonctionnelles sans tenir compte des contraintes graphiques.
Balsamiq est une application permettant la réalisation de wireframes qui sont des maquettes fonctionnelles
devant représenter la structure générale d'une page et non sa représentation graphique précise.

Tous droits réservés à STUDI - Reproduction interdite 33

 Solutions des exercices

Exercice

Qu'est ce qu'un modèle de conception ?

 Une description de la structure graphique qui va répondre à un problème donné.

 Une solution qui permet de définir une interface pour la création d'un objet.

 Un modèle d'analyse qui décrit de façon très détaillée la structure du système et la manière dont celui-ci sera
implémenté.
Un modèle de conception permet de décrire la réponse graphique apportée à un problème rencontré.

Exercice

Parmi ces propositions, quels éléments sont essentiels à la rédaction d'un modèle ?
 Solution

 Problème

 Adaptateur

 Description

 Conclusion
Un modèle de conception comporte les parties suivantes : nom du modèle, description, problème, contexte,
solution, recommandation, exemple.

Exercice

Un wireframe doit être le plus fidèle possible, graphiquement, de la solution finale.

 Vrai

 Faux
Un wireframe doit être une présentation graphique de basse qualité réalisée rapidement. Il doit permettre de
pouvoir réfléchir au prototype du site.

Exercice

C'est à l'étape de la conception des wireframes, que l'UI Designer va intégrer la charte graphique de la marque.
 Vrai

 Faux

Exercice

Les tests utilisateurs sont primordiaux afin d'améliorer un wireframe.

 Vrai

 Faux

Exercice

Les wireframes sont exportables en HTML.

34 Tous droits réservés à STUDI - Reproduction interdite

Solutions des exercices

 Vrai

 Faux

Exercice

Lors de quelle phase du Design Thinking intervient la conception des wireframes ?

 Idéation

 Itération

 Intégration
Les wireframes sont d'excellents outils pour représenter rapidement des idées et les faire évoluer.

Exercice

À quoi sert le contexte d'utilisation dans la rédaction d'un modèle de conception ?

 À décrire le problème que les fonctionnalités résolvent et pourquoi ce modèle existe

 À décrire quand utiliser ce modèle

 À décrire les éléments principaux attendus

Dans un modèle de conception le contexte permet de décrire comment le problème peut être résolu par les
fonctionnalités proposées et pourquoi ce modèle de conception existe.

p. 22 Solution n°4

Tous droits réservés à STUDI - Reproduction interdite 35

 Solutions des exercices

Afin d'apporter une réponse au besoin énoncé il est important de réfléchir tout d'abord aux différents mécanismes
de navigation possibles, l'une de ces propositions pourrait être l'ajout d'un menu burger en haut à gauche de la
page :

L'utilisation de ce menu de navigation pourrait alors déclencher l'apparition de la liste des menus par dessus le
site, en overlay. On trouverait alors les menus principaux dans un panneau, à gauche et chacun d'entre eux
permettrait d'accéder à des sous-menus qui s'afficheraient dans un second panneau, à droite du premier.

36 Tous droits réservés à STUDI - Reproduction interdite

Solutions des exercices

Les visiteurs pourront ensuite accéder aux coordonnées du parc en cliquant dans le menu « Infos pratiques » puis
dans le sous menu « Comment venir ? » ce qui déclencherait l'ouverture d'une nouvelle page du site et la fermeture
automatique des menus :

Tous droits réservés à STUDI - Reproduction interdite 37

 Solutions des exercices

Comme on peut le constater sur les propositions de maquettes, une fois arrivé sur la page « Comment venir ? » des
éléments fixes devront être présents :
le breadcrumb devra rappeler le chemin de navigation
le bouton Réserver devra toujours être accessible, au même endroit, peu importe le contexte de l'interface.
L'énoncé du besoin utilisateur précise que trois types d'accès au parc doivent être proposés : la voiture, le train et
l'avion.
Pour choisir un mode de transport il est possible de les présenter sous forme d'onglets dont la sélection fera
changer l'espace de la page situé en dessous tandis que l'espace du dessus restera fixe.
Pour chacun des modes de transport figureront :
un texte détaillant les axes qu'il est possible d'emprunter et des informations complémentaires (sur les
modalités de stationnement par exemple) ;
une carte illustrant le trajet ;
un bouton permettant d'accéder à la page du site dédiée au calcul de l'itinéraire.
Quelque soit le choix du mode de transport, la page dédiée à l'itinéraire sera la même :

Le calcul d'un itinéraire se faisant à partir d'un point de départ et d'une destination, l'interface devra, au minimum,
proposer deux inputs permettant de renseigner soit une ville, soit une gare soit un aéroport. Un placeholder devra
indiquer quels sont les champs qu'il est possible de renseigner.
En partant du principe que les visiteurs voudront tous arriver à la même destination, à savoir Les Epesses, la ville
du parc, vous pouvez par défaut, pré-remplir l'input de destination. Vous ferez ainsi gagner du temps aux visiteurs.
Celui-ci devra tout de même demeurer éditable.
Il n'est pas obligatoire, mais recommandé, d'ajouter au formulaire un input de type date picker, afin de garantir
l'utilisation d'une date valide.

38 Tous droits réservés à STUDI - Reproduction interdite

Solutions des exercices

Un bouton Rechercher devra permettre de lancer la recherche.

L'utilisation de ce formulaire pourrait être maquettée ainsi :

L'input de sélection du point de départ pourrait, par un système d'auto complétion, proposer des villes, gares,
aéroports compatibles avec la requête saisie.
Les propositions seraient alors découpées en catégories : aéroport et gare en premiers (les résultats disponibles
dans ces catégories étant généralement moins nombreux) puis enfin les villes et leur département d'appartenance.
Si la liste est longue, une scrollbar verticale devra s'afficher dans le panneau sous l'input.
Une croix présente dans l'input permettra de supprimer en un clic l'ensemble de la requête et réinitialiser l'input.

Tous droits réservés à STUDI - Reproduction interdite 39

 Solutions des exercices

L'input de destination fonctionnera de la même manière :

L'input date picker affichera, par défaut, la date du jour.

Le focus sur l'input ouvrira un calendrier mensuel où la date du jour est également en focus.
La date pourra être changée :
soit en cliquant plusieurs fois sur des flèches de sélection pour accéder au mois souhaité, puis en
sélectionnant un jour précis. Ce qui fermerait automatiquement le panneau et changerait la date dans
l'input ;
soit en saisissant manuellement la date dans l'input.

40 Tous droits réservés à STUDI - Reproduction interdite

Solutions des exercices

Ce qui pourrait se matérialiser de la manière suivante :

Tous droits réservés à STUDI - Reproduction interdite 41

 Solutions des exercices

Le bouton Rechercher quand à lui devra lancer le calcul de l'itinéraire et affichera les résultats sous le
formulaire :

On retrouve alors sur cette interface le système d'onglets permettant de sélectionner le type de transport, sous
lesquels on peut visualiser les différentes propositions d'itinéraires triés par temps de réalisation. Chacun d'entre
eux sera visible sur l'image à droite des résultats sous la forme d'une cartographie représentant l'itinéraire
sélectionné.

42 Tous droits réservés à STUDI - Reproduction interdite

Solutions des exercices

Les résultats pour les transports en train reprennent une interface similaire :

Tous droits réservés à STUDI - Reproduction interdite 43