Conception et sp cifications
This presentation is the property of its rightful owner.
Sponsored Links
1 / 37

Conception et spécifications PowerPoint PPT Presentation


  • 73 Views
  • Uploaded on
  • Presentation posted in: General

Conception et spécifications. Analyse des besoins Spécification des objectifs Fonctions et cas d ’ utilisation Différentes formes de spécifications du contenu. Conception centrée utilisateur ergolab. La conception est le produit d ’ un processus de consultation…

Download Presentation

Conception et spécifications

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Conception et sp cifications

Conception et spécifications

Analyse des besoins

Spécification des objectifsFonctions et cas d’utilisationDifférentes formes de spécifications du contenu


Conception centr e utilisateur ergolab

Conception centrée utilisateurergolab

La conception est le produit d’un processus de consultation…

  • Une préoccupation en amont des utilisateurs, de leurs tâches et de leur environnement

  • La participation active de ces utilisateurs

  • Une répartition appropriée des fonctions entre les utilisateurs et la technologie

  • L'itération des solutions de conception : on peut s'imaginer le cycle comme une spirale, une démarche qui boucle et reboucle jusqu'à ce que le système satisfasse aux exigences définies au départ.

  • L'intervention d'une équipe de conception multi-disciplinaire

  • Spécification et poursuite d’objectifs précis d’utilisabilité


Conception centr e utilisateur

Conception centrée utilisateur


Approche persona

Approche Persona

  • Ne pas définir un usager typique..décrire différents types d’usagers

  • Personnaliser les interactions, que chaque personne se sente unique

  • Alan Cooper

  • « Choisir une femme précise, lui donner une biographie, un âge, une occupation, un foyer, une famille, des attentes face au produit, etc. Ce qui permet de concevoir son application en faisant constamment référence à cette personne et à ses attentes. Par exemple, est-ce que Judith aimerait tel aspect de l’interface, va-t-elle apprécier le module d’achat en ligne, etc.? »

  • Imaginer plusieurs usagers typiques et confronter le produit à des archétypes précis…

    • Presbyte…rébarbatif à la technologie… pressé..Jeunes, vieux

      S’assurer qu’on choisit bien les différents usagers typiques.

  • Prévoir des chemins spécifiques (flexibilité)


Tapes de la sc narisation interactive

Étapes de la scénarisation interactive

Analyse des besoins

Objectifs de communication

Cas d’utilisation, scénarios

Maquette

Description du contenu et exemples

Design de la structure d ’interaction

Design des principaux écrans et des boutons

Validation par le client

Validation par les usagers

Programmation


Analyse des besoins

Analyse des besoins

  • Inventaire des attentes par rapport au système (fournisseurs et utilisateurs du système d ’information). Exigences organisationnelles, Weinschenk - tâches critiques.

  • Expériences antérieures, point de comparaison, compétiteursAnalyser ce qui existe, ce qui va bien et ce qui doit changerCommencer à répertorier les objets, les actions, les attributs, le vocabulaire.

  • Caractéristiques des usagers potentiels, compétences, attitudes,

  • Inventaire général des sources d'information, exemple de contenus, caractéristiques médiatiques du contenu, contraintes à l'accès

  • ressources disponibles pour aider à l'élaboration, la mise en forme, la mise à jour

  • Description des contraintes techniques à considérer pour l'élaboration et la diffusion


Analyse des besoins m thodologies

Analyse des besoins - Méthodologies

  • Étude ethnographique

    • observation des activités, des tâches, de l’utilisation des systèmes existants.

    • Identification des processus de communication, des goulots d’étranglement, observation et recueil « in situ » des besoins.

  • Entrevues auprès des principaux acteurs concernés par le changement

  • Entrevues auprès des usagers et clients

  • Recherche Expériences similaires, systèmes existants, sources de contenus.

  • Description fonctionnelle de l’application à développer

    • Intentions, cas d’utilisation, fonctions principales, scénarios

  • Esquisse générale de structuration des objets, du contenu Weinschenk Table Objet -Action fig 3.3

  • Estimé préliminaire des coûts et de l’échéancier (Gayeski)


Analyse des besoins produits

Analyse des besoins - Produits

  • Texte décrivant les besoins et contraintes

  • Texte décrivant le contexte prévu d’utilisation

  • Texte décrivant la compétition et expérience antérieure

  • Texte spécifiant les objectifs et la stratégie privilégiée

  • Liste des acteurs, leur contexte d’utilisation et des exemples de fonctions

  • Liste de cas d’utilisation proposés et mis en ordre de priorité.Exemples de cas d’utilisation pour une Galerie virtuelle de tableaux

    • Naviguer de façon historique dans les tableaux

    • Trier les tableaux selon la grandeur, la date, la couleur

    • Rechercher un tableau sur un thème

    • Rechercher les tableaux à vendre

    • Acheter la reproduction d’un tableau selon différentes tailles

    • Ajouter un nouveau tableau avec son descriptif


Cas d utilisation

Répertorier tous les aspects, les acteurs de l’interaction

Cas d’utilisation


Cas d utilisation1

Cas d’utilisation

Quels sont les dimensions de communication du système ?

Usager

Nutritionniste


Objectifs de communication

Quoi dire ?

Quoi montrer ?

Objectifs de communication

  • Spécifier les objectifs de communication

  • Choisir parmi les besoins, les fonctions possibles et préciser la stratégie

    Trop≠ mieuxLa meilleure approche ≠la plus directe

    Les fonctions et objectifs primaires et secondaires

  • Spécifier le message, les fonctions visées.

  • Choix d'une métaphore et justification

  • Choix techniques (environnement matériel et logiciel)

  • Choix médiatiques (composantes des médias)

  • Stratégies générales de l'interface

  • Critères de performance et d’utilisabilité visés.


Design weinscheink ch3

Design -Weinscheink Ch3

  • S’assurer que les tâches se feront comme les usagers veulent les faire (théorie de l’activité)

  • Maquette assez détaillée pour permettre un « parcours - walk through », une validation par des scénarios correspondant aux cas types.

  • Session de scénarisation - Equipe multidisciplinaire, 2h00, tableau blanc, scénarios (cas d’utilisation prêts)

  • Ne pas faire l’interface..mais la structure d’abord.

  • Décrire les objets, leurs attributs, les actions sur ces objets.(fig 3.3)

  • Choisir la métaphore

  • ressources disponibles pour aider à l'élaboration, la mise en forme, la mise à jour

  • Description des contraintes techniques à considérer pour l'élaboration et la diffusion


Produits maquette

DESIGN

Produits - Maquette

  • Cas d’utilisation

  • Structure statique du site (organisation des pages)

  • Structure dynamique (si interactif) dans le cas d’un site interactif (branchements conditionnels, règles)Vérification d’un formulaire, variables, calculs.

  • Maquette basse définition des principales pages (boutons,menus, texte, illustrations), description des effets et de l’interaction.


Produits description

DESIGN

Produits - Description

  • Stratégie générale d'interaction

  • Design de la navigation

  • Croquis papier de quelques pages

  • Justification de la maquette par rapport aux besoins et aux objectifs

  • Description générale des composantes : animations, vidéos.

Nous verrons

Contenu, Structure, Écrans


Conception et sp cifications

Contenu

DESIGN

  • Exemples de la structure et des caractéristiques du contenu décrit de façon structurée (sections, Catégories)

  • Décider les contenus d’information (les feuilles)

  • Définir les concepts, les catégories dont on aura besoin pour classer l'information et pour construire les pages d’accès au contenu

  • Créer la structure dans un environnement sur papier puis dans un environnement, où il sera facile de rajouter des informations et de les trier

    • Structure dans PowerPoint

    • tableau - Excel ou Word

    • base de données - File Maker, Access

    • Graphes - pour les structures plus complexes (accès multiples, interactifs) - Visio, OmniGraffle.

  • Éventuellement déléguer l'élaboration du contenu, formulaire


Conception et sp cifications

Contenu

DESIGN

  • Méthodes des cartes

  • pour organiser le contenu

  • “individus choisis pour leur représentativité

  • du public cible sont invités

  • à grouper par famille un ensemble de cartes

  • établi préalablement par l'expérimentateur.”

  • Ergoweb 2003

  • Cartes = les feuilles

  • Demander à l’usager de les classer,de créer la structure d’accès, les choix de menus.

    • Libellés potentiels

    • Regroupements possibles

    • AmbiguîtéMultiples chemins

Méthode http://www.ergoweb.ca/cartes.html

EZ Sort : http://www-3.ibm.com/ibm/easy/eou_ext.nsf/Publish/410


Conception et sp cifications

Contenu

DESIGN

Définir les objets, les informations à diffuser, les feuilles et leurs contenus

  • Catégories

    • Événement

      • Date, Titre, Auteur, Metteur en scène, Acteurs, Historique de la pièce, historique du réalisateur

    • Images ou vidéos

      • Sujet, Document, format, taille, Description

  • Exemple

    • 6 jan-3mars, Le Malade Imaginaire, Molière, De Andrea, [Remy Girard, Guylaine.....]

    • Images

      • Remy Girard, Girard.gif, gif, 20k, penche chaise

      • Guylaine, à trouver, photo

    • Vidéo

      • Malade Imaginaire, Imagi.moo, Quicktime, 100k, Enreg scène 2


D crire les actions les outils de navigation

Contenu

Décrire les actions, les outils de navigation

Définir les principales actions que l’on veut faire sur les objets

  • Par exemple pour une commande ? Pour un jeu ?

  • Menus, Barre d’outils, commandes, recherche

  • Trier

  • Rechercher ou Filtrer l’information

    • Weinschenk Table Objet - Action fig 3.3table des actions fig 3.9

  • Imprimer, enregistrer, commenter, réserver un produit.

  • Décider des actions en fonction

    • De la fréquence, des standards, du degré d’interaction désiré, de l’utilisation des clés de claviers..(reconnaître le RETURN)


  • Planifier l implantation et le soutien aux usagers

    Contenu

    Planifier l’implantation et le soutien aux usagers

    • Information et formation aux différentes phases de développement

    • Impact et changements organisationnels associés.Changements dans le processus de traitement de l’information.

    • Personnel requis pour faire la recherche, la validation et la mise à jour de l’information Personnel requis pour faire le suivi, pour répondre aux consommateurs

    • Voir Wenschenk


    Conception et sp cifications

    Structure statique

    Organisation statique des pages

    Combien de liens de boutons dans la page Programmation ?

    Illustrator

    Omnigraffle

    Visio


    Conception et sp cifications

    Structure statique des pages

    Structure

    Intro

    IntroFlash

    Aide

    Références

    Cinema

    CinamaFlash

    Glossaire

    Sections

    Apprentissage

    Scénarisation

    Production

    Systèmes

    Ergonomie

    Forum

    Sous-section

    Page et ancres

    Choix

    Automatique

    Page

    Cadre

    Page et ancres

    Sous-section

    N.B. Toutes les sections comme la Section Systèmes


    Sc narisation structure en flash

    Scénarisation - Structure en Flash

    • Définir ce qui est fait en Flash..et ce qui est fait dans le pages Internet.

    • Vous pouvez faire une application qui n’est faite qu’en Flash, comme un jeu, une borne dans un musée, sur un Iphone ou Ipadmais il faut la charger sur Internet.

    • Pour votre scénario il faut présenter

      • la structure des séquences

      • Pour chaque séquence la succession d’animation

      • Les principaux calques et ce qu’il y aura dedans.

        Voici un exemple simple..

        Puis un plus complexe:


    Exemple auberge avec activit s d hiver

    Exemple: Auberge avec activités d’hiver

    • Principales séquences

    Important : intégrez des animations dans la présentation et la navigation- Exemples: Cinema et images animées


    Exemple auberge avec activit s d hiver1

    Exemple: Auberge avec activités d’hiver

    • Séquence d’activités ..suite d’animations et calques


    Exemple auberge avec activit s d hiver2

    Exemple: Auberge avec activités d’hiver

    • Séquence Formulaire

      • Suite des sections

      • Quels seraient les calques, boutons de navigation ?


    Mod le int grant flash et html exemple semblable au site de fondation daniel langlois

    Modèle intégrant Flash et htmlExemple semblable au Site de fondation Daniel Langlois


    Structure des contenus de navigation

    Structure des contenus de navigation

    • Choix et évaluation des possibilités

    • écran unique

    • hiérarchie

    • contextuel, réalité virtuelle

    • linéaire

    • réseau (index multiples)

    • animation

    • intelligent (basé sur règles)

    Qu’est-ce que c’est ?

    Survol ?

    Recherche ?

    Apprendre ?

    Résumé ?

    Niveau et densité d’information approprié


    Conception et sp cifications

    Structure statique


    Conception et sp cifications

    Structure dynamique

    Structure dynamique des interactifs

    Autres exemples de jeux utilisant des variables et des règles


    Description d une interaction en flash graphe de s quence

    Description d’une interaction en Flash - graphe de séquence


    Conception et sp cifications

    Structure

    Description et justification de la structure

    Organisation des pages et navigation

    Commentaires sur les aspects d'organisation du contenu , de flexibilité, de support à la navigation, etc...

    On peut définir une structure générale de choix auquel on a accès partout - bannière ou frame.

    Ne pas trop limiter l'espace réservé à l'information.

    Planifier

    Réversibilité - l'accès et le recul dans l'information.

    Flexibilité - plusieurs accès aux informations

    Visibilité et orientation - Indices du contexte

    Bien répartir l'information - rapidité, pas trop complexe

    Autres critères ergonomiques…fermeture, erreurs, ...


    Conception et sp cifications

    Design d'écrans

    • Design visuel des pages en général

      • Définir une grille - zones de textes et de dessinsDéfinir modèle (template)

      • Design des outils de navigation

    • Critique en fonction des critères ergonomiques du design d'écrans

    • Tenir compte des possibilités techniques

    • Intégration dans la maquette d'exemples de contenus (croquis numérisés, photos non traitées)

    • Développement d'un exemple des principaux types de pages selon la structure

    • Montage de la maquette papier et du document de présentation

      Voir notes sur les principes de design d’écrans.


    Th tre du rideau vert saison 97 98

    Animation

    Entrée

    Titres apparaissent puis l’animation s’arrête

    Information clignote une fois

    Continu

    Théâtre brille

    Sortie

    Audio=Bruits d’applaudissements 3 sec

    Théâtre du Rideau Vert Saison 97-98

    Jan

    Fév

    Mar

    Avr

    Mai

    Juin

    Juil

    Août

    Sept

    Oct

    Nov

    Déc

    Passion

    • Le théâtre n’existe pas sans vous

    • Venez y jouer votre rôle

    • Information 345-2278

    Tendresse

    Rêve

    Interaction

    Barre Mois

    clic = Accès à Horaire/ancre du mois

    survol= effet 3D

    Enveloppe

    clic = Lance courriel

    [email protected]

    Amour

    English


    Horaire

    6 janvier au 13 mars

    Le malade imaginaire - Molière

    « Drelin, drelin, drelin: ah, mon Dieu! Ils me laisseront ici mourir. »

    14 mars au 19 mai

    La maison de poupée - Ibsen

    « NORA - Je crois que je suis avant tout un être humain, au même titre que toi ou que je dois en tout cas essayer de le devenir »

    20 mai au 24 juin

    Ubu RoiIonesco

    Animation

    Entrée

    Mois sélectionné est illuminé

    Ancre du mois choisi

    Audio: trois coups d’ouverture

    Horaire

    Jan

    Fév

    Mar

    Avr

    Mai

    Juin

    Juil

    Août

    Sept

    Oct

    Nov

    Déc

    Interaction

    Le Malade Imaginaire

    Survol = Audio et textes apparaissent Clic = Ouvre Description

    Mois

    Clic change de mois

    Théâtre du Rideau Vert

    English


    Horaire1

    6 janvier au 13 mars

    Le malade imaginaire - Molière

    « Drelin, drelin, drelin: ah, mon Dieu! Ils me laisseront ici mourir. »

    14 mars au 19 mai

    La maison de poupée - Ibsen

    « NORA - Je crois que je suis avant tout un être humain, au même titre que toi ou que je dois en tout cas essayer de le devenir »

    20 mai au 24 juin

    Ubu RoiIonesco

    Animation

    Entrée

    Mois sélectionné est illuminé

    Ancre du mois choisi

    Audio: trois coups d’ouverture

    Horaire

    Jan

    Fév

    Mar

    Avr

    Mai

    Juin

    Juil

    Août

    Sept

    Oct

    Nov

    Déc

    Interaction

    Le Malade Imaginaire

    Survol = Audio et textes apparaissent Clic = Ouvre Description

    Mois

    Clic change de mois

    Théâtre du Rideau Vert

    English


    Le malade imaginaire moli re

    Le malade Imaginaire, Molière

    6 janvier au 13 mars

    Une fois de plus un grand auteur.. Une fois de plus un grand auteur.... Une fois de plus un grand auteur.... Une fois de plus un grand auteur.... Une fois de plus un grand auteur.... Une fois de plus un grand auteur.... Une fois de plus un grand auteur.... Une fois de plus un grand auteur.... Une fois de plus un grand auteur.... Une fois de plus un grand auteur......

    Théâtre du Rideau Vert

    Remy Girard

    Guylaine Tremblay

    English

    Mettre les vrais textes, un aperçu des vraies images, de façon à tester les grandeurs, la lisibilité, etc..Ne pas oublier les éléments généraux, comme ici le titre Rideau Vert, le bouton pour la version anglaise, etc..


    Atelier deuxi me travail

    Atelier - Deuxième travail

    Choix du sujet

    Remue méninges

    • Analyse des besoins

    • Cas d’utilisation

    • Objectifs

    • Structure possible

    • Composantes médias

      Conseils

      Un projet réaliste..une maquette qui présente ce que serait le site..

      Testez les interactions que vous voulez intégrer

      Réduisez la taille et décomposez en sous parties

      Organisez bien vos fichiers et faites des copies de sauvegarde.


  • Login