LOG2420 Analyse et conception d'interfaces utilisateur - …cours.polymtl.ca/MDesmarais/log2420/Seances/Web/web.pdf · 2019. 8. 29. · Introduction...MLJavaScriptExtensionsAdaptationErgonomie

Introduction ...ML JavaScript Extensions Adaptation Ergonomie

LOG2420 — Analyse et conception d’interfacesutilisateurInterfaces Web

Michel C. Desmarais

Génie informatique et logicielÉcole Polytechnique de Montréal

Automne, 2019(version 29th Aug, 2019)

LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web 1/46


Interfaces Web

1 Introduction

2 HTML, XML et SGML

3 JavaScript

4 Extensions JavaScript,jQuery et Ajax

5 Adaptation à la plateforme età la taille

6 Ergonomie du Web



Web ou WIMP

WIMP: “windows, icon, menu, popups”Nombre d’entreprises se posent la question si elles doiventaller en Web ou en WIMP/IOS/AndroidLa tendance est au Web car :

Facilité d’installation, de maintenance, de mise à jour, decontrôlePortable sur toutes les plateformes, même mobilesGrande facilité à faire des applications de saisie et d’affichagede données simples

Le développement des “progressive-web-apps” accentue etétend cette tendance vers des applications indépendantes.Inconvénients :

Doit se conformer à un standard commun aux fureteursInconvénients du mode client-serveur : délai pour l’accès auserveur (contournable)



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

Un engin de rendu s’assure que l’affichage de l’interface soittoujours à jour avec le code HTML et CSS.L’interactivité consiste à associer le code JavaScript avec desévénements, souvent sur des objects d’interface (ex. clic desouris).Ces principes se transposent aussi à des applications en solo(par ex. Cordova, React, Progressive-web-app).


https://cordova.apache.org/

https://reactjs.org

https://developers.google.com/web/progressive-web-apps/


Client-serveur

Une panoplie de techonologies et de choix d’architecturespécifique dans le cadre global du client serveur

Fureteur Serveur HTTPHTTP

CGIASP,JSP,PHPXSLNodeJS, TypescriptPython, C#, etc.

Fureteur

HTMLCSSJavaScript

Applet/PluginsXSL



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



Caractéristiques d’HTTP/1

Protocole client-serveur qui ne conserve pas d’état (session),mais il existe plusieurs mécanismes pour le faire

À travers l’URLhttps://precisionconference.com/~ihm/cgi-bin/FormWizard?/templates/users.tmpl&userRef=SFG7FBATTP4OFMCH6Y3CKPDFNWJM7AC

Par une variable cachée (même mécanisme que celui desformulaires)

<form action="controller.do" method="POST"><input type="HIDDEN" name="var1" value="value 1"><input type="SUBMIT" value="Push Me"> </form>

Par un “cookie”Stockage Web (HTML5)


https://precisionconference.com/~ihm/cgi-bin/FormWizard?/templates/users.tmpl

https://precisionconference.com/~ihm/cgi-bin/FormWizard?/templates/users.tmpl


Interfaces Web

1 Introduction

2 HTML, XML et SGML

3 JavaScript



6 Ergonomie du Web



SGML, HTML, XML, etc.

XML : ExtensibleMarkup LanguageDérivé de SGML, toutcomme HTML, maispermet de définir deslangages tout commeSGML et non pas desstructures fixescomme HTML



XML

Possède une DTD (Document Type Description) tout commeSGML

Spécifie la structure d’un langage XML(voir http://en.wikipedia.org/wiki/DTD)Généralement stocké dans un document externe au fichier XMLPermet la vérification de conformité

Universellement supporté; deux types d’analyseur syntaxiquesont disponibles :

SAX : lecture d’un document XML en mode “train” (stream)avec programmation par événements; efficace pour de grosdocumentsDOM : 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)


http://en.wikipedia.org/wiki/DTD


HTML

Note historique :http://www.w3.org/History/1989/proposal.htmlUn dérivé de SGML

Standard Generalized Markup Language (années 60!)Langage pour la spécification de langagesPrincipe syntaxique de base : <token> ... </token>

HTMLHyperText Markup LanguageDé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)Langage pour la spécification de la structure d’un documentavec un accent à la fois sur l’affichage et l’organisation

<H 1>: structure<b> ou <H1 ALIGN=LEFT>: affichage


http://www.w3.org/History/1989/proposal.html


Engin de rendu HTML

Il existe une panoplie d’engins de rendu HTML, par exemple :

Blink : Google ChromeGecko : Mozilla, Firefox (Mozilla,

LGPL)Trident : Internet Explorer sur

WindowsTasman : Internet Explorer sur

Macintosh

Lynx : rendu textuel du fureteurdu même nom

Presto : OperaWebCore : Safari (Apple, LGPL)

Source : http://en.wikipedia.org/wiki/Comparison_of_layout_engines


http://en.wikipedia.org/wiki/Comparison_of_layout_engines

http://en.wikipedia.org/wiki/Comparison_of_layout_engines


CSS

“Cascading Style Sheet”HTML doit être utilisé pour spécifier la structure d’undocument et laisser le style d’affichage à CSSPermet la spécification du style d’affichage, beaucoup mieuxqu’avec HTML et en suivant un modèle d’héritageUn document HTML peut référer à un document CSS et ainsidynamiquement changer le style de présentationOn peut associer des propriétés de CSS à chaque élémentHTML de différentes manières :

selon le type de balise (ex. h1, p, etc.)selon l’attribut class (ex. <h1 class="uneClasse">)par l’attribut style (ex. style="color:red;")(n.b. cette pratique est à utiliser dans des cas d’exceptions)



CSS (suite)

Modèle d’héritage flexible, par exempletd {margin-left: 1in; text-weight: bold; }Les <td> auront les propriétés CSS spécifiéestd 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.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éestd .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



Interfaces Web

1 Introduction

2 HTML, XML et SGML

3 JavaScript



6 Ergonomie du Web



JavaScript

Le traitement du côté client

Langage de programmation interprété, orienté objet du typeprototype et mue par événementsIl permet d’effectuer un traitement du côté clientStandard ISO-16262 supporté par les fureteurs communs(malheureusement avec quelques incompatibilités); voirnotamment standard ECMAScript et JScript de MSBasé sur le modèle DOM (Document Object Model) quipermet l’accès aux éléments du document HTML



Événements JavaScript

Quelques exemples :onclick : <a>, <inputtype=button>

onload : <img>, <body>

onmouseover : <a>,<area>

onsubmit : <form>

Exemple de code :



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>



Le modèle DOM (suite)

document.monTableau.element[1]

monTableau :adressage parnomElement[1] :adressage parposition



Accès au DOM

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


http://www.w3.org/TR/REC-DOM-Level-1/


Exemple de menu I



Interfaces Web

1 Introduction

2 HTML, XML et SGML

3 JavaScript



6 Ergonomie du Web



jQuery

Librarie JavaScript : jquery.com

Introduite en 2006 et utilisée par une majorité des sites trèsfréquentésTrès efficace pour :

la sélection des objets DOMla gestion des événementsles appels Ajax

Un excellent tutoriel est disponible :http://w3schools.com/jquery/default.asp


jquery.com

http://w3schools.com/jquery/default.asp


Syntaxe jQuery

Le signe $ est une abbréviation de jQuery. Ainsi, $(arg) estl’équivalent de jQuery(arg)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 :

$(this).hide() : élément courant$("p").hide() : éléments P$(".test").hide() : éléments classe="test"$(test").hide() : élément id="test".



Exemple de fonction de rappel d’événements avecjQuery



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 " ) ; } )

} ) ;



Ajax

“Asynchronous JavaScript and XML”

Un ensemble de technologies comme DHTML mais dont lenoyau est l’API XMLHttpRequest (XHR) de JavaScript,JScript ou VBScriptPrincipes :

Augmenter l’interactivité; réduire la latenceÉchanges légers et rapides entre le serveur et le client par uneconnexion indépendante, ce qui évite la recharge complèted’une pageAsynchrone, donc ne bloque pas l’affichage

Utilisé par plusieurs applications comme la complétion dansGoogle bar, MSN Virtual Earth, et les encadrés publicitaires.



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>


http://www.w3schools.com/Ajax/tryit.asp?filename=tryajax_first


Ajax (suite)

Plusieurs utilités :

Validation dynamique des entrées de formulairesAutocomplétion (exemple, champ de recherche)Téléchargement à la demande pour éviter un délai initial(exemple, GoogleMaps)Rafraichissement de données d’une page (“server pull”;exemple, cotes boursières)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).



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>





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 ) ;


http://imankulov.github.com/asuggest/


Auto complétion avec jQuery II

ou 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>


http://jqueryui.com/autocomplete/


Server Sent Events (2006)

Server Sent Events est une version plus récente deXMLHttpRequestN’exige pas du client une requête pour vérifier l’état de larequêteNécessite de basculer entre le protocole HTTP et un protocoleadapté à ce type de requêtes



Interfaces Web

1 Introduction

2 HTML, XML et SGML

3 JavaScript


5 Adaptation à la plateformeet à la taille

6 Ergonomie du Web



Exemple d’adaptation : Moodle

Moodle sur Android (628×1027)



Exemple d’adaptation : iPad

Moodle sur iPad (1536×2048)



Exemple d’adaptation : iPad (paysage)

Moodle sur iPad (2048×1536) en mode paysage



Exemple d’adaptation : poste de travail

Moodle sur poste de travail (fenêtre de 933×1056)



Exemple : barre de menu horizontale et verticale

Voir 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



Interfaces Web

1 Introduction

2 HTML, XML et SGML

3 JavaScript



6 Ergonomie du Web



Dimensions à considérer

Fréquence d’utilisationPour plusieurs sites, la majorité des utilisateurs n’en sont qu’àleurs premières visites

Ex: SAQ, Poste Canada, Hydro-Québec, BellOnt généralement une raison très spécifique de visiter

Par contre, pour des applications intranet, la grande majoritédes utilisateurs peuvent être des utilisateurs très fréquents

Ex: soutien à la clientèle, applications bancairesSegments d’utilisateurs

L’usage peut varier considérablement d’un utilisateur à l’autreEx: profils d’utilisateurs des sites universitaires

La connaissance préalable est très variable pour les sites grandpublic



Dimensions à considérer (suite)

Niveau d’interactivité requisDétermine dans quelle mesure il faut que le traitement soit faitdu côté client

Accès aux ressources localesLe fureteur créé des contraintes de sécurités limitant l’accèsaux ressources localesServeur local comme solution, mais architecture plus complexe

La diversité des plateformesFureteurs non compatiblesGéométrie variableAppareils variés (IOS, Android, Windows)

L’interface du type Web est-elle adaptée?Il faut parfois s’en remettre à WIMP

mais de moins en moins vrai



Dimensions à considérer (suite)

La navigation et la structuration de l’informationSouvent le problème principal des sitesSuivre les principes habituels :

Repères visuels et “navigationnels” stables et cohérentsDiminution de la charge cognitive (favoriser la reconnaissanceplutôt que le rappel)Bien choisir les termes et expressions (tests d’utilisabilité)



Données de navigation

L’analyse des données (logs) de navigation est un outilprécieux pour raffiner l’ergonomie d’un siteDonnées importantes :

Trafic et temps de réponse parpériode donnée

Pages et répertoires les plusconsultés

Durée moyenne d’une session

Provenance

Estimé (par login, cookie ouadresse IP) du taux de retourdes utilisateurs

(ex. combien de nouveauxvisiteurs par mois ou semaine)

Pages de sortie et d’entréePossibilité de faire des analyses très détaillées de la navigationdes utilisateursDéfinition d’un arbre de navigation



Exemple de Google Analytics

https://www.google.com/analytics/


https://www.google.com/analytics/


Quelques conclusions

Les interfaces Web sont maintenant incontournables et ellessont appelées à devenir encore plus répanduesLes mêmes principes ergonomiques s’appliquent aux interfacesWeb qu’aux interfaces WIMP mais les contextes d’utilisationsont fort différents et variésL’é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!


Documents

LOG2420 Analyse et conception d'interfaces utilisateur - …cours.polymtl.ca/MDesmarais/log2420/Seances/Web/web.pdf · 2019. 8. 29. · Introduction...MLJavaScriptExtensionsAdaptationErgonomie