Architecture(s) et

application(s) Web

CSC4101 - Expérience utilisateur WebCSC4101 - Expérience utilisateur WebCSC4101 - Expérience utilisateur Web

08/10/2019

1

Plan du coursPlan du coursPlan du cours

4 : Expérience utilisateur Web 4 : Expérience utilisateur Web4 : Expérience utilisateur Web

2

   

1. Interface utilisateurInterface utilisateurInterface utilisateur

3

Interface homme-machine (IHM)

4

Interface utilisateur

5

Propriétés de la ligne de commande

Command-Line Interface (CLI) :

Codi�éeStricteStatique

6

Interface utilisateur

7

Propriétés des interfaces graphiques

Graphical User Interface (GUI) :

Métaphore (bureau)Exploratoire

8

Interface utilisateur

Un magazine c'est un iPad qui ne marche pas.m4vUn magazine c'est un iPad qui ne marche pas.m4vUn magazine c'est un iPad qui ne marche pas.m4vÀ regarder plus tardÀ regarder plus tardÀ regarder plus tard PartagerPartagerPartager

Vidéo par UserExperiencesWorkshttps://www.youtube.com/watch?v=gc9NpYrbZgQ

9

Propriétés des interfaces « naturelles »

Natural User Interface (NUI) :

Directe (passage de novice à expert facilement)Naturelle / Intuitive

10

Importance des ordiphones (mobiles)

Plate-forme préférentielle (majorité des utilisateurs)

Utiliser technos Web pour applis mobiles :-)

11

</interface_utilisateur>

12

   

2. Interfaces WebInterfaces WebInterfaces Web

13

Qualité des interfaces Web

14

Ce qu’il ne faut pas faire

CW NSFW : https://userinyerface.com/

15

Ergonomie

Expérience utilisateur (User eXperience : UX)Utilisabilité :

apprenabilité (novices)« Fléau » de l’abandon de panierUtilisateurs « PIP » : Pressés, Ignorants et Paresseux

16

Portabilité

Le Web est la plate-forme universelle.

Standardisation = portabilité (merci HTML5)Applications mobiles :

Développé en HTML« Compilé » en toolkit natif (ex.

)Attention : prédominence de Chrome de Google…Best viewed in Chrome

ApacheCordova

17

Accessibilité

Vidéo :

Comment les aveugles utilisent internetComment les aveugles utilisent internetComment les aveugles utilisent internetÀ regarder plus tardÀ regarder plus tardÀ regarder plus tard PartagerPartagerPartager

Source : article de l’Obs

.

Comment les aveugles utilisent-ils internet ?

18

Obligations

Différents niveaux de priorité / niveaux deconformité à la normePrincipes : Perceptible, Utilisable,Compréhensible, RobusteRègles, critères de succèsTechniques suf�santes et techniquesrecommandées

Règles pour l’accessibilité des contenus Web(WCAG) 2.0

Référentiel Général d’Accessibilité desAdministrations (RGAA) Version 3 2017

19

Principes WCAG 2.0

20

Principe 1 : perceptible

21

Principe 2 : utilisable

2.1 Rendre toutes les fonctionnalités accessiblesau clavier.2.2 Laisser à l’utilisateur suf�samment de tempspour lire et utiliser le contenu.2.3 Ne pas concevoir de contenu susceptible deprovoquer des crises.2.4 Fournir à l’utilisateur des élémentsd’orientation pour naviguer, trouver le contenu etse situer dans le site.

22

Principe 3 : compréhensible

3.1 Rendre le contenu textuel lisible etcompréhensible.3.2 Faire en sorte que les pages apparaissent etfonctionnent de manière prévisible.3.3 Aider l’utilisateur à éviter et à corriger leserreurs de saisie.

23

Principe 4 : robuste

4.1 Optimiser la compatibilité avec les agentsutilisateurs actuels et futurs, y compris avec lestechnologies d’assistance.

etc.

24

Évaluation qualité

Critères Opquast (Open Quality Standards) :https://checklists.opquast.com/fr/qualiteweb/

25

</qualite_interface>

26

</interfaces_web>

27

   

3. Habillage des pages WebHabillage des pages WebHabillage des pages Web

28

Découplage structure / présentation

(suite)

29

Page Web et document HTML

Conversion de documents en une présentation dans lenavigateur.

30

HTML + CSS

31

Une « page Web » :

un document HTML(maître)plus des images,boutons, menus, etc.(éventuellementexternes)

Un document (HTML) :

un arbre de rubriques,sous-rubriques,etc.

Structure des sources des pages

Arbre de balises HTML(DOM : Document Object

Model)

32

Structure d’une page a�chée

Une page af�chée en 2D (ou imprimée) :

des boîtes qui contiennent d’autres boîtesboîtes qui contiennent texte ou images, etc.texte qui contient des caractèrescaractère qui contiennent des pixels…

33

Arbre DOM et rendu des pages

Le navigateur (moteur de rendu) convertit :

Arbre DOM : Document Object Model

en :

Arbre d’éléments à af�cherRègles de conversion

Prédé�nies (navigateur)Programmables (CSS)

34

Exemple de page avec un tableau

Logo du site

Titre page  

Accueil

LienLienLienLienLien

35

Structure HTML correspondante ?<table> <tr> <!-- SECTION EN-TETE --> <td colspan="3"> <h3>Logo du site</h3> </td> </tr> <tr> <!-- SECTION BARRE NAVIGATION == --> <td colspan="3"> <a href="#">Accueil</a> </td> </tr> <tr> <td width="20%"> <!-- COLONNE GAUCHE (MENU) == --> <a href="#">Lien</a><br> <a href="#">Lien</a><br> </td> <td width="55%"> <!-- COLONNE MILIEU (CONTENU) == --> <h4>Titre page</h4> Une mise-en-page avec en-tête, barre de navigation et section de ... </td> <td width="25%"</td> </tr>

36

Faire mieux !

Structurer la page en 6 sections, par exemple, avecdes balises <div>

Positionner le contenu de chaque section avec desrègles CSS.Permet de faire évoluer la mise en page, parexemple sous forme linéaire et non plus tabulaire,etc.

37

Programmer en HTML et CSS

38

Structure archétypale d’une page

Source : http://webstyleguide.com/wsg3/6-page-structure/3-site-design.html

39

Ou bien, ces temps-ci…

40

Exemples : CSS Zen Garden

http://www.csszengarden.com/tr/francais/

41

Design

Outils de Mockup :

Papier + crayon + gommeOutilsHTML + CSS (+ templates)

42

Guides de style

Chercher « web interface style guide » sur votre moteude recherche préféréFaire comme sur les applis mobiles :

Android : Material design :

iOS Human Interface Guidelines :https://developer.android.com/design/index.htm

https://developer.apple.com/ios/human-interface-guidelines/

43

Inspiration / prêt à l’emploi

: récompenses pourle Web design

: sélectionde designs

Marché :

: thèmes prêts à l’emploi

https://www.awwwards.com/

http://www.webdesign-inspiration.com/

https://themeforest.net/

44

Caractéristiques de HTML

45

HTML5

Tout (ou presque) est possible en terme d’interfaced’applications.Y compris l’accès à des zones de graphisme libre etl’intégration des périphériques dutéléphone/ordinateur

46

Les bons artistes copient, les grands

artistes volent

Avantage d’HTML : le code source HTML dispo.

Vive le copier-coller :-)

47

Contenu adaptatif

Responsive design : prend en compte la taille del’écran automatiquementp. ex.: avec (voir plus loin)Bootstrap

48

Interactions dynamiques

JavascriptInteractions asynchrones

49

Interactions avec ordiphone mobile

Application allant plus loin que l’af�chage et lasaisie de texte : accès à toutes les fonctions duterminal mobile depuis le navigateur Web

https://www.w3.org/Mobile/mobile-web-app-state/

50

Principes de CSS

Cascading Style Sheets

Concevoir l’habillage des pages du site / application

51

Cascade

Modèle « objet » particulier

Langage déclaratifCombinaison de plusieurs feuilles avec priorités« Héritage » de propriétés des parents

Factorisation de motifs :

DRY – don’t repeat yourself

52

Langage à base de règles

Si motif trouvé (sélecteur)alors valeur donnée à attribut/propriété de miseen forme

53

Exemplebody { padding-left: 11em; font-family: Georgia, "Times New Roman", Times, serif; color: purple; background-color: #d8da3d } ul.navbar { list-style-type: none; padding: 0; margin: 0; position: absolute; top: 2em; left: 1em; width: 9em }

54

Di�érents niveaux de proximité

55

Spéci�cité selon la proximité

Quelles règles s’appliquent, si plusieurs sont dé�nies ?

56

Spéci�cité du sélecteur

57

Outils du développeur

sur MDNExaminer et modi�er le CSS

58

Conception de CSS

Pas toujours simpleAbstractionFrameworks CSS (et Javascript)

ex. :

Couplage templates et CSS

Bootstrap

59

</habillage_css>

60

   

4. Programmation des interfacesProgrammation des interfacesProgrammation des interfaces

61

Rappel architecture et MVC

62

Rappel : Architecture multi-tiers

63

Rappel : Patron MVC

64

Modèle et Vue

65

Pilote des interactions : le Contrôleur

Contrôleur : coordonne les transitions entre vues,et les entrées de l’utilisateur, en fonction de l’étatdu modèleVues (pages)Modèle

Objectif : programmer les vues mais aussi le contrôleur,au-dessus des mécanismes de HTML et HTTP, pour

offrir une bonne expérience utilisateur.

66

Modéle états - transitions

67

Ensemble de vues / écrans / pages

Naviguer dans une arborescence de pages / vues /écrans / dialoguesTrouver de l’information au sein d’une pageWidgets pour interaction : composants d’interfacegraphique (boutons, listes, etc.)

68

Un état de l’application

Une page / vue, représente l’état courant

69

Hypermedia As The Engine Of

Application State (HATEOAS)Une application = diagramme d’états �niTransitions = hyperliens sur lesquels on clique (et autres widgets)

70

Exemple Application Web

Point départ :

( )https://twitter.com/jack/status/20

71

Diagramme états Web app Twitter

1 transition en entrée / 32 transitions en sortie

72

Interactions avec utilisateur

Af�chage de pages (lecture sur des ressources)Invocation de méthodes sur des ressourcesdédiées (y compris écriture)Invocation d’APIs pour interactions �nes (lecture /écriture)

73

Framework Web MVC

ModèleVueContrôleur

Le contrôleur gère les transitions HATEOAS

74

</hateoas>

75

Dans Symfony

76

Modèle

Classes PHPDoctrine : typage des attributsBase de données…

77

Vues

Une représentation de la ressource demandée dans larequête du client.

arguments de render() :

injectés dans le gabarit Twig

$this->render ( 'todo.html.twig', [ 'id' => $id, 'todo' => $todo ] );

78

Routage vers les méthodes du

contrôleur/** * @Route("/todo/show/{id}", name = "todo_show") * @Method("GET") */ public function todoShow($id) { ... }

79

Cohérence des routes

Utilisation des routes pour les transitions dansl’application (nommées), au lieu des chemins « en dur ».<a href=" {{ path('todo_show', { 'id' : todo.id }) }}"> détails </a>

80

</programmation>

81

   

5. Technologies pour le projetTechnologies pour le projetTechnologies pour le projet

82

Conception des gabarits et CSS

83

Concevoir les gabarits des pages

Conception parallèle :

des blocs des gabarits HTMLdes sections <div> qu’ils contiennent (identi�ants

ou classes)des mises en forme

Même convention de nommage

84

Modèle de page souhaité<html> <head> </head> <body> NAVIGATION MENU (COLONNE DE GAUCHE) CONTENU PRINCIPAL BAS DE PAGE </body> </html>

85

Structure sémantique<body> <div id="navigation"> (NAVIGATION) </div> <div id="menu"> (MENU RUBRIQUES) </div> <div id="main"> (CONTENU PRINCIPAL) </div> <div id="footer"> (BAS DE PAGE) </div> </body>

86

Feuille de style CSS#navigation { ... } #menu { float: left; ... } #main { ... } #footer { ... }

87

Gabarit Twig{% block body %} <body> <div id="navigation"> {% block navigation %} {% endblock %} {# navigation #} </div> <div id="menu"> {% block menu %} {% endblock %} {# menu #} </div> <div id="main"> {% block main %} <h1>{{ Message }}</h1> {% endblock %} {# main #} </div> <div id="footer"> {% block footer %} {% endblock %} {# footer #} </div> </body> {% endblock %} {# body #}

88

Standardisation / Spécialisation

Spécialisation dans une sous-section ou une page decertains éléments de structure ou de présentation

héritage des gabarits : redé�nition du contenu deblocs

cascade des feuilles de style CSS : redé�nition dela mise en forme

{% block main %} ... {% endblock %}

#main { background-color: lightblue; }

89

</conception>

90

CSS avec Bootstrap

91

Utilisation d’un framework de

présentation CSS

Standardisation du lookAdaptatifGrille pour le positionnement graphiqueIntégration avec Twig / Symfony

92

Bootstrap

Framework CSS (+ JS)

http://getbootstrap.com/

93

Système de grille

Mise en page basée sur une grille de 12 colonnes

94

Exemples

exemples, dans la documentation Bootstrapexemples sur Start Bootstrap

95

Thèmes

Feuille de syle additionnelleThèmes sur Start Bootstrap

96

</bootstrap>

97

</technos_projet>

98

Take awayTake awayTake awayStructure != présentationRôle de CSSPrincipe de surcharge des feuillesContrôleurs MVC pour gérer le comportementHypertexte de l’interface Web (HATEOS)Accessibilité

99

RécapRécapRécap[X] HTTP (GET)

[X] PHP

[X] Doctrine

[X] Routeur Symfony

[X] HTML

[X] Twig

[X] CSS

Tout ce qu’il faut pour un joli site Web dynamique enlecture seule ;-)

100

Ensuite…Ensuite…Ensuite…

101

Tout de suite, séance TP n°4

102

Hors-présentiel d’ici au prochain cours

3 h à caser dans la semaine

103

PostfacePostfacePostface

104

Crédits illustrations et vidéosVidéo parUserExperiencesWorksvidéo : (Le nouvel obs)Image « HTML + CSS » empruntée au « CSS Tutorial » de Avinash Malhotra :

Diagrammes « Speci�city ranking by proximity », « Proximal speci�city in action… » et« Speci�city ranking by selector type » empruntés à par Ernie Simpson, aka The Big Erns :

Diagramme de grille de mise en page de Bootstrap empruntée à par Maurice Chavelli

Illustration «   », supposémment de Bruce Sterling

https://www.youtube.com/watch?v=gc9NpYrbZgQ

Comment les aveugles utilisent-ils internet ?

http://tutorial.techaltum.com/css.html

http://cssway.thebigerns.com/special/master-item-styles/Bootstrap de Twitter

: un kit CSS et plus !Enjoy Websur�ng

105

CopyrightCopyrightCopyrightDocument propriété de ses auteurs et de TélécomSudParis (sauf exceptions explicitementmentionnées).Réservé à l’utilisation pour la formation initiale àTélécom SudParis.

106