10 tendances digitales pour 2016

97
#DIGITALBREAKFAST 10 tendances digitales pour 2016 Conférence NiceToMeetYou + La Revanche des Sites Paris, Palais de Tokyo + Lille, Le Mother– Octobre 2015

Transcript of 10 tendances digitales pour 2016

Page 1: 10 tendances digitales pour 2016

#DIGITALBREAKFAST

10 tendances digitales pour 2016

Conférence NiceToMeetYou + La Revanche des SitesParis, Palais de Tokyo + Lille, Le Mother– Octobre 2015

Page 2: 10 tendances digitales pour 2016

De quoi va-t-on parler ?

MOTION UI 3D

SEO ANALYTICS

E-COMMERCE COPYWRITING

SOCIAL MEDIA

IoT

Page 3: 10 tendances digitales pour 2016

NiceToMeetYou est une agence digitale full-services dotée d’une forte sensibilité utilisateur / client.

Nous concentrons les expertises stratégiques, créatives et technologiques au service des principaux challenges digitaux des marques :

+ réinventer l’expérience de marque

+ développer une audience

+ booster la visibilité

+ maîtriser l’e-réputation

+ engager une clientèle

+ générer des leads ou des ventes

STRATÉGIE

CODE

CRÉATION RELATION

Page 4: 10 tendances digitales pour 2016

La Revanche des Sites est une agence experte en référencement naturel, avec une vision internationale.

L’agence propose ses expertises sur plusieurs leviers :

+ Audit SEO

+ Backlinks Building

+ Transfert SEO

+ Géolocalisation

+ Bombing Antidot

+ Ajax Optimization

MeetYourData aide les entreprises à collecter, comprendre et interpréter les données de leurs utilisateurs afin que chaque décision soit basée sur une donnée de confiance et non sur une intuition.

Page 5: 10 tendances digitales pour 2016

Les intervenants

Ange POZZO DI BORGOPlanneur Digital – Associé

Agence NiceToMeetYou

Chargé de cours Skema / ISEG

Olivier COULONDC Digital – Associé

Agence NiceToMeetYou

Alexandre JOUBERTE-Business Consultant

Agence NiceToMeetYou

Sylvain GARINConsultant SEO – Associé

Agence LRDS

Avec l’appui de Solon COSTOPOULOS Krystel ROBERTDirecteur de Clientèle Directrice Commerciale

Romain D’HalluinConsultant Analytics

MeetYourData

Page 6: 10 tendances digitales pour 2016

BYE-BYELOREM IPSUM

Le texte au cœur de l’UX

Page 7: 10 tendances digitales pour 2016

Le texte est souvent le parent pauvre de l’UX / UI Design.

Page 8: 10 tendances digitales pour 2016

“ W riting is part of the design process.”John Zeratsky – Google Ventures

Page 9: 10 tendances digitales pour 2016

LE GRAPHISMELes réponses apportées par

l’interface en termes de mouvements, de sons, de

transitions, d’effets, donnent du sens à la navigation et traduisent une expérience

de marque.

Un beau design crée une réponse émotionnelle

positive dans le cerveau, ce qui améliore nos

capacités cognitives !

Un bon texte n’est pas du remplissage : il est

fonctionnel, émotionnel, optimisé. Il parle à

l’utilisateur, transmet des messages forts, répond aux enjeux de Google.

LE TEXTE L’INTERACTIONLE CONTENUC’est la matière

fondamentale de tout site Web : c’est ce que

l’utilisateur vient chercher. Le reste est à son service !

Page 10: 10 tendances digitales pour 2016

Les mots – bien choisis – ont un pouvoir émotionnel.

Page 11: 10 tendances digitales pour 2016
Page 12: 10 tendances digitales pour 2016
Page 13: 10 tendances digitales pour 2016
Page 14: 10 tendances digitales pour 2016
Page 15: 10 tendances digitales pour 2016
Page 16: 10 tendances digitales pour 2016

EN BREF1. Pensez d’abord à votre « Tone of Voice » – à travailler si inexistant

2. En phase UX, travaillez a minima les messages-clés (headlines, chapô, wording)

3. Rappelez-vous qu’un bon message rédactionnel est original et clair

4. Appliquez les règles d’utilisabilité ET de référencement naturel

5. Pour cette mission, rien n’égale un(e) digital copywriter ;)

Page 17: 10 tendances digitales pour 2016

UIMouvement dans l’interface : une opportunité de communication

MOTION

Page 18: 10 tendances digitales pour 2016

http://www.bfmtv.com/

Faire gagner du temps

Page 19: 10 tendances digitales pour 2016

http://moto.oakley.com/

Faire gagner du temps

Page 20: 10 tendances digitales pour 2016

http://creativityweek.org/

Attirer l’attentionSe repérer

Page 21: 10 tendances digitales pour 2016

http://rawfortheoceans.g-star.com/

Branding

Page 22: 10 tendances digitales pour 2016

http://www.yufuku.net/

Hypnotique

Page 23: 10 tendances digitales pour 2016

https://www.google.com/design/spec/animation/meaningful-transitions.html#meaningful-transitions-visual-continuity

Motion provides meaning

Page 24: 10 tendances digitales pour 2016

http://www.dior.com/couture/fr_fr/mode-homme/pret-a-porter/pantalons/prince-de-galles-laine-et-cachemire-1-20748

Attirer l’attention

Le sens du détail ?

Page 25: 10 tendances digitales pour 2016

http://www.pixar.com/

Masters of Animation ?

Page 26: 10 tendances digitales pour 2016

https://www.behance.net/gallery/21722849/Pixar

Ahhhh…

Page 27: 10 tendances digitales pour 2016

http://like.animade.tv/

Old but Good

Page 28: 10 tendances digitales pour 2016

https://fr.pinterest.com/pausegraphik/ui-motion/

Share the love, merci Jérôme

Page 29: 10 tendances digitales pour 2016

EN BREF1. Capitalisez sur le mouvement, car c’est une partie indissociable de votre image

2. Il complète ce que le visuel ne peut pas dire

3. Il vous différencie dans ce monde très « flat »

4. Il fait gagner du temps à l’utilisateur

Page 30: 10 tendances digitales pour 2016

EXPERIENCESDu relief pour votre présence digitale

3D

Page 31: 10 tendances digitales pour 2016

Flash HtmlVS

La fin des complexes

Page 32: 10 tendances digitales pour 2016

http://toprecherches.lequipe.fr/#!basketball/

Informatif

Page 33: 10 tendances digitales pour 2016

http://pablotheflamingo.com/

Pablo the flamingoDivertissant

Page 34: 10 tendances digitales pour 2016

http://www.habib-fadel.com/

Expérimental

Expérimental

Page 35: 10 tendances digitales pour 2016

http://ommexperience.com/

Arty

Page 36: 10 tendances digitales pour 2016

http://news-lab-trends-experiment.appspot.com/

Informatif

Page 37: 10 tendances digitales pour 2016

http://www.renault.fr/gamme-renault/vehicules-

particuliers/espace/espace/configurateur/#/configurator

Flash VS Html

http://www.littleworkshop.fr/renaultespace/

L’esthétique ou l’immersion ?

Page 38: 10 tendances digitales pour 2016

https://crazyskills.panasonic.com/en/

Jeu vidéo

Page 39: 10 tendances digitales pour 2016

https://youtu.be/4KnNVK-udTU?t=456

Youtube 360

Page 40: 10 tendances digitales pour 2016

https://www.google.com/get/cardboard/get-cardboard/

La 3D pour tous

Page 41: 10 tendances digitales pour 2016

http://threejs.org/

Ressource

Page 42: 10 tendances digitales pour 2016

EN BREF1. Même si le web est en 2D, il n’est pas interdit de pensez en volume

2. Wow effect, même en 2016

3. Des usages multiples

4. Les devices mobile sont prêts à lire de la 3D

5. Une vigilance nécessaire sur le poids de votre expérience

Page 43: 10 tendances digitales pour 2016

COMMERCELe shopping éditorialisé.

EDITORIAL

Page 44: 10 tendances digitales pour 2016
Page 45: 10 tendances digitales pour 2016

Osez l’éditorial aussi important que votre catalogue !

Page 46: 10 tendances digitales pour 2016

Racontez-vous.

Page 47: 10 tendances digitales pour 2016

Place à l’image et aux CTA minimalistes.

Page 48: 10 tendances digitales pour 2016

Des listings hors des codes...

Page 49: 10 tendances digitales pour 2016

Donnez de la matière au produit, dans un contexte.

Page 50: 10 tendances digitales pour 2016

Donnez la genèse du produit.

Page 51: 10 tendances digitales pour 2016

Jouez avec les codes du magazine.

Page 52: 10 tendances digitales pour 2016

La créatrice d’abord, la transaction à la fin.

Page 53: 10 tendances digitales pour 2016

Magazine tendance ou e-Commerce lifestyle ?

Page 54: 10 tendances digitales pour 2016

Magazine ? Non.Catégories e-Commerce.

Page 55: 10 tendances digitales pour 2016

Campagne Print ? Non.

Page 56: 10 tendances digitales pour 2016

Pourquoi ça va perdurer ?

Le Mobile et l'App ont facilité son installation

Design et lecture plus naturelle à l’oeil

Design qui permet le Rich Média

Le scroll ne fait plus peur à votre client

La largeur de site a pris place

Un besoin de réassurance moins pressant

Remet le produit au centre

Permet de raconter une histoire

Transmet visuellement une qualité supérieure

Permet des entrées différentes via du contenu

Pousse votre SEO et votre sémantique

Ce qui peut vous freiner ?

La peur de minorer (réassurance ? Catalogue ?)

Pour les catalogues variés : l’accès produit

Oblige à un contenu de qualité

Sens du Design obligatoire ;)

Minimalisme cassant les codes actuels

Pas adapté à tous les produits

Développement plus complexe parfois

Page 57: 10 tendances digitales pour 2016

EN BREF :1. Si le sujet vous questionne : auditez les sites de prêts à porter et luxe US

2. Auditez les comportements sur votre site (produits les plus demandées)

3. Créez des contenus annexes à ces produits phares en benchant les magazines

4. Animez sur des codes différents, créez un univers produit sur 3 best sellers

5. Vérifiez les résultats via Analytics sur la conversion et le positionnement SEO

Page 58: 10 tendances digitales pour 2016

CONVERSIONPour passer (vraiment)

au m-commerce.

MOBILE

Page 59: 10 tendances digitales pour 2016

Quel que soit le device, votre produit est au centre.

Page 60: 10 tendances digitales pour 2016

Context & Design

Page 61: 10 tendances digitales pour 2016

OBJECTIF : RAPIDITE

Page 62: 10 tendances digitales pour 2016

OBJECTIF : ACCES ADAPTE A VOTRE CATALOGUE

Page 63: 10 tendances digitales pour 2016

OBJECTIF : UN PANIER LIGHT

Page 64: 10 tendances digitales pour 2016
Page 65: 10 tendances digitales pour 2016

EN BREF :1. Portez votre attention sur vos stats mobile : volume, conversion actuelle

2. Vérifiez les différences avec le Desktop : utilisation Menu, panier moyen, temps

3. Pensez mobile ! Un site pensé mobile sera plus facile à décliner en Desktop

4. Poussez une conversion mobile rapide : landing, recherche, panier rapide

5. Vérifiez les résultats via Analytics sur la conversion

Page 66: 10 tendances digitales pour 2016

TOMORROWLes changements côté Search.

SEO

Page 67: 10 tendances digitales pour 2016

OK GOOGLE.

Page 68: 10 tendances digitales pour 2016

Arrêtez d’essayer de deviner ce que Google pense de votre site, maîtrisez son crawl.

Page 69: 10 tendances digitales pour 2016

DEAD.NETLINKING IS

Page 70: 10 tendances digitales pour 2016

ATTENTION AU BAD LINKING

Page 71: 10 tendances digitales pour 2016

NOWGoogle Analytics, le Retour.

ANALYTICS

Page 72: 10 tendances digitales pour 2016

BUT WHAT’S NEXT?

Page 73: 10 tendances digitales pour 2016
Page 74: 10 tendances digitales pour 2016
Page 75: 10 tendances digitales pour 2016

DATA ISEVERYWHERE!

Page 76: 10 tendances digitales pour 2016

Votre site Web enrichit vos analytics...Et pourquoi pas l’inverse ?

Page 77: 10 tendances digitales pour 2016

HYPERSENSORIELRegard sur l’Internet des Objets.

UN MONDE

Page 78: 10 tendances digitales pour 2016

3ème révolution

Page 79: 10 tendances digitales pour 2016

Vision

Page 80: 10 tendances digitales pour 2016

Captation simplifiée

Traitementévolutif

Constat

Page 81: 10 tendances digitales pour 2016

Captation

Page 82: 10 tendances digitales pour 2016

Motion provides meaningOpportunités

Page 83: 10 tendances digitales pour 2016

Opportunités

Page 84: 10 tendances digitales pour 2016

Humain – Machine30 % des interactions

Page 85: 10 tendances digitales pour 2016

Dialogue du futur

Page 86: 10 tendances digitales pour 2016

Une source d’innovation pour

les marques

https://www.indiegogo.com/projects/rocketbook-cloud-integrated-

microwavable-notebook#/story

Page 87: 10 tendances digitales pour 2016

https://www.indiegogo.com/projects/tempescope-a-box-of-rain-in-

your-living-room#/

Météo France ?Camaïeu ?

Page 88: 10 tendances digitales pour 2016

EN BREF1. Imaginer les services qui font sens avec votre marque / produit

2. Détecter les opportunités réelles associées (notamment machine / machine et B2B)

3. Suivre l’évolution des technologies et les « nœuds » de données

4. Profiter de l’accessibilité de la techno pour fabriquer / faire fabriquer

Page 89: 10 tendances digitales pour 2016

CARREFOURSD’AUDIENCE

De Social à Media

Page 90: 10 tendances digitales pour 2016

HIER. AUJOURD’HUI.

Page 91: 10 tendances digitales pour 2016

YouTube n’a qu’à bien se tenir.

Page 92: 10 tendances digitales pour 2016

LinkedIn Pulse a dépassé le million de contributions

Page 93: 10 tendances digitales pour 2016

Avec Instant Articles, Facebook passe de relais à media.

Page 94: 10 tendances digitales pour 2016
Page 95: 10 tendances digitales pour 2016

XCe n’est plus la taille qui

compte, mais l’effet obtenu.

Page 96: 10 tendances digitales pour 2016

EN BREF1. On le redit, arrêtez de regarder le nombre de fans / followers

2. Faites évoluer votre workflow éditorial

3. Rationnalisez votre production, boostez votre médiatisation

4. Cette fois-ci, le blog est peut-être mort...

Page 97: 10 tendances digitales pour 2016

Merci :)NiceToMeetYou / Agence Digitale - Full-Serviceswww.ntmy.fr & @ntmy_fr

La Revanche des Sites / Agence SEOwww.la-revanche-des-sites.fr & @revanchesites

MeetYourData / Agence Analyticswww.meet-your-data.fr et @meetyourdata