Les prérequis

Les conditions matérielles pour le cabinet sont un véritable défi : 2 jours de tests pour un budget légèrement inférieur à 10 000$.

La question à laquelle va tenter de répondre Jared Spool sera la suivante : comment arbitrer entre 5 alternatives de design proposées en favorisant celle qui maximisera l’utilisabilité du site ?

Une méthodologie

Une vraie méthodologie va être proposée, qui inclura notamment l’évaluation de chaque proposition selon des critères objectifs (on imagien que ces critères ne sont pas des standards absolus, mais ont été définis de concert avec le client afin de répondre à sa problématique qui lui était propre) :

1. Labels clairs (call-to-action)
2. Possibilités de tri des produits interactive
3. Rappel des actions passées
4. Accessibilité de la fonctionnalité de recherche
5. Liens plus évocateurs
6. Navigation flottante
7. Connexion visible à l’écran
8. Visibilité des produits les mieux notés

Le podcast

Ces billets peuvent aussi vous intéresser :

• Le jeu des 7 différences ou l'importance du design dans votre positionnement
• Accessibilité, ergonomie : Google donne ses précos
• Design, ergonomie : ces menus qui nous changent la vie, suite et fin
• Design, ergonomie : ces menus qui nous changent la vie
• Personas : un outil pour développer les ventes

La preuve par l’exemple : le jeu des 7 différences

Prenons un exemple concret qui m’est venu dans la conversation la semaine dernière lors d’une réunion de travail : le secteur des compagnies aériennes. Ce secteur fortement concurrentiel et s’est largement développé dans l’e-commerce depuis maintenant plusieurs années. En consultant les sites web de différentes compagnies, on peut très facilement dégager deux grandes tendances.
Quelle différence faites-vous entre la première série de web-design de pages d’accueil et la suivante ? Quel positionnement commercial vous inspire-t-elle ?

• Série #1 : (cliquez pur agrandir les vignettes)
  

• Série #2 : (cliquez pur agrandir les vignettes)

(more…)

Ces billets peuvent aussi vous intéresser :

• Design coding : le SEO Rapper a encore frappé
• E-commerce : l'importance du design dans la conversion
• Design / étude de cas : différentes alternatives de conception
• E-commerce : 8 points clés pour assurer la confiance de vos clients
• Design, ergonomie : ces menus qui nous changent la vie, suite et fin

Toutes disponibles au format PNG. Un jeu intéressant, qui, s’il ne vous permettra peut être pas de répondre à 100% de vos besoins, pourra en tout cas vous donner des orientations de design.

• A télécharger ici

Via Smashing magazine

Ces billets peuvent aussi vous intéresser :

• Threadless : revue de checkout
• La présentation du produit, la quête de l'outil idéal. Zoomorama ?
• Découverte : MyDeco.com, le must du home made design
• Ebusiness : les soldes prennent l'assault des pages d'accueil
• Design : Les meilleurs pratiques du RSS

Le résultat est époustouflant, en voici quelques extraits.

• Mindmap :

• CollaborativeSociability : il s’agit des notes de l’auteur lors du discours de Jennifer Preece sur son engagement dans le projet de Bibliothèque numérique pour les enfants du monde.

• WhereTheFCCnSidewalkEnds : dessiné en écoutant ceci.

(more…)

Ces billets peuvent aussi vous intéresser :

• Les secrets de la pensée libérée : 27 façons d'utiliser le mindmapping (cartes mentales)
• Design : découvrez le métier de facilitateur graphique
• La présentation du produit, la quête de l'outil idéal. Zoomorama ?
• Outils : améliorez la présentation de vos galleries photos
• Design / étude de cas : différentes alternatives de conception

Brandy Agerbeck crée des cartes conceptuelles de conversations. Depuis 1996, ses capacités de réflexion et de dessin ont aidé des groupes en leur apportant de la clarté et la compréhension de leur travail. Brandy a travaillé avec des groupes de 2 à 1000 membres, dans différents secteurs, à la création d’images pour aider les gens à naviguer dans le monde complexe qui les entoure.

Je trouve ce travail tout simplement fabuleux. Voici quelques un de ses dessins œuvres. Admirez à la fois la complexité mais aussi la simplicité visuelle apportée par le dessin, toujours au service du message. N’hésitez pas à donner vos impressions et sentiments dans les commentaires, au vu de ces œuvres.

• Patricia Martin’s Rengen : The Rise of the Cultural Consumer - and What It Means to Your Business

Cliquez pour agrandir

• Strachen Donnelley at the Chicago Humanities Festival

Cliquez pour agrandir

• The Art Experience

Cliquez pour agrandir

• Six Thinking Hats

Cliquez pour agrandir

Découvrez bien d’autres dessins sur la page de l’artiste.

Ces billets peuvent aussi vous intéresser :

• Design : explorons les mindmaps
• Les secrets de la pensée libérée : 27 façons d'utiliser le mindmapping (cartes mentales)
• Design / étude de cas : différentes alternatives de conception
• Le jeu des 7 différences ou l'importance du design dans votre positionnement
• Ca change chez Innovablog, profitez-en !

Une fois arrivé sur le site, le formulaire d’inscription arrive très rapidement :

Ma première impression a été très positive, un design épuré, moderne, sur un fond d’aplat blanc avec un contraste rose et gris (des couleurs d’ailleurs utilisées sur Innovablog). Le formulaire en lui-même m’a séduit. Il respecte pas mal de bonnes pratiques indiquées sur un billet précédent.

J’ai particulièrement apprécié l’aide contextuelle fournie pour chaque champ du formulaire. Mais mon expérience allait se corser quelque peu par la suite. Un problème d’ergonomie visuelle, dont voici le détail :

• Etape 1 : le champ est au repos.

• Etape 2 : Je m’apprête à remplir le champ. Un clic dans ce dernier lui apportant le focus, l’aide contextuelle est proposée. Sa couleur par défaut (nuance de rouges) et son pictogramme (alerte rouge) semblent indiquer une erreur. Faux : c’est l’affichage par défaut, certainement pour être raccord avec la charte graphique du site.
  Il aurait fallu préférer une couleur moins expressive mais tout aussi visible, comme une nuance de jaune / orange.

• Etape 3 : je débute ma saisie et tout semble m’indiquer une erreur de saisie !

• Etape 4 : j’ai tout de même voulu m’assurer qu’un message d’erreur n’ai pas un style à proprement parler. Après m’être inscris, j’ai tenté à nouveau le pseudo “innovablog”, un message d’erreur s’est afficher fort à propos, embarquant lui aussi le même style !

Déroutant, non ? Mais les bêta privées sont là aussi pour ça, dans le modèle web 2.0, ce sont les utilisateurs qui débuggent les applications !

As part of our charter group previewing Shopflick during its “private beta” phase, please use the site and tell us exactly what you think — the positive and the negative — as we are constantly striving to improve on the Shopflick experience.

J’ai donc communiqué ce lien à l’équipe de Shopflick. Je vous tiendrais informés si un feedback s’établit. Et par ailleurs, j’ai adoré ce service que je vais très vite vous décrire dans un prochain billet.

Un rappel au passage sur les bonnes pratiques en matière de formulaires :

• D’abord par là : Bonnes pratiques de la conception de formulaires web (1/2)
• Puis par ici : Bonnes pratiques de la conception de formulaires web (2/2)

Ces billets peuvent aussi vous intéresser :

• E-commerce : faut-il être loggé pour acheter en ligne ?
• Bonnes pratiques de la conception de formulaires web (2/2)
• Bonnes pratiques de la conception de formulaires web (1/2)
• World of Warcraft pour la paix (sexuelle) des ménages
• La vidéo virale du moment : Apple Mac Music Video

Le SEO Rapper a encore frappé ! Je vous en parle fréquemment sur Innovablog, le design est un élément primordial dans tout projet web et permet d’agir sur différents leviers : ergonomie, référencement (SEO), transformation / conversion, accessibilité. Mieux que le Gangsta’ rap, le Web design rap est là pour nous le rappeler… à sa façon. Voici le vidéo clip :

Un extrait des lyrics :

The Poetic Prophet (AKA The SEO Rapper) is back with another marketing rap. This time he describes how web standards and proper design can affect the ranking and conversion of pages on your site.
lyrics:Your site design is the first thing people see
it should be reflective of you and the industry
easy to look at with a nice navigation
when you can’t find what you want it causes frustration
a clear Call to action to increase the temptation
use appealing graphics they create motivation

Laissez donc tomber tous ces consultants et pensez plutôt à consulter Poetic Prophet lors de vos prochains projets e-commerce !

Ces billets peuvent aussi vous intéresser :

• Le jeu des 7 différences ou l'importance du design dans votre positionnement
• E-commerce : à la recherche du panier abandonné.
• World of Warcraft pour la paix (sexuelle) des ménages
• Accessibilité, ergonomie : Google donne ses précos
• La vidéo virale du moment : Apple Mac Music Video

Page d’erreur 4 sans quoi ?

L’erreur 404 est le code erreur d’une requête web n’aboutissant pas, soit parce que la page n’existe plus, soit parce qu’elle aura été renommée ou tout simplement que le lien n’était pas bon. Une page d’erreur 404 peut être pour certains sites une page très fréquentée (jusqu’à quelques pourcents des pages vues totales). Voilà pourquoi elle se révèle être un élément stratégique à ne pas négliger dans toute démarche d’optimisation d’un site web :

• La page d’erreur 404 peut être très “visitée”.
• La page d’erreur 404 signifie à l’internaute une mauvaise nouvelle.
• La page d’erreur 404 peut donc entraîner la sortie du site et donc la hausse du taux de rebond.
• La page d’erreur 404 peut ainsi être un levier d’augmentation du taux de transformation.

Autant de raison qui jouent en la faveur de l’optimisation de cette page. Parcequ’il est en effet possible de customiser l’affichage par défaut de cette page, qui n’est, avouons-le, définitivement pas très sexy. Voici ci-dessous la page d’erreur 404 de la communauté MySpace.com :

Pas très “sexe” non ? Je vous propose une revue de quelques pages d’erreurs 404, classées dans différentes catégories assez représentatives de ce qui peut se faire aujourd’hui (cliquez sur les images pour les agrandir).

La redirection

Certains sites ne considèrent pas comme pertinent l’affichage en tant que tel d’une page d’erreur 404 et préfèrent rediriger l’internaute vers leur page d’accueil. C’est le cas des sites suivants :

• Microsoft
• Wikio
• Yahoo
• Box
• Deezer
• Pageflakes

Les grands moments de solitude

Pour d’autres sites, c’est en revanche une ligne de conduite beaucoup plus austère, alors même que le site en lui même peut proposer un design et une ligne assez fun, la page d’erreur n’a subit aucun travail, et s’affiche “brut de décoffrage“. Dommage… D’une façon générale, on peut remarquer que toute la galaxie Google est assez proche de cette tendance :

• Blogger

• Youtube : au secours !

  

• Google : on profite au passage d’un revival de l’ancien logo Google ? Est-ce bien corporate tout ça ?

  

• Feedburner : brut de pomme

  

Sobriété comme ligne de conduite

Autre comportement : la page d’erreur 404 est customisée, mais on n’affiche que le service minimum, à savoir un message d’erreur, un lien vers la page d’accueil et accessoirement un logo du service.

• Digg

  

• Facebook

  

• Flickr

  

• Script.aculo.us

  

• Typepad

  

• Viadeo

  

• Webwag

  

• XFruits

  

• Ziki

  

Informative

Les sites de cette catégorie tentent de proposer des alternatives à l’internaute en lui offrant une ou plusieurs portes de sortie à l’impasse de la page 404. D’une façon générale, la porte de sortie consiste en plus d’un lien vers la page d’accueil en un lien vers les rubriques du site ou un moteur de recherche par exemple.

• Last.fm

• Joost

• Photobucket

• Technorati

La gestion de l’erreur par l’humour

Certains sites rebondissent sur cette page pour traiter la chose avec humour, et c’est parfois très réussi :

• CrazyEgg

• Dailymotion

Couplé à cette vidéo présentée sur la page :

• Habbo Hotel

• Pownce : c’est pour moi de loin mon préféré, certes on ne parle pas ici de taux de transformation, mais il s’adapte parfaitement au contenu et à la cible du produit. Gloire à l’amiral Ackbar !

(more…)

Ces billets peuvent aussi vous intéresser :

• 52 astuces pour optimiser facilement votre blog pendant votre pause café (2/2)
• 52 astuces pour optimiser facilement votre blog pendant votre pause café (1/2)
• La page d'erreur 404 a maintenant son livre blanc !
• Comment faire de l'A/B test sur un site à faible trafic ?
• Le jeu des 7 différences ou l'importance du design dans votre positionnement

FancyZoom: une galerie JavaScript

FancyZoom est en effet une galerie JavaScript gratuite offrant un effet sympathique lors de l’ouverture du l’image et offre une belle alternative à Lightbox.js. Le déploiement est enfantin :

• Inclure dans chaque page web proposant le service les fichiers de script JavaScript.
• Pour activer le service, on l’active au chargement de la page, ce qui consiste à rajouter sur la balise body le marqueur suivant :
• Et c’est terminé ! Chaque appel dans une balise <a> à un fichier image (extensions jpg, gif, png, bmp, or tiff) déclenchera l’ouverture du fichier.

Le résultat : c’est un joli zoom sur le fichier, qui propose un lien de fermeture, mais également un sous-titre à l’image de façon automatique en en allant récupérer le contenu de l’attribut alt. Enfantin !

Highslide JS : une galerie JavaScript pour tous formats

Highslide JS est une autre galerie Javascript gratuite (dans le cadre d’une utilisation non-commerciale) qui reprend toutes les caractéristiques établies (voir ci-dessus). Son intérêt est qu’elle permet d’ouvrir différents supports, comme les animations Flash : contenu HTML, issu d’une requête AJAX, iFrame, Flash…

La mise en oeuvre est similaire :

• Inclure dans chaque page web des fichiers JavaScript,
• Inclure de la même manière la feuille de style dédiée,
• Le lien déclencheur doit se voir greffer les attributs suivants :

 class=“highslide” onclick=“return hs.expand(this)”

• L’outil viendra prélever le contenu du sous-titre dans l’attribut title de la balise img.

Highslide est fonctionnellement plus riche que les solutions standard et se révèle robuste à l’effort. A mettre en place !

Ces billets peuvent aussi vous intéresser :

• Accessibilité, ergonomie et utilisabilité : 30 points clés
• Design : explorons les mindmaps
• Ecouter ses utilisateurs. Rêve ou réalité ?
• Vous ne comprenez rien aux flux RSS ? Voici les réponses.
• Tuto : créer un gabarit full CSS, compatible, accessible et adaptable

Mise en page full CSS : pourquoi abandonner les tableaux ?

Historiquement la mise en page des pages web (à l’instar des auters documents bureautiques) utilisaient les tableaux (l’élément table) pour réaliser leur mise en page. Cette technique peut toujours sembler fonctionner très bien, d’un point de vue visuel, et dans certaines conditions bien précises. Or on peut faire plusieurs reproches à cette technique notammennt :

• Relatifs à la lourdeur du code produit : une mise en page élaborée à base de tableaux rend le code fouilli, volumineux, et donc moins aisé à maintenir.
• Un tableau est avant tout un outil de présentation de données et pas de mise en forme. D’un point de vue sémantique, une balise offre un description du contenu qu’elle contient. Or si les tableaux possèdent des descripteurs (d’en-tête, decontenu notamment), on est vite limité. L’accessibilité en sera donc nettement compromise, notamment pour les personnes utilisant des lecteurs d’écran.

Le CSS c’est bien, pour :

• Une mise en page dite full-CSS permettra donc d’être sémantiquement plus correcte.
• De tenter de respecter les standards du web et donc directement de renforcer l’accessibilité de vos pages.
• D’alléger le poids de vos pages.

Etape 1 : détails du gabarit

Passons maintenant à la pratique. Je vous propose un gabarit relativement standard, qui peut correspondre aux besoins d’un blog par exemple, avec :

• Côté dimensions, j’ai pris le choix de fixer sa largeur à 1000 pixels,
• avec un positionnement centré.

Il répond ainsi à des configurations d’écrans minimales de 1024×768 pixels (qui tend à devenir la norme). Notons qu’il serait intéressant (note pour plus tard) de vous présenter une version étirable (variable) de gabarit (fréquemment appelée “en pourcent”).

En ce qui concerne la présentation et la structuration de la page, voici mon postulat, qui là encore se veut assez générique, permettant à un maximum d’utilisateurs de s’y retrouver (vous retrouverez au passage le gabarit d’Innovablog) :

• Un contenu principal de la page (Content),
• Une en-tête (Header),
• Une barre latérale (Sidebar) située sur la droite de l’écran,
• Et enfin un pied de page (Footer).

Etape 2 : le squelette (ou gabarit, ou layout,…)

La première étape, la plus importante, va consister à créer le squelette de notre future page. Pour celà, seules quelques lignes de code suffiront à mettre en place une structure :

<div class="conteneur">
   <div class="header"></div>

    <div class="contentmain">
        <div class="sidebar"></div>

        <div class="content"></div>

    </div>

    <div class="footer"></div>

</div>

8 lignes de code permettent donc de bâtir une structure cohérente, prêt à afficher et présenter de l’information.

Pour être complet, affichons le code CSS correspondant, qui au passage, lui aussi tient en quelques lignes :

.conteneur {

position:relative;

width:1000px;

min-height:700px;

margin:0 auto;

}

.header {

height:175px;

background-color:#EC008C;

}

.contentmain {

background-color:#FFBA0E;font-size:16px;

min-height:400px;

}

.content {

margin-right:290px;

min-height:440px;padding:10px;

background-color:#FEFDEF;

}

.sidebar {

position:absolute;

right:0;width:260px;

padding:15px;

}

.footer {

min-height:50px;

background-color:#464646;

padding:20px;

}

Voire ici l’exemple N°1.

(more…)

Ces billets peuvent aussi vous intéresser :

• Design, CSS : les rollover CSS, un must !
• Accessibilité, ergonomie : Google donne ses précos
• Le Web Sémantique : Où sont les outils de création de contenu riche ?
• Outils : améliorez la présentation de vos galleries photos
• Un framework CSS pour vos tableaux !