Réussir le design de son projet webL'ergonomie et le design : les fautes à éviter, les nouvelles tendances
Damien MelichDirecteur de la Création Online
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 webL'ergonomie et le design : les fautes à éviter, les nouvelles tendances
Cernez les enjeux de communication
Réussir le design de son projet webL'ergonomie et le design : les fautes à éviter, les nouvelles tendances
Pour commencer...
Dans la relation qui lie un consommateur avec une marque/uneentreprise/une collectivité, internet = souvent le premier moment : recherche d’adresse d’une boutique, visualisationdes 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 ounégatifs de la relation
Il faut donner du sens au design en positionnant l’utilisateurau coeur de votre stratégie de communication
Le design est le premier contact avec la marque, l’entreprise, ses valeurs, ses produits/services
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....
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 parlesur le fond, elle constitue une preuve a priori du discours marketing
Le design web n’est pas une déclinaison des supports traditionnelsmais construit une relation différente avec les cibles
Offrez à votre client une relation interactive à la marque
Intégrez les spécificités du design interactif et intégrer l’internautedans la stratégie de marque
Réussir le design de son projet webL'ergonomie et le design : les fautes à éviter, les nouvelles tendances
Intégrez les spécificités du design interactif
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
faites correspondre le design de votre projetweb avec votre stratégie d’entreprise
Redonner de la visibilité à cetétablissement haut de gamme et affirmer saprésence en ligne.www.royalmonceau.fr
Stratégie de diversification de l’offrewww.royalparcevian.com
la spécificité de l’expérience web par rapport aux autres supports
intégrez les spécificités du design interactif
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
www.centerparcs.frUne approche vidéo sous forme de programmecourt> Proposer à l’internaute des vidéos intéractives
http://www.mtl12.com/Une interface graphique vidéo> engendrer une expérience immersive autour de la découverte de la ville de Montréal.
pensez les contenus de manière multi-modaleintégrez les spécificités du design interactif
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
pour orchestrer mouvement, video, son, interactivité qui crée des expériences uniques
http://www.rhonealpes.tv/voyage/Une télévison sur le net> De la vidéo à la demande au service d’une région
http://www.rhonealpes-tourisme.fr/Un déploiement transversal
Appuyez-vous sur le persuasive designintégrez les spécificités du design interactif
Faites converger l’ergonomie et le design pour générer l’action
facilitez les décisions des utilisateurs en leur délivrant des messages calibrésdans 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
Intégrez les spécificités du design interactifHarmonisez votre présence sur le web
Un structure graphique déclinable sur l’ensemble des établissements du Groupe Villadelles.
Exemple d’harmonisation libre fondée sur des codes couleurs fondamentaux et un principegraphique transversal (courbe)
Intégrez les spécificités du design interactifHarmonisez votre présence sur le web
harmonisez votre présence sur le webharmonisation intranet : structure plus stricte, zones de personnalisation dans le design
Intégrez les spécificités du design interactif
Façonnez votre design en fonction des différentes typologies de site
intégrez les spécificités du design interactif
www.groupama.com www.fondation-groupama.com
www.seb.com
designergonomie
editorialHTML
important très important
façonnez votre design en fonction des différentes typologies de site
site institutionnel : identitaire, statutaire, fonctionnel
intégrez les spécificités du design interactif
www.renaulttrucks.com(route de la soie)
www.paris.fr(nuits blanches)
www.nrjmobile( HitMusicInside)
designergonomie
editorialHTML
important très important
façonnez votre design en fonction des différentes typologies de site
site thématique/événementiel : informatif, persuasif, impliquant, émotionnel
façonnez votre design en fonction des différentes typologies de site
site e-commerce/transactionnel : rassurant, incitatif, relationnel
intégrez les spécificités du design interactif
www.elige.con www.relaischateaux.com http://www.vivacorsica.com/
designergonomie
editorialHTML
important très important
façonnez votre design en fonction des différentes typologies de site
site de marque/promotionnel : esthétique, incitatif, informatif
intégrez les spécificités du design interactif
www.valeo-motor-sports.com BMW 330 XD www.noctilien.fr
designergonomie
editorialHTML
important très important
façonnez votre design en fonction des différentestypologies de site
site de contenu : descriptif, pratique
intégrez les spécificités du design interactif
www.seine-et-marne.fr www.centrepompidou.fr www.paris.fr
designergonomie
editorialHTML
important très important
façonnez votre design en fonction des différentes typologies de site
portail : exhaustif, pratique, identitaire, redirection
intégrez les spécificités du design interactif
www.education.gouv.fr www.caisse-epargne.fr www.ag2r.com
designergonomie
editorialHTML
important très important
façonnez votre design en fonction des différentes typologies de site
site intranet/extranet : informatif, communicant
intégrez les spécificités du design interactif
intranet ubisoft USA Live intranet American Hospital Intranet ag2R
designergonomie
editorialHTML
important très important
façonnez votre design en fonction des différentes typologies de site
application métier : fonctionnel, efficace, intuitif
intégrez les spécificités du design interactif
Banque Populaire Club Med La Poste
designergonomie
editorialHTML
important très important
et le e-tourisme ?…
http://www.tourisme-nordpasdecalais.fr
designergonomie
editorialHTML
important très important
À la croisée des chemins le “e-tourisme” doit répondre à plusieurs objectifs
Il doit être séduisant, communicant, esthétique, incitatif, informatif...
www.tourisme-midi-pyrenees.com/
http://www.tourisme-lorraine.fr/
une équipe pluridisciplinaireune méthodologie cohérentedes étapes clés...
Pour parvenir à un projet réussi, il faut…
Le design web, source et capteur de tendances
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 contenuesde l’ergonomie : pour une meilleur utilisabilitéde la signalétique : pictos, icônesdu 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’inspirationet il n’est pas rare de voir des habillage TV (M6, Arte, MTV...) reprendre les codes du web.
Une équipe pluridisciplinaire…
- définir les grandes zones d’interactionssur 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
Hiérarchisez l’information de votre siteavec le story-board
Avant la créa…
Des étapes clés…
La recherchecréativePour 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.6Une 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.
anticipez l’évolution du design interactif
Réussir le design de son projet webL'ergonomie et le design : les fautes à éviter, les nouvelles tendances
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
anticipez l’évolution du design interactif
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
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 collaborativele consommateur devient producteur
Web 2.0 : l’utilisateur reprend la mainanticipez l’évolution du design interactif
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 mainanticipez l’évolution du design interactif
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.
Recommended