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

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

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

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

Domaine de l’ergonomie

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

des interfaces utilesutilesutilisablesutilisables EfficacitéEfficienceSatisfaction (norme ISO 9241)

Utilité Utilisabilité

Utilité Utilisabilité

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

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

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

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

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

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

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

La technologie influence-t-elle l’ergonomie ?

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

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

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

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

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

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

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

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é

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

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

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 ) Loi votée par le parlement français le 11 février Article 47 Cf. Livre-blanc « L’accessibilité de quoi s’agit-il ? »

Imagine Cup Interface Design Accessibility Award

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

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

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

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

+ Colors Red Blue Green

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

44

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

CrawlerUser Agent Alexa-1ia_archiver Alexa-2ia_archiver-web.archive.org AskJeeves-TeomaMozilla/2.0 (compatible; Ask Jeeves/Teoma; + Googlebot-2.1Googlebot/2.1 (+ Googlebot-Mozilla-2.1Mozilla/5.0 (compatible; Googlebot/2.1; + Google-AdSense-2.1Mediapartners-Google/2.1 MSN-1.0msnbot/1.0 (+ Yahoo-SlurpMozilla/5.0 (compatible; Yahoo! Slurp; ZyBorg-1.0Mozilla/4.0 compatible ZyBorg/1.0 (wn-

Silverlight = RIA = pb d’indexation

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

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

changé tag changé en tag avec le contenu texte changé en tag changé lien

« crawler »Site WebBO Résolution de pages FrontendFrontend <h1><a><title><Href><h1><a><title><Href> Transformation du contenu Silverlight en HTML FrontendFrontend 88

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

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

Merci

© 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.