3.36pt
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web 1/45
Interfaces Web
Michel C. Desmarais
Génie informatique et logicielÉcole Polytechnique de Montréal
26th Aug, 2019
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web 1/45
3.36pt
Introduction
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web 2/45
Web ou WIMP
I WIMP: “windows, icon, menu, popups”I Nombre d’entreprises se posent la question si elles doivent
aller en Web ou en WIMP/IOS/AndroidI La tendance est au Web car :
I Facilité d’installation, de maintenance, de mise à jour, decontrôle
I Portable sur toutes les plateformes, même mobilesI Grande facilité à faire des applications de saisie et d’affichage
de données simplesI Le développement des “progressive-web-apps” accentue et
étend cette tendance vers des applications indépendantes.I Inconvénients :
I Doit se conformer à un standard commun aux fureteursI Inconvénients du mode client-serveur : délai pour l’accès au
serveur (contournable)
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web 3/45
Principes généraux
HTML : structure de l’interface (approche déclarative)JavaScript : fonctions
CSS : rendu de l’interface et adaptation auxcontextes
Fureteur : environnement qui encapsule ces technologies
I Un engin de rendu s’assure que l’affichage de l’interface soittoujours à jour avec le code HTML et CSS.
I L’interactivité consiste à associer le code JavaScript avec desévénements, souvent sur des objects d’interface (ex. clic desouris).
I Ces principes se transposent aussi à des applications en solo(par ex. Cordova, React, Progressive-web-app).
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web 4/45
Client-serveurI Une panoplie de techonologies et de choix d’architecture
spécifique dans le cadre global du client serveur
Fureteur Serveur HTTPHTTP
CGIASP,JSP,PHPXSLNodeJS, TypescriptPython, C#, etc.
Fureteur
HTMLCSSJavaScript
Applet/PluginsXSL
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web 5/45
Une requête HTTPLa requête :GET /index.html HTTP/1.1Host: www.polymtl.ca
La réponse :HTTP/1.1 200 OKDate: Fri, 03 Nov 2006 14:13:09 GMTServer: Apache/2.0.55 (Unix) mod_ssl/2.0.55 OpenSSL/...X-Powered-By: PHP/4.4.2Connection: closeContent-Type: text/html; charset=iso-8859-1<xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...<html xmlns="http://www.w3.org/1999/xhtml">...
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web 6/45
Caractéristiques d’HTTP/1I Protocole client-serveur qui ne conserve pas d’état (session),
mais il existe plusieurs mécanismes pour le faireI À travers l’URL
I https://precisionconference.com/~ihm/cgi-bin/FormWizard?/templates/users.tmpl&userRef=SFG7FBATTP4OFMCH6Y3CKPDFNWJM7AC
I Par une variable cachée (même mécanisme que celui desformulaires)
I <form action="controller.do" method="POST">I <input type="HIDDEN" name="var1" value="value 1">I <input type="SUBMIT" value="Push Me"> </form>
I Par un “cookie”I Stockage Web (HTML5)
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web 7/45
3.36pt
HTML, XML et SGML
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web 8/45
SGML, HTML, XML, etc.
I XML : ExtensibleMarkup Language
I Dérivé de SGML, toutcomme HTML, maispermet de définir deslangages tout commeSGML et non pas desstructures fixescomme HTML
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web 9/45
XML
I Possède une DTD (Document Type Description) tout commeSGMLI Spécifie la structure d’un langage XML
(voir http://en.wikipedia.org/wiki/DTD)I Généralement stocké dans un document externe au fichier XMLI Permet la vérification de conformité
I Universellement supporté; deux types d’analyseur syntaxiquesont disponibles :I SAX : lecture d’un document XML en mode “train” (stream)
avec programmation par événements; efficace pour de grosdocuments
I DOM : lecture complète du document dans une structured’arbre (plus flexible que le modèle SAX mais doit chargé toutle document en mémoire au préalable)
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web 10/45
HTML
I Note historique :http://www.w3.org/History/1989/proposal.html
I Un dérivé de SGMLI Standard Generalized Markup Language (années 60!)I Langage pour la spécification de langagesI Principe syntaxique de base : <token> ... </token>
I HTMLI HyperText Markup LanguageI Dérivé de SGML mais ne suit pas une syntaxe rigoureuse,
ex: <P> Texte... <P> Second paragraphe...(c’est d’ailleurs une des sources d’incompatibilités entrefureteurs)
I Langage pour la spécification de la structure d’un documentavec un accent à la fois sur l’affichage et l’organisation
I <H 1>: structureI <b> ou <H1 ALIGN=LEFT>: affichage
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web 11/45
Engin de rendu HTML
Il existe une panoplie d’engins de rendu HTML, par exemple :
Gecko : Mozilla, Firefox (Mozilla,LGPL), le seul qui soit surtoutes les plates-formes
Trident : Internet Explorer surWindows (propriétaire)
Tasman : Internet Explorer surMacintosh (propriétaire)
Lynx : rendu textuel du fureteurdu même nom
Presto : Opera (propriétaire)WebCore : Safari (Apple, LGPL)
Source : http://en.wikipedia.org/wiki/Comparison_of_layout_engines
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web 12/45
CSS
I “Cascading Style Sheet”I HTML doit être utilisé pour spécifier la structure d’un
document et laisser le style d’affichage à CSSI Permet la spécification du style d’affichage, beaucoup mieux
qu’avec HTML et en suivant un modèle d’héritageI Un document HTML peut référer à un document CSS et ainsi
dynamiquement changer le style de présentationI On peut associer des propriétés de CSS à chaque élément
HTML de différentes manières :I selon le type de balise (ex. h1, p, etc.)I selon l’attribut class (ex. <h1 class="uneClasse">)I par l’attribut style (ex. style="color:red;")
(n.b. cette pratique est à utiliser dans des cas d’exceptions)
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web 13/45
CSS (suite)
I Modèle d’héritage flexible, par exempleI td {margin-left: 1in; text-weight: bold; }
Les <td> auront les propriétés CSS spécifiéesI td p { margin-left: 1in; text-weight: bold; }
Les <p> (paragraphe) qui sont sous l’élément <td> auront lespropriétés CSS spécifiées
I .indented-bold {margin-left: 1in; text-weight:bold; } Les éléments comportants la propriété HTMLclass=indented-bold auront les propriétés CSS spécifiées
I td .indented-bold {margin-left:1in;text-weight:bold;} Les éléments ayant la propriété HTMLclass=indented-bold et qui sont sous l’élément <td>auront les propriétés CSS spécifiées
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web 14/45
3.36pt
JavaScript
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web 15/45
JavaScript
Le traitement du côté client
I Langage de programmation interprété, orienté objet du typeprototype et mue par événements
I Il permet d’effectuer un traitement du côté clientI Standard ISO-16262 supporté par les fureteurs communs
(malheureusement avec quelques incompatibilités); voirnotamment standard ECMAScript et JScript de MS
I Basé sur le modèle DOM (Document Object Model) quipermet l’accès aux éléments du document HTML
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web 16/45
Événements JavaScript
I Quelques exemples :I onclick : <a>, <input
type=button>I onload : <img>, <body>I onmouseover : <a>,
<area>I onsubmit : <form>
Exemple de code :
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web 17/45
Le modèle DOM, (Document Object Model)
<TABLE><TBODY><TR><TD>Shady Grove</TD><TD>Aeolian</TD></TR>
<TR><TD>Over the River,Charlie</TD><TD>Dorian</TD></TR></TBODY></TABLE>
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web 18/45
Le modèle DOM (suite)
document.monTableau.element[1]
I monTableau :adressage parnom
I Element[1] :adressage parposition
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web 19/45
Accès au DOM
I DOM comporte en fait trois niveaux1. La base, : http://www.w3.org/TR/REC-DOM-Level-1/2. Ajout des namespace, filtres de vues et association
d’événements (ex. JavaScript) à des noeuds3. Plusieurs ajouts, notamment XPath
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web 20/45
Exemple de menu I
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web 21/45
3.36pt
Extensions JavaScript, jQuery et Ajax
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web 22/45
jQuery
I Librarie JavaScript : jquery.comI Introduite en 2006 et utilisée par une majorité des sites très
fréquentésI Très efficace pour :
I la sélection des objets DOMI la gestion des événementsI les appels Ajax
I Un excellent tutoriel est disponible :http://w3schools.com/jquery/default.asp
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web 23/45
Syntaxe jQuery
I Le signe $ est une abbréviation de jQuery. Ainsi, $(arg) estl’équivalent de jQuery(arg)
I L’expression $("P") effectue une recherche dans le DOM pourles balises P et permet de leur appliquer une méthode. Parexemple, les appels suivants camouflent différents éléments :I $(this).hide() : élément courantI $("p").hide() : éléments PI $(".test").hide() : éléments classe="test"I $(test").hide() : élément id="test".
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web 24/45
Exemple de fonction de rappel d’événements avec jQuery
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web 25/45
jQuery et classes CSS
Ajout d’une fonction de rappel :
$ ( "#deux " ) . c l i c k ( funct ion ( ) {$ ( t h i s ) . addC la s s ( " b l eu " ) ; } )
} ) ;
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web 26/45
Ajax
“Asynchronous JavaScript and XML”
I Un ensemble de technologies comme DHTML mais dont lenoyau est l’API XMLHttpRequest (XHR) de JavaScript,JScript ou VBScript
I Principes :I Augmenter l’interactivité; réduire la latenceI Échanges légers et rapides entre le serveur et le client par une
connexion indépendante, ce qui évite la recharge complèted’une page
I Asynchrone, donc ne bloque pas l’affichageI Utilisé par plusieurs applications comme la complétion dans
Google bar, MSN Virtual Earth, et les encadrés publicitaires.
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web 27/45
Exemplehttp://www.w3schools.com/Ajax/tryit.asp?filename=tryajax_first :<script type="text/javascript">function loadXMLDoc() {var xmlhttp;
...xmlhttp=new XMLHttpRequest();...
xmlhttp.onreadystatechange=function(){if (xmlhttp.readyState==4 && xmlhttp.status==200)document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}xmlhttp.open("GET","ajax_info.txt",true);xmlhttp.send();
}</script></head><body><h2>AJAX</h2><button type="button" onclick="loadXMLDoc()">Request data</button><div id="myDiv"></div></body></html>
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web 28/45
Ajax (suite)
Plusieurs utilités :
I Validation dynamique des entrées de formulairesI Autocomplétion (exemple, champ de recherche)I Téléchargement à la demande pour éviter un délai initial
(exemple, GoogleMaps)I Rafraichissement de données d’une page (“server pull”;
exemple, cotes boursières)I Encadrés publicitaires déterminés en fonction du contexte
(contenu de la page, historique de navitation et autresinformations pouvant être accumulés quant à l’utilisateur).
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web 29/45
Javax et jQuery
http://w3schools.com/jquery/tryit.asp?filename=tryjquery_ajax_load
<!DOCTYPE html><html><head><s c r i p t s r c=" j q u e r y . j s "></ s c r i p t ><s c r i p t >$ ( document ) . r eady ( f unct ion ( ){
$ ( " button " ) . c l i c k ( f unct ion ( ){$ ( "#d i v1 " ) . load ( "demo_ t e s t . t x t " ) ;
} ) ;} ) ;</ s c r i p t ></head><body><d i v i d=" d i v1 "><h2>Let jQuery AJAX Change This Text</h2></d iv><button>Get Externa l Content</button></body></html>
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web 30/45
Auto complétion avec jQuery Ihttp://imankulov.github.com/asuggest/
var s u g g e s t s = [ " h e l l o " , " wor ld " ] ;$ ( "#area1 " ) . a sugge s t ( s u g g e s t s ) ;
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web 31/45
Auto complétion avec jQuery IIou http://jqueryui.com/autocomplete/
$ ( funct ion ( ) {var a v a i l a b l eT a g s = [
" App l e S c r i p t " , "Asp " , " Sca l a " , "Scheme"] ;$ ( "#tag s " ) . autocomp le te ({
source : a v a i l a b l eT a g s} ) ;
} ) ;. . .
<d i v c l a s s=" ui−widget "><l a b e l f o r=" tag s ">Tags : </ l a b e l ><inpu t i d=" tag s " /></d iv>
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web 32/45
Server Sent Events (2006)
I Server Sent Events est une version plus récente deXMLHttpRequest
I N’exige pas du client une requête pour vérifier l’état de larequête
I Nécessite de basculer entre le protocole HTTP et un protocoleadapté à ce type de requêtes
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web 33/45
3.36pt
Adaptation à la plateforme et à la taille
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web 34/45
Exemple d’adaptation : Moodle
Moodle sur Android (628×1027)
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web 35/45
Exemple d’adaptation : iPad
Moodle sur iPad (1536×2048)
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web 36/45
Exemple d’adaptation : iPad (paysage)
Moodle sur iPad (2048×1536) en mode paysage
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web 37/45
Exemple d’adaptation : poste de travail
Moodle sur poste de travail (fenêtre de 933×1056)
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web 38/45
Exemple : barre de menu horizontale et verticaleVoir l’exemple sur le site : menu-css.html
<LI> : défaut (v)<LU> : défaut (v)
<LI> : gauche<LU> : défaut (v)
<LI> : droite<LU> : défaut (v)
<LI> : droite<LU> :gauche
<LI> : vertical<LU> : gauche
<LI> : vertical<LU> : droite
<LI> : gauche<LU> : droite
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web 39/45
3.36pt
Ergonomie du Web
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web 40/45
Dimensions à considérer
I Fréquence d’utilisationI Pour plusieurs sites, la majorité des utilisateurs n’en sont qu’à
leurs premières visitesI Ex: SAQ, Poste Canada, Hydro-Québec, BellI Ont généralement une raison très spécifique de visiter
I Par contre, pour des applications intranet, la grande majoritédes utilisateurs peuvent être des utilisateurs très fréquents
I Ex: soutien à la clientèle, applications bancairesI Segments d’utilisateurs
I L’usage peut varier considérablement d’un utilisateur à l’autreI Ex: profils d’utilisateurs des sites universitaires
I La connaissance préalable est très variable pour les sites grandpublic
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web 41/45
Dimensions à considérer (suite)
I Niveau d’interactivité requisI Détermine dans quelle mesure il faut que le traitement soit fait
du côté clientI Accès aux ressources locales
I Le fureteur créé des contraintes de sécurités limitant l’accèsaux ressources locales
I Serveur local comme solution, mais architecture plus complexeI La diversité des plateformes
I Fureteurs non compatiblesI Géométrie variableI Appareils variés (IOS, Android, Windows)
I L’interface du type Web est-elle adaptée?I Il faut parfois s’en remettre à WIMP
I mais de moins en moins vrai
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web 42/45
Dimensions à considérer (suite)
I La navigation et la structuration de l’informationI Souvent le problème principal des sitesI Suivre les principes habituels :
I Repères visuels et “navigationnels” stables et cohérentsI Diminution de la charge cognitive (favoriser la reconnaissance
plutôt que le rappel)I Bien choisir les termes et expressions (tests d’utilisabilité)
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web 43/45
Données de navigation
I L’analyse des données (logs) de navigation est un outilprécieux pour raffiner l’ergonomie d’un site
I Données importantes :
I Trafic et temps de réponse parpériode donnée
I Pages et répertoires les plusconsultés
I Durée moyenne d’une session
I ProvenanceI Estimé (par login, cookie ou
adresse IP) du taux de retourdes utilisateurs
I (ex. combien de nouveauxvisiteurs par mois ou semaine)
I Pages de sortie et d’entréeI Possibilité de faire des analyses très détaillées de la navigation
des utilisateursI Définition d’un arbre de navigation
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web 44/45
Exemple de Google Analytics
I https://www.google.com/analytics/
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web 45/45
Quelques conclusions
I Les interfaces Web sont maintenant incontournables et ellessont appelées à devenir encore plus répandues
I Les mêmes principes ergonomiques s’appliquent aux interfacesWeb qu’aux interfaces WIMP mais les contextes d’utilisationsont fort différents et variés
I L’évolution des technologies Web est très rapide et amèneconstamment des contextes nouveaux avec pour conséquencequ’il est beaucoup plus facile de faire des erreurs deconception!
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web 46/45