Arborescence et interface - Geoffroi Garon.
Arborescence et interface - Geoffroi Garon.
Arborescence et interface - Geoffroi Garon.
Create successful ePaper yourself
Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.
Architecture de l’information <strong>et</strong> réseaux (EDM 2530) – Automne 2012 –UQAM<br />
Cours / 04<br />
<strong>Arborescence</strong> <strong>et</strong> <strong>interface</strong><br />
<strong>Geoffroi</strong> <strong>Garon</strong> <strong>et</strong> Martin Lessard
Déroulement<br />
Partie 1<br />
Ab <strong>Arborescence</strong><br />
Ev1<br />
Pause<br />
Partie 2<br />
Interface<br />
Ev1
Ab <strong>Arborescence</strong><br />
(structure)
Définition<br />
Une classification ou système de classification est<br />
un système organisé <strong>et</strong> hiérarchisé de<br />
catégorisation d' « obj<strong>et</strong>s ».<br />
Les classifications sont des outils essentiels pour<br />
organiser les connaissances <strong>et</strong> le travail de chacun<br />
au sein de l'ensemble. Classer les obj<strong>et</strong>s ou les<br />
connaissances, c'est cest dire comment ils/elles se<br />
situent les un(e)s par rapport aux autres.
Définition<br />
Une arborescence désigne une organisation des<br />
données de manière logique <strong>et</strong> hiérarchisée<br />
utilisant une structure d’arbre. C<strong>et</strong>te organisation<br />
rend plus efficace la consultation <strong>et</strong> la<br />
manipulation de l’information <strong>et</strong> des<br />
connaissances.
Définition<br />
Généalogie<br />
http://en.wikipedia.org/wiki/File:900‐158_Ahnentafel_Herzog_Ludwig.jpg
Généalogie<br />
http://piccsy.com/2012/06/geneology/
Généalogie
Système de<br />
classification des<br />
industries de<br />
l'Amérique du<br />
Nord (SCIAN)<br />
• Créer en 1997<br />
• Canada, États‐Unis<br />
<strong>et</strong> Mexique<br />
Économique
Système de classification des industries de<br />
l'Amérique du Nord (SCIAN) Canada 2012<br />
Structure de la classification<br />
Code Secteur<br />
11 Agriculture, foresterie, pêche <strong>et</strong> chasse<br />
21 Extraction minière, exploitation en carrière, <strong>et</strong> extraction de pétrole <strong>et</strong> de gaz<br />
22 Services publics<br />
23 Construction<br />
31-33 Fabrication<br />
41 Commerce de gros<br />
44-45 Commerce de détail<br />
48-49 Transport <strong>et</strong> entreposage<br />
51 Industrie de l'information <strong>et</strong> industrie culturelle<br />
52 Finance <strong>et</strong> assurances<br />
53 Services immobiliers <strong>et</strong> services de location <strong>et</strong> de location à bail<br />
54 Services professionnels, scientifiques <strong>et</strong> techniques<br />
55 Gestion de sociétés <strong>et</strong> d'entreprises<br />
56 Services administratifs, services de soutien, services de gestion des déch<strong>et</strong>s<br />
<strong>et</strong> services d'assainissement<br />
61 Services d'enseignement<br />
62 Soins de santé <strong>et</strong> assistance sociale<br />
71 Arts, spectacles <strong>et</strong> loisirs<br />
72 Services d'hébergement <strong>et</strong> de restauration<br />
81 Autres services (sauf les administrations publiques)<br />
91 Administrations publiques
5 280 employés (janvier 2011)<br />
1049 professeurs<br />
29 maîtres de langues<br />
2193 chargés de cours<br />
112 cadres<br />
1897 employés de soutien<br />
41 731 étudiants (octobre 2011)<br />
34 043 au 1er cycle<br />
5 609 au 2e cycle<br />
1 673 au 3e cycle<br />
406 auditeurs, stagiaires, <strong>et</strong>c.<br />
2741 étudiants étrangers<br />
Organisation
Organisation
Organisation
Tableau périodique des éléments<br />
Science<br />
http://fr.wikipedia.org/wiki/Tableau_p%C3%A9riodique_des_%C3%A9l%C3%A9ments
Tableau périodique des éléments<br />
Science
Définition<br />
Au niveau des environnements<br />
numériques, la classification<br />
est transposée en<br />
système de navigation.
Définition<br />
Typologie de navigation<br />
• Séquentielle<br />
• Hiérarchique<br />
• Arborescente
Typologie de navigation<br />
Séquentielle<br />
1 2 3<br />
Le seul choix est d’avancer<br />
Le seul choix est d’avancer<br />
Ex. Pilote d’avion, jeux vidéo, inscription
Typologie de navigation<br />
Hiérarchique<br />
A<br />
B<br />
C<br />
A B A B<br />
Changement vertical d’une catégorie à l’autre<br />
Ex. Ordinateur
Typologie de navigation<br />
Arborescente<br />
A<br />
B<br />
C<br />
A B A B<br />
Changement de catégorie sans contrainte<br />
Ex. Site Web
Illustrer la hiérarchie<br />
Relation parent‐enfant<br />
A<br />
Accueil<br />
B C<br />
Sections<br />
A B A B<br />
Pages<br />
L’arborescence illustre les relations nécessaires<br />
Larborescence illustre les relations nécessaires.<br />
Une hiérarchie de l’expérience usager.
Exemple d’arborescence de site
Exemple d’arborescence de site
Outils pour créer des arborescences<br />
Quels outils ?
Outils pour créer des arborescences<br />
Classique<br />
Crayon + papier pp<br />
Logiciels de dessin vectoriel<br />
Adobe Illustrator ou Inkscape http://inkscape.org<br />
Logiciels d’édition<br />
Microsoft Visio ii ou Dia https://live.gnome.org/Dia/<br />
/ /<br />
MindManager http://www.mindj<strong>et</strong>.com/products/mindmanager<br />
Freemind http://freemind.sourceforge.n<strong>et</strong><br />
Microsoft Office (Word, Powerpoint)<br />
Inspiration (http://www.inspiration.com/) démo
EV #1a ‐ <strong>Arborescence</strong><br />
Équipe de 2<br />
Reproduire l’arborescence de 2 sites Web<br />
Pondération : 10% (total 20%)<br />
Critères d’évaluation :<br />
• Correspondance avec le site<br />
• Qualité de la présentation<br />
• Clarté / Lisibilité<br />
• Standardisation des arborescences<br />
(page couverture avec noms <strong>et</strong> codes permanents)
EV #1<br />
Liste des sites Web<br />
• Mont Saint‐Sauveur<br />
http://www.montsaintsauveur.com/<br />
• Mesbob<strong>et</strong>tes.ca<br />
• Juste pour rire<br />
http://www.hahaha.com/fr<br />
• Espace.mu<br />
http://www.mesbob<strong>et</strong>tes.ca/ p//<br />
esca/<br />
http://www.espace.mu/<br />
p// • Cascades<br />
http://www.cascades.com/EmballageIndustriel/<br />
• Écomobile<br />
http://www.ecomobile.gouv.qc.ca/fr/index.php<br />
• Épatante patate<br />
http://epatantepatate.ca/<br />
• NTE<br />
http://www.nte.qc.ca/
Pause
Interface<br />
(interaction) i
Interface (IHM)<br />
Interface homme ‐ machine<br />
Ensemble des dispositifs itif matériels <strong>et</strong> logiciels i l perm<strong>et</strong>tant t à un<br />
utilisateur d’interagir avec un système interactif<br />
Interaction homme ‐ machine<br />
Ensemble des aspects de la conception, de l’implémentation <strong>et</strong> de<br />
l’évaluation des systèmes informatiques interactifs<br />
http://liris.cnrs.fr/stephanie.jean‐daubias/
Interface Homme‐machine (IHM)<br />
1945‐1970<br />
• Dispositifs d’entrée‐sortie limités<br />
• Perforateurs/lecteurs de cartes<br />
• Tableaux de bord (voyants)<br />
• Imprimantes<br />
• Langages de commandes<br />
1970‐1980<br />
Nouveaux dispositifs d’entrée‐sortie<br />
dentréesortie<br />
• 1963 : Écran graphique <strong>et</strong> stylo optique<br />
• 1968 : Première souris<br />
• 1980 : Applications grand public<br />
http://liris.cnrs.fr/stephanie.jean‐daubias/
Interface Homme‐machine (IHM)<br />
Dispositifs d’entrée<br />
Clavier (azerty, Dvorak)<br />
Souris, trackball, joystick, pavé tactile<br />
Reconnaissance de parole<br />
Écran tactile<br />
Entrée visuelle<br />
2D : écran tactiles, crayons optiques<br />
Reconnaissance de tracé<br />
Reconnaissance d’écriture<br />
3D : capteurs de position <strong>et</strong> de direction<br />
http://liris.cnrs.fr/stephanie.jean‐daubias/
Interface Homme‐machine (IHM)<br />
http://blueskyrotor.com/performance/illustrations/Kamov/Ka_32‐Ka_32‐A11BC/cockpit_front_panel.jpg
Interface Homme‐machine (IHM)<br />
Les <strong>interface</strong>s sont aussi mobile,<br />
nomade, ubiquitaire,<br />
vestimentaire, i persistant,<br />
invisible, <strong>et</strong>c.
Interface Homme‐machine (IHM)<br />
http://www.youtube.com/watch?feature=player_<br />
embedded&v=YrtANPtnhyg
Interface Homme‐machine (IHM)
Sphero<br />
http://www.gosphero.com/
Montre verte<br />
http://www.gosphero.com/
http://www.terminauxalternatifs.fr/2012/08/31/panorama‐des‐terminaux‐alternatifs‐2012/
Fil de fer (Wireframe) ?<br />
Hiérarchie <strong>et</strong> articulation entre des<br />
obj<strong>et</strong>s informationels<br />
C’est une représentation visuelle du<br />
contenu des pages d’un site Web Wben lien<br />
avec la recherche sur les usagers (persona),<br />
les objectifs (affaires) <strong>et</strong> le contenu (texte,<br />
image, audio, vidéo).
Fil de fer (Wireframe)
Fil de fer (Wireframe)
UX<br />
http://www.webdesignerdepot.com/2012/06/ui‐vs‐ux‐whats‐the‐difference/
Fil de fer (Wireframe)<br />
Meilleures pratiques<br />
• Simplicité<br />
p<br />
• Travailler avec des tons de gris<br />
• Fil de fer en lien avec une arborescence<br />
• Garder en tête les objectifs<br />
• Créer une version grandeur réelle<br />
• Valider le contenu avant
Interface Web
Outils pour créer fils de fer<br />
Classique<br />
Crayon + papier pp<br />
Logiciels d’édition<br />
Axure http://www.axure.com/<br />
Services en ligne<br />
Cacoo https://cacoo.com<br />
Framebox http://framebox.org<br />
http://www.fuelyourcreativity.com/17‐great‐wireframing‐tools‐forweb‐designers/
EV #1b –Fil de fer<br />
Équipe de 2<br />
Reproduire le fil de fer de 2 sites Web<br />
Pondération : 10% (total de 20%)<br />
Consigne : g<br />
• Choisissez 1 qui est selon vous la meilleure <strong>interface</strong><br />
• Choisissez 1 qui est selon vous la moins bonne <strong>interface</strong>
EV #1<br />
Liste des sites Web<br />
• Mont Saint‐Sauveur<br />
http://www.montsaintsauveur.com/<br />
• Mesbob<strong>et</strong>tes.ca<br />
• Juste pour rire<br />
http://www.hahaha.com/fr<br />
• Espace.mu<br />
http://www.mesbob<strong>et</strong>tes.ca/ p//<br />
esca/<br />
http://www.espace.mu/<br />
p// • Cascades<br />
http://www.cascades.com/EmballageIndustriel/<br />
• Écomobile<br />
http://www.ecomobile.gouv.qc.ca/fr/index.php<br />
• Épatante patate<br />
http://epatantepatate.ca/<br />
• NTE<br />
http://www.nte.qc.ca/
EV #1b –Fil de fer<br />
Pour chacun<br />
• Copie d’écran décran<br />
• Fil de fer détaillé basé sur la copie d’écran<br />
• Indiquez quelle est l’action principale (encadrez en gras ou avec une<br />
flèche)<br />
• Décrivez en 1/2 page (min) ou 1 page (max) pourquoi l’<strong>interface</strong> est la<br />
meilleure (ou la moins bonne) <strong>et</strong> proposez une amélioration (justifier) ou<br />
expliquer un défaut (justifier)<br />
Critères d’évaluation :<br />
• Correspondance avec le site<br />
• Qualité de la présentation<br />
• Clarté / Lisibilité<br />
• Cohérence de l’argumentation<br />
(page couverture avec noms <strong>et</strong> codes permanents)
Exemple
Exemple<br />
Logo<br />
Menu principal<br />
Publicité<br />
Connexion<br />
Menu contextuel<br />
Information<br />
Temps réel<br />
Contenu vidéos récentes<br />
Publicité<br />
Action<br />
inscription<br />
Action<br />
inscription
Exemple<br />
Publicité<br />
Logo<br />
Connexion<br />
Menu principal<br />
Menu contextuel<br />
Information<br />
Temps réel<br />
Contenu vidéos récentes<br />
Publicité<br />
Action<br />
inscription<br />
Action<br />
inscription
Évaluation d’<strong>interface</strong><br />
On cherche à répondre à 3 questions<br />
1. Pourquoi? Quelles sont les intentions, les buts.<br />
2. Quoi? Quels obj<strong>et</strong>s, commandes, événements.<br />
3. Comment? Méthodes, processus, étapes.
Évaluation d’<strong>interface</strong><br />
Objectifs cognitifs de la page d’accueil<br />
• Rendre le but du site clair:<br />
C’est le site ede qui? <strong>et</strong> que pouvons‐nous o ous y faire?<br />
• Aider les usagers à faire ce qu’ils doivent faire<br />
M<strong>et</strong>tre l’emphase sur le but premier du site: il faut éviter toute ambiguïté<br />
Ce que l’usager doit faire sur le site, il faut lui perm<strong>et</strong>tre de le faire dès<br />
l’accueil (entre 1 <strong>et</strong> 4 actions).<br />
• Faire comprendre ce que le site offre comme<br />
contenu: donnez un portrait d’ensemble.<br />
Montrer un exemple de contenu, ne faites pas seulement l’écrire: soyez<br />
concr<strong>et</strong>, montrer le meilleur ou le plus récent.
Ressources<br />
Le site Web d’accompagnement<br />
www.architecturedelinformation.wordpress.com<br />
Information, présentations (PDF), liens pertinents, <strong>et</strong>c.
Nous joindre<br />
<strong>Geoffroi</strong> <strong>Garon</strong><br />
prof@geoffroigaron.com<br />
www.geoffroigaron.com<br />
Martin Lessard<br />
martinlessard@gmail.com<br />
il<br />
www.martinlessard.com<br />
*Par courriel, ajoutez le mot‐clé EDM2530
Change language