Réussir le design de son projet web
L'ergonomie et le design : les fautes à éviter, les nouvelles tendances
Damien Melich
Directeur de la Création Online

Réussir le design de son projet web
L'ergonomie et le design : les fautes à éviter, les nouvelles tendances
Cernez les enjeux de communication
Intégrez les spécificités du design interactif
Adoptez une méthodologie cohérente
6 conseils pour réussir votre projet design
Anticipez l’évolution du design interactif

Réussir le design de son projet web
L'ergonomie et le design : les fautes à éviter, les nouvelles tendances
Cernez les enjeux de communication

Pour commencer...
Le design est le premier contact avec la marque,
l’entreprise, ses valeurs, ses produits/services
Dans la relation qui lie un consommateur avec une marque/une
entreprise/une collectivité, internet = souvent le premier
moment : recherche d’adresse d’une boutique, visualisation
des produits,annonces RH, de renseignements...
Cette expérience initiale s’accompagne d’un premier jugement très émotionnel qui se
reporte sur la marque : qualité esthétique, ergonomie de l’interface, pertinence du
contenu, ces critères associés à la marque instaurent les premiers jalons positifs ou
négatifs de la relation
Il faut donner du sens au design en positionnant l’utilisateur
au coeur de votre stratégie de communication
Comment ?

en traduisant l’expression des valeurs intrinsèques de la marque,
dessinant son territoire et matérialisant ses axes de différenciation.

vous aide à penser votre stratégie de marque, en intégrant les codes
existant et en utilisant les vertus propres du média.

en installant l’univers de votre marque, en mettant en scène un dispositif
qui fera vivre à l’utilisateur une expérience relationnelle dédiée.

donc....
Offrez à votre client une relation interactive à la
marque
Le site web est une composante spécifique de la stratégie de
communication (de plus en plus centrale)
Le design est une couche sensible immédiate dans la relation
marque/client et favorise la transformation du prospect en client
Le design installe l’univers de référence du projet, il s’adresse à des
utilisateurs mais potentielement à des clients
Il est le vecteur de sens directement préhensible, il porte les valeurs, les
codes, le positionnement de l’entité commanditaire du site : la forme parle
sur le fond, elle constitue une preuve a priori du discours marketing
Le design web n’est pas une déclinaison des supports traditionnels
mais construit une relation différente avec les cibles

Réussir le design de son projet web
L'ergonomie et le design : les fautes à éviter, les nouvelles tendances
Intégrez les spécificités du design
interactif et intégrer l’internaute
dans la stratégie de marque

Intégrez les spécificités du design interactif
faites correspondre le design de votre projet
web avec votre stratégie d’entreprise
Redonner de la visibilité à cet
établissement haut de gamme et affirmer sa
présence en ligne.
Stratégie de diversification de l’offre
www.royalmonceau.fr
www.royalparcevian.com
Construire une identité graphique qui sert vos objectifs, porte vos valeurs,
amplifie vos avantages… en créant des relations systématiques entre les
objectifs clefs (l’identité, l’attractivité, la cohérence, la stratégie, la qualité, la
relation...) et leurs représentations graphiques

intégrez les spécificités du design interactif
la spécificité de l’expérience web par rapport
aux autres supports
http://www.mtl12.com/
www.centerparcs.fr
Une interface graphique vidéo
Une approche vidéo sous forme de programme
> engendrer une expérience immersive autour de la
court
découverte de la ville de Montréal.
> Proposer à l’internaute des vidéos intéractives
Osez adapter le mode de navigation au positionnement de votre site.
L’interface vidéo permet désormais de lier le fond et la forme

intégrez les spécificités du design interactif
pensez les contenus de manière multi-modale
pour orchestrer mouvement, video, son, interactivité qui crée des
expériences uniques
http://www.rhonealpes.tv/voyage/ http://www.rhonealpes-tourisme.fr/
Une télévison sur le net Un déploiement transversal
> De la vidéo à la demande au service d’une région
Intégrez la dimension multi-modale dès la réflexion éditoriale,
Utilisez le potentiel rich-media pour la mise en valeur de vos contenus

intégrez les spécificités du design interactif
Appuyez-vous sur le persuasive design
facilitez les décisions des utilisateurs en leur délivrant des messages calibrés
dans une mise en page
créez un appel fort à l’action dans l’interface pour convertir les visiteurs en
clients
les trois écrans illustrent le processus pour aboutir à un design de plus en plus efficace
Faites converger l’ergonomie et le design pour générer l’action

Intégrez les spécificités du design interactif
Harmonisez votre présence sur le web
Un structure graphique déclinable sur l’ensemble des établissements du Groupe Villadelles.

Intégrez les spécificités du design interactif
Harmonisez votre présence sur le web
Exemple d’harmonisation libre fondée sur des codes couleurs fondamentaux et un principe
graphique transversal (courbe)

Intégrez les spécificités du design interactif
harmonisez votre présence sur le web
harmonisation intranet : structure plus stricte,
zones de personnalisation dans le design

Façonnez votre design
en fonction des
différentes typologies
de site

intégrez les spécificités du design interactif
façonnez votre design en fonction des différentes typologies de site
site institutionnel : identitaire, statutaire, fonctionnel
www.groupama.com www.fondation- www.seb.com
groupama.com
design
ergonomie
editorial
HTML
important très important

intégrez les spécificités du design interactif
façonnez votre design en fonction des différentes typologies de site
site thématique/événementiel : informatif, persuasif, impliquant,
émotionnel
www.renaulttrucks.com www.paris.fr www.nrjmobile
(route de la soie) (nuits blanches) ( HitMusicInside)
design
ergonomie
editorial
HTML
important très important

intégrez les spécificités du design interactif
façonnez votre design en fonction des différentes typologies de site
site e-commerce/transactionnel : rassurant, incitatif, relationnel
www.elige.con www.relaischateaux.com http://www.vivacorsica.com/
design
ergonomie
editorial
HTML
important très important

intégrez les spécificités du design interactif
façonnez votre design en fonction des différentes typologies de site
site de marque/promotionnel : esthétique, incitatif, informatif
www.valeo-motor-sports.com BMW 330 XD www.noctilien.fr
design
ergonomie
editorial
HTML
important très important

intégrez les spécificités du design interactif
façonnez votre design en fonction des différentes
typologies de site
site de contenu : descriptif, pratique
www.seine-et-marne.fr www.centrepompidou.fr www.paris.fr
design
ergonomie
editorial
HTML
important très important

intégrez les spécificités du design interactif
façonnez votre design en fonction des différentes typologies de site
portail : exhaustif, pratique, identitaire, redirection
www.caisse-epargne.fr www.ag2r.com
www.education.gouv.fr
design
ergonomie
editorial
HTML
important très important

intégrez les spécificités du design interactif
façonnez votre design en fonction des différentes typologies de site
site intranet/extranet : informatif, communicant
intranet ubisoft USA Live intranet American Hospital Intranet ag2R
design
ergonomie
editorial
HTML
important très important

intégrez les spécificités du design interactif
façonnez votre design en fonction des différentes typologies de site
application métier : fonctionnel, efficace, intuitif
Banque Populaire Club Med La Poste
design
ergonomie
editorial
HTML
important très important

et le e-tourisme ?…
À la croisée des chemins le “e-tourisme” doit répondre à plusieurs objectifs
Il doit être séduisant, communicant, esthétique, incitatif, informatif...
http://www.tourisme- www.tourisme-midi- http://www.tourisme-
nordpasdecalais.fr pyrenees.com/ lorraine.fr/
design
ergonomie
editorial
HTML
important très important

Pour parvenir à un projet réussi, il faut…
une équipe pluridisciplinaire
une méthodologie cohérente
des étapes clés
...

Une équipe pluridisciplinaire…
le design web est une éponge qui absorbe les cultures, les
modes, les technologies, les langages
Tous les métiers cohabitent...
de l’architecture : pour structurer les contenues
de l’ergonomie : pour une meilleur utilisabilité
de la signalétique : pictos, icônes
du cinéma : cinématique, story-board, animation
de l’affichisme : composition visuel + typo
des magazines : mise en page édito.
inversement, le design web est une source forte d’inspiration
et il n’est pas rare de voir des habillage TV (M6, Arte, MTV...) reprendre les codes du web.
Le design web, source et capteur de tendances

Avant la créa…
Hiérarchisez l’information de votre site
avec le story-board
- définir les grandes zones d’interactions
sur les gabarits à produire
- hiérarchiser, organiser les contenus,
donner des repères aux designers dans la
construction des gabarits
L’organisation spatiale de l’information dans un zoning
n’est qu’indicative : les recommandations créatives prennent le
pas
oubliez la démarche séquentielle de conception,
privilégiez une synergie design, ergonomie,
marketing, éditorial

Des étapes clés…
La recherche
créative
Pour traduire le message et les
valeurs d’une marque sur des
interface, nous travaillons par
itérations du brainstorming à la
déclinaison.

1.2.3.4.5.6
Une identité graphique
validée par tous…
L’objectif de ces échanges étant
de construire un cercle vertueux
d’itérations pour atteindre une
satisfaction mutuelle et au final
servir les objectifs du projet.

Réussir le design de son projet web
L'ergonomie et le design : les fautes à éviter, les nouvelles tendances
anticipez l’évolution du design
interactif

anticipez l’évolution du design interactif
full image : l’expérience utilisateur
une approche novatrice et immersive
- un design immersif et intégré
- des images plein écran
- des vidéo plein écran (type audiovisuel)
- une projection dans l’univers de la marque
- des résolutions de plus en plus grande (supérieure à 1024 x 768)
- une visibilité accrue pour les marques
- une approche multi canal et multi support
une expérience utilisateur qui initie une relation forte avec la
marque

full image : l’expérience utilisateur

full image : l’expérience utilisateur

full image : l’expérience utilisateur

full image : l’expérience utilisateur

full image : l’expérience utilisateur

full image : l’expérience utilisateur

full video : l’expérience utilisateur

full video : l’expérience utilisateur

full video : l’expérience utilisateur

anticipez l’évolution du design interactif
Web 2.0 : l’utilisateur reprend la main
une approche esthétique centrée sur le fonctionnel et l’utilitaire :
- un design d’action
- des blocs modulables
- des jeux de premiers et arrières plans
- bouton incitatif (intuitif)
- traitement moiré
- des pages claires et lisibles
- des contenus hiérarchisés
- design interactif reposant sur l’accessibilité
une démarche participative et collaborative
le consommateur devient producteur

anticipez l’évolution du design interactif
Web 2.0 : l’utilisateur reprend la main
l’identité visuelle des marques (logo, typo, couleurs et formes) conserve sa
place de différenciant et fédérateur autour du produit, mais s’adapte à des
nouveaux codes graphiques et ergonomiques basés sur la simplicité et
l’efficacité
le style graphique Web 2.0 (effets moirés, pictos, navigation simplifiée,
couleurs et visuels forts) devient synonyme de communauté, de partage,
de clarté
l’internaute devient un véritable acteur grâce à des fonctionnalités que
permettent les technologies Ajax et flash
si le Web 2.0 s’impose de plus en plus depuis ces deux dernières années,
c’est qu’il propose une rationalisation du web design au profit de
l’internaute, qui trouve plus vite et dans un univers agréable les
informations qu’il recherche.

Web 2.0 : l’utilisateur reprend la main

Web 2.0 : l’utilisateur reprend la main
médiathèque valeo : les utilisateurs internes construisent eux-mêmes le fond
iconographique, le participatif au service de l’entreprise

Web 2.0 : l’utilisateur reprend la main

Web 2.0 : l’utilisateur reprend la main

Web 2.0 : l’utilisateur reprend la main

Web 2.0 : l’utilisateur reprend la main
Le Tourisme se prête parfaitement à
la vogue du marketing collaboratif
boosté par le web 2.0
- les consommateurs ont besoin d’aide et de conseils
avant de se décider
- l’avis de personnes ayant déjà testé l’offre est
particulièrement légitime
- il est positionné sur des thématiques sur lesquels les
internautes s’expriment volontiers et ont envie de
partager avec d’autres leur point de vue et leurs
expériences.
Les outils Web 2.0 à mettre en place
- Les blogs
- Les espaces communautaires
- Les RSS
- La cartographie

Merci de votre attention.