IHM: LE WEB DESIGN
Download
Report
Transcript IHM: LE WEB DESIGN
By Loveprit SIDHU
Le 28 janvier 2011
Formation : M2EID²
Encadré par Catherine RECANATI
Web Design
1
I.
II.
III.
Introduction
1.
2.
3.
Le web avec HTML
Le design avec CSS
Le W3C
Structuration d’un site web
1.
2.
3.
1.
2.
3.
4.
Différents types de sites
L’architecture d’un site
L’arborescence d’un site
La navigation avec les élément GUI
La barre de navigation
La fils d’Ariane
Les liens
Exemple
Web Design
2
IV.
V.
IV.
Ergonomie pour le web design
1.
2.
3.
4.
La charte graphique
Les couleurs
La police de caractère
Les images
Accessibilité/Utilisabilité
1.
2.
La norme WCAG 2.0
Exemple : les daltoniens
Outils pour le web design
1.
2.
3.
Photoshop
Dreamweaver
CMS
Web Design
3
- Le web est né dans les années 1990 au
CERN
(Organisation Européenne pour la Recherche
Nucléaire)
- L’inventeur du World Wide Web est Tim
Berner-Lee et Rober Cailliau.
Web Design
4
World Wide Web (Définition) :
« système hypertexte public fonctionnant
sur Internet qui permet de consulter, avec
un navigateur, des pages accessibles sur
des sites. » appelé aussi la Toile ou le Web.
Site web (Définition): « C’est un ensemble
de pages Web hyperliées entre elles et mises en
ligne à une adresse Web. »
En 2010, il existe plus de 233 millions de sites
web
Web Design
5
« La Toile »
Interaction entre
un serveur web et
un navigateur
(browser)
Web Design
6
Hypertexte (Définition) : c’est un média
textuel contenant des liens entre divers
points dans des documents. L'hypertexte
permet de naviguer à l'intérieur d'un même
document ou d'un document à un autre.
Trois évolutions du web:
◦ Web 1.0 : pages statique
◦ Web 2.0 : axé sur les personnes
◦ Web 3.0 : axé sur les objets
Web Design
7
Le HTML (Hypertext Markup Language) est
un format de données ou langage utilisé
pour créer un site web
C’est un langage qui utilise des balises
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>WEB DESIGN</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Defaut" href="index.css"
/>
</head>
<body> <p> Test pour la présentation orale d’IHM </p>
</body>
</html>
indexihm.html index.html indexlee.html
Web Design
8
CSS (Cascading Style Sheets) : feuille de style en
cascade. C’est est un langage informatique qui
sert à décrire la présentation des
documents HTML et XML
Apparu en 1996
Objectifs:
◦ La structure et la présentation sont gérées séparément
◦ Il facilite la portabilité du contenu
◦ Le code HTML est réduit en taille et en complexité
Portfolio\index.html
Web Design
9
On a la norme NF pour les produits, pour le
web il y a le W3C.
C’est un organisme de standardisation
Web Design
10
Site vitrine : site pour promouvoir quelque chose
Site d’information : site avec un contenu utile pour
l’internaute
Page de vente (landing page) : site pour vendre un
produit comme le ferait un commercial
Page de captation (squeeze page) : site pour attirer
l’attention
Site marchand ou e-commerce : site de vente en
ligne (Cdiscount, Fnac,…)
Bien savoir pourquoi on veut créer un
site et pour quel public
Web Design
11
A quoi bon présenter de l'information de
qualité si les internautes s'y perdent.
A quoi bon avoir un beau site s'il n'est pas
attractif
Web Design
12
Les bénéfices d’un site peuvent être multiples:
◦ accroître le chiffre d’affaire
Avec de nouveaux clients
Avec de nouveaux partenaires
En améliorant les services
◦ diminuer les dépenses
Frais de publicités
Réduire les coût de fonctionnement
◦ développer sa notoriété
En étant visible 24h/24 7j/7
Web Design
13
L'architecture d'information d'un site doit être
conçue d'une façon très rigoureuse.
L’internaute doit pouvoir trouver
l’information facilement sinon il pensera que
l’information n’existe pas.
Après cette étude on passe à l’organisation
visuelle
Web Design
14
Zoning web
Web Design
15
Web Design
16
Le zoning permet de découper la page en
autant de zones que nécessaire.
Cela permet de positionner :
◦
◦
◦
◦
◦
les zones de navigation,
les contenus,
le logo,
le pied de page,
le moteur de recherche, ou le fil d'Ariane...
Web Design
17
Définissez vos rubriques principales
Chaque thème représentera une rubrique de votre site.
Chacune de vos rubriques doit contenir assez d'informations
pour pouvoir les présenter en thèmes logiques sur d'autres
pages de niveau inférieur.
Hiérarchisez vos informations à l'intérieur de vos rubriques
principales
Chaque groupe d'informations représentera une sous-rubrique.
Pour chaque rubrique, vous pouvez proposer jusqu'à 7 sousrubriques.
La règle des trois clics
Ca suggère que l’utilisateur d’un site web doit pouvoir trouver
l’information avec pas plus de 3 clicks de souris. C’est basé sur
le fait qu’un utilisateur d’un site deviens frustré et quitte souvent
le site s’il ne trouve pas l’information en 3 clicks
Web Design
18
Niveaux
Descriptions
Niveau
1
Le sommet de votre
hiérarchie commence par
la page d'accueil.
Niveau
2
Présentation vos rubriques
principales d'une manière
générale et un sommaire
interne à la rubrique. Ce
sont des pages
d'orientation.
Niveau
3
Présentation détaillée de
vos rubriques principales.
Ces sous-rubriques sont
exclusivement des pages
d'informations
Niveau
4
Présentation des soussous-rubriques.
A prévoir si les pages de
niveau 3 sont trop denses
en informations.
Web Design
19
Cas des sites simples
Web Design
20
Cas des sites élaborés
Web Design
21
Cas des sites complexes
Web Design
22
Conseil : dés que le site devient
compliqué il est recommandé de mettre sur
chaque page un lien vers la page d’accueil.
Par exemple utiliser le logo du site comme
étant un lien vers la page d’accueil.
« Un visiteur perdu est un visiteur déçu.
Un visiteur déçu est un visiteur qui est PERDU
à jamais. »
Web Design
23
Objectifs:
◦ L'utilisateur doit savoir :
Où il est
Par où il est passé
Savoir où il peut aller
Avoir une vue globale du contenu du site
◦ Faciliter au maximum la navigation du site pour
l’internaute (pas de prise de tête)
◦ La navigation doit intégrer:
Logotype
zone de navigation primaire (1er niveau du site)
zone de navigation secondaire (déplacement à l’intérieur de
la même rubrique)
Web Design
24
la barre de navigation :
◦ La barre de navigation est en général placée
horizontalement ou verticalement dans le haut de la
page et de préférence à gauche.
◦ Cette position lui permet d'être toujours visible et
accessible quelque soit la taille de la fenêtre dans le
navigateur. Sa position, au dessus de la page, lui donne
de l'importance, et c'est un repère toujours présent.
◦ Les utilisateurs d'Internet ont cette habitude. Vouloir
changer ce principe reviendrait à perturber les visiteurs.
Web Design
25
Web Design
26
Les menus déroulant:
◦ Le principe est de faire apparaître au survol de la
souris sur une rubrique, une zone contenant des
liens hypertextes vers les sous-rubriques.
◦ L’avantage est le gain d’espace
◦ L’inconvénient est la maitrise de la souris, si la
souris sort de la zone le menu disparait
Web Design
27
Web Design
28
Les onglets:
◦ Les onglets de la barre de navigation font partie de
l'environnement que connaît bien l'internaute. Ils
les identifient dès l'ouverture en haut de la page.
◦ C'est devenu un vrai standard de l'ergonomie web
et il est rare de trouver un site web qui ne les utilise
pas. Ils ont une seule limite. Lorsque le site contient
plus de deux niveaux de profondeur, il y a besoin
d'utiliser une navigation secondaire.
Web Design
29
Pas de visuel sur la
sélection
Web Design
30
Les rollovers:
◦ Le rollover est une fonction qui modifie l'aspect d'un
élément graphique dans sa forme, sa couleur ou son
animation lorsqu'il est survolé par le pointeur de la souris.
◦ L'élément revient dans son état initial lorsque le pointeur
quitte l'image.
◦ employé pour donner de l'interractivité à un élément de la
barre de navigation, dans le but de le mettre en évidence
◦ source de difficulté pour les internautes (ex: Banque
Postale)
Web Design
31
Web Design
32
Les boutons de navigations:
◦ Les boutons de navigation sont des élément
utilisés comme liens pour naviguer.
◦ Ils se présentent sous plusieurs formes : icône,
texte ou parfois les deux associés.
◦ Pour gagner de la place à l'écran, certains
concepteurs web préfèrent utiliser des icônes de
navigation en guise de menu.
Web Design
33
Web Design
34
Le fil d’Ariane c’est le chemin qu’un internaute à
emprunté depuis l’accueil de la page jusqu’à la page où il
se situe.
Aussi appelé « chemin de progression »
Conseil :
◦ à placer en haut de la place, à gauche au dessus de la page
courante
◦ mettre le symbole ‘>’ entre chaque rubrique
◦ utiliser dans le fil d'Ariane les mêmes dénominations que les
pages parcourues
◦ utiliser un petit corps de police pour ne pas gêner la lecture de la
page
◦ le titre de la page doit être présent dans le fil d'Ariane et sur la
page. Cette redondance permet à l'internaute de bien se repérer.
Web Design
35
Web Design
36
Les liens sont la colonne vertébrale d’un site, sans ça
le site est inutile car possédant peu d’information
Reconnaissance des liens:
◦ Un lien peut être un pictogramme, un logo, un texte d’une
couleur différente de celle utilisée pour du texte normal (et
généralement souligné).
◦ Lorsque l’utilisateur passe sur un lien avec le pointeur de
la souris, le pointeur doit prendre la forme d’une petite
main.
◦ Si le lien est une image alors il faut qu’il y est une info
bulle.
Web Design
37
Couleur par défaut des liens :
◦ Lien avant activation : bleu.
◦ Lien consulté : violet.
◦ Lien après activation : rouge.
Les liens bien positionnés sont plus efficaces
Les liens explicites sont mieux compris
Les liens doivent se comporter différemment
en fonction de l’action de l’utilisateur
Web Design
38
Web Design
39
« La charte graphique ou normes graphiques est un
document de travail qui contient l'ensemble des règles
fondamentales d'utilisation des signes graphiques qui
constituent l'identité graphique d'une organisation, d'un
projet, d'une entreprise. »
La charte graphique s'applique à définir :
◦ Le logo (couleurs, position dans la page, supports, déclinaisons et
interdits)
◦ Les polices de caractères utilisées
◦ Les jeux de couleurs déclinables sur les différents supports de
communication
◦ L'utilisation des éléments graphiques (filigranes, détail du logo
agrandi, courbes et traits spécifique à l'entreprise)
◦ Les principes du choix des images et des illustrations
Web Design
40
Le choix des couleurs est subjectif, une
personne peut aimer une couleur et une autre
peut ne pas l’aimer
Il faut que l’usage des couleurs suit la charte
graphique
Utiliser un nombre limité de couleur
Bien choisir les couleurs de fond (background) et
les couleurs de « surface » (foreground)
Web Design
41
couleurs primaires : Il s’agit
des couleurs de base, on ne
peut pas les obtenir en
mélangeant d’autres couleurs.
Ce sont les couleurs que nos
yeux perçoivent le mieux : le
rouge, le jaune et le bleu.
couleurs secondaires : il sont
obtenues à partir du mélange
des couleurs primaires deux par
deux.
◦ bleu + jaune = vert
◦ jaune + rouge = orange
◦ bleu + rouge = violet
couleurs tertiaires: ils sont
obtenues en mélangeant deux
couleurs secondaires à part
égales
Web Design
42
Rouge : Couleur chaude symbole de l'amour, il ne faut pas
en abuser en webdesign car le rouge ressort beaucoup, la
dominance du rouge dans une charte graphique n’est pas
conseillée.
Orange : Couleur chaude source de tonicité, on l’utilise
fréquemment en webdesign, mais avec une teinte plutôt
claire.
Jaune : Couleur chaude symbole de la richesse elle
représente également l'univers intellectuel.
Vert : Couleur chaude couleur du végétal, elle est
synonyme d'espérance et de fertilité mais elle n'est pas
source de gaieté ni de stimulation. On s'en lasse vite.
Web Design
43
Bleu : Couleur froide, elle crée un climat frais, doux,
calme, de grande sérénité. Elle agit sur nous en stimulant
notre intuition. Une couleur très utilisée en webdesign.
Violet : Couleur froide favorise la méditation et le sommeil,
calme les excités, nous apporte un équilibre intérieur.
Blanc : Source de pureté et de transparence,
recommandable pour les fonds de page.
Gris : symbolise l'infini , la quiétude, utilisable en fond de
page également.
Noir : couleur de l'austérité, en webdesign il faut s’en
servir presque uniquement pour les textes.
Web Design
44
Web Design
45
Lorsque le navigateur de votre visiteur accède
à vos pages Web, il ne peut afficher que les
polices qui se trouvent sur son propre
système, donc les polices installées par
défaut avec Windows.
Si le visiteur ne possède pas la police que
vous avez choisie, la police par défaut se
chargera. Times New Roman sous Windows et
Times pour les MacOS.
Web Design
46
Il faut utiliser des polices courantes que tout le
monde possède comme Times New Roman, Arial,
Courrier New ou encore Verdana par exemple
Trois type de police :
◦ Courrier et le Courrier New sont des polices à chasse
fixe, tous les caractères ont la même largeur, comme sur
une machine à écrire.
◦ Times & Times New Roman : Polices avec
shérif (empattement). Elles sont agréables à lire pour un
document imprimé mais plus difficiles à comprendre sur
un écran d’ordinateur
◦ L'Arial et l'Helvetica sont des polices sans shérif, donc
plus faciles à lire sur un moniteur.
Web Design
47
Possibilité de spécifier une liste de police
classée par préférences en HTML avec la
balise <FONT> </FONT>
Exemple:
<FONT face = "Verdana, Arial, Helvetica, sans
serif">Fin du cours de Webdesign </FONT>
Web Design
48
Il faut utiliser les images de bonne qualité car les
internautes préfèrent ce type d’image.
Qui dit bonne qualité dit image de poids
important ce qui implique un chargement de la
page lente
Pour avoir la qualité et un poids léger il faut
compresser l’image
Compression : suppression des pixels jugés
inutiles ou mettre moins de couleurs dans
l'image.
Web Design
49
Il existe trois formats de compression:
◦ format JPEG : la compression (type destructif) entraine la
disparition de pixels. Plus l'image est compressée plus les
pixels seront gros et plus l'image sera dégradée. Il faut
donc trouver le bon compromis entre qualité désirée et
taille finale de l'image. C’est destiné à la photographie
◦ format GIF: le moins utilisé, l’image convertie (type non
destructif) n’est pas dégradé mais limité en terme de
couleur(256).
◦ format PNG: la compression (type non destructif) n’est pas
limitée à 256 couleur et gère la transparence. Il ne dégrade
pas l'image, contrairement au JPEG, au détriment du poids
du fichier. Ce format est particulièrement recommandé
pour des graphiques, des logos, des icônes, des images
représentant du texte.
Web Design
50
Web Design
51
WCAG 2.0 (Web Content Accessibility Guideline
for web 2.0) : c’est une norme W3C qui a pour
but de rendre les contenus web plus accessibles
aux personnes en situation d’handicap.
Pour les personnes qui ont un handicaps :
◦
◦
◦
◦
◦
◦
Visuel
Auditif
Physique
Cognitif
Neurologique
Lié à la parole
Web Design
52
Afin qu'une page Web soit conforme aux
WCAG 2.0 il y a certaines exigences à
satisfaire.
Niveau de conformité:
◦ Niveau A: site qui répond aux exigences d’un point
particulier (niveau de contrôle minimal)
◦ Niveau AA: site répond à deux exigences (A et AA)
◦ Niveau AAA: site répondant à tous les exigences
Web Design
53
Il existe 4 principes dans le WCAG
◦ perceptible
ex : Règle 1.4 Distinguable : faciliter la perception visuelle
et auditive du contenu par l'utilisateur, notamment en
séparant le premier plan de l'arrière-plan.
◦ utilisable
ex : Règle 2.3 Crises : ne pas concevoir de contenu
susceptible de provoquer des crises.
◦ compréhensible
ex : Règle 3.3 Assistance à la saisie : aider l'utilisateur à
éviter et à corriger les erreurs de saisie.
◦ robuste
ex : Règle 4.1 Compatible : optimiser la compatibilité avec
les agents utilisateurs actuels et futurs, y compris les
technologies d'assistance
Web Design
54
Déficience : Il existe différentes formes de cécité des
couleurs : rouge-vert, vert-brun, et ainsi de suite...
Dans le monde : 10% de la population masculine est
daltonienne
En France,
◦ 8 % homme
◦ 0.45 % femme
La première méthode et la plus simple à mettre en
œuvre est l'emploi d'un contraste élevé entre l'arrière
plan et les couleurs utilisées pour le contenu de la
page.
Web Design
55
C et E sont plus facilement lisibles parce que le contraste est
assez fort. L'affichage de la page en niveaux de gris peut
montrer si oui ou non il y a suffisamment de contraste. Il
existe des outils pour tester le constraste.
Web Design
56
Photoshop est un logiciel de retouche, de
traitement et de dessin assisté par ordinateur
édité par ADOBE. Il est principalement utilisé
pour le traitement des images
photographique, de création d’image.
Web Design
57
Web Design
58
Dreamweaver est un éditeur de site web de
type WYSIWYG (« What you see is what you.
get »)
Web Design
59
Content Manager System est une famille de
logiciels destinés à la conception et à la mise à
jour dynamique de site web ou d'application
multimédia.
Ex: Joomla
Web Design
60
Web Design
61
Web Design
62
Le web design est indispensable pour la
création de site web bien formé.
Il permet d’accéder facilement au contenu
d’un site web.
Le web design fait en sorte que chaque
personne puisse suivre les règles afin que
tous le monde puissent bénéficier sans
contraintes du web.
Web Design
63
http://webdesign.2803.com
http://fr.wikipedia.org/wiki/Conception_de_sites_web
http://www.comment-gagner-sur-internet.com
http://ergonomie-web.studiovitamine.com/
http://www.catapulpe.fr/lafabrik/pourquoi-creer-un-siteinternet
http://www.alsacreations.com
http://www.css-design.fr
http://www.commentcamarche.net/contents/html/htmlintro.php
3
http://www.my.epokhe.com/2008/11/04/bonnes-pratiquesliens-hypertextes/
http://www.ergolab.net/articles/ergonomie-page-accueil.php
http://www.w3.org/Translations/WCAG20-fr/
Google video
Web Design
64