Download pdf - Quelques principes fondamentaux de la conception web - Par Lambert TATOU

01 48 07 40 40 [email protected] http://www.armania.com/ http://www.socialmania.fr

http://www.facebook.com/armaniasocialmania http://twitter.com/socialmaniaFR



« Quelques principes fondamentaux de la concep5on web »

Enregistrement de Web – Conférence

Minutes Academy

Par Lambert TATOU





Lambert TATOU

Ø  Consultant Armania SocialMania

armania socialmania INfluencia

Des$principes$fondamentaux$pour$quoi$faire$?$!

Trois$approches$dilettantes$de$la$conception$web$!

! !!

! !

La#recette! Le#truc#à#la#mode! Le#step#by#step! ! !souvent!inadaptée!# change!à!chaque!saison# souvent!inadapté# ! !

!!

Cinq$principes$fondamentaux$! !

! ! !

!

! !User3centric! Simplification! Pertinence! Différenciation! Ubiquité!

!


1.#L'approche#centrée#sur#l'utilisateur#final#!

65%#des#utilisateurs#n'utilisent#jamais#les#nuages#de#tags#!

!!

Pourtant(les(prescripteurs(classiques(les(ont(souvent(recommandés(!La#culture#technique,#la#culture#créative,#la#culture#marketing,#ont#encouragé#cette#pratique!Alors!que!c’est!effectivement!souvent!sans!intérêt!pour!l’utilisateur!final…!…!car!c’est!moins!efficace!qu’un!moteur!de!recherche,!et!moins!qu’une!navigation!basique.!!


!

Une$nouvelle$approche$:$l'expérience$utilisateur$(UX)$!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! ! Design!/!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! ! Forme!Contenu!/!Fond!!!!!! ! ! ! ! =>!!!!!!!!!Objectif!/!Business!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! ! Fonction!/!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! ! Technologie0!Méthode(:(questionnement(&(enquêtes(pour(améliorer(l’UX((User(eXperience)(!

! "Est3ce0que0ca0sert0vraiment0l'utilisateur0final0?"00

! Qui0est0l’utilisateur0final0;0Quels0sont0ses0habitudes,0comportements,0objectifs0?0Enquête!en!amont!=>!profils!types!/!Personas!Tests!en!aval!=>!Evaluer!le!niveau!de!centrage!=>!Bénéfices!UX!/!Lacunes!Nouveau!cycle!de!création!/!Modification!

!

Quelques(décisions(liées(à(l’approche(UX(!

! Ingénierie0/0Site0marchand0(Sfr,0Amazon…)0:0Booster0la0vitesse0d'affichage0des0pages0web00! Dispositif0éditorial0/0Site0d’information0(rueducommerce…)0:0intégrer0les0avis0d’internautes

0


2. La%simplification%!

Yahoo%vs.%Google%!

! !! !Multiplicité!des!contenus!&!fonctionnalités!Fonction!de!recherche!quasi!invisible!

Simplification!

!


Une$application$de$la$simplification$:$le$flat$design$!

!!

Pourquoi'simplifier'?'Parce'que'le'cerveau'préfère'!'!

Le!cerveau!choisit!toujours!d’économiser!le!temps!et!les!ressources!cognitives.!Cf.!la!langue!courante!!

Paradoxe':'le'simple,'c'est'complexe'!

Plus!c'est!simple!pour!l'utilisateur,!plus!c'est!complexe!pour!le!concepteur.!Cf.!algorithmique!de!Google!!!

D’autres'décisions'du'principe'!

Oui$:$Arborescences,$navigations$&$pages$simplifiées…!et!conformes!à!la!psychologie!cognitive!Non$:$Multiplication$de$typos$;!etc.!


3.#La#pertinence#!

Des#contenus#pertinents#pour#un#meilleur#référencement##!

!

La#pertinence#c’est#bon#pour#le#référencement#naturel#Parmi!les!300!critères!de!classements!de!Google,!les!plus!importants!sont!le!contenu!(notamment!le!<title>)!et!les!backlinks.!Les!contenus!pertinents!améliorent!les!deux.!Les!contenus!pertinents!boostent!le!référencement!(évaluation!générale!de!la!sémantique!du!site!visible!&!invisible)…!et!sont!repris!sur!le!web.!!La#pertinence#c’est#bon#pour#le#référencement#payant#La!performance!des!adwords!dépend!aussi!de!la!pertinence!(rebond!faible,!qualité!élevée).!!

!



4.#La#différenciation#!

Se#différencier#par#ses#choix#de#design#!>>>"Attention"aux"photos"des"banques"d’images"!

!!!La!photo!de!la!jeune!femme!souriante!utilisée!dans!la!publicité!d’une!agence!de!rencontre!est!issue!d’une!banque!d’image.!!Une!recherche!des!utilisations!antérieures!via!Google!montre!que!cette!image!a!été!utilisée!sur!plus!de!250!sites.!!Une!de!ces!occurrences!retrouvées!dans!Google!est!un!site!X.! !!


Se#différencier#par#ses#choix#rédactionnels#!

Contrôler)les)titres)&)les)contenus)!Exemple!de!titre!:!Le!ecommerce!est!mort!vive!le!commerce.!!=>!Même!démarche!que!pour!choisir!un!nom!de!domaine!:!

Recherche!d'antériorité!sur!un!titre!d'article!!!!

Différenciation#pour#le#ecommerce#!Sur!le!web,!et!sur!les!places!de!marché,!il!est!vital!de!se!différencier,!et!si!possible!autrement!!que!par!le!prix.!!Exemples!:!!=>!Exclusivité!;!même!ponctuelle!;!même!réservée!au!web!;!avec!le!fabriquant!ou!le!fournisseur.!=>!Composition!de!packages!originaux,!avec!des!produits!très!courants.!=>!Proposition!de!services!originaux!accompagnant!les!produits.!

!


5.#L'ubiquité#!

Ro#Po#(research#online#;#purchase#offline)#!

Pour%beaucoup%d’enseignes,%les%visites%web%dépassent%désormais%les%visites%magasin.%De%plus%la%majorité%des%visites%magasin%font%suite%à%une%visite%du%site%web…!!

!!

…%Mais%les%achats%se%font%toujours%principalement%en%magasin.%!!

Responsive#design#;#Géolocalisation#!

Un!grand!nombre!de!tendances!actuelles!découlent!du!principe!d’ubiquité.!





Merci d’avoir suivi ces

Minutes Academy