Arborescence et interface

Transcription

1 Architecture de l information et réseaux (EDM 2530) Automne 2012 UQAM Cours / 04 Arborescence et interface Geoffroi Garon et Martin Lessard

2 Déroulement Partie 1 Ab Arborescence Ev1 Pause Partie 2 Interface Ev1

3 Ab Arborescence (structure)

4 Définition Une classification ou système de classification est un système organisé et hiérarchisé de catégorisation d' «objets». Les classifications sont des outils essentiels pour organiser les connaissances et le travail de chacun au sein de l'ensemble. Classer les objets ou les connaissances, c'est cest dire comment ils/elles se situent les un(e)s par rapport aux autres.

5 Définition Une arborescence désigne une organisation des données de manière logique et hiérarchisée utilisant une structure d arbre. Cette organisation rend plus efficace la consultation et la manipulation de l information et des connaissances.

6 Définition Généalogie 158_Ahnentafel_Herzog_Ludwig.jpg

7 Généalogie

8 Généalogie

9 Système de classification des industries de l'amérique du Nord (SCIAN) Créer en 1997 Canada, États Unis et Mexique Économique

10 Système de classification des industries de l'amérique du Nord (SCIAN) Canada 2012 Structure de la classification Code Secteur 11 Agriculture, foresterie, pêche et chasse 21 Extraction minière, exploitation en carrière, et extraction de pétrole et de gaz 22 Services publics 23 Construction Fabrication 41 Commerce de gros Commerce de détail Transport et entreposage 51 Industrie de l'information et industrie culturelle 52 Finance et assurances 53 Services immobiliers et services de location et de location à bail 54 Services professionnels, scientifiques et techniques 55 Gestion de sociétés et d'entreprises 56 Services administratifs, services de soutien, services de gestion des déchets et services d'assainissement 61 Services d'enseignement 62 Soins de santé et assistance sociale 71 Arts, spectacles et loisirs 72 Services d'hébergement et de restauration 81 Autres services (sauf les administrations publiques) 91 Administrations publiques

11 5 280 employés (janvier 2011) 1049 professeurs 29 maîtres de langues 2193 chargés de cours 112 cadres 1897 employés de soutien étudiants (octobre 2011) au 1er cycle au 2e cycle au 3e cycle 406 auditeurs, stagiaires, etc étudiants étrangers Organisation

12 Organisation

13 Organisation

14 Tableau périodique des éléments Science

15 Tableau périodique des éléments Science

16 Définition Au niveau des environnements numériques, la classification est transposée en système de navigation.

17 Définition Typologie de navigation Séquentielle Hiérarchique Arborescente

18 Typologie de navigation Séquentielle Le seul choix est d avancer Le seul choix est d avancer Ex. Pilote d avion, jeux vidéo, inscription

19 Typologie de navigation Hiérarchique A B C A B A B Changement vertical d une catégorie à l autre Ex. Ordinateur

20 Typologie de navigation Arborescente A B C A B A B Changement de catégorie sans contrainte Ex. Site Web

21 Illustrer la hiérarchie Relation parent enfant A Accueil B C Sections A B A B Pages L arborescence illustre les relations nécessaires L arborescence illustre les relations nécessaires. Une hiérarchie de l expérience usager.

22 Exemple d arborescence de site

23 Exemple d arborescence de site

24 Outils pour créer des arborescences Quels outils?

25 Outils pour créer des arborescences Classique Crayon + papier pp Logiciels de dessin vectoriel Adobe Illustrator ou Inkscape Logiciels d édition Microsoft Visio ii ou Dia / / MindManager Freemind Microsoft Office (Word, Powerpoint) Inspiration ( démo

26 EV #1a Arborescence Équipe de 2 Reproduire l arborescence de 2 sites Web Pondération : 10% (total 20%) Critères d évaluation : Correspondance avec le site Qualité de la présentation Clarté / Lisibilité Standardisation des arborescences (page couverture avec noms et codes permanents)

27

28

29

30

31

32

33

34

35 EV #1 Liste des sites Web Mont Saint Sauveur Mesbobettes.ca Juste pour rire Espace.mu p// esca/ p// Cascades Écomobile Épatante patate NTE

36 Pause

37 Interface (interaction) i

38 Interface (IHM) Interface homme machine Ensemble des dispositifs itif matériels et logiciels i l permettant t à un utilisateur d interagir avec un système interactif Interaction homme machine Ensemble des aspects de la conception, de l implémentation et de l évaluation des systèmes informatiques interactifs daubias/

39 Interface Homme machine (IHM) Dispositifs d entrée sortie limités Perforateurs/lecteurs de cartes Tableaux de bord (voyants) Imprimantes Langages de commandes Nouveaux dispositifs d entrée sortie dentréesortie 1963 : Écran graphique et stylo optique 1968 : Première souris 1980 : Applications grand public daubias/

40 Interface Homme machine (IHM) Dispositifs d entrée Clavier (azerty, Dvorak) Souris, trackball, joystick, pavé tactile Reconnaissance de parole Écran tactile Entrée visuelle 2D : écran tactiles, crayons optiques Reconnaissance de tracé Reconnaissance d écriture 3D : capteurs de position et de direction daubias/

41 Interface Homme machine (IHM) Ka_32 A11BC/cockpit_front_panel.jpg

42 Interface Homme machine (IHM) Les interfaces sont aussi mobile, nomade, ubiquitaire, vestimentaire, i persistant, invisible, etc.

43

44 Interface Homme machine (IHM) embedded&v=yrtanptnhyg

45 Interface Homme machine (IHM)

46 Sphero

47 Montre verte

48 des terminaux alternatifs 2012/

49 Fil de fer (Wireframe)? Hiérarchie et articulation entre des objets informationels C est une représentation visuelle du contenu des pages d un site Web Wben lien avec la recherche sur les usagers (persona), les objectifs (affaires) et le contenu (texte, image, audio, vidéo).

50 Fil de fer (Wireframe)

51 Fil de fer (Wireframe)

52 UX

53 UX vs ux whats the difference/

54 Fil de fer (Wireframe) Meilleures pratiques Simplicité p Travailler avec des tons de gris Fil de fer en lien avec une arborescence Garder en tête les objectifs Créer une version grandeur réelle Valider le contenu avant

55 Interface Web

56 Outils pour créer fils de fer Classique Crayon + papier pp Logiciels d édition Axure Services en ligne Cacoo Framebox great wireframing tools forweb designers/

57 EV #1b Fil de fer Équipe de 2 Reproduire le fil de fer de 2 sites Web Pondération : 10% (total de 20%) Consigne : g Choisissez 1 qui est selon vous la meilleure interface Choisissez 1 qui est selon vous la moins bonne interface

58 EV #1 Liste des sites Web Mont Saint Sauveur Mesbobettes.ca Juste pour rire Espace.mu p// esca/ p// Cascades Écomobile Épatante patate NTE

59 EV #1b Fil de fer Pour chacun Copie d écran décran Fil de fer détaillé basé sur la copie d écran Indiquez quelle est l action principale (encadrez en gras ou avec une flèche) Décrivez en 1/2 page (min) ou 1 page (max) pourquoi l interface est la meilleure (ou la moins bonne) et proposez une amélioration (justifier) ou expliquer un défaut (justifier) Critères d évaluation : Correspondance avec le site Qualité de la présentation Clarté / Lisibilité Cohérence de l argumentation (page couverture avec noms et codes permanents)

60 Exemple

61 Exemple Logo Menu principal Publicité Connexion Menu contextuel Information Temps réel Contenu vidéos récentes Publicité Action inscription Action inscription

62 Exemple Publicité Logo Connexion Menu principal Menu contextuel Information Temps réel Contenu vidéos récentes Publicité Action inscription Action inscription

63 Évaluation d interface On cherche à répondre à 3 questions 1. Pourquoi? Quelles sont les intentions, les buts. 2. Quoi? Quels objets, commandes, événements. 3. Comment? Méthodes, processus, étapes.

64 Évaluation d interface Objectifs cognitifs de la page d accueil Rendre le but du site clair: C est le site ede qui? et que pouvons nous o ous y faire? Aider les usagers à faire ce qu ils doivent faire Mettre l emphase sur le butpremier dusite: il faut éviter toute ambiguïté Ce que l usager doit faire sur le site, il faut lui permettre de le faire dès l accueil (entre 1 et 4 actions). Faire comprendre ce que le site offre comme contenu: donnez un portrait d ensemble. Montrer un exemple de contenu, ne faites pas seulement l écrire: soyez concret, montrer le meilleur ou le plus récent.

65 Ressources Le site Web d accompagnement Information, présentations (PDF), liens pertinents, etc.

66 Nous joindre Geoffroi Garon Martin Lessard il *Par courriel, ajoutez le mot clé EDM2530