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

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

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

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.

Introduction

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

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

Environnement de travail

Fenêtre de base Zone de travail Canevas et calques

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

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 dajouter 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: -wireframe-stencils -wireframe-stencils

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

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 dutilisation Utilisez la bibliothèque de patron « UML – Cas dutilisation » dans le dossier logiciel

Démo

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 Pleins de bibliothèques ici :

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.

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 daccueil

Exemple – Section 1

Actions Vous pouvez appliquer des actions à vos éléments: Lien 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 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

Atelier

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

Des questions??? Merci de votre attention! A la semaine prochaine!