Omnigraffle

1. Omnigraffle Interfaces et Scénarisation (COM2571) 29 octobre 2013 Grégory Petit http://lrcm.com.umontreal.ca/greg/COM2571/

2. 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

3. Et donc on fait quoi aujourd’hui? • Introduction • Environnement de travail • Diagrammes • Wireframes

4. Travail 2

5. 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

6. 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

7. 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.

8. Introduction

9. 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

10. 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

11. Environnement de travail

12. Fenêtre de base Zone de travail Canevas et calques

13. Fenêtre de base Modification rapide d’un élément Afficher patrons Et inspecteur

14. Canevas et calque 1 canevas  1 page Calques du canevas sélectionné et ses éléments Calques du canevas

15. 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

16. Calques Contenu Éléments communs + =

17. 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

18. 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

19. Diagrammes

20. Structures • Vous pouvez faire vos structures statiques et dynamiques via Omnigraffle. • Utilisez la bibliothèque de patron « Schéma relationnel » dans le dossier logiciel

21. Cas d’utilisation • Utilisez la bibliothèque de patron « UML – Cas d’utilisation » dans le dossier logiciel

22. Démo

23. Wireframes

24. 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/

25. 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.

26. 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.

27. 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

28. Exemple – Page d’accueil

29. Exemple – Section 1

30. Actions • Vous pouvez appliquer des actions à vos éléments: • Lien vers un autre canevas • Afficher ou masquer un masque

31. 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

32. Atelier

33. La presse Refaites la page d’accueil de La Presse en Wireframe avec Omnigraffle