Liens WordPress

WordPress Theme Generator

WP Generator Blog est assez bluffant : votre thème pour WordPress est plié en quelques clics, sans connaissance préalable en HTML, JS, PHP ou même CSS ! Changez les couleurs, le nombre de colonnes, etc. L’outil produit des thèmes compatibles à partir de WordPress 2.1 jusqu’à la version 2.7 au moins, et embarque le framework Yahoo! UI.

Affichez votre nombre de followers Twitter sur votre blog

Il n’y a pas que le compteur Google Feedburner pour gonfler notre égo virtuel. Le nombre de followers que l’on peut avoir sur son compte Twitter peut à lui seul vous gonfler un égo capable d’atteindre la blogosphère stratosphère ^__^ Le code fourni par wpRecipes est composée d’une partie à copier dans le fichier functions.php de votre blog et d’une autre partie à placer là où vous désirez afficher l’information.

Random « Read More »

Ces deux bouts de code dégottés sur wpguy affichent un lien « lire la suite » aléatoire pour chacun de vos articles. Le premier est à placer avant The Loop :

<?php
    $more_strings = array(
        "Read More...",
        "Keep on Reading...",
        "Wait! There's more...",
        "Read the rest of the article..."
    );
?>
<?php
    the_content($more_strings[rand(0,count($more_strings))]);
?>

Liens intégration web

Organisation, compression, vos CSS vont adorer !

• cleancss — Cet outil en version française très complet propose quatre niveaux de compression et permet de personnaliser les paramètres en précisant un gabarit de formatage pour votre feuille de style, dont voici un exemple de compression maximale,
• Styleneat — Trie (ou pas) les sélecteurs ou les déclarations dans l’ordre alphabétique. Affiche les déclarations sur plusieurs lignes. Possibilité de coller la feuille de style, de saisir l’URL de la CSS ou enfin de l’uploader depuis votre poste de travail. Via roget.biz,
• dustmeselectors — Extension pour Firefox qui traque les sélecteurs CSS inutilisés dans votre page web,
• Em Calculator — Pratique pour obtenir des valeurs en em pour les éléments de votre document HTML à partir d’une taille exprimée en px,
• Construct Your CSS — Construct est un éditeur visuel basé sur Blueprint et jQuery. Ce projet est commis par Christian Montoya. Il montre que l’on peut mettre à la disposition des intégrateurs web une boite à outil, ainsi qu’un éditeur visuel pour faire des CSS et du HTML sémantique,
• pagecolumn — Générateur de maquette en plusieurs colonnes avec CSS 2.0 en utilisant les %, les px ou les em. Possibilité d’imbriquer plusieurs colonnes ou des faire des effets de menus à onglets,
• drawter — Déjà évoqué sur ce blog : drawter, dessiné, c’est gagné,
• CSS Grid Calculator — Pour visualiser rapidement une maquette à partir d’une grille : les blocs de texte et les divisions de la page en colonnes (et les goutières qu vont avec) s’affichent dans le navigateur. En prime, vous obtiendrez les déclarations des styles CSS !

Encore un effort !

• CSS Compressor,
• CSS Compressor Advanced (cssdrive),
• Cascading Style Sheets Optimization,
• Labo CSS.

Formulaires HTML efficaces en 10 étapes

Consultez l’excellent article de bbxdesign sur les 10 bonnes pratiques pour réaliser un formulaire basé sur la conférence de Luke Wrobleski de Yahoo! dont voici le sommaire :

1. Aller droit au but,
2. Alignement des labels,
3. Aide et astuces,
4. Validation,
5. Actions primaires et secondaires,
6. Actions en cours,
7. Erreurs,
8. Input inutiles,
9. Organisation du formulaire,
10. Engagement graduel.

Téléchargez la conférence audio The Value of Web Forms and Design Constraints au format mp3 (27.9 MB).

Autres ressources pour les formulaires HTML

• JotForm — Création de formulaires en ligne,
• webjackalope — 12 exemples de formulaires d’inscription pour «feignasse».

Splittez votre contenu en plusieurs parties redimensionnables avec jQuery Splitter

C’est sur Dator Blog que j’ai déniché jQuery Splitter tout droit sorti de chez Dave Methvin. Ce plugin permet d’afficher une séparation entre deux contenus de la forme :

<div id="MySplitter">
    <div> Left content goes here </div>
    <div> Right content goes here </div>
</div>

L’appel de la fonction étant réduit au strict minimum :

$().ready(function(){
    $("#MySplitter").splitter();
});

La splitbar peut être déplacée très facilement de manière accessible en cliquant-glissant, avec une accessKey ou encore via la touche tab.

Autres ressources Javascript

• 390 ressources Javascript et jQuery — Les fruits de la veille documentée que j’effectue depuis deux ans sur le blog Javascript & Webdesign.

20 mémos utiles pour tout webdesigner

Une bonne palanquée de Cheat Sheet (à vos souhaits) pour ne plus oublier les raccourcis Photoshop, les propriétés des CSS, les éléments HTML, etc. Mention spéciale pour :

• Blueprint 0.8 (via Christian Montoya),
• récapitulatif des fontes communes (ou pas) entre les systèmes d’exploitation Windows et MacOS,
• Kit de survie du créatif oeuvrant dans les métiers du graphisme,
• Les coulisses d’un design par Douglas Bowman,
• Mémo de la maquette web par Romy Duhem-Verdière qui nous rappelle les éléments à prendre en compte et les bonnes pratiques pour la composition de vos pages, les hyperliens, les textes, les formulaires, les éléments multimédias, ainsi que les mentions o-bli-ga-toires.

Miscellannées

Google Analytics — Identifiez les lecteurs en provenance de Netvibes

Généralement, les informations aggrégées par les outils de mesure d’audience ne permettent pas de connaitre le nom (ou le pseudo) des visiteurs ! Google Analytics vous permet en seulement trois clics d’en savoir plus :

1. Cliquez sur Traffic Sources (Sources de trafic),
2. Puis sur Referring Site (Sites Référents),
3. Rendez-vous dans la liste des sites et cliquez sur Netvibes,
4. Enjoy ;)

Bref, je suis sûrement le dernier à avoir cliqué sur Netvibes pour afficher les visiteurs concernés, mais si je suis l’avant-dernier, je me dis que ça servira au moins à une personne ;)

T’es qui, toi, déjà ?

Ping.eu ou tout ce que vous avez toujours voulu savoir sur une adresse IP ou un nom de domaine sans jamais avoir osé le demander : Ping, Traceroute, DNS lookup, WHOIS, Port check, Reverse lookup, Proxy checker, Mail relaying, Bandwidth meter, Network calculator, Network mask calculator, Country by IP, Unit converter  !

Stay tuned and mind the gap!

PS : n’oubliez pas la grosse grosse liste de 1000 ressources pour webdesiger et développeurs web !

Articles sur le même sujet

• 100+ comptes Twitter pour webdesigner
• Améliorations cosmétiques et ergonomiques sur ce blog
• 35 blogs de développeurs web
• Le petit journal du web — WordPress, développement web, etc.
• 390 ressources Javascript & jQuery

La saga «WordPress de A à Z»

1. Logo « WordPress je thème »
2. WordPress de A à Z… avec le Codex
3. A comme Allons-y !
4. B comme Basics — ♥ Basics en bref et lien de téléchargement.
5. C comme CSS & Composé HTML5
6. D comme Discussion
7. Vous lisez : E comme Extensions
8. Prochain article : F comme Function

Découvrez les meilleurs plugins pour améliorer les performances de votre site, ajouter des scripts et des CSS dans la balise head, créer et gérer votre sitemap, gérer les commentaires, adapter votre site pour iPhone et Android, gérer vos statistiques avec Google Analytics, afficher les articles similaires, effectuer des opérations sur votre base de données, étendre les fonctionnalités de l’éditeur WYSIWYG TinyMCE, et bien d’autres choses encore !

1. Système de cache

W3 Total Cache améliore l’expérience utilisateur en augmentant les performance de votre serveur en mettant en cache tous ce qui peut l’être pour réduire les temps de chargement et donc accélerer l’affichage des pages. Les éléments concernés par la mise en cache sont : les pages, les requêtes à la base de données. Cette extension se charge également de minifier les fichiers CSS et Javascript et gère votre CDN (Content Delivery Network) le cas échéant.

Voir aussi WP Super Cache qui rend des services similaires.

2. Ajouter du Javascript ou des CSS dans le head

Header-Footer permet d’ajouter facilement du contenu dans la balise head et/ou dans le footer de votre site, sans toucher aux templates. Il suffit de copier-coller les codes dans les champs dédiés et voilà ! Pratique pour placer les nombreux scripts pour Google Analytics, Twitter et autre Widgets. Voir aussi Add to Header et General Headers & Footers.

3. Générer un sitemap

Better WordPress Google XML Sitemaps crée un plan de site au format XML normalisé par Google pour permettre aux moteurs de recherche d’avoir un instantané des liens présents sur votre site et des mises à jour à chaque article publié. Google prend votre sitemap en compte dans les Google Webmaster Tools à la rubrique Configuration du site → Sitemaps. Cette extension autorise le découpage de votre plan de site en plusieurs parties grâce à un fichier XML liant d’autres fichiers XML pour les pages, les billets, les catégories, les tags.

4. Abonnement aux commentaires

Subscribe To Comments Reloaded — C’est un classique trop souvent oublié qui permet à vos commentateurs de suivre les commentaires laissés sur un article en recevant un mail chaque fois qu’un nouveau commentaire est publié.

5. Thème adapté aux smartphones

WPtouch — Il s’agit ni plus ni moins d’un thème spécialement conçu pour les Smartphones (iPhone, Android, etc.). Très pratique et lisible, c’est le compagnon indispensable pour que votre site fasse bonne figure sur les périphériques mobiles tactiles à petits écrans. L’utilisateur a la possibilité de désactiver WPtouch pour retrouver l’affichage d’origine en activant/désactivant un bouton au bas de la page. Voir aussi WPtap News Press.

6. Statistiques Google Analytics

Google Analytics for WordPress est un outil très utile pour tirer le maximum de Google Analytics : de l’installation du script asynchrone au tracking des liens sortants, en passant par la mise en place de variables personnalisées pour affiner vos statistiques de fréquentation et d’utilisation de votre site internet par les visiteurs. J’utilise aussi régulièrement Header-Footer pour coller le code Google Analytics asynchrone dans le head.

7. Articles similaires mais presque

Yet Another Related Posts Plugin affiche une liste de liens en rapport avec l’article en cours de lecture. L’algorithme de YARPP est assez convaincant à partir du moment où les tags associés aux billets sont pertinents. Nombreuses options disponibles pour affiner la correspondance entre l’article et la liste de liens.

8. TinyMCE Advanced

TinyMCE Advanced transforme votre éditeur WordPress WYSIWYG en bête de course sous stéroïdes en ajoutant des boutons intéressants :

• Ajout de vidéos,
• Découpage d’article en plusieurs parties (Split Page),
• Abréviation,
• Indice et exposant
• Tableaux,
• Options de listes ordonnées ou non-ordonnées,
• Etc.

TinyMCE Advanced autorise l’utilisation de la balise iframe (pratique pour insérer des plans en provenance de Google Maps) et les nouvelles balises HTML 5, sans que l’éditeur ne les supprime sans préavis. L’administration du plugin est assez intuitive : n’hésitez pas à faire glisser les boutons indésirables (couleur de texte, fond de couleur, etc.) vers le bas pour vous en débarrasser ;-)

J’apprécie particulièrement la possibilité d’ajouter des attributs à un élément en le sélectionnant puis en cliquant sur le bouton Insérer/Modifier des attributs pour ajouter un identifiant ou une classe CSS. Associé avec le bouton Ancre, ce bouton permet de faire des liens à l’intérieur d’un billet (note de bas de page, sommaire, etc.).

9. Gestion de la base de données

WP-DBManager est un plugin spécialisé dans la gestion de la base de données de votre installation WordPress : réparation, sauvegardes (récurrentes ou pas), restauration, optimisation. Permet également d’effectuer des requêtes SQL. Voir aussi WP-DB-Backup comme alternative pour les opérations de sauvegarde. Nécessite moins de permissions que WP-DBManager, ce qui peut être utile sur certaines configurations de serveur.

10. Plugin anti-spam

Akismet est pré-installé mais son activation dépend d’une clé que vous pouvez vous procurer plus ou moins gratuitement selon que vous êtes une entreprise avec plusieurs sites, un professionnel avec un seul site, ou bien un particulier. Ceux qui ont un compte WordPress.com peuvent se faire renvoyer leur clé Akismet en indiquant leur mail à l’adresse https://akismet.com/resend

11. Formulaire de contact

Easy Contact propose un formulaire de contact minimaliste, facile à modifier. Idéal quand on a juste besoin d’un formulaire de contact sans prise de tête.

Ces 11 premières extensions sont celles que j’utilise le plus souvent. Les suivantes — que j’utilise de temps à autre –  m’ont été rappelées via Twitter par @tbnv @MoOx @exootia @ID_referenceur @Nawylblog @pperistil @Delphine_D @fetard @Aether_Concept @agence_acs04 @nicofayet @nderambure @MaevaCecchi @laurentbayard @glloq8 @michaeldumontet @jverrecchia et @pixeletcetera que je remercie o/

• WordPress SEO — J’utilise peu (voire jamais) les plugins SEO pour WordPress : je préfère le système semi-automatique que j’ai mis en place dans le thème WordPress ♥ Basics qui est une version simplifiée de celle présentée dans Not At All In One SEO. Voir aussi SEO Ultimate.
• Contact Form 7 — Créez autant de formulaires que vous voulez avec les éléments dont vous avez besoin : champs text, file, boutons radio, menu `select`, etc. Une usine à gaz parfois indispensable ;-)
• No category parents — Supprimez le terme category de vos URL’s. Voir aussi WP No Tag Base. Notez que contrairement ce ce qu’on peut lire à propos de ce terme category, il n’est pas totalement sans intérêt. Dans le cadre d’un site centré sur un seul sujet, on pourra changer le terme category par le mot sujet pour l’avoir dans l’URL une bonne fois pour toute, sans être obligé de «bourrinner» les mots-clés dans les titres :-D
• WP-Paginate — Les liens «Billets précédents» et «Billets suivants» (dont j’apprécie personnellement la sobriété) peuvent cacher la richesse de votre contenu. Il est parfois préférable de montrer aux visiteurs que votre site en a sous { le talon aiguille | la santiag | le pied } grâce à ce plugin qui ajoute une pagination efficace pour naviguer entre les différents articles que vous avez publiés. Voir aussi WP-PageNavi.
• Simple Tags — La gestion des tags dans WordPress est un peu cheap. Ce plugin permet notamment : de renommer les tags par paquet, de lier automatiquement un terme dans un billet à un tag existant (un peu agaçant, mais cette fonction a trouvé son public…), d’avoir l’autocomplétion Ajax, de taguer des pages (et pas seulement les articles).

En bref

Quand je vois que je n’utilise régulièrement que 0,1% des plugins disponibles, je me dis que je dois passer à côté de quelques bijoux. Je vous laisse la zone des commentaires pour compléter cette liste avec les extensions que vous installez régulièrement dans vos sites WordPress.

Merci de votre attention :-)

Articles sur le même sujet

• 390 ressources Javascript & jQuery
• Le Petit Journal du Web — 09/2011
• Le petit journal du web : PHP, WordPress, Javascript, CSS, Ruby, Responsive Webdesign
• 35 blogs de développeurs web
• Le petit journal du web — Les fruits de la veille ont gardé toute leur fraicheur

1. jCarousel Lite — Galerie d’images en jQuery.
2. eCSStender — Sélecteurs CSS avancés compatibles IE6.
3. Effets jQuery accessibles WAI-RIA — Lightbox, validation de formulaires et menus à onglets accessibles prêts à l’emploi.
4. Augmenter la taille du texte avec jQuery — Modifier la taille du texte de votre site en choisissant une valeur dans un menu déroulant.
5. Javascript Framework Matrix — Tableau comparatif des principaux frameworks Javascript.
6. Afficher vos flux XML avec jParse – Parsing de flux XML (RSS, Atom) via Ajax pour l’afficher en HTML.
7. jqModal : des fenêtres modales minimalistes – Couteau suisse des Lightbox en tout genre pour afficher des alertes, des notifications, des boites de dialogues, etc.
8. jQuery — renverser l’ordre d’une liste ordonnée — les premiers seront les derniers et vice-versa. Merci à pioupiouM pour la correction du script.
9. Cufón : des polices de caractère pour tous — Implémenter font-face dans le plus grand nombre de navigateurs.
10. News déroulantes avec jQuery — Un joli bandeau de news à l’aide de liste de définition, d’une pincée de CSS et d’une bonne rasade de jQuery.
11. jQuery Magnifier Loupe — Zoom sur images avec l’attribut longdesc.
12. Lazy loader : chargement des images à la volée — Chargez vos images que lorsqu’elles apparaissent dans la fenêtre du navigateur.
13. Faire un Carrousel avec jQuery — Tutoriel très didactique pour réaliser un carrousel avec HTML, CSS et jQuery.
14. Tipsy — des bulles d’aide façon Facebook avec jQuery — Bulles d’aide façon bande dessinée comme celles que l’on trouve sur Facebook ouTwitter.
15. jQuery Tools — Incorporer Flash, gamme étendue d’overlay, tooltips à foison, tabs, etc.
16. jQuery UI Multiselect — Améliore l’apparence et l’ergonomie de la balise HTML select.
17. jQuery Flash Plugin — Inspiré par SWFObject, UFO et sIFR, jQuery Flash Plugin a été complètement réécrit avec jQuery pour éviter les redondances.
18. Jquery Pagination System — Pagination côté client avec jQuery.
19. Choisir sa bibliothèque JS avec Javascript Framework Matrix — Tableau comparatif des principaux frameworks Javascript.
20. FireFinder — interagir avec la page web — Interagir avec les éléments de la page via les sélecteurs CSS ou les expressions XPath.
21. Sélecteur de date (Date-Picker) non-intrusif — Sélecteur de date avec mini calendrier.
22. Google Closure — les mauvaises pratiques Javascript en action ? — Google Closure a été développé par des spécialiste de Java… ça craint.
23. Un diaporama avec AnythingSlider jQuery Plugin — Chaque diapo peut être réalisé à l’aide du composé HTML de votre choix (texte, images, etc.).
24. Un «slider» à la manière du Playback de Google Wave — tutoriel pour afficher un historique progressif à la manière de la fonction Playback de Google Wave.
25. jsbin — tester votre code Javascript et partagez vos bugs — Outil en ligne créé par Remy Sharp pour tester du code Javascript et le partager
26. PHP.JS — transposer des fonctions PHP en Javascript.
27. Le code CSS et Javascript au milieu du HTML c’est pas bien ! — Traduction de l’article Why Inline CSS And JavaScript Code Is Such A Bad Thing de Robert Nyman.
28. jQuery UI Selectmenu — des menus « select » personnalisés à la sauce ARIA.
29. jQuery Image Cropper — recadrer et uploader des images.
30. ul2finder — un explorateur à l’image du Finder de MacOS X.
31. Ajax Upload — Upload multiple de fichiers sans recharger la page avec n’importe quel élément (images, liens, etc.).
32. Des cookies à la mode de jQuery — Ecrire, lire et effacer vos cookies pour 4,15 kb.
33. Simple jQuery Text Resizer — Laissez vos visiteurs choisiront la taille qui leur convient (un cookie gardera leur préférence en mémoire).
34. Changement de design «on the fly» avec jQuery — Tutoriel clair et didactique pour permuter deux maquettes d’un simple clic.
35. 22 menus déroulants passés au crible — Tyssen Design passe en revue les principaux dropdown menu.
36. jQuery Context Menu — Menus contextuels (clic droit) personnalisable à 100% avec les CSS.
37. Pikachoose — Plugin jQuery idéal pour afficher des galeries d’images en toute légèreté.
38. dLite — une librairie Javascript « petit mais costaud ».
39. jQuery-XML — Afficher un flux RSS avec jQuery et Ajax.
40. Styled and accessible tooltips – Infobulles stylées et accessibles avec jQuery.
41. DOMAssistant — Cette bibliothèque va un peu plus loin que dLite et permet de manipuler le DOM avec plus de souplesse.
42. FlashReplace – Insérer du Flash proprement.
43. DOMTab – Menu à onglets simple et efficace.
44. balance_columns – Équilibrer des colonnes avec Javascript.
45. cssQuery — Interroge le DOM via les sélecteurs CSS 1, CSS 2 et une partie de CSS 3.
46. jTextTranslate – Traduction de votre site en 87 langues par Google.
47. SimpleJS — Cette petite bibliothèque Javascript développée par Christophe Lefevre propose de faciliter l’utilisation d’Ajax.
48. iepngfix — Composant HTC qui gère la plupart des contraintes liées à l’absence de prise en charge de la transparence 24 bits par Internet Explorer 6.
49. maxWidthFixForIE6.js — Emuler la propriété max-width pour IE6.
50. Image jQuery – Quelques lignes de jQuery pour appliquer un léger effet de zoom sur une image.
51. The Ultimate GetElementsByClassName – Sélectionner les éléments par leur classe avec getElementsByClassName.
52. Planet jQuery — Un planet pour jQuery.
53. Text Resizing width jQuery — Laissez les utilisateur modifier la taille du texte sur votre site web.
54. Ceebox — Lightbox qui afficher n’importe quel contenu dans une fenêtre modale ou non. Idéale pour les vidéos hébergées sur Google Video, Dailymotion ou Youtube.
55. Get viewport size with javascript — Connaitre la taille du « viewport » en Javascript.
56. Smart Columns with CSS & jQuery — Des colonnes fixes et ajustées en largeur avec CSS et jQuery.
57. Menu déroulant Suckerfish — Menus déroulants et autres fantaisies avec :hover :focus :active :target pour IE6.
58. Système de notation par étoiles accessible — Samuel Le Morvan propose un tutoriel complet sur la question.
59. Mootools Forge — Une forge pour les plugins Mootools.
60. TinySlider — Diaporama Javascript autonome très léger de 1,5 ko facilement personnalisable via les CSS.
61. jQSlickWrap — Plugin jQuery qui permet d’habiller une image de forme irrégulière avec le texte autour.
62. jQuery Before/After — Plugin étonnant qui plaira à tous ceux qui veulent proposer la comparaison de deux états d’une photo.
63. Hightcharts — Bibliothèque Javascript spécialisée dans la création de diagrammes, graphiques et autres camemberts pour illustrer vos données brutes.
64. jTruncate — Plugin pour jQuery qui coupe un texte au bout d’un certain nombre de mots et qui ajoute un texte comme « Lire la suite » pour accéder à… la suite !
65. CSS3 animations and their jQuery equivalents — 6 effets introduits dans CSS3 et le code Javascript pour obtenir le même résultat en jQuery.
66. Link Building Pro — Ajoute automatiquement un lien vers la source, au cas où le copieur-colleur oublierait de citer l’original.
67. jQueryList — Plus de 255 plugins pour jQuery disponibles sur une seule page et classés par thèmes.
68. 40 bouts de code — facilitez vos développements en Javascript ou jQuery.
69. jQuery Masonsy — Réorganise les blocs de votre page page pour réduire les espaces vides entre les éléments.
70. Animation avec quatre images et jQuery — Tutoriel pour réaliser une publicité ou une accroche sans passer par Flash.
71. jQuery Quick Guide — Un guide pour avoir les fonctionnalités de jQuery sous la souris.
72. jARIA jQuery Plugin – Permet d’ajouter une couche ARIA dans votre site web sous forme de méthodes.
73. jQuery 1.4 API Cheat Sheet — Regroupe sur une page toutes les méthodes et fonctions de jQuery jusqu’à la version 1.4.
74. jsfiddle — Propose un environnement pour tester et partager du code Javascript.
75. jquery-compat-1.3 — Profitez de jQuery 1.4 en restant compatible avec jQuery 1.3.
76. Simple Image Viewer — Galerie d’image minimaliste.
77. A.P.E (Ajax Push Engine) – Le web en temps réel avec Ajax Push Engine.
78. Page Peel Corner — Effet de page cornée avec jQuery.
79. jQuery Cross Domain Ajax Guide – Guide de l’Ajax sur plusieurs domaines.
80. Sexy.js — Améliorer l’interface Ajax de jQuery.
81. Dynamic tabs using jQuery — Ccréer un menu à onglets pour ajouter ou supprimer des onglets de manière dynamique.
82. DOMAssistant — Bibliothèque Javascript « petit mais costaud » qui pourrait facilement remplacer jQuery pour une partie des utilisateurs.
83. Comment System with jQuery, Ajax and PHP – L’excellent Srinivas Tamada de 9Lessons nous apprend comment mettre en place un système de commentaires Ajax avec jQuery et PHP.
84. Adding Keyboard Navigation — Tutoriel sur la mise en place d’un diaporama avec utilisation du clavier (flèche droite et flèche gauche) pour passer à l’image suivante ou précédente.
85. Disable On Submit — Plugin jQuery qui désactive le bouton Submitune fois que le formulaire a été envoyé une première fois.
86. Thumbnail Zoom — Effet de zoom sur une miniature accompagné de l’apparition d’une légende au survol de la souris.
87. Google Fade — Script disponible pour Mootools et jQuery pour reproduire chez vous l’effet introduit récemment par Google sur sa page. d’accueil : certains éléments de navigation apparaissent suite au mouvement de la souris sur la page ou lorsqu’on quitte le champs de recherche.
88. jqTransform — Stylez vos formulaires avec jQuery et CSS.
89. css-template-layout — Implémentation jQuery du module CSS3 Template Layout.
90. How to Easily Create a JavaScript Framework — Créez votre framework Javascript en 4 parties.
91. jQAPI — Documentation alternative pour jQuery 1.4.1.
92. jQuery Source Viewer — Naviguer à l’intérieur du code source de jQuery.
93. flot — Créez des graphiques avec jQuery.
94. Uniform — Ajouter du look and feel aux rugueuses cases à cocher, aux boutons radio anémiques, sans oublier les spartiates. boutons Parcourir… des sobres formulaires HTML.
95. Parallax — Technique utilisée depuis longtemps dans le cinéma, le dessin animé ou le jeu vidéo pour créer une illusion de profondeur.
96. Plupload — Gestionnaire de « téléversement » (upload) multiple en jQuery.
97. 6 bouts de code pratiques pour manipuler les éléments select et input avec jQuery.
98. jQuery vs Mootools — Choisir jQuery ou Mootools en connaissance de cause.
99. jQuery Color Animation — Support du RGBa pour « jQuery Color Animations».
100. jSocial — Affichez très rapidement la liste des réseaux sociaux où vous êtes présent.
101. DataTables — Pagination et tri des données pour vos tableaux HTML.
102. Slick Page Transition — Effet de transition (fading) entre les pages d’un site.
103. jQuery Splitter Plugin — Divisez votre page en plusieurs parties redimensionnables.
104. jQuery SimpleTree Drag&Drop — Construisez des arborescences à la mode de Windows.
105. Content Switcher — Bel exemple de mise en place d’un système permettant de passer d’un contenu à un autre via un menu en utilisant les concepts de l’amélioration progressive et du Javascript non intrusif.
106. Effets lightbox sans framework — L’ouverture de nouvelles fenêtrespopup a progressivement laisser la place aux effets lightbox. Voici plusieurs solutions simples à base de HTML, CSS.
107. Starter — Générateur de plugins jQuery.
108. jQuery Tutorials for Designers — 13 Tutoriels jQuery pour Webdesigners.
109. Comment, jQuery va tuer Flash ? — Question surprenante, mais force est de constater que Javascript a fait du chemin depuis  window.open() !
110. Clickoutside Event — Détectez les clics en dehors d’un élément.
111. TipTip — Infobulles « funky » pour afficher l’attribut HTML «title».
112. Custom jQuery Selectors — Créez des sélecteurs personnalisés avec jQuery.
113. Optimiser le chargement des AdSense — Accélérer votre blog en optimisant l’affichage des Adsense avec jQuery.
114. Splash — un diaporama en pur Javascript.
115. DLink — Afficher le type de cible des liens avec Javascript.
116. Webform to wizard — Plugin jQuery qui découpe les formulaires longs et ennuyeux en «assistant» en suivant les contours des balises HTML fieldset.
117. IE7.js — Transformez une citrouille à base de IE5.5/6 en carrosse IE7 ou IE8 : ce n’est pas de la magie, c’est de la technologie !
118. 20 méthodes jQuery à connaitre – Bien belle liste de 20 fonctions jQuery peu connues, à connaitre !
119. Modernizr — Détection des fonctionnalités CSS3 et HTML5.
120. simpleCart (js) — Script de moins de 20 ko pour mettre en place un caddie e-commerce en quelques minutes.
121. Créer une arborescence de fichier avec jQuery — Série de 8 tutoriels sur la création d’une arborescence de fichier à l’aide de jQuery.
122. Add Events jQuery — Ajouter «cursor: pointer» sur tous les événements «click».
123. jQuery HTML Table Toolbox — 36 façons de «dresser la table» avec jQuery.
124. FAT-FREE — Framework PHP léger et modulaire.
125. Popeye 2.0 — Lightbox qui affiche une galerie d’images à partir d’une liste non-ordonnée dans le flux de votre texte.
126. jQuery.fn.sort — Trier des éléments avec jQuery.
127. Bloc de login à la Twitter avec jQuery — Tutoriel pour faire un bloc de login dynamique sur la page d’accueil de Twitter.
128. Table des matières avec jQuery — Bout de code pour afficher une liste ordonnée sous la forme d’une table des matières comme celles que l’on trouve dans les livres imprimés.
129. Preload CSS/JavaScript without execution – Pré-chargement des CSS et du Javascript sans exécution.
130. jQuery BBQ — Utiliser les boutons Précédent et Suivant du navigateur malgré Ajax.
131. Colorbox — une « lightbox » légère et extensible en jQuery.
132. Burst Engine — Un peu de Flash et d’After Effects dans Canvas.
133. jQuery Form Plugin — Mettez de l’Ajax dans vos formulaires HTML.
134. WebProjectHelper — Générateur de structure MySQL et de classes PHP.
135. UI.Layout – Créer des interfaces utilisateurs avec jQuery.
136. Scriptsrc — 10 Frameworks Javascript à emporter.
137. Griddy-Overlay — Afficher une grille par-dessus votre page web avec jQuery.
138. Sliding Panel Photo Wall Gallery — Mur d’image et Lightbox avec jQuery.
139. SliderNav – Plugin jQuery qui permet de créer un carnet d’adresse défilant de type iPhone.

PS : Pour trouver l’article correspondant sur js4design, il suffit de saisir l’ancre du lien dans le champs de recherche de la colonne latérale.

Articles sur le même sujet

• 390 ressources Javascript & jQuery
• Recommandations pour développeurs web front-end
• Le petit journal du web — Les fruits de la veille ont gardé toute leur fraicheur
• WordPress de A à Z — E comme Extensions (les plugins)
• IE6 — 3 fonctions Javascript pour lutter contre le bug des classes multiples

1) Choisissez votre palette de couleur, 2) ajoutez et modifiez les éléments de formulaire, 3) prévisualisez puis téléchargez le formulaire HTML

Des formulaires en forme avec FormBuilder : 1re étape. Cliquez sur l'image pour l'agrandir.

Articles sur le même sujet

• Le petit journal du web — Les fruits de la veille ont gardé toute leur fraicheur
• Dégradés CSS3 WYSIWYG avec Ultimate CSS Gradient Generator
• 7 outils en ligne pour l'intégration HTML & CSS
• Générateur de coins arrondis avec border-radius
• Dummy Image — des images de placement pour votre site web

WordPress : redimensionnez et affichez une miniature à partir des images de vos articles

Je vous ai parlé dernièrement (dans les bons liens WordPress) du script get_post_images() associé à la fonction first_thumbnail() pour afficher une miniature en homepage, par exemple, en prenant la première image d’un article. Mehdi Kabab vient d’apporter une amélioration substantielle à la fonction first_thumbnail() pour prendre en compte le script timthumb qui permet de générer une miniature aux dimensions que vous voulez (via la bibliothèque graphique GD) plutôt qu’un redimensionnement HTML lourd de conséquence sur le poids de votre page d’accueil.

Vous pouvez voir cette petite merveille en action sur la page d’accueil de ce blog : les miniatures sont redimensionnées et affichées grâce à cet ensemble de fonctions. Pour les souhaits et surtout les remerciements c’est par ici que ça se passe ;)

Pages web et bases de données

• Validateur — Validez votre site Web en entier grâce à l’outil de validation multipages (via truffo). Ce service est développé et maintenu par le Réseau Proze et s’appuie sur le service de validation du W3C qui détient les droits d’auteur de son service.

• Adminer — est un outil tenant en un seul fichier PHP qui permet de gérer une base de données MySQL à la manière d’un phpMyAdmin light. Existe également sous forme de plugin pour WordPress.

• Firebug Lite — Ce simple fichier Javascript — disponible sous forme de bookmarklet — va superposer l’essentiel des commandes de Firebug à la page en cours.

Javascript et plugins jQuery

• jQuery Magnifier Loupe — propose un zoom pour vos images. Utilise intelligemment la propriété longdesc pour zoomer à partir d’une miniature (thumbnail). Il reste possible de « fabriquer » la miniature avec les propriétés HTML width et height. (via Amicalement Web).

Attention tout de même au caractère peu accessible de cette solution basée sur l’attribut HTML longdesc qui permet de fournir une description de l’image pour les malvoyants comme me le rappelle Sébastien Delorme sur Twitter ici, ici et ici ;)

Cela dit, le script ne nécessite pas obligatoirement l’attribut longdesc pour fonctionner ; il est possible de déclencher la loupe en utilisant la classe jLoupe sur l’élément img concerné !

• qtip jQuery Plugin — Sans doute la solution ultime pour gérer les info-bulles (tooltips) : cross browser, dégradation gracieuse, coins arrondis personnalisables, positionnement facile, effets personnalisables, AJAX, etc. (via arnaud-k)

• Vanadium — Validation et vérification des champs d’un formulaire à l’aide de l’attribut class. Par exemple : pour un champs requis ou pour un champs qui doit recevoir la chaine de caractère vanadium. Possibilité de valider via AJAX avec «  par exemple.

Quelques trucs pour vos CSS

• 21 polices de caractères à intégrer avec @font-face — Cette propriété CSS2 permet d’incorporer les informations vectorielles relatives à une fonte dans votre page web sous la forme @font-face { font-family: GraublauWeb; src: url("path-to-the-font-file/GraublauWeb.otf") format("opentype"); } à utiliser ensuite comme suit : h1 { font-family: GraublauWeb, Helvetica, Verdana, Sans-Serif; }

• Ultimate IE6 Cheatsheet 25+ hacks et contournements pour faire sa fête à IE6 — Avec des parts de marché estimées à 18% ou 25% selon les sources, l’intégrateur web doit encore se coltiner avec le dernier de la classes des navigateurs.

Miscellanées

• A l’occasion du Last Call pour l’écriture des spécifications pour HTML5, Florent V. répond à nos questions sur les différents DOCTYPE et autres types MIME qui peuplent la jungle du développement web. Des réponses synthétiques seront publiées dans le courant de la semaine prochaine.

Articles sur le même sujet

• Le petit journal du web — Les fruits de la veille ont gardé toute leur fraicheur
• 100+ comptes Twitter pour webdesigner
• Le petit journal du web : PHP, WordPress, Javascript, CSS, Ruby, Responsive Webdesign
• 35 blogs de développeurs web
• Le petit journal du web — WordPress, développement web, etc.

1. Aller droit au but (Path to completion),
2. Alignement des labels (Label alignment),
3. Aide et astuces (Help & tips),
4. Validation (Inline validation),
5. Actions primaires et secondaires (Primary & Secondary actions),
6. Actions en cours (Actions in progress),
7. Erreurs (Errors),
8. Input inutiles (Unnecessary inputs),
9. Organisation du formulaire (Form organization),
10. Engagement graduel (Gradual engagement).

Téléchargez la conférence audio The Value of Web Forms and Design Constraints au format mp3 (27.9 MB).

Autres ressources pour les formulaires HTML

• JotForm — création de formulaires en ligne,
• webjackalope — 12 exemples de formulaires d’inscription pour fainéant.
• Fred Cavazzza en forms — Tout ce que vous avez voulu savoir sur les formulaires par un maitre du genre.

Stay tuned and mind the gap!

Articles sur le même sujet

• Aligner le contenu d'un champ input avec le label associé
• Styler vos champs de formulaires de recherche avec CSS
• Personnalisez vos formulaires avec CSS et Javascript
• Guide de bonnes pratiques HTML & CSS par Google
• Recommandations pour développeurs web front-end

L’auteur utilise un button à la place du input type= »submit » pour éviter les problèmes d’alignement afin d’utiliser une seule image pour le champ input et le button. Ce qui permet de gérer facilement les différents état :focus ou :hover avec background-position.

PS : En cas de problème avec l’utilisation de l’élément button, jettez un oeil sur ce fil de discussion paru sur le forum Alsacréations.

Articles sur le même sujet

• Quelques notes sur XHTML et CSS, au fil de l'eau…
• Le petit journal du web — Les fruits de la veille ont gardé toute leur fraicheur
• 8 techniques CSS pour remplacer du texte HTML par une image
• Quelques notes sur la bibliothèque Javascript IE7 de Dean Edwards
• Menu HTML et CSS, sliding doors et item current en PHP

Pour un champ input de 20px de haut, on aura ainsi les valeurs :

input {
    height: 13px;
    padding: 3px 0 4px 0;
}

Pour une hauteur identique à :

input {
    height: 20px;
}

And the cat’s in the bag!

Articles sur le même sujet

• 10 bonnes pratiques pour des formulaires HTML efficaces
• Styler vos champs de formulaires de recherche avec CSS
• Personnalisez vos formulaires avec CSS et Javascript
• Design de formulaire HTML avec CSS
• Trucs et astuces CSS

Articles sur le même sujet

• 10 bonnes pratiques pour des formulaires HTML efficaces
• Styler vos champs de formulaires de recherche avec CSS
• Aligner le contenu d'un champ input avec le label associé
• 10 principes pour un design web efficace
• Quelques notes sur XHTML et CSS, au fil de l'eau…

10 Principles Of Effective Web Design

Ce sont l’ergonomie et le service rendu — et non l’apparence — qui déterminent le succès ou l’échec d’un site web.  Étant donné que celui ou celle qui clique décide de tout, les designs orientés vers l’utilisateur (user-centric) sont désormais considérés comme une approche standard pour réaliser des sites web rentables. Si les utilisateurs ne peuvent pas utiliser une fonctionnalité, que fait-elle encore là ?

Nous ne parlons pas de l’implémentation des détails (comme l’emplacement de tel ou tel élément) qui a déjà été abordée dans de nombreux articles. A la place, nous nous pencherons sur les principes fondamentaux et heuristiques pour réaliser des designs web efficaces. Utilisées à bon escient, ces approches peuvent conduire à des décisions sophistiquées en matière de design et simplifier le processus qui mène à la mise en forme des informations.

Avant de continuer, vous pouvez pendre en compte que :

• les articles parlant d’ergonomie comme 10 cauchemars ergonomiques et 30 problèmes d’utilisabilité que nous avons publié auparavant pourraient vous intéresser.
• Nous aborderons d’autres principes pour concevoir des sites web efficaces dans nos prochains articles. Pour ne pas les rater, abonnez-vous à notre flux RSS.

Afin d’utiliser correctement ces principes, nous devons d’abord comprendre la manière dont les utilisateurs interagissent avec les sites web, comment ils pensent et quelles sont les bases de leur comportement.

Comment pensent les utilisateurs ?

Grosso modo, l’utilisateur a les mêmes habitudes sur le web que dans la « vraie vie ». Il jette un coup d’œil à chaque nouvelle page, parcourt quelques lignes et clique sur le premier lien qui attire son attention ou qui ressemble vaguement à ce qu’il cherche. Dans les faits, une grande partie de la page n’est même pas vue.

La plupart des utilisateurs cherche quelque chose d’intéressant (ou d’utile) et de cliquable ; l’utilisateur clique sur le premier élément qui semble correspondre à ses aspirations. Si ce n’est pas le cas, direction le bouton « Retour » et le processus de recherche est relancé.

• Les utilisateurs apprécient la qualité et la crédibilité. Un site qui fournit un contenu de qualité peut bien avoir un design pauvre envahi de publicité, le visiteur fera « avec ». Ceci explique pourquoi des sites pas « terribles » mais présentant un contenu attractif font de l’audience depuis des années. Qu’importe le flacon, pourvu qu’on ait l’ivresse, pourrait-on dire.
• Les utilisateurs ne lisent pas, ils parcourent la page. Face à une page web, le utilisateurs cherchent des points de repères ou des liens pour les guider à travers le contenu.

Les visiteurs ne lisent pas, ils scannent. Notez la manière dont les zones « chaudes »surgissent au milieu des phrases, ce qui est typique d’un processus de « scannage »

Notez la forme en « F » typique d’un processus de « scannage » [NdT]

• Les utilisateurs du web sont impatients. Ils réclament des gratifications immédiates. Si un site web ne peut pas répondre à leurs attentes, cela signifie que le designer a échoué dans sa mission et que l’entreprise perd de l’argent. Plus la charge cognitive pour accéder aux ressources du site est élevée, plus la navigation sur le site est absconse, et plus les utilisateurs auront tendance à quitter la page pour autre chose. [JN / DWU]
• Les utilisateurs ne font pas des choix optimaux. Ils ne cherchent pas le moyen le plus rapide pour trouver l’information. Ils ne scannent pas non plus la page sur un mode linéaire en allant d’une section du site à une autre : ils font « au mieux » en choisissant la première option raisonnable. Il y a de fortes chances pour qu’ils cliquent sur le premier lien qui les inspire. La rationalisation est chronophage, faire « au mieux » est plus efficace. [video ]

Le flux de lecture séquentiel ne fonctionne pas sur le web.

La capture d’écran à droite décrit le parcours de l’oeil sur une page donnée.

• Les utilisateurs suivent leur intuition. Dans la plupart des cas, ils improvisent au lieu de suivre le plan conçu par l’architecte du site. D’après Steve Krug, la raison est simple : les utilisateurs s’en moque : « si nous trouvons quelque chose qui marche, nous l’adoptons. Ça nous est égal de ne pas comprendre comment ça marche du moment que nous pouvons l’utiliser. Si vos visiteurs agissent comme si vous aviez conçu un panneau d’affichage, alors faites un beau panneau d’affichage. »
• Les utilisateurs veulent avoir le contrôle. Ils veulent pouvoir contrôler leur navigateur et se fier à la cohérence des données présentées tout au long de la navigation sur le site. Ils ne veulent pas de pop-up et veulent pouvoir revenir d’où ils viennent en utilisant un bouton « Retour ».

1. Ne faites pas réfléchir l’utilisateur

Selon la première loi d’utilisabilité de Krug, la page web doit être évidente et contenir toutes les explications nécessaires à sa compréhension. Lorsque vous créez un site, votre boulot est de supprimer les points d’interrogation — Les utilisateurs ne devraient pas peser le pour et le contre pour chaque clic.

Si la navigation et l’architecture du site ne sont pas intuitives, le nombre de points d’interrogation augmente et le système devient opaque : il devient plus difficile de se rendre d’un point A à un point B. Une structure claire avec des indications visuelles raisonnables et des liens facilement reconnaissables peuvent aider le visiteur à trouver son chemin.

Allez au-delà des apparences en changeant l’ordre des éléments.

Jetons un oeil à un exemple. Beyondis.co.uk se veut le « beyond channels, beyond products, beyond distribution ». Qu’est-ce que celà signifie ? Puisque les utilisateurs ont tendance à explorer les sites web selon un parcours en « F » ces trois assertions devraient être les premiers éléments visibles dès le chargement de la page.

Bien que le design en lui-même soit simple et intuitif, le visiteur doit chercher plus loin pour comprendre de quoi il retourne exactement. Voilà un exemple de point d’interrogation superflu. C’est au concepteur du site de s’assurer que les zones d’ombre disparaissent. L’explication visuelle est placée du côté droit ; en changeant simplement la place des deux blocs, on augmente la « lisibilité » de la page.

Le slogan devient fonctionnel en fournissant au visiteur des options pour essayer le service

ExpressionEngine utilise une structure très proche de celle utilisée par Beyondis tout en évitant les points d’interrogation. De plus, le slogan devient fonctionnel en fournissant au visiteur des options pour essayer le service et télécharger une version gratuite.

En réduisant la charge cognitive, les visiteurs comprennent mieux le fonctionnement du système, ce qui vous laisse ensuite le loisir de communiquer sur les avantages du site et les bénéfices que les visiteurs peuvent en retirer.

2. Ne gaspillez pas la patience du visiteur

Dans un projet, lorsque vous vous apprêtez à offrir un service, essayer de simplifier les procédures au maximum. Moins il y a d’actions à accomplir et plus les chances qu’un visiteur X ou Y saute le pas augmentent. A priori, les visiteurs sont disposés à jouer avec le service, pas à remplir des formulaires web longs comme le bras pour ouvrir un compte qu’ils n’utiliseront probablement jamais. Laissez-les explorer le site et découvrir vos services sans les obliger à divulguer des informations les concernant. Il n’est pas raisonnable de forcer les utilisateurs à fournir une adresse email pour tester une fonctionnalité.

Comme Ryan Singer — développeur dans l’équipe 37Signals — le déclare, les utilisateurs seront probablement désireux de donner leur adresse email si on la leur demande après qu’ils avoir vu quelque chose qui fonctionne.

Stikkit est un service « user-friendly » efficace

Stikkit est un parfait exemple de service centré sur les besoins de l’utilisateur (user-friendly), rassurant et non intrusif. Et c’est sûrement ce que vous voulez que vos visiteurs ressentent sur votre site web.

Un enregistrement rapide grâce l’orientation judicieuse du formulaire

Apparemment, Mite demande plus. Néanmoins, l’enregistrement peut être fait en moins de 30 secondes, grâce à l’orientation horizontale du formulaire qui ne nécessite pas de faire défiler la page.

Dans l’idéal, faites sauter les barrières, n’imposez pas d’abonnement ou d’enregistrement dès le début (rien que l’enregistrement est un obstacle suffisant pour réduire le trafic).

3. Gérez l’attention de l’utilisateur

Comme les sites web fournissent à la fois du contenu statique et dynamique, certains aspects de l’interface utilisateur attirent plus l’attention que d’autres. Les images sont évidemment plus attirantes que le texte — comme les phrases marquées en gras sont plus attirantes que le texte normal.

L’œil humain n’est pas un instrument linéaire, et grâce à lui, les internautes peuvent reconnaitre instantanément les bords, les motifs et les mouvements. C’est pourquoi les publicités vidéo sont extrêmement agaçantes et perturbantes pour l’utilisateur, mais font parfaitement leur travail d’un point de vue marketing en captant l’attention.

“FREE.”, un signe subtil pour donner envie d’en savoir plus sur le service.

Humanized.com utilise le principe d’attention à la perfection. Le seul élément directement visible pour l’utilisateur est le mot « FREE. », attirant et séduisant, tout en étant reposant et purement informatif. Des signes subtils procurent au visiteur des informations suffisantes pour en savoir plus à propos de ces produits « free ».

Diriger l’attention sur des zones spécifiques du site avec un usage raisonnable d’éléments visuels aident vos visiteurs à aller d’un point A à un point B sans se demander comment ils sont supposés s’y rendre. Moins vos visiteurs auront de questions à se poser, et mieux ils pourront s’orienter dans le site. De plus, ils développeront une relation de confiance vis-à-vis de l’entreprise éditrice du site. En d’autres termes : moins on réfléchit, mieux on se porte.

4. Se battre pour passer en couverture

Les sites web modernes esont souvent critiqués à cause de leur tendance à vouloir guider le visiteur à l’aide de séduisants visuels, de 1-2-3-c’est-fini, de boutons larges avec effets spéciaux, etc. Mais dans une perspective de design, ces éléments sont plutôt une bonne chose ; ces lignes directrices sont extrêmement efficaces car elles guident simplement et de manière agréable les visiteurs à travers le contenu du site.

Des options visibles rapidement pour guider l’utilisateur.

Dibusoft.com combine visuel séduisant et structure claire. Le site possède neuf options pour la navigation principale visibles au premier coup d’œil, même si le choix de la palette de couleur aurait pu être un peu plus contrastée.

Permettre à l’utilisateur de voir clairement quelles fonctions sont disponibles, est un principe fondamental pour le succès d’une interface utilisateur. La manière d’y parvenir n’est pas très importante. Ce qui importe c’est que le contenu soit bien compris et que les visiteurs se sentent à l’aise avec la manière dont ils interagissent avec le système.

5. Utilisez un style de rédaction efficace.

Etant donné que le web est différent de l’imprimé, il est nécessaire d’ajuster le style d’écriture aux préférences de l’utilisateur et de ses habitudes de navigation. Un style de rédaction « promotionnel » ne sera pas lu. Les longs blocs de texte sans image ni mots-clé marqués en gras ou en italic seront évités. Les formulations emphatiques seront ignorées.

Parlez business. Évitez les intitulés trop malins ou subtils, propres au marketing, trop techniques ou spécifiques à l’entreprise. Par exemple, si vous décrivez un service et voulez que les visiteurs créent un compte, l’intitulé « Créer un compte » est mieux que « Commencez maintenant ! » qui reste encore mieux que « Explorer nos services ».

L’efficacité à l’état brut.

Eleven2.com va droit au but. Pas d’intitulé subtil, pas de déclaration exagérée. A la place, un prix, juste ce que recherche les visiteurs.

Pour écrire efficacement, une solution optimale consiste à utiliser :

• des phrases courtes et concises (venez-en au but le plus rapidement possible), - une maquette « scannable » (catégorisez le contenu, utilisez plusieurs niveaux de titres, mettez des visuels et des liste à puces qui ne perturbent pas le flux uniforme du texte),
• un discours simple et objectif (une promotion n’a pas besoin de ressembler à une publicité ; donnez à vos visiteurs quelques raisons valables d’utiliser votre service et de rester sur votre site).

6. Luttez pour la simplicité

Le principle KIS – Keep it simple (restez simple) – devrait être le but premier de tout design de site.

Les utilisateurs viennent rarement sur un site pour en admirer le design. Battez-vous pour la simplicité.

Crcbus s’adresse aux visiteurs avec un design simple et net. Vous pouvez n’avoir aucune idée de quoi il s’agit si vous ne parlez pas italien, néanmoins vous reconnaitrez la navigation, l’en-tête, la zone de contenu et le pied de page. Notez comment les icônes transmettent clairement les informations. Lorsque les icônes sont survolées, des informations complémentaires apparaissent.

Du point de vue du visiteur, le meilleur design de site web est constitué de texte brut, exempt de publicité ou autres blocs de contenus alternatifs qui ne correspondent pas exactement à la requête des visiteurs ou au contenu qu’ils sont en train de chercher.

Une version imprimable du site allant à l’essentiel est indispensable à une bonne expérience utilisateur.

Finch présente clairement ce qu’il faut savoir concernant le site et donne aux visiteurs la possibilité de choisir entre plusieurs options sans pour autant surcharger la page.

7. N’ayez pas peur de l’espace blanc

Il est aujourd’hui difficile d’ignorer l’importance des blancs tournants. Non seulement les espaces blancs contribuent à réduire la charge cognitive des visiteurs, mais ils facilitent la perception des informations présentées à l’écran. Lorsqu’on aborde une maquette pour la première fois, on a tendance à parcourir la page et à diviser les zones de contenu en morceaux d’information digestes.

Il est difficile de lire, de scanner, d’analyser ou de travailler avec des structures complexes. Si vous avez le choix entre séparer deux segments du design par une ligne visible ou en laissant de l’espace entre eux, il est généralement judicieux d’utiliser la deuxième solution.

Les structures hiérarchisés réduisent la complexité (Loi de Simon) : l’existence d’une hiérarchie visuelle facilite la perception du contenu.

L’espace blanc, c’est bon. Cameron.io l’utilise comme élément constitutif du design. Le résultat est une maquette facile à parcourir qui donne au contenu la position dominante qu’il mérite.

8. Communiquez efficacement avec un langage « visible »

Dans son journal sur la communication visuelle efficace, Aaron Marcus établit trois principes fondamentaux impliqués dans l’usage de ce que l’on peut appeler « langage visible » — le contenu que l’utilisateur voit sur son écran.

• Organisez : apporter à l’utilisateur une structure conceptuelle claire et cohérente. Cohérence, maquette, relation entre les éléments et navigabilité sont des concepts importants de l’organisation. Les mêmes règles et conventions devraient être appliquées à tous les éléments.
• Économisez : faites le maximum avec le minimum d’effets et d’éléments visuels. Quatre points sont à souligner : simplicité, clarté, distinction et accentuation. La simplicité s’applique seulement aux éléments qui sont les plus importants pour la communication. La clarté : tous les composants devraient être conçus de manière à ce que leur signification ne soit pas ambiguës. Distinction : les propriétés des éléments nécessaires devraient être distincts. Accentuation : les éléments les plus importants devrait être facilement perçus.
• Communiquez: adaptez la présentation des informations aux capacités des visiteurs. L’interface utilisateur doit jongler entre la lisibilité, la lecturabilité, la typographie, le symbolisme, les vues multiples, et les couleurs ou textures pour communiquer efficacement. Utilisez au maximum trois polices de caractères dans un maximum de trois tailles — avec un maximum de 18 mots ou 50/80 caractères par ligne de texte.

9. Les conventions sont vos amies

Un design conventionnel n’est pas synonyme de site web ennuyeux. En fait, les conventions sont vraiment utiles car elles réduisent la courbe d’apprentissage, le besoin de d’imaginer la manière dont les choses fonctionnent. Par exemple, il serait cauchemardesque que chaque site web ait sa propre représentation des flux RSS. Ce n’est pas très différent de ce que nous faisons dans notre vie de tous les jours lorsque nous utilisons des principes de base pour organiser nos données informatiques (fichiers) ou lorsque nous faisons du shopping (placement des produits).

Grâce aux conventions, vous pouvez gagner la confiance des visiteurs et améliorer votre crédibilité. Suivez les attentes des utilisateurs — ce qu’ils attendent de la navigation d’un site, de la structure du texte, de l’emplacement du champ de recherche, etc. (cf. Les Alertbox de jakob Nielsen pour plus d’information).

Babelfish en action : Amazon.com en Russie.

Un exemple typique d’expérience d’utilisabilité est de traduire une page en japonais (à supposer que vos utilisateurs ne connaissent pas le japonais, e.g. avec Babelfish) et demandez à vos testeurs d’effectuer une tâche, comme rechercher quelque chose sur la page traduite. Si les conventions sont bien appliquées, les utilisateurs seront capables de réussir des objectifs assez larges, même s’ils ne comprennent pas un seul mot.

Steve Krug suggère qu’il vaut mieux innover uniquement lorsque vous savez que vous avez une meilleure idée, sinon, optez pour les avantages des conventions.

10. Testez tôt, testez souvent

Ce principe appelé TETO (Test Early, Test Often) devrait être appliqué pour chaque projet de design web où les tests d’utilisabilité font souvent ressortir les problèmes et les questions liées à une maquette donnée.

Ne testez pas trop tard, pas trop légèrement et pas pour de mauvaises raisons. Dans ce dernier cas, il faut comprendre que la plupart des décisions concernant un design sont locales ; ce qui signifie que vous ne pouvez pas répondre globalement pour savoir si une maquette est mieux qu’une autre étant donné que vous devez l’analyser à partir d’un point de vue très spécifique (en considérant le cahier des charges, les intervenants, le budget, etc.).

Quelques points importants à garder à l’esprit :

• d’après Steve Krug, effectuer un test avec un seul utilisateur est 100% mieux que pas de test du tout, et tester avec un utilisateur tôt dans le projet est mieux qu’avec 50 près de la fin. D’après la première loi de Boehm, les erreurs sont plus fréquentes durant l’établissement du cahier des charges et la mise en place du design et sont plus coûteuses à corriger à mesure que le projet avance.
• Les tests sont un processus itératif. Cela signifie que vous concevez quelque chose, vous le testez, corrigez et le testez à nouveau. Il peut y avoir des problèmes qui n’ont pas été trouvés pendant le premier round étant donné que les utilisateurs ont été bloqués par d’autres problèmes.
• Les tests d’utilisabilité produisent toujours des effets bénéfiques. Soit ils vous renseignent sur les problèmes que vous avez, soit vous savez que votre projet est exempt de défaut, ce qui est – dans les deux cas – de bonne augure.
• d’après la loi de Weinberg, n’est pas le mieux placé pour tester son propre code. Cela est vrai aussi pour les designers. Après que vous avez travaillé sur un site pendant quelques semaines, vous ne pouvez plus le considérer avec un œil neuf. Vous savez comment il a été construit et donc vous savez exactement comment il fonctionne — vous avez la sagesse que les testeurs indépendants et les visiteurs de votre site n’aurait pas.

Dernière chose : si vous voulez un grand site, vous devez tester.

Références

• Designing Effective User Interfaces by Suzanne Martin
• Summary on Web Design
• UID presentation (Flash)
• Research-Based Web Design & Usability Guidelines
• “The psychology of computer programming” by Gerald Weinberg
• “Designing Web Usability” by Jakob Nielsen [JN / DWU]
• “Prioritizing Web Usability” by Jakob Nielsen
• “Don’t Make Me Think” by Steve Krug
• “Usability for the Web: Designing Web Sites that Work” by Tom Brinck, Darren Gergle, Scott Wood
• A Summary of Principles for User-Interface Desig

Crédits et remerciements

Traduit avec la permission de A List Apart Magazine et de l’auteur.

Malgré tout le soin apporté à cette traduction, il est possible que des erreurs préjudiciables à la pensée de l’auteur se soient glissées : je vous conseille vivement de lire l’article original. Profitez-en pour me signalez les erreurs ou les contresens, ou tout simplement les améliorations que vous jugez utiles pour coller au plus près de l’article. D’ailleurs, ce billet reste en version bêta quelques temps ;)

PS : d’autres traductions d’articles sur les sujets du web sont disponibles dans la catégorie Traductions.

Articles sur le même sujet

• Design de formulaire : faites moche, c'est mieux !
• Le petit journal du web — Les fruits de la veille ont gardé toute leur fraicheur
• Personnalisez vos formulaires avec CSS et Javascript
• Deux mots sur le graphisme, le design et l'ergonomie des sites web
• Quelques notes sur XHTML et CSS, au fil de l'eau…