Présentation : Designer l'Experience Utilisateur

UXD

Designerl’expérienceutilisateur

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


ContexteUXD


Contexte technologiqueRacines


INFORMATION SCIENCES

COMPUTER SCIENCES



COMPUTER SCIENCES



COMPUTER 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.


COMPUTER SCIENCES

➡ 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 permettant de calculer des positions astronomiques.

➡ 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.


COMPUTER SCIENCES

➡ 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.

➡ ...

➡ 1936 : Alan Turing of Cambridge University, England, published a paper on '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

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 Artificial intelligence Robotics Human–computer interaction Ubiquitous computing

COMPUTER SCIENCES



COMPUTER SCIENCES



COMPUTER SCIENCES

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



“Classical categorization comes to us first 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.”

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


“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". Otlet created the Universal Decimal Classification, one of the most

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.”

Paul Marie Ghislain Otlet (1868 - 1944)

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



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


“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 help of Robert Cailliau and a young student staff at CERN, he

implemented the first successful communication

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.”

Timothy Berners-Lee(1955 - )

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





BibliometricsData modelingDocument managementGroupwareInformation architectureInformation ethicsInformation retrievalInformation societyInformation systemsIntellectual propertyKnowledge managementKnowledge engineeringPersonal information managementSemantic web



Contexte technologiqueLa boucle de l’innovation


Usages

TechnologieTechnologie

Usages

Usages

Technologie

Usages


UsagesUsages

Technologie

TEMPS


Réseaux sociaux

APIW3C

Blogs

Usages

Technologie

Usages


UsagesUsages

Technologie

TEMPS


WEB 1


WEB 1 WEB 2

VOUS ETES ICI


Contexte technologiqueCartographie


WEB


COMPUTER SCIENCES

INFORMATIONNEL /DOCUMENTAIRE /

/ PRESSE

CINEMA / TELEVISION

PHOTO / VIDEO / ARTS

GRAPHIQUES

COMMERCE /MARKETING /

PUBLICITE

JEUX /MULTIMEDIA /

CD-ROM

POLITIQUE /SOCIAL /

INSTITUTIONNEL

ETC.


.COM WEB


COMPUTER SCIENCES


.COM

WEBAUDIOVISUEL

WEBINFORMATIONNEL


COMPUTER SCIENCES


INFORMATIONNELAUDIOVISUEL

• Privilégie le fond• Standardisé• Recherche verticale• Emmersif• Organisation• Intemporalité

• Privilégie la surface• Propriétaire• Recherche horizontale• Immersif• Découverte• Notion de temps



DOCUMENTAIRECOMMUNAUTAIRETRANSACTIONNELCULTURE ET MEDIA

DIVERTISSEMENTMONDES VIRTUELS

WEB 1.0

Showtime.com Candystand.com AOL.com Usenet Info.cern.chMaze


wikipedia

WoWarcraft DailymotionLast.fmVuitton Voyages

second life

Ebay Blogs / NewsFacebook

AUDIOVISUELINFORMATIONNEL


Audiovisuel Informationnel

wikipedia

WoWarcraft Joost You TubeLast.fmVuitton Voyages

second life

NYT.comEbay BlogsFacebook

Wikipedia.comSecond Life



wikipedia

WoWarcraft You TubeLast.fmVuitton Voyages

second life

Ebay Blogs / NewsFacebook

vuitton.com - voyages Guardian.co.uk



wikipedia


second life


Last.fm Dailymotion.com



wikipedia


second life


Last.fmDailymotion.com/jukebox3d


• Privilégie le fond• Standardisé• Recherche verticale• Emmersif• Organisation• Intemporalité

• Privilégie la surface • “Propriétaire”• Recherche horizontale• Immersif• Découverte• Notion de temps



DIVERTISSEMENTMONDESVIRTUELS





WEB 1.5


AUDIOVISUEL



?INFORMATIONNEL


AUDIOVISUEL



INFORMATIQUELOGICIELLE

(OPEN SOURCE)

INFORMATIONNEL


AUDIOVISUEL



WEB 2.0

APPLICATIF

INFORMATIONNEL


AUDIOVISUEL



APPLICATIF

Desktop Application

Rich Desktop Application

Rich Internet Application

INFORMATIONNEL



second life wikipedia

iTunes

Applicatif

Desktop Application



Ebay Desktop

Google Docs

Google Earth

WoWarcraft Last.fmVuitton Voyages

Dailymotion Ebay Blogs / NewsFacebook

Outils de publication web


Logiciel Informationnel


NYT.comEbay BlogsFacebookWoWarcraft Joost You TubeLast.fmVuitton Voyages

iTunes

Applicatif

Ebay Desktop

Google Docs





iTunes

Applicatif

Ebay Desktop

Google Docs




iTunes

Applicatif

Desktop Application



Ebay Desktop

Google Docs

Google Earth

WoWarcraft Last.fmVuitton Voyages

Dailymotion Ebay Blogs / NewsFacebook

Outils de publication web





iTunes

Applicatif

Ebay Desktop

Google Docs



Applicatif


Contexte métierProfils en T



Applicatif


FORME FOND

FONCTION

DESIGN WEB


FORME FOND

FONCTION

DESIGN WEB

CONTENUS &ARCHITECTURE

REALISATION &DEVELOPPEMENT

INTERACTION &INTERFACE


Le design Web nécessite une démarche d’élaborationpluri-disciplinaire et, par conséquent, des intervenants

aux profils “en forme de T” (T-shaped people).

Tlundi 23 novembre 2009

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) signifie 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 diversifier rapidement et d’atteindre une bonne compréhension générale d’autres domaines (la barre transversale du T).

Tlundi 23 novembre 2009

Contexte métierLes métiers du design interactif


Graphiste(s) Développeur(s)

+

Chef de projet

Industrialisation du digitalNaissance d’un nouveau paradigme métier

Années 90


Designer d’interface

+

Developpeur AS3

+Architecte

d’informationDesigner

d’interaction

+Expert

utilisabilité

+Stratégie

des contenus

+Developpeur

Back

+Developpeur

Front

+Developpeur DOM / CSS

Flash Motion designer

+

Chef de projet

+

UX

Industrialisation du digitalNaissance d’un nouveau paradigme métier

Années 2000


Contexte métierElements de l’expérience utilisateur


strategie

périmêtre

structure

squellette

surfacehttp://www.jjg.net/elements/

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


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

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

The Elements of User ExperienceA basic duality: The Web was originally conceived as a hypertextual information space;but the development of increasingly sophisticated front- and back-end technologies hasfostered 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 beyondthe scope of its original application. The goal of this document is to define some of theseterms within their appropriate contexts, and to clarify the underlying relationships amongthese various elements.

Jesse James [email protected]

Visual Design: graphic treatment of interfaceelements (the "look" in "look-and-feel")

Information Architecture: structural designof the information space to facilitateintuitive access to content

Interaction Design: development ofapplication flows to facilitate user tasks,defining how the user interacts withsite functionality

Navigation Design: design of interfaceelements to facilitate the user's movementthrough the information architectureInformation Design: in the Tuftean sense:designing the presentation of informationto facilitate understanding

Functional Specifications: "feature set":detailed descriptions of functionality the sitemust include in order to meet user needs

User Needs: externally derived goalsfor the site; identified through user research,ethno/techno/psychographics, etc.Site Objectives: business, creative, or otherinternally derived goals for the site

Content Requirements: definition ofcontent elements required in the sitein order to meet user needs

Interface Design: as in traditional HCI:design of interface elements to facilitateuser interaction with functionalityInformation Design: in the Tuftean sense:designing the presentation of informationto facilitate understanding

Web as software interface Web as hypertext system

Visual Design: visual treatment of text,graphic page elements and navigationalcomponents

Concrete

Abstract

time

Conception

Completion

FunctionalSpecifications

ContentRequirements

InteractionDesign

InformationArchitecture

Visual Design

Information DesignInterface Design Navigation Design

Site ObjectivesUser Needs


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 auser experience development team. Rather, it seeks to define the key considerations that go into the development of user experience on the Web today.

task-oriented information-oriented

30 March 2000

© 2000 Jesse James Garrett http://www.jjg.net/ia/

strategie

périmêtre

structure

squellette

surface


The Elements of User ExperienceA basic duality: The Web was originally conceived as a hypertextual information space;but the development of increasingly sophisticated front- and back-end technologies hasfostered 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 beyondthe scope of its original application. The goal of this document is to define some of theseterms within their appropriate contexts, and to clarify the underlying relationships amongthese various elements.

Jesse James [email protected]

Visual Design: graphic treatment of interfaceelements (the "look" in "look-and-feel")

Information Architecture: structural designof the information space to facilitateintuitive access to content

Interaction Design: development ofapplication flows to facilitate user tasks,defining how the user interacts withsite functionality

Navigation Design: design of interfaceelements to facilitate the user's movementthrough the information architectureInformation Design: in the Tuftean sense:designing the presentation of informationto facilitate understanding

Functional Specifications: "feature set":detailed descriptions of functionality the sitemust include in order to meet user needs


Content Requirements: definition ofcontent elements required in the sitein order to meet user needs

Interface Design: as in traditional HCI:design of interface elements to facilitateuser interaction with functionalityInformation Design: in the Tuftean sense:designing the presentation of informationto facilitate understanding

Web as software interface Web as hypertext system

Visual Design: visual treatment of text,graphic page elements and navigationalcomponents

Concrete

Abstract

time

Conception

Completion

FunctionalSpecifications

ContentRequirements

InteractionDesign

InformationArchitecture

Visual Design

Information DesignInterface Design Navigation Design

Site ObjectivesUser Needs


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 auser experience development team. Rather, it seeks to define the key considerations that go into the development of user experience on the Web today.

task-oriented information-oriented

30 March 2000

© 2000 Jesse James Garrett http://www.jjg.net/ia/


IA❖ Parcours utilisateurs

❖ Organisation de contenu

❖ Wireframes

❖ Plannification fonctionnelle

IxD❖ Modélisation des objets

❖ Comportement d’interface

❖ Organisation des gabarits

❖ Spéc. fonctionnelles

❖ Process Flow

UID❖ Design d’interface

❖ Spécifications graphiques

❖ Catalogue d’objets

Usability❖ Conception des tests

❖ Recommandation et

rapport d’utilisabilité

Prototype❖ Composants Front Flash

❖ Gabarits XHTML

❖ Charte CSS

❖ Librairie d’objets

UX Strategy❖ Definition des besoins

❖ Etude de contextes d’usage

❖ Strategie fonctionnelle

❖ Strategie des contenus

UX DESIGN


StratégieUXD


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)

Quantitatif(validation)

Buts et attitudes(ce qu’ils disent)

Comportement(ce qu’ils font)

Interviews utilisateurs

Tests d’utilisabilité

Sondagesutilisateurs

Analyses de traffic & logs


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.

Interview 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.

Sondage utilisateur


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.

Test d’utilisabilité


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 PaulingPrix 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


Workshop


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.



Corolle Kinra Girls

Intimate

Extimate

My accountMy profileMy avatar

My bedroomThe schoolAdventure places

MembersFriends

Edutainment modulesMediaGames

2

3

4

1

Who I am

Where I go

Who I meet

What I do

mardi 21 juillet 2009


Modèle conceptuel


Modèle conceptuel

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


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

3. Stratégie / modèle conceptuel


Interaction

Inve

stig

atio

nB

uild

Com

munities

Navigation

Custo

m N

avigaion

Explo

ratio

n

Characters Adventu

res

Generate C

ontent

Educa

tive

Le

arni

ngCasu

al P

lay

Explore a

Campus place

Explore a

Theme place

Explore a

Objects

?

Bookmarked

Place

Popular Places

View an

edutainment module

ABCABC

View a Kinra Media

View a Educative Media

create

my Avatar

create my

Bedroom

customize

my Bedroom

complete my

Preferences

customize

my Avatar

Navigation map

Navigation Lists

and menus

Shortcuts

Last visited

See a member’s

Profile

Visit my

neighbors’ profile

See who’s online

Chat

Join a Group / Club

Invite "real" Friends

Add a Member

as Friend

Send Message

to Friend

Send a Gift to FriendWrite a note on

a member’s Board

Participate in an enigma

Make an artistic creation

Update my miniblog

Share pictures

Participate in a Quizz

Play a

single-player game

Play a

multi-player game

Read / Listen to

a Kinra Story

create my

Account

create my

Profile


EXPLORER & CHOISIR

ACHETER & ORGANISER

PREPARER &S’AMUSER

PARTAGER & PARTICIPER

HERTACYCLE DE L’EXPERIENCE UTILISATEUR

Basique

Avancé

EXPLORER

• Pizza• Tartes• Gateaux

CREER

Whislistfamiliale

ENREGISTRER

Préférencespersonnelles

COMPOSER PAR

• Ingredients• Occasion• Membre famille

Avancé

BasiqueFOLLOW

CoachCOOK WITH

Real-time wizard

ASIGN

RolesSWITCH

Parent/childmodes

Basique Avancé

ORGANISER

Shopping list

ORGANISER

• ToDo list• Rappel

EXPORTER

• Impression• Email

EXPORTER

• Mobile• Calendrier

Avancé Basique

SERVICE PARTENAIRE

• Commande• Livraison

PARTICIPER SUR

Herta community

PUBLIER SUR

Réseaux sociaux

JOUER

ConcoursPARTICIPER SUR

Facebook Fan Page


Cas : Peclers Paris













Contenus


Stratégie des contenusVue 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

Vue d’ensemble


Stratégies des contenusFramework é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.

Framework éditorial
















Stratégies des contenusMatrice é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

Matrice éditoriale




Confident and independant.

Mum

's M

ilest

ones

Mum

's Q

uest

ions

-9-10-11-12 -8 -7 -6 -5 -4 -3 -2 -1 Birth 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

Baby

's M

ilest

ones

Mum's JourneyCreated August 2009

First seperations. It's starting to feel like a family.Fusional relationship between Mum & Baby

ToddlerBabyNewbornIt's all about mumPrenatal

Mon

th b

y m

onth

baby can be naughty

teaching good behaviour

baby starts start potty training

baby starts to have friends

first 'real' holiday as a family

2 year check up

with Pediatri-

cian

Baby goes to

pre-school

toddler dresses on

his own

Can baby eat like us?Is he getting too much sugar?

How to deal with tantrums?

How can I teach him?

When will he play by himself?

When will he make friends?

What games can i find for baby online?

Is he ready for school?

Is he happy?

How to introduce a little brother/sister?

Will he remember his baby food?

What about a second baby?

What games can/ should we play?

How do I know my baby is well/healthy?

What should I do when baby is too excited to sleep?

climbs

dances to music

baby's digestive system reaches maturity

masters some words

start of tricycle riding

uses a fork

learns to rundevelops his balance

first sentences & can start to sing

toilet-trained

develops speech more quickly

still has specific nutritional needs

climbs stairs step by step

develops complete set of teeth

ridesbike

right or left handed?

better hand coordination

baby cries when mum leaves

feeling more "normal"

starting to get out and about

begin weaning

family mealtimes

dealing with "no"!

sharing new developments with friends & family

baby moves to own room

first games with baby

getting pre-pregnancy body back

monthly appointments with doctor (vaccinations, check-ups)

baby starts to sleep through the night

9 months check-up

baby's first

birthday

Is baby ready for weaning?

Ready for pram?what to do about Colic?

Can I find natural or food for baby?

How much?

Is he ready for finger food?

When will she feed herself?

can baby eat birthday cake?home-made or baby food?

When can I give her cow's milk?

How can I baby proof my house?

What to do with a fussy eater?

How do I teach baby good manners?

How can I save money?

Which foods are safe for baby?

When will she really say "mum" and "dad"?

What new foods, when and how?

How can I stimulate baby's development?

How do I protect my baby?

tries to catch his feet

babbles

first teeth

grabs his bib

more mature digestive system

stands on all fours

grabs his bib

begins to chew

better breathing while eating

starts self feeding

understands yes and no

shows likes and dislikes

can swallow mushy food

sees clearlyasserts independence

knows his name

masters chewing

first step

expresses refusal

language initiation

eats with spoon

starts to understand how objects work reinforced immune system

says "No" all the time

confident in walking

turns pages of books

starts to draw

shows when he is happy or scared

enjoys looking at books

waves bye bye

understands gestures and surrounding objects

recognises direction of sound

starts to say 'ma' and 'da'

sits with support

crawls

stands up

plays with feet

sits by himeself

picks up objects

grabs spoon

eats in highchair

passes objects

almost perfect vision

stomachcapacity250ml

laughs and smiles at familiar faces

recognises mum'sabsence

recognises smells and colours

drops things

takes food to mouth

drinks with help

says 'mum' and 'dad' with sense

chases things with his index

drinks from cup with help

better tongue and lip control

tries to eat alone

maintains eye contact

Lifts head 45°

Cries when hungry

grasps finger

recognises his hands

grasps finger

digestive system is immature

recognises voices and sounds

Listens and stays alert

restless before feeding

learns sucking reflex

first smile first laugh

stomach capacity

30 to 120ml

leaves the hospital

first night home

1st week check-up

quality time with baby: evening meals important

back at work (for some)

leaving baby with nanny or family

in a "bubble", at home with baby

birth announced (informal)

birth announced(formal cards)

rebuilding a couple life after birth

transition from breastmilk to bottle

Why is he losing weight?

Which name?Is he getting enough milk?

What can I eat to have the best milk?

Pacifier?

Is he comfortable?

Will he be allergic?

What will baby do next?

Why is baby crying?

Breastfeeding or bottle?

Am I a good mother?Is baby developing

normally?

Why can't baby sleep through?

baby blues

choosing a doctor

general announcement

morning sickness

start of cravings register for day nursery

notice body changes

anxiety about viability of pregnancy

look for maternity clothes

researching information about pregnancy & birth

checks ups with doctor/ gynecologist once a month

pregnancy test

baby's first kick

begins moving

tellingdad

maternityregistration

first ultrasound : expected birth date

Nesting: final preparation for baby's arrival

second ultrasound

birth classes

maternity leave

buying food adapted for pregnancy

Can my baby feel and think?

Do I need to take supplements?What can I eat?

Am I pregnant?Where can I find the right information?

Which hospital?

How do my habits affect my baby?

What should I expect?

Home or hospital birth? Boy or girl?

Are we ready?

Will my baby be healthy?

the embryo becomes a fœtus (90% of

organs have started to

grow)

umbilical cord starts

to grow

100% of organs are

formed

develops touch

sensitivity

sex is confirmed

develops capacity to

smell develops hearing

eye sight develops

brain development

quickens

able to form memories

false contractions adopts a

sleep pattern

baby engages

What can go wrong?

Will I be a good Mum?

I'm a mother!


Conception de contenus webFormatage


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


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 webEnrichissement


Enrichissement rédactionnel

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



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




photoaudiochiffresdiagrammesfichiers à téléchargerfiches complémentairesliens contextuelsmodule interactifsservices (email, partage, impression...)...


StructureUXD


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éalprinicipe inventé par Buckminster Fuller


Architecture d’informationPrincipes


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


c a t é g o r i e s

• approche descendante

Principes

contenu



• approche montante

Principes

contenu



• combiner les deux approches est souvent nécessaire

Principes

contenu

5. Structures / architecture d’information


• 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

Principes


4. Contenus / architecture d’information

• Structure hiérarchique

Principes




Principes




Principes




Principes


• Structure matricielleà 3 dimensions

Principes


• Structure matricielle à 3 dimensions


Principes


• Structure matricielle à 3 dimensions


Principes


• Structure organique

Principes



Principes

• Structure organique : internet


• Structure organique : wikipedia


Principes


• Structure séquentielle

Principes


• Structure séquentielle


Principes


• Vocabulaire et nomenclature‣ vocabulaire controlé‣ metadata (information sur l’information)

Principes


• Vocabulaire et nomenclature


Principes




Principes




Principes




Principes




Principes


Architecture d’informationWireframes


xxxxxxx

xxxxxxx

xxxxxxx

xxxxxxx

xxxxxxx

xxxxxxx

xxxxxxx

•xxxxxxxx•xxx•xxxxxxxx•xxxxxx•xxxxxxxx•xxxxxxx

lipsumlipsum

lipsum

lipsum Lorem“Sed ut perspiciatis unde omnis iste

natus error sit voluptatem “

iatis unde omnis iste

natus error sit

voluptatem iatis unde

omnis iste natus error sit

voluptatem

iatis unde omnis iste

natus error sit

voluptatem

Lorem“Sed ut perspiciatis unde omnis iste

natus error sit voluptatem “iatis unde omnis iste natus error sit voluptatem

iatis unde omnis iste natus error sit voluptatem


Lorem“Sed ut perspiciatis unde omnis iste natus error sit voluptatem “




ACCUEIL

PEAU YEUX

FICHES CONSEIL

GAMMEGAMME

GAMME

FICHE PRODUITFICHE PRODUIT

3.1

3.2

3.1.1

FICHES CONSEIL

GAMMEGAMME

GAMME


4.1

4.2

4.1.1

3.0 4.0

RECHERCHE

PLAN DU SITE

CONTACT

MENTIONS LEGALES

CREDITS

MA SELECTION

AUTRES SITES


KLORANE

DECOUVRIR

PLANTES REGION

5.0

5.2 NOS ENGAGEMENTS

5.1 ACTUALITES

5.3 LA RECHERCHE

5.4 LA PHYTOFILIERE

5.5

FICHE PLANTE

QUESTIONS/

REPONSESQUESTIONS/

REPONSES

FICHE PLANTE

?

Problématique


Zoning

Un gabarit (ou squelette ou layout) est la structure visuelle persistante qui définit la charpente d’une interface.La variations d’un gabarit définissent en partie les états d’une interface.Les gabarits constituent le fondement des wireframes.La méthode de construction d’un gabarit s’appelle le zoning.


Wireframes

Les wireframes sont des représentations visuelles qui capturent à elles seules l’ensemble des décisions stratégiques, fonctionnelles, d’architecture d’information et d’ergonomie.

Ils servent de référence pour le design graphique et pour le développement du projet digital. Ils contiennent différents niveaux de précision selon le contexte.



Zoning

Créer votre agenda santé

Au coeur de l’actualité

Le stress est-il communicatif ?

Benoit Monté psychologue

répond à toutes nos questions...

Chute de cheveux

Comment feiner la chute de ou favoriser

la reposusse

Lutter contre les rhumes à répétition

Le témoignage d’une internaute à

découvrir

PodcastA l’occasion de la semaine du sommeil, le Pr Marc Leroy dresse un bilan de l’éfficacité clinique de la phythothérapie

Santé

Beauté / Bien-être

Témoignages

Digestion difficileCirculationFatigueStressSommeilMaux de têteEtat grippalDouleurs articulaires FeminitéEquilibreVitalitéMaux de l’hiverConfort respiratoireNutrition

Voir tous les sujets

MinceurChute des cheveuxBeauté des cheveuxDermo-nutritionBronzage


StressSommeilRhumeMinceurMénopause


Produits

AromathérapiePhytaroma

Améliorer son confort respiratoire

Phytothérapie Elusanes

Résoudre les troubles passagers

du sommeil

Dermo-nutritionDoriance Anti-âge

Lutter contre le photo-vieillissement

En quelques clics, complétez votre profil santé et profitez de conseils personnalisés pour garder la forme !

Partout avec vous, même sur votre mobile

1

2

3

Vos astuces forme

Les conseils d’un phytothérapeute

Vos conseils santé naturelle tout au long de l’année

Créer mon agenda

Connaissance & plantes

Le test du moisDécouvrez votre profil minceur

Menez vous une vie stressante ?

oui pas spécialement pas du tout

Consultez plus de 150 articles de référence sur la phytothérapie

Posez des questions santé, forme et bien-être, des experts répondent à vos questions

?

Votre pharmacie

Naturactive

code poste OK

Trouvez les produits Naturactive, les plus proces de chez vous

rechercher Professionnels Accueil Le magazine Votre santé Nos produits Naturactive

HEADER

COL 1 COL 2 COL 3

NAV


Zoning

Créer votre agenda santé

Au coeur de l’actualité

Le stress est-il communicatif ?

Benoit Monté psychologue

répond à toutes nos questions...

Chute de cheveux

Comment feiner la chute de ou favoriser

la reposusse

Lutter contre les rhumes à répétition

Le témoignage d’une internaute à

découvrir

PodcastA l’occasion de la semaine du sommeil, le Pr Marc Leroy dresse un bilan de l’éfficacité clinique de la phythothérapie

Santé

Beauté / Bien-être

Témoignages

Digestion difficileCirculationFatigueStressSommeilMaux de têteEtat grippalDouleurs articulaires FeminitéEquilibreVitalitéMaux de l’hiverConfort respiratoireNutrition


MinceurChute des cheveuxBeauté des cheveuxDermo-nutritionBronzage


StressSommeilRhumeMinceurMénopause


Produits

AromathérapiePhytaroma

Améliorer son confort respiratoire

Phytothérapie Elusanes

Résoudre les troubles passagers

du sommeil

Dermo-nutritionDoriance Anti-âge

Lutter contre le photo-vieillissement

En quelques clics, complétez votre profil santé et profitez de conseils personnalisés pour garder la forme !

Partout avec vous, même sur votre mobile

1

2

3

Vos astuces forme

Les conseils d’un phytothérapeute

Vos conseils santé naturelle tout au long de l’année

Créer mon agenda

Connaissance & plantes

Le test du moisDécouvrez votre profil minceur

Menez vous une vie stressante ?

oui pas spécialement pas du tout

Consultez plus de 150 articles de référence sur la phytothérapie

Posez des questions santé, forme et bien-être, des experts répondent à vos questions

?

Votre pharmacie

Naturactive

code poste OK

Trouvez les produits Naturactive, les plus proces de chez vous

rechercher Professionnels Accueil Le magazine Votre santé Nos produits Naturactive

MARQUE

INFORMATIONS DʼACTUALITÉ

PÉDAGOGIQUE

ACCOMPAGNEMENT

INFORMATIONS DE FOND

PARTICIPATIF

CRM

ACCOMPAGNEMENT

THEMES

MARQUE

PÉDAGOGIQUE

PARTICIPATIF


Zoning


Zoning


Exemples


Exemples


Exemples


Exemples


Exemples


Architecture d’informationDesign d’information


“In order to do a better job of developing, communicating, and pursuing a strategy, you need to learn to think like a designer” Tim Brown, ceo IDEO, Strategy by Design, June 2005


Tactique

Stratégique

ConceptionDocumentation

Design fonctionnel

Structuration de

l’information

Spécificationlogique

Conceptionstratégique

Etudesstratégiques

Analyses statistiques


TactiqueTactique

Stratégique

ConceptionDocumentation

Design fonctionnel

Structuration de

l’information

Spécificationlogique

ConceptionStratégique

Etudesstratégiques

Analyses statistiques







Corolle Kinra Girls

Intimate

Extimate

My accountMy profileMy avatar

My bedroomThe schoolAdventure places

MembersFriends

Edutainment modulesMediaGames

2

3

4

1

Who I am

Where I go

Who I meet

What I do

mardi 21 juillet 2009lundi 23 novembre 2009

Interaction

Inve

stig

atio

nB

uild

Com

munities

Navigation

Custo

m N

avigaion

Explo

ratio

n

Characters Adventu

res

Generate C

ontent

Educa

tive

Le

arni

ng

Casual

Pla

y

Explore a

Campus place

Explore a

Theme place

Explore a

Objects

?

Bookmarked

Place

Popular Places

View an

edutainment module

ABCABC

View a Kinra Media

View a Educative Media

create

my Avatar

create my

Bedroom

customize

my Bedroom

complete my

Preferences

customize

my Avatar

Navigation map

Navigation Lists

and menus

Shortcuts

Last visited

See a member’s

Profile

Visit my

neighbors’ profile

See who’s online

Chat

Join a Group / Club

Invite "real" Friends

Add a Member

as Friend

Send Message

to Friend

Send a Gift to FriendWrite a note on

a member’s Board

Participate in an enigma

Make an artistic creation

Update my miniblog

Share pictures

Participate in a Quizz

Play a

single-player game

Play a

multi-player game

Read / Listen to

a Kinra Story

create my

Account

create my

Profile



2D

pré-achat

achat

post-achat

Avatar

Magazine

en ligne

Contenus et offres

personnalisées

consulte

Profilcrée

reçoit

coach

Evénements

virtuels

regarde,participe

Gifted Friends

Espaces

virtuelles non-

marchands

crée

visite

Wishlist

3D

Garde

robe

Plateforme Gifted

User concept model

Service cadeaux

consulte l!avatar de ses amis

Feedbacks

Livraisons

suit recoit

Conseiller personnel

browse, achète, personnalise des produits

envoie des cadeaux

conduit à

Ambassadeurs+ Groupes

conseillent des nouveautés

Boutiques en ligne

2D

3D

conseille

Gifted User

consultent,essaient

partagent

organise

crée

ajout de produits

Produit

Commande

peut renvoyer

donneInterface

customisée

créepersonnalise

personnalise

lundi 21 septembre 2009


CISCO BFM TV / WIKITV

Education

Economie

Santé Sport

Environ.t

etc.

CERCLES

de discussions

Thème

Thème

Thème

ThèmeThème

ThèmeThème

ThèmeThème

Thème

Thème

Thème

ThèmeThème Thème Thème

Thème

Cercle de discussion (détail)

Présentationthéme

Forum/ blog de discussion

(sujet)

Projets

Présentationprojet

Commentaires

sélection de discussions sélection de projetsMODERATION

THEMATIQUES PROJETS

COMMUNAUTEProfil simple Créer un projet

Wiki projet

ACCUEILCISCO BFM WIKITV

Annonce emission LIVE

Archives emissions

Présentation cercles de discussions

Projets Discussions récentes

LIVE

sélection de membres

Messagerie interne

Inscription

Simple

Créateur Validation

Thème

BLOG REDACTIONBlog rédaction Commentaires

ARCHIVES EMISSIONSPrésentation

emission

RemontéeCommentaires

CISCO BFM WIKITV

LIVEFLUX LIVE

Commentaires

Liste participants

Remontée Projets

Commentairesretenus par la

rédaction

Sujets

Sujets

Sujets Sujets

Sujets

Sujets

Sujets

Sujets

Sujets

Sujets

Sujets

SujetsSujets

Sujets

Sujets

Sujets

Sujets

Sujets

Remontée Sujets

Profils participants

Archives des emissions

Phase 2

Phase 2



Choose Guys / Girls } } } }

RedTab Engineered Blue Vintage

Details

preview

Browse collections

M / W

Display product Product

picture

Discover the perfect match

Improve your look

Discover the perfect match Improve your look

Find your size (cf truejeans.com, zafu.com)

Product

picture

Tops

Bottoms

Shoes

Accessories

Expert

review

Other

reviews

1. measure

2. body shape

Add to wishlist

Pushed content

Improve your look

Add to wishlist

Pushed content


Event selection

Pushed content


Add to wishlist

Pushed content

Event selection

Browse by

events

Tops

Bottoms

Shoes

Accessories

Improve your look

Add to wishlist

Pushed content

Colours

Patterns

Details

Zoom

Find your size

Find your size Find your size

Event selection


Improve your look

Add to wishlist

Menu

Event selection

Registration form

Find your size (results)

3. results


Add to wishlist

Pushed content

Wishlist

Product list

Registration form


Event selection

Pushed content

Want to feel different ?

Browse by

mood

Tops

Bottoms

Shoes

Accessories

Improve your look

Add to wishlist

Pushed content

Find your size



Post your look / reviews / comment

Users

reviews

Other

reviews

Registration form

Receive info (newsletter / RSS...)

Product

reviews

Other

reviews

PRINT

FIT

GU

IDE

CA

TA

LO

GC

OM

MU

NIT

YP

ER

SO

NN

AL



Liste des emissions

Accueil

Cercles de discussions Emissions

Landing page

Sommaire Sujet (forum) ConnexionEmissionsLive

Blog

Sommaire

Poster un

commentaire

Poster un

commentaire

Poster un

commentaire

Voter

Projets

Sommaire

Poster un

sujet

Mon compte

Mon Profil Mes préférences

Editer mon

profil public

Editer mes

informations

Connexion &

Inscription

Validation

email

Phase 2

Proposer un

sujet

Thématique

Flux des discussions tous sujets

Projets en relation

Projets récents

Billet Blog ds théme

Flux des discussions tous thèmes

Membres les + actifs

Flux video Live

Discussionlive

Poster un

commentaire

Baromêtre

Liste des sujets

Supprimer

mon compte

Flux des résumés

Profile Versac

Flux des discussions tous thèmes

Profile Versac

Membres les + actifs

Flux des comentaires

Contacts

Billet

PrésentationProjet

Présentation projet (extrait)

Profile créateur

Fichiers joints

Liste des projets

Projets les plus

commentés

Inscription

CISCO : HUMAN NETWORK

Push prochaine emission

Projets les plus récents

Video de présentation

Proposer un projet

Espace Administration

Projet

Forum Projet

Vidéo dernière emiision

Poster un

commentaire

Liste des catégories

Catégorie Projets

Liste des projets

Projets les plus

commentés

Projets les plus récents

Liste des catégories

Article présentation

(suite)

Upload

video

Texte de

présentation

Upload

Photos

Upload

documents

Gestion du

forum

Validation ouverture

espace projet

Galerie photos




3. Stratégie / notions de design d’information

1.1 Sommaire 1.2 Thème 1.3 Carnet 1.4 Billet a.1 Identification 1.4 Billet + form. commentaire

a.2 inscription

0.0 Accueil non loggé

PARCOURIR LES CARNETS REDIGER UN COMMENTAIRE

CREER UN CARNET

a.1 Identification

a.2 inscription

c.4.1 Reglages Carnet

c.4.3 Rediger un billet

REDIGER UN BILLET

PARCOURIR LES Q-R

2.1 Sommaire 2.2 Thème

REPONDRE A UNE QUESTION

a.1 Identification

a.2 inscription

2.3 Répondre à une question

POSER UNE QUESTION

a.1 Identification

a.2 inscription

2.4 Poser une question

PARCOURIR LA COMMUNAUTE

3.1 Communauté 3.1.2 Tous les groupes

3.1.3 Thème

REJOINDRE UN GROUPE

3.1.4 Groupe (fiche)

3.2 Tous les membres

3.2.2 Fiche membre

a.1 Identification

a.2 inscription

g.0. Inscription groupe

g.1 Groupe (accueil)

a.3 Confirmationemail

AJOUTER PARENTS PRÉFÉRÉS

a.1 Identification

a.2 inscription

RECHERCHER

CONTACTER MEMBRE

a.1 Identification

a.2 inscription

3.2.2 Fiche membre + pop-in message

3.2.2 Fiche membre + pop-in alerte

AJOUTER AMIS

a.1 Identification

a.2 inscription

3.2.2 Fiche membre + pop-in message

EXPLORER UN GROUPE

g.2 Discussiong.2 Discussions groupe

PARTICIPER A UNE DISCUSSION

g.3 Publier un commentaire

PUBLIER UNE DISCUSSION

g.4 Créer une discussion

0.2 Créer votre carnet

0.1 Rediger un commentaire

0.3 Poser une question

R.0 Recherche R.2.1 Résultats editorial

R.0.1.1 Carnets

R.0.1.2 Q-R

R.1 Explorer (tags)

m.1 bloc Confirmation

R.0.1Editorial

R.0.2 Communauté

R.0.2.1 Membres

R.0.1.2 Groupes

RESULTATS DE RECHERCHE

R.2.2 Résultats Communauté

f.2 Envoyer à un ami

FONCTIONS ASSOCIÉES

m.1. bloc Confirmation

f.2.1 Pop-in Formulaire

f.2 Envoyer à un ami

FONCTIONS ASSOCIÉES




REPONSES

f.3 Alerter l’administrateur



2.3 Question 2.3.2 Réponse

Communauté

Questions-réponses

Carnets de parents

RechercheACCUEIL

V2


UXD

Interaction


Définition

Le design d’interaction appliqué au secteur logiciel et web est la discipline qui traite du comportement de l’interface avec laquelle interagit un utilisateur.

La discipline s’intéresse au comportement des gabarits et des composants d’interface.


Design d’interactionPrototype


Interactif

Basse résolution Haute résolution

Statique

Degré de précision


Interactif

Statique




Interactif

SketchingStatique





Interactif

Low résolution Hi résolution

SketchingStatique


Interactif

StatiqueSketching




InteractifPrototype papier

StatiqueSketching





Interactif


Prototype papier

SketchingStatique


Interactif

SketchingStatique

Prototype papier

Sketching




Interactif

SketchingStatique

Prototype papier

Sketching Ecrans(psd, jpg...)





Interactif


SketchingStatique

Prototype papier

Sketching Ecrans(psd, jpg...)


Interactif

SketchingStatique

Prototype papier

Sketching Ecrans




Interactif

SketchingStatique

Prototype papier

Sketching Ecrans

Prototype digital (HTML, Flash)





Interactif


SketchingStatique

Prototype papier

Sketching Mockup

Prototype digital (HTML, Flash)


Interactif

SketchingStatique

Prototype papier

Sketching Ecrans

Prototype digital




Interactif

Statique

Prototype digital

Prototype papier

Sketching Ecrans

Wireframes




Interactif

Statique

Prototype digital

Prototype papier

Sketching Ecrans

WireframesNIDO Home Moments Health Matters Our Range

Hi Lynn | My account | Log Out | Help

NIDO Website - 1.1.1 Diary

My Activities | Capture a moment | Diary | Highlights | My friends | Health Tracker

Contact Us Privacy Terms & privacy Copyrights Send to a friend

John’s Family Diary

Oscar Angelica

Family & Friends

Your highlights Slideshow

You have new comments !

> View all

You have: 6 family members, 14 friends

3

Erin has accepted your invitation

Health MattersSpotting & Treating Food Allergies

> How to know if your child is at risk

!

you have new comments!3

Your Friends (14)

Edit my pro!le

Recently added

View all

Mary, Ellen, Peter

Comments

Show me All entries Only highlightsStarting from !rst day | today

12MAY

Lorem ipsum et diliagt gentris sed etiam unique valor, melior paritus. Et uni soesu terrae submitta... Si meliora est vede meccum !

Everyday | 2 comments new

11MAY



10MAY

Lorem ipsum et diliagt gentris sed etiam unique valor, melior paritus. Et uni soesu terrae submitta...

Everyday | 2 comments

08MAY



06MAY



TELL MY FRIENDS NOW !

Edit friends list

05MAY








Interactif

Statique

Prototype digital

Prototype papier

Sketching Ecrans

Wireframes

NIDO Home Moments Health Matters Our Range





Oscar Angelica





Your Friends (14)

Edit my pro!le

Recently added

View all

Mary, Ellen, Peter

Comments


12MAY



11MAY



10MAY



08MAY



06MAY




Edit friends list

05MAY




Interactif

Statique

Prototype digital

Prototype papier

Sketching Ecrans







Oscar Angelica

Family & Friends



> View all


3




!


Your Friends (14)

Edit my pro!le

Recently added

View all

Mary, Ellen, Peter

Comments


12MAY



11MAY



10MAY



08MAY



06MAY




Edit friends list

05MAY






Interactif

Statique

Prototype digital

Prototype papier

Sketching Ecrans







Oscar Angelica

Family & Friends



> View all


3




!


Your Friends (14)

Edit my pro!le

Recently added

View all

Mary, Ellen, Peter

Comments


12MAY



11MAY



10MAY



08MAY



06MAY




Edit friends list

05MAY







Interactif

Statique


Prototype digital

Prototype papier

Sketching Mockup







Oscar Angelica

Family & Friends



> View all


3




!


Your Friends (14)

Edit my pro!le

Recently added

View all

Mary, Ellen, Peter

Comments


12MAY



11MAY



10MAY



08MAY



06MAY




Edit friends list

05MAY




Interactif

Statique


Prototype digital

Prototype papier

Sketching Ecrans







Oscar Angelica

Family & Friends



> View all


3




!


Your Friends (14)

Edit my pro!le

Recently added

View all

Mary, Ellen, Peter

Comments


12MAY



11MAY



10MAY



08MAY



06MAY




Edit friends list

05MAY





Design d’interactionDesigner les comportements d’objets


Formalisation

• Codes visuels montrant le potentiel d’interaction


Drag and Drop


‣ Codes visuels montrant le potentiel d’interaction

Formalisation

Déplacements au click et motion design


Formalisation

• Scénario d’interaction statique



Formalisation

• Charte d’interaction (statique ou interactive)


Formalisation

version : 24/11/08 auteur : David Raichman

1.0 Interface générale

5

3

1

Remarque générale sur le motion design : on prend ici comme principe que tout changement d’état de l’interface se fera par un interpolation sur les propriétés concernées (Tween avec easing Out).

2

1 Terre

•rollOver : •press :

Comportement local - cas hors France

Sur toute la terre, en dehors des région, le curseur passe en état spécial main

Le curseur main diminue de taille de 10%. Si une fenêtre est ouverte (élément 5, ci-contre) lorsqu’on déplace la terre, celle ci-se referme aussitôt par un mouvement inverse avec lequel elle s’est ouverte.

La rotation de la terre se fait uniquement selon l’axe de ci-dessus.


Formalisation

• Wireframe animé


Formalisation

7. Interaction / design d’interaction
