Interfaces et Scénarisation (COM2571) 29 octobre 2013 Grégory Petit

Présentation au sujet: "Interfaces et Scénarisation (COM2571) 29 octobre 2013 Grégory Petit"— Transcription de la présentation:

1 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 aujourdhui? 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 lorganisation Objectifs pour répondre aux besoins Solution proposée Stratégie de diffusion

6 Maquette Les structures Diagrammes de cas dutilisation 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 Lautre équipe ayant des notions dergonomie, 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, cest quoi? À la base, cest un logiciel de création de diagrammes Équivalent Mac de Microsoft Visio Mais en plus simple Permet aussi de faire ce quon appelle des wireframes (maquettes fil de fer) Cest surtout ça quon va regarder aujourdhui

10 Omnigraffle, cest 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 Luniversité na pas la licence de la version 6 mais linterface est très similaire

11 Environnement de travail

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

13 Fenêtre de base Afficher patrons Et inspecteur Modification rapide dun élément

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

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 dajouter 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 http://konigi.com/tools/omnigraffle -wireframe-stencils

18 Inspecteur Format et mise en page dun é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 dutilisation Utilisez la bibliothèque de patron « UML – Cas dutilisation » dans le dossier logiciel

22 Démo

23 Wireframes

24 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 sajuster 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 daccueil

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 dexportation Vous pouvez aussi exporter vos pages en page HTML Fichier Exporter… Choisir format: Carte image HTML Penser à choisir tout le document comme zone dexportation

32 Atelier

33 La presse Refaites la page daccueil de La Presse en Wireframe avec Omnigraffle

34 Des questions??? Merci de votre attention! A la semaine prochaine! gregory.petit@polymtl.ca http://lrcm.com.umontreal.ca/greg/COM2571/