Archive de la catégorie ‘Design’

Ergonomie et référencement (SEO)

Qu’est-ce que l’optimisation du référencement de sites internet a à voir avec l’ergonomie web?

La question peut faire débat et pourtant je n’ai pas hésité un instant à mettre une introduction à la SEO dans le programme de mon cours d’ergonomie web. Ma réflexion est la suivante: pour autant que vous restiez du côté lumineux de la Force (« white hat SEO »), tout ce que vous pouvez faire pour aider votre visiteur à trouver le contenu qui l’intéresse contribue à rendre son expérience positive et participe donc de la démarche ergonomique.

Cet article n’a pas pour objet de répéter pour la millième fois les principes de base du référencement organique: utiliser les metatags, la balise Titre, coder en xhtml valide et sémantiquement correct, densité de mots-clefs… Vous n’avez qu’à les googler ou venir à mon cours pour en être informé. L’objet de cet article est de voir comment intégrer la SEO dans le processus de création de sites web. Continuer la lecture »

Vive le mobile, même quand on n’a pas d’appareil mobile

Je me surprends à surfer de plus en plus sur la version mobile des articles qui m’intéressent depuis mon ordinateur portable voire mon ordinateur de bureau. Pourquoi?

« reduced noise ». Beaucoup moins de bruit graphique, pas (souvent) de pub, navigation plus simple et donc page chargeant plus rapidement.

Tiens? C’est la même raison qui m’avait fait passer de Yahoo à Altavista puis à Google il y a 8 ans: l’efficacité de l’interface. L’homme évolue moins vite que la technologie…

Exemple sur mobile.slate.com et m.lesoir.be :

Clics contre la misère – de l'art de nommer ses boutons – Amnesty International

J’aime beaucoup le buzz interactif mis en place par Amnesty International, basé sur la mise sous forme interactive du slogan « Pour faire disparaître la misère, il faut d’abord la voir ».
Le principe est basé sur ce que vous me pardonnerez d’appeler le P.P.I.V.C (plus petit vocable interactif commun) – le clic. Bonne manière de ne pas s’aliéner des utilisateurs à coup de principes interactifs trop complexes. L’enjeu devient dès lors: comment motiver le clic ?
Continuer la lecture »

Wireframes everywhere : flairBuilder et hotGloo

Cela n’arrête plus: après la fièvre du virus justine Henin, nous sommes actuellement sous le coup d’une invasion d’outils de wireframing / prototyping, tous plus prometteurs les uns que les autres.
A ce train-là, il ne faudra plus attendre longtemps avant d’en voir un disponible entièrement gratuitement, le monde du logiciel de niche sur internet étant probablement le seul marché sur lequel s’exerce une concurrence à peu près libre, globale et transparente, avec des consommateurs mobiles, bien informés et jouissant de toute l’information nécessaire.

Mais revenons à nos wireframes: deux nouveaux candidats à l’intégration de ma boîte à outils ont pointé leur nez aujourd’hui. Continuer la lecture »

Wireframing en ligne et gratuit

MockFlow est un outil de wireframing en ligne tout frais sorti de la matrice.

Très simple d’utilisation, il permet de rapidement créer des wireframes et de les faire partager en envoyant l’ URL pointant vers votre wireframe aux adresses email que vous indiquez, ou via image png (et donc non navigables). Continuer la lecture »

balsamiq Mockup permet maintenant le wireframing

Suite à mon exploration récente dans le monde des outils de prototyping, Balsamiq Mockup (desktop edition) est devenu mon outil de choix pour rapidement dessiner des schémas d’écran.

La seule chose qui lui manquait était de pouvoir créer des liens depuis un mockup vers un autre, à la manière d’un wireframe.
Continuer la lecture »

Navigation sur une page

La navigation interne à une page et particulièrement l’utilisation de pieds de page sur une page web est, le plus souvent, une adaptation malheureuse de son équivalent papier. Rapide tour d’horizon.

Navigation sur une même page

Il s’agit typiquement de proposer à l’utilisateur un raccourci spatial de n’importe quel endroit d’une page web vers un bout de contenu situé à un autre endroit de cette même page. On l’implémente de la sorte:
Continuer la lecture »

revue de site: yellowpimento

La victime du jour : le site YellowPimento.com, un blog tenus par des web designers pour des web designers.
Une source riche en exemples de choses à … ne pas faire.
Continuer la lecture »

Interface Hall of Shame

CS Tools

Il y a de nombreuses découvertes en terme de mauvais design d’interfaces, parfois franchement amusantes, à faire sur l’Interface Hall of Shame découvert sur le wiki de jquery UI. Décidémment, il y a tant à apprendre des erreurs… des autres bien entendu ! °-¨

Nouveau thème wordpress

Wordpress thème: "ergonomie web"

J’avais envie de voir ce que cela représentait de réaliser un thème pour WordPress. J’ai profité du lancement de ce blog pour répondre à cette question. C’est finalement relativement simple, le travail le plus compliqué étant de trouver les tags disponibles dans l’aide fournie par WordPress (ce qu’ils appellent en bons geeks ayant passé trop de temps à Warhammer 40,000: le Codex ).
Continuer la lecture »