Archive for the ‘ergonomy’ Category

Truc d’accessibilité #2 – l’ordre de tabulation

6 août 2007

L’ordre de tabulation défini l’ordre apriori logique pour naviguer de lien en lien ou de champs en champs dans les formulaires HTML. On passe d’un champ à l’autre en appuyant sur la touche … TAB (on l’aura deviné).

Verifier que cet ordre est logique, grouper l’information lorsque c’est naturel et approprié afin d’éviter les erreurs d’encodage. Spécifier si nécessaire l’ordre de tabulation au sein des éléments avec l’attribut « tabindex« .

exemple: <input id= »prenom » tabindex= »1″ type= »text » />

Publicités

Les grilles sont chouettes

1 juin 2007

Si vous êtes un neophyte en mise en page CSS, je vous propose d’aller jeter un oeil sur les templates de grilles proposés par intensivstation. Ils ont en effet remis à jour leurs templates à l’usage des designers web. Le plus difficile maintenant: choisir celui qui vous conviendra le mieux.

Le nouveau Microsoft Surface

30 mai 2007

Le lancement du nouveau « Microsoft Surface » m’a cloué ! Disons que c’est surtout la presentation qui est impressionnante, elegante, sobre, efficace, … Mais Kesako Microsoft Surface? Il s’agit d’une table dont la surface est une interface utilisateur qui permet une interaction directe avec tous vos media. Tout se manipule via de simple mouvements des doigts sur l’écran tactile. Celui-ci peut même ineragir avec votre Zune dès que vous le posez dessus. Bon, evidemment, il faut un Zune …

Ca me rappelle quelque chose tout ca … Minority Report ?? non, mais oui, je sais, l’ iPhone !! 😉 – soyons bon joueur, bravo les artistes !

Un escalier qui en a dans le ventre

23 mai 2007

En voila une bonne idée qu’elle est bonne !

Si vous avez un escalier chez vous. Une belle astuce pour ranger un tas de choses comme vos chaussures, vos gants et echarpes pour l’hiver ou encore des papiers et bouquins, ….

Malheureusement, pas de site web pour le concepteur de cet escalier réalisé par Unicraft Joinery, Hamilton, Victoria Australie – j’ai donc rajouté le tag ‘DIY’ (do-it-yourself).

(src. DesireToInspire)

Bouton ou lien d’action ?

21 mai 2007

Un nouvel article de Jakob Nielsen sur les hyperliens et les boutons qui ont des usages à l’origine bien differents:

– Les hyperliens sont utilisés pour la navigation, pour passer d’une page à un autre dans un même espace d’information.
– Les boutons sont utilisés pour des actions qui génèrent des modifications (par ex. ajouter un produit à un panier d’achat).

Il y a bien evidemment des exceptions à ces règles:

– Les boutons peuvent être utilisés pour passer d’une page à l’autre dans un processus de workflow (par ex. « continuer le shopping » ou « commander »)
– Les hyperliens peuvent être utilisés pour des actions secondaires (par ex. « Cancel »)
L’ainsi nommé « lien d’action » a le benefice de pouvoir être ecrit de manière plus longue et donc de manière plus claire pour l’utilisateur. Pour réduire la confusion, le lien doit explicitement montrer qu’il est lié à une action en commencant par un verbe à l’imperatif (par ex. « Add an item »)

Un autre avantage du lien d’action est que l’on peut ajouter un texte explicatif juste en dessous du lien. Le texte peut être présenter dans une police de caratère plus petite pour en souligner la nature secondaire. pour lire l’article en entier et en anglais.

Truc CSS #9 – réaliser de bô tableaux

27 mars 2007

J’avoue, je ne me suis pas foulé pour le titre mais le contenu en vaux la peine, jugez plutôt:

Si le même principe que le faaaameux Zen Garden, je vous propose aujourd’hui d’aller piquer du code sur le site CSS Table Gallery qui nous propose une gallerie de styles CSS divers et variés de mise en page ce qui releve toujours une gageure, j’ai nommé les tableaux. Je vous ai mis l’adresse sur un style qui me plait, ca vous dit quelque chose 😉

Truc CSS #8 – standardisez vos formulaires

26 mars 2007

Il n’y a rien de plus difficile à mettre en page qu’un formulaire. Les objectifs sont en effet multiples et souvent contradictoires: attractif, fonctionnel, utilisable, robuste … (rangez dans l’ordre de priorité de votre projet). Pour vous aidez dans cette quête, le succès passe par le bon usage d’HTML bien formé, des CSS et du Javascript qui doit rester d’un usage optionnel sur vos formulaires.

Un excellent exemple d’implémentation de ces principes nous est présenté sur Uni-Form, savant mélange d’HTML bien formé, de CSS et de Javascript. Vous pouvez même en telecharger le code.

Comment faire des interfaces à onglets VFBF

16 mars 2007

Control.Tabs est une librairie javascript permettant de créer facilement des interfaces à onglets (tab)  dans vos pages.

Simple et rapide à implementer si vous n’utilisez pas la librairie Yahoo qui en propose une autre version.

Note: VFBF = vite fait, bien fait 😉

Une indigestion de references

13 mars 2007

Pour ceux qui n’ont pas peur d’une indigestion, allez visiter le Web Design Reference Site de l’Université du Minnesota. On y trouve tout ce qui se réfère au web design et en grande quantité.

Perso, c’est le genre de reference que je met dans mes signets mais que je ne vais jamais consulter, il y en a trop !

Je vois … Je vois que vous avez l’Arial sur votre PC

12 mars 2007

Non, ce n’est pas de la magie noir, ni de la magie blanche mais bien de code Javascript qui permet de détecter les Polices (fonts) disponibles sur le PC d’un visiteur / utilisateur. Merci qui ? Merci lalit.lab !