La périodicité du blog est devenue irrégulomadaire à tendance bimensuelle… Malgré tout, je tiens à partager avec vous les fruits de la veille. Dans le panier : des trucs sympas et pratiques pour WordPress ; un plugin pour splitter du contenu avec jQuery ; des formulaires HTML plus efficaces ; une astuce toute simple pour connaitre personnellement vos visiteurs via Google Analytics, quelques liens pour compresser et organiser vos CSS et tout un tas d’autres choses dont l’énumération serait longue et fastidieuse.

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
• Le petit journal du web — WordPress, développement web, etc.
• 390 ressources Javascript & jQuery
• WordPress de A à Z — E comme Extensions (les plugins)

Comme toutes les disciplines graphiques, la conception de modèle de site internet (Webdesign) est traversée par les modes et les tendances. Parmi elles, le design minimaliste (style épuré, typographie fine, utilisation parcimonieuse des visuels, grille de mise en page tirée au cordeau) est sans doute le plus répandu. C’est certainement celui qui est amené à perdurer en raison de son faible potentiel de lassitude. Toutefois, il ne faut pas confondre ce style épuré avec le style «sans style». Sorte de design pauvre mis au service d’un contenu pré-mâché où le contenant n’a d’intérêt que s’il permet à Google d’avaler les contenus sans avoir le hoquet.

Force est de constater que le fait d’avoir mis l’installation des blogs à la portée de tous, allié à la propension des individus au moindre effort ainsi qu’à leur tendance à la reproduction des comportements, abouti à une double uniformisation des contenus et des contenants.

Des contenus dupliqués à l’extrême

Si on enlevait les blogs des spécialistes SEO autoproclamés, des Community Manager en devenir ou des chantres des réseaux sociaux et du High-Tech s’extasiant sur le moindre déplacement d’un bouton de connexion, la circulation sur les autoroutes de l’information serait plus fluide. Savez-vous qu’un seul blog peut en remplacer un bon millier ? Goopilation, par exemple, propose la traduction des actualités publiées sur les blogs de Google. On retrouve plus ou moins la même chose pour Twitter avec la version française du blog de Twitter.

Il suffirait de traduire ainsi une grosse dizaine de blogs anglo-saxons issus du web 2.0 pour mettre au chômage 90% des blogs francophones soi-disant High-Tech. Les 10% restants sont les blogueurs qui apportent une valeur ajoutée grâce à leur vision sur le long terme et leur compréhension des enjeux socio-économiques sous-jacents.

Ergonomie ou marketing ?

Beaucoup pensent que l’ergonomie est aux blogs ce que l’aérodynamisme est à l’automobile : un moyen permettant d’aller plus vite en essayant de ne pas gaspiller trop de ressources. Cela semble séduisant, mais à l’époque des débuts de l’aventure automobile, la forme des véhicules n’avait que l’imagination des créateurs comme limite… Les blogs vont-ils tous se ressembler pour offrir le moins de résistance au clic sponsorisé et s’adapter au plus petit dénominateur commun ?

Voilà en substance ce que j’écrivais en mars 2007 dans Ergonomie des blogs : utilisabilité ou marketing ? Je pensais à l’époque que la monétisation des blogs allait tuer la blogosphère mais il semble que la course au SEO et aux classements s’en soit chargés avant…

L’absence de design, ce n’est pas du minimalisme

Dis, c’est quoi le design ? En anglais, une des acceptions du terme «design» est «dessein», comme dans The Great Design. Je n’irais pas jusqu’à dire que si l’on enlève une lettre à «dessein» on obtient «dessin», mais presque !

Le minimaliste c’est du design où les fioritures graphiques auraient laissé la place à du blanc distribué avec générosité et à bon escient. Mais attention : tous les sites web ne gagnent pas à être ultra minimalistes ! Une fois qu’il n’y a plus rien à retrancher dans le design d’un site internet, il peut être judicieux d’ajouter des éléments graphiques pour flatter l’oeil et valoriser le contenu.

Trouver son chemin

Sur la durée, l’intérêt d’un blog réside en grande partie sur l’originalité du contenu (style, angle de vue, diversité des sujets abordés par l’auteur) que le contenant devrait refléter. Le design est une vitrine pour les contenus. Pour que les lecteurs s’arrêtent, il est important de personnaliser son blog quand bien même on n’aurait pas de véritable patte graphique. L’important est que le ramage se rapporte au plumage.

Ecrit à quatre mains avec Jiann Venturini – @_jiann sur Twitter – étudiant en Master Webdesign à Sup de Pub Paris.

Articles sur le même sujet

• Le Design serait inutile dans 80% des cas
• Sites de contenus vs sites commerciaux ?
• Optimiser son blog pour le référencement est inutile dans 80% des cas
• J’ai référencé mon site sur plus de 400 moteurs de recherche et annuaires de liens, j’ai bon ?
• Journalistes vs Blogueurs (Gladiators inside)

«Ressources pour webdesigner» aurait été plus concis, mais c’était sans compter la bonne ou la mauvaise idée de l’Insee qui souhaite supprimer les termes design et designers de la NAF 74.10 comme nous l’apprend l’Alliance Française des Designers. Tiens, AFD ça fait aussi All For Design… Hasard ? Je ne crois pas ^__^ Pendant que nous sommes dans les métiers du webdesign, profitons-en pour balader notre souris chez Pixenjoy ! Nous pourrons ensuite étancher notre soif de connaissance sur l’excellent portail des métiers de l’Internet. Pour approfondir les aspects liés à l’ergonomie et au design d’interfaces, la lecture du blog de Laurent Demontiers nous apprendra beaucoup.

L’air de rien, l’introduction fourmille déjà de très bons liens pour en savoir davantage sur les métiers de la conception web au sens large. Dans la suite de ce billet, je vous présenterai brièvement les nouveaux blogs ou sites web qui ont attiré mon attention ces derniers temps, ainsi que des ressources plus anciennes qui en ont encore sous la botte.

Les nouveaux blogs

Boite à Web

Le blog de Julio spécialisé dans le CMS WordPress et la création sur le web se consacre plus particulièrement aux failles de sécurité des plugins destinés à WordPress.

Lire Faille XSS chez Fur.ly : attention aux faux liens !

DevBlog

Blog dédié aux langages web. Scripts et ressources pour webmaster.

Lire Shortcode WordPress : création de shortcode personnalisés

seebzNet

Un blog sur le développement web avec PHP et Javascript avec des vrais morceaux de code à l’intérieur !

Lire Minifiez vos feuilles de styles et vos fichiers javascript

Visitez aussi code.seebz.net — Plus de 25 scripts autour de PHP et Javascript.

Weedle

Ce nouveau blog créé par Fred et David est consacré au graphisme et au design. D’après Modérateur vous y trouverez de nombreux tutoriels, des ressources gratuites, des sélections de thèmes WordPress ou encore des sources d’inspiration.

Lire 30 tutoriels pour apprendre à dessiner des personnages de mangas.

Techniques pour l’intégrateur web

1. Méthode universelle pour décorer les blocs (coins arrondis inside) — Agrémenter ses blocs HTML est souvent un casse-tête pour de nombreux intégrateurs. Entre la création de `div` surnuméraires qui nous éloigne d’une saine séparation de la forme et du fond et les fonctions Javascript non obstrusives déportant la couche présentationnelle dans des fichiers externes, il y a désormais une alternative.
2. CSS3 Border Images for Beautiful, Flexible Boxes — L’essentiel pour comprendre le mode de calcul de découpe des images pour obtenir de belles bordures flexibles avec CSS3 avec une seule image sans marquage HTML superflu. Voir la démonstration.
3. eCSStender — Toujours rêvé d’utiliser les sélecteurs CSS avancés dans vos designs web sans vous soucier d’IE6 ? Alors vous devriez vous intéresser au travail d’Aaron Gustafson. Une fois le DOM chargé, eCSStender rassemble les feuilles de styles impliquées dans l’affichage de la page dans une variable. Le parsing peut commencer et eCSStender recherche tous les motifs pour lesquels une extension est disponible (`@font-face` et `@page` pour le moment). Pour la suite des explication je vous invite à lire la documentation ;)
4. Nota-Bene – Bienvenue sur le site de Stéphane et Stéphanie (ne riez pas). Stéphane est expert accessibilité web et Stéphanie est professeur des écoles. Lire Je n’aime pas le reset CSS et plus généralement les articles de la rubrique Sur le web.

Astuces WordPress

• Configuration avançée de WordPress — Si l’installation de WordPress s’effectue en 5 mn. chrono, il est possible d’y passer bien plus de temps. Ajouter des options au fichier `wp-config.php` occupera les longues soirées d’automne : optimisation des performances, sécurité, débugging et développement sont au programme. Lire également Pimp your wp-config.php et Editing wp-config.php.
• WordPress Hooks Database — Cette base de données contient l’ensemble des hooks disponibles dans WordPress : `apply_filters()`, `do_action()` et `do_action_ref_array`. Pratique pour connaitre les hooks dépréciés, ceux qui ont changé de nom. Une brève description est disponible et il est même possible de voir le hook dans son contexte. Voir l’API des plugins pour plus d’information sur les hooks, les actions et les filtres.
• From Photoshop to WordPress -– Part I – Design et Part II – Coding. Tutoriels très instructifs pour connaitre dans le détail l’ensemble des étapes nécessaires à la création d’un thème pour WordPress from scratch.
• 10 Useful WordPress Search Code Snippets — Dans WordPress les fonctions de recherche sont un peu le parent pauvre. Pour y remédier, voici 10 bouts de codes qui permettront de relever l’ordinaire : exclure des billets ou des pages des résultats de recherche, restreindre la recherche à une catégorie, ou dans les sous-catégories, afficher le nombre de résultats renvoyés, surligner les mots-clé sur la page (jQuery), etc.
• 21 plugins et extensions WordPress à éviter — Un des élément-clé de la popularité de WordPress réside sans doute dans le nombre de plugins disponibles, à condition de ne pas installer tout et n’importe quoi ;)
• 21 hacks pour 21 plugins WordPress inutiles — Cet article fait suite au précédent et propose d’ajouter quelques lignes de code dans le fichier functions.php ou dans vos templates pour vous passer de certains plugins.
• Ajouter une limite à wp_list_pages dans WordPress — Très pratique pour limiter le nombre de page renvoyé par la fonction `wp_list_pages()`.
• Shortcode WordPress : afficher les documents liés aux billets — La gestion des documents joints n’est pas le point fort de WordPress. Heureusement, Mehdi Kabab s’est penché sur la question et nous offre la possibilité d’afficher de manière élégante les pièces jointes liées à des articles ou des pages.
• Le guide complet pour configurer votre blog WordPress — Envie de connaitre toutes les ficelles pour maitriser WordPress ? Ce guide fait le point sur l’ensemble des options présentes dans le menu Réglages : Général, Ecriture, Lecture, Discussion, Médias, Vie Privée et Permaliens.
• Introduction à WordPress 3 : custom post type et custom taxonomy — Les  types personnalisés de contenus permettent de sortir des sentiers battus que sont les billets et les pages en permettant de créer par exemple un type de contenu Petite annonce ou Portfolio avec des champs spécifiques. Les taxonomies personnalisées permettent quant à elles d’aller plus loin que les catégories ou les tags proposés par défaut par WordPress.

Mesure d’audience

• Piwik — La mesure d’audience en temps réel. Vous vous souvenez peut-être de l’outils de statistiques phpMyVisites dont j’avais parlé dans Mesure d’audience : des mots-clefs au ClickRank.phpMyVisites a donc changer de nom et de look and feel : maintenant, c’est Piwik ! Du coup, je laisse une chance au produit : le temps réel dans les statistiques d’accès au blog est quand même bien pratique.
• GetClicky — Encore un outil de mesure d’audience rapide et précis. Les résultats s’éloignent peu de ceux de Google Analytics si ce n’est que GetClicky semble calculer le taux de rebond d’une manière totalement différente. Là où Google Analytics exagère avec des taux de rebonds allant jusqu’à 70%, GetClicky est plus flatteur avec un 30% certainement plus proche de la réalité.Cet écart est sûrement du au fait que GA confond les visites de moins de 20 secondes d’une page (un « vrai » rebond, selon moi) avec les visites d’une page dont la durée permet de lire un article. La version gratuite est largement suffisante mais la version payante propose d’afficher les visites en temps-réel, ce qui est assez plaisant et dont vous pourrez profiter gratuitement pendant un mois.

Miscellanées

• Mr. Data Converter — Il suffit de coller des données séparées par des virgules ou des tabulations dans un champs pour que Mr Data Converter s’occupe de leur conversion dans différents formats : ActionScript, ASP/VBScript, JSON, PHP, Ruby ou XML. (via Roget.biz).
• imagethumb() – Générer facilement des miniatures en PHP.
• Wordle — Créez rapidement des nuages de mots-clés en collant vos propres textes ou en fournissant une URL. Nombreuses options de personnalisation pour un résultat toujours intéressant.

Articles sur le même sujet

• HTML5 Boilerplate Thematic — Un «WordPress Theme Framework» complet
• Le petit journal du web — Les fruits de la veille ont gardé toute leur fraicheur
• 390 ressources Javascript & jQuery
• Le Petit Journal du Web — 09/2011
• Mise à jour du thème WordPress ♥ Basics avec HTML5 Boilerplate 2

Désolé pour le titre accrocheur, mais que voulez-vous, c’est la tendance ! Et les tendances dans le webdesign, c’est sacré. Du moins c’est ce que l’on a tendance à croire parce que c’est pratique.

Votre site, vous le voulez comment ?

   Oh, quelque chose de minimaliste, orienté typographie : c’est pour consommer sur place.

Ah… Si j’ai bien compris, vous êtes dans la mouvance du web 2.0

   Oui, oui, on ne produit rien, c’est l’utilisateur qui s’y colle… Nous voulons juste un design web 2.0 libre de droits (pas cher, donc)

Votre cible, c’est un peu l’utilisateur de l’iPhone, quand même ?

   Tout à fait ! On veut un truc genre Apple, sobre et moderne, vous voyez ?

Genre le nouveau logo iTunes ?

   Heu, non, pas jusque-là quand même…

Après ce préambule plus défoulatoire qu’autre chose, venons-en au coeur du sujet. Est-ce que le design d’un site a autant d’importance qu’on le pense généralement, surtout quand on regarde des sites web qui font beaucoup d’audience et d’argent comme Craiglist, Amazon, Ebay ou Google ?

Dans The Ugly Truth ou Le Design Ne Sert À Rien ! les auteurs mettent en avant les qualités de l’interface utilisateur au sens large pour expliquer la réussite de certains site relativement moches. C’est séduisant. Surtout lorsqu’on est plus attaché au fond qu’à la forme. Mais, l’ergonomie n’explique pas tout. Il existe une chose plus forte qu’un design affreux, plus solide qu’une ergonomie à la ramasse… C’est la MO-TI-VA-TION qu’a l’utilisateur de venir sur les sites en question.

Tous les sites montrés du doigt en exemple ont ceci en commun qu’ils proposent quelque chose dont l’internaute a besoin. Quelque chose qui fait qu’il est prêt à souffrir pour arriver essoufflé, la main tremblante sur la souris, jusqu’au formulaire de commande, heureux, enfin, de pouvoir sortir sa carte bancaire.

Articles sur le même sujet

• Le prêt-à-bloguer bride-t-il la créativité ?
• Le web 2.0 peut être dangereux… pour vos profits
• Usability Post, un blog sur le design et l'ergonomie
• Manifeste pour un interlignage minimum syndical pour les blogs !
• L'expérience utilisateur et l'ergonomie des sites web

Il y a certainement de la vie en dessous des 600px (fold). Mais quelle vie ? D’après l’étude Scrolling and attention réalisée par Jacob Nielsen, les utilisateurs passent 80% de leur temps à chercher des informations au-dessus du fold. Si le scroll est une pratique qui s’est répandue depuis quelques années, il ne concernerait donc que 20% du temps passé sur une page.

Distribution de l’intérêt («fixation») des utilisateurs sur les éléments du site par tranches de 100px.

La zone des 300px à partir du haut de la page est la plus regardée. Source www.useit.com

Quelles implications sur le design ?

Les éléments les plus importants devraient se situer au-dessus du fold sans pour autant sacrifier le bas de la page qui doit rester attrayant.

Pour matérialiser le fold, je trace une ligne à 550px du haut de ma maquette pour être sûr d’avoir l’essentiel. J’ai pris l’habitude de visualiser certains sites avec un Netbook  et leur résolution (1024 x 600) est sans pitié !

Articles sur le même sujet

• #WDFR — Imprimez votre grille pour dessiner vos croquis
• 5 règles simples pour améliorer l’affichage de vos textes
• Le petit journal du web — Les fruits de la veille ont gardé toute leur fraicheur
• display: table et display: table-cell pour faire une mise en page web ?
• Grille modulaire pour périphériques mobiles (iPhone, Android, iPad)

Usability Post est un excellent blog sur le design et l’ergonomie que je viens de découvrir grâce au non moins excellent article sur les 10 techniques pour améliorer de design de l’interface utilisateur paru sur Smashing Magazine sur les trucs et astuces qui permettent d’améliorer l’ergonomie et l’utilisabilité en se focalisant sur quelques détails qui ont leur importance.

Articles sur le même sujet

• Le prêt-à-bloguer bride-t-il la créativité ?
• Le Design serait inutile dans 80% des cas
• Manifeste pour un interlignage minimum syndical pour les blogs !
• Le petit journal du web — Les fruits de la veille ont gardé toute leur fraicheur
• Quelques notes sur les éléments graphiques du webdesign

Dans le monde de la création d’objet destiné au monde réel, le designer a l’habitude d’intégrer l’ergonomie dès le début de sa démarche créative. Il n’y parvient pas à tout les coups, mais toujours est-il que le but ultime de tout jeune designer est de créer un objet adapté à l’usage et à l’usager.

Cette quête de l’ergonomie (et de l’économie de moyen) est aussi présente dès les premières années d’étude d’architecture :  les espaces de vie doivent répondre à des normes strictes et tenir compte de contraintes indépassables comme les mensurations du corps humains ou les lois de la gravité.

Dans les Arts graphiques en revanche, c’est autre chose. Nombreux sont les graphistes qui balaient d’un revers de la main toutes considérations pratiques au motif qu’elles entravent un soi-disant « génie créatif ». Pour attirer l’attention, il faudrait faire preuve d’audace, chambouler les codes graphiques : détournement, collage… L’esprit contestataire de Mai 68 est encore bien présent dans les arts graphiques alors qu’il ne reste souvent qu’esthétique dans la musique.

Le graphiste est un rebel. C’est pour celà qu’il se méfie de Jakob Nielsen (à supposer qu’il en ait entendu parler) dont le discours vise à uniformiser les services en ligne autour de bonnes pratiques validées par moults tests in vivo et in vitro sur les utilisateurs… pour les utilisateurs.

Articles sur le même sujet

• Quelques notes sur les éléments graphiques du webdesign
• Un site Web n’a pas forcément besoin de graphismes
• Quelques notes sur le design graphique des sites web et autres futilités
• Quelques notes — Un seul design pour les rassembler tous ?
• Le principe de proximité dans le webdesign

L’excellent guide sur les différentes systèmes de navigation Donne-moi ce que je veux ! » est désormais accessible gratuitement en ligne. Découvrez 60 modèles de navigation commentés des bonnes pratiques d’ergonomie, de référencement et d’accessibilité.

Via le blog Alsacréations.

Articles sur le même sujet

• WordPress — Menus «funky» avec wp_list_bookmarks()
• 30 menus de navigation en CSS pour votre site web
• Menu à onglets (tabs) — idTabs ou domTab ?
• Nanotabs — un idTabs minimaliste sans jQuery
• Optimiser et styler les catégories WordPress avec les CSS

Un spectre hante le web : le spectre de l’interlignage par défaut des navigateurs. Trop de blogs et de sites web se contentent du minimum syndical pour gérer l’interlignage. Par défaut, les navigateurs web proposent 120% de la taille de la police. Ce qui est dramatiquement insuffisant au regard de la faible résolution du texte à l’écran, alors qu’il suffit d’ajouter une ligne de déclaration CSS à la balise html ou body pour permettre à vos lecteurs de passer du déchiffrage laborieux à la lecture pleine et entière. Essayez, vous serez surpris de voir à quel point vos pages web auront gagné en lisibilité.

Modifier l’interlignage par défaut

Les valeurs à ajouter à la balise body ou html dépendent de la configuration de votre feuille de style. Voici trois exemple à tester pour obtenir un interlignage de 1,5 fois la taille de caractère :

body {
    line-height: 1.5;
}

body {
    line-height: 1.5em;
}

body {
    line-height: 150%;
}

Une image vaut mille mots ?

Si vous avez des difficultés à vous représenter l’intérêt d’augmenter cet interlignage, voici deux captures d’écran significatives dans la mesure où elles ont été réalisées sur le site http://www.accessiweb.org/ dont le motto est La nature du web est son universalité. Il doit être accessible à toutes les personnes handicapées.

Il me semble que l’interlignage fait beaucoup pour la lisibilité d’une page web, et la lisibilité, pour une personne valide ou en situation de handicap, c’est le début de l’accessibilité. Et ça ne coûte vraiment pas cher de bien interligner !

Avec l’interligne par défaut (ajouté à la longueur des lignes), le site Accessiweb manque de lisibilité

Le site AccessiWeb avec les réglages par défaut.

Une fois la déclaration line-height: 1.6; ajouté au body, mes yeux me disent «merci»…

Le site AccessiWeb avec un interlignage augmenté d’un facteur 1,6

5 règles pour faire un beau design web

l’accessibilité du web passe aussi par un traitement typographique global au niveau de la page et l’interlignage n’est malheureusement pas le seul paramètre oublié. Pour se rafraichir la mémoire, révisons 5 règles pour faire de belles mise en pages.

Envoyons paitre les mauvais interligneurs ;-)

Articles sur le même sujet

• Calculer une grille de mise en page « typo » avec le nombre d’Or
• Webdesign, lisibilité, typographie et rédaction web
• Grille modulaire pour périphériques mobiles (iPhone, Android, iPad)
• Le prêt-à-bloguer bride-t-il la créativité ?
• Le Design serait inutile dans 80% des cas

Voici une traduction de l’article 10 Principles Of Effective Web Design paru sur Smashing Magazine où il apparait que prendre en compte les besoins des utilisateurs en amont du processus de conception d’un site web, peut être un fil conducteur plus efficace que de suivre le délire de l’artiste…

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.  Etant donné que celui ou celle qui clique décide de tout, les designs orientés vers l’utilisateur (user-centric) sont désomais 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é dans de nombreux articles. A la place, nous nous pencheront sur les principes fondamentaux et heuristiques pour réaliser des designs web efficaces. Approches, qui utilisées à bon escient, 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 intéragissent 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’oeil à 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, Celà veut dire 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 semble les mener au but. 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. Ca 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és 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 comprenent 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’oeil 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’oeil, 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. Evitez 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 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 appeller « 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.
• Economisez : 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 taille — 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 faisont dans notre vie de tous les jours lorsque nous utilisons des principes de base pour organiser nos données informatiques (fichiers) ou lorsque nous faisont 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. Celà 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. Celà 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 oeil 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…