DUT Info S2 – 2013-2014 1/3 Stéphane Huot

IUT d’Orsay Première Année Introduction à l’Interaction Homme-Machine

Février 2014

Introduction à l’Interaction Homme-Machine

TP n° 1 : Introduction à Balsamiq Mockups Travail à faire : Ce TP est une introduction à l’application web ‘Mockups’ de Balsamiq. Ce travail ne sera pas à rendre, mais vos enseignants contrôleront en ligne dans votre espace de projet. Important : chaque binôme devra envoyer un email à l’enseignant pour lui rappeler la composition (noms, prénoms et groupe de TP) et le numéro du binôme (voir I.3).

I. Projets et Inscription Nous utiliserons au cours du module d’IIHM la version web de l’application Balsamiq Mockups pour créer des maquettes d’interfaces. L’intérêt de cette approche est de faciliter la conception et le prototypage collaboratifs, car il n’y a plus besoin d’installer d’application spécifique, d’échanger des fichiers, de gérer des versions différentes, etc. Sauf indication contraire dans l’énoncé, vous devrez faire un ‘mockup’ avant de programmer, à chaque fois que vous aurez à faire une interface utilisateur en TP. Pour accéder au site Balsamiq Mockups de l’IUT d’Orsay : https://iutorsay.mybalsamiq.com

NE VOUS ENREGISTREZ PAS, ATTENDEZ DE RECEVOIR UNE INVITATION SUR VOTRE EMAIL U-PSUD.

Balsamiq Mockups fonctionne selon un principe de ‘projets’ auxquels peuvent accéder un nombre restreint d’utilisateurs du site. Dans ces projets ‘privés’, les utilisateurs enregistrés sont libres de créer tous les mockups qu’ils désirent. A FAIRE : création des binômes et enregistrement sur le site Pour faciliter la gestion du site et les droits d’accès aux projets de Mockups, vous travaillerez en binômes lors de tous les TP et du projet, et il vous sera donné les droits sur un projet Blasamiq Mockups. Sauf circonstances exceptionnelles, et avec l’accord préalable de votre enseignant de TP, vous ne changerez pas de binôme au cours du semestre. Les binômes et les projets Balsamiq Mockups associés seront identifiés par : TP2-X-binY, avec X la lettre du groupe et Y le numéro du binôme (e.g. TP2-A-bin3). 1 - Constituez votre binôme 2 – Allez voir l’enseignant pour qu’il vous donne votre numéro ce binôme, vous invite sur le site et vous donne accès à votre projet.

DUT Info S2 – 2013-2014 2/3 Stéphane Huot

3 - Envoyez les informations suivantes par email à votre enseignant id : TP2-X-binY Nom : Prénom : Nom : Prénom : 4 – Vérifiez vos emails (u-psud) et enregistrez vous sur le site. Vous devriez maintenant être capable de vous connecter sur https://iutorsay.mybalsamiq.com et voir votre espace personnel qui contient le projet dans lequel vous pouvez travailler (voir figure ci-dessous).

II. Premiers pas : création et édition de mockups

AVANT DE COMMENCER : convention de nommage des mockups Étant donné que vous allez travailler dans un seul projet – qui ne permet pas de faire des sous projets –, toutes vos maquettes se trouveront à la racine de ce projet. Pour faciliter la gestion de vos maquettes et le contrôle par votre enseignant, vous devrez impérativement adopter la convention de nommage suivante : - pour les TP : TPX-QY-Nom, avec X le numéro de la feuille de TP, Y le numéro de la question et Nom le nom du mockup. ex.: si pour le TP 3, question 1, vous avez créé 3 mockups (2 fenêtres et 1 pop-up), les mockups seront TP3-Q1-Accueil, TP3-Q1-Edition et TP3-Q1-Alerte. - pour le projet : Projet-Nom, avec seulement Nom le nom du mockup.

DUT Info S2 – 2013-2014 3/3 Stéphane Huot

Afin de vous familiariser avec les fonctions de base de l’éditeur Balsamiq Mockups, vous allez tout d’abord réaliser le tutoriel très simple de Balsamiq ‘Creating Your First Mockup’ à l’adresse suivante : http://support.balsamiq.com/customer/portal/articles/871902 Avant de commencer le tutoriel :

- créez un nouveau Mockup dans votre projet en cliquant sur le bouton en haut à droite de la fenêtre. Cela va directement ouvrir l’éditeur avec un mockup vide. - sauvegardez-le tout de suite sous le nom TP1-Q2-Tutoriel. Faites ensuite le tutoriel ‘Creating Your First Mockup’. III. Plus avancé… Vous allez maintenant créer un autre mockup, TP1-Q3-Phone. Vous devez concevoir une interface simple pour téléphone mobile qui permet de contrôler les fonctions principales du navigateur web du tutoriel précédent (précédent, suivant, saisir une URL, etc.). Vous êtes libre de concevoir l’interface que vous voulez, profitez en pour explorer les contrôles disponibles dans l’éditeur et leurs différentes propriétés ou actions. Votre seule contrainte est que l’un des contrôles de l’interface mobile permette de passer de ce mockup à celui conçu précédemment de manière à simuler un scenario d’usage (vous utiliserez pour cela la propriété ‘link’ d’un contrôle de type ‘Button’). Pour tester, passez en mode présentation (menu ‘View / Full Screen Presentation’). Prenez l’habitude d’annoter votre mockup en utilisant le panel des notes de chaque mockup, ou les contrôles spécifiques de la catégorie ‘markup’ (voir figure ci-dessous). Vous pouvez ensuite exporter vos mockups sous différents formats (png ou pdf).

Et enfin, n’oubliez pas de consulter les documentations et tutoriels : http://support.balsamiq.com/