• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Cour2 Design d'interaction
 

Cour2 Design d'interaction

on

  • 362 views

Voici le deuxième cours que j'ai donné au Collège Salette

Voici le deuxième cours que j'ai donné au Collège Salette

Statistics

Views

Total Views
362
Views on SlideShare
358
Embed Views
4

Actions

Likes
1
Downloads
9
Comments
0

1 Embed 4

http://www.linkedin.com 4

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Cour2 Design d'interaction Cour2 Design d'interaction Presentation Transcript

    • Design d’intéraction Cours #2Tuesday, September 20, 2011
    • Avez-vous fait vos devoirs?Tuesday, September 20, 2011
    • Devoir Évaluer 3 designs (Choisir au moins un design d’interface) Quels sont les objectif(s) Comment auriez-vous innové ce design?Tuesday, September 20, 2011
    • Processus de design d’un produitTuesday, September 20, 2011
    • Waterfall (classique)Tuesday, September 20, 2011
    • Waterfall http://en.wikipedia.org/wiki/Waterfall_modelTuesday, September 20, 2011
    • WaterfallTuesday, September 20, 2011
    • Livrables Requirements ★ Brief (Collecte dinformations) ★ Collecte et analyse des metrics (Données du site) ★ Audit du site (Étude dutilisabilité des éléments existants) ★ Ethnographie ou entrevues (Définir le profil utilisateurs) ★ Benchmarking (Marché/Concurrence) ★ Card sorting (Le tri par cartes)Tuesday, September 20, 2011
    • Livrables UX Design ★ Persona: (Utilisateurs-types) ★ Plans du site et inventaire des contenus / arborescence ★ UseCase (Scénarios dutilisation) ★ Wireframes (Croquis décrans) ★ PDD ★ Test utilisateursTuesday, September 20, 2011
    • PersonasTuesday, September 20, 2011
    • WireframesTuesday, September 20, 2011
    • PDD aka Project Design DocumentTuesday, September 20, 2011
    • Livrables V Design ★ Brainstorm (collecte didées inspirantes) ★ Maquettes graphiques (visualisation précise du résultat final) ★ Itérations ★ PrototypageTuesday, September 20, 2011
    • Livrables Implémentation (Production) ★ Documentation des exigences d’affaires ★ Déclinaisons infographiques ★ Découpage ★ Intégration CSS/HTML ★ Programmation (Back end)Tuesday, September 20, 2011
    • Livrables Test / Analyse ★ Environement de test ★ Test utilisateurs ★ Modifications design (ux et v) ★ Déploiement ★ Modifications et tests ★ Mise en ligneTuesday, September 20, 2011
    • AgileTuesday, September 20, 2011
    • UX Agile http://www.agileproductdesign.com/blog/emerging_best_agile_ux_practice.htmlTuesday, September 20, 2011
    • UX Agile http://www.agileproductdesign.com/blog/emerging_best_agile_ux_practice.htmlTuesday, September 20, 2011
    • Agile http://www.agileproductdesign.com/blog/emerging_best_agile_ux_practice.html http://www.slideshare.net/mgiudice/humancentered-design-meets-agile-development-presentation-625465Tuesday, September 20, 2011
    • Glossaire.Tuesday, September 20, 2011
    • UX [User Experience Design] Aspect du design qui répond à comment l’utilisateur va utiliser, apprendre, et pecevoir un produit. Ce domaine a les rascines dans l’ergonomie et l’aspect humain (human factor). L’objectif principal est de créer des systèmes entre l’homme et la machine de façon à créer une expérience intuitive et productive pour les deux. Ce domaine emprunte les lois et principes du Human Centered Design.Tuesday, September 20, 2011
    • UX Design Le design UX est un champ du design dexpérience. Il concerne la création des modèles architecturaux et interactifs qui affectent lexpérience-utilisateur dans un appareil ou un système. Étant donné son caractère subjectif, lexpérience-utilisateur ne peut être designée. On doit plutôt designer en fonction de lexpérience-utilisateur, en essayant dactiver certains types dexpérience. La portée de cette pratique couvre « tous les aspects de linteraction des utilisateurs avec le produit, incluant la façon dont il sera perçu, maîtrisé et utilisé. »Tuesday, September 20, 2011
    • Ergonomie On nomme ergonomie « létude scientifique de la relation entre lhomme et ses moyens, méthodes et milieux de travail » et lapplication de ses connaissances à la conception de systèmes « qui puissent être utilisés avec le maximum de confort, de sécurité et defficacité par le plus grand nombre. »Tuesday, September 20, 2011
    • Tuesday, September 20, 2011
    • Gabarits Le modèle (ou gabarit) permet de construire les pages dun site web selon une trame (un squelette) de page identique constituée déléments modifiablesTuesday, September 20, 2011
    • Patterns Les patrons sont des solutions aux problèmes communs.Tuesday, September 20, 2011
    • Patterns Chaque patron a 4 composantes: 1. un titre 2. un problème 3. un contexte 4. une solutionTuesday, September 20, 2011
    • Les patterns peuvent être combinés ensembleTuesday, September 20, 2011
    • Jeu.Tuesday, September 20, 2011
    • Dessinez-moi un WizywigTuesday, September 20, 2011
    • WYSIWYG Problème: “Je veux pouvoir écrire du texte et ajouter des images, mais je ne sais pas écrire du HTML pour le faire.”Tuesday, September 20, 2011
    • WYSIWYG What You See Is What You GetTuesday, September 20, 2011
    • WYSIWYG Solutions apportées: • Donner à l’utilisateur une idée du résultat final de son intéraction • Facilite l’édition du contenu en ligne ainsi que sa manipulationTuesday, September 20, 2011
    • Dessinez-moi un Password Strength MeterTuesday, September 20, 2011
    • Password Strength Meter Problème: “Je veux pouvoir indiquer à mon utilisateur que son mot de passe est safe.”Tuesday, September 20, 2011
    • Password Strength MeterTuesday, September 20, 2011
    • Password Strength Meter Solutions apportées: • Indique clairement à l’utilisateur si le mot de passe est assez sécuritaire • Informe et sécurise l’utilisateurTuesday, September 20, 2011
    • Dessinez-moi un carousselTuesday, September 20, 2011
    • Caroussel Problème: “Je veux avoir une idée du contenu qu’offre ce site.”Tuesday, September 20, 2011
    • Caroussel Problème: “Je veux avoir une idée du contenu qu’offre ce site.” Attention! Personne ne s’exprime comme ça!!!Tuesday, September 20, 2011
    • CarousselTuesday, September 20, 2011
    • Caroussel Solutions apportées: • Permet d’économiser l’espace sur une page et d’offrir une série de contenu navigable • Facilite la promotion de contenu qui autrement n’aurait pas été visible à l’utilisateurTuesday, September 20, 2011
    • Dessinez-moi un fil d’arianeTuesday, September 20, 2011
    • Fil d’ariane a.k.a Breadcrumb Problème: “Je veux savoir où je suis dans ce site.”Tuesday, September 20, 2011
    • Fil d’ariane a.k.a BreadcrumbTuesday, September 20, 2011
    • Fil d’ariane a.k.a Breadcrumb Solutions apportées: • Permet à l’utilisateur de retrouver son chemin • Si l’utilisateur arrive sur la page par une recherche, il peut naviguer vers des sections principalesTuesday, September 20, 2011
    • Dessinez-moi un accordéonTuesday, September 20, 2011
    • Accordéon Problème: “Je veux pouvoir survoler l’information principale d’abord.” Attention! Personne ne s’exprime comme ça!!!Tuesday, September 20, 2011
    • AccordéonTuesday, September 20, 2011
    • AccordéonTuesday, September 20, 2011
    • Accordéon Solutions apportées: • Permet la navigation rapide et thématique • Permet d’afficher des options de navigation tout en ayant une interface épuréeTuesday, September 20, 2011
    • SprintTuesday, September 20, 2011
    • Dessinez-moi un menu déroulantTuesday, September 20, 2011
    • Menu déroulant aka dropdown menu (Select) Problème: “Je veux naviguer ce site facilement.”Tuesday, September 20, 2011
    • Menu déroulant aka dropdown menu (Select)Tuesday, September 20, 2011
    • Dessinez-moi un menu déroulant de navigationTuesday, September 20, 2011
    • Menu déroulant (nav) aka navigational dropdown menu Problème: “Je veux naviguer ce site facilement.”Tuesday, September 20, 2011
    • Menu déroulant (nav) aka navigational dropdown menuTuesday, September 20, 2011
    • Dessinez-moi un .toggle()Tuesday, September 20, 2011
    • Toggle Check Box vrs.Tuesday, September 20, 2011
    • Toggle Check Box vrs. l’un ou l’autre peut être l’un et l’autreTuesday, September 20, 2011
    • Arbo.Tuesday, September 20, 2011
    • Arbo. Web  site  :  Accueil Recherche Groupe  d’informa7on  A Groupe  d’informa7on  B Groupe  d’informa7on  C Groupe  d’informa7on  D Sec7on  B1 Sec7on  C1 Thèmes  communs Sous-­‐groupe  A1 Sous-­‐groupe  A2 Sous-­‐groupe  D1 Sous-­‐groupe  D2 Thèmes  1 Sec7on  B2 Sec7on  C2 Thèmes  2 Sec7on  A2 Sec7on  D1 Thèmes  3 Sec7on  C3 Sec7on  D1’ Thèmes  4 Forum  de   Communauté UGC conversa7onTuesday, September 20, 2011
    • Navigation principale L’objectif de cet exercice : ★ Organiser le contenu principal ★ S’addresser au 80% des utilisateurs ★ Avoir un objectif principale Web  site  :  Accueil Recherche Groupe  d’informa7on  A Groupe  d’informa7on  B Groupe  d’informa7on  C Groupe  d’informa7on  DTuesday, September 20, 2011
    • Navigation secondaireTuesday, September 20, 2011
    • Navigation secondaire L’objectif de cet exercice : ★ Trouver  l’informa7on  clé  à  travers  tout  le  site ★ Contenir  des  sec7ons  cachées  (les  meLre  de  l’avant) ★ Créer  des  liens  vers  les  sites  partenaires  (ou  des  sites  externes)Tuesday, September 20, 2011
    • Audit du contenuTuesday, September 20, 2011
    • Audit de contenu L’objectif de cet exercice : ★ Connaître le contenu ★ Créer des liens entre différentes sections ★ Comprendre la dynamique du site ★ Comprendre comment ce site ce construit ★ Regroupement des grands contenus ★ “Card sorting”Tuesday, September 20, 2011
    • Audit de contenu ★ Arborescence principale : Accueil, Société, musique, ... ★ Arborescence secondaire correspondant ★ Détail du contenu (type, mise à jour) ★ Détail des éléments répétitifs ou confondantsTuesday, September 20, 2011
    • Tri de carteTuesday, September 20, 2011
    • Tri de carte L’objectif de cet exercice : ★ Regrouper le contenu sous de grande catégorie ★ Permettre de classer les éléments de navigation ★ Créer ou découvrir de nouvelles catégorie lors de la réorganisation de l’arborescence d’un siteTuesday, September 20, 2011
    • Tri de carte Deux méthodes possibles: ★ Première: Inviter un groupe à classer par catégorie non définit les différentes parties de contenu d’un site ★ Deuxième: Inviter un groupe à classer selon des catégories définies les différentes parties de contenu d’un site http://www.boxesandarrows.com/view/card_sorting_a_definitive_guideTuesday, September 20, 2011
    • À vous de jouer!Tuesday, September 20, 2011
    • Atelier Design et organisation 1 http://www.maisoncorbeil.com Faire un audit de contenu détaillé Préparer les éléments pour un tri de carte en groupe la semaine prochaineTuesday, September 20, 2011