Arborescence et interface

Architecture de l’information et réseaux (EDM 2530) – Automne 2012 – UQAM
Cours / 04
Arborescence et interface
Geoffroi Garon et Martin Lessard
Déroulement Partie 1
Ab
Arborescence
Ev1
Pause
Partie 2
Interface
Ev1
1
Ab
Arborescence
(
(structure)
)
Définition
Une classification ou système de classification est un système organisé et hiérarchisé de
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
organiser les connaissances et le travail de chacun au sein de l'ensemble. Classer les objets ou les connaissances c'est
connaissances, c
est dire comment ils/elles se dire comment ils/elles se
situent les un(e)s par rapport aux autres. Définition
Une arborescence désigne une organisation des données de manière logique et hiérarchisée
données de manière logique et hiérarchisée utilisant une structure d’arbre. Cette organisation rend plus efficace la consultation et la
rend plus efficace la consultation et la manipulation de l’information et des connaissances.
connaissances
Définition Généalogie
http://en.wikipedia.org/wiki/File:900‐158_Ahnentafel_Herzog_Ludwig.jpg
Généalogie
http://piccsy.com/2012/06/geneology/
Généalogie
Système de Système
de
classification des industries de
industries de l'Amérique du Nord (SCIAN)
Nord (SCIAN)
• Créer en 1997
• Canada, États‐Unis et Mexique
Économique
Système de classification des industries de l'Amérique du Nord (SCIAN) Canada 2012
Structure de la classification
Code Secteur
Agriculture, foresterie, pêche et chasse
11
21
Extraction minière
minière, exploitation en carrière,
carrière et extraction de pétrole et de gaz
22
Services publics
23
Construction
31-33 Fabrication
41
Commerce de gros
44-45 Commerce de détail
48-49 Transport et entreposage
51
Industrie de l'information et industrie culturelle
Finance et assurances
52
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
d hébergement et de restauration
81
Autres services (sauf les administrations publiques)
91
Administrations publiques
5 280 employés (janvier 2011)
41 731 étudiants (octobre 2011)
1049 professeurs
1049
professeurs
29 maîtres de langues
2193 chargés de cours
112 cadres
112 cadres
1897 employés de soutien
34 043 au 1er cycle
34
043 au 1er cycle
5 609 au 2e cycle
1 673 au 3e cycle
406 a dite rs stagiaires etc
406 auditeurs, stagiaires, etc.
2741 étudiants étrangers
Organisation
Organisation
Organisation
Tableau périodique des éléments
Science
http://fr.wikipedia.org/wiki/Tableau_p%C3%A9riodique_des_%C3%A9l%C3%A9ments
Tableau périodique des éléments
Science
Définition Au niveau des environnements numériques la classification
numériques, la classification
est transposée en
p
système de navigation.
Définition Typologie de navigation
• Séquentielle
Sé
ti ll
• Hiérarchique
• Arborescente
Typologie de navigation
Séquentielle
1
2
3
Le seul choix est d’avancer
Le seul choix est d’avancer
Ex. Pilote d’avion, jeux vidéo, inscription
Typologie de navigation
Hiérarchique
A
B
A
C
B
A
B
Changement vertical d’une catégorie à l’autre
Ex. Ordinateur
Ex. Ordinateur
Typologie de navigation
Arborescente
A
B
A
C
B
A
B
Changement de catégorie sans contrainte Ex. Site Web
Ex. Site Web
Illustrer la hiérarchie
Relation parent‐enfant
A
Accueil
B
A
Sections
C
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.
Exemple d’arborescence de site
Exemple d’arborescence de site
Outils pour créer des arborescences
Quels outils ?
l
l ?
Outils pour créer des arborescences
Classique
Crayon + papier
y
p p
Logiciels de dessin vectoriel
Adobe Illustrator ou Inkscape http://inkscape org
Adobe Illustrator ou Inkscape http://inkscape.org
Logiciels d’édition
Microsoft Visio ou Dia https://live.gnome.org/Dia/
i
f ii
i h
//l
/ /
MindManager http://www.mindjet.com/products/mindmanager
Freemind http://freemind.sourceforge.net
p
g
Microsoft Office (Word, Powerpoint)
Inspiration (http://www.inspiration.com/) démo
EV #1a ‐ Arborescence
Équipe de 2
Reproduire l’arborescence de 2 sites Web
Pondération : 10% (total 20%)
Pondération : 10% (total 20%)
Critères d’évaluation :
• Correspondance avec le site
• Qualité de la présentation
• Clarté / Lisibilité
Clarté / Lisibilité
• Standardisation des arborescences
(page couverture avec noms et codes permanents)
EV #1
Liste des sites Web
• Mont Saint‐Sauveur
Mont Saint‐Sauveur
http://www.montsaintsauveur.com/
• Mesbobettes.ca
http://www.mesbobettes.ca/
p //
esbobe es ca/
• Cascades
http://www.cascades.com/EmballageIndustriel/
• Écomobile
http://www.ecomobile.gouv.qc.ca/fr/index.php
• Juste pour rire
Juste pour rire
http://www.hahaha.com/fr
• Espace.mu
http://www.espace.mu/
p //
espace u/
• Épatante patate
http://epatantepatate.ca/
• NTE
http://www.nte.qc.ca/
Pause
I t f
Interface
(i
(interaction)
i )
Interface (IHM)
Interface homme ‐ machine EEnsemble des dispositifs matériels et logiciels permettant à un bl d di
itif
té i l t l i i l
tt t à
utilisateur d’interagir avec un système interactif I
Interaction homme ‐
i h
machine hi
Ensemble des aspects de la conception, de l’implémentation et de ll’évaluation
évaluation des systèmes informatiques interactifs des systèmes informatiques interactifs
http://liris.cnrs.fr/stephanie.jean‐daubias/
Interface Homme‐machine (IHM)
1945‐1970
•
•
•
•
•
Dispositifs d’entrée‐sortie limités f ’
é
l
é
Perforateurs/lecteurs de cartes Tableaux de bord (voyants) ( y
)
Imprimantes Langages de commandes 1970‐1980
Nouveaux dispositifs d
Nouveaux
dispositifs d’entrée‐sortie
entrée sortie • 1963 : Écran graphique et stylo optique • 1968 : Première souris • 1980 : Applications grand public 1980 : Applications grand public
http://liris.cnrs.fr/stephanie.jean‐daubias/
Interface Homme‐machine (IHM)
Dispositifs d’entrée
Clavier (azerty, Dvorak) Souris, trackball, joystick, pavé tactile Reconnaissance de parole Écran tactile Entrée visuelle
Entrée visuelle 2D : écran tactiles, crayons optiques Reconnaissance de tracé Reconnaissance d’écriture
Reconnaissance d’écriture 3D : capteurs de position et de direction http://liris.cnrs.fr/stephanie.jean‐daubias/
Interface Homme‐machine (IHM)
http://blueskyrotor.com/performance/illustrations/Kamov/Ka_32‐Ka_32‐A11BC/cockpit_front_panel.jpg
Interface Homme‐machine (IHM)
Les interfaces sont aussi mobile, nomade, ubiquitaire, vestimentaire, persistant, i
i
i
invisible etc
invisible, etc.
Interface Homme‐machine (IHM)
http://www.youtube.com/watch?feature=player_
embedded&v=YrtANPtnhyg
Interface Homme‐machine (IHM)
Sphero
http://www.gosphero.com/
Montre verte
http://www.gosphero.com/
http://www.terminauxalternatifs.fr/2012/08/31/panorama‐des‐terminaux‐alternatifs‐2012/
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 en lien t
d
d’
it W b li
avec la recherche sur les usagers (persona), les objectifs (affaires) et le contenu (texte, image, audio, vidéo).
Fil de fer (Wireframe)
Fil de fer (Wireframe)
UX
UX
http://www.webdesignerdepot.com/2012/06/ui‐vs‐ux‐whats‐the‐difference/
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
Interface Web
Outils pour créer fils de fer
Classique
Crayon + papier
y
p p
Logiciels d’édition
Axure http://www axure com/
Axure http://www.axure.com/
Services en ligne
Cacoo https://cacoo.com
h
//
Framebox http://framebox.org
http://www.fuelyourcreativity.com/17‐great‐wireframing‐tools‐for‐
web‐designers/
EV #1b – Fil de fer
Équipe de 2
Reproduire le fil de fer de 2 sites Web
Pondération : 10% (total de 20%)
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
EV #1
Liste des sites Web
• Mont Saint‐Sauveur
Mont Saint‐Sauveur
http://www.montsaintsauveur.com/
• Mesbobettes.ca
http://www.mesbobettes.ca/
p //
esbobe es ca/
• Cascades
http://www.cascades.com/EmballageIndustriel/
• Écomobile
http://www.ecomobile.gouv.qc.ca/fr/index.php
• Juste pour rire
Juste pour rire
http://www.hahaha.com/fr
• Espace.mu
http://www.espace.mu/
p //
espace u/
• Épatante patate
http://epatantepatate.ca/
• NTE
http://www.nte.qc.ca/
EV #1b – Fil de fer
Pour chacun • Copie
Copie d
d’écran
é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)
Exemple
Exemple
Publicité
Connexion
Logo
Menu contextuel
Menu principal
IInformation f
i
Temps réel
Contenu vidéos récentes
Publicité
Action
inscription
Action
inscription
Exemple
Publicité
Connexion
Logo
Menu principal
Menu contextuel
IInformation f
i
Temps réel
Contenu vidéos récentes
Publicité
Action
inscription
Action
inscription
Évaluation d’interface
On cherche à répondre à 3 questions
1. Pourquoi? Quelles sont les intentions, les buts.
2. Quoi? Quels objets, commandes, événements.
Quoi? Quels objets commandes événements
3. Comment? Méthodes, processus, étapes.
Évaluation d’interface
Objectifs cognitifs de la page d’accueil
•
Rendre le but du site clair:
C’est le site de qui? et que pouvons‐nous y faire?
es e s e de qu e que pou o s ous y a e
•
Aider les usagers à faire ce qu’ils doivent faire
Mettre ll’emphase
Mettre
emphase sur le but premier du site: il faut éviter toute ambiguïté
sur le but premier du site: 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.
Ressources
Le site Web d’accompagnement
www.architecturedelinformation.wordpress.com
Information, présentations (PDF), liens pertinents, etc.
Nous joindre
Geoffroi Garon
Geoffroi
Garon
[email protected]
www.geoffroigaron.com
Martin Lessard
[email protected]
i l
d@
il
www.martinlessard.com
*Par courriel, ajoutez le mot‐clé EDM2530