Interfaces et ergonomie des site web

Webdesign 2007• Module 2 • Page référence

Interfaces, Ergonomie et Esthétique
Module 1 • Le cahier des charges	Module 3 • Maintenance de sites et webmastering	Module 4 • Techniques et technologies du web
Cette page est l'outil de référence du cours de webdesign. Télécharger le support de cours webdesign_2_v2007.pdf (1.23 Mo)

Ergonomie des sites web
Visiter online	Les interviews de Jacob Nielsen Gourou du Web
Visualiser offline	Jacob Nielsen "it's the user, stupid!"
"Si vous voulez acheter quelque chose sur un nouveau site web, ça ne marchera pas. Si vous vous voulez visiter un nouveau site web, vous n'arriverez pas à vous y retrouver." Voici l'expérience de l'utilisateur moyen face aux sites web, d'après Jacob Nielsen, un des 4 grands penseurs de "l'utilisabilité" du web.

Gérer 3 niveaux avec un interface à 2 niveaux
Visiter le site complet offline	Le site du Méridien

Ici la carte du site est un complément indispensable à la navigation

Interface persistante et repère de positionnement
Visiter online	www.inca.nc/cala
Visiter le site complet offline
Dans ce petit site structuré sur 2 niveaux, la mise en valeur des bouton renseigne sur la position de la page active dans l'arborescence, l'utilisation de cadres permet une interface persistante et les images présentées sous forme de vignette s'agrandissent en une page au clic. (dommage que l'infobulle ne renseigne pas sur le poids)

Interfaces gérant 3 niveaux
Consulter online	www.bleupiscines.nc
Consulter offline
Ce site structuré sur 3 niveaux offre une visulaisation de la strucure par indentation des boutons. Le survol de la rampe de gauche permet une visualisation complète de l'ensemble des pages, donne une indication sur son contenu et met chaque page à un clic de souris de tout autre page.

Interfaces en mode texte
Consulter online	www.useit.com/alertbox/20030428.html	Consulter offline
Jacob Nielsen nous fait par des résultats d'études démontrant que les annonces en mode texte sur le web sont largement plus efficace auprès des consomateurs que les images. Le mode texte aurait d'après lui encore de beaux jours devant lui.
Consulter online	www.inca.nc/jlhau	Consulter offline
Une maquette d'interface de navigation en mode texte seulement habillée de 2 Ko d'images

De la juste utilisation de l'image
Consulter online	Vincent Bénard sur Veblog	Consulter offline
Vincent Benard sur le site Veblog nous fait part de son analyse de la juste utilisation des graphismes sur les sites web.
Consulter online	www.inca.nc/fatom	Consulter offline
Cette maquette de site utilise des boutons sensibles au survol. Fort en informations de positionnement, mais lourd en javascript.
Consulter offline
Cette interface utilise des calques animés en javascript et seulement 2 images pour l'ensemble des boutons soit en tout 25 Ko d'images

Comment utiliser Flash
Consulter online	Faut-il brûler Flash ?	Consulter offline
Consulter online	Etude d'une interface intelligente	Consulter offline

Fluidité et réactivité
Consulter online	Analyses sur les temps de chargement des pages	Consulter offline
Aprés 15 secondes d'attente, on a perdu la moitiè de ses visiteurs...

Présenter ses pages
Utilisation des styles css
Consulter online	Les jardins du Zen	Consulter offline
CSS Zen Garden nous présente une suite d'exercices de style sur l'utilisation des CSS
Consulter online	Malgrés les merveilleuses promesses que nous laisse miroiter l'utilisation des feuilles de styles CSS pour nos mises en page, le monde n'est malheureusement pas aussi simple. Le site RankSpirit met en garde contre les "fausses promesses" des CSS
Consulter offline	Labaruss nous offre un outil de calibration des textes en css sur MAC et PC pour différents navigateurs
Pas facile de calibrer la taille des textes. En css la taille pixels est sensée être invariable quelque soit la taille affichée par le navigateur. Mais qu'en est il des tailles en points, sur Mac, sur PC, et vue par différents navigateurs. Ce petit outil nous aide à y voir plus clair.
Choisir entre HTML et PDF
Consulter online	Archisoft Recastor convertisseur PDF vers HTML	Consulter offline
Si on peut facilement convertir du HTML en PDF par "FICHIER / CREER UN PDF / A partir d'une page web, l'inverse est moins évident. Recastor en propose une mais, on trouvera de nombreuses autres solutions dont certaines en shareware en utilisant "html2pdf" comme mot clé dans un moteur de recherche.

Utiliser l'image
Consulter online	www.inca.nc/remy	Consulter offline
Le site de l'ébéniste illustrateur J.P. Remy propose de nombreuses illustrations dans un site très graphique.
	Présenter des images sous forme de vignettes agrandissables dans une fenêtre pop up L'indication de poids dans l'infobulle donne le choix au visiteur de ne charger que l'information qu'il juge nécessaire. La programmation en javascript de la pop-up en active la fermeture au prochain clic.
Consulter online	Le site du génial infographiste Layne Karkruff	Consulter offline
A droite, une petite galerie web créée en quelques clics de souris par la commande "FICHIER / AUTOMATISATION / GALERIE WEB de Photoshop et à partir d'images récupérées sur le site de Layne Karkruff.

Utiliser la couleur
Consulter offline
Le site des noms de domaine de Nouvelle-Calédonie utilise une charte graphique basé sur les déclinaisons de certaines couleurs choisies. L'ensemble des images du site est généré à partir d'un fichier image PNG créé avec Macromédia Fireworks.
Consulter online
Sur le site www.mon-design-web.com on trouve un excellent annuaire de bonnes adresses pour faire la part des choses sur les goûts et les couleurs.
Consulter online	Jolies Pages	Consulter offline
Le site de Jolies pages références quelques mises en pages élégantes, classées par couleurs

Se tenir au courant des statistiques
Consulter online	Thecounter.com	Consulter offline
Thecounter.com propose un ensemble de statistiques globales sur l'équipemment des internautes. Avec un échantillon de 2 millions de pages vues par jour, on obtiens une description assez fidèle du paysage web.
A propos de Flash
Consulter online	La pénétration de plug-in Flash vue par Macromédia	Consulter offline
Macromédia nous donne un haut niveau de pénétration de son player. On peut rester circonspect sur ces chiffres, mais il semble probable que la version 6 est vue par plus de 90% des internautes.

Les Gourous du Web
Jacob Nielsen
Online	www.useit.com	Offline
Jacob Nielsen a laissé son empreinte sur toue une génération de sites
Vincent Benard
Online	www.veblog.com	Offline
Vincent Benard, conservateur, mais loin d'être dépassé
Layne Karkruff
Online	http://www.blueskyheart.com	Offline
Layne Karkruff, un univers d'une incroyable beauté
Bluevertigo
Online	Un portail de photo et graphismes	Offline
Une collection de ressourcse graphiques extrèmement riche.
FLASH
2advanced
Online	www.2advanced.com	Offline
Les studio de 2advanced sous la tutelle de Eric Jordan, regroupent une équipe d'infographistes et de créateurs géniaux. Ils ont aussi réalisé le site de Taig Khris.
Yugop
Online	http://yugop.com	Offline
Yugop, un des grands maîtres du Flash
Flasheries
Online	Ressources	Offline	Exemples
	www.flashkit.com www.swftools.com www.flashxpress.net www.flash-france.com		Altair Matinee Taig Khris Les voeux de l'INCA 2006 2007

Contactez nous : inca@inca.nc

Dernière mise à jour : 14 novembre, 2007