Transcript notes de cours

Interfaces et Scénarisation (COM2571)
29 octobre 2013
Grégory Petit
http://lrcm.com.umontreal.ca/greg/COM2571/
Il y a deux semaines …
 Principes du design des pages selon Weinschenk
 Titres, textes, menus, boutons et menus, etc.
 Formulaires
 Choix d'icônes et de médias
 Psychologie des couleurs
 Lois de la Gestalt
 Internationalisation et accessibilité
 Bloopers - Les erreurs les plus fréquentes selon Johnson
 Maquettes
Et donc on fait quoi aujourd’hui?
 Introduction
 Environnement de travail
 Diagrammes
 Wireframes
Travail 2
Scénario
 Scénario = contexte du projet
 Analyse des besoins






Public cible
Besoins des utilisateurs
Besoins des clients
Etude de la concurrence
Métaphore et style utilisés
Intégration dans l’organisation
 Objectifs pour répondre aux besoins
 Solution proposée
 Stratégie de diffusion
Maquette
 Les structures
 Diagrammes de cas d’utilisation
 Structures statiques et dynamiques
 Les différentes captures d’écran
 Au moins 5-7
 Les explications des animations et interactions
Evaluation
 Aura lieu le 3 décembre en cours
 Idem que pour le premier travail à part :
 Pas de vidéo donc pas de transcription
 Chaque équipe est pairée avec une autre donc 2 participants par
maquette
 L’autre équipe ayant des notions d’ergonomie, vous pourrez en
discuter directement avec eux.
 Vous devrez expliquer les problèmes ergonomiques identifiés
dans votre maquette et proposer des correctifs que vous
devrez appliquer à votre maquette.
Introduction
Omnigraffle, c’est quoi?
 À la base, c’est un logiciel de création de diagrammes
 Équivalent Mac de Microsoft Visio
 Mais en plus simple
 Permet aussi de faire ce qu’on appelle des wireframes
(maquettes fil de fer)
 C’est surtout ça qu’on va regarder aujourd’hui
Omnigraffle, c’est quoi?
 Existe aussi pour iPad
 Permet de faire diagrammes et wireframes facilement sur
une tablette
 Interface très intuitive basée sur le drag & drop
 Vous avez la version 5 installée sur vos postes, mais la
version 6 est sorti récemment
 L’université n’a pas la licence de la version 6 mais
l’interface est très similaire
Environnement de travail
Fenêtre de base
Canevas
et calques
Zone de travail
Fenêtre de base
Modification
rapide d’un
élément
Afficher patrons
Et inspecteur
Canevas et calque
1 canevas
 1 page
Calques du
canevas
Calques du canevas
sélectionné et ses
éléments
Calques
 Un calque est un groupement
d’éléments
 Vous pouvez créer autant de
calque que vous le souhaitez
 Vous pouvez déplacer les
éléments de calque en calque
 Calques partagés (marron –
orange)
 Sont placés sur tous les canevas
 Sélectionner le bon calque avant
d’ajouter un éléemnt
Calques
Contenu
Éléments communs
+
=
Patrons
 Correspondent à des bibliothèques
d’éléments déjà définis.
 Vous y retrouvez surtout des
éléments de diagrammes par
défaut.
 Pour des éléments de wireframes,
téléchargez et installez Konigi:
http://konigi.com/tools/omnigraffle
-wireframe-stencils
Inspecteur
 Format et mise en page d’un élément
 Style : Couleur de remplissage, orientation,
bordure, ombres, image, texte
 Propriété: position, taille, actions (liens,
montrer/cacher calque), annotations
 Propriété de la page: taille, grille
Diagrammes
Structures
 Vous pouvez faire vos structures
statiques et dynamiques via
Omnigraffle.
 Utilisez la bibliothèque de
patron « Schéma relationnel »
dans le dossier logiciel
Cas d’utilisation
 Utilisez la bibliothèque de
patron « UML – Cas d’utilisation
» dans le dossier logiciel
Démo
Wireframes
Wireframes
 Vous pouvez trouver des bibliothèque de patrons
gratuitement sur Internet pour faire vos Wireframes.
 Patrons = stencils en anglais.
 La bibliothèque Konigi est très complète
 http://konigi.com/tools/omnigraffle-wireframe-stencils
 Pleins de bibliothèques ici :
https://www.graffletopia.com/
Wireframes et canevas
 Un canevas = une page
 Il est conseillé de mettre le
Canevas en mode portrait et
de laisser la taille s’ajuster
automatiquement
 Choisir les pixels ou les points
comme unités.
Wireframes et calques
 Créer un calque par groupe
d’éléments de la page.
 Créer des calques partagés
pour les groupes d’éléments se
retrouvant sur chacune des
pages.
Wireframes – Groupes d’éléments
 Ne
pas hésiter à
grouper les éléments
pour les déplacer et
modifier ensemble.
 Verrouiller
certains
éléments peut aussi
aider la manipulation
Exemple – Page d’accueil
Exemple – Section 1
Actions
 Vous pouvez appliquer
des actions
éléments:
 Lien
à
vos
vers un autre
canevas
 Afficher ou masquer un
masque
Génération de la maquette
 Vous pouvez simplement exporter vos pages en PDF
 Fichier  Exporter…
 Choisir format: Image vectorielle PDF
 Penser à choisir tout le document comme zone
d’exportation
 Vous pouvez aussi exporter vos pages en page HTML
 Fichier  Exporter…
 Choisir format: Carte image HTML
 Penser à choisir tout le document comme zone
d’exportation
Atelier
La presse
Refaites la page d’accueil de La Presse en Wireframe avec
Omnigraffle
Des questions???
Merci de votre attention!
A la semaine prochaine!
[email protected]
http://lrcm.com.umontreal.ca/greg/COM2571/