Quatre navigations innovantes

Le 7 mars 2008 par Jacinthe | Ergonomie | 14 Commentaires »

La semaine dernière Smashing Magazine a posté un billet sur une soixantaine d’exemple de site web proposant des menus de navigation à la fois beaux graphiquement, ergonomiques et qui peuvent refléter les tendances actuelles. Qu’ils soient statiques ou animés, sobres ou chargés, ce billet fait une belle récapitulation des menus et permet de constater une évolution qui vont à l’encontre des conventions habituelles. Parmi les exemples, 4 ont retenu mon attention…

Des menus pictographiques

Ce site web comporte un menu fixé à gauche composé de pictogrammes qui illustrent les différentes rubriques. Même si la plupart de ces pictos sont compréhensibles par leurs simplicités graphiques, aucun ne sont accompagnés d’un intitulé. La balise “title” étant trop longue à s’afficher, elle ne permet pas une compréhension instantané des pictos. Toutefois, l’animation colorée qui se joue lors de l’ouverture du site guide l’utilisateur afin de lui faire comprendre où la navigation principale aura lieu et bien avant qu’il commence son exploration du contenu. (voir vidéo)

Playgroundblues.com


Pour ce portfolio, à la différence de l’exemple ci-dessus, chaque pictogramme est accompagné d’une infobulle qui s’affiche automatiquement lors du rollover. La particularité de ce menu est son organisation et son mode de fonctionnement : les sous-menus sont omniprésents (en-dessous des rubriques pictographiques) et sont organisés chronologiquement. Lors du rollover d’un des pictos, les items y correspondant s’affichent d’un fond de couleur cohérent à la rubrique. (voir vidéo)

Designforfun.com/portfolio.php


Un menu temporel

Malgré sa petite taille, cette navigation est une reconstitution visuelle et temporelle d’un calendrier qui permet la consultation de chaque projet réalisé de cette agence. (voir vidéo)

Polkdesign.net


Un menu expérimental

Après substitution du curseur par une étoile, l’utilisateur doit naviguer à l’aide d’un menu sous forme d’étoile interactive. Toutes ses actions vont se faire grâce au mouvement de la souris et du clic gauche actionné (la validation d’une rubrique se fait en relâchant le clic gauche). Cette navigation est très intéressante mais toutefois difficile car le manque de précision avec le mouvement de la souris pose parfois problème. A tester !
(voir vidéo)

Nickad.com


A lire aussi :

Ergonomie | 14 Commentaires »

50 questions et plus…

Le 28 février 2008 par Jacinthe | Ergonomie | 5 Commentaires »

Il y a quelques jours, Lionel Damm a publié un billet concernant une “grille d’analyse de site web” sur Marketing On The Beach. Depuis plusieurs mois, je suis abonnée au flux RSS de ce blog et je vous invite vivement à vous y intéresser car de nombreux billets y sont publiés quotidiennement avec des sujets variés et de qualités.

illustrations Nathan Schroeder

Un questionnement à envisager

Le Search Engine Journal a publié la semaine dernière une grille d’analyse contenant 50 questions dans 8 domaines différents (Accessibilité, Navigation, Design, Contenu, Sécurité, Aspects Technique, autres aspects Marketing, Mentions légales). Ces questions ont été traduites par Blog Web Marketing puis complétées par 10 autres sur le référencement par Ramenos (lire ci-dessous).

Marketing On The Beach a réuni ces 50 questions dans un PDF téléchargeable. Sympa !

Cette “Check-List” n’est pas à prendre au pied de la lettre mais elle permet un premier pas si vous ne savez pas par où commencer pour améliorer votre site web ou envisager une refonte par exemple.

Les questions de Ramenos sur le référencement :

  • 1. Votre site possède-t-il une page 404 personnalisée qui renvoie bien un code d’erreur 404 ?
  • 2. La balise Meta title est-elle différente sur toutes les pages du site ?
  • 3. Possédez-vous sur vos pages des balises Meta polluantes (keywords, revisit-after,dublin core, language…) ?
  • 4. Les urls de votre site sont-elles réécrites ?
  • 5. Les principales pages du sites (niveau 0 et 1) sont-elles correctement accessibles d’un point de vue moteur ? Avec un code http 200 et non 301 ou 302 ?
  • 6. Possédez-vous un chemin de fer adéquat sur l’ensemble de vos pages ?
  • 7. Votre site fait-il de l’échange de liens barbares avec d’autres sites web ?
  • 8. Possédez-vous des pages réalisées à partir de frames ou d’iframes ?
  • 9. Votre menu principal est-il codé proprement en css/html ou encapsulé dans du javascript ?
  • 10. Toutes les pages de votre site sont-elles correctement reliées entre elles ?

Sources :

Ergonomie | 5 Commentaires »

Le daltonisme vu par Color Oracle

Le 13 février 2008 par Jacinthe | Ergonomie | 10 Commentaires »

Color Oracle logo
Pour tester un site web avec la déficience visuelle que peux avoir un daltonien, je connaissais ColorBlind. Malheureusement, ce dernier ne fonctionne pas avec les sites en Flash. Aujourd’hui, je viens de découvrir Color Oracle qui peut être une alternative ou un complément à ColorBlind.

Le Daltonisme

Daltonisme exemple 02

“Le daltonisme est une anomalie dans laquelle un ou plusieurs des trois types de cônes de la rétine oculaire, responsables de la perception des couleurs sont déficients […] Il existe plusieurs formes de dyschromatopsie partielle, la plus fréquente étant la confusion du vert et du rouge. Les autres formes de daltonisme sont nettement plus rares, comme la confusion du bleu et du jaune, la plus rare de toutes étant la déficience totale de perception des couleurs (achromatopsie), où le sujet ne perçoit que des nuances de gris.” Suite sur Wikipédia.

exemple daltonisme

Color Oracle (version béta)

Color Oracle applique un filtre de couleur sur votre écran afin de simuler la vision d’une personne atteinte de Daltonisme. Toutefois, dès que vous désirez naviguer ou faire une action sur votre ordinateur le filtre disparait. En revanche, ColorBlind permet de consulter un site HTML (et non en Flash) dans son intégralité avec les réglages visuels souhaités.

Color Oracle Hi-nu.com

Si vous avez d’autres solutions, logiciels ou services, je suis preneuse, merci ;)

Ergonomie | 10 Commentaires »

Prochain article d’Ergolab.net, à vous de choisir…

Le 4 février 2008 par Jacinthe | Ergonomie | 8 Commentaires »

Il y a déjà quelques jours Amélie Boucher a envoyé un email pour souhaiter ses meilleurs vœux 2008 à tous ses contacts.
Elle nous demande aussi de voter parmi 3 thèmes proposés pour décider du prochain article publié sur Ergolab.net.

ergolab
Les 3 propositions :

  • Les personas
  • Le drag & drop
  • Les fiches produits

J’ai voté pour la méthodologie des personas car même si j’ai lu son livre, j’ai un peu de mal à comprendre, à apprivoiser cette méthode et surtout comment l’appliquer. Si ce thème est retenu j’espère qu’il y aura des exemples concrets.

Les personas sont des personnages virtuels qui représentent la cible utilisateur du projet web en cours de conception. Ils sont imaginés par l’équipe du projet et permettent une meilleur approche de la cible.

Et vous, avez-vous une préférence ?

Mise à jour du lexique d’Ergophile

La partie lexique d’Ergophile est en train d’être remis à jour grâce à l’aide d’un ami ergonome, Brice Kovacs, que j’ai rencontré lors d’un Pecha Kucha organisé par l’association des Designers Intéractifs. Brice m’a signalé des petites erreurs ou le manque de précision pour certains mots. GlOups !

Ergonomie | 8 Commentaires »

Netlife Research et son calendrier de l’inutilisabilité

Le 26 janvier 2008 par Jacinthe | Ergonomie | 4 Commentaires »

Cette semaine sur Synerg’heBlog, Etienne Maujean a publié un billet sur l’apparition du calendrier 2008 de l’inutilisabilité. Depuis 3 ans, ce calendrier est diffusé par l’agence web norvégienne Netlife Research qui s’amuse chaque année à trouver avec humour 12 erreurs d’ergonomie et d’utilisabilité à ne pas commettre.

En 2008, le ton est principalement accès sur le web 2.0. avec un site web, badusability.com, permettant à chacun de télécharger ce calendrier en différentes langues et formats. A vite découvrir !
Netlife Research et le calendrier de l’inutilisabilité

Ergonomie | 4 Commentaires »