- Interfaces Web - École Polytechnique de Montréal

Download Report

Transcript - Interfaces Web - École Polytechnique de Montréal 

Interfaces Web
Michel C. Desmarais
G´
enie informatique
´
Ecole
Polytechnique de Montr´
eal
13 janvier 2015
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web
1/1
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web
2/1
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/Android
La tendance est au Web car :
I
I
I
I
I
Facilit´e d’installation, de maintenance, de mise `a jour, de
contrˆ
ole
Portable sur toutes les plateformes, mˆeme mobiles
Grande facilit´e `a faire des applications de saisie et d’affichage
de donn´ees simples
Inconv´enients :
I
Inconv´enients du mode client-serveur :
I
I
I
Gadgets r´eduits (quoique en expansion avec Javascript)
´ enements plus limit´es (`
Ev´
a moins d’utiliser un applet ou autre
moyen)
D´elai pour l’acc`es au serveur
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web
3/1
Client-serveur
I
Une panoplie de techonologies et de choix d’architecture
sp´ecifique dans le cadre global du client serveur
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web
4/1
Une requˆete HTTP
La requˆete :
GET /index.html HTTP/1.1
Host : www.polymtl.ca
La r´eponse :
HTTP/1.1 200 OK
Date : Fri, 03 Nov 2006 14 :13 :09 GMT
Server : Apache/2.0.55 (Unix) mod ssl/2.0.55 OpenSSL/...
X-Powered-By : PHP/4.4.2
Connection : close
Content-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
5/1
Caract´eristiques d’HTTP
I
Protocole client-serveur qui ne conserve pas d’´etat (session),
mais il existe plusieurs m´ecanismes pour le faire
I
` travers l’URL
A
I
I
Par une variable cach´ee (mˆeme m´ecanisme que celui des
formulaires)
I
I
I
I
https://precisionconference.com/~ihm/cgi-bin/
FormWizard?/templates/users.tmpl
&userRef=SFG7FBATTP4OFMCH6Y3CKPDFNWJM7AC
<form action="controller.do" method="POST">
<input type="HIDDEN" name="var1" value="value 1">
<input type="SUBMIT" value="Push Me"> </form>
Par un “cookie”
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web
6/1
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web
7/1
SGML, HTML, XML, etc.
I
XML : Extensible
Markup Language
I
D´eriv´e de SGML, tout
comme HTML, mais
permet de d´efinir des
langages tout comme
SGML et non pas des
structures fixes
comme HTML
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web
8/1
XML
I
Poss`ede une DTD (Document Type Description) tout comme
SGML
I
I
I
I
Sp´ecifie la structure d’un langage XML
(voir http://en.wikipedia.org/wiki/DTD)
G´en´eralement stock´e dans un document externe au fichier
XML
Permet la v´erification de conformit´e
Universellement support´e ; deux types d’analyseur syntaxique
sont disponibles :
I
I
SAX : lecture d’un document XML en mode “train” (stream)
avec programmation par ´ev´enements ; efficace pour de gros
documents
DOM : lecture compl`ete du document dans une structure
d’arbre (plus flexible que le mod`ele SAX mais doit charg´e tout
le document en m´emoire au pr´ealable)
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web
9/1
HTML
I
I
Note historique :
http://www.w3.org/History/1989/proposal.html
Un d´eriv´e de SGML
I
I
I
I
Standard Generalized Markup Language (ann´ees 60 !)
Langage pour la sp´ecification de langages
Principe syntaxique de base : <token> ... </token>
HTML
I
I
I
HyperText Markup Language
D´eriv´e de SGML mais ne suit pas une syntaxe rigoureuse,
ex : <P> Texte... <P> Second paragraphe...
(c’est d’ailleurs une des sources d’incompatibilit´es entre
fureteurs)
Langage pour la sp´ecification de la structure d’un document
avec un accent `a la fois sur l’affichage et l’organisation
I
I
<H 1> : structure
<b> ou <H1 ALIGN=LEFT> : affichage
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web
10/1
Engin de rendu HTML
Il existe une panoplie d’engins de rendu HTML, par exemple :
Gecko : Mozilla, Firefox (Mozilla,
LGPL), le seul qui soit sur
toutes les plates-formes
Trident : Internet Explorer sur
Windows (propri´etaire)
Tasman : Internet Explorer sur
Macintosh (propri´etaire)
Lynx : rendu textuel du fureteur
du mˆeme nom
Presto : Opera (propri´etaire)
WebCore : Safari (Apple, LGPL)
Source : http:
//en.wikipedia.org/wiki/Comparison_of_layout_engines
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web
11/1
CSS
I
“Cascading Style Sheet”
I
HTML devrait surtout ˆetre utilis´e pour sp´ecifier la structure
d’un document pour laisser le style d’affichage `a CSS
I
Permet la sp´ecification du style d’affichage, beaucoup mieux
qu’avec HTML et en suivant un mod`ele d’h´eritage
I
Un document HTML peut r´ef´erer `a un document CSS et ainsi
dynamiquement (g´en´eralement par une programmation du
cˆot´e serveur) changer le style de pr´esentation
On peut associer des propri´et´es de CSS `a chaque ´el´ement
HTML
I
I
I
I
el´
ement une liste de propri´
et´
es
un ´
. une classe=un nom de classe css
<td class=une classe>
style="une liste de propri´
et´
es"
<td style="une liste de propri´
et´
es">
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web
12/1
CSS (suite)
I
Mod`ele d’h´eritage flexible, par exemple
I
I
I
I
td {margin-left: 1in; text-weight: bold; }
Les <td> auront les propri´et´es CSS sp´ecifi´ees
td p { margin-left: 1in; text-weight: bold; }
Les <p> (paragraphe) qui sont sous l’´el´ement <td> auront les
propri´et´es CSS sp´ecifi´ees
.indented-bold margin-left: 1in; text-weight:
bold; Les ´el´ements comportants la propri´et´e HTML
class=indented-bold auront les propri´et´es CSS sp´ecifi´ees
td .indented-bold margin-left:1in;
text-weight:bold; Les ´el´ements ayant la propri´et´e HTML
class=indented-bold et qui sont sous l’´el´ement <td>
auront les propri´et´es CSS sp´ecifi´ees
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web
13/1
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web
14/1
JavaScript
Le traitement du cˆot´e client
I
Langage de programmation interpr´et´e, partiellement orient´e
objet et mue par ´ev´enements (event-driven)
I
Il permet d’effectuer un traitement du cˆ
ot´e client
I
Standard ISO-16262 support´e par les fureteurs communs
(malheureusement avec quelques incompatibilit´es) ; voir
notamment standard ECMAScript et JScript de MS
I
Bas´e sur le mod`ele DOM (Document Object Model) qui
permet l’acc`es aux ´el´ements du document HTML
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web
15/1
´ enements JavaScript
Ev´
Exemple de code :
I
Quelques exemples :
I
onclick : <a>, <input
type=button>
I
onload : <img>, <body>
I
onmouseover : <a>, <area>
I
onsubmit : <form>
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web
16/1
Le mod`ele DOM, (Document Object Model)
<TABLE>
<TBODY>
<TR>
<TD>Shady Grove</TD>
<TD>Aeolian</TD>
</TR>
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web
<TR>
<TD>Over the River,
Charlie</TD>
<TD>Dorian</TD>
</TR>
</TBODY>
</TABLE>
17/1
Le mod`ele DOM (suite)
document.monTableau.element[1]
I
monTableau :
adressage par
nom
I
Element[1] :
adressage par
position
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web
18/1
Acc`es au DOM
I
DOM comporte en fait trois niveaux
1. La base, : http://www.w3.org/TR/REC-DOM-Level-1/
2. Ajout des namespace, filtres de vues et association
d’´ev´enements (ex. JavaScript) `a des noeuds
3. Plusieurs ajouts, notamment XPath
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web
19/1
DHTML
HTML dynamique
I
I
Ensemble, JavaScript (ou un autre langage de script du cˆot´e
client), le mod`ele DOM et les CSS permettent de cr´eer des
pages dynamiques (DHTML)
Ces pages offrent un degr´e d’interactivit´e que l’on retrouve
dans des interfaces WIMP, mais `a un coˆ
ut important :
I
I
I
I
I
Complexe et difficile `a d´everminer sur certaines plateformes
Incompatibilit´es entre engins HTML
Variabilit´e des plates-formes et de grandeurs de fenˆetres qui
rend le r´esultat final difficile `a anticiper
Contenu qui n’est pas directement “indexable” par des engins
Difficult´es pour utiliser ad´equatement le bouton de retour et
les ancrages
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web
20/1
Exemple de menu I
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web
21/1
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web
22/1
jQuery
I
Librarie JavaScript : jquery.com
I
Introduite en 2006 mais d´ej`a utilis´ee par une majorit´e des sites
tr`es fr´equent´es
Tr`es efficace pour :
I
I
I
I
I
la s´election des objets DOM
la gestion des ´ev´enements
les appels Ajax
Un excellent tutoriel est disponible :
http://w3schools.com/jquery/default.asp
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web
23/1
Syntaxe jQuery
I
I
Le signe $ est une abbr´eviation de jQuery. Ainsi, $(arg) est
l’´equivalent de jQuery(arg)
L’expression $("P") effectue une recherche dans le DOM pour
les balises P et permet de leur appliquer une m´ethode. Par
exemple, les appels suivants camouflent diff´erents ´el´ements :
I
I
I
I
$(this).hide() : ´el´ement courant
$("p").hide() : ´el´ements P
$(".test").hide() : ´el´ements classe=”test”
$("test").hide() : ´el´ement id=”test”.
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web
24/1
Exemple de fonction de rappel d’´ev´enements avec jQuery
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web
25/1
jQuery et classes CSS
Ajout d’une fonction de rappel :
$ ( ”#deux ” ) . c l i c k ( f u n c t i o n ( ) {
$( t h i s ) . addClass (” bleu ” ) ; } )
});
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web
26/1
Ajax
“Asynchronous JavaScript and XML”
I
I
Un ensemble de technologies comme DHTML mais dont le
noyau est l’API XMLHttpRequest (XHR) de JavaScript,
JScript ou VBScript
Principes :
I
I
I
I
Augmenter l’interactivit´e ; r´eduire la latence
´
Echanges
l´egers et rapides entre le serveur et le client par une
connexion ind´ependante, ce qui ´evite la recharge compl`ete
d’une page
Asynchrone, donc ne bloque pas l’affichage
Utilis´e par plusieurs applications comme la compl´etion dans
Google bar, MSN Virtual Earth, et les encadr´es publicitaires.
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web
27/1
Exemple
http://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/1
Ajax (suite)
Plusieurs utilit´es :
I
Validation dynamique des entr´ees de formulaires
I
Autocompl´etion (exemple, champ de recherche)
I
T´el´echargement `a la demande pour ´eviter un d´elai initial
(exemple, GoogleMaps)
I
Rafraichissement de donn´ees d’une page (“server pull” ;
exemple, cotes boursi`eres)
I
Encadr´es publicitaires d´etermin´es en fonction du contexte
(contenu de la page, historique de navitation et autres
informations pouvant ˆetre accumul´es quant `a l’utilisateur).
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web
29/1
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 e a d y ( f u n c t i o n ( ) {
$( ” button ” ) . c l i c k ( function (){
$ ( ”#d i v 1 ” ) . l o a d ( ”demo t e s t . t x t ” ) ;
});
});
</ s c r i p t >
</ head>
<body>
<d i v i d=” d i v 1 ”><h2>L e t j Q u e r y AJAX Change T h i s Text</h2></ d i v
<b u t t o n >Get E x t e r n a l Content </ b u t t o n >
</body></ html>
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web
30/1
Auto compl´etion avec jQuery I
http://imankulov.github.com/asuggest/
v ar s u g g e s t s = [ ” h e l l o ” , ” w o r l d ” ] ;
$ ( ”#a r e a 1 ” ) . a s u g g e s t ( s u g g e s t s ) ;
$
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web
31/1
Auto compl´etion avec jQuery II
ou http://jqueryui.com/autocomplete/
$( function () {
v ar a v a i l a b l e T a g s = [
” A p p l e S c r i p t ” , ” Asp ” , ” S c a l a ” , ” Scheme ”
];
$ ( ”\#t a g s ” ) . a u t o c o m p l e t e ( {
source : a v a i l a b l e T a g s
});
});
...
<d i v c l a s s=” u i −w i d g e t ”>
< l a b e l f o r=” t a g s ”>Tags : </ l a b e l >
<i n p u t i d=” t a g s ” />
</ d i v >
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web
32/1
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web
33/1
Exemple d’adaptation : Moodle
Moodle sur Android (628×1027)
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web
34/1
Exemple d’adaptation : iPad
Moodle sur iPad (1536×2048)
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web
35/1
Exemple d’adaptation : iPad (paysage)
Moodle sur iPad (2048×1536) en mode paysage
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web
36/1
Exemple d’adaptation : poste de travail
Moodle sur poste de travail (fenˆetre de 933×1056)
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web
37/1
Exemple : barre de menu horizontale et verticale I
<!DOCTYPE html>
<META HTTP−EQUIV=” Content −Type ” CONTENT=” t e x t / h tm l ; c h a r s e t=U
<html>
<head>
<s c r i p t >
f u n c t i o n menu ( elem , t y p e ) {
v a r l i E l e m =document . getElementsByTagName ( elem )
f o r ( v a r i = 0 ; i < l i E l e m . l e n g t h ; i ++) {
l i E l e m [ i ] . s t y l e . c s s F l o a t=t y p e ;
}
}
</ s c r i p t >
<s t y l e >
ul {
l i s t −s t y l e −t y p e : none ;
margin : 0 ;
padding : 0 ;
overflow : hidden ;
}
li {
float : left ;
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web
38/1
Exemple
: barre de menu horizontale et verticale II
}
a {
display : block ;
w i d t h : 1 0 0 px ;
b a c k g r o u n d −c o l o r :#dddddd ;
}
#a d a p t {
b a c k g r o u n d −c o l o r :#d d f f f f ;
</ s t y l e >
</ head>
<body>
<h2>N a v i g a t i o n h o r i z o n t a l e ou v e r t i c a l e </h2>
<u l >
< l i ><a
< l i ><a
< l i ><a
< l i ><a
</ u l >
h r e f=”#HTML”>HTML</a></ l i >
h r e f=”#XML”>XML</a></ l i >
h r e f=”#J a v a S c r i p t ”>J a v a S c r i p t </a></ l i >
h r e f=”#XSL”>XSL</a></ l i >
<d i v i d=” a d a p t ”>
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web
39/1
Exemple
: barre de menu horizontale et verticale III
<p s t y l e=” f o n t −w e i g h t : b o l d ; ”> P r o p r i ´e t ´e f l o a d d e s ´e l ´e ments
´ l ´e ments &l t ; L I&g t ;&nbsp ;: < /p>
<p>E
<b u t t o n t y p e=” b u t t o n ” o n c l i c k=”menu ( ’ l i ’ ,
<b u t t o n t y p e=” b u t t o n ” o n c l i c k=”menu ( ’ l i ’ ,
<br>
<b u t t o n t y p e=” b u t t o n ” o n c l i c k=”menu ( ’ l i ’ ,
d
’ l e f t ’ ) ”>Gauche</ b u
’ r i g h t ’ ) ”>D r o i t e </ b
’ none ’ ) ”> V e r t i c a l </
´ l ´e ments &l t ; LU&g t ;&nbsp ;: < /p>
<p>E
<b u t t o n t y p e=” b u t t o n ” o n c l i c k=”menu ( ’ u l , ’ l e f t ’ ) ”>Gauche</ b u t
<b u t t o n t y p e=” b u t t o n ” o n c l i c k=”menu ( ’ u l ’ , ’ r i g h t ’ ) ”>D r o i t e </ b
<br>
<b u t t o n t y p e=” b u t t o n ” o n c l i c k=”menu ( ’ u l ’ , ’ none ’ ) ”> V e r t i c a l </
</ d i v >
<h3 i d=”HTML”>HTML</h3>
<p>La s t r u c t u r e du document e s t en HTML.</p>
<h3 i d=”XML”>XML</h3>
<p>La s y n t a x e du HTML e s t d´e c r i t e en XML−DTD.</p>
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web
40/1
Exemple : barre de menu horizontale et verticale IV
<h3 i d=” J a v a S c r i p t ”>J a v a S c r i p t </h3>
<p>Le comportement e s t i m p l ´e ment ´e en J a v a S c r i p t .</p>
<h3 i d=”XSL”>XSL</h3>
<p>XSL e s t une o p t i o n d ’ a d a p t a t i o n de c o n t e n u .</p>
<p s t y l e =”margin−bottom : 1 0 0 0 px”>
</ body>
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web
41/1
Option XSL et XPATH
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web
42/1
Le langage XSL
I
Extensible stylesheet language
I
Permet la transformation d’un document XML
I
Tr`es utile pour afficher des donn´ees structur´ees, comme des
donn´ees provenant d’une BD, dans un format HTML
I
XSLT : transformations XSL
Langage de haut niveau
I
I
I
I
I
bas´e sur la reconnaissance de patron (“pattern matching”)
repose sur XPATH : langage pour la d´efinition de patrons
comporte les structures de contrˆ
ole de base (conditions,
boucles, r´ecursion)
offre plusieurs fonctions utiles comme le tri et l’´enum´eration
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web
43/1
XPath
I
I
Un langage pour la d´efinition de patrons dans des structures
XML
Similaire `a la d´efinition d’expressions r´eguli`eres en UNIX :
I
I
I
UNIX : /*/lib/*.txt
(retourne tous les fichiers avec l’extention ’.txt’ de tous les
r´epertoires “lib” du second niveau `a partir de la racine ’/’)
XPath : /*/lib/*[@ext="txt"]
(idem au pr´ec´edent, mais `a partir d’une racine de document
XML)
Offre une grande fonctionnalit´e pour les requˆetes complexes
Par exemple :
I
//channel/descendant::title/text()
(titre des descendants ’Channel’ du contexte courant)
I
//channel[@source="BBC"]/
type[text()="Children"]/sibbling::title/text()
(titre des ´emissions pour enfants de la chaˆıne BBC)
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web
44/1
Exemples
http://www.w3schools.com/xpath/xpath_examples.asp
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web
45/1
Le langage XSL (suite)
I
Le traitement peut ˆetre fait
I
I
I
en diff´er´e ou en temps r´eel
du cˆ
ot´e serveur ou du cˆ
ot´e client (ce qui d´echarge le serveur)
Les fureteurs r´ecents supportent XSL pour le traitement du
cˆot´e client
I
I
Offre donc un m´ecanisme ´el´egant pour l’adaptation `a la
plateforme
Seul l’arbre XML n’a `a ˆetre transmis
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web
46/1
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web
47/1
Dimensions `a consid´erer
I
Fr´equence d’utilisation
I
Pour plusieurs sites, la majorit´e des utilisateurs n’en sont qu’`a
leurs premi`eres visites
I
I
I
Par contre, pour des applications intranet, la grande majorit´e
des utilisateurs peuvent ˆetre des utilisateurs tr`es fr´equents
I
I
Ex : SAQ, Poste Canada, Hydro-Qu´ebec, Bell
Ont g´en´eralement une raison tr`es sp´ecifique de visiter
Ex : soutien `
a la client`ele, applications bancaires
Segments d’utilisateurs
I
L’usage peut varier consid´erablement d’un utilisateur `a l’autre
I
I
Ex : profils d’utilisateurs des sites universitaires
La connaissance pr´ealable est tr`es variable pour les sites grand
public
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web
48/1
Dimensions `a consid´erer (suite)
I
Niveau d’interactivit´e requis
I
I
D´etermine dans quelle mesure il faut que le traitement soit fait
du cˆ
ot´e client
L’interface du type Web est-elle adapt´ee ?
I
I
I
Il faut parfois s’en remettre `
a WIMP ou une applet,
mais de moins en moins vrai
La diversit´e des plateformes
I
Fureteurs non compatibles
I
G´eom´etrie variable
I
Appareils vari´es (IOS, Android, Windows)
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web
49/1
Dimensions `a consid´erer (suite)
I
La navigation et la structuration de l’information
I
Souvent le probl`eme principal des sites
I
Suivre les principes habituels :
I
I
I
Rep`eres visuels et “navigationnels” stables et coh´erents
Diminution de la charge cognitive (favoriser la reconnaissance plutˆ
ot
que le rappel)
Bien choisir les termes et expressions (tests d’utilisabilit´e)
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web
50/1
Donn´ees de navigation
I
L’analyse des donn´ees (logs) de navigation est un outil pr´ecieux
pour raffiner l’ergonomie d’un site
I
Donn´ees importantes :
I
Trafic et temps de r´eponse par
p´eriode donn´ee
I
Pages et r´epertoires les plus
consult´es
I
Dur´ee moyenne d’une session
I
Provenance
I
Estim´e (par login, cookie ou
adresse IP) du taux de retour
des utilisateurs
I
(ex. combien de nouveaux
visiteurs par mois ou semaine)
I
Pages de sortie et d’entr´ee
I
Possibilit´e de faire des analyses tr`es d´etaill´ees de la navigation des
utilisateurs
I
D´efinition d’un arbre de navigation
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web
51/1
Exemple de Google Analytics
I
https://www.google.com/analytics/
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web
52/1
Quelques conclusions
I
Les interfaces Web sont maintenant incontournables et elles sont
appel´ees `a devenir encore plus r´epandues
I
Les mˆemes principes ergonomiques s’appliquent aux interfaces
Web qu’aux interfaces WIMP mais les contextes d’utilisation sont
fort diff´erents et vari´es
I
L’´evolution des technologies Web est tr`es rapide et am`ene
constamment des contextes nouveaux avec pour cons´equence qu’il
est beaucoup plus facile de faire des erreurs de conception !
LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web
53/1