Staf 12 – Période 4: Architecture d’information Charline Poirier, PhD Ethnography/User research.

Présentation au sujet: "Staf 12 – Période 4: Architecture d’information Charline Poirier, PhD Ethnography/User research."— Transcription de la présentation:

1 Staf 12 – Période 4: Architecture d’information Charline Poirier, PhD Ethnography/User research

2 Phases de développement Conception Entretiens Observations Besoins de l’organisation Stratégie de l’organisation Divergences culturelles Analyse concurrentielle Architecture Extraction des contenus Classification des contenus Analyse des tâches et activités Production de scénarios Définition de la stratégie Construction Création de prototypes Usabilité Modifications du prototype Déploiement

3 Styles de sites web http://www.continental.com/http://www.dancearea.ch/ Charline Poirier, PhD Ethnography/User research

4 Styles de sites web http://www.continental.com/ Fonctionnel: Site organisé autour des activités des utilisateurs (verbes dans les menus) Souvent offre un service plutôt qu’un produit Sites interactifs et conviviaux. http://www.dancearea.ch/ Thématique: Site organisé autour de descriptions (noms dans les menus) Centré sur le sujet traité et non sur les actions des utilisateurs Charline Poirier, PhD Ethnography/User research

5 - + Niveau d’engagement de l’utilisatuer

6 Critères pour la classification Le but du site (Pourquoi?) L’architecture d’information (Comment l’information est-elle structurée et interreliée? ) La présentation des contenus (Où est l’emphase du site; comment on aborde l’utilisateur) Les activités possibles sur le site …..

7 Classifiez ces sites –http://www.tenbyten.org/10x10.htmlhttp://www.tenbyten.org/10x10.html –http://www.kartoo.com/http://www.kartoo.com/ –http://www.deviantart.com/http://www.deviantart.com/ –http://www.k10k.net/http://www.k10k.net/ –http://www.mirrorproject.com/http://www.mirrorproject.com/ –http://turnerclassicmovies.com/http://turnerclassicmovies.com/ –http://zed.cbc.ca/go.ZeD?page=homehttp://zed.cbc.ca/go.ZeD?page=home –http://www.bigfuntoys.com/http://www.bigfuntoys.com/ –http://www.netflix.com/Defaulthttp://www.netflix.com/Default –http://www.marthastewart.com/http://www.marthastewart.com/ –http://www.colette.fr/index.phphttp://www.colette.fr/index.php –http://www.thephaeton.co.uk/universe/index.phphttp://www.thephaeton.co.uk/universe/index.php –http://www.spellboundmovie.com/http://www.spellboundmovie.com/ –http://kidshealth.org/index.htmlhttp://kidshealth.org/index.html –http://www.village247.comhttp://www.village247.com –http://www.jobsearch2.jobinthebox.comhttp://www.jobsearch2.jobinthebox.com –http://www.samsys.com/http://www.samsys.com/ –http://www.britannica.com/http://www.britannica.com/ –http://www.cookps.act.edu.au/http://www.cookps.act.edu.au/ –http://www.benjaminmoore.com/index.asphttp://www.benjaminmoore.com/index.asp –http://www.amazon.fr/exec/obidos/tg/static/-/books/search/ref=cs_nav_sn_11/402-5116584-8389727http://www.amazon.fr/exec/obidos/tg/static/-/books/search/ref=cs_nav_sn_11/402-5116584-8389727 Charline Poirier, PhD Ethnography/User research

8 Types de sites - organisation Mosaique et image Métaphorique Newsletter Traditionnel Recherche Charline Poirier, PhD Ethnography/User research

9 Typologie d’architecture d’information Tout en un et séquentiel Hiérarchique –Etroit et profond –Large et sans profondeur –Expertise et cible –Narrative Réseau Recherche Charline Poirier, PhD Ethnography/User research

10 Typologies de l’information Charline Poirier, PhD Ethnography/User research Vitrine Catalogue Service Outils Interactions Le site vitrine met l’emphase sur la présentation de l’organisation Le site catalogue met l’emphase sur les produits Le site service met l’emphase sur les besoins d’information des utilisateurs Le site outils/interactions met l’enphase sur les actions des utilisateurs sur le site. www. dancearea.chwww.mossonline.comwww2.ac-lyon.fr/etab/ lycees/lyc-69/cchaplin/ svt/svtsite.html www. continental.com Thématique Utilisateur reçoit Functionnel Utilisateur fait

11 Comment choisir la bonne structure?

12 Types de modèles pour illustrer l’activité Modèles vont décrire 3 perspectives de l’activité: Objets: –Physiques –Environmentaux Actions: –Workflow Opérations: –Processus et séquences d’actions Charline Poirier, PhD Ethnography/User research

13 Le modèle d’un objet Motivation: Organiser sa vie Usage: Elastique qui sépare le passé et le présent Calendier sert d’alertes (L’agenda qui devient trop lourd signal des choses à faire) Structure: Séances Calendier Rappel To do list Holtzblatt, K. (1995) Representing Work for the Purpose of Design.

14 Le modèle d’un objet Information (contenu et forme) Décortiquer l’objet en parties Structure des parties La manipulation des objets –Usage informel –Caractéristiques physiques –Distinction entre certaines parties Charline Poirier, PhD Ethnography/User research

15 Réponses aux questions suivantes Comment les gens organisent-ils l’information? Quels sont les alertes et signaux qu’ils se donnent? Quelle est la relation entre les objets qui sont utilisés? Charline Poirier, PhD Ethnography/User research

16 Modèle physique Motivation: Minimiser les Interruptions Accès facile aux outils de travail Division du travail: Communication et coordination – espace publique/espace privé Espace travail Travail immédiat Holtzblatt, K. (1995) Representing Work for the Purpose of Design.

17 Le modèle physique Comment l’espace influence, facilite ou crée des difficultés à la réalisation de l’activité –Espace de l’activité –Structure de l’édifice Espace primaire et secondaire Espace publique et privé –Outils –Accès Charline Poirier, PhD Ethnography/User research

18 Modèle de flow Eléments importants qui constituent le flow sont: Personnes impliquées ou leurs rôles Actions Interactions Outils Charline Poirier, PhD Ethnography/User research

19 Modèle de flow Qui communique quoi à qui? Quels sont les rôles des utilisateurs? Comment les tâches sont-elles distribuées? Qui donne de l’aide? Avec qui les utilisateurs accomplissent-ils leurs tâches? A qui communiquent-ils les résultats de leurs activités? Quels sont les échanges qui sont formels et ceux qui sont informels?

20 Modèle de flow Holtzblatt, K. (1995) Representing Work for the Purpose of Design. Flèches: Mouvement d’information ou d’objets Cercles: acteurs Textes: actions Carrés: objets Flèches rouges: Cassures Ligne continue: formel Ligne brisée: Informel

21 Modèle de flow Coordination: Comment les utilisateurs se complémentent-ils? Comment les rôles et les responsabilités sont définis en pratique et comment les gens communiquent pour accomplir leur tâches et maintenir leurs sphères d’influence. Quels sont les rôles des utilisateurs? D’où viennent et où vont les objets? Quelles sont les activités formelles et informelles? Quel genre d’aide est-ce que les utilisateurs recherchent? Charline Poirier, PhD Ethnography/User research

22 Modèle de flow Holtzblatt, K. (1995) Representing Work for the Purpose of Design. Autour des rôles Cercles: rôles Carrés: actions Flèches: relations

23 Modèle de flow Holtzblatt, K. (1995) Representing Work for the Purpose of Design. Autour des rôles Cercles: rôles Carrés: actions Flèches: relations

24 Modèle séquentiel Représenter la séquence des actions et opérations qui sont nécessaires pour compléter une activité Intention Cause Ordre des opérations Indicateurs des relations entre les opérations et les individus Charline Poirier, PhD Ethnography/User research

25 Modèle séquentiel Groupement hiérarchique des opérations en actions Holtzblatt, K. (1995) Representing Work for the Purpose of Design.

26 Modèle séquentiel Notification des causes principales des actions Notification des motivations pour les opérations Illustration de l’enchainement des opérations et des choix possibles. Holtzblatt, K. (1995) Representing Work for the Purpose of Design.

27 Modèles servent à Illustrer les actions: –Modèle workflow Illustrer les opérations: –Modèle séquentiel Les outils: –Modèle des objets –Modèle de l’espace physique Charline Poirier, PhD Ethnography/User research

28 Production de scénarios Le scénario est utilisé pour: Décrire comment de vrais utilisateurs utiliseront le système. Identifier des manques dans nos connaissances des utilisateurs Etablir des priorités Etablir des relations entre fonctionnalités Communiquer avec ceux qui vont construire l’application Charline Poirier, PhD Ethnography/User research

29 Échéances pour les travaux 15 mars: Mapping des activités des utilisateurs 5 avril: Prototype - Mettre le prototype sur la page travaux. Pour la période 5 (11 et 12 avril), apportez une photocopie de toutes les pages de votre site ainsi que des photocopies de vos personas. Charline Poirier, PhD Ethnography/User research

30 Annexe Définition des types de sites web Etude sur les modes de consultation de site web Check-list pour l’élaboration des sites Charline Poirier, PhD Ethnography/User research

31 Site mosaique Contient plusieurs éléments visuels non libéllés – but est ludique (cherchez la clef d’organisation du site!) Le site donne l’impression d’être complex et sophistiqué Bien pour des sites axés sur l’expérience et l’exploration Charline Poirier, PhD Ethnography/User research

32 Site images Le centre du site contient des graphiques animés ou des images intéressantes Sites construits pour l’exploration Charline Poirier, PhD Ethnography/User research

33 Site métaphorique Sites Métaphoriques ou associatifs –Basé sur des métaphores Points forts: –Encourage le browsing Charline Poirier, PhD Ethnography/User research

34 Site Newsletter Page d’accueil avec le plus d’information et de liens possibles (portails). Site sur 3 colonnes Navigation primaire Contenu « éditorial » Liens contextuels Navigation locale Charline Poirier, PhD Ethnography/User research

35 Site traditionnel Sites les plus fréquents qui en sont venus à contenir les standars: Logo et bar de navigation sur la gauche Partie de contenu sur la droite Souvent « les dernières news » Excellent site pour b2b Charline Poirier, PhD Ethnography/User research

36 Site recherche Sites de recherche –Minimum de navigation hiérarchique –Basé sur la recherche Ce genre de site est bon pour: –Visiteurs qui savent exactement ce qu’ils cherchent Charline Poirier, PhD Ethnography/User research

37 Dans quel mode de consultation les gens visitent-ils le site? 1.Visiteur 2.Shopper 3.Dans le besoin 4.Moniteur 5.Travailleur Charline Poirier, PhD Ethnography/User research

38 1.Visiteur : Principe -découverte Charline Poirier, PhD Ethnography/User research

39 Caractéristiques du mode visiteur Navigation facile –Navigation organisée autour d’une métaphore spatiale –Orientation facilitée par des images et non des mots –La façon dont l’information est présentée porte elle-même une signification Objets peuvent être manipulés Accès multiples à l’information - Information peut être consultée rapidement – image ou animation –ou peu-être lue plus en détails L’information est révélée progressivement –Information est hiérarchisée du général au particulier Information est inhérent au contexte de l’activité: l’emphase est sur l’activité et non sur l’information. –Les processus sont concrets et contextualisés –Information est souvent particulière, factoïds Charline Poirier, PhD Ethnography/User research

40 Tout se voit d’un coup d’oeil

41 Information se groupe par activités www.HEB.com

42 Les produits sont présentés de façon familière www.mossonline.co m

43 L’information est hiérarchisée www.mossonline.co m

44 Multiples accès à l’information www.howstuffworks.c om

45 Information est visuelle www.ebay.co m

46 La présentation de l’information est elle-même la signification www.kartoo.co m

47 Processus est concret www.NYSE.co m

48 L’information est particulière www.NYSE.com

49 Recommandations Présenter l’information simplement – éviter les termes techniques Rendre l’accès à l’information rapide et facile Respecter les standards web Créer plusieurs façons d’accéder à l’information – éviter d’être trop concis Utiliser des couleurs vives pour la navigation Utiliser des polices visibles La page d’accueil doit révéler la richesse du site Utiliser des icônes pour accéder à l’information Charline Poirier, PhD Ethnography/User research

50 2.Shopper: Principe - sélection Charline Poirier, PhD Ethnography/User research

51 Caractéristiques du shopper Accès à des choix multiples Comparaison visuelle, descriptive, fonctionnelle de produits Outils d’assistance à la décision Possibilité de retrouver ses choix et ses préférences Charline Poirier, PhD Ethnography/User research

52 Calculateurs pour montrer les conséquences des décisions www.Quicken.co m

53 Comparaison www.Quicken.co m

54 Outils de comparaison www.kbb.com

55 Outils de prise de décision www.kbb.co m

56 Facilité de création des axes de comparaison www.kbb.co m

57 Comparaison www.kbb.co m

58 Définition des critères de sélection www.kbb.co m

59 Recommandations Le langage doit être professionnel et technique Assurez-vous que l’information que vous proposez est comparable à l’information sur d’autres sites Assurez-vous que l’information est courante Rendez possible le bookmark Offrez de l’espace personnel Offrez des outils de sélection et de comparaison

60 3.Aide: Principe - contacter Charline Poirier, PhD Ethnography/User research

61 Caractéristiques de contacter Création de familiarité: –Personnage est un(e) vendeur(se) –Reproduit l’état d’esprit de l’utilisateur sous forme de questions Aide est centré sur la reconnaissance d’un context. Aide est un processus Aide est catégorisée par types de support Charline Poirier, PhD Ethnography/User research

62 Questions/réponses www.NYSE.co m

63 Catégorisation de l’aide www.NYTimes.com

64 Présentation du processus en phases www.NYTimes.com

65 Anthropomorphisme de l’aide www.mossonline.com

66 Aide est contextualisée www.NYSE.com

67 Recommandations L’aide doit répondre à des questions spécifiques Grouper tous les contacts Anthropomorphisez l ’ aide pour qu ’ elle appraisse familière Charline Poirier, PhD Ethnography/User research

68 4.Moniteur: Principe - observation Charline Poirier, PhD Ethnography/User research

69 Caractéristiques de l’observation Information est présentée de façon hiérarchique - division très nette du background/foreground Offrent plusieurs vues de la même information Information est mise en relief Information est accessible avec un click Charline Poirier, PhD Ethnography/User research

70 Caractéristiques de l’observation Présentation de l’information est supportée par une métaphore connue Personnalisation Charline Poirier, PhD Ethnography/User research

71 L’information se voit en un clin d’oeil www.eBay.co m

72 On peut recevoir des alertes www.eBay.co m

73 Accès à l’information à différents niveaux www.NYSE.co m

74 Vues différentes de la même information www.NYSE.com

75 Sources multiples d’information www.NYSE.co m

76 Information accessible avec 1 click Peut accéder partout dans le site directement www.NYSE.com

77 5.Travailleur: Principe - action Charline Poirier, PhD Ethnography/User research

78 Caractéristiques de l’action Choix limités Processus est divisé par phases: –Description –Choix –Action C’est l’utilisateur qui a le contrôle Charline Poirier, PhD Ethnography/User research

79 Choix limité d’actions www.easyjet.com

80 Recommandations Donnez du feedback lorsqu ’ une action est complètée Découpez les actions en stages n’excédant pas 3. Charline Poirier, PhD Ethnography/User research

81 Points de décision Présentation de soi Choix du style Choix des techniques du style Stratégie de communication Ton et expression d’émotions Contenus Présentation de l’utilisateur Déroulement des activités Activités Points d’accès à l’info Charline Poirier, PhD Ethnography/User research

82 Processus de construction Information secondaire? –Menus –Contats –Site map –Ce site –FAQs –Search –Liens, etc. Charline Poirier, PhD Ethnography/User research

83 Checklist Nomenclature: –Est-ce que le langage est approprié pour notre audience (personnalisé ou neutre)? –Est-ce que la nomenclature est précise et informative? –Est-ce que certaines de nos catégorisations peuvent avoir des interprétations multiples? Contenu: –Est-ce que nos catégories sont cohérentes? –Est-ce que le contenu suit les processus de nos visiteurs? –Est-ce qu’il y a des catégories de contenus qui n’ont pas de classes? –Est-ce que le visiteur peut voir immédiatement ce qui est nouveau sur notre site? –Est-ce que nous avons des lieux communs avec nos utilisateurs? –Est-ce que nous avons établie la confiance? Navigation: –Est-ce que le site est trop large (pas suffisamment de profondeur)? –Est-ce que le site est trop profond? –Est-ce qu’il y a des répétitions des contenus? –Est-ce que nous pouvons réduire le nombre de clicks? –Avons-nous pourvu pour les différents styles d’utilisateurs? –Est-ce que l’information est bien liée aux autres parties du site?

84 Checklist Pages individuelles: –Est-ce que toutes les pages ont de l’information ou sont-elles des menus déguisés? –Est-ce qu’il y a des pages qui ont été créé artificiellement juste pour avoir un site complet? Buts et expansion –Est-ce que la structure sert nos buts les plus importants? –Est-ce que le site facilite les buts de nos utilisateurs? –Est-ce que les utilisateurs vont vouloir revenir sur le site? –Est-ce que le site est flexible au changement? Charline Poirier, PhD Ethnography/User research