Cours de Web Design part.3

Webdesign
visual design
Février 2013
a RITAteaching
Relax In The Air
3

recherche personas
contenu task model
architecture sitemap
wireflow wireframe
user testing visual design
intégration htmldév. back
contrôle qualité
stratégie

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

Brief créatif.
Inspirer et stimuler avec sa
connaissance de la marque.
Accompagner le développement créatif.
Maintenir le dialogue.
Relax In The Air
stratégie
workflow
Février 2013

les personas sont
Des représentations de
votre public cible basées
sur la recherche et les
interviews.
Ces utilisateurs types
donneront la direction
pour la vision et le design
d’une solution web.

un persona de qualité
doit reposer sur de vraies personnes et
un travail de recherche rigoureux

et se concentre sur
• les objectifs-clé que les groupes
doivent atteindre
• Les comportements des utilisateurs

doit vous permettre de
Comprendre si oui ou non vos
décisions vont aider l’utilisateur.

• guide à chaque partie d’un projet
• Document vivant (à un moment x)
• Doit être mis à jour
• outil stratégique > nouvelles opportunités
a tout moment
quand le créer?
personas
Relax In The Air
Février 2013

objectifs
• Prendre des décisions de design
• Rappeler que de vraies personnes
vont utiliser votre produit

• tâches à accomplir
• comportements
• état d’esprit
basés sur...
personas
Relax In The Air
Février 2013

• Descriptions courtes
• se baser sur de vraies personnes
• photographies descriptives
que communiquer?
personas
Relax In The Air
Février 2013

objectifs-clé
Quels sont les objectifs de
l’utilisateur?
Envies, besoins, attentes
Quels sont les besoins et les attentes
identifés pour cet utilisateur
objectifs business
Quels objectifs veut atteindre
l’entreprise avec cet utilisateur?
freins & frustrations
Qu’est-ce qui aujourd’hui freine
l’utilisateur dans sa tâche?
•
•
•
•
•
•Matériel à disposition
informations personnelles
Profession
Lieu
Age
(ordinateur, tablette,
smartphone...)
•
•
•
•
•
•
Nom client nom du projetPrénom
geekiness
Capacités à utiliser le matériel
Scénario: décrire brièvement pourquoi cette et comment cette personne utiliserait votre produit

techniques
Interviews poussées:
• Parler à l’utilisateur
Call Center/Service client/Helpdesk:
• Récolter les feedback et des récurrences
Recherches ethnographiques
•Observer l’utilisateur dans son environnement
naturel pendant qu’il utilise l’outil

Mieux comprendre votre audience.
Motivations.
Réactions.
Envies.
but
personas
Relax In The Air
Février 2013

• Buts et besoins de l’utilisateur deviennent le point de
focus d’une équipe de design.
• L’équipe peut se concentrer sur l’utilisateur.
• Sont relativement facile à mettre en place.
• Evite le piège de faire ce que l’utilisateur demande vs ce
qu’il va vraiment utiliser.
• Les désaccords sur le design se règlent en faisant
référence aux personas.
avantages
personas
Relax In The Air
Février 2013

http://www.slideshare.net/toddwarfel/data-driven-personas
liens utiles

customer journey / experience map

Montre ce que fait l’utilisateur et son
comportement à chaque étape d’une tâche.

Destination! Date / heure! Prix! Confirmation!
“Je ne cherche pas
forcément le moins cher.
C’est une combinaison de
choses.”!
Départ!
aéroport!
Spécificités!
Acheter tickets!
“Un siège côté
hublot”!
“Il y a peu d’aéroports d’où
je peux voler”!
“Je suis flexible avec les
horaires, mais je ne veux
pas me lever trop tôt.”!
“Normalement je ne veux
que le vol, mais je vais
regarder si on me propose
des spectacles
intéressants”!
“J’imprimerai mon ticket
juste avant le départ.”!
L’utilisateur doit pouvoir facilement
bouger entre ces différentes options
dans le but de prendre une décision
juste et claire.!
La personne n’est pas toujours
seule à ce stade de discussion!
But: Booker un vol pas cher pour NYC en juillet

But: un événement sur tous les fronts

But: expérience de rail europe

liens utiles
http://www.adaptivepath.com/ideas/the-anatomy-of-an-experience-map
http://www.servicedesigntools.org/tools/8
http://www.uxmatters.com/mt/archives/2011/09/the-value-of-customer-journey-
maps-a-ux-designers-personal-journey.php

Content precedes design. Design in the absence
of content is not design, it’s decoration.
____________________
Jeffrey Zeldman
contenu

Résoudre les problèmes structurels.
Gérer l’espace.
Communiquer du contenu.
Apporter le sens au site.
contenu
workflow
Relax In The Air
Février 2013

Au commencement était le chaos
contenu
workflow
Relax In The Air
Février 2013

Enumérer
Analyser
Séparer
Rassembler
Enlever
Créer
contenu
workflow
Relax In The Air
Février 2013

Vos outils:
contenu
workflow
Relax In The Air
Février 2013

Catégoriser
contenu
workflow
Relax In The Air
Février 2013

Content requirements for choosing a boutique dress
How do users want content presented:
Photos – Large high quality photographs showing the front, back, detailing and a model shot. Copy – Clear and non-patronising. Users want to be reassured by the detailing, heritage and ethics.
Summary of core needs:
Pictures – What do the products look like? Price –Price, any applicable offers and easily accessibly delivery charges. Sizing and availability – What sizes are available and what are the
dimensions of our sizing? Do they have my size? Delivery time – When will I get it?
ID Page name What must users do?
The core purpose of the page.
What support do they need?
Include quotes from research.
Required elements and suggestions
Existing, new or amended assets.
1 Homepage Easily be able to locate and select the dresses
category.
If users have been to the site before they want
to get straight into the category listing,
however in testing it was noted that users
“may get side-tracked by other products on the
homepage”.
New users will want to get a sense that the
brand offers the types of clothes they would
buy.
Images of the latest seasons clothing.
Sale and offer information.
Clear navigation into the product categories.
2 Category listing Easily select a product they like the look of. Colour, price and style are all necessary.
An indication of available sizes is useful at this
stage, but can be omitted as long as it’s clear
on the product page.
“I just like looking through everything available
and clicking through to the dresses I like.”
Photos that show the front and back of garments:
Price and discount information.
Alternate color, if applicable
3 Product page Add the dress to their basket. Further images including details and model
shots. Sizing and availability. Delivery and
returns information.
“I often buy two different sizes to try both, so I
need to make sure it’s easy to send the one I
don’t want back”.
Large (fullscreen) photos both on and off models.
Detailed sizing guide with stock levels for each size and color.
Delivery and returns information.
Quantity and add to basket.
Product description including material, detailing information
and the designer.

____________________
Ergolab
Trouver un système d'organisation des
informations optimal, qui soit adapté aux
tâches de recherche de l'utilisateur.

Hiérarchiser.
Structurer.
Faciliter l’activité cognitive.
architecture
workflow
Relax In The Air
Février 2013

Vos outils:
architecture
workflow
Relax In The Air
Février 2013

structure & hiérarchie
architecture
workflow
Relax In The Air
Février 2013

____________________
MC Casal
Sans sitemap, tu peux toujours courir pour que
je fasse ton site.

Colonne vertébrale du site.
Document de référence
incontournable.
sitemap
workflow
Relax In The Air
Février 2013

Vos outils:
sitemap
workflow
Relax In The Air
Février 2013

sitemap
workflow
ACCUEIL /HOMEPAGE:
1_HOME_logged
1_HOME_nologged
LOGIN PROCESS:
1_HOME_nologged_process1
DEAL DU JOUR / DEAL OF THE DAY
2_DETAIL_A
DEALS
3_DEALS_actuels
MON COMPTE / MY ACCOUNT
RECHERCHE / SEARCH
DEAL DETAIL SOLD OUT
5_DEALS_detail_SoldOut
DEAL DETAIL
5_DEALS_detail
PROFILE
11_MONCOMPTE_profil
11_MONCOMPTE_profil_password
11_MONCOMPTE_profil_password2
11_MONCOMPTE_profil_photo
11_MONCOMPTE_profil_photo2
11_MONCOMPTE_profil_photo3
11_MONCOMPTE_profilWARNINGS1
CREDITS
12_MONCOMPTE_credits
12_MONCOMPTE_credits2
12_MONCOMPTE_credits3
ACHATS / PURCHASE
14_MONCOMPTE_payes
16_MONCOMPTE_payes_detail
15_MONCOMPTE_apayer
17_MONCOMPTE_apayer_detail
15_MONCOMPTE_apayer_payment
15_MONCOMPTE_apayer_payment2
BONS / VOUCHER
Same structure than
purchases (18, 19, 20)
FOOTER
TOPDEAL A PROPOS / ABOUT
25_TOPDEAL_about
CONTACT / 26
JOBS / 27
PRESSE / 28
PARTENAIRES / PARTNERS SUBMIT DEAL
24_PARTENAIRES_01
24_PARTENAIRES_02
CONFIRMATION PAGE
24_PARTENAIRES_03
INFORMATIONS
FAQS
21_FAQS
CONDITIONS D'USE / 22
CONFIDENTIALITE / 23
IN CONTENT
33_RECHERCHE_results2
IN DEALS
33_RECHERCHE_results1
BASKET
BASKET WITH OPTIONS MULTIPLE OPTIONS
34_PANIER_B1a
34_PANIER_B1b
34_PANIER_B1c
FORMULA
34_PANIER_B2
SIZE
34_PANIER_B3
COLOR
34_PANIER_B4
BASKET WITHOUT OPTIONS
NOTIFICATION BASKET
31_PANIER_A
31_PANIER_B
PAY (LOGGED)
31_PANIER_C_logged
31_PANIER_C_logged1
31_PANIER_C_logged2
31_PANIER_C_logged3
PAY (NOT LOGGED)
31_PANIER_C_nologged
31_PANIER_C_nologged2
31_PANIER_C_nologged3
©Copyright Relax In The Air 2013

© Relax In The Air SàRL - 2012
Sitemap
2Deal du jour
Confirmation
Campaign Monitor
1ACCUEIL
Compact version
3Deals actuels /Anciens deals/Mon compte / 31Panier 8 7Sign Up 30
33 9
/Kids
/Lifestyle
/Voyage
/Restaurants
/Sport
4High-Tech
5Deal détail
11Profil
12Crédits
15Achats
14Payés
16Payés détail
15A payer
17A payer détail
Search
Résultats Erreur
Login Newsletter
Filtres
18Bons
18A échanger
19Utilisés
Filtres
20Expirés
/ /TopDeal /Infos Partenaires
Footer
21FAQs
22Conditions d’utilisation
23Confidentialité
25A propos
26Contact
27Jobs
28Presse
29Détail (modal window)
24Proposer un deal
34Taille...

wireframe
____________________
Wikipedia
A website wireframe is a basic visual guide used
in interface design to suggest the structure
of a website.

Distribuer le contenu
Définir la structure
Déterminer les fonctions
wireframe
workflow
Relax In The Air
Février 2013

Conceptualiser
Définir la place de chaque éléments dans l’interface
Concevoir la navigation
Créer la référence visuelle
Oublier les problématiques esthétiques
wireframe
workflow
Relax In The Air
Février 2013

Vos outils:
wireframe
workflow
Relax In The Air
Février 2013

Définir les comportements.
Charte d’interaction.
wireframe
workflow
Relax In The Air
Février 2013

Créer les liens.
Organisation interactive.
wireflow
workflow
Relax In The Air
Février 2013

La Maison
Les pièces d’exception
Les instruments d’écriture
Haute Ecriture
La Maison La Maison
Les pièces d’exception Les instruments d’écriture
La Maison
Artistes & professionnels
Loisirs
Les Beaux Arts
Maison
La Maison
Artistes & professionnels
La Maison
Histoire
Savoir-faire
Shops
Contacts
La Maison
afdsdfasdfsdfasdfa
fadsfjalskdf alkdsfj lkaj
lakjdf alkdsjf lakdsjgokv
okmcklmealk jaeiowv
clkml cmaoie aomeoc-
WIREFLOW
Sous-menu pastel / choix des différents
pastels
Switch entre les deux univers:
Haute Ecriture & Beaux Arts
Pastels
Liste roulante de tous les produits du
sous-menu
Catégories: Pastels, Crayons de couleur,
Pinceaux & Peintures
Pastels

35
CHOICE MENU
WHAT’S NEW SHOWROOM SHOP
WHAT’S NEW SHOWROOM SHOP
SHOWROOM 2 SHOP 2
SHOP 3
WHAT’S NEW 2
PHOTO VIEW
DEPENDING
ON NEWS...
MY BASKET +
MY PLANET FIRST
INFOS ABOUT
PROJECTS
SLIDESHOW FULL SCREEN

Permet de mettre à l’épreuve le travail déjà
effectué sur le produit et de faire les
ajustements nécessaires.

Nik, 32!
Young professional!
Loved the clarity of
the site!
Name, Age!
Segment!
Key thought!
Previous experience!
Name, Age!
Segment!
Key thought!
Name, Age!
Segment!
Key thought!
Name, Age!
Segment!
Key thought!
Name, Age!
Segment!
Key thought!
Name, Age!
Segment!
Key thought!
Name, Age!
Segment!
Key thought!
Name, Age!
Segment!
Key thought!
user testing
workflow
Relax In The Air
utilisateurs
Février 2013

user testing
workflow
prototypage

user testing
workflow
usability testing fonctionnel

Client « Super créa, vraiment on aime beaucoup, par
contre ça respecte pas vraiment notre charte. »
Nous « En même temps sans l’avoir vue… Vous pouvez
nous l’envoyer maintenant qu’on est votre agence. »
Client « Non, elle sort pas d’ici. »
visual design
viedecom.com

Couleurs.
Typos.
Formes.
Images.
Esthétique.
visual design
workflow
Relax In The Air
Février 2013

Souci du détail.
Exigence.
Excellence.
contrôle qualité
workflow
Relax In The Air
Février 2013

stratégie
Personas
exp. map / customer journey
contenu
sitemap
wireframe
wireflow
documents
résumé
workflow
Relax In The Air
Février 2013

Cours de Web Design part.3

Recommandé

Recommandé

Contenu connexe

Similaire à Cours de Web Design part.3

Similaire à Cours de Web Design part.3 (20)

Cours de Web Design part.3