Webdesign, UX et UCD #2

UX / Webdesign
/ visual design
Février 2013
a RITAteaching
Relax In The Air
2

Life is hard, it’s harder if you’re stupid.
____________________
John Wayne

userexperience
beats
corporate design
© Relax In The Air 2013

interaction
VS
visuel

engagement
VS
broadcast

Relax In The Air
mission
Février 2013
Copyright© 2012 Relax In The Air
Organisateurs de contenu.
Concepteurs d’interactions.
Créateurs d’émotions.
VOUS ÊTES

interaction
design
Visual
design
technologie
* cool webdesign
*

interaction
design
Visual
design
technologie
* objectifs business
stratégie d’entreprise
Besoins utilisateur
Attentes utilisateur
*

are you talking to?who
Utilisateur

why
Motivation
is people coming?

what
Contenu
are you gonna show?

wheRE
Context
are you gonna show it?

when
Architecture

how
Interaction

ANALYSER
Exigences
Personas
Gouvernance
Budget COLLECTER
Acquérir
Versions
Metadata
MANAGER
Réviser
Analyser
Corriger
PUBLIER
Agréger
Transformer
Expliquer
hiérarchiser
mission

responsabilité du designer
Communiquer des idées à travers l’organisation de mots et
d’images.
Organiser le chaos pour des expériences encore plus folles.

Le design centré utilisateur est une méthode
dans laquelle les besoins, les envies et les
limitations de l’utilisateur sont au centre du
processus de design.
Le UCD ne force pas l’utilisateur à changer
son comportement pour s’adapter à un outil.

Le UCD est une méthode itérative qui met
l’utilisateur au centre de toutes
les décisions de design.
quoi?
ucd
utilisateur
Relax In The Air
Février 2013

Le UCD est une philosophie de design rendue
possible par une multitudes de disciplines et
méthodes de design.
quoi?
ucd
utilisateur
Relax In The Air
Février 2013

Le but ultime du UCD est d’optimiser
l’expérience utilisateur d’un système,
d’un outil ou d’un processus.
BUT
ucd
utilisateur
Relax In The Air
Février 2013

Le UCD cherche à atteindre ce but
en considérant le point de vue de l’utilisateur
durant toutes les phases de développement.
BUT
ucd
utilisateur
Relax In The Air
Février 2013

Interaction
Moi
Autres
Environnement
Enseignement
Expérience

Besoins et envies
point de vue de l’utilisateur

Buts et motivations

Obstacles et limitations

Tâches et activités

Géographie et langage

Environnement et matériel

Travail, vie et expérience

Remember happiness is a way to travel
not a destination.
____________________
Roy Goodman

Nous sommes
avant tout
des animaux
avec des émotions

• La Recherche
• L’architecture de Information
• le design d’interaction
• Le Visual Design
• L’Usability
disciplines
ucd
utilisateur
Relax In The Air
Février 2013

• Interviews
• Focus groups
• Workshops
• Brainstorm
• Personas
• Scénarios (task models)
• Evaluation des concurrents
Relax In The Air
méthodes de recherche
ucd
utilisateur
Février 2013

• Storyboards
• Croquis
• Wireframe
• Wireflow
• Modélisation de navigation
• Layout de pages
• High/Low fidélité prototypes
• Prototypes fonctionnels
Relax In The Air
méthodes de conception
ucd
utilisateur
Février 2013

• Graphisme
• Branding
• Iconographie
Relax In The Air
méthodes de design
ucd
utilisateur
Février 2013

• Usability evalution
• Usability testing
• Web analytics
Relax In The Air
méthodes d’évaluation
ucd
utilisateur
Février 2013

• Augmenter les taux d’adoption
• Améliorer la productivité utilisateur
• Réduire les coûts de maintenance
Relax In The Air
avantages
ucd
utilisateur
Février 2013

résultat
Retour sur investissement

rôle
Un project manager doit connaître le client.
Un webdesigner doit le comprendre.
____________________
MC Casal

You can put the lipstick on the pig
when I’m done
____________________
Some UX designer

Résoudre des problèmes
Créativité
Ego-less
Usability
Accessibilité
Sens de l’humour
Cross disciplinarité
Relax In The Air
compétences
webdesigner
Février 2013

La créativité doit servir les projets de vos clients.
Les projets ne doivent pas servir votre créativité.
____________________
MC Casal

• UX Designer
• Web Architecte
• User Interface Designer
• Interactive / Digital Designer
• DA Web
• Visual Designer
Relax In The Air
métiers
webdesigner
Février 2013

Affectif RentabilitéVS
UX designer
Relax In The Air
métiers
webdesigner
____________________
Don Norman
Quand il était Vice President of the
Advanced Technology Group chez Apple
Février 2013

Tout ce qui nécessite une interaction humaine
Computer systems, voitures, avions, distributeurs de tickets, software design,
user research, design industriel ou web design.
Structure
Feedback
Simplicité
Tolérance
Visibilité
Répétition
user interface designer
Relax In The Air
métiers
webdesigner
Février 2013

Créer les liens pertinents
pour que l’organisation et les relations
entre les éléments d’un contenu
soient compréhensibles
web architecte
Relax In The Air
métiers
webdesigner
Février 2013

réaliser du design online et interactif
interactive / digital designer
Relax In The Air
métiers
webdesigner
Février 2013

Un peu styliste, un peu décorateur.
Je suis un artiste, mais j’ai surtout
une excellente maîtrise
des fondamentaux du design,
de la typographie et
des contraintes du web.
visual designer
Relax In The Air
métiers
webdesigner
Février 2013

le couteau suisse du web design
d.a. web
Relax In The Air
métiers
webdesigner
Février 2013

UX & prototypage / / front dév.

Le web design désigne la conception de l'interface web :
l’architecture interactionnelle, l’organisation des
pages, l’arborescence et la navigation dans le site web.
Il s’agit d’une phase essentielle dans la conception d’un
tel site. La conception d'un design web tient compte des
contraintes spécifiques du support Internet, notamment
en termes d’ergonomie, d’utilisabilité et d’accessibilité.

interaction
design
Visual
design
* cool webdesign
*
technologie

Design is not just
what it looks like
and feels like.
Design is how it
works.
____________________
Steve Jobs

Plus de liberté
Meilleurs standards
plus de plateformes
Plus mobile
plus visuel
et le futur?

introduction au design
QUI?
MC Casal
objectifs
business
besoins
utilisateurs
brand
guidelines
contraintes complexes

and you’ll have to think
and work more to make it
more and more simple
or be a genius like John lautner

webdesign
• Philosophie
• Allégorie de la maison
• Objectifs

Collaboration
Dialogue
Intégration de tous les acteurs
Travailler pour l’utilisateur
Connaître les limites
philosophie
webdesign
Relax In The Air
Février 2013

graphismesurface
webdesign
mécanique

design
dans la contrainte
Technologie / Utilisateur / Marque

pouvoir de
idée
Doit correspondre aux objectifs du client.
1

pouvoir de
vertue
Doit être invisible, mais avec une identité.
2

pouvoir de
utilité
Doit être utile et utilisable.
3

pouvoir de
mesure
Doit être mesurable et quantiﬁable.
4

pouvoir de
ambition
Doit être de qualité. Souci du détail.
5

pouvoir de
language
Doit avoir un discours clair et de la personnalité.
6

allégorie de la maison
webdesign
Relax In The Air
Février 2013

Délivrer une expérience
Call to action
Créer des contacts
générer de l’engagement
objectifs
webdesign
Relax In The Air
Février 2013

Moins de temps pour les choix
Moins d’effort mental
Moins de fréquence d’erreurs
utilisateur
objectifs
webdesign
Relax In The Air
Février 2013

• Considérez les couleurs des textes et backgrounds avec attention.
• Soyez attentifs à la taille des éléments importants
• N’utilisez pas de fonds flashy.
• Utilisez des bons contrastes de couleurs.
• Gardez à l’esprit que les typos avec serif sont plus lisibles.
1) Rendre le site facile à lire
3 règles
objectifs
webdesign
Relax In The Air
Février 2013

2) Rendre le site facile à naviguer
3 règles
objectifs
webdesign
Relax In The Air
• Pensez à votre public cible
• Les liens et call to action doivent être clairs et faciles à trouver.
Février 2013

3) Rendre le site cohérent
3 règles
objectifs
webdesign
Relax In The Air
• Donnez une image professionnelle
• Gardez une cohérence entre les typographies, images et couleurs.
• Uniformité.
Février 2013

Voilà ce que l’on croit... La réalité
mythes
objectifs
webdesign
Relax In The Air
Février 2013

• Créez un centre d’intérêt qui attire l’attention.
• Créez ordre et équilibre.
• Etablissez des motifs pour guider l’utilisateur à
travers une composition.
• Dans d’autres mots: RACONTEZ UNE HISTOIRE.
hiérarchie visuelle
objectifs
webdesign
Relax In The Air
Février 2013

• Raconte l’histoire juste.
• apporte la différence.
• donne envie d’engager le dialogue.
• donne de l’unité à votre site.
Belle personnalité
objectifs
webdesign
Relax In The Air
Février 2013

• Couleur (psychologie, chaud-froid, contraste...)
• Typo (espace, style, tailles...)
• images
• formes
• textures (sensations tactiles)
Belle personnalité
objectifs
webdesign
Relax In The Air
Février 2013

• Le client
• Web design
• Project management
• intégration html / développement front
• Développement back
• Contrôle qualité
• SEO / SEM
• Stratégie digitale
• ux / ui (expérience utilisateur / Interface utilisateur)
du brief à la mise en ligne
production
Relax In The Air
• Recherche
Février 2013

Impliquez votre client
Et les décideurs
et ceux qui payent
et les champions
et les sceptiques
Client
production
Relax In The Air
Février 2013

• Livraison du site
• Publication du site
• Technologie de développement ou CMS
• Langues
• Aspect et comportement du layout
• Degré d’accessibilité
• Public cible
• Statistiques actuelles
• Audit
• Stratégie interne
• Buts du site
• Sites de référence
• Concurrence
• Durée de vie du site/app
• Budget
• Contraintes spécifiques
Client
production
Relax In The Air
Février 2013

www.theoatmeal.com/comics/design_hell
Client
production

le meilleur allié
mais designer wannabe
project management
production
Relax In The Air
Février 2013

clientsfromhell.net
project management
production
Relax In The Air
Février 2013

Où sommes-nous?
Pourquoi nous y sommes?
Où aller?
Comment y aller?
stratégie
production
Relax In The Air
Février 2013

marché
tendances
concurrence
statistiques
stratégie business ou produit
stratégie
production
Relax In The Air
Février 2013

Poser des hypothèses
qui doivent être vérifiées par la recherche
stratégie
production
Relax In The Air
Février 2013

stratégie
production
Relax In The Air
Quelle est
votre stratégie
générale?
Comment
faites-vous de
l’argent?
Dans quelles
activités avez-vous
investi?
Dans lesquelles
ne pas investir?
Quelle est votre
différence
compétitive?
Votre marché
grandit-il, se
réduit-il ou est-il
stable?
Quelles activités
se lancer?
POSITION VALEUR ACTIVITES
INTERNE
EXTERNE
Février 2013

darmano.typepad.com
stratégie
production
Relax In The Air
Février 2013

recherche
production
Relax In The Air
interviews
service clients
S.A.V.
Call center
observation
personas
etudes existantes
Février 2013

recherche
production
Relax In The Air
Objectifs
du projet
et
Objectifs
de la
recherche
Identifier les
participants
et
Créer une
méthode
Collecter
les données
Analyser
les données
Communiquer
les résultats
Février 2013

Contenu
Architecture
Prototypage
Expérience utilisateur
tests utilisateurs
UX / UI
production
Relax In The Air
Février 2013

UX / UI
production

couleurs
typographies
esthétique
profondeur
grille
interactions
webdesign
production
Relax In The Air
Février 2013

bestwebgallery.com
webdesign
production
Relax In The Air
Février 2013

meilleur allié du webdesigner.
travail main dans la main.
Deux métiers qui se mélangent.
Innovation Intégration Optimisation Accessibilité
intégration html / développement front
production
Relax In The Air
Février 2013

www.smashingmagazine.com
production
Relax In The Air
intégration html / développement front
Février 2013

Le prince des bases de données.
Le roi du dynamisme côté client ou côté serveur.
développement back
production
Relax In The Air
Février 2013

PHP
asp .net
Sharepoint
Java
Ruby
iOS
... etc
développement back
production
Relax In The Air
Février 2013

« Mais c’est juste un pixel de décalage! »
« Si moi je le vois, n’importe qui pourra le voir. »
contrôle qualité
production
Relax In The Air
Février 2013

Search Engin Optimisation / Marketing
Un site qui n’est pas référencé est
comme un roman policier
rangé dans la section Entomologie
d’une bibliothèque municipale.
seo / sem
production
Relax In The Air
Février 2013

where the f* is my website?
seo / sem
production
Relax In The Air
Février 2013

Webdesign, UX et UCD #2

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (18)

Similaire à Webdesign, UX et UCD #2

Similaire à Webdesign, UX et UCD #2 (20)

Plus de Relax In The Air

Plus de Relax In The Air (20)

Webdesign, UX et UCD #2