Présentation : Designer l'Experience Utilisateur

UXD
Designer
l’expérience
utilisateur

lundi 23 novembre 2009

“ Quand vous abordez un problème et qu’il
apparait vraiment simple, ce que vous n’en
comprenez pas la compléxité. Puis, vous vous
y plongez et vous voyez alors que c’est très
compliqué, et vous imaginez toutes sortes de
solutions alambiquées.

Ça, c’est un peu le milieu du chemin, et c’est là
que la plupart des gens s’arrète...

Mais la personne vraiment forte continuera et
trouvera la clé, le principe soujacent du
problème — et inventera une solution
magnifique, élégante et qui fonctionne.”

Steve Jobs, 1984


UXD

Contexte


Contexte technologique
Racines


COMPUTER INFORMATION
SCIENCES SCIENCES


SCIENCES SCIENCES

Traduit en français par “Sciences
Informatiques” : étude des fondations
théoriques de l’information et du
calcul automatisé, et des techniques
pratiques de leur implémentation et
application dans les systèmes
informatiques.


➡ 2400 BC : The abacus - the first known calculator (Babylonians )
➡ 500 BC : First known use of zero by mathematicians
➡ 500 BC : Indian grammarian Panini formulated the grammar of Sanskrit
➡ 200 BC : The Chinese invented the suanpan (Chinese abacus)
➡ 125 BC : Machine d'Anticythère : calculatrice mécanique antique
COMPUTER permettant de calculer des positions astronomiques.

SCIENCES ➡ 100 BC : Chinese mathematicians first used negative numbers.
➡ 60 : Heron of Alexandria made numerous inventions, including "Sequence
Control" in which the operator of a machine set a machine running, which
then follows a series of instructions in a deterministic fashion. This was,
essentially, the first program.

➡ 600 : Indian mathematician Brahmagupta was the first to describe the
modern place-value numeral system (Hindu-Arabic numeral system).

➡ 724 : Chinese inventor Liang Lingzan built the world's first fully mechanical
clock;

➡ 820 : Persian mathematician, Muḥammad ibn Mūsā al-Ḵwārizmī, described
the rudiments of modern algebra

➡ 1000 : Abū Rayhān al-Bīrūnī invented the Planisphere, an analog
computer.


➡ 1400 : Kerala school of astronomy and mathematics in South India invented the
floating point number system.

➡ 1400 : Jamshīd al-Kāshī invented the Plate of Conjunctions, an analog
computer instrument used to determine the time of day at which planetary
conjunctions will occur, and for performing linear interpolation.

➡ 1588 : Joost Buerghi discovered natural logarithms.
➡ 1623 : Wilhelm Schickard of Tübingen, Württemberg (now in Germany), built the
first discrete automatic calculator, and thus essentially began the computer
era. His device was called the "Calculating Clock"

➡ 1642 : French mathematician Blaise Pascal built a mechanical adding
machine.

➡ ...
COMPUTER
➡ 1936 : Alan Turing of Cambridge University, England, published a paper on
SCIENCES 'computable numbers'

➡ 1940 : At Bell Labs, Samuel Williams and George Stibitz complete a calculator
which can operate on complex numbers, and give it the imaginative name of the
'Complex Number Calculator'

➡ 1943 : The Colossus was built, by Dr Thomas Flowers at The Post Office
Research Laboratories in London, to crack the German Lorenz (SZ42) cipher. It
contained 2400 vacuum tubes for logic and applied a programmable logical
function to a stream of input characters

➡ 1944 : The IBM ASCC (Automatic Sequence Controlled Calculator) is turned
over to Harvard University, which calls it the Harvard Mark I It was designed by
Howard Aiken and his team, financed and built by IBM —it became the second
program controlled machine (after Konrad Zuse's). The whole machine was 51
feet (16 m) long, weighed 5 (short) tons (4.5 tonnes), and incorporated 750,000
parts.

➡ 1949, May 6 : This is considered the birthday of modern computing. Maurice
Wilkes and a team at Cambridge University executed the first stored program
on the EDSAC computer, which used paper tape input-output


Theoretical computer science

Algorithms and data structures

Programming methodology and languages
Compilers
Programming languages

Computer elements and architecture
Digital logic
Microarchitecture
Multiprocessing

COMPUTER
SCIENCES Numerical and symbolic computation
Bioinformatics
Cognitive Science
Computational chemistry
Computational neuroscience
Computational physics
Numerical algorithms
Symbolic mathematics

Applications
Operating systems
Computer networks
Computer graphics
Computer vision
Databases
Computer security
Artiﬁcial intelligence
Robotics
Human–computer interaction
Ubiquitous computing


SCIENCES SCIENCES

Science interdisciplinaire
principalement concernée par
la collection, le classement,
la manipulation, le stockage,
la recherche et la diffusion
d'information.


PLATON
(428 - 348 av.J.C.)

INFORMATION
SCIENCES
“Classical categorization comes to us ﬁrst from Plato, who, in his
Statesman dialogue, introduces the approach of grouping

objects based in their similar properties.
This approach was further explored and systematized by Aristotle in his
Categories treatise, where he analyzes the differences between
classes and objects.”


Paul Marie Ghislain Otlet
(1868 - 1944)

http://en.wikipedia.org/wiki/Paul_Otlet

“Paul Marie Ghislain Otlet (23 August 1868 in Brussels, Belgium – 10
December 1944) was an author, entrepreneur, visionary, lawyer and
peace activist; he is one of several people who have been considered
the father of information science, a field he called "documentation".
INFORMATION Otlet created the Universal Decimal Classification, one of the most
SCIENCES prominent examples of faceted classification.

He envisioned later technical innovations but also projected a global
vision for information and information technologies that speaks
directly to postwar visions of a global "information society."
Otlet not only imagined that all the world's
knowledge should
be interlinked and made available remotely to
anyone, but he also proceeded to build a structured document
collection. This collection involved standardized paper sheets and
cards filed in custom-designed cabinets according to a hierarchical
index (which culled information worldwide from diverse sources) and a
commercial information retrieval service (which
answered written requests by copying relevant information from index
cards). Users of this service were even warned if their query was likely
to produce more than 50 results per search.”


Timothy Berners-Lee
(1955 - )

http://en.wikipedia.org/wiki/Tim_Berners-Lee

“Sir Timothy John "Tim" Berners-Lee, OM, KBE, FRS, FREng, FRSA
(London, 8 June 1955), is a British engineer and computer scientist and
MIT professor credited with inventing the World Wide Web, making
the first proposal for it in March 1989. On 25 December 1990, with the
INFORMATION help of Robert Cailliau and a young student staff at CERN, he
implemented the first successful communication
SCIENCES
between an HTTP client and server via the Internet.

Berners-Lee is the director of the World Wide Web Consortium (W3C),
which oversees the Web's continued development. He is also the
founder of the World Wide Web Foundation, and is a senior researcher
and holder of the 3Com Founders Chair at the MIT Computer Science
and Artificial Intelligence Laboratory (CSAIL).[3] He is a director of The
Web Science Research Initiative (WSRI),[4] and a member of the
advisory board of the MIT Center for Collective Intelligence.”


Bibliometrics
Data modeling
Document management
Groupware
Information architecture
Information ethics
Information retrieval
INFORMATION Information society
SCIENCES
Information systems
Intellectual property
Knowledge management
Knowledge engineering
Personal information management
Semantic web


La boucle de l’innovation


Usages
Usages
Usages
Usages
Usages
Usages

TEMPS

Technologie
Technologie
Technologie
Technologie
Technologie
Technologie


Réseaux
sociaux
Blogs
Usages
Usages
Usages
Usages

TEMPS

Technologie
Technologie
Technologie
Technologie

W3C
API


WEB 1


VOUS ETES ICI

WEB 1 WEB 2


Cartographie


INFORMATIONNEL / POLITIQUE /
DOCUMENTAIRE / SOCIAL /
/ PRESSE INSTITUTIONNEL
INFORMATION
SCIENCES

WEB
COMMERCE /
CINEMA /
MARKETING /
TELEVISION
PUBLICITE

COMPUTER
SCIENCES JEUX / PHOTO / VIDEO /
MULTIMEDIA / ARTS
CD-ROM GRAPHIQUES

ETC.


INFORMATION
SCIENCES

.COM WEB

COMPUTER
SCIENCES


INFORMATION
SCIENCES WEB
INFORMATIONNEL

.COM
WEB
COMPUTER AUDIOVISUEL
SCIENCES


AUDIOVISUEL INFORMATIONNEL

• Privilégie la surface • Privilégie le fond
• Propriétaire • Standardisé
• Recherche horizontale • Recherche verticale
• Immersif • Emmersif
• Découverte • Organisation
• Notion de temps • Intemporalité


AUDIOVISUEL
WEB 1.0 INFORMATIONNEL

MONDES DIVERTISSEMENT CULTURE ET TRANSACTIONNEL COMMUNAUTAIRE DOCUMENTAIRE
VIRTUELS MEDIA

Maze Showtime.com Candystand.com AOL.com Usenet Info.cern.ch


INFORMATIONNEL
AUDIOVISUEL

second life wikipedia

WoWarcraft Vuitton Last.fm Dailymotion Ebay Facebook Blogs / News
Voyages


Audiovisuel Informationnel


WoWarcraft Joost Vuitton Last.fm You Tube Ebay Facebook NYT.com Blogs
Voyages

Second Life Wikipedia.com




WoWarcraft Vuitton Last.fm You Tube Ebay Facebook Blogs / News
Voyages

vuitton.com - voyages Guardian.co.uk




Voyages

Last.fm Dailymotion.com




Voyages

Dailymotion.com/jukebox3d Last.fm



VIRTUELS MEDIA

• Privilégie la surface • Privilégie le fond
• “Propriétaire” • Standardisé
• Recherche horizontale • Recherche verticale
• Immersif • Emmersif
• Découverte • Organisation
• Notion de temps • Intemporalité


WEB 1.5

VIRTUELS MEDIA


AUDIOVISUEL
? INFORMATIONNEL

VIRTUELS MEDIA


INFORMATIQUE
LOGICIELLE

(OPEN SOURCE)


VIRTUELS MEDIA


APPLICATIF

WEB 2.0

VIRTUELS MEDIA


APPLICATIF

Desktop Application

Rich Desktop Application


Rich Internet Application

VIRTUELS MEDIA


Applicatif

Desktop Application iTunes

Google Earth

Rich Desktop Application
Ebay Desktop

Google Docs
Rich Internet Application
Outils de
second life publication web wikipedia

WoWarcraft Vuitton Last.fm Dailymotion Ebay Facebook Blogs / News
Voyages


Applicatif

iTunes

Ebay Desktop

Logiciel Google Docs Informationnel


Voyages


Applicatif



Contexte métier
Profils en T


FONCTION

FORME FOND

DESIGN WEB


REALISATION &
DEVELOPPEMENT

FONCTION

INTERACTION & CONTENUS &
INTERFACE ARCHITECTURE

FORME FOND

DESIGN WEB


Le design Web nécessite une démarche d’élaboration
pluri-disciplinaire et, par conséquent, des intervenants
aux proﬁls “en forme de T” (T-shaped people).

T

T-shaped (TEE-shaypt) adj. Posséder une compétence ou une connaissance
qui soit à la fois en profondeur et en largeur.

Être “T-shaped” (en forme de T) signiﬁe avoir un noyau de compétences et une
connaissance approfondie dans un domaine (la tige du T), mais également un
haut niveau de curiosité, de sensibilité et d’aptitudes permettant de se
diversiﬁer rapidement et d’atteindre une bonne compréhension générale
d’autres domaines (la barre transversale du T).

T

Contexte métier
Les métiers du design interactif


Industrialisation du digital
Naissance d’un nouveau paradigme métier

Années 90

+
Graphiste(s) Développeur(s)

Chef de projet


Industrialisation du digital
Naissance d’un nouveau paradigme métier

Années 2000
UX

+ + + + +
Stratégie Architecte Designer Expert Designer Flash Motion
des contenus d’information d’interaction utilisabilité d’interface designer

+ + + +
Developpeur Developpeur Developpeur Developpeur Chef de projet
DOM / CSS Front Back AS3


Contexte métier
Elements de l’expérience utilisateur


Les 5 éléments de l’expérience utilisateur

http://www.jjg.net/elements/
surface

squellette

structure

périmêtre

strategie


ate contexts, and to clarify the underlying relationships among

ace Concrete Completion Web as hypertext system

Visual Design: visual treatment of text,
tment of interface
k-and-feel") Visual Design surface
graphic page elements and navigational
components

itional HCI: Navigation Design: design of interface
ts to facilitate elements to facilitate the user's movement
onality
Interface Design Navigation Design through the information architecture
squellette
Tuftean sense:
of information Information Design Information Design: in the Tuftean sense:
designing the presentation of information
to facilitate understanding

pment of Interaction Information structure
Information Architecture: structural design

time
te user tasks,
acts with
Design Architecture of the information space to facilitate
intuitive access to content

"feature set":
nctionality the site
Functional Content Content Requirements: definition of
périmêtre
content elements required in the site
eet user needs Specifications Requirements in order to meet user needs

ved goals User Needs: externally derived goals
ugh user research,
cs, etc. User Needs for the site; identified through user research,
strategie
ethno/techno/psychographics, etc.
creative, or other
the site Site Objectives Site Objectives: business, creative, or other
internally derived goals for the site

Abstract Conception information-oriented

mplete: The model outlined here does not account for secondary considerations (such as those arising during technical or content development)
decisions during user experience development. Also, this model does not describe a development process, nor does it define roles within a
elopment team. Rather, it seeks to define the key considerations that go into the development of user experience on the Web today.

http://www.jjg.net/ia/

A basic duality: The Web was originally conceived as a hypertextual information space; 30 March 2000
but the development of increasingly sophisticated front- and back-end technologies has
fostered its use as a remote software interface. This dual nature has led to much confusion,
as user experience practitioners have attempted to adapt their terminology to cases beyond
the scope of its original application. The goal of this document is to define some of these
terms within their appropriate contexts, and to clarify the underlying relationships among
these various elements.

Web as software interface Concrete Completion Web as hypertext system

Visual Design: visual treatment of text,
Visual Design: graphic treatment of interface
elements (the "look" in "look-and-feel") Visual Design graphic page elements and navigational
components

Interface Design: as in traditional HCI: Navigation Design: design of interface
design of interface elements to facilitate elements to facilitate the user's movement
user interaction with functionality
Interface Design Navigation Design through the information architecture
Information Design: in the Tuftean sense:
designing the presentation of information Information Design Information Design: in the Tuftean sense:
designing the presentation of information
to facilitate understanding to facilitate understanding

Interaction Design: development of Interaction Information Information Architecture: structural design

time
application flows to facilitate user tasks,
defining how the user interacts with
Design Architecture of the information space to facilitate
intuitive access to content
site functionality

Functional Specifications: "feature set":
detailed descriptions of functionality the site
Functional Content Content Requirements: definition of
content elements required in the site
must include in order to meet user needs Specifications Requirements in order to meet user needs

User Needs: externally derived goals User Needs: externally derived goals
for the site; identified through user research,
ethno/techno/psychographics, etc. User Needs for the site; identified through user research,
ethno/techno/psychographics, etc.
Site Objectives: business, creative, or other
internally derived goals for the site Site Objectives Site Objectives: business, creative, or other
internally derived goals for the site
task-oriented Abstract Conception information-oriented

This picture is incomplete: The model outlined here does not account for secondary considerations (such as those arising during technical or content development)
that may influence decisions during user experience development. Also, this model does not describe a development process, nor does it define roles within a
user experience development team. Rather, it seeks to define the key considerations that go into the development of user experience on the Web today.
© 2000 Jesse James Garrett http://www.jjg.net/ia/


UX Strategy
❖ Definition des besoins
❖ Etude de contextes d’usage
❖ Strategie fonctionnelle
IA ❖ Strategie des contenus IxD
❖ Parcours utilisateurs ❖ Modélisation des objets
❖ Organisation de contenu ❖ Comportement d’interface
❖ Wireframes ❖ Organisation des gabarits
❖ Plannification fonctionnelle ❖ Spéc. fonctionnelles
❖ Process Flow

UX DESIGN

UID Prototype
❖ Design d’interface ❖ Composants Front Flash
❖ Spécifications graphiques ❖ Gabarits XHTML
❖ Catalogue d’objets ❖ Charte CSS
❖ Librairie d’objets

Usability
❖ Conception des tests
❖ Recommandation et
rapport d’utilisabilité


UXD

Stratégie


Recherches utilisateurs


Analytics

Web analytics : termes désignant la mesure, la collecte,
l’analyse et la présentation de données internet dans le but de
comprendre et d’optimiser les usages d’un dispositif web.


Analytics


Qu’est-ce que le design centré utilisateur ?

Le design centré utilisateur est une philosophie du design et
un processus au sein desquels les besoins, les désirs, et les
limitations des utilisateurs d’une interface font l’objet d’une
attention entière à chaque étape du processus de design.


Qualitatif
(insights)

Interviews
Tests d’utilisabilité
utilisateurs

Buts et attitudes Comportement
(ce qu’ils disent) (ce qu’ils font)

Sondages Analyses
utilisateurs de trafﬁc & logs

Quantitatif
(validation)


Interview utilisateur

L’interview utilisateur est une méthode permettant de
découvrir des faits et des opinions d’utilisateurs finaux
potentiels du système à concevoir.
Les interview sont en général menés en face-à-face, un
utilisateur pour un interviewer à la fois.


Sondage utilisateur

Le sondage utilisateur a pour objectif de recueillir des
informations auprès d’un panel d’utilisateur, au moyen d’un
questionnaire papier ou électronique, sur des points
permettant l’amélioration d’un produit dans le cadre de sa
conception.


Test d’utilisabilité

Les tests d’utilisabilité sont basés sur l’observation directe
d’utilisateurs spécifiques du produit. Cette méthode permet
de recueillir des informations sur l’utilisabilité d’une interface
pendant que les taches prédéfinies sont effectuées.


Persona

Personnes fictives créées pour représenter les différents
types d’utilisateurs au sein d’une cible demographique
identifiée succeptible d’utiliser un site ou un produit.


Persona


Méthodes de conception


“The best way to get a
good idea is to get a lot
of ideas.”
Linus Pauling
Prix Nobel de Chimie pour
la découverte de l’ADN


Brainstorming

Le brainstorming consiste à rassembler des personnes afin
de générer le plus grand nombre d’idées possibles afin de
trouver des solutions à une problématique donnée.

La méthode de brainstorming appellée Cartographie des
idées est la plus efficace en termes de conception.


Brainstorming


Focus groups

Le Focus Group consiste à soumettre des idées à un
ensemble d’utilisateurs (entre 5 et 10) et à enregistrer leur
réactions et leurs commentaires.


Workshop

Le workshop consiste à rassembler des personnes (3 ou 4)
impliquées dans un projet pour une séance de conception
de groupe. L’objectif est trouver des solutions consolidées
plus rapidement à des problématiques précises.

Les problématiques pouvant être traitées en workshop sont
variées : design stratégie, persona, parcours utilisateurs,
contenu, fonctionnalités, interaction, structure...


Workshop


Scénario utilisateur


Scénario utilisateur (de contexte)

Le scénario utilisateur est le récit de l’usage fait par un
persona d’un service ou d’un produit dans un contexte
de vie défini.

Le scénario de contexte se concentre sur la façon dont
le produit peut aider l’utilisateur à atteindre son but et
non pas sur le fonctionnement du produit.


3. Stratégie / scénario utilisateur


Framework


Framework

Un framework est une structure conceptuelle
fondamentale utilisée pour traiter ou résoudre des sujets
complexes. Dans le contexte du design web, un
framework est souvent représenté sous la forme d’un
schéma qui sert à la fois de stratégie des moyens et de
plan directeur. C’est à la fois un guide et un outil.


Extimate

What I do

Who I meet

Where I go

Who I am

Intimate
1
My account
My profile
My avatar
2
My bedroom
The school
Adventure places
3
Members
Friends

4
Edutainment modules
Media
Games


Modèle conceptuel


Modèle conceptuel

Un concept est une modélisation multidimensionnelle
d’objets abstraits.


3. Stratégie / modèle conceptuel

2. 4 axes de conception / Conception stratégique / Schéma conceptuel


View a Educative Media
Read / Listen to
a Kinra Story Ch
ar
a
n ing ct
er
ar
Interaction

s
Le

Ad
Send Message
View a Kinra Media

e
to Friend

ve
ti v
ABC

ntu
ca
View an Write a note on Send a Gift to Friend
u edutainment module a member’s Board

res
Ed
Chat

Navigation Navigation Lists
Navigation map and menus

Shortcuts

create my customize
Participate in a Quizz Bedroom my Bedroom
Participate in an enigma

See who’s online
Explore a Last visited Add a Member
Objects as Friend

? create customize
my Avatar my Avatar

Cust

Build C
Explore a
on

create my complete my Popular Places

om
Theme place Profile Preferences
rati

create my

o
Account

Na
Invite "real" Friends
n

mm
plo

Make an artistic creation
tio

v
Visit my

i ga
neighbors’ profile
x

Explore a
iga

u
Bookmarked
E Campus place Place io

nit
n
st

Play a

ie
multi-player game
e

s
nv

Gen
I

Join a Group / Club

e
See a member’s

rat
Profile Update my miniblog

e
lay

Co
P

nt
l

a en
u Play a t
single-player game

Cas Share pictures


HERTA
Avancé CREER ENREGISTRER
CYCLE DE L’EXPERIENCE UTILISATEUR Whislist Préférences
familiale personnelles

Basique EXPLORER COMPOSER PAR
• Pizza • Ingredients
• Tartes • Occasion
• Gateaux • Membre famille

EXPLORER
& CHOISIR

Avancé Basique PARTAGER & ACHETER & Basique Avancé
PARTICIPER ORGANISER
PARTICIPER SUR PUBLIER SUR ORGANISER ORGANISER
Herta Réseaux Shopping list • ToDo list
community sociaux • Rappel
EXPORTER
EXPORTER
JOUER PARTICIPER SUR • Impression • Mobile
Concours Facebook Fan • Email • Calendrier
Page
SERVICE PARTENAIRE
• Commande
PREPARER & • Livraison

S’AMUSER

FOLLOW COOK WITH
Basique
Coach Real-time
wizard

ASIGN SWITCH Avancé
Roles Parent/child
modes



Cas : Peclers Paris


Contenus


Stratégie des contenus
Vue d’ensemble


Vue d’ensemble

• stratégie éditoriale
• rédaction interactive
• SEO (optimisation des moteurs de recherche)
• stratégie de la gestion des contenus
• stratégie des canaux de distribution


Stratégies des contenus
Framework éditorial



Un framework est une structure conceptuelle fondamentale
utilisée pour traiter ou résoudre des sujets complexes.

Un framework éditorial permet d’établir des repères
conceptuels qui guideront la production des contenus
tout au long de leur cycle de vie.


Stratégies des contenus
Matrice éditoriale


Matrice éditoriale

Une matrice éditoriale est une grille de répartition des types
de contenus selon des critères structurants : thèmatiques,
formats, rubriques, périodicité...
C’est un outil de plannification qualitative des contenus.

Une matrice éditoriale permet :
• de faire surgir des déséquilibres conceptuels
• de guider la production des contenus


Mum's Journey
Created August 2009

Prenatal Newborn Baby
It's all about mum Fusional relationship between First seperations. It's starting to feel like a family.
Mum & Baby
Month by month

-12 -11 -10 -9 -8 -7 -6 -5 -4 -3 -2 -1 Birth 1 2 3 4 5 6 7 8 9 10

begin weaning

transition from breastmilk to bottle
leaves the
hospital quality time with baby: evening meals important
general announcement 1st week
pregnancy
test maternity leave check-up leaving baby with nanny or family
look for maternity clothes first night
home
Mum's Milestones

choosing a doctor back at work (for some)

telling maternity feeling more "normal" baby cries when
registration baby blues mum leaves
dad checks ups with doctor/ gynecologist once a month
starting to get out and about
in a "bubble", at home with baby 9 months
anxiety about viability of pregnancy Nesting: final preparation for check-up
buying food adapted baby's arrival
morning sickness for pregnancy birth announced baby starts to sleep through the night
(informal)
start of cravings register for day nursery getting pre-pregnancy body back
birth announced
first ultrasound : (formal cards)
second ultrasound
expected birth date
sharing new developments with friends & family
birth classes rebuilding a couple
notice body changes life after birth baby moves to own room
researching information about pregnancy & birth
first games with baby
baby's first monthly appointments with doctor (vaccinations, check-ups)
kick

I'm a Will he be allergic?

What will baby Is baby ready for
home-m

What can go wrong?
mother! do next? weaning? Wh
Am I pregnant? Are we ready? Why can't baby sleep through?
What new foods, whe
Where can I find the right information? Home or Why is baby crying?
hospital birth?
Boy or girl? When will she
Mum's Questions

Ready for pram?
Pacifier?
What can I eat? Is he comfortable?
what to do about Colic?
Do I need to take supplements? Which hospital? Which name? How do I protect my baby?
Will my baby be What should I expect?
Is he getting enough milk? Can I find nat
food for ba
healthy? Am I a good mother?
Will I be a Breastfeeding How ca
lundi 23 novembre 2009 How do my habits good Mum? or bottle? Is baby developing When will she
affect my baby?

Conception de contenus web
Formatage


Formats éditoriaux

Les formats éditoriaux traditionnels sont bien connus :
article, liste, interview, citation, extrait, note, fiche, résumé,
légende...

La communication digitale a autorisé une démultiplication
des formats éditoriaux...


Formats éditoriaux


Formats éditoriaux

Certains formats ont radicalement changé notre manière de
communiquer et de publier l’information :
• email
• blogs
• questions-réponses (Yahoo Answers...)
• wiki
• social bookmarking
• twitter
• ...


Conception de contenus web
Enrichissement


Enrichissement rédactionnel

Comment enrichir un article, un document, une page..?


Enrichissement rédactionnel

photo
audio
chiffres
diagrammes
fichiers à télécharger
fiches complémentaires
liens contextuels
module interactifs
services (email, partage, impression...)
...


UXD

Structure


Au sein d’un système, qu’il soit de nature
biologique, mécanique, informatique, économique,
social... qu’il soit simple ou complexe, une structure
bien conçue apporte intégrité et adaptabilité.


Dome géodésique de Montréal
prinicipe inventé par Buckminster Fuller


Architecture d’information
Principes


Principes

La pratique de l’architecture d’information concerne la
création de modèles d’organisation et de navigation qui
permettent à l’utilisateur de se déplacer dans les contenus
d’un site de manière efficace et efficiente.


Principes

Pour créer une organisation et une navigation, il est possible
d’aborber la question de 2 manières :
• approche descendante

• approche montante


Principes

• approche descendante

catégories

contenu


Principes

• approche montante

catégories

contenu


5. Structures / architecture d’information

Principes

• combiner les deux approches est souvent nécessaire

catégories

contenu


Principes

• concevoir une structure capable de s’adapter au
changement et de s’accomoder d’une augmentation des
contenus


Principes

• L’unité
de base des structures d’information est le nœud.
• Nœud ≠ Page


Principes

• Structure hiérarchique
• Relation entre les nœuds : type parent-enfant


4. Contenus / architecture d’information

Principes
• Structure hiérarchique


Principes

• Structure matricielle
à 3 dimensions



Principes
• Structure matricielle à 3 dimensions


Principes

• Structure organique


4.Structure architecture d’information
• Contenus / organique : internet

Principes



Principes

• Structure organique : wikipedia


Principes

• Structure séquentielle


Principes

• Vocabulaire et nomenclature
‣ vocabulaire controlé

‣ metadata (information sur l’information)



Principes
• Vocabulaire et nomenclature


Architecture d’information
Wireframes


Présentation : Designer l'Experience Utilisateur

Présentation : Designer l'Experience Utilisateur

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (16)

Ähnlich wie Présentation : Designer l'Experience Utilisateur

Ähnlich wie Présentation : Designer l'Experience Utilisateur (16)

Présentation : Designer l'Experience Utilisateur