L’évolution du look & feel du web depuis le 0.0 au 2.0

17 avril 2007 – B.Rigaut – Printemps.com

Plan

• Historique de quelques sites

• Le Web 2.0 quesaco ? (en une slide !)

• Le persuasive design par la pratique

• Exercices !

Yahoo, Le Monde, Printempsnous avons tous connus les mêmes

questions et trouvés les mêmes réponses

• Non structuré

• Structuré

• Gestion des mises en avant

• Abondance d’informations

• Maturité graphique

2006

1996

Yahoo

Le Monde

Printemps.com

Plan

• Historique de quelques sites

• Le Web 2.0 quesaco (en une slide !)

• Le persuasive design par la pratique

• Exercices !

Juste une appellation fourre-tout

• « 2.0 » pour marquer la fin d’une mauvaise époque pour le web (post dotcom crash)

• Une effervescence pour trouver de nouveaux territoires grâce à des remises en cause– Technique– Sur la place du client– Ergonomique (marketing, marketing)

« Persuasive design »

Plan

• Historique de quelques sites

• Le Web 2.0 quesaco ? (en une slide !)

• Le persuasive design par la pratique

• Exercices !

Les points clefs

• Hiérarchiser la navigation

• Augmenter le contraste

• Aider la lecture en diagonale

• Parler visuellement

• Call to action NOW!

• Être différent

• … quelques comparaisons avant de passer aux exercices

Navigation

Contraste

Lecture en diagonale

La tagline ou « elevator pitch »

• Freshbooks - The fastest way to invoice your clients

• Dropsend - Want to email large files? We've got the answer.

• Vyew - Always-On Collaboration and Free Web Conferencing

• Blinksale - The easiest way to send invoices online

• Remember the Milk - The best way to manage your tasks.

• Backpack - Collect, organize and get things done

• Scrapblog - Create a world for your pictures

• Crazy Egg - track, evaluate and improve your site

Parler visuellement

VOIR LE SITE EN LIVE

« Call to action »

Être différent… parmi la masse

Quelques comparaisons

• Epsilon versus Campaign Monitor

• Naymz versus Ziki

• Estat versus Omniture

VOIR LE SITE EN LIVE

Plan

• Historique de quelques sites

• Le Web 2.0 quesaco? (en une slide !)

• Exercices !

• Le persuasive design par la pratique

Premiers exercices : la typographie

Quelques sites avant/après redesign

Ce qui cloche

• Trou blanc au centreQuel est le centre de la page ?

• La navigation en haut ressemble à une barre d’outils

• C’est trop petit pour la cible !– Textes– Liens

• Aucun style, aucune mémorisation

Les onglets

Les polaroids

Un vrai look

Des appels à naviguer

Un vrai titre

Ce qui cloche

• La couleur !– Trop peu de contraste– L’œil est attiré par les mauvaises infos

• Personne ne lit un tel baratin– « thank you for visiting »– Parler du bénéfice en premier

• Ou doit-on cliquer ?

Un look un peu plus léger

Ca se lit facilement de haut en bas

On ne perturbe pas la lecture grâce à des couleurs légères

On met en avant l’important

Ce qui cloche

• Drôles de couleurs bleu & moutarde

• Un texte pas clair & trop long

• Des couleurs tristes

Un logo avec des couleurs mieux

Une mise en avant de l’intérêt

On parle du produit à part de la société

Le texte important en gras

Incarner le soft par une boite

Ce qui cloche

• C’est laid !

• Des éléments décoratifs & très contrastés polluent

• Impossible de se concentrer sur le contenu

Logo plus simple

Un titre clair

Une nav simple

3 colonnes bien espacées

Couleurs à juste escient

Ce qui cloche

• Navigation trop haute

• Tout se ressemble

• Super large

Mettre moins en avant les fonctions de login

Mise en page à deux colonnes classique

Des titres clairs

Les contenus différents sur le côté

Ce qui cloche

• J’ai pas envie de lire !

• Les couleurs sont trop peu contrastées

Simplifier la nav

Un peu d’image pour la charge émotionnelle

Donner envie d’essayer et montrer la simplicité

Un texte épuré

Ce qui cloche

• Tout !

Un site crédible

Des fonctions utiles

Une mise en forme des photos

Des textes clairs