Embed Size (px)
Citation preview
UX DESIGN
TENDANCES & REFLEXIONS
www.publicorp.fr 13 rue Rosenwald 75015 paris
Contact : Céline Le Bail [email protected]
MAIS AU FAIT, C’EST QUOI L’UX ? QUI SONT CES GENS
QUE L’ON APPELLE UTILISATEURS ?
LES TENDANCES DE l’UX
GOOD & BAD UX
LE FUTUR DE L’UX
LE SOMMAIRE
MAIS AU FAIT, C’EST QUOI L’UX ?
Pour le savoir revenons en 1580…
Salut, moi c’est
Montaigne
Et ça, c‘est mon best-seller
La parole est moitié à celui qui parle,
moitié à celui qui l’écoute
Eh ouais, c‘est moi qui l’ai dit
Le message émis est aussi important que l’expérience
de celui qui le reçoit
Et voici Montaigne penseur de l’UX design…
Merci, restez assis
UX
User eXperience
eXpérience Utilisateur
Besoins de l’entreprise
Besoins de l’utilisateur
UX design
Sur internet l’UX design doit permettre à l’entreprise de
délivrer clairement son message tout en donnant la possibilité à l’utilisateur de
concrétiser son action sans effort, dans un environnement
fiable
QUI SONT CES GENS QUE L’ON APPELLE UTILISATEURS ?
Vous, moi, nous…
Alexandre, 19 ans, IDF Étudiant IUT TC
“ Dans mon téléphone,
il y a toute ma vie !
”
“ Je crois que je n’arriverais
pas à me couper du monde plus d’une journée !
”
“ Dès le matin, j’ai plein de
notifications
”
“ Quand je ne suis pas satisfait d’une marque, je n’hésite pas
à le lui faire savoir
”
Florence, 49 ans Vendeuse, Bordeaux
“ Ce que j’attends de mon téléphone ? Surtout qu’il
appelle !
”
“ J’ai l’impression d’être parfois larguée face à la technologie,
mais heureusement mes enfants prennent le temps de
m’expliquer
”
“ Le plus important pour moi c’est de garder contact avec mes proches, peu importe où
ils se trouvent
”
“ J’aime bien partager mes
photos, vidéos sur les réseaux sociaux, comme ça
les choses restent
”
Martine, 81 ans Retraitée, Metz
“ Depuis qu’internet est là, je trouve que l’on perd de plus en plus le contact physique
et le lien commercial
”
“ Envoyer un sms, je trouve ça plus compliqué que de faire une recherche sur un iPad
”
“ J’ai l’impression qu’internet à
ouvert le champ de la connaissance
”
Dominique, 53 ans Commercial, Grenoble
“ Je suis un peu devenu
un geek malgré moi
”
“ J’ai l’impression que la
frontière entre mes vies pro et perso est de plus en plus
fine
”
“ Pendant mes vacances j’essaie toujours de me
déconnecter à fond
”
“ Je surveille tout le temps
mes performances sportives via des applis
”
TENDANCES UX
L’infobésité peut être un atout
L’expérience commence toujours par le menu
LA NAVIGATION PAR MENU
Les mégas-menus factuels
Site marchand - Adidas
LA NAVIGATION PAR MENU
Les mégas-menus factuels
Site marchand – Hello Bank !
LA NAVIGATION PAR MENU
Les menus expliqués
Site média – Veolia
Les mégas-menus chronologiques
LA NAVIGATION PAR MENU
Site média – The Verge
Double méga-menu
LA NAVIGATION PAR MENU
Site marchand – Lexus
LA NAVIGATION PAR MENU
Les mégas-menus pictographiques
Site événementiel – Skoda
Les méga-menus serviciels
LA NAVIGATION PAR MENU
Site institutionnel – St Gobain
LA NAVIGATION PAR MENU
Les méga-menu éditorialisés
Site institutionnel – Groupe Adidas
LA NAVIGATION PAR MENU
Les méga-menus profilés
Site marchand – Billabong
LA NAVIGATION PAR MENU
Les doubles-menu
Site média – Cosmopolitan
LA NAVIGATION PAR MENU
Les doubles-menu
iOS - Apple
LA NAVIGATION PAR MENU
Les onglets de chapitrage
Site média – Alstom Grid
LA NAVIGATION PAR MENU
Les onglets revus par le mobile
Application Google Chrome
LA NAVIGATION PAR MENU
Des menus dynamiques
Application Wikipedia
LA NAVIGATION PAR MENU
La navigation chronologique et thématique
Application media – Le Monde
La recherche se fait réflexe
LA RECHERCHE
Transformer son site en moteur de recherche
LA RECHERCHE
Transformer son site en moteur de recherche
Site média – Cosmopolitan
LA RECHERCHE
Offrir de meilleures suggestions
Site institutionnel – Boeing
Remplacer la recherche par la suggestion
LA RECHERCHE
Site grand public – Mairie de Sydney
Un référentiel unique et universel pour les contenus, le grid design
Le grid design interactif
LE GRID DESIGN
Site événementiel – Oreo
Le grid interactif
LE GRID DESIGN
Site institutionnel – United Technologies
Le grid slider
LE GRID DESIGN
Site conseil fitness – Reebok
Grid Design thématique
LE GRID DESIGN
Site marchand – Uniqlo
Le grid design ajustable
LE GRID DESIGN
Site marchand – Uniqlo
Le grid design personnalisable
LE GRID DESIGN
Application institutionnelle– Airbus Group
L’instantanéité dynamise la marque
Rendre lisible les flux, source infinie de contenus
Par défaut
FILTRER TOUS LES FLUX
Appli RH – GDF Suez
Par des sous-menus cachés
FILTRER TOUS LES FLUX
Site événementiel – Doritos
Par des sous-menus cachés
FILTRER TOUS LES FLUX
Site institutionnel – BASF
Par un simple clic
FILTRER TOUS LES FLUX
Agrégateur de flux - Feedly
Par un simple « swipe »
FILTRER TOUS LES FLUX
Application message - iOS
Excel c’est fini !
Des tableaux personnalisables
LA DATA
Site Institutionnel - BASF
Rendre l’information visuelle
LA DATA
Site ville – Transit Time NYC
Classer les données
LA DATA
Site évènementiel – Formule 1
Mettre en lumière une information
LA DATA
Site média – Le Décodeur (Le Monde)
Exploiter les données en temps réel
LA DATA
Site évènementiel – Ubisoft
Capter une cible volatile
L’immersion pour ressentir l’univers de la marque
L’IMMERSION
Méga header vidéo
Site marchand – FIVE GUYS
L’IMMERSION
Un site en mouvement perpétuel
Site marchand – FIVE GUYS
L’IMMERSION
Réduire le menu au scroll
Site évènementiel – Oreo
Le scrollytelling vertical
L’APPROCHE PARCOURS
Site marchand – AIR Amsterdam (club)
Le scrollytelling horizontal
L’APPROCHE PARCOURS
Site événementiel – Reebok
Le triple scroll
L’APPROCHE PARCOURS
Site média – Le Monde
Le scrollytelling cyclique
L’APPROCHE PARCOURS
Site marchand – Trippeo
Le scrollytelling cinématique
L’APPROCHE PARCOURS
Site événementiel – Mercedes Benz
Le scrollytelling animé
L’APPROCHE PARCOURS
Site événementiel – WWF
Des parcours sur-mesure pour garder l’utilisateur
plus longtemps
Les suggestions pendant la lecture
L’APPROCHE PARCOURS
Application Institutionnelle – Crédit Agricole
Les suggestions pendant la lecture
L’APPROCHE PARCOURS
Site média – New York Times
Les suggestions pendant la lecture
L’APPROCHE PARCOURS
Site média – New York Times
Les suggestions pendant la lecture
L’APPROCHE PARCOURS
Site média – Cosmopolitan - VICE news
Les suggestions pendant la lecture
L’APPROCHE PARCOURS
Site média – Le Monde & Genius
Un menu disponible en permanence
L’APPROCHE PARCOURS
Blog – The cultureist
Garder le contact pour conserver son audience
Les pop-in intempestives
L’ENGAGEMENT
Incitation au partage
Incitation à l’abonnement
L’incitation subtile à l’abonnement
L’ENGAGEMENT
Site institutionnel - Peugeot
Les modules conversationnels
L’ENGAGEMENT
Site commercial – searchforenergy
L’intégration des réseaux sociaux
L’ENGAGEMENT
Site media – Cosmopolitan
L’intégration des réseaux sociaux
L’ENGAGEMENT
Site évènementiel – Skoda
L’intégration des réseaux sociaux
L’ENGAGEMENT
Site évènementiel – Peugeot RCZ
Géolocaliser les contenus et les services pour afficher
sa proximité
Cartes de suggestions
LA GEOLOCALISATION
Site touristique – Manchester
Géolocaliser ses articles
LA GEOLOCALISATION
Site média – Le Monde
Adapter son contenu en fonction des lieux
LA GEOLOCALISATION
Yahoo météo – Uber - RATP
SERVICE 24/7
Application musique - Bandsintown
Adapter son contenu en fonction des lieux
Imaginer de nouvelles solutions face aux impatiences
Ne jamais laisser ses utilisateurs dans une impasse
La contextualisation
LES SALLES D’ATTENTES 2.0
Site événementiel – Mac Donald’s
La customisation
LES SALLES D’ATTENTES 2.0
Site marchand – Reebok
L’humour à la rescousse
LES SALLES D’ATTENTES 2.0
Site institutionnel - SSII
Le retour « IRL »
LES SALLES D’ATTENTES 2.0
Réseau social - Twitter
Le gaming
LES SALLES D’ATTENTES 2.0
Navigateur – Google Chrome
La marque doit offrir du service
Des modules persistants
SERVICE 24/7
Site marchand – Bouygues Telecom
Des modules personnalisables
SERVICE 24/7
Site touristique – Istanbul
Des modules personnalisables
SERVICE 24/7
Site marchand - Adidas
Démocratiser l’information pour parler à tous
Se réapproprier les codes universels de lecture
Des contenus écrits noir sur blanc
HABITUDES > WEB
Site évenementiel - Reebok
Des « Unes » magazinées
HABITUDES > WEB
Site touristique – NYC The Official Guide
Des pages stylisées en fonction des formats
HABITUDES > WEB
Site média – Vice News
Livre interactif
HABITUDES > WEB
Site événementiel – Land Rover
Revisiter des classiques du jeu-vidéo
HABITUDES > WEB
Site événementiel - BCE
Guider l’utilisateur grâce aux « coach marks »
HABITUDES > WEB
Application Tempo Smart Calendar
GOOD and BAD UX
DEVANCER LES ATTENTES
Mac OS X - Apple
DU RESPONSIVE INTELLIGENT
Application - Evernote
DES DEVICES LIES
Messagerie – Whatsapp sur le web
DE LA SYMPATHIE
Site marchand - ASOS
DE L’INTEGRATION TOTALE
Moteur de recherche - Google
ON PENSE A TOUS !
Application de jeu – Two Dots
Des sites customisables
HOME SWEET HOME
Site serviciel - Transfers
UNE PAGE INNOVATION PAS INNOVANTE
Site institutionnel - ALSTOM
LE FAMEUX PRIX CACHE
Site marchand – American Golf
LES ASTERISQUES TROMPEURS
Site marchand – Perfect Compliance
NE PAS DONNER LA BONNE INFO
Site créatif – Dribble
BOUSCULER LES HABITUDES
Application mobile - Snapchat
ET DEMAIN ?
L’enrichissement des vidéos
LES EXEMPLES IKEA ET ONLY
L’approche « mobile first »
L’EXEMPLE AIRBUS
Le responsive design 2.0
LE RESPONSIVE C’EST DÉJÀ VIEUX !
La réalité augmentée
L’eye-tracking
L’EXEMPLE SKODA
Les objets connectés
<quit> MERCI </quit>
www.publicorp.fr 13 rue Rosenwald 75015 paris
Contact : Céline Le Bail [email protected]
