Séquence 5 : D`un site web à un système multi-‐supports

MOOC Architecture de l’information https://www.france-­‐universite-­‐numerique-­‐mooc.fr/courses/ENSDeLyon/14002/session01/about Séquence 5 : D’un site web à un système multi-­‐supports Module 1 : Principes généraux de la méthode de Garrett Christine Michel, INSA de Lyon, 21 avril 2015 1 MOOC Architecture de l’information https://www.france-­‐universite-­‐numerique-­‐mooc.fr/courses/ENSDeLyon/14002/session01/about Tous les sites web ne nous laissent pas la même impression de facilité d’utilisation, de qualité des contenus ou de beauté dans le graphisme. Ces différents éléments vont jouer énormément sur notre envie de continuer à utiliser un site. La méthode de Garrett a pour objectif de construire cette fidélisation en maximisant le sentiment de satisfaction et l’expérience utilisateur. Christine Michel, INSA de Lyon, 21 avril 2015 2 MOOC Architecture de l’information https://www.france-­‐universite-­‐numerique-­‐mooc.fr/courses/ENSDeLyon/14002/session01/about La méthode est structurée selon 5 étapes. A chaque étape la méthode propose des outils qui permettent de définir quelles sont les fonctionnalités à proposer et comment organiser l’information. C’est une méthode centrée utilisateur, c’est-­‐à-­‐dire qu’à chacune des 5 étapes, le concepteur doit s’interroger sur les préférences des utilisateurs de manière à garantir que le produit conçu rencontre bien son public. Christine Michel, INSA de Lyon, 21 avril 2015 3 MOOC Architecture de l’information https://www.france-­‐universite-­‐numerique-­‐mooc.fr/courses/ENSDeLyon/14002/session01/about A chaque étape des méthodes différentes sont utilisées pour concevoir les fonctions opérationnelles et informationnelles. La surface correspond à tout ce qui est perceptible -­‐ les images, les textes, les vidéos, la musique -­‐ mais aussi à tout ce qui peut être touché, cliqué, activé dans une interaction. L'ossature correspond à l'organisation des éléments d’information et d’interaction. Par exemple pour présenter des informations de type images, on peut utiliser un défilement d’image ou un mur d’images. La structure correspond à l’organisation des données en particulier les parcours de navigation possibles ou les modes d’accès à l’information. Elle n’est pas visible directement à la consultation. Le cadrage correspond à la définition de la spécificité du site, son originalité et les types d’utilisations envisagées. La stratégie correspond aux objectifs du site, c’est-­‐à-­‐dire ce à quoi il est censé servir et à qui il est destiné. C’est aussi à ce niveau que l’on définit comment mesurer que les objectifs sont remplis. Christine Michel, INSA de Lyon, 21 avril 2015 4 MOOC Architecture de l’information https://www.france-­‐universite-­‐numerique-­‐mooc.fr/courses/ENSDeLyon/14002/session01/about La méthode de Garrett utilise ces étapes en commençant par la plus abstraite pour aller vers la plus concrète. Ainsi Garrett recommande de réaliser la stratégie, puis le cadrage, la structure, l’ossature et de terminer par la surface. Christine Michel, INSA de Lyon, 21 avril 2015 5 MOOC Architecture de l’information https://www.france-­‐universite-­‐numerique-­‐mooc.fr/courses/ENSDeLyon/14002/session01/about Il suggère de superposer la fin d’une étape avec le début de la suivante. Cette période de recouvrement permet de modifier certains des choix initiaux de conception de manière à avoir une proposition cohérente. Christine Michel, INSA de Lyon, 21 avril 2015 6 MOOC Architecture de l’information https://www.france-­‐universite-­‐numerique-­‐mooc.fr/courses/ENSDeLyon/14002/session01/about Crédits
D2
http://commons.wikimedia.org/wiki/File%3ANarniaWeb_site_screenshot.png
http://upload.wikimedia.org/wikipedia/commons/5/59/NarniaWeb_site_screenshot.png
Par David Hollander (www.narniaweb.com) [FAL], via Wikimedia Commons
D2
http://commons.wikimedia.org/wiki/File%3ADecember_2008_Web_Site_-­‐_Flickr_-­‐_Knight_Foundation.jpg
http://upload.wikimedia.org/wikipedia/commons/3/3a/December_2008_Web_Site_-­‐_Flickr_-­‐
_Knight_Foundation.jpg
Par Knight Foundation (December 2008 Web Site) [CC BY-­‐SA 2.0 (http://creativecommons.org/licenses/by-­‐sa/2.0)], via Wikimedia Commons
D2
http://shapebootstrap.net/preview/?id=439
D3
« Düb  » par Richard Bartz — Travail personnel. Sous licence Domaine public via Wikimedia Commons -­‐ http://commons.wikimedia.org/wiki/File:D%C3%BCb.jpg#/media/File:D%C3%BCb.jpg
D3
« Crystal Project Download manager » par Everaldo Coelho (YellowIcon) — All Crystal icons were posted by the author as LGPL on kde-­‐look. Sous licence LGPL via Wikimedia Commons -­‐ http://commons.wikimedia.org/wiki/File:Crystal_Project_Download_manager.png#/media/File:Crystal_Project_D
ownload_manager.png D3
« Farm-­‐Fresh client account template  » par FatCow Web Hosting — http://www.fatcow.com/free-­‐icons/. Sous licence CC BY 3.0 us via Wikimedia Commons -­‐ http://commons.wikimedia.org/wiki/File:Farm-­‐
Fresh_client_account_template.png#/media/File:Farm-­‐Fresh_client_account_template.png
D1
Image du livre de JJ Garett « Elements of User Experience,The: User-­‐Centered Design for the Web and Beyond »
Christine Michel, INSA de Lyon, 21 avril 2015 7