'Une image vaut mille mots'. Confucius aurait aimé retrievr et shutterstock

J'avais envie de présenter ces deux moteurs de recherche d'images qui me plaisent parce que le concept rejoint le sujet traité : l'image est le sujet et le vecteur de la recherche. La recherche ne porte pas (seulement) sur le mot-clé saisi, mais aussi et surtout sur les composants majeurs de l'image : sa forme et sa couleur.

Vous cherchez une image susceptible de s'intégrer dans un environnement particularisé par ses teintes dominantes ? shutterstock propose une recherche par couleur !
Ici j'ai recherché des images correspondant à la catégorie "technologie" et à la couleur bleue "#0300-4"

Vous cherchez une image intégrant des formes particulière ? retrievr propose une recherche par forme !
Là j'ai recherché des images ayant pour dénominateur commun une forme en pointe s'élevant vers le haut

Et si l'on appliquait le concept à la recherche automatisée de vidéo à partir d'un geste ?! ...

F-Shaped Pattern et lecture de contenus Web : 'je recherche, je m’intéresse'

Depuis les premières études d’eyetracking (mouvement des yeux pendant la lecture) décrivant comme lisent les internautes on croyait dur comme fer que l’œil pendant la lecture de contenus Web suivait un chemin formant un ‘Z’.

Jakob Nielsen revient sur ses premières considérations et décrit dans son article F-Shaped Pattern For Reading Web Content que lorsque l’utilisateur parcourt une page web, son regard ne décrit pas un ‘Z’ mais un ‘F’.

La lecture Web se caractérise par sa rapidité. Le lecteur scanne le texte : il recherche et cible ce qui l’intéresse.
L’internaute scanne d’abord la page horizontalement, formant la première barre du ‘F’, puis décroche verticalement à la recherche de l’information qui l’intéresse et qu’il lira alors en suivant à nouveau le sens de lecture (des sociétés occidentales) et formant la seconde barre du F, pour reprendre sa recherche verticale.
Si la forme la plus commune s’apparente au ‘F’, l’eyetracking peut évidemment révéler un scan en ‘E’ ou en ‘L’.

Nielsen souligne donc 3 conclusions fondamentales pour la structuration des textes
- le lecteur lira rarement tout le texte mot à mot
- les deux premiers paragraphes doivent présenter les informations importantes (on rejoint ici le principe de la pyramide inversée)
- il faut toujours insister sur les deux premiers mots

En conclusion, j'aurais dû écrire
L'internaute lit en F.
Il recherche verticalement,
puis lit horizontalement ...
Ce qui nous renvoie à la question de la forme et du fond.

Entraide communautaire sur le blog de Google

L’effort tourné vers l’internaute s’accentue au quotidien chez les Grands du Web.

En créant des groupes d’entraide en 12 langues à destination des webmasters, Google ajoute une nouvelle pierre à l’édifice.

 

Vous souhaitez trouver des réponses aux questions relatives à la conception ou l’indexation de vos sites, mais aussi apporter votre aide aux autres webmestres ? Rejoignez le forum, à l’instar de quelques employés de Google repérables par l'icône

Dommage que la première recherche que j’aie faite m’ait conduite vers un lien rompu …

Autour de la qualité Web (vidéo)

Vidéo autour de l'utilité de l'intégration des standards d'accessibilité et méthodologies qualité Web dans le processus de production de sites Web.

Une vidéo intéressante issue de la journée mondiale de l'utilisabilité, simpleWeb.

Utilisabilité : de l'importance de l'utilisateur (vidéo)

Une vidéo intéressante autour de l'utilisabilité d'un projet Web.

Source : SimpleWeb - issu de la journée mondiale de l'utilisabilité 2007.

Touch Messenger, l'accessibilié au bout des doigts

Avec son dispositif de messagerie en braille destiné aux personnes atteintes de cécité, Samsung a été récompensé par l’Industrial Designers Society of America (IDSA) pour l'IDÉE 2006 catégorie «Design Explorations».

Touch Messenger comporte un clavier de 12 boutons en braille sur sa partie haute, et permet d’afficher le texte en braille sur sa partie basse.

Avec cette particularité de remplacer la parole par le braille, Samsung garantit une meilleure intimité dans l’envoi et la réception de messages personnels.

Accessibilité ! Encore un gros mot ?

Il est sur toutes les lèvres, entre toutes les lignes, et pourtant il reste encore souvent la chasse gardée des initiés.
Tâchons de cerner ce que le terme recouvre.

Au-delà d’une problématique d’accès aux IHM, il s’agit également de navigation, mais aussi d’interaction avec le site Web, pour les personnes souffrant de déficiences visuelles, auditives, motrices, ou encore cognitives.
Cependant l’accessibilité ne s’intéresse pas uniquement à un public souffrant d’un handicap. Elle vise à proposer des solutions adaptées à chacun, quelque soit le contexte personnel et matériel de l’utilisateur.

Pour Tim Berners-Lee, Directeur du W3C (Consortium international dont le but est de promouvoir l'évolutivité du Web et de garantir son interopérabilité), l’accessibilité consiste à « mettre le Web et ses services à la disposition de tous les individus, quels que soient leur matériel ou logiciel, leur infrastructure réseau, leur langue maternelle, leur culture, leur localisation géographique, ou leurs aptitudes physiques ou mentales ».

Le W3C a donc mis sur pied le projet international Web Accessibility Initiative (WAI), accouchant de compilations de recommandations, les WACG, ayant pour objet de promouvoir des principes de conception des sites Web respectueux de normes garantissant leur accès à tous.

Parmi ces recommandations, il est primordial d’intégrer comme pré-requis des alternatives textuelles à chaque élément du site à concevoir - y compris des descriptions pour les vidéos - ainsi que des titres de liens explicites (exit les cliquez ici » et autres libellés non descriptifs).
Chaque élément, quel qu’il soit doit donc être assorti d’un texte alternatif.
Pour faire court, vous pouvez consulter les quelques conseils du W3C pour concevoir un site Web accessible.

En 2007, on considère que seulement 3% des sites européens sont accessibles, malgré la coexistence de plusieurs outils de tests et de mise en adéquation :
La création en juin dernier du label Euracert (cousin européen d’AccessiWeb de l’association BrailleNet) a relancé la question de l’accessibilité et constitue désormais un nouvel outil dédié à sa démocratisation.
Appliqué aux services Web publics, le RGAA (Référentiel Général d’Accessibilité pour les Administrations) répertorie les points de contrôles et les tests correspondants, visant à rendre un site accessible. Plus complet et plus récent qu’AccessiWeb, le RGAA intègre une valeur didactique, au travers des conseils qu’il propose.
Par ailleurs IBM, Microsoft ou Macromedia sont fortement impliqués dans la vulgarisation de l’accessibilité, au travers de leurs désormais incontournables guides.

Je conclurai en soulignant qu’au-delà de ces recommandations l’accessibilité d’un site Web est issue de l’heureux mariage du design, du code HTML, de la gestion éditoriale, et … de l’utilisabilité.
Tous les chemins mènent à Rome !

Utilisabilité

En attendant les vidéos des conférences organisées au siège de Microsoft lors de la journée mondiale de l’utilisabilité, je me permets un rappel des 30 principes d’utilisabilité, dont le résumé ci-après est issu de smashing magazine.
Tous ne sont pas à prendre au pied de la lettre, mais une piqûre de rappel ne fait jamais de mal.


1. Principe des 7±2
Limite de la mémoire à court-terme oblige, entre 5 et 9 items peuvent être mémorisés. Bien que parfois mis en question, il est entendu de limiter à 7 items les choix de navigation.
Le concepteur d’un site Web évitera ainsi de dépasser 7 rubriques principales.

2. Règle des 2 secondes
Il est acquis que l’internaute n’est pas patient. Il n’aime pas attendre, et d’autant moins lorsqu’il n’a pas été averti du délai.
Le système réagira donc de préférence en moins de 2 secondes.

3. Règle des 3 clics
L’internaute est également volage. Et s’il n’est pas séduit en 3 clics, il risque fort de partir butiner ailleurs.
Cette règle ne constitue plus aujourd’hui l’incontournable qu’elle fût. L’attention est désormais portée sur le guidage de l’utilisateur et l’accent mis sur la structuration d'informations au sein desquelles l’internaute ne se sentira pas perdu.

4. Règle des 80/20 (loi de Pareto)
La loi de ce sociologue qui observe que 80 % des richesses sont détenues par 20 % des personnes, a été modélisée, puis reprise et adaptée par différents domaines.
En ergonomie, il est acquis que seules 20% des fonctionnalités sont utilisées dans 80% du temps.

5. Les 8 règles d'or de la conception d'interface
Les heuristiques de Ben Shneiderman s’appliquent à la majorité des interfaces applicatives ou web.
Elles se résument à quelques points à retenir en phase de conception : cohérence, raccourcis, feedback, contenus explicites, gestion des erreurs, retours aisés, la main à l’utilisateur, pas de surcharge mnémonique.

6. Loi de Fitts
Selon leur position et les contraintes relatives au mouvement de la souris, toutes les zones de l’écran ne sont ni visibles, ni accessibles de manière équivalente.
Il conviendra donc d'agencer les élements de l'interface en tenant compte de cette loi.

7. Pyramide inversée
Le style éditorial adapté au Web doit respecter le principe qui veut que l’on commence par la conclusion.
Plus un contenu est important, plus il est situé haut dans la page.

8. Satisfaction
Même si plusieurs solutions coexistent, l’internaute ne trouve satisfaction que dans celle qui lui correspond.

9. Syndrome de l'oisillon
l’IHM originelle est toujours l’étalon de référence. L’utilisateur y est habitué et présente généralement une tendance naturelle à rejeter d’emblée les refontes ultérieures.

10. Banner blindness
La publicité est mal-aimée ; à tel point qu’elle en est ignorée par les internautes pendant leur recherche de contenus particuliers. Ceux-ci vont même jusqu’à rejeter tout ce qui ressemble de près ou de loin à une bannière publicitaire.

11. Effet Cliffhanger et effet Zeigarnik
L'effet Cliffhanger joue sur la peur du vide et de l’absence de réponse propre à l’être humain.
La publicité s’en inspire parfois, insistant sur l’effet choc, la provocation, ou l’intrigue.
L’effet Zeigarnik souligne le fait que l’interruption subite d’un évènement en facilite la mémorisation.
A suivre …

12. Gestalt Theory
La psychologie de la forme démontre que l’Homme est rompu à des habitudes de catégorisation et de regroupement.
Les lois de "proximité", de "bonne continuité" et de "similitude", appliquées à la conception d’IHM sous-entendent qu’il est nécessaire de toujours regrouper les items de forte proximité catégorielle - y compris les éléments navigationnels – et d’optimiser les séparateurs.
L’internaute percevra d’autant plus facilement des informations qu’elles sont regroupées (en rubriques, paragraphes, zones dédiées à certains types d’infos).

13. Effet d'autoréférence
A l’heure où les réseaux sociaux font parler d’eux plus que de raison, référer au vécu de l’internaute est un excellent moyen de capter son attention.

14. Oculométrie (eye-tracking)
Cette technique est utilisée pour enregistrer les mouvements de l’œil d’un sujet parcourant un site. L’analyse des résultats permet de dresser une carte des zones les plus regardées.
Elle sert de fondement aux décisions de conception d’interfaces.

15. Fold
L’espace correspondant à cette zone de visibilité (ie sans scrolling) constitue la « page écran ».
Elle est la référence en terme de visibilité de l'interface.

16. Zone fovéale
En termes de vision, la résolution est maximale dans la zone fovéale (zone de notre champ de vision dans laquelle nous percevons le plus de détails). Dans cet espace, d’un angle de 2°, aucun balayage visuel n’est nécessaire. C’est donc sur cette zone qu’il est intéressant de concentrer les informations majeures du site à concevoir.

17. Gloss
L’internaute a besoin de se sentir maître de ce qu’il fait sur le site Web. Il faut donc l’informer clairement des conséquences de ses clics (lien interne au site ou non, accès à telle ou telle information).

18. Tolérance aux conditions dégradées
Quelle que soit la configuration du poste de l’utilisateur (types de navigateur, connexion …) et donc les capacités d’accès à certaines parties du site, ce dernier doit rester fonctionnel.
Ainsi, il est recommandé de toujours fournir une version texte des éléments vidéo ou photos, de manière à ce qu’ils soient appréhendés s’ils ne peuvent pas être visualisés.

19. Granularité
Adaptable au public cible du site, la granularité consiste à diviser un ensemble complexe de données ou d’informations, en unités plus petites et donc plus aisées à appréhender.

20. Zones sensibles
Afin de mettre en avant des zones cliquables, on leur attribue un effet qui change leur apparence au rollover. Ceci est particulièrement utile dans le cas d'images cliquables utilisées pour des teasers.

21. Lisibilité
La lisibilité - ou legibility - indique dans quelle mesure un texte est lisible (ie facile à lire visuellement - et pas obligatoirement intellectuellement).

22. Navigation « en démineur »
Un défaut d’identification visuelle des liens oblige les internautes à promener leur souris sur l’interface afin de les détecter.
Les liens doivent donc toujours être graphiquement différenciés.

23. Navigation « mystère »
En l’absence d’indication sur la destination d’un lien ou sur l’action liée à une icône, le concepteur pousse l’utilisateur à naviguer en aveugle. Ceci est particulièrement en opposition avec le besoin de maîtrise de l’internaute.

24. Cohérence visuelle
Un site correctement conçu doit respecter des règles logiques d’agencement des éléments navigationnels et éditoriaux, sans lesquels l’utilisateur est rapidement désorienté et donc insatisfait.

25. Enrichissement progressif
Afin de rendre une interface accessible indépendamment de contraintes techniques, il est conseillé de la concevoir selon un processus qui consiste à partir du minimum exécutable dans la majorité des cas, et d’y ajouter des couches successives de fonctionnalités accessibles aux mieux lotis, sans défavoriser les autres.

26. Lisibilité cognitive
La lisibilité cognitive - ou readability - réfère au degré de compréhensibilité d’un texte (en fonction du vocabulaire utilisé, ou de sa complexité).

27. Conception centrée utilisateur
Base de l’ergonomie, il s’agit de concevoir un produit en réponse aux besoins de ses utilisateurs finaux. Elle nécessite le recueil préalable de ce que l’on appelle les « besoins-utilisateurs » sur lesquels se baseront la structure du site mais aussi les choix navigationnels et éditoriaux.

28. Vigilance
Automatiser les tâches autrefois dévolues à l’utilisateur et requérant toute son attention (correction orthographique ou sauvegarde régulière d’un document, par exemple) permet de libérer l’attention de l’utilisateur au profit du cœur de sa tâche.
La conception d’applicatifs présentant des fonctionnalités de ce type concourt à optimiser leur utilisabilité.

29. Design intuitif
Il est fondamental de concevoir des interfaces de manière à ce qu’elles soient utilisables d’emblée par un utilisateur novice (ie sans formation, ni aide préalable de ce type)

30. Wireframes
Le processus de conception intègre idéalement une maquette fonctionnelle (wireframe) à but de démonstration ou servant de base à des tests de validation.

Are you geeky ?

Si la passion de la hi-tech vous possède, vous découvrirez sûrement avec plaisir ces quelques gadgets USB.

Passez au vert !

En plus de ses fonctionnalités de hub USB, d’enregistreur de mémo et de porte carte, ce sympathique gadget indique votre disponibilité.

Procurez-le vous chez Nodshop. Et si vous êtes un peu dissipé, profitez-en pour vous munir de l’indispensable Stealswitch qui vous permettra de fermer une fenêtre indésirable en toute discrétion.

Un rafraîchissement en 5 mn sans s’encombrer d’un frigidaire ni se déplacer à la cafet’ ? C’est désormais possible avec ce frigo-une-place vendu chez Brando.

Si, comme moi, vous êtes plutôt café, optez pour le chauffe-tasse.

Mensway agrémente votre pause d’un moment de bonheur enfantin (qui a dit infantile ?), avec ce mini chasse-taupe.

Enfin, pour se remettre au travail rien ne vaut le doux parfum d'une clé USB Sweet de Memup. Si, si !

Faites un break !

Again & again

Amazon.com, digne précurseur en e-commerce est aujourd’hui encore à l’avant-garde en matière d’interfaces riches.

Réactivité, gestion des évènements sont les maîtres mots du nouveau site.

Outre un changement évident de gamme chromatique, Amazon.com propose également une nouvelle arborescence, basée sur un rubriquage répondant aux besoins issus de son essor et sa diversification.
Amazon.com ne vend plus uniquement des livres, et l’internaute doit pouvoir visiter aisément ses rayons sans jamais s’y perdre, son panier toujours à portée de main.

Voilà pourquoi le site systématise un menu dépliable à tout instant intégrant l’ensemble des rayons, et des liens permanents vers ses listes sur chaque haut de page.

Enfin, s’il aide gentiment l’internaute à consommer, le site met l’accent sur la mise en avant des sélections et promotions.

Online Shopping ; shopping tout de même!