Mix 08 Las Vegas L’outillage du créatif L’ergonomie Web ou comment maîtriser son trafic Séduire vos utilisateurs Créer une relation permanente sur PC.

Présentation au sujet: "Mix 08 Las Vegas L’outillage du créatif L’ergonomie Web ou comment maîtriser son trafic Séduire vos utilisateurs Créer une relation permanente sur PC."— Transcription de la présentation:

1

2 Mix 08 Las Vegas L’outillage du créatif L’ergonomie Web ou comment maîtriser son trafic Séduire vos utilisateurs Créer une relation permanente sur PC Etendre cette relation en-dehors du PC

3

4 Utilisateurs de plus en plus… nombreuxexigeantssollicités Contenus et services de plus en plus… nombreuxriches

5 Besoin de mieux connaître ses Internautes segmenter, sélectionner et exclure Besoin d’offrir une meilleure expérience simplification, utilisabilité et usage Besoin de mieux qualifier ses Internautes collecter et cibler

6 Exposer au travers d’IHM simples et efficaces Accessibles à tous Etre facilement trouvés

7 Domaine de l’ergonomie

8

9 Ce qu’on entend souvent : facilefacile simplesimple intuitifintuitif moins de clics accessibleaccessible

10 des interfaces utilesutilesutilisablesutilisables EfficacitéEfficienceSatisfaction (norme ISO 9241)

11 Utilité Utilisabilité

12 Utilité Utilisabilité

13 Des règles « universelles » Des règles « contextuelles » De l’inconnu lié aux usages réels 1 1 2 2 3 3

14 Compréhension Information et feedback Liberté des usagers Accessibilité Rapidité Satisfaction Organisation Logique des interactions Cohérence Conventions

15 Connaître les utilisateurs, leurs objectifs et le contexte Je veux voir une émission que j’ai ratée à la télé

16 Levez la main si vous êtes d’accord pour dire que cette interface est plutôt ergonomique

17 Peu pratique considérée seule Pratique si l’on considère son contexte ! La même interface peut être…

18 Une interface ne peut être dite « ergonomique » que : à un instant t pour une personne donnée qui essaie de réaliser un objectif donné L’ergonomie n’existe pas… en soi

19 Importance d’observer des internautes en situation d’usage Imaginons que vous voulez commander des fleurs pour votre mère

20 La technologie influence-t-elle l’ergonomie ?

21 a) Peut faciliter la bonne application de certaines règles universelles Ex. pour Silverlight : Logique, Guidage FeedbackSatisfaction

22 b) Mais ne remplace pas une bonne intelligence d’interface et d’interactions La technologie doit rester un outil La technologie doit rester un outil au service d’un usage au service d’un usage

23 Ne pas utiliser un contrôle utilisateur uniquement parce qu’il est disponible (exemple : le drag & drop)

24 Utiliser les nouveaux types de contrôles en respectant les bonnes pratiques d’ergonomie (exemple : l’objet slider) Permet d’espérer un apprentissage de la part des internautes

25 Cf. notion d’affordances Enjeu = réussir à transmettre aux internautes le modèle d’interaction que le concepteur a prévu

26 Commencer par le début Connaître sa cible Valider ses idées auprès d’elle

27

28 Chargement itératif Ne ralentit pas le chargement de la page Affichage discret Ne gêne pas la consultation d’un site Activée par l’utilisateur Attend une action d’un utilisateur (même involontaire) pour complètement se dévoiler

29 Créer un « splash screen » en image.jpg Télécharger le code de la publicité après l’affichage du splash screen Remplacer le splash screen par le nouveau code chargé

30 Une application Silverlight est modulaire (constituée de fichiers.xap) Un fichier.xap peut être dynamiquement chargé Un mixte javascript/.xap peut être utilisé pour une meilleure expérience

31 Charger un simple fichier XAML contenant le bandeau et des animations Charger un.xap contenant le code plus riche Remplacer l’arbre visuel du premier XAML par le second

32

33 L'accessibilité numérique est une nécessité Un instrument de lutte contre l'exclusion des personnes handicapées et des personnes âgées L'accessibilité numérique est une obligation Résolution du Parlement Européen sur l’accessibilité des sites Web publics et de leurs contenus (EP resolution 2002- 0325) Loi votée par le parlement français le 11 février 2005 - Article 47 Cf. Livre-blanc « L’accessibilité de quoi s’agit-il ? » http://www.microsoft.com/france/accessibilite

34 Imagine Cup Interface Design Accessibility Award http://imaginecup.com/Competition/AccessibilityAward.aspx

35 Techniques permettant aux personnes à handicaps à accéder à un contenu ou aux services d’une application informatique

36 Problématique Lire les libellés et dicter les textes Décrire des images Décrire les actions (menus, boutons, etc.) Agrandir les éléments de l’interface Mettre plus de contraste sur les visuels Passer l’interface en N&B Zoom sur l’interface … Réponse de Silverlight 1.0 Réponse de Silverlight 1.0 Tracé vectoriel Alternative tags Un vrai support dans Silverlight 2

37 Tabulation et ordre de tabulation Focus et entrée clavier Arbre d’accessibilité au travers de UIA - UI Automation pour les lecteurs d’écran ou tout autre outils d’accessibilité Informations d’accessibilité directement dans le XAML en tant que propriété attachée (AutomationProperties) Support de AutomationPeer Et d’autres fonctionnalités comme les notifications pour les exigences de contrastes élevés

38 Accessible Rich Internet Applications Norme spécifique aux aplications riches et dynamique hostées dans le navigateur Une qualification plus précises des objets que l’alternate tag Roles, States et properties Complètement supporté dans IE8

39 + Colors Red Blue Green

40

41

42 « Etre présent sur Internet c’est bien, mais être trouvé c’est mieux » Mars 2008 - Dick ;-)

43

44 44

45 Les moteurs d’indexation sont dits « crawler » Ils simulent un utilisateur qui accède à un contenu Web Ils se différencient d’un simple utilisateur en disposant d’un User Agent spécifique Un site sait qu’il est en cours d’indexation par un moteur d’indexation

46 CrawlerUser Agent Alexa-1ia_archiver Alexa-2ia_archiver-web.archive.org AskJeeves-TeomaMozilla/2.0 (compatible; Ask Jeeves/Teoma; +http://sp.ask.com/docs/about/tech_crawling.html) Googlebot-2.1Googlebot/2.1 (+http://www.google.com/bot.html) Googlebot-Mozilla-2.1Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html) Google-AdSense-2.1Mediapartners-Google/2.1 MSN-1.0msnbot/1.0 (+http://search.msn.com/msnbot.htm) Yahoo-SlurpMozilla/5.0 (compatible; Yahoo! Slurp; http://help.yahoo.com/help/us/ysearch/slurp) ZyBorg-1.0Mozilla/4.0 compatible ZyBorg/1.0 (wn- 14.zyborg@looksmart.net; http://www.WISEnutbot.com)

47

48

49 Silverlight = RIA = pb d’indexation

50 Contenu Silverlight Contenu HTML « crowlable » « crowlable » ??

51 Contenu statique Transformation du XAML en information HTML Contenu dynamique Mettre en place un système de requêtage des informations à base d’Id Générer des mots clés pour les éléments dynamiques qu’il convient d’associer à un Id (deep linking) Liens Utiliser le système de requêtage Générer une information déjà linkée (shadow site) Contrôles type bouton… Exposer un lien à base du système de requetage

52 changé tag changé en tag avec le contenu texte changé en tag changé lien http://blogs.msdn.com/synergist/archive/2007/10/03/simple-silverlight-seo-with-asp-net-and-xslt.aspx

53 « crawler »Site WebBO Résolution de pages FrontendFrontend <h1><a><title><Href><h1><a><title><Href> Transformation du contenu Silverlight en HTML 5566 77 11 44 22 33 FrontendFrontend 88

54 Comme pour tout référencement, il faut aider les moteurs d’indexation A titre d’exemple, faites une recherche sur SilverlightSEO

55

56 L’ergonomie est une composante importante pour les nouveaux enjeux reposant sur le RIA

57 Merci

58 © 2008 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.