Publicité Interactive de Hewlet Packard

La nouvelle publicité interactive de Hewlet Packard, visible en ce moment sur le site Lifehacker.com, va inaugurer cette nouvelle catégorie de billet. Ce premier Ergoflash complète un de mes billet précédent sur l’intrusion des pub sur le web : Pub et contenu une cohabitation est-elle possible ?

pub HP

Intrusive ou fourbe ?

A première vue, ni l’une ni l’autre ! Cette bannière se charge rapidement avec comme ouverture un fondu noir sur une image statique.

Situé dans le header du site, ce pavé reste à  la fois ostensible mais pas plus qu’une méga-bannière animée au format 728x90px. Son inertie permet à  l’utilisateur d’en faire facilement abstraction.

Toutefois méfiez-vous des apparences, cette publicité reste trompeuse : la mention « Rollover to expand » n’est pas visible au premier regard car elle est aux dimensions du packshot et lui est superposée. Si l’utilisateur a le malheur de passer son curseur dessus sans avoir eu la peine de lire la mention… C’est le drame !

La publicité s’anime et vient recouvrir une partie du contenu du site. D’accord, un effet « Waow » se produit auprès de l’internaute lorsque cette dernière se déploie. Il faut bien l’avouer, cette publicité est très bien réalisée et permet une présentation du produit assez détaillé grâce à  sa réalisation qualitative en Papervision 3D.

Je vous laisse la tester sur Lifehacker.com et visiter par la même occasion le portfolio du studio berlinois Whitevoid.com qui utilise le même principe de navigation.

Publicité Interactive de Hewlet Packard

Rencontre avec Adobe et plusieurs bloggeurs

Il y a une semaine à  peine, j’ai été conviée à  un apéro réunissant une poignée de bloggeur et des intervenants de chez Adobe. L’objectif de cette soirée était un débat autour des métiers numérique, ses langages et les nouvelles pratiques professionnelles sur les interfaces homme/machine (IHM).

adobe

Une dizaine de questions ont été abordées et chacun devait y apporter son expérience :

  • Quelles sont les technologies matérielles idéales pour les interfaces homme machine (IHM) ?
  • Quelles interfaces pour quels usages ?
  • Quelles sont les incidences des nouvelles interfaces sur les métiers des concepteurs ?
  • A quoi ressemble une IHM idéale ?
  • Les IHM peuvent-elles (doivent-elles) converger avec l’accessibilité ?
  • Les interfaces actuelles peuvent être perçues comme un filtre. Leur amélioration est elle un gain ou une contrainte ? Y-a-t-il un risque intrusif ? Sont-elles un vecteur d’accélération entre bio et techno ?
  • Dans quelles mesures les IHM peuvent fédérer des communautés ? Sont-elles un moyen de démocratiser les technologies ?
  • Comment les nouvelles IHM peuvent influencer le design ?

Les personnes présentes : Eric Di Pol (Superfiction), étienne Mineur (Incandescence), Peter Gabor (Design et Typo), Galdric Pons (Hebiflux / l’Atelier), Sylvain Weber (QuestionsOuvertes.com), Thibault Imbert (ByteArray / Adobe), Stephane Baril (Adobe), Stéphanie Saissay (Adobe).

Une initiative d’Adobe très enrichissante grâce à  la diversité des personnes conviées et leurs témoignages. Même si nous n’avons pu répondre à  toutes les questions, nous avons évoqué, comparé et critiqué divers exemples par rapport à  nos habitudes professionnels : nouvelles fonctionnalités et incohérences de plusieurs logiciels, l’utilisation de la souris face au stylet de la tablette graphique, prise en main et ergonomie de l’iphone, nouvelles méthodes de recherche sur le web, les besoins des particuliers face aux professionnels…

Habitudes et nouveautés

Malgré toutes les suggestions qui ont été abordées, une problématique implicite revenait régulièrement : notre réticence au changement, nos difficultés à  s’adapter à  des nouveautés que ce soit sur des applications desktop, mobiles, interfaces web, ou des objets. Beaucoup d’idées, d’intentions ont été imagées, suggérées pour révolutionner notre quotidien et nos incompréhensions face à  ces nouvelles interfaces.

Une question me turlupine depuis bien longtemps et je profite de ce billet pour la poser : Bien souvent sur le web, les utilisateurs rejettent au premier abord de nouvelles interfaces sans avoir pris le temps, l’envie et la curiosité de les tester. Comment faire accepter en douceur de nouvelles fonctionnalités (ou interfaces) sans créer un bouleversement dans leurs habitudes ?

Rencontre avec Adobe et plusieurs bloggeurs

Quatre navigations innovantes

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 :

Quatre navigations innovantes

50 questions et plus…

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 :

50 questions et plus…

Le daltonisme vu par Color Oracle

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 😉

A lire aussi :

Le daltonisme vu par Color Oracle

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

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 !

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

Netlife Research et son calendrier de l’inutilisabilité

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é

A voir aussi :

Netlife Research et son calendrier de l’inutilisabilité