Ergonomie web » Development

préparer son site au mobile

pixeline — Thu, 04 Nov 2010 23:00:45 +0000

Cet article devrait vous permettre d’adapter votre site internet aux visiteurs y accédant via navigateurs embarqués-autrement dit, les smartphone mais également certains modèles de téléphone mobile « augmentés ». Il est en cours d’écriture et me sert de pense-bête, donc n’hésitez pas à réagir si j’écris trop de bièsseries.

Avez-vous besoin de préparer votre site aux appareils mobiles?

Comme d’habitude avec internet, la réponse varie selon les cas. Vérifiez donc d’abord:

que votre public-cible est susceptible d’avoir un usage de votre site via son appareil mobile;
que vous avez un intérêt à cet effort d’adaptation (effort = ressources = argent / temps / énergie )
dans quelle mesure ce qui s’affiche sur l’appareil doit être identique au site « desktop » ou plutôt rencontrer un besoin spécifique aux mobiles (ex: trouver des places de parking à proximité, avoir vos heures d’ouverture, et a contrario ne pas charger pleins d’images décoratives gaspillant le crédit telecom de votre visiteur, etc.). Bref, ce point-ci est un sujet de thèse en soi, il est évident que vous avez intérêt à réfléchir à ce que vous allez proposer exactement à vos utilisateurs mobiles-qui sont dans des situations et des motivations fort différentes de la situation « type » de l’utilisateur assis derrière un ordinateur de bureau.

Quelle adresse URL pour votre site mobile?

Une convention semble s’établir pour http://m.votre-nom-de-domaine.tld

Convention n’est pas toujours raison, mais il faut en tout cas tenir compte de la réalité des appareils mobiles: le confort d’encodage y est bien moindre que sur un clavier d’ordinateur complet. De plus, étant en mouvement, l’utilisateur n’a que peu d’attention à donner à une tâche aussi triviale. Autant donc lui faciliter la tâche…

Notez que si votre site vise principalement des visiteurs mobiles, il peut même être judicieux de placer votre site mobile directement accessible via le nom de domaine, et d’utiliser « www » pour la version desktop. Mais j’imagine que c’est un cas de figure encore rare au moment où j’écris ces lignes.

Si mon activité est liée à un lieu physique, géotagguer mon site

C’est un conseil moins souvent -voire jamais- relayé dans les articles sur ce sujet, il me semble pourtant important et fort peu coûteux. Si vous exploitez un magasin, une salle de concert, un café… bref un lieu dans lequel vous recevez le chalant, géotagguer votre site permettra à un utilisateur passant à proximité de votre zone et ayant la fonctionnalité intégrée d’éventuellement se voir afficher des suggestions sur les lieux intéressants à proximité de sa position géographique. Pourquoi pas chez vous?

La procédure est fort simple. Trouvez votre latitude et longitude (par exemple via ce site), puis ajoutez ces deux meta-tags aux pages de votre site (ou à sa template, on est au XIXème siècle no’didjeu) en remplaçant les XX.XXXXX par la latitude, puis la longitude de votre lieu:

Cela fait, ajoutez-votre site à la base de données de GeoURL. Finito!

A plus tard pour une prochaine mise à jour!

HTML5 Boilerplate : modèle de base pour coder son site en html5

pixeline — Mon, 06 Sep 2010 10:41:17 +0000

html5 boilerplate est une template de départ pour tout site html/css/javascript , conçue pour intégrer toutes les astuces et bonnes pratiques de dégradation progressive, d’optimisation de bande passante, de support aux différents médias y compris les téléphones mobiles basiques à partir de html5. Oui, vous pouvez donc coder votre site en html5, CSS3 sans vous inquiéter pour les pauvres âmes qui utilisent encore internet explorer 6, votre site se dégradera correctement pour eux.

C’est une bonne base de travail mais également un bon outil pour apprendre à concevoir son html, css, javascript en tenant compte de la bande passante, du temps de rendu, du support pour mobile devices.
Par exemple: saviez-vous que l’usage de commentaires conditionnels (technique permettant de proposer une stylesheet à différents navigateurs) va postposer le téléchargement des autres fichiers nécessaires à votre page, à moins d’utiliser un commentaire conditionnel vide en début de votre balise ?

Il suffit de lire les commentaires du code source affiché en page d’accueil pour voir toutes les fonctionnalités intégrées.

L' optimisation moteurs de recherche, selon Google

pixeline — Sat, 20 Mar 2010 23:08:18 +0000

Jolie trouvaille faite sur Google Webmaster Central: Google vient de rendre disponible gratuitement un PDF de 49 pages pleines de bonnes pratiques afin d’optimiser la manière dont votre site sera référencé sur les différents moteurs de recherche – et particulièrement Google. Ce qui rend ce document particulièrement intéressant, c’est qu’il a été rédigé par Google à destination des équipes « produits » de Google. C’est donc par Google pour Google, et vous avez le droit de mettre votre doigt dans le pot de confiture… Qui a dit que le point G n’existait pas ?

Cela vaut de l’or, alors n’attendez pas ma permission pour télécharger le guide gratuit de l’optimisation pour moteurs de recherche selon Google. Oh, c’est en anglais donc munissez-vous de votre Becherel.

Ne ratez pas non plus leur guide du débutant consacré à l’optimisation moteurs de recherche, disponible en plus de 40 langues!

10/GUI – bureau tactile (concept)

pixeline — Wed, 14 Oct 2009 10:41:14 +0000

Cette présentation d’un concept d’ OS tactile pour ordinateur de bureau est très impressionnante. Par C. Miller (http://10gui.com/).

L’idée est simple : une main = 5 doigts. I doigt = 1 souris. Efficience = efficience x 10. Ce qui les amène à parler d’ « interaction bandwidth » que l’on pourrait définir par l’ampleur du vocabulaire interactif.

Et justement, les propositions de vocabulaire interactif du système proposé sont bigrement bien imaginées.

Faire une référence à wikipedia sans interrompre le flux de lecture

pixeline — Sun, 20 Sep 2009 19:25:07 +0000

Je viens de tomber sur un plugin wordpress très malin, par Matthew Healy: WikiPop. Ce plugin capture les liens pointant vers wikipedia et transforme leur comportement de manière à ce que, ces liens lorsque cliqués, n’ouvrent pas un onglet ou une fenêtre, mais une fenêtre modale à la lightbox, ce qui permet de consulter les informations supplémentaires disponibles sur wikipedia sans pour autant quitter le site.

Démo

Je suppose que vous savez ce qu’est une [wikipop language="fr"]fenêtre modale[/wikipop] ? C’est un bon moyen d’afficher des [wikipop language="fr"]informations[/wikipop] supplémentaires sans craindre le blocage de pop up.

Pas mal, n’est-ce pas? Simple, mais il fallait y penser.

de l'usage de l'attribut target _blank : ne soyons pas sectaires

pixeline — Wed, 29 Jul 2009 17:12:46 +0000

Le (petit) monde du web design / web development a une fâcheuse tendance aux précepts dogmatiques, du style: « don’t use table for design, it’s evil », « il faut séparer les données (html) de la présentation (css, images) et de la programmation comportementale (javascript, flash…) », etc. Non pas que ces règles soient de mauvais conseils, que du contraire. Si je disais à un chasseur de ne pas utiliser un couteau de cuisine pour tuer le lapin mais plutôt un couteau de chasse, ce serait un bon conseil. Reste que le couteau de cuisine fonctionnerait (avec une bonne poigne); il ne serait simplement pas le plus approprié. Mais si le contexte le justifie (par exemple, le chasseur est sur une île déserte et que le couteau de cuisine est tout ce qu’il a sous la main), pourquoi devrait-il s’abstenir de manger de la viande?

La morale de cette métaphore est que tout est dans la nuance et sur cette Terre, les nuances, cela compte.

En développement web, la nuance se traduit par une analyse « coût/bénéfices »: on met à plat et l’on compare les avantages et désavantages d’une option sur l’autre, en fonction de la situation, du contexte et surtout du public-cible. C’est cela l’ergonomie: la prise en compte du public-cible, et dans ce cas-ci, de sa maîtrise de l’outil informatique.

De l’usage du target= »_blank »

Le dernier commandement en date: « il ne faut pas utiliser l’attribut target: »_blank ».

situation

espace: monde
époque: juillet 2009
public-cible: dépend du projet

coût

- ne permet pas à l’utilisateur de choisir la fenêtre dans laquelle va s’afficher la page, en forçant l’ouverture du lien sur une nouvelle fenêtre

bénéfices

- ouverture de fichiers de type autre que « html »
- dans une application ajax mal développée, ne perturbe pas l’historique du navigateur pour l’application en question (et il y en a beaucoup)
- de nombreux utilisateurs ne connaissent pas l’usage du bouton central, ou n’ont pas une souris à trois bouton, ou ne connaissent pas la fonction CTRL (POMME sur mac) + Click.

A la lumière de ces éléments, vous pouvez juger si par exemple vous héritez de la maintenance d’un vieux magasin e-commerce de produits d’entretien développé par un amateur d’ajax… amateur, et que votre public cible, ce sont des ménagères de 65 ans avec un équippement informatique digne de mathusalem, alors vous devrez sans doute choisir l’utilisation de l’attribut target.

Si par contre votre public cible est composé essentiellement de développeurs web, vous savez ce qu’il vous reste à faire ….

Navigation sur une page

pixeline — Tue, 21 Apr 2009 16:09:36 +0000

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:

le lien:

Le lien est une balise « A » dont l’attribut href commence par une dièse « # » suivi de l’ identifiant de l’élément à pointer.

Le philosophe Nietzsche le disait fort à propos: ...

la destination

La destination est assignée via un attribut « id » ayant, forcément, une valeur unique dans le DOM de la page.

Nietsche est un philosophe allemand controversé.... retourner au texte

Voilà grosso modo comment l’implémenter au mieux via le html.

Exemple : Découvrez Nietzche sur wikipedia (puis revenez ici, je n’en ai pas fini avec vous).

Le problème : l’utilisateur expérimente une rupture

Sur une longue page, l’écran « saute » à la nouvelle position indiquée par l’attribut href= »# » (pour autant que l’élément existe dans le DOM).

Ce saut provoque une désorientation de l’utilisateur, une rupture de son flux mental, et il est alors forcé de quitter son état de « consultation d’information » vers l’état « bon dieu mais où suis-je, et comment est-ce que je retourne lire la suite de la phrase?« .

Les solutions

Cascading Stylesheet pseudo-tags: :target et :focus

En utilisant les pseudo classes « :target » et « :focus » on peut souligner visuellement à l’utilisateur l’endroit qu’il a quitté et l’endroit où il se trouve.

Démonstration:

Ce (vieil et ) long article sur e-konomica.net utilise des ancres numérique ( [1] ) typiques du paradigme légal. Si l’on clique dessus, un surligné jaune attrape le regard.

Javascript

La solution CSS est une forte amélioration de l’expérience offerte par le simple html mais c’est encore un sparadrap sur une fracture si vous me passez l’expression. En effet, le sentiment de « rupture » vient du fait que l’on ne perçoit pas le déplacement spatial. Le javascript permet les animations, voyons 2 exemples que j’estime très pertinents:

scrollTo: déplacement de l’écran. Claire amélioration, mais on reste désorienté. L’usage le plus approprié est dès lors avec un menu à position fixe, tel que sur cet exemple: f555 (cliquez sur les liens du menu à droite).
l’effet « spectrum » : (demo) ce plugin jquery offre une approche très très intéressante à cette problématique: déplacement et objet visuel qui se déplace du départ à la destination. Magnifique!

J’espère que cet article contribuera à voir émerger de meilleures propositions de navigation interne à une page. Merci de votre lecture !

Comment réaliser un menu déroulant réellement ergonomique

pixeline — Wed, 01 Apr 2009 08:27:14 +0000

James Edwards vient de publier sur sitepoint.com un article pouvant servir de référence sur ce qui constitue probablement le type de menus le plus utilisé actuellement: les menus déroulant ( « dropdown menu » en anglais).

Critères d’accessibilité

Les critères d’accessibilité à observer sont:

l’ouverture /fermeture doit être contrôlée dans le temps, afin que:
- le menu ne s’ouvre pas si la souris ne fait que le survoler sans s’y arrêter
- le menu ne se referme pas si la souris sort brièvement et non intentionnellement de la zone active
- la synchronisation entre ces deux comportements permet de passe d’un lien à l’autre sans déclencher l’ouverture des sous-menus non souhaités
le menu doit pouvoir se repositionner automatiquement s’il approche de la limite de la fenêtre: il s’ouvre alors dans la direction opposée à la direction par défaut
le menu doit pouvoir se parcourir uniquement à l’aide du clavier. Pouvoir parcourir les menus via la touche ->| TAB c’est bien, avec les flèches (Up/down/left/right) c’est encore mieux.

Démonstration

Il termine par deux exemples de réalisation parfaite selon les trois critères précités:

L’article aborde d’autres points de détail, sa lecture complète vous est vivement recommandée, particulièrement si le sujet vous empêche de fermer l’oeil la nuit.

Previsualiser une image avant de la charger

pixeline — Tue, 27 Jan 2009 19:42:14 +0000

Un nouveau plugin jquery que je trouve potentiellement intéressant, dans certaines situations où l’on souhaite montrer des images à partir du texte qui les défini. Un tutoriel par exemple: au lieu d’interrompre la lecture par des captures d’écran, donner accès aux captures d’écran en mettant le lien pointant vers l’image sur l’étape ou la tâche à effectuer.

The ‘imgPreview’ plugin allows your users to preview an image before clicking on it and, out of necessity, will preload the image so when a user does click through to it there is no waiting time!
The image preview shows up in a tooltip-like box appearing alongside the user’s cursor when hovering over a link. The plugin is entirely unobtrusive; it does not require any hooks to target specific links (no non-semantic classes); it will automatically detect the anchors that are linking to images and will only apply the preview effect to them.

via « imgPreview ».

Fonctionnalités avancées pour commentaires de blog

pixeline — Wed, 07 Jan 2009 22:31:00 +0000

Une expérience javascript basée sur jquery apportant des fonctionalités avancées pour améliorer le système de commentaires d’un blog. Très intéressant!

encouraged Commentary

Le plugin permet de sélectionner avec sa souris la partie du texte qui vous fait réagir, et en cliquant sur un bouton qui apparait à ce moment-là, la page centre sur le formulaire de commentaires, préencodé du contenu sélectionné dans un tag de citation (blockquote). Clever…