OmnigraffleInterfaces et Scénarisation (COM2571)

29 octobre 2013Gré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énarioScé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

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 pageCalques

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 maquetteVous pouvez simplement exporter vos pages en PDF

Fichier 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!

gregory.petit@polymtl.cahttp://lrcm.com.umontreal.ca/greg/COM2571/