interfaces et scénarisation (com2571) 29 octobre 2013 grégory petit
TRANSCRIPT
Omnigraffle
Interfaces et Scénarisation (COM2571)29 octobre 2013
Grégory Petithttp://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 projetAnalyse 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
MaquetteLes structures
Diagrammes de cas d’utilisationStructures statiques et dynamiques
Les différentes captures d’écranAu moins 5-7Les explications des animations et interactions
EvaluationAura 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 VisioMais 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
Zone de travailCanevas
et calques
Fenêtre de base
Afficher patronsEt inspecteur
Modification rapide d’un
élément
Canevas et calque
1 canevas 1 page
Calques du
canevas
Calques du canevas sélectionné et ses éléments
CalquesUn calque est un groupement
d’élémentsVous pouvez créer autant de
calque que vous le souhaitezVous 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
PatronsCorrespondent à 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
InspecteurFormat et mise en page d’un
élémentStyle : 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
StructuresVous pouvez faire vos
structures statiques et dynamiques via Omnigraffle.
Utilisez la bibliothèque de patron « Schéma relationnel » dans le dossier logiciel
Cas d’utilisationUtilisez la bibliothèque de
patron « UML – Cas d’utilisation » dans le dossier logiciel
Démo
Wireframes
WireframesVous 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ètehttp://konigi.com/tools/omnigraffle-wireframe-st
encils
Pleins de bibliothèques ici : https://www.graffletopia.com/
Wireframes et canevasUn 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 calquesCré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
ActionsVous pouvez
appliquer des actions à vos éléments:Lien vers un autre
canevasAfficher ou masquer
un masque
Génération de la maquette
Vous pouvez simplement exporter vos pages en PDFFichier Exporter…Choisir format: Image vectorielle PDFPenser à choisir tout le document comme zone
d’exportation
Vous pouvez aussi exporter vos pages en page HTMLFichier Exporter…Choisir format: Carte image HTMLPenser à 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]://lrcm.com.umontreal.ca/greg/COM2571/