Web 2.0 : Impacts sur les IHMs

Transcription

1 Web 2.0 : Impacts sur les IHMs Module IHM01 SI5 Master IFI - 1 -

2 Plan du cours Web2.0 : nouveaux usages d'internet Les interfaces riches ou RIA (Rich Internet Applications) Les mondes virtuels Analyse des besoins Evaluation ergonomique Tests Utilisateurs Conception Espace de conception Propriétés ergonomiques Tests d intégration Conception logicielle Tests Unitaires Codage Modèle d architecture logicielle Boîtes à outils Mécanismes généraux - 2 -

3 Web2.0 : nouveaux usages - 3 -

4 Evolution d'internet: point de vue des usages Web1.0 Admin publie Web2.0 Admin publie Admin Admin gère gère Interagissent (RSS, services web, mashups) consultent Utilisateurs consultent contribuent contribuent Utilisateurs Utilisateurs/communauté Utilisateurs/communauté - 4 -

5 Web2.0, définition et points clé Met l'accent sur l'agilité et la réutilisabilité des applis : Focalisation sur les services rendus et sur les données mais pas sur les applications Faiblement couplé pour faciliter l assemblage de services en applications Faciliter la réutilisabilité des contenus Implication des utilisateurs comme acteurs du service rendu Plus le service est utilisé, plus il s améliore Plus le service est utilisé, plus il devient intéressant Le Web2.0 qualifie les interfaces permettant aux internautes d'interagir sur le contenu des pages et entre eux - 5 -

6 Du web1.0 vers le web2.0 : synthèse Depuis Contemplatif Contenu propriétaire Tri arborescent (taxonomie) Webscraping Vers Participatif Contenu collectif (wikis) Tri par tags ( folksonomy ) Services web & mashups Sites perso Blogs, réseaux sociaux Britannica online Wikipedia Ofoto Flickr mp3.com Napster amazon ebay Google igoogle Enrichissement des interfaces (RIA) - 6 -

7 Une nouvelle vague d'évolution de Internet arrive déjà! D avantage d informations ont été produites ces dernières 30 années que durant les 5000 ans précédents! Surcharge de l'information & des canaux de communication mails journaux audio/video IM chat podcast/webcast RSS téléphone Adapter les interfaces à deux aspects essentiels de l'être humain : notre nature innée sociale et visuelle (mondes virtuels) - 7 -

8 Les interfaces riches - 8 -

9 Limites ergonomiques du web1.0 Navigateur = outil générique d'affichage Logique de navigation (enchaînement de pages) déterminée par le serveur Interruption des activités de l'utilisateur durant le traitement d'une requête L'utilisateur doit attendre la page suivante générée par le serveur L'utilisateur ne peut effectuer d'autres opérations pendant qu'il attend une réponse Perte du contexte opérationnel suite au rafraîchissement L'utilisateur perd la position de scrolling dans la page L'utilisateur doit réanalyser entièrement toute nouvelle page - 9 -

10 Idées derrières les interfaces riches Logique de présentation déplacée coté client mais l état du service (les données) reste côté serveur Toutes les interactions de l utilisateur ne nécessitent pas l'interrogation du serveur (échanges client/serveur limités) L'utilisateur continue ses activités durant le traitement d'une requête (communication asynchrone) Échange des données plutôt que de la présentation (une fois la page initiale chargée) i.e. : sans redessiner entièrement la page Rich Internet Application (RIA) qualifie les applications internet dont l interface utilisateur se rapproche d une application «desktop» classique Gains en ergonomie, interactivité, rapidité, bande passante, etc

11 Solutions RIAs disponibles AJAX n'est pas un outil mais un ensemble de techno open source éprouvées Utilisation combinée nouvelle Offres propriétaires (par ordre de maturité) Adobe Flex : Microsoft Silverlight : Sun JavaFX :

12 AJAX en bref Asynchronous Javascript And XML Interaction de l'utilisateur via le navigateur Lancement d'une requête HTTP à partir de Javascript Mise à jour partielle de l'interface coté client avec des données du serveur au format XML Navigateur appel Javascript Interprète IHM Javascript HTML + CSS réseau requête HTML données XML Serveur web

13 AJAX = DOM + CSS + Javascript + XMLhttpRequest Javascript intervient lorsqu'un événement est déclenché sur la page sert de "glue" pour tout le fonctionnement de l'interface réalise les communications avec le serveur via la classe XMLhttpRequest DOM (Document Object Model) sert à représenter les pages web de manière structurées CSS (Cascading Style Sheets) permet une séparation contenu/présentation modifiable par le code Javascript

14 Exemple d'utilisation d'ajax Validation coté serveur sans rechargement de la page Source :

15 Exemple d'utilisation d'ajax Validation coté serveur sans rechargement de la page Source :

16 Outillage autour de AJAX Bibliothèques pour une indépendance vis à vis des navigateurs fonctions Javascript pour la gestion des communications, manipulation de DOM, gestion des événements, etc widgets de haut niveau exemples : Prototype, jquery, Dojo, Script.aculo.us, Yahoo UI library,... Frameworks pour éviter de manipuler le Javascript directement bibliothèques + IDE exemples en Java : GWT (Google Web Toolkit), Echo, DWR (Direct Web Remoting) exemples en.net : ASP.Net AJAX, Projet Volta (GWT pour.net)

17 Cas de GWT : Développer, débugger, tester en Java Développement en Java (mais pas standard) Traduction automatique en Javascript/CSS Bibliothèque de widgets proche de Swing Composition graphique des interfaces GWT designer (plug-in Eclipse) GWT editor (NetBeans) CSS utilisé pour customiser les widgets Possibilité d appeler des services distants via RPC

18 Les avantages et inconvénients de AJAX/GWT De manière générale : L'option du navigateur JavaScript doit être activée sinon certaines widgets ne fonctionnent pas (bookmarks, boutons précédent/suivant, etc) Des différences de comportement entre navigateurs si développement artisanal Spécifiquement à GWT : Intégration facilitée avec les autres frameworks (Struts, Spring, J2EE etc.) Support pour l'internationalisation et l'historique Code généré difficile à debugger Bibliothèque de widgets pas très riche

19 Flex en bref Application SWF (Shockwave Flash) intégrée à une page HTML Déploiement de la page HTML sur un serveur de présentation Flex Accès à la page par un navigateur via une URL comme une page HTML classique Téléchargement de l'appli SWF sur le client Accès à des services distants via des requêtes HTTP, SOAP ou RPC (échange de données en XML) réseau Client Flash player requête HTML Appli SWF Serveur de presentation Flex Serveur d'application

20 FLEX = MXML + AS3 + RSL MXML met en forme de l application (positionnement des composants UI, navigation) définit l accès aux sources de données serveur fait la liaison entre les composants UI et les données AS3 (ActionScript3) décrit la logique applicative nécessaire coté client RSL (Runtime Shared Library) permet de partager des composants UI et des librairies entre plusieurs fichiers SWF

21 Outillage autour de Flex SDK gratuit : compilateur + bibliothèque composants graphiques + bibliothèque services applicatifs (glisser/déposer, animation, liaison des données; ect) permet de générer une application SWF à partir de MXML/AS3 Flash player est le plugin à rajouter au navigateur pour interpréter le byte code d'une appli Flex Flex Builder outil de développement, pas obligatoire disponible en Standalone ou en plugin Eclipse utile surtout pour débugger et composer graphiquement les interfaces

22 Les avantages de Flex Rendu identique sur la plupart des navigateurs et des systèmes d exploitation Bibliothèque de composants graphiques riches et soignés Plus facile à apprendre que GWT

23 Synthèse sur les RIAs RIA = le meilleur du client léger et du client lourd RIA & conception des interfaces Séparer présentation - logique données Briques d'ihm réutilisables Nécessité d'installer un plugin dans le navigateur et forte concurrence sur les technologies Multiplication des technologies sur le poste de travail Quid de l'accessibilité (normes W3C)

24 Les mondes virtuels

25 Genèse des mondes virtuels Jeux de rôle (en ligne) massivement multi-joueur (MMORG) Réseaux sociaux Systèmes d information géographique Mondes virtuels

26 Qu'est ce qu'un monde virtuel? Monde créé artificiellement par un programme informatique et hébergeant une communauté d'utilisateurs présents sous forme d'avatars et pouvant s'y déplacer et y interagir (source Wikipedia) Ingrédients de base : IHM représentant l'espace entièrement de façon visuelle Présence humaine sous la forme d'avatars (attributs sociaux) Interactions en temps réel Espace partagé et persistant permettant à de nombreux utilisateurs de participer de manière collaborative Quelques exemples :

27 Exemple de Second Life Propriété de Linden Lab (Philip Rosedale), accès tout public en 2003 Mais tout ce qui est créé est la propriété de ces utilisateurs Personnalisation de l'avatar : forme, cheveux, peau, vêtements, etc

28 Exemple de Second Life Interactions avec d'autres utilisateurs : chat, IM, VOIP, langage corporel Navigation en marchant, courant, volant L'avatar se subtilise à la souris Disparition des niveaux d'excentricité

29 Exemple de Second Life Construction du monde et donc de l'ihm (formes géométriques + textures + animations)! Le contenu fait partie intégrante de l'ihm

30 Exemple de Second Life Achat, vente et mise en location de terrains (abonnement spécial) Achat et vente d'objets virtuels mais aussi réels Emplois (réceptionnistes, guides, danseurs, animateurs, vendeurs, etc) Transactions en Linden dollars (échangeables en dollars réels!) Source : Reuters

31 Quelques chiffres... Environ 2000 nouvelles inscriptions chaque jour Nb d'utilisateur en ligne croit de 20% par mois (18000 en décembre 2006, actuellement Nb total de comptes : 15 millions 2 utilisateurs sur 3 créent du contenu 5000 serveurs supportant 34 terabytes de contenu Certains gagnent 200,000 $/an sur SL Premier $millionaire : Ailin Graef/Anshe Chung a gagné 2M $ en 30 mois (

32 Animations : Linden Script Language (LSL) Langage événementiel, intégré au client SL, C/Java-like 200+ fonctions built-in et 33 événements (Touch, Attach,...) pour : Ajouter des animations sur les objets et les avatars Bouger les objets Ouvrir des notes Lancer des liens HTTP/S dans des navigateurs standards Exécuter des services web externes... default { state_entry() { llsay(0, "Hello, Avatar!"); } touch_start(integer total_number) { llsay(0, "Touched."); } }

33 Échanges entre SL et l'extérieur XML data Display a map of a given region of Second Life through JavaScript calls Export WebMap API Scripting HTTP GET/POST to an external resource Get a risk level in exchanging L$ with a given avatar/account ExchangeRisk API Import Vidéo, powerpoint, sound, animation, shapes

34 Nouveaux types d'applications envisagés Communication & collaboration immersives Présence des «Autres» permet l'interaction Espace collaboratif intégré (+ réel que visio ou téléconf) Simulation & répétition peu coûteuses Simuler des scénarios en grandeur nature (incendies, accidents, etc) Répéter des gestes et les améliorer (interventions chirurgicales, etc)

35 Nouveaux types d'applications envisagés Education Simplifier les concepts en les visualisant et manipulant en 3D et en utilisant des métaphores du quotidien Améliorer la qualité des cours à distance Domaines métiers Prévoir les nouvelles tendances Tester des produits/services/concepts en avant première Publicité/marketing, créer un «buzz»

36 Présence des marques

37 Présence des universités San Diego State University

38 Présence culturelle Big Ben Tour Eiffel Taj Mahal Et aussi : Le Louvre, la cathédrale de Cologne, Venise, New york,

39 Présence politique

40 Et aussi... Les médias tels Reuters, Endemol, MTV, la BBC qui organisent des événements en ligne Sites internet tel que Amazon Mais plus les banques et casinos!

41 Vers un internet en 3D? Les mondes virtuels remplaçant les pages Internet La téléportation remplaçant la navigation via les URLs La présence de l'avatar remplaçant un nickname, photo, etc Le tout intégré avec l'internet 2D d'aujourd'hui dans des navigateurs nouvelle génération

42 Vers un internet en 3D? Est ce illusoire? Aujourd hui, environ 45 mondes virtuels regroupent près de 350 millions d utilisateurs (hors MMORPG) (source : K Zero) 1/5 des internautes sont dans un réseau social (source : Ifop, 2007) << By the end of 2011, 80 % of active Internet users (and Fortune 500 enterprises) will have a second life, but not necessarily in Second Life >> (source : Gartner Inc, avril 2007) Plus aller plus loin dans l'amélioration de l'expérience utilisateur Ordinateurs + rapides, graphismes + réalistes, bande passante accrue Des équipements à porter sur soi (wearable computer) Des standards pour favoriser l'interoperabilité entre les mondes Quid des moteurs de recherche Quid de l'accessibilité (normes W3C)

43 Alors? 3D-Web ou WebOS? Web 3.0 Niveau d'interactivité Explorer/ Co-Créer Web 2.0 Partager Web 1.0 Consulter Emporter Participer Rechercher Temps

44 Quelques liens intéressants... Interfaces riches Actualité des RIAs Tutorial et demos sur Ajax Des cours en ligne autour des techno Ajax Tutoriaux sur Flex Librairie de composants UI Flex gratuits Mondes virtuels Actualité des mondes virtuels Toute l'actualité de Second Life vue par Reuters Projet sur l'amélioration de l'ihm du client SL