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
Ab Arborescence (structure)
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.
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.
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 classification des industries de l'amérique du 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 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 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 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
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 41 731 étudiants (octobre 2011) 34 043 au 1er cycle 5 609 au 2e cycle 1 673 au 3e cycle 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 est transposée en système de navigation.
Définition Typologie de navigation Séquentielle 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 C A B A B Changement vertical d une catégorie à l autre Ex. Ordinateur
Typologie de navigation Arborescente A B C A B A B Changement de catégorie sans contrainte Ex. Site Web
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.
Exemple d arborescence de site
Exemple d arborescence de site
Outils pour créer des arborescences Quels outils?
Outils pour créer des arborescences Classique Crayon + papier pp Logiciels de dessin vectoriel Adobe Illustrator ou Inkscape http://inkscape.org Logiciels d édition Microsoft Visio ii ou Dia https://live.gnome.org/dia/ / / MindManager http://www.mindjet.com/products/mindmanager Freemind http://freemind.sourceforge.net 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%) 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)
EV #1 Liste des sites Web Mont Saint Sauveur http://www.montsaintsauveur.com/ Mesbobettes.ca Juste pour rire http://www.hahaha.com/fr Espace.mu http://www.mesbobettes.ca/ p// esca/ http://www.espace.mu/ p// Cascades http://www.cascades.com/emballageindustriel/ Écomobile http://www.ecomobile.gouv.qc.ca/fr/index.php Épatante patate http://epatantepatate.ca/ NTE http://www.nte.qc.ca/
Pause
Interface (interaction) i
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 http://liris.cnrs.fr/stephanie.jean daubias/
Interface Homme machine (IHM) 1945 1970 Dispositifs d entrée sortie limités Perforateurs/lecteurs de cartes Tableaux de bord (voyants) Imprimantes Langages de commandes 1970 1980 Nouveaux dispositifs d entrée sortie dentréesortie 1963 : Écran graphique et stylo optique 1968 : Première souris 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 2D : écran tactiles, crayons optiques Reconnaissance de tracé 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, i persistant, 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 Wben lien 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 pp Logiciels d édition Axure http://www.axure.com/ Services en ligne Cacoo https://cacoo.com Framebox http://framebox.org http://www.fuelyourcreativity.com/17 great wireframing tools forweb designers/
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
EV #1 Liste des sites Web Mont Saint Sauveur http://www.montsaintsauveur.com/ Mesbobettes.ca Juste pour rire http://www.hahaha.com/fr Espace.mu http://www.mesbobettes.ca/ p// esca/ http://www.espace.mu/ p// Cascades http://www.cascades.com/emballageindustriel/ Écomobile http://www.ecomobile.gouv.qc.ca/fr/index.php Épatante patate http://epatantepatate.ca/ NTE http://www.nte.qc.ca/
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)
Exemple
Exemple Logo Menu principal Publicité Connexion Menu contextuel Information Temps réel Contenu vidéos récentes Publicité Action inscription Action inscription
Exemple Publicité Logo Connexion Menu principal Menu contextuel Information 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. 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 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.
Ressources Le site Web d accompagnement www.architecturedelinformation.wordpress.com Information, présentations (PDF), liens pertinents, etc.
Nous joindre Geoffroi Garon prof@geoffroigaron.com www.geoffroigaron.com Martin Lessard martinlessard@gmail.com il www.martinlessard.com *Par courriel, ajoutez le mot clé EDM2530