L'intervention de Damien Melich

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


Cernez les enjeux de communication


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



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


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


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

http://www.groupama.com/

http://www.fondation-groupama.com/

http://www.fondation-groupama.com/

http://www.seb.com/

http://www.pprgroup.com/



www.renaulttrucks.com(route de la soie)

www.paris.fr(nuits blanches)

www.nrjmobile( HitMusicInside)

designergonomie

editorialHTML



site thématique/événementiel : informatif, persuasif, impliquant, émotionnel

http://www.renaulttrucks.com/

http://www.paris.fr/

http://www.nrjmobile/




site e-commerce/transactionnel : rassurant, incitatif, relationnel


www.elige.con www.relaischateaux.com http://www.vivacorsica.com/

designergonomie

editorialHTML


http://www.elige.con/

http://www.relaischateaux.com/




site de marque/promotionnel : esthétique, incitatif, informatif


www.valeo-motor-sports.com BMW 330 XD www.noctilien.fr

designergonomie

editorialHTML


http://www.valeo-motor-sports.com/

http://www.noctilien.fr/



façonnez votre design en fonction des différentestypologies de site

site de contenu : descriptif, pratique


www.seine-et-marne.fr www.centrepompidou.fr www.paris.fr

designergonomie

editorialHTML


http://www.seine-et-marne.fr/

http://www.centrepompidou.fr/




portail : exhaustif, pratique, identitaire, redirection


www.education.gouv.fr www.caisse-epargne.fr www.ag2r.com

designergonomie

editorialHTML


http://www.education.gouv.fr/

http://www.caisse-epargne.fr/

http://www.ag2r.com/




site intranet/extranet : informatif, communicant


intranet ubisoft USA Live intranet American Hospital Intranet ag2R

designergonomie

editorialHTML





application métier : fonctionnel, efficace, intuitif


Banque Populaire Club Med La Poste

designergonomie

editorialHTML




et le e-tourisme ?…

http://www.tourisme-nordpasdecalais.fr

designergonomie

editorialHTML


À 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


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 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


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


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.

L'intervention de Damien Melich

Economy & Finance

Transcript of L'intervention de Damien Melich