Introduction agrave lrsquoergonomie

Introduction agrave lrsquoergonomie

Cornelia Laros

1

Cornelia Laros

di983545 G983530983588t983535o983539

Introduction agrave lrsquoergonomie

Ergonomique ou pas

2

Cornelia Laros

Introduction agrave lrsquoergonomie

Ergonomique ou pas3

Cornelia Laros

Introduction agrave lrsquoergonomie

Ergonomique ou pas4

Cornelia Laros

Introduction agrave lrsquoergonomie

Ergonomique ou pas5

Cornelia Laros

Introduction agrave lrsquoergonomie

Ergonomique ou pas6

Cornelia Laros

Introduction agrave lrsquoergonomie

Ergonomique ou pas7

Cornelia Laros

1 Design nrsquoest pas ergonomique

2 Adapteacute agrave la physiologie humaine

3 Adapteacute agrave un contexte drsquoutilisation pour reacutealiser une tacircche donneacutee

4 Adapteacute agrave la diversiteacute et agrave la variabiliteacute des personnes

Introduction agrave lrsquoergonomie

Ergonomique ou pas8

Cornelia Laros

A B

C D

Introduction agrave lrsquoergonomie

Tacircche vs Activiteacute9

Cornelia Laros

Introduction agrave lrsquoergonomie

Tacircche vs Activiteacute10

Cornelia Laros

Deacuteterminants externes (caracteacuteristiques de la

situation)

Introduction agrave lrsquoergonomie

Scheacutema agrave 5 carreacutes11

Cornelia Laros

Deacuteterminants internes (caracteacuteristiques de

lrsquoutilisateur)

Activiteacute

Effets sur la personne (santeacute motivation compeacutetencehellip)

Effets sur lrsquoentreprise (production revenus stocks

usure du mateacuterielhellip)

Reacutet983542o-ac983545983534983587983585Reacutet983542o-ac983545983534983587983585

In983545e983590983527c983545983535o983585 h983586983538983593983589 ma983579983533983534n983589 983591e983550983534983589n983545 I983585te983542983527983581t983535o983539 H983586983593m983589 983629983554983588tegraveme

Introduction agrave lrsquoergonomie

Catachregravese

12

Cornelia Laros

Art de deacutetourner un objet de la tacircche pour laquelle il a eacuteteacute conccedilu

Introduction agrave lrsquoergonomie

Ergonomique ne veux rien dire

Pour comprendre revenons aux origineshellip

13

Cornelia Laros

Introduction agrave lrsquoergonomie

Les origines14

Cornelia Laros

1857 1949

1880

1908

1946

Premiegravere utilisation du terme laquo ergonomie raquo par Jastrzebowski Fordisme

Institutionnalisation de la meacutedecine du travail

Le terme laquo ergonomie raquo est employeacute par Murrel

Taylorisme

1987Toyota Production System

XVIIIe Deacuteveloppement de lrsquoapproche productiviste du travail

XVIIe

Premiers eacutecrits et classification des maladies professionnelles

Moyen acircgeEtude des conditions de travail et des facteurs environnementaux

Antiquiteacute

Racines de lrsquoapproche hygieacuteniste du travail

Introduction agrave lrsquoergonomie

Ameacuteliorer agrave la fois la productiviteacute et les

conditions de travailParce qursquoun employeacute motiveacute et en bonne santeacute est plus

productif et tout le monde y gagne

15

Cornelia Laros

Introduction agrave lrsquoergonomie

Inter-discplinariteacute16

Cornelia Laros

Ps983554983581ho983536983586983594983535e

In983531eacuteni983530983542983535e

Ne983547r983587983543983581i983530n983579983589983588

Ph983554983588i983586l983587983531i983530

Meacutede983579983534983585983589

Soc983534983587983536o983594983534983589

Ergonomie

Introduction agrave lrsquoergonomie

Domaines drsquointervention17

Cornelia Laros

Ps983554983581ho983536983586983594983535eIn983531eacuteni983530983542983535e

Ne983547r983587983543983581i983530n983579983589983588

Phi983543983534983587983537og983534983589Meacutede983579983534983585983589

Soc983534983587983536o983594983534983589Ergonomie

Ergonomie physique

Ergonomie organisationnelle

Ergonomie cognitive

Optimisation des situations et postes de travail dans leur

relation avec lrsquoactiviteacute physique

Optimisation des systegravemes socio-techniques structures

organisationnelles regravegles et processus

Optimisation du travail mental perception prise de deacutecision

reacutesolution de problegravemes

Introduction agrave lrsquoergonomie

Domaines drsquointervention18

Cornelia Laros

Organisationnelle 10

Physique 20

Cognitive 70

Introduction agrave lrsquoergonomie

Quizz time

19

Cornelia Laros

text

A - Lrsquoergonomie sert agravehellip20

Cornelia Laros

1 ameacuteliorer les conditions de travail

2 faire gagner plus drsquoargent agrave lrsquoentreprise

3 ameacuteliorer lrsquoestheacutetique

4 comprendre comment ameacuteliorer un produit

text

B - Quelles affirmations sont vraies

21

Cornelia Laros

1 Lrsquoergonomie srsquoattache agrave comprendre le travail pour le transformer

2 Il est possible de concevoir une IHM qui fonctionne pour tout le monde en se basant sur des normes

3 Lrsquoutilisateur va se servir de votre produit de la faccedilon dont vous lrsquoavez imagineacute

4 Lrsquoutilisateur interpregravete une tacircche comme un problegraveme qursquoil doit reacutesoudre en faisant avec ses caracteacuteristiques et les moyens mis agrave sa disposition

text

Pause cafeacute

10 minutes

22

Cornelia Laros

Introduction agrave lrsquoergonomie

Quelques meacutethodes drsquoergonomie

23

Cornelia Laros

Introduction agrave lrsquoergonomie

Ergonomie de conception

24

Cornelia Laros

Ergonomie de correctionbull Analyse drsquoactiviteacute

bull Audit

bull Analyse drsquoeacutevegravenements critiques

bull Analyse de traces

bull Simulation

bull Entretiens

bull Persona cartes drsquoexpeacuteriences

bull Tri par cartes

bull Prototypage

bull Benchmarkhellip

Lrsquoergonomie tout au long du projet

Introduction agrave lrsquoergonomie

Ergonomie de conception

25

Cornelia Laros

Ergonomie de correctionbull Analyse drsquoactiviteacute

bull Audit

bull Analyse drsquoeacutevegravenements critiques

bull Analyse de traces

bull Simulationhellip

bullEntretiens

bullPersona cartes drsquoexpeacuteriences

bullTri par cartes

bullPrototypage

bullBenchmarkhellip

Des meacutethodes de recueil de donneacutees avec utilisateurs finaux et de conception laquo experte raquo

Introduction agrave lrsquoergonomie

Pourquoi ces meacutethodes26

Cornelia Laros

bull Si jrsquoavais demandeacute aux utilisateurs ce qursquoils voulaient ils mrsquoauraient demandeacute un cheval plus rapide - Henri Ford

bull Un comportement laquo sur-appris raquo devient un automatisme inconscient que lrsquoutilisateur ne saura pas expliquer (ex passer les vitesses en conduisant)

bull Le cerveau humain est propice agrave la fabulation (imagination de causes) aux faux souvenirs (en toute bonne fois) les biais (deacutesirabiliteacute effet pygmalion influence socialehellip)

Observer

Introduction agrave lrsquoergonomie

Pourquoi ces meacutethodes27

Cornelia Laros

bull Une imagine est plus parlante que 10 000 mots

bull Permet drsquoeacutevaluer une ideacutee agrave moindre coucirct donc de se tromper souvent et drsquoapprendre plus vite pour valider une ideacutee ou lrsquoameacuteliorer

bull Permet de tester plein drsquoideacutees et de retenir la meilleure

hellip A condition de se focaliser sur un objectif et non sur lrsquoideacutee elle-mecircme

Modeacuteliser

Introduction agrave lrsquoergonomie

Lrsquoensemble permet drsquoeacuteviter ceci

28

Cornelia Laros

Introduction agrave lrsquoergonomie

Lrsquoensemble permet drsquoeacuteviter ceci

29

Cornelia Laros

Eli983538983534983585eacute en 983586983528983588983589r983549a983585t

Eli983538983534983585eacute en 983540983590983586t983587983545983584pa983539983546

Introduction agrave lrsquoergonomie

Prototyper pour vous crsquoesthellip30

Cornelia Laros

CONTRIBUTION AUX SPECIFICATIONS FONCTIONNELLES

Zoning basse fideacuteliteacute wireframe statique (sketch ou non) bull Rapide et peu couteux bull Illustratif statique pas drsquointeraction bull Non engageant sur le design bull Tregraves peu explicite sur le plan fonctionnel

Story-board cliquable bull Illustre la navigation bull Permet de se projeter dans lrsquointeraction bull Pose les bases du design et du fonctionnel

Prototype semi-dynamique bull Se veut complet (ou quasi) sur le plan de la

navigation de lrsquointeraction et des cas drsquoutilisation bull Doit permettre de simuler fidegravelement le

fonctionnement drsquoune application bull Est une speacutecification fonctionnelle en soi

Pha983543983530 983592983589 ca983591983590983527g983589 AM983623983607

Pha983543983530 983592983589 co983539983581983530p983545983535o983585 f983586983539983581t983535o983539983585983530l983536983589

Tes983545983588 983547t983535983536i983588983527t983589u983542983588 ap983540983537983534s 983538983587983529il983530983543hellip

Introduction agrave lrsquoergonomie

Prototype basse definition31

Cornelia Laros

Introduction agrave lrsquoergonomie

Prototyper cliquable32

Cornelia Laros

Introduction agrave lrsquoergonomie

Prototyper semi-dynamique33

Cornelia Laros

Page Title

1230

Mobile interactions

Observably Sc i$amp

About

Project overiew

Manage sessions

Manage variables

Settings

Start observing

1230 1230

OverviewObserve

Observe mobile interactions in the field to assess dominant hand for holding and interacting with smartphones

10042016Mobile interactionsMobile interactions

Welcome to Observably Gather and manage observation dataGather and manage observation data

My projects

1230

Tags separate with comas

Variable value

Create

Add observablesAdd all observables you want to track for this project You can come back and edit them laterAdd all observables you want to track for this project You can come back and edit them later

Thanks for the hint

Manage variablesMobile InteractionsMobile Interactions

1230

Tags separate with comas

Variable value

Create

Left hand Right thumbLRTLRT

Manage variablesMobile InteractionsMobile Interactions

Irsquom done Start recording

Save changesCancel

Observable Tags separate with coma

Tags separate with comas

3 20

LRILRI

Observable label

Did you knowTap on the icon to customize it Use icons from our library or from your gallery to make variables pop out when observing

Tap on the icon to customize it Use icons from our library or from your gallery to make variables pop out when observing

Thanks for the hint

Left hand Right thumbLRTLRT

Irsquom done Start recording

Manage variablesMobile InteractionsMobile Interactions

Left hand x Right thumb x

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Did you knowIf you make a mistake you can undo your action by tapping on the icon of the taskIf you make a mistake you can undo your action by tapping on the icon of the task

Thanks for the hint

Session 1

Discrete mode New Session

Mobile InteractionsMobile Interactions

1230

Record vocal comment

LRILRILRILRILRILRI

Did you knowYou can record occurences durations and comments by chosing the record format in the drop-down above

You can record occurences durations and comments by chosing the record format in the drop-down above

Thanks for the hint

Discrete mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

Left hand Right thumbLRT

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Did you knowIn list view you can slipe left and right to increment or correct your countIn list view you can slipe left and right to increment or correct your count

Thanks for the hint

Continuous mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

LRILRILRILRILRI

Did you knowIf you make a mistake you can undo your action by tapping on the icon of the taskIf you make a mistake you can undo your action by tapping on the icon of the task

Thanks for the hint

Continuous mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

Tags separate with comas

Comment

Add

Did you know The timestamp of vocal comments is the start time to accurately mark events that triggered your comment

The timestamp of vocal comments is the start time to accurately mark events that triggered your comment

Thanks for the hint

Manage observables

Comments mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Stop recording vocal comment

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Your observationsManage and cleanup sessions before exporting dataManage and cleanup sessions before exporting data

Session ManagementMobile InteractionsMobile Interactions

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

LRT

LRI

RLI

RLT

RRT20

20

8

35

15

Count SummaryCount Summary

RLT

RRT20

815

Time SummaryTime Summary

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

Left hand Right thumbLRTLRT

+1+1

10042016 124627

Left hand Right thumbLRTLRT

2rsquorsquo2rsquorsquo

10042016 124627 - 10042016 124629

Content of my comment boxTag1 Tag2

10042016 124644

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

LRTLRT+1+1

10042016 124627

Save changes

Observable Tags separate with coma

Tags separate with comas

Left hand x Right thumb x

AboutAbout

1230

Observable science provides tools for field research and scientific observation It is tailored to the needs of ethnography human factors psychology usability and games user research

Observable science provides tools for field research and scientific observation It is tailored to the needs of ethnography human factors psychology usability and games user research

Observablyscience

Development by Morgane RadelDesign by Cornelia LarosDevelopment by Morgane RadelDesign by Cornelia Laros

Credits

Support (us)Show your love Rate the App

Make a donation

Contact us

Visit our website

Add session tags to all observations

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

Save changes

Session Tags separate with coma

Tags separate with comas

Metro x Toulouse x

Manage variablesMobile InteractionsMobile Interactions

1230

Left hand Right thumbLRTLRT

Confirm

Search icons

Cancel

Browse

3 20

Observably Sci$amp

1230

Project statisticsProject statistics Total countsTotal time Total comments First entryLast entrySessions

4 963281231

1441201201603042016

97

Project detailsMobile InteractionsMobile Interactions

Sessions SummarySessions Summary

RRT20

815

Count SummaryCount Summary

JUN 14MAY 14APR 14MAR 14FEB 14JAN 14

4

1

65

7

0

2

4

6

8

10

3

2014

Manage sessions

Settings ExportOverview

1230

App optionsDisplay hintsDisplay hints

SettingsSettings

Share anonymous data to improve the appShare anonymous data to improve the app

1230

Gather and manage observation data with ObservablyGather and manage observation data with Observably

Welcome to Observably

Project name

Project description what is the goal of your project

CreateCancel

Session[number]Session[number]

Default Session ID

Default export format txt

Data options

Default Discrete variable lines view

Create a new project

1230

Project detailsMobile InteractionsMobile Interactions

Mobile InteractionsMobile Interactions

Project description what is the goal of your project

SaveCancel

Session[number]Session[number]

Default Session ID

Default export format txt

Data options

Default continuous variables grid view

Project name

Manage sessions

Settings ExportOverview

1230

Project detailsMobile InteractionsMobile Interactions

Manage sessions

Settings ExportOverview

Export format txt

Export data

Data has been successfully exported as MobileInteractionstxt

to your download folder

Observably Sc i$amp

Settings

1230

BUTTONBUTTON

Permissions

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Up exlaborum incididunt quis nostrud exercitatn

COMPONENTS

Pickers

OKCANCEL

13

Friday

MAR

2014

MS W T F ST

30 31

1

16 17 19 20 21 2218

23 24 26 27 28 2925

139 10 12 14 1511

72 3 5 6 84

March 2014

OKCANCEL

PMAM

112

9

10

11

2

48

576

3

330 AM

Notifications

Incoming call

Rachel Ligson

IGNORE ANSWER

REPLYARCHIVE

Hey letrsquos catch up soon Do you want to grab lunch sometime this weekendLet me know when yoursquore free

409 PMHannah ChoHannah Cho

Do you know what I mean509 PMTina McBeanTina McBean

Heads up notification

Regular + Expanded notification

Index scroller

All

Patrick Keenan

Mary Johnson

Tina Santiago

Trevor Hansen

Amar Sagoo

Abbey Christensen

Ali Connors

Alex Nelson

Anthony Stevens

A

A

1230

Abcdefg

Abcdefghijklmno

Tabs

THE THIRDITEM TWONO ONE

THE THIRDITEM TWONO ONE

1230

THE THIRDITEM TWONO ONE

Page Title

1230

121 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

110 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

51 50

Input text for a single line field with a maximu

Single-Line Input Label

31 50

Input text for a single line field with a max

Single-Line Input Label

121 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

110 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

51 50

Input text for a single line field with a maximuInput text for a single line field with a maximu

Single-Line Input Label

31 50

Input text for a single line field with a maxInput text for a single line field with a max

Single-Line Input Label

Disabled text field

Input text

Username or Password is incorrect

Input text

Input tex

Hint text

Hint text

Hint text

Disabled text field

Input textInput text

Username or Password is incorrect

Input textInput text

Input texInput tex

Hint text

Hint text

Hint text

Text fields

Switches and sliders

60

Regular

Pressed

Disabled

60

Regular

Pressed

Disabled

Buttons

DISABLED

PRESSED

NORMAL

DISABLED

PRESSED

NORMAL

Flat Raised

DISABLED

PRESSED

NORMAL

DISABLED

PRESSED

NORMAL

Flat Raised

Toasts

This color applies to both light and dark theme

This item already has the label ldquotravelrdquo You can add a new label

ACTIONSingle-Line Snackbar

Menu

Arial 100

100

Calibri

Courier

Verdana

Arial

Chips

Trevor Hansen

email3emailcom

email2emailcom

primaryemailemailcomContact Name

Dialogs

Desktop

Without title With title

BUTTONBUTTON

PermissionsLorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Up exlaborum incididunt quis nostrud exercitatn

BUTTONBUTTON

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Ut enim ad minim ikad veniam quis nostrud exercitatn ullamco laboris nisi ut aliquip exlaborum incididunt

ACCEPTDECLINEMORE INFO

Permissions

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisinuli

Toolbar

11Roboto

Cards

Welcome BackItrsquos been a while have you read any new books latelyItrsquos been a while have you read any new books lately

YESNOPE

Kangaroo Valley Safari

Located two hours south of Sydney in the

Southern Highlands of New South Wales

LEARN MORESHARE

REVIEWFREE SAMPLE

By Alex Nelson

El Pooch

Pre-fab Homes

Favorite Road Trips

Best Airlines

Campbell

Groceries

almond milk

coconut water

cucumber

green apples

Yuna tickets on sale 624

May 24 2014

Clean desk

Keyboards

suggestion suggestion suggestion

123

a s d f g h j k l

z x c v b n m

q w e r t y u i o p1 2 3 4 5 6 7 8 9 0

suggestion suggestion suggestion

123

a s d f g h j k l

z x c v b n m

q w e r t y u i o p1 2 3 4 5 6 7 8 9 0

Bottom Sheet

Print this page

Copy

Upload

Share

MoreMail Message

Google+Gmail Hangout

Grid

Two lineSupport text

Two lineSupport text

Single line

Single line

Lists

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Three-line itemThree-line item

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Three-line itemThree-line item

Three-line itemThree-line item

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Three-line itemThree-line item

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Three-line itemThree-line item

Three-line itemThree-line item

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Line item unselectedLine item unselected

Line item selectedLine item selected

Line item selectedLine item selected

Data usageData usage

BluetoothBluetooth

Wi-FiWi-Fi

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Single-line itemSingle-line item

Single-line itemSingle-line item

Single-line itemSingle-line itemSingle-line itemSingle-line item

Single-line itemSingle-line item

Single-line itemSingle-line item

Introduction agrave lrsquoergonomie

Ergonomie et Design34

Cornelia Laros

Design Ergonomie Design Ergonomie

Identiteacute

Communication

Ambiance

Exemple un site institutionnel informatif avec une navigation simple et des exigences fortes

drsquoidentiteacuteExemple une application meacutetier destineacutee agrave une

population drsquoutilisateur connue

EfficaciteacuteFonctionnel

Outils

Service en ligne

Architecture de lrsquoinformation contenus bonnes pratiques

Analyse tache vs activiteacute prise en compte globaliseacutee des process

postes de travail eacutecosystegraveme existant hellip puis la conception

Image Usage freacutequent

Usage ponctuel

Votre eacutequipe Ergonome Directeur aristique Webdesigner UX Designer

Introduction agrave lrsquoergonomie

Design avant-tout35

Cornelia Laros

Introduction agrave lrsquoergonomie

Equilibreacute36

Cornelia Laros

Introduction agrave lrsquoergonomie

Ergonomie avant tout37

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

38

Cornelia Laros

text

Lrsquoergonomie sert agravehellip39

Cornelia Laros

1 ameacuteliorer les conditions de travail

2 faire gagner plus drsquoargent agrave lrsquoentreprise

3 ameacuteliorer lrsquoestheacutetique

4 comprendre comment ameacuteliorer un produit

text

Quelles affirmations sont vraies

40

Cornelia Laros

1 Lrsquoergonomie srsquoattache agrave comprendre le travail pour le transformer

2 Il est possible de concevoir une IHM qui fonctionne pour tout le monde en se basant sur des normes

3 Lrsquoutilisateur va se servir de votre produit de la faccedilon dont vous lrsquoavez imagineacute

4 Lrsquoutilisateur interpregravete une tacircche comme un problegraveme qursquoil doit reacutesoudre en faisant avec ses caracteacuteristiques et les moyens mis agrave sa disposition

text

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

41

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

text

D - A quoi sert un prototype

42

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

43

Cornelia Laros

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

44

Cornelia Laros

Utilisabiliteacute

Utiliteacute

Efficaciteacute Efficience

Satisfaction

Introduction agrave lrsquoergonomie

Pyramide des besoins MASLOW

45

Cornelia Laros

Introduction agrave lrsquoergonomie

Pyramide des besoins IHM46

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

47

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

48

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

49

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

50

Cornelia Laros

Introduction agrave lrsquoergonomie

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

51

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

Introduction agrave lrsquoergonomie

D - A quoi sert un prototype

52

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

53

Cornelia Laros

a Fiable

b Intuitif

c Fonctionnel

d Accessible

e Plaisant

f Porteur de sens

Introduction agrave lrsquoergonomie

F - Quel besoin ai-je oublieacute dans la question

preacuteceacutedente

54

Cornelia Laros

text

Patterns amp Dark patterns

55

Cornelia Laros

text

Criteres de Bastien et Scapin56

Cornelia Laros

Guidage

Charge de travail

Controcircle utilisateur explicite

Flexibiliteacute ( adaptabiliteacute)

Gestion des erreurs

Homogeacuteneacuteiteacute ( coheacuterence)

Signifiance des Codes et Deacutenominations

Compatibiliteacute ( familiariteacute)

Introduction agrave lrsquoergonomie

Guidage57

Cornelia Laros

Introduction agrave lrsquoergonomie

Charge de travail58

Cornelia Laros

Introduction agrave lrsquoergonomie

Controle explicite59

Cornelia Laros

Introduction agrave lrsquoergonomie

Controles explicites60

Cornelia Laros

Dar983595 983541983527t983545983589983590n

text

Adaptabiliteacute61

Cornelia Laros

text

Gestion des erreurs62

Cornelia Laros

text

Signifiance des codes et deacutenominations

63

Cornelia Laros

text

Homogeacuteneacuteiteacute - coheacuterence64

Cornelia Laros

text

Homogeacuteneacuteiteacute - Distinction65

Cornelia Laros

text

Compatibiliteacute66

Cornelia Laros

text

Compatibiliteacute67

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction68

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction69

Cornelia Laros

text

Gestalt Theorie70

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Gestalt Theorie71

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Dark patterns72

Cornelia Laros

Introduction agrave lrsquoergonomie

A vous de jouer

73

Cornelia Laros

Introduction agrave lrsquoergonomie

Outils de prototypages DIY74

Cornelia Laros

Low tech papier + crayons post-its cartes agrave jouer

Gratuit en ligne Invision app Moqups UXPin

Mac Sketch Balsamiq Mockups Axure

PC Axure Balsamiq

Mobile Prototyping on Paper

Ap983540983590en983530983555 983592983589 no983547983549983589983537le983543 983581h983586983543983589983588

Introduction agrave lrsquoergonomie

Test de perception DIY75

Cornelia Laros

La premiegravere impression qursquoun utilisateur se fait de votre IHM va influencer tous ses jugements ulteacuterieurs Crsquoest lrsquoeffet de halo

bull Un utilisateur qui a une premiegravere impression positive de votre appli passera plus facilement outre les bugs

bull Une premiegravere impression negative rendra lrsquoutilisateur plus critique vis agrave vis de deacutetails qui confirment son jugement

Cel983527 983538983580983590c983532e 983527983548983588si 983527983549983589983581 vo983543 983586983590983580ux 983591rsquoex983527983538983589983585s vo983543 983530983585t983542983589983546i983530n983543 983592rsquoem983528983527983548983581he 983530983545 983550983587s 983542e983585d983530983555-vo983547983543 983581l983535e983539983546s

Introduction agrave lrsquoergonomie

Test de perception DIY76

Cornelia Laros

Montrer votre prototype agrave quelqursquoun pendant 5 secondes

Demandez-lui

bull Ce qursquoil a vu

bull Ce qursquoil a compris de ce qursquoil a vu

bull Ce qui lrsquoa surpris ou marqueacute

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY77

Cornelia Laros

Les difficulteacutes de navigation se produisent souvent dans les niveaux les plus haut de votre structure de contenu Vous pouvez veacuterifier facilement si la classification logique pour vous lrsquoest aussi pour vos utilisateurs

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY78

Cornelia Laros

Lister trois (max) niveaux de profondeur de votre contenu structureacute Masquez ensuite les contenus de niveau plus bas Utilisez par exemple les groupements de lignes dans excel pour creacuteer des pliers-deacutepliers ou imprimer la liste sur une feuille que vous pliez pour masquer certaines parties

Demandez agrave un utilisateur de vous dire ougrave il penserait trouver un contenu bien preacutecis en preacutecisant qursquoil nrsquoy a pas de bonne reacuteponse

Notez srsquoil va chercher lagrave ougrave vous vous y attendiez ougrave il a heacutesiteacute et ce qursquoil a fini par choisir pour vous aider agrave rendre la navigation plus intuitive

Introduction agrave lrsquoergonomie

Test drsquoutilisabiliteacute DIY79

Cornelia Laros

A chaque nouvelle fonctionnaliteacute ajouteacutee demandez agrave quelqursquoun qui ne connait pas le projet de srsquoen servir Proposez lui une seule tacircche geacuteneacuterique agrave accomplir avec la fonctionnaliteacute

Exemple Tu veux prendre un rendez-vous avec un meacutedecin sur ce site montres-moi comment tu ferais en commentant agrave haute voix

Le plus important ici crsquoest de ne pas reacuteagir agrave ce qursquoil fait mais simplement le regarder faire sans lrsquoaider mecircme srsquoil est bloqueacute

Srsquoil 983540983586983588983589 de983543 983578983547983589s983545i983586983585s reacutepo983539983592983530z 983540983580983590 un983530 983577983548e983588t983534983587983539 o983547 d983535983545e983588 l983547983535 983577u983530 983550983587us 983536983547983535 983590eacutepo983539983592r983530983555 983578983548an983591 983534983537 983580ur983527 fi983539983535 983588rsquoil 983534983539983588983535s983545e Srsquoil 983530983543983546 v983542983580i983593983530n983545 983529l983587983577ueacute di983545983530983588 l983548i 983577983547983589 983550o983547s 983580983536983537ez 983542983530983550983587ir 983549983586983546r983589 983579o983541983534983589 et 983530983543983588983580ye983555 983592983530 c983587983538983541re983539983592r983530 983579983589 983578u983534 l983589 9835316ne

Introduction agrave lrsquoergonomie

Pas besoin de reacuteinventer la roue DIY

80

Cornelia Laros

Il existe des bonnes pratiques qui vous eacuteviteront de reacuteinventer la roue Utilisez des laquo design patterns raquo pour concevoir vos interfaces

Renseignez vous sur la Gestalt Theorie pour agencer vos pages

Utilisez les critegraveres de Bastien et Scapin pour trouver des deacutefauts eacutevidents avant de tester vous en tirerez des enseignements plus inteacuteressants

Ma983534s ccedila crsquoes983545 983541983586983548r u983539983530 983580u983546r983530 983559983587i983588

Introduction agrave lrsquoergonomie

Quizz time

81

Cornelia Laros

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

82

Cornelia Laros

1 c Fonctionnel

2 a Fiable

3 d Accessible

4 b Intuitif

5 e Plaisant

6 f Porteur de sens

text

F - Quel besoin ai-je oublieacute dans la question preacuteceacutedente

83

Cornelia Laros

Uti983536983534983588983580b983536e

Introduction agrave lrsquoergonomie

Tests DIY84

Cornelia Laros

Reacutedigez la proceacutedure pour tester un de vos projets drsquoIHM avec le test de votre choix perception arborescence ou utilisabiliteacute

Notez la question que vous vous posez et la question que vous allez poser

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

Introduction agrave lrsquoergonomie

Ergonomique ou pas

2

Cornelia Laros

Introduction agrave lrsquoergonomie

Ergonomique ou pas3

Cornelia Laros

Introduction agrave lrsquoergonomie

Ergonomique ou pas4

Cornelia Laros

Introduction agrave lrsquoergonomie

Ergonomique ou pas5

Cornelia Laros

Introduction agrave lrsquoergonomie

Ergonomique ou pas6

Cornelia Laros

Introduction agrave lrsquoergonomie

Ergonomique ou pas7

Cornelia Laros

1 Design nrsquoest pas ergonomique

2 Adapteacute agrave la physiologie humaine

3 Adapteacute agrave un contexte drsquoutilisation pour reacutealiser une tacircche donneacutee

4 Adapteacute agrave la diversiteacute et agrave la variabiliteacute des personnes

Introduction agrave lrsquoergonomie

Ergonomique ou pas8

Cornelia Laros

A B

C D

Introduction agrave lrsquoergonomie

Tacircche vs Activiteacute9

Cornelia Laros

Introduction agrave lrsquoergonomie

Tacircche vs Activiteacute10

Cornelia Laros

Deacuteterminants externes (caracteacuteristiques de la

situation)

Introduction agrave lrsquoergonomie

Scheacutema agrave 5 carreacutes11

Cornelia Laros

Deacuteterminants internes (caracteacuteristiques de

lrsquoutilisateur)

Activiteacute

Effets sur la personne (santeacute motivation compeacutetencehellip)

Effets sur lrsquoentreprise (production revenus stocks

usure du mateacuterielhellip)

Reacutet983542o-ac983545983534983587983585Reacutet983542o-ac983545983534983587983585

In983545e983590983527c983545983535o983585 h983586983538983593983589 ma983579983533983534n983589 983591e983550983534983589n983545 I983585te983542983527983581t983535o983539 H983586983593m983589 983629983554983588tegraveme

Introduction agrave lrsquoergonomie

Catachregravese

12

Cornelia Laros

Art de deacutetourner un objet de la tacircche pour laquelle il a eacuteteacute conccedilu

Introduction agrave lrsquoergonomie

Ergonomique ne veux rien dire

Pour comprendre revenons aux origineshellip

13

Cornelia Laros

Introduction agrave lrsquoergonomie

Les origines14

Cornelia Laros

1857 1949

1880

1908

1946

Premiegravere utilisation du terme laquo ergonomie raquo par Jastrzebowski Fordisme

Institutionnalisation de la meacutedecine du travail

Le terme laquo ergonomie raquo est employeacute par Murrel

Taylorisme

1987Toyota Production System

XVIIIe Deacuteveloppement de lrsquoapproche productiviste du travail

XVIIe

Premiers eacutecrits et classification des maladies professionnelles

Moyen acircgeEtude des conditions de travail et des facteurs environnementaux

Antiquiteacute

Racines de lrsquoapproche hygieacuteniste du travail

Introduction agrave lrsquoergonomie

Ameacuteliorer agrave la fois la productiviteacute et les

conditions de travailParce qursquoun employeacute motiveacute et en bonne santeacute est plus

productif et tout le monde y gagne

15

Cornelia Laros

Introduction agrave lrsquoergonomie

Inter-discplinariteacute16

Cornelia Laros

Ps983554983581ho983536983586983594983535e

In983531eacuteni983530983542983535e

Ne983547r983587983543983581i983530n983579983589983588

Ph983554983588i983586l983587983531i983530

Meacutede983579983534983585983589

Soc983534983587983536o983594983534983589

Ergonomie

Introduction agrave lrsquoergonomie

Domaines drsquointervention17

Cornelia Laros

Ps983554983581ho983536983586983594983535eIn983531eacuteni983530983542983535e

Ne983547r983587983543983581i983530n983579983589983588

Phi983543983534983587983537og983534983589Meacutede983579983534983585983589

Soc983534983587983536o983594983534983589Ergonomie

Ergonomie physique

Ergonomie organisationnelle

Ergonomie cognitive

Optimisation des situations et postes de travail dans leur

relation avec lrsquoactiviteacute physique

Optimisation des systegravemes socio-techniques structures

organisationnelles regravegles et processus

Optimisation du travail mental perception prise de deacutecision

reacutesolution de problegravemes

Introduction agrave lrsquoergonomie

Domaines drsquointervention18

Cornelia Laros

Organisationnelle 10

Physique 20

Cognitive 70

Introduction agrave lrsquoergonomie

Quizz time

19

Cornelia Laros

text

A - Lrsquoergonomie sert agravehellip20

Cornelia Laros

1 ameacuteliorer les conditions de travail

2 faire gagner plus drsquoargent agrave lrsquoentreprise

3 ameacuteliorer lrsquoestheacutetique

4 comprendre comment ameacuteliorer un produit

text

B - Quelles affirmations sont vraies

21

Cornelia Laros

1 Lrsquoergonomie srsquoattache agrave comprendre le travail pour le transformer

2 Il est possible de concevoir une IHM qui fonctionne pour tout le monde en se basant sur des normes

3 Lrsquoutilisateur va se servir de votre produit de la faccedilon dont vous lrsquoavez imagineacute

4 Lrsquoutilisateur interpregravete une tacircche comme un problegraveme qursquoil doit reacutesoudre en faisant avec ses caracteacuteristiques et les moyens mis agrave sa disposition

text

Pause cafeacute

10 minutes

22

Cornelia Laros

Introduction agrave lrsquoergonomie

Quelques meacutethodes drsquoergonomie

23

Cornelia Laros

Introduction agrave lrsquoergonomie

Ergonomie de conception

24

Cornelia Laros

Ergonomie de correctionbull Analyse drsquoactiviteacute

bull Audit

bull Analyse drsquoeacutevegravenements critiques

bull Analyse de traces

bull Simulation

bull Entretiens

bull Persona cartes drsquoexpeacuteriences

bull Tri par cartes

bull Prototypage

bull Benchmarkhellip

Lrsquoergonomie tout au long du projet

Introduction agrave lrsquoergonomie

Ergonomie de conception

25

Cornelia Laros

Ergonomie de correctionbull Analyse drsquoactiviteacute

bull Audit

bull Analyse drsquoeacutevegravenements critiques

bull Analyse de traces

bull Simulationhellip

bullEntretiens

bullPersona cartes drsquoexpeacuteriences

bullTri par cartes

bullPrototypage

bullBenchmarkhellip

Des meacutethodes de recueil de donneacutees avec utilisateurs finaux et de conception laquo experte raquo

Introduction agrave lrsquoergonomie

Pourquoi ces meacutethodes26

Cornelia Laros

bull Si jrsquoavais demandeacute aux utilisateurs ce qursquoils voulaient ils mrsquoauraient demandeacute un cheval plus rapide - Henri Ford

bull Un comportement laquo sur-appris raquo devient un automatisme inconscient que lrsquoutilisateur ne saura pas expliquer (ex passer les vitesses en conduisant)

bull Le cerveau humain est propice agrave la fabulation (imagination de causes) aux faux souvenirs (en toute bonne fois) les biais (deacutesirabiliteacute effet pygmalion influence socialehellip)

Observer

Introduction agrave lrsquoergonomie

Pourquoi ces meacutethodes27

Cornelia Laros

bull Une imagine est plus parlante que 10 000 mots

bull Permet drsquoeacutevaluer une ideacutee agrave moindre coucirct donc de se tromper souvent et drsquoapprendre plus vite pour valider une ideacutee ou lrsquoameacuteliorer

bull Permet de tester plein drsquoideacutees et de retenir la meilleure

hellip A condition de se focaliser sur un objectif et non sur lrsquoideacutee elle-mecircme

Modeacuteliser

Introduction agrave lrsquoergonomie

Lrsquoensemble permet drsquoeacuteviter ceci

28

Cornelia Laros

Introduction agrave lrsquoergonomie

Lrsquoensemble permet drsquoeacuteviter ceci

29

Cornelia Laros

Eli983538983534983585eacute en 983586983528983588983589r983549a983585t

Eli983538983534983585eacute en 983540983590983586t983587983545983584pa983539983546

Introduction agrave lrsquoergonomie

Prototyper pour vous crsquoesthellip30

Cornelia Laros

CONTRIBUTION AUX SPECIFICATIONS FONCTIONNELLES

Zoning basse fideacuteliteacute wireframe statique (sketch ou non) bull Rapide et peu couteux bull Illustratif statique pas drsquointeraction bull Non engageant sur le design bull Tregraves peu explicite sur le plan fonctionnel

Story-board cliquable bull Illustre la navigation bull Permet de se projeter dans lrsquointeraction bull Pose les bases du design et du fonctionnel

Prototype semi-dynamique bull Se veut complet (ou quasi) sur le plan de la

navigation de lrsquointeraction et des cas drsquoutilisation bull Doit permettre de simuler fidegravelement le

fonctionnement drsquoune application bull Est une speacutecification fonctionnelle en soi

Pha983543983530 983592983589 ca983591983590983527g983589 AM983623983607

Pha983543983530 983592983589 co983539983581983530p983545983535o983585 f983586983539983581t983535o983539983585983530l983536983589

Tes983545983588 983547t983535983536i983588983527t983589u983542983588 ap983540983537983534s 983538983587983529il983530983543hellip

Introduction agrave lrsquoergonomie

Prototype basse definition31

Cornelia Laros

Introduction agrave lrsquoergonomie

Prototyper cliquable32

Cornelia Laros

Introduction agrave lrsquoergonomie

Prototyper semi-dynamique33

Cornelia Laros

Page Title

1230

Mobile interactions

Observably Sc i$amp

About

Project overiew

Manage sessions

Manage variables

Settings

Start observing

1230 1230

OverviewObserve

Observe mobile interactions in the field to assess dominant hand for holding and interacting with smartphones

10042016Mobile interactionsMobile interactions

Welcome to Observably Gather and manage observation dataGather and manage observation data

My projects

1230

Tags separate with comas

Variable value

Create

Add observablesAdd all observables you want to track for this project You can come back and edit them laterAdd all observables you want to track for this project You can come back and edit them later

Thanks for the hint

Manage variablesMobile InteractionsMobile Interactions

1230

Tags separate with comas

Variable value

Create

Left hand Right thumbLRTLRT

Manage variablesMobile InteractionsMobile Interactions

Irsquom done Start recording

Save changesCancel

Observable Tags separate with coma

Tags separate with comas

3 20

LRILRI

Observable label

Did you knowTap on the icon to customize it Use icons from our library or from your gallery to make variables pop out when observing

Tap on the icon to customize it Use icons from our library or from your gallery to make variables pop out when observing

Thanks for the hint

Left hand Right thumbLRTLRT

Irsquom done Start recording

Manage variablesMobile InteractionsMobile Interactions

Left hand x Right thumb x

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Did you knowIf you make a mistake you can undo your action by tapping on the icon of the taskIf you make a mistake you can undo your action by tapping on the icon of the task

Thanks for the hint

Session 1

Discrete mode New Session

Mobile InteractionsMobile Interactions

1230

Record vocal comment

LRILRILRILRILRILRI

Did you knowYou can record occurences durations and comments by chosing the record format in the drop-down above

You can record occurences durations and comments by chosing the record format in the drop-down above

Thanks for the hint

Discrete mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

Left hand Right thumbLRT

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Did you knowIn list view you can slipe left and right to increment or correct your countIn list view you can slipe left and right to increment or correct your count

Thanks for the hint

Continuous mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

LRILRILRILRILRI

Did you knowIf you make a mistake you can undo your action by tapping on the icon of the taskIf you make a mistake you can undo your action by tapping on the icon of the task

Thanks for the hint

Continuous mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

Tags separate with comas

Comment

Add

Did you know The timestamp of vocal comments is the start time to accurately mark events that triggered your comment

The timestamp of vocal comments is the start time to accurately mark events that triggered your comment

Thanks for the hint

Manage observables

Comments mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Stop recording vocal comment

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Your observationsManage and cleanup sessions before exporting dataManage and cleanup sessions before exporting data

Session ManagementMobile InteractionsMobile Interactions

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

LRT

LRI

RLI

RLT

RRT20

20

8

35

15

Count SummaryCount Summary

RLT

RRT20

815

Time SummaryTime Summary

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

Left hand Right thumbLRTLRT

+1+1

10042016 124627

Left hand Right thumbLRTLRT

2rsquorsquo2rsquorsquo

10042016 124627 - 10042016 124629

Content of my comment boxTag1 Tag2

10042016 124644

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

LRTLRT+1+1

10042016 124627

Save changes

Observable Tags separate with coma

Tags separate with comas

Left hand x Right thumb x

AboutAbout

1230

Observable science provides tools for field research and scientific observation It is tailored to the needs of ethnography human factors psychology usability and games user research

Observable science provides tools for field research and scientific observation It is tailored to the needs of ethnography human factors psychology usability and games user research

Observablyscience

Development by Morgane RadelDesign by Cornelia LarosDevelopment by Morgane RadelDesign by Cornelia Laros

Credits

Support (us)Show your love Rate the App

Make a donation

Contact us

Visit our website

Add session tags to all observations

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

Save changes

Session Tags separate with coma

Tags separate with comas

Metro x Toulouse x

Manage variablesMobile InteractionsMobile Interactions

1230

Left hand Right thumbLRTLRT

Confirm

Search icons

Cancel

Browse

3 20

Observably Sci$amp

1230

Project statisticsProject statistics Total countsTotal time Total comments First entryLast entrySessions

4 963281231

1441201201603042016

97

Project detailsMobile InteractionsMobile Interactions

Sessions SummarySessions Summary

RRT20

815

Count SummaryCount Summary

JUN 14MAY 14APR 14MAR 14FEB 14JAN 14

4

1

65

7

0

2

4

6

8

10

3

2014

Manage sessions

Settings ExportOverview

1230

App optionsDisplay hintsDisplay hints

SettingsSettings

Share anonymous data to improve the appShare anonymous data to improve the app

1230

Gather and manage observation data with ObservablyGather and manage observation data with Observably

Welcome to Observably

Project name

Project description what is the goal of your project

CreateCancel

Session[number]Session[number]

Default Session ID

Default export format txt

Data options

Default Discrete variable lines view

Create a new project

1230

Project detailsMobile InteractionsMobile Interactions

Mobile InteractionsMobile Interactions

Project description what is the goal of your project

SaveCancel

Session[number]Session[number]

Default Session ID

Default export format txt

Data options

Default continuous variables grid view

Project name

Manage sessions

Settings ExportOverview

1230

Project detailsMobile InteractionsMobile Interactions

Manage sessions

Settings ExportOverview

Export format txt

Export data

Data has been successfully exported as MobileInteractionstxt

to your download folder

Observably Sc i$amp

Settings

1230

BUTTONBUTTON

Permissions

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Up exlaborum incididunt quis nostrud exercitatn

COMPONENTS

Pickers

OKCANCEL

13

Friday

MAR

2014

MS W T F ST

30 31

1

16 17 19 20 21 2218

23 24 26 27 28 2925

139 10 12 14 1511

72 3 5 6 84

March 2014

OKCANCEL

PMAM

112

9

10

11

2

48

576

3

330 AM

Notifications

Incoming call

Rachel Ligson

IGNORE ANSWER

REPLYARCHIVE

Hey letrsquos catch up soon Do you want to grab lunch sometime this weekendLet me know when yoursquore free

409 PMHannah ChoHannah Cho

Do you know what I mean509 PMTina McBeanTina McBean

Heads up notification

Regular + Expanded notification

Index scroller

All

Patrick Keenan

Mary Johnson

Tina Santiago

Trevor Hansen

Amar Sagoo

Abbey Christensen

Ali Connors

Alex Nelson

Anthony Stevens

A

A

1230

Abcdefg

Abcdefghijklmno

Tabs

THE THIRDITEM TWONO ONE

THE THIRDITEM TWONO ONE

1230

THE THIRDITEM TWONO ONE

Page Title

1230

121 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

110 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

51 50

Input text for a single line field with a maximu

Single-Line Input Label

31 50

Input text for a single line field with a max

Single-Line Input Label

121 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

110 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

51 50

Input text for a single line field with a maximuInput text for a single line field with a maximu

Single-Line Input Label

31 50

Input text for a single line field with a maxInput text for a single line field with a max

Single-Line Input Label

Disabled text field

Input text

Username or Password is incorrect

Input text

Input tex

Hint text

Hint text

Hint text

Disabled text field

Input textInput text

Username or Password is incorrect

Input textInput text

Input texInput tex

Hint text

Hint text

Hint text

Text fields

Switches and sliders

60

Regular

Pressed

Disabled

60

Regular

Pressed

Disabled

Buttons

DISABLED

PRESSED

NORMAL

DISABLED

PRESSED

NORMAL

Flat Raised

DISABLED

PRESSED

NORMAL

DISABLED

PRESSED

NORMAL

Flat Raised

Toasts

This color applies to both light and dark theme

This item already has the label ldquotravelrdquo You can add a new label

ACTIONSingle-Line Snackbar

Menu

Arial 100

100

Calibri

Courier

Verdana

Arial

Chips

Trevor Hansen

email3emailcom

email2emailcom

primaryemailemailcomContact Name

Dialogs

Desktop

Without title With title

BUTTONBUTTON

PermissionsLorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Up exlaborum incididunt quis nostrud exercitatn

BUTTONBUTTON

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Ut enim ad minim ikad veniam quis nostrud exercitatn ullamco laboris nisi ut aliquip exlaborum incididunt

ACCEPTDECLINEMORE INFO

Permissions

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisinuli

Toolbar

11Roboto

Cards

Welcome BackItrsquos been a while have you read any new books latelyItrsquos been a while have you read any new books lately

YESNOPE

Kangaroo Valley Safari

Located two hours south of Sydney in the

Southern Highlands of New South Wales

LEARN MORESHARE

REVIEWFREE SAMPLE

By Alex Nelson

El Pooch

Pre-fab Homes

Favorite Road Trips

Best Airlines

Campbell

Groceries

almond milk

coconut water

cucumber

green apples

Yuna tickets on sale 624

May 24 2014

Clean desk

Keyboards

suggestion suggestion suggestion

123

a s d f g h j k l

z x c v b n m

q w e r t y u i o p1 2 3 4 5 6 7 8 9 0

suggestion suggestion suggestion

123

a s d f g h j k l

z x c v b n m

q w e r t y u i o p1 2 3 4 5 6 7 8 9 0

Bottom Sheet

Print this page

Copy

Upload

Share

MoreMail Message

Google+Gmail Hangout

Grid

Two lineSupport text

Two lineSupport text

Single line

Single line

Lists

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Three-line itemThree-line item

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Three-line itemThree-line item

Three-line itemThree-line item

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Three-line itemThree-line item

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Three-line itemThree-line item

Three-line itemThree-line item

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Line item unselectedLine item unselected

Line item selectedLine item selected

Line item selectedLine item selected

Data usageData usage

BluetoothBluetooth

Wi-FiWi-Fi

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Single-line itemSingle-line item

Single-line itemSingle-line item

Single-line itemSingle-line itemSingle-line itemSingle-line item

Single-line itemSingle-line item

Single-line itemSingle-line item

Introduction agrave lrsquoergonomie

Ergonomie et Design34

Cornelia Laros

Design Ergonomie Design Ergonomie

Identiteacute

Communication

Ambiance

Exemple un site institutionnel informatif avec une navigation simple et des exigences fortes

drsquoidentiteacuteExemple une application meacutetier destineacutee agrave une

population drsquoutilisateur connue

EfficaciteacuteFonctionnel

Outils

Service en ligne

Architecture de lrsquoinformation contenus bonnes pratiques

Analyse tache vs activiteacute prise en compte globaliseacutee des process

postes de travail eacutecosystegraveme existant hellip puis la conception

Image Usage freacutequent

Usage ponctuel

Votre eacutequipe Ergonome Directeur aristique Webdesigner UX Designer

Introduction agrave lrsquoergonomie

Design avant-tout35

Cornelia Laros

Introduction agrave lrsquoergonomie

Equilibreacute36

Cornelia Laros

Introduction agrave lrsquoergonomie

Ergonomie avant tout37

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

38

Cornelia Laros

text

Lrsquoergonomie sert agravehellip39

Cornelia Laros

1 ameacuteliorer les conditions de travail

2 faire gagner plus drsquoargent agrave lrsquoentreprise

3 ameacuteliorer lrsquoestheacutetique

4 comprendre comment ameacuteliorer un produit

text

Quelles affirmations sont vraies

40

Cornelia Laros

1 Lrsquoergonomie srsquoattache agrave comprendre le travail pour le transformer

2 Il est possible de concevoir une IHM qui fonctionne pour tout le monde en se basant sur des normes

3 Lrsquoutilisateur va se servir de votre produit de la faccedilon dont vous lrsquoavez imagineacute

4 Lrsquoutilisateur interpregravete une tacircche comme un problegraveme qursquoil doit reacutesoudre en faisant avec ses caracteacuteristiques et les moyens mis agrave sa disposition

text

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

41

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

text

D - A quoi sert un prototype

42

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

43

Cornelia Laros

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

44

Cornelia Laros

Utilisabiliteacute

Utiliteacute

Efficaciteacute Efficience

Satisfaction

Introduction agrave lrsquoergonomie

Pyramide des besoins MASLOW

45

Cornelia Laros

Introduction agrave lrsquoergonomie

Pyramide des besoins IHM46

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

47

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

48

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

49

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

50

Cornelia Laros

Introduction agrave lrsquoergonomie

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

51

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

Introduction agrave lrsquoergonomie

D - A quoi sert un prototype

52

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

53

Cornelia Laros

a Fiable

b Intuitif

c Fonctionnel

d Accessible

e Plaisant

f Porteur de sens

Introduction agrave lrsquoergonomie

F - Quel besoin ai-je oublieacute dans la question

preacuteceacutedente

54

Cornelia Laros

text

Patterns amp Dark patterns

55

Cornelia Laros

text

Criteres de Bastien et Scapin56

Cornelia Laros

Guidage

Charge de travail

Controcircle utilisateur explicite

Flexibiliteacute ( adaptabiliteacute)

Gestion des erreurs

Homogeacuteneacuteiteacute ( coheacuterence)

Signifiance des Codes et Deacutenominations

Compatibiliteacute ( familiariteacute)

Introduction agrave lrsquoergonomie

Guidage57

Cornelia Laros

Introduction agrave lrsquoergonomie

Charge de travail58

Cornelia Laros

Introduction agrave lrsquoergonomie

Controle explicite59

Cornelia Laros

Introduction agrave lrsquoergonomie

Controles explicites60

Cornelia Laros

Dar983595 983541983527t983545983589983590n

text

Adaptabiliteacute61

Cornelia Laros

text

Gestion des erreurs62

Cornelia Laros

text

Signifiance des codes et deacutenominations

63

Cornelia Laros

text

Homogeacuteneacuteiteacute - coheacuterence64

Cornelia Laros

text

Homogeacuteneacuteiteacute - Distinction65

Cornelia Laros

text

Compatibiliteacute66

Cornelia Laros

text

Compatibiliteacute67

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction68

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction69

Cornelia Laros

text

Gestalt Theorie70

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Gestalt Theorie71

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Dark patterns72

Cornelia Laros

Introduction agrave lrsquoergonomie

A vous de jouer

73

Cornelia Laros

Introduction agrave lrsquoergonomie

Outils de prototypages DIY74

Cornelia Laros

Low tech papier + crayons post-its cartes agrave jouer

Gratuit en ligne Invision app Moqups UXPin

Mac Sketch Balsamiq Mockups Axure

PC Axure Balsamiq

Mobile Prototyping on Paper

Ap983540983590en983530983555 983592983589 no983547983549983589983537le983543 983581h983586983543983589983588

Introduction agrave lrsquoergonomie

Test de perception DIY75

Cornelia Laros

La premiegravere impression qursquoun utilisateur se fait de votre IHM va influencer tous ses jugements ulteacuterieurs Crsquoest lrsquoeffet de halo

bull Un utilisateur qui a une premiegravere impression positive de votre appli passera plus facilement outre les bugs

bull Une premiegravere impression negative rendra lrsquoutilisateur plus critique vis agrave vis de deacutetails qui confirment son jugement

Cel983527 983538983580983590c983532e 983527983548983588si 983527983549983589983581 vo983543 983586983590983580ux 983591rsquoex983527983538983589983585s vo983543 983530983585t983542983589983546i983530n983543 983592rsquoem983528983527983548983581he 983530983545 983550983587s 983542e983585d983530983555-vo983547983543 983581l983535e983539983546s

Introduction agrave lrsquoergonomie

Test de perception DIY76

Cornelia Laros

Montrer votre prototype agrave quelqursquoun pendant 5 secondes

Demandez-lui

bull Ce qursquoil a vu

bull Ce qursquoil a compris de ce qursquoil a vu

bull Ce qui lrsquoa surpris ou marqueacute

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY77

Cornelia Laros

Les difficulteacutes de navigation se produisent souvent dans les niveaux les plus haut de votre structure de contenu Vous pouvez veacuterifier facilement si la classification logique pour vous lrsquoest aussi pour vos utilisateurs

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY78

Cornelia Laros

Lister trois (max) niveaux de profondeur de votre contenu structureacute Masquez ensuite les contenus de niveau plus bas Utilisez par exemple les groupements de lignes dans excel pour creacuteer des pliers-deacutepliers ou imprimer la liste sur une feuille que vous pliez pour masquer certaines parties

Demandez agrave un utilisateur de vous dire ougrave il penserait trouver un contenu bien preacutecis en preacutecisant qursquoil nrsquoy a pas de bonne reacuteponse

Notez srsquoil va chercher lagrave ougrave vous vous y attendiez ougrave il a heacutesiteacute et ce qursquoil a fini par choisir pour vous aider agrave rendre la navigation plus intuitive

Introduction agrave lrsquoergonomie

Test drsquoutilisabiliteacute DIY79

Cornelia Laros

A chaque nouvelle fonctionnaliteacute ajouteacutee demandez agrave quelqursquoun qui ne connait pas le projet de srsquoen servir Proposez lui une seule tacircche geacuteneacuterique agrave accomplir avec la fonctionnaliteacute

Exemple Tu veux prendre un rendez-vous avec un meacutedecin sur ce site montres-moi comment tu ferais en commentant agrave haute voix

Le plus important ici crsquoest de ne pas reacuteagir agrave ce qursquoil fait mais simplement le regarder faire sans lrsquoaider mecircme srsquoil est bloqueacute

Srsquoil 983540983586983588983589 de983543 983578983547983589s983545i983586983585s reacutepo983539983592983530z 983540983580983590 un983530 983577983548e983588t983534983587983539 o983547 d983535983545e983588 l983547983535 983577u983530 983550983587us 983536983547983535 983590eacutepo983539983592r983530983555 983578983548an983591 983534983537 983580ur983527 fi983539983535 983588rsquoil 983534983539983588983535s983545e Srsquoil 983530983543983546 v983542983580i983593983530n983545 983529l983587983577ueacute di983545983530983588 l983548i 983577983547983589 983550o983547s 983580983536983537ez 983542983530983550983587ir 983549983586983546r983589 983579o983541983534983589 et 983530983543983588983580ye983555 983592983530 c983587983538983541re983539983592r983530 983579983589 983578u983534 l983589 9835316ne

Introduction agrave lrsquoergonomie

Pas besoin de reacuteinventer la roue DIY

80

Cornelia Laros

Il existe des bonnes pratiques qui vous eacuteviteront de reacuteinventer la roue Utilisez des laquo design patterns raquo pour concevoir vos interfaces

Renseignez vous sur la Gestalt Theorie pour agencer vos pages

Utilisez les critegraveres de Bastien et Scapin pour trouver des deacutefauts eacutevidents avant de tester vous en tirerez des enseignements plus inteacuteressants

Ma983534s ccedila crsquoes983545 983541983586983548r u983539983530 983580u983546r983530 983559983587i983588

Introduction agrave lrsquoergonomie

Quizz time

81

Cornelia Laros

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

82

Cornelia Laros

1 c Fonctionnel

2 a Fiable

3 d Accessible

4 b Intuitif

5 e Plaisant

6 f Porteur de sens

text

F - Quel besoin ai-je oublieacute dans la question preacuteceacutedente

83

Cornelia Laros

Uti983536983534983588983580b983536e

Introduction agrave lrsquoergonomie

Tests DIY84

Cornelia Laros

Reacutedigez la proceacutedure pour tester un de vos projets drsquoIHM avec le test de votre choix perception arborescence ou utilisabiliteacute

Notez la question que vous vous posez et la question que vous allez poser

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

Introduction agrave lrsquoergonomie

Ergonomique ou pas3

Cornelia Laros

Introduction agrave lrsquoergonomie

Ergonomique ou pas4

Cornelia Laros

Introduction agrave lrsquoergonomie

Ergonomique ou pas5

Cornelia Laros

Introduction agrave lrsquoergonomie

Ergonomique ou pas6

Cornelia Laros

Introduction agrave lrsquoergonomie

Ergonomique ou pas7

Cornelia Laros

1 Design nrsquoest pas ergonomique

2 Adapteacute agrave la physiologie humaine

3 Adapteacute agrave un contexte drsquoutilisation pour reacutealiser une tacircche donneacutee

4 Adapteacute agrave la diversiteacute et agrave la variabiliteacute des personnes

Introduction agrave lrsquoergonomie

Ergonomique ou pas8

Cornelia Laros

A B

C D

Introduction agrave lrsquoergonomie

Tacircche vs Activiteacute9

Cornelia Laros

Introduction agrave lrsquoergonomie

Tacircche vs Activiteacute10

Cornelia Laros

Deacuteterminants externes (caracteacuteristiques de la

situation)

Introduction agrave lrsquoergonomie

Scheacutema agrave 5 carreacutes11

Cornelia Laros

Deacuteterminants internes (caracteacuteristiques de

lrsquoutilisateur)

Activiteacute

Effets sur la personne (santeacute motivation compeacutetencehellip)

Effets sur lrsquoentreprise (production revenus stocks

usure du mateacuterielhellip)

Reacutet983542o-ac983545983534983587983585Reacutet983542o-ac983545983534983587983585

In983545e983590983527c983545983535o983585 h983586983538983593983589 ma983579983533983534n983589 983591e983550983534983589n983545 I983585te983542983527983581t983535o983539 H983586983593m983589 983629983554983588tegraveme

Introduction agrave lrsquoergonomie

Catachregravese

12

Cornelia Laros

Art de deacutetourner un objet de la tacircche pour laquelle il a eacuteteacute conccedilu

Introduction agrave lrsquoergonomie

Ergonomique ne veux rien dire

Pour comprendre revenons aux origineshellip

13

Cornelia Laros

Introduction agrave lrsquoergonomie

Les origines14

Cornelia Laros

1857 1949

1880

1908

1946

Premiegravere utilisation du terme laquo ergonomie raquo par Jastrzebowski Fordisme

Institutionnalisation de la meacutedecine du travail

Le terme laquo ergonomie raquo est employeacute par Murrel

Taylorisme

1987Toyota Production System

XVIIIe Deacuteveloppement de lrsquoapproche productiviste du travail

XVIIe

Premiers eacutecrits et classification des maladies professionnelles

Moyen acircgeEtude des conditions de travail et des facteurs environnementaux

Antiquiteacute

Racines de lrsquoapproche hygieacuteniste du travail

Introduction agrave lrsquoergonomie

Ameacuteliorer agrave la fois la productiviteacute et les

conditions de travailParce qursquoun employeacute motiveacute et en bonne santeacute est plus

productif et tout le monde y gagne

15

Cornelia Laros

Introduction agrave lrsquoergonomie

Inter-discplinariteacute16

Cornelia Laros

Ps983554983581ho983536983586983594983535e

In983531eacuteni983530983542983535e

Ne983547r983587983543983581i983530n983579983589983588

Ph983554983588i983586l983587983531i983530

Meacutede983579983534983585983589

Soc983534983587983536o983594983534983589

Ergonomie

Introduction agrave lrsquoergonomie

Domaines drsquointervention17

Cornelia Laros

Ps983554983581ho983536983586983594983535eIn983531eacuteni983530983542983535e

Ne983547r983587983543983581i983530n983579983589983588

Phi983543983534983587983537og983534983589Meacutede983579983534983585983589

Soc983534983587983536o983594983534983589Ergonomie

Ergonomie physique

Ergonomie organisationnelle

Ergonomie cognitive

Optimisation des situations et postes de travail dans leur

relation avec lrsquoactiviteacute physique

Optimisation des systegravemes socio-techniques structures

organisationnelles regravegles et processus

Optimisation du travail mental perception prise de deacutecision

reacutesolution de problegravemes

Introduction agrave lrsquoergonomie

Domaines drsquointervention18

Cornelia Laros

Organisationnelle 10

Physique 20

Cognitive 70

Introduction agrave lrsquoergonomie

Quizz time

19

Cornelia Laros

text

A - Lrsquoergonomie sert agravehellip20

Cornelia Laros

1 ameacuteliorer les conditions de travail

2 faire gagner plus drsquoargent agrave lrsquoentreprise

3 ameacuteliorer lrsquoestheacutetique

4 comprendre comment ameacuteliorer un produit

text

B - Quelles affirmations sont vraies

21

Cornelia Laros

1 Lrsquoergonomie srsquoattache agrave comprendre le travail pour le transformer

2 Il est possible de concevoir une IHM qui fonctionne pour tout le monde en se basant sur des normes

3 Lrsquoutilisateur va se servir de votre produit de la faccedilon dont vous lrsquoavez imagineacute

4 Lrsquoutilisateur interpregravete une tacircche comme un problegraveme qursquoil doit reacutesoudre en faisant avec ses caracteacuteristiques et les moyens mis agrave sa disposition

text

Pause cafeacute

10 minutes

22

Cornelia Laros

Introduction agrave lrsquoergonomie

Quelques meacutethodes drsquoergonomie

23

Cornelia Laros

Introduction agrave lrsquoergonomie

Ergonomie de conception

24

Cornelia Laros

Ergonomie de correctionbull Analyse drsquoactiviteacute

bull Audit

bull Analyse drsquoeacutevegravenements critiques

bull Analyse de traces

bull Simulation

bull Entretiens

bull Persona cartes drsquoexpeacuteriences

bull Tri par cartes

bull Prototypage

bull Benchmarkhellip

Lrsquoergonomie tout au long du projet

Introduction agrave lrsquoergonomie

Ergonomie de conception

25

Cornelia Laros

Ergonomie de correctionbull Analyse drsquoactiviteacute

bull Audit

bull Analyse drsquoeacutevegravenements critiques

bull Analyse de traces

bull Simulationhellip

bullEntretiens

bullPersona cartes drsquoexpeacuteriences

bullTri par cartes

bullPrototypage

bullBenchmarkhellip

Des meacutethodes de recueil de donneacutees avec utilisateurs finaux et de conception laquo experte raquo

Introduction agrave lrsquoergonomie

Pourquoi ces meacutethodes26

Cornelia Laros

bull Si jrsquoavais demandeacute aux utilisateurs ce qursquoils voulaient ils mrsquoauraient demandeacute un cheval plus rapide - Henri Ford

bull Un comportement laquo sur-appris raquo devient un automatisme inconscient que lrsquoutilisateur ne saura pas expliquer (ex passer les vitesses en conduisant)

bull Le cerveau humain est propice agrave la fabulation (imagination de causes) aux faux souvenirs (en toute bonne fois) les biais (deacutesirabiliteacute effet pygmalion influence socialehellip)

Observer

Introduction agrave lrsquoergonomie

Pourquoi ces meacutethodes27

Cornelia Laros

bull Une imagine est plus parlante que 10 000 mots

bull Permet drsquoeacutevaluer une ideacutee agrave moindre coucirct donc de se tromper souvent et drsquoapprendre plus vite pour valider une ideacutee ou lrsquoameacuteliorer

bull Permet de tester plein drsquoideacutees et de retenir la meilleure

hellip A condition de se focaliser sur un objectif et non sur lrsquoideacutee elle-mecircme

Modeacuteliser

Introduction agrave lrsquoergonomie

Lrsquoensemble permet drsquoeacuteviter ceci

28

Cornelia Laros

Introduction agrave lrsquoergonomie

Lrsquoensemble permet drsquoeacuteviter ceci

29

Cornelia Laros

Eli983538983534983585eacute en 983586983528983588983589r983549a983585t

Eli983538983534983585eacute en 983540983590983586t983587983545983584pa983539983546

Introduction agrave lrsquoergonomie

Prototyper pour vous crsquoesthellip30

Cornelia Laros

CONTRIBUTION AUX SPECIFICATIONS FONCTIONNELLES

Zoning basse fideacuteliteacute wireframe statique (sketch ou non) bull Rapide et peu couteux bull Illustratif statique pas drsquointeraction bull Non engageant sur le design bull Tregraves peu explicite sur le plan fonctionnel

Story-board cliquable bull Illustre la navigation bull Permet de se projeter dans lrsquointeraction bull Pose les bases du design et du fonctionnel

Prototype semi-dynamique bull Se veut complet (ou quasi) sur le plan de la

navigation de lrsquointeraction et des cas drsquoutilisation bull Doit permettre de simuler fidegravelement le

fonctionnement drsquoune application bull Est une speacutecification fonctionnelle en soi

Pha983543983530 983592983589 ca983591983590983527g983589 AM983623983607

Pha983543983530 983592983589 co983539983581983530p983545983535o983585 f983586983539983581t983535o983539983585983530l983536983589

Tes983545983588 983547t983535983536i983588983527t983589u983542983588 ap983540983537983534s 983538983587983529il983530983543hellip

Introduction agrave lrsquoergonomie

Prototype basse definition31

Cornelia Laros

Introduction agrave lrsquoergonomie

Prototyper cliquable32

Cornelia Laros

Introduction agrave lrsquoergonomie

Prototyper semi-dynamique33

Cornelia Laros

Page Title

1230

Mobile interactions

Observably Sc i$amp

About

Project overiew

Manage sessions

Manage variables

Settings

Start observing

1230 1230

OverviewObserve

Observe mobile interactions in the field to assess dominant hand for holding and interacting with smartphones

10042016Mobile interactionsMobile interactions

Welcome to Observably Gather and manage observation dataGather and manage observation data

My projects

1230

Tags separate with comas

Variable value

Create

Add observablesAdd all observables you want to track for this project You can come back and edit them laterAdd all observables you want to track for this project You can come back and edit them later

Thanks for the hint

Manage variablesMobile InteractionsMobile Interactions

1230

Tags separate with comas

Variable value

Create

Left hand Right thumbLRTLRT

Manage variablesMobile InteractionsMobile Interactions

Irsquom done Start recording

Save changesCancel

Observable Tags separate with coma

Tags separate with comas

3 20

LRILRI

Observable label

Did you knowTap on the icon to customize it Use icons from our library or from your gallery to make variables pop out when observing

Tap on the icon to customize it Use icons from our library or from your gallery to make variables pop out when observing

Thanks for the hint

Left hand Right thumbLRTLRT

Irsquom done Start recording

Manage variablesMobile InteractionsMobile Interactions

Left hand x Right thumb x

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Did you knowIf you make a mistake you can undo your action by tapping on the icon of the taskIf you make a mistake you can undo your action by tapping on the icon of the task

Thanks for the hint

Session 1

Discrete mode New Session

Mobile InteractionsMobile Interactions

1230

Record vocal comment

LRILRILRILRILRILRI

Did you knowYou can record occurences durations and comments by chosing the record format in the drop-down above

You can record occurences durations and comments by chosing the record format in the drop-down above

Thanks for the hint

Discrete mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

Left hand Right thumbLRT

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Did you knowIn list view you can slipe left and right to increment or correct your countIn list view you can slipe left and right to increment or correct your count

Thanks for the hint

Continuous mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

LRILRILRILRILRI

Did you knowIf you make a mistake you can undo your action by tapping on the icon of the taskIf you make a mistake you can undo your action by tapping on the icon of the task

Thanks for the hint

Continuous mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

Tags separate with comas

Comment

Add

Did you know The timestamp of vocal comments is the start time to accurately mark events that triggered your comment

The timestamp of vocal comments is the start time to accurately mark events that triggered your comment

Thanks for the hint

Manage observables

Comments mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Stop recording vocal comment

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Your observationsManage and cleanup sessions before exporting dataManage and cleanup sessions before exporting data

Session ManagementMobile InteractionsMobile Interactions

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

LRT

LRI

RLI

RLT

RRT20

20

8

35

15

Count SummaryCount Summary

RLT

RRT20

815

Time SummaryTime Summary

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

Left hand Right thumbLRTLRT

+1+1

10042016 124627

Left hand Right thumbLRTLRT

2rsquorsquo2rsquorsquo

10042016 124627 - 10042016 124629

Content of my comment boxTag1 Tag2

10042016 124644

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

LRTLRT+1+1

10042016 124627

Save changes

Observable Tags separate with coma

Tags separate with comas

Left hand x Right thumb x

AboutAbout

1230

Observable science provides tools for field research and scientific observation It is tailored to the needs of ethnography human factors psychology usability and games user research

Observable science provides tools for field research and scientific observation It is tailored to the needs of ethnography human factors psychology usability and games user research

Observablyscience

Development by Morgane RadelDesign by Cornelia LarosDevelopment by Morgane RadelDesign by Cornelia Laros

Credits

Support (us)Show your love Rate the App

Make a donation

Contact us

Visit our website

Add session tags to all observations

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

Save changes

Session Tags separate with coma

Tags separate with comas

Metro x Toulouse x

Manage variablesMobile InteractionsMobile Interactions

1230

Left hand Right thumbLRTLRT

Confirm

Search icons

Cancel

Browse

3 20

Observably Sci$amp

1230

Project statisticsProject statistics Total countsTotal time Total comments First entryLast entrySessions

4 963281231

1441201201603042016

97

Project detailsMobile InteractionsMobile Interactions

Sessions SummarySessions Summary

RRT20

815

Count SummaryCount Summary

JUN 14MAY 14APR 14MAR 14FEB 14JAN 14

4

1

65

7

0

2

4

6

8

10

3

2014

Manage sessions

Settings ExportOverview

1230

App optionsDisplay hintsDisplay hints

SettingsSettings

Share anonymous data to improve the appShare anonymous data to improve the app

1230

Gather and manage observation data with ObservablyGather and manage observation data with Observably

Welcome to Observably

Project name

Project description what is the goal of your project

CreateCancel

Session[number]Session[number]

Default Session ID

Default export format txt

Data options

Default Discrete variable lines view

Create a new project

1230

Project detailsMobile InteractionsMobile Interactions

Mobile InteractionsMobile Interactions

Project description what is the goal of your project

SaveCancel

Session[number]Session[number]

Default Session ID

Default export format txt

Data options

Default continuous variables grid view

Project name

Manage sessions

Settings ExportOverview

1230

Project detailsMobile InteractionsMobile Interactions

Manage sessions

Settings ExportOverview

Export format txt

Export data

Data has been successfully exported as MobileInteractionstxt

to your download folder

Observably Sc i$amp

Settings

1230

BUTTONBUTTON

Permissions

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Up exlaborum incididunt quis nostrud exercitatn

COMPONENTS

Pickers

OKCANCEL

13

Friday

MAR

2014

MS W T F ST

30 31

1

16 17 19 20 21 2218

23 24 26 27 28 2925

139 10 12 14 1511

72 3 5 6 84

March 2014

OKCANCEL

PMAM

112

9

10

11

2

48

576

3

330 AM

Notifications

Incoming call

Rachel Ligson

IGNORE ANSWER

REPLYARCHIVE

Hey letrsquos catch up soon Do you want to grab lunch sometime this weekendLet me know when yoursquore free

409 PMHannah ChoHannah Cho

Do you know what I mean509 PMTina McBeanTina McBean

Heads up notification

Regular + Expanded notification

Index scroller

All

Patrick Keenan

Mary Johnson

Tina Santiago

Trevor Hansen

Amar Sagoo

Abbey Christensen

Ali Connors

Alex Nelson

Anthony Stevens

A

A

1230

Abcdefg

Abcdefghijklmno

Tabs

THE THIRDITEM TWONO ONE

THE THIRDITEM TWONO ONE

1230

THE THIRDITEM TWONO ONE

Page Title

1230

121 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

110 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

51 50

Input text for a single line field with a maximu

Single-Line Input Label

31 50

Input text for a single line field with a max

Single-Line Input Label

121 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

110 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

51 50

Input text for a single line field with a maximuInput text for a single line field with a maximu

Single-Line Input Label

31 50

Input text for a single line field with a maxInput text for a single line field with a max

Single-Line Input Label

Disabled text field

Input text

Username or Password is incorrect

Input text

Input tex

Hint text

Hint text

Hint text

Disabled text field

Input textInput text

Username or Password is incorrect

Input textInput text

Input texInput tex

Hint text

Hint text

Hint text

Text fields

Switches and sliders

60

Regular

Pressed

Disabled

60

Regular

Pressed

Disabled

Buttons

DISABLED

PRESSED

NORMAL

DISABLED

PRESSED

NORMAL

Flat Raised

DISABLED

PRESSED

NORMAL

DISABLED

PRESSED

NORMAL

Flat Raised

Toasts

This color applies to both light and dark theme

This item already has the label ldquotravelrdquo You can add a new label

ACTIONSingle-Line Snackbar

Menu

Arial 100

100

Calibri

Courier

Verdana

Arial

Chips

Trevor Hansen

email3emailcom

email2emailcom

primaryemailemailcomContact Name

Dialogs

Desktop

Without title With title

BUTTONBUTTON

PermissionsLorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Up exlaborum incididunt quis nostrud exercitatn

BUTTONBUTTON

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Ut enim ad minim ikad veniam quis nostrud exercitatn ullamco laboris nisi ut aliquip exlaborum incididunt

ACCEPTDECLINEMORE INFO

Permissions

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisinuli

Toolbar

11Roboto

Cards

Welcome BackItrsquos been a while have you read any new books latelyItrsquos been a while have you read any new books lately

YESNOPE

Kangaroo Valley Safari

Located two hours south of Sydney in the

Southern Highlands of New South Wales

LEARN MORESHARE

REVIEWFREE SAMPLE

By Alex Nelson

El Pooch

Pre-fab Homes

Favorite Road Trips

Best Airlines

Campbell

Groceries

almond milk

coconut water

cucumber

green apples

Yuna tickets on sale 624

May 24 2014

Clean desk

Keyboards

suggestion suggestion suggestion

123

a s d f g h j k l

z x c v b n m

q w e r t y u i o p1 2 3 4 5 6 7 8 9 0

suggestion suggestion suggestion

123

a s d f g h j k l

z x c v b n m

q w e r t y u i o p1 2 3 4 5 6 7 8 9 0

Bottom Sheet

Print this page

Copy

Upload

Share

MoreMail Message

Google+Gmail Hangout

Grid

Two lineSupport text

Two lineSupport text

Single line

Single line

Lists

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Three-line itemThree-line item

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Three-line itemThree-line item

Three-line itemThree-line item

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Three-line itemThree-line item

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Three-line itemThree-line item

Three-line itemThree-line item

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Line item unselectedLine item unselected

Line item selectedLine item selected

Line item selectedLine item selected

Data usageData usage

BluetoothBluetooth

Wi-FiWi-Fi

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Single-line itemSingle-line item

Single-line itemSingle-line item

Single-line itemSingle-line itemSingle-line itemSingle-line item

Single-line itemSingle-line item

Single-line itemSingle-line item

Introduction agrave lrsquoergonomie

Ergonomie et Design34

Cornelia Laros

Design Ergonomie Design Ergonomie

Identiteacute

Communication

Ambiance

Exemple un site institutionnel informatif avec une navigation simple et des exigences fortes

drsquoidentiteacuteExemple une application meacutetier destineacutee agrave une

population drsquoutilisateur connue

EfficaciteacuteFonctionnel

Outils

Service en ligne

Architecture de lrsquoinformation contenus bonnes pratiques

Analyse tache vs activiteacute prise en compte globaliseacutee des process

postes de travail eacutecosystegraveme existant hellip puis la conception

Image Usage freacutequent

Usage ponctuel

Votre eacutequipe Ergonome Directeur aristique Webdesigner UX Designer

Introduction agrave lrsquoergonomie

Design avant-tout35

Cornelia Laros

Introduction agrave lrsquoergonomie

Equilibreacute36

Cornelia Laros

Introduction agrave lrsquoergonomie

Ergonomie avant tout37

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

38

Cornelia Laros

text

Lrsquoergonomie sert agravehellip39

Cornelia Laros

1 ameacuteliorer les conditions de travail

2 faire gagner plus drsquoargent agrave lrsquoentreprise

3 ameacuteliorer lrsquoestheacutetique

4 comprendre comment ameacuteliorer un produit

text

Quelles affirmations sont vraies

40

Cornelia Laros

1 Lrsquoergonomie srsquoattache agrave comprendre le travail pour le transformer

2 Il est possible de concevoir une IHM qui fonctionne pour tout le monde en se basant sur des normes

3 Lrsquoutilisateur va se servir de votre produit de la faccedilon dont vous lrsquoavez imagineacute

4 Lrsquoutilisateur interpregravete une tacircche comme un problegraveme qursquoil doit reacutesoudre en faisant avec ses caracteacuteristiques et les moyens mis agrave sa disposition

text

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

41

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

text

D - A quoi sert un prototype

42

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

43

Cornelia Laros

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

44

Cornelia Laros

Utilisabiliteacute

Utiliteacute

Efficaciteacute Efficience

Satisfaction

Introduction agrave lrsquoergonomie

Pyramide des besoins MASLOW

45

Cornelia Laros

Introduction agrave lrsquoergonomie

Pyramide des besoins IHM46

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

47

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

48

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

49

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

50

Cornelia Laros

Introduction agrave lrsquoergonomie

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

51

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

Introduction agrave lrsquoergonomie

D - A quoi sert un prototype

52

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

53

Cornelia Laros

a Fiable

b Intuitif

c Fonctionnel

d Accessible

e Plaisant

f Porteur de sens

Introduction agrave lrsquoergonomie

F - Quel besoin ai-je oublieacute dans la question

preacuteceacutedente

54

Cornelia Laros

text

Patterns amp Dark patterns

55

Cornelia Laros

text

Criteres de Bastien et Scapin56

Cornelia Laros

Guidage

Charge de travail

Controcircle utilisateur explicite

Flexibiliteacute ( adaptabiliteacute)

Gestion des erreurs

Homogeacuteneacuteiteacute ( coheacuterence)

Signifiance des Codes et Deacutenominations

Compatibiliteacute ( familiariteacute)

Introduction agrave lrsquoergonomie

Guidage57

Cornelia Laros

Introduction agrave lrsquoergonomie

Charge de travail58

Cornelia Laros

Introduction agrave lrsquoergonomie

Controle explicite59

Cornelia Laros

Introduction agrave lrsquoergonomie

Controles explicites60

Cornelia Laros

Dar983595 983541983527t983545983589983590n

text

Adaptabiliteacute61

Cornelia Laros

text

Gestion des erreurs62

Cornelia Laros

text

Signifiance des codes et deacutenominations

63

Cornelia Laros

text

Homogeacuteneacuteiteacute - coheacuterence64

Cornelia Laros

text

Homogeacuteneacuteiteacute - Distinction65

Cornelia Laros

text

Compatibiliteacute66

Cornelia Laros

text

Compatibiliteacute67

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction68

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction69

Cornelia Laros

text

Gestalt Theorie70

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Gestalt Theorie71

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Dark patterns72

Cornelia Laros

Introduction agrave lrsquoergonomie

A vous de jouer

73

Cornelia Laros

Introduction agrave lrsquoergonomie

Outils de prototypages DIY74

Cornelia Laros

Low tech papier + crayons post-its cartes agrave jouer

Gratuit en ligne Invision app Moqups UXPin

Mac Sketch Balsamiq Mockups Axure

PC Axure Balsamiq

Mobile Prototyping on Paper

Ap983540983590en983530983555 983592983589 no983547983549983589983537le983543 983581h983586983543983589983588

Introduction agrave lrsquoergonomie

Test de perception DIY75

Cornelia Laros

La premiegravere impression qursquoun utilisateur se fait de votre IHM va influencer tous ses jugements ulteacuterieurs Crsquoest lrsquoeffet de halo

bull Un utilisateur qui a une premiegravere impression positive de votre appli passera plus facilement outre les bugs

bull Une premiegravere impression negative rendra lrsquoutilisateur plus critique vis agrave vis de deacutetails qui confirment son jugement

Cel983527 983538983580983590c983532e 983527983548983588si 983527983549983589983581 vo983543 983586983590983580ux 983591rsquoex983527983538983589983585s vo983543 983530983585t983542983589983546i983530n983543 983592rsquoem983528983527983548983581he 983530983545 983550983587s 983542e983585d983530983555-vo983547983543 983581l983535e983539983546s

Introduction agrave lrsquoergonomie

Test de perception DIY76

Cornelia Laros

Montrer votre prototype agrave quelqursquoun pendant 5 secondes

Demandez-lui

bull Ce qursquoil a vu

bull Ce qursquoil a compris de ce qursquoil a vu

bull Ce qui lrsquoa surpris ou marqueacute

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY77

Cornelia Laros

Les difficulteacutes de navigation se produisent souvent dans les niveaux les plus haut de votre structure de contenu Vous pouvez veacuterifier facilement si la classification logique pour vous lrsquoest aussi pour vos utilisateurs

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY78

Cornelia Laros

Lister trois (max) niveaux de profondeur de votre contenu structureacute Masquez ensuite les contenus de niveau plus bas Utilisez par exemple les groupements de lignes dans excel pour creacuteer des pliers-deacutepliers ou imprimer la liste sur une feuille que vous pliez pour masquer certaines parties

Demandez agrave un utilisateur de vous dire ougrave il penserait trouver un contenu bien preacutecis en preacutecisant qursquoil nrsquoy a pas de bonne reacuteponse

Notez srsquoil va chercher lagrave ougrave vous vous y attendiez ougrave il a heacutesiteacute et ce qursquoil a fini par choisir pour vous aider agrave rendre la navigation plus intuitive

Introduction agrave lrsquoergonomie

Test drsquoutilisabiliteacute DIY79

Cornelia Laros

A chaque nouvelle fonctionnaliteacute ajouteacutee demandez agrave quelqursquoun qui ne connait pas le projet de srsquoen servir Proposez lui une seule tacircche geacuteneacuterique agrave accomplir avec la fonctionnaliteacute

Exemple Tu veux prendre un rendez-vous avec un meacutedecin sur ce site montres-moi comment tu ferais en commentant agrave haute voix

Le plus important ici crsquoest de ne pas reacuteagir agrave ce qursquoil fait mais simplement le regarder faire sans lrsquoaider mecircme srsquoil est bloqueacute

Srsquoil 983540983586983588983589 de983543 983578983547983589s983545i983586983585s reacutepo983539983592983530z 983540983580983590 un983530 983577983548e983588t983534983587983539 o983547 d983535983545e983588 l983547983535 983577u983530 983550983587us 983536983547983535 983590eacutepo983539983592r983530983555 983578983548an983591 983534983537 983580ur983527 fi983539983535 983588rsquoil 983534983539983588983535s983545e Srsquoil 983530983543983546 v983542983580i983593983530n983545 983529l983587983577ueacute di983545983530983588 l983548i 983577983547983589 983550o983547s 983580983536983537ez 983542983530983550983587ir 983549983586983546r983589 983579o983541983534983589 et 983530983543983588983580ye983555 983592983530 c983587983538983541re983539983592r983530 983579983589 983578u983534 l983589 9835316ne

Introduction agrave lrsquoergonomie

Pas besoin de reacuteinventer la roue DIY

80

Cornelia Laros

Il existe des bonnes pratiques qui vous eacuteviteront de reacuteinventer la roue Utilisez des laquo design patterns raquo pour concevoir vos interfaces

Renseignez vous sur la Gestalt Theorie pour agencer vos pages

Utilisez les critegraveres de Bastien et Scapin pour trouver des deacutefauts eacutevidents avant de tester vous en tirerez des enseignements plus inteacuteressants

Ma983534s ccedila crsquoes983545 983541983586983548r u983539983530 983580u983546r983530 983559983587i983588

Introduction agrave lrsquoergonomie

Quizz time

81

Cornelia Laros

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

82

Cornelia Laros

1 c Fonctionnel

2 a Fiable

3 d Accessible

4 b Intuitif

5 e Plaisant

6 f Porteur de sens

text

F - Quel besoin ai-je oublieacute dans la question preacuteceacutedente

83

Cornelia Laros

Uti983536983534983588983580b983536e

Introduction agrave lrsquoergonomie

Tests DIY84

Cornelia Laros

Reacutedigez la proceacutedure pour tester un de vos projets drsquoIHM avec le test de votre choix perception arborescence ou utilisabiliteacute

Notez la question que vous vous posez et la question que vous allez poser

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

Introduction agrave lrsquoergonomie

Ergonomique ou pas4

Cornelia Laros

Introduction agrave lrsquoergonomie

Ergonomique ou pas5

Cornelia Laros

Introduction agrave lrsquoergonomie

Ergonomique ou pas6

Cornelia Laros

Introduction agrave lrsquoergonomie

Ergonomique ou pas7

Cornelia Laros

1 Design nrsquoest pas ergonomique

2 Adapteacute agrave la physiologie humaine

3 Adapteacute agrave un contexte drsquoutilisation pour reacutealiser une tacircche donneacutee

4 Adapteacute agrave la diversiteacute et agrave la variabiliteacute des personnes

Introduction agrave lrsquoergonomie

Ergonomique ou pas8

Cornelia Laros

A B

C D

Introduction agrave lrsquoergonomie

Tacircche vs Activiteacute9

Cornelia Laros

Introduction agrave lrsquoergonomie

Tacircche vs Activiteacute10

Cornelia Laros

Deacuteterminants externes (caracteacuteristiques de la

situation)

Introduction agrave lrsquoergonomie

Scheacutema agrave 5 carreacutes11

Cornelia Laros

Deacuteterminants internes (caracteacuteristiques de

lrsquoutilisateur)

Activiteacute

Effets sur la personne (santeacute motivation compeacutetencehellip)

Effets sur lrsquoentreprise (production revenus stocks

usure du mateacuterielhellip)

Reacutet983542o-ac983545983534983587983585Reacutet983542o-ac983545983534983587983585

In983545e983590983527c983545983535o983585 h983586983538983593983589 ma983579983533983534n983589 983591e983550983534983589n983545 I983585te983542983527983581t983535o983539 H983586983593m983589 983629983554983588tegraveme

Introduction agrave lrsquoergonomie

Catachregravese

12

Cornelia Laros

Art de deacutetourner un objet de la tacircche pour laquelle il a eacuteteacute conccedilu

Introduction agrave lrsquoergonomie

Ergonomique ne veux rien dire

Pour comprendre revenons aux origineshellip

13

Cornelia Laros

Introduction agrave lrsquoergonomie

Les origines14

Cornelia Laros

1857 1949

1880

1908

1946

Premiegravere utilisation du terme laquo ergonomie raquo par Jastrzebowski Fordisme

Institutionnalisation de la meacutedecine du travail

Le terme laquo ergonomie raquo est employeacute par Murrel

Taylorisme

1987Toyota Production System

XVIIIe Deacuteveloppement de lrsquoapproche productiviste du travail

XVIIe

Premiers eacutecrits et classification des maladies professionnelles

Moyen acircgeEtude des conditions de travail et des facteurs environnementaux

Antiquiteacute

Racines de lrsquoapproche hygieacuteniste du travail

Introduction agrave lrsquoergonomie

Ameacuteliorer agrave la fois la productiviteacute et les

conditions de travailParce qursquoun employeacute motiveacute et en bonne santeacute est plus

productif et tout le monde y gagne

15

Cornelia Laros

Introduction agrave lrsquoergonomie

Inter-discplinariteacute16

Cornelia Laros

Ps983554983581ho983536983586983594983535e

In983531eacuteni983530983542983535e

Ne983547r983587983543983581i983530n983579983589983588

Ph983554983588i983586l983587983531i983530

Meacutede983579983534983585983589

Soc983534983587983536o983594983534983589

Ergonomie

Introduction agrave lrsquoergonomie

Domaines drsquointervention17

Cornelia Laros

Ps983554983581ho983536983586983594983535eIn983531eacuteni983530983542983535e

Ne983547r983587983543983581i983530n983579983589983588

Phi983543983534983587983537og983534983589Meacutede983579983534983585983589

Soc983534983587983536o983594983534983589Ergonomie

Ergonomie physique

Ergonomie organisationnelle

Ergonomie cognitive

Optimisation des situations et postes de travail dans leur

relation avec lrsquoactiviteacute physique

Optimisation des systegravemes socio-techniques structures

organisationnelles regravegles et processus

Optimisation du travail mental perception prise de deacutecision

reacutesolution de problegravemes

Introduction agrave lrsquoergonomie

Domaines drsquointervention18

Cornelia Laros

Organisationnelle 10

Physique 20

Cognitive 70

Introduction agrave lrsquoergonomie

Quizz time

19

Cornelia Laros

text

A - Lrsquoergonomie sert agravehellip20

Cornelia Laros

1 ameacuteliorer les conditions de travail

2 faire gagner plus drsquoargent agrave lrsquoentreprise

3 ameacuteliorer lrsquoestheacutetique

4 comprendre comment ameacuteliorer un produit

text

B - Quelles affirmations sont vraies

21

Cornelia Laros

1 Lrsquoergonomie srsquoattache agrave comprendre le travail pour le transformer

2 Il est possible de concevoir une IHM qui fonctionne pour tout le monde en se basant sur des normes

3 Lrsquoutilisateur va se servir de votre produit de la faccedilon dont vous lrsquoavez imagineacute

4 Lrsquoutilisateur interpregravete une tacircche comme un problegraveme qursquoil doit reacutesoudre en faisant avec ses caracteacuteristiques et les moyens mis agrave sa disposition

text

Pause cafeacute

10 minutes

22

Cornelia Laros

Introduction agrave lrsquoergonomie

Quelques meacutethodes drsquoergonomie

23

Cornelia Laros

Introduction agrave lrsquoergonomie

Ergonomie de conception

24

Cornelia Laros

Ergonomie de correctionbull Analyse drsquoactiviteacute

bull Audit

bull Analyse drsquoeacutevegravenements critiques

bull Analyse de traces

bull Simulation

bull Entretiens

bull Persona cartes drsquoexpeacuteriences

bull Tri par cartes

bull Prototypage

bull Benchmarkhellip

Lrsquoergonomie tout au long du projet

Introduction agrave lrsquoergonomie

Ergonomie de conception

25

Cornelia Laros

Ergonomie de correctionbull Analyse drsquoactiviteacute

bull Audit

bull Analyse drsquoeacutevegravenements critiques

bull Analyse de traces

bull Simulationhellip

bullEntretiens

bullPersona cartes drsquoexpeacuteriences

bullTri par cartes

bullPrototypage

bullBenchmarkhellip

Des meacutethodes de recueil de donneacutees avec utilisateurs finaux et de conception laquo experte raquo

Introduction agrave lrsquoergonomie

Pourquoi ces meacutethodes26

Cornelia Laros

bull Si jrsquoavais demandeacute aux utilisateurs ce qursquoils voulaient ils mrsquoauraient demandeacute un cheval plus rapide - Henri Ford

bull Un comportement laquo sur-appris raquo devient un automatisme inconscient que lrsquoutilisateur ne saura pas expliquer (ex passer les vitesses en conduisant)

bull Le cerveau humain est propice agrave la fabulation (imagination de causes) aux faux souvenirs (en toute bonne fois) les biais (deacutesirabiliteacute effet pygmalion influence socialehellip)

Observer

Introduction agrave lrsquoergonomie

Pourquoi ces meacutethodes27

Cornelia Laros

bull Une imagine est plus parlante que 10 000 mots

bull Permet drsquoeacutevaluer une ideacutee agrave moindre coucirct donc de se tromper souvent et drsquoapprendre plus vite pour valider une ideacutee ou lrsquoameacuteliorer

bull Permet de tester plein drsquoideacutees et de retenir la meilleure

hellip A condition de se focaliser sur un objectif et non sur lrsquoideacutee elle-mecircme

Modeacuteliser

Introduction agrave lrsquoergonomie

Lrsquoensemble permet drsquoeacuteviter ceci

28

Cornelia Laros

Introduction agrave lrsquoergonomie

Lrsquoensemble permet drsquoeacuteviter ceci

29

Cornelia Laros

Eli983538983534983585eacute en 983586983528983588983589r983549a983585t

Eli983538983534983585eacute en 983540983590983586t983587983545983584pa983539983546

Introduction agrave lrsquoergonomie

Prototyper pour vous crsquoesthellip30

Cornelia Laros

CONTRIBUTION AUX SPECIFICATIONS FONCTIONNELLES

Zoning basse fideacuteliteacute wireframe statique (sketch ou non) bull Rapide et peu couteux bull Illustratif statique pas drsquointeraction bull Non engageant sur le design bull Tregraves peu explicite sur le plan fonctionnel

Story-board cliquable bull Illustre la navigation bull Permet de se projeter dans lrsquointeraction bull Pose les bases du design et du fonctionnel

Prototype semi-dynamique bull Se veut complet (ou quasi) sur le plan de la

navigation de lrsquointeraction et des cas drsquoutilisation bull Doit permettre de simuler fidegravelement le

fonctionnement drsquoune application bull Est une speacutecification fonctionnelle en soi

Pha983543983530 983592983589 ca983591983590983527g983589 AM983623983607

Pha983543983530 983592983589 co983539983581983530p983545983535o983585 f983586983539983581t983535o983539983585983530l983536983589

Tes983545983588 983547t983535983536i983588983527t983589u983542983588 ap983540983537983534s 983538983587983529il983530983543hellip

Introduction agrave lrsquoergonomie

Prototype basse definition31

Cornelia Laros

Introduction agrave lrsquoergonomie

Prototyper cliquable32

Cornelia Laros

Introduction agrave lrsquoergonomie

Prototyper semi-dynamique33

Cornelia Laros

Page Title

1230

Mobile interactions

Observably Sc i$amp

About

Project overiew

Manage sessions

Manage variables

Settings

Start observing

1230 1230

OverviewObserve

Observe mobile interactions in the field to assess dominant hand for holding and interacting with smartphones

10042016Mobile interactionsMobile interactions

Welcome to Observably Gather and manage observation dataGather and manage observation data

My projects

1230

Tags separate with comas

Variable value

Create

Add observablesAdd all observables you want to track for this project You can come back and edit them laterAdd all observables you want to track for this project You can come back and edit them later

Thanks for the hint

Manage variablesMobile InteractionsMobile Interactions

1230

Tags separate with comas

Variable value

Create

Left hand Right thumbLRTLRT

Manage variablesMobile InteractionsMobile Interactions

Irsquom done Start recording

Save changesCancel

Observable Tags separate with coma

Tags separate with comas

3 20

LRILRI

Observable label

Did you knowTap on the icon to customize it Use icons from our library or from your gallery to make variables pop out when observing

Tap on the icon to customize it Use icons from our library or from your gallery to make variables pop out when observing

Thanks for the hint

Left hand Right thumbLRTLRT

Irsquom done Start recording

Manage variablesMobile InteractionsMobile Interactions

Left hand x Right thumb x

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Did you knowIf you make a mistake you can undo your action by tapping on the icon of the taskIf you make a mistake you can undo your action by tapping on the icon of the task

Thanks for the hint

Session 1

Discrete mode New Session

Mobile InteractionsMobile Interactions

1230

Record vocal comment

LRILRILRILRILRILRI

Did you knowYou can record occurences durations and comments by chosing the record format in the drop-down above

You can record occurences durations and comments by chosing the record format in the drop-down above

Thanks for the hint

Discrete mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

Left hand Right thumbLRT

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Did you knowIn list view you can slipe left and right to increment or correct your countIn list view you can slipe left and right to increment or correct your count

Thanks for the hint

Continuous mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

LRILRILRILRILRI

Did you knowIf you make a mistake you can undo your action by tapping on the icon of the taskIf you make a mistake you can undo your action by tapping on the icon of the task

Thanks for the hint

Continuous mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

Tags separate with comas

Comment

Add

Did you know The timestamp of vocal comments is the start time to accurately mark events that triggered your comment

The timestamp of vocal comments is the start time to accurately mark events that triggered your comment

Thanks for the hint

Manage observables

Comments mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Stop recording vocal comment

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Your observationsManage and cleanup sessions before exporting dataManage and cleanup sessions before exporting data

Session ManagementMobile InteractionsMobile Interactions

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

LRT

LRI

RLI

RLT

RRT20

20

8

35

15

Count SummaryCount Summary

RLT

RRT20

815

Time SummaryTime Summary

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

Left hand Right thumbLRTLRT

+1+1

10042016 124627

Left hand Right thumbLRTLRT

2rsquorsquo2rsquorsquo

10042016 124627 - 10042016 124629

Content of my comment boxTag1 Tag2

10042016 124644

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

LRTLRT+1+1

10042016 124627

Save changes

Observable Tags separate with coma

Tags separate with comas

Left hand x Right thumb x

AboutAbout

1230

Observable science provides tools for field research and scientific observation It is tailored to the needs of ethnography human factors psychology usability and games user research

Observable science provides tools for field research and scientific observation It is tailored to the needs of ethnography human factors psychology usability and games user research

Observablyscience

Development by Morgane RadelDesign by Cornelia LarosDevelopment by Morgane RadelDesign by Cornelia Laros

Credits

Support (us)Show your love Rate the App

Make a donation

Contact us

Visit our website

Add session tags to all observations

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

Save changes

Session Tags separate with coma

Tags separate with comas

Metro x Toulouse x

Manage variablesMobile InteractionsMobile Interactions

1230

Left hand Right thumbLRTLRT

Confirm

Search icons

Cancel

Browse

3 20

Observably Sci$amp

1230

Project statisticsProject statistics Total countsTotal time Total comments First entryLast entrySessions

4 963281231

1441201201603042016

97

Project detailsMobile InteractionsMobile Interactions

Sessions SummarySessions Summary

RRT20

815

Count SummaryCount Summary

JUN 14MAY 14APR 14MAR 14FEB 14JAN 14

4

1

65

7

0

2

4

6

8

10

3

2014

Manage sessions

Settings ExportOverview

1230

App optionsDisplay hintsDisplay hints

SettingsSettings

Share anonymous data to improve the appShare anonymous data to improve the app

1230

Gather and manage observation data with ObservablyGather and manage observation data with Observably

Welcome to Observably

Project name

Project description what is the goal of your project

CreateCancel

Session[number]Session[number]

Default Session ID

Default export format txt

Data options

Default Discrete variable lines view

Create a new project

1230

Project detailsMobile InteractionsMobile Interactions

Mobile InteractionsMobile Interactions

Project description what is the goal of your project

SaveCancel

Session[number]Session[number]

Default Session ID

Default export format txt

Data options

Default continuous variables grid view

Project name

Manage sessions

Settings ExportOverview

1230

Project detailsMobile InteractionsMobile Interactions

Manage sessions

Settings ExportOverview

Export format txt

Export data

Data has been successfully exported as MobileInteractionstxt

to your download folder

Observably Sc i$amp

Settings

1230

BUTTONBUTTON

Permissions

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Up exlaborum incididunt quis nostrud exercitatn

COMPONENTS

Pickers

OKCANCEL

13

Friday

MAR

2014

MS W T F ST

30 31

1

16 17 19 20 21 2218

23 24 26 27 28 2925

139 10 12 14 1511

72 3 5 6 84

March 2014

OKCANCEL

PMAM

112

9

10

11

2

48

576

3

330 AM

Notifications

Incoming call

Rachel Ligson

IGNORE ANSWER

REPLYARCHIVE

Hey letrsquos catch up soon Do you want to grab lunch sometime this weekendLet me know when yoursquore free

409 PMHannah ChoHannah Cho

Do you know what I mean509 PMTina McBeanTina McBean

Heads up notification

Regular + Expanded notification

Index scroller

All

Patrick Keenan

Mary Johnson

Tina Santiago

Trevor Hansen

Amar Sagoo

Abbey Christensen

Ali Connors

Alex Nelson

Anthony Stevens

A

A

1230

Abcdefg

Abcdefghijklmno

Tabs

THE THIRDITEM TWONO ONE

THE THIRDITEM TWONO ONE

1230

THE THIRDITEM TWONO ONE

Page Title

1230

121 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

110 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

51 50

Input text for a single line field with a maximu

Single-Line Input Label

31 50

Input text for a single line field with a max

Single-Line Input Label

121 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

110 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

51 50

Input text for a single line field with a maximuInput text for a single line field with a maximu

Single-Line Input Label

31 50

Input text for a single line field with a maxInput text for a single line field with a max

Single-Line Input Label

Disabled text field

Input text

Username or Password is incorrect

Input text

Input tex

Hint text

Hint text

Hint text

Disabled text field

Input textInput text

Username or Password is incorrect

Input textInput text

Input texInput tex

Hint text

Hint text

Hint text

Text fields

Switches and sliders

60

Regular

Pressed

Disabled

60

Regular

Pressed

Disabled

Buttons

DISABLED

PRESSED

NORMAL

DISABLED

PRESSED

NORMAL

Flat Raised

DISABLED

PRESSED

NORMAL

DISABLED

PRESSED

NORMAL

Flat Raised

Toasts

This color applies to both light and dark theme

This item already has the label ldquotravelrdquo You can add a new label

ACTIONSingle-Line Snackbar

Menu

Arial 100

100

Calibri

Courier

Verdana

Arial

Chips

Trevor Hansen

email3emailcom

email2emailcom

primaryemailemailcomContact Name

Dialogs

Desktop

Without title With title

BUTTONBUTTON

PermissionsLorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Up exlaborum incididunt quis nostrud exercitatn

BUTTONBUTTON

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Ut enim ad minim ikad veniam quis nostrud exercitatn ullamco laboris nisi ut aliquip exlaborum incididunt

ACCEPTDECLINEMORE INFO

Permissions

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisinuli

Toolbar

11Roboto

Cards

Welcome BackItrsquos been a while have you read any new books latelyItrsquos been a while have you read any new books lately

YESNOPE

Kangaroo Valley Safari

Located two hours south of Sydney in the

Southern Highlands of New South Wales

LEARN MORESHARE

REVIEWFREE SAMPLE

By Alex Nelson

El Pooch

Pre-fab Homes

Favorite Road Trips

Best Airlines

Campbell

Groceries

almond milk

coconut water

cucumber

green apples

Yuna tickets on sale 624

May 24 2014

Clean desk

Keyboards

suggestion suggestion suggestion

123

a s d f g h j k l

z x c v b n m

q w e r t y u i o p1 2 3 4 5 6 7 8 9 0

suggestion suggestion suggestion

123

a s d f g h j k l

z x c v b n m

q w e r t y u i o p1 2 3 4 5 6 7 8 9 0

Bottom Sheet

Print this page

Copy

Upload

Share

MoreMail Message

Google+Gmail Hangout

Grid

Two lineSupport text

Two lineSupport text

Single line

Single line

Lists

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Three-line itemThree-line item

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Three-line itemThree-line item

Three-line itemThree-line item

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Three-line itemThree-line item

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Three-line itemThree-line item

Three-line itemThree-line item

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Line item unselectedLine item unselected

Line item selectedLine item selected

Line item selectedLine item selected

Data usageData usage

BluetoothBluetooth

Wi-FiWi-Fi

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Single-line itemSingle-line item

Single-line itemSingle-line item

Single-line itemSingle-line itemSingle-line itemSingle-line item

Single-line itemSingle-line item

Single-line itemSingle-line item

Introduction agrave lrsquoergonomie

Ergonomie et Design34

Cornelia Laros

Design Ergonomie Design Ergonomie

Identiteacute

Communication

Ambiance

Exemple un site institutionnel informatif avec une navigation simple et des exigences fortes

drsquoidentiteacuteExemple une application meacutetier destineacutee agrave une

population drsquoutilisateur connue

EfficaciteacuteFonctionnel

Outils

Service en ligne

Architecture de lrsquoinformation contenus bonnes pratiques

Analyse tache vs activiteacute prise en compte globaliseacutee des process

postes de travail eacutecosystegraveme existant hellip puis la conception

Image Usage freacutequent

Usage ponctuel

Votre eacutequipe Ergonome Directeur aristique Webdesigner UX Designer

Introduction agrave lrsquoergonomie

Design avant-tout35

Cornelia Laros

Introduction agrave lrsquoergonomie

Equilibreacute36

Cornelia Laros

Introduction agrave lrsquoergonomie

Ergonomie avant tout37

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

38

Cornelia Laros

text

Lrsquoergonomie sert agravehellip39

Cornelia Laros

1 ameacuteliorer les conditions de travail

2 faire gagner plus drsquoargent agrave lrsquoentreprise

3 ameacuteliorer lrsquoestheacutetique

4 comprendre comment ameacuteliorer un produit

text

Quelles affirmations sont vraies

40

Cornelia Laros

1 Lrsquoergonomie srsquoattache agrave comprendre le travail pour le transformer

2 Il est possible de concevoir une IHM qui fonctionne pour tout le monde en se basant sur des normes

3 Lrsquoutilisateur va se servir de votre produit de la faccedilon dont vous lrsquoavez imagineacute

4 Lrsquoutilisateur interpregravete une tacircche comme un problegraveme qursquoil doit reacutesoudre en faisant avec ses caracteacuteristiques et les moyens mis agrave sa disposition

text

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

41

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

text

D - A quoi sert un prototype

42

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

43

Cornelia Laros

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

44

Cornelia Laros

Utilisabiliteacute

Utiliteacute

Efficaciteacute Efficience

Satisfaction

Introduction agrave lrsquoergonomie

Pyramide des besoins MASLOW

45

Cornelia Laros

Introduction agrave lrsquoergonomie

Pyramide des besoins IHM46

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

47

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

48

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

49

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

50

Cornelia Laros

Introduction agrave lrsquoergonomie

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

51

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

Introduction agrave lrsquoergonomie

D - A quoi sert un prototype

52

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

53

Cornelia Laros

a Fiable

b Intuitif

c Fonctionnel

d Accessible

e Plaisant

f Porteur de sens

Introduction agrave lrsquoergonomie

F - Quel besoin ai-je oublieacute dans la question

preacuteceacutedente

54

Cornelia Laros

text

Patterns amp Dark patterns

55

Cornelia Laros

text

Criteres de Bastien et Scapin56

Cornelia Laros

Guidage

Charge de travail

Controcircle utilisateur explicite

Flexibiliteacute ( adaptabiliteacute)

Gestion des erreurs

Homogeacuteneacuteiteacute ( coheacuterence)

Signifiance des Codes et Deacutenominations

Compatibiliteacute ( familiariteacute)

Introduction agrave lrsquoergonomie

Guidage57

Cornelia Laros

Introduction agrave lrsquoergonomie

Charge de travail58

Cornelia Laros

Introduction agrave lrsquoergonomie

Controle explicite59

Cornelia Laros

Introduction agrave lrsquoergonomie

Controles explicites60

Cornelia Laros

Dar983595 983541983527t983545983589983590n

text

Adaptabiliteacute61

Cornelia Laros

text

Gestion des erreurs62

Cornelia Laros

text

Signifiance des codes et deacutenominations

63

Cornelia Laros

text

Homogeacuteneacuteiteacute - coheacuterence64

Cornelia Laros

text

Homogeacuteneacuteiteacute - Distinction65

Cornelia Laros

text

Compatibiliteacute66

Cornelia Laros

text

Compatibiliteacute67

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction68

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction69

Cornelia Laros

text

Gestalt Theorie70

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Gestalt Theorie71

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Dark patterns72

Cornelia Laros

Introduction agrave lrsquoergonomie

A vous de jouer

73

Cornelia Laros

Introduction agrave lrsquoergonomie

Outils de prototypages DIY74

Cornelia Laros

Low tech papier + crayons post-its cartes agrave jouer

Gratuit en ligne Invision app Moqups UXPin

Mac Sketch Balsamiq Mockups Axure

PC Axure Balsamiq

Mobile Prototyping on Paper

Ap983540983590en983530983555 983592983589 no983547983549983589983537le983543 983581h983586983543983589983588

Introduction agrave lrsquoergonomie

Test de perception DIY75

Cornelia Laros

La premiegravere impression qursquoun utilisateur se fait de votre IHM va influencer tous ses jugements ulteacuterieurs Crsquoest lrsquoeffet de halo

bull Un utilisateur qui a une premiegravere impression positive de votre appli passera plus facilement outre les bugs

bull Une premiegravere impression negative rendra lrsquoutilisateur plus critique vis agrave vis de deacutetails qui confirment son jugement

Cel983527 983538983580983590c983532e 983527983548983588si 983527983549983589983581 vo983543 983586983590983580ux 983591rsquoex983527983538983589983585s vo983543 983530983585t983542983589983546i983530n983543 983592rsquoem983528983527983548983581he 983530983545 983550983587s 983542e983585d983530983555-vo983547983543 983581l983535e983539983546s

Introduction agrave lrsquoergonomie

Test de perception DIY76

Cornelia Laros

Montrer votre prototype agrave quelqursquoun pendant 5 secondes

Demandez-lui

bull Ce qursquoil a vu

bull Ce qursquoil a compris de ce qursquoil a vu

bull Ce qui lrsquoa surpris ou marqueacute

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY77

Cornelia Laros

Les difficulteacutes de navigation se produisent souvent dans les niveaux les plus haut de votre structure de contenu Vous pouvez veacuterifier facilement si la classification logique pour vous lrsquoest aussi pour vos utilisateurs

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY78

Cornelia Laros

Lister trois (max) niveaux de profondeur de votre contenu structureacute Masquez ensuite les contenus de niveau plus bas Utilisez par exemple les groupements de lignes dans excel pour creacuteer des pliers-deacutepliers ou imprimer la liste sur une feuille que vous pliez pour masquer certaines parties

Demandez agrave un utilisateur de vous dire ougrave il penserait trouver un contenu bien preacutecis en preacutecisant qursquoil nrsquoy a pas de bonne reacuteponse

Notez srsquoil va chercher lagrave ougrave vous vous y attendiez ougrave il a heacutesiteacute et ce qursquoil a fini par choisir pour vous aider agrave rendre la navigation plus intuitive

Introduction agrave lrsquoergonomie

Test drsquoutilisabiliteacute DIY79

Cornelia Laros

A chaque nouvelle fonctionnaliteacute ajouteacutee demandez agrave quelqursquoun qui ne connait pas le projet de srsquoen servir Proposez lui une seule tacircche geacuteneacuterique agrave accomplir avec la fonctionnaliteacute

Exemple Tu veux prendre un rendez-vous avec un meacutedecin sur ce site montres-moi comment tu ferais en commentant agrave haute voix

Le plus important ici crsquoest de ne pas reacuteagir agrave ce qursquoil fait mais simplement le regarder faire sans lrsquoaider mecircme srsquoil est bloqueacute

Srsquoil 983540983586983588983589 de983543 983578983547983589s983545i983586983585s reacutepo983539983592983530z 983540983580983590 un983530 983577983548e983588t983534983587983539 o983547 d983535983545e983588 l983547983535 983577u983530 983550983587us 983536983547983535 983590eacutepo983539983592r983530983555 983578983548an983591 983534983537 983580ur983527 fi983539983535 983588rsquoil 983534983539983588983535s983545e Srsquoil 983530983543983546 v983542983580i983593983530n983545 983529l983587983577ueacute di983545983530983588 l983548i 983577983547983589 983550o983547s 983580983536983537ez 983542983530983550983587ir 983549983586983546r983589 983579o983541983534983589 et 983530983543983588983580ye983555 983592983530 c983587983538983541re983539983592r983530 983579983589 983578u983534 l983589 9835316ne

Introduction agrave lrsquoergonomie

Pas besoin de reacuteinventer la roue DIY

80

Cornelia Laros

Il existe des bonnes pratiques qui vous eacuteviteront de reacuteinventer la roue Utilisez des laquo design patterns raquo pour concevoir vos interfaces

Renseignez vous sur la Gestalt Theorie pour agencer vos pages

Utilisez les critegraveres de Bastien et Scapin pour trouver des deacutefauts eacutevidents avant de tester vous en tirerez des enseignements plus inteacuteressants

Ma983534s ccedila crsquoes983545 983541983586983548r u983539983530 983580u983546r983530 983559983587i983588

Introduction agrave lrsquoergonomie

Quizz time

81

Cornelia Laros

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

82

Cornelia Laros

1 c Fonctionnel

2 a Fiable

3 d Accessible

4 b Intuitif

5 e Plaisant

6 f Porteur de sens

text

F - Quel besoin ai-je oublieacute dans la question preacuteceacutedente

83

Cornelia Laros

Uti983536983534983588983580b983536e

Introduction agrave lrsquoergonomie

Tests DIY84

Cornelia Laros

Reacutedigez la proceacutedure pour tester un de vos projets drsquoIHM avec le test de votre choix perception arborescence ou utilisabiliteacute

Notez la question que vous vous posez et la question que vous allez poser

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

Introduction agrave lrsquoergonomie

Ergonomique ou pas5

Cornelia Laros

Introduction agrave lrsquoergonomie

Ergonomique ou pas6

Cornelia Laros

Introduction agrave lrsquoergonomie

Ergonomique ou pas7

Cornelia Laros

1 Design nrsquoest pas ergonomique

2 Adapteacute agrave la physiologie humaine

3 Adapteacute agrave un contexte drsquoutilisation pour reacutealiser une tacircche donneacutee

4 Adapteacute agrave la diversiteacute et agrave la variabiliteacute des personnes

Introduction agrave lrsquoergonomie

Ergonomique ou pas8

Cornelia Laros

A B

C D

Introduction agrave lrsquoergonomie

Tacircche vs Activiteacute9

Cornelia Laros

Introduction agrave lrsquoergonomie

Tacircche vs Activiteacute10

Cornelia Laros

Deacuteterminants externes (caracteacuteristiques de la

situation)

Introduction agrave lrsquoergonomie

Scheacutema agrave 5 carreacutes11

Cornelia Laros

Deacuteterminants internes (caracteacuteristiques de

lrsquoutilisateur)

Activiteacute

Effets sur la personne (santeacute motivation compeacutetencehellip)

Effets sur lrsquoentreprise (production revenus stocks

usure du mateacuterielhellip)

Reacutet983542o-ac983545983534983587983585Reacutet983542o-ac983545983534983587983585

In983545e983590983527c983545983535o983585 h983586983538983593983589 ma983579983533983534n983589 983591e983550983534983589n983545 I983585te983542983527983581t983535o983539 H983586983593m983589 983629983554983588tegraveme

Introduction agrave lrsquoergonomie

Catachregravese

12

Cornelia Laros

Art de deacutetourner un objet de la tacircche pour laquelle il a eacuteteacute conccedilu

Introduction agrave lrsquoergonomie

Ergonomique ne veux rien dire

Pour comprendre revenons aux origineshellip

13

Cornelia Laros

Introduction agrave lrsquoergonomie

Les origines14

Cornelia Laros

1857 1949

1880

1908

1946

Premiegravere utilisation du terme laquo ergonomie raquo par Jastrzebowski Fordisme

Institutionnalisation de la meacutedecine du travail

Le terme laquo ergonomie raquo est employeacute par Murrel

Taylorisme

1987Toyota Production System

XVIIIe Deacuteveloppement de lrsquoapproche productiviste du travail

XVIIe

Premiers eacutecrits et classification des maladies professionnelles

Moyen acircgeEtude des conditions de travail et des facteurs environnementaux

Antiquiteacute

Racines de lrsquoapproche hygieacuteniste du travail

Introduction agrave lrsquoergonomie

Ameacuteliorer agrave la fois la productiviteacute et les

conditions de travailParce qursquoun employeacute motiveacute et en bonne santeacute est plus

productif et tout le monde y gagne

15

Cornelia Laros

Introduction agrave lrsquoergonomie

Inter-discplinariteacute16

Cornelia Laros

Ps983554983581ho983536983586983594983535e

In983531eacuteni983530983542983535e

Ne983547r983587983543983581i983530n983579983589983588

Ph983554983588i983586l983587983531i983530

Meacutede983579983534983585983589

Soc983534983587983536o983594983534983589

Ergonomie

Introduction agrave lrsquoergonomie

Domaines drsquointervention17

Cornelia Laros

Ps983554983581ho983536983586983594983535eIn983531eacuteni983530983542983535e

Ne983547r983587983543983581i983530n983579983589983588

Phi983543983534983587983537og983534983589Meacutede983579983534983585983589

Soc983534983587983536o983594983534983589Ergonomie

Ergonomie physique

Ergonomie organisationnelle

Ergonomie cognitive

Optimisation des situations et postes de travail dans leur

relation avec lrsquoactiviteacute physique

Optimisation des systegravemes socio-techniques structures

organisationnelles regravegles et processus

Optimisation du travail mental perception prise de deacutecision

reacutesolution de problegravemes

Introduction agrave lrsquoergonomie

Domaines drsquointervention18

Cornelia Laros

Organisationnelle 10

Physique 20

Cognitive 70

Introduction agrave lrsquoergonomie

Quizz time

19

Cornelia Laros

text

A - Lrsquoergonomie sert agravehellip20

Cornelia Laros

1 ameacuteliorer les conditions de travail

2 faire gagner plus drsquoargent agrave lrsquoentreprise

3 ameacuteliorer lrsquoestheacutetique

4 comprendre comment ameacuteliorer un produit

text

B - Quelles affirmations sont vraies

21

Cornelia Laros

1 Lrsquoergonomie srsquoattache agrave comprendre le travail pour le transformer

2 Il est possible de concevoir une IHM qui fonctionne pour tout le monde en se basant sur des normes

3 Lrsquoutilisateur va se servir de votre produit de la faccedilon dont vous lrsquoavez imagineacute

4 Lrsquoutilisateur interpregravete une tacircche comme un problegraveme qursquoil doit reacutesoudre en faisant avec ses caracteacuteristiques et les moyens mis agrave sa disposition

text

Pause cafeacute

10 minutes

22

Cornelia Laros

Introduction agrave lrsquoergonomie

Quelques meacutethodes drsquoergonomie

23

Cornelia Laros

Introduction agrave lrsquoergonomie

Ergonomie de conception

24

Cornelia Laros

Ergonomie de correctionbull Analyse drsquoactiviteacute

bull Audit

bull Analyse drsquoeacutevegravenements critiques

bull Analyse de traces

bull Simulation

bull Entretiens

bull Persona cartes drsquoexpeacuteriences

bull Tri par cartes

bull Prototypage

bull Benchmarkhellip

Lrsquoergonomie tout au long du projet

Introduction agrave lrsquoergonomie

Ergonomie de conception

25

Cornelia Laros

Ergonomie de correctionbull Analyse drsquoactiviteacute

bull Audit

bull Analyse drsquoeacutevegravenements critiques

bull Analyse de traces

bull Simulationhellip

bullEntretiens

bullPersona cartes drsquoexpeacuteriences

bullTri par cartes

bullPrototypage

bullBenchmarkhellip

Des meacutethodes de recueil de donneacutees avec utilisateurs finaux et de conception laquo experte raquo

Introduction agrave lrsquoergonomie

Pourquoi ces meacutethodes26

Cornelia Laros

bull Si jrsquoavais demandeacute aux utilisateurs ce qursquoils voulaient ils mrsquoauraient demandeacute un cheval plus rapide - Henri Ford

bull Un comportement laquo sur-appris raquo devient un automatisme inconscient que lrsquoutilisateur ne saura pas expliquer (ex passer les vitesses en conduisant)

bull Le cerveau humain est propice agrave la fabulation (imagination de causes) aux faux souvenirs (en toute bonne fois) les biais (deacutesirabiliteacute effet pygmalion influence socialehellip)

Observer

Introduction agrave lrsquoergonomie

Pourquoi ces meacutethodes27

Cornelia Laros

bull Une imagine est plus parlante que 10 000 mots

bull Permet drsquoeacutevaluer une ideacutee agrave moindre coucirct donc de se tromper souvent et drsquoapprendre plus vite pour valider une ideacutee ou lrsquoameacuteliorer

bull Permet de tester plein drsquoideacutees et de retenir la meilleure

hellip A condition de se focaliser sur un objectif et non sur lrsquoideacutee elle-mecircme

Modeacuteliser

Introduction agrave lrsquoergonomie

Lrsquoensemble permet drsquoeacuteviter ceci

28

Cornelia Laros

Introduction agrave lrsquoergonomie

Lrsquoensemble permet drsquoeacuteviter ceci

29

Cornelia Laros

Eli983538983534983585eacute en 983586983528983588983589r983549a983585t

Eli983538983534983585eacute en 983540983590983586t983587983545983584pa983539983546

Introduction agrave lrsquoergonomie

Prototyper pour vous crsquoesthellip30

Cornelia Laros

CONTRIBUTION AUX SPECIFICATIONS FONCTIONNELLES

Zoning basse fideacuteliteacute wireframe statique (sketch ou non) bull Rapide et peu couteux bull Illustratif statique pas drsquointeraction bull Non engageant sur le design bull Tregraves peu explicite sur le plan fonctionnel

Story-board cliquable bull Illustre la navigation bull Permet de se projeter dans lrsquointeraction bull Pose les bases du design et du fonctionnel

Prototype semi-dynamique bull Se veut complet (ou quasi) sur le plan de la

navigation de lrsquointeraction et des cas drsquoutilisation bull Doit permettre de simuler fidegravelement le

fonctionnement drsquoune application bull Est une speacutecification fonctionnelle en soi

Pha983543983530 983592983589 ca983591983590983527g983589 AM983623983607

Pha983543983530 983592983589 co983539983581983530p983545983535o983585 f983586983539983581t983535o983539983585983530l983536983589

Tes983545983588 983547t983535983536i983588983527t983589u983542983588 ap983540983537983534s 983538983587983529il983530983543hellip

Introduction agrave lrsquoergonomie

Prototype basse definition31

Cornelia Laros

Introduction agrave lrsquoergonomie

Prototyper cliquable32

Cornelia Laros

Introduction agrave lrsquoergonomie

Prototyper semi-dynamique33

Cornelia Laros

Page Title

1230

Mobile interactions

Observably Sc i$amp

About

Project overiew

Manage sessions

Manage variables

Settings

Start observing

1230 1230

OverviewObserve

Observe mobile interactions in the field to assess dominant hand for holding and interacting with smartphones

10042016Mobile interactionsMobile interactions

Welcome to Observably Gather and manage observation dataGather and manage observation data

My projects

1230

Tags separate with comas

Variable value

Create

Add observablesAdd all observables you want to track for this project You can come back and edit them laterAdd all observables you want to track for this project You can come back and edit them later

Thanks for the hint

Manage variablesMobile InteractionsMobile Interactions

1230

Tags separate with comas

Variable value

Create

Left hand Right thumbLRTLRT

Manage variablesMobile InteractionsMobile Interactions

Irsquom done Start recording

Save changesCancel

Observable Tags separate with coma

Tags separate with comas

3 20

LRILRI

Observable label

Did you knowTap on the icon to customize it Use icons from our library or from your gallery to make variables pop out when observing

Tap on the icon to customize it Use icons from our library or from your gallery to make variables pop out when observing

Thanks for the hint

Left hand Right thumbLRTLRT

Irsquom done Start recording

Manage variablesMobile InteractionsMobile Interactions

Left hand x Right thumb x

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Did you knowIf you make a mistake you can undo your action by tapping on the icon of the taskIf you make a mistake you can undo your action by tapping on the icon of the task

Thanks for the hint

Session 1

Discrete mode New Session

Mobile InteractionsMobile Interactions

1230

Record vocal comment

LRILRILRILRILRILRI

Did you knowYou can record occurences durations and comments by chosing the record format in the drop-down above

You can record occurences durations and comments by chosing the record format in the drop-down above

Thanks for the hint

Discrete mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

Left hand Right thumbLRT

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Did you knowIn list view you can slipe left and right to increment or correct your countIn list view you can slipe left and right to increment or correct your count

Thanks for the hint

Continuous mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

LRILRILRILRILRI

Did you knowIf you make a mistake you can undo your action by tapping on the icon of the taskIf you make a mistake you can undo your action by tapping on the icon of the task

Thanks for the hint

Continuous mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

Tags separate with comas

Comment

Add

Did you know The timestamp of vocal comments is the start time to accurately mark events that triggered your comment

The timestamp of vocal comments is the start time to accurately mark events that triggered your comment

Thanks for the hint

Manage observables

Comments mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Stop recording vocal comment

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Your observationsManage and cleanup sessions before exporting dataManage and cleanup sessions before exporting data

Session ManagementMobile InteractionsMobile Interactions

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

LRT

LRI

RLI

RLT

RRT20

20

8

35

15

Count SummaryCount Summary

RLT

RRT20

815

Time SummaryTime Summary

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

Left hand Right thumbLRTLRT

+1+1

10042016 124627

Left hand Right thumbLRTLRT

2rsquorsquo2rsquorsquo

10042016 124627 - 10042016 124629

Content of my comment boxTag1 Tag2

10042016 124644

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

LRTLRT+1+1

10042016 124627

Save changes

Observable Tags separate with coma

Tags separate with comas

Left hand x Right thumb x

AboutAbout

1230

Observable science provides tools for field research and scientific observation It is tailored to the needs of ethnography human factors psychology usability and games user research

Observable science provides tools for field research and scientific observation It is tailored to the needs of ethnography human factors psychology usability and games user research

Observablyscience

Development by Morgane RadelDesign by Cornelia LarosDevelopment by Morgane RadelDesign by Cornelia Laros

Credits

Support (us)Show your love Rate the App

Make a donation

Contact us

Visit our website

Add session tags to all observations

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

Save changes

Session Tags separate with coma

Tags separate with comas

Metro x Toulouse x

Manage variablesMobile InteractionsMobile Interactions

1230

Left hand Right thumbLRTLRT

Confirm

Search icons

Cancel

Browse

3 20

Observably Sci$amp

1230

Project statisticsProject statistics Total countsTotal time Total comments First entryLast entrySessions

4 963281231

1441201201603042016

97

Project detailsMobile InteractionsMobile Interactions

Sessions SummarySessions Summary

RRT20

815

Count SummaryCount Summary

JUN 14MAY 14APR 14MAR 14FEB 14JAN 14

4

1

65

7

0

2

4

6

8

10

3

2014

Manage sessions

Settings ExportOverview

1230

App optionsDisplay hintsDisplay hints

SettingsSettings

Share anonymous data to improve the appShare anonymous data to improve the app

1230

Gather and manage observation data with ObservablyGather and manage observation data with Observably

Welcome to Observably

Project name

Project description what is the goal of your project

CreateCancel

Session[number]Session[number]

Default Session ID

Default export format txt

Data options

Default Discrete variable lines view

Create a new project

1230

Project detailsMobile InteractionsMobile Interactions

Mobile InteractionsMobile Interactions

Project description what is the goal of your project

SaveCancel

Session[number]Session[number]

Default Session ID

Default export format txt

Data options

Default continuous variables grid view

Project name

Manage sessions

Settings ExportOverview

1230

Project detailsMobile InteractionsMobile Interactions

Manage sessions

Settings ExportOverview

Export format txt

Export data

Data has been successfully exported as MobileInteractionstxt

to your download folder

Observably Sc i$amp

Settings

1230

BUTTONBUTTON

Permissions

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Up exlaborum incididunt quis nostrud exercitatn

COMPONENTS

Pickers

OKCANCEL

13

Friday

MAR

2014

MS W T F ST

30 31

1

16 17 19 20 21 2218

23 24 26 27 28 2925

139 10 12 14 1511

72 3 5 6 84

March 2014

OKCANCEL

PMAM

112

9

10

11

2

48

576

3

330 AM

Notifications

Incoming call

Rachel Ligson

IGNORE ANSWER

REPLYARCHIVE

Hey letrsquos catch up soon Do you want to grab lunch sometime this weekendLet me know when yoursquore free

409 PMHannah ChoHannah Cho

Do you know what I mean509 PMTina McBeanTina McBean

Heads up notification

Regular + Expanded notification

Index scroller

All

Patrick Keenan

Mary Johnson

Tina Santiago

Trevor Hansen

Amar Sagoo

Abbey Christensen

Ali Connors

Alex Nelson

Anthony Stevens

A

A

1230

Abcdefg

Abcdefghijklmno

Tabs

THE THIRDITEM TWONO ONE

THE THIRDITEM TWONO ONE

1230

THE THIRDITEM TWONO ONE

Page Title

1230

121 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

110 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

51 50

Input text for a single line field with a maximu

Single-Line Input Label

31 50

Input text for a single line field with a max

Single-Line Input Label

121 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

110 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

51 50

Input text for a single line field with a maximuInput text for a single line field with a maximu

Single-Line Input Label

31 50

Input text for a single line field with a maxInput text for a single line field with a max

Single-Line Input Label

Disabled text field

Input text

Username or Password is incorrect

Input text

Input tex

Hint text

Hint text

Hint text

Disabled text field

Input textInput text

Username or Password is incorrect

Input textInput text

Input texInput tex

Hint text

Hint text

Hint text

Text fields

Switches and sliders

60

Regular

Pressed

Disabled

60

Regular

Pressed

Disabled

Buttons

DISABLED

PRESSED

NORMAL

DISABLED

PRESSED

NORMAL

Flat Raised

DISABLED

PRESSED

NORMAL

DISABLED

PRESSED

NORMAL

Flat Raised

Toasts

This color applies to both light and dark theme

This item already has the label ldquotravelrdquo You can add a new label

ACTIONSingle-Line Snackbar

Menu

Arial 100

100

Calibri

Courier

Verdana

Arial

Chips

Trevor Hansen

email3emailcom

email2emailcom

primaryemailemailcomContact Name

Dialogs

Desktop

Without title With title

BUTTONBUTTON

PermissionsLorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Up exlaborum incididunt quis nostrud exercitatn

BUTTONBUTTON

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Ut enim ad minim ikad veniam quis nostrud exercitatn ullamco laboris nisi ut aliquip exlaborum incididunt

ACCEPTDECLINEMORE INFO

Permissions

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisinuli

Toolbar

11Roboto

Cards

Welcome BackItrsquos been a while have you read any new books latelyItrsquos been a while have you read any new books lately

YESNOPE

Kangaroo Valley Safari

Located two hours south of Sydney in the

Southern Highlands of New South Wales

LEARN MORESHARE

REVIEWFREE SAMPLE

By Alex Nelson

El Pooch

Pre-fab Homes

Favorite Road Trips

Best Airlines

Campbell

Groceries

almond milk

coconut water

cucumber

green apples

Yuna tickets on sale 624

May 24 2014

Clean desk

Keyboards

suggestion suggestion suggestion

123

a s d f g h j k l

z x c v b n m

q w e r t y u i o p1 2 3 4 5 6 7 8 9 0

suggestion suggestion suggestion

123

a s d f g h j k l

z x c v b n m

q w e r t y u i o p1 2 3 4 5 6 7 8 9 0

Bottom Sheet

Print this page

Copy

Upload

Share

MoreMail Message

Google+Gmail Hangout

Grid

Two lineSupport text

Two lineSupport text

Single line

Single line

Lists

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Three-line itemThree-line item

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Three-line itemThree-line item

Three-line itemThree-line item

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Three-line itemThree-line item

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Three-line itemThree-line item

Three-line itemThree-line item

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Line item unselectedLine item unselected

Line item selectedLine item selected

Line item selectedLine item selected

Data usageData usage

BluetoothBluetooth

Wi-FiWi-Fi

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Single-line itemSingle-line item

Single-line itemSingle-line item

Single-line itemSingle-line itemSingle-line itemSingle-line item

Single-line itemSingle-line item

Single-line itemSingle-line item

Introduction agrave lrsquoergonomie

Ergonomie et Design34

Cornelia Laros

Design Ergonomie Design Ergonomie

Identiteacute

Communication

Ambiance

Exemple un site institutionnel informatif avec une navigation simple et des exigences fortes

drsquoidentiteacuteExemple une application meacutetier destineacutee agrave une

population drsquoutilisateur connue

EfficaciteacuteFonctionnel

Outils

Service en ligne

Architecture de lrsquoinformation contenus bonnes pratiques

Analyse tache vs activiteacute prise en compte globaliseacutee des process

postes de travail eacutecosystegraveme existant hellip puis la conception

Image Usage freacutequent

Usage ponctuel

Votre eacutequipe Ergonome Directeur aristique Webdesigner UX Designer

Introduction agrave lrsquoergonomie

Design avant-tout35

Cornelia Laros

Introduction agrave lrsquoergonomie

Equilibreacute36

Cornelia Laros

Introduction agrave lrsquoergonomie

Ergonomie avant tout37

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

38

Cornelia Laros

text

Lrsquoergonomie sert agravehellip39

Cornelia Laros

1 ameacuteliorer les conditions de travail

2 faire gagner plus drsquoargent agrave lrsquoentreprise

3 ameacuteliorer lrsquoestheacutetique

4 comprendre comment ameacuteliorer un produit

text

Quelles affirmations sont vraies

40

Cornelia Laros

1 Lrsquoergonomie srsquoattache agrave comprendre le travail pour le transformer

2 Il est possible de concevoir une IHM qui fonctionne pour tout le monde en se basant sur des normes

3 Lrsquoutilisateur va se servir de votre produit de la faccedilon dont vous lrsquoavez imagineacute

4 Lrsquoutilisateur interpregravete une tacircche comme un problegraveme qursquoil doit reacutesoudre en faisant avec ses caracteacuteristiques et les moyens mis agrave sa disposition

text

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

41

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

text

D - A quoi sert un prototype

42

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

43

Cornelia Laros

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

44

Cornelia Laros

Utilisabiliteacute

Utiliteacute

Efficaciteacute Efficience

Satisfaction

Introduction agrave lrsquoergonomie

Pyramide des besoins MASLOW

45

Cornelia Laros

Introduction agrave lrsquoergonomie

Pyramide des besoins IHM46

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

47

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

48

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

49

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

50

Cornelia Laros

Introduction agrave lrsquoergonomie

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

51

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

Introduction agrave lrsquoergonomie

D - A quoi sert un prototype

52

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

53

Cornelia Laros

a Fiable

b Intuitif

c Fonctionnel

d Accessible

e Plaisant

f Porteur de sens

Introduction agrave lrsquoergonomie

F - Quel besoin ai-je oublieacute dans la question

preacuteceacutedente

54

Cornelia Laros

text

Patterns amp Dark patterns

55

Cornelia Laros

text

Criteres de Bastien et Scapin56

Cornelia Laros

Guidage

Charge de travail

Controcircle utilisateur explicite

Flexibiliteacute ( adaptabiliteacute)

Gestion des erreurs

Homogeacuteneacuteiteacute ( coheacuterence)

Signifiance des Codes et Deacutenominations

Compatibiliteacute ( familiariteacute)

Introduction agrave lrsquoergonomie

Guidage57

Cornelia Laros

Introduction agrave lrsquoergonomie

Charge de travail58

Cornelia Laros

Introduction agrave lrsquoergonomie

Controle explicite59

Cornelia Laros

Introduction agrave lrsquoergonomie

Controles explicites60

Cornelia Laros

Dar983595 983541983527t983545983589983590n

text

Adaptabiliteacute61

Cornelia Laros

text

Gestion des erreurs62

Cornelia Laros

text

Signifiance des codes et deacutenominations

63

Cornelia Laros

text

Homogeacuteneacuteiteacute - coheacuterence64

Cornelia Laros

text

Homogeacuteneacuteiteacute - Distinction65

Cornelia Laros

text

Compatibiliteacute66

Cornelia Laros

text

Compatibiliteacute67

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction68

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction69

Cornelia Laros

text

Gestalt Theorie70

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Gestalt Theorie71

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Dark patterns72

Cornelia Laros

Introduction agrave lrsquoergonomie

A vous de jouer

73

Cornelia Laros

Introduction agrave lrsquoergonomie

Outils de prototypages DIY74

Cornelia Laros

Low tech papier + crayons post-its cartes agrave jouer

Gratuit en ligne Invision app Moqups UXPin

Mac Sketch Balsamiq Mockups Axure

PC Axure Balsamiq

Mobile Prototyping on Paper

Ap983540983590en983530983555 983592983589 no983547983549983589983537le983543 983581h983586983543983589983588

Introduction agrave lrsquoergonomie

Test de perception DIY75

Cornelia Laros

La premiegravere impression qursquoun utilisateur se fait de votre IHM va influencer tous ses jugements ulteacuterieurs Crsquoest lrsquoeffet de halo

bull Un utilisateur qui a une premiegravere impression positive de votre appli passera plus facilement outre les bugs

bull Une premiegravere impression negative rendra lrsquoutilisateur plus critique vis agrave vis de deacutetails qui confirment son jugement

Cel983527 983538983580983590c983532e 983527983548983588si 983527983549983589983581 vo983543 983586983590983580ux 983591rsquoex983527983538983589983585s vo983543 983530983585t983542983589983546i983530n983543 983592rsquoem983528983527983548983581he 983530983545 983550983587s 983542e983585d983530983555-vo983547983543 983581l983535e983539983546s

Introduction agrave lrsquoergonomie

Test de perception DIY76

Cornelia Laros

Montrer votre prototype agrave quelqursquoun pendant 5 secondes

Demandez-lui

bull Ce qursquoil a vu

bull Ce qursquoil a compris de ce qursquoil a vu

bull Ce qui lrsquoa surpris ou marqueacute

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY77

Cornelia Laros

Les difficulteacutes de navigation se produisent souvent dans les niveaux les plus haut de votre structure de contenu Vous pouvez veacuterifier facilement si la classification logique pour vous lrsquoest aussi pour vos utilisateurs

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY78

Cornelia Laros

Lister trois (max) niveaux de profondeur de votre contenu structureacute Masquez ensuite les contenus de niveau plus bas Utilisez par exemple les groupements de lignes dans excel pour creacuteer des pliers-deacutepliers ou imprimer la liste sur une feuille que vous pliez pour masquer certaines parties

Demandez agrave un utilisateur de vous dire ougrave il penserait trouver un contenu bien preacutecis en preacutecisant qursquoil nrsquoy a pas de bonne reacuteponse

Notez srsquoil va chercher lagrave ougrave vous vous y attendiez ougrave il a heacutesiteacute et ce qursquoil a fini par choisir pour vous aider agrave rendre la navigation plus intuitive

Introduction agrave lrsquoergonomie

Test drsquoutilisabiliteacute DIY79

Cornelia Laros

A chaque nouvelle fonctionnaliteacute ajouteacutee demandez agrave quelqursquoun qui ne connait pas le projet de srsquoen servir Proposez lui une seule tacircche geacuteneacuterique agrave accomplir avec la fonctionnaliteacute

Exemple Tu veux prendre un rendez-vous avec un meacutedecin sur ce site montres-moi comment tu ferais en commentant agrave haute voix

Le plus important ici crsquoest de ne pas reacuteagir agrave ce qursquoil fait mais simplement le regarder faire sans lrsquoaider mecircme srsquoil est bloqueacute

Srsquoil 983540983586983588983589 de983543 983578983547983589s983545i983586983585s reacutepo983539983592983530z 983540983580983590 un983530 983577983548e983588t983534983587983539 o983547 d983535983545e983588 l983547983535 983577u983530 983550983587us 983536983547983535 983590eacutepo983539983592r983530983555 983578983548an983591 983534983537 983580ur983527 fi983539983535 983588rsquoil 983534983539983588983535s983545e Srsquoil 983530983543983546 v983542983580i983593983530n983545 983529l983587983577ueacute di983545983530983588 l983548i 983577983547983589 983550o983547s 983580983536983537ez 983542983530983550983587ir 983549983586983546r983589 983579o983541983534983589 et 983530983543983588983580ye983555 983592983530 c983587983538983541re983539983592r983530 983579983589 983578u983534 l983589 9835316ne

Introduction agrave lrsquoergonomie

Pas besoin de reacuteinventer la roue DIY

80

Cornelia Laros

Il existe des bonnes pratiques qui vous eacuteviteront de reacuteinventer la roue Utilisez des laquo design patterns raquo pour concevoir vos interfaces

Renseignez vous sur la Gestalt Theorie pour agencer vos pages

Utilisez les critegraveres de Bastien et Scapin pour trouver des deacutefauts eacutevidents avant de tester vous en tirerez des enseignements plus inteacuteressants

Ma983534s ccedila crsquoes983545 983541983586983548r u983539983530 983580u983546r983530 983559983587i983588

Introduction agrave lrsquoergonomie

Quizz time

81

Cornelia Laros

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

82

Cornelia Laros

1 c Fonctionnel

2 a Fiable

3 d Accessible

4 b Intuitif

5 e Plaisant

6 f Porteur de sens

text

F - Quel besoin ai-je oublieacute dans la question preacuteceacutedente

83

Cornelia Laros

Uti983536983534983588983580b983536e

Introduction agrave lrsquoergonomie

Tests DIY84

Cornelia Laros

Reacutedigez la proceacutedure pour tester un de vos projets drsquoIHM avec le test de votre choix perception arborescence ou utilisabiliteacute

Notez la question que vous vous posez et la question que vous allez poser

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

Introduction agrave lrsquoergonomie

Ergonomique ou pas6

Cornelia Laros

Introduction agrave lrsquoergonomie

Ergonomique ou pas7

Cornelia Laros

1 Design nrsquoest pas ergonomique

2 Adapteacute agrave la physiologie humaine

3 Adapteacute agrave un contexte drsquoutilisation pour reacutealiser une tacircche donneacutee

4 Adapteacute agrave la diversiteacute et agrave la variabiliteacute des personnes

Introduction agrave lrsquoergonomie

Ergonomique ou pas8

Cornelia Laros

A B

C D

Introduction agrave lrsquoergonomie

Tacircche vs Activiteacute9

Cornelia Laros

Introduction agrave lrsquoergonomie

Tacircche vs Activiteacute10

Cornelia Laros

Deacuteterminants externes (caracteacuteristiques de la

situation)

Introduction agrave lrsquoergonomie

Scheacutema agrave 5 carreacutes11

Cornelia Laros

Deacuteterminants internes (caracteacuteristiques de

lrsquoutilisateur)

Activiteacute

Effets sur la personne (santeacute motivation compeacutetencehellip)

Effets sur lrsquoentreprise (production revenus stocks

usure du mateacuterielhellip)

Reacutet983542o-ac983545983534983587983585Reacutet983542o-ac983545983534983587983585

In983545e983590983527c983545983535o983585 h983586983538983593983589 ma983579983533983534n983589 983591e983550983534983589n983545 I983585te983542983527983581t983535o983539 H983586983593m983589 983629983554983588tegraveme

Introduction agrave lrsquoergonomie

Catachregravese

12

Cornelia Laros

Art de deacutetourner un objet de la tacircche pour laquelle il a eacuteteacute conccedilu

Introduction agrave lrsquoergonomie

Ergonomique ne veux rien dire

Pour comprendre revenons aux origineshellip

13

Cornelia Laros

Introduction agrave lrsquoergonomie

Les origines14

Cornelia Laros

1857 1949

1880

1908

1946

Premiegravere utilisation du terme laquo ergonomie raquo par Jastrzebowski Fordisme

Institutionnalisation de la meacutedecine du travail

Le terme laquo ergonomie raquo est employeacute par Murrel

Taylorisme

1987Toyota Production System

XVIIIe Deacuteveloppement de lrsquoapproche productiviste du travail

XVIIe

Premiers eacutecrits et classification des maladies professionnelles

Moyen acircgeEtude des conditions de travail et des facteurs environnementaux

Antiquiteacute

Racines de lrsquoapproche hygieacuteniste du travail

Introduction agrave lrsquoergonomie

Ameacuteliorer agrave la fois la productiviteacute et les

conditions de travailParce qursquoun employeacute motiveacute et en bonne santeacute est plus

productif et tout le monde y gagne

15

Cornelia Laros

Introduction agrave lrsquoergonomie

Inter-discplinariteacute16

Cornelia Laros

Ps983554983581ho983536983586983594983535e

In983531eacuteni983530983542983535e

Ne983547r983587983543983581i983530n983579983589983588

Ph983554983588i983586l983587983531i983530

Meacutede983579983534983585983589

Soc983534983587983536o983594983534983589

Ergonomie

Introduction agrave lrsquoergonomie

Domaines drsquointervention17

Cornelia Laros

Ps983554983581ho983536983586983594983535eIn983531eacuteni983530983542983535e

Ne983547r983587983543983581i983530n983579983589983588

Phi983543983534983587983537og983534983589Meacutede983579983534983585983589

Soc983534983587983536o983594983534983589Ergonomie

Ergonomie physique

Ergonomie organisationnelle

Ergonomie cognitive

Optimisation des situations et postes de travail dans leur

relation avec lrsquoactiviteacute physique

Optimisation des systegravemes socio-techniques structures

organisationnelles regravegles et processus

Optimisation du travail mental perception prise de deacutecision

reacutesolution de problegravemes

Introduction agrave lrsquoergonomie

Domaines drsquointervention18

Cornelia Laros

Organisationnelle 10

Physique 20

Cognitive 70

Introduction agrave lrsquoergonomie

Quizz time

19

Cornelia Laros

text

A - Lrsquoergonomie sert agravehellip20

Cornelia Laros

1 ameacuteliorer les conditions de travail

2 faire gagner plus drsquoargent agrave lrsquoentreprise

3 ameacuteliorer lrsquoestheacutetique

4 comprendre comment ameacuteliorer un produit

text

B - Quelles affirmations sont vraies

21

Cornelia Laros

1 Lrsquoergonomie srsquoattache agrave comprendre le travail pour le transformer

2 Il est possible de concevoir une IHM qui fonctionne pour tout le monde en se basant sur des normes

3 Lrsquoutilisateur va se servir de votre produit de la faccedilon dont vous lrsquoavez imagineacute

4 Lrsquoutilisateur interpregravete une tacircche comme un problegraveme qursquoil doit reacutesoudre en faisant avec ses caracteacuteristiques et les moyens mis agrave sa disposition

text

Pause cafeacute

10 minutes

22

Cornelia Laros

Introduction agrave lrsquoergonomie

Quelques meacutethodes drsquoergonomie

23

Cornelia Laros

Introduction agrave lrsquoergonomie

Ergonomie de conception

24

Cornelia Laros

Ergonomie de correctionbull Analyse drsquoactiviteacute

bull Audit

bull Analyse drsquoeacutevegravenements critiques

bull Analyse de traces

bull Simulation

bull Entretiens

bull Persona cartes drsquoexpeacuteriences

bull Tri par cartes

bull Prototypage

bull Benchmarkhellip

Lrsquoergonomie tout au long du projet

Introduction agrave lrsquoergonomie

Ergonomie de conception

25

Cornelia Laros

Ergonomie de correctionbull Analyse drsquoactiviteacute

bull Audit

bull Analyse drsquoeacutevegravenements critiques

bull Analyse de traces

bull Simulationhellip

bullEntretiens

bullPersona cartes drsquoexpeacuteriences

bullTri par cartes

bullPrototypage

bullBenchmarkhellip

Des meacutethodes de recueil de donneacutees avec utilisateurs finaux et de conception laquo experte raquo

Introduction agrave lrsquoergonomie

Pourquoi ces meacutethodes26

Cornelia Laros

bull Si jrsquoavais demandeacute aux utilisateurs ce qursquoils voulaient ils mrsquoauraient demandeacute un cheval plus rapide - Henri Ford

bull Un comportement laquo sur-appris raquo devient un automatisme inconscient que lrsquoutilisateur ne saura pas expliquer (ex passer les vitesses en conduisant)

bull Le cerveau humain est propice agrave la fabulation (imagination de causes) aux faux souvenirs (en toute bonne fois) les biais (deacutesirabiliteacute effet pygmalion influence socialehellip)

Observer

Introduction agrave lrsquoergonomie

Pourquoi ces meacutethodes27

Cornelia Laros

bull Une imagine est plus parlante que 10 000 mots

bull Permet drsquoeacutevaluer une ideacutee agrave moindre coucirct donc de se tromper souvent et drsquoapprendre plus vite pour valider une ideacutee ou lrsquoameacuteliorer

bull Permet de tester plein drsquoideacutees et de retenir la meilleure

hellip A condition de se focaliser sur un objectif et non sur lrsquoideacutee elle-mecircme

Modeacuteliser

Introduction agrave lrsquoergonomie

Lrsquoensemble permet drsquoeacuteviter ceci

28

Cornelia Laros

Introduction agrave lrsquoergonomie

Lrsquoensemble permet drsquoeacuteviter ceci

29

Cornelia Laros

Eli983538983534983585eacute en 983586983528983588983589r983549a983585t

Eli983538983534983585eacute en 983540983590983586t983587983545983584pa983539983546

Introduction agrave lrsquoergonomie

Prototyper pour vous crsquoesthellip30

Cornelia Laros

CONTRIBUTION AUX SPECIFICATIONS FONCTIONNELLES

Zoning basse fideacuteliteacute wireframe statique (sketch ou non) bull Rapide et peu couteux bull Illustratif statique pas drsquointeraction bull Non engageant sur le design bull Tregraves peu explicite sur le plan fonctionnel

Story-board cliquable bull Illustre la navigation bull Permet de se projeter dans lrsquointeraction bull Pose les bases du design et du fonctionnel

Prototype semi-dynamique bull Se veut complet (ou quasi) sur le plan de la

navigation de lrsquointeraction et des cas drsquoutilisation bull Doit permettre de simuler fidegravelement le

fonctionnement drsquoune application bull Est une speacutecification fonctionnelle en soi

Pha983543983530 983592983589 ca983591983590983527g983589 AM983623983607

Pha983543983530 983592983589 co983539983581983530p983545983535o983585 f983586983539983581t983535o983539983585983530l983536983589

Tes983545983588 983547t983535983536i983588983527t983589u983542983588 ap983540983537983534s 983538983587983529il983530983543hellip

Introduction agrave lrsquoergonomie

Prototype basse definition31

Cornelia Laros

Introduction agrave lrsquoergonomie

Prototyper cliquable32

Cornelia Laros

Introduction agrave lrsquoergonomie

Prototyper semi-dynamique33

Cornelia Laros

Page Title

1230

Mobile interactions

Observably Sc i$amp

About

Project overiew

Manage sessions

Manage variables

Settings

Start observing

1230 1230

OverviewObserve

Observe mobile interactions in the field to assess dominant hand for holding and interacting with smartphones

10042016Mobile interactionsMobile interactions

Welcome to Observably Gather and manage observation dataGather and manage observation data

My projects

1230

Tags separate with comas

Variable value

Create

Add observablesAdd all observables you want to track for this project You can come back and edit them laterAdd all observables you want to track for this project You can come back and edit them later

Thanks for the hint

Manage variablesMobile InteractionsMobile Interactions

1230

Tags separate with comas

Variable value

Create

Left hand Right thumbLRTLRT

Manage variablesMobile InteractionsMobile Interactions

Irsquom done Start recording

Save changesCancel

Observable Tags separate with coma

Tags separate with comas

3 20

LRILRI

Observable label

Did you knowTap on the icon to customize it Use icons from our library or from your gallery to make variables pop out when observing

Tap on the icon to customize it Use icons from our library or from your gallery to make variables pop out when observing

Thanks for the hint

Left hand Right thumbLRTLRT

Irsquom done Start recording

Manage variablesMobile InteractionsMobile Interactions

Left hand x Right thumb x

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Did you knowIf you make a mistake you can undo your action by tapping on the icon of the taskIf you make a mistake you can undo your action by tapping on the icon of the task

Thanks for the hint

Session 1

Discrete mode New Session

Mobile InteractionsMobile Interactions

1230

Record vocal comment

LRILRILRILRILRILRI

Did you knowYou can record occurences durations and comments by chosing the record format in the drop-down above

You can record occurences durations and comments by chosing the record format in the drop-down above

Thanks for the hint

Discrete mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

Left hand Right thumbLRT

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Did you knowIn list view you can slipe left and right to increment or correct your countIn list view you can slipe left and right to increment or correct your count

Thanks for the hint

Continuous mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

LRILRILRILRILRI

Did you knowIf you make a mistake you can undo your action by tapping on the icon of the taskIf you make a mistake you can undo your action by tapping on the icon of the task

Thanks for the hint

Continuous mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

Tags separate with comas

Comment

Add

Did you know The timestamp of vocal comments is the start time to accurately mark events that triggered your comment

The timestamp of vocal comments is the start time to accurately mark events that triggered your comment

Thanks for the hint

Manage observables

Comments mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Stop recording vocal comment

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Your observationsManage and cleanup sessions before exporting dataManage and cleanup sessions before exporting data

Session ManagementMobile InteractionsMobile Interactions

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

LRT

LRI

RLI

RLT

RRT20

20

8

35

15

Count SummaryCount Summary

RLT

RRT20

815

Time SummaryTime Summary

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

Left hand Right thumbLRTLRT

+1+1

10042016 124627

Left hand Right thumbLRTLRT

2rsquorsquo2rsquorsquo

10042016 124627 - 10042016 124629

Content of my comment boxTag1 Tag2

10042016 124644

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

LRTLRT+1+1

10042016 124627

Save changes

Observable Tags separate with coma

Tags separate with comas

Left hand x Right thumb x

AboutAbout

1230

Observable science provides tools for field research and scientific observation It is tailored to the needs of ethnography human factors psychology usability and games user research

Observable science provides tools for field research and scientific observation It is tailored to the needs of ethnography human factors psychology usability and games user research

Observablyscience

Development by Morgane RadelDesign by Cornelia LarosDevelopment by Morgane RadelDesign by Cornelia Laros

Credits

Support (us)Show your love Rate the App

Make a donation

Contact us

Visit our website

Add session tags to all observations

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

Save changes

Session Tags separate with coma

Tags separate with comas

Metro x Toulouse x

Manage variablesMobile InteractionsMobile Interactions

1230

Left hand Right thumbLRTLRT

Confirm

Search icons

Cancel

Browse

3 20

Observably Sci$amp

1230

Project statisticsProject statistics Total countsTotal time Total comments First entryLast entrySessions

4 963281231

1441201201603042016

97

Project detailsMobile InteractionsMobile Interactions

Sessions SummarySessions Summary

RRT20

815

Count SummaryCount Summary

JUN 14MAY 14APR 14MAR 14FEB 14JAN 14

4

1

65

7

0

2

4

6

8

10

3

2014

Manage sessions

Settings ExportOverview

1230

App optionsDisplay hintsDisplay hints

SettingsSettings

Share anonymous data to improve the appShare anonymous data to improve the app

1230

Gather and manage observation data with ObservablyGather and manage observation data with Observably

Welcome to Observably

Project name

Project description what is the goal of your project

CreateCancel

Session[number]Session[number]

Default Session ID

Default export format txt

Data options

Default Discrete variable lines view

Create a new project

1230

Project detailsMobile InteractionsMobile Interactions

Mobile InteractionsMobile Interactions

Project description what is the goal of your project

SaveCancel

Session[number]Session[number]

Default Session ID

Default export format txt

Data options

Default continuous variables grid view

Project name

Manage sessions

Settings ExportOverview

1230

Project detailsMobile InteractionsMobile Interactions

Manage sessions

Settings ExportOverview

Export format txt

Export data

Data has been successfully exported as MobileInteractionstxt

to your download folder

Observably Sc i$amp

Settings

1230

BUTTONBUTTON

Permissions

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Up exlaborum incididunt quis nostrud exercitatn

COMPONENTS

Pickers

OKCANCEL

13

Friday

MAR

2014

MS W T F ST

30 31

1

16 17 19 20 21 2218

23 24 26 27 28 2925

139 10 12 14 1511

72 3 5 6 84

March 2014

OKCANCEL

PMAM

112

9

10

11

2

48

576

3

330 AM

Notifications

Incoming call

Rachel Ligson

IGNORE ANSWER

REPLYARCHIVE

Hey letrsquos catch up soon Do you want to grab lunch sometime this weekendLet me know when yoursquore free

409 PMHannah ChoHannah Cho

Do you know what I mean509 PMTina McBeanTina McBean

Heads up notification

Regular + Expanded notification

Index scroller

All

Patrick Keenan

Mary Johnson

Tina Santiago

Trevor Hansen

Amar Sagoo

Abbey Christensen

Ali Connors

Alex Nelson

Anthony Stevens

A

A

1230

Abcdefg

Abcdefghijklmno

Tabs

THE THIRDITEM TWONO ONE

THE THIRDITEM TWONO ONE

1230

THE THIRDITEM TWONO ONE

Page Title

1230

121 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

110 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

51 50

Input text for a single line field with a maximu

Single-Line Input Label

31 50

Input text for a single line field with a max

Single-Line Input Label

121 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

110 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

51 50

Input text for a single line field with a maximuInput text for a single line field with a maximu

Single-Line Input Label

31 50

Input text for a single line field with a maxInput text for a single line field with a max

Single-Line Input Label

Disabled text field

Input text

Username or Password is incorrect

Input text

Input tex

Hint text

Hint text

Hint text

Disabled text field

Input textInput text

Username or Password is incorrect

Input textInput text

Input texInput tex

Hint text

Hint text

Hint text

Text fields

Switches and sliders

60

Regular

Pressed

Disabled

60

Regular

Pressed

Disabled

Buttons

DISABLED

PRESSED

NORMAL

DISABLED

PRESSED

NORMAL

Flat Raised

DISABLED

PRESSED

NORMAL

DISABLED

PRESSED

NORMAL

Flat Raised

Toasts

This color applies to both light and dark theme

This item already has the label ldquotravelrdquo You can add a new label

ACTIONSingle-Line Snackbar

Menu

Arial 100

100

Calibri

Courier

Verdana

Arial

Chips

Trevor Hansen

email3emailcom

email2emailcom

primaryemailemailcomContact Name

Dialogs

Desktop

Without title With title

BUTTONBUTTON

PermissionsLorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Up exlaborum incididunt quis nostrud exercitatn

BUTTONBUTTON

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Ut enim ad minim ikad veniam quis nostrud exercitatn ullamco laboris nisi ut aliquip exlaborum incididunt

ACCEPTDECLINEMORE INFO

Permissions

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisinuli

Toolbar

11Roboto

Cards

Welcome BackItrsquos been a while have you read any new books latelyItrsquos been a while have you read any new books lately

YESNOPE

Kangaroo Valley Safari

Located two hours south of Sydney in the

Southern Highlands of New South Wales

LEARN MORESHARE

REVIEWFREE SAMPLE

By Alex Nelson

El Pooch

Pre-fab Homes

Favorite Road Trips

Best Airlines

Campbell

Groceries

almond milk

coconut water

cucumber

green apples

Yuna tickets on sale 624

May 24 2014

Clean desk

Keyboards

suggestion suggestion suggestion

123

a s d f g h j k l

z x c v b n m

q w e r t y u i o p1 2 3 4 5 6 7 8 9 0

suggestion suggestion suggestion

123

a s d f g h j k l

z x c v b n m

q w e r t y u i o p1 2 3 4 5 6 7 8 9 0

Bottom Sheet

Print this page

Copy

Upload

Share

MoreMail Message

Google+Gmail Hangout

Grid

Two lineSupport text

Two lineSupport text

Single line

Single line

Lists

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Three-line itemThree-line item

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Three-line itemThree-line item

Three-line itemThree-line item

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Three-line itemThree-line item

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Three-line itemThree-line item

Three-line itemThree-line item

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Line item unselectedLine item unselected

Line item selectedLine item selected

Line item selectedLine item selected

Data usageData usage

BluetoothBluetooth

Wi-FiWi-Fi

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Single-line itemSingle-line item

Single-line itemSingle-line item

Single-line itemSingle-line itemSingle-line itemSingle-line item

Single-line itemSingle-line item

Single-line itemSingle-line item

Introduction agrave lrsquoergonomie

Ergonomie et Design34

Cornelia Laros

Design Ergonomie Design Ergonomie

Identiteacute

Communication

Ambiance

Exemple un site institutionnel informatif avec une navigation simple et des exigences fortes

drsquoidentiteacuteExemple une application meacutetier destineacutee agrave une

population drsquoutilisateur connue

EfficaciteacuteFonctionnel

Outils

Service en ligne

Architecture de lrsquoinformation contenus bonnes pratiques

Analyse tache vs activiteacute prise en compte globaliseacutee des process

postes de travail eacutecosystegraveme existant hellip puis la conception

Image Usage freacutequent

Usage ponctuel

Votre eacutequipe Ergonome Directeur aristique Webdesigner UX Designer

Introduction agrave lrsquoergonomie

Design avant-tout35

Cornelia Laros

Introduction agrave lrsquoergonomie

Equilibreacute36

Cornelia Laros

Introduction agrave lrsquoergonomie

Ergonomie avant tout37

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

38

Cornelia Laros

text

Lrsquoergonomie sert agravehellip39

Cornelia Laros

1 ameacuteliorer les conditions de travail

2 faire gagner plus drsquoargent agrave lrsquoentreprise

3 ameacuteliorer lrsquoestheacutetique

4 comprendre comment ameacuteliorer un produit

text

Quelles affirmations sont vraies

40

Cornelia Laros

1 Lrsquoergonomie srsquoattache agrave comprendre le travail pour le transformer

2 Il est possible de concevoir une IHM qui fonctionne pour tout le monde en se basant sur des normes

3 Lrsquoutilisateur va se servir de votre produit de la faccedilon dont vous lrsquoavez imagineacute

4 Lrsquoutilisateur interpregravete une tacircche comme un problegraveme qursquoil doit reacutesoudre en faisant avec ses caracteacuteristiques et les moyens mis agrave sa disposition

text

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

41

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

text

D - A quoi sert un prototype

42

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

43

Cornelia Laros

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

44

Cornelia Laros

Utilisabiliteacute

Utiliteacute

Efficaciteacute Efficience

Satisfaction

Introduction agrave lrsquoergonomie

Pyramide des besoins MASLOW

45

Cornelia Laros

Introduction agrave lrsquoergonomie

Pyramide des besoins IHM46

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

47

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

48

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

49

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

50

Cornelia Laros

Introduction agrave lrsquoergonomie

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

51

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

Introduction agrave lrsquoergonomie

D - A quoi sert un prototype

52

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

53

Cornelia Laros

a Fiable

b Intuitif

c Fonctionnel

d Accessible

e Plaisant

f Porteur de sens

Introduction agrave lrsquoergonomie

F - Quel besoin ai-je oublieacute dans la question

preacuteceacutedente

54

Cornelia Laros

text

Patterns amp Dark patterns

55

Cornelia Laros

text

Criteres de Bastien et Scapin56

Cornelia Laros

Guidage

Charge de travail

Controcircle utilisateur explicite

Flexibiliteacute ( adaptabiliteacute)

Gestion des erreurs

Homogeacuteneacuteiteacute ( coheacuterence)

Signifiance des Codes et Deacutenominations

Compatibiliteacute ( familiariteacute)

Introduction agrave lrsquoergonomie

Guidage57

Cornelia Laros

Introduction agrave lrsquoergonomie

Charge de travail58

Cornelia Laros

Introduction agrave lrsquoergonomie

Controle explicite59

Cornelia Laros

Introduction agrave lrsquoergonomie

Controles explicites60

Cornelia Laros

Dar983595 983541983527t983545983589983590n

text

Adaptabiliteacute61

Cornelia Laros

text

Gestion des erreurs62

Cornelia Laros

text

Signifiance des codes et deacutenominations

63

Cornelia Laros

text

Homogeacuteneacuteiteacute - coheacuterence64

Cornelia Laros

text

Homogeacuteneacuteiteacute - Distinction65

Cornelia Laros

text

Compatibiliteacute66

Cornelia Laros

text

Compatibiliteacute67

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction68

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction69

Cornelia Laros

text

Gestalt Theorie70

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Gestalt Theorie71

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Dark patterns72

Cornelia Laros

Introduction agrave lrsquoergonomie

A vous de jouer

73

Cornelia Laros

Introduction agrave lrsquoergonomie

Outils de prototypages DIY74

Cornelia Laros

Low tech papier + crayons post-its cartes agrave jouer

Gratuit en ligne Invision app Moqups UXPin

Mac Sketch Balsamiq Mockups Axure

PC Axure Balsamiq

Mobile Prototyping on Paper

Ap983540983590en983530983555 983592983589 no983547983549983589983537le983543 983581h983586983543983589983588

Introduction agrave lrsquoergonomie

Test de perception DIY75

Cornelia Laros

La premiegravere impression qursquoun utilisateur se fait de votre IHM va influencer tous ses jugements ulteacuterieurs Crsquoest lrsquoeffet de halo

bull Un utilisateur qui a une premiegravere impression positive de votre appli passera plus facilement outre les bugs

bull Une premiegravere impression negative rendra lrsquoutilisateur plus critique vis agrave vis de deacutetails qui confirment son jugement

Cel983527 983538983580983590c983532e 983527983548983588si 983527983549983589983581 vo983543 983586983590983580ux 983591rsquoex983527983538983589983585s vo983543 983530983585t983542983589983546i983530n983543 983592rsquoem983528983527983548983581he 983530983545 983550983587s 983542e983585d983530983555-vo983547983543 983581l983535e983539983546s

Introduction agrave lrsquoergonomie

Test de perception DIY76

Cornelia Laros

Montrer votre prototype agrave quelqursquoun pendant 5 secondes

Demandez-lui

bull Ce qursquoil a vu

bull Ce qursquoil a compris de ce qursquoil a vu

bull Ce qui lrsquoa surpris ou marqueacute

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY77

Cornelia Laros

Les difficulteacutes de navigation se produisent souvent dans les niveaux les plus haut de votre structure de contenu Vous pouvez veacuterifier facilement si la classification logique pour vous lrsquoest aussi pour vos utilisateurs

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY78

Cornelia Laros

Lister trois (max) niveaux de profondeur de votre contenu structureacute Masquez ensuite les contenus de niveau plus bas Utilisez par exemple les groupements de lignes dans excel pour creacuteer des pliers-deacutepliers ou imprimer la liste sur une feuille que vous pliez pour masquer certaines parties

Demandez agrave un utilisateur de vous dire ougrave il penserait trouver un contenu bien preacutecis en preacutecisant qursquoil nrsquoy a pas de bonne reacuteponse

Notez srsquoil va chercher lagrave ougrave vous vous y attendiez ougrave il a heacutesiteacute et ce qursquoil a fini par choisir pour vous aider agrave rendre la navigation plus intuitive

Introduction agrave lrsquoergonomie

Test drsquoutilisabiliteacute DIY79

Cornelia Laros

A chaque nouvelle fonctionnaliteacute ajouteacutee demandez agrave quelqursquoun qui ne connait pas le projet de srsquoen servir Proposez lui une seule tacircche geacuteneacuterique agrave accomplir avec la fonctionnaliteacute

Exemple Tu veux prendre un rendez-vous avec un meacutedecin sur ce site montres-moi comment tu ferais en commentant agrave haute voix

Le plus important ici crsquoest de ne pas reacuteagir agrave ce qursquoil fait mais simplement le regarder faire sans lrsquoaider mecircme srsquoil est bloqueacute

Srsquoil 983540983586983588983589 de983543 983578983547983589s983545i983586983585s reacutepo983539983592983530z 983540983580983590 un983530 983577983548e983588t983534983587983539 o983547 d983535983545e983588 l983547983535 983577u983530 983550983587us 983536983547983535 983590eacutepo983539983592r983530983555 983578983548an983591 983534983537 983580ur983527 fi983539983535 983588rsquoil 983534983539983588983535s983545e Srsquoil 983530983543983546 v983542983580i983593983530n983545 983529l983587983577ueacute di983545983530983588 l983548i 983577983547983589 983550o983547s 983580983536983537ez 983542983530983550983587ir 983549983586983546r983589 983579o983541983534983589 et 983530983543983588983580ye983555 983592983530 c983587983538983541re983539983592r983530 983579983589 983578u983534 l983589 9835316ne

Introduction agrave lrsquoergonomie

Pas besoin de reacuteinventer la roue DIY

80

Cornelia Laros

Il existe des bonnes pratiques qui vous eacuteviteront de reacuteinventer la roue Utilisez des laquo design patterns raquo pour concevoir vos interfaces

Renseignez vous sur la Gestalt Theorie pour agencer vos pages

Utilisez les critegraveres de Bastien et Scapin pour trouver des deacutefauts eacutevidents avant de tester vous en tirerez des enseignements plus inteacuteressants

Ma983534s ccedila crsquoes983545 983541983586983548r u983539983530 983580u983546r983530 983559983587i983588

Introduction agrave lrsquoergonomie

Quizz time

81

Cornelia Laros

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

82

Cornelia Laros

1 c Fonctionnel

2 a Fiable

3 d Accessible

4 b Intuitif

5 e Plaisant

6 f Porteur de sens

text

F - Quel besoin ai-je oublieacute dans la question preacuteceacutedente

83

Cornelia Laros

Uti983536983534983588983580b983536e

Introduction agrave lrsquoergonomie

Tests DIY84

Cornelia Laros

Reacutedigez la proceacutedure pour tester un de vos projets drsquoIHM avec le test de votre choix perception arborescence ou utilisabiliteacute

Notez la question que vous vous posez et la question que vous allez poser

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

Introduction agrave lrsquoergonomie

Ergonomique ou pas7

Cornelia Laros

1 Design nrsquoest pas ergonomique

2 Adapteacute agrave la physiologie humaine

3 Adapteacute agrave un contexte drsquoutilisation pour reacutealiser une tacircche donneacutee

4 Adapteacute agrave la diversiteacute et agrave la variabiliteacute des personnes

Introduction agrave lrsquoergonomie

Ergonomique ou pas8

Cornelia Laros

A B

C D

Introduction agrave lrsquoergonomie

Tacircche vs Activiteacute9

Cornelia Laros

Introduction agrave lrsquoergonomie

Tacircche vs Activiteacute10

Cornelia Laros

Deacuteterminants externes (caracteacuteristiques de la

situation)

Introduction agrave lrsquoergonomie

Scheacutema agrave 5 carreacutes11

Cornelia Laros

Deacuteterminants internes (caracteacuteristiques de

lrsquoutilisateur)

Activiteacute

Effets sur la personne (santeacute motivation compeacutetencehellip)

Effets sur lrsquoentreprise (production revenus stocks

usure du mateacuterielhellip)

Reacutet983542o-ac983545983534983587983585Reacutet983542o-ac983545983534983587983585

In983545e983590983527c983545983535o983585 h983586983538983593983589 ma983579983533983534n983589 983591e983550983534983589n983545 I983585te983542983527983581t983535o983539 H983586983593m983589 983629983554983588tegraveme

Introduction agrave lrsquoergonomie

Catachregravese

12

Cornelia Laros

Art de deacutetourner un objet de la tacircche pour laquelle il a eacuteteacute conccedilu

Introduction agrave lrsquoergonomie

Ergonomique ne veux rien dire

Pour comprendre revenons aux origineshellip

13

Cornelia Laros

Introduction agrave lrsquoergonomie

Les origines14

Cornelia Laros

1857 1949

1880

1908

1946

Premiegravere utilisation du terme laquo ergonomie raquo par Jastrzebowski Fordisme

Institutionnalisation de la meacutedecine du travail

Le terme laquo ergonomie raquo est employeacute par Murrel

Taylorisme

1987Toyota Production System

XVIIIe Deacuteveloppement de lrsquoapproche productiviste du travail

XVIIe

Premiers eacutecrits et classification des maladies professionnelles

Moyen acircgeEtude des conditions de travail et des facteurs environnementaux

Antiquiteacute

Racines de lrsquoapproche hygieacuteniste du travail

Introduction agrave lrsquoergonomie

Ameacuteliorer agrave la fois la productiviteacute et les

conditions de travailParce qursquoun employeacute motiveacute et en bonne santeacute est plus

productif et tout le monde y gagne

15

Cornelia Laros

Introduction agrave lrsquoergonomie

Inter-discplinariteacute16

Cornelia Laros

Ps983554983581ho983536983586983594983535e

In983531eacuteni983530983542983535e

Ne983547r983587983543983581i983530n983579983589983588

Ph983554983588i983586l983587983531i983530

Meacutede983579983534983585983589

Soc983534983587983536o983594983534983589

Ergonomie

Introduction agrave lrsquoergonomie

Domaines drsquointervention17

Cornelia Laros

Ps983554983581ho983536983586983594983535eIn983531eacuteni983530983542983535e

Ne983547r983587983543983581i983530n983579983589983588

Phi983543983534983587983537og983534983589Meacutede983579983534983585983589

Soc983534983587983536o983594983534983589Ergonomie

Ergonomie physique

Ergonomie organisationnelle

Ergonomie cognitive

Optimisation des situations et postes de travail dans leur

relation avec lrsquoactiviteacute physique

Optimisation des systegravemes socio-techniques structures

organisationnelles regravegles et processus

Optimisation du travail mental perception prise de deacutecision

reacutesolution de problegravemes

Introduction agrave lrsquoergonomie

Domaines drsquointervention18

Cornelia Laros

Organisationnelle 10

Physique 20

Cognitive 70

Introduction agrave lrsquoergonomie

Quizz time

19

Cornelia Laros

text

A - Lrsquoergonomie sert agravehellip20

Cornelia Laros

1 ameacuteliorer les conditions de travail

2 faire gagner plus drsquoargent agrave lrsquoentreprise

3 ameacuteliorer lrsquoestheacutetique

4 comprendre comment ameacuteliorer un produit

text

B - Quelles affirmations sont vraies

21

Cornelia Laros

1 Lrsquoergonomie srsquoattache agrave comprendre le travail pour le transformer

2 Il est possible de concevoir une IHM qui fonctionne pour tout le monde en se basant sur des normes

3 Lrsquoutilisateur va se servir de votre produit de la faccedilon dont vous lrsquoavez imagineacute

4 Lrsquoutilisateur interpregravete une tacircche comme un problegraveme qursquoil doit reacutesoudre en faisant avec ses caracteacuteristiques et les moyens mis agrave sa disposition

text

Pause cafeacute

10 minutes

22

Cornelia Laros

Introduction agrave lrsquoergonomie

Quelques meacutethodes drsquoergonomie

23

Cornelia Laros

Introduction agrave lrsquoergonomie

Ergonomie de conception

24

Cornelia Laros

Ergonomie de correctionbull Analyse drsquoactiviteacute

bull Audit

bull Analyse drsquoeacutevegravenements critiques

bull Analyse de traces

bull Simulation

bull Entretiens

bull Persona cartes drsquoexpeacuteriences

bull Tri par cartes

bull Prototypage

bull Benchmarkhellip

Lrsquoergonomie tout au long du projet

Introduction agrave lrsquoergonomie

Ergonomie de conception

25

Cornelia Laros

Ergonomie de correctionbull Analyse drsquoactiviteacute

bull Audit

bull Analyse drsquoeacutevegravenements critiques

bull Analyse de traces

bull Simulationhellip

bullEntretiens

bullPersona cartes drsquoexpeacuteriences

bullTri par cartes

bullPrototypage

bullBenchmarkhellip

Des meacutethodes de recueil de donneacutees avec utilisateurs finaux et de conception laquo experte raquo

Introduction agrave lrsquoergonomie

Pourquoi ces meacutethodes26

Cornelia Laros

bull Si jrsquoavais demandeacute aux utilisateurs ce qursquoils voulaient ils mrsquoauraient demandeacute un cheval plus rapide - Henri Ford

bull Un comportement laquo sur-appris raquo devient un automatisme inconscient que lrsquoutilisateur ne saura pas expliquer (ex passer les vitesses en conduisant)

bull Le cerveau humain est propice agrave la fabulation (imagination de causes) aux faux souvenirs (en toute bonne fois) les biais (deacutesirabiliteacute effet pygmalion influence socialehellip)

Observer

Introduction agrave lrsquoergonomie

Pourquoi ces meacutethodes27

Cornelia Laros

bull Une imagine est plus parlante que 10 000 mots

bull Permet drsquoeacutevaluer une ideacutee agrave moindre coucirct donc de se tromper souvent et drsquoapprendre plus vite pour valider une ideacutee ou lrsquoameacuteliorer

bull Permet de tester plein drsquoideacutees et de retenir la meilleure

hellip A condition de se focaliser sur un objectif et non sur lrsquoideacutee elle-mecircme

Modeacuteliser

Introduction agrave lrsquoergonomie

Lrsquoensemble permet drsquoeacuteviter ceci

28

Cornelia Laros

Introduction agrave lrsquoergonomie

Lrsquoensemble permet drsquoeacuteviter ceci

29

Cornelia Laros

Eli983538983534983585eacute en 983586983528983588983589r983549a983585t

Eli983538983534983585eacute en 983540983590983586t983587983545983584pa983539983546

Introduction agrave lrsquoergonomie

Prototyper pour vous crsquoesthellip30

Cornelia Laros

CONTRIBUTION AUX SPECIFICATIONS FONCTIONNELLES

Zoning basse fideacuteliteacute wireframe statique (sketch ou non) bull Rapide et peu couteux bull Illustratif statique pas drsquointeraction bull Non engageant sur le design bull Tregraves peu explicite sur le plan fonctionnel

Story-board cliquable bull Illustre la navigation bull Permet de se projeter dans lrsquointeraction bull Pose les bases du design et du fonctionnel

Prototype semi-dynamique bull Se veut complet (ou quasi) sur le plan de la

navigation de lrsquointeraction et des cas drsquoutilisation bull Doit permettre de simuler fidegravelement le

fonctionnement drsquoune application bull Est une speacutecification fonctionnelle en soi

Pha983543983530 983592983589 ca983591983590983527g983589 AM983623983607

Pha983543983530 983592983589 co983539983581983530p983545983535o983585 f983586983539983581t983535o983539983585983530l983536983589

Tes983545983588 983547t983535983536i983588983527t983589u983542983588 ap983540983537983534s 983538983587983529il983530983543hellip

Introduction agrave lrsquoergonomie

Prototype basse definition31

Cornelia Laros

Introduction agrave lrsquoergonomie

Prototyper cliquable32

Cornelia Laros

Introduction agrave lrsquoergonomie

Prototyper semi-dynamique33

Cornelia Laros

Page Title

1230

Mobile interactions

Observably Sc i$amp

About

Project overiew

Manage sessions

Manage variables

Settings

Start observing

1230 1230

OverviewObserve

Observe mobile interactions in the field to assess dominant hand for holding and interacting with smartphones

10042016Mobile interactionsMobile interactions

Welcome to Observably Gather and manage observation dataGather and manage observation data

My projects

1230

Tags separate with comas

Variable value

Create

Add observablesAdd all observables you want to track for this project You can come back and edit them laterAdd all observables you want to track for this project You can come back and edit them later

Thanks for the hint

Manage variablesMobile InteractionsMobile Interactions

1230

Tags separate with comas

Variable value

Create

Left hand Right thumbLRTLRT

Manage variablesMobile InteractionsMobile Interactions

Irsquom done Start recording

Save changesCancel

Observable Tags separate with coma

Tags separate with comas

3 20

LRILRI

Observable label

Did you knowTap on the icon to customize it Use icons from our library or from your gallery to make variables pop out when observing

Tap on the icon to customize it Use icons from our library or from your gallery to make variables pop out when observing

Thanks for the hint

Left hand Right thumbLRTLRT

Irsquom done Start recording

Manage variablesMobile InteractionsMobile Interactions

Left hand x Right thumb x

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Did you knowIf you make a mistake you can undo your action by tapping on the icon of the taskIf you make a mistake you can undo your action by tapping on the icon of the task

Thanks for the hint

Session 1

Discrete mode New Session

Mobile InteractionsMobile Interactions

1230

Record vocal comment

LRILRILRILRILRILRI

Did you knowYou can record occurences durations and comments by chosing the record format in the drop-down above

You can record occurences durations and comments by chosing the record format in the drop-down above

Thanks for the hint

Discrete mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

Left hand Right thumbLRT

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Did you knowIn list view you can slipe left and right to increment or correct your countIn list view you can slipe left and right to increment or correct your count

Thanks for the hint

Continuous mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

LRILRILRILRILRI

Did you knowIf you make a mistake you can undo your action by tapping on the icon of the taskIf you make a mistake you can undo your action by tapping on the icon of the task

Thanks for the hint

Continuous mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

Tags separate with comas

Comment

Add

Did you know The timestamp of vocal comments is the start time to accurately mark events that triggered your comment

The timestamp of vocal comments is the start time to accurately mark events that triggered your comment

Thanks for the hint

Manage observables

Comments mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Stop recording vocal comment

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Your observationsManage and cleanup sessions before exporting dataManage and cleanup sessions before exporting data

Session ManagementMobile InteractionsMobile Interactions

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

LRT

LRI

RLI

RLT

RRT20

20

8

35

15

Count SummaryCount Summary

RLT

RRT20

815

Time SummaryTime Summary

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

Left hand Right thumbLRTLRT

+1+1

10042016 124627

Left hand Right thumbLRTLRT

2rsquorsquo2rsquorsquo

10042016 124627 - 10042016 124629

Content of my comment boxTag1 Tag2

10042016 124644

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

LRTLRT+1+1

10042016 124627

Save changes

Observable Tags separate with coma

Tags separate with comas

Left hand x Right thumb x

AboutAbout

1230

Observable science provides tools for field research and scientific observation It is tailored to the needs of ethnography human factors psychology usability and games user research

Observable science provides tools for field research and scientific observation It is tailored to the needs of ethnography human factors psychology usability and games user research

Observablyscience

Development by Morgane RadelDesign by Cornelia LarosDevelopment by Morgane RadelDesign by Cornelia Laros

Credits

Support (us)Show your love Rate the App

Make a donation

Contact us

Visit our website

Add session tags to all observations

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

Save changes

Session Tags separate with coma

Tags separate with comas

Metro x Toulouse x

Manage variablesMobile InteractionsMobile Interactions

1230

Left hand Right thumbLRTLRT

Confirm

Search icons

Cancel

Browse

3 20

Observably Sci$amp

1230

Project statisticsProject statistics Total countsTotal time Total comments First entryLast entrySessions

4 963281231

1441201201603042016

97

Project detailsMobile InteractionsMobile Interactions

Sessions SummarySessions Summary

RRT20

815

Count SummaryCount Summary

JUN 14MAY 14APR 14MAR 14FEB 14JAN 14

4

1

65

7

0

2

4

6

8

10

3

2014

Manage sessions

Settings ExportOverview

1230

App optionsDisplay hintsDisplay hints

SettingsSettings

Share anonymous data to improve the appShare anonymous data to improve the app

1230

Gather and manage observation data with ObservablyGather and manage observation data with Observably

Welcome to Observably

Project name

Project description what is the goal of your project

CreateCancel

Session[number]Session[number]

Default Session ID

Default export format txt

Data options

Default Discrete variable lines view

Create a new project

1230

Project detailsMobile InteractionsMobile Interactions

Mobile InteractionsMobile Interactions

Project description what is the goal of your project

SaveCancel

Session[number]Session[number]

Default Session ID

Default export format txt

Data options

Default continuous variables grid view

Project name

Manage sessions

Settings ExportOverview

1230

Project detailsMobile InteractionsMobile Interactions

Manage sessions

Settings ExportOverview

Export format txt

Export data

Data has been successfully exported as MobileInteractionstxt

to your download folder

Observably Sc i$amp

Settings

1230

BUTTONBUTTON

Permissions

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Up exlaborum incididunt quis nostrud exercitatn

COMPONENTS

Pickers

OKCANCEL

13

Friday

MAR

2014

MS W T F ST

30 31

1

16 17 19 20 21 2218

23 24 26 27 28 2925

139 10 12 14 1511

72 3 5 6 84

March 2014

OKCANCEL

PMAM

112

9

10

11

2

48

576

3

330 AM

Notifications

Incoming call

Rachel Ligson

IGNORE ANSWER

REPLYARCHIVE

Hey letrsquos catch up soon Do you want to grab lunch sometime this weekendLet me know when yoursquore free

409 PMHannah ChoHannah Cho

Do you know what I mean509 PMTina McBeanTina McBean

Heads up notification

Regular + Expanded notification

Index scroller

All

Patrick Keenan

Mary Johnson

Tina Santiago

Trevor Hansen

Amar Sagoo

Abbey Christensen

Ali Connors

Alex Nelson

Anthony Stevens

A

A

1230

Abcdefg

Abcdefghijklmno

Tabs

THE THIRDITEM TWONO ONE

THE THIRDITEM TWONO ONE

1230

THE THIRDITEM TWONO ONE

Page Title

1230

121 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

110 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

51 50

Input text for a single line field with a maximu

Single-Line Input Label

31 50

Input text for a single line field with a max

Single-Line Input Label

121 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

110 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

51 50

Input text for a single line field with a maximuInput text for a single line field with a maximu

Single-Line Input Label

31 50

Input text for a single line field with a maxInput text for a single line field with a max

Single-Line Input Label

Disabled text field

Input text

Username or Password is incorrect

Input text

Input tex

Hint text

Hint text

Hint text

Disabled text field

Input textInput text

Username or Password is incorrect

Input textInput text

Input texInput tex

Hint text

Hint text

Hint text

Text fields

Switches and sliders

60

Regular

Pressed

Disabled

60

Regular

Pressed

Disabled

Buttons

DISABLED

PRESSED

NORMAL

DISABLED

PRESSED

NORMAL

Flat Raised

DISABLED

PRESSED

NORMAL

DISABLED

PRESSED

NORMAL

Flat Raised

Toasts

This color applies to both light and dark theme

This item already has the label ldquotravelrdquo You can add a new label

ACTIONSingle-Line Snackbar

Menu

Arial 100

100

Calibri

Courier

Verdana

Arial

Chips

Trevor Hansen

email3emailcom

email2emailcom

primaryemailemailcomContact Name

Dialogs

Desktop

Without title With title

BUTTONBUTTON

PermissionsLorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Up exlaborum incididunt quis nostrud exercitatn

BUTTONBUTTON

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Ut enim ad minim ikad veniam quis nostrud exercitatn ullamco laboris nisi ut aliquip exlaborum incididunt

ACCEPTDECLINEMORE INFO

Permissions

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisinuli

Toolbar

11Roboto

Cards

Welcome BackItrsquos been a while have you read any new books latelyItrsquos been a while have you read any new books lately

YESNOPE

Kangaroo Valley Safari

Located two hours south of Sydney in the

Southern Highlands of New South Wales

LEARN MORESHARE

REVIEWFREE SAMPLE

By Alex Nelson

El Pooch

Pre-fab Homes

Favorite Road Trips

Best Airlines

Campbell

Groceries

almond milk

coconut water

cucumber

green apples

Yuna tickets on sale 624

May 24 2014

Clean desk

Keyboards

suggestion suggestion suggestion

123

a s d f g h j k l

z x c v b n m

q w e r t y u i o p1 2 3 4 5 6 7 8 9 0

suggestion suggestion suggestion

123

a s d f g h j k l

z x c v b n m

q w e r t y u i o p1 2 3 4 5 6 7 8 9 0

Bottom Sheet

Print this page

Copy

Upload

Share

MoreMail Message

Google+Gmail Hangout

Grid

Two lineSupport text

Two lineSupport text

Single line

Single line

Lists

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Three-line itemThree-line item

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Three-line itemThree-line item

Three-line itemThree-line item

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Three-line itemThree-line item

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Three-line itemThree-line item

Three-line itemThree-line item

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Line item unselectedLine item unselected

Line item selectedLine item selected

Line item selectedLine item selected

Data usageData usage

BluetoothBluetooth

Wi-FiWi-Fi

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Single-line itemSingle-line item

Single-line itemSingle-line item

Single-line itemSingle-line itemSingle-line itemSingle-line item

Single-line itemSingle-line item

Single-line itemSingle-line item

Introduction agrave lrsquoergonomie

Ergonomie et Design34

Cornelia Laros

Design Ergonomie Design Ergonomie

Identiteacute

Communication

Ambiance

Exemple un site institutionnel informatif avec une navigation simple et des exigences fortes

drsquoidentiteacuteExemple une application meacutetier destineacutee agrave une

population drsquoutilisateur connue

EfficaciteacuteFonctionnel

Outils

Service en ligne

Architecture de lrsquoinformation contenus bonnes pratiques

Analyse tache vs activiteacute prise en compte globaliseacutee des process

postes de travail eacutecosystegraveme existant hellip puis la conception

Image Usage freacutequent

Usage ponctuel

Votre eacutequipe Ergonome Directeur aristique Webdesigner UX Designer

Introduction agrave lrsquoergonomie

Design avant-tout35

Cornelia Laros

Introduction agrave lrsquoergonomie

Equilibreacute36

Cornelia Laros

Introduction agrave lrsquoergonomie

Ergonomie avant tout37

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

38

Cornelia Laros

text

Lrsquoergonomie sert agravehellip39

Cornelia Laros

1 ameacuteliorer les conditions de travail

2 faire gagner plus drsquoargent agrave lrsquoentreprise

3 ameacuteliorer lrsquoestheacutetique

4 comprendre comment ameacuteliorer un produit

text

Quelles affirmations sont vraies

40

Cornelia Laros

1 Lrsquoergonomie srsquoattache agrave comprendre le travail pour le transformer

2 Il est possible de concevoir une IHM qui fonctionne pour tout le monde en se basant sur des normes

3 Lrsquoutilisateur va se servir de votre produit de la faccedilon dont vous lrsquoavez imagineacute

4 Lrsquoutilisateur interpregravete une tacircche comme un problegraveme qursquoil doit reacutesoudre en faisant avec ses caracteacuteristiques et les moyens mis agrave sa disposition

text

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

41

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

text

D - A quoi sert un prototype

42

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

43

Cornelia Laros

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

44

Cornelia Laros

Utilisabiliteacute

Utiliteacute

Efficaciteacute Efficience

Satisfaction

Introduction agrave lrsquoergonomie

Pyramide des besoins MASLOW

45

Cornelia Laros

Introduction agrave lrsquoergonomie

Pyramide des besoins IHM46

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

47

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

48

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

49

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

50

Cornelia Laros

Introduction agrave lrsquoergonomie

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

51

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

Introduction agrave lrsquoergonomie

D - A quoi sert un prototype

52

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

53

Cornelia Laros

a Fiable

b Intuitif

c Fonctionnel

d Accessible

e Plaisant

f Porteur de sens

Introduction agrave lrsquoergonomie

F - Quel besoin ai-je oublieacute dans la question

preacuteceacutedente

54

Cornelia Laros

text

Patterns amp Dark patterns

55

Cornelia Laros

text

Criteres de Bastien et Scapin56

Cornelia Laros

Guidage

Charge de travail

Controcircle utilisateur explicite

Flexibiliteacute ( adaptabiliteacute)

Gestion des erreurs

Homogeacuteneacuteiteacute ( coheacuterence)

Signifiance des Codes et Deacutenominations

Compatibiliteacute ( familiariteacute)

Introduction agrave lrsquoergonomie

Guidage57

Cornelia Laros

Introduction agrave lrsquoergonomie

Charge de travail58

Cornelia Laros

Introduction agrave lrsquoergonomie

Controle explicite59

Cornelia Laros

Introduction agrave lrsquoergonomie

Controles explicites60

Cornelia Laros

Dar983595 983541983527t983545983589983590n

text

Adaptabiliteacute61

Cornelia Laros

text

Gestion des erreurs62

Cornelia Laros

text

Signifiance des codes et deacutenominations

63

Cornelia Laros

text

Homogeacuteneacuteiteacute - coheacuterence64

Cornelia Laros

text

Homogeacuteneacuteiteacute - Distinction65

Cornelia Laros

text

Compatibiliteacute66

Cornelia Laros

text

Compatibiliteacute67

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction68

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction69

Cornelia Laros

text

Gestalt Theorie70

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Gestalt Theorie71

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Dark patterns72

Cornelia Laros

Introduction agrave lrsquoergonomie

A vous de jouer

73

Cornelia Laros

Introduction agrave lrsquoergonomie

Outils de prototypages DIY74

Cornelia Laros

Low tech papier + crayons post-its cartes agrave jouer

Gratuit en ligne Invision app Moqups UXPin

Mac Sketch Balsamiq Mockups Axure

PC Axure Balsamiq

Mobile Prototyping on Paper

Ap983540983590en983530983555 983592983589 no983547983549983589983537le983543 983581h983586983543983589983588

Introduction agrave lrsquoergonomie

Test de perception DIY75

Cornelia Laros

La premiegravere impression qursquoun utilisateur se fait de votre IHM va influencer tous ses jugements ulteacuterieurs Crsquoest lrsquoeffet de halo

bull Un utilisateur qui a une premiegravere impression positive de votre appli passera plus facilement outre les bugs

bull Une premiegravere impression negative rendra lrsquoutilisateur plus critique vis agrave vis de deacutetails qui confirment son jugement

Cel983527 983538983580983590c983532e 983527983548983588si 983527983549983589983581 vo983543 983586983590983580ux 983591rsquoex983527983538983589983585s vo983543 983530983585t983542983589983546i983530n983543 983592rsquoem983528983527983548983581he 983530983545 983550983587s 983542e983585d983530983555-vo983547983543 983581l983535e983539983546s

Introduction agrave lrsquoergonomie

Test de perception DIY76

Cornelia Laros

Montrer votre prototype agrave quelqursquoun pendant 5 secondes

Demandez-lui

bull Ce qursquoil a vu

bull Ce qursquoil a compris de ce qursquoil a vu

bull Ce qui lrsquoa surpris ou marqueacute

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY77

Cornelia Laros

Les difficulteacutes de navigation se produisent souvent dans les niveaux les plus haut de votre structure de contenu Vous pouvez veacuterifier facilement si la classification logique pour vous lrsquoest aussi pour vos utilisateurs

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY78

Cornelia Laros

Lister trois (max) niveaux de profondeur de votre contenu structureacute Masquez ensuite les contenus de niveau plus bas Utilisez par exemple les groupements de lignes dans excel pour creacuteer des pliers-deacutepliers ou imprimer la liste sur une feuille que vous pliez pour masquer certaines parties

Demandez agrave un utilisateur de vous dire ougrave il penserait trouver un contenu bien preacutecis en preacutecisant qursquoil nrsquoy a pas de bonne reacuteponse

Notez srsquoil va chercher lagrave ougrave vous vous y attendiez ougrave il a heacutesiteacute et ce qursquoil a fini par choisir pour vous aider agrave rendre la navigation plus intuitive

Introduction agrave lrsquoergonomie

Test drsquoutilisabiliteacute DIY79

Cornelia Laros

A chaque nouvelle fonctionnaliteacute ajouteacutee demandez agrave quelqursquoun qui ne connait pas le projet de srsquoen servir Proposez lui une seule tacircche geacuteneacuterique agrave accomplir avec la fonctionnaliteacute

Exemple Tu veux prendre un rendez-vous avec un meacutedecin sur ce site montres-moi comment tu ferais en commentant agrave haute voix

Le plus important ici crsquoest de ne pas reacuteagir agrave ce qursquoil fait mais simplement le regarder faire sans lrsquoaider mecircme srsquoil est bloqueacute

Srsquoil 983540983586983588983589 de983543 983578983547983589s983545i983586983585s reacutepo983539983592983530z 983540983580983590 un983530 983577983548e983588t983534983587983539 o983547 d983535983545e983588 l983547983535 983577u983530 983550983587us 983536983547983535 983590eacutepo983539983592r983530983555 983578983548an983591 983534983537 983580ur983527 fi983539983535 983588rsquoil 983534983539983588983535s983545e Srsquoil 983530983543983546 v983542983580i983593983530n983545 983529l983587983577ueacute di983545983530983588 l983548i 983577983547983589 983550o983547s 983580983536983537ez 983542983530983550983587ir 983549983586983546r983589 983579o983541983534983589 et 983530983543983588983580ye983555 983592983530 c983587983538983541re983539983592r983530 983579983589 983578u983534 l983589 9835316ne

Introduction agrave lrsquoergonomie

Pas besoin de reacuteinventer la roue DIY

80

Cornelia Laros

Il existe des bonnes pratiques qui vous eacuteviteront de reacuteinventer la roue Utilisez des laquo design patterns raquo pour concevoir vos interfaces

Renseignez vous sur la Gestalt Theorie pour agencer vos pages

Utilisez les critegraveres de Bastien et Scapin pour trouver des deacutefauts eacutevidents avant de tester vous en tirerez des enseignements plus inteacuteressants

Ma983534s ccedila crsquoes983545 983541983586983548r u983539983530 983580u983546r983530 983559983587i983588

Introduction agrave lrsquoergonomie

Quizz time

81

Cornelia Laros

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

82

Cornelia Laros

1 c Fonctionnel

2 a Fiable

3 d Accessible

4 b Intuitif

5 e Plaisant

6 f Porteur de sens

text

F - Quel besoin ai-je oublieacute dans la question preacuteceacutedente

83

Cornelia Laros

Uti983536983534983588983580b983536e

Introduction agrave lrsquoergonomie

Tests DIY84

Cornelia Laros

Reacutedigez la proceacutedure pour tester un de vos projets drsquoIHM avec le test de votre choix perception arborescence ou utilisabiliteacute

Notez la question que vous vous posez et la question que vous allez poser

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

Introduction agrave lrsquoergonomie

Ergonomique ou pas8

Cornelia Laros

A B

C D

Introduction agrave lrsquoergonomie

Tacircche vs Activiteacute9

Cornelia Laros

Introduction agrave lrsquoergonomie

Tacircche vs Activiteacute10

Cornelia Laros

Deacuteterminants externes (caracteacuteristiques de la

situation)

Introduction agrave lrsquoergonomie

Scheacutema agrave 5 carreacutes11

Cornelia Laros

Deacuteterminants internes (caracteacuteristiques de

lrsquoutilisateur)

Activiteacute

Effets sur la personne (santeacute motivation compeacutetencehellip)

Effets sur lrsquoentreprise (production revenus stocks

usure du mateacuterielhellip)

Reacutet983542o-ac983545983534983587983585Reacutet983542o-ac983545983534983587983585

In983545e983590983527c983545983535o983585 h983586983538983593983589 ma983579983533983534n983589 983591e983550983534983589n983545 I983585te983542983527983581t983535o983539 H983586983593m983589 983629983554983588tegraveme

Introduction agrave lrsquoergonomie

Catachregravese

12

Cornelia Laros

Art de deacutetourner un objet de la tacircche pour laquelle il a eacuteteacute conccedilu

Introduction agrave lrsquoergonomie

Ergonomique ne veux rien dire

Pour comprendre revenons aux origineshellip

13

Cornelia Laros

Introduction agrave lrsquoergonomie

Les origines14

Cornelia Laros

1857 1949

1880

1908

1946

Premiegravere utilisation du terme laquo ergonomie raquo par Jastrzebowski Fordisme

Institutionnalisation de la meacutedecine du travail

Le terme laquo ergonomie raquo est employeacute par Murrel

Taylorisme

1987Toyota Production System

XVIIIe Deacuteveloppement de lrsquoapproche productiviste du travail

XVIIe

Premiers eacutecrits et classification des maladies professionnelles

Moyen acircgeEtude des conditions de travail et des facteurs environnementaux

Antiquiteacute

Racines de lrsquoapproche hygieacuteniste du travail

Introduction agrave lrsquoergonomie

Ameacuteliorer agrave la fois la productiviteacute et les

conditions de travailParce qursquoun employeacute motiveacute et en bonne santeacute est plus

productif et tout le monde y gagne

15

Cornelia Laros

Introduction agrave lrsquoergonomie

Inter-discplinariteacute16

Cornelia Laros

Ps983554983581ho983536983586983594983535e

In983531eacuteni983530983542983535e

Ne983547r983587983543983581i983530n983579983589983588

Ph983554983588i983586l983587983531i983530

Meacutede983579983534983585983589

Soc983534983587983536o983594983534983589

Ergonomie

Introduction agrave lrsquoergonomie

Domaines drsquointervention17

Cornelia Laros

Ps983554983581ho983536983586983594983535eIn983531eacuteni983530983542983535e

Ne983547r983587983543983581i983530n983579983589983588

Phi983543983534983587983537og983534983589Meacutede983579983534983585983589

Soc983534983587983536o983594983534983589Ergonomie

Ergonomie physique

Ergonomie organisationnelle

Ergonomie cognitive

Optimisation des situations et postes de travail dans leur

relation avec lrsquoactiviteacute physique

Optimisation des systegravemes socio-techniques structures

organisationnelles regravegles et processus

Optimisation du travail mental perception prise de deacutecision

reacutesolution de problegravemes

Introduction agrave lrsquoergonomie

Domaines drsquointervention18

Cornelia Laros

Organisationnelle 10

Physique 20

Cognitive 70

Introduction agrave lrsquoergonomie

Quizz time

19

Cornelia Laros

text

A - Lrsquoergonomie sert agravehellip20

Cornelia Laros

1 ameacuteliorer les conditions de travail

2 faire gagner plus drsquoargent agrave lrsquoentreprise

3 ameacuteliorer lrsquoestheacutetique

4 comprendre comment ameacuteliorer un produit

text

B - Quelles affirmations sont vraies

21

Cornelia Laros

1 Lrsquoergonomie srsquoattache agrave comprendre le travail pour le transformer

2 Il est possible de concevoir une IHM qui fonctionne pour tout le monde en se basant sur des normes

3 Lrsquoutilisateur va se servir de votre produit de la faccedilon dont vous lrsquoavez imagineacute

4 Lrsquoutilisateur interpregravete une tacircche comme un problegraveme qursquoil doit reacutesoudre en faisant avec ses caracteacuteristiques et les moyens mis agrave sa disposition

text

Pause cafeacute

10 minutes

22

Cornelia Laros

Introduction agrave lrsquoergonomie

Quelques meacutethodes drsquoergonomie

23

Cornelia Laros

Introduction agrave lrsquoergonomie

Ergonomie de conception

24

Cornelia Laros

Ergonomie de correctionbull Analyse drsquoactiviteacute

bull Audit

bull Analyse drsquoeacutevegravenements critiques

bull Analyse de traces

bull Simulation

bull Entretiens

bull Persona cartes drsquoexpeacuteriences

bull Tri par cartes

bull Prototypage

bull Benchmarkhellip

Lrsquoergonomie tout au long du projet

Introduction agrave lrsquoergonomie

Ergonomie de conception

25

Cornelia Laros

Ergonomie de correctionbull Analyse drsquoactiviteacute

bull Audit

bull Analyse drsquoeacutevegravenements critiques

bull Analyse de traces

bull Simulationhellip

bullEntretiens

bullPersona cartes drsquoexpeacuteriences

bullTri par cartes

bullPrototypage

bullBenchmarkhellip

Des meacutethodes de recueil de donneacutees avec utilisateurs finaux et de conception laquo experte raquo

Introduction agrave lrsquoergonomie

Pourquoi ces meacutethodes26

Cornelia Laros

bull Si jrsquoavais demandeacute aux utilisateurs ce qursquoils voulaient ils mrsquoauraient demandeacute un cheval plus rapide - Henri Ford

bull Un comportement laquo sur-appris raquo devient un automatisme inconscient que lrsquoutilisateur ne saura pas expliquer (ex passer les vitesses en conduisant)

bull Le cerveau humain est propice agrave la fabulation (imagination de causes) aux faux souvenirs (en toute bonne fois) les biais (deacutesirabiliteacute effet pygmalion influence socialehellip)

Observer

Introduction agrave lrsquoergonomie

Pourquoi ces meacutethodes27

Cornelia Laros

bull Une imagine est plus parlante que 10 000 mots

bull Permet drsquoeacutevaluer une ideacutee agrave moindre coucirct donc de se tromper souvent et drsquoapprendre plus vite pour valider une ideacutee ou lrsquoameacuteliorer

bull Permet de tester plein drsquoideacutees et de retenir la meilleure

hellip A condition de se focaliser sur un objectif et non sur lrsquoideacutee elle-mecircme

Modeacuteliser

Introduction agrave lrsquoergonomie

Lrsquoensemble permet drsquoeacuteviter ceci

28

Cornelia Laros

Introduction agrave lrsquoergonomie

Lrsquoensemble permet drsquoeacuteviter ceci

29

Cornelia Laros

Eli983538983534983585eacute en 983586983528983588983589r983549a983585t

Eli983538983534983585eacute en 983540983590983586t983587983545983584pa983539983546

Introduction agrave lrsquoergonomie

Prototyper pour vous crsquoesthellip30

Cornelia Laros

CONTRIBUTION AUX SPECIFICATIONS FONCTIONNELLES

Zoning basse fideacuteliteacute wireframe statique (sketch ou non) bull Rapide et peu couteux bull Illustratif statique pas drsquointeraction bull Non engageant sur le design bull Tregraves peu explicite sur le plan fonctionnel

Story-board cliquable bull Illustre la navigation bull Permet de se projeter dans lrsquointeraction bull Pose les bases du design et du fonctionnel

Prototype semi-dynamique bull Se veut complet (ou quasi) sur le plan de la

navigation de lrsquointeraction et des cas drsquoutilisation bull Doit permettre de simuler fidegravelement le

fonctionnement drsquoune application bull Est une speacutecification fonctionnelle en soi

Pha983543983530 983592983589 ca983591983590983527g983589 AM983623983607

Pha983543983530 983592983589 co983539983581983530p983545983535o983585 f983586983539983581t983535o983539983585983530l983536983589

Tes983545983588 983547t983535983536i983588983527t983589u983542983588 ap983540983537983534s 983538983587983529il983530983543hellip

Introduction agrave lrsquoergonomie

Prototype basse definition31

Cornelia Laros

Introduction agrave lrsquoergonomie

Prototyper cliquable32

Cornelia Laros

Introduction agrave lrsquoergonomie

Prototyper semi-dynamique33

Cornelia Laros

Page Title

1230

Mobile interactions

Observably Sc i$amp

About

Project overiew

Manage sessions

Manage variables

Settings

Start observing

1230 1230

OverviewObserve

Observe mobile interactions in the field to assess dominant hand for holding and interacting with smartphones

10042016Mobile interactionsMobile interactions

Welcome to Observably Gather and manage observation dataGather and manage observation data

My projects

1230

Tags separate with comas

Variable value

Create

Add observablesAdd all observables you want to track for this project You can come back and edit them laterAdd all observables you want to track for this project You can come back and edit them later

Thanks for the hint

Manage variablesMobile InteractionsMobile Interactions

1230

Tags separate with comas

Variable value

Create

Left hand Right thumbLRTLRT

Manage variablesMobile InteractionsMobile Interactions

Irsquom done Start recording

Save changesCancel

Observable Tags separate with coma

Tags separate with comas

3 20

LRILRI

Observable label

Did you knowTap on the icon to customize it Use icons from our library or from your gallery to make variables pop out when observing

Tap on the icon to customize it Use icons from our library or from your gallery to make variables pop out when observing

Thanks for the hint

Left hand Right thumbLRTLRT

Irsquom done Start recording

Manage variablesMobile InteractionsMobile Interactions

Left hand x Right thumb x

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Did you knowIf you make a mistake you can undo your action by tapping on the icon of the taskIf you make a mistake you can undo your action by tapping on the icon of the task

Thanks for the hint

Session 1

Discrete mode New Session

Mobile InteractionsMobile Interactions

1230

Record vocal comment

LRILRILRILRILRILRI

Did you knowYou can record occurences durations and comments by chosing the record format in the drop-down above

You can record occurences durations and comments by chosing the record format in the drop-down above

Thanks for the hint

Discrete mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

Left hand Right thumbLRT

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Did you knowIn list view you can slipe left and right to increment or correct your countIn list view you can slipe left and right to increment or correct your count

Thanks for the hint

Continuous mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

LRILRILRILRILRI

Did you knowIf you make a mistake you can undo your action by tapping on the icon of the taskIf you make a mistake you can undo your action by tapping on the icon of the task

Thanks for the hint

Continuous mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

Tags separate with comas

Comment

Add

Did you know The timestamp of vocal comments is the start time to accurately mark events that triggered your comment

The timestamp of vocal comments is the start time to accurately mark events that triggered your comment

Thanks for the hint

Manage observables

Comments mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Stop recording vocal comment

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Your observationsManage and cleanup sessions before exporting dataManage and cleanup sessions before exporting data

Session ManagementMobile InteractionsMobile Interactions

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

LRT

LRI

RLI

RLT

RRT20

20

8

35

15

Count SummaryCount Summary

RLT

RRT20

815

Time SummaryTime Summary

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

Left hand Right thumbLRTLRT

+1+1

10042016 124627

Left hand Right thumbLRTLRT

2rsquorsquo2rsquorsquo

10042016 124627 - 10042016 124629

Content of my comment boxTag1 Tag2

10042016 124644

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

LRTLRT+1+1

10042016 124627

Save changes

Observable Tags separate with coma

Tags separate with comas

Left hand x Right thumb x

AboutAbout

1230

Observable science provides tools for field research and scientific observation It is tailored to the needs of ethnography human factors psychology usability and games user research

Observable science provides tools for field research and scientific observation It is tailored to the needs of ethnography human factors psychology usability and games user research

Observablyscience

Development by Morgane RadelDesign by Cornelia LarosDevelopment by Morgane RadelDesign by Cornelia Laros

Credits

Support (us)Show your love Rate the App

Make a donation

Contact us

Visit our website

Add session tags to all observations

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

Save changes

Session Tags separate with coma

Tags separate with comas

Metro x Toulouse x

Manage variablesMobile InteractionsMobile Interactions

1230

Left hand Right thumbLRTLRT

Confirm

Search icons

Cancel

Browse

3 20

Observably Sci$amp

1230

Project statisticsProject statistics Total countsTotal time Total comments First entryLast entrySessions

4 963281231

1441201201603042016

97

Project detailsMobile InteractionsMobile Interactions

Sessions SummarySessions Summary

RRT20

815

Count SummaryCount Summary

JUN 14MAY 14APR 14MAR 14FEB 14JAN 14

4

1

65

7

0

2

4

6

8

10

3

2014

Manage sessions

Settings ExportOverview

1230

App optionsDisplay hintsDisplay hints

SettingsSettings

Share anonymous data to improve the appShare anonymous data to improve the app

1230

Gather and manage observation data with ObservablyGather and manage observation data with Observably

Welcome to Observably

Project name

Project description what is the goal of your project

CreateCancel

Session[number]Session[number]

Default Session ID

Default export format txt

Data options

Default Discrete variable lines view

Create a new project

1230

Project detailsMobile InteractionsMobile Interactions

Mobile InteractionsMobile Interactions

Project description what is the goal of your project

SaveCancel

Session[number]Session[number]

Default Session ID

Default export format txt

Data options

Default continuous variables grid view

Project name

Manage sessions

Settings ExportOverview

1230

Project detailsMobile InteractionsMobile Interactions

Manage sessions

Settings ExportOverview

Export format txt

Export data

Data has been successfully exported as MobileInteractionstxt

to your download folder

Observably Sc i$amp

Settings

1230

BUTTONBUTTON

Permissions

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Up exlaborum incididunt quis nostrud exercitatn

COMPONENTS

Pickers

OKCANCEL

13

Friday

MAR

2014

MS W T F ST

30 31

1

16 17 19 20 21 2218

23 24 26 27 28 2925

139 10 12 14 1511

72 3 5 6 84

March 2014

OKCANCEL

PMAM

112

9

10

11

2

48

576

3

330 AM

Notifications

Incoming call

Rachel Ligson

IGNORE ANSWER

REPLYARCHIVE

Hey letrsquos catch up soon Do you want to grab lunch sometime this weekendLet me know when yoursquore free

409 PMHannah ChoHannah Cho

Do you know what I mean509 PMTina McBeanTina McBean

Heads up notification

Regular + Expanded notification

Index scroller

All

Patrick Keenan

Mary Johnson

Tina Santiago

Trevor Hansen

Amar Sagoo

Abbey Christensen

Ali Connors

Alex Nelson

Anthony Stevens

A

A

1230

Abcdefg

Abcdefghijklmno

Tabs

THE THIRDITEM TWONO ONE

THE THIRDITEM TWONO ONE

1230

THE THIRDITEM TWONO ONE

Page Title

1230

121 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

110 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

51 50

Input text for a single line field with a maximu

Single-Line Input Label

31 50

Input text for a single line field with a max

Single-Line Input Label

121 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

110 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

51 50

Input text for a single line field with a maximuInput text for a single line field with a maximu

Single-Line Input Label

31 50

Input text for a single line field with a maxInput text for a single line field with a max

Single-Line Input Label

Disabled text field

Input text

Username or Password is incorrect

Input text

Input tex

Hint text

Hint text

Hint text

Disabled text field

Input textInput text

Username or Password is incorrect

Input textInput text

Input texInput tex

Hint text

Hint text

Hint text

Text fields

Switches and sliders

60

Regular

Pressed

Disabled

60

Regular

Pressed

Disabled

Buttons

DISABLED

PRESSED

NORMAL

DISABLED

PRESSED

NORMAL

Flat Raised

DISABLED

PRESSED

NORMAL

DISABLED

PRESSED

NORMAL

Flat Raised

Toasts

This color applies to both light and dark theme

This item already has the label ldquotravelrdquo You can add a new label

ACTIONSingle-Line Snackbar

Menu

Arial 100

100

Calibri

Courier

Verdana

Arial

Chips

Trevor Hansen

email3emailcom

email2emailcom

primaryemailemailcomContact Name

Dialogs

Desktop

Without title With title

BUTTONBUTTON

PermissionsLorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Up exlaborum incididunt quis nostrud exercitatn

BUTTONBUTTON

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Ut enim ad minim ikad veniam quis nostrud exercitatn ullamco laboris nisi ut aliquip exlaborum incididunt

ACCEPTDECLINEMORE INFO

Permissions

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisinuli

Toolbar

11Roboto

Cards

Welcome BackItrsquos been a while have you read any new books latelyItrsquos been a while have you read any new books lately

YESNOPE

Kangaroo Valley Safari

Located two hours south of Sydney in the

Southern Highlands of New South Wales

LEARN MORESHARE

REVIEWFREE SAMPLE

By Alex Nelson

El Pooch

Pre-fab Homes

Favorite Road Trips

Best Airlines

Campbell

Groceries

almond milk

coconut water

cucumber

green apples

Yuna tickets on sale 624

May 24 2014

Clean desk

Keyboards

suggestion suggestion suggestion

123

a s d f g h j k l

z x c v b n m

q w e r t y u i o p1 2 3 4 5 6 7 8 9 0

suggestion suggestion suggestion

123

a s d f g h j k l

z x c v b n m

q w e r t y u i o p1 2 3 4 5 6 7 8 9 0

Bottom Sheet

Print this page

Copy

Upload

Share

MoreMail Message

Google+Gmail Hangout

Grid

Two lineSupport text

Two lineSupport text

Single line

Single line

Lists

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Three-line itemThree-line item

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Three-line itemThree-line item

Three-line itemThree-line item

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Three-line itemThree-line item

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Three-line itemThree-line item

Three-line itemThree-line item

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Line item unselectedLine item unselected

Line item selectedLine item selected

Line item selectedLine item selected

Data usageData usage

BluetoothBluetooth

Wi-FiWi-Fi

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Single-line itemSingle-line item

Single-line itemSingle-line item

Single-line itemSingle-line itemSingle-line itemSingle-line item

Single-line itemSingle-line item

Single-line itemSingle-line item

Introduction agrave lrsquoergonomie

Ergonomie et Design34

Cornelia Laros

Design Ergonomie Design Ergonomie

Identiteacute

Communication

Ambiance

Exemple un site institutionnel informatif avec une navigation simple et des exigences fortes

drsquoidentiteacuteExemple une application meacutetier destineacutee agrave une

population drsquoutilisateur connue

EfficaciteacuteFonctionnel

Outils

Service en ligne

Architecture de lrsquoinformation contenus bonnes pratiques

Analyse tache vs activiteacute prise en compte globaliseacutee des process

postes de travail eacutecosystegraveme existant hellip puis la conception

Image Usage freacutequent

Usage ponctuel

Votre eacutequipe Ergonome Directeur aristique Webdesigner UX Designer

Introduction agrave lrsquoergonomie

Design avant-tout35

Cornelia Laros

Introduction agrave lrsquoergonomie

Equilibreacute36

Cornelia Laros

Introduction agrave lrsquoergonomie

Ergonomie avant tout37

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

38

Cornelia Laros

text

Lrsquoergonomie sert agravehellip39

Cornelia Laros

1 ameacuteliorer les conditions de travail

2 faire gagner plus drsquoargent agrave lrsquoentreprise

3 ameacuteliorer lrsquoestheacutetique

4 comprendre comment ameacuteliorer un produit

text

Quelles affirmations sont vraies

40

Cornelia Laros

1 Lrsquoergonomie srsquoattache agrave comprendre le travail pour le transformer

2 Il est possible de concevoir une IHM qui fonctionne pour tout le monde en se basant sur des normes

3 Lrsquoutilisateur va se servir de votre produit de la faccedilon dont vous lrsquoavez imagineacute

4 Lrsquoutilisateur interpregravete une tacircche comme un problegraveme qursquoil doit reacutesoudre en faisant avec ses caracteacuteristiques et les moyens mis agrave sa disposition

text

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

41

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

text

D - A quoi sert un prototype

42

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

43

Cornelia Laros

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

44

Cornelia Laros

Utilisabiliteacute

Utiliteacute

Efficaciteacute Efficience

Satisfaction

Introduction agrave lrsquoergonomie

Pyramide des besoins MASLOW

45

Cornelia Laros

Introduction agrave lrsquoergonomie

Pyramide des besoins IHM46

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

47

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

48

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

49

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

50

Cornelia Laros

Introduction agrave lrsquoergonomie

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

51

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

Introduction agrave lrsquoergonomie

D - A quoi sert un prototype

52

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

53

Cornelia Laros

a Fiable

b Intuitif

c Fonctionnel

d Accessible

e Plaisant

f Porteur de sens

Introduction agrave lrsquoergonomie

F - Quel besoin ai-je oublieacute dans la question

preacuteceacutedente

54

Cornelia Laros

text

Patterns amp Dark patterns

55

Cornelia Laros

text

Criteres de Bastien et Scapin56

Cornelia Laros

Guidage

Charge de travail

Controcircle utilisateur explicite

Flexibiliteacute ( adaptabiliteacute)

Gestion des erreurs

Homogeacuteneacuteiteacute ( coheacuterence)

Signifiance des Codes et Deacutenominations

Compatibiliteacute ( familiariteacute)

Introduction agrave lrsquoergonomie

Guidage57

Cornelia Laros

Introduction agrave lrsquoergonomie

Charge de travail58

Cornelia Laros

Introduction agrave lrsquoergonomie

Controle explicite59

Cornelia Laros

Introduction agrave lrsquoergonomie

Controles explicites60

Cornelia Laros

Dar983595 983541983527t983545983589983590n

text

Adaptabiliteacute61

Cornelia Laros

text

Gestion des erreurs62

Cornelia Laros

text

Signifiance des codes et deacutenominations

63

Cornelia Laros

text

Homogeacuteneacuteiteacute - coheacuterence64

Cornelia Laros

text

Homogeacuteneacuteiteacute - Distinction65

Cornelia Laros

text

Compatibiliteacute66

Cornelia Laros

text

Compatibiliteacute67

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction68

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction69

Cornelia Laros

text

Gestalt Theorie70

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Gestalt Theorie71

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Dark patterns72

Cornelia Laros

Introduction agrave lrsquoergonomie

A vous de jouer

73

Cornelia Laros

Introduction agrave lrsquoergonomie

Outils de prototypages DIY74

Cornelia Laros

Low tech papier + crayons post-its cartes agrave jouer

Gratuit en ligne Invision app Moqups UXPin

Mac Sketch Balsamiq Mockups Axure

PC Axure Balsamiq

Mobile Prototyping on Paper

Ap983540983590en983530983555 983592983589 no983547983549983589983537le983543 983581h983586983543983589983588

Introduction agrave lrsquoergonomie

Test de perception DIY75

Cornelia Laros

La premiegravere impression qursquoun utilisateur se fait de votre IHM va influencer tous ses jugements ulteacuterieurs Crsquoest lrsquoeffet de halo

bull Un utilisateur qui a une premiegravere impression positive de votre appli passera plus facilement outre les bugs

bull Une premiegravere impression negative rendra lrsquoutilisateur plus critique vis agrave vis de deacutetails qui confirment son jugement

Cel983527 983538983580983590c983532e 983527983548983588si 983527983549983589983581 vo983543 983586983590983580ux 983591rsquoex983527983538983589983585s vo983543 983530983585t983542983589983546i983530n983543 983592rsquoem983528983527983548983581he 983530983545 983550983587s 983542e983585d983530983555-vo983547983543 983581l983535e983539983546s

Introduction agrave lrsquoergonomie

Test de perception DIY76

Cornelia Laros

Montrer votre prototype agrave quelqursquoun pendant 5 secondes

Demandez-lui

bull Ce qursquoil a vu

bull Ce qursquoil a compris de ce qursquoil a vu

bull Ce qui lrsquoa surpris ou marqueacute

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY77

Cornelia Laros

Les difficulteacutes de navigation se produisent souvent dans les niveaux les plus haut de votre structure de contenu Vous pouvez veacuterifier facilement si la classification logique pour vous lrsquoest aussi pour vos utilisateurs

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY78

Cornelia Laros

Lister trois (max) niveaux de profondeur de votre contenu structureacute Masquez ensuite les contenus de niveau plus bas Utilisez par exemple les groupements de lignes dans excel pour creacuteer des pliers-deacutepliers ou imprimer la liste sur une feuille que vous pliez pour masquer certaines parties

Demandez agrave un utilisateur de vous dire ougrave il penserait trouver un contenu bien preacutecis en preacutecisant qursquoil nrsquoy a pas de bonne reacuteponse

Notez srsquoil va chercher lagrave ougrave vous vous y attendiez ougrave il a heacutesiteacute et ce qursquoil a fini par choisir pour vous aider agrave rendre la navigation plus intuitive

Introduction agrave lrsquoergonomie

Test drsquoutilisabiliteacute DIY79

Cornelia Laros

A chaque nouvelle fonctionnaliteacute ajouteacutee demandez agrave quelqursquoun qui ne connait pas le projet de srsquoen servir Proposez lui une seule tacircche geacuteneacuterique agrave accomplir avec la fonctionnaliteacute

Exemple Tu veux prendre un rendez-vous avec un meacutedecin sur ce site montres-moi comment tu ferais en commentant agrave haute voix

Le plus important ici crsquoest de ne pas reacuteagir agrave ce qursquoil fait mais simplement le regarder faire sans lrsquoaider mecircme srsquoil est bloqueacute

Srsquoil 983540983586983588983589 de983543 983578983547983589s983545i983586983585s reacutepo983539983592983530z 983540983580983590 un983530 983577983548e983588t983534983587983539 o983547 d983535983545e983588 l983547983535 983577u983530 983550983587us 983536983547983535 983590eacutepo983539983592r983530983555 983578983548an983591 983534983537 983580ur983527 fi983539983535 983588rsquoil 983534983539983588983535s983545e Srsquoil 983530983543983546 v983542983580i983593983530n983545 983529l983587983577ueacute di983545983530983588 l983548i 983577983547983589 983550o983547s 983580983536983537ez 983542983530983550983587ir 983549983586983546r983589 983579o983541983534983589 et 983530983543983588983580ye983555 983592983530 c983587983538983541re983539983592r983530 983579983589 983578u983534 l983589 9835316ne

Introduction agrave lrsquoergonomie

Pas besoin de reacuteinventer la roue DIY

80

Cornelia Laros

Il existe des bonnes pratiques qui vous eacuteviteront de reacuteinventer la roue Utilisez des laquo design patterns raquo pour concevoir vos interfaces

Renseignez vous sur la Gestalt Theorie pour agencer vos pages

Utilisez les critegraveres de Bastien et Scapin pour trouver des deacutefauts eacutevidents avant de tester vous en tirerez des enseignements plus inteacuteressants

Ma983534s ccedila crsquoes983545 983541983586983548r u983539983530 983580u983546r983530 983559983587i983588

Introduction agrave lrsquoergonomie

Quizz time

81

Cornelia Laros

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

82

Cornelia Laros

1 c Fonctionnel

2 a Fiable

3 d Accessible

4 b Intuitif

5 e Plaisant

6 f Porteur de sens

text

F - Quel besoin ai-je oublieacute dans la question preacuteceacutedente

83

Cornelia Laros

Uti983536983534983588983580b983536e

Introduction agrave lrsquoergonomie

Tests DIY84

Cornelia Laros

Reacutedigez la proceacutedure pour tester un de vos projets drsquoIHM avec le test de votre choix perception arborescence ou utilisabiliteacute

Notez la question que vous vous posez et la question que vous allez poser

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

Introduction agrave lrsquoergonomie

Tacircche vs Activiteacute9

Cornelia Laros

Introduction agrave lrsquoergonomie

Tacircche vs Activiteacute10

Cornelia Laros

Deacuteterminants externes (caracteacuteristiques de la

situation)

Introduction agrave lrsquoergonomie

Scheacutema agrave 5 carreacutes11

Cornelia Laros

Deacuteterminants internes (caracteacuteristiques de

lrsquoutilisateur)

Activiteacute

Effets sur la personne (santeacute motivation compeacutetencehellip)

Effets sur lrsquoentreprise (production revenus stocks

usure du mateacuterielhellip)

Reacutet983542o-ac983545983534983587983585Reacutet983542o-ac983545983534983587983585

In983545e983590983527c983545983535o983585 h983586983538983593983589 ma983579983533983534n983589 983591e983550983534983589n983545 I983585te983542983527983581t983535o983539 H983586983593m983589 983629983554983588tegraveme

Introduction agrave lrsquoergonomie

Catachregravese

12

Cornelia Laros

Art de deacutetourner un objet de la tacircche pour laquelle il a eacuteteacute conccedilu

Introduction agrave lrsquoergonomie

Ergonomique ne veux rien dire

Pour comprendre revenons aux origineshellip

13

Cornelia Laros

Introduction agrave lrsquoergonomie

Les origines14

Cornelia Laros

1857 1949

1880

1908

1946

Premiegravere utilisation du terme laquo ergonomie raquo par Jastrzebowski Fordisme

Institutionnalisation de la meacutedecine du travail

Le terme laquo ergonomie raquo est employeacute par Murrel

Taylorisme

1987Toyota Production System

XVIIIe Deacuteveloppement de lrsquoapproche productiviste du travail

XVIIe

Premiers eacutecrits et classification des maladies professionnelles

Moyen acircgeEtude des conditions de travail et des facteurs environnementaux

Antiquiteacute

Racines de lrsquoapproche hygieacuteniste du travail

Introduction agrave lrsquoergonomie

Ameacuteliorer agrave la fois la productiviteacute et les

conditions de travailParce qursquoun employeacute motiveacute et en bonne santeacute est plus

productif et tout le monde y gagne

15

Cornelia Laros

Introduction agrave lrsquoergonomie

Inter-discplinariteacute16

Cornelia Laros

Ps983554983581ho983536983586983594983535e

In983531eacuteni983530983542983535e

Ne983547r983587983543983581i983530n983579983589983588

Ph983554983588i983586l983587983531i983530

Meacutede983579983534983585983589

Soc983534983587983536o983594983534983589

Ergonomie

Introduction agrave lrsquoergonomie

Domaines drsquointervention17

Cornelia Laros

Ps983554983581ho983536983586983594983535eIn983531eacuteni983530983542983535e

Ne983547r983587983543983581i983530n983579983589983588

Phi983543983534983587983537og983534983589Meacutede983579983534983585983589

Soc983534983587983536o983594983534983589Ergonomie

Ergonomie physique

Ergonomie organisationnelle

Ergonomie cognitive

Optimisation des situations et postes de travail dans leur

relation avec lrsquoactiviteacute physique

Optimisation des systegravemes socio-techniques structures

organisationnelles regravegles et processus

Optimisation du travail mental perception prise de deacutecision

reacutesolution de problegravemes

Introduction agrave lrsquoergonomie

Domaines drsquointervention18

Cornelia Laros

Organisationnelle 10

Physique 20

Cognitive 70

Introduction agrave lrsquoergonomie

Quizz time

19

Cornelia Laros

text

A - Lrsquoergonomie sert agravehellip20

Cornelia Laros

1 ameacuteliorer les conditions de travail

2 faire gagner plus drsquoargent agrave lrsquoentreprise

3 ameacuteliorer lrsquoestheacutetique

4 comprendre comment ameacuteliorer un produit

text

B - Quelles affirmations sont vraies

21

Cornelia Laros

1 Lrsquoergonomie srsquoattache agrave comprendre le travail pour le transformer

2 Il est possible de concevoir une IHM qui fonctionne pour tout le monde en se basant sur des normes

3 Lrsquoutilisateur va se servir de votre produit de la faccedilon dont vous lrsquoavez imagineacute

4 Lrsquoutilisateur interpregravete une tacircche comme un problegraveme qursquoil doit reacutesoudre en faisant avec ses caracteacuteristiques et les moyens mis agrave sa disposition

text

Pause cafeacute

10 minutes

22

Cornelia Laros

Introduction agrave lrsquoergonomie

Quelques meacutethodes drsquoergonomie

23

Cornelia Laros

Introduction agrave lrsquoergonomie

Ergonomie de conception

24

Cornelia Laros

Ergonomie de correctionbull Analyse drsquoactiviteacute

bull Audit

bull Analyse drsquoeacutevegravenements critiques

bull Analyse de traces

bull Simulation

bull Entretiens

bull Persona cartes drsquoexpeacuteriences

bull Tri par cartes

bull Prototypage

bull Benchmarkhellip

Lrsquoergonomie tout au long du projet

Introduction agrave lrsquoergonomie

Ergonomie de conception

25

Cornelia Laros

Ergonomie de correctionbull Analyse drsquoactiviteacute

bull Audit

bull Analyse drsquoeacutevegravenements critiques

bull Analyse de traces

bull Simulationhellip

bullEntretiens

bullPersona cartes drsquoexpeacuteriences

bullTri par cartes

bullPrototypage

bullBenchmarkhellip

Des meacutethodes de recueil de donneacutees avec utilisateurs finaux et de conception laquo experte raquo

Introduction agrave lrsquoergonomie

Pourquoi ces meacutethodes26

Cornelia Laros

bull Si jrsquoavais demandeacute aux utilisateurs ce qursquoils voulaient ils mrsquoauraient demandeacute un cheval plus rapide - Henri Ford

bull Un comportement laquo sur-appris raquo devient un automatisme inconscient que lrsquoutilisateur ne saura pas expliquer (ex passer les vitesses en conduisant)

bull Le cerveau humain est propice agrave la fabulation (imagination de causes) aux faux souvenirs (en toute bonne fois) les biais (deacutesirabiliteacute effet pygmalion influence socialehellip)

Observer

Introduction agrave lrsquoergonomie

Pourquoi ces meacutethodes27

Cornelia Laros

bull Une imagine est plus parlante que 10 000 mots

bull Permet drsquoeacutevaluer une ideacutee agrave moindre coucirct donc de se tromper souvent et drsquoapprendre plus vite pour valider une ideacutee ou lrsquoameacuteliorer

bull Permet de tester plein drsquoideacutees et de retenir la meilleure

hellip A condition de se focaliser sur un objectif et non sur lrsquoideacutee elle-mecircme

Modeacuteliser

Introduction agrave lrsquoergonomie

Lrsquoensemble permet drsquoeacuteviter ceci

28

Cornelia Laros

Introduction agrave lrsquoergonomie

Lrsquoensemble permet drsquoeacuteviter ceci

29

Cornelia Laros

Eli983538983534983585eacute en 983586983528983588983589r983549a983585t

Eli983538983534983585eacute en 983540983590983586t983587983545983584pa983539983546

Introduction agrave lrsquoergonomie

Prototyper pour vous crsquoesthellip30

Cornelia Laros

CONTRIBUTION AUX SPECIFICATIONS FONCTIONNELLES

Zoning basse fideacuteliteacute wireframe statique (sketch ou non) bull Rapide et peu couteux bull Illustratif statique pas drsquointeraction bull Non engageant sur le design bull Tregraves peu explicite sur le plan fonctionnel

Story-board cliquable bull Illustre la navigation bull Permet de se projeter dans lrsquointeraction bull Pose les bases du design et du fonctionnel

Prototype semi-dynamique bull Se veut complet (ou quasi) sur le plan de la

navigation de lrsquointeraction et des cas drsquoutilisation bull Doit permettre de simuler fidegravelement le

fonctionnement drsquoune application bull Est une speacutecification fonctionnelle en soi

Pha983543983530 983592983589 ca983591983590983527g983589 AM983623983607

Pha983543983530 983592983589 co983539983581983530p983545983535o983585 f983586983539983581t983535o983539983585983530l983536983589

Tes983545983588 983547t983535983536i983588983527t983589u983542983588 ap983540983537983534s 983538983587983529il983530983543hellip

Introduction agrave lrsquoergonomie

Prototype basse definition31

Cornelia Laros

Introduction agrave lrsquoergonomie

Prototyper cliquable32

Cornelia Laros

Introduction agrave lrsquoergonomie

Prototyper semi-dynamique33

Cornelia Laros

Page Title

1230

Mobile interactions

Observably Sc i$amp

About

Project overiew

Manage sessions

Manage variables

Settings

Start observing

1230 1230

OverviewObserve

Observe mobile interactions in the field to assess dominant hand for holding and interacting with smartphones

10042016Mobile interactionsMobile interactions

Welcome to Observably Gather and manage observation dataGather and manage observation data

My projects

1230

Tags separate with comas

Variable value

Create

Add observablesAdd all observables you want to track for this project You can come back and edit them laterAdd all observables you want to track for this project You can come back and edit them later

Thanks for the hint

Manage variablesMobile InteractionsMobile Interactions

1230

Tags separate with comas

Variable value

Create

Left hand Right thumbLRTLRT

Manage variablesMobile InteractionsMobile Interactions

Irsquom done Start recording

Save changesCancel

Observable Tags separate with coma

Tags separate with comas

3 20

LRILRI

Observable label

Did you knowTap on the icon to customize it Use icons from our library or from your gallery to make variables pop out when observing

Tap on the icon to customize it Use icons from our library or from your gallery to make variables pop out when observing

Thanks for the hint

Left hand Right thumbLRTLRT

Irsquom done Start recording

Manage variablesMobile InteractionsMobile Interactions

Left hand x Right thumb x

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Did you knowIf you make a mistake you can undo your action by tapping on the icon of the taskIf you make a mistake you can undo your action by tapping on the icon of the task

Thanks for the hint

Session 1

Discrete mode New Session

Mobile InteractionsMobile Interactions

1230

Record vocal comment

LRILRILRILRILRILRI

Did you knowYou can record occurences durations and comments by chosing the record format in the drop-down above

You can record occurences durations and comments by chosing the record format in the drop-down above

Thanks for the hint

Discrete mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

Left hand Right thumbLRT

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Did you knowIn list view you can slipe left and right to increment or correct your countIn list view you can slipe left and right to increment or correct your count

Thanks for the hint

Continuous mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

LRILRILRILRILRI

Did you knowIf you make a mistake you can undo your action by tapping on the icon of the taskIf you make a mistake you can undo your action by tapping on the icon of the task

Thanks for the hint

Continuous mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

Tags separate with comas

Comment

Add

Did you know The timestamp of vocal comments is the start time to accurately mark events that triggered your comment

The timestamp of vocal comments is the start time to accurately mark events that triggered your comment

Thanks for the hint

Manage observables

Comments mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Stop recording vocal comment

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Your observationsManage and cleanup sessions before exporting dataManage and cleanup sessions before exporting data

Session ManagementMobile InteractionsMobile Interactions

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

LRT

LRI

RLI

RLT

RRT20

20

8

35

15

Count SummaryCount Summary

RLT

RRT20

815

Time SummaryTime Summary

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

Left hand Right thumbLRTLRT

+1+1

10042016 124627

Left hand Right thumbLRTLRT

2rsquorsquo2rsquorsquo

10042016 124627 - 10042016 124629

Content of my comment boxTag1 Tag2

10042016 124644

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

LRTLRT+1+1

10042016 124627

Save changes

Observable Tags separate with coma

Tags separate with comas

Left hand x Right thumb x

AboutAbout

1230

Observable science provides tools for field research and scientific observation It is tailored to the needs of ethnography human factors psychology usability and games user research

Observable science provides tools for field research and scientific observation It is tailored to the needs of ethnography human factors psychology usability and games user research

Observablyscience

Development by Morgane RadelDesign by Cornelia LarosDevelopment by Morgane RadelDesign by Cornelia Laros

Credits

Support (us)Show your love Rate the App

Make a donation

Contact us

Visit our website

Add session tags to all observations

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

Save changes

Session Tags separate with coma

Tags separate with comas

Metro x Toulouse x

Manage variablesMobile InteractionsMobile Interactions

1230

Left hand Right thumbLRTLRT

Confirm

Search icons

Cancel

Browse

3 20

Observably Sci$amp

1230

Project statisticsProject statistics Total countsTotal time Total comments First entryLast entrySessions

4 963281231

1441201201603042016

97

Project detailsMobile InteractionsMobile Interactions

Sessions SummarySessions Summary

RRT20

815

Count SummaryCount Summary

JUN 14MAY 14APR 14MAR 14FEB 14JAN 14

4

1

65

7

0

2

4

6

8

10

3

2014

Manage sessions

Settings ExportOverview

1230

App optionsDisplay hintsDisplay hints

SettingsSettings

Share anonymous data to improve the appShare anonymous data to improve the app

1230

Gather and manage observation data with ObservablyGather and manage observation data with Observably

Welcome to Observably

Project name

Project description what is the goal of your project

CreateCancel

Session[number]Session[number]

Default Session ID

Default export format txt

Data options

Default Discrete variable lines view

Create a new project

1230

Project detailsMobile InteractionsMobile Interactions

Mobile InteractionsMobile Interactions

Project description what is the goal of your project

SaveCancel

Session[number]Session[number]

Default Session ID

Default export format txt

Data options

Default continuous variables grid view

Project name

Manage sessions

Settings ExportOverview

1230

Project detailsMobile InteractionsMobile Interactions

Manage sessions

Settings ExportOverview

Export format txt

Export data

Data has been successfully exported as MobileInteractionstxt

to your download folder

Observably Sc i$amp

Settings

1230

BUTTONBUTTON

Permissions

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Up exlaborum incididunt quis nostrud exercitatn

COMPONENTS

Pickers

OKCANCEL

13

Friday

MAR

2014

MS W T F ST

30 31

1

16 17 19 20 21 2218

23 24 26 27 28 2925

139 10 12 14 1511

72 3 5 6 84

March 2014

OKCANCEL

PMAM

112

9

10

11

2

48

576

3

330 AM

Notifications

Incoming call

Rachel Ligson

IGNORE ANSWER

REPLYARCHIVE

Hey letrsquos catch up soon Do you want to grab lunch sometime this weekendLet me know when yoursquore free

409 PMHannah ChoHannah Cho

Do you know what I mean509 PMTina McBeanTina McBean

Heads up notification

Regular + Expanded notification

Index scroller

All

Patrick Keenan

Mary Johnson

Tina Santiago

Trevor Hansen

Amar Sagoo

Abbey Christensen

Ali Connors

Alex Nelson

Anthony Stevens

A

A

1230

Abcdefg

Abcdefghijklmno

Tabs

THE THIRDITEM TWONO ONE

THE THIRDITEM TWONO ONE

1230

THE THIRDITEM TWONO ONE

Page Title

1230

121 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

110 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

51 50

Input text for a single line field with a maximu

Single-Line Input Label

31 50

Input text for a single line field with a max

Single-Line Input Label

121 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

110 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

51 50

Input text for a single line field with a maximuInput text for a single line field with a maximu

Single-Line Input Label

31 50

Input text for a single line field with a maxInput text for a single line field with a max

Single-Line Input Label

Disabled text field

Input text

Username or Password is incorrect

Input text

Input tex

Hint text

Hint text

Hint text

Disabled text field

Input textInput text

Username or Password is incorrect

Input textInput text

Input texInput tex

Hint text

Hint text

Hint text

Text fields

Switches and sliders

60

Regular

Pressed

Disabled

60

Regular

Pressed

Disabled

Buttons

DISABLED

PRESSED

NORMAL

DISABLED

PRESSED

NORMAL

Flat Raised

DISABLED

PRESSED

NORMAL

DISABLED

PRESSED

NORMAL

Flat Raised

Toasts

This color applies to both light and dark theme

This item already has the label ldquotravelrdquo You can add a new label

ACTIONSingle-Line Snackbar

Menu

Arial 100

100

Calibri

Courier

Verdana

Arial

Chips

Trevor Hansen

email3emailcom

email2emailcom

primaryemailemailcomContact Name

Dialogs

Desktop

Without title With title

BUTTONBUTTON

PermissionsLorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Up exlaborum incididunt quis nostrud exercitatn

BUTTONBUTTON

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Ut enim ad minim ikad veniam quis nostrud exercitatn ullamco laboris nisi ut aliquip exlaborum incididunt

ACCEPTDECLINEMORE INFO

Permissions

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisinuli

Toolbar

11Roboto

Cards

Welcome BackItrsquos been a while have you read any new books latelyItrsquos been a while have you read any new books lately

YESNOPE

Kangaroo Valley Safari

Located two hours south of Sydney in the

Southern Highlands of New South Wales

LEARN MORESHARE

REVIEWFREE SAMPLE

By Alex Nelson

El Pooch

Pre-fab Homes

Favorite Road Trips

Best Airlines

Campbell

Groceries

almond milk

coconut water

cucumber

green apples

Yuna tickets on sale 624

May 24 2014

Clean desk

Keyboards

suggestion suggestion suggestion

123

a s d f g h j k l

z x c v b n m

q w e r t y u i o p1 2 3 4 5 6 7 8 9 0

suggestion suggestion suggestion

123

a s d f g h j k l

z x c v b n m

q w e r t y u i o p1 2 3 4 5 6 7 8 9 0

Bottom Sheet

Print this page

Copy

Upload

Share

MoreMail Message

Google+Gmail Hangout

Grid

Two lineSupport text

Two lineSupport text

Single line

Single line

Lists

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Three-line itemThree-line item

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Three-line itemThree-line item

Three-line itemThree-line item

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Three-line itemThree-line item

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Three-line itemThree-line item

Three-line itemThree-line item

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Line item unselectedLine item unselected

Line item selectedLine item selected

Line item selectedLine item selected

Data usageData usage

BluetoothBluetooth

Wi-FiWi-Fi

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Single-line itemSingle-line item

Single-line itemSingle-line item

Single-line itemSingle-line itemSingle-line itemSingle-line item

Single-line itemSingle-line item

Single-line itemSingle-line item

Introduction agrave lrsquoergonomie

Ergonomie et Design34

Cornelia Laros

Design Ergonomie Design Ergonomie

Identiteacute

Communication

Ambiance

Exemple un site institutionnel informatif avec une navigation simple et des exigences fortes

drsquoidentiteacuteExemple une application meacutetier destineacutee agrave une

population drsquoutilisateur connue

EfficaciteacuteFonctionnel

Outils

Service en ligne

Architecture de lrsquoinformation contenus bonnes pratiques

Analyse tache vs activiteacute prise en compte globaliseacutee des process

postes de travail eacutecosystegraveme existant hellip puis la conception

Image Usage freacutequent

Usage ponctuel

Votre eacutequipe Ergonome Directeur aristique Webdesigner UX Designer

Introduction agrave lrsquoergonomie

Design avant-tout35

Cornelia Laros

Introduction agrave lrsquoergonomie

Equilibreacute36

Cornelia Laros

Introduction agrave lrsquoergonomie

Ergonomie avant tout37

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

38

Cornelia Laros

text

Lrsquoergonomie sert agravehellip39

Cornelia Laros

1 ameacuteliorer les conditions de travail

2 faire gagner plus drsquoargent agrave lrsquoentreprise

3 ameacuteliorer lrsquoestheacutetique

4 comprendre comment ameacuteliorer un produit

text

Quelles affirmations sont vraies

40

Cornelia Laros

1 Lrsquoergonomie srsquoattache agrave comprendre le travail pour le transformer

2 Il est possible de concevoir une IHM qui fonctionne pour tout le monde en se basant sur des normes

3 Lrsquoutilisateur va se servir de votre produit de la faccedilon dont vous lrsquoavez imagineacute

4 Lrsquoutilisateur interpregravete une tacircche comme un problegraveme qursquoil doit reacutesoudre en faisant avec ses caracteacuteristiques et les moyens mis agrave sa disposition

text

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

41

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

text

D - A quoi sert un prototype

42

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

43

Cornelia Laros

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

44

Cornelia Laros

Utilisabiliteacute

Utiliteacute

Efficaciteacute Efficience

Satisfaction

Introduction agrave lrsquoergonomie

Pyramide des besoins MASLOW

45

Cornelia Laros

Introduction agrave lrsquoergonomie

Pyramide des besoins IHM46

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

47

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

48

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

49

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

50

Cornelia Laros

Introduction agrave lrsquoergonomie

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

51

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

Introduction agrave lrsquoergonomie

D - A quoi sert un prototype

52

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

53

Cornelia Laros

a Fiable

b Intuitif

c Fonctionnel

d Accessible

e Plaisant

f Porteur de sens

Introduction agrave lrsquoergonomie

F - Quel besoin ai-je oublieacute dans la question

preacuteceacutedente

54

Cornelia Laros

text

Patterns amp Dark patterns

55

Cornelia Laros

text

Criteres de Bastien et Scapin56

Cornelia Laros

Guidage

Charge de travail

Controcircle utilisateur explicite

Flexibiliteacute ( adaptabiliteacute)

Gestion des erreurs

Homogeacuteneacuteiteacute ( coheacuterence)

Signifiance des Codes et Deacutenominations

Compatibiliteacute ( familiariteacute)

Introduction agrave lrsquoergonomie

Guidage57

Cornelia Laros

Introduction agrave lrsquoergonomie

Charge de travail58

Cornelia Laros

Introduction agrave lrsquoergonomie

Controle explicite59

Cornelia Laros

Introduction agrave lrsquoergonomie

Controles explicites60

Cornelia Laros

Dar983595 983541983527t983545983589983590n

text

Adaptabiliteacute61

Cornelia Laros

text

Gestion des erreurs62

Cornelia Laros

text

Signifiance des codes et deacutenominations

63

Cornelia Laros

text

Homogeacuteneacuteiteacute - coheacuterence64

Cornelia Laros

text

Homogeacuteneacuteiteacute - Distinction65

Cornelia Laros

text

Compatibiliteacute66

Cornelia Laros

text

Compatibiliteacute67

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction68

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction69

Cornelia Laros

text

Gestalt Theorie70

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Gestalt Theorie71

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Dark patterns72

Cornelia Laros

Introduction agrave lrsquoergonomie

A vous de jouer

73

Cornelia Laros

Introduction agrave lrsquoergonomie

Outils de prototypages DIY74

Cornelia Laros

Low tech papier + crayons post-its cartes agrave jouer

Gratuit en ligne Invision app Moqups UXPin

Mac Sketch Balsamiq Mockups Axure

PC Axure Balsamiq

Mobile Prototyping on Paper

Ap983540983590en983530983555 983592983589 no983547983549983589983537le983543 983581h983586983543983589983588

Introduction agrave lrsquoergonomie

Test de perception DIY75

Cornelia Laros

La premiegravere impression qursquoun utilisateur se fait de votre IHM va influencer tous ses jugements ulteacuterieurs Crsquoest lrsquoeffet de halo

bull Un utilisateur qui a une premiegravere impression positive de votre appli passera plus facilement outre les bugs

bull Une premiegravere impression negative rendra lrsquoutilisateur plus critique vis agrave vis de deacutetails qui confirment son jugement

Cel983527 983538983580983590c983532e 983527983548983588si 983527983549983589983581 vo983543 983586983590983580ux 983591rsquoex983527983538983589983585s vo983543 983530983585t983542983589983546i983530n983543 983592rsquoem983528983527983548983581he 983530983545 983550983587s 983542e983585d983530983555-vo983547983543 983581l983535e983539983546s

Introduction agrave lrsquoergonomie

Test de perception DIY76

Cornelia Laros

Montrer votre prototype agrave quelqursquoun pendant 5 secondes

Demandez-lui

bull Ce qursquoil a vu

bull Ce qursquoil a compris de ce qursquoil a vu

bull Ce qui lrsquoa surpris ou marqueacute

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY77

Cornelia Laros

Les difficulteacutes de navigation se produisent souvent dans les niveaux les plus haut de votre structure de contenu Vous pouvez veacuterifier facilement si la classification logique pour vous lrsquoest aussi pour vos utilisateurs

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY78

Cornelia Laros

Lister trois (max) niveaux de profondeur de votre contenu structureacute Masquez ensuite les contenus de niveau plus bas Utilisez par exemple les groupements de lignes dans excel pour creacuteer des pliers-deacutepliers ou imprimer la liste sur une feuille que vous pliez pour masquer certaines parties

Demandez agrave un utilisateur de vous dire ougrave il penserait trouver un contenu bien preacutecis en preacutecisant qursquoil nrsquoy a pas de bonne reacuteponse

Notez srsquoil va chercher lagrave ougrave vous vous y attendiez ougrave il a heacutesiteacute et ce qursquoil a fini par choisir pour vous aider agrave rendre la navigation plus intuitive

Introduction agrave lrsquoergonomie

Test drsquoutilisabiliteacute DIY79

Cornelia Laros

A chaque nouvelle fonctionnaliteacute ajouteacutee demandez agrave quelqursquoun qui ne connait pas le projet de srsquoen servir Proposez lui une seule tacircche geacuteneacuterique agrave accomplir avec la fonctionnaliteacute

Exemple Tu veux prendre un rendez-vous avec un meacutedecin sur ce site montres-moi comment tu ferais en commentant agrave haute voix

Le plus important ici crsquoest de ne pas reacuteagir agrave ce qursquoil fait mais simplement le regarder faire sans lrsquoaider mecircme srsquoil est bloqueacute

Srsquoil 983540983586983588983589 de983543 983578983547983589s983545i983586983585s reacutepo983539983592983530z 983540983580983590 un983530 983577983548e983588t983534983587983539 o983547 d983535983545e983588 l983547983535 983577u983530 983550983587us 983536983547983535 983590eacutepo983539983592r983530983555 983578983548an983591 983534983537 983580ur983527 fi983539983535 983588rsquoil 983534983539983588983535s983545e Srsquoil 983530983543983546 v983542983580i983593983530n983545 983529l983587983577ueacute di983545983530983588 l983548i 983577983547983589 983550o983547s 983580983536983537ez 983542983530983550983587ir 983549983586983546r983589 983579o983541983534983589 et 983530983543983588983580ye983555 983592983530 c983587983538983541re983539983592r983530 983579983589 983578u983534 l983589 9835316ne

Introduction agrave lrsquoergonomie

Pas besoin de reacuteinventer la roue DIY

80

Cornelia Laros

Il existe des bonnes pratiques qui vous eacuteviteront de reacuteinventer la roue Utilisez des laquo design patterns raquo pour concevoir vos interfaces

Renseignez vous sur la Gestalt Theorie pour agencer vos pages

Utilisez les critegraveres de Bastien et Scapin pour trouver des deacutefauts eacutevidents avant de tester vous en tirerez des enseignements plus inteacuteressants

Ma983534s ccedila crsquoes983545 983541983586983548r u983539983530 983580u983546r983530 983559983587i983588

Introduction agrave lrsquoergonomie

Quizz time

81

Cornelia Laros

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

82

Cornelia Laros

1 c Fonctionnel

2 a Fiable

3 d Accessible

4 b Intuitif

5 e Plaisant

6 f Porteur de sens

text

F - Quel besoin ai-je oublieacute dans la question preacuteceacutedente

83

Cornelia Laros

Uti983536983534983588983580b983536e

Introduction agrave lrsquoergonomie

Tests DIY84

Cornelia Laros

Reacutedigez la proceacutedure pour tester un de vos projets drsquoIHM avec le test de votre choix perception arborescence ou utilisabiliteacute

Notez la question que vous vous posez et la question que vous allez poser

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

Introduction agrave lrsquoergonomie

Tacircche vs Activiteacute10

Cornelia Laros

Deacuteterminants externes (caracteacuteristiques de la

situation)

Introduction agrave lrsquoergonomie

Scheacutema agrave 5 carreacutes11

Cornelia Laros

Deacuteterminants internes (caracteacuteristiques de

lrsquoutilisateur)

Activiteacute

Effets sur la personne (santeacute motivation compeacutetencehellip)

Effets sur lrsquoentreprise (production revenus stocks

usure du mateacuterielhellip)

Reacutet983542o-ac983545983534983587983585Reacutet983542o-ac983545983534983587983585

In983545e983590983527c983545983535o983585 h983586983538983593983589 ma983579983533983534n983589 983591e983550983534983589n983545 I983585te983542983527983581t983535o983539 H983586983593m983589 983629983554983588tegraveme

Introduction agrave lrsquoergonomie

Catachregravese

12

Cornelia Laros

Art de deacutetourner un objet de la tacircche pour laquelle il a eacuteteacute conccedilu

Introduction agrave lrsquoergonomie

Ergonomique ne veux rien dire

Pour comprendre revenons aux origineshellip

13

Cornelia Laros

Introduction agrave lrsquoergonomie

Les origines14

Cornelia Laros

1857 1949

1880

1908

1946

Premiegravere utilisation du terme laquo ergonomie raquo par Jastrzebowski Fordisme

Institutionnalisation de la meacutedecine du travail

Le terme laquo ergonomie raquo est employeacute par Murrel

Taylorisme

1987Toyota Production System

XVIIIe Deacuteveloppement de lrsquoapproche productiviste du travail

XVIIe

Premiers eacutecrits et classification des maladies professionnelles

Moyen acircgeEtude des conditions de travail et des facteurs environnementaux

Antiquiteacute

Racines de lrsquoapproche hygieacuteniste du travail

Introduction agrave lrsquoergonomie

Ameacuteliorer agrave la fois la productiviteacute et les

conditions de travailParce qursquoun employeacute motiveacute et en bonne santeacute est plus

productif et tout le monde y gagne

15

Cornelia Laros

Introduction agrave lrsquoergonomie

Inter-discplinariteacute16

Cornelia Laros

Ps983554983581ho983536983586983594983535e

In983531eacuteni983530983542983535e

Ne983547r983587983543983581i983530n983579983589983588

Ph983554983588i983586l983587983531i983530

Meacutede983579983534983585983589

Soc983534983587983536o983594983534983589

Ergonomie

Introduction agrave lrsquoergonomie

Domaines drsquointervention17

Cornelia Laros

Ps983554983581ho983536983586983594983535eIn983531eacuteni983530983542983535e

Ne983547r983587983543983581i983530n983579983589983588

Phi983543983534983587983537og983534983589Meacutede983579983534983585983589

Soc983534983587983536o983594983534983589Ergonomie

Ergonomie physique

Ergonomie organisationnelle

Ergonomie cognitive

Optimisation des situations et postes de travail dans leur

relation avec lrsquoactiviteacute physique

Optimisation des systegravemes socio-techniques structures

organisationnelles regravegles et processus

Optimisation du travail mental perception prise de deacutecision

reacutesolution de problegravemes

Introduction agrave lrsquoergonomie

Domaines drsquointervention18

Cornelia Laros

Organisationnelle 10

Physique 20

Cognitive 70

Introduction agrave lrsquoergonomie

Quizz time

19

Cornelia Laros

text

A - Lrsquoergonomie sert agravehellip20

Cornelia Laros

1 ameacuteliorer les conditions de travail

2 faire gagner plus drsquoargent agrave lrsquoentreprise

3 ameacuteliorer lrsquoestheacutetique

4 comprendre comment ameacuteliorer un produit

text

B - Quelles affirmations sont vraies

21

Cornelia Laros

1 Lrsquoergonomie srsquoattache agrave comprendre le travail pour le transformer

2 Il est possible de concevoir une IHM qui fonctionne pour tout le monde en se basant sur des normes

3 Lrsquoutilisateur va se servir de votre produit de la faccedilon dont vous lrsquoavez imagineacute

4 Lrsquoutilisateur interpregravete une tacircche comme un problegraveme qursquoil doit reacutesoudre en faisant avec ses caracteacuteristiques et les moyens mis agrave sa disposition

text

Pause cafeacute

10 minutes

22

Cornelia Laros

Introduction agrave lrsquoergonomie

Quelques meacutethodes drsquoergonomie

23

Cornelia Laros

Introduction agrave lrsquoergonomie

Ergonomie de conception

24

Cornelia Laros

Ergonomie de correctionbull Analyse drsquoactiviteacute

bull Audit

bull Analyse drsquoeacutevegravenements critiques

bull Analyse de traces

bull Simulation

bull Entretiens

bull Persona cartes drsquoexpeacuteriences

bull Tri par cartes

bull Prototypage

bull Benchmarkhellip

Lrsquoergonomie tout au long du projet

Introduction agrave lrsquoergonomie

Ergonomie de conception

25

Cornelia Laros

Ergonomie de correctionbull Analyse drsquoactiviteacute

bull Audit

bull Analyse drsquoeacutevegravenements critiques

bull Analyse de traces

bull Simulationhellip

bullEntretiens

bullPersona cartes drsquoexpeacuteriences

bullTri par cartes

bullPrototypage

bullBenchmarkhellip

Des meacutethodes de recueil de donneacutees avec utilisateurs finaux et de conception laquo experte raquo

Introduction agrave lrsquoergonomie

Pourquoi ces meacutethodes26

Cornelia Laros

bull Si jrsquoavais demandeacute aux utilisateurs ce qursquoils voulaient ils mrsquoauraient demandeacute un cheval plus rapide - Henri Ford

bull Un comportement laquo sur-appris raquo devient un automatisme inconscient que lrsquoutilisateur ne saura pas expliquer (ex passer les vitesses en conduisant)

bull Le cerveau humain est propice agrave la fabulation (imagination de causes) aux faux souvenirs (en toute bonne fois) les biais (deacutesirabiliteacute effet pygmalion influence socialehellip)

Observer

Introduction agrave lrsquoergonomie

Pourquoi ces meacutethodes27

Cornelia Laros

bull Une imagine est plus parlante que 10 000 mots

bull Permet drsquoeacutevaluer une ideacutee agrave moindre coucirct donc de se tromper souvent et drsquoapprendre plus vite pour valider une ideacutee ou lrsquoameacuteliorer

bull Permet de tester plein drsquoideacutees et de retenir la meilleure

hellip A condition de se focaliser sur un objectif et non sur lrsquoideacutee elle-mecircme

Modeacuteliser

Introduction agrave lrsquoergonomie

Lrsquoensemble permet drsquoeacuteviter ceci

28

Cornelia Laros

Introduction agrave lrsquoergonomie

Lrsquoensemble permet drsquoeacuteviter ceci

29

Cornelia Laros

Eli983538983534983585eacute en 983586983528983588983589r983549a983585t

Eli983538983534983585eacute en 983540983590983586t983587983545983584pa983539983546

Introduction agrave lrsquoergonomie

Prototyper pour vous crsquoesthellip30

Cornelia Laros

CONTRIBUTION AUX SPECIFICATIONS FONCTIONNELLES

Zoning basse fideacuteliteacute wireframe statique (sketch ou non) bull Rapide et peu couteux bull Illustratif statique pas drsquointeraction bull Non engageant sur le design bull Tregraves peu explicite sur le plan fonctionnel

Story-board cliquable bull Illustre la navigation bull Permet de se projeter dans lrsquointeraction bull Pose les bases du design et du fonctionnel

Prototype semi-dynamique bull Se veut complet (ou quasi) sur le plan de la

navigation de lrsquointeraction et des cas drsquoutilisation bull Doit permettre de simuler fidegravelement le

fonctionnement drsquoune application bull Est une speacutecification fonctionnelle en soi

Pha983543983530 983592983589 ca983591983590983527g983589 AM983623983607

Pha983543983530 983592983589 co983539983581983530p983545983535o983585 f983586983539983581t983535o983539983585983530l983536983589

Tes983545983588 983547t983535983536i983588983527t983589u983542983588 ap983540983537983534s 983538983587983529il983530983543hellip

Introduction agrave lrsquoergonomie

Prototype basse definition31

Cornelia Laros

Introduction agrave lrsquoergonomie

Prototyper cliquable32

Cornelia Laros

Introduction agrave lrsquoergonomie

Prototyper semi-dynamique33

Cornelia Laros

Page Title

1230

Mobile interactions

Observably Sc i$amp

About

Project overiew

Manage sessions

Manage variables

Settings

Start observing

1230 1230

OverviewObserve

Observe mobile interactions in the field to assess dominant hand for holding and interacting with smartphones

10042016Mobile interactionsMobile interactions

Welcome to Observably Gather and manage observation dataGather and manage observation data

My projects

1230

Tags separate with comas

Variable value

Create

Add observablesAdd all observables you want to track for this project You can come back and edit them laterAdd all observables you want to track for this project You can come back and edit them later

Thanks for the hint

Manage variablesMobile InteractionsMobile Interactions

1230

Tags separate with comas

Variable value

Create

Left hand Right thumbLRTLRT

Manage variablesMobile InteractionsMobile Interactions

Irsquom done Start recording

Save changesCancel

Observable Tags separate with coma

Tags separate with comas

3 20

LRILRI

Observable label

Did you knowTap on the icon to customize it Use icons from our library or from your gallery to make variables pop out when observing

Tap on the icon to customize it Use icons from our library or from your gallery to make variables pop out when observing

Thanks for the hint

Left hand Right thumbLRTLRT

Irsquom done Start recording

Manage variablesMobile InteractionsMobile Interactions

Left hand x Right thumb x

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Did you knowIf you make a mistake you can undo your action by tapping on the icon of the taskIf you make a mistake you can undo your action by tapping on the icon of the task

Thanks for the hint

Session 1

Discrete mode New Session

Mobile InteractionsMobile Interactions

1230

Record vocal comment

LRILRILRILRILRILRI

Did you knowYou can record occurences durations and comments by chosing the record format in the drop-down above

You can record occurences durations and comments by chosing the record format in the drop-down above

Thanks for the hint

Discrete mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

Left hand Right thumbLRT

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Did you knowIn list view you can slipe left and right to increment or correct your countIn list view you can slipe left and right to increment or correct your count

Thanks for the hint

Continuous mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

LRILRILRILRILRI

Did you knowIf you make a mistake you can undo your action by tapping on the icon of the taskIf you make a mistake you can undo your action by tapping on the icon of the task

Thanks for the hint

Continuous mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

Tags separate with comas

Comment

Add

Did you know The timestamp of vocal comments is the start time to accurately mark events that triggered your comment

The timestamp of vocal comments is the start time to accurately mark events that triggered your comment

Thanks for the hint

Manage observables

Comments mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Stop recording vocal comment

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Your observationsManage and cleanup sessions before exporting dataManage and cleanup sessions before exporting data

Session ManagementMobile InteractionsMobile Interactions

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

LRT

LRI

RLI

RLT

RRT20

20

8

35

15

Count SummaryCount Summary

RLT

RRT20

815

Time SummaryTime Summary

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

Left hand Right thumbLRTLRT

+1+1

10042016 124627

Left hand Right thumbLRTLRT

2rsquorsquo2rsquorsquo

10042016 124627 - 10042016 124629

Content of my comment boxTag1 Tag2

10042016 124644

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

LRTLRT+1+1

10042016 124627

Save changes

Observable Tags separate with coma

Tags separate with comas

Left hand x Right thumb x

AboutAbout

1230

Observable science provides tools for field research and scientific observation It is tailored to the needs of ethnography human factors psychology usability and games user research

Observable science provides tools for field research and scientific observation It is tailored to the needs of ethnography human factors psychology usability and games user research

Observablyscience

Development by Morgane RadelDesign by Cornelia LarosDevelopment by Morgane RadelDesign by Cornelia Laros

Credits

Support (us)Show your love Rate the App

Make a donation

Contact us

Visit our website

Add session tags to all observations

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

Save changes

Session Tags separate with coma

Tags separate with comas

Metro x Toulouse x

Manage variablesMobile InteractionsMobile Interactions

1230

Left hand Right thumbLRTLRT

Confirm

Search icons

Cancel

Browse

3 20

Observably Sci$amp

1230

Project statisticsProject statistics Total countsTotal time Total comments First entryLast entrySessions

4 963281231

1441201201603042016

97

Project detailsMobile InteractionsMobile Interactions

Sessions SummarySessions Summary

RRT20

815

Count SummaryCount Summary

JUN 14MAY 14APR 14MAR 14FEB 14JAN 14

4

1

65

7

0

2

4

6

8

10

3

2014

Manage sessions

Settings ExportOverview

1230

App optionsDisplay hintsDisplay hints

SettingsSettings

Share anonymous data to improve the appShare anonymous data to improve the app

1230

Gather and manage observation data with ObservablyGather and manage observation data with Observably

Welcome to Observably

Project name

Project description what is the goal of your project

CreateCancel

Session[number]Session[number]

Default Session ID

Default export format txt

Data options

Default Discrete variable lines view

Create a new project

1230

Project detailsMobile InteractionsMobile Interactions

Mobile InteractionsMobile Interactions

Project description what is the goal of your project

SaveCancel

Session[number]Session[number]

Default Session ID

Default export format txt

Data options

Default continuous variables grid view

Project name

Manage sessions

Settings ExportOverview

1230

Project detailsMobile InteractionsMobile Interactions

Manage sessions

Settings ExportOverview

Export format txt

Export data

Data has been successfully exported as MobileInteractionstxt

to your download folder

Observably Sc i$amp

Settings

1230

BUTTONBUTTON

Permissions

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Up exlaborum incididunt quis nostrud exercitatn

COMPONENTS

Pickers

OKCANCEL

13

Friday

MAR

2014

MS W T F ST

30 31

1

16 17 19 20 21 2218

23 24 26 27 28 2925

139 10 12 14 1511

72 3 5 6 84

March 2014

OKCANCEL

PMAM

112

9

10

11

2

48

576

3

330 AM

Notifications

Incoming call

Rachel Ligson

IGNORE ANSWER

REPLYARCHIVE

Hey letrsquos catch up soon Do you want to grab lunch sometime this weekendLet me know when yoursquore free

409 PMHannah ChoHannah Cho

Do you know what I mean509 PMTina McBeanTina McBean

Heads up notification

Regular + Expanded notification

Index scroller

All

Patrick Keenan

Mary Johnson

Tina Santiago

Trevor Hansen

Amar Sagoo

Abbey Christensen

Ali Connors

Alex Nelson

Anthony Stevens

A

A

1230

Abcdefg

Abcdefghijklmno

Tabs

THE THIRDITEM TWONO ONE

THE THIRDITEM TWONO ONE

1230

THE THIRDITEM TWONO ONE

Page Title

1230

121 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

110 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

51 50

Input text for a single line field with a maximu

Single-Line Input Label

31 50

Input text for a single line field with a max

Single-Line Input Label

121 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

110 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

51 50

Input text for a single line field with a maximuInput text for a single line field with a maximu

Single-Line Input Label

31 50

Input text for a single line field with a maxInput text for a single line field with a max

Single-Line Input Label

Disabled text field

Input text

Username or Password is incorrect

Input text

Input tex

Hint text

Hint text

Hint text

Disabled text field

Input textInput text

Username or Password is incorrect

Input textInput text

Input texInput tex

Hint text

Hint text

Hint text

Text fields

Switches and sliders

60

Regular

Pressed

Disabled

60

Regular

Pressed

Disabled

Buttons

DISABLED

PRESSED

NORMAL

DISABLED

PRESSED

NORMAL

Flat Raised

DISABLED

PRESSED

NORMAL

DISABLED

PRESSED

NORMAL

Flat Raised

Toasts

This color applies to both light and dark theme

This item already has the label ldquotravelrdquo You can add a new label

ACTIONSingle-Line Snackbar

Menu

Arial 100

100

Calibri

Courier

Verdana

Arial

Chips

Trevor Hansen

email3emailcom

email2emailcom

primaryemailemailcomContact Name

Dialogs

Desktop

Without title With title

BUTTONBUTTON

PermissionsLorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Up exlaborum incididunt quis nostrud exercitatn

BUTTONBUTTON

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Ut enim ad minim ikad veniam quis nostrud exercitatn ullamco laboris nisi ut aliquip exlaborum incididunt

ACCEPTDECLINEMORE INFO

Permissions

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisinuli

Toolbar

11Roboto

Cards

Welcome BackItrsquos been a while have you read any new books latelyItrsquos been a while have you read any new books lately

YESNOPE

Kangaroo Valley Safari

Located two hours south of Sydney in the

Southern Highlands of New South Wales

LEARN MORESHARE

REVIEWFREE SAMPLE

By Alex Nelson

El Pooch

Pre-fab Homes

Favorite Road Trips

Best Airlines

Campbell

Groceries

almond milk

coconut water

cucumber

green apples

Yuna tickets on sale 624

May 24 2014

Clean desk

Keyboards

suggestion suggestion suggestion

123

a s d f g h j k l

z x c v b n m

q w e r t y u i o p1 2 3 4 5 6 7 8 9 0

suggestion suggestion suggestion

123

a s d f g h j k l

z x c v b n m

q w e r t y u i o p1 2 3 4 5 6 7 8 9 0

Bottom Sheet

Print this page

Copy

Upload

Share

MoreMail Message

Google+Gmail Hangout

Grid

Two lineSupport text

Two lineSupport text

Single line

Single line

Lists

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Three-line itemThree-line item

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Three-line itemThree-line item

Three-line itemThree-line item

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Three-line itemThree-line item

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Three-line itemThree-line item

Three-line itemThree-line item

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Line item unselectedLine item unselected

Line item selectedLine item selected

Line item selectedLine item selected

Data usageData usage

BluetoothBluetooth

Wi-FiWi-Fi

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Single-line itemSingle-line item

Single-line itemSingle-line item

Single-line itemSingle-line itemSingle-line itemSingle-line item

Single-line itemSingle-line item

Single-line itemSingle-line item

Introduction agrave lrsquoergonomie

Ergonomie et Design34

Cornelia Laros

Design Ergonomie Design Ergonomie

Identiteacute

Communication

Ambiance

Exemple un site institutionnel informatif avec une navigation simple et des exigences fortes

drsquoidentiteacuteExemple une application meacutetier destineacutee agrave une

population drsquoutilisateur connue

EfficaciteacuteFonctionnel

Outils

Service en ligne

Architecture de lrsquoinformation contenus bonnes pratiques

Analyse tache vs activiteacute prise en compte globaliseacutee des process

postes de travail eacutecosystegraveme existant hellip puis la conception

Image Usage freacutequent

Usage ponctuel

Votre eacutequipe Ergonome Directeur aristique Webdesigner UX Designer

Introduction agrave lrsquoergonomie

Design avant-tout35

Cornelia Laros

Introduction agrave lrsquoergonomie

Equilibreacute36

Cornelia Laros

Introduction agrave lrsquoergonomie

Ergonomie avant tout37

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

38

Cornelia Laros

text

Lrsquoergonomie sert agravehellip39

Cornelia Laros

1 ameacuteliorer les conditions de travail

2 faire gagner plus drsquoargent agrave lrsquoentreprise

3 ameacuteliorer lrsquoestheacutetique

4 comprendre comment ameacuteliorer un produit

text

Quelles affirmations sont vraies

40

Cornelia Laros

1 Lrsquoergonomie srsquoattache agrave comprendre le travail pour le transformer

2 Il est possible de concevoir une IHM qui fonctionne pour tout le monde en se basant sur des normes

3 Lrsquoutilisateur va se servir de votre produit de la faccedilon dont vous lrsquoavez imagineacute

4 Lrsquoutilisateur interpregravete une tacircche comme un problegraveme qursquoil doit reacutesoudre en faisant avec ses caracteacuteristiques et les moyens mis agrave sa disposition

text

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

41

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

text

D - A quoi sert un prototype

42

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

43

Cornelia Laros

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

44

Cornelia Laros

Utilisabiliteacute

Utiliteacute

Efficaciteacute Efficience

Satisfaction

Introduction agrave lrsquoergonomie

Pyramide des besoins MASLOW

45

Cornelia Laros

Introduction agrave lrsquoergonomie

Pyramide des besoins IHM46

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

47

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

48

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

49

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

50

Cornelia Laros

Introduction agrave lrsquoergonomie

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

51

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

Introduction agrave lrsquoergonomie

D - A quoi sert un prototype

52

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

53

Cornelia Laros

a Fiable

b Intuitif

c Fonctionnel

d Accessible

e Plaisant

f Porteur de sens

Introduction agrave lrsquoergonomie

F - Quel besoin ai-je oublieacute dans la question

preacuteceacutedente

54

Cornelia Laros

text

Patterns amp Dark patterns

55

Cornelia Laros

text

Criteres de Bastien et Scapin56

Cornelia Laros

Guidage

Charge de travail

Controcircle utilisateur explicite

Flexibiliteacute ( adaptabiliteacute)

Gestion des erreurs

Homogeacuteneacuteiteacute ( coheacuterence)

Signifiance des Codes et Deacutenominations

Compatibiliteacute ( familiariteacute)

Introduction agrave lrsquoergonomie

Guidage57

Cornelia Laros

Introduction agrave lrsquoergonomie

Charge de travail58

Cornelia Laros

Introduction agrave lrsquoergonomie

Controle explicite59

Cornelia Laros

Introduction agrave lrsquoergonomie

Controles explicites60

Cornelia Laros

Dar983595 983541983527t983545983589983590n

text

Adaptabiliteacute61

Cornelia Laros

text

Gestion des erreurs62

Cornelia Laros

text

Signifiance des codes et deacutenominations

63

Cornelia Laros

text

Homogeacuteneacuteiteacute - coheacuterence64

Cornelia Laros

text

Homogeacuteneacuteiteacute - Distinction65

Cornelia Laros

text

Compatibiliteacute66

Cornelia Laros

text

Compatibiliteacute67

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction68

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction69

Cornelia Laros

text

Gestalt Theorie70

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Gestalt Theorie71

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Dark patterns72

Cornelia Laros

Introduction agrave lrsquoergonomie

A vous de jouer

73

Cornelia Laros

Introduction agrave lrsquoergonomie

Outils de prototypages DIY74

Cornelia Laros

Low tech papier + crayons post-its cartes agrave jouer

Gratuit en ligne Invision app Moqups UXPin

Mac Sketch Balsamiq Mockups Axure

PC Axure Balsamiq

Mobile Prototyping on Paper

Ap983540983590en983530983555 983592983589 no983547983549983589983537le983543 983581h983586983543983589983588

Introduction agrave lrsquoergonomie

Test de perception DIY75

Cornelia Laros

La premiegravere impression qursquoun utilisateur se fait de votre IHM va influencer tous ses jugements ulteacuterieurs Crsquoest lrsquoeffet de halo

bull Un utilisateur qui a une premiegravere impression positive de votre appli passera plus facilement outre les bugs

bull Une premiegravere impression negative rendra lrsquoutilisateur plus critique vis agrave vis de deacutetails qui confirment son jugement

Cel983527 983538983580983590c983532e 983527983548983588si 983527983549983589983581 vo983543 983586983590983580ux 983591rsquoex983527983538983589983585s vo983543 983530983585t983542983589983546i983530n983543 983592rsquoem983528983527983548983581he 983530983545 983550983587s 983542e983585d983530983555-vo983547983543 983581l983535e983539983546s

Introduction agrave lrsquoergonomie

Test de perception DIY76

Cornelia Laros

Montrer votre prototype agrave quelqursquoun pendant 5 secondes

Demandez-lui

bull Ce qursquoil a vu

bull Ce qursquoil a compris de ce qursquoil a vu

bull Ce qui lrsquoa surpris ou marqueacute

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY77

Cornelia Laros

Les difficulteacutes de navigation se produisent souvent dans les niveaux les plus haut de votre structure de contenu Vous pouvez veacuterifier facilement si la classification logique pour vous lrsquoest aussi pour vos utilisateurs

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY78

Cornelia Laros

Lister trois (max) niveaux de profondeur de votre contenu structureacute Masquez ensuite les contenus de niveau plus bas Utilisez par exemple les groupements de lignes dans excel pour creacuteer des pliers-deacutepliers ou imprimer la liste sur une feuille que vous pliez pour masquer certaines parties

Demandez agrave un utilisateur de vous dire ougrave il penserait trouver un contenu bien preacutecis en preacutecisant qursquoil nrsquoy a pas de bonne reacuteponse

Notez srsquoil va chercher lagrave ougrave vous vous y attendiez ougrave il a heacutesiteacute et ce qursquoil a fini par choisir pour vous aider agrave rendre la navigation plus intuitive

Introduction agrave lrsquoergonomie

Test drsquoutilisabiliteacute DIY79

Cornelia Laros

A chaque nouvelle fonctionnaliteacute ajouteacutee demandez agrave quelqursquoun qui ne connait pas le projet de srsquoen servir Proposez lui une seule tacircche geacuteneacuterique agrave accomplir avec la fonctionnaliteacute

Exemple Tu veux prendre un rendez-vous avec un meacutedecin sur ce site montres-moi comment tu ferais en commentant agrave haute voix

Le plus important ici crsquoest de ne pas reacuteagir agrave ce qursquoil fait mais simplement le regarder faire sans lrsquoaider mecircme srsquoil est bloqueacute

Srsquoil 983540983586983588983589 de983543 983578983547983589s983545i983586983585s reacutepo983539983592983530z 983540983580983590 un983530 983577983548e983588t983534983587983539 o983547 d983535983545e983588 l983547983535 983577u983530 983550983587us 983536983547983535 983590eacutepo983539983592r983530983555 983578983548an983591 983534983537 983580ur983527 fi983539983535 983588rsquoil 983534983539983588983535s983545e Srsquoil 983530983543983546 v983542983580i983593983530n983545 983529l983587983577ueacute di983545983530983588 l983548i 983577983547983589 983550o983547s 983580983536983537ez 983542983530983550983587ir 983549983586983546r983589 983579o983541983534983589 et 983530983543983588983580ye983555 983592983530 c983587983538983541re983539983592r983530 983579983589 983578u983534 l983589 9835316ne

Introduction agrave lrsquoergonomie

Pas besoin de reacuteinventer la roue DIY

80

Cornelia Laros

Il existe des bonnes pratiques qui vous eacuteviteront de reacuteinventer la roue Utilisez des laquo design patterns raquo pour concevoir vos interfaces

Renseignez vous sur la Gestalt Theorie pour agencer vos pages

Utilisez les critegraveres de Bastien et Scapin pour trouver des deacutefauts eacutevidents avant de tester vous en tirerez des enseignements plus inteacuteressants

Ma983534s ccedila crsquoes983545 983541983586983548r u983539983530 983580u983546r983530 983559983587i983588

Introduction agrave lrsquoergonomie

Quizz time

81

Cornelia Laros

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

82

Cornelia Laros

1 c Fonctionnel

2 a Fiable

3 d Accessible

4 b Intuitif

5 e Plaisant

6 f Porteur de sens

text

F - Quel besoin ai-je oublieacute dans la question preacuteceacutedente

83

Cornelia Laros

Uti983536983534983588983580b983536e

Introduction agrave lrsquoergonomie

Tests DIY84

Cornelia Laros

Reacutedigez la proceacutedure pour tester un de vos projets drsquoIHM avec le test de votre choix perception arborescence ou utilisabiliteacute

Notez la question que vous vous posez et la question que vous allez poser

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

Deacuteterminants externes (caracteacuteristiques de la

situation)

Introduction agrave lrsquoergonomie

Scheacutema agrave 5 carreacutes11

Cornelia Laros

Deacuteterminants internes (caracteacuteristiques de

lrsquoutilisateur)

Activiteacute

Effets sur la personne (santeacute motivation compeacutetencehellip)

Effets sur lrsquoentreprise (production revenus stocks

usure du mateacuterielhellip)

Reacutet983542o-ac983545983534983587983585Reacutet983542o-ac983545983534983587983585

In983545e983590983527c983545983535o983585 h983586983538983593983589 ma983579983533983534n983589 983591e983550983534983589n983545 I983585te983542983527983581t983535o983539 H983586983593m983589 983629983554983588tegraveme

Introduction agrave lrsquoergonomie

Catachregravese

12

Cornelia Laros

Art de deacutetourner un objet de la tacircche pour laquelle il a eacuteteacute conccedilu

Introduction agrave lrsquoergonomie

Ergonomique ne veux rien dire

Pour comprendre revenons aux origineshellip

13

Cornelia Laros

Introduction agrave lrsquoergonomie

Les origines14

Cornelia Laros

1857 1949

1880

1908

1946

Premiegravere utilisation du terme laquo ergonomie raquo par Jastrzebowski Fordisme

Institutionnalisation de la meacutedecine du travail

Le terme laquo ergonomie raquo est employeacute par Murrel

Taylorisme

1987Toyota Production System

XVIIIe Deacuteveloppement de lrsquoapproche productiviste du travail

XVIIe

Premiers eacutecrits et classification des maladies professionnelles

Moyen acircgeEtude des conditions de travail et des facteurs environnementaux

Antiquiteacute

Racines de lrsquoapproche hygieacuteniste du travail

Introduction agrave lrsquoergonomie

Ameacuteliorer agrave la fois la productiviteacute et les

conditions de travailParce qursquoun employeacute motiveacute et en bonne santeacute est plus

productif et tout le monde y gagne

15

Cornelia Laros

Introduction agrave lrsquoergonomie

Inter-discplinariteacute16

Cornelia Laros

Ps983554983581ho983536983586983594983535e

In983531eacuteni983530983542983535e

Ne983547r983587983543983581i983530n983579983589983588

Ph983554983588i983586l983587983531i983530

Meacutede983579983534983585983589

Soc983534983587983536o983594983534983589

Ergonomie

Introduction agrave lrsquoergonomie

Domaines drsquointervention17

Cornelia Laros

Ps983554983581ho983536983586983594983535eIn983531eacuteni983530983542983535e

Ne983547r983587983543983581i983530n983579983589983588

Phi983543983534983587983537og983534983589Meacutede983579983534983585983589

Soc983534983587983536o983594983534983589Ergonomie

Ergonomie physique

Ergonomie organisationnelle

Ergonomie cognitive

Optimisation des situations et postes de travail dans leur

relation avec lrsquoactiviteacute physique

Optimisation des systegravemes socio-techniques structures

organisationnelles regravegles et processus

Optimisation du travail mental perception prise de deacutecision

reacutesolution de problegravemes

Introduction agrave lrsquoergonomie

Domaines drsquointervention18

Cornelia Laros

Organisationnelle 10

Physique 20

Cognitive 70

Introduction agrave lrsquoergonomie

Quizz time

19

Cornelia Laros

text

A - Lrsquoergonomie sert agravehellip20

Cornelia Laros

1 ameacuteliorer les conditions de travail

2 faire gagner plus drsquoargent agrave lrsquoentreprise

3 ameacuteliorer lrsquoestheacutetique

4 comprendre comment ameacuteliorer un produit

text

B - Quelles affirmations sont vraies

21

Cornelia Laros

1 Lrsquoergonomie srsquoattache agrave comprendre le travail pour le transformer

2 Il est possible de concevoir une IHM qui fonctionne pour tout le monde en se basant sur des normes

3 Lrsquoutilisateur va se servir de votre produit de la faccedilon dont vous lrsquoavez imagineacute

4 Lrsquoutilisateur interpregravete une tacircche comme un problegraveme qursquoil doit reacutesoudre en faisant avec ses caracteacuteristiques et les moyens mis agrave sa disposition

text

Pause cafeacute

10 minutes

22

Cornelia Laros

Introduction agrave lrsquoergonomie

Quelques meacutethodes drsquoergonomie

23

Cornelia Laros

Introduction agrave lrsquoergonomie

Ergonomie de conception

24

Cornelia Laros

Ergonomie de correctionbull Analyse drsquoactiviteacute

bull Audit

bull Analyse drsquoeacutevegravenements critiques

bull Analyse de traces

bull Simulation

bull Entretiens

bull Persona cartes drsquoexpeacuteriences

bull Tri par cartes

bull Prototypage

bull Benchmarkhellip

Lrsquoergonomie tout au long du projet

Introduction agrave lrsquoergonomie

Ergonomie de conception

25

Cornelia Laros

Ergonomie de correctionbull Analyse drsquoactiviteacute

bull Audit

bull Analyse drsquoeacutevegravenements critiques

bull Analyse de traces

bull Simulationhellip

bullEntretiens

bullPersona cartes drsquoexpeacuteriences

bullTri par cartes

bullPrototypage

bullBenchmarkhellip

Des meacutethodes de recueil de donneacutees avec utilisateurs finaux et de conception laquo experte raquo

Introduction agrave lrsquoergonomie

Pourquoi ces meacutethodes26

Cornelia Laros

bull Si jrsquoavais demandeacute aux utilisateurs ce qursquoils voulaient ils mrsquoauraient demandeacute un cheval plus rapide - Henri Ford

bull Un comportement laquo sur-appris raquo devient un automatisme inconscient que lrsquoutilisateur ne saura pas expliquer (ex passer les vitesses en conduisant)

bull Le cerveau humain est propice agrave la fabulation (imagination de causes) aux faux souvenirs (en toute bonne fois) les biais (deacutesirabiliteacute effet pygmalion influence socialehellip)

Observer

Introduction agrave lrsquoergonomie

Pourquoi ces meacutethodes27

Cornelia Laros

bull Une imagine est plus parlante que 10 000 mots

bull Permet drsquoeacutevaluer une ideacutee agrave moindre coucirct donc de se tromper souvent et drsquoapprendre plus vite pour valider une ideacutee ou lrsquoameacuteliorer

bull Permet de tester plein drsquoideacutees et de retenir la meilleure

hellip A condition de se focaliser sur un objectif et non sur lrsquoideacutee elle-mecircme

Modeacuteliser

Introduction agrave lrsquoergonomie

Lrsquoensemble permet drsquoeacuteviter ceci

28

Cornelia Laros

Introduction agrave lrsquoergonomie

Lrsquoensemble permet drsquoeacuteviter ceci

29

Cornelia Laros

Eli983538983534983585eacute en 983586983528983588983589r983549a983585t

Eli983538983534983585eacute en 983540983590983586t983587983545983584pa983539983546

Introduction agrave lrsquoergonomie

Prototyper pour vous crsquoesthellip30

Cornelia Laros

CONTRIBUTION AUX SPECIFICATIONS FONCTIONNELLES

Zoning basse fideacuteliteacute wireframe statique (sketch ou non) bull Rapide et peu couteux bull Illustratif statique pas drsquointeraction bull Non engageant sur le design bull Tregraves peu explicite sur le plan fonctionnel

Story-board cliquable bull Illustre la navigation bull Permet de se projeter dans lrsquointeraction bull Pose les bases du design et du fonctionnel

Prototype semi-dynamique bull Se veut complet (ou quasi) sur le plan de la

navigation de lrsquointeraction et des cas drsquoutilisation bull Doit permettre de simuler fidegravelement le

fonctionnement drsquoune application bull Est une speacutecification fonctionnelle en soi

Pha983543983530 983592983589 ca983591983590983527g983589 AM983623983607

Pha983543983530 983592983589 co983539983581983530p983545983535o983585 f983586983539983581t983535o983539983585983530l983536983589

Tes983545983588 983547t983535983536i983588983527t983589u983542983588 ap983540983537983534s 983538983587983529il983530983543hellip

Introduction agrave lrsquoergonomie

Prototype basse definition31

Cornelia Laros

Introduction agrave lrsquoergonomie

Prototyper cliquable32

Cornelia Laros

Introduction agrave lrsquoergonomie

Prototyper semi-dynamique33

Cornelia Laros

Page Title

1230

Mobile interactions

Observably Sc i$amp

About

Project overiew

Manage sessions

Manage variables

Settings

Start observing

1230 1230

OverviewObserve

Observe mobile interactions in the field to assess dominant hand for holding and interacting with smartphones

10042016Mobile interactionsMobile interactions

Welcome to Observably Gather and manage observation dataGather and manage observation data

My projects

1230

Tags separate with comas

Variable value

Create

Add observablesAdd all observables you want to track for this project You can come back and edit them laterAdd all observables you want to track for this project You can come back and edit them later

Thanks for the hint

Manage variablesMobile InteractionsMobile Interactions

1230

Tags separate with comas

Variable value

Create

Left hand Right thumbLRTLRT

Manage variablesMobile InteractionsMobile Interactions

Irsquom done Start recording

Save changesCancel

Observable Tags separate with coma

Tags separate with comas

3 20

LRILRI

Observable label

Did you knowTap on the icon to customize it Use icons from our library or from your gallery to make variables pop out when observing

Tap on the icon to customize it Use icons from our library or from your gallery to make variables pop out when observing

Thanks for the hint

Left hand Right thumbLRTLRT

Irsquom done Start recording

Manage variablesMobile InteractionsMobile Interactions

Left hand x Right thumb x

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Did you knowIf you make a mistake you can undo your action by tapping on the icon of the taskIf you make a mistake you can undo your action by tapping on the icon of the task

Thanks for the hint

Session 1

Discrete mode New Session

Mobile InteractionsMobile Interactions

1230

Record vocal comment

LRILRILRILRILRILRI

Did you knowYou can record occurences durations and comments by chosing the record format in the drop-down above

You can record occurences durations and comments by chosing the record format in the drop-down above

Thanks for the hint

Discrete mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

Left hand Right thumbLRT

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Did you knowIn list view you can slipe left and right to increment or correct your countIn list view you can slipe left and right to increment or correct your count

Thanks for the hint

Continuous mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

LRILRILRILRILRI

Did you knowIf you make a mistake you can undo your action by tapping on the icon of the taskIf you make a mistake you can undo your action by tapping on the icon of the task

Thanks for the hint

Continuous mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

Tags separate with comas

Comment

Add

Did you know The timestamp of vocal comments is the start time to accurately mark events that triggered your comment

The timestamp of vocal comments is the start time to accurately mark events that triggered your comment

Thanks for the hint

Manage observables

Comments mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Stop recording vocal comment

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Your observationsManage and cleanup sessions before exporting dataManage and cleanup sessions before exporting data

Session ManagementMobile InteractionsMobile Interactions

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

LRT

LRI

RLI

RLT

RRT20

20

8

35

15

Count SummaryCount Summary

RLT

RRT20

815

Time SummaryTime Summary

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

Left hand Right thumbLRTLRT

+1+1

10042016 124627

Left hand Right thumbLRTLRT

2rsquorsquo2rsquorsquo

10042016 124627 - 10042016 124629

Content of my comment boxTag1 Tag2

10042016 124644

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

LRTLRT+1+1

10042016 124627

Save changes

Observable Tags separate with coma

Tags separate with comas

Left hand x Right thumb x

AboutAbout

1230

Observable science provides tools for field research and scientific observation It is tailored to the needs of ethnography human factors psychology usability and games user research

Observable science provides tools for field research and scientific observation It is tailored to the needs of ethnography human factors psychology usability and games user research

Observablyscience

Development by Morgane RadelDesign by Cornelia LarosDevelopment by Morgane RadelDesign by Cornelia Laros

Credits

Support (us)Show your love Rate the App

Make a donation

Contact us

Visit our website

Add session tags to all observations

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

Save changes

Session Tags separate with coma

Tags separate with comas

Metro x Toulouse x

Manage variablesMobile InteractionsMobile Interactions

1230

Left hand Right thumbLRTLRT

Confirm

Search icons

Cancel

Browse

3 20

Observably Sci$amp

1230

Project statisticsProject statistics Total countsTotal time Total comments First entryLast entrySessions

4 963281231

1441201201603042016

97

Project detailsMobile InteractionsMobile Interactions

Sessions SummarySessions Summary

RRT20

815

Count SummaryCount Summary

JUN 14MAY 14APR 14MAR 14FEB 14JAN 14

4

1

65

7

0

2

4

6

8

10

3

2014

Manage sessions

Settings ExportOverview

1230

App optionsDisplay hintsDisplay hints

SettingsSettings

Share anonymous data to improve the appShare anonymous data to improve the app

1230

Gather and manage observation data with ObservablyGather and manage observation data with Observably

Welcome to Observably

Project name

Project description what is the goal of your project

CreateCancel

Session[number]Session[number]

Default Session ID

Default export format txt

Data options

Default Discrete variable lines view

Create a new project

1230

Project detailsMobile InteractionsMobile Interactions

Mobile InteractionsMobile Interactions

Project description what is the goal of your project

SaveCancel

Session[number]Session[number]

Default Session ID

Default export format txt

Data options

Default continuous variables grid view

Project name

Manage sessions

Settings ExportOverview

1230

Project detailsMobile InteractionsMobile Interactions

Manage sessions

Settings ExportOverview

Export format txt

Export data

Data has been successfully exported as MobileInteractionstxt

to your download folder

Observably Sc i$amp

Settings

1230

BUTTONBUTTON

Permissions

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Up exlaborum incididunt quis nostrud exercitatn

COMPONENTS

Pickers

OKCANCEL

13

Friday

MAR

2014

MS W T F ST

30 31

1

16 17 19 20 21 2218

23 24 26 27 28 2925

139 10 12 14 1511

72 3 5 6 84

March 2014

OKCANCEL

PMAM

112

9

10

11

2

48

576

3

330 AM

Notifications

Incoming call

Rachel Ligson

IGNORE ANSWER

REPLYARCHIVE

Hey letrsquos catch up soon Do you want to grab lunch sometime this weekendLet me know when yoursquore free

409 PMHannah ChoHannah Cho

Do you know what I mean509 PMTina McBeanTina McBean

Heads up notification

Regular + Expanded notification

Index scroller

All

Patrick Keenan

Mary Johnson

Tina Santiago

Trevor Hansen

Amar Sagoo

Abbey Christensen

Ali Connors

Alex Nelson

Anthony Stevens

A

A

1230

Abcdefg

Abcdefghijklmno

Tabs

THE THIRDITEM TWONO ONE

THE THIRDITEM TWONO ONE

1230

THE THIRDITEM TWONO ONE

Page Title

1230

121 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

110 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

51 50

Input text for a single line field with a maximu

Single-Line Input Label

31 50

Input text for a single line field with a max

Single-Line Input Label

121 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

110 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

51 50

Input text for a single line field with a maximuInput text for a single line field with a maximu

Single-Line Input Label

31 50

Input text for a single line field with a maxInput text for a single line field with a max

Single-Line Input Label

Disabled text field

Input text

Username or Password is incorrect

Input text

Input tex

Hint text

Hint text

Hint text

Disabled text field

Input textInput text

Username or Password is incorrect

Input textInput text

Input texInput tex

Hint text

Hint text

Hint text

Text fields

Switches and sliders

60

Regular

Pressed

Disabled

60

Regular

Pressed

Disabled

Buttons

DISABLED

PRESSED

NORMAL

DISABLED

PRESSED

NORMAL

Flat Raised

DISABLED

PRESSED

NORMAL

DISABLED

PRESSED

NORMAL

Flat Raised

Toasts

This color applies to both light and dark theme

This item already has the label ldquotravelrdquo You can add a new label

ACTIONSingle-Line Snackbar

Menu

Arial 100

100

Calibri

Courier

Verdana

Arial

Chips

Trevor Hansen

email3emailcom

email2emailcom

primaryemailemailcomContact Name

Dialogs

Desktop

Without title With title

BUTTONBUTTON

PermissionsLorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Up exlaborum incididunt quis nostrud exercitatn

BUTTONBUTTON

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Ut enim ad minim ikad veniam quis nostrud exercitatn ullamco laboris nisi ut aliquip exlaborum incididunt

ACCEPTDECLINEMORE INFO

Permissions

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisinuli

Toolbar

11Roboto

Cards

Welcome BackItrsquos been a while have you read any new books latelyItrsquos been a while have you read any new books lately

YESNOPE

Kangaroo Valley Safari

Located two hours south of Sydney in the

Southern Highlands of New South Wales

LEARN MORESHARE

REVIEWFREE SAMPLE

By Alex Nelson

El Pooch

Pre-fab Homes

Favorite Road Trips

Best Airlines

Campbell

Groceries

almond milk

coconut water

cucumber

green apples

Yuna tickets on sale 624

May 24 2014

Clean desk

Keyboards

suggestion suggestion suggestion

123

a s d f g h j k l

z x c v b n m

q w e r t y u i o p1 2 3 4 5 6 7 8 9 0

suggestion suggestion suggestion

123

a s d f g h j k l

z x c v b n m

q w e r t y u i o p1 2 3 4 5 6 7 8 9 0

Bottom Sheet

Print this page

Copy

Upload

Share

MoreMail Message

Google+Gmail Hangout

Grid

Two lineSupport text

Two lineSupport text

Single line

Single line

Lists

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Three-line itemThree-line item

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Three-line itemThree-line item

Three-line itemThree-line item

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Three-line itemThree-line item

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Three-line itemThree-line item

Three-line itemThree-line item

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Line item unselectedLine item unselected

Line item selectedLine item selected

Line item selectedLine item selected

Data usageData usage

BluetoothBluetooth

Wi-FiWi-Fi

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Single-line itemSingle-line item

Single-line itemSingle-line item

Single-line itemSingle-line itemSingle-line itemSingle-line item

Single-line itemSingle-line item

Single-line itemSingle-line item

Introduction agrave lrsquoergonomie

Ergonomie et Design34

Cornelia Laros

Design Ergonomie Design Ergonomie

Identiteacute

Communication

Ambiance

Exemple un site institutionnel informatif avec une navigation simple et des exigences fortes

drsquoidentiteacuteExemple une application meacutetier destineacutee agrave une

population drsquoutilisateur connue

EfficaciteacuteFonctionnel

Outils

Service en ligne

Architecture de lrsquoinformation contenus bonnes pratiques

Analyse tache vs activiteacute prise en compte globaliseacutee des process

postes de travail eacutecosystegraveme existant hellip puis la conception

Image Usage freacutequent

Usage ponctuel

Votre eacutequipe Ergonome Directeur aristique Webdesigner UX Designer

Introduction agrave lrsquoergonomie

Design avant-tout35

Cornelia Laros

Introduction agrave lrsquoergonomie

Equilibreacute36

Cornelia Laros

Introduction agrave lrsquoergonomie

Ergonomie avant tout37

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

38

Cornelia Laros

text

Lrsquoergonomie sert agravehellip39

Cornelia Laros

1 ameacuteliorer les conditions de travail

2 faire gagner plus drsquoargent agrave lrsquoentreprise

3 ameacuteliorer lrsquoestheacutetique

4 comprendre comment ameacuteliorer un produit

text

Quelles affirmations sont vraies

40

Cornelia Laros

1 Lrsquoergonomie srsquoattache agrave comprendre le travail pour le transformer

2 Il est possible de concevoir une IHM qui fonctionne pour tout le monde en se basant sur des normes

3 Lrsquoutilisateur va se servir de votre produit de la faccedilon dont vous lrsquoavez imagineacute

4 Lrsquoutilisateur interpregravete une tacircche comme un problegraveme qursquoil doit reacutesoudre en faisant avec ses caracteacuteristiques et les moyens mis agrave sa disposition

text

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

41

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

text

D - A quoi sert un prototype

42

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

43

Cornelia Laros

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

44

Cornelia Laros

Utilisabiliteacute

Utiliteacute

Efficaciteacute Efficience

Satisfaction

Introduction agrave lrsquoergonomie

Pyramide des besoins MASLOW

45

Cornelia Laros

Introduction agrave lrsquoergonomie

Pyramide des besoins IHM46

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

47

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

48

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

49

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

50

Cornelia Laros

Introduction agrave lrsquoergonomie

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

51

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

Introduction agrave lrsquoergonomie

D - A quoi sert un prototype

52

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

53

Cornelia Laros

a Fiable

b Intuitif

c Fonctionnel

d Accessible

e Plaisant

f Porteur de sens

Introduction agrave lrsquoergonomie

F - Quel besoin ai-je oublieacute dans la question

preacuteceacutedente

54

Cornelia Laros

text

Patterns amp Dark patterns

55

Cornelia Laros

text

Criteres de Bastien et Scapin56

Cornelia Laros

Guidage

Charge de travail

Controcircle utilisateur explicite

Flexibiliteacute ( adaptabiliteacute)

Gestion des erreurs

Homogeacuteneacuteiteacute ( coheacuterence)

Signifiance des Codes et Deacutenominations

Compatibiliteacute ( familiariteacute)

Introduction agrave lrsquoergonomie

Guidage57

Cornelia Laros

Introduction agrave lrsquoergonomie

Charge de travail58

Cornelia Laros

Introduction agrave lrsquoergonomie

Controle explicite59

Cornelia Laros

Introduction agrave lrsquoergonomie

Controles explicites60

Cornelia Laros

Dar983595 983541983527t983545983589983590n

text

Adaptabiliteacute61

Cornelia Laros

text

Gestion des erreurs62

Cornelia Laros

text

Signifiance des codes et deacutenominations

63

Cornelia Laros

text

Homogeacuteneacuteiteacute - coheacuterence64

Cornelia Laros

text

Homogeacuteneacuteiteacute - Distinction65

Cornelia Laros

text

Compatibiliteacute66

Cornelia Laros

text

Compatibiliteacute67

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction68

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction69

Cornelia Laros

text

Gestalt Theorie70

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Gestalt Theorie71

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Dark patterns72

Cornelia Laros

Introduction agrave lrsquoergonomie

A vous de jouer

73

Cornelia Laros

Introduction agrave lrsquoergonomie

Outils de prototypages DIY74

Cornelia Laros

Low tech papier + crayons post-its cartes agrave jouer

Gratuit en ligne Invision app Moqups UXPin

Mac Sketch Balsamiq Mockups Axure

PC Axure Balsamiq

Mobile Prototyping on Paper

Ap983540983590en983530983555 983592983589 no983547983549983589983537le983543 983581h983586983543983589983588

Introduction agrave lrsquoergonomie

Test de perception DIY75

Cornelia Laros

La premiegravere impression qursquoun utilisateur se fait de votre IHM va influencer tous ses jugements ulteacuterieurs Crsquoest lrsquoeffet de halo

bull Un utilisateur qui a une premiegravere impression positive de votre appli passera plus facilement outre les bugs

bull Une premiegravere impression negative rendra lrsquoutilisateur plus critique vis agrave vis de deacutetails qui confirment son jugement

Cel983527 983538983580983590c983532e 983527983548983588si 983527983549983589983581 vo983543 983586983590983580ux 983591rsquoex983527983538983589983585s vo983543 983530983585t983542983589983546i983530n983543 983592rsquoem983528983527983548983581he 983530983545 983550983587s 983542e983585d983530983555-vo983547983543 983581l983535e983539983546s

Introduction agrave lrsquoergonomie

Test de perception DIY76

Cornelia Laros

Montrer votre prototype agrave quelqursquoun pendant 5 secondes

Demandez-lui

bull Ce qursquoil a vu

bull Ce qursquoil a compris de ce qursquoil a vu

bull Ce qui lrsquoa surpris ou marqueacute

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY77

Cornelia Laros

Les difficulteacutes de navigation se produisent souvent dans les niveaux les plus haut de votre structure de contenu Vous pouvez veacuterifier facilement si la classification logique pour vous lrsquoest aussi pour vos utilisateurs

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY78

Cornelia Laros

Lister trois (max) niveaux de profondeur de votre contenu structureacute Masquez ensuite les contenus de niveau plus bas Utilisez par exemple les groupements de lignes dans excel pour creacuteer des pliers-deacutepliers ou imprimer la liste sur une feuille que vous pliez pour masquer certaines parties

Demandez agrave un utilisateur de vous dire ougrave il penserait trouver un contenu bien preacutecis en preacutecisant qursquoil nrsquoy a pas de bonne reacuteponse

Notez srsquoil va chercher lagrave ougrave vous vous y attendiez ougrave il a heacutesiteacute et ce qursquoil a fini par choisir pour vous aider agrave rendre la navigation plus intuitive

Introduction agrave lrsquoergonomie

Test drsquoutilisabiliteacute DIY79

Cornelia Laros

A chaque nouvelle fonctionnaliteacute ajouteacutee demandez agrave quelqursquoun qui ne connait pas le projet de srsquoen servir Proposez lui une seule tacircche geacuteneacuterique agrave accomplir avec la fonctionnaliteacute

Exemple Tu veux prendre un rendez-vous avec un meacutedecin sur ce site montres-moi comment tu ferais en commentant agrave haute voix

Le plus important ici crsquoest de ne pas reacuteagir agrave ce qursquoil fait mais simplement le regarder faire sans lrsquoaider mecircme srsquoil est bloqueacute

Srsquoil 983540983586983588983589 de983543 983578983547983589s983545i983586983585s reacutepo983539983592983530z 983540983580983590 un983530 983577983548e983588t983534983587983539 o983547 d983535983545e983588 l983547983535 983577u983530 983550983587us 983536983547983535 983590eacutepo983539983592r983530983555 983578983548an983591 983534983537 983580ur983527 fi983539983535 983588rsquoil 983534983539983588983535s983545e Srsquoil 983530983543983546 v983542983580i983593983530n983545 983529l983587983577ueacute di983545983530983588 l983548i 983577983547983589 983550o983547s 983580983536983537ez 983542983530983550983587ir 983549983586983546r983589 983579o983541983534983589 et 983530983543983588983580ye983555 983592983530 c983587983538983541re983539983592r983530 983579983589 983578u983534 l983589 9835316ne

Introduction agrave lrsquoergonomie

Pas besoin de reacuteinventer la roue DIY

80

Cornelia Laros

Il existe des bonnes pratiques qui vous eacuteviteront de reacuteinventer la roue Utilisez des laquo design patterns raquo pour concevoir vos interfaces

Renseignez vous sur la Gestalt Theorie pour agencer vos pages

Utilisez les critegraveres de Bastien et Scapin pour trouver des deacutefauts eacutevidents avant de tester vous en tirerez des enseignements plus inteacuteressants

Ma983534s ccedila crsquoes983545 983541983586983548r u983539983530 983580u983546r983530 983559983587i983588

Introduction agrave lrsquoergonomie

Quizz time

81

Cornelia Laros

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

82

Cornelia Laros

1 c Fonctionnel

2 a Fiable

3 d Accessible

4 b Intuitif

5 e Plaisant

6 f Porteur de sens

text

F - Quel besoin ai-je oublieacute dans la question preacuteceacutedente

83

Cornelia Laros

Uti983536983534983588983580b983536e

Introduction agrave lrsquoergonomie

Tests DIY84

Cornelia Laros

Reacutedigez la proceacutedure pour tester un de vos projets drsquoIHM avec le test de votre choix perception arborescence ou utilisabiliteacute

Notez la question que vous vous posez et la question que vous allez poser

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

Introduction agrave lrsquoergonomie

Catachregravese

12

Cornelia Laros

Art de deacutetourner un objet de la tacircche pour laquelle il a eacuteteacute conccedilu

Introduction agrave lrsquoergonomie

Ergonomique ne veux rien dire

Pour comprendre revenons aux origineshellip

13

Cornelia Laros

Introduction agrave lrsquoergonomie

Les origines14

Cornelia Laros

1857 1949

1880

1908

1946

Premiegravere utilisation du terme laquo ergonomie raquo par Jastrzebowski Fordisme

Institutionnalisation de la meacutedecine du travail

Le terme laquo ergonomie raquo est employeacute par Murrel

Taylorisme

1987Toyota Production System

XVIIIe Deacuteveloppement de lrsquoapproche productiviste du travail

XVIIe

Premiers eacutecrits et classification des maladies professionnelles

Moyen acircgeEtude des conditions de travail et des facteurs environnementaux

Antiquiteacute

Racines de lrsquoapproche hygieacuteniste du travail

Introduction agrave lrsquoergonomie

Ameacuteliorer agrave la fois la productiviteacute et les

conditions de travailParce qursquoun employeacute motiveacute et en bonne santeacute est plus

productif et tout le monde y gagne

15

Cornelia Laros

Introduction agrave lrsquoergonomie

Inter-discplinariteacute16

Cornelia Laros

Ps983554983581ho983536983586983594983535e

In983531eacuteni983530983542983535e

Ne983547r983587983543983581i983530n983579983589983588

Ph983554983588i983586l983587983531i983530

Meacutede983579983534983585983589

Soc983534983587983536o983594983534983589

Ergonomie

Introduction agrave lrsquoergonomie

Domaines drsquointervention17

Cornelia Laros

Ps983554983581ho983536983586983594983535eIn983531eacuteni983530983542983535e

Ne983547r983587983543983581i983530n983579983589983588

Phi983543983534983587983537og983534983589Meacutede983579983534983585983589

Soc983534983587983536o983594983534983589Ergonomie

Ergonomie physique

Ergonomie organisationnelle

Ergonomie cognitive

Optimisation des situations et postes de travail dans leur

relation avec lrsquoactiviteacute physique

Optimisation des systegravemes socio-techniques structures

organisationnelles regravegles et processus

Optimisation du travail mental perception prise de deacutecision

reacutesolution de problegravemes

Introduction agrave lrsquoergonomie

Domaines drsquointervention18

Cornelia Laros

Organisationnelle 10

Physique 20

Cognitive 70

Introduction agrave lrsquoergonomie

Quizz time

19

Cornelia Laros

text

A - Lrsquoergonomie sert agravehellip20

Cornelia Laros

1 ameacuteliorer les conditions de travail

2 faire gagner plus drsquoargent agrave lrsquoentreprise

3 ameacuteliorer lrsquoestheacutetique

4 comprendre comment ameacuteliorer un produit

text

B - Quelles affirmations sont vraies

21

Cornelia Laros

1 Lrsquoergonomie srsquoattache agrave comprendre le travail pour le transformer

2 Il est possible de concevoir une IHM qui fonctionne pour tout le monde en se basant sur des normes

3 Lrsquoutilisateur va se servir de votre produit de la faccedilon dont vous lrsquoavez imagineacute

4 Lrsquoutilisateur interpregravete une tacircche comme un problegraveme qursquoil doit reacutesoudre en faisant avec ses caracteacuteristiques et les moyens mis agrave sa disposition

text

Pause cafeacute

10 minutes

22

Cornelia Laros

Introduction agrave lrsquoergonomie

Quelques meacutethodes drsquoergonomie

23

Cornelia Laros

Introduction agrave lrsquoergonomie

Ergonomie de conception

24

Cornelia Laros

Ergonomie de correctionbull Analyse drsquoactiviteacute

bull Audit

bull Analyse drsquoeacutevegravenements critiques

bull Analyse de traces

bull Simulation

bull Entretiens

bull Persona cartes drsquoexpeacuteriences

bull Tri par cartes

bull Prototypage

bull Benchmarkhellip

Lrsquoergonomie tout au long du projet

Introduction agrave lrsquoergonomie

Ergonomie de conception

25

Cornelia Laros

Ergonomie de correctionbull Analyse drsquoactiviteacute

bull Audit

bull Analyse drsquoeacutevegravenements critiques

bull Analyse de traces

bull Simulationhellip

bullEntretiens

bullPersona cartes drsquoexpeacuteriences

bullTri par cartes

bullPrototypage

bullBenchmarkhellip

Des meacutethodes de recueil de donneacutees avec utilisateurs finaux et de conception laquo experte raquo

Introduction agrave lrsquoergonomie

Pourquoi ces meacutethodes26

Cornelia Laros

bull Si jrsquoavais demandeacute aux utilisateurs ce qursquoils voulaient ils mrsquoauraient demandeacute un cheval plus rapide - Henri Ford

bull Un comportement laquo sur-appris raquo devient un automatisme inconscient que lrsquoutilisateur ne saura pas expliquer (ex passer les vitesses en conduisant)

bull Le cerveau humain est propice agrave la fabulation (imagination de causes) aux faux souvenirs (en toute bonne fois) les biais (deacutesirabiliteacute effet pygmalion influence socialehellip)

Observer

Introduction agrave lrsquoergonomie

Pourquoi ces meacutethodes27

Cornelia Laros

bull Une imagine est plus parlante que 10 000 mots

bull Permet drsquoeacutevaluer une ideacutee agrave moindre coucirct donc de se tromper souvent et drsquoapprendre plus vite pour valider une ideacutee ou lrsquoameacuteliorer

bull Permet de tester plein drsquoideacutees et de retenir la meilleure

hellip A condition de se focaliser sur un objectif et non sur lrsquoideacutee elle-mecircme

Modeacuteliser

Introduction agrave lrsquoergonomie

Lrsquoensemble permet drsquoeacuteviter ceci

28

Cornelia Laros

Introduction agrave lrsquoergonomie

Lrsquoensemble permet drsquoeacuteviter ceci

29

Cornelia Laros

Eli983538983534983585eacute en 983586983528983588983589r983549a983585t

Eli983538983534983585eacute en 983540983590983586t983587983545983584pa983539983546

Introduction agrave lrsquoergonomie

Prototyper pour vous crsquoesthellip30

Cornelia Laros

CONTRIBUTION AUX SPECIFICATIONS FONCTIONNELLES

Zoning basse fideacuteliteacute wireframe statique (sketch ou non) bull Rapide et peu couteux bull Illustratif statique pas drsquointeraction bull Non engageant sur le design bull Tregraves peu explicite sur le plan fonctionnel

Story-board cliquable bull Illustre la navigation bull Permet de se projeter dans lrsquointeraction bull Pose les bases du design et du fonctionnel

Prototype semi-dynamique bull Se veut complet (ou quasi) sur le plan de la

navigation de lrsquointeraction et des cas drsquoutilisation bull Doit permettre de simuler fidegravelement le

fonctionnement drsquoune application bull Est une speacutecification fonctionnelle en soi

Pha983543983530 983592983589 ca983591983590983527g983589 AM983623983607

Pha983543983530 983592983589 co983539983581983530p983545983535o983585 f983586983539983581t983535o983539983585983530l983536983589

Tes983545983588 983547t983535983536i983588983527t983589u983542983588 ap983540983537983534s 983538983587983529il983530983543hellip

Introduction agrave lrsquoergonomie

Prototype basse definition31

Cornelia Laros

Introduction agrave lrsquoergonomie

Prototyper cliquable32

Cornelia Laros

Introduction agrave lrsquoergonomie

Prototyper semi-dynamique33

Cornelia Laros

Page Title

1230

Mobile interactions

Observably Sc i$amp

About

Project overiew

Manage sessions

Manage variables

Settings

Start observing

1230 1230

OverviewObserve

Observe mobile interactions in the field to assess dominant hand for holding and interacting with smartphones

10042016Mobile interactionsMobile interactions

Welcome to Observably Gather and manage observation dataGather and manage observation data

My projects

1230

Tags separate with comas

Variable value

Create

Add observablesAdd all observables you want to track for this project You can come back and edit them laterAdd all observables you want to track for this project You can come back and edit them later

Thanks for the hint

Manage variablesMobile InteractionsMobile Interactions

1230

Tags separate with comas

Variable value

Create

Left hand Right thumbLRTLRT

Manage variablesMobile InteractionsMobile Interactions

Irsquom done Start recording

Save changesCancel

Observable Tags separate with coma

Tags separate with comas

3 20

LRILRI

Observable label

Did you knowTap on the icon to customize it Use icons from our library or from your gallery to make variables pop out when observing

Tap on the icon to customize it Use icons from our library or from your gallery to make variables pop out when observing

Thanks for the hint

Left hand Right thumbLRTLRT

Irsquom done Start recording

Manage variablesMobile InteractionsMobile Interactions

Left hand x Right thumb x

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Did you knowIf you make a mistake you can undo your action by tapping on the icon of the taskIf you make a mistake you can undo your action by tapping on the icon of the task

Thanks for the hint

Session 1

Discrete mode New Session

Mobile InteractionsMobile Interactions

1230

Record vocal comment

LRILRILRILRILRILRI

Did you knowYou can record occurences durations and comments by chosing the record format in the drop-down above

You can record occurences durations and comments by chosing the record format in the drop-down above

Thanks for the hint

Discrete mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

Left hand Right thumbLRT

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Did you knowIn list view you can slipe left and right to increment or correct your countIn list view you can slipe left and right to increment or correct your count

Thanks for the hint

Continuous mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

LRILRILRILRILRI

Did you knowIf you make a mistake you can undo your action by tapping on the icon of the taskIf you make a mistake you can undo your action by tapping on the icon of the task

Thanks for the hint

Continuous mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

Tags separate with comas

Comment

Add

Did you know The timestamp of vocal comments is the start time to accurately mark events that triggered your comment

The timestamp of vocal comments is the start time to accurately mark events that triggered your comment

Thanks for the hint

Manage observables

Comments mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Stop recording vocal comment

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Your observationsManage and cleanup sessions before exporting dataManage and cleanup sessions before exporting data

Session ManagementMobile InteractionsMobile Interactions

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

LRT

LRI

RLI

RLT

RRT20

20

8

35

15

Count SummaryCount Summary

RLT

RRT20

815

Time SummaryTime Summary

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

Left hand Right thumbLRTLRT

+1+1

10042016 124627

Left hand Right thumbLRTLRT

2rsquorsquo2rsquorsquo

10042016 124627 - 10042016 124629

Content of my comment boxTag1 Tag2

10042016 124644

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

LRTLRT+1+1

10042016 124627

Save changes

Observable Tags separate with coma

Tags separate with comas

Left hand x Right thumb x

AboutAbout

1230

Observable science provides tools for field research and scientific observation It is tailored to the needs of ethnography human factors psychology usability and games user research

Observable science provides tools for field research and scientific observation It is tailored to the needs of ethnography human factors psychology usability and games user research

Observablyscience

Development by Morgane RadelDesign by Cornelia LarosDevelopment by Morgane RadelDesign by Cornelia Laros

Credits

Support (us)Show your love Rate the App

Make a donation

Contact us

Visit our website

Add session tags to all observations

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

Save changes

Session Tags separate with coma

Tags separate with comas

Metro x Toulouse x

Manage variablesMobile InteractionsMobile Interactions

1230

Left hand Right thumbLRTLRT

Confirm

Search icons

Cancel

Browse

3 20

Observably Sci$amp

1230

Project statisticsProject statistics Total countsTotal time Total comments First entryLast entrySessions

4 963281231

1441201201603042016

97

Project detailsMobile InteractionsMobile Interactions

Sessions SummarySessions Summary

RRT20

815

Count SummaryCount Summary

JUN 14MAY 14APR 14MAR 14FEB 14JAN 14

4

1

65

7

0

2

4

6

8

10

3

2014

Manage sessions

Settings ExportOverview

1230

App optionsDisplay hintsDisplay hints

SettingsSettings

Share anonymous data to improve the appShare anonymous data to improve the app

1230

Gather and manage observation data with ObservablyGather and manage observation data with Observably

Welcome to Observably

Project name

Project description what is the goal of your project

CreateCancel

Session[number]Session[number]

Default Session ID

Default export format txt

Data options

Default Discrete variable lines view

Create a new project

1230

Project detailsMobile InteractionsMobile Interactions

Mobile InteractionsMobile Interactions

Project description what is the goal of your project

SaveCancel

Session[number]Session[number]

Default Session ID

Default export format txt

Data options

Default continuous variables grid view

Project name

Manage sessions

Settings ExportOverview

1230

Project detailsMobile InteractionsMobile Interactions

Manage sessions

Settings ExportOverview

Export format txt

Export data

Data has been successfully exported as MobileInteractionstxt

to your download folder

Observably Sc i$amp

Settings

1230

BUTTONBUTTON

Permissions

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Up exlaborum incididunt quis nostrud exercitatn

COMPONENTS

Pickers

OKCANCEL

13

Friday

MAR

2014

MS W T F ST

30 31

1

16 17 19 20 21 2218

23 24 26 27 28 2925

139 10 12 14 1511

72 3 5 6 84

March 2014

OKCANCEL

PMAM

112

9

10

11

2

48

576

3

330 AM

Notifications

Incoming call

Rachel Ligson

IGNORE ANSWER

REPLYARCHIVE

Hey letrsquos catch up soon Do you want to grab lunch sometime this weekendLet me know when yoursquore free

409 PMHannah ChoHannah Cho

Do you know what I mean509 PMTina McBeanTina McBean

Heads up notification

Regular + Expanded notification

Index scroller

All

Patrick Keenan

Mary Johnson

Tina Santiago

Trevor Hansen

Amar Sagoo

Abbey Christensen

Ali Connors

Alex Nelson

Anthony Stevens

A

A

1230

Abcdefg

Abcdefghijklmno

Tabs

THE THIRDITEM TWONO ONE

THE THIRDITEM TWONO ONE

1230

THE THIRDITEM TWONO ONE

Page Title

1230

121 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

110 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

51 50

Input text for a single line field with a maximu

Single-Line Input Label

31 50

Input text for a single line field with a max

Single-Line Input Label

121 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

110 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

51 50

Input text for a single line field with a maximuInput text for a single line field with a maximu

Single-Line Input Label

31 50

Input text for a single line field with a maxInput text for a single line field with a max

Single-Line Input Label

Disabled text field

Input text

Username or Password is incorrect

Input text

Input tex

Hint text

Hint text

Hint text

Disabled text field

Input textInput text

Username or Password is incorrect

Input textInput text

Input texInput tex

Hint text

Hint text

Hint text

Text fields

Switches and sliders

60

Regular

Pressed

Disabled

60

Regular

Pressed

Disabled

Buttons

DISABLED

PRESSED

NORMAL

DISABLED

PRESSED

NORMAL

Flat Raised

DISABLED

PRESSED

NORMAL

DISABLED

PRESSED

NORMAL

Flat Raised

Toasts

This color applies to both light and dark theme

This item already has the label ldquotravelrdquo You can add a new label

ACTIONSingle-Line Snackbar

Menu

Arial 100

100

Calibri

Courier

Verdana

Arial

Chips

Trevor Hansen

email3emailcom

email2emailcom

primaryemailemailcomContact Name

Dialogs

Desktop

Without title With title

BUTTONBUTTON

PermissionsLorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Up exlaborum incididunt quis nostrud exercitatn

BUTTONBUTTON

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Ut enim ad minim ikad veniam quis nostrud exercitatn ullamco laboris nisi ut aliquip exlaborum incididunt

ACCEPTDECLINEMORE INFO

Permissions

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisinuli

Toolbar

11Roboto

Cards

Welcome BackItrsquos been a while have you read any new books latelyItrsquos been a while have you read any new books lately

YESNOPE

Kangaroo Valley Safari

Located two hours south of Sydney in the

Southern Highlands of New South Wales

LEARN MORESHARE

REVIEWFREE SAMPLE

By Alex Nelson

El Pooch

Pre-fab Homes

Favorite Road Trips

Best Airlines

Campbell

Groceries

almond milk

coconut water

cucumber

green apples

Yuna tickets on sale 624

May 24 2014

Clean desk

Keyboards

suggestion suggestion suggestion

123

a s d f g h j k l

z x c v b n m

q w e r t y u i o p1 2 3 4 5 6 7 8 9 0

suggestion suggestion suggestion

123

a s d f g h j k l

z x c v b n m

q w e r t y u i o p1 2 3 4 5 6 7 8 9 0

Bottom Sheet

Print this page

Copy

Upload

Share

MoreMail Message

Google+Gmail Hangout

Grid

Two lineSupport text

Two lineSupport text

Single line

Single line

Lists

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Three-line itemThree-line item

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Three-line itemThree-line item

Three-line itemThree-line item

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Three-line itemThree-line item

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Three-line itemThree-line item

Three-line itemThree-line item

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Line item unselectedLine item unselected

Line item selectedLine item selected

Line item selectedLine item selected

Data usageData usage

BluetoothBluetooth

Wi-FiWi-Fi

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Single-line itemSingle-line item

Single-line itemSingle-line item

Single-line itemSingle-line itemSingle-line itemSingle-line item

Single-line itemSingle-line item

Single-line itemSingle-line item

Introduction agrave lrsquoergonomie

Ergonomie et Design34

Cornelia Laros

Design Ergonomie Design Ergonomie

Identiteacute

Communication

Ambiance

Exemple un site institutionnel informatif avec une navigation simple et des exigences fortes

drsquoidentiteacuteExemple une application meacutetier destineacutee agrave une

population drsquoutilisateur connue

EfficaciteacuteFonctionnel

Outils

Service en ligne

Architecture de lrsquoinformation contenus bonnes pratiques

Analyse tache vs activiteacute prise en compte globaliseacutee des process

postes de travail eacutecosystegraveme existant hellip puis la conception

Image Usage freacutequent

Usage ponctuel

Votre eacutequipe Ergonome Directeur aristique Webdesigner UX Designer

Introduction agrave lrsquoergonomie

Design avant-tout35

Cornelia Laros

Introduction agrave lrsquoergonomie

Equilibreacute36

Cornelia Laros

Introduction agrave lrsquoergonomie

Ergonomie avant tout37

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

38

Cornelia Laros

text

Lrsquoergonomie sert agravehellip39

Cornelia Laros

1 ameacuteliorer les conditions de travail

2 faire gagner plus drsquoargent agrave lrsquoentreprise

3 ameacuteliorer lrsquoestheacutetique

4 comprendre comment ameacuteliorer un produit

text

Quelles affirmations sont vraies

40

Cornelia Laros

1 Lrsquoergonomie srsquoattache agrave comprendre le travail pour le transformer

2 Il est possible de concevoir une IHM qui fonctionne pour tout le monde en se basant sur des normes

3 Lrsquoutilisateur va se servir de votre produit de la faccedilon dont vous lrsquoavez imagineacute

4 Lrsquoutilisateur interpregravete une tacircche comme un problegraveme qursquoil doit reacutesoudre en faisant avec ses caracteacuteristiques et les moyens mis agrave sa disposition

text

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

41

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

text

D - A quoi sert un prototype

42

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

43

Cornelia Laros

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

44

Cornelia Laros

Utilisabiliteacute

Utiliteacute

Efficaciteacute Efficience

Satisfaction

Introduction agrave lrsquoergonomie

Pyramide des besoins MASLOW

45

Cornelia Laros

Introduction agrave lrsquoergonomie

Pyramide des besoins IHM46

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

47

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

48

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

49

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

50

Cornelia Laros

Introduction agrave lrsquoergonomie

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

51

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

Introduction agrave lrsquoergonomie

D - A quoi sert un prototype

52

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

53

Cornelia Laros

a Fiable

b Intuitif

c Fonctionnel

d Accessible

e Plaisant

f Porteur de sens

Introduction agrave lrsquoergonomie

F - Quel besoin ai-je oublieacute dans la question

preacuteceacutedente

54

Cornelia Laros

text

Patterns amp Dark patterns

55

Cornelia Laros

text

Criteres de Bastien et Scapin56

Cornelia Laros

Guidage

Charge de travail

Controcircle utilisateur explicite

Flexibiliteacute ( adaptabiliteacute)

Gestion des erreurs

Homogeacuteneacuteiteacute ( coheacuterence)

Signifiance des Codes et Deacutenominations

Compatibiliteacute ( familiariteacute)

Introduction agrave lrsquoergonomie

Guidage57

Cornelia Laros

Introduction agrave lrsquoergonomie

Charge de travail58

Cornelia Laros

Introduction agrave lrsquoergonomie

Controle explicite59

Cornelia Laros

Introduction agrave lrsquoergonomie

Controles explicites60

Cornelia Laros

Dar983595 983541983527t983545983589983590n

text

Adaptabiliteacute61

Cornelia Laros

text

Gestion des erreurs62

Cornelia Laros

text

Signifiance des codes et deacutenominations

63

Cornelia Laros

text

Homogeacuteneacuteiteacute - coheacuterence64

Cornelia Laros

text

Homogeacuteneacuteiteacute - Distinction65

Cornelia Laros

text

Compatibiliteacute66

Cornelia Laros

text

Compatibiliteacute67

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction68

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction69

Cornelia Laros

text

Gestalt Theorie70

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Gestalt Theorie71

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Dark patterns72

Cornelia Laros

Introduction agrave lrsquoergonomie

A vous de jouer

73

Cornelia Laros

Introduction agrave lrsquoergonomie

Outils de prototypages DIY74

Cornelia Laros

Low tech papier + crayons post-its cartes agrave jouer

Gratuit en ligne Invision app Moqups UXPin

Mac Sketch Balsamiq Mockups Axure

PC Axure Balsamiq

Mobile Prototyping on Paper

Ap983540983590en983530983555 983592983589 no983547983549983589983537le983543 983581h983586983543983589983588

Introduction agrave lrsquoergonomie

Test de perception DIY75

Cornelia Laros

La premiegravere impression qursquoun utilisateur se fait de votre IHM va influencer tous ses jugements ulteacuterieurs Crsquoest lrsquoeffet de halo

bull Un utilisateur qui a une premiegravere impression positive de votre appli passera plus facilement outre les bugs

bull Une premiegravere impression negative rendra lrsquoutilisateur plus critique vis agrave vis de deacutetails qui confirment son jugement

Cel983527 983538983580983590c983532e 983527983548983588si 983527983549983589983581 vo983543 983586983590983580ux 983591rsquoex983527983538983589983585s vo983543 983530983585t983542983589983546i983530n983543 983592rsquoem983528983527983548983581he 983530983545 983550983587s 983542e983585d983530983555-vo983547983543 983581l983535e983539983546s

Introduction agrave lrsquoergonomie

Test de perception DIY76

Cornelia Laros

Montrer votre prototype agrave quelqursquoun pendant 5 secondes

Demandez-lui

bull Ce qursquoil a vu

bull Ce qursquoil a compris de ce qursquoil a vu

bull Ce qui lrsquoa surpris ou marqueacute

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY77

Cornelia Laros

Les difficulteacutes de navigation se produisent souvent dans les niveaux les plus haut de votre structure de contenu Vous pouvez veacuterifier facilement si la classification logique pour vous lrsquoest aussi pour vos utilisateurs

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY78

Cornelia Laros

Lister trois (max) niveaux de profondeur de votre contenu structureacute Masquez ensuite les contenus de niveau plus bas Utilisez par exemple les groupements de lignes dans excel pour creacuteer des pliers-deacutepliers ou imprimer la liste sur une feuille que vous pliez pour masquer certaines parties

Demandez agrave un utilisateur de vous dire ougrave il penserait trouver un contenu bien preacutecis en preacutecisant qursquoil nrsquoy a pas de bonne reacuteponse

Notez srsquoil va chercher lagrave ougrave vous vous y attendiez ougrave il a heacutesiteacute et ce qursquoil a fini par choisir pour vous aider agrave rendre la navigation plus intuitive

Introduction agrave lrsquoergonomie

Test drsquoutilisabiliteacute DIY79

Cornelia Laros

A chaque nouvelle fonctionnaliteacute ajouteacutee demandez agrave quelqursquoun qui ne connait pas le projet de srsquoen servir Proposez lui une seule tacircche geacuteneacuterique agrave accomplir avec la fonctionnaliteacute

Exemple Tu veux prendre un rendez-vous avec un meacutedecin sur ce site montres-moi comment tu ferais en commentant agrave haute voix

Le plus important ici crsquoest de ne pas reacuteagir agrave ce qursquoil fait mais simplement le regarder faire sans lrsquoaider mecircme srsquoil est bloqueacute

Srsquoil 983540983586983588983589 de983543 983578983547983589s983545i983586983585s reacutepo983539983592983530z 983540983580983590 un983530 983577983548e983588t983534983587983539 o983547 d983535983545e983588 l983547983535 983577u983530 983550983587us 983536983547983535 983590eacutepo983539983592r983530983555 983578983548an983591 983534983537 983580ur983527 fi983539983535 983588rsquoil 983534983539983588983535s983545e Srsquoil 983530983543983546 v983542983580i983593983530n983545 983529l983587983577ueacute di983545983530983588 l983548i 983577983547983589 983550o983547s 983580983536983537ez 983542983530983550983587ir 983549983586983546r983589 983579o983541983534983589 et 983530983543983588983580ye983555 983592983530 c983587983538983541re983539983592r983530 983579983589 983578u983534 l983589 9835316ne

Introduction agrave lrsquoergonomie

Pas besoin de reacuteinventer la roue DIY

80

Cornelia Laros

Il existe des bonnes pratiques qui vous eacuteviteront de reacuteinventer la roue Utilisez des laquo design patterns raquo pour concevoir vos interfaces

Renseignez vous sur la Gestalt Theorie pour agencer vos pages

Utilisez les critegraveres de Bastien et Scapin pour trouver des deacutefauts eacutevidents avant de tester vous en tirerez des enseignements plus inteacuteressants

Ma983534s ccedila crsquoes983545 983541983586983548r u983539983530 983580u983546r983530 983559983587i983588

Introduction agrave lrsquoergonomie

Quizz time

81

Cornelia Laros

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

82

Cornelia Laros

1 c Fonctionnel

2 a Fiable

3 d Accessible

4 b Intuitif

5 e Plaisant

6 f Porteur de sens

text

F - Quel besoin ai-je oublieacute dans la question preacuteceacutedente

83

Cornelia Laros

Uti983536983534983588983580b983536e

Introduction agrave lrsquoergonomie

Tests DIY84

Cornelia Laros

Reacutedigez la proceacutedure pour tester un de vos projets drsquoIHM avec le test de votre choix perception arborescence ou utilisabiliteacute

Notez la question que vous vous posez et la question que vous allez poser

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

Introduction agrave lrsquoergonomie

Ergonomique ne veux rien dire

Pour comprendre revenons aux origineshellip

13

Cornelia Laros

Introduction agrave lrsquoergonomie

Les origines14

Cornelia Laros

1857 1949

1880

1908

1946

Premiegravere utilisation du terme laquo ergonomie raquo par Jastrzebowski Fordisme

Institutionnalisation de la meacutedecine du travail

Le terme laquo ergonomie raquo est employeacute par Murrel

Taylorisme

1987Toyota Production System

XVIIIe Deacuteveloppement de lrsquoapproche productiviste du travail

XVIIe

Premiers eacutecrits et classification des maladies professionnelles

Moyen acircgeEtude des conditions de travail et des facteurs environnementaux

Antiquiteacute

Racines de lrsquoapproche hygieacuteniste du travail

Introduction agrave lrsquoergonomie

Ameacuteliorer agrave la fois la productiviteacute et les

conditions de travailParce qursquoun employeacute motiveacute et en bonne santeacute est plus

productif et tout le monde y gagne

15

Cornelia Laros

Introduction agrave lrsquoergonomie

Inter-discplinariteacute16

Cornelia Laros

Ps983554983581ho983536983586983594983535e

In983531eacuteni983530983542983535e

Ne983547r983587983543983581i983530n983579983589983588

Ph983554983588i983586l983587983531i983530

Meacutede983579983534983585983589

Soc983534983587983536o983594983534983589

Ergonomie

Introduction agrave lrsquoergonomie

Domaines drsquointervention17

Cornelia Laros

Ps983554983581ho983536983586983594983535eIn983531eacuteni983530983542983535e

Ne983547r983587983543983581i983530n983579983589983588

Phi983543983534983587983537og983534983589Meacutede983579983534983585983589

Soc983534983587983536o983594983534983589Ergonomie

Ergonomie physique

Ergonomie organisationnelle

Ergonomie cognitive

Optimisation des situations et postes de travail dans leur

relation avec lrsquoactiviteacute physique

Optimisation des systegravemes socio-techniques structures

organisationnelles regravegles et processus

Optimisation du travail mental perception prise de deacutecision

reacutesolution de problegravemes

Introduction agrave lrsquoergonomie

Domaines drsquointervention18

Cornelia Laros

Organisationnelle 10

Physique 20

Cognitive 70

Introduction agrave lrsquoergonomie

Quizz time

19

Cornelia Laros

text

A - Lrsquoergonomie sert agravehellip20

Cornelia Laros

1 ameacuteliorer les conditions de travail

2 faire gagner plus drsquoargent agrave lrsquoentreprise

3 ameacuteliorer lrsquoestheacutetique

4 comprendre comment ameacuteliorer un produit

text

B - Quelles affirmations sont vraies

21

Cornelia Laros

1 Lrsquoergonomie srsquoattache agrave comprendre le travail pour le transformer

2 Il est possible de concevoir une IHM qui fonctionne pour tout le monde en se basant sur des normes

3 Lrsquoutilisateur va se servir de votre produit de la faccedilon dont vous lrsquoavez imagineacute

4 Lrsquoutilisateur interpregravete une tacircche comme un problegraveme qursquoil doit reacutesoudre en faisant avec ses caracteacuteristiques et les moyens mis agrave sa disposition

text

Pause cafeacute

10 minutes

22

Cornelia Laros

Introduction agrave lrsquoergonomie

Quelques meacutethodes drsquoergonomie

23

Cornelia Laros

Introduction agrave lrsquoergonomie

Ergonomie de conception

24

Cornelia Laros

Ergonomie de correctionbull Analyse drsquoactiviteacute

bull Audit

bull Analyse drsquoeacutevegravenements critiques

bull Analyse de traces

bull Simulation

bull Entretiens

bull Persona cartes drsquoexpeacuteriences

bull Tri par cartes

bull Prototypage

bull Benchmarkhellip

Lrsquoergonomie tout au long du projet

Introduction agrave lrsquoergonomie

Ergonomie de conception

25

Cornelia Laros

Ergonomie de correctionbull Analyse drsquoactiviteacute

bull Audit

bull Analyse drsquoeacutevegravenements critiques

bull Analyse de traces

bull Simulationhellip

bullEntretiens

bullPersona cartes drsquoexpeacuteriences

bullTri par cartes

bullPrototypage

bullBenchmarkhellip

Des meacutethodes de recueil de donneacutees avec utilisateurs finaux et de conception laquo experte raquo

Introduction agrave lrsquoergonomie

Pourquoi ces meacutethodes26

Cornelia Laros

bull Si jrsquoavais demandeacute aux utilisateurs ce qursquoils voulaient ils mrsquoauraient demandeacute un cheval plus rapide - Henri Ford

bull Un comportement laquo sur-appris raquo devient un automatisme inconscient que lrsquoutilisateur ne saura pas expliquer (ex passer les vitesses en conduisant)

bull Le cerveau humain est propice agrave la fabulation (imagination de causes) aux faux souvenirs (en toute bonne fois) les biais (deacutesirabiliteacute effet pygmalion influence socialehellip)

Observer

Introduction agrave lrsquoergonomie

Pourquoi ces meacutethodes27

Cornelia Laros

bull Une imagine est plus parlante que 10 000 mots

bull Permet drsquoeacutevaluer une ideacutee agrave moindre coucirct donc de se tromper souvent et drsquoapprendre plus vite pour valider une ideacutee ou lrsquoameacuteliorer

bull Permet de tester plein drsquoideacutees et de retenir la meilleure

hellip A condition de se focaliser sur un objectif et non sur lrsquoideacutee elle-mecircme

Modeacuteliser

Introduction agrave lrsquoergonomie

Lrsquoensemble permet drsquoeacuteviter ceci

28

Cornelia Laros

Introduction agrave lrsquoergonomie

Lrsquoensemble permet drsquoeacuteviter ceci

29

Cornelia Laros

Eli983538983534983585eacute en 983586983528983588983589r983549a983585t

Eli983538983534983585eacute en 983540983590983586t983587983545983584pa983539983546

Introduction agrave lrsquoergonomie

Prototyper pour vous crsquoesthellip30

Cornelia Laros

CONTRIBUTION AUX SPECIFICATIONS FONCTIONNELLES

Zoning basse fideacuteliteacute wireframe statique (sketch ou non) bull Rapide et peu couteux bull Illustratif statique pas drsquointeraction bull Non engageant sur le design bull Tregraves peu explicite sur le plan fonctionnel

Story-board cliquable bull Illustre la navigation bull Permet de se projeter dans lrsquointeraction bull Pose les bases du design et du fonctionnel

Prototype semi-dynamique bull Se veut complet (ou quasi) sur le plan de la

navigation de lrsquointeraction et des cas drsquoutilisation bull Doit permettre de simuler fidegravelement le

fonctionnement drsquoune application bull Est une speacutecification fonctionnelle en soi

Pha983543983530 983592983589 ca983591983590983527g983589 AM983623983607

Pha983543983530 983592983589 co983539983581983530p983545983535o983585 f983586983539983581t983535o983539983585983530l983536983589

Tes983545983588 983547t983535983536i983588983527t983589u983542983588 ap983540983537983534s 983538983587983529il983530983543hellip

Introduction agrave lrsquoergonomie

Prototype basse definition31

Cornelia Laros

Introduction agrave lrsquoergonomie

Prototyper cliquable32

Cornelia Laros

Introduction agrave lrsquoergonomie

Prototyper semi-dynamique33

Cornelia Laros

Page Title

1230

Mobile interactions

Observably Sc i$amp

About

Project overiew

Manage sessions

Manage variables

Settings

Start observing

1230 1230

OverviewObserve

Observe mobile interactions in the field to assess dominant hand for holding and interacting with smartphones

10042016Mobile interactionsMobile interactions

Welcome to Observably Gather and manage observation dataGather and manage observation data

My projects

1230

Tags separate with comas

Variable value

Create

Add observablesAdd all observables you want to track for this project You can come back and edit them laterAdd all observables you want to track for this project You can come back and edit them later

Thanks for the hint

Manage variablesMobile InteractionsMobile Interactions

1230

Tags separate with comas

Variable value

Create

Left hand Right thumbLRTLRT

Manage variablesMobile InteractionsMobile Interactions

Irsquom done Start recording

Save changesCancel

Observable Tags separate with coma

Tags separate with comas

3 20

LRILRI

Observable label

Did you knowTap on the icon to customize it Use icons from our library or from your gallery to make variables pop out when observing

Tap on the icon to customize it Use icons from our library or from your gallery to make variables pop out when observing

Thanks for the hint

Left hand Right thumbLRTLRT

Irsquom done Start recording

Manage variablesMobile InteractionsMobile Interactions

Left hand x Right thumb x

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Did you knowIf you make a mistake you can undo your action by tapping on the icon of the taskIf you make a mistake you can undo your action by tapping on the icon of the task

Thanks for the hint

Session 1

Discrete mode New Session

Mobile InteractionsMobile Interactions

1230

Record vocal comment

LRILRILRILRILRILRI

Did you knowYou can record occurences durations and comments by chosing the record format in the drop-down above

You can record occurences durations and comments by chosing the record format in the drop-down above

Thanks for the hint

Discrete mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

Left hand Right thumbLRT

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Did you knowIn list view you can slipe left and right to increment or correct your countIn list view you can slipe left and right to increment or correct your count

Thanks for the hint

Continuous mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

LRILRILRILRILRI

Did you knowIf you make a mistake you can undo your action by tapping on the icon of the taskIf you make a mistake you can undo your action by tapping on the icon of the task

Thanks for the hint

Continuous mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

Tags separate with comas

Comment

Add

Did you know The timestamp of vocal comments is the start time to accurately mark events that triggered your comment

The timestamp of vocal comments is the start time to accurately mark events that triggered your comment

Thanks for the hint

Manage observables

Comments mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Stop recording vocal comment

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Your observationsManage and cleanup sessions before exporting dataManage and cleanup sessions before exporting data

Session ManagementMobile InteractionsMobile Interactions

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

LRT

LRI

RLI

RLT

RRT20

20

8

35

15

Count SummaryCount Summary

RLT

RRT20

815

Time SummaryTime Summary

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

Left hand Right thumbLRTLRT

+1+1

10042016 124627

Left hand Right thumbLRTLRT

2rsquorsquo2rsquorsquo

10042016 124627 - 10042016 124629

Content of my comment boxTag1 Tag2

10042016 124644

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

LRTLRT+1+1

10042016 124627

Save changes

Observable Tags separate with coma

Tags separate with comas

Left hand x Right thumb x

AboutAbout

1230

Observable science provides tools for field research and scientific observation It is tailored to the needs of ethnography human factors psychology usability and games user research

Observable science provides tools for field research and scientific observation It is tailored to the needs of ethnography human factors psychology usability and games user research

Observablyscience

Development by Morgane RadelDesign by Cornelia LarosDevelopment by Morgane RadelDesign by Cornelia Laros

Credits

Support (us)Show your love Rate the App

Make a donation

Contact us

Visit our website

Add session tags to all observations

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

Save changes

Session Tags separate with coma

Tags separate with comas

Metro x Toulouse x

Manage variablesMobile InteractionsMobile Interactions

1230

Left hand Right thumbLRTLRT

Confirm

Search icons

Cancel

Browse

3 20

Observably Sci$amp

1230

Project statisticsProject statistics Total countsTotal time Total comments First entryLast entrySessions

4 963281231

1441201201603042016

97

Project detailsMobile InteractionsMobile Interactions

Sessions SummarySessions Summary

RRT20

815

Count SummaryCount Summary

JUN 14MAY 14APR 14MAR 14FEB 14JAN 14

4

1

65

7

0

2

4

6

8

10

3

2014

Manage sessions

Settings ExportOverview

1230

App optionsDisplay hintsDisplay hints

SettingsSettings

Share anonymous data to improve the appShare anonymous data to improve the app

1230

Gather and manage observation data with ObservablyGather and manage observation data with Observably

Welcome to Observably

Project name

Project description what is the goal of your project

CreateCancel

Session[number]Session[number]

Default Session ID

Default export format txt

Data options

Default Discrete variable lines view

Create a new project

1230

Project detailsMobile InteractionsMobile Interactions

Mobile InteractionsMobile Interactions

Project description what is the goal of your project

SaveCancel

Session[number]Session[number]

Default Session ID

Default export format txt

Data options

Default continuous variables grid view

Project name

Manage sessions

Settings ExportOverview

1230

Project detailsMobile InteractionsMobile Interactions

Manage sessions

Settings ExportOverview

Export format txt

Export data

Data has been successfully exported as MobileInteractionstxt

to your download folder

Observably Sc i$amp

Settings

1230

BUTTONBUTTON

Permissions

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Up exlaborum incididunt quis nostrud exercitatn

COMPONENTS

Pickers

OKCANCEL

13

Friday

MAR

2014

MS W T F ST

30 31

1

16 17 19 20 21 2218

23 24 26 27 28 2925

139 10 12 14 1511

72 3 5 6 84

March 2014

OKCANCEL

PMAM

112

9

10

11

2

48

576

3

330 AM

Notifications

Incoming call

Rachel Ligson

IGNORE ANSWER

REPLYARCHIVE

Hey letrsquos catch up soon Do you want to grab lunch sometime this weekendLet me know when yoursquore free

409 PMHannah ChoHannah Cho

Do you know what I mean509 PMTina McBeanTina McBean

Heads up notification

Regular + Expanded notification

Index scroller

All

Patrick Keenan

Mary Johnson

Tina Santiago

Trevor Hansen

Amar Sagoo

Abbey Christensen

Ali Connors

Alex Nelson

Anthony Stevens

A

A

1230

Abcdefg

Abcdefghijklmno

Tabs

THE THIRDITEM TWONO ONE

THE THIRDITEM TWONO ONE

1230

THE THIRDITEM TWONO ONE

Page Title

1230

121 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

110 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

51 50

Input text for a single line field with a maximu

Single-Line Input Label

31 50

Input text for a single line field with a max

Single-Line Input Label

121 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

110 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

51 50

Input text for a single line field with a maximuInput text for a single line field with a maximu

Single-Line Input Label

31 50

Input text for a single line field with a maxInput text for a single line field with a max

Single-Line Input Label

Disabled text field

Input text

Username or Password is incorrect

Input text

Input tex

Hint text

Hint text

Hint text

Disabled text field

Input textInput text

Username or Password is incorrect

Input textInput text

Input texInput tex

Hint text

Hint text

Hint text

Text fields

Switches and sliders

60

Regular

Pressed

Disabled

60

Regular

Pressed

Disabled

Buttons

DISABLED

PRESSED

NORMAL

DISABLED

PRESSED

NORMAL

Flat Raised

DISABLED

PRESSED

NORMAL

DISABLED

PRESSED

NORMAL

Flat Raised

Toasts

This color applies to both light and dark theme

This item already has the label ldquotravelrdquo You can add a new label

ACTIONSingle-Line Snackbar

Menu

Arial 100

100

Calibri

Courier

Verdana

Arial

Chips

Trevor Hansen

email3emailcom

email2emailcom

primaryemailemailcomContact Name

Dialogs

Desktop

Without title With title

BUTTONBUTTON

PermissionsLorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Up exlaborum incididunt quis nostrud exercitatn

BUTTONBUTTON

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Ut enim ad minim ikad veniam quis nostrud exercitatn ullamco laboris nisi ut aliquip exlaborum incididunt

ACCEPTDECLINEMORE INFO

Permissions

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisinuli

Toolbar

11Roboto

Cards

Welcome BackItrsquos been a while have you read any new books latelyItrsquos been a while have you read any new books lately

YESNOPE

Kangaroo Valley Safari

Located two hours south of Sydney in the

Southern Highlands of New South Wales

LEARN MORESHARE

REVIEWFREE SAMPLE

By Alex Nelson

El Pooch

Pre-fab Homes

Favorite Road Trips

Best Airlines

Campbell

Groceries

almond milk

coconut water

cucumber

green apples

Yuna tickets on sale 624

May 24 2014

Clean desk

Keyboards

suggestion suggestion suggestion

123

a s d f g h j k l

z x c v b n m

q w e r t y u i o p1 2 3 4 5 6 7 8 9 0

suggestion suggestion suggestion

123

a s d f g h j k l

z x c v b n m

q w e r t y u i o p1 2 3 4 5 6 7 8 9 0

Bottom Sheet

Print this page

Copy

Upload

Share

MoreMail Message

Google+Gmail Hangout

Grid

Two lineSupport text

Two lineSupport text

Single line

Single line

Lists

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Three-line itemThree-line item

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Three-line itemThree-line item

Three-line itemThree-line item

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Three-line itemThree-line item

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Three-line itemThree-line item

Three-line itemThree-line item

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Line item unselectedLine item unselected

Line item selectedLine item selected

Line item selectedLine item selected

Data usageData usage

BluetoothBluetooth

Wi-FiWi-Fi

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Single-line itemSingle-line item

Single-line itemSingle-line item

Single-line itemSingle-line itemSingle-line itemSingle-line item

Single-line itemSingle-line item

Single-line itemSingle-line item

Introduction agrave lrsquoergonomie

Ergonomie et Design34

Cornelia Laros

Design Ergonomie Design Ergonomie

Identiteacute

Communication

Ambiance

Exemple un site institutionnel informatif avec une navigation simple et des exigences fortes

drsquoidentiteacuteExemple une application meacutetier destineacutee agrave une

population drsquoutilisateur connue

EfficaciteacuteFonctionnel

Outils

Service en ligne

Architecture de lrsquoinformation contenus bonnes pratiques

Analyse tache vs activiteacute prise en compte globaliseacutee des process

postes de travail eacutecosystegraveme existant hellip puis la conception

Image Usage freacutequent

Usage ponctuel

Votre eacutequipe Ergonome Directeur aristique Webdesigner UX Designer

Introduction agrave lrsquoergonomie

Design avant-tout35

Cornelia Laros

Introduction agrave lrsquoergonomie

Equilibreacute36

Cornelia Laros

Introduction agrave lrsquoergonomie

Ergonomie avant tout37

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

38

Cornelia Laros

text

Lrsquoergonomie sert agravehellip39

Cornelia Laros

1 ameacuteliorer les conditions de travail

2 faire gagner plus drsquoargent agrave lrsquoentreprise

3 ameacuteliorer lrsquoestheacutetique

4 comprendre comment ameacuteliorer un produit

text

Quelles affirmations sont vraies

40

Cornelia Laros

1 Lrsquoergonomie srsquoattache agrave comprendre le travail pour le transformer

2 Il est possible de concevoir une IHM qui fonctionne pour tout le monde en se basant sur des normes

3 Lrsquoutilisateur va se servir de votre produit de la faccedilon dont vous lrsquoavez imagineacute

4 Lrsquoutilisateur interpregravete une tacircche comme un problegraveme qursquoil doit reacutesoudre en faisant avec ses caracteacuteristiques et les moyens mis agrave sa disposition

text

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

41

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

text

D - A quoi sert un prototype

42

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

43

Cornelia Laros

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

44

Cornelia Laros

Utilisabiliteacute

Utiliteacute

Efficaciteacute Efficience

Satisfaction

Introduction agrave lrsquoergonomie

Pyramide des besoins MASLOW

45

Cornelia Laros

Introduction agrave lrsquoergonomie

Pyramide des besoins IHM46

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

47

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

48

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

49

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

50

Cornelia Laros

Introduction agrave lrsquoergonomie

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

51

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

Introduction agrave lrsquoergonomie

D - A quoi sert un prototype

52

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

53

Cornelia Laros

a Fiable

b Intuitif

c Fonctionnel

d Accessible

e Plaisant

f Porteur de sens

Introduction agrave lrsquoergonomie

F - Quel besoin ai-je oublieacute dans la question

preacuteceacutedente

54

Cornelia Laros

text

Patterns amp Dark patterns

55

Cornelia Laros

text

Criteres de Bastien et Scapin56

Cornelia Laros

Guidage

Charge de travail

Controcircle utilisateur explicite

Flexibiliteacute ( adaptabiliteacute)

Gestion des erreurs

Homogeacuteneacuteiteacute ( coheacuterence)

Signifiance des Codes et Deacutenominations

Compatibiliteacute ( familiariteacute)

Introduction agrave lrsquoergonomie

Guidage57

Cornelia Laros

Introduction agrave lrsquoergonomie

Charge de travail58

Cornelia Laros

Introduction agrave lrsquoergonomie

Controle explicite59

Cornelia Laros

Introduction agrave lrsquoergonomie

Controles explicites60

Cornelia Laros

Dar983595 983541983527t983545983589983590n

text

Adaptabiliteacute61

Cornelia Laros

text

Gestion des erreurs62

Cornelia Laros

text

Signifiance des codes et deacutenominations

63

Cornelia Laros

text

Homogeacuteneacuteiteacute - coheacuterence64

Cornelia Laros

text

Homogeacuteneacuteiteacute - Distinction65

Cornelia Laros

text

Compatibiliteacute66

Cornelia Laros

text

Compatibiliteacute67

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction68

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction69

Cornelia Laros

text

Gestalt Theorie70

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Gestalt Theorie71

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Dark patterns72

Cornelia Laros

Introduction agrave lrsquoergonomie

A vous de jouer

73

Cornelia Laros

Introduction agrave lrsquoergonomie

Outils de prototypages DIY74

Cornelia Laros

Low tech papier + crayons post-its cartes agrave jouer

Gratuit en ligne Invision app Moqups UXPin

Mac Sketch Balsamiq Mockups Axure

PC Axure Balsamiq

Mobile Prototyping on Paper

Ap983540983590en983530983555 983592983589 no983547983549983589983537le983543 983581h983586983543983589983588

Introduction agrave lrsquoergonomie

Test de perception DIY75

Cornelia Laros

La premiegravere impression qursquoun utilisateur se fait de votre IHM va influencer tous ses jugements ulteacuterieurs Crsquoest lrsquoeffet de halo

bull Un utilisateur qui a une premiegravere impression positive de votre appli passera plus facilement outre les bugs

bull Une premiegravere impression negative rendra lrsquoutilisateur plus critique vis agrave vis de deacutetails qui confirment son jugement

Cel983527 983538983580983590c983532e 983527983548983588si 983527983549983589983581 vo983543 983586983590983580ux 983591rsquoex983527983538983589983585s vo983543 983530983585t983542983589983546i983530n983543 983592rsquoem983528983527983548983581he 983530983545 983550983587s 983542e983585d983530983555-vo983547983543 983581l983535e983539983546s

Introduction agrave lrsquoergonomie

Test de perception DIY76

Cornelia Laros

Montrer votre prototype agrave quelqursquoun pendant 5 secondes

Demandez-lui

bull Ce qursquoil a vu

bull Ce qursquoil a compris de ce qursquoil a vu

bull Ce qui lrsquoa surpris ou marqueacute

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY77

Cornelia Laros

Les difficulteacutes de navigation se produisent souvent dans les niveaux les plus haut de votre structure de contenu Vous pouvez veacuterifier facilement si la classification logique pour vous lrsquoest aussi pour vos utilisateurs

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY78

Cornelia Laros

Lister trois (max) niveaux de profondeur de votre contenu structureacute Masquez ensuite les contenus de niveau plus bas Utilisez par exemple les groupements de lignes dans excel pour creacuteer des pliers-deacutepliers ou imprimer la liste sur une feuille que vous pliez pour masquer certaines parties

Demandez agrave un utilisateur de vous dire ougrave il penserait trouver un contenu bien preacutecis en preacutecisant qursquoil nrsquoy a pas de bonne reacuteponse

Notez srsquoil va chercher lagrave ougrave vous vous y attendiez ougrave il a heacutesiteacute et ce qursquoil a fini par choisir pour vous aider agrave rendre la navigation plus intuitive

Introduction agrave lrsquoergonomie

Test drsquoutilisabiliteacute DIY79

Cornelia Laros

A chaque nouvelle fonctionnaliteacute ajouteacutee demandez agrave quelqursquoun qui ne connait pas le projet de srsquoen servir Proposez lui une seule tacircche geacuteneacuterique agrave accomplir avec la fonctionnaliteacute

Exemple Tu veux prendre un rendez-vous avec un meacutedecin sur ce site montres-moi comment tu ferais en commentant agrave haute voix

Le plus important ici crsquoest de ne pas reacuteagir agrave ce qursquoil fait mais simplement le regarder faire sans lrsquoaider mecircme srsquoil est bloqueacute

Srsquoil 983540983586983588983589 de983543 983578983547983589s983545i983586983585s reacutepo983539983592983530z 983540983580983590 un983530 983577983548e983588t983534983587983539 o983547 d983535983545e983588 l983547983535 983577u983530 983550983587us 983536983547983535 983590eacutepo983539983592r983530983555 983578983548an983591 983534983537 983580ur983527 fi983539983535 983588rsquoil 983534983539983588983535s983545e Srsquoil 983530983543983546 v983542983580i983593983530n983545 983529l983587983577ueacute di983545983530983588 l983548i 983577983547983589 983550o983547s 983580983536983537ez 983542983530983550983587ir 983549983586983546r983589 983579o983541983534983589 et 983530983543983588983580ye983555 983592983530 c983587983538983541re983539983592r983530 983579983589 983578u983534 l983589 9835316ne

Introduction agrave lrsquoergonomie

Pas besoin de reacuteinventer la roue DIY

80

Cornelia Laros

Il existe des bonnes pratiques qui vous eacuteviteront de reacuteinventer la roue Utilisez des laquo design patterns raquo pour concevoir vos interfaces

Renseignez vous sur la Gestalt Theorie pour agencer vos pages

Utilisez les critegraveres de Bastien et Scapin pour trouver des deacutefauts eacutevidents avant de tester vous en tirerez des enseignements plus inteacuteressants

Ma983534s ccedila crsquoes983545 983541983586983548r u983539983530 983580u983546r983530 983559983587i983588

Introduction agrave lrsquoergonomie

Quizz time

81

Cornelia Laros

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

82

Cornelia Laros

1 c Fonctionnel

2 a Fiable

3 d Accessible

4 b Intuitif

5 e Plaisant

6 f Porteur de sens

text

F - Quel besoin ai-je oublieacute dans la question preacuteceacutedente

83

Cornelia Laros

Uti983536983534983588983580b983536e

Introduction agrave lrsquoergonomie

Tests DIY84

Cornelia Laros

Reacutedigez la proceacutedure pour tester un de vos projets drsquoIHM avec le test de votre choix perception arborescence ou utilisabiliteacute

Notez la question que vous vous posez et la question que vous allez poser

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

Introduction agrave lrsquoergonomie

Les origines14

Cornelia Laros

1857 1949

1880

1908

1946

Premiegravere utilisation du terme laquo ergonomie raquo par Jastrzebowski Fordisme

Institutionnalisation de la meacutedecine du travail

Le terme laquo ergonomie raquo est employeacute par Murrel

Taylorisme

1987Toyota Production System

XVIIIe Deacuteveloppement de lrsquoapproche productiviste du travail

XVIIe

Premiers eacutecrits et classification des maladies professionnelles

Moyen acircgeEtude des conditions de travail et des facteurs environnementaux

Antiquiteacute

Racines de lrsquoapproche hygieacuteniste du travail

Introduction agrave lrsquoergonomie

Ameacuteliorer agrave la fois la productiviteacute et les

conditions de travailParce qursquoun employeacute motiveacute et en bonne santeacute est plus

productif et tout le monde y gagne

15

Cornelia Laros

Introduction agrave lrsquoergonomie

Inter-discplinariteacute16

Cornelia Laros

Ps983554983581ho983536983586983594983535e

In983531eacuteni983530983542983535e

Ne983547r983587983543983581i983530n983579983589983588

Ph983554983588i983586l983587983531i983530

Meacutede983579983534983585983589

Soc983534983587983536o983594983534983589

Ergonomie

Introduction agrave lrsquoergonomie

Domaines drsquointervention17

Cornelia Laros

Ps983554983581ho983536983586983594983535eIn983531eacuteni983530983542983535e

Ne983547r983587983543983581i983530n983579983589983588

Phi983543983534983587983537og983534983589Meacutede983579983534983585983589

Soc983534983587983536o983594983534983589Ergonomie

Ergonomie physique

Ergonomie organisationnelle

Ergonomie cognitive

Optimisation des situations et postes de travail dans leur

relation avec lrsquoactiviteacute physique

Optimisation des systegravemes socio-techniques structures

organisationnelles regravegles et processus

Optimisation du travail mental perception prise de deacutecision

reacutesolution de problegravemes

Introduction agrave lrsquoergonomie

Domaines drsquointervention18

Cornelia Laros

Organisationnelle 10

Physique 20

Cognitive 70

Introduction agrave lrsquoergonomie

Quizz time

19

Cornelia Laros

text

A - Lrsquoergonomie sert agravehellip20

Cornelia Laros

1 ameacuteliorer les conditions de travail

2 faire gagner plus drsquoargent agrave lrsquoentreprise

3 ameacuteliorer lrsquoestheacutetique

4 comprendre comment ameacuteliorer un produit

text

B - Quelles affirmations sont vraies

21

Cornelia Laros

1 Lrsquoergonomie srsquoattache agrave comprendre le travail pour le transformer

2 Il est possible de concevoir une IHM qui fonctionne pour tout le monde en se basant sur des normes

3 Lrsquoutilisateur va se servir de votre produit de la faccedilon dont vous lrsquoavez imagineacute

4 Lrsquoutilisateur interpregravete une tacircche comme un problegraveme qursquoil doit reacutesoudre en faisant avec ses caracteacuteristiques et les moyens mis agrave sa disposition

text

Pause cafeacute

10 minutes

22

Cornelia Laros

Introduction agrave lrsquoergonomie

Quelques meacutethodes drsquoergonomie

23

Cornelia Laros

Introduction agrave lrsquoergonomie

Ergonomie de conception

24

Cornelia Laros

Ergonomie de correctionbull Analyse drsquoactiviteacute

bull Audit

bull Analyse drsquoeacutevegravenements critiques

bull Analyse de traces

bull Simulation

bull Entretiens

bull Persona cartes drsquoexpeacuteriences

bull Tri par cartes

bull Prototypage

bull Benchmarkhellip

Lrsquoergonomie tout au long du projet

Introduction agrave lrsquoergonomie

Ergonomie de conception

25

Cornelia Laros

Ergonomie de correctionbull Analyse drsquoactiviteacute

bull Audit

bull Analyse drsquoeacutevegravenements critiques

bull Analyse de traces

bull Simulationhellip

bullEntretiens

bullPersona cartes drsquoexpeacuteriences

bullTri par cartes

bullPrototypage

bullBenchmarkhellip

Des meacutethodes de recueil de donneacutees avec utilisateurs finaux et de conception laquo experte raquo

Introduction agrave lrsquoergonomie

Pourquoi ces meacutethodes26

Cornelia Laros

bull Si jrsquoavais demandeacute aux utilisateurs ce qursquoils voulaient ils mrsquoauraient demandeacute un cheval plus rapide - Henri Ford

bull Un comportement laquo sur-appris raquo devient un automatisme inconscient que lrsquoutilisateur ne saura pas expliquer (ex passer les vitesses en conduisant)

bull Le cerveau humain est propice agrave la fabulation (imagination de causes) aux faux souvenirs (en toute bonne fois) les biais (deacutesirabiliteacute effet pygmalion influence socialehellip)

Observer

Introduction agrave lrsquoergonomie

Pourquoi ces meacutethodes27

Cornelia Laros

bull Une imagine est plus parlante que 10 000 mots

bull Permet drsquoeacutevaluer une ideacutee agrave moindre coucirct donc de se tromper souvent et drsquoapprendre plus vite pour valider une ideacutee ou lrsquoameacuteliorer

bull Permet de tester plein drsquoideacutees et de retenir la meilleure

hellip A condition de se focaliser sur un objectif et non sur lrsquoideacutee elle-mecircme

Modeacuteliser

Introduction agrave lrsquoergonomie

Lrsquoensemble permet drsquoeacuteviter ceci

28

Cornelia Laros

Introduction agrave lrsquoergonomie

Lrsquoensemble permet drsquoeacuteviter ceci

29

Cornelia Laros

Eli983538983534983585eacute en 983586983528983588983589r983549a983585t

Eli983538983534983585eacute en 983540983590983586t983587983545983584pa983539983546

Introduction agrave lrsquoergonomie

Prototyper pour vous crsquoesthellip30

Cornelia Laros

CONTRIBUTION AUX SPECIFICATIONS FONCTIONNELLES

Zoning basse fideacuteliteacute wireframe statique (sketch ou non) bull Rapide et peu couteux bull Illustratif statique pas drsquointeraction bull Non engageant sur le design bull Tregraves peu explicite sur le plan fonctionnel

Story-board cliquable bull Illustre la navigation bull Permet de se projeter dans lrsquointeraction bull Pose les bases du design et du fonctionnel

Prototype semi-dynamique bull Se veut complet (ou quasi) sur le plan de la

navigation de lrsquointeraction et des cas drsquoutilisation bull Doit permettre de simuler fidegravelement le

fonctionnement drsquoune application bull Est une speacutecification fonctionnelle en soi

Pha983543983530 983592983589 ca983591983590983527g983589 AM983623983607

Pha983543983530 983592983589 co983539983581983530p983545983535o983585 f983586983539983581t983535o983539983585983530l983536983589

Tes983545983588 983547t983535983536i983588983527t983589u983542983588 ap983540983537983534s 983538983587983529il983530983543hellip

Introduction agrave lrsquoergonomie

Prototype basse definition31

Cornelia Laros

Introduction agrave lrsquoergonomie

Prototyper cliquable32

Cornelia Laros

Introduction agrave lrsquoergonomie

Prototyper semi-dynamique33

Cornelia Laros

Page Title

1230

Mobile interactions

Observably Sc i$amp

About

Project overiew

Manage sessions

Manage variables

Settings

Start observing

1230 1230

OverviewObserve

Observe mobile interactions in the field to assess dominant hand for holding and interacting with smartphones

10042016Mobile interactionsMobile interactions

Welcome to Observably Gather and manage observation dataGather and manage observation data

My projects

1230

Tags separate with comas

Variable value

Create

Add observablesAdd all observables you want to track for this project You can come back and edit them laterAdd all observables you want to track for this project You can come back and edit them later

Thanks for the hint

Manage variablesMobile InteractionsMobile Interactions

1230

Tags separate with comas

Variable value

Create

Left hand Right thumbLRTLRT

Manage variablesMobile InteractionsMobile Interactions

Irsquom done Start recording

Save changesCancel

Observable Tags separate with coma

Tags separate with comas

3 20

LRILRI

Observable label

Did you knowTap on the icon to customize it Use icons from our library or from your gallery to make variables pop out when observing

Tap on the icon to customize it Use icons from our library or from your gallery to make variables pop out when observing

Thanks for the hint

Left hand Right thumbLRTLRT

Irsquom done Start recording

Manage variablesMobile InteractionsMobile Interactions

Left hand x Right thumb x

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Did you knowIf you make a mistake you can undo your action by tapping on the icon of the taskIf you make a mistake you can undo your action by tapping on the icon of the task

Thanks for the hint

Session 1

Discrete mode New Session

Mobile InteractionsMobile Interactions

1230

Record vocal comment

LRILRILRILRILRILRI

Did you knowYou can record occurences durations and comments by chosing the record format in the drop-down above

You can record occurences durations and comments by chosing the record format in the drop-down above

Thanks for the hint

Discrete mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

Left hand Right thumbLRT

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Did you knowIn list view you can slipe left and right to increment or correct your countIn list view you can slipe left and right to increment or correct your count

Thanks for the hint

Continuous mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

LRILRILRILRILRI

Did you knowIf you make a mistake you can undo your action by tapping on the icon of the taskIf you make a mistake you can undo your action by tapping on the icon of the task

Thanks for the hint

Continuous mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

Tags separate with comas

Comment

Add

Did you know The timestamp of vocal comments is the start time to accurately mark events that triggered your comment

The timestamp of vocal comments is the start time to accurately mark events that triggered your comment

Thanks for the hint

Manage observables

Comments mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Stop recording vocal comment

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Your observationsManage and cleanup sessions before exporting dataManage and cleanup sessions before exporting data

Session ManagementMobile InteractionsMobile Interactions

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

LRT

LRI

RLI

RLT

RRT20

20

8

35

15

Count SummaryCount Summary

RLT

RRT20

815

Time SummaryTime Summary

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

Left hand Right thumbLRTLRT

+1+1

10042016 124627

Left hand Right thumbLRTLRT

2rsquorsquo2rsquorsquo

10042016 124627 - 10042016 124629

Content of my comment boxTag1 Tag2

10042016 124644

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

LRTLRT+1+1

10042016 124627

Save changes

Observable Tags separate with coma

Tags separate with comas

Left hand x Right thumb x

AboutAbout

1230

Observable science provides tools for field research and scientific observation It is tailored to the needs of ethnography human factors psychology usability and games user research

Observable science provides tools for field research and scientific observation It is tailored to the needs of ethnography human factors psychology usability and games user research

Observablyscience

Development by Morgane RadelDesign by Cornelia LarosDevelopment by Morgane RadelDesign by Cornelia Laros

Credits

Support (us)Show your love Rate the App

Make a donation

Contact us

Visit our website

Add session tags to all observations

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

Save changes

Session Tags separate with coma

Tags separate with comas

Metro x Toulouse x

Manage variablesMobile InteractionsMobile Interactions

1230

Left hand Right thumbLRTLRT

Confirm

Search icons

Cancel

Browse

3 20

Observably Sci$amp

1230

Project statisticsProject statistics Total countsTotal time Total comments First entryLast entrySessions

4 963281231

1441201201603042016

97

Project detailsMobile InteractionsMobile Interactions

Sessions SummarySessions Summary

RRT20

815

Count SummaryCount Summary

JUN 14MAY 14APR 14MAR 14FEB 14JAN 14

4

1

65

7

0

2

4

6

8

10

3

2014

Manage sessions

Settings ExportOverview

1230

App optionsDisplay hintsDisplay hints

SettingsSettings

Share anonymous data to improve the appShare anonymous data to improve the app

1230

Gather and manage observation data with ObservablyGather and manage observation data with Observably

Welcome to Observably

Project name

Project description what is the goal of your project

CreateCancel

Session[number]Session[number]

Default Session ID

Default export format txt

Data options

Default Discrete variable lines view

Create a new project

1230

Project detailsMobile InteractionsMobile Interactions

Mobile InteractionsMobile Interactions

Project description what is the goal of your project

SaveCancel

Session[number]Session[number]

Default Session ID

Default export format txt

Data options

Default continuous variables grid view

Project name

Manage sessions

Settings ExportOverview

1230

Project detailsMobile InteractionsMobile Interactions

Manage sessions

Settings ExportOverview

Export format txt

Export data

Data has been successfully exported as MobileInteractionstxt

to your download folder

Observably Sc i$amp

Settings

1230

BUTTONBUTTON

Permissions

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Up exlaborum incididunt quis nostrud exercitatn

COMPONENTS

Pickers

OKCANCEL

13

Friday

MAR

2014

MS W T F ST

30 31

1

16 17 19 20 21 2218

23 24 26 27 28 2925

139 10 12 14 1511

72 3 5 6 84

March 2014

OKCANCEL

PMAM

112

9

10

11

2

48

576

3

330 AM

Notifications

Incoming call

Rachel Ligson

IGNORE ANSWER

REPLYARCHIVE

Hey letrsquos catch up soon Do you want to grab lunch sometime this weekendLet me know when yoursquore free

409 PMHannah ChoHannah Cho

Do you know what I mean509 PMTina McBeanTina McBean

Heads up notification

Regular + Expanded notification

Index scroller

All

Patrick Keenan

Mary Johnson

Tina Santiago

Trevor Hansen

Amar Sagoo

Abbey Christensen

Ali Connors

Alex Nelson

Anthony Stevens

A

A

1230

Abcdefg

Abcdefghijklmno

Tabs

THE THIRDITEM TWONO ONE

THE THIRDITEM TWONO ONE

1230

THE THIRDITEM TWONO ONE

Page Title

1230

121 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

110 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

51 50

Input text for a single line field with a maximu

Single-Line Input Label

31 50

Input text for a single line field with a max

Single-Line Input Label

121 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

110 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

51 50

Input text for a single line field with a maximuInput text for a single line field with a maximu

Single-Line Input Label

31 50

Input text for a single line field with a maxInput text for a single line field with a max

Single-Line Input Label

Disabled text field

Input text

Username or Password is incorrect

Input text

Input tex

Hint text

Hint text

Hint text

Disabled text field

Input textInput text

Username or Password is incorrect

Input textInput text

Input texInput tex

Hint text

Hint text

Hint text

Text fields

Switches and sliders

60

Regular

Pressed

Disabled

60

Regular

Pressed

Disabled

Buttons

DISABLED

PRESSED

NORMAL

DISABLED

PRESSED

NORMAL

Flat Raised

DISABLED

PRESSED

NORMAL

DISABLED

PRESSED

NORMAL

Flat Raised

Toasts

This color applies to both light and dark theme

This item already has the label ldquotravelrdquo You can add a new label

ACTIONSingle-Line Snackbar

Menu

Arial 100

100

Calibri

Courier

Verdana

Arial

Chips

Trevor Hansen

email3emailcom

email2emailcom

primaryemailemailcomContact Name

Dialogs

Desktop

Without title With title

BUTTONBUTTON

PermissionsLorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Up exlaborum incididunt quis nostrud exercitatn

BUTTONBUTTON

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Ut enim ad minim ikad veniam quis nostrud exercitatn ullamco laboris nisi ut aliquip exlaborum incididunt

ACCEPTDECLINEMORE INFO

Permissions

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisinuli

Toolbar

11Roboto

Cards

Welcome BackItrsquos been a while have you read any new books latelyItrsquos been a while have you read any new books lately

YESNOPE

Kangaroo Valley Safari

Located two hours south of Sydney in the

Southern Highlands of New South Wales

LEARN MORESHARE

REVIEWFREE SAMPLE

By Alex Nelson

El Pooch

Pre-fab Homes

Favorite Road Trips

Best Airlines

Campbell

Groceries

almond milk

coconut water

cucumber

green apples

Yuna tickets on sale 624

May 24 2014

Clean desk

Keyboards

suggestion suggestion suggestion

123

a s d f g h j k l

z x c v b n m

q w e r t y u i o p1 2 3 4 5 6 7 8 9 0

suggestion suggestion suggestion

123

a s d f g h j k l

z x c v b n m

q w e r t y u i o p1 2 3 4 5 6 7 8 9 0

Bottom Sheet

Print this page

Copy

Upload

Share

MoreMail Message

Google+Gmail Hangout

Grid

Two lineSupport text

Two lineSupport text

Single line

Single line

Lists

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Three-line itemThree-line item

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Three-line itemThree-line item

Three-line itemThree-line item

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Three-line itemThree-line item

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Three-line itemThree-line item

Three-line itemThree-line item

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Line item unselectedLine item unselected

Line item selectedLine item selected

Line item selectedLine item selected

Data usageData usage

BluetoothBluetooth

Wi-FiWi-Fi

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Single-line itemSingle-line item

Single-line itemSingle-line item

Single-line itemSingle-line itemSingle-line itemSingle-line item

Single-line itemSingle-line item

Single-line itemSingle-line item

Introduction agrave lrsquoergonomie

Ergonomie et Design34

Cornelia Laros

Design Ergonomie Design Ergonomie

Identiteacute

Communication

Ambiance

Exemple un site institutionnel informatif avec une navigation simple et des exigences fortes

drsquoidentiteacuteExemple une application meacutetier destineacutee agrave une

population drsquoutilisateur connue

EfficaciteacuteFonctionnel

Outils

Service en ligne

Architecture de lrsquoinformation contenus bonnes pratiques

Analyse tache vs activiteacute prise en compte globaliseacutee des process

postes de travail eacutecosystegraveme existant hellip puis la conception

Image Usage freacutequent

Usage ponctuel

Votre eacutequipe Ergonome Directeur aristique Webdesigner UX Designer

Introduction agrave lrsquoergonomie

Design avant-tout35

Cornelia Laros

Introduction agrave lrsquoergonomie

Equilibreacute36

Cornelia Laros

Introduction agrave lrsquoergonomie

Ergonomie avant tout37

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

38

Cornelia Laros

text

Lrsquoergonomie sert agravehellip39

Cornelia Laros

1 ameacuteliorer les conditions de travail

2 faire gagner plus drsquoargent agrave lrsquoentreprise

3 ameacuteliorer lrsquoestheacutetique

4 comprendre comment ameacuteliorer un produit

text

Quelles affirmations sont vraies

40

Cornelia Laros

1 Lrsquoergonomie srsquoattache agrave comprendre le travail pour le transformer

2 Il est possible de concevoir une IHM qui fonctionne pour tout le monde en se basant sur des normes

3 Lrsquoutilisateur va se servir de votre produit de la faccedilon dont vous lrsquoavez imagineacute

4 Lrsquoutilisateur interpregravete une tacircche comme un problegraveme qursquoil doit reacutesoudre en faisant avec ses caracteacuteristiques et les moyens mis agrave sa disposition

text

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

41

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

text

D - A quoi sert un prototype

42

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

43

Cornelia Laros

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

44

Cornelia Laros

Utilisabiliteacute

Utiliteacute

Efficaciteacute Efficience

Satisfaction

Introduction agrave lrsquoergonomie

Pyramide des besoins MASLOW

45

Cornelia Laros

Introduction agrave lrsquoergonomie

Pyramide des besoins IHM46

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

47

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

48

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

49

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

50

Cornelia Laros

Introduction agrave lrsquoergonomie

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

51

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

Introduction agrave lrsquoergonomie

D - A quoi sert un prototype

52

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

53

Cornelia Laros

a Fiable

b Intuitif

c Fonctionnel

d Accessible

e Plaisant

f Porteur de sens

Introduction agrave lrsquoergonomie

F - Quel besoin ai-je oublieacute dans la question

preacuteceacutedente

54

Cornelia Laros

text

Patterns amp Dark patterns

55

Cornelia Laros

text

Criteres de Bastien et Scapin56

Cornelia Laros

Guidage

Charge de travail

Controcircle utilisateur explicite

Flexibiliteacute ( adaptabiliteacute)

Gestion des erreurs

Homogeacuteneacuteiteacute ( coheacuterence)

Signifiance des Codes et Deacutenominations

Compatibiliteacute ( familiariteacute)

Introduction agrave lrsquoergonomie

Guidage57

Cornelia Laros

Introduction agrave lrsquoergonomie

Charge de travail58

Cornelia Laros

Introduction agrave lrsquoergonomie

Controle explicite59

Cornelia Laros

Introduction agrave lrsquoergonomie

Controles explicites60

Cornelia Laros

Dar983595 983541983527t983545983589983590n

text

Adaptabiliteacute61

Cornelia Laros

text

Gestion des erreurs62

Cornelia Laros

text

Signifiance des codes et deacutenominations

63

Cornelia Laros

text

Homogeacuteneacuteiteacute - coheacuterence64

Cornelia Laros

text

Homogeacuteneacuteiteacute - Distinction65

Cornelia Laros

text

Compatibiliteacute66

Cornelia Laros

text

Compatibiliteacute67

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction68

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction69

Cornelia Laros

text

Gestalt Theorie70

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Gestalt Theorie71

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Dark patterns72

Cornelia Laros

Introduction agrave lrsquoergonomie

A vous de jouer

73

Cornelia Laros

Introduction agrave lrsquoergonomie

Outils de prototypages DIY74

Cornelia Laros

Low tech papier + crayons post-its cartes agrave jouer

Gratuit en ligne Invision app Moqups UXPin

Mac Sketch Balsamiq Mockups Axure

PC Axure Balsamiq

Mobile Prototyping on Paper

Ap983540983590en983530983555 983592983589 no983547983549983589983537le983543 983581h983586983543983589983588

Introduction agrave lrsquoergonomie

Test de perception DIY75

Cornelia Laros

La premiegravere impression qursquoun utilisateur se fait de votre IHM va influencer tous ses jugements ulteacuterieurs Crsquoest lrsquoeffet de halo

bull Un utilisateur qui a une premiegravere impression positive de votre appli passera plus facilement outre les bugs

bull Une premiegravere impression negative rendra lrsquoutilisateur plus critique vis agrave vis de deacutetails qui confirment son jugement

Cel983527 983538983580983590c983532e 983527983548983588si 983527983549983589983581 vo983543 983586983590983580ux 983591rsquoex983527983538983589983585s vo983543 983530983585t983542983589983546i983530n983543 983592rsquoem983528983527983548983581he 983530983545 983550983587s 983542e983585d983530983555-vo983547983543 983581l983535e983539983546s

Introduction agrave lrsquoergonomie

Test de perception DIY76

Cornelia Laros

Montrer votre prototype agrave quelqursquoun pendant 5 secondes

Demandez-lui

bull Ce qursquoil a vu

bull Ce qursquoil a compris de ce qursquoil a vu

bull Ce qui lrsquoa surpris ou marqueacute

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY77

Cornelia Laros

Les difficulteacutes de navigation se produisent souvent dans les niveaux les plus haut de votre structure de contenu Vous pouvez veacuterifier facilement si la classification logique pour vous lrsquoest aussi pour vos utilisateurs

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY78

Cornelia Laros

Lister trois (max) niveaux de profondeur de votre contenu structureacute Masquez ensuite les contenus de niveau plus bas Utilisez par exemple les groupements de lignes dans excel pour creacuteer des pliers-deacutepliers ou imprimer la liste sur une feuille que vous pliez pour masquer certaines parties

Demandez agrave un utilisateur de vous dire ougrave il penserait trouver un contenu bien preacutecis en preacutecisant qursquoil nrsquoy a pas de bonne reacuteponse

Notez srsquoil va chercher lagrave ougrave vous vous y attendiez ougrave il a heacutesiteacute et ce qursquoil a fini par choisir pour vous aider agrave rendre la navigation plus intuitive

Introduction agrave lrsquoergonomie

Test drsquoutilisabiliteacute DIY79

Cornelia Laros

A chaque nouvelle fonctionnaliteacute ajouteacutee demandez agrave quelqursquoun qui ne connait pas le projet de srsquoen servir Proposez lui une seule tacircche geacuteneacuterique agrave accomplir avec la fonctionnaliteacute

Exemple Tu veux prendre un rendez-vous avec un meacutedecin sur ce site montres-moi comment tu ferais en commentant agrave haute voix

Le plus important ici crsquoest de ne pas reacuteagir agrave ce qursquoil fait mais simplement le regarder faire sans lrsquoaider mecircme srsquoil est bloqueacute

Srsquoil 983540983586983588983589 de983543 983578983547983589s983545i983586983585s reacutepo983539983592983530z 983540983580983590 un983530 983577983548e983588t983534983587983539 o983547 d983535983545e983588 l983547983535 983577u983530 983550983587us 983536983547983535 983590eacutepo983539983592r983530983555 983578983548an983591 983534983537 983580ur983527 fi983539983535 983588rsquoil 983534983539983588983535s983545e Srsquoil 983530983543983546 v983542983580i983593983530n983545 983529l983587983577ueacute di983545983530983588 l983548i 983577983547983589 983550o983547s 983580983536983537ez 983542983530983550983587ir 983549983586983546r983589 983579o983541983534983589 et 983530983543983588983580ye983555 983592983530 c983587983538983541re983539983592r983530 983579983589 983578u983534 l983589 9835316ne

Introduction agrave lrsquoergonomie

Pas besoin de reacuteinventer la roue DIY

80

Cornelia Laros

Il existe des bonnes pratiques qui vous eacuteviteront de reacuteinventer la roue Utilisez des laquo design patterns raquo pour concevoir vos interfaces

Renseignez vous sur la Gestalt Theorie pour agencer vos pages

Utilisez les critegraveres de Bastien et Scapin pour trouver des deacutefauts eacutevidents avant de tester vous en tirerez des enseignements plus inteacuteressants

Ma983534s ccedila crsquoes983545 983541983586983548r u983539983530 983580u983546r983530 983559983587i983588

Introduction agrave lrsquoergonomie

Quizz time

81

Cornelia Laros

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

82

Cornelia Laros

1 c Fonctionnel

2 a Fiable

3 d Accessible

4 b Intuitif

5 e Plaisant

6 f Porteur de sens

text

F - Quel besoin ai-je oublieacute dans la question preacuteceacutedente

83

Cornelia Laros

Uti983536983534983588983580b983536e

Introduction agrave lrsquoergonomie

Tests DIY84

Cornelia Laros

Reacutedigez la proceacutedure pour tester un de vos projets drsquoIHM avec le test de votre choix perception arborescence ou utilisabiliteacute

Notez la question que vous vous posez et la question que vous allez poser

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

Introduction agrave lrsquoergonomie

Ameacuteliorer agrave la fois la productiviteacute et les

conditions de travailParce qursquoun employeacute motiveacute et en bonne santeacute est plus

productif et tout le monde y gagne

15

Cornelia Laros

Introduction agrave lrsquoergonomie

Inter-discplinariteacute16

Cornelia Laros

Ps983554983581ho983536983586983594983535e

In983531eacuteni983530983542983535e

Ne983547r983587983543983581i983530n983579983589983588

Ph983554983588i983586l983587983531i983530

Meacutede983579983534983585983589

Soc983534983587983536o983594983534983589

Ergonomie

Introduction agrave lrsquoergonomie

Domaines drsquointervention17

Cornelia Laros

Ps983554983581ho983536983586983594983535eIn983531eacuteni983530983542983535e

Ne983547r983587983543983581i983530n983579983589983588

Phi983543983534983587983537og983534983589Meacutede983579983534983585983589

Soc983534983587983536o983594983534983589Ergonomie

Ergonomie physique

Ergonomie organisationnelle

Ergonomie cognitive

Optimisation des situations et postes de travail dans leur

relation avec lrsquoactiviteacute physique

Optimisation des systegravemes socio-techniques structures

organisationnelles regravegles et processus

Optimisation du travail mental perception prise de deacutecision

reacutesolution de problegravemes

Introduction agrave lrsquoergonomie

Domaines drsquointervention18

Cornelia Laros

Organisationnelle 10

Physique 20

Cognitive 70

Introduction agrave lrsquoergonomie

Quizz time

19

Cornelia Laros

text

A - Lrsquoergonomie sert agravehellip20

Cornelia Laros

1 ameacuteliorer les conditions de travail

2 faire gagner plus drsquoargent agrave lrsquoentreprise

3 ameacuteliorer lrsquoestheacutetique

4 comprendre comment ameacuteliorer un produit

text

B - Quelles affirmations sont vraies

21

Cornelia Laros

1 Lrsquoergonomie srsquoattache agrave comprendre le travail pour le transformer

2 Il est possible de concevoir une IHM qui fonctionne pour tout le monde en se basant sur des normes

3 Lrsquoutilisateur va se servir de votre produit de la faccedilon dont vous lrsquoavez imagineacute

4 Lrsquoutilisateur interpregravete une tacircche comme un problegraveme qursquoil doit reacutesoudre en faisant avec ses caracteacuteristiques et les moyens mis agrave sa disposition

text

Pause cafeacute

10 minutes

22

Cornelia Laros

Introduction agrave lrsquoergonomie

Quelques meacutethodes drsquoergonomie

23

Cornelia Laros

Introduction agrave lrsquoergonomie

Ergonomie de conception

24

Cornelia Laros

Ergonomie de correctionbull Analyse drsquoactiviteacute

bull Audit

bull Analyse drsquoeacutevegravenements critiques

bull Analyse de traces

bull Simulation

bull Entretiens

bull Persona cartes drsquoexpeacuteriences

bull Tri par cartes

bull Prototypage

bull Benchmarkhellip

Lrsquoergonomie tout au long du projet

Introduction agrave lrsquoergonomie

Ergonomie de conception

25

Cornelia Laros

Ergonomie de correctionbull Analyse drsquoactiviteacute

bull Audit

bull Analyse drsquoeacutevegravenements critiques

bull Analyse de traces

bull Simulationhellip

bullEntretiens

bullPersona cartes drsquoexpeacuteriences

bullTri par cartes

bullPrototypage

bullBenchmarkhellip

Des meacutethodes de recueil de donneacutees avec utilisateurs finaux et de conception laquo experte raquo

Introduction agrave lrsquoergonomie

Pourquoi ces meacutethodes26

Cornelia Laros

bull Si jrsquoavais demandeacute aux utilisateurs ce qursquoils voulaient ils mrsquoauraient demandeacute un cheval plus rapide - Henri Ford

bull Un comportement laquo sur-appris raquo devient un automatisme inconscient que lrsquoutilisateur ne saura pas expliquer (ex passer les vitesses en conduisant)

bull Le cerveau humain est propice agrave la fabulation (imagination de causes) aux faux souvenirs (en toute bonne fois) les biais (deacutesirabiliteacute effet pygmalion influence socialehellip)

Observer

Introduction agrave lrsquoergonomie

Pourquoi ces meacutethodes27

Cornelia Laros

bull Une imagine est plus parlante que 10 000 mots

bull Permet drsquoeacutevaluer une ideacutee agrave moindre coucirct donc de se tromper souvent et drsquoapprendre plus vite pour valider une ideacutee ou lrsquoameacuteliorer

bull Permet de tester plein drsquoideacutees et de retenir la meilleure

hellip A condition de se focaliser sur un objectif et non sur lrsquoideacutee elle-mecircme

Modeacuteliser

Introduction agrave lrsquoergonomie

Lrsquoensemble permet drsquoeacuteviter ceci

28

Cornelia Laros

Introduction agrave lrsquoergonomie

Lrsquoensemble permet drsquoeacuteviter ceci

29

Cornelia Laros

Eli983538983534983585eacute en 983586983528983588983589r983549a983585t

Eli983538983534983585eacute en 983540983590983586t983587983545983584pa983539983546

Introduction agrave lrsquoergonomie

Prototyper pour vous crsquoesthellip30

Cornelia Laros

CONTRIBUTION AUX SPECIFICATIONS FONCTIONNELLES

Zoning basse fideacuteliteacute wireframe statique (sketch ou non) bull Rapide et peu couteux bull Illustratif statique pas drsquointeraction bull Non engageant sur le design bull Tregraves peu explicite sur le plan fonctionnel

Story-board cliquable bull Illustre la navigation bull Permet de se projeter dans lrsquointeraction bull Pose les bases du design et du fonctionnel

Prototype semi-dynamique bull Se veut complet (ou quasi) sur le plan de la

navigation de lrsquointeraction et des cas drsquoutilisation bull Doit permettre de simuler fidegravelement le

fonctionnement drsquoune application bull Est une speacutecification fonctionnelle en soi

Pha983543983530 983592983589 ca983591983590983527g983589 AM983623983607

Pha983543983530 983592983589 co983539983581983530p983545983535o983585 f983586983539983581t983535o983539983585983530l983536983589

Tes983545983588 983547t983535983536i983588983527t983589u983542983588 ap983540983537983534s 983538983587983529il983530983543hellip

Introduction agrave lrsquoergonomie

Prototype basse definition31

Cornelia Laros

Introduction agrave lrsquoergonomie

Prototyper cliquable32

Cornelia Laros

Introduction agrave lrsquoergonomie

Prototyper semi-dynamique33

Cornelia Laros

Page Title

1230

Mobile interactions

Observably Sc i$amp

About

Project overiew

Manage sessions

Manage variables

Settings

Start observing

1230 1230

OverviewObserve

Observe mobile interactions in the field to assess dominant hand for holding and interacting with smartphones

10042016Mobile interactionsMobile interactions

Welcome to Observably Gather and manage observation dataGather and manage observation data

My projects

1230

Tags separate with comas

Variable value

Create

Add observablesAdd all observables you want to track for this project You can come back and edit them laterAdd all observables you want to track for this project You can come back and edit them later

Thanks for the hint

Manage variablesMobile InteractionsMobile Interactions

1230

Tags separate with comas

Variable value

Create

Left hand Right thumbLRTLRT

Manage variablesMobile InteractionsMobile Interactions

Irsquom done Start recording

Save changesCancel

Observable Tags separate with coma

Tags separate with comas

3 20

LRILRI

Observable label

Did you knowTap on the icon to customize it Use icons from our library or from your gallery to make variables pop out when observing

Tap on the icon to customize it Use icons from our library or from your gallery to make variables pop out when observing

Thanks for the hint

Left hand Right thumbLRTLRT

Irsquom done Start recording

Manage variablesMobile InteractionsMobile Interactions

Left hand x Right thumb x

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Did you knowIf you make a mistake you can undo your action by tapping on the icon of the taskIf you make a mistake you can undo your action by tapping on the icon of the task

Thanks for the hint

Session 1

Discrete mode New Session

Mobile InteractionsMobile Interactions

1230

Record vocal comment

LRILRILRILRILRILRI

Did you knowYou can record occurences durations and comments by chosing the record format in the drop-down above

You can record occurences durations and comments by chosing the record format in the drop-down above

Thanks for the hint

Discrete mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

Left hand Right thumbLRT

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Did you knowIn list view you can slipe left and right to increment or correct your countIn list view you can slipe left and right to increment or correct your count

Thanks for the hint

Continuous mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

LRILRILRILRILRI

Did you knowIf you make a mistake you can undo your action by tapping on the icon of the taskIf you make a mistake you can undo your action by tapping on the icon of the task

Thanks for the hint

Continuous mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

Tags separate with comas

Comment

Add

Did you know The timestamp of vocal comments is the start time to accurately mark events that triggered your comment

The timestamp of vocal comments is the start time to accurately mark events that triggered your comment

Thanks for the hint

Manage observables

Comments mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Stop recording vocal comment

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Your observationsManage and cleanup sessions before exporting dataManage and cleanup sessions before exporting data

Session ManagementMobile InteractionsMobile Interactions

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

LRT

LRI

RLI

RLT

RRT20

20

8

35

15

Count SummaryCount Summary

RLT

RRT20

815

Time SummaryTime Summary

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

Left hand Right thumbLRTLRT

+1+1

10042016 124627

Left hand Right thumbLRTLRT

2rsquorsquo2rsquorsquo

10042016 124627 - 10042016 124629

Content of my comment boxTag1 Tag2

10042016 124644

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

LRTLRT+1+1

10042016 124627

Save changes

Observable Tags separate with coma

Tags separate with comas

Left hand x Right thumb x

AboutAbout

1230

Observable science provides tools for field research and scientific observation It is tailored to the needs of ethnography human factors psychology usability and games user research

Observable science provides tools for field research and scientific observation It is tailored to the needs of ethnography human factors psychology usability and games user research

Observablyscience

Development by Morgane RadelDesign by Cornelia LarosDevelopment by Morgane RadelDesign by Cornelia Laros

Credits

Support (us)Show your love Rate the App

Make a donation

Contact us

Visit our website

Add session tags to all observations

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

Save changes

Session Tags separate with coma

Tags separate with comas

Metro x Toulouse x

Manage variablesMobile InteractionsMobile Interactions

1230

Left hand Right thumbLRTLRT

Confirm

Search icons

Cancel

Browse

3 20

Observably Sci$amp

1230

Project statisticsProject statistics Total countsTotal time Total comments First entryLast entrySessions

4 963281231

1441201201603042016

97

Project detailsMobile InteractionsMobile Interactions

Sessions SummarySessions Summary

RRT20

815

Count SummaryCount Summary

JUN 14MAY 14APR 14MAR 14FEB 14JAN 14

4

1

65

7

0

2

4

6

8

10

3

2014

Manage sessions

Settings ExportOverview

1230

App optionsDisplay hintsDisplay hints

SettingsSettings

Share anonymous data to improve the appShare anonymous data to improve the app

1230

Gather and manage observation data with ObservablyGather and manage observation data with Observably

Welcome to Observably

Project name

Project description what is the goal of your project

CreateCancel

Session[number]Session[number]

Default Session ID

Default export format txt

Data options

Default Discrete variable lines view

Create a new project

1230

Project detailsMobile InteractionsMobile Interactions

Mobile InteractionsMobile Interactions

Project description what is the goal of your project

SaveCancel

Session[number]Session[number]

Default Session ID

Default export format txt

Data options

Default continuous variables grid view

Project name

Manage sessions

Settings ExportOverview

1230

Project detailsMobile InteractionsMobile Interactions

Manage sessions

Settings ExportOverview

Export format txt

Export data

Data has been successfully exported as MobileInteractionstxt

to your download folder

Observably Sc i$amp

Settings

1230

BUTTONBUTTON

Permissions

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Up exlaborum incididunt quis nostrud exercitatn

COMPONENTS

Pickers

OKCANCEL

13

Friday

MAR

2014

MS W T F ST

30 31

1

16 17 19 20 21 2218

23 24 26 27 28 2925

139 10 12 14 1511

72 3 5 6 84

March 2014

OKCANCEL

PMAM

112

9

10

11

2

48

576

3

330 AM

Notifications

Incoming call

Rachel Ligson

IGNORE ANSWER

REPLYARCHIVE

Hey letrsquos catch up soon Do you want to grab lunch sometime this weekendLet me know when yoursquore free

409 PMHannah ChoHannah Cho

Do you know what I mean509 PMTina McBeanTina McBean

Heads up notification

Regular + Expanded notification

Index scroller

All

Patrick Keenan

Mary Johnson

Tina Santiago

Trevor Hansen

Amar Sagoo

Abbey Christensen

Ali Connors

Alex Nelson

Anthony Stevens

A

A

1230

Abcdefg

Abcdefghijklmno

Tabs

THE THIRDITEM TWONO ONE

THE THIRDITEM TWONO ONE

1230

THE THIRDITEM TWONO ONE

Page Title

1230

121 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

110 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

51 50

Input text for a single line field with a maximu

Single-Line Input Label

31 50

Input text for a single line field with a max

Single-Line Input Label

121 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

110 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

51 50

Input text for a single line field with a maximuInput text for a single line field with a maximu

Single-Line Input Label

31 50

Input text for a single line field with a maxInput text for a single line field with a max

Single-Line Input Label

Disabled text field

Input text

Username or Password is incorrect

Input text

Input tex

Hint text

Hint text

Hint text

Disabled text field

Input textInput text

Username or Password is incorrect

Input textInput text

Input texInput tex

Hint text

Hint text

Hint text

Text fields

Switches and sliders

60

Regular

Pressed

Disabled

60

Regular

Pressed

Disabled

Buttons

DISABLED

PRESSED

NORMAL

DISABLED

PRESSED

NORMAL

Flat Raised

DISABLED

PRESSED

NORMAL

DISABLED

PRESSED

NORMAL

Flat Raised

Toasts

This color applies to both light and dark theme

This item already has the label ldquotravelrdquo You can add a new label

ACTIONSingle-Line Snackbar

Menu

Arial 100

100

Calibri

Courier

Verdana

Arial

Chips

Trevor Hansen

email3emailcom

email2emailcom

primaryemailemailcomContact Name

Dialogs

Desktop

Without title With title

BUTTONBUTTON

PermissionsLorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Up exlaborum incididunt quis nostrud exercitatn

BUTTONBUTTON

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Ut enim ad minim ikad veniam quis nostrud exercitatn ullamco laboris nisi ut aliquip exlaborum incididunt

ACCEPTDECLINEMORE INFO

Permissions

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisinuli

Toolbar

11Roboto

Cards

Welcome BackItrsquos been a while have you read any new books latelyItrsquos been a while have you read any new books lately

YESNOPE

Kangaroo Valley Safari

Located two hours south of Sydney in the

Southern Highlands of New South Wales

LEARN MORESHARE

REVIEWFREE SAMPLE

By Alex Nelson

El Pooch

Pre-fab Homes

Favorite Road Trips

Best Airlines

Campbell

Groceries

almond milk

coconut water

cucumber

green apples

Yuna tickets on sale 624

May 24 2014

Clean desk

Keyboards

suggestion suggestion suggestion

123

a s d f g h j k l

z x c v b n m

q w e r t y u i o p1 2 3 4 5 6 7 8 9 0

suggestion suggestion suggestion

123

a s d f g h j k l

z x c v b n m

q w e r t y u i o p1 2 3 4 5 6 7 8 9 0

Bottom Sheet

Print this page

Copy

Upload

Share

MoreMail Message

Google+Gmail Hangout

Grid

Two lineSupport text

Two lineSupport text

Single line

Single line

Lists

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Three-line itemThree-line item

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Three-line itemThree-line item

Three-line itemThree-line item

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Three-line itemThree-line item

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Three-line itemThree-line item

Three-line itemThree-line item

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Line item unselectedLine item unselected

Line item selectedLine item selected

Line item selectedLine item selected

Data usageData usage

BluetoothBluetooth

Wi-FiWi-Fi

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Single-line itemSingle-line item

Single-line itemSingle-line item

Single-line itemSingle-line itemSingle-line itemSingle-line item

Single-line itemSingle-line item

Single-line itemSingle-line item

Introduction agrave lrsquoergonomie

Ergonomie et Design34

Cornelia Laros

Design Ergonomie Design Ergonomie

Identiteacute

Communication

Ambiance

Exemple un site institutionnel informatif avec une navigation simple et des exigences fortes

drsquoidentiteacuteExemple une application meacutetier destineacutee agrave une

population drsquoutilisateur connue

EfficaciteacuteFonctionnel

Outils

Service en ligne

Architecture de lrsquoinformation contenus bonnes pratiques

Analyse tache vs activiteacute prise en compte globaliseacutee des process

postes de travail eacutecosystegraveme existant hellip puis la conception

Image Usage freacutequent

Usage ponctuel

Votre eacutequipe Ergonome Directeur aristique Webdesigner UX Designer

Introduction agrave lrsquoergonomie

Design avant-tout35

Cornelia Laros

Introduction agrave lrsquoergonomie

Equilibreacute36

Cornelia Laros

Introduction agrave lrsquoergonomie

Ergonomie avant tout37

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

38

Cornelia Laros

text

Lrsquoergonomie sert agravehellip39

Cornelia Laros

1 ameacuteliorer les conditions de travail

2 faire gagner plus drsquoargent agrave lrsquoentreprise

3 ameacuteliorer lrsquoestheacutetique

4 comprendre comment ameacuteliorer un produit

text

Quelles affirmations sont vraies

40

Cornelia Laros

1 Lrsquoergonomie srsquoattache agrave comprendre le travail pour le transformer

2 Il est possible de concevoir une IHM qui fonctionne pour tout le monde en se basant sur des normes

3 Lrsquoutilisateur va se servir de votre produit de la faccedilon dont vous lrsquoavez imagineacute

4 Lrsquoutilisateur interpregravete une tacircche comme un problegraveme qursquoil doit reacutesoudre en faisant avec ses caracteacuteristiques et les moyens mis agrave sa disposition

text

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

41

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

text

D - A quoi sert un prototype

42

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

43

Cornelia Laros

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

44

Cornelia Laros

Utilisabiliteacute

Utiliteacute

Efficaciteacute Efficience

Satisfaction

Introduction agrave lrsquoergonomie

Pyramide des besoins MASLOW

45

Cornelia Laros

Introduction agrave lrsquoergonomie

Pyramide des besoins IHM46

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

47

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

48

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

49

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

50

Cornelia Laros

Introduction agrave lrsquoergonomie

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

51

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

Introduction agrave lrsquoergonomie

D - A quoi sert un prototype

52

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

53

Cornelia Laros

a Fiable

b Intuitif

c Fonctionnel

d Accessible

e Plaisant

f Porteur de sens

Introduction agrave lrsquoergonomie

F - Quel besoin ai-je oublieacute dans la question

preacuteceacutedente

54

Cornelia Laros

text

Patterns amp Dark patterns

55

Cornelia Laros

text

Criteres de Bastien et Scapin56

Cornelia Laros

Guidage

Charge de travail

Controcircle utilisateur explicite

Flexibiliteacute ( adaptabiliteacute)

Gestion des erreurs

Homogeacuteneacuteiteacute ( coheacuterence)

Signifiance des Codes et Deacutenominations

Compatibiliteacute ( familiariteacute)

Introduction agrave lrsquoergonomie

Guidage57

Cornelia Laros

Introduction agrave lrsquoergonomie

Charge de travail58

Cornelia Laros

Introduction agrave lrsquoergonomie

Controle explicite59

Cornelia Laros

Introduction agrave lrsquoergonomie

Controles explicites60

Cornelia Laros

Dar983595 983541983527t983545983589983590n

text

Adaptabiliteacute61

Cornelia Laros

text

Gestion des erreurs62

Cornelia Laros

text

Signifiance des codes et deacutenominations

63

Cornelia Laros

text

Homogeacuteneacuteiteacute - coheacuterence64

Cornelia Laros

text

Homogeacuteneacuteiteacute - Distinction65

Cornelia Laros

text

Compatibiliteacute66

Cornelia Laros

text

Compatibiliteacute67

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction68

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction69

Cornelia Laros

text

Gestalt Theorie70

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Gestalt Theorie71

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Dark patterns72

Cornelia Laros

Introduction agrave lrsquoergonomie

A vous de jouer

73

Cornelia Laros

Introduction agrave lrsquoergonomie

Outils de prototypages DIY74

Cornelia Laros

Low tech papier + crayons post-its cartes agrave jouer

Gratuit en ligne Invision app Moqups UXPin

Mac Sketch Balsamiq Mockups Axure

PC Axure Balsamiq

Mobile Prototyping on Paper

Ap983540983590en983530983555 983592983589 no983547983549983589983537le983543 983581h983586983543983589983588

Introduction agrave lrsquoergonomie

Test de perception DIY75

Cornelia Laros

La premiegravere impression qursquoun utilisateur se fait de votre IHM va influencer tous ses jugements ulteacuterieurs Crsquoest lrsquoeffet de halo

bull Un utilisateur qui a une premiegravere impression positive de votre appli passera plus facilement outre les bugs

bull Une premiegravere impression negative rendra lrsquoutilisateur plus critique vis agrave vis de deacutetails qui confirment son jugement

Cel983527 983538983580983590c983532e 983527983548983588si 983527983549983589983581 vo983543 983586983590983580ux 983591rsquoex983527983538983589983585s vo983543 983530983585t983542983589983546i983530n983543 983592rsquoem983528983527983548983581he 983530983545 983550983587s 983542e983585d983530983555-vo983547983543 983581l983535e983539983546s

Introduction agrave lrsquoergonomie

Test de perception DIY76

Cornelia Laros

Montrer votre prototype agrave quelqursquoun pendant 5 secondes

Demandez-lui

bull Ce qursquoil a vu

bull Ce qursquoil a compris de ce qursquoil a vu

bull Ce qui lrsquoa surpris ou marqueacute

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY77

Cornelia Laros

Les difficulteacutes de navigation se produisent souvent dans les niveaux les plus haut de votre structure de contenu Vous pouvez veacuterifier facilement si la classification logique pour vous lrsquoest aussi pour vos utilisateurs

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY78

Cornelia Laros

Lister trois (max) niveaux de profondeur de votre contenu structureacute Masquez ensuite les contenus de niveau plus bas Utilisez par exemple les groupements de lignes dans excel pour creacuteer des pliers-deacutepliers ou imprimer la liste sur une feuille que vous pliez pour masquer certaines parties

Demandez agrave un utilisateur de vous dire ougrave il penserait trouver un contenu bien preacutecis en preacutecisant qursquoil nrsquoy a pas de bonne reacuteponse

Notez srsquoil va chercher lagrave ougrave vous vous y attendiez ougrave il a heacutesiteacute et ce qursquoil a fini par choisir pour vous aider agrave rendre la navigation plus intuitive

Introduction agrave lrsquoergonomie

Test drsquoutilisabiliteacute DIY79

Cornelia Laros

A chaque nouvelle fonctionnaliteacute ajouteacutee demandez agrave quelqursquoun qui ne connait pas le projet de srsquoen servir Proposez lui une seule tacircche geacuteneacuterique agrave accomplir avec la fonctionnaliteacute

Exemple Tu veux prendre un rendez-vous avec un meacutedecin sur ce site montres-moi comment tu ferais en commentant agrave haute voix

Le plus important ici crsquoest de ne pas reacuteagir agrave ce qursquoil fait mais simplement le regarder faire sans lrsquoaider mecircme srsquoil est bloqueacute

Srsquoil 983540983586983588983589 de983543 983578983547983589s983545i983586983585s reacutepo983539983592983530z 983540983580983590 un983530 983577983548e983588t983534983587983539 o983547 d983535983545e983588 l983547983535 983577u983530 983550983587us 983536983547983535 983590eacutepo983539983592r983530983555 983578983548an983591 983534983537 983580ur983527 fi983539983535 983588rsquoil 983534983539983588983535s983545e Srsquoil 983530983543983546 v983542983580i983593983530n983545 983529l983587983577ueacute di983545983530983588 l983548i 983577983547983589 983550o983547s 983580983536983537ez 983542983530983550983587ir 983549983586983546r983589 983579o983541983534983589 et 983530983543983588983580ye983555 983592983530 c983587983538983541re983539983592r983530 983579983589 983578u983534 l983589 9835316ne

Introduction agrave lrsquoergonomie

Pas besoin de reacuteinventer la roue DIY

80

Cornelia Laros

Il existe des bonnes pratiques qui vous eacuteviteront de reacuteinventer la roue Utilisez des laquo design patterns raquo pour concevoir vos interfaces

Renseignez vous sur la Gestalt Theorie pour agencer vos pages

Utilisez les critegraveres de Bastien et Scapin pour trouver des deacutefauts eacutevidents avant de tester vous en tirerez des enseignements plus inteacuteressants

Ma983534s ccedila crsquoes983545 983541983586983548r u983539983530 983580u983546r983530 983559983587i983588

Introduction agrave lrsquoergonomie

Quizz time

81

Cornelia Laros

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

82

Cornelia Laros

1 c Fonctionnel

2 a Fiable

3 d Accessible

4 b Intuitif

5 e Plaisant

6 f Porteur de sens

text

F - Quel besoin ai-je oublieacute dans la question preacuteceacutedente

83

Cornelia Laros

Uti983536983534983588983580b983536e

Introduction agrave lrsquoergonomie

Tests DIY84

Cornelia Laros

Reacutedigez la proceacutedure pour tester un de vos projets drsquoIHM avec le test de votre choix perception arborescence ou utilisabiliteacute

Notez la question que vous vous posez et la question que vous allez poser

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

Introduction agrave lrsquoergonomie

Inter-discplinariteacute16

Cornelia Laros

Ps983554983581ho983536983586983594983535e

In983531eacuteni983530983542983535e

Ne983547r983587983543983581i983530n983579983589983588

Ph983554983588i983586l983587983531i983530

Meacutede983579983534983585983589

Soc983534983587983536o983594983534983589

Ergonomie

Introduction agrave lrsquoergonomie

Domaines drsquointervention17

Cornelia Laros

Ps983554983581ho983536983586983594983535eIn983531eacuteni983530983542983535e

Ne983547r983587983543983581i983530n983579983589983588

Phi983543983534983587983537og983534983589Meacutede983579983534983585983589

Soc983534983587983536o983594983534983589Ergonomie

Ergonomie physique

Ergonomie organisationnelle

Ergonomie cognitive

Optimisation des situations et postes de travail dans leur

relation avec lrsquoactiviteacute physique

Optimisation des systegravemes socio-techniques structures

organisationnelles regravegles et processus

Optimisation du travail mental perception prise de deacutecision

reacutesolution de problegravemes

Introduction agrave lrsquoergonomie

Domaines drsquointervention18

Cornelia Laros

Organisationnelle 10

Physique 20

Cognitive 70

Introduction agrave lrsquoergonomie

Quizz time

19

Cornelia Laros

text

A - Lrsquoergonomie sert agravehellip20

Cornelia Laros

1 ameacuteliorer les conditions de travail

2 faire gagner plus drsquoargent agrave lrsquoentreprise

3 ameacuteliorer lrsquoestheacutetique

4 comprendre comment ameacuteliorer un produit

text

B - Quelles affirmations sont vraies

21

Cornelia Laros

1 Lrsquoergonomie srsquoattache agrave comprendre le travail pour le transformer

2 Il est possible de concevoir une IHM qui fonctionne pour tout le monde en se basant sur des normes

3 Lrsquoutilisateur va se servir de votre produit de la faccedilon dont vous lrsquoavez imagineacute

4 Lrsquoutilisateur interpregravete une tacircche comme un problegraveme qursquoil doit reacutesoudre en faisant avec ses caracteacuteristiques et les moyens mis agrave sa disposition

text

Pause cafeacute

10 minutes

22

Cornelia Laros

Introduction agrave lrsquoergonomie

Quelques meacutethodes drsquoergonomie

23

Cornelia Laros

Introduction agrave lrsquoergonomie

Ergonomie de conception

24

Cornelia Laros

Ergonomie de correctionbull Analyse drsquoactiviteacute

bull Audit

bull Analyse drsquoeacutevegravenements critiques

bull Analyse de traces

bull Simulation

bull Entretiens

bull Persona cartes drsquoexpeacuteriences

bull Tri par cartes

bull Prototypage

bull Benchmarkhellip

Lrsquoergonomie tout au long du projet

Introduction agrave lrsquoergonomie

Ergonomie de conception

25

Cornelia Laros

Ergonomie de correctionbull Analyse drsquoactiviteacute

bull Audit

bull Analyse drsquoeacutevegravenements critiques

bull Analyse de traces

bull Simulationhellip

bullEntretiens

bullPersona cartes drsquoexpeacuteriences

bullTri par cartes

bullPrototypage

bullBenchmarkhellip

Des meacutethodes de recueil de donneacutees avec utilisateurs finaux et de conception laquo experte raquo

Introduction agrave lrsquoergonomie

Pourquoi ces meacutethodes26

Cornelia Laros

bull Si jrsquoavais demandeacute aux utilisateurs ce qursquoils voulaient ils mrsquoauraient demandeacute un cheval plus rapide - Henri Ford

bull Un comportement laquo sur-appris raquo devient un automatisme inconscient que lrsquoutilisateur ne saura pas expliquer (ex passer les vitesses en conduisant)

bull Le cerveau humain est propice agrave la fabulation (imagination de causes) aux faux souvenirs (en toute bonne fois) les biais (deacutesirabiliteacute effet pygmalion influence socialehellip)

Observer

Introduction agrave lrsquoergonomie

Pourquoi ces meacutethodes27

Cornelia Laros

bull Une imagine est plus parlante que 10 000 mots

bull Permet drsquoeacutevaluer une ideacutee agrave moindre coucirct donc de se tromper souvent et drsquoapprendre plus vite pour valider une ideacutee ou lrsquoameacuteliorer

bull Permet de tester plein drsquoideacutees et de retenir la meilleure

hellip A condition de se focaliser sur un objectif et non sur lrsquoideacutee elle-mecircme

Modeacuteliser

Introduction agrave lrsquoergonomie

Lrsquoensemble permet drsquoeacuteviter ceci

28

Cornelia Laros

Introduction agrave lrsquoergonomie

Lrsquoensemble permet drsquoeacuteviter ceci

29

Cornelia Laros

Eli983538983534983585eacute en 983586983528983588983589r983549a983585t

Eli983538983534983585eacute en 983540983590983586t983587983545983584pa983539983546

Introduction agrave lrsquoergonomie

Prototyper pour vous crsquoesthellip30

Cornelia Laros

CONTRIBUTION AUX SPECIFICATIONS FONCTIONNELLES

Zoning basse fideacuteliteacute wireframe statique (sketch ou non) bull Rapide et peu couteux bull Illustratif statique pas drsquointeraction bull Non engageant sur le design bull Tregraves peu explicite sur le plan fonctionnel

Story-board cliquable bull Illustre la navigation bull Permet de se projeter dans lrsquointeraction bull Pose les bases du design et du fonctionnel

Prototype semi-dynamique bull Se veut complet (ou quasi) sur le plan de la

navigation de lrsquointeraction et des cas drsquoutilisation bull Doit permettre de simuler fidegravelement le

fonctionnement drsquoune application bull Est une speacutecification fonctionnelle en soi

Pha983543983530 983592983589 ca983591983590983527g983589 AM983623983607

Pha983543983530 983592983589 co983539983581983530p983545983535o983585 f983586983539983581t983535o983539983585983530l983536983589

Tes983545983588 983547t983535983536i983588983527t983589u983542983588 ap983540983537983534s 983538983587983529il983530983543hellip

Introduction agrave lrsquoergonomie

Prototype basse definition31

Cornelia Laros

Introduction agrave lrsquoergonomie

Prototyper cliquable32

Cornelia Laros

Introduction agrave lrsquoergonomie

Prototyper semi-dynamique33

Cornelia Laros

Page Title

1230

Mobile interactions

Observably Sc i$amp

About

Project overiew

Manage sessions

Manage variables

Settings

Start observing

1230 1230

OverviewObserve

Observe mobile interactions in the field to assess dominant hand for holding and interacting with smartphones

10042016Mobile interactionsMobile interactions

Welcome to Observably Gather and manage observation dataGather and manage observation data

My projects

1230

Tags separate with comas

Variable value

Create

Add observablesAdd all observables you want to track for this project You can come back and edit them laterAdd all observables you want to track for this project You can come back and edit them later

Thanks for the hint

Manage variablesMobile InteractionsMobile Interactions

1230

Tags separate with comas

Variable value

Create

Left hand Right thumbLRTLRT

Manage variablesMobile InteractionsMobile Interactions

Irsquom done Start recording

Save changesCancel

Observable Tags separate with coma

Tags separate with comas

3 20

LRILRI

Observable label

Did you knowTap on the icon to customize it Use icons from our library or from your gallery to make variables pop out when observing

Tap on the icon to customize it Use icons from our library or from your gallery to make variables pop out when observing

Thanks for the hint

Left hand Right thumbLRTLRT

Irsquom done Start recording

Manage variablesMobile InteractionsMobile Interactions

Left hand x Right thumb x

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Did you knowIf you make a mistake you can undo your action by tapping on the icon of the taskIf you make a mistake you can undo your action by tapping on the icon of the task

Thanks for the hint

Session 1

Discrete mode New Session

Mobile InteractionsMobile Interactions

1230

Record vocal comment

LRILRILRILRILRILRI

Did you knowYou can record occurences durations and comments by chosing the record format in the drop-down above

You can record occurences durations and comments by chosing the record format in the drop-down above

Thanks for the hint

Discrete mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

Left hand Right thumbLRT

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Did you knowIn list view you can slipe left and right to increment or correct your countIn list view you can slipe left and right to increment or correct your count

Thanks for the hint

Continuous mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

LRILRILRILRILRI

Did you knowIf you make a mistake you can undo your action by tapping on the icon of the taskIf you make a mistake you can undo your action by tapping on the icon of the task

Thanks for the hint

Continuous mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

Tags separate with comas

Comment

Add

Did you know The timestamp of vocal comments is the start time to accurately mark events that triggered your comment

The timestamp of vocal comments is the start time to accurately mark events that triggered your comment

Thanks for the hint

Manage observables

Comments mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Stop recording vocal comment

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Your observationsManage and cleanup sessions before exporting dataManage and cleanup sessions before exporting data

Session ManagementMobile InteractionsMobile Interactions

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

LRT

LRI

RLI

RLT

RRT20

20

8

35

15

Count SummaryCount Summary

RLT

RRT20

815

Time SummaryTime Summary

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

Left hand Right thumbLRTLRT

+1+1

10042016 124627

Left hand Right thumbLRTLRT

2rsquorsquo2rsquorsquo

10042016 124627 - 10042016 124629

Content of my comment boxTag1 Tag2

10042016 124644

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

LRTLRT+1+1

10042016 124627

Save changes

Observable Tags separate with coma

Tags separate with comas

Left hand x Right thumb x

AboutAbout

1230

Observable science provides tools for field research and scientific observation It is tailored to the needs of ethnography human factors psychology usability and games user research

Observable science provides tools for field research and scientific observation It is tailored to the needs of ethnography human factors psychology usability and games user research

Observablyscience

Development by Morgane RadelDesign by Cornelia LarosDevelopment by Morgane RadelDesign by Cornelia Laros

Credits

Support (us)Show your love Rate the App

Make a donation

Contact us

Visit our website

Add session tags to all observations

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

Save changes

Session Tags separate with coma

Tags separate with comas

Metro x Toulouse x

Manage variablesMobile InteractionsMobile Interactions

1230

Left hand Right thumbLRTLRT

Confirm

Search icons

Cancel

Browse

3 20

Observably Sci$amp

1230

Project statisticsProject statistics Total countsTotal time Total comments First entryLast entrySessions

4 963281231

1441201201603042016

97

Project detailsMobile InteractionsMobile Interactions

Sessions SummarySessions Summary

RRT20

815

Count SummaryCount Summary

JUN 14MAY 14APR 14MAR 14FEB 14JAN 14

4

1

65

7

0

2

4

6

8

10

3

2014

Manage sessions

Settings ExportOverview

1230

App optionsDisplay hintsDisplay hints

SettingsSettings

Share anonymous data to improve the appShare anonymous data to improve the app

1230

Gather and manage observation data with ObservablyGather and manage observation data with Observably

Welcome to Observably

Project name

Project description what is the goal of your project

CreateCancel

Session[number]Session[number]

Default Session ID

Default export format txt

Data options

Default Discrete variable lines view

Create a new project

1230

Project detailsMobile InteractionsMobile Interactions

Mobile InteractionsMobile Interactions

Project description what is the goal of your project

SaveCancel

Session[number]Session[number]

Default Session ID

Default export format txt

Data options

Default continuous variables grid view

Project name

Manage sessions

Settings ExportOverview

1230

Project detailsMobile InteractionsMobile Interactions

Manage sessions

Settings ExportOverview

Export format txt

Export data

Data has been successfully exported as MobileInteractionstxt

to your download folder

Observably Sc i$amp

Settings

1230

BUTTONBUTTON

Permissions

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Up exlaborum incididunt quis nostrud exercitatn

COMPONENTS

Pickers

OKCANCEL

13

Friday

MAR

2014

MS W T F ST

30 31

1

16 17 19 20 21 2218

23 24 26 27 28 2925

139 10 12 14 1511

72 3 5 6 84

March 2014

OKCANCEL

PMAM

112

9

10

11

2

48

576

3

330 AM

Notifications

Incoming call

Rachel Ligson

IGNORE ANSWER

REPLYARCHIVE

Hey letrsquos catch up soon Do you want to grab lunch sometime this weekendLet me know when yoursquore free

409 PMHannah ChoHannah Cho

Do you know what I mean509 PMTina McBeanTina McBean

Heads up notification

Regular + Expanded notification

Index scroller

All

Patrick Keenan

Mary Johnson

Tina Santiago

Trevor Hansen

Amar Sagoo

Abbey Christensen

Ali Connors

Alex Nelson

Anthony Stevens

A

A

1230

Abcdefg

Abcdefghijklmno

Tabs

THE THIRDITEM TWONO ONE

THE THIRDITEM TWONO ONE

1230

THE THIRDITEM TWONO ONE

Page Title

1230

121 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

110 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

51 50

Input text for a single line field with a maximu

Single-Line Input Label

31 50

Input text for a single line field with a max

Single-Line Input Label

121 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

110 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

51 50

Input text for a single line field with a maximuInput text for a single line field with a maximu

Single-Line Input Label

31 50

Input text for a single line field with a maxInput text for a single line field with a max

Single-Line Input Label

Disabled text field

Input text

Username or Password is incorrect

Input text

Input tex

Hint text

Hint text

Hint text

Disabled text field

Input textInput text

Username or Password is incorrect

Input textInput text

Input texInput tex

Hint text

Hint text

Hint text

Text fields

Switches and sliders

60

Regular

Pressed

Disabled

60

Regular

Pressed

Disabled

Buttons

DISABLED

PRESSED

NORMAL

DISABLED

PRESSED

NORMAL

Flat Raised

DISABLED

PRESSED

NORMAL

DISABLED

PRESSED

NORMAL

Flat Raised

Toasts

This color applies to both light and dark theme

This item already has the label ldquotravelrdquo You can add a new label

ACTIONSingle-Line Snackbar

Menu

Arial 100

100

Calibri

Courier

Verdana

Arial

Chips

Trevor Hansen

email3emailcom

email2emailcom

primaryemailemailcomContact Name

Dialogs

Desktop

Without title With title

BUTTONBUTTON

PermissionsLorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Up exlaborum incididunt quis nostrud exercitatn

BUTTONBUTTON

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Ut enim ad minim ikad veniam quis nostrud exercitatn ullamco laboris nisi ut aliquip exlaborum incididunt

ACCEPTDECLINEMORE INFO

Permissions

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisinuli

Toolbar

11Roboto

Cards

Welcome BackItrsquos been a while have you read any new books latelyItrsquos been a while have you read any new books lately

YESNOPE

Kangaroo Valley Safari

Located two hours south of Sydney in the

Southern Highlands of New South Wales

LEARN MORESHARE

REVIEWFREE SAMPLE

By Alex Nelson

El Pooch

Pre-fab Homes

Favorite Road Trips

Best Airlines

Campbell

Groceries

almond milk

coconut water

cucumber

green apples

Yuna tickets on sale 624

May 24 2014

Clean desk

Keyboards

suggestion suggestion suggestion

123

a s d f g h j k l

z x c v b n m

q w e r t y u i o p1 2 3 4 5 6 7 8 9 0

suggestion suggestion suggestion

123

a s d f g h j k l

z x c v b n m

q w e r t y u i o p1 2 3 4 5 6 7 8 9 0

Bottom Sheet

Print this page

Copy

Upload

Share

MoreMail Message

Google+Gmail Hangout

Grid

Two lineSupport text

Two lineSupport text

Single line

Single line

Lists

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Three-line itemThree-line item

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Three-line itemThree-line item

Three-line itemThree-line item

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Three-line itemThree-line item

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Three-line itemThree-line item

Three-line itemThree-line item

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Line item unselectedLine item unselected

Line item selectedLine item selected

Line item selectedLine item selected

Data usageData usage

BluetoothBluetooth

Wi-FiWi-Fi

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Single-line itemSingle-line item

Single-line itemSingle-line item

Single-line itemSingle-line itemSingle-line itemSingle-line item

Single-line itemSingle-line item

Single-line itemSingle-line item

Introduction agrave lrsquoergonomie

Ergonomie et Design34

Cornelia Laros

Design Ergonomie Design Ergonomie

Identiteacute

Communication

Ambiance

Exemple un site institutionnel informatif avec une navigation simple et des exigences fortes

drsquoidentiteacuteExemple une application meacutetier destineacutee agrave une

population drsquoutilisateur connue

EfficaciteacuteFonctionnel

Outils

Service en ligne

Architecture de lrsquoinformation contenus bonnes pratiques

Analyse tache vs activiteacute prise en compte globaliseacutee des process

postes de travail eacutecosystegraveme existant hellip puis la conception

Image Usage freacutequent

Usage ponctuel

Votre eacutequipe Ergonome Directeur aristique Webdesigner UX Designer

Introduction agrave lrsquoergonomie

Design avant-tout35

Cornelia Laros

Introduction agrave lrsquoergonomie

Equilibreacute36

Cornelia Laros

Introduction agrave lrsquoergonomie

Ergonomie avant tout37

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

38

Cornelia Laros

text

Lrsquoergonomie sert agravehellip39

Cornelia Laros

1 ameacuteliorer les conditions de travail

2 faire gagner plus drsquoargent agrave lrsquoentreprise

3 ameacuteliorer lrsquoestheacutetique

4 comprendre comment ameacuteliorer un produit

text

Quelles affirmations sont vraies

40

Cornelia Laros

1 Lrsquoergonomie srsquoattache agrave comprendre le travail pour le transformer

2 Il est possible de concevoir une IHM qui fonctionne pour tout le monde en se basant sur des normes

3 Lrsquoutilisateur va se servir de votre produit de la faccedilon dont vous lrsquoavez imagineacute

4 Lrsquoutilisateur interpregravete une tacircche comme un problegraveme qursquoil doit reacutesoudre en faisant avec ses caracteacuteristiques et les moyens mis agrave sa disposition

text

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

41

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

text

D - A quoi sert un prototype

42

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

43

Cornelia Laros

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

44

Cornelia Laros

Utilisabiliteacute

Utiliteacute

Efficaciteacute Efficience

Satisfaction

Introduction agrave lrsquoergonomie

Pyramide des besoins MASLOW

45

Cornelia Laros

Introduction agrave lrsquoergonomie

Pyramide des besoins IHM46

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

47

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

48

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

49

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

50

Cornelia Laros

Introduction agrave lrsquoergonomie

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

51

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

Introduction agrave lrsquoergonomie

D - A quoi sert un prototype

52

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

53

Cornelia Laros

a Fiable

b Intuitif

c Fonctionnel

d Accessible

e Plaisant

f Porteur de sens

Introduction agrave lrsquoergonomie

F - Quel besoin ai-je oublieacute dans la question

preacuteceacutedente

54

Cornelia Laros

text

Patterns amp Dark patterns

55

Cornelia Laros

text

Criteres de Bastien et Scapin56

Cornelia Laros

Guidage

Charge de travail

Controcircle utilisateur explicite

Flexibiliteacute ( adaptabiliteacute)

Gestion des erreurs

Homogeacuteneacuteiteacute ( coheacuterence)

Signifiance des Codes et Deacutenominations

Compatibiliteacute ( familiariteacute)

Introduction agrave lrsquoergonomie

Guidage57

Cornelia Laros

Introduction agrave lrsquoergonomie

Charge de travail58

Cornelia Laros

Introduction agrave lrsquoergonomie

Controle explicite59

Cornelia Laros

Introduction agrave lrsquoergonomie

Controles explicites60

Cornelia Laros

Dar983595 983541983527t983545983589983590n

text

Adaptabiliteacute61

Cornelia Laros

text

Gestion des erreurs62

Cornelia Laros

text

Signifiance des codes et deacutenominations

63

Cornelia Laros

text

Homogeacuteneacuteiteacute - coheacuterence64

Cornelia Laros

text

Homogeacuteneacuteiteacute - Distinction65

Cornelia Laros

text

Compatibiliteacute66

Cornelia Laros

text

Compatibiliteacute67

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction68

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction69

Cornelia Laros

text

Gestalt Theorie70

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Gestalt Theorie71

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Dark patterns72

Cornelia Laros

Introduction agrave lrsquoergonomie

A vous de jouer

73

Cornelia Laros

Introduction agrave lrsquoergonomie

Outils de prototypages DIY74

Cornelia Laros

Low tech papier + crayons post-its cartes agrave jouer

Gratuit en ligne Invision app Moqups UXPin

Mac Sketch Balsamiq Mockups Axure

PC Axure Balsamiq

Mobile Prototyping on Paper

Ap983540983590en983530983555 983592983589 no983547983549983589983537le983543 983581h983586983543983589983588

Introduction agrave lrsquoergonomie

Test de perception DIY75

Cornelia Laros

La premiegravere impression qursquoun utilisateur se fait de votre IHM va influencer tous ses jugements ulteacuterieurs Crsquoest lrsquoeffet de halo

bull Un utilisateur qui a une premiegravere impression positive de votre appli passera plus facilement outre les bugs

bull Une premiegravere impression negative rendra lrsquoutilisateur plus critique vis agrave vis de deacutetails qui confirment son jugement

Cel983527 983538983580983590c983532e 983527983548983588si 983527983549983589983581 vo983543 983586983590983580ux 983591rsquoex983527983538983589983585s vo983543 983530983585t983542983589983546i983530n983543 983592rsquoem983528983527983548983581he 983530983545 983550983587s 983542e983585d983530983555-vo983547983543 983581l983535e983539983546s

Introduction agrave lrsquoergonomie

Test de perception DIY76

Cornelia Laros

Montrer votre prototype agrave quelqursquoun pendant 5 secondes

Demandez-lui

bull Ce qursquoil a vu

bull Ce qursquoil a compris de ce qursquoil a vu

bull Ce qui lrsquoa surpris ou marqueacute

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY77

Cornelia Laros

Les difficulteacutes de navigation se produisent souvent dans les niveaux les plus haut de votre structure de contenu Vous pouvez veacuterifier facilement si la classification logique pour vous lrsquoest aussi pour vos utilisateurs

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY78

Cornelia Laros

Lister trois (max) niveaux de profondeur de votre contenu structureacute Masquez ensuite les contenus de niveau plus bas Utilisez par exemple les groupements de lignes dans excel pour creacuteer des pliers-deacutepliers ou imprimer la liste sur une feuille que vous pliez pour masquer certaines parties

Demandez agrave un utilisateur de vous dire ougrave il penserait trouver un contenu bien preacutecis en preacutecisant qursquoil nrsquoy a pas de bonne reacuteponse

Notez srsquoil va chercher lagrave ougrave vous vous y attendiez ougrave il a heacutesiteacute et ce qursquoil a fini par choisir pour vous aider agrave rendre la navigation plus intuitive

Introduction agrave lrsquoergonomie

Test drsquoutilisabiliteacute DIY79

Cornelia Laros

A chaque nouvelle fonctionnaliteacute ajouteacutee demandez agrave quelqursquoun qui ne connait pas le projet de srsquoen servir Proposez lui une seule tacircche geacuteneacuterique agrave accomplir avec la fonctionnaliteacute

Exemple Tu veux prendre un rendez-vous avec un meacutedecin sur ce site montres-moi comment tu ferais en commentant agrave haute voix

Le plus important ici crsquoest de ne pas reacuteagir agrave ce qursquoil fait mais simplement le regarder faire sans lrsquoaider mecircme srsquoil est bloqueacute

Srsquoil 983540983586983588983589 de983543 983578983547983589s983545i983586983585s reacutepo983539983592983530z 983540983580983590 un983530 983577983548e983588t983534983587983539 o983547 d983535983545e983588 l983547983535 983577u983530 983550983587us 983536983547983535 983590eacutepo983539983592r983530983555 983578983548an983591 983534983537 983580ur983527 fi983539983535 983588rsquoil 983534983539983588983535s983545e Srsquoil 983530983543983546 v983542983580i983593983530n983545 983529l983587983577ueacute di983545983530983588 l983548i 983577983547983589 983550o983547s 983580983536983537ez 983542983530983550983587ir 983549983586983546r983589 983579o983541983534983589 et 983530983543983588983580ye983555 983592983530 c983587983538983541re983539983592r983530 983579983589 983578u983534 l983589 9835316ne

Introduction agrave lrsquoergonomie

Pas besoin de reacuteinventer la roue DIY

80

Cornelia Laros

Il existe des bonnes pratiques qui vous eacuteviteront de reacuteinventer la roue Utilisez des laquo design patterns raquo pour concevoir vos interfaces

Renseignez vous sur la Gestalt Theorie pour agencer vos pages

Utilisez les critegraveres de Bastien et Scapin pour trouver des deacutefauts eacutevidents avant de tester vous en tirerez des enseignements plus inteacuteressants

Ma983534s ccedila crsquoes983545 983541983586983548r u983539983530 983580u983546r983530 983559983587i983588

Introduction agrave lrsquoergonomie

Quizz time

81

Cornelia Laros

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

82

Cornelia Laros

1 c Fonctionnel

2 a Fiable

3 d Accessible

4 b Intuitif

5 e Plaisant

6 f Porteur de sens

text

F - Quel besoin ai-je oublieacute dans la question preacuteceacutedente

83

Cornelia Laros

Uti983536983534983588983580b983536e

Introduction agrave lrsquoergonomie

Tests DIY84

Cornelia Laros

Reacutedigez la proceacutedure pour tester un de vos projets drsquoIHM avec le test de votre choix perception arborescence ou utilisabiliteacute

Notez la question que vous vous posez et la question que vous allez poser

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

Introduction agrave lrsquoergonomie

Domaines drsquointervention17

Cornelia Laros

Ps983554983581ho983536983586983594983535eIn983531eacuteni983530983542983535e

Ne983547r983587983543983581i983530n983579983589983588

Phi983543983534983587983537og983534983589Meacutede983579983534983585983589

Soc983534983587983536o983594983534983589Ergonomie

Ergonomie physique

Ergonomie organisationnelle

Ergonomie cognitive

Optimisation des situations et postes de travail dans leur

relation avec lrsquoactiviteacute physique

Optimisation des systegravemes socio-techniques structures

organisationnelles regravegles et processus

Optimisation du travail mental perception prise de deacutecision

reacutesolution de problegravemes

Introduction agrave lrsquoergonomie

Domaines drsquointervention18

Cornelia Laros

Organisationnelle 10

Physique 20

Cognitive 70

Introduction agrave lrsquoergonomie

Quizz time

19

Cornelia Laros

text

A - Lrsquoergonomie sert agravehellip20

Cornelia Laros

1 ameacuteliorer les conditions de travail

2 faire gagner plus drsquoargent agrave lrsquoentreprise

3 ameacuteliorer lrsquoestheacutetique

4 comprendre comment ameacuteliorer un produit

text

B - Quelles affirmations sont vraies

21

Cornelia Laros

1 Lrsquoergonomie srsquoattache agrave comprendre le travail pour le transformer

2 Il est possible de concevoir une IHM qui fonctionne pour tout le monde en se basant sur des normes

3 Lrsquoutilisateur va se servir de votre produit de la faccedilon dont vous lrsquoavez imagineacute

4 Lrsquoutilisateur interpregravete une tacircche comme un problegraveme qursquoil doit reacutesoudre en faisant avec ses caracteacuteristiques et les moyens mis agrave sa disposition

text

Pause cafeacute

10 minutes

22

Cornelia Laros

Introduction agrave lrsquoergonomie

Quelques meacutethodes drsquoergonomie

23

Cornelia Laros

Introduction agrave lrsquoergonomie

Ergonomie de conception

24

Cornelia Laros

Ergonomie de correctionbull Analyse drsquoactiviteacute

bull Audit

bull Analyse drsquoeacutevegravenements critiques

bull Analyse de traces

bull Simulation

bull Entretiens

bull Persona cartes drsquoexpeacuteriences

bull Tri par cartes

bull Prototypage

bull Benchmarkhellip

Lrsquoergonomie tout au long du projet

Introduction agrave lrsquoergonomie

Ergonomie de conception

25

Cornelia Laros

Ergonomie de correctionbull Analyse drsquoactiviteacute

bull Audit

bull Analyse drsquoeacutevegravenements critiques

bull Analyse de traces

bull Simulationhellip

bullEntretiens

bullPersona cartes drsquoexpeacuteriences

bullTri par cartes

bullPrototypage

bullBenchmarkhellip

Des meacutethodes de recueil de donneacutees avec utilisateurs finaux et de conception laquo experte raquo

Introduction agrave lrsquoergonomie

Pourquoi ces meacutethodes26

Cornelia Laros

bull Si jrsquoavais demandeacute aux utilisateurs ce qursquoils voulaient ils mrsquoauraient demandeacute un cheval plus rapide - Henri Ford

bull Un comportement laquo sur-appris raquo devient un automatisme inconscient que lrsquoutilisateur ne saura pas expliquer (ex passer les vitesses en conduisant)

bull Le cerveau humain est propice agrave la fabulation (imagination de causes) aux faux souvenirs (en toute bonne fois) les biais (deacutesirabiliteacute effet pygmalion influence socialehellip)

Observer

Introduction agrave lrsquoergonomie

Pourquoi ces meacutethodes27

Cornelia Laros

bull Une imagine est plus parlante que 10 000 mots

bull Permet drsquoeacutevaluer une ideacutee agrave moindre coucirct donc de se tromper souvent et drsquoapprendre plus vite pour valider une ideacutee ou lrsquoameacuteliorer

bull Permet de tester plein drsquoideacutees et de retenir la meilleure

hellip A condition de se focaliser sur un objectif et non sur lrsquoideacutee elle-mecircme

Modeacuteliser

Introduction agrave lrsquoergonomie

Lrsquoensemble permet drsquoeacuteviter ceci

28

Cornelia Laros

Introduction agrave lrsquoergonomie

Lrsquoensemble permet drsquoeacuteviter ceci

29

Cornelia Laros

Eli983538983534983585eacute en 983586983528983588983589r983549a983585t

Eli983538983534983585eacute en 983540983590983586t983587983545983584pa983539983546

Introduction agrave lrsquoergonomie

Prototyper pour vous crsquoesthellip30

Cornelia Laros

CONTRIBUTION AUX SPECIFICATIONS FONCTIONNELLES

Zoning basse fideacuteliteacute wireframe statique (sketch ou non) bull Rapide et peu couteux bull Illustratif statique pas drsquointeraction bull Non engageant sur le design bull Tregraves peu explicite sur le plan fonctionnel

Story-board cliquable bull Illustre la navigation bull Permet de se projeter dans lrsquointeraction bull Pose les bases du design et du fonctionnel

Prototype semi-dynamique bull Se veut complet (ou quasi) sur le plan de la

navigation de lrsquointeraction et des cas drsquoutilisation bull Doit permettre de simuler fidegravelement le

fonctionnement drsquoune application bull Est une speacutecification fonctionnelle en soi

Pha983543983530 983592983589 ca983591983590983527g983589 AM983623983607

Pha983543983530 983592983589 co983539983581983530p983545983535o983585 f983586983539983581t983535o983539983585983530l983536983589

Tes983545983588 983547t983535983536i983588983527t983589u983542983588 ap983540983537983534s 983538983587983529il983530983543hellip

Introduction agrave lrsquoergonomie

Prototype basse definition31

Cornelia Laros

Introduction agrave lrsquoergonomie

Prototyper cliquable32

Cornelia Laros

Introduction agrave lrsquoergonomie

Prototyper semi-dynamique33

Cornelia Laros

Page Title

1230

Mobile interactions

Observably Sc i$amp

About

Project overiew

Manage sessions

Manage variables

Settings

Start observing

1230 1230

OverviewObserve

Observe mobile interactions in the field to assess dominant hand for holding and interacting with smartphones

10042016Mobile interactionsMobile interactions

Welcome to Observably Gather and manage observation dataGather and manage observation data

My projects

1230

Tags separate with comas

Variable value

Create

Add observablesAdd all observables you want to track for this project You can come back and edit them laterAdd all observables you want to track for this project You can come back and edit them later

Thanks for the hint

Manage variablesMobile InteractionsMobile Interactions

1230

Tags separate with comas

Variable value

Create

Left hand Right thumbLRTLRT

Manage variablesMobile InteractionsMobile Interactions

Irsquom done Start recording

Save changesCancel

Observable Tags separate with coma

Tags separate with comas

3 20

LRILRI

Observable label

Did you knowTap on the icon to customize it Use icons from our library or from your gallery to make variables pop out when observing

Tap on the icon to customize it Use icons from our library or from your gallery to make variables pop out when observing

Thanks for the hint

Left hand Right thumbLRTLRT

Irsquom done Start recording

Manage variablesMobile InteractionsMobile Interactions

Left hand x Right thumb x

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Did you knowIf you make a mistake you can undo your action by tapping on the icon of the taskIf you make a mistake you can undo your action by tapping on the icon of the task

Thanks for the hint

Session 1

Discrete mode New Session

Mobile InteractionsMobile Interactions

1230

Record vocal comment

LRILRILRILRILRILRI

Did you knowYou can record occurences durations and comments by chosing the record format in the drop-down above

You can record occurences durations and comments by chosing the record format in the drop-down above

Thanks for the hint

Discrete mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

Left hand Right thumbLRT

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Did you knowIn list view you can slipe left and right to increment or correct your countIn list view you can slipe left and right to increment or correct your count

Thanks for the hint

Continuous mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

LRILRILRILRILRI

Did you knowIf you make a mistake you can undo your action by tapping on the icon of the taskIf you make a mistake you can undo your action by tapping on the icon of the task

Thanks for the hint

Continuous mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

Tags separate with comas

Comment

Add

Did you know The timestamp of vocal comments is the start time to accurately mark events that triggered your comment

The timestamp of vocal comments is the start time to accurately mark events that triggered your comment

Thanks for the hint

Manage observables

Comments mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Stop recording vocal comment

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Your observationsManage and cleanup sessions before exporting dataManage and cleanup sessions before exporting data

Session ManagementMobile InteractionsMobile Interactions

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

LRT

LRI

RLI

RLT

RRT20

20

8

35

15

Count SummaryCount Summary

RLT

RRT20

815

Time SummaryTime Summary

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

Left hand Right thumbLRTLRT

+1+1

10042016 124627

Left hand Right thumbLRTLRT

2rsquorsquo2rsquorsquo

10042016 124627 - 10042016 124629

Content of my comment boxTag1 Tag2

10042016 124644

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

LRTLRT+1+1

10042016 124627

Save changes

Observable Tags separate with coma

Tags separate with comas

Left hand x Right thumb x

AboutAbout

1230

Observable science provides tools for field research and scientific observation It is tailored to the needs of ethnography human factors psychology usability and games user research

Observable science provides tools for field research and scientific observation It is tailored to the needs of ethnography human factors psychology usability and games user research

Observablyscience

Development by Morgane RadelDesign by Cornelia LarosDevelopment by Morgane RadelDesign by Cornelia Laros

Credits

Support (us)Show your love Rate the App

Make a donation

Contact us

Visit our website

Add session tags to all observations

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

Save changes

Session Tags separate with coma

Tags separate with comas

Metro x Toulouse x

Manage variablesMobile InteractionsMobile Interactions

1230

Left hand Right thumbLRTLRT

Confirm

Search icons

Cancel

Browse

3 20

Observably Sci$amp

1230

Project statisticsProject statistics Total countsTotal time Total comments First entryLast entrySessions

4 963281231

1441201201603042016

97

Project detailsMobile InteractionsMobile Interactions

Sessions SummarySessions Summary

RRT20

815

Count SummaryCount Summary

JUN 14MAY 14APR 14MAR 14FEB 14JAN 14

4

1

65

7

0

2

4

6

8

10

3

2014

Manage sessions

Settings ExportOverview

1230

App optionsDisplay hintsDisplay hints

SettingsSettings

Share anonymous data to improve the appShare anonymous data to improve the app

1230

Gather and manage observation data with ObservablyGather and manage observation data with Observably

Welcome to Observably

Project name

Project description what is the goal of your project

CreateCancel

Session[number]Session[number]

Default Session ID

Default export format txt

Data options

Default Discrete variable lines view

Create a new project

1230

Project detailsMobile InteractionsMobile Interactions

Mobile InteractionsMobile Interactions

Project description what is the goal of your project

SaveCancel

Session[number]Session[number]

Default Session ID

Default export format txt

Data options

Default continuous variables grid view

Project name

Manage sessions

Settings ExportOverview

1230

Project detailsMobile InteractionsMobile Interactions

Manage sessions

Settings ExportOverview

Export format txt

Export data

Data has been successfully exported as MobileInteractionstxt

to your download folder

Observably Sc i$amp

Settings

1230

BUTTONBUTTON

Permissions

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Up exlaborum incididunt quis nostrud exercitatn

COMPONENTS

Pickers

OKCANCEL

13

Friday

MAR

2014

MS W T F ST

30 31

1

16 17 19 20 21 2218

23 24 26 27 28 2925

139 10 12 14 1511

72 3 5 6 84

March 2014

OKCANCEL

PMAM

112

9

10

11

2

48

576

3

330 AM

Notifications

Incoming call

Rachel Ligson

IGNORE ANSWER

REPLYARCHIVE

Hey letrsquos catch up soon Do you want to grab lunch sometime this weekendLet me know when yoursquore free

409 PMHannah ChoHannah Cho

Do you know what I mean509 PMTina McBeanTina McBean

Heads up notification

Regular + Expanded notification

Index scroller

All

Patrick Keenan

Mary Johnson

Tina Santiago

Trevor Hansen

Amar Sagoo

Abbey Christensen

Ali Connors

Alex Nelson

Anthony Stevens

A

A

1230

Abcdefg

Abcdefghijklmno

Tabs

THE THIRDITEM TWONO ONE

THE THIRDITEM TWONO ONE

1230

THE THIRDITEM TWONO ONE

Page Title

1230

121 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

110 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

51 50

Input text for a single line field with a maximu

Single-Line Input Label

31 50

Input text for a single line field with a max

Single-Line Input Label

121 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

110 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

51 50

Input text for a single line field with a maximuInput text for a single line field with a maximu

Single-Line Input Label

31 50

Input text for a single line field with a maxInput text for a single line field with a max

Single-Line Input Label

Disabled text field

Input text

Username or Password is incorrect

Input text

Input tex

Hint text

Hint text

Hint text

Disabled text field

Input textInput text

Username or Password is incorrect

Input textInput text

Input texInput tex

Hint text

Hint text

Hint text

Text fields

Switches and sliders

60

Regular

Pressed

Disabled

60

Regular

Pressed

Disabled

Buttons

DISABLED

PRESSED

NORMAL

DISABLED

PRESSED

NORMAL

Flat Raised

DISABLED

PRESSED

NORMAL

DISABLED

PRESSED

NORMAL

Flat Raised

Toasts

This color applies to both light and dark theme

This item already has the label ldquotravelrdquo You can add a new label

ACTIONSingle-Line Snackbar

Menu

Arial 100

100

Calibri

Courier

Verdana

Arial

Chips

Trevor Hansen

email3emailcom

email2emailcom

primaryemailemailcomContact Name

Dialogs

Desktop

Without title With title

BUTTONBUTTON

PermissionsLorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Up exlaborum incididunt quis nostrud exercitatn

BUTTONBUTTON

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Ut enim ad minim ikad veniam quis nostrud exercitatn ullamco laboris nisi ut aliquip exlaborum incididunt

ACCEPTDECLINEMORE INFO

Permissions

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisinuli

Toolbar

11Roboto

Cards

Welcome BackItrsquos been a while have you read any new books latelyItrsquos been a while have you read any new books lately

YESNOPE

Kangaroo Valley Safari

Located two hours south of Sydney in the

Southern Highlands of New South Wales

LEARN MORESHARE

REVIEWFREE SAMPLE

By Alex Nelson

El Pooch

Pre-fab Homes

Favorite Road Trips

Best Airlines

Campbell

Groceries

almond milk

coconut water

cucumber

green apples

Yuna tickets on sale 624

May 24 2014

Clean desk

Keyboards

suggestion suggestion suggestion

123

a s d f g h j k l

z x c v b n m

q w e r t y u i o p1 2 3 4 5 6 7 8 9 0

suggestion suggestion suggestion

123

a s d f g h j k l

z x c v b n m

q w e r t y u i o p1 2 3 4 5 6 7 8 9 0

Bottom Sheet

Print this page

Copy

Upload

Share

MoreMail Message

Google+Gmail Hangout

Grid

Two lineSupport text

Two lineSupport text

Single line

Single line

Lists

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Three-line itemThree-line item

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Three-line itemThree-line item

Three-line itemThree-line item

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Three-line itemThree-line item

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Three-line itemThree-line item

Three-line itemThree-line item

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Line item unselectedLine item unselected

Line item selectedLine item selected

Line item selectedLine item selected

Data usageData usage

BluetoothBluetooth

Wi-FiWi-Fi

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Single-line itemSingle-line item

Single-line itemSingle-line item

Single-line itemSingle-line itemSingle-line itemSingle-line item

Single-line itemSingle-line item

Single-line itemSingle-line item

Introduction agrave lrsquoergonomie

Ergonomie et Design34

Cornelia Laros

Design Ergonomie Design Ergonomie

Identiteacute

Communication

Ambiance

Exemple un site institutionnel informatif avec une navigation simple et des exigences fortes

drsquoidentiteacuteExemple une application meacutetier destineacutee agrave une

population drsquoutilisateur connue

EfficaciteacuteFonctionnel

Outils

Service en ligne

Architecture de lrsquoinformation contenus bonnes pratiques

Analyse tache vs activiteacute prise en compte globaliseacutee des process

postes de travail eacutecosystegraveme existant hellip puis la conception

Image Usage freacutequent

Usage ponctuel

Votre eacutequipe Ergonome Directeur aristique Webdesigner UX Designer

Introduction agrave lrsquoergonomie

Design avant-tout35

Cornelia Laros

Introduction agrave lrsquoergonomie

Equilibreacute36

Cornelia Laros

Introduction agrave lrsquoergonomie

Ergonomie avant tout37

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

38

Cornelia Laros

text

Lrsquoergonomie sert agravehellip39

Cornelia Laros

1 ameacuteliorer les conditions de travail

2 faire gagner plus drsquoargent agrave lrsquoentreprise

3 ameacuteliorer lrsquoestheacutetique

4 comprendre comment ameacuteliorer un produit

text

Quelles affirmations sont vraies

40

Cornelia Laros

1 Lrsquoergonomie srsquoattache agrave comprendre le travail pour le transformer

2 Il est possible de concevoir une IHM qui fonctionne pour tout le monde en se basant sur des normes

3 Lrsquoutilisateur va se servir de votre produit de la faccedilon dont vous lrsquoavez imagineacute

4 Lrsquoutilisateur interpregravete une tacircche comme un problegraveme qursquoil doit reacutesoudre en faisant avec ses caracteacuteristiques et les moyens mis agrave sa disposition

text

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

41

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

text

D - A quoi sert un prototype

42

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

43

Cornelia Laros

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

44

Cornelia Laros

Utilisabiliteacute

Utiliteacute

Efficaciteacute Efficience

Satisfaction

Introduction agrave lrsquoergonomie

Pyramide des besoins MASLOW

45

Cornelia Laros

Introduction agrave lrsquoergonomie

Pyramide des besoins IHM46

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

47

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

48

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

49

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

50

Cornelia Laros

Introduction agrave lrsquoergonomie

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

51

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

Introduction agrave lrsquoergonomie

D - A quoi sert un prototype

52

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

53

Cornelia Laros

a Fiable

b Intuitif

c Fonctionnel

d Accessible

e Plaisant

f Porteur de sens

Introduction agrave lrsquoergonomie

F - Quel besoin ai-je oublieacute dans la question

preacuteceacutedente

54

Cornelia Laros

text

Patterns amp Dark patterns

55

Cornelia Laros

text

Criteres de Bastien et Scapin56

Cornelia Laros

Guidage

Charge de travail

Controcircle utilisateur explicite

Flexibiliteacute ( adaptabiliteacute)

Gestion des erreurs

Homogeacuteneacuteiteacute ( coheacuterence)

Signifiance des Codes et Deacutenominations

Compatibiliteacute ( familiariteacute)

Introduction agrave lrsquoergonomie

Guidage57

Cornelia Laros

Introduction agrave lrsquoergonomie

Charge de travail58

Cornelia Laros

Introduction agrave lrsquoergonomie

Controle explicite59

Cornelia Laros

Introduction agrave lrsquoergonomie

Controles explicites60

Cornelia Laros

Dar983595 983541983527t983545983589983590n

text

Adaptabiliteacute61

Cornelia Laros

text

Gestion des erreurs62

Cornelia Laros

text

Signifiance des codes et deacutenominations

63

Cornelia Laros

text

Homogeacuteneacuteiteacute - coheacuterence64

Cornelia Laros

text

Homogeacuteneacuteiteacute - Distinction65

Cornelia Laros

text

Compatibiliteacute66

Cornelia Laros

text

Compatibiliteacute67

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction68

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction69

Cornelia Laros

text

Gestalt Theorie70

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Gestalt Theorie71

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Dark patterns72

Cornelia Laros

Introduction agrave lrsquoergonomie

A vous de jouer

73

Cornelia Laros

Introduction agrave lrsquoergonomie

Outils de prototypages DIY74

Cornelia Laros

Low tech papier + crayons post-its cartes agrave jouer

Gratuit en ligne Invision app Moqups UXPin

Mac Sketch Balsamiq Mockups Axure

PC Axure Balsamiq

Mobile Prototyping on Paper

Ap983540983590en983530983555 983592983589 no983547983549983589983537le983543 983581h983586983543983589983588

Introduction agrave lrsquoergonomie

Test de perception DIY75

Cornelia Laros

La premiegravere impression qursquoun utilisateur se fait de votre IHM va influencer tous ses jugements ulteacuterieurs Crsquoest lrsquoeffet de halo

bull Un utilisateur qui a une premiegravere impression positive de votre appli passera plus facilement outre les bugs

bull Une premiegravere impression negative rendra lrsquoutilisateur plus critique vis agrave vis de deacutetails qui confirment son jugement

Cel983527 983538983580983590c983532e 983527983548983588si 983527983549983589983581 vo983543 983586983590983580ux 983591rsquoex983527983538983589983585s vo983543 983530983585t983542983589983546i983530n983543 983592rsquoem983528983527983548983581he 983530983545 983550983587s 983542e983585d983530983555-vo983547983543 983581l983535e983539983546s

Introduction agrave lrsquoergonomie

Test de perception DIY76

Cornelia Laros

Montrer votre prototype agrave quelqursquoun pendant 5 secondes

Demandez-lui

bull Ce qursquoil a vu

bull Ce qursquoil a compris de ce qursquoil a vu

bull Ce qui lrsquoa surpris ou marqueacute

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY77

Cornelia Laros

Les difficulteacutes de navigation se produisent souvent dans les niveaux les plus haut de votre structure de contenu Vous pouvez veacuterifier facilement si la classification logique pour vous lrsquoest aussi pour vos utilisateurs

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY78

Cornelia Laros

Lister trois (max) niveaux de profondeur de votre contenu structureacute Masquez ensuite les contenus de niveau plus bas Utilisez par exemple les groupements de lignes dans excel pour creacuteer des pliers-deacutepliers ou imprimer la liste sur une feuille que vous pliez pour masquer certaines parties

Demandez agrave un utilisateur de vous dire ougrave il penserait trouver un contenu bien preacutecis en preacutecisant qursquoil nrsquoy a pas de bonne reacuteponse

Notez srsquoil va chercher lagrave ougrave vous vous y attendiez ougrave il a heacutesiteacute et ce qursquoil a fini par choisir pour vous aider agrave rendre la navigation plus intuitive

Introduction agrave lrsquoergonomie

Test drsquoutilisabiliteacute DIY79

Cornelia Laros

A chaque nouvelle fonctionnaliteacute ajouteacutee demandez agrave quelqursquoun qui ne connait pas le projet de srsquoen servir Proposez lui une seule tacircche geacuteneacuterique agrave accomplir avec la fonctionnaliteacute

Exemple Tu veux prendre un rendez-vous avec un meacutedecin sur ce site montres-moi comment tu ferais en commentant agrave haute voix

Le plus important ici crsquoest de ne pas reacuteagir agrave ce qursquoil fait mais simplement le regarder faire sans lrsquoaider mecircme srsquoil est bloqueacute

Srsquoil 983540983586983588983589 de983543 983578983547983589s983545i983586983585s reacutepo983539983592983530z 983540983580983590 un983530 983577983548e983588t983534983587983539 o983547 d983535983545e983588 l983547983535 983577u983530 983550983587us 983536983547983535 983590eacutepo983539983592r983530983555 983578983548an983591 983534983537 983580ur983527 fi983539983535 983588rsquoil 983534983539983588983535s983545e Srsquoil 983530983543983546 v983542983580i983593983530n983545 983529l983587983577ueacute di983545983530983588 l983548i 983577983547983589 983550o983547s 983580983536983537ez 983542983530983550983587ir 983549983586983546r983589 983579o983541983534983589 et 983530983543983588983580ye983555 983592983530 c983587983538983541re983539983592r983530 983579983589 983578u983534 l983589 9835316ne

Introduction agrave lrsquoergonomie

Pas besoin de reacuteinventer la roue DIY

80

Cornelia Laros

Il existe des bonnes pratiques qui vous eacuteviteront de reacuteinventer la roue Utilisez des laquo design patterns raquo pour concevoir vos interfaces

Renseignez vous sur la Gestalt Theorie pour agencer vos pages

Utilisez les critegraveres de Bastien et Scapin pour trouver des deacutefauts eacutevidents avant de tester vous en tirerez des enseignements plus inteacuteressants

Ma983534s ccedila crsquoes983545 983541983586983548r u983539983530 983580u983546r983530 983559983587i983588

Introduction agrave lrsquoergonomie

Quizz time

81

Cornelia Laros

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

82

Cornelia Laros

1 c Fonctionnel

2 a Fiable

3 d Accessible

4 b Intuitif

5 e Plaisant

6 f Porteur de sens

text

F - Quel besoin ai-je oublieacute dans la question preacuteceacutedente

83

Cornelia Laros

Uti983536983534983588983580b983536e

Introduction agrave lrsquoergonomie

Tests DIY84

Cornelia Laros

Reacutedigez la proceacutedure pour tester un de vos projets drsquoIHM avec le test de votre choix perception arborescence ou utilisabiliteacute

Notez la question que vous vous posez et la question que vous allez poser

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

Introduction agrave lrsquoergonomie

Domaines drsquointervention18

Cornelia Laros

Organisationnelle 10

Physique 20

Cognitive 70

Introduction agrave lrsquoergonomie

Quizz time

19

Cornelia Laros

text

A - Lrsquoergonomie sert agravehellip20

Cornelia Laros

1 ameacuteliorer les conditions de travail

2 faire gagner plus drsquoargent agrave lrsquoentreprise

3 ameacuteliorer lrsquoestheacutetique

4 comprendre comment ameacuteliorer un produit

text

B - Quelles affirmations sont vraies

21

Cornelia Laros

1 Lrsquoergonomie srsquoattache agrave comprendre le travail pour le transformer

2 Il est possible de concevoir une IHM qui fonctionne pour tout le monde en se basant sur des normes

3 Lrsquoutilisateur va se servir de votre produit de la faccedilon dont vous lrsquoavez imagineacute

4 Lrsquoutilisateur interpregravete une tacircche comme un problegraveme qursquoil doit reacutesoudre en faisant avec ses caracteacuteristiques et les moyens mis agrave sa disposition

text

Pause cafeacute

10 minutes

22

Cornelia Laros

Introduction agrave lrsquoergonomie

Quelques meacutethodes drsquoergonomie

23

Cornelia Laros

Introduction agrave lrsquoergonomie

Ergonomie de conception

24

Cornelia Laros

Ergonomie de correctionbull Analyse drsquoactiviteacute

bull Audit

bull Analyse drsquoeacutevegravenements critiques

bull Analyse de traces

bull Simulation

bull Entretiens

bull Persona cartes drsquoexpeacuteriences

bull Tri par cartes

bull Prototypage

bull Benchmarkhellip

Lrsquoergonomie tout au long du projet

Introduction agrave lrsquoergonomie

Ergonomie de conception

25

Cornelia Laros

Ergonomie de correctionbull Analyse drsquoactiviteacute

bull Audit

bull Analyse drsquoeacutevegravenements critiques

bull Analyse de traces

bull Simulationhellip

bullEntretiens

bullPersona cartes drsquoexpeacuteriences

bullTri par cartes

bullPrototypage

bullBenchmarkhellip

Des meacutethodes de recueil de donneacutees avec utilisateurs finaux et de conception laquo experte raquo

Introduction agrave lrsquoergonomie

Pourquoi ces meacutethodes26

Cornelia Laros

bull Si jrsquoavais demandeacute aux utilisateurs ce qursquoils voulaient ils mrsquoauraient demandeacute un cheval plus rapide - Henri Ford

bull Un comportement laquo sur-appris raquo devient un automatisme inconscient que lrsquoutilisateur ne saura pas expliquer (ex passer les vitesses en conduisant)

bull Le cerveau humain est propice agrave la fabulation (imagination de causes) aux faux souvenirs (en toute bonne fois) les biais (deacutesirabiliteacute effet pygmalion influence socialehellip)

Observer

Introduction agrave lrsquoergonomie

Pourquoi ces meacutethodes27

Cornelia Laros

bull Une imagine est plus parlante que 10 000 mots

bull Permet drsquoeacutevaluer une ideacutee agrave moindre coucirct donc de se tromper souvent et drsquoapprendre plus vite pour valider une ideacutee ou lrsquoameacuteliorer

bull Permet de tester plein drsquoideacutees et de retenir la meilleure

hellip A condition de se focaliser sur un objectif et non sur lrsquoideacutee elle-mecircme

Modeacuteliser

Introduction agrave lrsquoergonomie

Lrsquoensemble permet drsquoeacuteviter ceci

28

Cornelia Laros

Introduction agrave lrsquoergonomie

Lrsquoensemble permet drsquoeacuteviter ceci

29

Cornelia Laros

Eli983538983534983585eacute en 983586983528983588983589r983549a983585t

Eli983538983534983585eacute en 983540983590983586t983587983545983584pa983539983546

Introduction agrave lrsquoergonomie

Prototyper pour vous crsquoesthellip30

Cornelia Laros

CONTRIBUTION AUX SPECIFICATIONS FONCTIONNELLES

Zoning basse fideacuteliteacute wireframe statique (sketch ou non) bull Rapide et peu couteux bull Illustratif statique pas drsquointeraction bull Non engageant sur le design bull Tregraves peu explicite sur le plan fonctionnel

Story-board cliquable bull Illustre la navigation bull Permet de se projeter dans lrsquointeraction bull Pose les bases du design et du fonctionnel

Prototype semi-dynamique bull Se veut complet (ou quasi) sur le plan de la

navigation de lrsquointeraction et des cas drsquoutilisation bull Doit permettre de simuler fidegravelement le

fonctionnement drsquoune application bull Est une speacutecification fonctionnelle en soi

Pha983543983530 983592983589 ca983591983590983527g983589 AM983623983607

Pha983543983530 983592983589 co983539983581983530p983545983535o983585 f983586983539983581t983535o983539983585983530l983536983589

Tes983545983588 983547t983535983536i983588983527t983589u983542983588 ap983540983537983534s 983538983587983529il983530983543hellip

Introduction agrave lrsquoergonomie

Prototype basse definition31

Cornelia Laros

Introduction agrave lrsquoergonomie

Prototyper cliquable32

Cornelia Laros

Introduction agrave lrsquoergonomie

Prototyper semi-dynamique33

Cornelia Laros

Page Title

1230

Mobile interactions

Observably Sc i$amp

About

Project overiew

Manage sessions

Manage variables

Settings

Start observing

1230 1230

OverviewObserve

Observe mobile interactions in the field to assess dominant hand for holding and interacting with smartphones

10042016Mobile interactionsMobile interactions

Welcome to Observably Gather and manage observation dataGather and manage observation data

My projects

1230

Tags separate with comas

Variable value

Create

Add observablesAdd all observables you want to track for this project You can come back and edit them laterAdd all observables you want to track for this project You can come back and edit them later

Thanks for the hint

Manage variablesMobile InteractionsMobile Interactions

1230

Tags separate with comas

Variable value

Create

Left hand Right thumbLRTLRT

Manage variablesMobile InteractionsMobile Interactions

Irsquom done Start recording

Save changesCancel

Observable Tags separate with coma

Tags separate with comas

3 20

LRILRI

Observable label

Did you knowTap on the icon to customize it Use icons from our library or from your gallery to make variables pop out when observing

Tap on the icon to customize it Use icons from our library or from your gallery to make variables pop out when observing

Thanks for the hint

Left hand Right thumbLRTLRT

Irsquom done Start recording

Manage variablesMobile InteractionsMobile Interactions

Left hand x Right thumb x

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Did you knowIf you make a mistake you can undo your action by tapping on the icon of the taskIf you make a mistake you can undo your action by tapping on the icon of the task

Thanks for the hint

Session 1

Discrete mode New Session

Mobile InteractionsMobile Interactions

1230

Record vocal comment

LRILRILRILRILRILRI

Did you knowYou can record occurences durations and comments by chosing the record format in the drop-down above

You can record occurences durations and comments by chosing the record format in the drop-down above

Thanks for the hint

Discrete mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

Left hand Right thumbLRT

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Did you knowIn list view you can slipe left and right to increment or correct your countIn list view you can slipe left and right to increment or correct your count

Thanks for the hint

Continuous mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

LRILRILRILRILRI

Did you knowIf you make a mistake you can undo your action by tapping on the icon of the taskIf you make a mistake you can undo your action by tapping on the icon of the task

Thanks for the hint

Continuous mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

Tags separate with comas

Comment

Add

Did you know The timestamp of vocal comments is the start time to accurately mark events that triggered your comment

The timestamp of vocal comments is the start time to accurately mark events that triggered your comment

Thanks for the hint

Manage observables

Comments mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Stop recording vocal comment

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Your observationsManage and cleanup sessions before exporting dataManage and cleanup sessions before exporting data

Session ManagementMobile InteractionsMobile Interactions

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

LRT

LRI

RLI

RLT

RRT20

20

8

35

15

Count SummaryCount Summary

RLT

RRT20

815

Time SummaryTime Summary

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

Left hand Right thumbLRTLRT

+1+1

10042016 124627

Left hand Right thumbLRTLRT

2rsquorsquo2rsquorsquo

10042016 124627 - 10042016 124629

Content of my comment boxTag1 Tag2

10042016 124644

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

LRTLRT+1+1

10042016 124627

Save changes

Observable Tags separate with coma

Tags separate with comas

Left hand x Right thumb x

AboutAbout

1230

Observable science provides tools for field research and scientific observation It is tailored to the needs of ethnography human factors psychology usability and games user research

Observable science provides tools for field research and scientific observation It is tailored to the needs of ethnography human factors psychology usability and games user research

Observablyscience

Development by Morgane RadelDesign by Cornelia LarosDevelopment by Morgane RadelDesign by Cornelia Laros

Credits

Support (us)Show your love Rate the App

Make a donation

Contact us

Visit our website

Add session tags to all observations

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

Save changes

Session Tags separate with coma

Tags separate with comas

Metro x Toulouse x

Manage variablesMobile InteractionsMobile Interactions

1230

Left hand Right thumbLRTLRT

Confirm

Search icons

Cancel

Browse

3 20

Observably Sci$amp

1230

Project statisticsProject statistics Total countsTotal time Total comments First entryLast entrySessions

4 963281231

1441201201603042016

97

Project detailsMobile InteractionsMobile Interactions

Sessions SummarySessions Summary

RRT20

815

Count SummaryCount Summary

JUN 14MAY 14APR 14MAR 14FEB 14JAN 14

4

1

65

7

0

2

4

6

8

10

3

2014

Manage sessions

Settings ExportOverview

1230

App optionsDisplay hintsDisplay hints

SettingsSettings

Share anonymous data to improve the appShare anonymous data to improve the app

1230

Gather and manage observation data with ObservablyGather and manage observation data with Observably

Welcome to Observably

Project name

Project description what is the goal of your project

CreateCancel

Session[number]Session[number]

Default Session ID

Default export format txt

Data options

Default Discrete variable lines view

Create a new project

1230

Project detailsMobile InteractionsMobile Interactions

Mobile InteractionsMobile Interactions

Project description what is the goal of your project

SaveCancel

Session[number]Session[number]

Default Session ID

Default export format txt

Data options

Default continuous variables grid view

Project name

Manage sessions

Settings ExportOverview

1230

Project detailsMobile InteractionsMobile Interactions

Manage sessions

Settings ExportOverview

Export format txt

Export data

Data has been successfully exported as MobileInteractionstxt

to your download folder

Observably Sc i$amp

Settings

1230

BUTTONBUTTON

Permissions

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Up exlaborum incididunt quis nostrud exercitatn

COMPONENTS

Pickers

OKCANCEL

13

Friday

MAR

2014

MS W T F ST

30 31

1

16 17 19 20 21 2218

23 24 26 27 28 2925

139 10 12 14 1511

72 3 5 6 84

March 2014

OKCANCEL

PMAM

112

9

10

11

2

48

576

3

330 AM

Notifications

Incoming call

Rachel Ligson

IGNORE ANSWER

REPLYARCHIVE

Hey letrsquos catch up soon Do you want to grab lunch sometime this weekendLet me know when yoursquore free

409 PMHannah ChoHannah Cho

Do you know what I mean509 PMTina McBeanTina McBean

Heads up notification

Regular + Expanded notification

Index scroller

All

Patrick Keenan

Mary Johnson

Tina Santiago

Trevor Hansen

Amar Sagoo

Abbey Christensen

Ali Connors

Alex Nelson

Anthony Stevens

A

A

1230

Abcdefg

Abcdefghijklmno

Tabs

THE THIRDITEM TWONO ONE

THE THIRDITEM TWONO ONE

1230

THE THIRDITEM TWONO ONE

Page Title

1230

121 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

110 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

51 50

Input text for a single line field with a maximu

Single-Line Input Label

31 50

Input text for a single line field with a max

Single-Line Input Label

121 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

110 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

51 50

Input text for a single line field with a maximuInput text for a single line field with a maximu

Single-Line Input Label

31 50

Input text for a single line field with a maxInput text for a single line field with a max

Single-Line Input Label

Disabled text field

Input text

Username or Password is incorrect

Input text

Input tex

Hint text

Hint text

Hint text

Disabled text field

Input textInput text

Username or Password is incorrect

Input textInput text

Input texInput tex

Hint text

Hint text

Hint text

Text fields

Switches and sliders

60

Regular

Pressed

Disabled

60

Regular

Pressed

Disabled

Buttons

DISABLED

PRESSED

NORMAL

DISABLED

PRESSED

NORMAL

Flat Raised

DISABLED

PRESSED

NORMAL

DISABLED

PRESSED

NORMAL

Flat Raised

Toasts

This color applies to both light and dark theme

This item already has the label ldquotravelrdquo You can add a new label

ACTIONSingle-Line Snackbar

Menu

Arial 100

100

Calibri

Courier

Verdana

Arial

Chips

Trevor Hansen

email3emailcom

email2emailcom

primaryemailemailcomContact Name

Dialogs

Desktop

Without title With title

BUTTONBUTTON

PermissionsLorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Up exlaborum incididunt quis nostrud exercitatn

BUTTONBUTTON

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Ut enim ad minim ikad veniam quis nostrud exercitatn ullamco laboris nisi ut aliquip exlaborum incididunt

ACCEPTDECLINEMORE INFO

Permissions

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisinuli

Toolbar

11Roboto

Cards

Welcome BackItrsquos been a while have you read any new books latelyItrsquos been a while have you read any new books lately

YESNOPE

Kangaroo Valley Safari

Located two hours south of Sydney in the

Southern Highlands of New South Wales

LEARN MORESHARE

REVIEWFREE SAMPLE

By Alex Nelson

El Pooch

Pre-fab Homes

Favorite Road Trips

Best Airlines

Campbell

Groceries

almond milk

coconut water

cucumber

green apples

Yuna tickets on sale 624

May 24 2014

Clean desk

Keyboards

suggestion suggestion suggestion

123

a s d f g h j k l

z x c v b n m

q w e r t y u i o p1 2 3 4 5 6 7 8 9 0

suggestion suggestion suggestion

123

a s d f g h j k l

z x c v b n m

q w e r t y u i o p1 2 3 4 5 6 7 8 9 0

Bottom Sheet

Print this page

Copy

Upload

Share

MoreMail Message

Google+Gmail Hangout

Grid

Two lineSupport text

Two lineSupport text

Single line

Single line

Lists

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Three-line itemThree-line item

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Three-line itemThree-line item

Three-line itemThree-line item

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Three-line itemThree-line item

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Three-line itemThree-line item

Three-line itemThree-line item

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Line item unselectedLine item unselected

Line item selectedLine item selected

Line item selectedLine item selected

Data usageData usage

BluetoothBluetooth

Wi-FiWi-Fi

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Single-line itemSingle-line item

Single-line itemSingle-line item

Single-line itemSingle-line itemSingle-line itemSingle-line item

Single-line itemSingle-line item

Single-line itemSingle-line item

Introduction agrave lrsquoergonomie

Ergonomie et Design34

Cornelia Laros

Design Ergonomie Design Ergonomie

Identiteacute

Communication

Ambiance

Exemple un site institutionnel informatif avec une navigation simple et des exigences fortes

drsquoidentiteacuteExemple une application meacutetier destineacutee agrave une

population drsquoutilisateur connue

EfficaciteacuteFonctionnel

Outils

Service en ligne

Architecture de lrsquoinformation contenus bonnes pratiques

Analyse tache vs activiteacute prise en compte globaliseacutee des process

postes de travail eacutecosystegraveme existant hellip puis la conception

Image Usage freacutequent

Usage ponctuel

Votre eacutequipe Ergonome Directeur aristique Webdesigner UX Designer

Introduction agrave lrsquoergonomie

Design avant-tout35

Cornelia Laros

Introduction agrave lrsquoergonomie

Equilibreacute36

Cornelia Laros

Introduction agrave lrsquoergonomie

Ergonomie avant tout37

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

38

Cornelia Laros

text

Lrsquoergonomie sert agravehellip39

Cornelia Laros

1 ameacuteliorer les conditions de travail

2 faire gagner plus drsquoargent agrave lrsquoentreprise

3 ameacuteliorer lrsquoestheacutetique

4 comprendre comment ameacuteliorer un produit

text

Quelles affirmations sont vraies

40

Cornelia Laros

1 Lrsquoergonomie srsquoattache agrave comprendre le travail pour le transformer

2 Il est possible de concevoir une IHM qui fonctionne pour tout le monde en se basant sur des normes

3 Lrsquoutilisateur va se servir de votre produit de la faccedilon dont vous lrsquoavez imagineacute

4 Lrsquoutilisateur interpregravete une tacircche comme un problegraveme qursquoil doit reacutesoudre en faisant avec ses caracteacuteristiques et les moyens mis agrave sa disposition

text

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

41

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

text

D - A quoi sert un prototype

42

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

43

Cornelia Laros

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

44

Cornelia Laros

Utilisabiliteacute

Utiliteacute

Efficaciteacute Efficience

Satisfaction

Introduction agrave lrsquoergonomie

Pyramide des besoins MASLOW

45

Cornelia Laros

Introduction agrave lrsquoergonomie

Pyramide des besoins IHM46

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

47

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

48

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

49

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

50

Cornelia Laros

Introduction agrave lrsquoergonomie

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

51

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

Introduction agrave lrsquoergonomie

D - A quoi sert un prototype

52

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

53

Cornelia Laros

a Fiable

b Intuitif

c Fonctionnel

d Accessible

e Plaisant

f Porteur de sens

Introduction agrave lrsquoergonomie

F - Quel besoin ai-je oublieacute dans la question

preacuteceacutedente

54

Cornelia Laros

text

Patterns amp Dark patterns

55

Cornelia Laros

text

Criteres de Bastien et Scapin56

Cornelia Laros

Guidage

Charge de travail

Controcircle utilisateur explicite

Flexibiliteacute ( adaptabiliteacute)

Gestion des erreurs

Homogeacuteneacuteiteacute ( coheacuterence)

Signifiance des Codes et Deacutenominations

Compatibiliteacute ( familiariteacute)

Introduction agrave lrsquoergonomie

Guidage57

Cornelia Laros

Introduction agrave lrsquoergonomie

Charge de travail58

Cornelia Laros

Introduction agrave lrsquoergonomie

Controle explicite59

Cornelia Laros

Introduction agrave lrsquoergonomie

Controles explicites60

Cornelia Laros

Dar983595 983541983527t983545983589983590n

text

Adaptabiliteacute61

Cornelia Laros

text

Gestion des erreurs62

Cornelia Laros

text

Signifiance des codes et deacutenominations

63

Cornelia Laros

text

Homogeacuteneacuteiteacute - coheacuterence64

Cornelia Laros

text

Homogeacuteneacuteiteacute - Distinction65

Cornelia Laros

text

Compatibiliteacute66

Cornelia Laros

text

Compatibiliteacute67

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction68

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction69

Cornelia Laros

text

Gestalt Theorie70

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Gestalt Theorie71

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Dark patterns72

Cornelia Laros

Introduction agrave lrsquoergonomie

A vous de jouer

73

Cornelia Laros

Introduction agrave lrsquoergonomie

Outils de prototypages DIY74

Cornelia Laros

Low tech papier + crayons post-its cartes agrave jouer

Gratuit en ligne Invision app Moqups UXPin

Mac Sketch Balsamiq Mockups Axure

PC Axure Balsamiq

Mobile Prototyping on Paper

Ap983540983590en983530983555 983592983589 no983547983549983589983537le983543 983581h983586983543983589983588

Introduction agrave lrsquoergonomie

Test de perception DIY75

Cornelia Laros

La premiegravere impression qursquoun utilisateur se fait de votre IHM va influencer tous ses jugements ulteacuterieurs Crsquoest lrsquoeffet de halo

bull Un utilisateur qui a une premiegravere impression positive de votre appli passera plus facilement outre les bugs

bull Une premiegravere impression negative rendra lrsquoutilisateur plus critique vis agrave vis de deacutetails qui confirment son jugement

Cel983527 983538983580983590c983532e 983527983548983588si 983527983549983589983581 vo983543 983586983590983580ux 983591rsquoex983527983538983589983585s vo983543 983530983585t983542983589983546i983530n983543 983592rsquoem983528983527983548983581he 983530983545 983550983587s 983542e983585d983530983555-vo983547983543 983581l983535e983539983546s

Introduction agrave lrsquoergonomie

Test de perception DIY76

Cornelia Laros

Montrer votre prototype agrave quelqursquoun pendant 5 secondes

Demandez-lui

bull Ce qursquoil a vu

bull Ce qursquoil a compris de ce qursquoil a vu

bull Ce qui lrsquoa surpris ou marqueacute

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY77

Cornelia Laros

Les difficulteacutes de navigation se produisent souvent dans les niveaux les plus haut de votre structure de contenu Vous pouvez veacuterifier facilement si la classification logique pour vous lrsquoest aussi pour vos utilisateurs

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY78

Cornelia Laros

Lister trois (max) niveaux de profondeur de votre contenu structureacute Masquez ensuite les contenus de niveau plus bas Utilisez par exemple les groupements de lignes dans excel pour creacuteer des pliers-deacutepliers ou imprimer la liste sur une feuille que vous pliez pour masquer certaines parties

Demandez agrave un utilisateur de vous dire ougrave il penserait trouver un contenu bien preacutecis en preacutecisant qursquoil nrsquoy a pas de bonne reacuteponse

Notez srsquoil va chercher lagrave ougrave vous vous y attendiez ougrave il a heacutesiteacute et ce qursquoil a fini par choisir pour vous aider agrave rendre la navigation plus intuitive

Introduction agrave lrsquoergonomie

Test drsquoutilisabiliteacute DIY79

Cornelia Laros

A chaque nouvelle fonctionnaliteacute ajouteacutee demandez agrave quelqursquoun qui ne connait pas le projet de srsquoen servir Proposez lui une seule tacircche geacuteneacuterique agrave accomplir avec la fonctionnaliteacute

Exemple Tu veux prendre un rendez-vous avec un meacutedecin sur ce site montres-moi comment tu ferais en commentant agrave haute voix

Le plus important ici crsquoest de ne pas reacuteagir agrave ce qursquoil fait mais simplement le regarder faire sans lrsquoaider mecircme srsquoil est bloqueacute

Srsquoil 983540983586983588983589 de983543 983578983547983589s983545i983586983585s reacutepo983539983592983530z 983540983580983590 un983530 983577983548e983588t983534983587983539 o983547 d983535983545e983588 l983547983535 983577u983530 983550983587us 983536983547983535 983590eacutepo983539983592r983530983555 983578983548an983591 983534983537 983580ur983527 fi983539983535 983588rsquoil 983534983539983588983535s983545e Srsquoil 983530983543983546 v983542983580i983593983530n983545 983529l983587983577ueacute di983545983530983588 l983548i 983577983547983589 983550o983547s 983580983536983537ez 983542983530983550983587ir 983549983586983546r983589 983579o983541983534983589 et 983530983543983588983580ye983555 983592983530 c983587983538983541re983539983592r983530 983579983589 983578u983534 l983589 9835316ne

Introduction agrave lrsquoergonomie

Pas besoin de reacuteinventer la roue DIY

80

Cornelia Laros

Il existe des bonnes pratiques qui vous eacuteviteront de reacuteinventer la roue Utilisez des laquo design patterns raquo pour concevoir vos interfaces

Renseignez vous sur la Gestalt Theorie pour agencer vos pages

Utilisez les critegraveres de Bastien et Scapin pour trouver des deacutefauts eacutevidents avant de tester vous en tirerez des enseignements plus inteacuteressants

Ma983534s ccedila crsquoes983545 983541983586983548r u983539983530 983580u983546r983530 983559983587i983588

Introduction agrave lrsquoergonomie

Quizz time

81

Cornelia Laros

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

82

Cornelia Laros

1 c Fonctionnel

2 a Fiable

3 d Accessible

4 b Intuitif

5 e Plaisant

6 f Porteur de sens

text

F - Quel besoin ai-je oublieacute dans la question preacuteceacutedente

83

Cornelia Laros

Uti983536983534983588983580b983536e

Introduction agrave lrsquoergonomie

Tests DIY84

Cornelia Laros

Reacutedigez la proceacutedure pour tester un de vos projets drsquoIHM avec le test de votre choix perception arborescence ou utilisabiliteacute

Notez la question que vous vous posez et la question que vous allez poser

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

Introduction agrave lrsquoergonomie

Quizz time

19

Cornelia Laros

text

A - Lrsquoergonomie sert agravehellip20

Cornelia Laros

1 ameacuteliorer les conditions de travail

2 faire gagner plus drsquoargent agrave lrsquoentreprise

3 ameacuteliorer lrsquoestheacutetique

4 comprendre comment ameacuteliorer un produit

text

B - Quelles affirmations sont vraies

21

Cornelia Laros

1 Lrsquoergonomie srsquoattache agrave comprendre le travail pour le transformer

2 Il est possible de concevoir une IHM qui fonctionne pour tout le monde en se basant sur des normes

3 Lrsquoutilisateur va se servir de votre produit de la faccedilon dont vous lrsquoavez imagineacute

4 Lrsquoutilisateur interpregravete une tacircche comme un problegraveme qursquoil doit reacutesoudre en faisant avec ses caracteacuteristiques et les moyens mis agrave sa disposition

text

Pause cafeacute

10 minutes

22

Cornelia Laros

Introduction agrave lrsquoergonomie

Quelques meacutethodes drsquoergonomie

23

Cornelia Laros

Introduction agrave lrsquoergonomie

Ergonomie de conception

24

Cornelia Laros

Ergonomie de correctionbull Analyse drsquoactiviteacute

bull Audit

bull Analyse drsquoeacutevegravenements critiques

bull Analyse de traces

bull Simulation

bull Entretiens

bull Persona cartes drsquoexpeacuteriences

bull Tri par cartes

bull Prototypage

bull Benchmarkhellip

Lrsquoergonomie tout au long du projet

Introduction agrave lrsquoergonomie

Ergonomie de conception

25

Cornelia Laros

Ergonomie de correctionbull Analyse drsquoactiviteacute

bull Audit

bull Analyse drsquoeacutevegravenements critiques

bull Analyse de traces

bull Simulationhellip

bullEntretiens

bullPersona cartes drsquoexpeacuteriences

bullTri par cartes

bullPrototypage

bullBenchmarkhellip

Des meacutethodes de recueil de donneacutees avec utilisateurs finaux et de conception laquo experte raquo

Introduction agrave lrsquoergonomie

Pourquoi ces meacutethodes26

Cornelia Laros

bull Si jrsquoavais demandeacute aux utilisateurs ce qursquoils voulaient ils mrsquoauraient demandeacute un cheval plus rapide - Henri Ford

bull Un comportement laquo sur-appris raquo devient un automatisme inconscient que lrsquoutilisateur ne saura pas expliquer (ex passer les vitesses en conduisant)

bull Le cerveau humain est propice agrave la fabulation (imagination de causes) aux faux souvenirs (en toute bonne fois) les biais (deacutesirabiliteacute effet pygmalion influence socialehellip)

Observer

Introduction agrave lrsquoergonomie

Pourquoi ces meacutethodes27

Cornelia Laros

bull Une imagine est plus parlante que 10 000 mots

bull Permet drsquoeacutevaluer une ideacutee agrave moindre coucirct donc de se tromper souvent et drsquoapprendre plus vite pour valider une ideacutee ou lrsquoameacuteliorer

bull Permet de tester plein drsquoideacutees et de retenir la meilleure

hellip A condition de se focaliser sur un objectif et non sur lrsquoideacutee elle-mecircme

Modeacuteliser

Introduction agrave lrsquoergonomie

Lrsquoensemble permet drsquoeacuteviter ceci

28

Cornelia Laros

Introduction agrave lrsquoergonomie

Lrsquoensemble permet drsquoeacuteviter ceci

29

Cornelia Laros

Eli983538983534983585eacute en 983586983528983588983589r983549a983585t

Eli983538983534983585eacute en 983540983590983586t983587983545983584pa983539983546

Introduction agrave lrsquoergonomie

Prototyper pour vous crsquoesthellip30

Cornelia Laros

CONTRIBUTION AUX SPECIFICATIONS FONCTIONNELLES

Zoning basse fideacuteliteacute wireframe statique (sketch ou non) bull Rapide et peu couteux bull Illustratif statique pas drsquointeraction bull Non engageant sur le design bull Tregraves peu explicite sur le plan fonctionnel

Story-board cliquable bull Illustre la navigation bull Permet de se projeter dans lrsquointeraction bull Pose les bases du design et du fonctionnel

Prototype semi-dynamique bull Se veut complet (ou quasi) sur le plan de la

navigation de lrsquointeraction et des cas drsquoutilisation bull Doit permettre de simuler fidegravelement le

fonctionnement drsquoune application bull Est une speacutecification fonctionnelle en soi

Pha983543983530 983592983589 ca983591983590983527g983589 AM983623983607

Pha983543983530 983592983589 co983539983581983530p983545983535o983585 f983586983539983581t983535o983539983585983530l983536983589

Tes983545983588 983547t983535983536i983588983527t983589u983542983588 ap983540983537983534s 983538983587983529il983530983543hellip

Introduction agrave lrsquoergonomie

Prototype basse definition31

Cornelia Laros

Introduction agrave lrsquoergonomie

Prototyper cliquable32

Cornelia Laros

Introduction agrave lrsquoergonomie

Prototyper semi-dynamique33

Cornelia Laros

Page Title

1230

Mobile interactions

Observably Sc i$amp

About

Project overiew

Manage sessions

Manage variables

Settings

Start observing

1230 1230

OverviewObserve

Observe mobile interactions in the field to assess dominant hand for holding and interacting with smartphones

10042016Mobile interactionsMobile interactions

Welcome to Observably Gather and manage observation dataGather and manage observation data

My projects

1230

Tags separate with comas

Variable value

Create

Add observablesAdd all observables you want to track for this project You can come back and edit them laterAdd all observables you want to track for this project You can come back and edit them later

Thanks for the hint

Manage variablesMobile InteractionsMobile Interactions

1230

Tags separate with comas

Variable value

Create

Left hand Right thumbLRTLRT

Manage variablesMobile InteractionsMobile Interactions

Irsquom done Start recording

Save changesCancel

Observable Tags separate with coma

Tags separate with comas

3 20

LRILRI

Observable label

Did you knowTap on the icon to customize it Use icons from our library or from your gallery to make variables pop out when observing

Tap on the icon to customize it Use icons from our library or from your gallery to make variables pop out when observing

Thanks for the hint

Left hand Right thumbLRTLRT

Irsquom done Start recording

Manage variablesMobile InteractionsMobile Interactions

Left hand x Right thumb x

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Did you knowIf you make a mistake you can undo your action by tapping on the icon of the taskIf you make a mistake you can undo your action by tapping on the icon of the task

Thanks for the hint

Session 1

Discrete mode New Session

Mobile InteractionsMobile Interactions

1230

Record vocal comment

LRILRILRILRILRILRI

Did you knowYou can record occurences durations and comments by chosing the record format in the drop-down above

You can record occurences durations and comments by chosing the record format in the drop-down above

Thanks for the hint

Discrete mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

Left hand Right thumbLRT

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Did you knowIn list view you can slipe left and right to increment or correct your countIn list view you can slipe left and right to increment or correct your count

Thanks for the hint

Continuous mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

LRILRILRILRILRI

Did you knowIf you make a mistake you can undo your action by tapping on the icon of the taskIf you make a mistake you can undo your action by tapping on the icon of the task

Thanks for the hint

Continuous mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

Tags separate with comas

Comment

Add

Did you know The timestamp of vocal comments is the start time to accurately mark events that triggered your comment

The timestamp of vocal comments is the start time to accurately mark events that triggered your comment

Thanks for the hint

Manage observables

Comments mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Stop recording vocal comment

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Your observationsManage and cleanup sessions before exporting dataManage and cleanup sessions before exporting data

Session ManagementMobile InteractionsMobile Interactions

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

LRT

LRI

RLI

RLT

RRT20

20

8

35

15

Count SummaryCount Summary

RLT

RRT20

815

Time SummaryTime Summary

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

Left hand Right thumbLRTLRT

+1+1

10042016 124627

Left hand Right thumbLRTLRT

2rsquorsquo2rsquorsquo

10042016 124627 - 10042016 124629

Content of my comment boxTag1 Tag2

10042016 124644

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

LRTLRT+1+1

10042016 124627

Save changes

Observable Tags separate with coma

Tags separate with comas

Left hand x Right thumb x

AboutAbout

1230

Observable science provides tools for field research and scientific observation It is tailored to the needs of ethnography human factors psychology usability and games user research

Observable science provides tools for field research and scientific observation It is tailored to the needs of ethnography human factors psychology usability and games user research

Observablyscience

Development by Morgane RadelDesign by Cornelia LarosDevelopment by Morgane RadelDesign by Cornelia Laros

Credits

Support (us)Show your love Rate the App

Make a donation

Contact us

Visit our website

Add session tags to all observations

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

Save changes

Session Tags separate with coma

Tags separate with comas

Metro x Toulouse x

Manage variablesMobile InteractionsMobile Interactions

1230

Left hand Right thumbLRTLRT

Confirm

Search icons

Cancel

Browse

3 20

Observably Sci$amp

1230

Project statisticsProject statistics Total countsTotal time Total comments First entryLast entrySessions

4 963281231

1441201201603042016

97

Project detailsMobile InteractionsMobile Interactions

Sessions SummarySessions Summary

RRT20

815

Count SummaryCount Summary

JUN 14MAY 14APR 14MAR 14FEB 14JAN 14

4

1

65

7

0

2

4

6

8

10

3

2014

Manage sessions

Settings ExportOverview

1230

App optionsDisplay hintsDisplay hints

SettingsSettings

Share anonymous data to improve the appShare anonymous data to improve the app

1230

Gather and manage observation data with ObservablyGather and manage observation data with Observably

Welcome to Observably

Project name

Project description what is the goal of your project

CreateCancel

Session[number]Session[number]

Default Session ID

Default export format txt

Data options

Default Discrete variable lines view

Create a new project

1230

Project detailsMobile InteractionsMobile Interactions

Mobile InteractionsMobile Interactions

Project description what is the goal of your project

SaveCancel

Session[number]Session[number]

Default Session ID

Default export format txt

Data options

Default continuous variables grid view

Project name

Manage sessions

Settings ExportOverview

1230

Project detailsMobile InteractionsMobile Interactions

Manage sessions

Settings ExportOverview

Export format txt

Export data

Data has been successfully exported as MobileInteractionstxt

to your download folder

Observably Sc i$amp

Settings

1230

BUTTONBUTTON

Permissions

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Up exlaborum incididunt quis nostrud exercitatn

COMPONENTS

Pickers

OKCANCEL

13

Friday

MAR

2014

MS W T F ST

30 31

1

16 17 19 20 21 2218

23 24 26 27 28 2925

139 10 12 14 1511

72 3 5 6 84

March 2014

OKCANCEL

PMAM

112

9

10

11

2

48

576

3

330 AM

Notifications

Incoming call

Rachel Ligson

IGNORE ANSWER

REPLYARCHIVE

Hey letrsquos catch up soon Do you want to grab lunch sometime this weekendLet me know when yoursquore free

409 PMHannah ChoHannah Cho

Do you know what I mean509 PMTina McBeanTina McBean

Heads up notification

Regular + Expanded notification

Index scroller

All

Patrick Keenan

Mary Johnson

Tina Santiago

Trevor Hansen

Amar Sagoo

Abbey Christensen

Ali Connors

Alex Nelson

Anthony Stevens

A

A

1230

Abcdefg

Abcdefghijklmno

Tabs

THE THIRDITEM TWONO ONE

THE THIRDITEM TWONO ONE

1230

THE THIRDITEM TWONO ONE

Page Title

1230

121 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

110 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

51 50

Input text for a single line field with a maximu

Single-Line Input Label

31 50

Input text for a single line field with a max

Single-Line Input Label

121 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

110 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

51 50

Input text for a single line field with a maximuInput text for a single line field with a maximu

Single-Line Input Label

31 50

Input text for a single line field with a maxInput text for a single line field with a max

Single-Line Input Label

Disabled text field

Input text

Username or Password is incorrect

Input text

Input tex

Hint text

Hint text

Hint text

Disabled text field

Input textInput text

Username or Password is incorrect

Input textInput text

Input texInput tex

Hint text

Hint text

Hint text

Text fields

Switches and sliders

60

Regular

Pressed

Disabled

60

Regular

Pressed

Disabled

Buttons

DISABLED

PRESSED

NORMAL

DISABLED

PRESSED

NORMAL

Flat Raised

DISABLED

PRESSED

NORMAL

DISABLED

PRESSED

NORMAL

Flat Raised

Toasts

This color applies to both light and dark theme

This item already has the label ldquotravelrdquo You can add a new label

ACTIONSingle-Line Snackbar

Menu

Arial 100

100

Calibri

Courier

Verdana

Arial

Chips

Trevor Hansen

email3emailcom

email2emailcom

primaryemailemailcomContact Name

Dialogs

Desktop

Without title With title

BUTTONBUTTON

PermissionsLorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Up exlaborum incididunt quis nostrud exercitatn

BUTTONBUTTON

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Ut enim ad minim ikad veniam quis nostrud exercitatn ullamco laboris nisi ut aliquip exlaborum incididunt

ACCEPTDECLINEMORE INFO

Permissions

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisinuli

Toolbar

11Roboto

Cards

Welcome BackItrsquos been a while have you read any new books latelyItrsquos been a while have you read any new books lately

YESNOPE

Kangaroo Valley Safari

Located two hours south of Sydney in the

Southern Highlands of New South Wales

LEARN MORESHARE

REVIEWFREE SAMPLE

By Alex Nelson

El Pooch

Pre-fab Homes

Favorite Road Trips

Best Airlines

Campbell

Groceries

almond milk

coconut water

cucumber

green apples

Yuna tickets on sale 624

May 24 2014

Clean desk

Keyboards

suggestion suggestion suggestion

123

a s d f g h j k l

z x c v b n m

q w e r t y u i o p1 2 3 4 5 6 7 8 9 0

suggestion suggestion suggestion

123

a s d f g h j k l

z x c v b n m

q w e r t y u i o p1 2 3 4 5 6 7 8 9 0

Bottom Sheet

Print this page

Copy

Upload

Share

MoreMail Message

Google+Gmail Hangout

Grid

Two lineSupport text

Two lineSupport text

Single line

Single line

Lists

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Three-line itemThree-line item

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Three-line itemThree-line item

Three-line itemThree-line item

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Three-line itemThree-line item

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Three-line itemThree-line item

Three-line itemThree-line item

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Line item unselectedLine item unselected

Line item selectedLine item selected

Line item selectedLine item selected

Data usageData usage

BluetoothBluetooth

Wi-FiWi-Fi

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Single-line itemSingle-line item

Single-line itemSingle-line item

Single-line itemSingle-line itemSingle-line itemSingle-line item

Single-line itemSingle-line item

Single-line itemSingle-line item

Introduction agrave lrsquoergonomie

Ergonomie et Design34

Cornelia Laros

Design Ergonomie Design Ergonomie

Identiteacute

Communication

Ambiance

Exemple un site institutionnel informatif avec une navigation simple et des exigences fortes

drsquoidentiteacuteExemple une application meacutetier destineacutee agrave une

population drsquoutilisateur connue

EfficaciteacuteFonctionnel

Outils

Service en ligne

Architecture de lrsquoinformation contenus bonnes pratiques

Analyse tache vs activiteacute prise en compte globaliseacutee des process

postes de travail eacutecosystegraveme existant hellip puis la conception

Image Usage freacutequent

Usage ponctuel

Votre eacutequipe Ergonome Directeur aristique Webdesigner UX Designer

Introduction agrave lrsquoergonomie

Design avant-tout35

Cornelia Laros

Introduction agrave lrsquoergonomie

Equilibreacute36

Cornelia Laros

Introduction agrave lrsquoergonomie

Ergonomie avant tout37

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

38

Cornelia Laros

text

Lrsquoergonomie sert agravehellip39

Cornelia Laros

1 ameacuteliorer les conditions de travail

2 faire gagner plus drsquoargent agrave lrsquoentreprise

3 ameacuteliorer lrsquoestheacutetique

4 comprendre comment ameacuteliorer un produit

text

Quelles affirmations sont vraies

40

Cornelia Laros

1 Lrsquoergonomie srsquoattache agrave comprendre le travail pour le transformer

2 Il est possible de concevoir une IHM qui fonctionne pour tout le monde en se basant sur des normes

3 Lrsquoutilisateur va se servir de votre produit de la faccedilon dont vous lrsquoavez imagineacute

4 Lrsquoutilisateur interpregravete une tacircche comme un problegraveme qursquoil doit reacutesoudre en faisant avec ses caracteacuteristiques et les moyens mis agrave sa disposition

text

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

41

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

text

D - A quoi sert un prototype

42

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

43

Cornelia Laros

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

44

Cornelia Laros

Utilisabiliteacute

Utiliteacute

Efficaciteacute Efficience

Satisfaction

Introduction agrave lrsquoergonomie

Pyramide des besoins MASLOW

45

Cornelia Laros

Introduction agrave lrsquoergonomie

Pyramide des besoins IHM46

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

47

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

48

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

49

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

50

Cornelia Laros

Introduction agrave lrsquoergonomie

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

51

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

Introduction agrave lrsquoergonomie

D - A quoi sert un prototype

52

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

53

Cornelia Laros

a Fiable

b Intuitif

c Fonctionnel

d Accessible

e Plaisant

f Porteur de sens

Introduction agrave lrsquoergonomie

F - Quel besoin ai-je oublieacute dans la question

preacuteceacutedente

54

Cornelia Laros

text

Patterns amp Dark patterns

55

Cornelia Laros

text

Criteres de Bastien et Scapin56

Cornelia Laros

Guidage

Charge de travail

Controcircle utilisateur explicite

Flexibiliteacute ( adaptabiliteacute)

Gestion des erreurs

Homogeacuteneacuteiteacute ( coheacuterence)

Signifiance des Codes et Deacutenominations

Compatibiliteacute ( familiariteacute)

Introduction agrave lrsquoergonomie

Guidage57

Cornelia Laros

Introduction agrave lrsquoergonomie

Charge de travail58

Cornelia Laros

Introduction agrave lrsquoergonomie

Controle explicite59

Cornelia Laros

Introduction agrave lrsquoergonomie

Controles explicites60

Cornelia Laros

Dar983595 983541983527t983545983589983590n

text

Adaptabiliteacute61

Cornelia Laros

text

Gestion des erreurs62

Cornelia Laros

text

Signifiance des codes et deacutenominations

63

Cornelia Laros

text

Homogeacuteneacuteiteacute - coheacuterence64

Cornelia Laros

text

Homogeacuteneacuteiteacute - Distinction65

Cornelia Laros

text

Compatibiliteacute66

Cornelia Laros

text

Compatibiliteacute67

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction68

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction69

Cornelia Laros

text

Gestalt Theorie70

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Gestalt Theorie71

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Dark patterns72

Cornelia Laros

Introduction agrave lrsquoergonomie

A vous de jouer

73

Cornelia Laros

Introduction agrave lrsquoergonomie

Outils de prototypages DIY74

Cornelia Laros

Low tech papier + crayons post-its cartes agrave jouer

Gratuit en ligne Invision app Moqups UXPin

Mac Sketch Balsamiq Mockups Axure

PC Axure Balsamiq

Mobile Prototyping on Paper

Ap983540983590en983530983555 983592983589 no983547983549983589983537le983543 983581h983586983543983589983588

Introduction agrave lrsquoergonomie

Test de perception DIY75

Cornelia Laros

La premiegravere impression qursquoun utilisateur se fait de votre IHM va influencer tous ses jugements ulteacuterieurs Crsquoest lrsquoeffet de halo

bull Un utilisateur qui a une premiegravere impression positive de votre appli passera plus facilement outre les bugs

bull Une premiegravere impression negative rendra lrsquoutilisateur plus critique vis agrave vis de deacutetails qui confirment son jugement

Cel983527 983538983580983590c983532e 983527983548983588si 983527983549983589983581 vo983543 983586983590983580ux 983591rsquoex983527983538983589983585s vo983543 983530983585t983542983589983546i983530n983543 983592rsquoem983528983527983548983581he 983530983545 983550983587s 983542e983585d983530983555-vo983547983543 983581l983535e983539983546s

Introduction agrave lrsquoergonomie

Test de perception DIY76

Cornelia Laros

Montrer votre prototype agrave quelqursquoun pendant 5 secondes

Demandez-lui

bull Ce qursquoil a vu

bull Ce qursquoil a compris de ce qursquoil a vu

bull Ce qui lrsquoa surpris ou marqueacute

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY77

Cornelia Laros

Les difficulteacutes de navigation se produisent souvent dans les niveaux les plus haut de votre structure de contenu Vous pouvez veacuterifier facilement si la classification logique pour vous lrsquoest aussi pour vos utilisateurs

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY78

Cornelia Laros

Lister trois (max) niveaux de profondeur de votre contenu structureacute Masquez ensuite les contenus de niveau plus bas Utilisez par exemple les groupements de lignes dans excel pour creacuteer des pliers-deacutepliers ou imprimer la liste sur une feuille que vous pliez pour masquer certaines parties

Demandez agrave un utilisateur de vous dire ougrave il penserait trouver un contenu bien preacutecis en preacutecisant qursquoil nrsquoy a pas de bonne reacuteponse

Notez srsquoil va chercher lagrave ougrave vous vous y attendiez ougrave il a heacutesiteacute et ce qursquoil a fini par choisir pour vous aider agrave rendre la navigation plus intuitive

Introduction agrave lrsquoergonomie

Test drsquoutilisabiliteacute DIY79

Cornelia Laros

A chaque nouvelle fonctionnaliteacute ajouteacutee demandez agrave quelqursquoun qui ne connait pas le projet de srsquoen servir Proposez lui une seule tacircche geacuteneacuterique agrave accomplir avec la fonctionnaliteacute

Exemple Tu veux prendre un rendez-vous avec un meacutedecin sur ce site montres-moi comment tu ferais en commentant agrave haute voix

Le plus important ici crsquoest de ne pas reacuteagir agrave ce qursquoil fait mais simplement le regarder faire sans lrsquoaider mecircme srsquoil est bloqueacute

Srsquoil 983540983586983588983589 de983543 983578983547983589s983545i983586983585s reacutepo983539983592983530z 983540983580983590 un983530 983577983548e983588t983534983587983539 o983547 d983535983545e983588 l983547983535 983577u983530 983550983587us 983536983547983535 983590eacutepo983539983592r983530983555 983578983548an983591 983534983537 983580ur983527 fi983539983535 983588rsquoil 983534983539983588983535s983545e Srsquoil 983530983543983546 v983542983580i983593983530n983545 983529l983587983577ueacute di983545983530983588 l983548i 983577983547983589 983550o983547s 983580983536983537ez 983542983530983550983587ir 983549983586983546r983589 983579o983541983534983589 et 983530983543983588983580ye983555 983592983530 c983587983538983541re983539983592r983530 983579983589 983578u983534 l983589 9835316ne

Introduction agrave lrsquoergonomie

Pas besoin de reacuteinventer la roue DIY

80

Cornelia Laros

Il existe des bonnes pratiques qui vous eacuteviteront de reacuteinventer la roue Utilisez des laquo design patterns raquo pour concevoir vos interfaces

Renseignez vous sur la Gestalt Theorie pour agencer vos pages

Utilisez les critegraveres de Bastien et Scapin pour trouver des deacutefauts eacutevidents avant de tester vous en tirerez des enseignements plus inteacuteressants

Ma983534s ccedila crsquoes983545 983541983586983548r u983539983530 983580u983546r983530 983559983587i983588

Introduction agrave lrsquoergonomie

Quizz time

81

Cornelia Laros

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

82

Cornelia Laros

1 c Fonctionnel

2 a Fiable

3 d Accessible

4 b Intuitif

5 e Plaisant

6 f Porteur de sens

text

F - Quel besoin ai-je oublieacute dans la question preacuteceacutedente

83

Cornelia Laros

Uti983536983534983588983580b983536e

Introduction agrave lrsquoergonomie

Tests DIY84

Cornelia Laros

Reacutedigez la proceacutedure pour tester un de vos projets drsquoIHM avec le test de votre choix perception arborescence ou utilisabiliteacute

Notez la question que vous vous posez et la question que vous allez poser

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

text

A - Lrsquoergonomie sert agravehellip20

Cornelia Laros

1 ameacuteliorer les conditions de travail

2 faire gagner plus drsquoargent agrave lrsquoentreprise

3 ameacuteliorer lrsquoestheacutetique

4 comprendre comment ameacuteliorer un produit

text

B - Quelles affirmations sont vraies

21

Cornelia Laros

1 Lrsquoergonomie srsquoattache agrave comprendre le travail pour le transformer

2 Il est possible de concevoir une IHM qui fonctionne pour tout le monde en se basant sur des normes

3 Lrsquoutilisateur va se servir de votre produit de la faccedilon dont vous lrsquoavez imagineacute

4 Lrsquoutilisateur interpregravete une tacircche comme un problegraveme qursquoil doit reacutesoudre en faisant avec ses caracteacuteristiques et les moyens mis agrave sa disposition

text

Pause cafeacute

10 minutes

22

Cornelia Laros

Introduction agrave lrsquoergonomie

Quelques meacutethodes drsquoergonomie

23

Cornelia Laros

Introduction agrave lrsquoergonomie

Ergonomie de conception

24

Cornelia Laros

Ergonomie de correctionbull Analyse drsquoactiviteacute

bull Audit

bull Analyse drsquoeacutevegravenements critiques

bull Analyse de traces

bull Simulation

bull Entretiens

bull Persona cartes drsquoexpeacuteriences

bull Tri par cartes

bull Prototypage

bull Benchmarkhellip

Lrsquoergonomie tout au long du projet

Introduction agrave lrsquoergonomie

Ergonomie de conception

25

Cornelia Laros

Ergonomie de correctionbull Analyse drsquoactiviteacute

bull Audit

bull Analyse drsquoeacutevegravenements critiques

bull Analyse de traces

bull Simulationhellip

bullEntretiens

bullPersona cartes drsquoexpeacuteriences

bullTri par cartes

bullPrototypage

bullBenchmarkhellip

Des meacutethodes de recueil de donneacutees avec utilisateurs finaux et de conception laquo experte raquo

Introduction agrave lrsquoergonomie

Pourquoi ces meacutethodes26

Cornelia Laros

bull Si jrsquoavais demandeacute aux utilisateurs ce qursquoils voulaient ils mrsquoauraient demandeacute un cheval plus rapide - Henri Ford

bull Un comportement laquo sur-appris raquo devient un automatisme inconscient que lrsquoutilisateur ne saura pas expliquer (ex passer les vitesses en conduisant)

bull Le cerveau humain est propice agrave la fabulation (imagination de causes) aux faux souvenirs (en toute bonne fois) les biais (deacutesirabiliteacute effet pygmalion influence socialehellip)

Observer

Introduction agrave lrsquoergonomie

Pourquoi ces meacutethodes27

Cornelia Laros

bull Une imagine est plus parlante que 10 000 mots

bull Permet drsquoeacutevaluer une ideacutee agrave moindre coucirct donc de se tromper souvent et drsquoapprendre plus vite pour valider une ideacutee ou lrsquoameacuteliorer

bull Permet de tester plein drsquoideacutees et de retenir la meilleure

hellip A condition de se focaliser sur un objectif et non sur lrsquoideacutee elle-mecircme

Modeacuteliser

Introduction agrave lrsquoergonomie

Lrsquoensemble permet drsquoeacuteviter ceci

28

Cornelia Laros

Introduction agrave lrsquoergonomie

Lrsquoensemble permet drsquoeacuteviter ceci

29

Cornelia Laros

Eli983538983534983585eacute en 983586983528983588983589r983549a983585t

Eli983538983534983585eacute en 983540983590983586t983587983545983584pa983539983546

Introduction agrave lrsquoergonomie

Prototyper pour vous crsquoesthellip30

Cornelia Laros

CONTRIBUTION AUX SPECIFICATIONS FONCTIONNELLES

Zoning basse fideacuteliteacute wireframe statique (sketch ou non) bull Rapide et peu couteux bull Illustratif statique pas drsquointeraction bull Non engageant sur le design bull Tregraves peu explicite sur le plan fonctionnel

Story-board cliquable bull Illustre la navigation bull Permet de se projeter dans lrsquointeraction bull Pose les bases du design et du fonctionnel

Prototype semi-dynamique bull Se veut complet (ou quasi) sur le plan de la

navigation de lrsquointeraction et des cas drsquoutilisation bull Doit permettre de simuler fidegravelement le

fonctionnement drsquoune application bull Est une speacutecification fonctionnelle en soi

Pha983543983530 983592983589 ca983591983590983527g983589 AM983623983607

Pha983543983530 983592983589 co983539983581983530p983545983535o983585 f983586983539983581t983535o983539983585983530l983536983589

Tes983545983588 983547t983535983536i983588983527t983589u983542983588 ap983540983537983534s 983538983587983529il983530983543hellip

Introduction agrave lrsquoergonomie

Prototype basse definition31

Cornelia Laros

Introduction agrave lrsquoergonomie

Prototyper cliquable32

Cornelia Laros

Introduction agrave lrsquoergonomie

Prototyper semi-dynamique33

Cornelia Laros

Page Title

1230

Mobile interactions

Observably Sc i$amp

About

Project overiew

Manage sessions

Manage variables

Settings

Start observing

1230 1230

OverviewObserve

Observe mobile interactions in the field to assess dominant hand for holding and interacting with smartphones

10042016Mobile interactionsMobile interactions

Welcome to Observably Gather and manage observation dataGather and manage observation data

My projects

1230

Tags separate with comas

Variable value

Create

Add observablesAdd all observables you want to track for this project You can come back and edit them laterAdd all observables you want to track for this project You can come back and edit them later

Thanks for the hint

Manage variablesMobile InteractionsMobile Interactions

1230

Tags separate with comas

Variable value

Create

Left hand Right thumbLRTLRT

Manage variablesMobile InteractionsMobile Interactions

Irsquom done Start recording

Save changesCancel

Observable Tags separate with coma

Tags separate with comas

3 20

LRILRI

Observable label

Did you knowTap on the icon to customize it Use icons from our library or from your gallery to make variables pop out when observing

Tap on the icon to customize it Use icons from our library or from your gallery to make variables pop out when observing

Thanks for the hint

Left hand Right thumbLRTLRT

Irsquom done Start recording

Manage variablesMobile InteractionsMobile Interactions

Left hand x Right thumb x

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Did you knowIf you make a mistake you can undo your action by tapping on the icon of the taskIf you make a mistake you can undo your action by tapping on the icon of the task

Thanks for the hint

Session 1

Discrete mode New Session

Mobile InteractionsMobile Interactions

1230

Record vocal comment

LRILRILRILRILRILRI

Did you knowYou can record occurences durations and comments by chosing the record format in the drop-down above

You can record occurences durations and comments by chosing the record format in the drop-down above

Thanks for the hint

Discrete mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

Left hand Right thumbLRT

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Did you knowIn list view you can slipe left and right to increment or correct your countIn list view you can slipe left and right to increment or correct your count

Thanks for the hint

Continuous mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

LRILRILRILRILRI

Did you knowIf you make a mistake you can undo your action by tapping on the icon of the taskIf you make a mistake you can undo your action by tapping on the icon of the task

Thanks for the hint

Continuous mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

Tags separate with comas

Comment

Add

Did you know The timestamp of vocal comments is the start time to accurately mark events that triggered your comment

The timestamp of vocal comments is the start time to accurately mark events that triggered your comment

Thanks for the hint

Manage observables

Comments mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Stop recording vocal comment

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Your observationsManage and cleanup sessions before exporting dataManage and cleanup sessions before exporting data

Session ManagementMobile InteractionsMobile Interactions

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

LRT

LRI

RLI

RLT

RRT20

20

8

35

15

Count SummaryCount Summary

RLT

RRT20

815

Time SummaryTime Summary

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

Left hand Right thumbLRTLRT

+1+1

10042016 124627

Left hand Right thumbLRTLRT

2rsquorsquo2rsquorsquo

10042016 124627 - 10042016 124629

Content of my comment boxTag1 Tag2

10042016 124644

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

LRTLRT+1+1

10042016 124627

Save changes

Observable Tags separate with coma

Tags separate with comas

Left hand x Right thumb x

AboutAbout

1230

Observable science provides tools for field research and scientific observation It is tailored to the needs of ethnography human factors psychology usability and games user research

Observable science provides tools for field research and scientific observation It is tailored to the needs of ethnography human factors psychology usability and games user research

Observablyscience

Development by Morgane RadelDesign by Cornelia LarosDevelopment by Morgane RadelDesign by Cornelia Laros

Credits

Support (us)Show your love Rate the App

Make a donation

Contact us

Visit our website

Add session tags to all observations

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

Save changes

Session Tags separate with coma

Tags separate with comas

Metro x Toulouse x

Manage variablesMobile InteractionsMobile Interactions

1230

Left hand Right thumbLRTLRT

Confirm

Search icons

Cancel

Browse

3 20

Observably Sci$amp

1230

Project statisticsProject statistics Total countsTotal time Total comments First entryLast entrySessions

4 963281231

1441201201603042016

97

Project detailsMobile InteractionsMobile Interactions

Sessions SummarySessions Summary

RRT20

815

Count SummaryCount Summary

JUN 14MAY 14APR 14MAR 14FEB 14JAN 14

4

1

65

7

0

2

4

6

8

10

3

2014

Manage sessions

Settings ExportOverview

1230

App optionsDisplay hintsDisplay hints

SettingsSettings

Share anonymous data to improve the appShare anonymous data to improve the app

1230

Gather and manage observation data with ObservablyGather and manage observation data with Observably

Welcome to Observably

Project name

Project description what is the goal of your project

CreateCancel

Session[number]Session[number]

Default Session ID

Default export format txt

Data options

Default Discrete variable lines view

Create a new project

1230

Project detailsMobile InteractionsMobile Interactions

Mobile InteractionsMobile Interactions

Project description what is the goal of your project

SaveCancel

Session[number]Session[number]

Default Session ID

Default export format txt

Data options

Default continuous variables grid view

Project name

Manage sessions

Settings ExportOverview

1230

Project detailsMobile InteractionsMobile Interactions

Manage sessions

Settings ExportOverview

Export format txt

Export data

Data has been successfully exported as MobileInteractionstxt

to your download folder

Observably Sc i$amp

Settings

1230

BUTTONBUTTON

Permissions

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Up exlaborum incididunt quis nostrud exercitatn

COMPONENTS

Pickers

OKCANCEL

13

Friday

MAR

2014

MS W T F ST

30 31

1

16 17 19 20 21 2218

23 24 26 27 28 2925

139 10 12 14 1511

72 3 5 6 84

March 2014

OKCANCEL

PMAM

112

9

10

11

2

48

576

3

330 AM

Notifications

Incoming call

Rachel Ligson

IGNORE ANSWER

REPLYARCHIVE

Hey letrsquos catch up soon Do you want to grab lunch sometime this weekendLet me know when yoursquore free

409 PMHannah ChoHannah Cho

Do you know what I mean509 PMTina McBeanTina McBean

Heads up notification

Regular + Expanded notification

Index scroller

All

Patrick Keenan

Mary Johnson

Tina Santiago

Trevor Hansen

Amar Sagoo

Abbey Christensen

Ali Connors

Alex Nelson

Anthony Stevens

A

A

1230

Abcdefg

Abcdefghijklmno

Tabs

THE THIRDITEM TWONO ONE

THE THIRDITEM TWONO ONE

1230

THE THIRDITEM TWONO ONE

Page Title

1230

121 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

110 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

51 50

Input text for a single line field with a maximu

Single-Line Input Label

31 50

Input text for a single line field with a max

Single-Line Input Label

121 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

110 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

51 50

Input text for a single line field with a maximuInput text for a single line field with a maximu

Single-Line Input Label

31 50

Input text for a single line field with a maxInput text for a single line field with a max

Single-Line Input Label

Disabled text field

Input text

Username or Password is incorrect

Input text

Input tex

Hint text

Hint text

Hint text

Disabled text field

Input textInput text

Username or Password is incorrect

Input textInput text

Input texInput tex

Hint text

Hint text

Hint text

Text fields

Switches and sliders

60

Regular

Pressed

Disabled

60

Regular

Pressed

Disabled

Buttons

DISABLED

PRESSED

NORMAL

DISABLED

PRESSED

NORMAL

Flat Raised

DISABLED

PRESSED

NORMAL

DISABLED

PRESSED

NORMAL

Flat Raised

Toasts

This color applies to both light and dark theme

This item already has the label ldquotravelrdquo You can add a new label

ACTIONSingle-Line Snackbar

Menu

Arial 100

100

Calibri

Courier

Verdana

Arial

Chips

Trevor Hansen

email3emailcom

email2emailcom

primaryemailemailcomContact Name

Dialogs

Desktop

Without title With title

BUTTONBUTTON

PermissionsLorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Up exlaborum incididunt quis nostrud exercitatn

BUTTONBUTTON

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Ut enim ad minim ikad veniam quis nostrud exercitatn ullamco laboris nisi ut aliquip exlaborum incididunt

ACCEPTDECLINEMORE INFO

Permissions

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisinuli

Toolbar

11Roboto

Cards

Welcome BackItrsquos been a while have you read any new books latelyItrsquos been a while have you read any new books lately

YESNOPE

Kangaroo Valley Safari

Located two hours south of Sydney in the

Southern Highlands of New South Wales

LEARN MORESHARE

REVIEWFREE SAMPLE

By Alex Nelson

El Pooch

Pre-fab Homes

Favorite Road Trips

Best Airlines

Campbell

Groceries

almond milk

coconut water

cucumber

green apples

Yuna tickets on sale 624

May 24 2014

Clean desk

Keyboards

suggestion suggestion suggestion

123

a s d f g h j k l

z x c v b n m

q w e r t y u i o p1 2 3 4 5 6 7 8 9 0

suggestion suggestion suggestion

123

a s d f g h j k l

z x c v b n m

q w e r t y u i o p1 2 3 4 5 6 7 8 9 0

Bottom Sheet

Print this page

Copy

Upload

Share

MoreMail Message

Google+Gmail Hangout

Grid

Two lineSupport text

Two lineSupport text

Single line

Single line

Lists

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Three-line itemThree-line item

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Three-line itemThree-line item

Three-line itemThree-line item

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Three-line itemThree-line item

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Three-line itemThree-line item

Three-line itemThree-line item

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Line item unselectedLine item unselected

Line item selectedLine item selected

Line item selectedLine item selected

Data usageData usage

BluetoothBluetooth

Wi-FiWi-Fi

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Single-line itemSingle-line item

Single-line itemSingle-line item

Single-line itemSingle-line itemSingle-line itemSingle-line item

Single-line itemSingle-line item

Single-line itemSingle-line item

Introduction agrave lrsquoergonomie

Ergonomie et Design34

Cornelia Laros

Design Ergonomie Design Ergonomie

Identiteacute

Communication

Ambiance

Exemple un site institutionnel informatif avec une navigation simple et des exigences fortes

drsquoidentiteacuteExemple une application meacutetier destineacutee agrave une

population drsquoutilisateur connue

EfficaciteacuteFonctionnel

Outils

Service en ligne

Architecture de lrsquoinformation contenus bonnes pratiques

Analyse tache vs activiteacute prise en compte globaliseacutee des process

postes de travail eacutecosystegraveme existant hellip puis la conception

Image Usage freacutequent

Usage ponctuel

Votre eacutequipe Ergonome Directeur aristique Webdesigner UX Designer

Introduction agrave lrsquoergonomie

Design avant-tout35

Cornelia Laros

Introduction agrave lrsquoergonomie

Equilibreacute36

Cornelia Laros

Introduction agrave lrsquoergonomie

Ergonomie avant tout37

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

38

Cornelia Laros

text

Lrsquoergonomie sert agravehellip39

Cornelia Laros

1 ameacuteliorer les conditions de travail

2 faire gagner plus drsquoargent agrave lrsquoentreprise

3 ameacuteliorer lrsquoestheacutetique

4 comprendre comment ameacuteliorer un produit

text

Quelles affirmations sont vraies

40

Cornelia Laros

1 Lrsquoergonomie srsquoattache agrave comprendre le travail pour le transformer

2 Il est possible de concevoir une IHM qui fonctionne pour tout le monde en se basant sur des normes

3 Lrsquoutilisateur va se servir de votre produit de la faccedilon dont vous lrsquoavez imagineacute

4 Lrsquoutilisateur interpregravete une tacircche comme un problegraveme qursquoil doit reacutesoudre en faisant avec ses caracteacuteristiques et les moyens mis agrave sa disposition

text

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

41

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

text

D - A quoi sert un prototype

42

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

43

Cornelia Laros

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

44

Cornelia Laros

Utilisabiliteacute

Utiliteacute

Efficaciteacute Efficience

Satisfaction

Introduction agrave lrsquoergonomie

Pyramide des besoins MASLOW

45

Cornelia Laros

Introduction agrave lrsquoergonomie

Pyramide des besoins IHM46

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

47

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

48

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

49

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

50

Cornelia Laros

Introduction agrave lrsquoergonomie

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

51

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

Introduction agrave lrsquoergonomie

D - A quoi sert un prototype

52

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

53

Cornelia Laros

a Fiable

b Intuitif

c Fonctionnel

d Accessible

e Plaisant

f Porteur de sens

Introduction agrave lrsquoergonomie

F - Quel besoin ai-je oublieacute dans la question

preacuteceacutedente

54

Cornelia Laros

text

Patterns amp Dark patterns

55

Cornelia Laros

text

Criteres de Bastien et Scapin56

Cornelia Laros

Guidage

Charge de travail

Controcircle utilisateur explicite

Flexibiliteacute ( adaptabiliteacute)

Gestion des erreurs

Homogeacuteneacuteiteacute ( coheacuterence)

Signifiance des Codes et Deacutenominations

Compatibiliteacute ( familiariteacute)

Introduction agrave lrsquoergonomie

Guidage57

Cornelia Laros

Introduction agrave lrsquoergonomie

Charge de travail58

Cornelia Laros

Introduction agrave lrsquoergonomie

Controle explicite59

Cornelia Laros

Introduction agrave lrsquoergonomie

Controles explicites60

Cornelia Laros

Dar983595 983541983527t983545983589983590n

text

Adaptabiliteacute61

Cornelia Laros

text

Gestion des erreurs62

Cornelia Laros

text

Signifiance des codes et deacutenominations

63

Cornelia Laros

text

Homogeacuteneacuteiteacute - coheacuterence64

Cornelia Laros

text

Homogeacuteneacuteiteacute - Distinction65

Cornelia Laros

text

Compatibiliteacute66

Cornelia Laros

text

Compatibiliteacute67

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction68

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction69

Cornelia Laros

text

Gestalt Theorie70

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Gestalt Theorie71

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Dark patterns72

Cornelia Laros

Introduction agrave lrsquoergonomie

A vous de jouer

73

Cornelia Laros

Introduction agrave lrsquoergonomie

Outils de prototypages DIY74

Cornelia Laros

Low tech papier + crayons post-its cartes agrave jouer

Gratuit en ligne Invision app Moqups UXPin

Mac Sketch Balsamiq Mockups Axure

PC Axure Balsamiq

Mobile Prototyping on Paper

Ap983540983590en983530983555 983592983589 no983547983549983589983537le983543 983581h983586983543983589983588

Introduction agrave lrsquoergonomie

Test de perception DIY75

Cornelia Laros

La premiegravere impression qursquoun utilisateur se fait de votre IHM va influencer tous ses jugements ulteacuterieurs Crsquoest lrsquoeffet de halo

bull Un utilisateur qui a une premiegravere impression positive de votre appli passera plus facilement outre les bugs

bull Une premiegravere impression negative rendra lrsquoutilisateur plus critique vis agrave vis de deacutetails qui confirment son jugement

Cel983527 983538983580983590c983532e 983527983548983588si 983527983549983589983581 vo983543 983586983590983580ux 983591rsquoex983527983538983589983585s vo983543 983530983585t983542983589983546i983530n983543 983592rsquoem983528983527983548983581he 983530983545 983550983587s 983542e983585d983530983555-vo983547983543 983581l983535e983539983546s

Introduction agrave lrsquoergonomie

Test de perception DIY76

Cornelia Laros

Montrer votre prototype agrave quelqursquoun pendant 5 secondes

Demandez-lui

bull Ce qursquoil a vu

bull Ce qursquoil a compris de ce qursquoil a vu

bull Ce qui lrsquoa surpris ou marqueacute

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY77

Cornelia Laros

Les difficulteacutes de navigation se produisent souvent dans les niveaux les plus haut de votre structure de contenu Vous pouvez veacuterifier facilement si la classification logique pour vous lrsquoest aussi pour vos utilisateurs

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY78

Cornelia Laros

Lister trois (max) niveaux de profondeur de votre contenu structureacute Masquez ensuite les contenus de niveau plus bas Utilisez par exemple les groupements de lignes dans excel pour creacuteer des pliers-deacutepliers ou imprimer la liste sur une feuille que vous pliez pour masquer certaines parties

Demandez agrave un utilisateur de vous dire ougrave il penserait trouver un contenu bien preacutecis en preacutecisant qursquoil nrsquoy a pas de bonne reacuteponse

Notez srsquoil va chercher lagrave ougrave vous vous y attendiez ougrave il a heacutesiteacute et ce qursquoil a fini par choisir pour vous aider agrave rendre la navigation plus intuitive

Introduction agrave lrsquoergonomie

Test drsquoutilisabiliteacute DIY79

Cornelia Laros

A chaque nouvelle fonctionnaliteacute ajouteacutee demandez agrave quelqursquoun qui ne connait pas le projet de srsquoen servir Proposez lui une seule tacircche geacuteneacuterique agrave accomplir avec la fonctionnaliteacute

Exemple Tu veux prendre un rendez-vous avec un meacutedecin sur ce site montres-moi comment tu ferais en commentant agrave haute voix

Le plus important ici crsquoest de ne pas reacuteagir agrave ce qursquoil fait mais simplement le regarder faire sans lrsquoaider mecircme srsquoil est bloqueacute

Srsquoil 983540983586983588983589 de983543 983578983547983589s983545i983586983585s reacutepo983539983592983530z 983540983580983590 un983530 983577983548e983588t983534983587983539 o983547 d983535983545e983588 l983547983535 983577u983530 983550983587us 983536983547983535 983590eacutepo983539983592r983530983555 983578983548an983591 983534983537 983580ur983527 fi983539983535 983588rsquoil 983534983539983588983535s983545e Srsquoil 983530983543983546 v983542983580i983593983530n983545 983529l983587983577ueacute di983545983530983588 l983548i 983577983547983589 983550o983547s 983580983536983537ez 983542983530983550983587ir 983549983586983546r983589 983579o983541983534983589 et 983530983543983588983580ye983555 983592983530 c983587983538983541re983539983592r983530 983579983589 983578u983534 l983589 9835316ne

Introduction agrave lrsquoergonomie

Pas besoin de reacuteinventer la roue DIY

80

Cornelia Laros

Il existe des bonnes pratiques qui vous eacuteviteront de reacuteinventer la roue Utilisez des laquo design patterns raquo pour concevoir vos interfaces

Renseignez vous sur la Gestalt Theorie pour agencer vos pages

Utilisez les critegraveres de Bastien et Scapin pour trouver des deacutefauts eacutevidents avant de tester vous en tirerez des enseignements plus inteacuteressants

Ma983534s ccedila crsquoes983545 983541983586983548r u983539983530 983580u983546r983530 983559983587i983588

Introduction agrave lrsquoergonomie

Quizz time

81

Cornelia Laros

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

82

Cornelia Laros

1 c Fonctionnel

2 a Fiable

3 d Accessible

4 b Intuitif

5 e Plaisant

6 f Porteur de sens

text

F - Quel besoin ai-je oublieacute dans la question preacuteceacutedente

83

Cornelia Laros

Uti983536983534983588983580b983536e

Introduction agrave lrsquoergonomie

Tests DIY84

Cornelia Laros

Reacutedigez la proceacutedure pour tester un de vos projets drsquoIHM avec le test de votre choix perception arborescence ou utilisabiliteacute

Notez la question que vous vous posez et la question que vous allez poser

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

text

B - Quelles affirmations sont vraies

21

Cornelia Laros

1 Lrsquoergonomie srsquoattache agrave comprendre le travail pour le transformer

2 Il est possible de concevoir une IHM qui fonctionne pour tout le monde en se basant sur des normes

3 Lrsquoutilisateur va se servir de votre produit de la faccedilon dont vous lrsquoavez imagineacute

4 Lrsquoutilisateur interpregravete une tacircche comme un problegraveme qursquoil doit reacutesoudre en faisant avec ses caracteacuteristiques et les moyens mis agrave sa disposition

text

Pause cafeacute

10 minutes

22

Cornelia Laros

Introduction agrave lrsquoergonomie

Quelques meacutethodes drsquoergonomie

23

Cornelia Laros

Introduction agrave lrsquoergonomie

Ergonomie de conception

24

Cornelia Laros

Ergonomie de correctionbull Analyse drsquoactiviteacute

bull Audit

bull Analyse drsquoeacutevegravenements critiques

bull Analyse de traces

bull Simulation

bull Entretiens

bull Persona cartes drsquoexpeacuteriences

bull Tri par cartes

bull Prototypage

bull Benchmarkhellip

Lrsquoergonomie tout au long du projet

Introduction agrave lrsquoergonomie

Ergonomie de conception

25

Cornelia Laros

Ergonomie de correctionbull Analyse drsquoactiviteacute

bull Audit

bull Analyse drsquoeacutevegravenements critiques

bull Analyse de traces

bull Simulationhellip

bullEntretiens

bullPersona cartes drsquoexpeacuteriences

bullTri par cartes

bullPrototypage

bullBenchmarkhellip

Des meacutethodes de recueil de donneacutees avec utilisateurs finaux et de conception laquo experte raquo

Introduction agrave lrsquoergonomie

Pourquoi ces meacutethodes26

Cornelia Laros

bull Si jrsquoavais demandeacute aux utilisateurs ce qursquoils voulaient ils mrsquoauraient demandeacute un cheval plus rapide - Henri Ford

bull Un comportement laquo sur-appris raquo devient un automatisme inconscient que lrsquoutilisateur ne saura pas expliquer (ex passer les vitesses en conduisant)

bull Le cerveau humain est propice agrave la fabulation (imagination de causes) aux faux souvenirs (en toute bonne fois) les biais (deacutesirabiliteacute effet pygmalion influence socialehellip)

Observer

Introduction agrave lrsquoergonomie

Pourquoi ces meacutethodes27

Cornelia Laros

bull Une imagine est plus parlante que 10 000 mots

bull Permet drsquoeacutevaluer une ideacutee agrave moindre coucirct donc de se tromper souvent et drsquoapprendre plus vite pour valider une ideacutee ou lrsquoameacuteliorer

bull Permet de tester plein drsquoideacutees et de retenir la meilleure

hellip A condition de se focaliser sur un objectif et non sur lrsquoideacutee elle-mecircme

Modeacuteliser

Introduction agrave lrsquoergonomie

Lrsquoensemble permet drsquoeacuteviter ceci

28

Cornelia Laros

Introduction agrave lrsquoergonomie

Lrsquoensemble permet drsquoeacuteviter ceci

29

Cornelia Laros

Eli983538983534983585eacute en 983586983528983588983589r983549a983585t

Eli983538983534983585eacute en 983540983590983586t983587983545983584pa983539983546

Introduction agrave lrsquoergonomie

Prototyper pour vous crsquoesthellip30

Cornelia Laros

CONTRIBUTION AUX SPECIFICATIONS FONCTIONNELLES

Zoning basse fideacuteliteacute wireframe statique (sketch ou non) bull Rapide et peu couteux bull Illustratif statique pas drsquointeraction bull Non engageant sur le design bull Tregraves peu explicite sur le plan fonctionnel

Story-board cliquable bull Illustre la navigation bull Permet de se projeter dans lrsquointeraction bull Pose les bases du design et du fonctionnel

Prototype semi-dynamique bull Se veut complet (ou quasi) sur le plan de la

navigation de lrsquointeraction et des cas drsquoutilisation bull Doit permettre de simuler fidegravelement le

fonctionnement drsquoune application bull Est une speacutecification fonctionnelle en soi

Pha983543983530 983592983589 ca983591983590983527g983589 AM983623983607

Pha983543983530 983592983589 co983539983581983530p983545983535o983585 f983586983539983581t983535o983539983585983530l983536983589

Tes983545983588 983547t983535983536i983588983527t983589u983542983588 ap983540983537983534s 983538983587983529il983530983543hellip

Introduction agrave lrsquoergonomie

Prototype basse definition31

Cornelia Laros

Introduction agrave lrsquoergonomie

Prototyper cliquable32

Cornelia Laros

Introduction agrave lrsquoergonomie

Prototyper semi-dynamique33

Cornelia Laros

Page Title

1230

Mobile interactions

Observably Sc i$amp

About

Project overiew

Manage sessions

Manage variables

Settings

Start observing

1230 1230

OverviewObserve

Observe mobile interactions in the field to assess dominant hand for holding and interacting with smartphones

10042016Mobile interactionsMobile interactions

Welcome to Observably Gather and manage observation dataGather and manage observation data

My projects

1230

Tags separate with comas

Variable value

Create

Add observablesAdd all observables you want to track for this project You can come back and edit them laterAdd all observables you want to track for this project You can come back and edit them later

Thanks for the hint

Manage variablesMobile InteractionsMobile Interactions

1230

Tags separate with comas

Variable value

Create

Left hand Right thumbLRTLRT

Manage variablesMobile InteractionsMobile Interactions

Irsquom done Start recording

Save changesCancel

Observable Tags separate with coma

Tags separate with comas

3 20

LRILRI

Observable label

Did you knowTap on the icon to customize it Use icons from our library or from your gallery to make variables pop out when observing

Tap on the icon to customize it Use icons from our library or from your gallery to make variables pop out when observing

Thanks for the hint

Left hand Right thumbLRTLRT

Irsquom done Start recording

Manage variablesMobile InteractionsMobile Interactions

Left hand x Right thumb x

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Did you knowIf you make a mistake you can undo your action by tapping on the icon of the taskIf you make a mistake you can undo your action by tapping on the icon of the task

Thanks for the hint

Session 1

Discrete mode New Session

Mobile InteractionsMobile Interactions

1230

Record vocal comment

LRILRILRILRILRILRI

Did you knowYou can record occurences durations and comments by chosing the record format in the drop-down above

You can record occurences durations and comments by chosing the record format in the drop-down above

Thanks for the hint

Discrete mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

Left hand Right thumbLRT

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Did you knowIn list view you can slipe left and right to increment or correct your countIn list view you can slipe left and right to increment or correct your count

Thanks for the hint

Continuous mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

LRILRILRILRILRI

Did you knowIf you make a mistake you can undo your action by tapping on the icon of the taskIf you make a mistake you can undo your action by tapping on the icon of the task

Thanks for the hint

Continuous mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

Tags separate with comas

Comment

Add

Did you know The timestamp of vocal comments is the start time to accurately mark events that triggered your comment

The timestamp of vocal comments is the start time to accurately mark events that triggered your comment

Thanks for the hint

Manage observables

Comments mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Stop recording vocal comment

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Your observationsManage and cleanup sessions before exporting dataManage and cleanup sessions before exporting data

Session ManagementMobile InteractionsMobile Interactions

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

LRT

LRI

RLI

RLT

RRT20

20

8

35

15

Count SummaryCount Summary

RLT

RRT20

815

Time SummaryTime Summary

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

Left hand Right thumbLRTLRT

+1+1

10042016 124627

Left hand Right thumbLRTLRT

2rsquorsquo2rsquorsquo

10042016 124627 - 10042016 124629

Content of my comment boxTag1 Tag2

10042016 124644

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

LRTLRT+1+1

10042016 124627

Save changes

Observable Tags separate with coma

Tags separate with comas

Left hand x Right thumb x

AboutAbout

1230

Observable science provides tools for field research and scientific observation It is tailored to the needs of ethnography human factors psychology usability and games user research

Observable science provides tools for field research and scientific observation It is tailored to the needs of ethnography human factors psychology usability and games user research

Observablyscience

Development by Morgane RadelDesign by Cornelia LarosDevelopment by Morgane RadelDesign by Cornelia Laros

Credits

Support (us)Show your love Rate the App

Make a donation

Contact us

Visit our website

Add session tags to all observations

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

Save changes

Session Tags separate with coma

Tags separate with comas

Metro x Toulouse x

Manage variablesMobile InteractionsMobile Interactions

1230

Left hand Right thumbLRTLRT

Confirm

Search icons

Cancel

Browse

3 20

Observably Sci$amp

1230

Project statisticsProject statistics Total countsTotal time Total comments First entryLast entrySessions

4 963281231

1441201201603042016

97

Project detailsMobile InteractionsMobile Interactions

Sessions SummarySessions Summary

RRT20

815

Count SummaryCount Summary

JUN 14MAY 14APR 14MAR 14FEB 14JAN 14

4

1

65

7

0

2

4

6

8

10

3

2014

Manage sessions

Settings ExportOverview

1230

App optionsDisplay hintsDisplay hints

SettingsSettings

Share anonymous data to improve the appShare anonymous data to improve the app

1230

Gather and manage observation data with ObservablyGather and manage observation data with Observably

Welcome to Observably

Project name

Project description what is the goal of your project

CreateCancel

Session[number]Session[number]

Default Session ID

Default export format txt

Data options

Default Discrete variable lines view

Create a new project

1230

Project detailsMobile InteractionsMobile Interactions

Mobile InteractionsMobile Interactions

Project description what is the goal of your project

SaveCancel

Session[number]Session[number]

Default Session ID

Default export format txt

Data options

Default continuous variables grid view

Project name

Manage sessions

Settings ExportOverview

1230

Project detailsMobile InteractionsMobile Interactions

Manage sessions

Settings ExportOverview

Export format txt

Export data

Data has been successfully exported as MobileInteractionstxt

to your download folder

Observably Sc i$amp

Settings

1230

BUTTONBUTTON

Permissions

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Up exlaborum incididunt quis nostrud exercitatn

COMPONENTS

Pickers

OKCANCEL

13

Friday

MAR

2014

MS W T F ST

30 31

1

16 17 19 20 21 2218

23 24 26 27 28 2925

139 10 12 14 1511

72 3 5 6 84

March 2014

OKCANCEL

PMAM

112

9

10

11

2

48

576

3

330 AM

Notifications

Incoming call

Rachel Ligson

IGNORE ANSWER

REPLYARCHIVE

Hey letrsquos catch up soon Do you want to grab lunch sometime this weekendLet me know when yoursquore free

409 PMHannah ChoHannah Cho

Do you know what I mean509 PMTina McBeanTina McBean

Heads up notification

Regular + Expanded notification

Index scroller

All

Patrick Keenan

Mary Johnson

Tina Santiago

Trevor Hansen

Amar Sagoo

Abbey Christensen

Ali Connors

Alex Nelson

Anthony Stevens

A

A

1230

Abcdefg

Abcdefghijklmno

Tabs

THE THIRDITEM TWONO ONE

THE THIRDITEM TWONO ONE

1230

THE THIRDITEM TWONO ONE

Page Title

1230

121 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

110 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

51 50

Input text for a single line field with a maximu

Single-Line Input Label

31 50

Input text for a single line field with a max

Single-Line Input Label

121 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

110 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

51 50

Input text for a single line field with a maximuInput text for a single line field with a maximu

Single-Line Input Label

31 50

Input text for a single line field with a maxInput text for a single line field with a max

Single-Line Input Label

Disabled text field

Input text

Username or Password is incorrect

Input text

Input tex

Hint text

Hint text

Hint text

Disabled text field

Input textInput text

Username or Password is incorrect

Input textInput text

Input texInput tex

Hint text

Hint text

Hint text

Text fields

Switches and sliders

60

Regular

Pressed

Disabled

60

Regular

Pressed

Disabled

Buttons

DISABLED

PRESSED

NORMAL

DISABLED

PRESSED

NORMAL

Flat Raised

DISABLED

PRESSED

NORMAL

DISABLED

PRESSED

NORMAL

Flat Raised

Toasts

This color applies to both light and dark theme

This item already has the label ldquotravelrdquo You can add a new label

ACTIONSingle-Line Snackbar

Menu

Arial 100

100

Calibri

Courier

Verdana

Arial

Chips

Trevor Hansen

email3emailcom

email2emailcom

primaryemailemailcomContact Name

Dialogs

Desktop

Without title With title

BUTTONBUTTON

PermissionsLorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Up exlaborum incididunt quis nostrud exercitatn

BUTTONBUTTON

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Ut enim ad minim ikad veniam quis nostrud exercitatn ullamco laboris nisi ut aliquip exlaborum incididunt

ACCEPTDECLINEMORE INFO

Permissions

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisinuli

Toolbar

11Roboto

Cards

Welcome BackItrsquos been a while have you read any new books latelyItrsquos been a while have you read any new books lately

YESNOPE

Kangaroo Valley Safari

Located two hours south of Sydney in the

Southern Highlands of New South Wales

LEARN MORESHARE

REVIEWFREE SAMPLE

By Alex Nelson

El Pooch

Pre-fab Homes

Favorite Road Trips

Best Airlines

Campbell

Groceries

almond milk

coconut water

cucumber

green apples

Yuna tickets on sale 624

May 24 2014

Clean desk

Keyboards

suggestion suggestion suggestion

123

a s d f g h j k l

z x c v b n m

q w e r t y u i o p1 2 3 4 5 6 7 8 9 0

suggestion suggestion suggestion

123

a s d f g h j k l

z x c v b n m

q w e r t y u i o p1 2 3 4 5 6 7 8 9 0

Bottom Sheet

Print this page

Copy

Upload

Share

MoreMail Message

Google+Gmail Hangout

Grid

Two lineSupport text

Two lineSupport text

Single line

Single line

Lists

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Three-line itemThree-line item

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Three-line itemThree-line item

Three-line itemThree-line item

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Three-line itemThree-line item

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Three-line itemThree-line item

Three-line itemThree-line item

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Line item unselectedLine item unselected

Line item selectedLine item selected

Line item selectedLine item selected

Data usageData usage

BluetoothBluetooth

Wi-FiWi-Fi

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Single-line itemSingle-line item

Single-line itemSingle-line item

Single-line itemSingle-line itemSingle-line itemSingle-line item

Single-line itemSingle-line item

Single-line itemSingle-line item

Introduction agrave lrsquoergonomie

Ergonomie et Design34

Cornelia Laros

Design Ergonomie Design Ergonomie

Identiteacute

Communication

Ambiance

Exemple un site institutionnel informatif avec une navigation simple et des exigences fortes

drsquoidentiteacuteExemple une application meacutetier destineacutee agrave une

population drsquoutilisateur connue

EfficaciteacuteFonctionnel

Outils

Service en ligne

Architecture de lrsquoinformation contenus bonnes pratiques

Analyse tache vs activiteacute prise en compte globaliseacutee des process

postes de travail eacutecosystegraveme existant hellip puis la conception

Image Usage freacutequent

Usage ponctuel

Votre eacutequipe Ergonome Directeur aristique Webdesigner UX Designer

Introduction agrave lrsquoergonomie

Design avant-tout35

Cornelia Laros

Introduction agrave lrsquoergonomie

Equilibreacute36

Cornelia Laros

Introduction agrave lrsquoergonomie

Ergonomie avant tout37

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

38

Cornelia Laros

text

Lrsquoergonomie sert agravehellip39

Cornelia Laros

1 ameacuteliorer les conditions de travail

2 faire gagner plus drsquoargent agrave lrsquoentreprise

3 ameacuteliorer lrsquoestheacutetique

4 comprendre comment ameacuteliorer un produit

text

Quelles affirmations sont vraies

40

Cornelia Laros

1 Lrsquoergonomie srsquoattache agrave comprendre le travail pour le transformer

2 Il est possible de concevoir une IHM qui fonctionne pour tout le monde en se basant sur des normes

3 Lrsquoutilisateur va se servir de votre produit de la faccedilon dont vous lrsquoavez imagineacute

4 Lrsquoutilisateur interpregravete une tacircche comme un problegraveme qursquoil doit reacutesoudre en faisant avec ses caracteacuteristiques et les moyens mis agrave sa disposition

text

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

41

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

text

D - A quoi sert un prototype

42

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

43

Cornelia Laros

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

44

Cornelia Laros

Utilisabiliteacute

Utiliteacute

Efficaciteacute Efficience

Satisfaction

Introduction agrave lrsquoergonomie

Pyramide des besoins MASLOW

45

Cornelia Laros

Introduction agrave lrsquoergonomie

Pyramide des besoins IHM46

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

47

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

48

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

49

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

50

Cornelia Laros

Introduction agrave lrsquoergonomie

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

51

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

Introduction agrave lrsquoergonomie

D - A quoi sert un prototype

52

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

53

Cornelia Laros

a Fiable

b Intuitif

c Fonctionnel

d Accessible

e Plaisant

f Porteur de sens

Introduction agrave lrsquoergonomie

F - Quel besoin ai-je oublieacute dans la question

preacuteceacutedente

54

Cornelia Laros

text

Patterns amp Dark patterns

55

Cornelia Laros

text

Criteres de Bastien et Scapin56

Cornelia Laros

Guidage

Charge de travail

Controcircle utilisateur explicite

Flexibiliteacute ( adaptabiliteacute)

Gestion des erreurs

Homogeacuteneacuteiteacute ( coheacuterence)

Signifiance des Codes et Deacutenominations

Compatibiliteacute ( familiariteacute)

Introduction agrave lrsquoergonomie

Guidage57

Cornelia Laros

Introduction agrave lrsquoergonomie

Charge de travail58

Cornelia Laros

Introduction agrave lrsquoergonomie

Controle explicite59

Cornelia Laros

Introduction agrave lrsquoergonomie

Controles explicites60

Cornelia Laros

Dar983595 983541983527t983545983589983590n

text

Adaptabiliteacute61

Cornelia Laros

text

Gestion des erreurs62

Cornelia Laros

text

Signifiance des codes et deacutenominations

63

Cornelia Laros

text

Homogeacuteneacuteiteacute - coheacuterence64

Cornelia Laros

text

Homogeacuteneacuteiteacute - Distinction65

Cornelia Laros

text

Compatibiliteacute66

Cornelia Laros

text

Compatibiliteacute67

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction68

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction69

Cornelia Laros

text

Gestalt Theorie70

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Gestalt Theorie71

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Dark patterns72

Cornelia Laros

Introduction agrave lrsquoergonomie

A vous de jouer

73

Cornelia Laros

Introduction agrave lrsquoergonomie

Outils de prototypages DIY74

Cornelia Laros

Low tech papier + crayons post-its cartes agrave jouer

Gratuit en ligne Invision app Moqups UXPin

Mac Sketch Balsamiq Mockups Axure

PC Axure Balsamiq

Mobile Prototyping on Paper

Ap983540983590en983530983555 983592983589 no983547983549983589983537le983543 983581h983586983543983589983588

Introduction agrave lrsquoergonomie

Test de perception DIY75

Cornelia Laros

La premiegravere impression qursquoun utilisateur se fait de votre IHM va influencer tous ses jugements ulteacuterieurs Crsquoest lrsquoeffet de halo

bull Un utilisateur qui a une premiegravere impression positive de votre appli passera plus facilement outre les bugs

bull Une premiegravere impression negative rendra lrsquoutilisateur plus critique vis agrave vis de deacutetails qui confirment son jugement

Cel983527 983538983580983590c983532e 983527983548983588si 983527983549983589983581 vo983543 983586983590983580ux 983591rsquoex983527983538983589983585s vo983543 983530983585t983542983589983546i983530n983543 983592rsquoem983528983527983548983581he 983530983545 983550983587s 983542e983585d983530983555-vo983547983543 983581l983535e983539983546s

Introduction agrave lrsquoergonomie

Test de perception DIY76

Cornelia Laros

Montrer votre prototype agrave quelqursquoun pendant 5 secondes

Demandez-lui

bull Ce qursquoil a vu

bull Ce qursquoil a compris de ce qursquoil a vu

bull Ce qui lrsquoa surpris ou marqueacute

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY77

Cornelia Laros

Les difficulteacutes de navigation se produisent souvent dans les niveaux les plus haut de votre structure de contenu Vous pouvez veacuterifier facilement si la classification logique pour vous lrsquoest aussi pour vos utilisateurs

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY78

Cornelia Laros

Lister trois (max) niveaux de profondeur de votre contenu structureacute Masquez ensuite les contenus de niveau plus bas Utilisez par exemple les groupements de lignes dans excel pour creacuteer des pliers-deacutepliers ou imprimer la liste sur une feuille que vous pliez pour masquer certaines parties

Demandez agrave un utilisateur de vous dire ougrave il penserait trouver un contenu bien preacutecis en preacutecisant qursquoil nrsquoy a pas de bonne reacuteponse

Notez srsquoil va chercher lagrave ougrave vous vous y attendiez ougrave il a heacutesiteacute et ce qursquoil a fini par choisir pour vous aider agrave rendre la navigation plus intuitive

Introduction agrave lrsquoergonomie

Test drsquoutilisabiliteacute DIY79

Cornelia Laros

A chaque nouvelle fonctionnaliteacute ajouteacutee demandez agrave quelqursquoun qui ne connait pas le projet de srsquoen servir Proposez lui une seule tacircche geacuteneacuterique agrave accomplir avec la fonctionnaliteacute

Exemple Tu veux prendre un rendez-vous avec un meacutedecin sur ce site montres-moi comment tu ferais en commentant agrave haute voix

Le plus important ici crsquoest de ne pas reacuteagir agrave ce qursquoil fait mais simplement le regarder faire sans lrsquoaider mecircme srsquoil est bloqueacute

Srsquoil 983540983586983588983589 de983543 983578983547983589s983545i983586983585s reacutepo983539983592983530z 983540983580983590 un983530 983577983548e983588t983534983587983539 o983547 d983535983545e983588 l983547983535 983577u983530 983550983587us 983536983547983535 983590eacutepo983539983592r983530983555 983578983548an983591 983534983537 983580ur983527 fi983539983535 983588rsquoil 983534983539983588983535s983545e Srsquoil 983530983543983546 v983542983580i983593983530n983545 983529l983587983577ueacute di983545983530983588 l983548i 983577983547983589 983550o983547s 983580983536983537ez 983542983530983550983587ir 983549983586983546r983589 983579o983541983534983589 et 983530983543983588983580ye983555 983592983530 c983587983538983541re983539983592r983530 983579983589 983578u983534 l983589 9835316ne

Introduction agrave lrsquoergonomie

Pas besoin de reacuteinventer la roue DIY

80

Cornelia Laros

Il existe des bonnes pratiques qui vous eacuteviteront de reacuteinventer la roue Utilisez des laquo design patterns raquo pour concevoir vos interfaces

Renseignez vous sur la Gestalt Theorie pour agencer vos pages

Utilisez les critegraveres de Bastien et Scapin pour trouver des deacutefauts eacutevidents avant de tester vous en tirerez des enseignements plus inteacuteressants

Ma983534s ccedila crsquoes983545 983541983586983548r u983539983530 983580u983546r983530 983559983587i983588

Introduction agrave lrsquoergonomie

Quizz time

81

Cornelia Laros

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

82

Cornelia Laros

1 c Fonctionnel

2 a Fiable

3 d Accessible

4 b Intuitif

5 e Plaisant

6 f Porteur de sens

text

F - Quel besoin ai-je oublieacute dans la question preacuteceacutedente

83

Cornelia Laros

Uti983536983534983588983580b983536e

Introduction agrave lrsquoergonomie

Tests DIY84

Cornelia Laros

Reacutedigez la proceacutedure pour tester un de vos projets drsquoIHM avec le test de votre choix perception arborescence ou utilisabiliteacute

Notez la question que vous vous posez et la question que vous allez poser

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

text

Pause cafeacute

10 minutes

22

Cornelia Laros

Introduction agrave lrsquoergonomie

Quelques meacutethodes drsquoergonomie

23

Cornelia Laros

Introduction agrave lrsquoergonomie

Ergonomie de conception

24

Cornelia Laros

Ergonomie de correctionbull Analyse drsquoactiviteacute

bull Audit

bull Analyse drsquoeacutevegravenements critiques

bull Analyse de traces

bull Simulation

bull Entretiens

bull Persona cartes drsquoexpeacuteriences

bull Tri par cartes

bull Prototypage

bull Benchmarkhellip

Lrsquoergonomie tout au long du projet

Introduction agrave lrsquoergonomie

Ergonomie de conception

25

Cornelia Laros

Ergonomie de correctionbull Analyse drsquoactiviteacute

bull Audit

bull Analyse drsquoeacutevegravenements critiques

bull Analyse de traces

bull Simulationhellip

bullEntretiens

bullPersona cartes drsquoexpeacuteriences

bullTri par cartes

bullPrototypage

bullBenchmarkhellip

Des meacutethodes de recueil de donneacutees avec utilisateurs finaux et de conception laquo experte raquo

Introduction agrave lrsquoergonomie

Pourquoi ces meacutethodes26

Cornelia Laros

bull Si jrsquoavais demandeacute aux utilisateurs ce qursquoils voulaient ils mrsquoauraient demandeacute un cheval plus rapide - Henri Ford

bull Un comportement laquo sur-appris raquo devient un automatisme inconscient que lrsquoutilisateur ne saura pas expliquer (ex passer les vitesses en conduisant)

bull Le cerveau humain est propice agrave la fabulation (imagination de causes) aux faux souvenirs (en toute bonne fois) les biais (deacutesirabiliteacute effet pygmalion influence socialehellip)

Observer

Introduction agrave lrsquoergonomie

Pourquoi ces meacutethodes27

Cornelia Laros

bull Une imagine est plus parlante que 10 000 mots

bull Permet drsquoeacutevaluer une ideacutee agrave moindre coucirct donc de se tromper souvent et drsquoapprendre plus vite pour valider une ideacutee ou lrsquoameacuteliorer

bull Permet de tester plein drsquoideacutees et de retenir la meilleure

hellip A condition de se focaliser sur un objectif et non sur lrsquoideacutee elle-mecircme

Modeacuteliser

Introduction agrave lrsquoergonomie

Lrsquoensemble permet drsquoeacuteviter ceci

28

Cornelia Laros

Introduction agrave lrsquoergonomie

Lrsquoensemble permet drsquoeacuteviter ceci

29

Cornelia Laros

Eli983538983534983585eacute en 983586983528983588983589r983549a983585t

Eli983538983534983585eacute en 983540983590983586t983587983545983584pa983539983546

Introduction agrave lrsquoergonomie

Prototyper pour vous crsquoesthellip30

Cornelia Laros

CONTRIBUTION AUX SPECIFICATIONS FONCTIONNELLES

Zoning basse fideacuteliteacute wireframe statique (sketch ou non) bull Rapide et peu couteux bull Illustratif statique pas drsquointeraction bull Non engageant sur le design bull Tregraves peu explicite sur le plan fonctionnel

Story-board cliquable bull Illustre la navigation bull Permet de se projeter dans lrsquointeraction bull Pose les bases du design et du fonctionnel

Prototype semi-dynamique bull Se veut complet (ou quasi) sur le plan de la

navigation de lrsquointeraction et des cas drsquoutilisation bull Doit permettre de simuler fidegravelement le

fonctionnement drsquoune application bull Est une speacutecification fonctionnelle en soi

Pha983543983530 983592983589 ca983591983590983527g983589 AM983623983607

Pha983543983530 983592983589 co983539983581983530p983545983535o983585 f983586983539983581t983535o983539983585983530l983536983589

Tes983545983588 983547t983535983536i983588983527t983589u983542983588 ap983540983537983534s 983538983587983529il983530983543hellip

Introduction agrave lrsquoergonomie

Prototype basse definition31

Cornelia Laros

Introduction agrave lrsquoergonomie

Prototyper cliquable32

Cornelia Laros

Introduction agrave lrsquoergonomie

Prototyper semi-dynamique33

Cornelia Laros

Page Title

1230

Mobile interactions

Observably Sc i$amp

About

Project overiew

Manage sessions

Manage variables

Settings

Start observing

1230 1230

OverviewObserve

Observe mobile interactions in the field to assess dominant hand for holding and interacting with smartphones

10042016Mobile interactionsMobile interactions

Welcome to Observably Gather and manage observation dataGather and manage observation data

My projects

1230

Tags separate with comas

Variable value

Create

Add observablesAdd all observables you want to track for this project You can come back and edit them laterAdd all observables you want to track for this project You can come back and edit them later

Thanks for the hint

Manage variablesMobile InteractionsMobile Interactions

1230

Tags separate with comas

Variable value

Create

Left hand Right thumbLRTLRT

Manage variablesMobile InteractionsMobile Interactions

Irsquom done Start recording

Save changesCancel

Observable Tags separate with coma

Tags separate with comas

3 20

LRILRI

Observable label

Did you knowTap on the icon to customize it Use icons from our library or from your gallery to make variables pop out when observing

Tap on the icon to customize it Use icons from our library or from your gallery to make variables pop out when observing

Thanks for the hint

Left hand Right thumbLRTLRT

Irsquom done Start recording

Manage variablesMobile InteractionsMobile Interactions

Left hand x Right thumb x

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Did you knowIf you make a mistake you can undo your action by tapping on the icon of the taskIf you make a mistake you can undo your action by tapping on the icon of the task

Thanks for the hint

Session 1

Discrete mode New Session

Mobile InteractionsMobile Interactions

1230

Record vocal comment

LRILRILRILRILRILRI

Did you knowYou can record occurences durations and comments by chosing the record format in the drop-down above

You can record occurences durations and comments by chosing the record format in the drop-down above

Thanks for the hint

Discrete mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

Left hand Right thumbLRT

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Did you knowIn list view you can slipe left and right to increment or correct your countIn list view you can slipe left and right to increment or correct your count

Thanks for the hint

Continuous mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

LRILRILRILRILRI

Did you knowIf you make a mistake you can undo your action by tapping on the icon of the taskIf you make a mistake you can undo your action by tapping on the icon of the task

Thanks for the hint

Continuous mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

Tags separate with comas

Comment

Add

Did you know The timestamp of vocal comments is the start time to accurately mark events that triggered your comment

The timestamp of vocal comments is the start time to accurately mark events that triggered your comment

Thanks for the hint

Manage observables

Comments mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Stop recording vocal comment

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Your observationsManage and cleanup sessions before exporting dataManage and cleanup sessions before exporting data

Session ManagementMobile InteractionsMobile Interactions

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

LRT

LRI

RLI

RLT

RRT20

20

8

35

15

Count SummaryCount Summary

RLT

RRT20

815

Time SummaryTime Summary

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

Left hand Right thumbLRTLRT

+1+1

10042016 124627

Left hand Right thumbLRTLRT

2rsquorsquo2rsquorsquo

10042016 124627 - 10042016 124629

Content of my comment boxTag1 Tag2

10042016 124644

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

LRTLRT+1+1

10042016 124627

Save changes

Observable Tags separate with coma

Tags separate with comas

Left hand x Right thumb x

AboutAbout

1230

Observable science provides tools for field research and scientific observation It is tailored to the needs of ethnography human factors psychology usability and games user research

Observable science provides tools for field research and scientific observation It is tailored to the needs of ethnography human factors psychology usability and games user research

Observablyscience

Development by Morgane RadelDesign by Cornelia LarosDevelopment by Morgane RadelDesign by Cornelia Laros

Credits

Support (us)Show your love Rate the App

Make a donation

Contact us

Visit our website

Add session tags to all observations

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

Save changes

Session Tags separate with coma

Tags separate with comas

Metro x Toulouse x

Manage variablesMobile InteractionsMobile Interactions

1230

Left hand Right thumbLRTLRT

Confirm

Search icons

Cancel

Browse

3 20

Observably Sci$amp

1230

Project statisticsProject statistics Total countsTotal time Total comments First entryLast entrySessions

4 963281231

1441201201603042016

97

Project detailsMobile InteractionsMobile Interactions

Sessions SummarySessions Summary

RRT20

815

Count SummaryCount Summary

JUN 14MAY 14APR 14MAR 14FEB 14JAN 14

4

1

65

7

0

2

4

6

8

10

3

2014

Manage sessions

Settings ExportOverview

1230

App optionsDisplay hintsDisplay hints

SettingsSettings

Share anonymous data to improve the appShare anonymous data to improve the app

1230

Gather and manage observation data with ObservablyGather and manage observation data with Observably

Welcome to Observably

Project name

Project description what is the goal of your project

CreateCancel

Session[number]Session[number]

Default Session ID

Default export format txt

Data options

Default Discrete variable lines view

Create a new project

1230

Project detailsMobile InteractionsMobile Interactions

Mobile InteractionsMobile Interactions

Project description what is the goal of your project

SaveCancel

Session[number]Session[number]

Default Session ID

Default export format txt

Data options

Default continuous variables grid view

Project name

Manage sessions

Settings ExportOverview

1230

Project detailsMobile InteractionsMobile Interactions

Manage sessions

Settings ExportOverview

Export format txt

Export data

Data has been successfully exported as MobileInteractionstxt

to your download folder

Observably Sc i$amp

Settings

1230

BUTTONBUTTON

Permissions

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Up exlaborum incididunt quis nostrud exercitatn

COMPONENTS

Pickers

OKCANCEL

13

Friday

MAR

2014

MS W T F ST

30 31

1

16 17 19 20 21 2218

23 24 26 27 28 2925

139 10 12 14 1511

72 3 5 6 84

March 2014

OKCANCEL

PMAM

112

9

10

11

2

48

576

3

330 AM

Notifications

Incoming call

Rachel Ligson

IGNORE ANSWER

REPLYARCHIVE

Hey letrsquos catch up soon Do you want to grab lunch sometime this weekendLet me know when yoursquore free

409 PMHannah ChoHannah Cho

Do you know what I mean509 PMTina McBeanTina McBean

Heads up notification

Regular + Expanded notification

Index scroller

All

Patrick Keenan

Mary Johnson

Tina Santiago

Trevor Hansen

Amar Sagoo

Abbey Christensen

Ali Connors

Alex Nelson

Anthony Stevens

A

A

1230

Abcdefg

Abcdefghijklmno

Tabs

THE THIRDITEM TWONO ONE

THE THIRDITEM TWONO ONE

1230

THE THIRDITEM TWONO ONE

Page Title

1230

121 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

110 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

51 50

Input text for a single line field with a maximu

Single-Line Input Label

31 50

Input text for a single line field with a max

Single-Line Input Label

121 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

110 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

51 50

Input text for a single line field with a maximuInput text for a single line field with a maximu

Single-Line Input Label

31 50

Input text for a single line field with a maxInput text for a single line field with a max

Single-Line Input Label

Disabled text field

Input text

Username or Password is incorrect

Input text

Input tex

Hint text

Hint text

Hint text

Disabled text field

Input textInput text

Username or Password is incorrect

Input textInput text

Input texInput tex

Hint text

Hint text

Hint text

Text fields

Switches and sliders

60

Regular

Pressed

Disabled

60

Regular

Pressed

Disabled

Buttons

DISABLED

PRESSED

NORMAL

DISABLED

PRESSED

NORMAL

Flat Raised

DISABLED

PRESSED

NORMAL

DISABLED

PRESSED

NORMAL

Flat Raised

Toasts

This color applies to both light and dark theme

This item already has the label ldquotravelrdquo You can add a new label

ACTIONSingle-Line Snackbar

Menu

Arial 100

100

Calibri

Courier

Verdana

Arial

Chips

Trevor Hansen

email3emailcom

email2emailcom

primaryemailemailcomContact Name

Dialogs

Desktop

Without title With title

BUTTONBUTTON

PermissionsLorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Up exlaborum incididunt quis nostrud exercitatn

BUTTONBUTTON

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Ut enim ad minim ikad veniam quis nostrud exercitatn ullamco laboris nisi ut aliquip exlaborum incididunt

ACCEPTDECLINEMORE INFO

Permissions

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisinuli

Toolbar

11Roboto

Cards

Welcome BackItrsquos been a while have you read any new books latelyItrsquos been a while have you read any new books lately

YESNOPE

Kangaroo Valley Safari

Located two hours south of Sydney in the

Southern Highlands of New South Wales

LEARN MORESHARE

REVIEWFREE SAMPLE

By Alex Nelson

El Pooch

Pre-fab Homes

Favorite Road Trips

Best Airlines

Campbell

Groceries

almond milk

coconut water

cucumber

green apples

Yuna tickets on sale 624

May 24 2014

Clean desk

Keyboards

suggestion suggestion suggestion

123

a s d f g h j k l

z x c v b n m

q w e r t y u i o p1 2 3 4 5 6 7 8 9 0

suggestion suggestion suggestion

123

a s d f g h j k l

z x c v b n m

q w e r t y u i o p1 2 3 4 5 6 7 8 9 0

Bottom Sheet

Print this page

Copy

Upload

Share

MoreMail Message

Google+Gmail Hangout

Grid

Two lineSupport text

Two lineSupport text

Single line

Single line

Lists

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Three-line itemThree-line item

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Three-line itemThree-line item

Three-line itemThree-line item

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Three-line itemThree-line item

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Three-line itemThree-line item

Three-line itemThree-line item

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Line item unselectedLine item unselected

Line item selectedLine item selected

Line item selectedLine item selected

Data usageData usage

BluetoothBluetooth

Wi-FiWi-Fi

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Single-line itemSingle-line item

Single-line itemSingle-line item

Single-line itemSingle-line itemSingle-line itemSingle-line item

Single-line itemSingle-line item

Single-line itemSingle-line item

Introduction agrave lrsquoergonomie

Ergonomie et Design34

Cornelia Laros

Design Ergonomie Design Ergonomie

Identiteacute

Communication

Ambiance

Exemple un site institutionnel informatif avec une navigation simple et des exigences fortes

drsquoidentiteacuteExemple une application meacutetier destineacutee agrave une

population drsquoutilisateur connue

EfficaciteacuteFonctionnel

Outils

Service en ligne

Architecture de lrsquoinformation contenus bonnes pratiques

Analyse tache vs activiteacute prise en compte globaliseacutee des process

postes de travail eacutecosystegraveme existant hellip puis la conception

Image Usage freacutequent

Usage ponctuel

Votre eacutequipe Ergonome Directeur aristique Webdesigner UX Designer

Introduction agrave lrsquoergonomie

Design avant-tout35

Cornelia Laros

Introduction agrave lrsquoergonomie

Equilibreacute36

Cornelia Laros

Introduction agrave lrsquoergonomie

Ergonomie avant tout37

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

38

Cornelia Laros

text

Lrsquoergonomie sert agravehellip39

Cornelia Laros

1 ameacuteliorer les conditions de travail

2 faire gagner plus drsquoargent agrave lrsquoentreprise

3 ameacuteliorer lrsquoestheacutetique

4 comprendre comment ameacuteliorer un produit

text

Quelles affirmations sont vraies

40

Cornelia Laros

1 Lrsquoergonomie srsquoattache agrave comprendre le travail pour le transformer

2 Il est possible de concevoir une IHM qui fonctionne pour tout le monde en se basant sur des normes

3 Lrsquoutilisateur va se servir de votre produit de la faccedilon dont vous lrsquoavez imagineacute

4 Lrsquoutilisateur interpregravete une tacircche comme un problegraveme qursquoil doit reacutesoudre en faisant avec ses caracteacuteristiques et les moyens mis agrave sa disposition

text

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

41

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

text

D - A quoi sert un prototype

42

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

43

Cornelia Laros

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

44

Cornelia Laros

Utilisabiliteacute

Utiliteacute

Efficaciteacute Efficience

Satisfaction

Introduction agrave lrsquoergonomie

Pyramide des besoins MASLOW

45

Cornelia Laros

Introduction agrave lrsquoergonomie

Pyramide des besoins IHM46

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

47

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

48

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

49

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

50

Cornelia Laros

Introduction agrave lrsquoergonomie

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

51

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

Introduction agrave lrsquoergonomie

D - A quoi sert un prototype

52

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

53

Cornelia Laros

a Fiable

b Intuitif

c Fonctionnel

d Accessible

e Plaisant

f Porteur de sens

Introduction agrave lrsquoergonomie

F - Quel besoin ai-je oublieacute dans la question

preacuteceacutedente

54

Cornelia Laros

text

Patterns amp Dark patterns

55

Cornelia Laros

text

Criteres de Bastien et Scapin56

Cornelia Laros

Guidage

Charge de travail

Controcircle utilisateur explicite

Flexibiliteacute ( adaptabiliteacute)

Gestion des erreurs

Homogeacuteneacuteiteacute ( coheacuterence)

Signifiance des Codes et Deacutenominations

Compatibiliteacute ( familiariteacute)

Introduction agrave lrsquoergonomie

Guidage57

Cornelia Laros

Introduction agrave lrsquoergonomie

Charge de travail58

Cornelia Laros

Introduction agrave lrsquoergonomie

Controle explicite59

Cornelia Laros

Introduction agrave lrsquoergonomie

Controles explicites60

Cornelia Laros

Dar983595 983541983527t983545983589983590n

text

Adaptabiliteacute61

Cornelia Laros

text

Gestion des erreurs62

Cornelia Laros

text

Signifiance des codes et deacutenominations

63

Cornelia Laros

text

Homogeacuteneacuteiteacute - coheacuterence64

Cornelia Laros

text

Homogeacuteneacuteiteacute - Distinction65

Cornelia Laros

text

Compatibiliteacute66

Cornelia Laros

text

Compatibiliteacute67

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction68

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction69

Cornelia Laros

text

Gestalt Theorie70

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Gestalt Theorie71

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Dark patterns72

Cornelia Laros

Introduction agrave lrsquoergonomie

A vous de jouer

73

Cornelia Laros

Introduction agrave lrsquoergonomie

Outils de prototypages DIY74

Cornelia Laros

Low tech papier + crayons post-its cartes agrave jouer

Gratuit en ligne Invision app Moqups UXPin

Mac Sketch Balsamiq Mockups Axure

PC Axure Balsamiq

Mobile Prototyping on Paper

Ap983540983590en983530983555 983592983589 no983547983549983589983537le983543 983581h983586983543983589983588

Introduction agrave lrsquoergonomie

Test de perception DIY75

Cornelia Laros

La premiegravere impression qursquoun utilisateur se fait de votre IHM va influencer tous ses jugements ulteacuterieurs Crsquoest lrsquoeffet de halo

bull Un utilisateur qui a une premiegravere impression positive de votre appli passera plus facilement outre les bugs

bull Une premiegravere impression negative rendra lrsquoutilisateur plus critique vis agrave vis de deacutetails qui confirment son jugement

Cel983527 983538983580983590c983532e 983527983548983588si 983527983549983589983581 vo983543 983586983590983580ux 983591rsquoex983527983538983589983585s vo983543 983530983585t983542983589983546i983530n983543 983592rsquoem983528983527983548983581he 983530983545 983550983587s 983542e983585d983530983555-vo983547983543 983581l983535e983539983546s

Introduction agrave lrsquoergonomie

Test de perception DIY76

Cornelia Laros

Montrer votre prototype agrave quelqursquoun pendant 5 secondes

Demandez-lui

bull Ce qursquoil a vu

bull Ce qursquoil a compris de ce qursquoil a vu

bull Ce qui lrsquoa surpris ou marqueacute

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY77

Cornelia Laros

Les difficulteacutes de navigation se produisent souvent dans les niveaux les plus haut de votre structure de contenu Vous pouvez veacuterifier facilement si la classification logique pour vous lrsquoest aussi pour vos utilisateurs

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY78

Cornelia Laros

Lister trois (max) niveaux de profondeur de votre contenu structureacute Masquez ensuite les contenus de niveau plus bas Utilisez par exemple les groupements de lignes dans excel pour creacuteer des pliers-deacutepliers ou imprimer la liste sur une feuille que vous pliez pour masquer certaines parties

Demandez agrave un utilisateur de vous dire ougrave il penserait trouver un contenu bien preacutecis en preacutecisant qursquoil nrsquoy a pas de bonne reacuteponse

Notez srsquoil va chercher lagrave ougrave vous vous y attendiez ougrave il a heacutesiteacute et ce qursquoil a fini par choisir pour vous aider agrave rendre la navigation plus intuitive

Introduction agrave lrsquoergonomie

Test drsquoutilisabiliteacute DIY79

Cornelia Laros

A chaque nouvelle fonctionnaliteacute ajouteacutee demandez agrave quelqursquoun qui ne connait pas le projet de srsquoen servir Proposez lui une seule tacircche geacuteneacuterique agrave accomplir avec la fonctionnaliteacute

Exemple Tu veux prendre un rendez-vous avec un meacutedecin sur ce site montres-moi comment tu ferais en commentant agrave haute voix

Le plus important ici crsquoest de ne pas reacuteagir agrave ce qursquoil fait mais simplement le regarder faire sans lrsquoaider mecircme srsquoil est bloqueacute

Srsquoil 983540983586983588983589 de983543 983578983547983589s983545i983586983585s reacutepo983539983592983530z 983540983580983590 un983530 983577983548e983588t983534983587983539 o983547 d983535983545e983588 l983547983535 983577u983530 983550983587us 983536983547983535 983590eacutepo983539983592r983530983555 983578983548an983591 983534983537 983580ur983527 fi983539983535 983588rsquoil 983534983539983588983535s983545e Srsquoil 983530983543983546 v983542983580i983593983530n983545 983529l983587983577ueacute di983545983530983588 l983548i 983577983547983589 983550o983547s 983580983536983537ez 983542983530983550983587ir 983549983586983546r983589 983579o983541983534983589 et 983530983543983588983580ye983555 983592983530 c983587983538983541re983539983592r983530 983579983589 983578u983534 l983589 9835316ne

Introduction agrave lrsquoergonomie

Pas besoin de reacuteinventer la roue DIY

80

Cornelia Laros

Il existe des bonnes pratiques qui vous eacuteviteront de reacuteinventer la roue Utilisez des laquo design patterns raquo pour concevoir vos interfaces

Renseignez vous sur la Gestalt Theorie pour agencer vos pages

Utilisez les critegraveres de Bastien et Scapin pour trouver des deacutefauts eacutevidents avant de tester vous en tirerez des enseignements plus inteacuteressants

Ma983534s ccedila crsquoes983545 983541983586983548r u983539983530 983580u983546r983530 983559983587i983588

Introduction agrave lrsquoergonomie

Quizz time

81

Cornelia Laros

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

82

Cornelia Laros

1 c Fonctionnel

2 a Fiable

3 d Accessible

4 b Intuitif

5 e Plaisant

6 f Porteur de sens

text

F - Quel besoin ai-je oublieacute dans la question preacuteceacutedente

83

Cornelia Laros

Uti983536983534983588983580b983536e

Introduction agrave lrsquoergonomie

Tests DIY84

Cornelia Laros

Reacutedigez la proceacutedure pour tester un de vos projets drsquoIHM avec le test de votre choix perception arborescence ou utilisabiliteacute

Notez la question que vous vous posez et la question que vous allez poser

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

Introduction agrave lrsquoergonomie

Quelques meacutethodes drsquoergonomie

23

Cornelia Laros

Introduction agrave lrsquoergonomie

Ergonomie de conception

24

Cornelia Laros

Ergonomie de correctionbull Analyse drsquoactiviteacute

bull Audit

bull Analyse drsquoeacutevegravenements critiques

bull Analyse de traces

bull Simulation

bull Entretiens

bull Persona cartes drsquoexpeacuteriences

bull Tri par cartes

bull Prototypage

bull Benchmarkhellip

Lrsquoergonomie tout au long du projet

Introduction agrave lrsquoergonomie

Ergonomie de conception

25

Cornelia Laros

Ergonomie de correctionbull Analyse drsquoactiviteacute

bull Audit

bull Analyse drsquoeacutevegravenements critiques

bull Analyse de traces

bull Simulationhellip

bullEntretiens

bullPersona cartes drsquoexpeacuteriences

bullTri par cartes

bullPrototypage

bullBenchmarkhellip

Des meacutethodes de recueil de donneacutees avec utilisateurs finaux et de conception laquo experte raquo

Introduction agrave lrsquoergonomie

Pourquoi ces meacutethodes26

Cornelia Laros

bull Si jrsquoavais demandeacute aux utilisateurs ce qursquoils voulaient ils mrsquoauraient demandeacute un cheval plus rapide - Henri Ford

bull Un comportement laquo sur-appris raquo devient un automatisme inconscient que lrsquoutilisateur ne saura pas expliquer (ex passer les vitesses en conduisant)

bull Le cerveau humain est propice agrave la fabulation (imagination de causes) aux faux souvenirs (en toute bonne fois) les biais (deacutesirabiliteacute effet pygmalion influence socialehellip)

Observer

Introduction agrave lrsquoergonomie

Pourquoi ces meacutethodes27

Cornelia Laros

bull Une imagine est plus parlante que 10 000 mots

bull Permet drsquoeacutevaluer une ideacutee agrave moindre coucirct donc de se tromper souvent et drsquoapprendre plus vite pour valider une ideacutee ou lrsquoameacuteliorer

bull Permet de tester plein drsquoideacutees et de retenir la meilleure

hellip A condition de se focaliser sur un objectif et non sur lrsquoideacutee elle-mecircme

Modeacuteliser

Introduction agrave lrsquoergonomie

Lrsquoensemble permet drsquoeacuteviter ceci

28

Cornelia Laros

Introduction agrave lrsquoergonomie

Lrsquoensemble permet drsquoeacuteviter ceci

29

Cornelia Laros

Eli983538983534983585eacute en 983586983528983588983589r983549a983585t

Eli983538983534983585eacute en 983540983590983586t983587983545983584pa983539983546

Introduction agrave lrsquoergonomie

Prototyper pour vous crsquoesthellip30

Cornelia Laros

CONTRIBUTION AUX SPECIFICATIONS FONCTIONNELLES

Zoning basse fideacuteliteacute wireframe statique (sketch ou non) bull Rapide et peu couteux bull Illustratif statique pas drsquointeraction bull Non engageant sur le design bull Tregraves peu explicite sur le plan fonctionnel

Story-board cliquable bull Illustre la navigation bull Permet de se projeter dans lrsquointeraction bull Pose les bases du design et du fonctionnel

Prototype semi-dynamique bull Se veut complet (ou quasi) sur le plan de la

navigation de lrsquointeraction et des cas drsquoutilisation bull Doit permettre de simuler fidegravelement le

fonctionnement drsquoune application bull Est une speacutecification fonctionnelle en soi

Pha983543983530 983592983589 ca983591983590983527g983589 AM983623983607

Pha983543983530 983592983589 co983539983581983530p983545983535o983585 f983586983539983581t983535o983539983585983530l983536983589

Tes983545983588 983547t983535983536i983588983527t983589u983542983588 ap983540983537983534s 983538983587983529il983530983543hellip

Introduction agrave lrsquoergonomie

Prototype basse definition31

Cornelia Laros

Introduction agrave lrsquoergonomie

Prototyper cliquable32

Cornelia Laros

Introduction agrave lrsquoergonomie

Prototyper semi-dynamique33

Cornelia Laros

Page Title

1230

Mobile interactions

Observably Sc i$amp

About

Project overiew

Manage sessions

Manage variables

Settings

Start observing

1230 1230

OverviewObserve

Observe mobile interactions in the field to assess dominant hand for holding and interacting with smartphones

10042016Mobile interactionsMobile interactions

Welcome to Observably Gather and manage observation dataGather and manage observation data

My projects

1230

Tags separate with comas

Variable value

Create

Add observablesAdd all observables you want to track for this project You can come back and edit them laterAdd all observables you want to track for this project You can come back and edit them later

Thanks for the hint

Manage variablesMobile InteractionsMobile Interactions

1230

Tags separate with comas

Variable value

Create

Left hand Right thumbLRTLRT

Manage variablesMobile InteractionsMobile Interactions

Irsquom done Start recording

Save changesCancel

Observable Tags separate with coma

Tags separate with comas

3 20

LRILRI

Observable label

Did you knowTap on the icon to customize it Use icons from our library or from your gallery to make variables pop out when observing

Tap on the icon to customize it Use icons from our library or from your gallery to make variables pop out when observing

Thanks for the hint

Left hand Right thumbLRTLRT

Irsquom done Start recording

Manage variablesMobile InteractionsMobile Interactions

Left hand x Right thumb x

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Did you knowIf you make a mistake you can undo your action by tapping on the icon of the taskIf you make a mistake you can undo your action by tapping on the icon of the task

Thanks for the hint

Session 1

Discrete mode New Session

Mobile InteractionsMobile Interactions

1230

Record vocal comment

LRILRILRILRILRILRI

Did you knowYou can record occurences durations and comments by chosing the record format in the drop-down above

You can record occurences durations and comments by chosing the record format in the drop-down above

Thanks for the hint

Discrete mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

Left hand Right thumbLRT

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Did you knowIn list view you can slipe left and right to increment or correct your countIn list view you can slipe left and right to increment or correct your count

Thanks for the hint

Continuous mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

LRILRILRILRILRI

Did you knowIf you make a mistake you can undo your action by tapping on the icon of the taskIf you make a mistake you can undo your action by tapping on the icon of the task

Thanks for the hint

Continuous mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

Tags separate with comas

Comment

Add

Did you know The timestamp of vocal comments is the start time to accurately mark events that triggered your comment

The timestamp of vocal comments is the start time to accurately mark events that triggered your comment

Thanks for the hint

Manage observables

Comments mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Stop recording vocal comment

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Your observationsManage and cleanup sessions before exporting dataManage and cleanup sessions before exporting data

Session ManagementMobile InteractionsMobile Interactions

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

LRT

LRI

RLI

RLT

RRT20

20

8

35

15

Count SummaryCount Summary

RLT

RRT20

815

Time SummaryTime Summary

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

Left hand Right thumbLRTLRT

+1+1

10042016 124627

Left hand Right thumbLRTLRT

2rsquorsquo2rsquorsquo

10042016 124627 - 10042016 124629

Content of my comment boxTag1 Tag2

10042016 124644

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

LRTLRT+1+1

10042016 124627

Save changes

Observable Tags separate with coma

Tags separate with comas

Left hand x Right thumb x

AboutAbout

1230

Observable science provides tools for field research and scientific observation It is tailored to the needs of ethnography human factors psychology usability and games user research

Observable science provides tools for field research and scientific observation It is tailored to the needs of ethnography human factors psychology usability and games user research

Observablyscience

Development by Morgane RadelDesign by Cornelia LarosDevelopment by Morgane RadelDesign by Cornelia Laros

Credits

Support (us)Show your love Rate the App

Make a donation

Contact us

Visit our website

Add session tags to all observations

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

Save changes

Session Tags separate with coma

Tags separate with comas

Metro x Toulouse x

Manage variablesMobile InteractionsMobile Interactions

1230

Left hand Right thumbLRTLRT

Confirm

Search icons

Cancel

Browse

3 20

Observably Sci$amp

1230

Project statisticsProject statistics Total countsTotal time Total comments First entryLast entrySessions

4 963281231

1441201201603042016

97

Project detailsMobile InteractionsMobile Interactions

Sessions SummarySessions Summary

RRT20

815

Count SummaryCount Summary

JUN 14MAY 14APR 14MAR 14FEB 14JAN 14

4

1

65

7

0

2

4

6

8

10

3

2014

Manage sessions

Settings ExportOverview

1230

App optionsDisplay hintsDisplay hints

SettingsSettings

Share anonymous data to improve the appShare anonymous data to improve the app

1230

Gather and manage observation data with ObservablyGather and manage observation data with Observably

Welcome to Observably

Project name

Project description what is the goal of your project

CreateCancel

Session[number]Session[number]

Default Session ID

Default export format txt

Data options

Default Discrete variable lines view

Create a new project

1230

Project detailsMobile InteractionsMobile Interactions

Mobile InteractionsMobile Interactions

Project description what is the goal of your project

SaveCancel

Session[number]Session[number]

Default Session ID

Default export format txt

Data options

Default continuous variables grid view

Project name

Manage sessions

Settings ExportOverview

1230

Project detailsMobile InteractionsMobile Interactions

Manage sessions

Settings ExportOverview

Export format txt

Export data

Data has been successfully exported as MobileInteractionstxt

to your download folder

Observably Sc i$amp

Settings

1230

BUTTONBUTTON

Permissions

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Up exlaborum incididunt quis nostrud exercitatn

COMPONENTS

Pickers

OKCANCEL

13

Friday

MAR

2014

MS W T F ST

30 31

1

16 17 19 20 21 2218

23 24 26 27 28 2925

139 10 12 14 1511

72 3 5 6 84

March 2014

OKCANCEL

PMAM

112

9

10

11

2

48

576

3

330 AM

Notifications

Incoming call

Rachel Ligson

IGNORE ANSWER

REPLYARCHIVE

Hey letrsquos catch up soon Do you want to grab lunch sometime this weekendLet me know when yoursquore free

409 PMHannah ChoHannah Cho

Do you know what I mean509 PMTina McBeanTina McBean

Heads up notification

Regular + Expanded notification

Index scroller

All

Patrick Keenan

Mary Johnson

Tina Santiago

Trevor Hansen

Amar Sagoo

Abbey Christensen

Ali Connors

Alex Nelson

Anthony Stevens

A

A

1230

Abcdefg

Abcdefghijklmno

Tabs

THE THIRDITEM TWONO ONE

THE THIRDITEM TWONO ONE

1230

THE THIRDITEM TWONO ONE

Page Title

1230

121 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

110 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

51 50

Input text for a single line field with a maximu

Single-Line Input Label

31 50

Input text for a single line field with a max

Single-Line Input Label

121 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

110 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

51 50

Input text for a single line field with a maximuInput text for a single line field with a maximu

Single-Line Input Label

31 50

Input text for a single line field with a maxInput text for a single line field with a max

Single-Line Input Label

Disabled text field

Input text

Username or Password is incorrect

Input text

Input tex

Hint text

Hint text

Hint text

Disabled text field

Input textInput text

Username or Password is incorrect

Input textInput text

Input texInput tex

Hint text

Hint text

Hint text

Text fields

Switches and sliders

60

Regular

Pressed

Disabled

60

Regular

Pressed

Disabled

Buttons

DISABLED

PRESSED

NORMAL

DISABLED

PRESSED

NORMAL

Flat Raised

DISABLED

PRESSED

NORMAL

DISABLED

PRESSED

NORMAL

Flat Raised

Toasts

This color applies to both light and dark theme

This item already has the label ldquotravelrdquo You can add a new label

ACTIONSingle-Line Snackbar

Menu

Arial 100

100

Calibri

Courier

Verdana

Arial

Chips

Trevor Hansen

email3emailcom

email2emailcom

primaryemailemailcomContact Name

Dialogs

Desktop

Without title With title

BUTTONBUTTON

PermissionsLorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Up exlaborum incididunt quis nostrud exercitatn

BUTTONBUTTON

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Ut enim ad minim ikad veniam quis nostrud exercitatn ullamco laboris nisi ut aliquip exlaborum incididunt

ACCEPTDECLINEMORE INFO

Permissions

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisinuli

Toolbar

11Roboto

Cards

Welcome BackItrsquos been a while have you read any new books latelyItrsquos been a while have you read any new books lately

YESNOPE

Kangaroo Valley Safari

Located two hours south of Sydney in the

Southern Highlands of New South Wales

LEARN MORESHARE

REVIEWFREE SAMPLE

By Alex Nelson

El Pooch

Pre-fab Homes

Favorite Road Trips

Best Airlines

Campbell

Groceries

almond milk

coconut water

cucumber

green apples

Yuna tickets on sale 624

May 24 2014

Clean desk

Keyboards

suggestion suggestion suggestion

123

a s d f g h j k l

z x c v b n m

q w e r t y u i o p1 2 3 4 5 6 7 8 9 0

suggestion suggestion suggestion

123

a s d f g h j k l

z x c v b n m

q w e r t y u i o p1 2 3 4 5 6 7 8 9 0

Bottom Sheet

Print this page

Copy

Upload

Share

MoreMail Message

Google+Gmail Hangout

Grid

Two lineSupport text

Two lineSupport text

Single line

Single line

Lists

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Three-line itemThree-line item

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Three-line itemThree-line item

Three-line itemThree-line item

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Three-line itemThree-line item

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Three-line itemThree-line item

Three-line itemThree-line item

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Line item unselectedLine item unselected

Line item selectedLine item selected

Line item selectedLine item selected

Data usageData usage

BluetoothBluetooth

Wi-FiWi-Fi

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Single-line itemSingle-line item

Single-line itemSingle-line item

Single-line itemSingle-line itemSingle-line itemSingle-line item

Single-line itemSingle-line item

Single-line itemSingle-line item

Introduction agrave lrsquoergonomie

Ergonomie et Design34

Cornelia Laros

Design Ergonomie Design Ergonomie

Identiteacute

Communication

Ambiance

Exemple un site institutionnel informatif avec une navigation simple et des exigences fortes

drsquoidentiteacuteExemple une application meacutetier destineacutee agrave une

population drsquoutilisateur connue

EfficaciteacuteFonctionnel

Outils

Service en ligne

Architecture de lrsquoinformation contenus bonnes pratiques

Analyse tache vs activiteacute prise en compte globaliseacutee des process

postes de travail eacutecosystegraveme existant hellip puis la conception

Image Usage freacutequent

Usage ponctuel

Votre eacutequipe Ergonome Directeur aristique Webdesigner UX Designer

Introduction agrave lrsquoergonomie

Design avant-tout35

Cornelia Laros

Introduction agrave lrsquoergonomie

Equilibreacute36

Cornelia Laros

Introduction agrave lrsquoergonomie

Ergonomie avant tout37

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

38

Cornelia Laros

text

Lrsquoergonomie sert agravehellip39

Cornelia Laros

1 ameacuteliorer les conditions de travail

2 faire gagner plus drsquoargent agrave lrsquoentreprise

3 ameacuteliorer lrsquoestheacutetique

4 comprendre comment ameacuteliorer un produit

text

Quelles affirmations sont vraies

40

Cornelia Laros

1 Lrsquoergonomie srsquoattache agrave comprendre le travail pour le transformer

2 Il est possible de concevoir une IHM qui fonctionne pour tout le monde en se basant sur des normes

3 Lrsquoutilisateur va se servir de votre produit de la faccedilon dont vous lrsquoavez imagineacute

4 Lrsquoutilisateur interpregravete une tacircche comme un problegraveme qursquoil doit reacutesoudre en faisant avec ses caracteacuteristiques et les moyens mis agrave sa disposition

text

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

41

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

text

D - A quoi sert un prototype

42

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

43

Cornelia Laros

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

44

Cornelia Laros

Utilisabiliteacute

Utiliteacute

Efficaciteacute Efficience

Satisfaction

Introduction agrave lrsquoergonomie

Pyramide des besoins MASLOW

45

Cornelia Laros

Introduction agrave lrsquoergonomie

Pyramide des besoins IHM46

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

47

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

48

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

49

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

50

Cornelia Laros

Introduction agrave lrsquoergonomie

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

51

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

Introduction agrave lrsquoergonomie

D - A quoi sert un prototype

52

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

53

Cornelia Laros

a Fiable

b Intuitif

c Fonctionnel

d Accessible

e Plaisant

f Porteur de sens

Introduction agrave lrsquoergonomie

F - Quel besoin ai-je oublieacute dans la question

preacuteceacutedente

54

Cornelia Laros

text

Patterns amp Dark patterns

55

Cornelia Laros

text

Criteres de Bastien et Scapin56

Cornelia Laros

Guidage

Charge de travail

Controcircle utilisateur explicite

Flexibiliteacute ( adaptabiliteacute)

Gestion des erreurs

Homogeacuteneacuteiteacute ( coheacuterence)

Signifiance des Codes et Deacutenominations

Compatibiliteacute ( familiariteacute)

Introduction agrave lrsquoergonomie

Guidage57

Cornelia Laros

Introduction agrave lrsquoergonomie

Charge de travail58

Cornelia Laros

Introduction agrave lrsquoergonomie

Controle explicite59

Cornelia Laros

Introduction agrave lrsquoergonomie

Controles explicites60

Cornelia Laros

Dar983595 983541983527t983545983589983590n

text

Adaptabiliteacute61

Cornelia Laros

text

Gestion des erreurs62

Cornelia Laros

text

Signifiance des codes et deacutenominations

63

Cornelia Laros

text

Homogeacuteneacuteiteacute - coheacuterence64

Cornelia Laros

text

Homogeacuteneacuteiteacute - Distinction65

Cornelia Laros

text

Compatibiliteacute66

Cornelia Laros

text

Compatibiliteacute67

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction68

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction69

Cornelia Laros

text

Gestalt Theorie70

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Gestalt Theorie71

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Dark patterns72

Cornelia Laros

Introduction agrave lrsquoergonomie

A vous de jouer

73

Cornelia Laros

Introduction agrave lrsquoergonomie

Outils de prototypages DIY74

Cornelia Laros

Low tech papier + crayons post-its cartes agrave jouer

Gratuit en ligne Invision app Moqups UXPin

Mac Sketch Balsamiq Mockups Axure

PC Axure Balsamiq

Mobile Prototyping on Paper

Ap983540983590en983530983555 983592983589 no983547983549983589983537le983543 983581h983586983543983589983588

Introduction agrave lrsquoergonomie

Test de perception DIY75

Cornelia Laros

La premiegravere impression qursquoun utilisateur se fait de votre IHM va influencer tous ses jugements ulteacuterieurs Crsquoest lrsquoeffet de halo

bull Un utilisateur qui a une premiegravere impression positive de votre appli passera plus facilement outre les bugs

bull Une premiegravere impression negative rendra lrsquoutilisateur plus critique vis agrave vis de deacutetails qui confirment son jugement

Cel983527 983538983580983590c983532e 983527983548983588si 983527983549983589983581 vo983543 983586983590983580ux 983591rsquoex983527983538983589983585s vo983543 983530983585t983542983589983546i983530n983543 983592rsquoem983528983527983548983581he 983530983545 983550983587s 983542e983585d983530983555-vo983547983543 983581l983535e983539983546s

Introduction agrave lrsquoergonomie

Test de perception DIY76

Cornelia Laros

Montrer votre prototype agrave quelqursquoun pendant 5 secondes

Demandez-lui

bull Ce qursquoil a vu

bull Ce qursquoil a compris de ce qursquoil a vu

bull Ce qui lrsquoa surpris ou marqueacute

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY77

Cornelia Laros

Les difficulteacutes de navigation se produisent souvent dans les niveaux les plus haut de votre structure de contenu Vous pouvez veacuterifier facilement si la classification logique pour vous lrsquoest aussi pour vos utilisateurs

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY78

Cornelia Laros

Lister trois (max) niveaux de profondeur de votre contenu structureacute Masquez ensuite les contenus de niveau plus bas Utilisez par exemple les groupements de lignes dans excel pour creacuteer des pliers-deacutepliers ou imprimer la liste sur une feuille que vous pliez pour masquer certaines parties

Demandez agrave un utilisateur de vous dire ougrave il penserait trouver un contenu bien preacutecis en preacutecisant qursquoil nrsquoy a pas de bonne reacuteponse

Notez srsquoil va chercher lagrave ougrave vous vous y attendiez ougrave il a heacutesiteacute et ce qursquoil a fini par choisir pour vous aider agrave rendre la navigation plus intuitive

Introduction agrave lrsquoergonomie

Test drsquoutilisabiliteacute DIY79

Cornelia Laros

A chaque nouvelle fonctionnaliteacute ajouteacutee demandez agrave quelqursquoun qui ne connait pas le projet de srsquoen servir Proposez lui une seule tacircche geacuteneacuterique agrave accomplir avec la fonctionnaliteacute

Exemple Tu veux prendre un rendez-vous avec un meacutedecin sur ce site montres-moi comment tu ferais en commentant agrave haute voix

Le plus important ici crsquoest de ne pas reacuteagir agrave ce qursquoil fait mais simplement le regarder faire sans lrsquoaider mecircme srsquoil est bloqueacute

Srsquoil 983540983586983588983589 de983543 983578983547983589s983545i983586983585s reacutepo983539983592983530z 983540983580983590 un983530 983577983548e983588t983534983587983539 o983547 d983535983545e983588 l983547983535 983577u983530 983550983587us 983536983547983535 983590eacutepo983539983592r983530983555 983578983548an983591 983534983537 983580ur983527 fi983539983535 983588rsquoil 983534983539983588983535s983545e Srsquoil 983530983543983546 v983542983580i983593983530n983545 983529l983587983577ueacute di983545983530983588 l983548i 983577983547983589 983550o983547s 983580983536983537ez 983542983530983550983587ir 983549983586983546r983589 983579o983541983534983589 et 983530983543983588983580ye983555 983592983530 c983587983538983541re983539983592r983530 983579983589 983578u983534 l983589 9835316ne

Introduction agrave lrsquoergonomie

Pas besoin de reacuteinventer la roue DIY

80

Cornelia Laros

Il existe des bonnes pratiques qui vous eacuteviteront de reacuteinventer la roue Utilisez des laquo design patterns raquo pour concevoir vos interfaces

Renseignez vous sur la Gestalt Theorie pour agencer vos pages

Utilisez les critegraveres de Bastien et Scapin pour trouver des deacutefauts eacutevidents avant de tester vous en tirerez des enseignements plus inteacuteressants

Ma983534s ccedila crsquoes983545 983541983586983548r u983539983530 983580u983546r983530 983559983587i983588

Introduction agrave lrsquoergonomie

Quizz time

81

Cornelia Laros

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

82

Cornelia Laros

1 c Fonctionnel

2 a Fiable

3 d Accessible

4 b Intuitif

5 e Plaisant

6 f Porteur de sens

text

F - Quel besoin ai-je oublieacute dans la question preacuteceacutedente

83

Cornelia Laros

Uti983536983534983588983580b983536e

Introduction agrave lrsquoergonomie

Tests DIY84

Cornelia Laros

Reacutedigez la proceacutedure pour tester un de vos projets drsquoIHM avec le test de votre choix perception arborescence ou utilisabiliteacute

Notez la question que vous vous posez et la question que vous allez poser

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

Introduction agrave lrsquoergonomie

Ergonomie de conception

24

Cornelia Laros

Ergonomie de correctionbull Analyse drsquoactiviteacute

bull Audit

bull Analyse drsquoeacutevegravenements critiques

bull Analyse de traces

bull Simulation

bull Entretiens

bull Persona cartes drsquoexpeacuteriences

bull Tri par cartes

bull Prototypage

bull Benchmarkhellip

Lrsquoergonomie tout au long du projet

Introduction agrave lrsquoergonomie

Ergonomie de conception

25

Cornelia Laros

Ergonomie de correctionbull Analyse drsquoactiviteacute

bull Audit

bull Analyse drsquoeacutevegravenements critiques

bull Analyse de traces

bull Simulationhellip

bullEntretiens

bullPersona cartes drsquoexpeacuteriences

bullTri par cartes

bullPrototypage

bullBenchmarkhellip

Des meacutethodes de recueil de donneacutees avec utilisateurs finaux et de conception laquo experte raquo

Introduction agrave lrsquoergonomie

Pourquoi ces meacutethodes26

Cornelia Laros

bull Si jrsquoavais demandeacute aux utilisateurs ce qursquoils voulaient ils mrsquoauraient demandeacute un cheval plus rapide - Henri Ford

bull Un comportement laquo sur-appris raquo devient un automatisme inconscient que lrsquoutilisateur ne saura pas expliquer (ex passer les vitesses en conduisant)

bull Le cerveau humain est propice agrave la fabulation (imagination de causes) aux faux souvenirs (en toute bonne fois) les biais (deacutesirabiliteacute effet pygmalion influence socialehellip)

Observer

Introduction agrave lrsquoergonomie

Pourquoi ces meacutethodes27

Cornelia Laros

bull Une imagine est plus parlante que 10 000 mots

bull Permet drsquoeacutevaluer une ideacutee agrave moindre coucirct donc de se tromper souvent et drsquoapprendre plus vite pour valider une ideacutee ou lrsquoameacuteliorer

bull Permet de tester plein drsquoideacutees et de retenir la meilleure

hellip A condition de se focaliser sur un objectif et non sur lrsquoideacutee elle-mecircme

Modeacuteliser

Introduction agrave lrsquoergonomie

Lrsquoensemble permet drsquoeacuteviter ceci

28

Cornelia Laros

Introduction agrave lrsquoergonomie

Lrsquoensemble permet drsquoeacuteviter ceci

29

Cornelia Laros

Eli983538983534983585eacute en 983586983528983588983589r983549a983585t

Eli983538983534983585eacute en 983540983590983586t983587983545983584pa983539983546

Introduction agrave lrsquoergonomie

Prototyper pour vous crsquoesthellip30

Cornelia Laros

CONTRIBUTION AUX SPECIFICATIONS FONCTIONNELLES

Zoning basse fideacuteliteacute wireframe statique (sketch ou non) bull Rapide et peu couteux bull Illustratif statique pas drsquointeraction bull Non engageant sur le design bull Tregraves peu explicite sur le plan fonctionnel

Story-board cliquable bull Illustre la navigation bull Permet de se projeter dans lrsquointeraction bull Pose les bases du design et du fonctionnel

Prototype semi-dynamique bull Se veut complet (ou quasi) sur le plan de la

navigation de lrsquointeraction et des cas drsquoutilisation bull Doit permettre de simuler fidegravelement le

fonctionnement drsquoune application bull Est une speacutecification fonctionnelle en soi

Pha983543983530 983592983589 ca983591983590983527g983589 AM983623983607

Pha983543983530 983592983589 co983539983581983530p983545983535o983585 f983586983539983581t983535o983539983585983530l983536983589

Tes983545983588 983547t983535983536i983588983527t983589u983542983588 ap983540983537983534s 983538983587983529il983530983543hellip

Introduction agrave lrsquoergonomie

Prototype basse definition31

Cornelia Laros

Introduction agrave lrsquoergonomie

Prototyper cliquable32

Cornelia Laros

Introduction agrave lrsquoergonomie

Prototyper semi-dynamique33

Cornelia Laros

Page Title

1230

Mobile interactions

Observably Sc i$amp

About

Project overiew

Manage sessions

Manage variables

Settings

Start observing

1230 1230

OverviewObserve

Observe mobile interactions in the field to assess dominant hand for holding and interacting with smartphones

10042016Mobile interactionsMobile interactions

Welcome to Observably Gather and manage observation dataGather and manage observation data

My projects

1230

Tags separate with comas

Variable value

Create

Add observablesAdd all observables you want to track for this project You can come back and edit them laterAdd all observables you want to track for this project You can come back and edit them later

Thanks for the hint

Manage variablesMobile InteractionsMobile Interactions

1230

Tags separate with comas

Variable value

Create

Left hand Right thumbLRTLRT

Manage variablesMobile InteractionsMobile Interactions

Irsquom done Start recording

Save changesCancel

Observable Tags separate with coma

Tags separate with comas

3 20

LRILRI

Observable label

Did you knowTap on the icon to customize it Use icons from our library or from your gallery to make variables pop out when observing

Tap on the icon to customize it Use icons from our library or from your gallery to make variables pop out when observing

Thanks for the hint

Left hand Right thumbLRTLRT

Irsquom done Start recording

Manage variablesMobile InteractionsMobile Interactions

Left hand x Right thumb x

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Did you knowIf you make a mistake you can undo your action by tapping on the icon of the taskIf you make a mistake you can undo your action by tapping on the icon of the task

Thanks for the hint

Session 1

Discrete mode New Session

Mobile InteractionsMobile Interactions

1230

Record vocal comment

LRILRILRILRILRILRI

Did you knowYou can record occurences durations and comments by chosing the record format in the drop-down above

You can record occurences durations and comments by chosing the record format in the drop-down above

Thanks for the hint

Discrete mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

Left hand Right thumbLRT

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Did you knowIn list view you can slipe left and right to increment or correct your countIn list view you can slipe left and right to increment or correct your count

Thanks for the hint

Continuous mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

LRILRILRILRILRI

Did you knowIf you make a mistake you can undo your action by tapping on the icon of the taskIf you make a mistake you can undo your action by tapping on the icon of the task

Thanks for the hint

Continuous mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

Tags separate with comas

Comment

Add

Did you know The timestamp of vocal comments is the start time to accurately mark events that triggered your comment

The timestamp of vocal comments is the start time to accurately mark events that triggered your comment

Thanks for the hint

Manage observables

Comments mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Stop recording vocal comment

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Your observationsManage and cleanup sessions before exporting dataManage and cleanup sessions before exporting data

Session ManagementMobile InteractionsMobile Interactions

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

LRT

LRI

RLI

RLT

RRT20

20

8

35

15

Count SummaryCount Summary

RLT

RRT20

815

Time SummaryTime Summary

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

Left hand Right thumbLRTLRT

+1+1

10042016 124627

Left hand Right thumbLRTLRT

2rsquorsquo2rsquorsquo

10042016 124627 - 10042016 124629

Content of my comment boxTag1 Tag2

10042016 124644

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

LRTLRT+1+1

10042016 124627

Save changes

Observable Tags separate with coma

Tags separate with comas

Left hand x Right thumb x

AboutAbout

1230

Observable science provides tools for field research and scientific observation It is tailored to the needs of ethnography human factors psychology usability and games user research

Observable science provides tools for field research and scientific observation It is tailored to the needs of ethnography human factors psychology usability and games user research

Observablyscience

Development by Morgane RadelDesign by Cornelia LarosDevelopment by Morgane RadelDesign by Cornelia Laros

Credits

Support (us)Show your love Rate the App

Make a donation

Contact us

Visit our website

Add session tags to all observations

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

Save changes

Session Tags separate with coma

Tags separate with comas

Metro x Toulouse x

Manage variablesMobile InteractionsMobile Interactions

1230

Left hand Right thumbLRTLRT

Confirm

Search icons

Cancel

Browse

3 20

Observably Sci$amp

1230

Project statisticsProject statistics Total countsTotal time Total comments First entryLast entrySessions

4 963281231

1441201201603042016

97

Project detailsMobile InteractionsMobile Interactions

Sessions SummarySessions Summary

RRT20

815

Count SummaryCount Summary

JUN 14MAY 14APR 14MAR 14FEB 14JAN 14

4

1

65

7

0

2

4

6

8

10

3

2014

Manage sessions

Settings ExportOverview

1230

App optionsDisplay hintsDisplay hints

SettingsSettings

Share anonymous data to improve the appShare anonymous data to improve the app

1230

Gather and manage observation data with ObservablyGather and manage observation data with Observably

Welcome to Observably

Project name

Project description what is the goal of your project

CreateCancel

Session[number]Session[number]

Default Session ID

Default export format txt

Data options

Default Discrete variable lines view

Create a new project

1230

Project detailsMobile InteractionsMobile Interactions

Mobile InteractionsMobile Interactions

Project description what is the goal of your project

SaveCancel

Session[number]Session[number]

Default Session ID

Default export format txt

Data options

Default continuous variables grid view

Project name

Manage sessions

Settings ExportOverview

1230

Project detailsMobile InteractionsMobile Interactions

Manage sessions

Settings ExportOverview

Export format txt

Export data

Data has been successfully exported as MobileInteractionstxt

to your download folder

Observably Sc i$amp

Settings

1230

BUTTONBUTTON

Permissions

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Up exlaborum incididunt quis nostrud exercitatn

COMPONENTS

Pickers

OKCANCEL

13

Friday

MAR

2014

MS W T F ST

30 31

1

16 17 19 20 21 2218

23 24 26 27 28 2925

139 10 12 14 1511

72 3 5 6 84

March 2014

OKCANCEL

PMAM

112

9

10

11

2

48

576

3

330 AM

Notifications

Incoming call

Rachel Ligson

IGNORE ANSWER

REPLYARCHIVE

Hey letrsquos catch up soon Do you want to grab lunch sometime this weekendLet me know when yoursquore free

409 PMHannah ChoHannah Cho

Do you know what I mean509 PMTina McBeanTina McBean

Heads up notification

Regular + Expanded notification

Index scroller

All

Patrick Keenan

Mary Johnson

Tina Santiago

Trevor Hansen

Amar Sagoo

Abbey Christensen

Ali Connors

Alex Nelson

Anthony Stevens

A

A

1230

Abcdefg

Abcdefghijklmno

Tabs

THE THIRDITEM TWONO ONE

THE THIRDITEM TWONO ONE

1230

THE THIRDITEM TWONO ONE

Page Title

1230

121 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

110 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

51 50

Input text for a single line field with a maximu

Single-Line Input Label

31 50

Input text for a single line field with a max

Single-Line Input Label

121 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

110 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

51 50

Input text for a single line field with a maximuInput text for a single line field with a maximu

Single-Line Input Label

31 50

Input text for a single line field with a maxInput text for a single line field with a max

Single-Line Input Label

Disabled text field

Input text

Username or Password is incorrect

Input text

Input tex

Hint text

Hint text

Hint text

Disabled text field

Input textInput text

Username or Password is incorrect

Input textInput text

Input texInput tex

Hint text

Hint text

Hint text

Text fields

Switches and sliders

60

Regular

Pressed

Disabled

60

Regular

Pressed

Disabled

Buttons

DISABLED

PRESSED

NORMAL

DISABLED

PRESSED

NORMAL

Flat Raised

DISABLED

PRESSED

NORMAL

DISABLED

PRESSED

NORMAL

Flat Raised

Toasts

This color applies to both light and dark theme

This item already has the label ldquotravelrdquo You can add a new label

ACTIONSingle-Line Snackbar

Menu

Arial 100

100

Calibri

Courier

Verdana

Arial

Chips

Trevor Hansen

email3emailcom

email2emailcom

primaryemailemailcomContact Name

Dialogs

Desktop

Without title With title

BUTTONBUTTON

PermissionsLorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Up exlaborum incididunt quis nostrud exercitatn

BUTTONBUTTON

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Ut enim ad minim ikad veniam quis nostrud exercitatn ullamco laboris nisi ut aliquip exlaborum incididunt

ACCEPTDECLINEMORE INFO

Permissions

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisinuli

Toolbar

11Roboto

Cards

Welcome BackItrsquos been a while have you read any new books latelyItrsquos been a while have you read any new books lately

YESNOPE

Kangaroo Valley Safari

Located two hours south of Sydney in the

Southern Highlands of New South Wales

LEARN MORESHARE

REVIEWFREE SAMPLE

By Alex Nelson

El Pooch

Pre-fab Homes

Favorite Road Trips

Best Airlines

Campbell

Groceries

almond milk

coconut water

cucumber

green apples

Yuna tickets on sale 624

May 24 2014

Clean desk

Keyboards

suggestion suggestion suggestion

123

a s d f g h j k l

z x c v b n m

q w e r t y u i o p1 2 3 4 5 6 7 8 9 0

suggestion suggestion suggestion

123

a s d f g h j k l

z x c v b n m

q w e r t y u i o p1 2 3 4 5 6 7 8 9 0

Bottom Sheet

Print this page

Copy

Upload

Share

MoreMail Message

Google+Gmail Hangout

Grid

Two lineSupport text

Two lineSupport text

Single line

Single line

Lists

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Three-line itemThree-line item

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Three-line itemThree-line item

Three-line itemThree-line item

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Three-line itemThree-line item

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Three-line itemThree-line item

Three-line itemThree-line item

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Line item unselectedLine item unselected

Line item selectedLine item selected

Line item selectedLine item selected

Data usageData usage

BluetoothBluetooth

Wi-FiWi-Fi

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Single-line itemSingle-line item

Single-line itemSingle-line item

Single-line itemSingle-line itemSingle-line itemSingle-line item

Single-line itemSingle-line item

Single-line itemSingle-line item

Introduction agrave lrsquoergonomie

Ergonomie et Design34

Cornelia Laros

Design Ergonomie Design Ergonomie

Identiteacute

Communication

Ambiance

Exemple un site institutionnel informatif avec une navigation simple et des exigences fortes

drsquoidentiteacuteExemple une application meacutetier destineacutee agrave une

population drsquoutilisateur connue

EfficaciteacuteFonctionnel

Outils

Service en ligne

Architecture de lrsquoinformation contenus bonnes pratiques

Analyse tache vs activiteacute prise en compte globaliseacutee des process

postes de travail eacutecosystegraveme existant hellip puis la conception

Image Usage freacutequent

Usage ponctuel

Votre eacutequipe Ergonome Directeur aristique Webdesigner UX Designer

Introduction agrave lrsquoergonomie

Design avant-tout35

Cornelia Laros

Introduction agrave lrsquoergonomie

Equilibreacute36

Cornelia Laros

Introduction agrave lrsquoergonomie

Ergonomie avant tout37

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

38

Cornelia Laros

text

Lrsquoergonomie sert agravehellip39

Cornelia Laros

1 ameacuteliorer les conditions de travail

2 faire gagner plus drsquoargent agrave lrsquoentreprise

3 ameacuteliorer lrsquoestheacutetique

4 comprendre comment ameacuteliorer un produit

text

Quelles affirmations sont vraies

40

Cornelia Laros

1 Lrsquoergonomie srsquoattache agrave comprendre le travail pour le transformer

2 Il est possible de concevoir une IHM qui fonctionne pour tout le monde en se basant sur des normes

3 Lrsquoutilisateur va se servir de votre produit de la faccedilon dont vous lrsquoavez imagineacute

4 Lrsquoutilisateur interpregravete une tacircche comme un problegraveme qursquoil doit reacutesoudre en faisant avec ses caracteacuteristiques et les moyens mis agrave sa disposition

text

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

41

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

text

D - A quoi sert un prototype

42

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

43

Cornelia Laros

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

44

Cornelia Laros

Utilisabiliteacute

Utiliteacute

Efficaciteacute Efficience

Satisfaction

Introduction agrave lrsquoergonomie

Pyramide des besoins MASLOW

45

Cornelia Laros

Introduction agrave lrsquoergonomie

Pyramide des besoins IHM46

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

47

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

48

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

49

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

50

Cornelia Laros

Introduction agrave lrsquoergonomie

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

51

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

Introduction agrave lrsquoergonomie

D - A quoi sert un prototype

52

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

53

Cornelia Laros

a Fiable

b Intuitif

c Fonctionnel

d Accessible

e Plaisant

f Porteur de sens

Introduction agrave lrsquoergonomie

F - Quel besoin ai-je oublieacute dans la question

preacuteceacutedente

54

Cornelia Laros

text

Patterns amp Dark patterns

55

Cornelia Laros

text

Criteres de Bastien et Scapin56

Cornelia Laros

Guidage

Charge de travail

Controcircle utilisateur explicite

Flexibiliteacute ( adaptabiliteacute)

Gestion des erreurs

Homogeacuteneacuteiteacute ( coheacuterence)

Signifiance des Codes et Deacutenominations

Compatibiliteacute ( familiariteacute)

Introduction agrave lrsquoergonomie

Guidage57

Cornelia Laros

Introduction agrave lrsquoergonomie

Charge de travail58

Cornelia Laros

Introduction agrave lrsquoergonomie

Controle explicite59

Cornelia Laros

Introduction agrave lrsquoergonomie

Controles explicites60

Cornelia Laros

Dar983595 983541983527t983545983589983590n

text

Adaptabiliteacute61

Cornelia Laros

text

Gestion des erreurs62

Cornelia Laros

text

Signifiance des codes et deacutenominations

63

Cornelia Laros

text

Homogeacuteneacuteiteacute - coheacuterence64

Cornelia Laros

text

Homogeacuteneacuteiteacute - Distinction65

Cornelia Laros

text

Compatibiliteacute66

Cornelia Laros

text

Compatibiliteacute67

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction68

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction69

Cornelia Laros

text

Gestalt Theorie70

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Gestalt Theorie71

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Dark patterns72

Cornelia Laros

Introduction agrave lrsquoergonomie

A vous de jouer

73

Cornelia Laros

Introduction agrave lrsquoergonomie

Outils de prototypages DIY74

Cornelia Laros

Low tech papier + crayons post-its cartes agrave jouer

Gratuit en ligne Invision app Moqups UXPin

Mac Sketch Balsamiq Mockups Axure

PC Axure Balsamiq

Mobile Prototyping on Paper

Ap983540983590en983530983555 983592983589 no983547983549983589983537le983543 983581h983586983543983589983588

Introduction agrave lrsquoergonomie

Test de perception DIY75

Cornelia Laros

La premiegravere impression qursquoun utilisateur se fait de votre IHM va influencer tous ses jugements ulteacuterieurs Crsquoest lrsquoeffet de halo

bull Un utilisateur qui a une premiegravere impression positive de votre appli passera plus facilement outre les bugs

bull Une premiegravere impression negative rendra lrsquoutilisateur plus critique vis agrave vis de deacutetails qui confirment son jugement

Cel983527 983538983580983590c983532e 983527983548983588si 983527983549983589983581 vo983543 983586983590983580ux 983591rsquoex983527983538983589983585s vo983543 983530983585t983542983589983546i983530n983543 983592rsquoem983528983527983548983581he 983530983545 983550983587s 983542e983585d983530983555-vo983547983543 983581l983535e983539983546s

Introduction agrave lrsquoergonomie

Test de perception DIY76

Cornelia Laros

Montrer votre prototype agrave quelqursquoun pendant 5 secondes

Demandez-lui

bull Ce qursquoil a vu

bull Ce qursquoil a compris de ce qursquoil a vu

bull Ce qui lrsquoa surpris ou marqueacute

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY77

Cornelia Laros

Les difficulteacutes de navigation se produisent souvent dans les niveaux les plus haut de votre structure de contenu Vous pouvez veacuterifier facilement si la classification logique pour vous lrsquoest aussi pour vos utilisateurs

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY78

Cornelia Laros

Lister trois (max) niveaux de profondeur de votre contenu structureacute Masquez ensuite les contenus de niveau plus bas Utilisez par exemple les groupements de lignes dans excel pour creacuteer des pliers-deacutepliers ou imprimer la liste sur une feuille que vous pliez pour masquer certaines parties

Demandez agrave un utilisateur de vous dire ougrave il penserait trouver un contenu bien preacutecis en preacutecisant qursquoil nrsquoy a pas de bonne reacuteponse

Notez srsquoil va chercher lagrave ougrave vous vous y attendiez ougrave il a heacutesiteacute et ce qursquoil a fini par choisir pour vous aider agrave rendre la navigation plus intuitive

Introduction agrave lrsquoergonomie

Test drsquoutilisabiliteacute DIY79

Cornelia Laros

A chaque nouvelle fonctionnaliteacute ajouteacutee demandez agrave quelqursquoun qui ne connait pas le projet de srsquoen servir Proposez lui une seule tacircche geacuteneacuterique agrave accomplir avec la fonctionnaliteacute

Exemple Tu veux prendre un rendez-vous avec un meacutedecin sur ce site montres-moi comment tu ferais en commentant agrave haute voix

Le plus important ici crsquoest de ne pas reacuteagir agrave ce qursquoil fait mais simplement le regarder faire sans lrsquoaider mecircme srsquoil est bloqueacute

Srsquoil 983540983586983588983589 de983543 983578983547983589s983545i983586983585s reacutepo983539983592983530z 983540983580983590 un983530 983577983548e983588t983534983587983539 o983547 d983535983545e983588 l983547983535 983577u983530 983550983587us 983536983547983535 983590eacutepo983539983592r983530983555 983578983548an983591 983534983537 983580ur983527 fi983539983535 983588rsquoil 983534983539983588983535s983545e Srsquoil 983530983543983546 v983542983580i983593983530n983545 983529l983587983577ueacute di983545983530983588 l983548i 983577983547983589 983550o983547s 983580983536983537ez 983542983530983550983587ir 983549983586983546r983589 983579o983541983534983589 et 983530983543983588983580ye983555 983592983530 c983587983538983541re983539983592r983530 983579983589 983578u983534 l983589 9835316ne

Introduction agrave lrsquoergonomie

Pas besoin de reacuteinventer la roue DIY

80

Cornelia Laros

Il existe des bonnes pratiques qui vous eacuteviteront de reacuteinventer la roue Utilisez des laquo design patterns raquo pour concevoir vos interfaces

Renseignez vous sur la Gestalt Theorie pour agencer vos pages

Utilisez les critegraveres de Bastien et Scapin pour trouver des deacutefauts eacutevidents avant de tester vous en tirerez des enseignements plus inteacuteressants

Ma983534s ccedila crsquoes983545 983541983586983548r u983539983530 983580u983546r983530 983559983587i983588

Introduction agrave lrsquoergonomie

Quizz time

81

Cornelia Laros

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

82

Cornelia Laros

1 c Fonctionnel

2 a Fiable

3 d Accessible

4 b Intuitif

5 e Plaisant

6 f Porteur de sens

text

F - Quel besoin ai-je oublieacute dans la question preacuteceacutedente

83

Cornelia Laros

Uti983536983534983588983580b983536e

Introduction agrave lrsquoergonomie

Tests DIY84

Cornelia Laros

Reacutedigez la proceacutedure pour tester un de vos projets drsquoIHM avec le test de votre choix perception arborescence ou utilisabiliteacute

Notez la question que vous vous posez et la question que vous allez poser

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

Introduction agrave lrsquoergonomie

Ergonomie de conception

25

Cornelia Laros

Ergonomie de correctionbull Analyse drsquoactiviteacute

bull Audit

bull Analyse drsquoeacutevegravenements critiques

bull Analyse de traces

bull Simulationhellip

bullEntretiens

bullPersona cartes drsquoexpeacuteriences

bullTri par cartes

bullPrototypage

bullBenchmarkhellip

Des meacutethodes de recueil de donneacutees avec utilisateurs finaux et de conception laquo experte raquo

Introduction agrave lrsquoergonomie

Pourquoi ces meacutethodes26

Cornelia Laros

bull Si jrsquoavais demandeacute aux utilisateurs ce qursquoils voulaient ils mrsquoauraient demandeacute un cheval plus rapide - Henri Ford

bull Un comportement laquo sur-appris raquo devient un automatisme inconscient que lrsquoutilisateur ne saura pas expliquer (ex passer les vitesses en conduisant)

bull Le cerveau humain est propice agrave la fabulation (imagination de causes) aux faux souvenirs (en toute bonne fois) les biais (deacutesirabiliteacute effet pygmalion influence socialehellip)

Observer

Introduction agrave lrsquoergonomie

Pourquoi ces meacutethodes27

Cornelia Laros

bull Une imagine est plus parlante que 10 000 mots

bull Permet drsquoeacutevaluer une ideacutee agrave moindre coucirct donc de se tromper souvent et drsquoapprendre plus vite pour valider une ideacutee ou lrsquoameacuteliorer

bull Permet de tester plein drsquoideacutees et de retenir la meilleure

hellip A condition de se focaliser sur un objectif et non sur lrsquoideacutee elle-mecircme

Modeacuteliser

Introduction agrave lrsquoergonomie

Lrsquoensemble permet drsquoeacuteviter ceci

28

Cornelia Laros

Introduction agrave lrsquoergonomie

Lrsquoensemble permet drsquoeacuteviter ceci

29

Cornelia Laros

Eli983538983534983585eacute en 983586983528983588983589r983549a983585t

Eli983538983534983585eacute en 983540983590983586t983587983545983584pa983539983546

Introduction agrave lrsquoergonomie

Prototyper pour vous crsquoesthellip30

Cornelia Laros

CONTRIBUTION AUX SPECIFICATIONS FONCTIONNELLES

Zoning basse fideacuteliteacute wireframe statique (sketch ou non) bull Rapide et peu couteux bull Illustratif statique pas drsquointeraction bull Non engageant sur le design bull Tregraves peu explicite sur le plan fonctionnel

Story-board cliquable bull Illustre la navigation bull Permet de se projeter dans lrsquointeraction bull Pose les bases du design et du fonctionnel

Prototype semi-dynamique bull Se veut complet (ou quasi) sur le plan de la

navigation de lrsquointeraction et des cas drsquoutilisation bull Doit permettre de simuler fidegravelement le

fonctionnement drsquoune application bull Est une speacutecification fonctionnelle en soi

Pha983543983530 983592983589 ca983591983590983527g983589 AM983623983607

Pha983543983530 983592983589 co983539983581983530p983545983535o983585 f983586983539983581t983535o983539983585983530l983536983589

Tes983545983588 983547t983535983536i983588983527t983589u983542983588 ap983540983537983534s 983538983587983529il983530983543hellip

Introduction agrave lrsquoergonomie

Prototype basse definition31

Cornelia Laros

Introduction agrave lrsquoergonomie

Prototyper cliquable32

Cornelia Laros

Introduction agrave lrsquoergonomie

Prototyper semi-dynamique33

Cornelia Laros

Page Title

1230

Mobile interactions

Observably Sc i$amp

About

Project overiew

Manage sessions

Manage variables

Settings

Start observing

1230 1230

OverviewObserve

Observe mobile interactions in the field to assess dominant hand for holding and interacting with smartphones

10042016Mobile interactionsMobile interactions

Welcome to Observably Gather and manage observation dataGather and manage observation data

My projects

1230

Tags separate with comas

Variable value

Create

Add observablesAdd all observables you want to track for this project You can come back and edit them laterAdd all observables you want to track for this project You can come back and edit them later

Thanks for the hint

Manage variablesMobile InteractionsMobile Interactions

1230

Tags separate with comas

Variable value

Create

Left hand Right thumbLRTLRT

Manage variablesMobile InteractionsMobile Interactions

Irsquom done Start recording

Save changesCancel

Observable Tags separate with coma

Tags separate with comas

3 20

LRILRI

Observable label

Did you knowTap on the icon to customize it Use icons from our library or from your gallery to make variables pop out when observing

Tap on the icon to customize it Use icons from our library or from your gallery to make variables pop out when observing

Thanks for the hint

Left hand Right thumbLRTLRT

Irsquom done Start recording

Manage variablesMobile InteractionsMobile Interactions

Left hand x Right thumb x

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Did you knowIf you make a mistake you can undo your action by tapping on the icon of the taskIf you make a mistake you can undo your action by tapping on the icon of the task

Thanks for the hint

Session 1

Discrete mode New Session

Mobile InteractionsMobile Interactions

1230

Record vocal comment

LRILRILRILRILRILRI

Did you knowYou can record occurences durations and comments by chosing the record format in the drop-down above

You can record occurences durations and comments by chosing the record format in the drop-down above

Thanks for the hint

Discrete mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

Left hand Right thumbLRT

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Did you knowIn list view you can slipe left and right to increment or correct your countIn list view you can slipe left and right to increment or correct your count

Thanks for the hint

Continuous mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

LRILRILRILRILRI

Did you knowIf you make a mistake you can undo your action by tapping on the icon of the taskIf you make a mistake you can undo your action by tapping on the icon of the task

Thanks for the hint

Continuous mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

Tags separate with comas

Comment

Add

Did you know The timestamp of vocal comments is the start time to accurately mark events that triggered your comment

The timestamp of vocal comments is the start time to accurately mark events that triggered your comment

Thanks for the hint

Manage observables

Comments mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Stop recording vocal comment

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Your observationsManage and cleanup sessions before exporting dataManage and cleanup sessions before exporting data

Session ManagementMobile InteractionsMobile Interactions

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

LRT

LRI

RLI

RLT

RRT20

20

8

35

15

Count SummaryCount Summary

RLT

RRT20

815

Time SummaryTime Summary

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

Left hand Right thumbLRTLRT

+1+1

10042016 124627

Left hand Right thumbLRTLRT

2rsquorsquo2rsquorsquo

10042016 124627 - 10042016 124629

Content of my comment boxTag1 Tag2

10042016 124644

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

LRTLRT+1+1

10042016 124627

Save changes

Observable Tags separate with coma

Tags separate with comas

Left hand x Right thumb x

AboutAbout

1230

Observable science provides tools for field research and scientific observation It is tailored to the needs of ethnography human factors psychology usability and games user research

Observable science provides tools for field research and scientific observation It is tailored to the needs of ethnography human factors psychology usability and games user research

Observablyscience

Development by Morgane RadelDesign by Cornelia LarosDevelopment by Morgane RadelDesign by Cornelia Laros

Credits

Support (us)Show your love Rate the App

Make a donation

Contact us

Visit our website

Add session tags to all observations

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

Save changes

Session Tags separate with coma

Tags separate with comas

Metro x Toulouse x

Manage variablesMobile InteractionsMobile Interactions

1230

Left hand Right thumbLRTLRT

Confirm

Search icons

Cancel

Browse

3 20

Observably Sci$amp

1230

Project statisticsProject statistics Total countsTotal time Total comments First entryLast entrySessions

4 963281231

1441201201603042016

97

Project detailsMobile InteractionsMobile Interactions

Sessions SummarySessions Summary

RRT20

815

Count SummaryCount Summary

JUN 14MAY 14APR 14MAR 14FEB 14JAN 14

4

1

65

7

0

2

4

6

8

10

3

2014

Manage sessions

Settings ExportOverview

1230

App optionsDisplay hintsDisplay hints

SettingsSettings

Share anonymous data to improve the appShare anonymous data to improve the app

1230

Gather and manage observation data with ObservablyGather and manage observation data with Observably

Welcome to Observably

Project name

Project description what is the goal of your project

CreateCancel

Session[number]Session[number]

Default Session ID

Default export format txt

Data options

Default Discrete variable lines view

Create a new project

1230

Project detailsMobile InteractionsMobile Interactions

Mobile InteractionsMobile Interactions

Project description what is the goal of your project

SaveCancel

Session[number]Session[number]

Default Session ID

Default export format txt

Data options

Default continuous variables grid view

Project name

Manage sessions

Settings ExportOverview

1230

Project detailsMobile InteractionsMobile Interactions

Manage sessions

Settings ExportOverview

Export format txt

Export data

Data has been successfully exported as MobileInteractionstxt

to your download folder

Observably Sc i$amp

Settings

1230

BUTTONBUTTON

Permissions

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Up exlaborum incididunt quis nostrud exercitatn

COMPONENTS

Pickers

OKCANCEL

13

Friday

MAR

2014

MS W T F ST

30 31

1

16 17 19 20 21 2218

23 24 26 27 28 2925

139 10 12 14 1511

72 3 5 6 84

March 2014

OKCANCEL

PMAM

112

9

10

11

2

48

576

3

330 AM

Notifications

Incoming call

Rachel Ligson

IGNORE ANSWER

REPLYARCHIVE

Hey letrsquos catch up soon Do you want to grab lunch sometime this weekendLet me know when yoursquore free

409 PMHannah ChoHannah Cho

Do you know what I mean509 PMTina McBeanTina McBean

Heads up notification

Regular + Expanded notification

Index scroller

All

Patrick Keenan

Mary Johnson

Tina Santiago

Trevor Hansen

Amar Sagoo

Abbey Christensen

Ali Connors

Alex Nelson

Anthony Stevens

A

A

1230

Abcdefg

Abcdefghijklmno

Tabs

THE THIRDITEM TWONO ONE

THE THIRDITEM TWONO ONE

1230

THE THIRDITEM TWONO ONE

Page Title

1230

121 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

110 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

51 50

Input text for a single line field with a maximu

Single-Line Input Label

31 50

Input text for a single line field with a max

Single-Line Input Label

121 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

110 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

51 50

Input text for a single line field with a maximuInput text for a single line field with a maximu

Single-Line Input Label

31 50

Input text for a single line field with a maxInput text for a single line field with a max

Single-Line Input Label

Disabled text field

Input text

Username or Password is incorrect

Input text

Input tex

Hint text

Hint text

Hint text

Disabled text field

Input textInput text

Username or Password is incorrect

Input textInput text

Input texInput tex

Hint text

Hint text

Hint text

Text fields

Switches and sliders

60

Regular

Pressed

Disabled

60

Regular

Pressed

Disabled

Buttons

DISABLED

PRESSED

NORMAL

DISABLED

PRESSED

NORMAL

Flat Raised

DISABLED

PRESSED

NORMAL

DISABLED

PRESSED

NORMAL

Flat Raised

Toasts

This color applies to both light and dark theme

This item already has the label ldquotravelrdquo You can add a new label

ACTIONSingle-Line Snackbar

Menu

Arial 100

100

Calibri

Courier

Verdana

Arial

Chips

Trevor Hansen

email3emailcom

email2emailcom

primaryemailemailcomContact Name

Dialogs

Desktop

Without title With title

BUTTONBUTTON

PermissionsLorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Up exlaborum incididunt quis nostrud exercitatn

BUTTONBUTTON

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Ut enim ad minim ikad veniam quis nostrud exercitatn ullamco laboris nisi ut aliquip exlaborum incididunt

ACCEPTDECLINEMORE INFO

Permissions

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisinuli

Toolbar

11Roboto

Cards

Welcome BackItrsquos been a while have you read any new books latelyItrsquos been a while have you read any new books lately

YESNOPE

Kangaroo Valley Safari

Located two hours south of Sydney in the

Southern Highlands of New South Wales

LEARN MORESHARE

REVIEWFREE SAMPLE

By Alex Nelson

El Pooch

Pre-fab Homes

Favorite Road Trips

Best Airlines

Campbell

Groceries

almond milk

coconut water

cucumber

green apples

Yuna tickets on sale 624

May 24 2014

Clean desk

Keyboards

suggestion suggestion suggestion

123

a s d f g h j k l

z x c v b n m

q w e r t y u i o p1 2 3 4 5 6 7 8 9 0

suggestion suggestion suggestion

123

a s d f g h j k l

z x c v b n m

q w e r t y u i o p1 2 3 4 5 6 7 8 9 0

Bottom Sheet

Print this page

Copy

Upload

Share

MoreMail Message

Google+Gmail Hangout

Grid

Two lineSupport text

Two lineSupport text

Single line

Single line

Lists

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Three-line itemThree-line item

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Three-line itemThree-line item

Three-line itemThree-line item

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Three-line itemThree-line item

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Three-line itemThree-line item

Three-line itemThree-line item

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Line item unselectedLine item unselected

Line item selectedLine item selected

Line item selectedLine item selected

Data usageData usage

BluetoothBluetooth

Wi-FiWi-Fi

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Single-line itemSingle-line item

Single-line itemSingle-line item

Single-line itemSingle-line itemSingle-line itemSingle-line item

Single-line itemSingle-line item

Single-line itemSingle-line item

Introduction agrave lrsquoergonomie

Ergonomie et Design34

Cornelia Laros

Design Ergonomie Design Ergonomie

Identiteacute

Communication

Ambiance

Exemple un site institutionnel informatif avec une navigation simple et des exigences fortes

drsquoidentiteacuteExemple une application meacutetier destineacutee agrave une

population drsquoutilisateur connue

EfficaciteacuteFonctionnel

Outils

Service en ligne

Architecture de lrsquoinformation contenus bonnes pratiques

Analyse tache vs activiteacute prise en compte globaliseacutee des process

postes de travail eacutecosystegraveme existant hellip puis la conception

Image Usage freacutequent

Usage ponctuel

Votre eacutequipe Ergonome Directeur aristique Webdesigner UX Designer

Introduction agrave lrsquoergonomie

Design avant-tout35

Cornelia Laros

Introduction agrave lrsquoergonomie

Equilibreacute36

Cornelia Laros

Introduction agrave lrsquoergonomie

Ergonomie avant tout37

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

38

Cornelia Laros

text

Lrsquoergonomie sert agravehellip39

Cornelia Laros

1 ameacuteliorer les conditions de travail

2 faire gagner plus drsquoargent agrave lrsquoentreprise

3 ameacuteliorer lrsquoestheacutetique

4 comprendre comment ameacuteliorer un produit

text

Quelles affirmations sont vraies

40

Cornelia Laros

1 Lrsquoergonomie srsquoattache agrave comprendre le travail pour le transformer

2 Il est possible de concevoir une IHM qui fonctionne pour tout le monde en se basant sur des normes

3 Lrsquoutilisateur va se servir de votre produit de la faccedilon dont vous lrsquoavez imagineacute

4 Lrsquoutilisateur interpregravete une tacircche comme un problegraveme qursquoil doit reacutesoudre en faisant avec ses caracteacuteristiques et les moyens mis agrave sa disposition

text

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

41

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

text

D - A quoi sert un prototype

42

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

43

Cornelia Laros

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

44

Cornelia Laros

Utilisabiliteacute

Utiliteacute

Efficaciteacute Efficience

Satisfaction

Introduction agrave lrsquoergonomie

Pyramide des besoins MASLOW

45

Cornelia Laros

Introduction agrave lrsquoergonomie

Pyramide des besoins IHM46

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

47

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

48

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

49

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

50

Cornelia Laros

Introduction agrave lrsquoergonomie

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

51

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

Introduction agrave lrsquoergonomie

D - A quoi sert un prototype

52

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

53

Cornelia Laros

a Fiable

b Intuitif

c Fonctionnel

d Accessible

e Plaisant

f Porteur de sens

Introduction agrave lrsquoergonomie

F - Quel besoin ai-je oublieacute dans la question

preacuteceacutedente

54

Cornelia Laros

text

Patterns amp Dark patterns

55

Cornelia Laros

text

Criteres de Bastien et Scapin56

Cornelia Laros

Guidage

Charge de travail

Controcircle utilisateur explicite

Flexibiliteacute ( adaptabiliteacute)

Gestion des erreurs

Homogeacuteneacuteiteacute ( coheacuterence)

Signifiance des Codes et Deacutenominations

Compatibiliteacute ( familiariteacute)

Introduction agrave lrsquoergonomie

Guidage57

Cornelia Laros

Introduction agrave lrsquoergonomie

Charge de travail58

Cornelia Laros

Introduction agrave lrsquoergonomie

Controle explicite59

Cornelia Laros

Introduction agrave lrsquoergonomie

Controles explicites60

Cornelia Laros

Dar983595 983541983527t983545983589983590n

text

Adaptabiliteacute61

Cornelia Laros

text

Gestion des erreurs62

Cornelia Laros

text

Signifiance des codes et deacutenominations

63

Cornelia Laros

text

Homogeacuteneacuteiteacute - coheacuterence64

Cornelia Laros

text

Homogeacuteneacuteiteacute - Distinction65

Cornelia Laros

text

Compatibiliteacute66

Cornelia Laros

text

Compatibiliteacute67

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction68

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction69

Cornelia Laros

text

Gestalt Theorie70

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Gestalt Theorie71

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Dark patterns72

Cornelia Laros

Introduction agrave lrsquoergonomie

A vous de jouer

73

Cornelia Laros

Introduction agrave lrsquoergonomie

Outils de prototypages DIY74

Cornelia Laros

Low tech papier + crayons post-its cartes agrave jouer

Gratuit en ligne Invision app Moqups UXPin

Mac Sketch Balsamiq Mockups Axure

PC Axure Balsamiq

Mobile Prototyping on Paper

Ap983540983590en983530983555 983592983589 no983547983549983589983537le983543 983581h983586983543983589983588

Introduction agrave lrsquoergonomie

Test de perception DIY75

Cornelia Laros

La premiegravere impression qursquoun utilisateur se fait de votre IHM va influencer tous ses jugements ulteacuterieurs Crsquoest lrsquoeffet de halo

bull Un utilisateur qui a une premiegravere impression positive de votre appli passera plus facilement outre les bugs

bull Une premiegravere impression negative rendra lrsquoutilisateur plus critique vis agrave vis de deacutetails qui confirment son jugement

Cel983527 983538983580983590c983532e 983527983548983588si 983527983549983589983581 vo983543 983586983590983580ux 983591rsquoex983527983538983589983585s vo983543 983530983585t983542983589983546i983530n983543 983592rsquoem983528983527983548983581he 983530983545 983550983587s 983542e983585d983530983555-vo983547983543 983581l983535e983539983546s

Introduction agrave lrsquoergonomie

Test de perception DIY76

Cornelia Laros

Montrer votre prototype agrave quelqursquoun pendant 5 secondes

Demandez-lui

bull Ce qursquoil a vu

bull Ce qursquoil a compris de ce qursquoil a vu

bull Ce qui lrsquoa surpris ou marqueacute

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY77

Cornelia Laros

Les difficulteacutes de navigation se produisent souvent dans les niveaux les plus haut de votre structure de contenu Vous pouvez veacuterifier facilement si la classification logique pour vous lrsquoest aussi pour vos utilisateurs

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY78

Cornelia Laros

Lister trois (max) niveaux de profondeur de votre contenu structureacute Masquez ensuite les contenus de niveau plus bas Utilisez par exemple les groupements de lignes dans excel pour creacuteer des pliers-deacutepliers ou imprimer la liste sur une feuille que vous pliez pour masquer certaines parties

Demandez agrave un utilisateur de vous dire ougrave il penserait trouver un contenu bien preacutecis en preacutecisant qursquoil nrsquoy a pas de bonne reacuteponse

Notez srsquoil va chercher lagrave ougrave vous vous y attendiez ougrave il a heacutesiteacute et ce qursquoil a fini par choisir pour vous aider agrave rendre la navigation plus intuitive

Introduction agrave lrsquoergonomie

Test drsquoutilisabiliteacute DIY79

Cornelia Laros

A chaque nouvelle fonctionnaliteacute ajouteacutee demandez agrave quelqursquoun qui ne connait pas le projet de srsquoen servir Proposez lui une seule tacircche geacuteneacuterique agrave accomplir avec la fonctionnaliteacute

Exemple Tu veux prendre un rendez-vous avec un meacutedecin sur ce site montres-moi comment tu ferais en commentant agrave haute voix

Le plus important ici crsquoest de ne pas reacuteagir agrave ce qursquoil fait mais simplement le regarder faire sans lrsquoaider mecircme srsquoil est bloqueacute

Srsquoil 983540983586983588983589 de983543 983578983547983589s983545i983586983585s reacutepo983539983592983530z 983540983580983590 un983530 983577983548e983588t983534983587983539 o983547 d983535983545e983588 l983547983535 983577u983530 983550983587us 983536983547983535 983590eacutepo983539983592r983530983555 983578983548an983591 983534983537 983580ur983527 fi983539983535 983588rsquoil 983534983539983588983535s983545e Srsquoil 983530983543983546 v983542983580i983593983530n983545 983529l983587983577ueacute di983545983530983588 l983548i 983577983547983589 983550o983547s 983580983536983537ez 983542983530983550983587ir 983549983586983546r983589 983579o983541983534983589 et 983530983543983588983580ye983555 983592983530 c983587983538983541re983539983592r983530 983579983589 983578u983534 l983589 9835316ne

Introduction agrave lrsquoergonomie

Pas besoin de reacuteinventer la roue DIY

80

Cornelia Laros

Il existe des bonnes pratiques qui vous eacuteviteront de reacuteinventer la roue Utilisez des laquo design patterns raquo pour concevoir vos interfaces

Renseignez vous sur la Gestalt Theorie pour agencer vos pages

Utilisez les critegraveres de Bastien et Scapin pour trouver des deacutefauts eacutevidents avant de tester vous en tirerez des enseignements plus inteacuteressants

Ma983534s ccedila crsquoes983545 983541983586983548r u983539983530 983580u983546r983530 983559983587i983588

Introduction agrave lrsquoergonomie

Quizz time

81

Cornelia Laros

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

82

Cornelia Laros

1 c Fonctionnel

2 a Fiable

3 d Accessible

4 b Intuitif

5 e Plaisant

6 f Porteur de sens

text

F - Quel besoin ai-je oublieacute dans la question preacuteceacutedente

83

Cornelia Laros

Uti983536983534983588983580b983536e

Introduction agrave lrsquoergonomie

Tests DIY84

Cornelia Laros

Reacutedigez la proceacutedure pour tester un de vos projets drsquoIHM avec le test de votre choix perception arborescence ou utilisabiliteacute

Notez la question que vous vous posez et la question que vous allez poser

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

Introduction agrave lrsquoergonomie

Pourquoi ces meacutethodes26

Cornelia Laros

bull Si jrsquoavais demandeacute aux utilisateurs ce qursquoils voulaient ils mrsquoauraient demandeacute un cheval plus rapide - Henri Ford

bull Un comportement laquo sur-appris raquo devient un automatisme inconscient que lrsquoutilisateur ne saura pas expliquer (ex passer les vitesses en conduisant)

bull Le cerveau humain est propice agrave la fabulation (imagination de causes) aux faux souvenirs (en toute bonne fois) les biais (deacutesirabiliteacute effet pygmalion influence socialehellip)

Observer

Introduction agrave lrsquoergonomie

Pourquoi ces meacutethodes27

Cornelia Laros

bull Une imagine est plus parlante que 10 000 mots

bull Permet drsquoeacutevaluer une ideacutee agrave moindre coucirct donc de se tromper souvent et drsquoapprendre plus vite pour valider une ideacutee ou lrsquoameacuteliorer

bull Permet de tester plein drsquoideacutees et de retenir la meilleure

hellip A condition de se focaliser sur un objectif et non sur lrsquoideacutee elle-mecircme

Modeacuteliser

Introduction agrave lrsquoergonomie

Lrsquoensemble permet drsquoeacuteviter ceci

28

Cornelia Laros

Introduction agrave lrsquoergonomie

Lrsquoensemble permet drsquoeacuteviter ceci

29

Cornelia Laros

Eli983538983534983585eacute en 983586983528983588983589r983549a983585t

Eli983538983534983585eacute en 983540983590983586t983587983545983584pa983539983546

Introduction agrave lrsquoergonomie

Prototyper pour vous crsquoesthellip30

Cornelia Laros

CONTRIBUTION AUX SPECIFICATIONS FONCTIONNELLES

Zoning basse fideacuteliteacute wireframe statique (sketch ou non) bull Rapide et peu couteux bull Illustratif statique pas drsquointeraction bull Non engageant sur le design bull Tregraves peu explicite sur le plan fonctionnel

Story-board cliquable bull Illustre la navigation bull Permet de se projeter dans lrsquointeraction bull Pose les bases du design et du fonctionnel

Prototype semi-dynamique bull Se veut complet (ou quasi) sur le plan de la

navigation de lrsquointeraction et des cas drsquoutilisation bull Doit permettre de simuler fidegravelement le

fonctionnement drsquoune application bull Est une speacutecification fonctionnelle en soi

Pha983543983530 983592983589 ca983591983590983527g983589 AM983623983607

Pha983543983530 983592983589 co983539983581983530p983545983535o983585 f983586983539983581t983535o983539983585983530l983536983589

Tes983545983588 983547t983535983536i983588983527t983589u983542983588 ap983540983537983534s 983538983587983529il983530983543hellip

Introduction agrave lrsquoergonomie

Prototype basse definition31

Cornelia Laros

Introduction agrave lrsquoergonomie

Prototyper cliquable32

Cornelia Laros

Introduction agrave lrsquoergonomie

Prototyper semi-dynamique33

Cornelia Laros

Page Title

1230

Mobile interactions

Observably Sc i$amp

About

Project overiew

Manage sessions

Manage variables

Settings

Start observing

1230 1230

OverviewObserve

Observe mobile interactions in the field to assess dominant hand for holding and interacting with smartphones

10042016Mobile interactionsMobile interactions

Welcome to Observably Gather and manage observation dataGather and manage observation data

My projects

1230

Tags separate with comas

Variable value

Create

Add observablesAdd all observables you want to track for this project You can come back and edit them laterAdd all observables you want to track for this project You can come back and edit them later

Thanks for the hint

Manage variablesMobile InteractionsMobile Interactions

1230

Tags separate with comas

Variable value

Create

Left hand Right thumbLRTLRT

Manage variablesMobile InteractionsMobile Interactions

Irsquom done Start recording

Save changesCancel

Observable Tags separate with coma

Tags separate with comas

3 20

LRILRI

Observable label

Did you knowTap on the icon to customize it Use icons from our library or from your gallery to make variables pop out when observing

Tap on the icon to customize it Use icons from our library or from your gallery to make variables pop out when observing

Thanks for the hint

Left hand Right thumbLRTLRT

Irsquom done Start recording

Manage variablesMobile InteractionsMobile Interactions

Left hand x Right thumb x

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Did you knowIf you make a mistake you can undo your action by tapping on the icon of the taskIf you make a mistake you can undo your action by tapping on the icon of the task

Thanks for the hint

Session 1

Discrete mode New Session

Mobile InteractionsMobile Interactions

1230

Record vocal comment

LRILRILRILRILRILRI

Did you knowYou can record occurences durations and comments by chosing the record format in the drop-down above

You can record occurences durations and comments by chosing the record format in the drop-down above

Thanks for the hint

Discrete mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

Left hand Right thumbLRT

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Did you knowIn list view you can slipe left and right to increment or correct your countIn list view you can slipe left and right to increment or correct your count

Thanks for the hint

Continuous mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

LRILRILRILRILRI

Did you knowIf you make a mistake you can undo your action by tapping on the icon of the taskIf you make a mistake you can undo your action by tapping on the icon of the task

Thanks for the hint

Continuous mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

Tags separate with comas

Comment

Add

Did you know The timestamp of vocal comments is the start time to accurately mark events that triggered your comment

The timestamp of vocal comments is the start time to accurately mark events that triggered your comment

Thanks for the hint

Manage observables

Comments mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Stop recording vocal comment

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Your observationsManage and cleanup sessions before exporting dataManage and cleanup sessions before exporting data

Session ManagementMobile InteractionsMobile Interactions

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

LRT

LRI

RLI

RLT

RRT20

20

8

35

15

Count SummaryCount Summary

RLT

RRT20

815

Time SummaryTime Summary

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

Left hand Right thumbLRTLRT

+1+1

10042016 124627

Left hand Right thumbLRTLRT

2rsquorsquo2rsquorsquo

10042016 124627 - 10042016 124629

Content of my comment boxTag1 Tag2

10042016 124644

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

LRTLRT+1+1

10042016 124627

Save changes

Observable Tags separate with coma

Tags separate with comas

Left hand x Right thumb x

AboutAbout

1230

Observable science provides tools for field research and scientific observation It is tailored to the needs of ethnography human factors psychology usability and games user research

Observable science provides tools for field research and scientific observation It is tailored to the needs of ethnography human factors psychology usability and games user research

Observablyscience

Development by Morgane RadelDesign by Cornelia LarosDevelopment by Morgane RadelDesign by Cornelia Laros

Credits

Support (us)Show your love Rate the App

Make a donation

Contact us

Visit our website

Add session tags to all observations

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

Save changes

Session Tags separate with coma

Tags separate with comas

Metro x Toulouse x

Manage variablesMobile InteractionsMobile Interactions

1230

Left hand Right thumbLRTLRT

Confirm

Search icons

Cancel

Browse

3 20

Observably Sci$amp

1230

Project statisticsProject statistics Total countsTotal time Total comments First entryLast entrySessions

4 963281231

1441201201603042016

97

Project detailsMobile InteractionsMobile Interactions

Sessions SummarySessions Summary

RRT20

815

Count SummaryCount Summary

JUN 14MAY 14APR 14MAR 14FEB 14JAN 14

4

1

65

7

0

2

4

6

8

10

3

2014

Manage sessions

Settings ExportOverview

1230

App optionsDisplay hintsDisplay hints

SettingsSettings

Share anonymous data to improve the appShare anonymous data to improve the app

1230

Gather and manage observation data with ObservablyGather and manage observation data with Observably

Welcome to Observably

Project name

Project description what is the goal of your project

CreateCancel

Session[number]Session[number]

Default Session ID

Default export format txt

Data options

Default Discrete variable lines view

Create a new project

1230

Project detailsMobile InteractionsMobile Interactions

Mobile InteractionsMobile Interactions

Project description what is the goal of your project

SaveCancel

Session[number]Session[number]

Default Session ID

Default export format txt

Data options

Default continuous variables grid view

Project name

Manage sessions

Settings ExportOverview

1230

Project detailsMobile InteractionsMobile Interactions

Manage sessions

Settings ExportOverview

Export format txt

Export data

Data has been successfully exported as MobileInteractionstxt

to your download folder

Observably Sc i$amp

Settings

1230

BUTTONBUTTON

Permissions

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Up exlaborum incididunt quis nostrud exercitatn

COMPONENTS

Pickers

OKCANCEL

13

Friday

MAR

2014

MS W T F ST

30 31

1

16 17 19 20 21 2218

23 24 26 27 28 2925

139 10 12 14 1511

72 3 5 6 84

March 2014

OKCANCEL

PMAM

112

9

10

11

2

48

576

3

330 AM

Notifications

Incoming call

Rachel Ligson

IGNORE ANSWER

REPLYARCHIVE

Hey letrsquos catch up soon Do you want to grab lunch sometime this weekendLet me know when yoursquore free

409 PMHannah ChoHannah Cho

Do you know what I mean509 PMTina McBeanTina McBean

Heads up notification

Regular + Expanded notification

Index scroller

All

Patrick Keenan

Mary Johnson

Tina Santiago

Trevor Hansen

Amar Sagoo

Abbey Christensen

Ali Connors

Alex Nelson

Anthony Stevens

A

A

1230

Abcdefg

Abcdefghijklmno

Tabs

THE THIRDITEM TWONO ONE

THE THIRDITEM TWONO ONE

1230

THE THIRDITEM TWONO ONE

Page Title

1230

121 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

110 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

51 50

Input text for a single line field with a maximu

Single-Line Input Label

31 50

Input text for a single line field with a max

Single-Line Input Label

121 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

110 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

51 50

Input text for a single line field with a maximuInput text for a single line field with a maximu

Single-Line Input Label

31 50

Input text for a single line field with a maxInput text for a single line field with a max

Single-Line Input Label

Disabled text field

Input text

Username or Password is incorrect

Input text

Input tex

Hint text

Hint text

Hint text

Disabled text field

Input textInput text

Username or Password is incorrect

Input textInput text

Input texInput tex

Hint text

Hint text

Hint text

Text fields

Switches and sliders

60

Regular

Pressed

Disabled

60

Regular

Pressed

Disabled

Buttons

DISABLED

PRESSED

NORMAL

DISABLED

PRESSED

NORMAL

Flat Raised

DISABLED

PRESSED

NORMAL

DISABLED

PRESSED

NORMAL

Flat Raised

Toasts

This color applies to both light and dark theme

This item already has the label ldquotravelrdquo You can add a new label

ACTIONSingle-Line Snackbar

Menu

Arial 100

100

Calibri

Courier

Verdana

Arial

Chips

Trevor Hansen

email3emailcom

email2emailcom

primaryemailemailcomContact Name

Dialogs

Desktop

Without title With title

BUTTONBUTTON

PermissionsLorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Up exlaborum incididunt quis nostrud exercitatn

BUTTONBUTTON

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Ut enim ad minim ikad veniam quis nostrud exercitatn ullamco laboris nisi ut aliquip exlaborum incididunt

ACCEPTDECLINEMORE INFO

Permissions

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisinuli

Toolbar

11Roboto

Cards

Welcome BackItrsquos been a while have you read any new books latelyItrsquos been a while have you read any new books lately

YESNOPE

Kangaroo Valley Safari

Located two hours south of Sydney in the

Southern Highlands of New South Wales

LEARN MORESHARE

REVIEWFREE SAMPLE

By Alex Nelson

El Pooch

Pre-fab Homes

Favorite Road Trips

Best Airlines

Campbell

Groceries

almond milk

coconut water

cucumber

green apples

Yuna tickets on sale 624

May 24 2014

Clean desk

Keyboards

suggestion suggestion suggestion

123

a s d f g h j k l

z x c v b n m

q w e r t y u i o p1 2 3 4 5 6 7 8 9 0

suggestion suggestion suggestion

123

a s d f g h j k l

z x c v b n m

q w e r t y u i o p1 2 3 4 5 6 7 8 9 0

Bottom Sheet

Print this page

Copy

Upload

Share

MoreMail Message

Google+Gmail Hangout

Grid

Two lineSupport text

Two lineSupport text

Single line

Single line

Lists

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Three-line itemThree-line item

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Three-line itemThree-line item

Three-line itemThree-line item

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Three-line itemThree-line item

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Three-line itemThree-line item

Three-line itemThree-line item

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Line item unselectedLine item unselected

Line item selectedLine item selected

Line item selectedLine item selected

Data usageData usage

BluetoothBluetooth

Wi-FiWi-Fi

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Single-line itemSingle-line item

Single-line itemSingle-line item

Single-line itemSingle-line itemSingle-line itemSingle-line item

Single-line itemSingle-line item

Single-line itemSingle-line item

Introduction agrave lrsquoergonomie

Ergonomie et Design34

Cornelia Laros

Design Ergonomie Design Ergonomie

Identiteacute

Communication

Ambiance

Exemple un site institutionnel informatif avec une navigation simple et des exigences fortes

drsquoidentiteacuteExemple une application meacutetier destineacutee agrave une

population drsquoutilisateur connue

EfficaciteacuteFonctionnel

Outils

Service en ligne

Architecture de lrsquoinformation contenus bonnes pratiques

Analyse tache vs activiteacute prise en compte globaliseacutee des process

postes de travail eacutecosystegraveme existant hellip puis la conception

Image Usage freacutequent

Usage ponctuel

Votre eacutequipe Ergonome Directeur aristique Webdesigner UX Designer

Introduction agrave lrsquoergonomie

Design avant-tout35

Cornelia Laros

Introduction agrave lrsquoergonomie

Equilibreacute36

Cornelia Laros

Introduction agrave lrsquoergonomie

Ergonomie avant tout37

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

38

Cornelia Laros

text

Lrsquoergonomie sert agravehellip39

Cornelia Laros

1 ameacuteliorer les conditions de travail

2 faire gagner plus drsquoargent agrave lrsquoentreprise

3 ameacuteliorer lrsquoestheacutetique

4 comprendre comment ameacuteliorer un produit

text

Quelles affirmations sont vraies

40

Cornelia Laros

1 Lrsquoergonomie srsquoattache agrave comprendre le travail pour le transformer

2 Il est possible de concevoir une IHM qui fonctionne pour tout le monde en se basant sur des normes

3 Lrsquoutilisateur va se servir de votre produit de la faccedilon dont vous lrsquoavez imagineacute

4 Lrsquoutilisateur interpregravete une tacircche comme un problegraveme qursquoil doit reacutesoudre en faisant avec ses caracteacuteristiques et les moyens mis agrave sa disposition

text

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

41

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

text

D - A quoi sert un prototype

42

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

43

Cornelia Laros

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

44

Cornelia Laros

Utilisabiliteacute

Utiliteacute

Efficaciteacute Efficience

Satisfaction

Introduction agrave lrsquoergonomie

Pyramide des besoins MASLOW

45

Cornelia Laros

Introduction agrave lrsquoergonomie

Pyramide des besoins IHM46

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

47

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

48

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

49

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

50

Cornelia Laros

Introduction agrave lrsquoergonomie

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

51

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

Introduction agrave lrsquoergonomie

D - A quoi sert un prototype

52

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

53

Cornelia Laros

a Fiable

b Intuitif

c Fonctionnel

d Accessible

e Plaisant

f Porteur de sens

Introduction agrave lrsquoergonomie

F - Quel besoin ai-je oublieacute dans la question

preacuteceacutedente

54

Cornelia Laros

text

Patterns amp Dark patterns

55

Cornelia Laros

text

Criteres de Bastien et Scapin56

Cornelia Laros

Guidage

Charge de travail

Controcircle utilisateur explicite

Flexibiliteacute ( adaptabiliteacute)

Gestion des erreurs

Homogeacuteneacuteiteacute ( coheacuterence)

Signifiance des Codes et Deacutenominations

Compatibiliteacute ( familiariteacute)

Introduction agrave lrsquoergonomie

Guidage57

Cornelia Laros

Introduction agrave lrsquoergonomie

Charge de travail58

Cornelia Laros

Introduction agrave lrsquoergonomie

Controle explicite59

Cornelia Laros

Introduction agrave lrsquoergonomie

Controles explicites60

Cornelia Laros

Dar983595 983541983527t983545983589983590n

text

Adaptabiliteacute61

Cornelia Laros

text

Gestion des erreurs62

Cornelia Laros

text

Signifiance des codes et deacutenominations

63

Cornelia Laros

text

Homogeacuteneacuteiteacute - coheacuterence64

Cornelia Laros

text

Homogeacuteneacuteiteacute - Distinction65

Cornelia Laros

text

Compatibiliteacute66

Cornelia Laros

text

Compatibiliteacute67

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction68

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction69

Cornelia Laros

text

Gestalt Theorie70

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Gestalt Theorie71

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Dark patterns72

Cornelia Laros

Introduction agrave lrsquoergonomie

A vous de jouer

73

Cornelia Laros

Introduction agrave lrsquoergonomie

Outils de prototypages DIY74

Cornelia Laros

Low tech papier + crayons post-its cartes agrave jouer

Gratuit en ligne Invision app Moqups UXPin

Mac Sketch Balsamiq Mockups Axure

PC Axure Balsamiq

Mobile Prototyping on Paper

Ap983540983590en983530983555 983592983589 no983547983549983589983537le983543 983581h983586983543983589983588

Introduction agrave lrsquoergonomie

Test de perception DIY75

Cornelia Laros

La premiegravere impression qursquoun utilisateur se fait de votre IHM va influencer tous ses jugements ulteacuterieurs Crsquoest lrsquoeffet de halo

bull Un utilisateur qui a une premiegravere impression positive de votre appli passera plus facilement outre les bugs

bull Une premiegravere impression negative rendra lrsquoutilisateur plus critique vis agrave vis de deacutetails qui confirment son jugement

Cel983527 983538983580983590c983532e 983527983548983588si 983527983549983589983581 vo983543 983586983590983580ux 983591rsquoex983527983538983589983585s vo983543 983530983585t983542983589983546i983530n983543 983592rsquoem983528983527983548983581he 983530983545 983550983587s 983542e983585d983530983555-vo983547983543 983581l983535e983539983546s

Introduction agrave lrsquoergonomie

Test de perception DIY76

Cornelia Laros

Montrer votre prototype agrave quelqursquoun pendant 5 secondes

Demandez-lui

bull Ce qursquoil a vu

bull Ce qursquoil a compris de ce qursquoil a vu

bull Ce qui lrsquoa surpris ou marqueacute

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY77

Cornelia Laros

Les difficulteacutes de navigation se produisent souvent dans les niveaux les plus haut de votre structure de contenu Vous pouvez veacuterifier facilement si la classification logique pour vous lrsquoest aussi pour vos utilisateurs

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY78

Cornelia Laros

Lister trois (max) niveaux de profondeur de votre contenu structureacute Masquez ensuite les contenus de niveau plus bas Utilisez par exemple les groupements de lignes dans excel pour creacuteer des pliers-deacutepliers ou imprimer la liste sur une feuille que vous pliez pour masquer certaines parties

Demandez agrave un utilisateur de vous dire ougrave il penserait trouver un contenu bien preacutecis en preacutecisant qursquoil nrsquoy a pas de bonne reacuteponse

Notez srsquoil va chercher lagrave ougrave vous vous y attendiez ougrave il a heacutesiteacute et ce qursquoil a fini par choisir pour vous aider agrave rendre la navigation plus intuitive

Introduction agrave lrsquoergonomie

Test drsquoutilisabiliteacute DIY79

Cornelia Laros

A chaque nouvelle fonctionnaliteacute ajouteacutee demandez agrave quelqursquoun qui ne connait pas le projet de srsquoen servir Proposez lui une seule tacircche geacuteneacuterique agrave accomplir avec la fonctionnaliteacute

Exemple Tu veux prendre un rendez-vous avec un meacutedecin sur ce site montres-moi comment tu ferais en commentant agrave haute voix

Le plus important ici crsquoest de ne pas reacuteagir agrave ce qursquoil fait mais simplement le regarder faire sans lrsquoaider mecircme srsquoil est bloqueacute

Srsquoil 983540983586983588983589 de983543 983578983547983589s983545i983586983585s reacutepo983539983592983530z 983540983580983590 un983530 983577983548e983588t983534983587983539 o983547 d983535983545e983588 l983547983535 983577u983530 983550983587us 983536983547983535 983590eacutepo983539983592r983530983555 983578983548an983591 983534983537 983580ur983527 fi983539983535 983588rsquoil 983534983539983588983535s983545e Srsquoil 983530983543983546 v983542983580i983593983530n983545 983529l983587983577ueacute di983545983530983588 l983548i 983577983547983589 983550o983547s 983580983536983537ez 983542983530983550983587ir 983549983586983546r983589 983579o983541983534983589 et 983530983543983588983580ye983555 983592983530 c983587983538983541re983539983592r983530 983579983589 983578u983534 l983589 9835316ne

Introduction agrave lrsquoergonomie

Pas besoin de reacuteinventer la roue DIY

80

Cornelia Laros

Il existe des bonnes pratiques qui vous eacuteviteront de reacuteinventer la roue Utilisez des laquo design patterns raquo pour concevoir vos interfaces

Renseignez vous sur la Gestalt Theorie pour agencer vos pages

Utilisez les critegraveres de Bastien et Scapin pour trouver des deacutefauts eacutevidents avant de tester vous en tirerez des enseignements plus inteacuteressants

Ma983534s ccedila crsquoes983545 983541983586983548r u983539983530 983580u983546r983530 983559983587i983588

Introduction agrave lrsquoergonomie

Quizz time

81

Cornelia Laros

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

82

Cornelia Laros

1 c Fonctionnel

2 a Fiable

3 d Accessible

4 b Intuitif

5 e Plaisant

6 f Porteur de sens

text

F - Quel besoin ai-je oublieacute dans la question preacuteceacutedente

83

Cornelia Laros

Uti983536983534983588983580b983536e

Introduction agrave lrsquoergonomie

Tests DIY84

Cornelia Laros

Reacutedigez la proceacutedure pour tester un de vos projets drsquoIHM avec le test de votre choix perception arborescence ou utilisabiliteacute

Notez la question que vous vous posez et la question que vous allez poser

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

Introduction agrave lrsquoergonomie

Pourquoi ces meacutethodes27

Cornelia Laros

bull Une imagine est plus parlante que 10 000 mots

bull Permet drsquoeacutevaluer une ideacutee agrave moindre coucirct donc de se tromper souvent et drsquoapprendre plus vite pour valider une ideacutee ou lrsquoameacuteliorer

bull Permet de tester plein drsquoideacutees et de retenir la meilleure

hellip A condition de se focaliser sur un objectif et non sur lrsquoideacutee elle-mecircme

Modeacuteliser

Introduction agrave lrsquoergonomie

Lrsquoensemble permet drsquoeacuteviter ceci

28

Cornelia Laros

Introduction agrave lrsquoergonomie

Lrsquoensemble permet drsquoeacuteviter ceci

29

Cornelia Laros

Eli983538983534983585eacute en 983586983528983588983589r983549a983585t

Eli983538983534983585eacute en 983540983590983586t983587983545983584pa983539983546

Introduction agrave lrsquoergonomie

Prototyper pour vous crsquoesthellip30

Cornelia Laros

CONTRIBUTION AUX SPECIFICATIONS FONCTIONNELLES

Zoning basse fideacuteliteacute wireframe statique (sketch ou non) bull Rapide et peu couteux bull Illustratif statique pas drsquointeraction bull Non engageant sur le design bull Tregraves peu explicite sur le plan fonctionnel

Story-board cliquable bull Illustre la navigation bull Permet de se projeter dans lrsquointeraction bull Pose les bases du design et du fonctionnel

Prototype semi-dynamique bull Se veut complet (ou quasi) sur le plan de la

navigation de lrsquointeraction et des cas drsquoutilisation bull Doit permettre de simuler fidegravelement le

fonctionnement drsquoune application bull Est une speacutecification fonctionnelle en soi

Pha983543983530 983592983589 ca983591983590983527g983589 AM983623983607

Pha983543983530 983592983589 co983539983581983530p983545983535o983585 f983586983539983581t983535o983539983585983530l983536983589

Tes983545983588 983547t983535983536i983588983527t983589u983542983588 ap983540983537983534s 983538983587983529il983530983543hellip

Introduction agrave lrsquoergonomie

Prototype basse definition31

Cornelia Laros

Introduction agrave lrsquoergonomie

Prototyper cliquable32

Cornelia Laros

Introduction agrave lrsquoergonomie

Prototyper semi-dynamique33

Cornelia Laros

Page Title

1230

Mobile interactions

Observably Sc i$amp

About

Project overiew

Manage sessions

Manage variables

Settings

Start observing

1230 1230

OverviewObserve

Observe mobile interactions in the field to assess dominant hand for holding and interacting with smartphones

10042016Mobile interactionsMobile interactions

Welcome to Observably Gather and manage observation dataGather and manage observation data

My projects

1230

Tags separate with comas

Variable value

Create

Add observablesAdd all observables you want to track for this project You can come back and edit them laterAdd all observables you want to track for this project You can come back and edit them later

Thanks for the hint

Manage variablesMobile InteractionsMobile Interactions

1230

Tags separate with comas

Variable value

Create

Left hand Right thumbLRTLRT

Manage variablesMobile InteractionsMobile Interactions

Irsquom done Start recording

Save changesCancel

Observable Tags separate with coma

Tags separate with comas

3 20

LRILRI

Observable label

Did you knowTap on the icon to customize it Use icons from our library or from your gallery to make variables pop out when observing

Tap on the icon to customize it Use icons from our library or from your gallery to make variables pop out when observing

Thanks for the hint

Left hand Right thumbLRTLRT

Irsquom done Start recording

Manage variablesMobile InteractionsMobile Interactions

Left hand x Right thumb x

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Did you knowIf you make a mistake you can undo your action by tapping on the icon of the taskIf you make a mistake you can undo your action by tapping on the icon of the task

Thanks for the hint

Session 1

Discrete mode New Session

Mobile InteractionsMobile Interactions

1230

Record vocal comment

LRILRILRILRILRILRI

Did you knowYou can record occurences durations and comments by chosing the record format in the drop-down above

You can record occurences durations and comments by chosing the record format in the drop-down above

Thanks for the hint

Discrete mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

Left hand Right thumbLRT

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Did you knowIn list view you can slipe left and right to increment or correct your countIn list view you can slipe left and right to increment or correct your count

Thanks for the hint

Continuous mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

LRILRILRILRILRI

Did you knowIf you make a mistake you can undo your action by tapping on the icon of the taskIf you make a mistake you can undo your action by tapping on the icon of the task

Thanks for the hint

Continuous mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

Tags separate with comas

Comment

Add

Did you know The timestamp of vocal comments is the start time to accurately mark events that triggered your comment

The timestamp of vocal comments is the start time to accurately mark events that triggered your comment

Thanks for the hint

Manage observables

Comments mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Stop recording vocal comment

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Your observationsManage and cleanup sessions before exporting dataManage and cleanup sessions before exporting data

Session ManagementMobile InteractionsMobile Interactions

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

LRT

LRI

RLI

RLT

RRT20

20

8

35

15

Count SummaryCount Summary

RLT

RRT20

815

Time SummaryTime Summary

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

Left hand Right thumbLRTLRT

+1+1

10042016 124627

Left hand Right thumbLRTLRT

2rsquorsquo2rsquorsquo

10042016 124627 - 10042016 124629

Content of my comment boxTag1 Tag2

10042016 124644

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

LRTLRT+1+1

10042016 124627

Save changes

Observable Tags separate with coma

Tags separate with comas

Left hand x Right thumb x

AboutAbout

1230

Observable science provides tools for field research and scientific observation It is tailored to the needs of ethnography human factors psychology usability and games user research

Observable science provides tools for field research and scientific observation It is tailored to the needs of ethnography human factors psychology usability and games user research

Observablyscience

Development by Morgane RadelDesign by Cornelia LarosDevelopment by Morgane RadelDesign by Cornelia Laros

Credits

Support (us)Show your love Rate the App

Make a donation

Contact us

Visit our website

Add session tags to all observations

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

Save changes

Session Tags separate with coma

Tags separate with comas

Metro x Toulouse x

Manage variablesMobile InteractionsMobile Interactions

1230

Left hand Right thumbLRTLRT

Confirm

Search icons

Cancel

Browse

3 20

Observably Sci$amp

1230

Project statisticsProject statistics Total countsTotal time Total comments First entryLast entrySessions

4 963281231

1441201201603042016

97

Project detailsMobile InteractionsMobile Interactions

Sessions SummarySessions Summary

RRT20

815

Count SummaryCount Summary

JUN 14MAY 14APR 14MAR 14FEB 14JAN 14

4

1

65

7

0

2

4

6

8

10

3

2014

Manage sessions

Settings ExportOverview

1230

App optionsDisplay hintsDisplay hints

SettingsSettings

Share anonymous data to improve the appShare anonymous data to improve the app

1230

Gather and manage observation data with ObservablyGather and manage observation data with Observably

Welcome to Observably

Project name

Project description what is the goal of your project

CreateCancel

Session[number]Session[number]

Default Session ID

Default export format txt

Data options

Default Discrete variable lines view

Create a new project

1230

Project detailsMobile InteractionsMobile Interactions

Mobile InteractionsMobile Interactions

Project description what is the goal of your project

SaveCancel

Session[number]Session[number]

Default Session ID

Default export format txt

Data options

Default continuous variables grid view

Project name

Manage sessions

Settings ExportOverview

1230

Project detailsMobile InteractionsMobile Interactions

Manage sessions

Settings ExportOverview

Export format txt

Export data

Data has been successfully exported as MobileInteractionstxt

to your download folder

Observably Sc i$amp

Settings

1230

BUTTONBUTTON

Permissions

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Up exlaborum incididunt quis nostrud exercitatn

COMPONENTS

Pickers

OKCANCEL

13

Friday

MAR

2014

MS W T F ST

30 31

1

16 17 19 20 21 2218

23 24 26 27 28 2925

139 10 12 14 1511

72 3 5 6 84

March 2014

OKCANCEL

PMAM

112

9

10

11

2

48

576

3

330 AM

Notifications

Incoming call

Rachel Ligson

IGNORE ANSWER

REPLYARCHIVE

Hey letrsquos catch up soon Do you want to grab lunch sometime this weekendLet me know when yoursquore free

409 PMHannah ChoHannah Cho

Do you know what I mean509 PMTina McBeanTina McBean

Heads up notification

Regular + Expanded notification

Index scroller

All

Patrick Keenan

Mary Johnson

Tina Santiago

Trevor Hansen

Amar Sagoo

Abbey Christensen

Ali Connors

Alex Nelson

Anthony Stevens

A

A

1230

Abcdefg

Abcdefghijklmno

Tabs

THE THIRDITEM TWONO ONE

THE THIRDITEM TWONO ONE

1230

THE THIRDITEM TWONO ONE

Page Title

1230

121 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

110 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

51 50

Input text for a single line field with a maximu

Single-Line Input Label

31 50

Input text for a single line field with a max

Single-Line Input Label

121 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

110 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

51 50

Input text for a single line field with a maximuInput text for a single line field with a maximu

Single-Line Input Label

31 50

Input text for a single line field with a maxInput text for a single line field with a max

Single-Line Input Label

Disabled text field

Input text

Username or Password is incorrect

Input text

Input tex

Hint text

Hint text

Hint text

Disabled text field

Input textInput text

Username or Password is incorrect

Input textInput text

Input texInput tex

Hint text

Hint text

Hint text

Text fields

Switches and sliders

60

Regular

Pressed

Disabled

60

Regular

Pressed

Disabled

Buttons

DISABLED

PRESSED

NORMAL

DISABLED

PRESSED

NORMAL

Flat Raised

DISABLED

PRESSED

NORMAL

DISABLED

PRESSED

NORMAL

Flat Raised

Toasts

This color applies to both light and dark theme

This item already has the label ldquotravelrdquo You can add a new label

ACTIONSingle-Line Snackbar

Menu

Arial 100

100

Calibri

Courier

Verdana

Arial

Chips

Trevor Hansen

email3emailcom

email2emailcom

primaryemailemailcomContact Name

Dialogs

Desktop

Without title With title

BUTTONBUTTON

PermissionsLorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Up exlaborum incididunt quis nostrud exercitatn

BUTTONBUTTON

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Ut enim ad minim ikad veniam quis nostrud exercitatn ullamco laboris nisi ut aliquip exlaborum incididunt

ACCEPTDECLINEMORE INFO

Permissions

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisinuli

Toolbar

11Roboto

Cards

Welcome BackItrsquos been a while have you read any new books latelyItrsquos been a while have you read any new books lately

YESNOPE

Kangaroo Valley Safari

Located two hours south of Sydney in the

Southern Highlands of New South Wales

LEARN MORESHARE

REVIEWFREE SAMPLE

By Alex Nelson

El Pooch

Pre-fab Homes

Favorite Road Trips

Best Airlines

Campbell

Groceries

almond milk

coconut water

cucumber

green apples

Yuna tickets on sale 624

May 24 2014

Clean desk

Keyboards

suggestion suggestion suggestion

123

a s d f g h j k l

z x c v b n m

q w e r t y u i o p1 2 3 4 5 6 7 8 9 0

suggestion suggestion suggestion

123

a s d f g h j k l

z x c v b n m

q w e r t y u i o p1 2 3 4 5 6 7 8 9 0

Bottom Sheet

Print this page

Copy

Upload

Share

MoreMail Message

Google+Gmail Hangout

Grid

Two lineSupport text

Two lineSupport text

Single line

Single line

Lists

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Three-line itemThree-line item

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Three-line itemThree-line item

Three-line itemThree-line item

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Three-line itemThree-line item

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Three-line itemThree-line item

Three-line itemThree-line item

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Line item unselectedLine item unselected

Line item selectedLine item selected

Line item selectedLine item selected

Data usageData usage

BluetoothBluetooth

Wi-FiWi-Fi

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Single-line itemSingle-line item

Single-line itemSingle-line item

Single-line itemSingle-line itemSingle-line itemSingle-line item

Single-line itemSingle-line item

Single-line itemSingle-line item

Introduction agrave lrsquoergonomie

Ergonomie et Design34

Cornelia Laros

Design Ergonomie Design Ergonomie

Identiteacute

Communication

Ambiance

Exemple un site institutionnel informatif avec une navigation simple et des exigences fortes

drsquoidentiteacuteExemple une application meacutetier destineacutee agrave une

population drsquoutilisateur connue

EfficaciteacuteFonctionnel

Outils

Service en ligne

Architecture de lrsquoinformation contenus bonnes pratiques

Analyse tache vs activiteacute prise en compte globaliseacutee des process

postes de travail eacutecosystegraveme existant hellip puis la conception

Image Usage freacutequent

Usage ponctuel

Votre eacutequipe Ergonome Directeur aristique Webdesigner UX Designer

Introduction agrave lrsquoergonomie

Design avant-tout35

Cornelia Laros

Introduction agrave lrsquoergonomie

Equilibreacute36

Cornelia Laros

Introduction agrave lrsquoergonomie

Ergonomie avant tout37

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

38

Cornelia Laros

text

Lrsquoergonomie sert agravehellip39

Cornelia Laros

1 ameacuteliorer les conditions de travail

2 faire gagner plus drsquoargent agrave lrsquoentreprise

3 ameacuteliorer lrsquoestheacutetique

4 comprendre comment ameacuteliorer un produit

text

Quelles affirmations sont vraies

40

Cornelia Laros

1 Lrsquoergonomie srsquoattache agrave comprendre le travail pour le transformer

2 Il est possible de concevoir une IHM qui fonctionne pour tout le monde en se basant sur des normes

3 Lrsquoutilisateur va se servir de votre produit de la faccedilon dont vous lrsquoavez imagineacute

4 Lrsquoutilisateur interpregravete une tacircche comme un problegraveme qursquoil doit reacutesoudre en faisant avec ses caracteacuteristiques et les moyens mis agrave sa disposition

text

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

41

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

text

D - A quoi sert un prototype

42

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

43

Cornelia Laros

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

44

Cornelia Laros

Utilisabiliteacute

Utiliteacute

Efficaciteacute Efficience

Satisfaction

Introduction agrave lrsquoergonomie

Pyramide des besoins MASLOW

45

Cornelia Laros

Introduction agrave lrsquoergonomie

Pyramide des besoins IHM46

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

47

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

48

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

49

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

50

Cornelia Laros

Introduction agrave lrsquoergonomie

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

51

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

Introduction agrave lrsquoergonomie

D - A quoi sert un prototype

52

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

53

Cornelia Laros

a Fiable

b Intuitif

c Fonctionnel

d Accessible

e Plaisant

f Porteur de sens

Introduction agrave lrsquoergonomie

F - Quel besoin ai-je oublieacute dans la question

preacuteceacutedente

54

Cornelia Laros

text

Patterns amp Dark patterns

55

Cornelia Laros

text

Criteres de Bastien et Scapin56

Cornelia Laros

Guidage

Charge de travail

Controcircle utilisateur explicite

Flexibiliteacute ( adaptabiliteacute)

Gestion des erreurs

Homogeacuteneacuteiteacute ( coheacuterence)

Signifiance des Codes et Deacutenominations

Compatibiliteacute ( familiariteacute)

Introduction agrave lrsquoergonomie

Guidage57

Cornelia Laros

Introduction agrave lrsquoergonomie

Charge de travail58

Cornelia Laros

Introduction agrave lrsquoergonomie

Controle explicite59

Cornelia Laros

Introduction agrave lrsquoergonomie

Controles explicites60

Cornelia Laros

Dar983595 983541983527t983545983589983590n

text

Adaptabiliteacute61

Cornelia Laros

text

Gestion des erreurs62

Cornelia Laros

text

Signifiance des codes et deacutenominations

63

Cornelia Laros

text

Homogeacuteneacuteiteacute - coheacuterence64

Cornelia Laros

text

Homogeacuteneacuteiteacute - Distinction65

Cornelia Laros

text

Compatibiliteacute66

Cornelia Laros

text

Compatibiliteacute67

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction68

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction69

Cornelia Laros

text

Gestalt Theorie70

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Gestalt Theorie71

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Dark patterns72

Cornelia Laros

Introduction agrave lrsquoergonomie

A vous de jouer

73

Cornelia Laros

Introduction agrave lrsquoergonomie

Outils de prototypages DIY74

Cornelia Laros

Low tech papier + crayons post-its cartes agrave jouer

Gratuit en ligne Invision app Moqups UXPin

Mac Sketch Balsamiq Mockups Axure

PC Axure Balsamiq

Mobile Prototyping on Paper

Ap983540983590en983530983555 983592983589 no983547983549983589983537le983543 983581h983586983543983589983588

Introduction agrave lrsquoergonomie

Test de perception DIY75

Cornelia Laros

La premiegravere impression qursquoun utilisateur se fait de votre IHM va influencer tous ses jugements ulteacuterieurs Crsquoest lrsquoeffet de halo

bull Un utilisateur qui a une premiegravere impression positive de votre appli passera plus facilement outre les bugs

bull Une premiegravere impression negative rendra lrsquoutilisateur plus critique vis agrave vis de deacutetails qui confirment son jugement

Cel983527 983538983580983590c983532e 983527983548983588si 983527983549983589983581 vo983543 983586983590983580ux 983591rsquoex983527983538983589983585s vo983543 983530983585t983542983589983546i983530n983543 983592rsquoem983528983527983548983581he 983530983545 983550983587s 983542e983585d983530983555-vo983547983543 983581l983535e983539983546s

Introduction agrave lrsquoergonomie

Test de perception DIY76

Cornelia Laros

Montrer votre prototype agrave quelqursquoun pendant 5 secondes

Demandez-lui

bull Ce qursquoil a vu

bull Ce qursquoil a compris de ce qursquoil a vu

bull Ce qui lrsquoa surpris ou marqueacute

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY77

Cornelia Laros

Les difficulteacutes de navigation se produisent souvent dans les niveaux les plus haut de votre structure de contenu Vous pouvez veacuterifier facilement si la classification logique pour vous lrsquoest aussi pour vos utilisateurs

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY78

Cornelia Laros

Lister trois (max) niveaux de profondeur de votre contenu structureacute Masquez ensuite les contenus de niveau plus bas Utilisez par exemple les groupements de lignes dans excel pour creacuteer des pliers-deacutepliers ou imprimer la liste sur une feuille que vous pliez pour masquer certaines parties

Demandez agrave un utilisateur de vous dire ougrave il penserait trouver un contenu bien preacutecis en preacutecisant qursquoil nrsquoy a pas de bonne reacuteponse

Notez srsquoil va chercher lagrave ougrave vous vous y attendiez ougrave il a heacutesiteacute et ce qursquoil a fini par choisir pour vous aider agrave rendre la navigation plus intuitive

Introduction agrave lrsquoergonomie

Test drsquoutilisabiliteacute DIY79

Cornelia Laros

A chaque nouvelle fonctionnaliteacute ajouteacutee demandez agrave quelqursquoun qui ne connait pas le projet de srsquoen servir Proposez lui une seule tacircche geacuteneacuterique agrave accomplir avec la fonctionnaliteacute

Exemple Tu veux prendre un rendez-vous avec un meacutedecin sur ce site montres-moi comment tu ferais en commentant agrave haute voix

Le plus important ici crsquoest de ne pas reacuteagir agrave ce qursquoil fait mais simplement le regarder faire sans lrsquoaider mecircme srsquoil est bloqueacute

Srsquoil 983540983586983588983589 de983543 983578983547983589s983545i983586983585s reacutepo983539983592983530z 983540983580983590 un983530 983577983548e983588t983534983587983539 o983547 d983535983545e983588 l983547983535 983577u983530 983550983587us 983536983547983535 983590eacutepo983539983592r983530983555 983578983548an983591 983534983537 983580ur983527 fi983539983535 983588rsquoil 983534983539983588983535s983545e Srsquoil 983530983543983546 v983542983580i983593983530n983545 983529l983587983577ueacute di983545983530983588 l983548i 983577983547983589 983550o983547s 983580983536983537ez 983542983530983550983587ir 983549983586983546r983589 983579o983541983534983589 et 983530983543983588983580ye983555 983592983530 c983587983538983541re983539983592r983530 983579983589 983578u983534 l983589 9835316ne

Introduction agrave lrsquoergonomie

Pas besoin de reacuteinventer la roue DIY

80

Cornelia Laros

Il existe des bonnes pratiques qui vous eacuteviteront de reacuteinventer la roue Utilisez des laquo design patterns raquo pour concevoir vos interfaces

Renseignez vous sur la Gestalt Theorie pour agencer vos pages

Utilisez les critegraveres de Bastien et Scapin pour trouver des deacutefauts eacutevidents avant de tester vous en tirerez des enseignements plus inteacuteressants

Ma983534s ccedila crsquoes983545 983541983586983548r u983539983530 983580u983546r983530 983559983587i983588

Introduction agrave lrsquoergonomie

Quizz time

81

Cornelia Laros

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

82

Cornelia Laros

1 c Fonctionnel

2 a Fiable

3 d Accessible

4 b Intuitif

5 e Plaisant

6 f Porteur de sens

text

F - Quel besoin ai-je oublieacute dans la question preacuteceacutedente

83

Cornelia Laros

Uti983536983534983588983580b983536e

Introduction agrave lrsquoergonomie

Tests DIY84

Cornelia Laros

Reacutedigez la proceacutedure pour tester un de vos projets drsquoIHM avec le test de votre choix perception arborescence ou utilisabiliteacute

Notez la question que vous vous posez et la question que vous allez poser

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

Introduction agrave lrsquoergonomie

Lrsquoensemble permet drsquoeacuteviter ceci

28

Cornelia Laros

Introduction agrave lrsquoergonomie

Lrsquoensemble permet drsquoeacuteviter ceci

29

Cornelia Laros

Eli983538983534983585eacute en 983586983528983588983589r983549a983585t

Eli983538983534983585eacute en 983540983590983586t983587983545983584pa983539983546

Introduction agrave lrsquoergonomie

Prototyper pour vous crsquoesthellip30

Cornelia Laros

CONTRIBUTION AUX SPECIFICATIONS FONCTIONNELLES

Zoning basse fideacuteliteacute wireframe statique (sketch ou non) bull Rapide et peu couteux bull Illustratif statique pas drsquointeraction bull Non engageant sur le design bull Tregraves peu explicite sur le plan fonctionnel

Story-board cliquable bull Illustre la navigation bull Permet de se projeter dans lrsquointeraction bull Pose les bases du design et du fonctionnel

Prototype semi-dynamique bull Se veut complet (ou quasi) sur le plan de la

navigation de lrsquointeraction et des cas drsquoutilisation bull Doit permettre de simuler fidegravelement le

fonctionnement drsquoune application bull Est une speacutecification fonctionnelle en soi

Pha983543983530 983592983589 ca983591983590983527g983589 AM983623983607

Pha983543983530 983592983589 co983539983581983530p983545983535o983585 f983586983539983581t983535o983539983585983530l983536983589

Tes983545983588 983547t983535983536i983588983527t983589u983542983588 ap983540983537983534s 983538983587983529il983530983543hellip

Introduction agrave lrsquoergonomie

Prototype basse definition31

Cornelia Laros

Introduction agrave lrsquoergonomie

Prototyper cliquable32

Cornelia Laros

Introduction agrave lrsquoergonomie

Prototyper semi-dynamique33

Cornelia Laros

Page Title

1230

Mobile interactions

Observably Sc i$amp

About

Project overiew

Manage sessions

Manage variables

Settings

Start observing

1230 1230

OverviewObserve

Observe mobile interactions in the field to assess dominant hand for holding and interacting with smartphones

10042016Mobile interactionsMobile interactions

Welcome to Observably Gather and manage observation dataGather and manage observation data

My projects

1230

Tags separate with comas

Variable value

Create

Add observablesAdd all observables you want to track for this project You can come back and edit them laterAdd all observables you want to track for this project You can come back and edit them later

Thanks for the hint

Manage variablesMobile InteractionsMobile Interactions

1230

Tags separate with comas

Variable value

Create

Left hand Right thumbLRTLRT

Manage variablesMobile InteractionsMobile Interactions

Irsquom done Start recording

Save changesCancel

Observable Tags separate with coma

Tags separate with comas

3 20

LRILRI

Observable label

Did you knowTap on the icon to customize it Use icons from our library or from your gallery to make variables pop out when observing

Tap on the icon to customize it Use icons from our library or from your gallery to make variables pop out when observing

Thanks for the hint

Left hand Right thumbLRTLRT

Irsquom done Start recording

Manage variablesMobile InteractionsMobile Interactions

Left hand x Right thumb x

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Did you knowIf you make a mistake you can undo your action by tapping on the icon of the taskIf you make a mistake you can undo your action by tapping on the icon of the task

Thanks for the hint

Session 1

Discrete mode New Session

Mobile InteractionsMobile Interactions

1230

Record vocal comment

LRILRILRILRILRILRI

Did you knowYou can record occurences durations and comments by chosing the record format in the drop-down above

You can record occurences durations and comments by chosing the record format in the drop-down above

Thanks for the hint

Discrete mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

Left hand Right thumbLRT

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Did you knowIn list view you can slipe left and right to increment or correct your countIn list view you can slipe left and right to increment or correct your count

Thanks for the hint

Continuous mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

LRILRILRILRILRI

Did you knowIf you make a mistake you can undo your action by tapping on the icon of the taskIf you make a mistake you can undo your action by tapping on the icon of the task

Thanks for the hint

Continuous mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

Tags separate with comas

Comment

Add

Did you know The timestamp of vocal comments is the start time to accurately mark events that triggered your comment

The timestamp of vocal comments is the start time to accurately mark events that triggered your comment

Thanks for the hint

Manage observables

Comments mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Stop recording vocal comment

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Your observationsManage and cleanup sessions before exporting dataManage and cleanup sessions before exporting data

Session ManagementMobile InteractionsMobile Interactions

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

LRT

LRI

RLI

RLT

RRT20

20

8

35

15

Count SummaryCount Summary

RLT

RRT20

815

Time SummaryTime Summary

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

Left hand Right thumbLRTLRT

+1+1

10042016 124627

Left hand Right thumbLRTLRT

2rsquorsquo2rsquorsquo

10042016 124627 - 10042016 124629

Content of my comment boxTag1 Tag2

10042016 124644

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

LRTLRT+1+1

10042016 124627

Save changes

Observable Tags separate with coma

Tags separate with comas

Left hand x Right thumb x

AboutAbout

1230

Observable science provides tools for field research and scientific observation It is tailored to the needs of ethnography human factors psychology usability and games user research

Observable science provides tools for field research and scientific observation It is tailored to the needs of ethnography human factors psychology usability and games user research

Observablyscience

Development by Morgane RadelDesign by Cornelia LarosDevelopment by Morgane RadelDesign by Cornelia Laros

Credits

Support (us)Show your love Rate the App

Make a donation

Contact us

Visit our website

Add session tags to all observations

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

Save changes

Session Tags separate with coma

Tags separate with comas

Metro x Toulouse x

Manage variablesMobile InteractionsMobile Interactions

1230

Left hand Right thumbLRTLRT

Confirm

Search icons

Cancel

Browse

3 20

Observably Sci$amp

1230

Project statisticsProject statistics Total countsTotal time Total comments First entryLast entrySessions

4 963281231

1441201201603042016

97

Project detailsMobile InteractionsMobile Interactions

Sessions SummarySessions Summary

RRT20

815

Count SummaryCount Summary

JUN 14MAY 14APR 14MAR 14FEB 14JAN 14

4

1

65

7

0

2

4

6

8

10

3

2014

Manage sessions

Settings ExportOverview

1230

App optionsDisplay hintsDisplay hints

SettingsSettings

Share anonymous data to improve the appShare anonymous data to improve the app

1230

Gather and manage observation data with ObservablyGather and manage observation data with Observably

Welcome to Observably

Project name

Project description what is the goal of your project

CreateCancel

Session[number]Session[number]

Default Session ID

Default export format txt

Data options

Default Discrete variable lines view

Create a new project

1230

Project detailsMobile InteractionsMobile Interactions

Mobile InteractionsMobile Interactions

Project description what is the goal of your project

SaveCancel

Session[number]Session[number]

Default Session ID

Default export format txt

Data options

Default continuous variables grid view

Project name

Manage sessions

Settings ExportOverview

1230

Project detailsMobile InteractionsMobile Interactions

Manage sessions

Settings ExportOverview

Export format txt

Export data

Data has been successfully exported as MobileInteractionstxt

to your download folder

Observably Sc i$amp

Settings

1230

BUTTONBUTTON

Permissions

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Up exlaborum incididunt quis nostrud exercitatn

COMPONENTS

Pickers

OKCANCEL

13

Friday

MAR

2014

MS W T F ST

30 31

1

16 17 19 20 21 2218

23 24 26 27 28 2925

139 10 12 14 1511

72 3 5 6 84

March 2014

OKCANCEL

PMAM

112

9

10

11

2

48

576

3

330 AM

Notifications

Incoming call

Rachel Ligson

IGNORE ANSWER

REPLYARCHIVE

Hey letrsquos catch up soon Do you want to grab lunch sometime this weekendLet me know when yoursquore free

409 PMHannah ChoHannah Cho

Do you know what I mean509 PMTina McBeanTina McBean

Heads up notification

Regular + Expanded notification

Index scroller

All

Patrick Keenan

Mary Johnson

Tina Santiago

Trevor Hansen

Amar Sagoo

Abbey Christensen

Ali Connors

Alex Nelson

Anthony Stevens

A

A

1230

Abcdefg

Abcdefghijklmno

Tabs

THE THIRDITEM TWONO ONE

THE THIRDITEM TWONO ONE

1230

THE THIRDITEM TWONO ONE

Page Title

1230

121 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

110 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

51 50

Input text for a single line field with a maximu

Single-Line Input Label

31 50

Input text for a single line field with a max

Single-Line Input Label

121 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

110 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

51 50

Input text for a single line field with a maximuInput text for a single line field with a maximu

Single-Line Input Label

31 50

Input text for a single line field with a maxInput text for a single line field with a max

Single-Line Input Label

Disabled text field

Input text

Username or Password is incorrect

Input text

Input tex

Hint text

Hint text

Hint text

Disabled text field

Input textInput text

Username or Password is incorrect

Input textInput text

Input texInput tex

Hint text

Hint text

Hint text

Text fields

Switches and sliders

60

Regular

Pressed

Disabled

60

Regular

Pressed

Disabled

Buttons

DISABLED

PRESSED

NORMAL

DISABLED

PRESSED

NORMAL

Flat Raised

DISABLED

PRESSED

NORMAL

DISABLED

PRESSED

NORMAL

Flat Raised

Toasts

This color applies to both light and dark theme

This item already has the label ldquotravelrdquo You can add a new label

ACTIONSingle-Line Snackbar

Menu

Arial 100

100

Calibri

Courier

Verdana

Arial

Chips

Trevor Hansen

email3emailcom

email2emailcom

primaryemailemailcomContact Name

Dialogs

Desktop

Without title With title

BUTTONBUTTON

PermissionsLorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Up exlaborum incididunt quis nostrud exercitatn

BUTTONBUTTON

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Ut enim ad minim ikad veniam quis nostrud exercitatn ullamco laboris nisi ut aliquip exlaborum incididunt

ACCEPTDECLINEMORE INFO

Permissions

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisinuli

Toolbar

11Roboto

Cards

Welcome BackItrsquos been a while have you read any new books latelyItrsquos been a while have you read any new books lately

YESNOPE

Kangaroo Valley Safari

Located two hours south of Sydney in the

Southern Highlands of New South Wales

LEARN MORESHARE

REVIEWFREE SAMPLE

By Alex Nelson

El Pooch

Pre-fab Homes

Favorite Road Trips

Best Airlines

Campbell

Groceries

almond milk

coconut water

cucumber

green apples

Yuna tickets on sale 624

May 24 2014

Clean desk

Keyboards

suggestion suggestion suggestion

123

a s d f g h j k l

z x c v b n m

q w e r t y u i o p1 2 3 4 5 6 7 8 9 0

suggestion suggestion suggestion

123

a s d f g h j k l

z x c v b n m

q w e r t y u i o p1 2 3 4 5 6 7 8 9 0

Bottom Sheet

Print this page

Copy

Upload

Share

MoreMail Message

Google+Gmail Hangout

Grid

Two lineSupport text

Two lineSupport text

Single line

Single line

Lists

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Three-line itemThree-line item

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Three-line itemThree-line item

Three-line itemThree-line item

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Three-line itemThree-line item

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Three-line itemThree-line item

Three-line itemThree-line item

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Line item unselectedLine item unselected

Line item selectedLine item selected

Line item selectedLine item selected

Data usageData usage

BluetoothBluetooth

Wi-FiWi-Fi

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Single-line itemSingle-line item

Single-line itemSingle-line item

Single-line itemSingle-line itemSingle-line itemSingle-line item

Single-line itemSingle-line item

Single-line itemSingle-line item

Introduction agrave lrsquoergonomie

Ergonomie et Design34

Cornelia Laros

Design Ergonomie Design Ergonomie

Identiteacute

Communication

Ambiance

Exemple un site institutionnel informatif avec une navigation simple et des exigences fortes

drsquoidentiteacuteExemple une application meacutetier destineacutee agrave une

population drsquoutilisateur connue

EfficaciteacuteFonctionnel

Outils

Service en ligne

Architecture de lrsquoinformation contenus bonnes pratiques

Analyse tache vs activiteacute prise en compte globaliseacutee des process

postes de travail eacutecosystegraveme existant hellip puis la conception

Image Usage freacutequent

Usage ponctuel

Votre eacutequipe Ergonome Directeur aristique Webdesigner UX Designer

Introduction agrave lrsquoergonomie

Design avant-tout35

Cornelia Laros

Introduction agrave lrsquoergonomie

Equilibreacute36

Cornelia Laros

Introduction agrave lrsquoergonomie

Ergonomie avant tout37

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

38

Cornelia Laros

text

Lrsquoergonomie sert agravehellip39

Cornelia Laros

1 ameacuteliorer les conditions de travail

2 faire gagner plus drsquoargent agrave lrsquoentreprise

3 ameacuteliorer lrsquoestheacutetique

4 comprendre comment ameacuteliorer un produit

text

Quelles affirmations sont vraies

40

Cornelia Laros

1 Lrsquoergonomie srsquoattache agrave comprendre le travail pour le transformer

2 Il est possible de concevoir une IHM qui fonctionne pour tout le monde en se basant sur des normes

3 Lrsquoutilisateur va se servir de votre produit de la faccedilon dont vous lrsquoavez imagineacute

4 Lrsquoutilisateur interpregravete une tacircche comme un problegraveme qursquoil doit reacutesoudre en faisant avec ses caracteacuteristiques et les moyens mis agrave sa disposition

text

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

41

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

text

D - A quoi sert un prototype

42

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

43

Cornelia Laros

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

44

Cornelia Laros

Utilisabiliteacute

Utiliteacute

Efficaciteacute Efficience

Satisfaction

Introduction agrave lrsquoergonomie

Pyramide des besoins MASLOW

45

Cornelia Laros

Introduction agrave lrsquoergonomie

Pyramide des besoins IHM46

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

47

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

48

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

49

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

50

Cornelia Laros

Introduction agrave lrsquoergonomie

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

51

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

Introduction agrave lrsquoergonomie

D - A quoi sert un prototype

52

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

53

Cornelia Laros

a Fiable

b Intuitif

c Fonctionnel

d Accessible

e Plaisant

f Porteur de sens

Introduction agrave lrsquoergonomie

F - Quel besoin ai-je oublieacute dans la question

preacuteceacutedente

54

Cornelia Laros

text

Patterns amp Dark patterns

55

Cornelia Laros

text

Criteres de Bastien et Scapin56

Cornelia Laros

Guidage

Charge de travail

Controcircle utilisateur explicite

Flexibiliteacute ( adaptabiliteacute)

Gestion des erreurs

Homogeacuteneacuteiteacute ( coheacuterence)

Signifiance des Codes et Deacutenominations

Compatibiliteacute ( familiariteacute)

Introduction agrave lrsquoergonomie

Guidage57

Cornelia Laros

Introduction agrave lrsquoergonomie

Charge de travail58

Cornelia Laros

Introduction agrave lrsquoergonomie

Controle explicite59

Cornelia Laros

Introduction agrave lrsquoergonomie

Controles explicites60

Cornelia Laros

Dar983595 983541983527t983545983589983590n

text

Adaptabiliteacute61

Cornelia Laros

text

Gestion des erreurs62

Cornelia Laros

text

Signifiance des codes et deacutenominations

63

Cornelia Laros

text

Homogeacuteneacuteiteacute - coheacuterence64

Cornelia Laros

text

Homogeacuteneacuteiteacute - Distinction65

Cornelia Laros

text

Compatibiliteacute66

Cornelia Laros

text

Compatibiliteacute67

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction68

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction69

Cornelia Laros

text

Gestalt Theorie70

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Gestalt Theorie71

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Dark patterns72

Cornelia Laros

Introduction agrave lrsquoergonomie

A vous de jouer

73

Cornelia Laros

Introduction agrave lrsquoergonomie

Outils de prototypages DIY74

Cornelia Laros

Low tech papier + crayons post-its cartes agrave jouer

Gratuit en ligne Invision app Moqups UXPin

Mac Sketch Balsamiq Mockups Axure

PC Axure Balsamiq

Mobile Prototyping on Paper

Ap983540983590en983530983555 983592983589 no983547983549983589983537le983543 983581h983586983543983589983588

Introduction agrave lrsquoergonomie

Test de perception DIY75

Cornelia Laros

La premiegravere impression qursquoun utilisateur se fait de votre IHM va influencer tous ses jugements ulteacuterieurs Crsquoest lrsquoeffet de halo

bull Un utilisateur qui a une premiegravere impression positive de votre appli passera plus facilement outre les bugs

bull Une premiegravere impression negative rendra lrsquoutilisateur plus critique vis agrave vis de deacutetails qui confirment son jugement

Cel983527 983538983580983590c983532e 983527983548983588si 983527983549983589983581 vo983543 983586983590983580ux 983591rsquoex983527983538983589983585s vo983543 983530983585t983542983589983546i983530n983543 983592rsquoem983528983527983548983581he 983530983545 983550983587s 983542e983585d983530983555-vo983547983543 983581l983535e983539983546s

Introduction agrave lrsquoergonomie

Test de perception DIY76

Cornelia Laros

Montrer votre prototype agrave quelqursquoun pendant 5 secondes

Demandez-lui

bull Ce qursquoil a vu

bull Ce qursquoil a compris de ce qursquoil a vu

bull Ce qui lrsquoa surpris ou marqueacute

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY77

Cornelia Laros

Les difficulteacutes de navigation se produisent souvent dans les niveaux les plus haut de votre structure de contenu Vous pouvez veacuterifier facilement si la classification logique pour vous lrsquoest aussi pour vos utilisateurs

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY78

Cornelia Laros

Lister trois (max) niveaux de profondeur de votre contenu structureacute Masquez ensuite les contenus de niveau plus bas Utilisez par exemple les groupements de lignes dans excel pour creacuteer des pliers-deacutepliers ou imprimer la liste sur une feuille que vous pliez pour masquer certaines parties

Demandez agrave un utilisateur de vous dire ougrave il penserait trouver un contenu bien preacutecis en preacutecisant qursquoil nrsquoy a pas de bonne reacuteponse

Notez srsquoil va chercher lagrave ougrave vous vous y attendiez ougrave il a heacutesiteacute et ce qursquoil a fini par choisir pour vous aider agrave rendre la navigation plus intuitive

Introduction agrave lrsquoergonomie

Test drsquoutilisabiliteacute DIY79

Cornelia Laros

A chaque nouvelle fonctionnaliteacute ajouteacutee demandez agrave quelqursquoun qui ne connait pas le projet de srsquoen servir Proposez lui une seule tacircche geacuteneacuterique agrave accomplir avec la fonctionnaliteacute

Exemple Tu veux prendre un rendez-vous avec un meacutedecin sur ce site montres-moi comment tu ferais en commentant agrave haute voix

Le plus important ici crsquoest de ne pas reacuteagir agrave ce qursquoil fait mais simplement le regarder faire sans lrsquoaider mecircme srsquoil est bloqueacute

Srsquoil 983540983586983588983589 de983543 983578983547983589s983545i983586983585s reacutepo983539983592983530z 983540983580983590 un983530 983577983548e983588t983534983587983539 o983547 d983535983545e983588 l983547983535 983577u983530 983550983587us 983536983547983535 983590eacutepo983539983592r983530983555 983578983548an983591 983534983537 983580ur983527 fi983539983535 983588rsquoil 983534983539983588983535s983545e Srsquoil 983530983543983546 v983542983580i983593983530n983545 983529l983587983577ueacute di983545983530983588 l983548i 983577983547983589 983550o983547s 983580983536983537ez 983542983530983550983587ir 983549983586983546r983589 983579o983541983534983589 et 983530983543983588983580ye983555 983592983530 c983587983538983541re983539983592r983530 983579983589 983578u983534 l983589 9835316ne

Introduction agrave lrsquoergonomie

Pas besoin de reacuteinventer la roue DIY

80

Cornelia Laros

Il existe des bonnes pratiques qui vous eacuteviteront de reacuteinventer la roue Utilisez des laquo design patterns raquo pour concevoir vos interfaces

Renseignez vous sur la Gestalt Theorie pour agencer vos pages

Utilisez les critegraveres de Bastien et Scapin pour trouver des deacutefauts eacutevidents avant de tester vous en tirerez des enseignements plus inteacuteressants

Ma983534s ccedila crsquoes983545 983541983586983548r u983539983530 983580u983546r983530 983559983587i983588

Introduction agrave lrsquoergonomie

Quizz time

81

Cornelia Laros

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

82

Cornelia Laros

1 c Fonctionnel

2 a Fiable

3 d Accessible

4 b Intuitif

5 e Plaisant

6 f Porteur de sens

text

F - Quel besoin ai-je oublieacute dans la question preacuteceacutedente

83

Cornelia Laros

Uti983536983534983588983580b983536e

Introduction agrave lrsquoergonomie

Tests DIY84

Cornelia Laros

Reacutedigez la proceacutedure pour tester un de vos projets drsquoIHM avec le test de votre choix perception arborescence ou utilisabiliteacute

Notez la question que vous vous posez et la question que vous allez poser

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

Introduction agrave lrsquoergonomie

Lrsquoensemble permet drsquoeacuteviter ceci

29

Cornelia Laros

Eli983538983534983585eacute en 983586983528983588983589r983549a983585t

Eli983538983534983585eacute en 983540983590983586t983587983545983584pa983539983546

Introduction agrave lrsquoergonomie

Prototyper pour vous crsquoesthellip30

Cornelia Laros

CONTRIBUTION AUX SPECIFICATIONS FONCTIONNELLES

Zoning basse fideacuteliteacute wireframe statique (sketch ou non) bull Rapide et peu couteux bull Illustratif statique pas drsquointeraction bull Non engageant sur le design bull Tregraves peu explicite sur le plan fonctionnel

Story-board cliquable bull Illustre la navigation bull Permet de se projeter dans lrsquointeraction bull Pose les bases du design et du fonctionnel

Prototype semi-dynamique bull Se veut complet (ou quasi) sur le plan de la

navigation de lrsquointeraction et des cas drsquoutilisation bull Doit permettre de simuler fidegravelement le

fonctionnement drsquoune application bull Est une speacutecification fonctionnelle en soi

Pha983543983530 983592983589 ca983591983590983527g983589 AM983623983607

Pha983543983530 983592983589 co983539983581983530p983545983535o983585 f983586983539983581t983535o983539983585983530l983536983589

Tes983545983588 983547t983535983536i983588983527t983589u983542983588 ap983540983537983534s 983538983587983529il983530983543hellip

Introduction agrave lrsquoergonomie

Prototype basse definition31

Cornelia Laros

Introduction agrave lrsquoergonomie

Prototyper cliquable32

Cornelia Laros

Introduction agrave lrsquoergonomie

Prototyper semi-dynamique33

Cornelia Laros

Page Title

1230

Mobile interactions

Observably Sc i$amp

About

Project overiew

Manage sessions

Manage variables

Settings

Start observing

1230 1230

OverviewObserve

Observe mobile interactions in the field to assess dominant hand for holding and interacting with smartphones

10042016Mobile interactionsMobile interactions

Welcome to Observably Gather and manage observation dataGather and manage observation data

My projects

1230

Tags separate with comas

Variable value

Create

Add observablesAdd all observables you want to track for this project You can come back and edit them laterAdd all observables you want to track for this project You can come back and edit them later

Thanks for the hint

Manage variablesMobile InteractionsMobile Interactions

1230

Tags separate with comas

Variable value

Create

Left hand Right thumbLRTLRT

Manage variablesMobile InteractionsMobile Interactions

Irsquom done Start recording

Save changesCancel

Observable Tags separate with coma

Tags separate with comas

3 20

LRILRI

Observable label

Did you knowTap on the icon to customize it Use icons from our library or from your gallery to make variables pop out when observing

Tap on the icon to customize it Use icons from our library or from your gallery to make variables pop out when observing

Thanks for the hint

Left hand Right thumbLRTLRT

Irsquom done Start recording

Manage variablesMobile InteractionsMobile Interactions

Left hand x Right thumb x

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Did you knowIf you make a mistake you can undo your action by tapping on the icon of the taskIf you make a mistake you can undo your action by tapping on the icon of the task

Thanks for the hint

Session 1

Discrete mode New Session

Mobile InteractionsMobile Interactions

1230

Record vocal comment

LRILRILRILRILRILRI

Did you knowYou can record occurences durations and comments by chosing the record format in the drop-down above

You can record occurences durations and comments by chosing the record format in the drop-down above

Thanks for the hint

Discrete mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

Left hand Right thumbLRT

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Did you knowIn list view you can slipe left and right to increment or correct your countIn list view you can slipe left and right to increment or correct your count

Thanks for the hint

Continuous mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

LRILRILRILRILRI

Did you knowIf you make a mistake you can undo your action by tapping on the icon of the taskIf you make a mistake you can undo your action by tapping on the icon of the task

Thanks for the hint

Continuous mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

Tags separate with comas

Comment

Add

Did you know The timestamp of vocal comments is the start time to accurately mark events that triggered your comment

The timestamp of vocal comments is the start time to accurately mark events that triggered your comment

Thanks for the hint

Manage observables

Comments mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Stop recording vocal comment

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Your observationsManage and cleanup sessions before exporting dataManage and cleanup sessions before exporting data

Session ManagementMobile InteractionsMobile Interactions

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

LRT

LRI

RLI

RLT

RRT20

20

8

35

15

Count SummaryCount Summary

RLT

RRT20

815

Time SummaryTime Summary

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

Left hand Right thumbLRTLRT

+1+1

10042016 124627

Left hand Right thumbLRTLRT

2rsquorsquo2rsquorsquo

10042016 124627 - 10042016 124629

Content of my comment boxTag1 Tag2

10042016 124644

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

LRTLRT+1+1

10042016 124627

Save changes

Observable Tags separate with coma

Tags separate with comas

Left hand x Right thumb x

AboutAbout

1230

Observable science provides tools for field research and scientific observation It is tailored to the needs of ethnography human factors psychology usability and games user research

Observable science provides tools for field research and scientific observation It is tailored to the needs of ethnography human factors psychology usability and games user research

Observablyscience

Development by Morgane RadelDesign by Cornelia LarosDevelopment by Morgane RadelDesign by Cornelia Laros

Credits

Support (us)Show your love Rate the App

Make a donation

Contact us

Visit our website

Add session tags to all observations

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

Save changes

Session Tags separate with coma

Tags separate with comas

Metro x Toulouse x

Manage variablesMobile InteractionsMobile Interactions

1230

Left hand Right thumbLRTLRT

Confirm

Search icons

Cancel

Browse

3 20

Observably Sci$amp

1230

Project statisticsProject statistics Total countsTotal time Total comments First entryLast entrySessions

4 963281231

1441201201603042016

97

Project detailsMobile InteractionsMobile Interactions

Sessions SummarySessions Summary

RRT20

815

Count SummaryCount Summary

JUN 14MAY 14APR 14MAR 14FEB 14JAN 14

4

1

65

7

0

2

4

6

8

10

3

2014

Manage sessions

Settings ExportOverview

1230

App optionsDisplay hintsDisplay hints

SettingsSettings

Share anonymous data to improve the appShare anonymous data to improve the app

1230

Gather and manage observation data with ObservablyGather and manage observation data with Observably

Welcome to Observably

Project name

Project description what is the goal of your project

CreateCancel

Session[number]Session[number]

Default Session ID

Default export format txt

Data options

Default Discrete variable lines view

Create a new project

1230

Project detailsMobile InteractionsMobile Interactions

Mobile InteractionsMobile Interactions

Project description what is the goal of your project

SaveCancel

Session[number]Session[number]

Default Session ID

Default export format txt

Data options

Default continuous variables grid view

Project name

Manage sessions

Settings ExportOverview

1230

Project detailsMobile InteractionsMobile Interactions

Manage sessions

Settings ExportOverview

Export format txt

Export data

Data has been successfully exported as MobileInteractionstxt

to your download folder

Observably Sc i$amp

Settings

1230

BUTTONBUTTON

Permissions

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Up exlaborum incididunt quis nostrud exercitatn

COMPONENTS

Pickers

OKCANCEL

13

Friday

MAR

2014

MS W T F ST

30 31

1

16 17 19 20 21 2218

23 24 26 27 28 2925

139 10 12 14 1511

72 3 5 6 84

March 2014

OKCANCEL

PMAM

112

9

10

11

2

48

576

3

330 AM

Notifications

Incoming call

Rachel Ligson

IGNORE ANSWER

REPLYARCHIVE

Hey letrsquos catch up soon Do you want to grab lunch sometime this weekendLet me know when yoursquore free

409 PMHannah ChoHannah Cho

Do you know what I mean509 PMTina McBeanTina McBean

Heads up notification

Regular + Expanded notification

Index scroller

All

Patrick Keenan

Mary Johnson

Tina Santiago

Trevor Hansen

Amar Sagoo

Abbey Christensen

Ali Connors

Alex Nelson

Anthony Stevens

A

A

1230

Abcdefg

Abcdefghijklmno

Tabs

THE THIRDITEM TWONO ONE

THE THIRDITEM TWONO ONE

1230

THE THIRDITEM TWONO ONE

Page Title

1230

121 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

110 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

51 50

Input text for a single line field with a maximu

Single-Line Input Label

31 50

Input text for a single line field with a max

Single-Line Input Label

121 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

110 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

51 50

Input text for a single line field with a maximuInput text for a single line field with a maximu

Single-Line Input Label

31 50

Input text for a single line field with a maxInput text for a single line field with a max

Single-Line Input Label

Disabled text field

Input text

Username or Password is incorrect

Input text

Input tex

Hint text

Hint text

Hint text

Disabled text field

Input textInput text

Username or Password is incorrect

Input textInput text

Input texInput tex

Hint text

Hint text

Hint text

Text fields

Switches and sliders

60

Regular

Pressed

Disabled

60

Regular

Pressed

Disabled

Buttons

DISABLED

PRESSED

NORMAL

DISABLED

PRESSED

NORMAL

Flat Raised

DISABLED

PRESSED

NORMAL

DISABLED

PRESSED

NORMAL

Flat Raised

Toasts

This color applies to both light and dark theme

This item already has the label ldquotravelrdquo You can add a new label

ACTIONSingle-Line Snackbar

Menu

Arial 100

100

Calibri

Courier

Verdana

Arial

Chips

Trevor Hansen

email3emailcom

email2emailcom

primaryemailemailcomContact Name

Dialogs

Desktop

Without title With title

BUTTONBUTTON

PermissionsLorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Up exlaborum incididunt quis nostrud exercitatn

BUTTONBUTTON

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Ut enim ad minim ikad veniam quis nostrud exercitatn ullamco laboris nisi ut aliquip exlaborum incididunt

ACCEPTDECLINEMORE INFO

Permissions

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisinuli

Toolbar

11Roboto

Cards

Welcome BackItrsquos been a while have you read any new books latelyItrsquos been a while have you read any new books lately

YESNOPE

Kangaroo Valley Safari

Located two hours south of Sydney in the

Southern Highlands of New South Wales

LEARN MORESHARE

REVIEWFREE SAMPLE

By Alex Nelson

El Pooch

Pre-fab Homes

Favorite Road Trips

Best Airlines

Campbell

Groceries

almond milk

coconut water

cucumber

green apples

Yuna tickets on sale 624

May 24 2014

Clean desk

Keyboards

suggestion suggestion suggestion

123

a s d f g h j k l

z x c v b n m

q w e r t y u i o p1 2 3 4 5 6 7 8 9 0

suggestion suggestion suggestion

123

a s d f g h j k l

z x c v b n m

q w e r t y u i o p1 2 3 4 5 6 7 8 9 0

Bottom Sheet

Print this page

Copy

Upload

Share

MoreMail Message

Google+Gmail Hangout

Grid

Two lineSupport text

Two lineSupport text

Single line

Single line

Lists

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Three-line itemThree-line item

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Three-line itemThree-line item

Three-line itemThree-line item

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Three-line itemThree-line item

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Three-line itemThree-line item

Three-line itemThree-line item

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Line item unselectedLine item unselected

Line item selectedLine item selected

Line item selectedLine item selected

Data usageData usage

BluetoothBluetooth

Wi-FiWi-Fi

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Single-line itemSingle-line item

Single-line itemSingle-line item

Single-line itemSingle-line itemSingle-line itemSingle-line item

Single-line itemSingle-line item

Single-line itemSingle-line item

Introduction agrave lrsquoergonomie

Ergonomie et Design34

Cornelia Laros

Design Ergonomie Design Ergonomie

Identiteacute

Communication

Ambiance

Exemple un site institutionnel informatif avec une navigation simple et des exigences fortes

drsquoidentiteacuteExemple une application meacutetier destineacutee agrave une

population drsquoutilisateur connue

EfficaciteacuteFonctionnel

Outils

Service en ligne

Architecture de lrsquoinformation contenus bonnes pratiques

Analyse tache vs activiteacute prise en compte globaliseacutee des process

postes de travail eacutecosystegraveme existant hellip puis la conception

Image Usage freacutequent

Usage ponctuel

Votre eacutequipe Ergonome Directeur aristique Webdesigner UX Designer

Introduction agrave lrsquoergonomie

Design avant-tout35

Cornelia Laros

Introduction agrave lrsquoergonomie

Equilibreacute36

Cornelia Laros

Introduction agrave lrsquoergonomie

Ergonomie avant tout37

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

38

Cornelia Laros

text

Lrsquoergonomie sert agravehellip39

Cornelia Laros

1 ameacuteliorer les conditions de travail

2 faire gagner plus drsquoargent agrave lrsquoentreprise

3 ameacuteliorer lrsquoestheacutetique

4 comprendre comment ameacuteliorer un produit

text

Quelles affirmations sont vraies

40

Cornelia Laros

1 Lrsquoergonomie srsquoattache agrave comprendre le travail pour le transformer

2 Il est possible de concevoir une IHM qui fonctionne pour tout le monde en se basant sur des normes

3 Lrsquoutilisateur va se servir de votre produit de la faccedilon dont vous lrsquoavez imagineacute

4 Lrsquoutilisateur interpregravete une tacircche comme un problegraveme qursquoil doit reacutesoudre en faisant avec ses caracteacuteristiques et les moyens mis agrave sa disposition

text

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

41

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

text

D - A quoi sert un prototype

42

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

43

Cornelia Laros

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

44

Cornelia Laros

Utilisabiliteacute

Utiliteacute

Efficaciteacute Efficience

Satisfaction

Introduction agrave lrsquoergonomie

Pyramide des besoins MASLOW

45

Cornelia Laros

Introduction agrave lrsquoergonomie

Pyramide des besoins IHM46

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

47

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

48

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

49

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

50

Cornelia Laros

Introduction agrave lrsquoergonomie

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

51

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

Introduction agrave lrsquoergonomie

D - A quoi sert un prototype

52

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

53

Cornelia Laros

a Fiable

b Intuitif

c Fonctionnel

d Accessible

e Plaisant

f Porteur de sens

Introduction agrave lrsquoergonomie

F - Quel besoin ai-je oublieacute dans la question

preacuteceacutedente

54

Cornelia Laros

text

Patterns amp Dark patterns

55

Cornelia Laros

text

Criteres de Bastien et Scapin56

Cornelia Laros

Guidage

Charge de travail

Controcircle utilisateur explicite

Flexibiliteacute ( adaptabiliteacute)

Gestion des erreurs

Homogeacuteneacuteiteacute ( coheacuterence)

Signifiance des Codes et Deacutenominations

Compatibiliteacute ( familiariteacute)

Introduction agrave lrsquoergonomie

Guidage57

Cornelia Laros

Introduction agrave lrsquoergonomie

Charge de travail58

Cornelia Laros

Introduction agrave lrsquoergonomie

Controle explicite59

Cornelia Laros

Introduction agrave lrsquoergonomie

Controles explicites60

Cornelia Laros

Dar983595 983541983527t983545983589983590n

text

Adaptabiliteacute61

Cornelia Laros

text

Gestion des erreurs62

Cornelia Laros

text

Signifiance des codes et deacutenominations

63

Cornelia Laros

text

Homogeacuteneacuteiteacute - coheacuterence64

Cornelia Laros

text

Homogeacuteneacuteiteacute - Distinction65

Cornelia Laros

text

Compatibiliteacute66

Cornelia Laros

text

Compatibiliteacute67

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction68

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction69

Cornelia Laros

text

Gestalt Theorie70

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Gestalt Theorie71

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Dark patterns72

Cornelia Laros

Introduction agrave lrsquoergonomie

A vous de jouer

73

Cornelia Laros

Introduction agrave lrsquoergonomie

Outils de prototypages DIY74

Cornelia Laros

Low tech papier + crayons post-its cartes agrave jouer

Gratuit en ligne Invision app Moqups UXPin

Mac Sketch Balsamiq Mockups Axure

PC Axure Balsamiq

Mobile Prototyping on Paper

Ap983540983590en983530983555 983592983589 no983547983549983589983537le983543 983581h983586983543983589983588

Introduction agrave lrsquoergonomie

Test de perception DIY75

Cornelia Laros

La premiegravere impression qursquoun utilisateur se fait de votre IHM va influencer tous ses jugements ulteacuterieurs Crsquoest lrsquoeffet de halo

bull Un utilisateur qui a une premiegravere impression positive de votre appli passera plus facilement outre les bugs

bull Une premiegravere impression negative rendra lrsquoutilisateur plus critique vis agrave vis de deacutetails qui confirment son jugement

Cel983527 983538983580983590c983532e 983527983548983588si 983527983549983589983581 vo983543 983586983590983580ux 983591rsquoex983527983538983589983585s vo983543 983530983585t983542983589983546i983530n983543 983592rsquoem983528983527983548983581he 983530983545 983550983587s 983542e983585d983530983555-vo983547983543 983581l983535e983539983546s

Introduction agrave lrsquoergonomie

Test de perception DIY76

Cornelia Laros

Montrer votre prototype agrave quelqursquoun pendant 5 secondes

Demandez-lui

bull Ce qursquoil a vu

bull Ce qursquoil a compris de ce qursquoil a vu

bull Ce qui lrsquoa surpris ou marqueacute

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY77

Cornelia Laros

Les difficulteacutes de navigation se produisent souvent dans les niveaux les plus haut de votre structure de contenu Vous pouvez veacuterifier facilement si la classification logique pour vous lrsquoest aussi pour vos utilisateurs

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY78

Cornelia Laros

Lister trois (max) niveaux de profondeur de votre contenu structureacute Masquez ensuite les contenus de niveau plus bas Utilisez par exemple les groupements de lignes dans excel pour creacuteer des pliers-deacutepliers ou imprimer la liste sur une feuille que vous pliez pour masquer certaines parties

Demandez agrave un utilisateur de vous dire ougrave il penserait trouver un contenu bien preacutecis en preacutecisant qursquoil nrsquoy a pas de bonne reacuteponse

Notez srsquoil va chercher lagrave ougrave vous vous y attendiez ougrave il a heacutesiteacute et ce qursquoil a fini par choisir pour vous aider agrave rendre la navigation plus intuitive

Introduction agrave lrsquoergonomie

Test drsquoutilisabiliteacute DIY79

Cornelia Laros

A chaque nouvelle fonctionnaliteacute ajouteacutee demandez agrave quelqursquoun qui ne connait pas le projet de srsquoen servir Proposez lui une seule tacircche geacuteneacuterique agrave accomplir avec la fonctionnaliteacute

Exemple Tu veux prendre un rendez-vous avec un meacutedecin sur ce site montres-moi comment tu ferais en commentant agrave haute voix

Le plus important ici crsquoest de ne pas reacuteagir agrave ce qursquoil fait mais simplement le regarder faire sans lrsquoaider mecircme srsquoil est bloqueacute

Srsquoil 983540983586983588983589 de983543 983578983547983589s983545i983586983585s reacutepo983539983592983530z 983540983580983590 un983530 983577983548e983588t983534983587983539 o983547 d983535983545e983588 l983547983535 983577u983530 983550983587us 983536983547983535 983590eacutepo983539983592r983530983555 983578983548an983591 983534983537 983580ur983527 fi983539983535 983588rsquoil 983534983539983588983535s983545e Srsquoil 983530983543983546 v983542983580i983593983530n983545 983529l983587983577ueacute di983545983530983588 l983548i 983577983547983589 983550o983547s 983580983536983537ez 983542983530983550983587ir 983549983586983546r983589 983579o983541983534983589 et 983530983543983588983580ye983555 983592983530 c983587983538983541re983539983592r983530 983579983589 983578u983534 l983589 9835316ne

Introduction agrave lrsquoergonomie

Pas besoin de reacuteinventer la roue DIY

80

Cornelia Laros

Il existe des bonnes pratiques qui vous eacuteviteront de reacuteinventer la roue Utilisez des laquo design patterns raquo pour concevoir vos interfaces

Renseignez vous sur la Gestalt Theorie pour agencer vos pages

Utilisez les critegraveres de Bastien et Scapin pour trouver des deacutefauts eacutevidents avant de tester vous en tirerez des enseignements plus inteacuteressants

Ma983534s ccedila crsquoes983545 983541983586983548r u983539983530 983580u983546r983530 983559983587i983588

Introduction agrave lrsquoergonomie

Quizz time

81

Cornelia Laros

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

82

Cornelia Laros

1 c Fonctionnel

2 a Fiable

3 d Accessible

4 b Intuitif

5 e Plaisant

6 f Porteur de sens

text

F - Quel besoin ai-je oublieacute dans la question preacuteceacutedente

83

Cornelia Laros

Uti983536983534983588983580b983536e

Introduction agrave lrsquoergonomie

Tests DIY84

Cornelia Laros

Reacutedigez la proceacutedure pour tester un de vos projets drsquoIHM avec le test de votre choix perception arborescence ou utilisabiliteacute

Notez la question que vous vous posez et la question que vous allez poser

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

Introduction agrave lrsquoergonomie

Prototyper pour vous crsquoesthellip30

Cornelia Laros

CONTRIBUTION AUX SPECIFICATIONS FONCTIONNELLES

Zoning basse fideacuteliteacute wireframe statique (sketch ou non) bull Rapide et peu couteux bull Illustratif statique pas drsquointeraction bull Non engageant sur le design bull Tregraves peu explicite sur le plan fonctionnel

Story-board cliquable bull Illustre la navigation bull Permet de se projeter dans lrsquointeraction bull Pose les bases du design et du fonctionnel

Prototype semi-dynamique bull Se veut complet (ou quasi) sur le plan de la

navigation de lrsquointeraction et des cas drsquoutilisation bull Doit permettre de simuler fidegravelement le

fonctionnement drsquoune application bull Est une speacutecification fonctionnelle en soi

Pha983543983530 983592983589 ca983591983590983527g983589 AM983623983607

Pha983543983530 983592983589 co983539983581983530p983545983535o983585 f983586983539983581t983535o983539983585983530l983536983589

Tes983545983588 983547t983535983536i983588983527t983589u983542983588 ap983540983537983534s 983538983587983529il983530983543hellip

Introduction agrave lrsquoergonomie

Prototype basse definition31

Cornelia Laros

Introduction agrave lrsquoergonomie

Prototyper cliquable32

Cornelia Laros

Introduction agrave lrsquoergonomie

Prototyper semi-dynamique33

Cornelia Laros

Page Title

1230

Mobile interactions

Observably Sc i$amp

About

Project overiew

Manage sessions

Manage variables

Settings

Start observing

1230 1230

OverviewObserve

Observe mobile interactions in the field to assess dominant hand for holding and interacting with smartphones

10042016Mobile interactionsMobile interactions

Welcome to Observably Gather and manage observation dataGather and manage observation data

My projects

1230

Tags separate with comas

Variable value

Create

Add observablesAdd all observables you want to track for this project You can come back and edit them laterAdd all observables you want to track for this project You can come back and edit them later

Thanks for the hint

Manage variablesMobile InteractionsMobile Interactions

1230

Tags separate with comas

Variable value

Create

Left hand Right thumbLRTLRT

Manage variablesMobile InteractionsMobile Interactions

Irsquom done Start recording

Save changesCancel

Observable Tags separate with coma

Tags separate with comas

3 20

LRILRI

Observable label

Did you knowTap on the icon to customize it Use icons from our library or from your gallery to make variables pop out when observing

Tap on the icon to customize it Use icons from our library or from your gallery to make variables pop out when observing

Thanks for the hint

Left hand Right thumbLRTLRT

Irsquom done Start recording

Manage variablesMobile InteractionsMobile Interactions

Left hand x Right thumb x

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Did you knowIf you make a mistake you can undo your action by tapping on the icon of the taskIf you make a mistake you can undo your action by tapping on the icon of the task

Thanks for the hint

Session 1

Discrete mode New Session

Mobile InteractionsMobile Interactions

1230

Record vocal comment

LRILRILRILRILRILRI

Did you knowYou can record occurences durations and comments by chosing the record format in the drop-down above

You can record occurences durations and comments by chosing the record format in the drop-down above

Thanks for the hint

Discrete mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

Left hand Right thumbLRT

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Did you knowIn list view you can slipe left and right to increment or correct your countIn list view you can slipe left and right to increment or correct your count

Thanks for the hint

Continuous mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

LRILRILRILRILRI

Did you knowIf you make a mistake you can undo your action by tapping on the icon of the taskIf you make a mistake you can undo your action by tapping on the icon of the task

Thanks for the hint

Continuous mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

Tags separate with comas

Comment

Add

Did you know The timestamp of vocal comments is the start time to accurately mark events that triggered your comment

The timestamp of vocal comments is the start time to accurately mark events that triggered your comment

Thanks for the hint

Manage observables

Comments mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Stop recording vocal comment

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Your observationsManage and cleanup sessions before exporting dataManage and cleanup sessions before exporting data

Session ManagementMobile InteractionsMobile Interactions

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

LRT

LRI

RLI

RLT

RRT20

20

8

35

15

Count SummaryCount Summary

RLT

RRT20

815

Time SummaryTime Summary

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

Left hand Right thumbLRTLRT

+1+1

10042016 124627

Left hand Right thumbLRTLRT

2rsquorsquo2rsquorsquo

10042016 124627 - 10042016 124629

Content of my comment boxTag1 Tag2

10042016 124644

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

LRTLRT+1+1

10042016 124627

Save changes

Observable Tags separate with coma

Tags separate with comas

Left hand x Right thumb x

AboutAbout

1230

Observable science provides tools for field research and scientific observation It is tailored to the needs of ethnography human factors psychology usability and games user research

Observable science provides tools for field research and scientific observation It is tailored to the needs of ethnography human factors psychology usability and games user research

Observablyscience

Development by Morgane RadelDesign by Cornelia LarosDevelopment by Morgane RadelDesign by Cornelia Laros

Credits

Support (us)Show your love Rate the App

Make a donation

Contact us

Visit our website

Add session tags to all observations

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

Save changes

Session Tags separate with coma

Tags separate with comas

Metro x Toulouse x

Manage variablesMobile InteractionsMobile Interactions

1230

Left hand Right thumbLRTLRT

Confirm

Search icons

Cancel

Browse

3 20

Observably Sci$amp

1230

Project statisticsProject statistics Total countsTotal time Total comments First entryLast entrySessions

4 963281231

1441201201603042016

97

Project detailsMobile InteractionsMobile Interactions

Sessions SummarySessions Summary

RRT20

815

Count SummaryCount Summary

JUN 14MAY 14APR 14MAR 14FEB 14JAN 14

4

1

65

7

0

2

4

6

8

10

3

2014

Manage sessions

Settings ExportOverview

1230

App optionsDisplay hintsDisplay hints

SettingsSettings

Share anonymous data to improve the appShare anonymous data to improve the app

1230

Gather and manage observation data with ObservablyGather and manage observation data with Observably

Welcome to Observably

Project name

Project description what is the goal of your project

CreateCancel

Session[number]Session[number]

Default Session ID

Default export format txt

Data options

Default Discrete variable lines view

Create a new project

1230

Project detailsMobile InteractionsMobile Interactions

Mobile InteractionsMobile Interactions

Project description what is the goal of your project

SaveCancel

Session[number]Session[number]

Default Session ID

Default export format txt

Data options

Default continuous variables grid view

Project name

Manage sessions

Settings ExportOverview

1230

Project detailsMobile InteractionsMobile Interactions

Manage sessions

Settings ExportOverview

Export format txt

Export data

Data has been successfully exported as MobileInteractionstxt

to your download folder

Observably Sc i$amp

Settings

1230

BUTTONBUTTON

Permissions

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Up exlaborum incididunt quis nostrud exercitatn

COMPONENTS

Pickers

OKCANCEL

13

Friday

MAR

2014

MS W T F ST

30 31

1

16 17 19 20 21 2218

23 24 26 27 28 2925

139 10 12 14 1511

72 3 5 6 84

March 2014

OKCANCEL

PMAM

112

9

10

11

2

48

576

3

330 AM

Notifications

Incoming call

Rachel Ligson

IGNORE ANSWER

REPLYARCHIVE

Hey letrsquos catch up soon Do you want to grab lunch sometime this weekendLet me know when yoursquore free

409 PMHannah ChoHannah Cho

Do you know what I mean509 PMTina McBeanTina McBean

Heads up notification

Regular + Expanded notification

Index scroller

All

Patrick Keenan

Mary Johnson

Tina Santiago

Trevor Hansen

Amar Sagoo

Abbey Christensen

Ali Connors

Alex Nelson

Anthony Stevens

A

A

1230

Abcdefg

Abcdefghijklmno

Tabs

THE THIRDITEM TWONO ONE

THE THIRDITEM TWONO ONE

1230

THE THIRDITEM TWONO ONE

Page Title

1230

121 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

110 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

51 50

Input text for a single line field with a maximu

Single-Line Input Label

31 50

Input text for a single line field with a max

Single-Line Input Label

121 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

110 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

51 50

Input text for a single line field with a maximuInput text for a single line field with a maximu

Single-Line Input Label

31 50

Input text for a single line field with a maxInput text for a single line field with a max

Single-Line Input Label

Disabled text field

Input text

Username or Password is incorrect

Input text

Input tex

Hint text

Hint text

Hint text

Disabled text field

Input textInput text

Username or Password is incorrect

Input textInput text

Input texInput tex

Hint text

Hint text

Hint text

Text fields

Switches and sliders

60

Regular

Pressed

Disabled

60

Regular

Pressed

Disabled

Buttons

DISABLED

PRESSED

NORMAL

DISABLED

PRESSED

NORMAL

Flat Raised

DISABLED

PRESSED

NORMAL

DISABLED

PRESSED

NORMAL

Flat Raised

Toasts

This color applies to both light and dark theme

This item already has the label ldquotravelrdquo You can add a new label

ACTIONSingle-Line Snackbar

Menu

Arial 100

100

Calibri

Courier

Verdana

Arial

Chips

Trevor Hansen

email3emailcom

email2emailcom

primaryemailemailcomContact Name

Dialogs

Desktop

Without title With title

BUTTONBUTTON

PermissionsLorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Up exlaborum incididunt quis nostrud exercitatn

BUTTONBUTTON

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Ut enim ad minim ikad veniam quis nostrud exercitatn ullamco laboris nisi ut aliquip exlaborum incididunt

ACCEPTDECLINEMORE INFO

Permissions

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisinuli

Toolbar

11Roboto

Cards

Welcome BackItrsquos been a while have you read any new books latelyItrsquos been a while have you read any new books lately

YESNOPE

Kangaroo Valley Safari

Located two hours south of Sydney in the

Southern Highlands of New South Wales

LEARN MORESHARE

REVIEWFREE SAMPLE

By Alex Nelson

El Pooch

Pre-fab Homes

Favorite Road Trips

Best Airlines

Campbell

Groceries

almond milk

coconut water

cucumber

green apples

Yuna tickets on sale 624

May 24 2014

Clean desk

Keyboards

suggestion suggestion suggestion

123

a s d f g h j k l

z x c v b n m

q w e r t y u i o p1 2 3 4 5 6 7 8 9 0

suggestion suggestion suggestion

123

a s d f g h j k l

z x c v b n m

q w e r t y u i o p1 2 3 4 5 6 7 8 9 0

Bottom Sheet

Print this page

Copy

Upload

Share

MoreMail Message

Google+Gmail Hangout

Grid

Two lineSupport text

Two lineSupport text

Single line

Single line

Lists

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Three-line itemThree-line item

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Three-line itemThree-line item

Three-line itemThree-line item

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Three-line itemThree-line item

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Three-line itemThree-line item

Three-line itemThree-line item

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Line item unselectedLine item unselected

Line item selectedLine item selected

Line item selectedLine item selected

Data usageData usage

BluetoothBluetooth

Wi-FiWi-Fi

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Single-line itemSingle-line item

Single-line itemSingle-line item

Single-line itemSingle-line itemSingle-line itemSingle-line item

Single-line itemSingle-line item

Single-line itemSingle-line item

Introduction agrave lrsquoergonomie

Ergonomie et Design34

Cornelia Laros

Design Ergonomie Design Ergonomie

Identiteacute

Communication

Ambiance

Exemple un site institutionnel informatif avec une navigation simple et des exigences fortes

drsquoidentiteacuteExemple une application meacutetier destineacutee agrave une

population drsquoutilisateur connue

EfficaciteacuteFonctionnel

Outils

Service en ligne

Architecture de lrsquoinformation contenus bonnes pratiques

Analyse tache vs activiteacute prise en compte globaliseacutee des process

postes de travail eacutecosystegraveme existant hellip puis la conception

Image Usage freacutequent

Usage ponctuel

Votre eacutequipe Ergonome Directeur aristique Webdesigner UX Designer

Introduction agrave lrsquoergonomie

Design avant-tout35

Cornelia Laros

Introduction agrave lrsquoergonomie

Equilibreacute36

Cornelia Laros

Introduction agrave lrsquoergonomie

Ergonomie avant tout37

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

38

Cornelia Laros

text

Lrsquoergonomie sert agravehellip39

Cornelia Laros

1 ameacuteliorer les conditions de travail

2 faire gagner plus drsquoargent agrave lrsquoentreprise

3 ameacuteliorer lrsquoestheacutetique

4 comprendre comment ameacuteliorer un produit

text

Quelles affirmations sont vraies

40

Cornelia Laros

1 Lrsquoergonomie srsquoattache agrave comprendre le travail pour le transformer

2 Il est possible de concevoir une IHM qui fonctionne pour tout le monde en se basant sur des normes

3 Lrsquoutilisateur va se servir de votre produit de la faccedilon dont vous lrsquoavez imagineacute

4 Lrsquoutilisateur interpregravete une tacircche comme un problegraveme qursquoil doit reacutesoudre en faisant avec ses caracteacuteristiques et les moyens mis agrave sa disposition

text

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

41

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

text

D - A quoi sert un prototype

42

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

43

Cornelia Laros

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

44

Cornelia Laros

Utilisabiliteacute

Utiliteacute

Efficaciteacute Efficience

Satisfaction

Introduction agrave lrsquoergonomie

Pyramide des besoins MASLOW

45

Cornelia Laros

Introduction agrave lrsquoergonomie

Pyramide des besoins IHM46

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

47

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

48

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

49

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

50

Cornelia Laros

Introduction agrave lrsquoergonomie

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

51

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

Introduction agrave lrsquoergonomie

D - A quoi sert un prototype

52

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

53

Cornelia Laros

a Fiable

b Intuitif

c Fonctionnel

d Accessible

e Plaisant

f Porteur de sens

Introduction agrave lrsquoergonomie

F - Quel besoin ai-je oublieacute dans la question

preacuteceacutedente

54

Cornelia Laros

text

Patterns amp Dark patterns

55

Cornelia Laros

text

Criteres de Bastien et Scapin56

Cornelia Laros

Guidage

Charge de travail

Controcircle utilisateur explicite

Flexibiliteacute ( adaptabiliteacute)

Gestion des erreurs

Homogeacuteneacuteiteacute ( coheacuterence)

Signifiance des Codes et Deacutenominations

Compatibiliteacute ( familiariteacute)

Introduction agrave lrsquoergonomie

Guidage57

Cornelia Laros

Introduction agrave lrsquoergonomie

Charge de travail58

Cornelia Laros

Introduction agrave lrsquoergonomie

Controle explicite59

Cornelia Laros

Introduction agrave lrsquoergonomie

Controles explicites60

Cornelia Laros

Dar983595 983541983527t983545983589983590n

text

Adaptabiliteacute61

Cornelia Laros

text

Gestion des erreurs62

Cornelia Laros

text

Signifiance des codes et deacutenominations

63

Cornelia Laros

text

Homogeacuteneacuteiteacute - coheacuterence64

Cornelia Laros

text

Homogeacuteneacuteiteacute - Distinction65

Cornelia Laros

text

Compatibiliteacute66

Cornelia Laros

text

Compatibiliteacute67

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction68

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction69

Cornelia Laros

text

Gestalt Theorie70

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Gestalt Theorie71

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Dark patterns72

Cornelia Laros

Introduction agrave lrsquoergonomie

A vous de jouer

73

Cornelia Laros

Introduction agrave lrsquoergonomie

Outils de prototypages DIY74

Cornelia Laros

Low tech papier + crayons post-its cartes agrave jouer

Gratuit en ligne Invision app Moqups UXPin

Mac Sketch Balsamiq Mockups Axure

PC Axure Balsamiq

Mobile Prototyping on Paper

Ap983540983590en983530983555 983592983589 no983547983549983589983537le983543 983581h983586983543983589983588

Introduction agrave lrsquoergonomie

Test de perception DIY75

Cornelia Laros

La premiegravere impression qursquoun utilisateur se fait de votre IHM va influencer tous ses jugements ulteacuterieurs Crsquoest lrsquoeffet de halo

bull Un utilisateur qui a une premiegravere impression positive de votre appli passera plus facilement outre les bugs

bull Une premiegravere impression negative rendra lrsquoutilisateur plus critique vis agrave vis de deacutetails qui confirment son jugement

Cel983527 983538983580983590c983532e 983527983548983588si 983527983549983589983581 vo983543 983586983590983580ux 983591rsquoex983527983538983589983585s vo983543 983530983585t983542983589983546i983530n983543 983592rsquoem983528983527983548983581he 983530983545 983550983587s 983542e983585d983530983555-vo983547983543 983581l983535e983539983546s

Introduction agrave lrsquoergonomie

Test de perception DIY76

Cornelia Laros

Montrer votre prototype agrave quelqursquoun pendant 5 secondes

Demandez-lui

bull Ce qursquoil a vu

bull Ce qursquoil a compris de ce qursquoil a vu

bull Ce qui lrsquoa surpris ou marqueacute

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY77

Cornelia Laros

Les difficulteacutes de navigation se produisent souvent dans les niveaux les plus haut de votre structure de contenu Vous pouvez veacuterifier facilement si la classification logique pour vous lrsquoest aussi pour vos utilisateurs

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY78

Cornelia Laros

Lister trois (max) niveaux de profondeur de votre contenu structureacute Masquez ensuite les contenus de niveau plus bas Utilisez par exemple les groupements de lignes dans excel pour creacuteer des pliers-deacutepliers ou imprimer la liste sur une feuille que vous pliez pour masquer certaines parties

Demandez agrave un utilisateur de vous dire ougrave il penserait trouver un contenu bien preacutecis en preacutecisant qursquoil nrsquoy a pas de bonne reacuteponse

Notez srsquoil va chercher lagrave ougrave vous vous y attendiez ougrave il a heacutesiteacute et ce qursquoil a fini par choisir pour vous aider agrave rendre la navigation plus intuitive

Introduction agrave lrsquoergonomie

Test drsquoutilisabiliteacute DIY79

Cornelia Laros

A chaque nouvelle fonctionnaliteacute ajouteacutee demandez agrave quelqursquoun qui ne connait pas le projet de srsquoen servir Proposez lui une seule tacircche geacuteneacuterique agrave accomplir avec la fonctionnaliteacute

Exemple Tu veux prendre un rendez-vous avec un meacutedecin sur ce site montres-moi comment tu ferais en commentant agrave haute voix

Le plus important ici crsquoest de ne pas reacuteagir agrave ce qursquoil fait mais simplement le regarder faire sans lrsquoaider mecircme srsquoil est bloqueacute

Srsquoil 983540983586983588983589 de983543 983578983547983589s983545i983586983585s reacutepo983539983592983530z 983540983580983590 un983530 983577983548e983588t983534983587983539 o983547 d983535983545e983588 l983547983535 983577u983530 983550983587us 983536983547983535 983590eacutepo983539983592r983530983555 983578983548an983591 983534983537 983580ur983527 fi983539983535 983588rsquoil 983534983539983588983535s983545e Srsquoil 983530983543983546 v983542983580i983593983530n983545 983529l983587983577ueacute di983545983530983588 l983548i 983577983547983589 983550o983547s 983580983536983537ez 983542983530983550983587ir 983549983586983546r983589 983579o983541983534983589 et 983530983543983588983580ye983555 983592983530 c983587983538983541re983539983592r983530 983579983589 983578u983534 l983589 9835316ne

Introduction agrave lrsquoergonomie

Pas besoin de reacuteinventer la roue DIY

80

Cornelia Laros

Il existe des bonnes pratiques qui vous eacuteviteront de reacuteinventer la roue Utilisez des laquo design patterns raquo pour concevoir vos interfaces

Renseignez vous sur la Gestalt Theorie pour agencer vos pages

Utilisez les critegraveres de Bastien et Scapin pour trouver des deacutefauts eacutevidents avant de tester vous en tirerez des enseignements plus inteacuteressants

Ma983534s ccedila crsquoes983545 983541983586983548r u983539983530 983580u983546r983530 983559983587i983588

Introduction agrave lrsquoergonomie

Quizz time

81

Cornelia Laros

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

82

Cornelia Laros

1 c Fonctionnel

2 a Fiable

3 d Accessible

4 b Intuitif

5 e Plaisant

6 f Porteur de sens

text

F - Quel besoin ai-je oublieacute dans la question preacuteceacutedente

83

Cornelia Laros

Uti983536983534983588983580b983536e

Introduction agrave lrsquoergonomie

Tests DIY84

Cornelia Laros

Reacutedigez la proceacutedure pour tester un de vos projets drsquoIHM avec le test de votre choix perception arborescence ou utilisabiliteacute

Notez la question que vous vous posez et la question que vous allez poser

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

Introduction agrave lrsquoergonomie

Prototype basse definition31

Cornelia Laros

Introduction agrave lrsquoergonomie

Prototyper cliquable32

Cornelia Laros

Introduction agrave lrsquoergonomie

Prototyper semi-dynamique33

Cornelia Laros

Page Title

1230

Mobile interactions

Observably Sc i$amp

About

Project overiew

Manage sessions

Manage variables

Settings

Start observing

1230 1230

OverviewObserve

Observe mobile interactions in the field to assess dominant hand for holding and interacting with smartphones

10042016Mobile interactionsMobile interactions

Welcome to Observably Gather and manage observation dataGather and manage observation data

My projects

1230

Tags separate with comas

Variable value

Create

Add observablesAdd all observables you want to track for this project You can come back and edit them laterAdd all observables you want to track for this project You can come back and edit them later

Thanks for the hint

Manage variablesMobile InteractionsMobile Interactions

1230

Tags separate with comas

Variable value

Create

Left hand Right thumbLRTLRT

Manage variablesMobile InteractionsMobile Interactions

Irsquom done Start recording

Save changesCancel

Observable Tags separate with coma

Tags separate with comas

3 20

LRILRI

Observable label

Did you knowTap on the icon to customize it Use icons from our library or from your gallery to make variables pop out when observing

Tap on the icon to customize it Use icons from our library or from your gallery to make variables pop out when observing

Thanks for the hint

Left hand Right thumbLRTLRT

Irsquom done Start recording

Manage variablesMobile InteractionsMobile Interactions

Left hand x Right thumb x

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Did you knowIf you make a mistake you can undo your action by tapping on the icon of the taskIf you make a mistake you can undo your action by tapping on the icon of the task

Thanks for the hint

Session 1

Discrete mode New Session

Mobile InteractionsMobile Interactions

1230

Record vocal comment

LRILRILRILRILRILRI

Did you knowYou can record occurences durations and comments by chosing the record format in the drop-down above

You can record occurences durations and comments by chosing the record format in the drop-down above

Thanks for the hint

Discrete mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

Left hand Right thumbLRT

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Did you knowIn list view you can slipe left and right to increment or correct your countIn list view you can slipe left and right to increment or correct your count

Thanks for the hint

Continuous mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

LRILRILRILRILRI

Did you knowIf you make a mistake you can undo your action by tapping on the icon of the taskIf you make a mistake you can undo your action by tapping on the icon of the task

Thanks for the hint

Continuous mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

Tags separate with comas

Comment

Add

Did you know The timestamp of vocal comments is the start time to accurately mark events that triggered your comment

The timestamp of vocal comments is the start time to accurately mark events that triggered your comment

Thanks for the hint

Manage observables

Comments mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Stop recording vocal comment

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Your observationsManage and cleanup sessions before exporting dataManage and cleanup sessions before exporting data

Session ManagementMobile InteractionsMobile Interactions

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

LRT

LRI

RLI

RLT

RRT20

20

8

35

15

Count SummaryCount Summary

RLT

RRT20

815

Time SummaryTime Summary

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

Left hand Right thumbLRTLRT

+1+1

10042016 124627

Left hand Right thumbLRTLRT

2rsquorsquo2rsquorsquo

10042016 124627 - 10042016 124629

Content of my comment boxTag1 Tag2

10042016 124644

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

LRTLRT+1+1

10042016 124627

Save changes

Observable Tags separate with coma

Tags separate with comas

Left hand x Right thumb x

AboutAbout

1230

Observable science provides tools for field research and scientific observation It is tailored to the needs of ethnography human factors psychology usability and games user research

Observable science provides tools for field research and scientific observation It is tailored to the needs of ethnography human factors psychology usability and games user research

Observablyscience

Development by Morgane RadelDesign by Cornelia LarosDevelopment by Morgane RadelDesign by Cornelia Laros

Credits

Support (us)Show your love Rate the App

Make a donation

Contact us

Visit our website

Add session tags to all observations

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

Save changes

Session Tags separate with coma

Tags separate with comas

Metro x Toulouse x

Manage variablesMobile InteractionsMobile Interactions

1230

Left hand Right thumbLRTLRT

Confirm

Search icons

Cancel

Browse

3 20

Observably Sci$amp

1230

Project statisticsProject statistics Total countsTotal time Total comments First entryLast entrySessions

4 963281231

1441201201603042016

97

Project detailsMobile InteractionsMobile Interactions

Sessions SummarySessions Summary

RRT20

815

Count SummaryCount Summary

JUN 14MAY 14APR 14MAR 14FEB 14JAN 14

4

1

65

7

0

2

4

6

8

10

3

2014

Manage sessions

Settings ExportOverview

1230

App optionsDisplay hintsDisplay hints

SettingsSettings

Share anonymous data to improve the appShare anonymous data to improve the app

1230

Gather and manage observation data with ObservablyGather and manage observation data with Observably

Welcome to Observably

Project name

Project description what is the goal of your project

CreateCancel

Session[number]Session[number]

Default Session ID

Default export format txt

Data options

Default Discrete variable lines view

Create a new project

1230

Project detailsMobile InteractionsMobile Interactions

Mobile InteractionsMobile Interactions

Project description what is the goal of your project

SaveCancel

Session[number]Session[number]

Default Session ID

Default export format txt

Data options

Default continuous variables grid view

Project name

Manage sessions

Settings ExportOverview

1230

Project detailsMobile InteractionsMobile Interactions

Manage sessions

Settings ExportOverview

Export format txt

Export data

Data has been successfully exported as MobileInteractionstxt

to your download folder

Observably Sc i$amp

Settings

1230

BUTTONBUTTON

Permissions

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Up exlaborum incididunt quis nostrud exercitatn

COMPONENTS

Pickers

OKCANCEL

13

Friday

MAR

2014

MS W T F ST

30 31

1

16 17 19 20 21 2218

23 24 26 27 28 2925

139 10 12 14 1511

72 3 5 6 84

March 2014

OKCANCEL

PMAM

112

9

10

11

2

48

576

3

330 AM

Notifications

Incoming call

Rachel Ligson

IGNORE ANSWER

REPLYARCHIVE

Hey letrsquos catch up soon Do you want to grab lunch sometime this weekendLet me know when yoursquore free

409 PMHannah ChoHannah Cho

Do you know what I mean509 PMTina McBeanTina McBean

Heads up notification

Regular + Expanded notification

Index scroller

All

Patrick Keenan

Mary Johnson

Tina Santiago

Trevor Hansen

Amar Sagoo

Abbey Christensen

Ali Connors

Alex Nelson

Anthony Stevens

A

A

1230

Abcdefg

Abcdefghijklmno

Tabs

THE THIRDITEM TWONO ONE

THE THIRDITEM TWONO ONE

1230

THE THIRDITEM TWONO ONE

Page Title

1230

121 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

110 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

51 50

Input text for a single line field with a maximu

Single-Line Input Label

31 50

Input text for a single line field with a max

Single-Line Input Label

121 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

110 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

51 50

Input text for a single line field with a maximuInput text for a single line field with a maximu

Single-Line Input Label

31 50

Input text for a single line field with a maxInput text for a single line field with a max

Single-Line Input Label

Disabled text field

Input text

Username or Password is incorrect

Input text

Input tex

Hint text

Hint text

Hint text

Disabled text field

Input textInput text

Username or Password is incorrect

Input textInput text

Input texInput tex

Hint text

Hint text

Hint text

Text fields

Switches and sliders

60

Regular

Pressed

Disabled

60

Regular

Pressed

Disabled

Buttons

DISABLED

PRESSED

NORMAL

DISABLED

PRESSED

NORMAL

Flat Raised

DISABLED

PRESSED

NORMAL

DISABLED

PRESSED

NORMAL

Flat Raised

Toasts

This color applies to both light and dark theme

This item already has the label ldquotravelrdquo You can add a new label

ACTIONSingle-Line Snackbar

Menu

Arial 100

100

Calibri

Courier

Verdana

Arial

Chips

Trevor Hansen

email3emailcom

email2emailcom

primaryemailemailcomContact Name

Dialogs

Desktop

Without title With title

BUTTONBUTTON

PermissionsLorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Up exlaborum incididunt quis nostrud exercitatn

BUTTONBUTTON

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Ut enim ad minim ikad veniam quis nostrud exercitatn ullamco laboris nisi ut aliquip exlaborum incididunt

ACCEPTDECLINEMORE INFO

Permissions

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisinuli

Toolbar

11Roboto

Cards

Welcome BackItrsquos been a while have you read any new books latelyItrsquos been a while have you read any new books lately

YESNOPE

Kangaroo Valley Safari

Located two hours south of Sydney in the

Southern Highlands of New South Wales

LEARN MORESHARE

REVIEWFREE SAMPLE

By Alex Nelson

El Pooch

Pre-fab Homes

Favorite Road Trips

Best Airlines

Campbell

Groceries

almond milk

coconut water

cucumber

green apples

Yuna tickets on sale 624

May 24 2014

Clean desk

Keyboards

suggestion suggestion suggestion

123

a s d f g h j k l

z x c v b n m

q w e r t y u i o p1 2 3 4 5 6 7 8 9 0

suggestion suggestion suggestion

123

a s d f g h j k l

z x c v b n m

q w e r t y u i o p1 2 3 4 5 6 7 8 9 0

Bottom Sheet

Print this page

Copy

Upload

Share

MoreMail Message

Google+Gmail Hangout

Grid

Two lineSupport text

Two lineSupport text

Single line

Single line

Lists

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Three-line itemThree-line item

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Three-line itemThree-line item

Three-line itemThree-line item

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Three-line itemThree-line item

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Three-line itemThree-line item

Three-line itemThree-line item

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Line item unselectedLine item unselected

Line item selectedLine item selected

Line item selectedLine item selected

Data usageData usage

BluetoothBluetooth

Wi-FiWi-Fi

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Single-line itemSingle-line item

Single-line itemSingle-line item

Single-line itemSingle-line itemSingle-line itemSingle-line item

Single-line itemSingle-line item

Single-line itemSingle-line item

Introduction agrave lrsquoergonomie

Ergonomie et Design34

Cornelia Laros

Design Ergonomie Design Ergonomie

Identiteacute

Communication

Ambiance

Exemple un site institutionnel informatif avec une navigation simple et des exigences fortes

drsquoidentiteacuteExemple une application meacutetier destineacutee agrave une

population drsquoutilisateur connue

EfficaciteacuteFonctionnel

Outils

Service en ligne

Architecture de lrsquoinformation contenus bonnes pratiques

Analyse tache vs activiteacute prise en compte globaliseacutee des process

postes de travail eacutecosystegraveme existant hellip puis la conception

Image Usage freacutequent

Usage ponctuel

Votre eacutequipe Ergonome Directeur aristique Webdesigner UX Designer

Introduction agrave lrsquoergonomie

Design avant-tout35

Cornelia Laros

Introduction agrave lrsquoergonomie

Equilibreacute36

Cornelia Laros

Introduction agrave lrsquoergonomie

Ergonomie avant tout37

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

38

Cornelia Laros

text

Lrsquoergonomie sert agravehellip39

Cornelia Laros

1 ameacuteliorer les conditions de travail

2 faire gagner plus drsquoargent agrave lrsquoentreprise

3 ameacuteliorer lrsquoestheacutetique

4 comprendre comment ameacuteliorer un produit

text

Quelles affirmations sont vraies

40

Cornelia Laros

1 Lrsquoergonomie srsquoattache agrave comprendre le travail pour le transformer

2 Il est possible de concevoir une IHM qui fonctionne pour tout le monde en se basant sur des normes

3 Lrsquoutilisateur va se servir de votre produit de la faccedilon dont vous lrsquoavez imagineacute

4 Lrsquoutilisateur interpregravete une tacircche comme un problegraveme qursquoil doit reacutesoudre en faisant avec ses caracteacuteristiques et les moyens mis agrave sa disposition

text

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

41

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

text

D - A quoi sert un prototype

42

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

43

Cornelia Laros

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

44

Cornelia Laros

Utilisabiliteacute

Utiliteacute

Efficaciteacute Efficience

Satisfaction

Introduction agrave lrsquoergonomie

Pyramide des besoins MASLOW

45

Cornelia Laros

Introduction agrave lrsquoergonomie

Pyramide des besoins IHM46

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

47

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

48

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

49

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

50

Cornelia Laros

Introduction agrave lrsquoergonomie

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

51

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

Introduction agrave lrsquoergonomie

D - A quoi sert un prototype

52

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

53

Cornelia Laros

a Fiable

b Intuitif

c Fonctionnel

d Accessible

e Plaisant

f Porteur de sens

Introduction agrave lrsquoergonomie

F - Quel besoin ai-je oublieacute dans la question

preacuteceacutedente

54

Cornelia Laros

text

Patterns amp Dark patterns

55

Cornelia Laros

text

Criteres de Bastien et Scapin56

Cornelia Laros

Guidage

Charge de travail

Controcircle utilisateur explicite

Flexibiliteacute ( adaptabiliteacute)

Gestion des erreurs

Homogeacuteneacuteiteacute ( coheacuterence)

Signifiance des Codes et Deacutenominations

Compatibiliteacute ( familiariteacute)

Introduction agrave lrsquoergonomie

Guidage57

Cornelia Laros

Introduction agrave lrsquoergonomie

Charge de travail58

Cornelia Laros

Introduction agrave lrsquoergonomie

Controle explicite59

Cornelia Laros

Introduction agrave lrsquoergonomie

Controles explicites60

Cornelia Laros

Dar983595 983541983527t983545983589983590n

text

Adaptabiliteacute61

Cornelia Laros

text

Gestion des erreurs62

Cornelia Laros

text

Signifiance des codes et deacutenominations

63

Cornelia Laros

text

Homogeacuteneacuteiteacute - coheacuterence64

Cornelia Laros

text

Homogeacuteneacuteiteacute - Distinction65

Cornelia Laros

text

Compatibiliteacute66

Cornelia Laros

text

Compatibiliteacute67

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction68

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction69

Cornelia Laros

text

Gestalt Theorie70

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Gestalt Theorie71

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Dark patterns72

Cornelia Laros

Introduction agrave lrsquoergonomie

A vous de jouer

73

Cornelia Laros

Introduction agrave lrsquoergonomie

Outils de prototypages DIY74

Cornelia Laros

Low tech papier + crayons post-its cartes agrave jouer

Gratuit en ligne Invision app Moqups UXPin

Mac Sketch Balsamiq Mockups Axure

PC Axure Balsamiq

Mobile Prototyping on Paper

Ap983540983590en983530983555 983592983589 no983547983549983589983537le983543 983581h983586983543983589983588

Introduction agrave lrsquoergonomie

Test de perception DIY75

Cornelia Laros

La premiegravere impression qursquoun utilisateur se fait de votre IHM va influencer tous ses jugements ulteacuterieurs Crsquoest lrsquoeffet de halo

bull Un utilisateur qui a une premiegravere impression positive de votre appli passera plus facilement outre les bugs

bull Une premiegravere impression negative rendra lrsquoutilisateur plus critique vis agrave vis de deacutetails qui confirment son jugement

Cel983527 983538983580983590c983532e 983527983548983588si 983527983549983589983581 vo983543 983586983590983580ux 983591rsquoex983527983538983589983585s vo983543 983530983585t983542983589983546i983530n983543 983592rsquoem983528983527983548983581he 983530983545 983550983587s 983542e983585d983530983555-vo983547983543 983581l983535e983539983546s

Introduction agrave lrsquoergonomie

Test de perception DIY76

Cornelia Laros

Montrer votre prototype agrave quelqursquoun pendant 5 secondes

Demandez-lui

bull Ce qursquoil a vu

bull Ce qursquoil a compris de ce qursquoil a vu

bull Ce qui lrsquoa surpris ou marqueacute

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY77

Cornelia Laros

Les difficulteacutes de navigation se produisent souvent dans les niveaux les plus haut de votre structure de contenu Vous pouvez veacuterifier facilement si la classification logique pour vous lrsquoest aussi pour vos utilisateurs

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY78

Cornelia Laros

Lister trois (max) niveaux de profondeur de votre contenu structureacute Masquez ensuite les contenus de niveau plus bas Utilisez par exemple les groupements de lignes dans excel pour creacuteer des pliers-deacutepliers ou imprimer la liste sur une feuille que vous pliez pour masquer certaines parties

Demandez agrave un utilisateur de vous dire ougrave il penserait trouver un contenu bien preacutecis en preacutecisant qursquoil nrsquoy a pas de bonne reacuteponse

Notez srsquoil va chercher lagrave ougrave vous vous y attendiez ougrave il a heacutesiteacute et ce qursquoil a fini par choisir pour vous aider agrave rendre la navigation plus intuitive

Introduction agrave lrsquoergonomie

Test drsquoutilisabiliteacute DIY79

Cornelia Laros

A chaque nouvelle fonctionnaliteacute ajouteacutee demandez agrave quelqursquoun qui ne connait pas le projet de srsquoen servir Proposez lui une seule tacircche geacuteneacuterique agrave accomplir avec la fonctionnaliteacute

Exemple Tu veux prendre un rendez-vous avec un meacutedecin sur ce site montres-moi comment tu ferais en commentant agrave haute voix

Le plus important ici crsquoest de ne pas reacuteagir agrave ce qursquoil fait mais simplement le regarder faire sans lrsquoaider mecircme srsquoil est bloqueacute

Srsquoil 983540983586983588983589 de983543 983578983547983589s983545i983586983585s reacutepo983539983592983530z 983540983580983590 un983530 983577983548e983588t983534983587983539 o983547 d983535983545e983588 l983547983535 983577u983530 983550983587us 983536983547983535 983590eacutepo983539983592r983530983555 983578983548an983591 983534983537 983580ur983527 fi983539983535 983588rsquoil 983534983539983588983535s983545e Srsquoil 983530983543983546 v983542983580i983593983530n983545 983529l983587983577ueacute di983545983530983588 l983548i 983577983547983589 983550o983547s 983580983536983537ez 983542983530983550983587ir 983549983586983546r983589 983579o983541983534983589 et 983530983543983588983580ye983555 983592983530 c983587983538983541re983539983592r983530 983579983589 983578u983534 l983589 9835316ne

Introduction agrave lrsquoergonomie

Pas besoin de reacuteinventer la roue DIY

80

Cornelia Laros

Il existe des bonnes pratiques qui vous eacuteviteront de reacuteinventer la roue Utilisez des laquo design patterns raquo pour concevoir vos interfaces

Renseignez vous sur la Gestalt Theorie pour agencer vos pages

Utilisez les critegraveres de Bastien et Scapin pour trouver des deacutefauts eacutevidents avant de tester vous en tirerez des enseignements plus inteacuteressants

Ma983534s ccedila crsquoes983545 983541983586983548r u983539983530 983580u983546r983530 983559983587i983588

Introduction agrave lrsquoergonomie

Quizz time

81

Cornelia Laros

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

82

Cornelia Laros

1 c Fonctionnel

2 a Fiable

3 d Accessible

4 b Intuitif

5 e Plaisant

6 f Porteur de sens

text

F - Quel besoin ai-je oublieacute dans la question preacuteceacutedente

83

Cornelia Laros

Uti983536983534983588983580b983536e

Introduction agrave lrsquoergonomie

Tests DIY84

Cornelia Laros

Reacutedigez la proceacutedure pour tester un de vos projets drsquoIHM avec le test de votre choix perception arborescence ou utilisabiliteacute

Notez la question que vous vous posez et la question que vous allez poser

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

Introduction agrave lrsquoergonomie

Prototyper cliquable32

Cornelia Laros

Introduction agrave lrsquoergonomie

Prototyper semi-dynamique33

Cornelia Laros

Page Title

1230

Mobile interactions

Observably Sc i$amp

About

Project overiew

Manage sessions

Manage variables

Settings

Start observing

1230 1230

OverviewObserve

Observe mobile interactions in the field to assess dominant hand for holding and interacting with smartphones

10042016Mobile interactionsMobile interactions

Welcome to Observably Gather and manage observation dataGather and manage observation data

My projects

1230

Tags separate with comas

Variable value

Create

Add observablesAdd all observables you want to track for this project You can come back and edit them laterAdd all observables you want to track for this project You can come back and edit them later

Thanks for the hint

Manage variablesMobile InteractionsMobile Interactions

1230

Tags separate with comas

Variable value

Create

Left hand Right thumbLRTLRT

Manage variablesMobile InteractionsMobile Interactions

Irsquom done Start recording

Save changesCancel

Observable Tags separate with coma

Tags separate with comas

3 20

LRILRI

Observable label

Did you knowTap on the icon to customize it Use icons from our library or from your gallery to make variables pop out when observing

Tap on the icon to customize it Use icons from our library or from your gallery to make variables pop out when observing

Thanks for the hint

Left hand Right thumbLRTLRT

Irsquom done Start recording

Manage variablesMobile InteractionsMobile Interactions

Left hand x Right thumb x

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Did you knowIf you make a mistake you can undo your action by tapping on the icon of the taskIf you make a mistake you can undo your action by tapping on the icon of the task

Thanks for the hint

Session 1

Discrete mode New Session

Mobile InteractionsMobile Interactions

1230

Record vocal comment

LRILRILRILRILRILRI

Did you knowYou can record occurences durations and comments by chosing the record format in the drop-down above

You can record occurences durations and comments by chosing the record format in the drop-down above

Thanks for the hint

Discrete mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

Left hand Right thumbLRT

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Did you knowIn list view you can slipe left and right to increment or correct your countIn list view you can slipe left and right to increment or correct your count

Thanks for the hint

Continuous mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

LRILRILRILRILRI

Did you knowIf you make a mistake you can undo your action by tapping on the icon of the taskIf you make a mistake you can undo your action by tapping on the icon of the task

Thanks for the hint

Continuous mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

Tags separate with comas

Comment

Add

Did you know The timestamp of vocal comments is the start time to accurately mark events that triggered your comment

The timestamp of vocal comments is the start time to accurately mark events that triggered your comment

Thanks for the hint

Manage observables

Comments mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Stop recording vocal comment

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Your observationsManage and cleanup sessions before exporting dataManage and cleanup sessions before exporting data

Session ManagementMobile InteractionsMobile Interactions

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

LRT

LRI

RLI

RLT

RRT20

20

8

35

15

Count SummaryCount Summary

RLT

RRT20

815

Time SummaryTime Summary

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

Left hand Right thumbLRTLRT

+1+1

10042016 124627

Left hand Right thumbLRTLRT

2rsquorsquo2rsquorsquo

10042016 124627 - 10042016 124629

Content of my comment boxTag1 Tag2

10042016 124644

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

LRTLRT+1+1

10042016 124627

Save changes

Observable Tags separate with coma

Tags separate with comas

Left hand x Right thumb x

AboutAbout

1230

Observable science provides tools for field research and scientific observation It is tailored to the needs of ethnography human factors psychology usability and games user research

Observable science provides tools for field research and scientific observation It is tailored to the needs of ethnography human factors psychology usability and games user research

Observablyscience

Development by Morgane RadelDesign by Cornelia LarosDevelopment by Morgane RadelDesign by Cornelia Laros

Credits

Support (us)Show your love Rate the App

Make a donation

Contact us

Visit our website

Add session tags to all observations

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

Save changes

Session Tags separate with coma

Tags separate with comas

Metro x Toulouse x

Manage variablesMobile InteractionsMobile Interactions

1230

Left hand Right thumbLRTLRT

Confirm

Search icons

Cancel

Browse

3 20

Observably Sci$amp

1230

Project statisticsProject statistics Total countsTotal time Total comments First entryLast entrySessions

4 963281231

1441201201603042016

97

Project detailsMobile InteractionsMobile Interactions

Sessions SummarySessions Summary

RRT20

815

Count SummaryCount Summary

JUN 14MAY 14APR 14MAR 14FEB 14JAN 14

4

1

65

7

0

2

4

6

8

10

3

2014

Manage sessions

Settings ExportOverview

1230

App optionsDisplay hintsDisplay hints

SettingsSettings

Share anonymous data to improve the appShare anonymous data to improve the app

1230

Gather and manage observation data with ObservablyGather and manage observation data with Observably

Welcome to Observably

Project name

Project description what is the goal of your project

CreateCancel

Session[number]Session[number]

Default Session ID

Default export format txt

Data options

Default Discrete variable lines view

Create a new project

1230

Project detailsMobile InteractionsMobile Interactions

Mobile InteractionsMobile Interactions

Project description what is the goal of your project

SaveCancel

Session[number]Session[number]

Default Session ID

Default export format txt

Data options

Default continuous variables grid view

Project name

Manage sessions

Settings ExportOverview

1230

Project detailsMobile InteractionsMobile Interactions

Manage sessions

Settings ExportOverview

Export format txt

Export data

Data has been successfully exported as MobileInteractionstxt

to your download folder

Observably Sc i$amp

Settings

1230

BUTTONBUTTON

Permissions

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Up exlaborum incididunt quis nostrud exercitatn

COMPONENTS

Pickers

OKCANCEL

13

Friday

MAR

2014

MS W T F ST

30 31

1

16 17 19 20 21 2218

23 24 26 27 28 2925

139 10 12 14 1511

72 3 5 6 84

March 2014

OKCANCEL

PMAM

112

9

10

11

2

48

576

3

330 AM

Notifications

Incoming call

Rachel Ligson

IGNORE ANSWER

REPLYARCHIVE

Hey letrsquos catch up soon Do you want to grab lunch sometime this weekendLet me know when yoursquore free

409 PMHannah ChoHannah Cho

Do you know what I mean509 PMTina McBeanTina McBean

Heads up notification

Regular + Expanded notification

Index scroller

All

Patrick Keenan

Mary Johnson

Tina Santiago

Trevor Hansen

Amar Sagoo

Abbey Christensen

Ali Connors

Alex Nelson

Anthony Stevens

A

A

1230

Abcdefg

Abcdefghijklmno

Tabs

THE THIRDITEM TWONO ONE

THE THIRDITEM TWONO ONE

1230

THE THIRDITEM TWONO ONE

Page Title

1230

121 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

110 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

51 50

Input text for a single line field with a maximu

Single-Line Input Label

31 50

Input text for a single line field with a max

Single-Line Input Label

121 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

110 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

51 50

Input text for a single line field with a maximuInput text for a single line field with a maximu

Single-Line Input Label

31 50

Input text for a single line field with a maxInput text for a single line field with a max

Single-Line Input Label

Disabled text field

Input text

Username or Password is incorrect

Input text

Input tex

Hint text

Hint text

Hint text

Disabled text field

Input textInput text

Username or Password is incorrect

Input textInput text

Input texInput tex

Hint text

Hint text

Hint text

Text fields

Switches and sliders

60

Regular

Pressed

Disabled

60

Regular

Pressed

Disabled

Buttons

DISABLED

PRESSED

NORMAL

DISABLED

PRESSED

NORMAL

Flat Raised

DISABLED

PRESSED

NORMAL

DISABLED

PRESSED

NORMAL

Flat Raised

Toasts

This color applies to both light and dark theme

This item already has the label ldquotravelrdquo You can add a new label

ACTIONSingle-Line Snackbar

Menu

Arial 100

100

Calibri

Courier

Verdana

Arial

Chips

Trevor Hansen

email3emailcom

email2emailcom

primaryemailemailcomContact Name

Dialogs

Desktop

Without title With title

BUTTONBUTTON

PermissionsLorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Up exlaborum incididunt quis nostrud exercitatn

BUTTONBUTTON

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Ut enim ad minim ikad veniam quis nostrud exercitatn ullamco laboris nisi ut aliquip exlaborum incididunt

ACCEPTDECLINEMORE INFO

Permissions

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisinuli

Toolbar

11Roboto

Cards

Welcome BackItrsquos been a while have you read any new books latelyItrsquos been a while have you read any new books lately

YESNOPE

Kangaroo Valley Safari

Located two hours south of Sydney in the

Southern Highlands of New South Wales

LEARN MORESHARE

REVIEWFREE SAMPLE

By Alex Nelson

El Pooch

Pre-fab Homes

Favorite Road Trips

Best Airlines

Campbell

Groceries

almond milk

coconut water

cucumber

green apples

Yuna tickets on sale 624

May 24 2014

Clean desk

Keyboards

suggestion suggestion suggestion

123

a s d f g h j k l

z x c v b n m

q w e r t y u i o p1 2 3 4 5 6 7 8 9 0

suggestion suggestion suggestion

123

a s d f g h j k l

z x c v b n m

q w e r t y u i o p1 2 3 4 5 6 7 8 9 0

Bottom Sheet

Print this page

Copy

Upload

Share

MoreMail Message

Google+Gmail Hangout

Grid

Two lineSupport text

Two lineSupport text

Single line

Single line

Lists

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Three-line itemThree-line item

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Three-line itemThree-line item

Three-line itemThree-line item

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Three-line itemThree-line item

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Three-line itemThree-line item

Three-line itemThree-line item

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Line item unselectedLine item unselected

Line item selectedLine item selected

Line item selectedLine item selected

Data usageData usage

BluetoothBluetooth

Wi-FiWi-Fi

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Single-line itemSingle-line item

Single-line itemSingle-line item

Single-line itemSingle-line itemSingle-line itemSingle-line item

Single-line itemSingle-line item

Single-line itemSingle-line item

Introduction agrave lrsquoergonomie

Ergonomie et Design34

Cornelia Laros

Design Ergonomie Design Ergonomie

Identiteacute

Communication

Ambiance

Exemple un site institutionnel informatif avec une navigation simple et des exigences fortes

drsquoidentiteacuteExemple une application meacutetier destineacutee agrave une

population drsquoutilisateur connue

EfficaciteacuteFonctionnel

Outils

Service en ligne

Architecture de lrsquoinformation contenus bonnes pratiques

Analyse tache vs activiteacute prise en compte globaliseacutee des process

postes de travail eacutecosystegraveme existant hellip puis la conception

Image Usage freacutequent

Usage ponctuel

Votre eacutequipe Ergonome Directeur aristique Webdesigner UX Designer

Introduction agrave lrsquoergonomie

Design avant-tout35

Cornelia Laros

Introduction agrave lrsquoergonomie

Equilibreacute36

Cornelia Laros

Introduction agrave lrsquoergonomie

Ergonomie avant tout37

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

38

Cornelia Laros

text

Lrsquoergonomie sert agravehellip39

Cornelia Laros

1 ameacuteliorer les conditions de travail

2 faire gagner plus drsquoargent agrave lrsquoentreprise

3 ameacuteliorer lrsquoestheacutetique

4 comprendre comment ameacuteliorer un produit

text

Quelles affirmations sont vraies

40

Cornelia Laros

1 Lrsquoergonomie srsquoattache agrave comprendre le travail pour le transformer

2 Il est possible de concevoir une IHM qui fonctionne pour tout le monde en se basant sur des normes

3 Lrsquoutilisateur va se servir de votre produit de la faccedilon dont vous lrsquoavez imagineacute

4 Lrsquoutilisateur interpregravete une tacircche comme un problegraveme qursquoil doit reacutesoudre en faisant avec ses caracteacuteristiques et les moyens mis agrave sa disposition

text

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

41

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

text

D - A quoi sert un prototype

42

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

43

Cornelia Laros

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

44

Cornelia Laros

Utilisabiliteacute

Utiliteacute

Efficaciteacute Efficience

Satisfaction

Introduction agrave lrsquoergonomie

Pyramide des besoins MASLOW

45

Cornelia Laros

Introduction agrave lrsquoergonomie

Pyramide des besoins IHM46

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

47

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

48

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

49

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

50

Cornelia Laros

Introduction agrave lrsquoergonomie

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

51

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

Introduction agrave lrsquoergonomie

D - A quoi sert un prototype

52

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

53

Cornelia Laros

a Fiable

b Intuitif

c Fonctionnel

d Accessible

e Plaisant

f Porteur de sens

Introduction agrave lrsquoergonomie

F - Quel besoin ai-je oublieacute dans la question

preacuteceacutedente

54

Cornelia Laros

text

Patterns amp Dark patterns

55

Cornelia Laros

text

Criteres de Bastien et Scapin56

Cornelia Laros

Guidage

Charge de travail

Controcircle utilisateur explicite

Flexibiliteacute ( adaptabiliteacute)

Gestion des erreurs

Homogeacuteneacuteiteacute ( coheacuterence)

Signifiance des Codes et Deacutenominations

Compatibiliteacute ( familiariteacute)

Introduction agrave lrsquoergonomie

Guidage57

Cornelia Laros

Introduction agrave lrsquoergonomie

Charge de travail58

Cornelia Laros

Introduction agrave lrsquoergonomie

Controle explicite59

Cornelia Laros

Introduction agrave lrsquoergonomie

Controles explicites60

Cornelia Laros

Dar983595 983541983527t983545983589983590n

text

Adaptabiliteacute61

Cornelia Laros

text

Gestion des erreurs62

Cornelia Laros

text

Signifiance des codes et deacutenominations

63

Cornelia Laros

text

Homogeacuteneacuteiteacute - coheacuterence64

Cornelia Laros

text

Homogeacuteneacuteiteacute - Distinction65

Cornelia Laros

text

Compatibiliteacute66

Cornelia Laros

text

Compatibiliteacute67

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction68

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction69

Cornelia Laros

text

Gestalt Theorie70

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Gestalt Theorie71

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Dark patterns72

Cornelia Laros

Introduction agrave lrsquoergonomie

A vous de jouer

73

Cornelia Laros

Introduction agrave lrsquoergonomie

Outils de prototypages DIY74

Cornelia Laros

Low tech papier + crayons post-its cartes agrave jouer

Gratuit en ligne Invision app Moqups UXPin

Mac Sketch Balsamiq Mockups Axure

PC Axure Balsamiq

Mobile Prototyping on Paper

Ap983540983590en983530983555 983592983589 no983547983549983589983537le983543 983581h983586983543983589983588

Introduction agrave lrsquoergonomie

Test de perception DIY75

Cornelia Laros

La premiegravere impression qursquoun utilisateur se fait de votre IHM va influencer tous ses jugements ulteacuterieurs Crsquoest lrsquoeffet de halo

bull Un utilisateur qui a une premiegravere impression positive de votre appli passera plus facilement outre les bugs

bull Une premiegravere impression negative rendra lrsquoutilisateur plus critique vis agrave vis de deacutetails qui confirment son jugement

Cel983527 983538983580983590c983532e 983527983548983588si 983527983549983589983581 vo983543 983586983590983580ux 983591rsquoex983527983538983589983585s vo983543 983530983585t983542983589983546i983530n983543 983592rsquoem983528983527983548983581he 983530983545 983550983587s 983542e983585d983530983555-vo983547983543 983581l983535e983539983546s

Introduction agrave lrsquoergonomie

Test de perception DIY76

Cornelia Laros

Montrer votre prototype agrave quelqursquoun pendant 5 secondes

Demandez-lui

bull Ce qursquoil a vu

bull Ce qursquoil a compris de ce qursquoil a vu

bull Ce qui lrsquoa surpris ou marqueacute

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY77

Cornelia Laros

Les difficulteacutes de navigation se produisent souvent dans les niveaux les plus haut de votre structure de contenu Vous pouvez veacuterifier facilement si la classification logique pour vous lrsquoest aussi pour vos utilisateurs

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY78

Cornelia Laros

Lister trois (max) niveaux de profondeur de votre contenu structureacute Masquez ensuite les contenus de niveau plus bas Utilisez par exemple les groupements de lignes dans excel pour creacuteer des pliers-deacutepliers ou imprimer la liste sur une feuille que vous pliez pour masquer certaines parties

Demandez agrave un utilisateur de vous dire ougrave il penserait trouver un contenu bien preacutecis en preacutecisant qursquoil nrsquoy a pas de bonne reacuteponse

Notez srsquoil va chercher lagrave ougrave vous vous y attendiez ougrave il a heacutesiteacute et ce qursquoil a fini par choisir pour vous aider agrave rendre la navigation plus intuitive

Introduction agrave lrsquoergonomie

Test drsquoutilisabiliteacute DIY79

Cornelia Laros

A chaque nouvelle fonctionnaliteacute ajouteacutee demandez agrave quelqursquoun qui ne connait pas le projet de srsquoen servir Proposez lui une seule tacircche geacuteneacuterique agrave accomplir avec la fonctionnaliteacute

Exemple Tu veux prendre un rendez-vous avec un meacutedecin sur ce site montres-moi comment tu ferais en commentant agrave haute voix

Le plus important ici crsquoest de ne pas reacuteagir agrave ce qursquoil fait mais simplement le regarder faire sans lrsquoaider mecircme srsquoil est bloqueacute

Srsquoil 983540983586983588983589 de983543 983578983547983589s983545i983586983585s reacutepo983539983592983530z 983540983580983590 un983530 983577983548e983588t983534983587983539 o983547 d983535983545e983588 l983547983535 983577u983530 983550983587us 983536983547983535 983590eacutepo983539983592r983530983555 983578983548an983591 983534983537 983580ur983527 fi983539983535 983588rsquoil 983534983539983588983535s983545e Srsquoil 983530983543983546 v983542983580i983593983530n983545 983529l983587983577ueacute di983545983530983588 l983548i 983577983547983589 983550o983547s 983580983536983537ez 983542983530983550983587ir 983549983586983546r983589 983579o983541983534983589 et 983530983543983588983580ye983555 983592983530 c983587983538983541re983539983592r983530 983579983589 983578u983534 l983589 9835316ne

Introduction agrave lrsquoergonomie

Pas besoin de reacuteinventer la roue DIY

80

Cornelia Laros

Il existe des bonnes pratiques qui vous eacuteviteront de reacuteinventer la roue Utilisez des laquo design patterns raquo pour concevoir vos interfaces

Renseignez vous sur la Gestalt Theorie pour agencer vos pages

Utilisez les critegraveres de Bastien et Scapin pour trouver des deacutefauts eacutevidents avant de tester vous en tirerez des enseignements plus inteacuteressants

Ma983534s ccedila crsquoes983545 983541983586983548r u983539983530 983580u983546r983530 983559983587i983588

Introduction agrave lrsquoergonomie

Quizz time

81

Cornelia Laros

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

82

Cornelia Laros

1 c Fonctionnel

2 a Fiable

3 d Accessible

4 b Intuitif

5 e Plaisant

6 f Porteur de sens

text

F - Quel besoin ai-je oublieacute dans la question preacuteceacutedente

83

Cornelia Laros

Uti983536983534983588983580b983536e

Introduction agrave lrsquoergonomie

Tests DIY84

Cornelia Laros

Reacutedigez la proceacutedure pour tester un de vos projets drsquoIHM avec le test de votre choix perception arborescence ou utilisabiliteacute

Notez la question que vous vous posez et la question que vous allez poser

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

Introduction agrave lrsquoergonomie

Prototyper semi-dynamique33

Cornelia Laros

Page Title

1230

Mobile interactions

Observably Sc i$amp

About

Project overiew

Manage sessions

Manage variables

Settings

Start observing

1230 1230

OverviewObserve

Observe mobile interactions in the field to assess dominant hand for holding and interacting with smartphones

10042016Mobile interactionsMobile interactions

Welcome to Observably Gather and manage observation dataGather and manage observation data

My projects

1230

Tags separate with comas

Variable value

Create

Add observablesAdd all observables you want to track for this project You can come back and edit them laterAdd all observables you want to track for this project You can come back and edit them later

Thanks for the hint

Manage variablesMobile InteractionsMobile Interactions

1230

Tags separate with comas

Variable value

Create

Left hand Right thumbLRTLRT

Manage variablesMobile InteractionsMobile Interactions

Irsquom done Start recording

Save changesCancel

Observable Tags separate with coma

Tags separate with comas

3 20

LRILRI

Observable label

Did you knowTap on the icon to customize it Use icons from our library or from your gallery to make variables pop out when observing

Tap on the icon to customize it Use icons from our library or from your gallery to make variables pop out when observing

Thanks for the hint

Left hand Right thumbLRTLRT

Irsquom done Start recording

Manage variablesMobile InteractionsMobile Interactions

Left hand x Right thumb x

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Did you knowIf you make a mistake you can undo your action by tapping on the icon of the taskIf you make a mistake you can undo your action by tapping on the icon of the task

Thanks for the hint

Session 1

Discrete mode New Session

Mobile InteractionsMobile Interactions

1230

Record vocal comment

LRILRILRILRILRILRI

Did you knowYou can record occurences durations and comments by chosing the record format in the drop-down above

You can record occurences durations and comments by chosing the record format in the drop-down above

Thanks for the hint

Discrete mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

Left hand Right thumbLRT

Left hand Right thumbLRTLRT

Left hand Right thumbLRTLRT

Did you knowIn list view you can slipe left and right to increment or correct your countIn list view you can slipe left and right to increment or correct your count

Thanks for the hint

Continuous mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

LRILRILRILRILRI

Did you knowIf you make a mistake you can undo your action by tapping on the icon of the taskIf you make a mistake you can undo your action by tapping on the icon of the task

Thanks for the hint

Continuous mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Record vocal comment

Tags separate with comas

Comment

Add

Did you know The timestamp of vocal comments is the start time to accurately mark events that triggered your comment

The timestamp of vocal comments is the start time to accurately mark events that triggered your comment

Thanks for the hint

Manage observables

Comments mode New Session

Session 1Mobile InteractionsMobile Interactions

1230

Stop recording vocal comment

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Your observationsManage and cleanup sessions before exporting dataManage and cleanup sessions before exporting data

Session ManagementMobile InteractionsMobile Interactions

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

LRT

LRI

RLI

RLT

RRT20

20

8

35

15

Count SummaryCount Summary

RLT

RRT20

815

Time SummaryTime Summary

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

Left hand Right thumbLRTLRT

+1+1

10042016 124627

Left hand Right thumbLRTLRT

2rsquorsquo2rsquorsquo

10042016 124627 - 10042016 124629

Content of my comment boxTag1 Tag2

10042016 124644

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

LRTLRT+1+1

10042016 124627

Save changes

Observable Tags separate with coma

Tags separate with comas

Left hand x Right thumb x

AboutAbout

1230

Observable science provides tools for field research and scientific observation It is tailored to the needs of ethnography human factors psychology usability and games user research

Observable science provides tools for field research and scientific observation It is tailored to the needs of ethnography human factors psychology usability and games user research

Observablyscience

Development by Morgane RadelDesign by Cornelia LarosDevelopment by Morgane RadelDesign by Cornelia Laros

Credits

Support (us)Show your love Rate the App

Make a donation

Contact us

Visit our website

Add session tags to all observations

1230

10042016 124627Session 1Session 1

Total countsTotal time Total comments

263000236

15

Session ManagementMobile InteractionsMobile Interactions

Data Edit sessionOverview

Save changes

Session Tags separate with coma

Tags separate with comas

Metro x Toulouse x

Manage variablesMobile InteractionsMobile Interactions

1230

Left hand Right thumbLRTLRT

Confirm

Search icons

Cancel

Browse

3 20

Observably Sci$amp

1230

Project statisticsProject statistics Total countsTotal time Total comments First entryLast entrySessions

4 963281231

1441201201603042016

97

Project detailsMobile InteractionsMobile Interactions

Sessions SummarySessions Summary

RRT20

815

Count SummaryCount Summary

JUN 14MAY 14APR 14MAR 14FEB 14JAN 14

4

1

65

7

0

2

4

6

8

10

3

2014

Manage sessions

Settings ExportOverview

1230

App optionsDisplay hintsDisplay hints

SettingsSettings

Share anonymous data to improve the appShare anonymous data to improve the app

1230

Gather and manage observation data with ObservablyGather and manage observation data with Observably

Welcome to Observably

Project name

Project description what is the goal of your project

CreateCancel

Session[number]Session[number]

Default Session ID

Default export format txt

Data options

Default Discrete variable lines view

Create a new project

1230

Project detailsMobile InteractionsMobile Interactions

Mobile InteractionsMobile Interactions

Project description what is the goal of your project

SaveCancel

Session[number]Session[number]

Default Session ID

Default export format txt

Data options

Default continuous variables grid view

Project name

Manage sessions

Settings ExportOverview

1230

Project detailsMobile InteractionsMobile Interactions

Manage sessions

Settings ExportOverview

Export format txt

Export data

Data has been successfully exported as MobileInteractionstxt

to your download folder

Observably Sc i$amp

Settings

1230

BUTTONBUTTON

Permissions

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Up exlaborum incididunt quis nostrud exercitatn

COMPONENTS

Pickers

OKCANCEL

13

Friday

MAR

2014

MS W T F ST

30 31

1

16 17 19 20 21 2218

23 24 26 27 28 2925

139 10 12 14 1511

72 3 5 6 84

March 2014

OKCANCEL

PMAM

112

9

10

11

2

48

576

3

330 AM

Notifications

Incoming call

Rachel Ligson

IGNORE ANSWER

REPLYARCHIVE

Hey letrsquos catch up soon Do you want to grab lunch sometime this weekendLet me know when yoursquore free

409 PMHannah ChoHannah Cho

Do you know what I mean509 PMTina McBeanTina McBean

Heads up notification

Regular + Expanded notification

Index scroller

All

Patrick Keenan

Mary Johnson

Tina Santiago

Trevor Hansen

Amar Sagoo

Abbey Christensen

Ali Connors

Alex Nelson

Anthony Stevens

A

A

1230

Abcdefg

Abcdefghijklmno

Tabs

THE THIRDITEM TWONO ONE

THE THIRDITEM TWONO ONE

1230

THE THIRDITEM TWONO ONE

Page Title

1230

121 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

110 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

51 50

Input text for a single line field with a maximu

Single-Line Input Label

31 50

Input text for a single line field with a max

Single-Line Input Label

121 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

110 120

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl

Multi-Line Input Label

51 50

Input text for a single line field with a maximuInput text for a single line field with a maximu

Single-Line Input Label

31 50

Input text for a single line field with a maxInput text for a single line field with a max

Single-Line Input Label

Disabled text field

Input text

Username or Password is incorrect

Input text

Input tex

Hint text

Hint text

Hint text

Disabled text field

Input textInput text

Username or Password is incorrect

Input textInput text

Input texInput tex

Hint text

Hint text

Hint text

Text fields

Switches and sliders

60

Regular

Pressed

Disabled

60

Regular

Pressed

Disabled

Buttons

DISABLED

PRESSED

NORMAL

DISABLED

PRESSED

NORMAL

Flat Raised

DISABLED

PRESSED

NORMAL

DISABLED

PRESSED

NORMAL

Flat Raised

Toasts

This color applies to both light and dark theme

This item already has the label ldquotravelrdquo You can add a new label

ACTIONSingle-Line Snackbar

Menu

Arial 100

100

Calibri

Courier

Verdana

Arial

Chips

Trevor Hansen

email3emailcom

email2emailcom

primaryemailemailcomContact Name

Dialogs

Desktop

Without title With title

BUTTONBUTTON

PermissionsLorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Up exlaborum incididunt quis nostrud exercitatn

BUTTONBUTTON

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna wirl aliqua Ut enim ad minim ikad veniam quis nostrud exercitatn ullamco laboris nisi ut aliquip exlaborum incididunt

ACCEPTDECLINEMORE INFO

Permissions

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisinuli

Toolbar

11Roboto

Cards

Welcome BackItrsquos been a while have you read any new books latelyItrsquos been a while have you read any new books lately

YESNOPE

Kangaroo Valley Safari

Located two hours south of Sydney in the

Southern Highlands of New South Wales

LEARN MORESHARE

REVIEWFREE SAMPLE

By Alex Nelson

El Pooch

Pre-fab Homes

Favorite Road Trips

Best Airlines

Campbell

Groceries

almond milk

coconut water

cucumber

green apples

Yuna tickets on sale 624

May 24 2014

Clean desk

Keyboards

suggestion suggestion suggestion

123

a s d f g h j k l

z x c v b n m

q w e r t y u i o p1 2 3 4 5 6 7 8 9 0

suggestion suggestion suggestion

123

a s d f g h j k l

z x c v b n m

q w e r t y u i o p1 2 3 4 5 6 7 8 9 0

Bottom Sheet

Print this page

Copy

Upload

Share

MoreMail Message

Google+Gmail Hangout

Grid

Two lineSupport text

Two lineSupport text

Single line

Single line

Lists

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Three-line itemThree-line item

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Three-line itemThree-line item

Three-line itemThree-line item

Secondary line text lorem ipsum dapibus neque id cursus faucibus

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Three-line itemThree-line item

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Three-line itemThree-line item

Three-line itemThree-line item

Secondary line text Lorem ipsum dolor sit amet consectetur adipiscing elit Nam massa quam

Line item unselectedLine item unselected

Line item selectedLine item selected

Line item selectedLine item selected

Data usageData usage

BluetoothBluetooth

Wi-FiWi-Fi

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Two-line itemTwo-line item

Secondary text

Single-line itemSingle-line item

Single-line itemSingle-line item

Single-line itemSingle-line itemSingle-line itemSingle-line item

Single-line itemSingle-line item

Single-line itemSingle-line item

Introduction agrave lrsquoergonomie

Ergonomie et Design34

Cornelia Laros

Design Ergonomie Design Ergonomie

Identiteacute

Communication

Ambiance

Exemple un site institutionnel informatif avec une navigation simple et des exigences fortes

drsquoidentiteacuteExemple une application meacutetier destineacutee agrave une

population drsquoutilisateur connue

EfficaciteacuteFonctionnel

Outils

Service en ligne

Architecture de lrsquoinformation contenus bonnes pratiques

Analyse tache vs activiteacute prise en compte globaliseacutee des process

postes de travail eacutecosystegraveme existant hellip puis la conception

Image Usage freacutequent

Usage ponctuel

Votre eacutequipe Ergonome Directeur aristique Webdesigner UX Designer

Introduction agrave lrsquoergonomie

Design avant-tout35

Cornelia Laros

Introduction agrave lrsquoergonomie

Equilibreacute36

Cornelia Laros

Introduction agrave lrsquoergonomie

Ergonomie avant tout37

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

38

Cornelia Laros

text

Lrsquoergonomie sert agravehellip39

Cornelia Laros

1 ameacuteliorer les conditions de travail

2 faire gagner plus drsquoargent agrave lrsquoentreprise

3 ameacuteliorer lrsquoestheacutetique

4 comprendre comment ameacuteliorer un produit

text

Quelles affirmations sont vraies

40

Cornelia Laros

1 Lrsquoergonomie srsquoattache agrave comprendre le travail pour le transformer

2 Il est possible de concevoir une IHM qui fonctionne pour tout le monde en se basant sur des normes

3 Lrsquoutilisateur va se servir de votre produit de la faccedilon dont vous lrsquoavez imagineacute

4 Lrsquoutilisateur interpregravete une tacircche comme un problegraveme qursquoil doit reacutesoudre en faisant avec ses caracteacuteristiques et les moyens mis agrave sa disposition

text

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

41

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

text

D - A quoi sert un prototype

42

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

43

Cornelia Laros

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

44

Cornelia Laros

Utilisabiliteacute

Utiliteacute

Efficaciteacute Efficience

Satisfaction

Introduction agrave lrsquoergonomie

Pyramide des besoins MASLOW

45

Cornelia Laros

Introduction agrave lrsquoergonomie

Pyramide des besoins IHM46

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

47

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

48

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

49

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

50

Cornelia Laros

Introduction agrave lrsquoergonomie

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

51

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

Introduction agrave lrsquoergonomie

D - A quoi sert un prototype

52

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

53

Cornelia Laros

a Fiable

b Intuitif

c Fonctionnel

d Accessible

e Plaisant

f Porteur de sens

Introduction agrave lrsquoergonomie

F - Quel besoin ai-je oublieacute dans la question

preacuteceacutedente

54

Cornelia Laros

text

Patterns amp Dark patterns

55

Cornelia Laros

text

Criteres de Bastien et Scapin56

Cornelia Laros

Guidage

Charge de travail

Controcircle utilisateur explicite

Flexibiliteacute ( adaptabiliteacute)

Gestion des erreurs

Homogeacuteneacuteiteacute ( coheacuterence)

Signifiance des Codes et Deacutenominations

Compatibiliteacute ( familiariteacute)

Introduction agrave lrsquoergonomie

Guidage57

Cornelia Laros

Introduction agrave lrsquoergonomie

Charge de travail58

Cornelia Laros

Introduction agrave lrsquoergonomie

Controle explicite59

Cornelia Laros

Introduction agrave lrsquoergonomie

Controles explicites60

Cornelia Laros

Dar983595 983541983527t983545983589983590n

text

Adaptabiliteacute61

Cornelia Laros

text

Gestion des erreurs62

Cornelia Laros

text

Signifiance des codes et deacutenominations

63

Cornelia Laros

text

Homogeacuteneacuteiteacute - coheacuterence64

Cornelia Laros

text

Homogeacuteneacuteiteacute - Distinction65

Cornelia Laros

text

Compatibiliteacute66

Cornelia Laros

text

Compatibiliteacute67

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction68

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction69

Cornelia Laros

text

Gestalt Theorie70

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Gestalt Theorie71

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Dark patterns72

Cornelia Laros

Introduction agrave lrsquoergonomie

A vous de jouer

73

Cornelia Laros

Introduction agrave lrsquoergonomie

Outils de prototypages DIY74

Cornelia Laros

Low tech papier + crayons post-its cartes agrave jouer

Gratuit en ligne Invision app Moqups UXPin

Mac Sketch Balsamiq Mockups Axure

PC Axure Balsamiq

Mobile Prototyping on Paper

Ap983540983590en983530983555 983592983589 no983547983549983589983537le983543 983581h983586983543983589983588

Introduction agrave lrsquoergonomie

Test de perception DIY75

Cornelia Laros

La premiegravere impression qursquoun utilisateur se fait de votre IHM va influencer tous ses jugements ulteacuterieurs Crsquoest lrsquoeffet de halo

bull Un utilisateur qui a une premiegravere impression positive de votre appli passera plus facilement outre les bugs

bull Une premiegravere impression negative rendra lrsquoutilisateur plus critique vis agrave vis de deacutetails qui confirment son jugement

Cel983527 983538983580983590c983532e 983527983548983588si 983527983549983589983581 vo983543 983586983590983580ux 983591rsquoex983527983538983589983585s vo983543 983530983585t983542983589983546i983530n983543 983592rsquoem983528983527983548983581he 983530983545 983550983587s 983542e983585d983530983555-vo983547983543 983581l983535e983539983546s

Introduction agrave lrsquoergonomie

Test de perception DIY76

Cornelia Laros

Montrer votre prototype agrave quelqursquoun pendant 5 secondes

Demandez-lui

bull Ce qursquoil a vu

bull Ce qursquoil a compris de ce qursquoil a vu

bull Ce qui lrsquoa surpris ou marqueacute

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY77

Cornelia Laros

Les difficulteacutes de navigation se produisent souvent dans les niveaux les plus haut de votre structure de contenu Vous pouvez veacuterifier facilement si la classification logique pour vous lrsquoest aussi pour vos utilisateurs

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY78

Cornelia Laros

Lister trois (max) niveaux de profondeur de votre contenu structureacute Masquez ensuite les contenus de niveau plus bas Utilisez par exemple les groupements de lignes dans excel pour creacuteer des pliers-deacutepliers ou imprimer la liste sur une feuille que vous pliez pour masquer certaines parties

Demandez agrave un utilisateur de vous dire ougrave il penserait trouver un contenu bien preacutecis en preacutecisant qursquoil nrsquoy a pas de bonne reacuteponse

Notez srsquoil va chercher lagrave ougrave vous vous y attendiez ougrave il a heacutesiteacute et ce qursquoil a fini par choisir pour vous aider agrave rendre la navigation plus intuitive

Introduction agrave lrsquoergonomie

Test drsquoutilisabiliteacute DIY79

Cornelia Laros

A chaque nouvelle fonctionnaliteacute ajouteacutee demandez agrave quelqursquoun qui ne connait pas le projet de srsquoen servir Proposez lui une seule tacircche geacuteneacuterique agrave accomplir avec la fonctionnaliteacute

Exemple Tu veux prendre un rendez-vous avec un meacutedecin sur ce site montres-moi comment tu ferais en commentant agrave haute voix

Le plus important ici crsquoest de ne pas reacuteagir agrave ce qursquoil fait mais simplement le regarder faire sans lrsquoaider mecircme srsquoil est bloqueacute

Srsquoil 983540983586983588983589 de983543 983578983547983589s983545i983586983585s reacutepo983539983592983530z 983540983580983590 un983530 983577983548e983588t983534983587983539 o983547 d983535983545e983588 l983547983535 983577u983530 983550983587us 983536983547983535 983590eacutepo983539983592r983530983555 983578983548an983591 983534983537 983580ur983527 fi983539983535 983588rsquoil 983534983539983588983535s983545e Srsquoil 983530983543983546 v983542983580i983593983530n983545 983529l983587983577ueacute di983545983530983588 l983548i 983577983547983589 983550o983547s 983580983536983537ez 983542983530983550983587ir 983549983586983546r983589 983579o983541983534983589 et 983530983543983588983580ye983555 983592983530 c983587983538983541re983539983592r983530 983579983589 983578u983534 l983589 9835316ne

Introduction agrave lrsquoergonomie

Pas besoin de reacuteinventer la roue DIY

80

Cornelia Laros

Il existe des bonnes pratiques qui vous eacuteviteront de reacuteinventer la roue Utilisez des laquo design patterns raquo pour concevoir vos interfaces

Renseignez vous sur la Gestalt Theorie pour agencer vos pages

Utilisez les critegraveres de Bastien et Scapin pour trouver des deacutefauts eacutevidents avant de tester vous en tirerez des enseignements plus inteacuteressants

Ma983534s ccedila crsquoes983545 983541983586983548r u983539983530 983580u983546r983530 983559983587i983588

Introduction agrave lrsquoergonomie

Quizz time

81

Cornelia Laros

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

82

Cornelia Laros

1 c Fonctionnel

2 a Fiable

3 d Accessible

4 b Intuitif

5 e Plaisant

6 f Porteur de sens

text

F - Quel besoin ai-je oublieacute dans la question preacuteceacutedente

83

Cornelia Laros

Uti983536983534983588983580b983536e

Introduction agrave lrsquoergonomie

Tests DIY84

Cornelia Laros

Reacutedigez la proceacutedure pour tester un de vos projets drsquoIHM avec le test de votre choix perception arborescence ou utilisabiliteacute

Notez la question que vous vous posez et la question que vous allez poser

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

Introduction agrave lrsquoergonomie

Ergonomie et Design34

Cornelia Laros

Design Ergonomie Design Ergonomie

Identiteacute

Communication

Ambiance

Exemple un site institutionnel informatif avec une navigation simple et des exigences fortes

drsquoidentiteacuteExemple une application meacutetier destineacutee agrave une

population drsquoutilisateur connue

EfficaciteacuteFonctionnel

Outils

Service en ligne

Architecture de lrsquoinformation contenus bonnes pratiques

Analyse tache vs activiteacute prise en compte globaliseacutee des process

postes de travail eacutecosystegraveme existant hellip puis la conception

Image Usage freacutequent

Usage ponctuel

Votre eacutequipe Ergonome Directeur aristique Webdesigner UX Designer

Introduction agrave lrsquoergonomie

Design avant-tout35

Cornelia Laros

Introduction agrave lrsquoergonomie

Equilibreacute36

Cornelia Laros

Introduction agrave lrsquoergonomie

Ergonomie avant tout37

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

38

Cornelia Laros

text

Lrsquoergonomie sert agravehellip39

Cornelia Laros

1 ameacuteliorer les conditions de travail

2 faire gagner plus drsquoargent agrave lrsquoentreprise

3 ameacuteliorer lrsquoestheacutetique

4 comprendre comment ameacuteliorer un produit

text

Quelles affirmations sont vraies

40

Cornelia Laros

1 Lrsquoergonomie srsquoattache agrave comprendre le travail pour le transformer

2 Il est possible de concevoir une IHM qui fonctionne pour tout le monde en se basant sur des normes

3 Lrsquoutilisateur va se servir de votre produit de la faccedilon dont vous lrsquoavez imagineacute

4 Lrsquoutilisateur interpregravete une tacircche comme un problegraveme qursquoil doit reacutesoudre en faisant avec ses caracteacuteristiques et les moyens mis agrave sa disposition

text

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

41

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

text

D - A quoi sert un prototype

42

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

43

Cornelia Laros

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

44

Cornelia Laros

Utilisabiliteacute

Utiliteacute

Efficaciteacute Efficience

Satisfaction

Introduction agrave lrsquoergonomie

Pyramide des besoins MASLOW

45

Cornelia Laros

Introduction agrave lrsquoergonomie

Pyramide des besoins IHM46

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

47

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

48

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

49

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

50

Cornelia Laros

Introduction agrave lrsquoergonomie

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

51

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

Introduction agrave lrsquoergonomie

D - A quoi sert un prototype

52

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

53

Cornelia Laros

a Fiable

b Intuitif

c Fonctionnel

d Accessible

e Plaisant

f Porteur de sens

Introduction agrave lrsquoergonomie

F - Quel besoin ai-je oublieacute dans la question

preacuteceacutedente

54

Cornelia Laros

text

Patterns amp Dark patterns

55

Cornelia Laros

text

Criteres de Bastien et Scapin56

Cornelia Laros

Guidage

Charge de travail

Controcircle utilisateur explicite

Flexibiliteacute ( adaptabiliteacute)

Gestion des erreurs

Homogeacuteneacuteiteacute ( coheacuterence)

Signifiance des Codes et Deacutenominations

Compatibiliteacute ( familiariteacute)

Introduction agrave lrsquoergonomie

Guidage57

Cornelia Laros

Introduction agrave lrsquoergonomie

Charge de travail58

Cornelia Laros

Introduction agrave lrsquoergonomie

Controle explicite59

Cornelia Laros

Introduction agrave lrsquoergonomie

Controles explicites60

Cornelia Laros

Dar983595 983541983527t983545983589983590n

text

Adaptabiliteacute61

Cornelia Laros

text

Gestion des erreurs62

Cornelia Laros

text

Signifiance des codes et deacutenominations

63

Cornelia Laros

text

Homogeacuteneacuteiteacute - coheacuterence64

Cornelia Laros

text

Homogeacuteneacuteiteacute - Distinction65

Cornelia Laros

text

Compatibiliteacute66

Cornelia Laros

text

Compatibiliteacute67

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction68

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction69

Cornelia Laros

text

Gestalt Theorie70

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Gestalt Theorie71

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Dark patterns72

Cornelia Laros

Introduction agrave lrsquoergonomie

A vous de jouer

73

Cornelia Laros

Introduction agrave lrsquoergonomie

Outils de prototypages DIY74

Cornelia Laros

Low tech papier + crayons post-its cartes agrave jouer

Gratuit en ligne Invision app Moqups UXPin

Mac Sketch Balsamiq Mockups Axure

PC Axure Balsamiq

Mobile Prototyping on Paper

Ap983540983590en983530983555 983592983589 no983547983549983589983537le983543 983581h983586983543983589983588

Introduction agrave lrsquoergonomie

Test de perception DIY75

Cornelia Laros

La premiegravere impression qursquoun utilisateur se fait de votre IHM va influencer tous ses jugements ulteacuterieurs Crsquoest lrsquoeffet de halo

bull Un utilisateur qui a une premiegravere impression positive de votre appli passera plus facilement outre les bugs

bull Une premiegravere impression negative rendra lrsquoutilisateur plus critique vis agrave vis de deacutetails qui confirment son jugement

Cel983527 983538983580983590c983532e 983527983548983588si 983527983549983589983581 vo983543 983586983590983580ux 983591rsquoex983527983538983589983585s vo983543 983530983585t983542983589983546i983530n983543 983592rsquoem983528983527983548983581he 983530983545 983550983587s 983542e983585d983530983555-vo983547983543 983581l983535e983539983546s

Introduction agrave lrsquoergonomie

Test de perception DIY76

Cornelia Laros

Montrer votre prototype agrave quelqursquoun pendant 5 secondes

Demandez-lui

bull Ce qursquoil a vu

bull Ce qursquoil a compris de ce qursquoil a vu

bull Ce qui lrsquoa surpris ou marqueacute

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY77

Cornelia Laros

Les difficulteacutes de navigation se produisent souvent dans les niveaux les plus haut de votre structure de contenu Vous pouvez veacuterifier facilement si la classification logique pour vous lrsquoest aussi pour vos utilisateurs

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY78

Cornelia Laros

Lister trois (max) niveaux de profondeur de votre contenu structureacute Masquez ensuite les contenus de niveau plus bas Utilisez par exemple les groupements de lignes dans excel pour creacuteer des pliers-deacutepliers ou imprimer la liste sur une feuille que vous pliez pour masquer certaines parties

Demandez agrave un utilisateur de vous dire ougrave il penserait trouver un contenu bien preacutecis en preacutecisant qursquoil nrsquoy a pas de bonne reacuteponse

Notez srsquoil va chercher lagrave ougrave vous vous y attendiez ougrave il a heacutesiteacute et ce qursquoil a fini par choisir pour vous aider agrave rendre la navigation plus intuitive

Introduction agrave lrsquoergonomie

Test drsquoutilisabiliteacute DIY79

Cornelia Laros

A chaque nouvelle fonctionnaliteacute ajouteacutee demandez agrave quelqursquoun qui ne connait pas le projet de srsquoen servir Proposez lui une seule tacircche geacuteneacuterique agrave accomplir avec la fonctionnaliteacute

Exemple Tu veux prendre un rendez-vous avec un meacutedecin sur ce site montres-moi comment tu ferais en commentant agrave haute voix

Le plus important ici crsquoest de ne pas reacuteagir agrave ce qursquoil fait mais simplement le regarder faire sans lrsquoaider mecircme srsquoil est bloqueacute

Srsquoil 983540983586983588983589 de983543 983578983547983589s983545i983586983585s reacutepo983539983592983530z 983540983580983590 un983530 983577983548e983588t983534983587983539 o983547 d983535983545e983588 l983547983535 983577u983530 983550983587us 983536983547983535 983590eacutepo983539983592r983530983555 983578983548an983591 983534983537 983580ur983527 fi983539983535 983588rsquoil 983534983539983588983535s983545e Srsquoil 983530983543983546 v983542983580i983593983530n983545 983529l983587983577ueacute di983545983530983588 l983548i 983577983547983589 983550o983547s 983580983536983537ez 983542983530983550983587ir 983549983586983546r983589 983579o983541983534983589 et 983530983543983588983580ye983555 983592983530 c983587983538983541re983539983592r983530 983579983589 983578u983534 l983589 9835316ne

Introduction agrave lrsquoergonomie

Pas besoin de reacuteinventer la roue DIY

80

Cornelia Laros

Il existe des bonnes pratiques qui vous eacuteviteront de reacuteinventer la roue Utilisez des laquo design patterns raquo pour concevoir vos interfaces

Renseignez vous sur la Gestalt Theorie pour agencer vos pages

Utilisez les critegraveres de Bastien et Scapin pour trouver des deacutefauts eacutevidents avant de tester vous en tirerez des enseignements plus inteacuteressants

Ma983534s ccedila crsquoes983545 983541983586983548r u983539983530 983580u983546r983530 983559983587i983588

Introduction agrave lrsquoergonomie

Quizz time

81

Cornelia Laros

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

82

Cornelia Laros

1 c Fonctionnel

2 a Fiable

3 d Accessible

4 b Intuitif

5 e Plaisant

6 f Porteur de sens

text

F - Quel besoin ai-je oublieacute dans la question preacuteceacutedente

83

Cornelia Laros

Uti983536983534983588983580b983536e

Introduction agrave lrsquoergonomie

Tests DIY84

Cornelia Laros

Reacutedigez la proceacutedure pour tester un de vos projets drsquoIHM avec le test de votre choix perception arborescence ou utilisabiliteacute

Notez la question que vous vous posez et la question que vous allez poser

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

Introduction agrave lrsquoergonomie

Design avant-tout35

Cornelia Laros

Introduction agrave lrsquoergonomie

Equilibreacute36

Cornelia Laros

Introduction agrave lrsquoergonomie

Ergonomie avant tout37

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

38

Cornelia Laros

text

Lrsquoergonomie sert agravehellip39

Cornelia Laros

1 ameacuteliorer les conditions de travail

2 faire gagner plus drsquoargent agrave lrsquoentreprise

3 ameacuteliorer lrsquoestheacutetique

4 comprendre comment ameacuteliorer un produit

text

Quelles affirmations sont vraies

40

Cornelia Laros

1 Lrsquoergonomie srsquoattache agrave comprendre le travail pour le transformer

2 Il est possible de concevoir une IHM qui fonctionne pour tout le monde en se basant sur des normes

3 Lrsquoutilisateur va se servir de votre produit de la faccedilon dont vous lrsquoavez imagineacute

4 Lrsquoutilisateur interpregravete une tacircche comme un problegraveme qursquoil doit reacutesoudre en faisant avec ses caracteacuteristiques et les moyens mis agrave sa disposition

text

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

41

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

text

D - A quoi sert un prototype

42

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

43

Cornelia Laros

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

44

Cornelia Laros

Utilisabiliteacute

Utiliteacute

Efficaciteacute Efficience

Satisfaction

Introduction agrave lrsquoergonomie

Pyramide des besoins MASLOW

45

Cornelia Laros

Introduction agrave lrsquoergonomie

Pyramide des besoins IHM46

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

47

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

48

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

49

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

50

Cornelia Laros

Introduction agrave lrsquoergonomie

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

51

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

Introduction agrave lrsquoergonomie

D - A quoi sert un prototype

52

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

53

Cornelia Laros

a Fiable

b Intuitif

c Fonctionnel

d Accessible

e Plaisant

f Porteur de sens

Introduction agrave lrsquoergonomie

F - Quel besoin ai-je oublieacute dans la question

preacuteceacutedente

54

Cornelia Laros

text

Patterns amp Dark patterns

55

Cornelia Laros

text

Criteres de Bastien et Scapin56

Cornelia Laros

Guidage

Charge de travail

Controcircle utilisateur explicite

Flexibiliteacute ( adaptabiliteacute)

Gestion des erreurs

Homogeacuteneacuteiteacute ( coheacuterence)

Signifiance des Codes et Deacutenominations

Compatibiliteacute ( familiariteacute)

Introduction agrave lrsquoergonomie

Guidage57

Cornelia Laros

Introduction agrave lrsquoergonomie

Charge de travail58

Cornelia Laros

Introduction agrave lrsquoergonomie

Controle explicite59

Cornelia Laros

Introduction agrave lrsquoergonomie

Controles explicites60

Cornelia Laros

Dar983595 983541983527t983545983589983590n

text

Adaptabiliteacute61

Cornelia Laros

text

Gestion des erreurs62

Cornelia Laros

text

Signifiance des codes et deacutenominations

63

Cornelia Laros

text

Homogeacuteneacuteiteacute - coheacuterence64

Cornelia Laros

text

Homogeacuteneacuteiteacute - Distinction65

Cornelia Laros

text

Compatibiliteacute66

Cornelia Laros

text

Compatibiliteacute67

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction68

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction69

Cornelia Laros

text

Gestalt Theorie70

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Gestalt Theorie71

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Dark patterns72

Cornelia Laros

Introduction agrave lrsquoergonomie

A vous de jouer

73

Cornelia Laros

Introduction agrave lrsquoergonomie

Outils de prototypages DIY74

Cornelia Laros

Low tech papier + crayons post-its cartes agrave jouer

Gratuit en ligne Invision app Moqups UXPin

Mac Sketch Balsamiq Mockups Axure

PC Axure Balsamiq

Mobile Prototyping on Paper

Ap983540983590en983530983555 983592983589 no983547983549983589983537le983543 983581h983586983543983589983588

Introduction agrave lrsquoergonomie

Test de perception DIY75

Cornelia Laros

La premiegravere impression qursquoun utilisateur se fait de votre IHM va influencer tous ses jugements ulteacuterieurs Crsquoest lrsquoeffet de halo

bull Un utilisateur qui a une premiegravere impression positive de votre appli passera plus facilement outre les bugs

bull Une premiegravere impression negative rendra lrsquoutilisateur plus critique vis agrave vis de deacutetails qui confirment son jugement

Cel983527 983538983580983590c983532e 983527983548983588si 983527983549983589983581 vo983543 983586983590983580ux 983591rsquoex983527983538983589983585s vo983543 983530983585t983542983589983546i983530n983543 983592rsquoem983528983527983548983581he 983530983545 983550983587s 983542e983585d983530983555-vo983547983543 983581l983535e983539983546s

Introduction agrave lrsquoergonomie

Test de perception DIY76

Cornelia Laros

Montrer votre prototype agrave quelqursquoun pendant 5 secondes

Demandez-lui

bull Ce qursquoil a vu

bull Ce qursquoil a compris de ce qursquoil a vu

bull Ce qui lrsquoa surpris ou marqueacute

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY77

Cornelia Laros

Les difficulteacutes de navigation se produisent souvent dans les niveaux les plus haut de votre structure de contenu Vous pouvez veacuterifier facilement si la classification logique pour vous lrsquoest aussi pour vos utilisateurs

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY78

Cornelia Laros

Lister trois (max) niveaux de profondeur de votre contenu structureacute Masquez ensuite les contenus de niveau plus bas Utilisez par exemple les groupements de lignes dans excel pour creacuteer des pliers-deacutepliers ou imprimer la liste sur une feuille que vous pliez pour masquer certaines parties

Demandez agrave un utilisateur de vous dire ougrave il penserait trouver un contenu bien preacutecis en preacutecisant qursquoil nrsquoy a pas de bonne reacuteponse

Notez srsquoil va chercher lagrave ougrave vous vous y attendiez ougrave il a heacutesiteacute et ce qursquoil a fini par choisir pour vous aider agrave rendre la navigation plus intuitive

Introduction agrave lrsquoergonomie

Test drsquoutilisabiliteacute DIY79

Cornelia Laros

A chaque nouvelle fonctionnaliteacute ajouteacutee demandez agrave quelqursquoun qui ne connait pas le projet de srsquoen servir Proposez lui une seule tacircche geacuteneacuterique agrave accomplir avec la fonctionnaliteacute

Exemple Tu veux prendre un rendez-vous avec un meacutedecin sur ce site montres-moi comment tu ferais en commentant agrave haute voix

Le plus important ici crsquoest de ne pas reacuteagir agrave ce qursquoil fait mais simplement le regarder faire sans lrsquoaider mecircme srsquoil est bloqueacute

Srsquoil 983540983586983588983589 de983543 983578983547983589s983545i983586983585s reacutepo983539983592983530z 983540983580983590 un983530 983577983548e983588t983534983587983539 o983547 d983535983545e983588 l983547983535 983577u983530 983550983587us 983536983547983535 983590eacutepo983539983592r983530983555 983578983548an983591 983534983537 983580ur983527 fi983539983535 983588rsquoil 983534983539983588983535s983545e Srsquoil 983530983543983546 v983542983580i983593983530n983545 983529l983587983577ueacute di983545983530983588 l983548i 983577983547983589 983550o983547s 983580983536983537ez 983542983530983550983587ir 983549983586983546r983589 983579o983541983534983589 et 983530983543983588983580ye983555 983592983530 c983587983538983541re983539983592r983530 983579983589 983578u983534 l983589 9835316ne

Introduction agrave lrsquoergonomie

Pas besoin de reacuteinventer la roue DIY

80

Cornelia Laros

Il existe des bonnes pratiques qui vous eacuteviteront de reacuteinventer la roue Utilisez des laquo design patterns raquo pour concevoir vos interfaces

Renseignez vous sur la Gestalt Theorie pour agencer vos pages

Utilisez les critegraveres de Bastien et Scapin pour trouver des deacutefauts eacutevidents avant de tester vous en tirerez des enseignements plus inteacuteressants

Ma983534s ccedila crsquoes983545 983541983586983548r u983539983530 983580u983546r983530 983559983587i983588

Introduction agrave lrsquoergonomie

Quizz time

81

Cornelia Laros

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

82

Cornelia Laros

1 c Fonctionnel

2 a Fiable

3 d Accessible

4 b Intuitif

5 e Plaisant

6 f Porteur de sens

text

F - Quel besoin ai-je oublieacute dans la question preacuteceacutedente

83

Cornelia Laros

Uti983536983534983588983580b983536e

Introduction agrave lrsquoergonomie

Tests DIY84

Cornelia Laros

Reacutedigez la proceacutedure pour tester un de vos projets drsquoIHM avec le test de votre choix perception arborescence ou utilisabiliteacute

Notez la question que vous vous posez et la question que vous allez poser

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

Introduction agrave lrsquoergonomie

Equilibreacute36

Cornelia Laros

Introduction agrave lrsquoergonomie

Ergonomie avant tout37

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

38

Cornelia Laros

text

Lrsquoergonomie sert agravehellip39

Cornelia Laros

1 ameacuteliorer les conditions de travail

2 faire gagner plus drsquoargent agrave lrsquoentreprise

3 ameacuteliorer lrsquoestheacutetique

4 comprendre comment ameacuteliorer un produit

text

Quelles affirmations sont vraies

40

Cornelia Laros

1 Lrsquoergonomie srsquoattache agrave comprendre le travail pour le transformer

2 Il est possible de concevoir une IHM qui fonctionne pour tout le monde en se basant sur des normes

3 Lrsquoutilisateur va se servir de votre produit de la faccedilon dont vous lrsquoavez imagineacute

4 Lrsquoutilisateur interpregravete une tacircche comme un problegraveme qursquoil doit reacutesoudre en faisant avec ses caracteacuteristiques et les moyens mis agrave sa disposition

text

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

41

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

text

D - A quoi sert un prototype

42

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

43

Cornelia Laros

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

44

Cornelia Laros

Utilisabiliteacute

Utiliteacute

Efficaciteacute Efficience

Satisfaction

Introduction agrave lrsquoergonomie

Pyramide des besoins MASLOW

45

Cornelia Laros

Introduction agrave lrsquoergonomie

Pyramide des besoins IHM46

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

47

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

48

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

49

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

50

Cornelia Laros

Introduction agrave lrsquoergonomie

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

51

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

Introduction agrave lrsquoergonomie

D - A quoi sert un prototype

52

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

53

Cornelia Laros

a Fiable

b Intuitif

c Fonctionnel

d Accessible

e Plaisant

f Porteur de sens

Introduction agrave lrsquoergonomie

F - Quel besoin ai-je oublieacute dans la question

preacuteceacutedente

54

Cornelia Laros

text

Patterns amp Dark patterns

55

Cornelia Laros

text

Criteres de Bastien et Scapin56

Cornelia Laros

Guidage

Charge de travail

Controcircle utilisateur explicite

Flexibiliteacute ( adaptabiliteacute)

Gestion des erreurs

Homogeacuteneacuteiteacute ( coheacuterence)

Signifiance des Codes et Deacutenominations

Compatibiliteacute ( familiariteacute)

Introduction agrave lrsquoergonomie

Guidage57

Cornelia Laros

Introduction agrave lrsquoergonomie

Charge de travail58

Cornelia Laros

Introduction agrave lrsquoergonomie

Controle explicite59

Cornelia Laros

Introduction agrave lrsquoergonomie

Controles explicites60

Cornelia Laros

Dar983595 983541983527t983545983589983590n

text

Adaptabiliteacute61

Cornelia Laros

text

Gestion des erreurs62

Cornelia Laros

text

Signifiance des codes et deacutenominations

63

Cornelia Laros

text

Homogeacuteneacuteiteacute - coheacuterence64

Cornelia Laros

text

Homogeacuteneacuteiteacute - Distinction65

Cornelia Laros

text

Compatibiliteacute66

Cornelia Laros

text

Compatibiliteacute67

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction68

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction69

Cornelia Laros

text

Gestalt Theorie70

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Gestalt Theorie71

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Dark patterns72

Cornelia Laros

Introduction agrave lrsquoergonomie

A vous de jouer

73

Cornelia Laros

Introduction agrave lrsquoergonomie

Outils de prototypages DIY74

Cornelia Laros

Low tech papier + crayons post-its cartes agrave jouer

Gratuit en ligne Invision app Moqups UXPin

Mac Sketch Balsamiq Mockups Axure

PC Axure Balsamiq

Mobile Prototyping on Paper

Ap983540983590en983530983555 983592983589 no983547983549983589983537le983543 983581h983586983543983589983588

Introduction agrave lrsquoergonomie

Test de perception DIY75

Cornelia Laros

La premiegravere impression qursquoun utilisateur se fait de votre IHM va influencer tous ses jugements ulteacuterieurs Crsquoest lrsquoeffet de halo

bull Un utilisateur qui a une premiegravere impression positive de votre appli passera plus facilement outre les bugs

bull Une premiegravere impression negative rendra lrsquoutilisateur plus critique vis agrave vis de deacutetails qui confirment son jugement

Cel983527 983538983580983590c983532e 983527983548983588si 983527983549983589983581 vo983543 983586983590983580ux 983591rsquoex983527983538983589983585s vo983543 983530983585t983542983589983546i983530n983543 983592rsquoem983528983527983548983581he 983530983545 983550983587s 983542e983585d983530983555-vo983547983543 983581l983535e983539983546s

Introduction agrave lrsquoergonomie

Test de perception DIY76

Cornelia Laros

Montrer votre prototype agrave quelqursquoun pendant 5 secondes

Demandez-lui

bull Ce qursquoil a vu

bull Ce qursquoil a compris de ce qursquoil a vu

bull Ce qui lrsquoa surpris ou marqueacute

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY77

Cornelia Laros

Les difficulteacutes de navigation se produisent souvent dans les niveaux les plus haut de votre structure de contenu Vous pouvez veacuterifier facilement si la classification logique pour vous lrsquoest aussi pour vos utilisateurs

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY78

Cornelia Laros

Lister trois (max) niveaux de profondeur de votre contenu structureacute Masquez ensuite les contenus de niveau plus bas Utilisez par exemple les groupements de lignes dans excel pour creacuteer des pliers-deacutepliers ou imprimer la liste sur une feuille que vous pliez pour masquer certaines parties

Demandez agrave un utilisateur de vous dire ougrave il penserait trouver un contenu bien preacutecis en preacutecisant qursquoil nrsquoy a pas de bonne reacuteponse

Notez srsquoil va chercher lagrave ougrave vous vous y attendiez ougrave il a heacutesiteacute et ce qursquoil a fini par choisir pour vous aider agrave rendre la navigation plus intuitive

Introduction agrave lrsquoergonomie

Test drsquoutilisabiliteacute DIY79

Cornelia Laros

A chaque nouvelle fonctionnaliteacute ajouteacutee demandez agrave quelqursquoun qui ne connait pas le projet de srsquoen servir Proposez lui une seule tacircche geacuteneacuterique agrave accomplir avec la fonctionnaliteacute

Exemple Tu veux prendre un rendez-vous avec un meacutedecin sur ce site montres-moi comment tu ferais en commentant agrave haute voix

Le plus important ici crsquoest de ne pas reacuteagir agrave ce qursquoil fait mais simplement le regarder faire sans lrsquoaider mecircme srsquoil est bloqueacute

Srsquoil 983540983586983588983589 de983543 983578983547983589s983545i983586983585s reacutepo983539983592983530z 983540983580983590 un983530 983577983548e983588t983534983587983539 o983547 d983535983545e983588 l983547983535 983577u983530 983550983587us 983536983547983535 983590eacutepo983539983592r983530983555 983578983548an983591 983534983537 983580ur983527 fi983539983535 983588rsquoil 983534983539983588983535s983545e Srsquoil 983530983543983546 v983542983580i983593983530n983545 983529l983587983577ueacute di983545983530983588 l983548i 983577983547983589 983550o983547s 983580983536983537ez 983542983530983550983587ir 983549983586983546r983589 983579o983541983534983589 et 983530983543983588983580ye983555 983592983530 c983587983538983541re983539983592r983530 983579983589 983578u983534 l983589 9835316ne

Introduction agrave lrsquoergonomie

Pas besoin de reacuteinventer la roue DIY

80

Cornelia Laros

Il existe des bonnes pratiques qui vous eacuteviteront de reacuteinventer la roue Utilisez des laquo design patterns raquo pour concevoir vos interfaces

Renseignez vous sur la Gestalt Theorie pour agencer vos pages

Utilisez les critegraveres de Bastien et Scapin pour trouver des deacutefauts eacutevidents avant de tester vous en tirerez des enseignements plus inteacuteressants

Ma983534s ccedila crsquoes983545 983541983586983548r u983539983530 983580u983546r983530 983559983587i983588

Introduction agrave lrsquoergonomie

Quizz time

81

Cornelia Laros

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

82

Cornelia Laros

1 c Fonctionnel

2 a Fiable

3 d Accessible

4 b Intuitif

5 e Plaisant

6 f Porteur de sens

text

F - Quel besoin ai-je oublieacute dans la question preacuteceacutedente

83

Cornelia Laros

Uti983536983534983588983580b983536e

Introduction agrave lrsquoergonomie

Tests DIY84

Cornelia Laros

Reacutedigez la proceacutedure pour tester un de vos projets drsquoIHM avec le test de votre choix perception arborescence ou utilisabiliteacute

Notez la question que vous vous posez et la question que vous allez poser

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

Introduction agrave lrsquoergonomie

Ergonomie avant tout37

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

38

Cornelia Laros

text

Lrsquoergonomie sert agravehellip39

Cornelia Laros

1 ameacuteliorer les conditions de travail

2 faire gagner plus drsquoargent agrave lrsquoentreprise

3 ameacuteliorer lrsquoestheacutetique

4 comprendre comment ameacuteliorer un produit

text

Quelles affirmations sont vraies

40

Cornelia Laros

1 Lrsquoergonomie srsquoattache agrave comprendre le travail pour le transformer

2 Il est possible de concevoir une IHM qui fonctionne pour tout le monde en se basant sur des normes

3 Lrsquoutilisateur va se servir de votre produit de la faccedilon dont vous lrsquoavez imagineacute

4 Lrsquoutilisateur interpregravete une tacircche comme un problegraveme qursquoil doit reacutesoudre en faisant avec ses caracteacuteristiques et les moyens mis agrave sa disposition

text

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

41

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

text

D - A quoi sert un prototype

42

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

43

Cornelia Laros

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

44

Cornelia Laros

Utilisabiliteacute

Utiliteacute

Efficaciteacute Efficience

Satisfaction

Introduction agrave lrsquoergonomie

Pyramide des besoins MASLOW

45

Cornelia Laros

Introduction agrave lrsquoergonomie

Pyramide des besoins IHM46

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

47

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

48

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

49

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

50

Cornelia Laros

Introduction agrave lrsquoergonomie

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

51

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

Introduction agrave lrsquoergonomie

D - A quoi sert un prototype

52

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

53

Cornelia Laros

a Fiable

b Intuitif

c Fonctionnel

d Accessible

e Plaisant

f Porteur de sens

Introduction agrave lrsquoergonomie

F - Quel besoin ai-je oublieacute dans la question

preacuteceacutedente

54

Cornelia Laros

text

Patterns amp Dark patterns

55

Cornelia Laros

text

Criteres de Bastien et Scapin56

Cornelia Laros

Guidage

Charge de travail

Controcircle utilisateur explicite

Flexibiliteacute ( adaptabiliteacute)

Gestion des erreurs

Homogeacuteneacuteiteacute ( coheacuterence)

Signifiance des Codes et Deacutenominations

Compatibiliteacute ( familiariteacute)

Introduction agrave lrsquoergonomie

Guidage57

Cornelia Laros

Introduction agrave lrsquoergonomie

Charge de travail58

Cornelia Laros

Introduction agrave lrsquoergonomie

Controle explicite59

Cornelia Laros

Introduction agrave lrsquoergonomie

Controles explicites60

Cornelia Laros

Dar983595 983541983527t983545983589983590n

text

Adaptabiliteacute61

Cornelia Laros

text

Gestion des erreurs62

Cornelia Laros

text

Signifiance des codes et deacutenominations

63

Cornelia Laros

text

Homogeacuteneacuteiteacute - coheacuterence64

Cornelia Laros

text

Homogeacuteneacuteiteacute - Distinction65

Cornelia Laros

text

Compatibiliteacute66

Cornelia Laros

text

Compatibiliteacute67

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction68

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction69

Cornelia Laros

text

Gestalt Theorie70

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Gestalt Theorie71

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Dark patterns72

Cornelia Laros

Introduction agrave lrsquoergonomie

A vous de jouer

73

Cornelia Laros

Introduction agrave lrsquoergonomie

Outils de prototypages DIY74

Cornelia Laros

Low tech papier + crayons post-its cartes agrave jouer

Gratuit en ligne Invision app Moqups UXPin

Mac Sketch Balsamiq Mockups Axure

PC Axure Balsamiq

Mobile Prototyping on Paper

Ap983540983590en983530983555 983592983589 no983547983549983589983537le983543 983581h983586983543983589983588

Introduction agrave lrsquoergonomie

Test de perception DIY75

Cornelia Laros

La premiegravere impression qursquoun utilisateur se fait de votre IHM va influencer tous ses jugements ulteacuterieurs Crsquoest lrsquoeffet de halo

bull Un utilisateur qui a une premiegravere impression positive de votre appli passera plus facilement outre les bugs

bull Une premiegravere impression negative rendra lrsquoutilisateur plus critique vis agrave vis de deacutetails qui confirment son jugement

Cel983527 983538983580983590c983532e 983527983548983588si 983527983549983589983581 vo983543 983586983590983580ux 983591rsquoex983527983538983589983585s vo983543 983530983585t983542983589983546i983530n983543 983592rsquoem983528983527983548983581he 983530983545 983550983587s 983542e983585d983530983555-vo983547983543 983581l983535e983539983546s

Introduction agrave lrsquoergonomie

Test de perception DIY76

Cornelia Laros

Montrer votre prototype agrave quelqursquoun pendant 5 secondes

Demandez-lui

bull Ce qursquoil a vu

bull Ce qursquoil a compris de ce qursquoil a vu

bull Ce qui lrsquoa surpris ou marqueacute

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY77

Cornelia Laros

Les difficulteacutes de navigation se produisent souvent dans les niveaux les plus haut de votre structure de contenu Vous pouvez veacuterifier facilement si la classification logique pour vous lrsquoest aussi pour vos utilisateurs

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY78

Cornelia Laros

Lister trois (max) niveaux de profondeur de votre contenu structureacute Masquez ensuite les contenus de niveau plus bas Utilisez par exemple les groupements de lignes dans excel pour creacuteer des pliers-deacutepliers ou imprimer la liste sur une feuille que vous pliez pour masquer certaines parties

Demandez agrave un utilisateur de vous dire ougrave il penserait trouver un contenu bien preacutecis en preacutecisant qursquoil nrsquoy a pas de bonne reacuteponse

Notez srsquoil va chercher lagrave ougrave vous vous y attendiez ougrave il a heacutesiteacute et ce qursquoil a fini par choisir pour vous aider agrave rendre la navigation plus intuitive

Introduction agrave lrsquoergonomie

Test drsquoutilisabiliteacute DIY79

Cornelia Laros

A chaque nouvelle fonctionnaliteacute ajouteacutee demandez agrave quelqursquoun qui ne connait pas le projet de srsquoen servir Proposez lui une seule tacircche geacuteneacuterique agrave accomplir avec la fonctionnaliteacute

Exemple Tu veux prendre un rendez-vous avec un meacutedecin sur ce site montres-moi comment tu ferais en commentant agrave haute voix

Le plus important ici crsquoest de ne pas reacuteagir agrave ce qursquoil fait mais simplement le regarder faire sans lrsquoaider mecircme srsquoil est bloqueacute

Srsquoil 983540983586983588983589 de983543 983578983547983589s983545i983586983585s reacutepo983539983592983530z 983540983580983590 un983530 983577983548e983588t983534983587983539 o983547 d983535983545e983588 l983547983535 983577u983530 983550983587us 983536983547983535 983590eacutepo983539983592r983530983555 983578983548an983591 983534983537 983580ur983527 fi983539983535 983588rsquoil 983534983539983588983535s983545e Srsquoil 983530983543983546 v983542983580i983593983530n983545 983529l983587983577ueacute di983545983530983588 l983548i 983577983547983589 983550o983547s 983580983536983537ez 983542983530983550983587ir 983549983586983546r983589 983579o983541983534983589 et 983530983543983588983580ye983555 983592983530 c983587983538983541re983539983592r983530 983579983589 983578u983534 l983589 9835316ne

Introduction agrave lrsquoergonomie

Pas besoin de reacuteinventer la roue DIY

80

Cornelia Laros

Il existe des bonnes pratiques qui vous eacuteviteront de reacuteinventer la roue Utilisez des laquo design patterns raquo pour concevoir vos interfaces

Renseignez vous sur la Gestalt Theorie pour agencer vos pages

Utilisez les critegraveres de Bastien et Scapin pour trouver des deacutefauts eacutevidents avant de tester vous en tirerez des enseignements plus inteacuteressants

Ma983534s ccedila crsquoes983545 983541983586983548r u983539983530 983580u983546r983530 983559983587i983588

Introduction agrave lrsquoergonomie

Quizz time

81

Cornelia Laros

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

82

Cornelia Laros

1 c Fonctionnel

2 a Fiable

3 d Accessible

4 b Intuitif

5 e Plaisant

6 f Porteur de sens

text

F - Quel besoin ai-je oublieacute dans la question preacuteceacutedente

83

Cornelia Laros

Uti983536983534983588983580b983536e

Introduction agrave lrsquoergonomie

Tests DIY84

Cornelia Laros

Reacutedigez la proceacutedure pour tester un de vos projets drsquoIHM avec le test de votre choix perception arborescence ou utilisabiliteacute

Notez la question que vous vous posez et la question que vous allez poser

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

Introduction agrave lrsquoergonomie

Quizz time

38

Cornelia Laros

text

Lrsquoergonomie sert agravehellip39

Cornelia Laros

1 ameacuteliorer les conditions de travail

2 faire gagner plus drsquoargent agrave lrsquoentreprise

3 ameacuteliorer lrsquoestheacutetique

4 comprendre comment ameacuteliorer un produit

text

Quelles affirmations sont vraies

40

Cornelia Laros

1 Lrsquoergonomie srsquoattache agrave comprendre le travail pour le transformer

2 Il est possible de concevoir une IHM qui fonctionne pour tout le monde en se basant sur des normes

3 Lrsquoutilisateur va se servir de votre produit de la faccedilon dont vous lrsquoavez imagineacute

4 Lrsquoutilisateur interpregravete une tacircche comme un problegraveme qursquoil doit reacutesoudre en faisant avec ses caracteacuteristiques et les moyens mis agrave sa disposition

text

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

41

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

text

D - A quoi sert un prototype

42

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

43

Cornelia Laros

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

44

Cornelia Laros

Utilisabiliteacute

Utiliteacute

Efficaciteacute Efficience

Satisfaction

Introduction agrave lrsquoergonomie

Pyramide des besoins MASLOW

45

Cornelia Laros

Introduction agrave lrsquoergonomie

Pyramide des besoins IHM46

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

47

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

48

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

49

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

50

Cornelia Laros

Introduction agrave lrsquoergonomie

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

51

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

Introduction agrave lrsquoergonomie

D - A quoi sert un prototype

52

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

53

Cornelia Laros

a Fiable

b Intuitif

c Fonctionnel

d Accessible

e Plaisant

f Porteur de sens

Introduction agrave lrsquoergonomie

F - Quel besoin ai-je oublieacute dans la question

preacuteceacutedente

54

Cornelia Laros

text

Patterns amp Dark patterns

55

Cornelia Laros

text

Criteres de Bastien et Scapin56

Cornelia Laros

Guidage

Charge de travail

Controcircle utilisateur explicite

Flexibiliteacute ( adaptabiliteacute)

Gestion des erreurs

Homogeacuteneacuteiteacute ( coheacuterence)

Signifiance des Codes et Deacutenominations

Compatibiliteacute ( familiariteacute)

Introduction agrave lrsquoergonomie

Guidage57

Cornelia Laros

Introduction agrave lrsquoergonomie

Charge de travail58

Cornelia Laros

Introduction agrave lrsquoergonomie

Controle explicite59

Cornelia Laros

Introduction agrave lrsquoergonomie

Controles explicites60

Cornelia Laros

Dar983595 983541983527t983545983589983590n

text

Adaptabiliteacute61

Cornelia Laros

text

Gestion des erreurs62

Cornelia Laros

text

Signifiance des codes et deacutenominations

63

Cornelia Laros

text

Homogeacuteneacuteiteacute - coheacuterence64

Cornelia Laros

text

Homogeacuteneacuteiteacute - Distinction65

Cornelia Laros

text

Compatibiliteacute66

Cornelia Laros

text

Compatibiliteacute67

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction68

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction69

Cornelia Laros

text

Gestalt Theorie70

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Gestalt Theorie71

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Dark patterns72

Cornelia Laros

Introduction agrave lrsquoergonomie

A vous de jouer

73

Cornelia Laros

Introduction agrave lrsquoergonomie

Outils de prototypages DIY74

Cornelia Laros

Low tech papier + crayons post-its cartes agrave jouer

Gratuit en ligne Invision app Moqups UXPin

Mac Sketch Balsamiq Mockups Axure

PC Axure Balsamiq

Mobile Prototyping on Paper

Ap983540983590en983530983555 983592983589 no983547983549983589983537le983543 983581h983586983543983589983588

Introduction agrave lrsquoergonomie

Test de perception DIY75

Cornelia Laros

La premiegravere impression qursquoun utilisateur se fait de votre IHM va influencer tous ses jugements ulteacuterieurs Crsquoest lrsquoeffet de halo

bull Un utilisateur qui a une premiegravere impression positive de votre appli passera plus facilement outre les bugs

bull Une premiegravere impression negative rendra lrsquoutilisateur plus critique vis agrave vis de deacutetails qui confirment son jugement

Cel983527 983538983580983590c983532e 983527983548983588si 983527983549983589983581 vo983543 983586983590983580ux 983591rsquoex983527983538983589983585s vo983543 983530983585t983542983589983546i983530n983543 983592rsquoem983528983527983548983581he 983530983545 983550983587s 983542e983585d983530983555-vo983547983543 983581l983535e983539983546s

Introduction agrave lrsquoergonomie

Test de perception DIY76

Cornelia Laros

Montrer votre prototype agrave quelqursquoun pendant 5 secondes

Demandez-lui

bull Ce qursquoil a vu

bull Ce qursquoil a compris de ce qursquoil a vu

bull Ce qui lrsquoa surpris ou marqueacute

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY77

Cornelia Laros

Les difficulteacutes de navigation se produisent souvent dans les niveaux les plus haut de votre structure de contenu Vous pouvez veacuterifier facilement si la classification logique pour vous lrsquoest aussi pour vos utilisateurs

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY78

Cornelia Laros

Lister trois (max) niveaux de profondeur de votre contenu structureacute Masquez ensuite les contenus de niveau plus bas Utilisez par exemple les groupements de lignes dans excel pour creacuteer des pliers-deacutepliers ou imprimer la liste sur une feuille que vous pliez pour masquer certaines parties

Demandez agrave un utilisateur de vous dire ougrave il penserait trouver un contenu bien preacutecis en preacutecisant qursquoil nrsquoy a pas de bonne reacuteponse

Notez srsquoil va chercher lagrave ougrave vous vous y attendiez ougrave il a heacutesiteacute et ce qursquoil a fini par choisir pour vous aider agrave rendre la navigation plus intuitive

Introduction agrave lrsquoergonomie

Test drsquoutilisabiliteacute DIY79

Cornelia Laros

A chaque nouvelle fonctionnaliteacute ajouteacutee demandez agrave quelqursquoun qui ne connait pas le projet de srsquoen servir Proposez lui une seule tacircche geacuteneacuterique agrave accomplir avec la fonctionnaliteacute

Exemple Tu veux prendre un rendez-vous avec un meacutedecin sur ce site montres-moi comment tu ferais en commentant agrave haute voix

Le plus important ici crsquoest de ne pas reacuteagir agrave ce qursquoil fait mais simplement le regarder faire sans lrsquoaider mecircme srsquoil est bloqueacute

Srsquoil 983540983586983588983589 de983543 983578983547983589s983545i983586983585s reacutepo983539983592983530z 983540983580983590 un983530 983577983548e983588t983534983587983539 o983547 d983535983545e983588 l983547983535 983577u983530 983550983587us 983536983547983535 983590eacutepo983539983592r983530983555 983578983548an983591 983534983537 983580ur983527 fi983539983535 983588rsquoil 983534983539983588983535s983545e Srsquoil 983530983543983546 v983542983580i983593983530n983545 983529l983587983577ueacute di983545983530983588 l983548i 983577983547983589 983550o983547s 983580983536983537ez 983542983530983550983587ir 983549983586983546r983589 983579o983541983534983589 et 983530983543983588983580ye983555 983592983530 c983587983538983541re983539983592r983530 983579983589 983578u983534 l983589 9835316ne

Introduction agrave lrsquoergonomie

Pas besoin de reacuteinventer la roue DIY

80

Cornelia Laros

Il existe des bonnes pratiques qui vous eacuteviteront de reacuteinventer la roue Utilisez des laquo design patterns raquo pour concevoir vos interfaces

Renseignez vous sur la Gestalt Theorie pour agencer vos pages

Utilisez les critegraveres de Bastien et Scapin pour trouver des deacutefauts eacutevidents avant de tester vous en tirerez des enseignements plus inteacuteressants

Ma983534s ccedila crsquoes983545 983541983586983548r u983539983530 983580u983546r983530 983559983587i983588

Introduction agrave lrsquoergonomie

Quizz time

81

Cornelia Laros

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

82

Cornelia Laros

1 c Fonctionnel

2 a Fiable

3 d Accessible

4 b Intuitif

5 e Plaisant

6 f Porteur de sens

text

F - Quel besoin ai-je oublieacute dans la question preacuteceacutedente

83

Cornelia Laros

Uti983536983534983588983580b983536e

Introduction agrave lrsquoergonomie

Tests DIY84

Cornelia Laros

Reacutedigez la proceacutedure pour tester un de vos projets drsquoIHM avec le test de votre choix perception arborescence ou utilisabiliteacute

Notez la question que vous vous posez et la question que vous allez poser

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

text

Lrsquoergonomie sert agravehellip39

Cornelia Laros

1 ameacuteliorer les conditions de travail

2 faire gagner plus drsquoargent agrave lrsquoentreprise

3 ameacuteliorer lrsquoestheacutetique

4 comprendre comment ameacuteliorer un produit

text

Quelles affirmations sont vraies

40

Cornelia Laros

1 Lrsquoergonomie srsquoattache agrave comprendre le travail pour le transformer

2 Il est possible de concevoir une IHM qui fonctionne pour tout le monde en se basant sur des normes

3 Lrsquoutilisateur va se servir de votre produit de la faccedilon dont vous lrsquoavez imagineacute

4 Lrsquoutilisateur interpregravete une tacircche comme un problegraveme qursquoil doit reacutesoudre en faisant avec ses caracteacuteristiques et les moyens mis agrave sa disposition

text

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

41

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

text

D - A quoi sert un prototype

42

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

43

Cornelia Laros

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

44

Cornelia Laros

Utilisabiliteacute

Utiliteacute

Efficaciteacute Efficience

Satisfaction

Introduction agrave lrsquoergonomie

Pyramide des besoins MASLOW

45

Cornelia Laros

Introduction agrave lrsquoergonomie

Pyramide des besoins IHM46

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

47

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

48

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

49

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

50

Cornelia Laros

Introduction agrave lrsquoergonomie

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

51

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

Introduction agrave lrsquoergonomie

D - A quoi sert un prototype

52

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

53

Cornelia Laros

a Fiable

b Intuitif

c Fonctionnel

d Accessible

e Plaisant

f Porteur de sens

Introduction agrave lrsquoergonomie

F - Quel besoin ai-je oublieacute dans la question

preacuteceacutedente

54

Cornelia Laros

text

Patterns amp Dark patterns

55

Cornelia Laros

text

Criteres de Bastien et Scapin56

Cornelia Laros

Guidage

Charge de travail

Controcircle utilisateur explicite

Flexibiliteacute ( adaptabiliteacute)

Gestion des erreurs

Homogeacuteneacuteiteacute ( coheacuterence)

Signifiance des Codes et Deacutenominations

Compatibiliteacute ( familiariteacute)

Introduction agrave lrsquoergonomie

Guidage57

Cornelia Laros

Introduction agrave lrsquoergonomie

Charge de travail58

Cornelia Laros

Introduction agrave lrsquoergonomie

Controle explicite59

Cornelia Laros

Introduction agrave lrsquoergonomie

Controles explicites60

Cornelia Laros

Dar983595 983541983527t983545983589983590n

text

Adaptabiliteacute61

Cornelia Laros

text

Gestion des erreurs62

Cornelia Laros

text

Signifiance des codes et deacutenominations

63

Cornelia Laros

text

Homogeacuteneacuteiteacute - coheacuterence64

Cornelia Laros

text

Homogeacuteneacuteiteacute - Distinction65

Cornelia Laros

text

Compatibiliteacute66

Cornelia Laros

text

Compatibiliteacute67

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction68

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction69

Cornelia Laros

text

Gestalt Theorie70

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Gestalt Theorie71

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Dark patterns72

Cornelia Laros

Introduction agrave lrsquoergonomie

A vous de jouer

73

Cornelia Laros

Introduction agrave lrsquoergonomie

Outils de prototypages DIY74

Cornelia Laros

Low tech papier + crayons post-its cartes agrave jouer

Gratuit en ligne Invision app Moqups UXPin

Mac Sketch Balsamiq Mockups Axure

PC Axure Balsamiq

Mobile Prototyping on Paper

Ap983540983590en983530983555 983592983589 no983547983549983589983537le983543 983581h983586983543983589983588

Introduction agrave lrsquoergonomie

Test de perception DIY75

Cornelia Laros

La premiegravere impression qursquoun utilisateur se fait de votre IHM va influencer tous ses jugements ulteacuterieurs Crsquoest lrsquoeffet de halo

bull Un utilisateur qui a une premiegravere impression positive de votre appli passera plus facilement outre les bugs

bull Une premiegravere impression negative rendra lrsquoutilisateur plus critique vis agrave vis de deacutetails qui confirment son jugement

Cel983527 983538983580983590c983532e 983527983548983588si 983527983549983589983581 vo983543 983586983590983580ux 983591rsquoex983527983538983589983585s vo983543 983530983585t983542983589983546i983530n983543 983592rsquoem983528983527983548983581he 983530983545 983550983587s 983542e983585d983530983555-vo983547983543 983581l983535e983539983546s

Introduction agrave lrsquoergonomie

Test de perception DIY76

Cornelia Laros

Montrer votre prototype agrave quelqursquoun pendant 5 secondes

Demandez-lui

bull Ce qursquoil a vu

bull Ce qursquoil a compris de ce qursquoil a vu

bull Ce qui lrsquoa surpris ou marqueacute

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY77

Cornelia Laros

Les difficulteacutes de navigation se produisent souvent dans les niveaux les plus haut de votre structure de contenu Vous pouvez veacuterifier facilement si la classification logique pour vous lrsquoest aussi pour vos utilisateurs

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY78

Cornelia Laros

Lister trois (max) niveaux de profondeur de votre contenu structureacute Masquez ensuite les contenus de niveau plus bas Utilisez par exemple les groupements de lignes dans excel pour creacuteer des pliers-deacutepliers ou imprimer la liste sur une feuille que vous pliez pour masquer certaines parties

Demandez agrave un utilisateur de vous dire ougrave il penserait trouver un contenu bien preacutecis en preacutecisant qursquoil nrsquoy a pas de bonne reacuteponse

Notez srsquoil va chercher lagrave ougrave vous vous y attendiez ougrave il a heacutesiteacute et ce qursquoil a fini par choisir pour vous aider agrave rendre la navigation plus intuitive

Introduction agrave lrsquoergonomie

Test drsquoutilisabiliteacute DIY79

Cornelia Laros

A chaque nouvelle fonctionnaliteacute ajouteacutee demandez agrave quelqursquoun qui ne connait pas le projet de srsquoen servir Proposez lui une seule tacircche geacuteneacuterique agrave accomplir avec la fonctionnaliteacute

Exemple Tu veux prendre un rendez-vous avec un meacutedecin sur ce site montres-moi comment tu ferais en commentant agrave haute voix

Le plus important ici crsquoest de ne pas reacuteagir agrave ce qursquoil fait mais simplement le regarder faire sans lrsquoaider mecircme srsquoil est bloqueacute

Srsquoil 983540983586983588983589 de983543 983578983547983589s983545i983586983585s reacutepo983539983592983530z 983540983580983590 un983530 983577983548e983588t983534983587983539 o983547 d983535983545e983588 l983547983535 983577u983530 983550983587us 983536983547983535 983590eacutepo983539983592r983530983555 983578983548an983591 983534983537 983580ur983527 fi983539983535 983588rsquoil 983534983539983588983535s983545e Srsquoil 983530983543983546 v983542983580i983593983530n983545 983529l983587983577ueacute di983545983530983588 l983548i 983577983547983589 983550o983547s 983580983536983537ez 983542983530983550983587ir 983549983586983546r983589 983579o983541983534983589 et 983530983543983588983580ye983555 983592983530 c983587983538983541re983539983592r983530 983579983589 983578u983534 l983589 9835316ne

Introduction agrave lrsquoergonomie

Pas besoin de reacuteinventer la roue DIY

80

Cornelia Laros

Il existe des bonnes pratiques qui vous eacuteviteront de reacuteinventer la roue Utilisez des laquo design patterns raquo pour concevoir vos interfaces

Renseignez vous sur la Gestalt Theorie pour agencer vos pages

Utilisez les critegraveres de Bastien et Scapin pour trouver des deacutefauts eacutevidents avant de tester vous en tirerez des enseignements plus inteacuteressants

Ma983534s ccedila crsquoes983545 983541983586983548r u983539983530 983580u983546r983530 983559983587i983588

Introduction agrave lrsquoergonomie

Quizz time

81

Cornelia Laros

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

82

Cornelia Laros

1 c Fonctionnel

2 a Fiable

3 d Accessible

4 b Intuitif

5 e Plaisant

6 f Porteur de sens

text

F - Quel besoin ai-je oublieacute dans la question preacuteceacutedente

83

Cornelia Laros

Uti983536983534983588983580b983536e

Introduction agrave lrsquoergonomie

Tests DIY84

Cornelia Laros

Reacutedigez la proceacutedure pour tester un de vos projets drsquoIHM avec le test de votre choix perception arborescence ou utilisabiliteacute

Notez la question que vous vous posez et la question que vous allez poser

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

text

Quelles affirmations sont vraies

40

Cornelia Laros

1 Lrsquoergonomie srsquoattache agrave comprendre le travail pour le transformer

2 Il est possible de concevoir une IHM qui fonctionne pour tout le monde en se basant sur des normes

3 Lrsquoutilisateur va se servir de votre produit de la faccedilon dont vous lrsquoavez imagineacute

4 Lrsquoutilisateur interpregravete une tacircche comme un problegraveme qursquoil doit reacutesoudre en faisant avec ses caracteacuteristiques et les moyens mis agrave sa disposition

text

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

41

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

text

D - A quoi sert un prototype

42

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

43

Cornelia Laros

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

44

Cornelia Laros

Utilisabiliteacute

Utiliteacute

Efficaciteacute Efficience

Satisfaction

Introduction agrave lrsquoergonomie

Pyramide des besoins MASLOW

45

Cornelia Laros

Introduction agrave lrsquoergonomie

Pyramide des besoins IHM46

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

47

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

48

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

49

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

50

Cornelia Laros

Introduction agrave lrsquoergonomie

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

51

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

Introduction agrave lrsquoergonomie

D - A quoi sert un prototype

52

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

53

Cornelia Laros

a Fiable

b Intuitif

c Fonctionnel

d Accessible

e Plaisant

f Porteur de sens

Introduction agrave lrsquoergonomie

F - Quel besoin ai-je oublieacute dans la question

preacuteceacutedente

54

Cornelia Laros

text

Patterns amp Dark patterns

55

Cornelia Laros

text

Criteres de Bastien et Scapin56

Cornelia Laros

Guidage

Charge de travail

Controcircle utilisateur explicite

Flexibiliteacute ( adaptabiliteacute)

Gestion des erreurs

Homogeacuteneacuteiteacute ( coheacuterence)

Signifiance des Codes et Deacutenominations

Compatibiliteacute ( familiariteacute)

Introduction agrave lrsquoergonomie

Guidage57

Cornelia Laros

Introduction agrave lrsquoergonomie

Charge de travail58

Cornelia Laros

Introduction agrave lrsquoergonomie

Controle explicite59

Cornelia Laros

Introduction agrave lrsquoergonomie

Controles explicites60

Cornelia Laros

Dar983595 983541983527t983545983589983590n

text

Adaptabiliteacute61

Cornelia Laros

text

Gestion des erreurs62

Cornelia Laros

text

Signifiance des codes et deacutenominations

63

Cornelia Laros

text

Homogeacuteneacuteiteacute - coheacuterence64

Cornelia Laros

text

Homogeacuteneacuteiteacute - Distinction65

Cornelia Laros

text

Compatibiliteacute66

Cornelia Laros

text

Compatibiliteacute67

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction68

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction69

Cornelia Laros

text

Gestalt Theorie70

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Gestalt Theorie71

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Dark patterns72

Cornelia Laros

Introduction agrave lrsquoergonomie

A vous de jouer

73

Cornelia Laros

Introduction agrave lrsquoergonomie

Outils de prototypages DIY74

Cornelia Laros

Low tech papier + crayons post-its cartes agrave jouer

Gratuit en ligne Invision app Moqups UXPin

Mac Sketch Balsamiq Mockups Axure

PC Axure Balsamiq

Mobile Prototyping on Paper

Ap983540983590en983530983555 983592983589 no983547983549983589983537le983543 983581h983586983543983589983588

Introduction agrave lrsquoergonomie

Test de perception DIY75

Cornelia Laros

La premiegravere impression qursquoun utilisateur se fait de votre IHM va influencer tous ses jugements ulteacuterieurs Crsquoest lrsquoeffet de halo

bull Un utilisateur qui a une premiegravere impression positive de votre appli passera plus facilement outre les bugs

bull Une premiegravere impression negative rendra lrsquoutilisateur plus critique vis agrave vis de deacutetails qui confirment son jugement

Cel983527 983538983580983590c983532e 983527983548983588si 983527983549983589983581 vo983543 983586983590983580ux 983591rsquoex983527983538983589983585s vo983543 983530983585t983542983589983546i983530n983543 983592rsquoem983528983527983548983581he 983530983545 983550983587s 983542e983585d983530983555-vo983547983543 983581l983535e983539983546s

Introduction agrave lrsquoergonomie

Test de perception DIY76

Cornelia Laros

Montrer votre prototype agrave quelqursquoun pendant 5 secondes

Demandez-lui

bull Ce qursquoil a vu

bull Ce qursquoil a compris de ce qursquoil a vu

bull Ce qui lrsquoa surpris ou marqueacute

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY77

Cornelia Laros

Les difficulteacutes de navigation se produisent souvent dans les niveaux les plus haut de votre structure de contenu Vous pouvez veacuterifier facilement si la classification logique pour vous lrsquoest aussi pour vos utilisateurs

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY78

Cornelia Laros

Lister trois (max) niveaux de profondeur de votre contenu structureacute Masquez ensuite les contenus de niveau plus bas Utilisez par exemple les groupements de lignes dans excel pour creacuteer des pliers-deacutepliers ou imprimer la liste sur une feuille que vous pliez pour masquer certaines parties

Demandez agrave un utilisateur de vous dire ougrave il penserait trouver un contenu bien preacutecis en preacutecisant qursquoil nrsquoy a pas de bonne reacuteponse

Notez srsquoil va chercher lagrave ougrave vous vous y attendiez ougrave il a heacutesiteacute et ce qursquoil a fini par choisir pour vous aider agrave rendre la navigation plus intuitive

Introduction agrave lrsquoergonomie

Test drsquoutilisabiliteacute DIY79

Cornelia Laros

A chaque nouvelle fonctionnaliteacute ajouteacutee demandez agrave quelqursquoun qui ne connait pas le projet de srsquoen servir Proposez lui une seule tacircche geacuteneacuterique agrave accomplir avec la fonctionnaliteacute

Exemple Tu veux prendre un rendez-vous avec un meacutedecin sur ce site montres-moi comment tu ferais en commentant agrave haute voix

Le plus important ici crsquoest de ne pas reacuteagir agrave ce qursquoil fait mais simplement le regarder faire sans lrsquoaider mecircme srsquoil est bloqueacute

Srsquoil 983540983586983588983589 de983543 983578983547983589s983545i983586983585s reacutepo983539983592983530z 983540983580983590 un983530 983577983548e983588t983534983587983539 o983547 d983535983545e983588 l983547983535 983577u983530 983550983587us 983536983547983535 983590eacutepo983539983592r983530983555 983578983548an983591 983534983537 983580ur983527 fi983539983535 983588rsquoil 983534983539983588983535s983545e Srsquoil 983530983543983546 v983542983580i983593983530n983545 983529l983587983577ueacute di983545983530983588 l983548i 983577983547983589 983550o983547s 983580983536983537ez 983542983530983550983587ir 983549983586983546r983589 983579o983541983534983589 et 983530983543983588983580ye983555 983592983530 c983587983538983541re983539983592r983530 983579983589 983578u983534 l983589 9835316ne

Introduction agrave lrsquoergonomie

Pas besoin de reacuteinventer la roue DIY

80

Cornelia Laros

Il existe des bonnes pratiques qui vous eacuteviteront de reacuteinventer la roue Utilisez des laquo design patterns raquo pour concevoir vos interfaces

Renseignez vous sur la Gestalt Theorie pour agencer vos pages

Utilisez les critegraveres de Bastien et Scapin pour trouver des deacutefauts eacutevidents avant de tester vous en tirerez des enseignements plus inteacuteressants

Ma983534s ccedila crsquoes983545 983541983586983548r u983539983530 983580u983546r983530 983559983587i983588

Introduction agrave lrsquoergonomie

Quizz time

81

Cornelia Laros

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

82

Cornelia Laros

1 c Fonctionnel

2 a Fiable

3 d Accessible

4 b Intuitif

5 e Plaisant

6 f Porteur de sens

text

F - Quel besoin ai-je oublieacute dans la question preacuteceacutedente

83

Cornelia Laros

Uti983536983534983588983580b983536e

Introduction agrave lrsquoergonomie

Tests DIY84

Cornelia Laros

Reacutedigez la proceacutedure pour tester un de vos projets drsquoIHM avec le test de votre choix perception arborescence ou utilisabiliteacute

Notez la question que vous vous posez et la question que vous allez poser

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

text

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

41

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

text

D - A quoi sert un prototype

42

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

43

Cornelia Laros

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

44

Cornelia Laros

Utilisabiliteacute

Utiliteacute

Efficaciteacute Efficience

Satisfaction

Introduction agrave lrsquoergonomie

Pyramide des besoins MASLOW

45

Cornelia Laros

Introduction agrave lrsquoergonomie

Pyramide des besoins IHM46

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

47

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

48

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

49

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

50

Cornelia Laros

Introduction agrave lrsquoergonomie

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

51

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

Introduction agrave lrsquoergonomie

D - A quoi sert un prototype

52

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

53

Cornelia Laros

a Fiable

b Intuitif

c Fonctionnel

d Accessible

e Plaisant

f Porteur de sens

Introduction agrave lrsquoergonomie

F - Quel besoin ai-je oublieacute dans la question

preacuteceacutedente

54

Cornelia Laros

text

Patterns amp Dark patterns

55

Cornelia Laros

text

Criteres de Bastien et Scapin56

Cornelia Laros

Guidage

Charge de travail

Controcircle utilisateur explicite

Flexibiliteacute ( adaptabiliteacute)

Gestion des erreurs

Homogeacuteneacuteiteacute ( coheacuterence)

Signifiance des Codes et Deacutenominations

Compatibiliteacute ( familiariteacute)

Introduction agrave lrsquoergonomie

Guidage57

Cornelia Laros

Introduction agrave lrsquoergonomie

Charge de travail58

Cornelia Laros

Introduction agrave lrsquoergonomie

Controle explicite59

Cornelia Laros

Introduction agrave lrsquoergonomie

Controles explicites60

Cornelia Laros

Dar983595 983541983527t983545983589983590n

text

Adaptabiliteacute61

Cornelia Laros

text

Gestion des erreurs62

Cornelia Laros

text

Signifiance des codes et deacutenominations

63

Cornelia Laros

text

Homogeacuteneacuteiteacute - coheacuterence64

Cornelia Laros

text

Homogeacuteneacuteiteacute - Distinction65

Cornelia Laros

text

Compatibiliteacute66

Cornelia Laros

text

Compatibiliteacute67

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction68

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction69

Cornelia Laros

text

Gestalt Theorie70

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Gestalt Theorie71

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Dark patterns72

Cornelia Laros

Introduction agrave lrsquoergonomie

A vous de jouer

73

Cornelia Laros

Introduction agrave lrsquoergonomie

Outils de prototypages DIY74

Cornelia Laros

Low tech papier + crayons post-its cartes agrave jouer

Gratuit en ligne Invision app Moqups UXPin

Mac Sketch Balsamiq Mockups Axure

PC Axure Balsamiq

Mobile Prototyping on Paper

Ap983540983590en983530983555 983592983589 no983547983549983589983537le983543 983581h983586983543983589983588

Introduction agrave lrsquoergonomie

Test de perception DIY75

Cornelia Laros

La premiegravere impression qursquoun utilisateur se fait de votre IHM va influencer tous ses jugements ulteacuterieurs Crsquoest lrsquoeffet de halo

bull Un utilisateur qui a une premiegravere impression positive de votre appli passera plus facilement outre les bugs

bull Une premiegravere impression negative rendra lrsquoutilisateur plus critique vis agrave vis de deacutetails qui confirment son jugement

Cel983527 983538983580983590c983532e 983527983548983588si 983527983549983589983581 vo983543 983586983590983580ux 983591rsquoex983527983538983589983585s vo983543 983530983585t983542983589983546i983530n983543 983592rsquoem983528983527983548983581he 983530983545 983550983587s 983542e983585d983530983555-vo983547983543 983581l983535e983539983546s

Introduction agrave lrsquoergonomie

Test de perception DIY76

Cornelia Laros

Montrer votre prototype agrave quelqursquoun pendant 5 secondes

Demandez-lui

bull Ce qursquoil a vu

bull Ce qursquoil a compris de ce qursquoil a vu

bull Ce qui lrsquoa surpris ou marqueacute

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY77

Cornelia Laros

Les difficulteacutes de navigation se produisent souvent dans les niveaux les plus haut de votre structure de contenu Vous pouvez veacuterifier facilement si la classification logique pour vous lrsquoest aussi pour vos utilisateurs

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY78

Cornelia Laros

Lister trois (max) niveaux de profondeur de votre contenu structureacute Masquez ensuite les contenus de niveau plus bas Utilisez par exemple les groupements de lignes dans excel pour creacuteer des pliers-deacutepliers ou imprimer la liste sur une feuille que vous pliez pour masquer certaines parties

Demandez agrave un utilisateur de vous dire ougrave il penserait trouver un contenu bien preacutecis en preacutecisant qursquoil nrsquoy a pas de bonne reacuteponse

Notez srsquoil va chercher lagrave ougrave vous vous y attendiez ougrave il a heacutesiteacute et ce qursquoil a fini par choisir pour vous aider agrave rendre la navigation plus intuitive

Introduction agrave lrsquoergonomie

Test drsquoutilisabiliteacute DIY79

Cornelia Laros

A chaque nouvelle fonctionnaliteacute ajouteacutee demandez agrave quelqursquoun qui ne connait pas le projet de srsquoen servir Proposez lui une seule tacircche geacuteneacuterique agrave accomplir avec la fonctionnaliteacute

Exemple Tu veux prendre un rendez-vous avec un meacutedecin sur ce site montres-moi comment tu ferais en commentant agrave haute voix

Le plus important ici crsquoest de ne pas reacuteagir agrave ce qursquoil fait mais simplement le regarder faire sans lrsquoaider mecircme srsquoil est bloqueacute

Srsquoil 983540983586983588983589 de983543 983578983547983589s983545i983586983585s reacutepo983539983592983530z 983540983580983590 un983530 983577983548e983588t983534983587983539 o983547 d983535983545e983588 l983547983535 983577u983530 983550983587us 983536983547983535 983590eacutepo983539983592r983530983555 983578983548an983591 983534983537 983580ur983527 fi983539983535 983588rsquoil 983534983539983588983535s983545e Srsquoil 983530983543983546 v983542983580i983593983530n983545 983529l983587983577ueacute di983545983530983588 l983548i 983577983547983589 983550o983547s 983580983536983537ez 983542983530983550983587ir 983549983586983546r983589 983579o983541983534983589 et 983530983543983588983580ye983555 983592983530 c983587983538983541re983539983592r983530 983579983589 983578u983534 l983589 9835316ne

Introduction agrave lrsquoergonomie

Pas besoin de reacuteinventer la roue DIY

80

Cornelia Laros

Il existe des bonnes pratiques qui vous eacuteviteront de reacuteinventer la roue Utilisez des laquo design patterns raquo pour concevoir vos interfaces

Renseignez vous sur la Gestalt Theorie pour agencer vos pages

Utilisez les critegraveres de Bastien et Scapin pour trouver des deacutefauts eacutevidents avant de tester vous en tirerez des enseignements plus inteacuteressants

Ma983534s ccedila crsquoes983545 983541983586983548r u983539983530 983580u983546r983530 983559983587i983588

Introduction agrave lrsquoergonomie

Quizz time

81

Cornelia Laros

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

82

Cornelia Laros

1 c Fonctionnel

2 a Fiable

3 d Accessible

4 b Intuitif

5 e Plaisant

6 f Porteur de sens

text

F - Quel besoin ai-je oublieacute dans la question preacuteceacutedente

83

Cornelia Laros

Uti983536983534983588983580b983536e

Introduction agrave lrsquoergonomie

Tests DIY84

Cornelia Laros

Reacutedigez la proceacutedure pour tester un de vos projets drsquoIHM avec le test de votre choix perception arborescence ou utilisabiliteacute

Notez la question que vous vous posez et la question que vous allez poser

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

text

D - A quoi sert un prototype

42

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

43

Cornelia Laros

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

44

Cornelia Laros

Utilisabiliteacute

Utiliteacute

Efficaciteacute Efficience

Satisfaction

Introduction agrave lrsquoergonomie

Pyramide des besoins MASLOW

45

Cornelia Laros

Introduction agrave lrsquoergonomie

Pyramide des besoins IHM46

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

47

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

48

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

49

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

50

Cornelia Laros

Introduction agrave lrsquoergonomie

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

51

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

Introduction agrave lrsquoergonomie

D - A quoi sert un prototype

52

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

53

Cornelia Laros

a Fiable

b Intuitif

c Fonctionnel

d Accessible

e Plaisant

f Porteur de sens

Introduction agrave lrsquoergonomie

F - Quel besoin ai-je oublieacute dans la question

preacuteceacutedente

54

Cornelia Laros

text

Patterns amp Dark patterns

55

Cornelia Laros

text

Criteres de Bastien et Scapin56

Cornelia Laros

Guidage

Charge de travail

Controcircle utilisateur explicite

Flexibiliteacute ( adaptabiliteacute)

Gestion des erreurs

Homogeacuteneacuteiteacute ( coheacuterence)

Signifiance des Codes et Deacutenominations

Compatibiliteacute ( familiariteacute)

Introduction agrave lrsquoergonomie

Guidage57

Cornelia Laros

Introduction agrave lrsquoergonomie

Charge de travail58

Cornelia Laros

Introduction agrave lrsquoergonomie

Controle explicite59

Cornelia Laros

Introduction agrave lrsquoergonomie

Controles explicites60

Cornelia Laros

Dar983595 983541983527t983545983589983590n

text

Adaptabiliteacute61

Cornelia Laros

text

Gestion des erreurs62

Cornelia Laros

text

Signifiance des codes et deacutenominations

63

Cornelia Laros

text

Homogeacuteneacuteiteacute - coheacuterence64

Cornelia Laros

text

Homogeacuteneacuteiteacute - Distinction65

Cornelia Laros

text

Compatibiliteacute66

Cornelia Laros

text

Compatibiliteacute67

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction68

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction69

Cornelia Laros

text

Gestalt Theorie70

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Gestalt Theorie71

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Dark patterns72

Cornelia Laros

Introduction agrave lrsquoergonomie

A vous de jouer

73

Cornelia Laros

Introduction agrave lrsquoergonomie

Outils de prototypages DIY74

Cornelia Laros

Low tech papier + crayons post-its cartes agrave jouer

Gratuit en ligne Invision app Moqups UXPin

Mac Sketch Balsamiq Mockups Axure

PC Axure Balsamiq

Mobile Prototyping on Paper

Ap983540983590en983530983555 983592983589 no983547983549983589983537le983543 983581h983586983543983589983588

Introduction agrave lrsquoergonomie

Test de perception DIY75

Cornelia Laros

La premiegravere impression qursquoun utilisateur se fait de votre IHM va influencer tous ses jugements ulteacuterieurs Crsquoest lrsquoeffet de halo

bull Un utilisateur qui a une premiegravere impression positive de votre appli passera plus facilement outre les bugs

bull Une premiegravere impression negative rendra lrsquoutilisateur plus critique vis agrave vis de deacutetails qui confirment son jugement

Cel983527 983538983580983590c983532e 983527983548983588si 983527983549983589983581 vo983543 983586983590983580ux 983591rsquoex983527983538983589983585s vo983543 983530983585t983542983589983546i983530n983543 983592rsquoem983528983527983548983581he 983530983545 983550983587s 983542e983585d983530983555-vo983547983543 983581l983535e983539983546s

Introduction agrave lrsquoergonomie

Test de perception DIY76

Cornelia Laros

Montrer votre prototype agrave quelqursquoun pendant 5 secondes

Demandez-lui

bull Ce qursquoil a vu

bull Ce qursquoil a compris de ce qursquoil a vu

bull Ce qui lrsquoa surpris ou marqueacute

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY77

Cornelia Laros

Les difficulteacutes de navigation se produisent souvent dans les niveaux les plus haut de votre structure de contenu Vous pouvez veacuterifier facilement si la classification logique pour vous lrsquoest aussi pour vos utilisateurs

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY78

Cornelia Laros

Lister trois (max) niveaux de profondeur de votre contenu structureacute Masquez ensuite les contenus de niveau plus bas Utilisez par exemple les groupements de lignes dans excel pour creacuteer des pliers-deacutepliers ou imprimer la liste sur une feuille que vous pliez pour masquer certaines parties

Demandez agrave un utilisateur de vous dire ougrave il penserait trouver un contenu bien preacutecis en preacutecisant qursquoil nrsquoy a pas de bonne reacuteponse

Notez srsquoil va chercher lagrave ougrave vous vous y attendiez ougrave il a heacutesiteacute et ce qursquoil a fini par choisir pour vous aider agrave rendre la navigation plus intuitive

Introduction agrave lrsquoergonomie

Test drsquoutilisabiliteacute DIY79

Cornelia Laros

A chaque nouvelle fonctionnaliteacute ajouteacutee demandez agrave quelqursquoun qui ne connait pas le projet de srsquoen servir Proposez lui une seule tacircche geacuteneacuterique agrave accomplir avec la fonctionnaliteacute

Exemple Tu veux prendre un rendez-vous avec un meacutedecin sur ce site montres-moi comment tu ferais en commentant agrave haute voix

Le plus important ici crsquoest de ne pas reacuteagir agrave ce qursquoil fait mais simplement le regarder faire sans lrsquoaider mecircme srsquoil est bloqueacute

Srsquoil 983540983586983588983589 de983543 983578983547983589s983545i983586983585s reacutepo983539983592983530z 983540983580983590 un983530 983577983548e983588t983534983587983539 o983547 d983535983545e983588 l983547983535 983577u983530 983550983587us 983536983547983535 983590eacutepo983539983592r983530983555 983578983548an983591 983534983537 983580ur983527 fi983539983535 983588rsquoil 983534983539983588983535s983545e Srsquoil 983530983543983546 v983542983580i983593983530n983545 983529l983587983577ueacute di983545983530983588 l983548i 983577983547983589 983550o983547s 983580983536983537ez 983542983530983550983587ir 983549983586983546r983589 983579o983541983534983589 et 983530983543983588983580ye983555 983592983530 c983587983538983541re983539983592r983530 983579983589 983578u983534 l983589 9835316ne

Introduction agrave lrsquoergonomie

Pas besoin de reacuteinventer la roue DIY

80

Cornelia Laros

Il existe des bonnes pratiques qui vous eacuteviteront de reacuteinventer la roue Utilisez des laquo design patterns raquo pour concevoir vos interfaces

Renseignez vous sur la Gestalt Theorie pour agencer vos pages

Utilisez les critegraveres de Bastien et Scapin pour trouver des deacutefauts eacutevidents avant de tester vous en tirerez des enseignements plus inteacuteressants

Ma983534s ccedila crsquoes983545 983541983586983548r u983539983530 983580u983546r983530 983559983587i983588

Introduction agrave lrsquoergonomie

Quizz time

81

Cornelia Laros

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

82

Cornelia Laros

1 c Fonctionnel

2 a Fiable

3 d Accessible

4 b Intuitif

5 e Plaisant

6 f Porteur de sens

text

F - Quel besoin ai-je oublieacute dans la question preacuteceacutedente

83

Cornelia Laros

Uti983536983534983588983580b983536e

Introduction agrave lrsquoergonomie

Tests DIY84

Cornelia Laros

Reacutedigez la proceacutedure pour tester un de vos projets drsquoIHM avec le test de votre choix perception arborescence ou utilisabiliteacute

Notez la question que vous vous posez et la question que vous allez poser

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

43

Cornelia Laros

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

44

Cornelia Laros

Utilisabiliteacute

Utiliteacute

Efficaciteacute Efficience

Satisfaction

Introduction agrave lrsquoergonomie

Pyramide des besoins MASLOW

45

Cornelia Laros

Introduction agrave lrsquoergonomie

Pyramide des besoins IHM46

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

47

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

48

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

49

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

50

Cornelia Laros

Introduction agrave lrsquoergonomie

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

51

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

Introduction agrave lrsquoergonomie

D - A quoi sert un prototype

52

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

53

Cornelia Laros

a Fiable

b Intuitif

c Fonctionnel

d Accessible

e Plaisant

f Porteur de sens

Introduction agrave lrsquoergonomie

F - Quel besoin ai-je oublieacute dans la question

preacuteceacutedente

54

Cornelia Laros

text

Patterns amp Dark patterns

55

Cornelia Laros

text

Criteres de Bastien et Scapin56

Cornelia Laros

Guidage

Charge de travail

Controcircle utilisateur explicite

Flexibiliteacute ( adaptabiliteacute)

Gestion des erreurs

Homogeacuteneacuteiteacute ( coheacuterence)

Signifiance des Codes et Deacutenominations

Compatibiliteacute ( familiariteacute)

Introduction agrave lrsquoergonomie

Guidage57

Cornelia Laros

Introduction agrave lrsquoergonomie

Charge de travail58

Cornelia Laros

Introduction agrave lrsquoergonomie

Controle explicite59

Cornelia Laros

Introduction agrave lrsquoergonomie

Controles explicites60

Cornelia Laros

Dar983595 983541983527t983545983589983590n

text

Adaptabiliteacute61

Cornelia Laros

text

Gestion des erreurs62

Cornelia Laros

text

Signifiance des codes et deacutenominations

63

Cornelia Laros

text

Homogeacuteneacuteiteacute - coheacuterence64

Cornelia Laros

text

Homogeacuteneacuteiteacute - Distinction65

Cornelia Laros

text

Compatibiliteacute66

Cornelia Laros

text

Compatibiliteacute67

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction68

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction69

Cornelia Laros

text

Gestalt Theorie70

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Gestalt Theorie71

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Dark patterns72

Cornelia Laros

Introduction agrave lrsquoergonomie

A vous de jouer

73

Cornelia Laros

Introduction agrave lrsquoergonomie

Outils de prototypages DIY74

Cornelia Laros

Low tech papier + crayons post-its cartes agrave jouer

Gratuit en ligne Invision app Moqups UXPin

Mac Sketch Balsamiq Mockups Axure

PC Axure Balsamiq

Mobile Prototyping on Paper

Ap983540983590en983530983555 983592983589 no983547983549983589983537le983543 983581h983586983543983589983588

Introduction agrave lrsquoergonomie

Test de perception DIY75

Cornelia Laros

La premiegravere impression qursquoun utilisateur se fait de votre IHM va influencer tous ses jugements ulteacuterieurs Crsquoest lrsquoeffet de halo

bull Un utilisateur qui a une premiegravere impression positive de votre appli passera plus facilement outre les bugs

bull Une premiegravere impression negative rendra lrsquoutilisateur plus critique vis agrave vis de deacutetails qui confirment son jugement

Cel983527 983538983580983590c983532e 983527983548983588si 983527983549983589983581 vo983543 983586983590983580ux 983591rsquoex983527983538983589983585s vo983543 983530983585t983542983589983546i983530n983543 983592rsquoem983528983527983548983581he 983530983545 983550983587s 983542e983585d983530983555-vo983547983543 983581l983535e983539983546s

Introduction agrave lrsquoergonomie

Test de perception DIY76

Cornelia Laros

Montrer votre prototype agrave quelqursquoun pendant 5 secondes

Demandez-lui

bull Ce qursquoil a vu

bull Ce qursquoil a compris de ce qursquoil a vu

bull Ce qui lrsquoa surpris ou marqueacute

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY77

Cornelia Laros

Les difficulteacutes de navigation se produisent souvent dans les niveaux les plus haut de votre structure de contenu Vous pouvez veacuterifier facilement si la classification logique pour vous lrsquoest aussi pour vos utilisateurs

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY78

Cornelia Laros

Lister trois (max) niveaux de profondeur de votre contenu structureacute Masquez ensuite les contenus de niveau plus bas Utilisez par exemple les groupements de lignes dans excel pour creacuteer des pliers-deacutepliers ou imprimer la liste sur une feuille que vous pliez pour masquer certaines parties

Demandez agrave un utilisateur de vous dire ougrave il penserait trouver un contenu bien preacutecis en preacutecisant qursquoil nrsquoy a pas de bonne reacuteponse

Notez srsquoil va chercher lagrave ougrave vous vous y attendiez ougrave il a heacutesiteacute et ce qursquoil a fini par choisir pour vous aider agrave rendre la navigation plus intuitive

Introduction agrave lrsquoergonomie

Test drsquoutilisabiliteacute DIY79

Cornelia Laros

A chaque nouvelle fonctionnaliteacute ajouteacutee demandez agrave quelqursquoun qui ne connait pas le projet de srsquoen servir Proposez lui une seule tacircche geacuteneacuterique agrave accomplir avec la fonctionnaliteacute

Exemple Tu veux prendre un rendez-vous avec un meacutedecin sur ce site montres-moi comment tu ferais en commentant agrave haute voix

Le plus important ici crsquoest de ne pas reacuteagir agrave ce qursquoil fait mais simplement le regarder faire sans lrsquoaider mecircme srsquoil est bloqueacute

Srsquoil 983540983586983588983589 de983543 983578983547983589s983545i983586983585s reacutepo983539983592983530z 983540983580983590 un983530 983577983548e983588t983534983587983539 o983547 d983535983545e983588 l983547983535 983577u983530 983550983587us 983536983547983535 983590eacutepo983539983592r983530983555 983578983548an983591 983534983537 983580ur983527 fi983539983535 983588rsquoil 983534983539983588983535s983545e Srsquoil 983530983543983546 v983542983580i983593983530n983545 983529l983587983577ueacute di983545983530983588 l983548i 983577983547983589 983550o983547s 983580983536983537ez 983542983530983550983587ir 983549983586983546r983589 983579o983541983534983589 et 983530983543983588983580ye983555 983592983530 c983587983538983541re983539983592r983530 983579983589 983578u983534 l983589 9835316ne

Introduction agrave lrsquoergonomie

Pas besoin de reacuteinventer la roue DIY

80

Cornelia Laros

Il existe des bonnes pratiques qui vous eacuteviteront de reacuteinventer la roue Utilisez des laquo design patterns raquo pour concevoir vos interfaces

Renseignez vous sur la Gestalt Theorie pour agencer vos pages

Utilisez les critegraveres de Bastien et Scapin pour trouver des deacutefauts eacutevidents avant de tester vous en tirerez des enseignements plus inteacuteressants

Ma983534s ccedila crsquoes983545 983541983586983548r u983539983530 983580u983546r983530 983559983587i983588

Introduction agrave lrsquoergonomie

Quizz time

81

Cornelia Laros

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

82

Cornelia Laros

1 c Fonctionnel

2 a Fiable

3 d Accessible

4 b Intuitif

5 e Plaisant

6 f Porteur de sens

text

F - Quel besoin ai-je oublieacute dans la question preacuteceacutedente

83

Cornelia Laros

Uti983536983534983588983580b983536e

Introduction agrave lrsquoergonomie

Tests DIY84

Cornelia Laros

Reacutedigez la proceacutedure pour tester un de vos projets drsquoIHM avec le test de votre choix perception arborescence ou utilisabiliteacute

Notez la question que vous vous posez et la question que vous allez poser

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

Introduction agrave lrsquoergonomie

Bonnes pratiques de conception

44

Cornelia Laros

Utilisabiliteacute

Utiliteacute

Efficaciteacute Efficience

Satisfaction

Introduction agrave lrsquoergonomie

Pyramide des besoins MASLOW

45

Cornelia Laros

Introduction agrave lrsquoergonomie

Pyramide des besoins IHM46

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

47

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

48

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

49

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

50

Cornelia Laros

Introduction agrave lrsquoergonomie

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

51

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

Introduction agrave lrsquoergonomie

D - A quoi sert un prototype

52

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

53

Cornelia Laros

a Fiable

b Intuitif

c Fonctionnel

d Accessible

e Plaisant

f Porteur de sens

Introduction agrave lrsquoergonomie

F - Quel besoin ai-je oublieacute dans la question

preacuteceacutedente

54

Cornelia Laros

text

Patterns amp Dark patterns

55

Cornelia Laros

text

Criteres de Bastien et Scapin56

Cornelia Laros

Guidage

Charge de travail

Controcircle utilisateur explicite

Flexibiliteacute ( adaptabiliteacute)

Gestion des erreurs

Homogeacuteneacuteiteacute ( coheacuterence)

Signifiance des Codes et Deacutenominations

Compatibiliteacute ( familiariteacute)

Introduction agrave lrsquoergonomie

Guidage57

Cornelia Laros

Introduction agrave lrsquoergonomie

Charge de travail58

Cornelia Laros

Introduction agrave lrsquoergonomie

Controle explicite59

Cornelia Laros

Introduction agrave lrsquoergonomie

Controles explicites60

Cornelia Laros

Dar983595 983541983527t983545983589983590n

text

Adaptabiliteacute61

Cornelia Laros

text

Gestion des erreurs62

Cornelia Laros

text

Signifiance des codes et deacutenominations

63

Cornelia Laros

text

Homogeacuteneacuteiteacute - coheacuterence64

Cornelia Laros

text

Homogeacuteneacuteiteacute - Distinction65

Cornelia Laros

text

Compatibiliteacute66

Cornelia Laros

text

Compatibiliteacute67

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction68

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction69

Cornelia Laros

text

Gestalt Theorie70

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Gestalt Theorie71

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Dark patterns72

Cornelia Laros

Introduction agrave lrsquoergonomie

A vous de jouer

73

Cornelia Laros

Introduction agrave lrsquoergonomie

Outils de prototypages DIY74

Cornelia Laros

Low tech papier + crayons post-its cartes agrave jouer

Gratuit en ligne Invision app Moqups UXPin

Mac Sketch Balsamiq Mockups Axure

PC Axure Balsamiq

Mobile Prototyping on Paper

Ap983540983590en983530983555 983592983589 no983547983549983589983537le983543 983581h983586983543983589983588

Introduction agrave lrsquoergonomie

Test de perception DIY75

Cornelia Laros

La premiegravere impression qursquoun utilisateur se fait de votre IHM va influencer tous ses jugements ulteacuterieurs Crsquoest lrsquoeffet de halo

bull Un utilisateur qui a une premiegravere impression positive de votre appli passera plus facilement outre les bugs

bull Une premiegravere impression negative rendra lrsquoutilisateur plus critique vis agrave vis de deacutetails qui confirment son jugement

Cel983527 983538983580983590c983532e 983527983548983588si 983527983549983589983581 vo983543 983586983590983580ux 983591rsquoex983527983538983589983585s vo983543 983530983585t983542983589983546i983530n983543 983592rsquoem983528983527983548983581he 983530983545 983550983587s 983542e983585d983530983555-vo983547983543 983581l983535e983539983546s

Introduction agrave lrsquoergonomie

Test de perception DIY76

Cornelia Laros

Montrer votre prototype agrave quelqursquoun pendant 5 secondes

Demandez-lui

bull Ce qursquoil a vu

bull Ce qursquoil a compris de ce qursquoil a vu

bull Ce qui lrsquoa surpris ou marqueacute

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY77

Cornelia Laros

Les difficulteacutes de navigation se produisent souvent dans les niveaux les plus haut de votre structure de contenu Vous pouvez veacuterifier facilement si la classification logique pour vous lrsquoest aussi pour vos utilisateurs

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY78

Cornelia Laros

Lister trois (max) niveaux de profondeur de votre contenu structureacute Masquez ensuite les contenus de niveau plus bas Utilisez par exemple les groupements de lignes dans excel pour creacuteer des pliers-deacutepliers ou imprimer la liste sur une feuille que vous pliez pour masquer certaines parties

Demandez agrave un utilisateur de vous dire ougrave il penserait trouver un contenu bien preacutecis en preacutecisant qursquoil nrsquoy a pas de bonne reacuteponse

Notez srsquoil va chercher lagrave ougrave vous vous y attendiez ougrave il a heacutesiteacute et ce qursquoil a fini par choisir pour vous aider agrave rendre la navigation plus intuitive

Introduction agrave lrsquoergonomie

Test drsquoutilisabiliteacute DIY79

Cornelia Laros

A chaque nouvelle fonctionnaliteacute ajouteacutee demandez agrave quelqursquoun qui ne connait pas le projet de srsquoen servir Proposez lui une seule tacircche geacuteneacuterique agrave accomplir avec la fonctionnaliteacute

Exemple Tu veux prendre un rendez-vous avec un meacutedecin sur ce site montres-moi comment tu ferais en commentant agrave haute voix

Le plus important ici crsquoest de ne pas reacuteagir agrave ce qursquoil fait mais simplement le regarder faire sans lrsquoaider mecircme srsquoil est bloqueacute

Srsquoil 983540983586983588983589 de983543 983578983547983589s983545i983586983585s reacutepo983539983592983530z 983540983580983590 un983530 983577983548e983588t983534983587983539 o983547 d983535983545e983588 l983547983535 983577u983530 983550983587us 983536983547983535 983590eacutepo983539983592r983530983555 983578983548an983591 983534983537 983580ur983527 fi983539983535 983588rsquoil 983534983539983588983535s983545e Srsquoil 983530983543983546 v983542983580i983593983530n983545 983529l983587983577ueacute di983545983530983588 l983548i 983577983547983589 983550o983547s 983580983536983537ez 983542983530983550983587ir 983549983586983546r983589 983579o983541983534983589 et 983530983543983588983580ye983555 983592983530 c983587983538983541re983539983592r983530 983579983589 983578u983534 l983589 9835316ne

Introduction agrave lrsquoergonomie

Pas besoin de reacuteinventer la roue DIY

80

Cornelia Laros

Il existe des bonnes pratiques qui vous eacuteviteront de reacuteinventer la roue Utilisez des laquo design patterns raquo pour concevoir vos interfaces

Renseignez vous sur la Gestalt Theorie pour agencer vos pages

Utilisez les critegraveres de Bastien et Scapin pour trouver des deacutefauts eacutevidents avant de tester vous en tirerez des enseignements plus inteacuteressants

Ma983534s ccedila crsquoes983545 983541983586983548r u983539983530 983580u983546r983530 983559983587i983588

Introduction agrave lrsquoergonomie

Quizz time

81

Cornelia Laros

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

82

Cornelia Laros

1 c Fonctionnel

2 a Fiable

3 d Accessible

4 b Intuitif

5 e Plaisant

6 f Porteur de sens

text

F - Quel besoin ai-je oublieacute dans la question preacuteceacutedente

83

Cornelia Laros

Uti983536983534983588983580b983536e

Introduction agrave lrsquoergonomie

Tests DIY84

Cornelia Laros

Reacutedigez la proceacutedure pour tester un de vos projets drsquoIHM avec le test de votre choix perception arborescence ou utilisabiliteacute

Notez la question que vous vous posez et la question que vous allez poser

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

Introduction agrave lrsquoergonomie

Pyramide des besoins MASLOW

45

Cornelia Laros

Introduction agrave lrsquoergonomie

Pyramide des besoins IHM46

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

47

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

48

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

49

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

50

Cornelia Laros

Introduction agrave lrsquoergonomie

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

51

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

Introduction agrave lrsquoergonomie

D - A quoi sert un prototype

52

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

53

Cornelia Laros

a Fiable

b Intuitif

c Fonctionnel

d Accessible

e Plaisant

f Porteur de sens

Introduction agrave lrsquoergonomie

F - Quel besoin ai-je oublieacute dans la question

preacuteceacutedente

54

Cornelia Laros

text

Patterns amp Dark patterns

55

Cornelia Laros

text

Criteres de Bastien et Scapin56

Cornelia Laros

Guidage

Charge de travail

Controcircle utilisateur explicite

Flexibiliteacute ( adaptabiliteacute)

Gestion des erreurs

Homogeacuteneacuteiteacute ( coheacuterence)

Signifiance des Codes et Deacutenominations

Compatibiliteacute ( familiariteacute)

Introduction agrave lrsquoergonomie

Guidage57

Cornelia Laros

Introduction agrave lrsquoergonomie

Charge de travail58

Cornelia Laros

Introduction agrave lrsquoergonomie

Controle explicite59

Cornelia Laros

Introduction agrave lrsquoergonomie

Controles explicites60

Cornelia Laros

Dar983595 983541983527t983545983589983590n

text

Adaptabiliteacute61

Cornelia Laros

text

Gestion des erreurs62

Cornelia Laros

text

Signifiance des codes et deacutenominations

63

Cornelia Laros

text

Homogeacuteneacuteiteacute - coheacuterence64

Cornelia Laros

text

Homogeacuteneacuteiteacute - Distinction65

Cornelia Laros

text

Compatibiliteacute66

Cornelia Laros

text

Compatibiliteacute67

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction68

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction69

Cornelia Laros

text

Gestalt Theorie70

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Gestalt Theorie71

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Dark patterns72

Cornelia Laros

Introduction agrave lrsquoergonomie

A vous de jouer

73

Cornelia Laros

Introduction agrave lrsquoergonomie

Outils de prototypages DIY74

Cornelia Laros

Low tech papier + crayons post-its cartes agrave jouer

Gratuit en ligne Invision app Moqups UXPin

Mac Sketch Balsamiq Mockups Axure

PC Axure Balsamiq

Mobile Prototyping on Paper

Ap983540983590en983530983555 983592983589 no983547983549983589983537le983543 983581h983586983543983589983588

Introduction agrave lrsquoergonomie

Test de perception DIY75

Cornelia Laros

La premiegravere impression qursquoun utilisateur se fait de votre IHM va influencer tous ses jugements ulteacuterieurs Crsquoest lrsquoeffet de halo

bull Un utilisateur qui a une premiegravere impression positive de votre appli passera plus facilement outre les bugs

bull Une premiegravere impression negative rendra lrsquoutilisateur plus critique vis agrave vis de deacutetails qui confirment son jugement

Cel983527 983538983580983590c983532e 983527983548983588si 983527983549983589983581 vo983543 983586983590983580ux 983591rsquoex983527983538983589983585s vo983543 983530983585t983542983589983546i983530n983543 983592rsquoem983528983527983548983581he 983530983545 983550983587s 983542e983585d983530983555-vo983547983543 983581l983535e983539983546s

Introduction agrave lrsquoergonomie

Test de perception DIY76

Cornelia Laros

Montrer votre prototype agrave quelqursquoun pendant 5 secondes

Demandez-lui

bull Ce qursquoil a vu

bull Ce qursquoil a compris de ce qursquoil a vu

bull Ce qui lrsquoa surpris ou marqueacute

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY77

Cornelia Laros

Les difficulteacutes de navigation se produisent souvent dans les niveaux les plus haut de votre structure de contenu Vous pouvez veacuterifier facilement si la classification logique pour vous lrsquoest aussi pour vos utilisateurs

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY78

Cornelia Laros

Lister trois (max) niveaux de profondeur de votre contenu structureacute Masquez ensuite les contenus de niveau plus bas Utilisez par exemple les groupements de lignes dans excel pour creacuteer des pliers-deacutepliers ou imprimer la liste sur une feuille que vous pliez pour masquer certaines parties

Demandez agrave un utilisateur de vous dire ougrave il penserait trouver un contenu bien preacutecis en preacutecisant qursquoil nrsquoy a pas de bonne reacuteponse

Notez srsquoil va chercher lagrave ougrave vous vous y attendiez ougrave il a heacutesiteacute et ce qursquoil a fini par choisir pour vous aider agrave rendre la navigation plus intuitive

Introduction agrave lrsquoergonomie

Test drsquoutilisabiliteacute DIY79

Cornelia Laros

A chaque nouvelle fonctionnaliteacute ajouteacutee demandez agrave quelqursquoun qui ne connait pas le projet de srsquoen servir Proposez lui une seule tacircche geacuteneacuterique agrave accomplir avec la fonctionnaliteacute

Exemple Tu veux prendre un rendez-vous avec un meacutedecin sur ce site montres-moi comment tu ferais en commentant agrave haute voix

Le plus important ici crsquoest de ne pas reacuteagir agrave ce qursquoil fait mais simplement le regarder faire sans lrsquoaider mecircme srsquoil est bloqueacute

Srsquoil 983540983586983588983589 de983543 983578983547983589s983545i983586983585s reacutepo983539983592983530z 983540983580983590 un983530 983577983548e983588t983534983587983539 o983547 d983535983545e983588 l983547983535 983577u983530 983550983587us 983536983547983535 983590eacutepo983539983592r983530983555 983578983548an983591 983534983537 983580ur983527 fi983539983535 983588rsquoil 983534983539983588983535s983545e Srsquoil 983530983543983546 v983542983580i983593983530n983545 983529l983587983577ueacute di983545983530983588 l983548i 983577983547983589 983550o983547s 983580983536983537ez 983542983530983550983587ir 983549983586983546r983589 983579o983541983534983589 et 983530983543983588983580ye983555 983592983530 c983587983538983541re983539983592r983530 983579983589 983578u983534 l983589 9835316ne

Introduction agrave lrsquoergonomie

Pas besoin de reacuteinventer la roue DIY

80

Cornelia Laros

Il existe des bonnes pratiques qui vous eacuteviteront de reacuteinventer la roue Utilisez des laquo design patterns raquo pour concevoir vos interfaces

Renseignez vous sur la Gestalt Theorie pour agencer vos pages

Utilisez les critegraveres de Bastien et Scapin pour trouver des deacutefauts eacutevidents avant de tester vous en tirerez des enseignements plus inteacuteressants

Ma983534s ccedila crsquoes983545 983541983586983548r u983539983530 983580u983546r983530 983559983587i983588

Introduction agrave lrsquoergonomie

Quizz time

81

Cornelia Laros

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

82

Cornelia Laros

1 c Fonctionnel

2 a Fiable

3 d Accessible

4 b Intuitif

5 e Plaisant

6 f Porteur de sens

text

F - Quel besoin ai-je oublieacute dans la question preacuteceacutedente

83

Cornelia Laros

Uti983536983534983588983580b983536e

Introduction agrave lrsquoergonomie

Tests DIY84

Cornelia Laros

Reacutedigez la proceacutedure pour tester un de vos projets drsquoIHM avec le test de votre choix perception arborescence ou utilisabiliteacute

Notez la question que vous vous posez et la question que vous allez poser

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

Introduction agrave lrsquoergonomie

Pyramide des besoins IHM46

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

47

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

48

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

49

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

50

Cornelia Laros

Introduction agrave lrsquoergonomie

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

51

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

Introduction agrave lrsquoergonomie

D - A quoi sert un prototype

52

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

53

Cornelia Laros

a Fiable

b Intuitif

c Fonctionnel

d Accessible

e Plaisant

f Porteur de sens

Introduction agrave lrsquoergonomie

F - Quel besoin ai-je oublieacute dans la question

preacuteceacutedente

54

Cornelia Laros

text

Patterns amp Dark patterns

55

Cornelia Laros

text

Criteres de Bastien et Scapin56

Cornelia Laros

Guidage

Charge de travail

Controcircle utilisateur explicite

Flexibiliteacute ( adaptabiliteacute)

Gestion des erreurs

Homogeacuteneacuteiteacute ( coheacuterence)

Signifiance des Codes et Deacutenominations

Compatibiliteacute ( familiariteacute)

Introduction agrave lrsquoergonomie

Guidage57

Cornelia Laros

Introduction agrave lrsquoergonomie

Charge de travail58

Cornelia Laros

Introduction agrave lrsquoergonomie

Controle explicite59

Cornelia Laros

Introduction agrave lrsquoergonomie

Controles explicites60

Cornelia Laros

Dar983595 983541983527t983545983589983590n

text

Adaptabiliteacute61

Cornelia Laros

text

Gestion des erreurs62

Cornelia Laros

text

Signifiance des codes et deacutenominations

63

Cornelia Laros

text

Homogeacuteneacuteiteacute - coheacuterence64

Cornelia Laros

text

Homogeacuteneacuteiteacute - Distinction65

Cornelia Laros

text

Compatibiliteacute66

Cornelia Laros

text

Compatibiliteacute67

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction68

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction69

Cornelia Laros

text

Gestalt Theorie70

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Gestalt Theorie71

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Dark patterns72

Cornelia Laros

Introduction agrave lrsquoergonomie

A vous de jouer

73

Cornelia Laros

Introduction agrave lrsquoergonomie

Outils de prototypages DIY74

Cornelia Laros

Low tech papier + crayons post-its cartes agrave jouer

Gratuit en ligne Invision app Moqups UXPin

Mac Sketch Balsamiq Mockups Axure

PC Axure Balsamiq

Mobile Prototyping on Paper

Ap983540983590en983530983555 983592983589 no983547983549983589983537le983543 983581h983586983543983589983588

Introduction agrave lrsquoergonomie

Test de perception DIY75

Cornelia Laros

La premiegravere impression qursquoun utilisateur se fait de votre IHM va influencer tous ses jugements ulteacuterieurs Crsquoest lrsquoeffet de halo

bull Un utilisateur qui a une premiegravere impression positive de votre appli passera plus facilement outre les bugs

bull Une premiegravere impression negative rendra lrsquoutilisateur plus critique vis agrave vis de deacutetails qui confirment son jugement

Cel983527 983538983580983590c983532e 983527983548983588si 983527983549983589983581 vo983543 983586983590983580ux 983591rsquoex983527983538983589983585s vo983543 983530983585t983542983589983546i983530n983543 983592rsquoem983528983527983548983581he 983530983545 983550983587s 983542e983585d983530983555-vo983547983543 983581l983535e983539983546s

Introduction agrave lrsquoergonomie

Test de perception DIY76

Cornelia Laros

Montrer votre prototype agrave quelqursquoun pendant 5 secondes

Demandez-lui

bull Ce qursquoil a vu

bull Ce qursquoil a compris de ce qursquoil a vu

bull Ce qui lrsquoa surpris ou marqueacute

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY77

Cornelia Laros

Les difficulteacutes de navigation se produisent souvent dans les niveaux les plus haut de votre structure de contenu Vous pouvez veacuterifier facilement si la classification logique pour vous lrsquoest aussi pour vos utilisateurs

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY78

Cornelia Laros

Lister trois (max) niveaux de profondeur de votre contenu structureacute Masquez ensuite les contenus de niveau plus bas Utilisez par exemple les groupements de lignes dans excel pour creacuteer des pliers-deacutepliers ou imprimer la liste sur une feuille que vous pliez pour masquer certaines parties

Demandez agrave un utilisateur de vous dire ougrave il penserait trouver un contenu bien preacutecis en preacutecisant qursquoil nrsquoy a pas de bonne reacuteponse

Notez srsquoil va chercher lagrave ougrave vous vous y attendiez ougrave il a heacutesiteacute et ce qursquoil a fini par choisir pour vous aider agrave rendre la navigation plus intuitive

Introduction agrave lrsquoergonomie

Test drsquoutilisabiliteacute DIY79

Cornelia Laros

A chaque nouvelle fonctionnaliteacute ajouteacutee demandez agrave quelqursquoun qui ne connait pas le projet de srsquoen servir Proposez lui une seule tacircche geacuteneacuterique agrave accomplir avec la fonctionnaliteacute

Exemple Tu veux prendre un rendez-vous avec un meacutedecin sur ce site montres-moi comment tu ferais en commentant agrave haute voix

Le plus important ici crsquoest de ne pas reacuteagir agrave ce qursquoil fait mais simplement le regarder faire sans lrsquoaider mecircme srsquoil est bloqueacute

Srsquoil 983540983586983588983589 de983543 983578983547983589s983545i983586983585s reacutepo983539983592983530z 983540983580983590 un983530 983577983548e983588t983534983587983539 o983547 d983535983545e983588 l983547983535 983577u983530 983550983587us 983536983547983535 983590eacutepo983539983592r983530983555 983578983548an983591 983534983537 983580ur983527 fi983539983535 983588rsquoil 983534983539983588983535s983545e Srsquoil 983530983543983546 v983542983580i983593983530n983545 983529l983587983577ueacute di983545983530983588 l983548i 983577983547983589 983550o983547s 983580983536983537ez 983542983530983550983587ir 983549983586983546r983589 983579o983541983534983589 et 983530983543983588983580ye983555 983592983530 c983587983538983541re983539983592r983530 983579983589 983578u983534 l983589 9835316ne

Introduction agrave lrsquoergonomie

Pas besoin de reacuteinventer la roue DIY

80

Cornelia Laros

Il existe des bonnes pratiques qui vous eacuteviteront de reacuteinventer la roue Utilisez des laquo design patterns raquo pour concevoir vos interfaces

Renseignez vous sur la Gestalt Theorie pour agencer vos pages

Utilisez les critegraveres de Bastien et Scapin pour trouver des deacutefauts eacutevidents avant de tester vous en tirerez des enseignements plus inteacuteressants

Ma983534s ccedila crsquoes983545 983541983586983548r u983539983530 983580u983546r983530 983559983587i983588

Introduction agrave lrsquoergonomie

Quizz time

81

Cornelia Laros

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

82

Cornelia Laros

1 c Fonctionnel

2 a Fiable

3 d Accessible

4 b Intuitif

5 e Plaisant

6 f Porteur de sens

text

F - Quel besoin ai-je oublieacute dans la question preacuteceacutedente

83

Cornelia Laros

Uti983536983534983588983580b983536e

Introduction agrave lrsquoergonomie

Tests DIY84

Cornelia Laros

Reacutedigez la proceacutedure pour tester un de vos projets drsquoIHM avec le test de votre choix perception arborescence ou utilisabiliteacute

Notez la question que vous vous posez et la question que vous allez poser

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

47

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

48

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

49

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

50

Cornelia Laros

Introduction agrave lrsquoergonomie

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

51

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

Introduction agrave lrsquoergonomie

D - A quoi sert un prototype

52

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

53

Cornelia Laros

a Fiable

b Intuitif

c Fonctionnel

d Accessible

e Plaisant

f Porteur de sens

Introduction agrave lrsquoergonomie

F - Quel besoin ai-je oublieacute dans la question

preacuteceacutedente

54

Cornelia Laros

text

Patterns amp Dark patterns

55

Cornelia Laros

text

Criteres de Bastien et Scapin56

Cornelia Laros

Guidage

Charge de travail

Controcircle utilisateur explicite

Flexibiliteacute ( adaptabiliteacute)

Gestion des erreurs

Homogeacuteneacuteiteacute ( coheacuterence)

Signifiance des Codes et Deacutenominations

Compatibiliteacute ( familiariteacute)

Introduction agrave lrsquoergonomie

Guidage57

Cornelia Laros

Introduction agrave lrsquoergonomie

Charge de travail58

Cornelia Laros

Introduction agrave lrsquoergonomie

Controle explicite59

Cornelia Laros

Introduction agrave lrsquoergonomie

Controles explicites60

Cornelia Laros

Dar983595 983541983527t983545983589983590n

text

Adaptabiliteacute61

Cornelia Laros

text

Gestion des erreurs62

Cornelia Laros

text

Signifiance des codes et deacutenominations

63

Cornelia Laros

text

Homogeacuteneacuteiteacute - coheacuterence64

Cornelia Laros

text

Homogeacuteneacuteiteacute - Distinction65

Cornelia Laros

text

Compatibiliteacute66

Cornelia Laros

text

Compatibiliteacute67

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction68

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction69

Cornelia Laros

text

Gestalt Theorie70

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Gestalt Theorie71

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Dark patterns72

Cornelia Laros

Introduction agrave lrsquoergonomie

A vous de jouer

73

Cornelia Laros

Introduction agrave lrsquoergonomie

Outils de prototypages DIY74

Cornelia Laros

Low tech papier + crayons post-its cartes agrave jouer

Gratuit en ligne Invision app Moqups UXPin

Mac Sketch Balsamiq Mockups Axure

PC Axure Balsamiq

Mobile Prototyping on Paper

Ap983540983590en983530983555 983592983589 no983547983549983589983537le983543 983581h983586983543983589983588

Introduction agrave lrsquoergonomie

Test de perception DIY75

Cornelia Laros

La premiegravere impression qursquoun utilisateur se fait de votre IHM va influencer tous ses jugements ulteacuterieurs Crsquoest lrsquoeffet de halo

bull Un utilisateur qui a une premiegravere impression positive de votre appli passera plus facilement outre les bugs

bull Une premiegravere impression negative rendra lrsquoutilisateur plus critique vis agrave vis de deacutetails qui confirment son jugement

Cel983527 983538983580983590c983532e 983527983548983588si 983527983549983589983581 vo983543 983586983590983580ux 983591rsquoex983527983538983589983585s vo983543 983530983585t983542983589983546i983530n983543 983592rsquoem983528983527983548983581he 983530983545 983550983587s 983542e983585d983530983555-vo983547983543 983581l983535e983539983546s

Introduction agrave lrsquoergonomie

Test de perception DIY76

Cornelia Laros

Montrer votre prototype agrave quelqursquoun pendant 5 secondes

Demandez-lui

bull Ce qursquoil a vu

bull Ce qursquoil a compris de ce qursquoil a vu

bull Ce qui lrsquoa surpris ou marqueacute

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY77

Cornelia Laros

Les difficulteacutes de navigation se produisent souvent dans les niveaux les plus haut de votre structure de contenu Vous pouvez veacuterifier facilement si la classification logique pour vous lrsquoest aussi pour vos utilisateurs

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY78

Cornelia Laros

Lister trois (max) niveaux de profondeur de votre contenu structureacute Masquez ensuite les contenus de niveau plus bas Utilisez par exemple les groupements de lignes dans excel pour creacuteer des pliers-deacutepliers ou imprimer la liste sur une feuille que vous pliez pour masquer certaines parties

Demandez agrave un utilisateur de vous dire ougrave il penserait trouver un contenu bien preacutecis en preacutecisant qursquoil nrsquoy a pas de bonne reacuteponse

Notez srsquoil va chercher lagrave ougrave vous vous y attendiez ougrave il a heacutesiteacute et ce qursquoil a fini par choisir pour vous aider agrave rendre la navigation plus intuitive

Introduction agrave lrsquoergonomie

Test drsquoutilisabiliteacute DIY79

Cornelia Laros

A chaque nouvelle fonctionnaliteacute ajouteacutee demandez agrave quelqursquoun qui ne connait pas le projet de srsquoen servir Proposez lui une seule tacircche geacuteneacuterique agrave accomplir avec la fonctionnaliteacute

Exemple Tu veux prendre un rendez-vous avec un meacutedecin sur ce site montres-moi comment tu ferais en commentant agrave haute voix

Le plus important ici crsquoest de ne pas reacuteagir agrave ce qursquoil fait mais simplement le regarder faire sans lrsquoaider mecircme srsquoil est bloqueacute

Srsquoil 983540983586983588983589 de983543 983578983547983589s983545i983586983585s reacutepo983539983592983530z 983540983580983590 un983530 983577983548e983588t983534983587983539 o983547 d983535983545e983588 l983547983535 983577u983530 983550983587us 983536983547983535 983590eacutepo983539983592r983530983555 983578983548an983591 983534983537 983580ur983527 fi983539983535 983588rsquoil 983534983539983588983535s983545e Srsquoil 983530983543983546 v983542983580i983593983530n983545 983529l983587983577ueacute di983545983530983588 l983548i 983577983547983589 983550o983547s 983580983536983537ez 983542983530983550983587ir 983549983586983546r983589 983579o983541983534983589 et 983530983543983588983580ye983555 983592983530 c983587983538983541re983539983592r983530 983579983589 983578u983534 l983589 9835316ne

Introduction agrave lrsquoergonomie

Pas besoin de reacuteinventer la roue DIY

80

Cornelia Laros

Il existe des bonnes pratiques qui vous eacuteviteront de reacuteinventer la roue Utilisez des laquo design patterns raquo pour concevoir vos interfaces

Renseignez vous sur la Gestalt Theorie pour agencer vos pages

Utilisez les critegraveres de Bastien et Scapin pour trouver des deacutefauts eacutevidents avant de tester vous en tirerez des enseignements plus inteacuteressants

Ma983534s ccedila crsquoes983545 983541983586983548r u983539983530 983580u983546r983530 983559983587i983588

Introduction agrave lrsquoergonomie

Quizz time

81

Cornelia Laros

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

82

Cornelia Laros

1 c Fonctionnel

2 a Fiable

3 d Accessible

4 b Intuitif

5 e Plaisant

6 f Porteur de sens

text

F - Quel besoin ai-je oublieacute dans la question preacuteceacutedente

83

Cornelia Laros

Uti983536983534983588983580b983536e

Introduction agrave lrsquoergonomie

Tests DIY84

Cornelia Laros

Reacutedigez la proceacutedure pour tester un de vos projets drsquoIHM avec le test de votre choix perception arborescence ou utilisabiliteacute

Notez la question que vous vous posez et la question que vous allez poser

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

48

Cornelia Laros

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

49

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

50

Cornelia Laros

Introduction agrave lrsquoergonomie

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

51

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

Introduction agrave lrsquoergonomie

D - A quoi sert un prototype

52

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

53

Cornelia Laros

a Fiable

b Intuitif

c Fonctionnel

d Accessible

e Plaisant

f Porteur de sens

Introduction agrave lrsquoergonomie

F - Quel besoin ai-je oublieacute dans la question

preacuteceacutedente

54

Cornelia Laros

text

Patterns amp Dark patterns

55

Cornelia Laros

text

Criteres de Bastien et Scapin56

Cornelia Laros

Guidage

Charge de travail

Controcircle utilisateur explicite

Flexibiliteacute ( adaptabiliteacute)

Gestion des erreurs

Homogeacuteneacuteiteacute ( coheacuterence)

Signifiance des Codes et Deacutenominations

Compatibiliteacute ( familiariteacute)

Introduction agrave lrsquoergonomie

Guidage57

Cornelia Laros

Introduction agrave lrsquoergonomie

Charge de travail58

Cornelia Laros

Introduction agrave lrsquoergonomie

Controle explicite59

Cornelia Laros

Introduction agrave lrsquoergonomie

Controles explicites60

Cornelia Laros

Dar983595 983541983527t983545983589983590n

text

Adaptabiliteacute61

Cornelia Laros

text

Gestion des erreurs62

Cornelia Laros

text

Signifiance des codes et deacutenominations

63

Cornelia Laros

text

Homogeacuteneacuteiteacute - coheacuterence64

Cornelia Laros

text

Homogeacuteneacuteiteacute - Distinction65

Cornelia Laros

text

Compatibiliteacute66

Cornelia Laros

text

Compatibiliteacute67

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction68

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction69

Cornelia Laros

text

Gestalt Theorie70

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Gestalt Theorie71

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Dark patterns72

Cornelia Laros

Introduction agrave lrsquoergonomie

A vous de jouer

73

Cornelia Laros

Introduction agrave lrsquoergonomie

Outils de prototypages DIY74

Cornelia Laros

Low tech papier + crayons post-its cartes agrave jouer

Gratuit en ligne Invision app Moqups UXPin

Mac Sketch Balsamiq Mockups Axure

PC Axure Balsamiq

Mobile Prototyping on Paper

Ap983540983590en983530983555 983592983589 no983547983549983589983537le983543 983581h983586983543983589983588

Introduction agrave lrsquoergonomie

Test de perception DIY75

Cornelia Laros

La premiegravere impression qursquoun utilisateur se fait de votre IHM va influencer tous ses jugements ulteacuterieurs Crsquoest lrsquoeffet de halo

bull Un utilisateur qui a une premiegravere impression positive de votre appli passera plus facilement outre les bugs

bull Une premiegravere impression negative rendra lrsquoutilisateur plus critique vis agrave vis de deacutetails qui confirment son jugement

Cel983527 983538983580983590c983532e 983527983548983588si 983527983549983589983581 vo983543 983586983590983580ux 983591rsquoex983527983538983589983585s vo983543 983530983585t983542983589983546i983530n983543 983592rsquoem983528983527983548983581he 983530983545 983550983587s 983542e983585d983530983555-vo983547983543 983581l983535e983539983546s

Introduction agrave lrsquoergonomie

Test de perception DIY76

Cornelia Laros

Montrer votre prototype agrave quelqursquoun pendant 5 secondes

Demandez-lui

bull Ce qursquoil a vu

bull Ce qursquoil a compris de ce qursquoil a vu

bull Ce qui lrsquoa surpris ou marqueacute

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY77

Cornelia Laros

Les difficulteacutes de navigation se produisent souvent dans les niveaux les plus haut de votre structure de contenu Vous pouvez veacuterifier facilement si la classification logique pour vous lrsquoest aussi pour vos utilisateurs

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY78

Cornelia Laros

Lister trois (max) niveaux de profondeur de votre contenu structureacute Masquez ensuite les contenus de niveau plus bas Utilisez par exemple les groupements de lignes dans excel pour creacuteer des pliers-deacutepliers ou imprimer la liste sur une feuille que vous pliez pour masquer certaines parties

Demandez agrave un utilisateur de vous dire ougrave il penserait trouver un contenu bien preacutecis en preacutecisant qursquoil nrsquoy a pas de bonne reacuteponse

Notez srsquoil va chercher lagrave ougrave vous vous y attendiez ougrave il a heacutesiteacute et ce qursquoil a fini par choisir pour vous aider agrave rendre la navigation plus intuitive

Introduction agrave lrsquoergonomie

Test drsquoutilisabiliteacute DIY79

Cornelia Laros

A chaque nouvelle fonctionnaliteacute ajouteacutee demandez agrave quelqursquoun qui ne connait pas le projet de srsquoen servir Proposez lui une seule tacircche geacuteneacuterique agrave accomplir avec la fonctionnaliteacute

Exemple Tu veux prendre un rendez-vous avec un meacutedecin sur ce site montres-moi comment tu ferais en commentant agrave haute voix

Le plus important ici crsquoest de ne pas reacuteagir agrave ce qursquoil fait mais simplement le regarder faire sans lrsquoaider mecircme srsquoil est bloqueacute

Srsquoil 983540983586983588983589 de983543 983578983547983589s983545i983586983585s reacutepo983539983592983530z 983540983580983590 un983530 983577983548e983588t983534983587983539 o983547 d983535983545e983588 l983547983535 983577u983530 983550983587us 983536983547983535 983590eacutepo983539983592r983530983555 983578983548an983591 983534983537 983580ur983527 fi983539983535 983588rsquoil 983534983539983588983535s983545e Srsquoil 983530983543983546 v983542983580i983593983530n983545 983529l983587983577ueacute di983545983530983588 l983548i 983577983547983589 983550o983547s 983580983536983537ez 983542983530983550983587ir 983549983586983546r983589 983579o983541983534983589 et 983530983543983588983580ye983555 983592983530 c983587983538983541re983539983592r983530 983579983589 983578u983534 l983589 9835316ne

Introduction agrave lrsquoergonomie

Pas besoin de reacuteinventer la roue DIY

80

Cornelia Laros

Il existe des bonnes pratiques qui vous eacuteviteront de reacuteinventer la roue Utilisez des laquo design patterns raquo pour concevoir vos interfaces

Renseignez vous sur la Gestalt Theorie pour agencer vos pages

Utilisez les critegraveres de Bastien et Scapin pour trouver des deacutefauts eacutevidents avant de tester vous en tirerez des enseignements plus inteacuteressants

Ma983534s ccedila crsquoes983545 983541983586983548r u983539983530 983580u983546r983530 983559983587i983588

Introduction agrave lrsquoergonomie

Quizz time

81

Cornelia Laros

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

82

Cornelia Laros

1 c Fonctionnel

2 a Fiable

3 d Accessible

4 b Intuitif

5 e Plaisant

6 f Porteur de sens

text

F - Quel besoin ai-je oublieacute dans la question preacuteceacutedente

83

Cornelia Laros

Uti983536983534983588983580b983536e

Introduction agrave lrsquoergonomie

Tests DIY84

Cornelia Laros

Reacutedigez la proceacutedure pour tester un de vos projets drsquoIHM avec le test de votre choix perception arborescence ou utilisabiliteacute

Notez la question que vous vous posez et la question que vous allez poser

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

Tacircches

Accessible

Fiable

Utilisable

Intuitif

Plaisant

Porteur de sens

Fonctionnel

Expeacuteriences

Introduction agrave lrsquoergonomie

Des niveaux drsquoexigence qui eacutevoluent

49

Cornelia Laros

Introduction agrave lrsquoergonomie

Quizz time

50

Cornelia Laros

Introduction agrave lrsquoergonomie

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

51

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

Introduction agrave lrsquoergonomie

D - A quoi sert un prototype

52

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

53

Cornelia Laros

a Fiable

b Intuitif

c Fonctionnel

d Accessible

e Plaisant

f Porteur de sens

Introduction agrave lrsquoergonomie

F - Quel besoin ai-je oublieacute dans la question

preacuteceacutedente

54

Cornelia Laros

text

Patterns amp Dark patterns

55

Cornelia Laros

text

Criteres de Bastien et Scapin56

Cornelia Laros

Guidage

Charge de travail

Controcircle utilisateur explicite

Flexibiliteacute ( adaptabiliteacute)

Gestion des erreurs

Homogeacuteneacuteiteacute ( coheacuterence)

Signifiance des Codes et Deacutenominations

Compatibiliteacute ( familiariteacute)

Introduction agrave lrsquoergonomie

Guidage57

Cornelia Laros

Introduction agrave lrsquoergonomie

Charge de travail58

Cornelia Laros

Introduction agrave lrsquoergonomie

Controle explicite59

Cornelia Laros

Introduction agrave lrsquoergonomie

Controles explicites60

Cornelia Laros

Dar983595 983541983527t983545983589983590n

text

Adaptabiliteacute61

Cornelia Laros

text

Gestion des erreurs62

Cornelia Laros

text

Signifiance des codes et deacutenominations

63

Cornelia Laros

text

Homogeacuteneacuteiteacute - coheacuterence64

Cornelia Laros

text

Homogeacuteneacuteiteacute - Distinction65

Cornelia Laros

text

Compatibiliteacute66

Cornelia Laros

text

Compatibiliteacute67

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction68

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction69

Cornelia Laros

text

Gestalt Theorie70

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Gestalt Theorie71

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Dark patterns72

Cornelia Laros

Introduction agrave lrsquoergonomie

A vous de jouer

73

Cornelia Laros

Introduction agrave lrsquoergonomie

Outils de prototypages DIY74

Cornelia Laros

Low tech papier + crayons post-its cartes agrave jouer

Gratuit en ligne Invision app Moqups UXPin

Mac Sketch Balsamiq Mockups Axure

PC Axure Balsamiq

Mobile Prototyping on Paper

Ap983540983590en983530983555 983592983589 no983547983549983589983537le983543 983581h983586983543983589983588

Introduction agrave lrsquoergonomie

Test de perception DIY75

Cornelia Laros

La premiegravere impression qursquoun utilisateur se fait de votre IHM va influencer tous ses jugements ulteacuterieurs Crsquoest lrsquoeffet de halo

bull Un utilisateur qui a une premiegravere impression positive de votre appli passera plus facilement outre les bugs

bull Une premiegravere impression negative rendra lrsquoutilisateur plus critique vis agrave vis de deacutetails qui confirment son jugement

Cel983527 983538983580983590c983532e 983527983548983588si 983527983549983589983581 vo983543 983586983590983580ux 983591rsquoex983527983538983589983585s vo983543 983530983585t983542983589983546i983530n983543 983592rsquoem983528983527983548983581he 983530983545 983550983587s 983542e983585d983530983555-vo983547983543 983581l983535e983539983546s

Introduction agrave lrsquoergonomie

Test de perception DIY76

Cornelia Laros

Montrer votre prototype agrave quelqursquoun pendant 5 secondes

Demandez-lui

bull Ce qursquoil a vu

bull Ce qursquoil a compris de ce qursquoil a vu

bull Ce qui lrsquoa surpris ou marqueacute

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY77

Cornelia Laros

Les difficulteacutes de navigation se produisent souvent dans les niveaux les plus haut de votre structure de contenu Vous pouvez veacuterifier facilement si la classification logique pour vous lrsquoest aussi pour vos utilisateurs

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY78

Cornelia Laros

Lister trois (max) niveaux de profondeur de votre contenu structureacute Masquez ensuite les contenus de niveau plus bas Utilisez par exemple les groupements de lignes dans excel pour creacuteer des pliers-deacutepliers ou imprimer la liste sur une feuille que vous pliez pour masquer certaines parties

Demandez agrave un utilisateur de vous dire ougrave il penserait trouver un contenu bien preacutecis en preacutecisant qursquoil nrsquoy a pas de bonne reacuteponse

Notez srsquoil va chercher lagrave ougrave vous vous y attendiez ougrave il a heacutesiteacute et ce qursquoil a fini par choisir pour vous aider agrave rendre la navigation plus intuitive

Introduction agrave lrsquoergonomie

Test drsquoutilisabiliteacute DIY79

Cornelia Laros

A chaque nouvelle fonctionnaliteacute ajouteacutee demandez agrave quelqursquoun qui ne connait pas le projet de srsquoen servir Proposez lui une seule tacircche geacuteneacuterique agrave accomplir avec la fonctionnaliteacute

Exemple Tu veux prendre un rendez-vous avec un meacutedecin sur ce site montres-moi comment tu ferais en commentant agrave haute voix

Le plus important ici crsquoest de ne pas reacuteagir agrave ce qursquoil fait mais simplement le regarder faire sans lrsquoaider mecircme srsquoil est bloqueacute

Srsquoil 983540983586983588983589 de983543 983578983547983589s983545i983586983585s reacutepo983539983592983530z 983540983580983590 un983530 983577983548e983588t983534983587983539 o983547 d983535983545e983588 l983547983535 983577u983530 983550983587us 983536983547983535 983590eacutepo983539983592r983530983555 983578983548an983591 983534983537 983580ur983527 fi983539983535 983588rsquoil 983534983539983588983535s983545e Srsquoil 983530983543983546 v983542983580i983593983530n983545 983529l983587983577ueacute di983545983530983588 l983548i 983577983547983589 983550o983547s 983580983536983537ez 983542983530983550983587ir 983549983586983546r983589 983579o983541983534983589 et 983530983543983588983580ye983555 983592983530 c983587983538983541re983539983592r983530 983579983589 983578u983534 l983589 9835316ne

Introduction agrave lrsquoergonomie

Pas besoin de reacuteinventer la roue DIY

80

Cornelia Laros

Il existe des bonnes pratiques qui vous eacuteviteront de reacuteinventer la roue Utilisez des laquo design patterns raquo pour concevoir vos interfaces

Renseignez vous sur la Gestalt Theorie pour agencer vos pages

Utilisez les critegraveres de Bastien et Scapin pour trouver des deacutefauts eacutevidents avant de tester vous en tirerez des enseignements plus inteacuteressants

Ma983534s ccedila crsquoes983545 983541983586983548r u983539983530 983580u983546r983530 983559983587i983588

Introduction agrave lrsquoergonomie

Quizz time

81

Cornelia Laros

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

82

Cornelia Laros

1 c Fonctionnel

2 a Fiable

3 d Accessible

4 b Intuitif

5 e Plaisant

6 f Porteur de sens

text

F - Quel besoin ai-je oublieacute dans la question preacuteceacutedente

83

Cornelia Laros

Uti983536983534983588983580b983536e

Introduction agrave lrsquoergonomie

Tests DIY84

Cornelia Laros

Reacutedigez la proceacutedure pour tester un de vos projets drsquoIHM avec le test de votre choix perception arborescence ou utilisabiliteacute

Notez la question que vous vous posez et la question que vous allez poser

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

Introduction agrave lrsquoergonomie

Quizz time

50

Cornelia Laros

Introduction agrave lrsquoergonomie

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

51

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

Introduction agrave lrsquoergonomie

D - A quoi sert un prototype

52

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

53

Cornelia Laros

a Fiable

b Intuitif

c Fonctionnel

d Accessible

e Plaisant

f Porteur de sens

Introduction agrave lrsquoergonomie

F - Quel besoin ai-je oublieacute dans la question

preacuteceacutedente

54

Cornelia Laros

text

Patterns amp Dark patterns

55

Cornelia Laros

text

Criteres de Bastien et Scapin56

Cornelia Laros

Guidage

Charge de travail

Controcircle utilisateur explicite

Flexibiliteacute ( adaptabiliteacute)

Gestion des erreurs

Homogeacuteneacuteiteacute ( coheacuterence)

Signifiance des Codes et Deacutenominations

Compatibiliteacute ( familiariteacute)

Introduction agrave lrsquoergonomie

Guidage57

Cornelia Laros

Introduction agrave lrsquoergonomie

Charge de travail58

Cornelia Laros

Introduction agrave lrsquoergonomie

Controle explicite59

Cornelia Laros

Introduction agrave lrsquoergonomie

Controles explicites60

Cornelia Laros

Dar983595 983541983527t983545983589983590n

text

Adaptabiliteacute61

Cornelia Laros

text

Gestion des erreurs62

Cornelia Laros

text

Signifiance des codes et deacutenominations

63

Cornelia Laros

text

Homogeacuteneacuteiteacute - coheacuterence64

Cornelia Laros

text

Homogeacuteneacuteiteacute - Distinction65

Cornelia Laros

text

Compatibiliteacute66

Cornelia Laros

text

Compatibiliteacute67

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction68

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction69

Cornelia Laros

text

Gestalt Theorie70

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Gestalt Theorie71

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Dark patterns72

Cornelia Laros

Introduction agrave lrsquoergonomie

A vous de jouer

73

Cornelia Laros

Introduction agrave lrsquoergonomie

Outils de prototypages DIY74

Cornelia Laros

Low tech papier + crayons post-its cartes agrave jouer

Gratuit en ligne Invision app Moqups UXPin

Mac Sketch Balsamiq Mockups Axure

PC Axure Balsamiq

Mobile Prototyping on Paper

Ap983540983590en983530983555 983592983589 no983547983549983589983537le983543 983581h983586983543983589983588

Introduction agrave lrsquoergonomie

Test de perception DIY75

Cornelia Laros

La premiegravere impression qursquoun utilisateur se fait de votre IHM va influencer tous ses jugements ulteacuterieurs Crsquoest lrsquoeffet de halo

bull Un utilisateur qui a une premiegravere impression positive de votre appli passera plus facilement outre les bugs

bull Une premiegravere impression negative rendra lrsquoutilisateur plus critique vis agrave vis de deacutetails qui confirment son jugement

Cel983527 983538983580983590c983532e 983527983548983588si 983527983549983589983581 vo983543 983586983590983580ux 983591rsquoex983527983538983589983585s vo983543 983530983585t983542983589983546i983530n983543 983592rsquoem983528983527983548983581he 983530983545 983550983587s 983542e983585d983530983555-vo983547983543 983581l983535e983539983546s

Introduction agrave lrsquoergonomie

Test de perception DIY76

Cornelia Laros

Montrer votre prototype agrave quelqursquoun pendant 5 secondes

Demandez-lui

bull Ce qursquoil a vu

bull Ce qursquoil a compris de ce qursquoil a vu

bull Ce qui lrsquoa surpris ou marqueacute

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY77

Cornelia Laros

Les difficulteacutes de navigation se produisent souvent dans les niveaux les plus haut de votre structure de contenu Vous pouvez veacuterifier facilement si la classification logique pour vous lrsquoest aussi pour vos utilisateurs

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY78

Cornelia Laros

Lister trois (max) niveaux de profondeur de votre contenu structureacute Masquez ensuite les contenus de niveau plus bas Utilisez par exemple les groupements de lignes dans excel pour creacuteer des pliers-deacutepliers ou imprimer la liste sur une feuille que vous pliez pour masquer certaines parties

Demandez agrave un utilisateur de vous dire ougrave il penserait trouver un contenu bien preacutecis en preacutecisant qursquoil nrsquoy a pas de bonne reacuteponse

Notez srsquoil va chercher lagrave ougrave vous vous y attendiez ougrave il a heacutesiteacute et ce qursquoil a fini par choisir pour vous aider agrave rendre la navigation plus intuitive

Introduction agrave lrsquoergonomie

Test drsquoutilisabiliteacute DIY79

Cornelia Laros

A chaque nouvelle fonctionnaliteacute ajouteacutee demandez agrave quelqursquoun qui ne connait pas le projet de srsquoen servir Proposez lui une seule tacircche geacuteneacuterique agrave accomplir avec la fonctionnaliteacute

Exemple Tu veux prendre un rendez-vous avec un meacutedecin sur ce site montres-moi comment tu ferais en commentant agrave haute voix

Le plus important ici crsquoest de ne pas reacuteagir agrave ce qursquoil fait mais simplement le regarder faire sans lrsquoaider mecircme srsquoil est bloqueacute

Srsquoil 983540983586983588983589 de983543 983578983547983589s983545i983586983585s reacutepo983539983592983530z 983540983580983590 un983530 983577983548e983588t983534983587983539 o983547 d983535983545e983588 l983547983535 983577u983530 983550983587us 983536983547983535 983590eacutepo983539983592r983530983555 983578983548an983591 983534983537 983580ur983527 fi983539983535 983588rsquoil 983534983539983588983535s983545e Srsquoil 983530983543983546 v983542983580i983593983530n983545 983529l983587983577ueacute di983545983530983588 l983548i 983577983547983589 983550o983547s 983580983536983537ez 983542983530983550983587ir 983549983586983546r983589 983579o983541983534983589 et 983530983543983588983580ye983555 983592983530 c983587983538983541re983539983592r983530 983579983589 983578u983534 l983589 9835316ne

Introduction agrave lrsquoergonomie

Pas besoin de reacuteinventer la roue DIY

80

Cornelia Laros

Il existe des bonnes pratiques qui vous eacuteviteront de reacuteinventer la roue Utilisez des laquo design patterns raquo pour concevoir vos interfaces

Renseignez vous sur la Gestalt Theorie pour agencer vos pages

Utilisez les critegraveres de Bastien et Scapin pour trouver des deacutefauts eacutevidents avant de tester vous en tirerez des enseignements plus inteacuteressants

Ma983534s ccedila crsquoes983545 983541983586983548r u983539983530 983580u983546r983530 983559983587i983588

Introduction agrave lrsquoergonomie

Quizz time

81

Cornelia Laros

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

82

Cornelia Laros

1 c Fonctionnel

2 a Fiable

3 d Accessible

4 b Intuitif

5 e Plaisant

6 f Porteur de sens

text

F - Quel besoin ai-je oublieacute dans la question preacuteceacutedente

83

Cornelia Laros

Uti983536983534983588983580b983536e

Introduction agrave lrsquoergonomie

Tests DIY84

Cornelia Laros

Reacutedigez la proceacutedure pour tester un de vos projets drsquoIHM avec le test de votre choix perception arborescence ou utilisabiliteacute

Notez la question que vous vous posez et la question que vous allez poser

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

Introduction agrave lrsquoergonomie

C - Quelles sont les deux choses agrave faire absolument pour votre projet de conception

51

Cornelia Laros

1 Coder et prier

2 Observer et modeacuteliser

3 Prototyper et designer

Introduction agrave lrsquoergonomie

D - A quoi sert un prototype

52

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

53

Cornelia Laros

a Fiable

b Intuitif

c Fonctionnel

d Accessible

e Plaisant

f Porteur de sens

Introduction agrave lrsquoergonomie

F - Quel besoin ai-je oublieacute dans la question

preacuteceacutedente

54

Cornelia Laros

text

Patterns amp Dark patterns

55

Cornelia Laros

text

Criteres de Bastien et Scapin56

Cornelia Laros

Guidage

Charge de travail

Controcircle utilisateur explicite

Flexibiliteacute ( adaptabiliteacute)

Gestion des erreurs

Homogeacuteneacuteiteacute ( coheacuterence)

Signifiance des Codes et Deacutenominations

Compatibiliteacute ( familiariteacute)

Introduction agrave lrsquoergonomie

Guidage57

Cornelia Laros

Introduction agrave lrsquoergonomie

Charge de travail58

Cornelia Laros

Introduction agrave lrsquoergonomie

Controle explicite59

Cornelia Laros

Introduction agrave lrsquoergonomie

Controles explicites60

Cornelia Laros

Dar983595 983541983527t983545983589983590n

text

Adaptabiliteacute61

Cornelia Laros

text

Gestion des erreurs62

Cornelia Laros

text

Signifiance des codes et deacutenominations

63

Cornelia Laros

text

Homogeacuteneacuteiteacute - coheacuterence64

Cornelia Laros

text

Homogeacuteneacuteiteacute - Distinction65

Cornelia Laros

text

Compatibiliteacute66

Cornelia Laros

text

Compatibiliteacute67

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction68

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction69

Cornelia Laros

text

Gestalt Theorie70

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Gestalt Theorie71

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Dark patterns72

Cornelia Laros

Introduction agrave lrsquoergonomie

A vous de jouer

73

Cornelia Laros

Introduction agrave lrsquoergonomie

Outils de prototypages DIY74

Cornelia Laros

Low tech papier + crayons post-its cartes agrave jouer

Gratuit en ligne Invision app Moqups UXPin

Mac Sketch Balsamiq Mockups Axure

PC Axure Balsamiq

Mobile Prototyping on Paper

Ap983540983590en983530983555 983592983589 no983547983549983589983537le983543 983581h983586983543983589983588

Introduction agrave lrsquoergonomie

Test de perception DIY75

Cornelia Laros

La premiegravere impression qursquoun utilisateur se fait de votre IHM va influencer tous ses jugements ulteacuterieurs Crsquoest lrsquoeffet de halo

bull Un utilisateur qui a une premiegravere impression positive de votre appli passera plus facilement outre les bugs

bull Une premiegravere impression negative rendra lrsquoutilisateur plus critique vis agrave vis de deacutetails qui confirment son jugement

Cel983527 983538983580983590c983532e 983527983548983588si 983527983549983589983581 vo983543 983586983590983580ux 983591rsquoex983527983538983589983585s vo983543 983530983585t983542983589983546i983530n983543 983592rsquoem983528983527983548983581he 983530983545 983550983587s 983542e983585d983530983555-vo983547983543 983581l983535e983539983546s

Introduction agrave lrsquoergonomie

Test de perception DIY76

Cornelia Laros

Montrer votre prototype agrave quelqursquoun pendant 5 secondes

Demandez-lui

bull Ce qursquoil a vu

bull Ce qursquoil a compris de ce qursquoil a vu

bull Ce qui lrsquoa surpris ou marqueacute

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY77

Cornelia Laros

Les difficulteacutes de navigation se produisent souvent dans les niveaux les plus haut de votre structure de contenu Vous pouvez veacuterifier facilement si la classification logique pour vous lrsquoest aussi pour vos utilisateurs

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY78

Cornelia Laros

Lister trois (max) niveaux de profondeur de votre contenu structureacute Masquez ensuite les contenus de niveau plus bas Utilisez par exemple les groupements de lignes dans excel pour creacuteer des pliers-deacutepliers ou imprimer la liste sur une feuille que vous pliez pour masquer certaines parties

Demandez agrave un utilisateur de vous dire ougrave il penserait trouver un contenu bien preacutecis en preacutecisant qursquoil nrsquoy a pas de bonne reacuteponse

Notez srsquoil va chercher lagrave ougrave vous vous y attendiez ougrave il a heacutesiteacute et ce qursquoil a fini par choisir pour vous aider agrave rendre la navigation plus intuitive

Introduction agrave lrsquoergonomie

Test drsquoutilisabiliteacute DIY79

Cornelia Laros

A chaque nouvelle fonctionnaliteacute ajouteacutee demandez agrave quelqursquoun qui ne connait pas le projet de srsquoen servir Proposez lui une seule tacircche geacuteneacuterique agrave accomplir avec la fonctionnaliteacute

Exemple Tu veux prendre un rendez-vous avec un meacutedecin sur ce site montres-moi comment tu ferais en commentant agrave haute voix

Le plus important ici crsquoest de ne pas reacuteagir agrave ce qursquoil fait mais simplement le regarder faire sans lrsquoaider mecircme srsquoil est bloqueacute

Srsquoil 983540983586983588983589 de983543 983578983547983589s983545i983586983585s reacutepo983539983592983530z 983540983580983590 un983530 983577983548e983588t983534983587983539 o983547 d983535983545e983588 l983547983535 983577u983530 983550983587us 983536983547983535 983590eacutepo983539983592r983530983555 983578983548an983591 983534983537 983580ur983527 fi983539983535 983588rsquoil 983534983539983588983535s983545e Srsquoil 983530983543983546 v983542983580i983593983530n983545 983529l983587983577ueacute di983545983530983588 l983548i 983577983547983589 983550o983547s 983580983536983537ez 983542983530983550983587ir 983549983586983546r983589 983579o983541983534983589 et 983530983543983588983580ye983555 983592983530 c983587983538983541re983539983592r983530 983579983589 983578u983534 l983589 9835316ne

Introduction agrave lrsquoergonomie

Pas besoin de reacuteinventer la roue DIY

80

Cornelia Laros

Il existe des bonnes pratiques qui vous eacuteviteront de reacuteinventer la roue Utilisez des laquo design patterns raquo pour concevoir vos interfaces

Renseignez vous sur la Gestalt Theorie pour agencer vos pages

Utilisez les critegraveres de Bastien et Scapin pour trouver des deacutefauts eacutevidents avant de tester vous en tirerez des enseignements plus inteacuteressants

Ma983534s ccedila crsquoes983545 983541983586983548r u983539983530 983580u983546r983530 983559983587i983588

Introduction agrave lrsquoergonomie

Quizz time

81

Cornelia Laros

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

82

Cornelia Laros

1 c Fonctionnel

2 a Fiable

3 d Accessible

4 b Intuitif

5 e Plaisant

6 f Porteur de sens

text

F - Quel besoin ai-je oublieacute dans la question preacuteceacutedente

83

Cornelia Laros

Uti983536983534983588983580b983536e

Introduction agrave lrsquoergonomie

Tests DIY84

Cornelia Laros

Reacutedigez la proceacutedure pour tester un de vos projets drsquoIHM avec le test de votre choix perception arborescence ou utilisabiliteacute

Notez la question que vous vous posez et la question que vous allez poser

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

Introduction agrave lrsquoergonomie

D - A quoi sert un prototype

52

Cornelia Laros

1 A communiquer autour drsquoun concept

2 A ameacuteliorer une ideacutee

3 A conserver tout au long du projet

4 A apprendre en se trompant agrave moindre frais

5 A comparer plusieurs une ideacutees

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

53

Cornelia Laros

a Fiable

b Intuitif

c Fonctionnel

d Accessible

e Plaisant

f Porteur de sens

Introduction agrave lrsquoergonomie

F - Quel besoin ai-je oublieacute dans la question

preacuteceacutedente

54

Cornelia Laros

text

Patterns amp Dark patterns

55

Cornelia Laros

text

Criteres de Bastien et Scapin56

Cornelia Laros

Guidage

Charge de travail

Controcircle utilisateur explicite

Flexibiliteacute ( adaptabiliteacute)

Gestion des erreurs

Homogeacuteneacuteiteacute ( coheacuterence)

Signifiance des Codes et Deacutenominations

Compatibiliteacute ( familiariteacute)

Introduction agrave lrsquoergonomie

Guidage57

Cornelia Laros

Introduction agrave lrsquoergonomie

Charge de travail58

Cornelia Laros

Introduction agrave lrsquoergonomie

Controle explicite59

Cornelia Laros

Introduction agrave lrsquoergonomie

Controles explicites60

Cornelia Laros

Dar983595 983541983527t983545983589983590n

text

Adaptabiliteacute61

Cornelia Laros

text

Gestion des erreurs62

Cornelia Laros

text

Signifiance des codes et deacutenominations

63

Cornelia Laros

text

Homogeacuteneacuteiteacute - coheacuterence64

Cornelia Laros

text

Homogeacuteneacuteiteacute - Distinction65

Cornelia Laros

text

Compatibiliteacute66

Cornelia Laros

text

Compatibiliteacute67

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction68

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction69

Cornelia Laros

text

Gestalt Theorie70

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Gestalt Theorie71

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Dark patterns72

Cornelia Laros

Introduction agrave lrsquoergonomie

A vous de jouer

73

Cornelia Laros

Introduction agrave lrsquoergonomie

Outils de prototypages DIY74

Cornelia Laros

Low tech papier + crayons post-its cartes agrave jouer

Gratuit en ligne Invision app Moqups UXPin

Mac Sketch Balsamiq Mockups Axure

PC Axure Balsamiq

Mobile Prototyping on Paper

Ap983540983590en983530983555 983592983589 no983547983549983589983537le983543 983581h983586983543983589983588

Introduction agrave lrsquoergonomie

Test de perception DIY75

Cornelia Laros

La premiegravere impression qursquoun utilisateur se fait de votre IHM va influencer tous ses jugements ulteacuterieurs Crsquoest lrsquoeffet de halo

bull Un utilisateur qui a une premiegravere impression positive de votre appli passera plus facilement outre les bugs

bull Une premiegravere impression negative rendra lrsquoutilisateur plus critique vis agrave vis de deacutetails qui confirment son jugement

Cel983527 983538983580983590c983532e 983527983548983588si 983527983549983589983581 vo983543 983586983590983580ux 983591rsquoex983527983538983589983585s vo983543 983530983585t983542983589983546i983530n983543 983592rsquoem983528983527983548983581he 983530983545 983550983587s 983542e983585d983530983555-vo983547983543 983581l983535e983539983546s

Introduction agrave lrsquoergonomie

Test de perception DIY76

Cornelia Laros

Montrer votre prototype agrave quelqursquoun pendant 5 secondes

Demandez-lui

bull Ce qursquoil a vu

bull Ce qursquoil a compris de ce qursquoil a vu

bull Ce qui lrsquoa surpris ou marqueacute

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY77

Cornelia Laros

Les difficulteacutes de navigation se produisent souvent dans les niveaux les plus haut de votre structure de contenu Vous pouvez veacuterifier facilement si la classification logique pour vous lrsquoest aussi pour vos utilisateurs

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY78

Cornelia Laros

Lister trois (max) niveaux de profondeur de votre contenu structureacute Masquez ensuite les contenus de niveau plus bas Utilisez par exemple les groupements de lignes dans excel pour creacuteer des pliers-deacutepliers ou imprimer la liste sur une feuille que vous pliez pour masquer certaines parties

Demandez agrave un utilisateur de vous dire ougrave il penserait trouver un contenu bien preacutecis en preacutecisant qursquoil nrsquoy a pas de bonne reacuteponse

Notez srsquoil va chercher lagrave ougrave vous vous y attendiez ougrave il a heacutesiteacute et ce qursquoil a fini par choisir pour vous aider agrave rendre la navigation plus intuitive

Introduction agrave lrsquoergonomie

Test drsquoutilisabiliteacute DIY79

Cornelia Laros

A chaque nouvelle fonctionnaliteacute ajouteacutee demandez agrave quelqursquoun qui ne connait pas le projet de srsquoen servir Proposez lui une seule tacircche geacuteneacuterique agrave accomplir avec la fonctionnaliteacute

Exemple Tu veux prendre un rendez-vous avec un meacutedecin sur ce site montres-moi comment tu ferais en commentant agrave haute voix

Le plus important ici crsquoest de ne pas reacuteagir agrave ce qursquoil fait mais simplement le regarder faire sans lrsquoaider mecircme srsquoil est bloqueacute

Srsquoil 983540983586983588983589 de983543 983578983547983589s983545i983586983585s reacutepo983539983592983530z 983540983580983590 un983530 983577983548e983588t983534983587983539 o983547 d983535983545e983588 l983547983535 983577u983530 983550983587us 983536983547983535 983590eacutepo983539983592r983530983555 983578983548an983591 983534983537 983580ur983527 fi983539983535 983588rsquoil 983534983539983588983535s983545e Srsquoil 983530983543983546 v983542983580i983593983530n983545 983529l983587983577ueacute di983545983530983588 l983548i 983577983547983589 983550o983547s 983580983536983537ez 983542983530983550983587ir 983549983586983546r983589 983579o983541983534983589 et 983530983543983588983580ye983555 983592983530 c983587983538983541re983539983592r983530 983579983589 983578u983534 l983589 9835316ne

Introduction agrave lrsquoergonomie

Pas besoin de reacuteinventer la roue DIY

80

Cornelia Laros

Il existe des bonnes pratiques qui vous eacuteviteront de reacuteinventer la roue Utilisez des laquo design patterns raquo pour concevoir vos interfaces

Renseignez vous sur la Gestalt Theorie pour agencer vos pages

Utilisez les critegraveres de Bastien et Scapin pour trouver des deacutefauts eacutevidents avant de tester vous en tirerez des enseignements plus inteacuteressants

Ma983534s ccedila crsquoes983545 983541983586983548r u983539983530 983580u983546r983530 983559983587i983588

Introduction agrave lrsquoergonomie

Quizz time

81

Cornelia Laros

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

82

Cornelia Laros

1 c Fonctionnel

2 a Fiable

3 d Accessible

4 b Intuitif

5 e Plaisant

6 f Porteur de sens

text

F - Quel besoin ai-je oublieacute dans la question preacuteceacutedente

83

Cornelia Laros

Uti983536983534983588983580b983536e

Introduction agrave lrsquoergonomie

Tests DIY84

Cornelia Laros

Reacutedigez la proceacutedure pour tester un de vos projets drsquoIHM avec le test de votre choix perception arborescence ou utilisabiliteacute

Notez la question que vous vous posez et la question que vous allez poser

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

53

Cornelia Laros

a Fiable

b Intuitif

c Fonctionnel

d Accessible

e Plaisant

f Porteur de sens

Introduction agrave lrsquoergonomie

F - Quel besoin ai-je oublieacute dans la question

preacuteceacutedente

54

Cornelia Laros

text

Patterns amp Dark patterns

55

Cornelia Laros

text

Criteres de Bastien et Scapin56

Cornelia Laros

Guidage

Charge de travail

Controcircle utilisateur explicite

Flexibiliteacute ( adaptabiliteacute)

Gestion des erreurs

Homogeacuteneacuteiteacute ( coheacuterence)

Signifiance des Codes et Deacutenominations

Compatibiliteacute ( familiariteacute)

Introduction agrave lrsquoergonomie

Guidage57

Cornelia Laros

Introduction agrave lrsquoergonomie

Charge de travail58

Cornelia Laros

Introduction agrave lrsquoergonomie

Controle explicite59

Cornelia Laros

Introduction agrave lrsquoergonomie

Controles explicites60

Cornelia Laros

Dar983595 983541983527t983545983589983590n

text

Adaptabiliteacute61

Cornelia Laros

text

Gestion des erreurs62

Cornelia Laros

text

Signifiance des codes et deacutenominations

63

Cornelia Laros

text

Homogeacuteneacuteiteacute - coheacuterence64

Cornelia Laros

text

Homogeacuteneacuteiteacute - Distinction65

Cornelia Laros

text

Compatibiliteacute66

Cornelia Laros

text

Compatibiliteacute67

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction68

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction69

Cornelia Laros

text

Gestalt Theorie70

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Gestalt Theorie71

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Dark patterns72

Cornelia Laros

Introduction agrave lrsquoergonomie

A vous de jouer

73

Cornelia Laros

Introduction agrave lrsquoergonomie

Outils de prototypages DIY74

Cornelia Laros

Low tech papier + crayons post-its cartes agrave jouer

Gratuit en ligne Invision app Moqups UXPin

Mac Sketch Balsamiq Mockups Axure

PC Axure Balsamiq

Mobile Prototyping on Paper

Ap983540983590en983530983555 983592983589 no983547983549983589983537le983543 983581h983586983543983589983588

Introduction agrave lrsquoergonomie

Test de perception DIY75

Cornelia Laros

La premiegravere impression qursquoun utilisateur se fait de votre IHM va influencer tous ses jugements ulteacuterieurs Crsquoest lrsquoeffet de halo

bull Un utilisateur qui a une premiegravere impression positive de votre appli passera plus facilement outre les bugs

bull Une premiegravere impression negative rendra lrsquoutilisateur plus critique vis agrave vis de deacutetails qui confirment son jugement

Cel983527 983538983580983590c983532e 983527983548983588si 983527983549983589983581 vo983543 983586983590983580ux 983591rsquoex983527983538983589983585s vo983543 983530983585t983542983589983546i983530n983543 983592rsquoem983528983527983548983581he 983530983545 983550983587s 983542e983585d983530983555-vo983547983543 983581l983535e983539983546s

Introduction agrave lrsquoergonomie

Test de perception DIY76

Cornelia Laros

Montrer votre prototype agrave quelqursquoun pendant 5 secondes

Demandez-lui

bull Ce qursquoil a vu

bull Ce qursquoil a compris de ce qursquoil a vu

bull Ce qui lrsquoa surpris ou marqueacute

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY77

Cornelia Laros

Les difficulteacutes de navigation se produisent souvent dans les niveaux les plus haut de votre structure de contenu Vous pouvez veacuterifier facilement si la classification logique pour vous lrsquoest aussi pour vos utilisateurs

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY78

Cornelia Laros

Lister trois (max) niveaux de profondeur de votre contenu structureacute Masquez ensuite les contenus de niveau plus bas Utilisez par exemple les groupements de lignes dans excel pour creacuteer des pliers-deacutepliers ou imprimer la liste sur une feuille que vous pliez pour masquer certaines parties

Demandez agrave un utilisateur de vous dire ougrave il penserait trouver un contenu bien preacutecis en preacutecisant qursquoil nrsquoy a pas de bonne reacuteponse

Notez srsquoil va chercher lagrave ougrave vous vous y attendiez ougrave il a heacutesiteacute et ce qursquoil a fini par choisir pour vous aider agrave rendre la navigation plus intuitive

Introduction agrave lrsquoergonomie

Test drsquoutilisabiliteacute DIY79

Cornelia Laros

A chaque nouvelle fonctionnaliteacute ajouteacutee demandez agrave quelqursquoun qui ne connait pas le projet de srsquoen servir Proposez lui une seule tacircche geacuteneacuterique agrave accomplir avec la fonctionnaliteacute

Exemple Tu veux prendre un rendez-vous avec un meacutedecin sur ce site montres-moi comment tu ferais en commentant agrave haute voix

Le plus important ici crsquoest de ne pas reacuteagir agrave ce qursquoil fait mais simplement le regarder faire sans lrsquoaider mecircme srsquoil est bloqueacute

Srsquoil 983540983586983588983589 de983543 983578983547983589s983545i983586983585s reacutepo983539983592983530z 983540983580983590 un983530 983577983548e983588t983534983587983539 o983547 d983535983545e983588 l983547983535 983577u983530 983550983587us 983536983547983535 983590eacutepo983539983592r983530983555 983578983548an983591 983534983537 983580ur983527 fi983539983535 983588rsquoil 983534983539983588983535s983545e Srsquoil 983530983543983546 v983542983580i983593983530n983545 983529l983587983577ueacute di983545983530983588 l983548i 983577983547983589 983550o983547s 983580983536983537ez 983542983530983550983587ir 983549983586983546r983589 983579o983541983534983589 et 983530983543983588983580ye983555 983592983530 c983587983538983541re983539983592r983530 983579983589 983578u983534 l983589 9835316ne

Introduction agrave lrsquoergonomie

Pas besoin de reacuteinventer la roue DIY

80

Cornelia Laros

Il existe des bonnes pratiques qui vous eacuteviteront de reacuteinventer la roue Utilisez des laquo design patterns raquo pour concevoir vos interfaces

Renseignez vous sur la Gestalt Theorie pour agencer vos pages

Utilisez les critegraveres de Bastien et Scapin pour trouver des deacutefauts eacutevidents avant de tester vous en tirerez des enseignements plus inteacuteressants

Ma983534s ccedila crsquoes983545 983541983586983548r u983539983530 983580u983546r983530 983559983587i983588

Introduction agrave lrsquoergonomie

Quizz time

81

Cornelia Laros

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

82

Cornelia Laros

1 c Fonctionnel

2 a Fiable

3 d Accessible

4 b Intuitif

5 e Plaisant

6 f Porteur de sens

text

F - Quel besoin ai-je oublieacute dans la question preacuteceacutedente

83

Cornelia Laros

Uti983536983534983588983580b983536e

Introduction agrave lrsquoergonomie

Tests DIY84

Cornelia Laros

Reacutedigez la proceacutedure pour tester un de vos projets drsquoIHM avec le test de votre choix perception arborescence ou utilisabiliteacute

Notez la question que vous vous posez et la question que vous allez poser

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

Introduction agrave lrsquoergonomie

F - Quel besoin ai-je oublieacute dans la question

preacuteceacutedente

54

Cornelia Laros

text

Patterns amp Dark patterns

55

Cornelia Laros

text

Criteres de Bastien et Scapin56

Cornelia Laros

Guidage

Charge de travail

Controcircle utilisateur explicite

Flexibiliteacute ( adaptabiliteacute)

Gestion des erreurs

Homogeacuteneacuteiteacute ( coheacuterence)

Signifiance des Codes et Deacutenominations

Compatibiliteacute ( familiariteacute)

Introduction agrave lrsquoergonomie

Guidage57

Cornelia Laros

Introduction agrave lrsquoergonomie

Charge de travail58

Cornelia Laros

Introduction agrave lrsquoergonomie

Controle explicite59

Cornelia Laros

Introduction agrave lrsquoergonomie

Controles explicites60

Cornelia Laros

Dar983595 983541983527t983545983589983590n

text

Adaptabiliteacute61

Cornelia Laros

text

Gestion des erreurs62

Cornelia Laros

text

Signifiance des codes et deacutenominations

63

Cornelia Laros

text

Homogeacuteneacuteiteacute - coheacuterence64

Cornelia Laros

text

Homogeacuteneacuteiteacute - Distinction65

Cornelia Laros

text

Compatibiliteacute66

Cornelia Laros

text

Compatibiliteacute67

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction68

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction69

Cornelia Laros

text

Gestalt Theorie70

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Gestalt Theorie71

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Dark patterns72

Cornelia Laros

Introduction agrave lrsquoergonomie

A vous de jouer

73

Cornelia Laros

Introduction agrave lrsquoergonomie

Outils de prototypages DIY74

Cornelia Laros

Low tech papier + crayons post-its cartes agrave jouer

Gratuit en ligne Invision app Moqups UXPin

Mac Sketch Balsamiq Mockups Axure

PC Axure Balsamiq

Mobile Prototyping on Paper

Ap983540983590en983530983555 983592983589 no983547983549983589983537le983543 983581h983586983543983589983588

Introduction agrave lrsquoergonomie

Test de perception DIY75

Cornelia Laros

La premiegravere impression qursquoun utilisateur se fait de votre IHM va influencer tous ses jugements ulteacuterieurs Crsquoest lrsquoeffet de halo

bull Un utilisateur qui a une premiegravere impression positive de votre appli passera plus facilement outre les bugs

bull Une premiegravere impression negative rendra lrsquoutilisateur plus critique vis agrave vis de deacutetails qui confirment son jugement

Cel983527 983538983580983590c983532e 983527983548983588si 983527983549983589983581 vo983543 983586983590983580ux 983591rsquoex983527983538983589983585s vo983543 983530983585t983542983589983546i983530n983543 983592rsquoem983528983527983548983581he 983530983545 983550983587s 983542e983585d983530983555-vo983547983543 983581l983535e983539983546s

Introduction agrave lrsquoergonomie

Test de perception DIY76

Cornelia Laros

Montrer votre prototype agrave quelqursquoun pendant 5 secondes

Demandez-lui

bull Ce qursquoil a vu

bull Ce qursquoil a compris de ce qursquoil a vu

bull Ce qui lrsquoa surpris ou marqueacute

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY77

Cornelia Laros

Les difficulteacutes de navigation se produisent souvent dans les niveaux les plus haut de votre structure de contenu Vous pouvez veacuterifier facilement si la classification logique pour vous lrsquoest aussi pour vos utilisateurs

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY78

Cornelia Laros

Lister trois (max) niveaux de profondeur de votre contenu structureacute Masquez ensuite les contenus de niveau plus bas Utilisez par exemple les groupements de lignes dans excel pour creacuteer des pliers-deacutepliers ou imprimer la liste sur une feuille que vous pliez pour masquer certaines parties

Demandez agrave un utilisateur de vous dire ougrave il penserait trouver un contenu bien preacutecis en preacutecisant qursquoil nrsquoy a pas de bonne reacuteponse

Notez srsquoil va chercher lagrave ougrave vous vous y attendiez ougrave il a heacutesiteacute et ce qursquoil a fini par choisir pour vous aider agrave rendre la navigation plus intuitive

Introduction agrave lrsquoergonomie

Test drsquoutilisabiliteacute DIY79

Cornelia Laros

A chaque nouvelle fonctionnaliteacute ajouteacutee demandez agrave quelqursquoun qui ne connait pas le projet de srsquoen servir Proposez lui une seule tacircche geacuteneacuterique agrave accomplir avec la fonctionnaliteacute

Exemple Tu veux prendre un rendez-vous avec un meacutedecin sur ce site montres-moi comment tu ferais en commentant agrave haute voix

Le plus important ici crsquoest de ne pas reacuteagir agrave ce qursquoil fait mais simplement le regarder faire sans lrsquoaider mecircme srsquoil est bloqueacute

Srsquoil 983540983586983588983589 de983543 983578983547983589s983545i983586983585s reacutepo983539983592983530z 983540983580983590 un983530 983577983548e983588t983534983587983539 o983547 d983535983545e983588 l983547983535 983577u983530 983550983587us 983536983547983535 983590eacutepo983539983592r983530983555 983578983548an983591 983534983537 983580ur983527 fi983539983535 983588rsquoil 983534983539983588983535s983545e Srsquoil 983530983543983546 v983542983580i983593983530n983545 983529l983587983577ueacute di983545983530983588 l983548i 983577983547983589 983550o983547s 983580983536983537ez 983542983530983550983587ir 983549983586983546r983589 983579o983541983534983589 et 983530983543983588983580ye983555 983592983530 c983587983538983541re983539983592r983530 983579983589 983578u983534 l983589 9835316ne

Introduction agrave lrsquoergonomie

Pas besoin de reacuteinventer la roue DIY

80

Cornelia Laros

Il existe des bonnes pratiques qui vous eacuteviteront de reacuteinventer la roue Utilisez des laquo design patterns raquo pour concevoir vos interfaces

Renseignez vous sur la Gestalt Theorie pour agencer vos pages

Utilisez les critegraveres de Bastien et Scapin pour trouver des deacutefauts eacutevidents avant de tester vous en tirerez des enseignements plus inteacuteressants

Ma983534s ccedila crsquoes983545 983541983586983548r u983539983530 983580u983546r983530 983559983587i983588

Introduction agrave lrsquoergonomie

Quizz time

81

Cornelia Laros

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

82

Cornelia Laros

1 c Fonctionnel

2 a Fiable

3 d Accessible

4 b Intuitif

5 e Plaisant

6 f Porteur de sens

text

F - Quel besoin ai-je oublieacute dans la question preacuteceacutedente

83

Cornelia Laros

Uti983536983534983588983580b983536e

Introduction agrave lrsquoergonomie

Tests DIY84

Cornelia Laros

Reacutedigez la proceacutedure pour tester un de vos projets drsquoIHM avec le test de votre choix perception arborescence ou utilisabiliteacute

Notez la question que vous vous posez et la question que vous allez poser

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

text

Patterns amp Dark patterns

55

Cornelia Laros

text

Criteres de Bastien et Scapin56

Cornelia Laros

Guidage

Charge de travail

Controcircle utilisateur explicite

Flexibiliteacute ( adaptabiliteacute)

Gestion des erreurs

Homogeacuteneacuteiteacute ( coheacuterence)

Signifiance des Codes et Deacutenominations

Compatibiliteacute ( familiariteacute)

Introduction agrave lrsquoergonomie

Guidage57

Cornelia Laros

Introduction agrave lrsquoergonomie

Charge de travail58

Cornelia Laros

Introduction agrave lrsquoergonomie

Controle explicite59

Cornelia Laros

Introduction agrave lrsquoergonomie

Controles explicites60

Cornelia Laros

Dar983595 983541983527t983545983589983590n

text

Adaptabiliteacute61

Cornelia Laros

text

Gestion des erreurs62

Cornelia Laros

text

Signifiance des codes et deacutenominations

63

Cornelia Laros

text

Homogeacuteneacuteiteacute - coheacuterence64

Cornelia Laros

text

Homogeacuteneacuteiteacute - Distinction65

Cornelia Laros

text

Compatibiliteacute66

Cornelia Laros

text

Compatibiliteacute67

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction68

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction69

Cornelia Laros

text

Gestalt Theorie70

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Gestalt Theorie71

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Dark patterns72

Cornelia Laros

Introduction agrave lrsquoergonomie

A vous de jouer

73

Cornelia Laros

Introduction agrave lrsquoergonomie

Outils de prototypages DIY74

Cornelia Laros

Low tech papier + crayons post-its cartes agrave jouer

Gratuit en ligne Invision app Moqups UXPin

Mac Sketch Balsamiq Mockups Axure

PC Axure Balsamiq

Mobile Prototyping on Paper

Ap983540983590en983530983555 983592983589 no983547983549983589983537le983543 983581h983586983543983589983588

Introduction agrave lrsquoergonomie

Test de perception DIY75

Cornelia Laros

La premiegravere impression qursquoun utilisateur se fait de votre IHM va influencer tous ses jugements ulteacuterieurs Crsquoest lrsquoeffet de halo

bull Un utilisateur qui a une premiegravere impression positive de votre appli passera plus facilement outre les bugs

bull Une premiegravere impression negative rendra lrsquoutilisateur plus critique vis agrave vis de deacutetails qui confirment son jugement

Cel983527 983538983580983590c983532e 983527983548983588si 983527983549983589983581 vo983543 983586983590983580ux 983591rsquoex983527983538983589983585s vo983543 983530983585t983542983589983546i983530n983543 983592rsquoem983528983527983548983581he 983530983545 983550983587s 983542e983585d983530983555-vo983547983543 983581l983535e983539983546s

Introduction agrave lrsquoergonomie

Test de perception DIY76

Cornelia Laros

Montrer votre prototype agrave quelqursquoun pendant 5 secondes

Demandez-lui

bull Ce qursquoil a vu

bull Ce qursquoil a compris de ce qursquoil a vu

bull Ce qui lrsquoa surpris ou marqueacute

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY77

Cornelia Laros

Les difficulteacutes de navigation se produisent souvent dans les niveaux les plus haut de votre structure de contenu Vous pouvez veacuterifier facilement si la classification logique pour vous lrsquoest aussi pour vos utilisateurs

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY78

Cornelia Laros

Lister trois (max) niveaux de profondeur de votre contenu structureacute Masquez ensuite les contenus de niveau plus bas Utilisez par exemple les groupements de lignes dans excel pour creacuteer des pliers-deacutepliers ou imprimer la liste sur une feuille que vous pliez pour masquer certaines parties

Demandez agrave un utilisateur de vous dire ougrave il penserait trouver un contenu bien preacutecis en preacutecisant qursquoil nrsquoy a pas de bonne reacuteponse

Notez srsquoil va chercher lagrave ougrave vous vous y attendiez ougrave il a heacutesiteacute et ce qursquoil a fini par choisir pour vous aider agrave rendre la navigation plus intuitive

Introduction agrave lrsquoergonomie

Test drsquoutilisabiliteacute DIY79

Cornelia Laros

A chaque nouvelle fonctionnaliteacute ajouteacutee demandez agrave quelqursquoun qui ne connait pas le projet de srsquoen servir Proposez lui une seule tacircche geacuteneacuterique agrave accomplir avec la fonctionnaliteacute

Exemple Tu veux prendre un rendez-vous avec un meacutedecin sur ce site montres-moi comment tu ferais en commentant agrave haute voix

Le plus important ici crsquoest de ne pas reacuteagir agrave ce qursquoil fait mais simplement le regarder faire sans lrsquoaider mecircme srsquoil est bloqueacute

Srsquoil 983540983586983588983589 de983543 983578983547983589s983545i983586983585s reacutepo983539983592983530z 983540983580983590 un983530 983577983548e983588t983534983587983539 o983547 d983535983545e983588 l983547983535 983577u983530 983550983587us 983536983547983535 983590eacutepo983539983592r983530983555 983578983548an983591 983534983537 983580ur983527 fi983539983535 983588rsquoil 983534983539983588983535s983545e Srsquoil 983530983543983546 v983542983580i983593983530n983545 983529l983587983577ueacute di983545983530983588 l983548i 983577983547983589 983550o983547s 983580983536983537ez 983542983530983550983587ir 983549983586983546r983589 983579o983541983534983589 et 983530983543983588983580ye983555 983592983530 c983587983538983541re983539983592r983530 983579983589 983578u983534 l983589 9835316ne

Introduction agrave lrsquoergonomie

Pas besoin de reacuteinventer la roue DIY

80

Cornelia Laros

Il existe des bonnes pratiques qui vous eacuteviteront de reacuteinventer la roue Utilisez des laquo design patterns raquo pour concevoir vos interfaces

Renseignez vous sur la Gestalt Theorie pour agencer vos pages

Utilisez les critegraveres de Bastien et Scapin pour trouver des deacutefauts eacutevidents avant de tester vous en tirerez des enseignements plus inteacuteressants

Ma983534s ccedila crsquoes983545 983541983586983548r u983539983530 983580u983546r983530 983559983587i983588

Introduction agrave lrsquoergonomie

Quizz time

81

Cornelia Laros

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

82

Cornelia Laros

1 c Fonctionnel

2 a Fiable

3 d Accessible

4 b Intuitif

5 e Plaisant

6 f Porteur de sens

text

F - Quel besoin ai-je oublieacute dans la question preacuteceacutedente

83

Cornelia Laros

Uti983536983534983588983580b983536e

Introduction agrave lrsquoergonomie

Tests DIY84

Cornelia Laros

Reacutedigez la proceacutedure pour tester un de vos projets drsquoIHM avec le test de votre choix perception arborescence ou utilisabiliteacute

Notez la question que vous vous posez et la question que vous allez poser

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

text

Criteres de Bastien et Scapin56

Cornelia Laros

Guidage

Charge de travail

Controcircle utilisateur explicite

Flexibiliteacute ( adaptabiliteacute)

Gestion des erreurs

Homogeacuteneacuteiteacute ( coheacuterence)

Signifiance des Codes et Deacutenominations

Compatibiliteacute ( familiariteacute)

Introduction agrave lrsquoergonomie

Guidage57

Cornelia Laros

Introduction agrave lrsquoergonomie

Charge de travail58

Cornelia Laros

Introduction agrave lrsquoergonomie

Controle explicite59

Cornelia Laros

Introduction agrave lrsquoergonomie

Controles explicites60

Cornelia Laros

Dar983595 983541983527t983545983589983590n

text

Adaptabiliteacute61

Cornelia Laros

text

Gestion des erreurs62

Cornelia Laros

text

Signifiance des codes et deacutenominations

63

Cornelia Laros

text

Homogeacuteneacuteiteacute - coheacuterence64

Cornelia Laros

text

Homogeacuteneacuteiteacute - Distinction65

Cornelia Laros

text

Compatibiliteacute66

Cornelia Laros

text

Compatibiliteacute67

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction68

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction69

Cornelia Laros

text

Gestalt Theorie70

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Gestalt Theorie71

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Dark patterns72

Cornelia Laros

Introduction agrave lrsquoergonomie

A vous de jouer

73

Cornelia Laros

Introduction agrave lrsquoergonomie

Outils de prototypages DIY74

Cornelia Laros

Low tech papier + crayons post-its cartes agrave jouer

Gratuit en ligne Invision app Moqups UXPin

Mac Sketch Balsamiq Mockups Axure

PC Axure Balsamiq

Mobile Prototyping on Paper

Ap983540983590en983530983555 983592983589 no983547983549983589983537le983543 983581h983586983543983589983588

Introduction agrave lrsquoergonomie

Test de perception DIY75

Cornelia Laros

La premiegravere impression qursquoun utilisateur se fait de votre IHM va influencer tous ses jugements ulteacuterieurs Crsquoest lrsquoeffet de halo

bull Un utilisateur qui a une premiegravere impression positive de votre appli passera plus facilement outre les bugs

bull Une premiegravere impression negative rendra lrsquoutilisateur plus critique vis agrave vis de deacutetails qui confirment son jugement

Cel983527 983538983580983590c983532e 983527983548983588si 983527983549983589983581 vo983543 983586983590983580ux 983591rsquoex983527983538983589983585s vo983543 983530983585t983542983589983546i983530n983543 983592rsquoem983528983527983548983581he 983530983545 983550983587s 983542e983585d983530983555-vo983547983543 983581l983535e983539983546s

Introduction agrave lrsquoergonomie

Test de perception DIY76

Cornelia Laros

Montrer votre prototype agrave quelqursquoun pendant 5 secondes

Demandez-lui

bull Ce qursquoil a vu

bull Ce qursquoil a compris de ce qursquoil a vu

bull Ce qui lrsquoa surpris ou marqueacute

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY77

Cornelia Laros

Les difficulteacutes de navigation se produisent souvent dans les niveaux les plus haut de votre structure de contenu Vous pouvez veacuterifier facilement si la classification logique pour vous lrsquoest aussi pour vos utilisateurs

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY78

Cornelia Laros

Lister trois (max) niveaux de profondeur de votre contenu structureacute Masquez ensuite les contenus de niveau plus bas Utilisez par exemple les groupements de lignes dans excel pour creacuteer des pliers-deacutepliers ou imprimer la liste sur une feuille que vous pliez pour masquer certaines parties

Demandez agrave un utilisateur de vous dire ougrave il penserait trouver un contenu bien preacutecis en preacutecisant qursquoil nrsquoy a pas de bonne reacuteponse

Notez srsquoil va chercher lagrave ougrave vous vous y attendiez ougrave il a heacutesiteacute et ce qursquoil a fini par choisir pour vous aider agrave rendre la navigation plus intuitive

Introduction agrave lrsquoergonomie

Test drsquoutilisabiliteacute DIY79

Cornelia Laros

A chaque nouvelle fonctionnaliteacute ajouteacutee demandez agrave quelqursquoun qui ne connait pas le projet de srsquoen servir Proposez lui une seule tacircche geacuteneacuterique agrave accomplir avec la fonctionnaliteacute

Exemple Tu veux prendre un rendez-vous avec un meacutedecin sur ce site montres-moi comment tu ferais en commentant agrave haute voix

Le plus important ici crsquoest de ne pas reacuteagir agrave ce qursquoil fait mais simplement le regarder faire sans lrsquoaider mecircme srsquoil est bloqueacute

Srsquoil 983540983586983588983589 de983543 983578983547983589s983545i983586983585s reacutepo983539983592983530z 983540983580983590 un983530 983577983548e983588t983534983587983539 o983547 d983535983545e983588 l983547983535 983577u983530 983550983587us 983536983547983535 983590eacutepo983539983592r983530983555 983578983548an983591 983534983537 983580ur983527 fi983539983535 983588rsquoil 983534983539983588983535s983545e Srsquoil 983530983543983546 v983542983580i983593983530n983545 983529l983587983577ueacute di983545983530983588 l983548i 983577983547983589 983550o983547s 983580983536983537ez 983542983530983550983587ir 983549983586983546r983589 983579o983541983534983589 et 983530983543983588983580ye983555 983592983530 c983587983538983541re983539983592r983530 983579983589 983578u983534 l983589 9835316ne

Introduction agrave lrsquoergonomie

Pas besoin de reacuteinventer la roue DIY

80

Cornelia Laros

Il existe des bonnes pratiques qui vous eacuteviteront de reacuteinventer la roue Utilisez des laquo design patterns raquo pour concevoir vos interfaces

Renseignez vous sur la Gestalt Theorie pour agencer vos pages

Utilisez les critegraveres de Bastien et Scapin pour trouver des deacutefauts eacutevidents avant de tester vous en tirerez des enseignements plus inteacuteressants

Ma983534s ccedila crsquoes983545 983541983586983548r u983539983530 983580u983546r983530 983559983587i983588

Introduction agrave lrsquoergonomie

Quizz time

81

Cornelia Laros

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

82

Cornelia Laros

1 c Fonctionnel

2 a Fiable

3 d Accessible

4 b Intuitif

5 e Plaisant

6 f Porteur de sens

text

F - Quel besoin ai-je oublieacute dans la question preacuteceacutedente

83

Cornelia Laros

Uti983536983534983588983580b983536e

Introduction agrave lrsquoergonomie

Tests DIY84

Cornelia Laros

Reacutedigez la proceacutedure pour tester un de vos projets drsquoIHM avec le test de votre choix perception arborescence ou utilisabiliteacute

Notez la question que vous vous posez et la question que vous allez poser

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

Introduction agrave lrsquoergonomie

Guidage57

Cornelia Laros

Introduction agrave lrsquoergonomie

Charge de travail58

Cornelia Laros

Introduction agrave lrsquoergonomie

Controle explicite59

Cornelia Laros

Introduction agrave lrsquoergonomie

Controles explicites60

Cornelia Laros

Dar983595 983541983527t983545983589983590n

text

Adaptabiliteacute61

Cornelia Laros

text

Gestion des erreurs62

Cornelia Laros

text

Signifiance des codes et deacutenominations

63

Cornelia Laros

text

Homogeacuteneacuteiteacute - coheacuterence64

Cornelia Laros

text

Homogeacuteneacuteiteacute - Distinction65

Cornelia Laros

text

Compatibiliteacute66

Cornelia Laros

text

Compatibiliteacute67

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction68

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction69

Cornelia Laros

text

Gestalt Theorie70

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Gestalt Theorie71

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Dark patterns72

Cornelia Laros

Introduction agrave lrsquoergonomie

A vous de jouer

73

Cornelia Laros

Introduction agrave lrsquoergonomie

Outils de prototypages DIY74

Cornelia Laros

Low tech papier + crayons post-its cartes agrave jouer

Gratuit en ligne Invision app Moqups UXPin

Mac Sketch Balsamiq Mockups Axure

PC Axure Balsamiq

Mobile Prototyping on Paper

Ap983540983590en983530983555 983592983589 no983547983549983589983537le983543 983581h983586983543983589983588

Introduction agrave lrsquoergonomie

Test de perception DIY75

Cornelia Laros

La premiegravere impression qursquoun utilisateur se fait de votre IHM va influencer tous ses jugements ulteacuterieurs Crsquoest lrsquoeffet de halo

bull Un utilisateur qui a une premiegravere impression positive de votre appli passera plus facilement outre les bugs

bull Une premiegravere impression negative rendra lrsquoutilisateur plus critique vis agrave vis de deacutetails qui confirment son jugement

Cel983527 983538983580983590c983532e 983527983548983588si 983527983549983589983581 vo983543 983586983590983580ux 983591rsquoex983527983538983589983585s vo983543 983530983585t983542983589983546i983530n983543 983592rsquoem983528983527983548983581he 983530983545 983550983587s 983542e983585d983530983555-vo983547983543 983581l983535e983539983546s

Introduction agrave lrsquoergonomie

Test de perception DIY76

Cornelia Laros

Montrer votre prototype agrave quelqursquoun pendant 5 secondes

Demandez-lui

bull Ce qursquoil a vu

bull Ce qursquoil a compris de ce qursquoil a vu

bull Ce qui lrsquoa surpris ou marqueacute

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY77

Cornelia Laros

Les difficulteacutes de navigation se produisent souvent dans les niveaux les plus haut de votre structure de contenu Vous pouvez veacuterifier facilement si la classification logique pour vous lrsquoest aussi pour vos utilisateurs

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY78

Cornelia Laros

Lister trois (max) niveaux de profondeur de votre contenu structureacute Masquez ensuite les contenus de niveau plus bas Utilisez par exemple les groupements de lignes dans excel pour creacuteer des pliers-deacutepliers ou imprimer la liste sur une feuille que vous pliez pour masquer certaines parties

Demandez agrave un utilisateur de vous dire ougrave il penserait trouver un contenu bien preacutecis en preacutecisant qursquoil nrsquoy a pas de bonne reacuteponse

Notez srsquoil va chercher lagrave ougrave vous vous y attendiez ougrave il a heacutesiteacute et ce qursquoil a fini par choisir pour vous aider agrave rendre la navigation plus intuitive

Introduction agrave lrsquoergonomie

Test drsquoutilisabiliteacute DIY79

Cornelia Laros

A chaque nouvelle fonctionnaliteacute ajouteacutee demandez agrave quelqursquoun qui ne connait pas le projet de srsquoen servir Proposez lui une seule tacircche geacuteneacuterique agrave accomplir avec la fonctionnaliteacute

Exemple Tu veux prendre un rendez-vous avec un meacutedecin sur ce site montres-moi comment tu ferais en commentant agrave haute voix

Le plus important ici crsquoest de ne pas reacuteagir agrave ce qursquoil fait mais simplement le regarder faire sans lrsquoaider mecircme srsquoil est bloqueacute

Srsquoil 983540983586983588983589 de983543 983578983547983589s983545i983586983585s reacutepo983539983592983530z 983540983580983590 un983530 983577983548e983588t983534983587983539 o983547 d983535983545e983588 l983547983535 983577u983530 983550983587us 983536983547983535 983590eacutepo983539983592r983530983555 983578983548an983591 983534983537 983580ur983527 fi983539983535 983588rsquoil 983534983539983588983535s983545e Srsquoil 983530983543983546 v983542983580i983593983530n983545 983529l983587983577ueacute di983545983530983588 l983548i 983577983547983589 983550o983547s 983580983536983537ez 983542983530983550983587ir 983549983586983546r983589 983579o983541983534983589 et 983530983543983588983580ye983555 983592983530 c983587983538983541re983539983592r983530 983579983589 983578u983534 l983589 9835316ne

Introduction agrave lrsquoergonomie

Pas besoin de reacuteinventer la roue DIY

80

Cornelia Laros

Il existe des bonnes pratiques qui vous eacuteviteront de reacuteinventer la roue Utilisez des laquo design patterns raquo pour concevoir vos interfaces

Renseignez vous sur la Gestalt Theorie pour agencer vos pages

Utilisez les critegraveres de Bastien et Scapin pour trouver des deacutefauts eacutevidents avant de tester vous en tirerez des enseignements plus inteacuteressants

Ma983534s ccedila crsquoes983545 983541983586983548r u983539983530 983580u983546r983530 983559983587i983588

Introduction agrave lrsquoergonomie

Quizz time

81

Cornelia Laros

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

82

Cornelia Laros

1 c Fonctionnel

2 a Fiable

3 d Accessible

4 b Intuitif

5 e Plaisant

6 f Porteur de sens

text

F - Quel besoin ai-je oublieacute dans la question preacuteceacutedente

83

Cornelia Laros

Uti983536983534983588983580b983536e

Introduction agrave lrsquoergonomie

Tests DIY84

Cornelia Laros

Reacutedigez la proceacutedure pour tester un de vos projets drsquoIHM avec le test de votre choix perception arborescence ou utilisabiliteacute

Notez la question que vous vous posez et la question que vous allez poser

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

Introduction agrave lrsquoergonomie

Charge de travail58

Cornelia Laros

Introduction agrave lrsquoergonomie

Controle explicite59

Cornelia Laros

Introduction agrave lrsquoergonomie

Controles explicites60

Cornelia Laros

Dar983595 983541983527t983545983589983590n

text

Adaptabiliteacute61

Cornelia Laros

text

Gestion des erreurs62

Cornelia Laros

text

Signifiance des codes et deacutenominations

63

Cornelia Laros

text

Homogeacuteneacuteiteacute - coheacuterence64

Cornelia Laros

text

Homogeacuteneacuteiteacute - Distinction65

Cornelia Laros

text

Compatibiliteacute66

Cornelia Laros

text

Compatibiliteacute67

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction68

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction69

Cornelia Laros

text

Gestalt Theorie70

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Gestalt Theorie71

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Dark patterns72

Cornelia Laros

Introduction agrave lrsquoergonomie

A vous de jouer

73

Cornelia Laros

Introduction agrave lrsquoergonomie

Outils de prototypages DIY74

Cornelia Laros

Low tech papier + crayons post-its cartes agrave jouer

Gratuit en ligne Invision app Moqups UXPin

Mac Sketch Balsamiq Mockups Axure

PC Axure Balsamiq

Mobile Prototyping on Paper

Ap983540983590en983530983555 983592983589 no983547983549983589983537le983543 983581h983586983543983589983588

Introduction agrave lrsquoergonomie

Test de perception DIY75

Cornelia Laros

La premiegravere impression qursquoun utilisateur se fait de votre IHM va influencer tous ses jugements ulteacuterieurs Crsquoest lrsquoeffet de halo

bull Un utilisateur qui a une premiegravere impression positive de votre appli passera plus facilement outre les bugs

bull Une premiegravere impression negative rendra lrsquoutilisateur plus critique vis agrave vis de deacutetails qui confirment son jugement

Cel983527 983538983580983590c983532e 983527983548983588si 983527983549983589983581 vo983543 983586983590983580ux 983591rsquoex983527983538983589983585s vo983543 983530983585t983542983589983546i983530n983543 983592rsquoem983528983527983548983581he 983530983545 983550983587s 983542e983585d983530983555-vo983547983543 983581l983535e983539983546s

Introduction agrave lrsquoergonomie

Test de perception DIY76

Cornelia Laros

Montrer votre prototype agrave quelqursquoun pendant 5 secondes

Demandez-lui

bull Ce qursquoil a vu

bull Ce qursquoil a compris de ce qursquoil a vu

bull Ce qui lrsquoa surpris ou marqueacute

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY77

Cornelia Laros

Les difficulteacutes de navigation se produisent souvent dans les niveaux les plus haut de votre structure de contenu Vous pouvez veacuterifier facilement si la classification logique pour vous lrsquoest aussi pour vos utilisateurs

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY78

Cornelia Laros

Lister trois (max) niveaux de profondeur de votre contenu structureacute Masquez ensuite les contenus de niveau plus bas Utilisez par exemple les groupements de lignes dans excel pour creacuteer des pliers-deacutepliers ou imprimer la liste sur une feuille que vous pliez pour masquer certaines parties

Demandez agrave un utilisateur de vous dire ougrave il penserait trouver un contenu bien preacutecis en preacutecisant qursquoil nrsquoy a pas de bonne reacuteponse

Notez srsquoil va chercher lagrave ougrave vous vous y attendiez ougrave il a heacutesiteacute et ce qursquoil a fini par choisir pour vous aider agrave rendre la navigation plus intuitive

Introduction agrave lrsquoergonomie

Test drsquoutilisabiliteacute DIY79

Cornelia Laros

A chaque nouvelle fonctionnaliteacute ajouteacutee demandez agrave quelqursquoun qui ne connait pas le projet de srsquoen servir Proposez lui une seule tacircche geacuteneacuterique agrave accomplir avec la fonctionnaliteacute

Exemple Tu veux prendre un rendez-vous avec un meacutedecin sur ce site montres-moi comment tu ferais en commentant agrave haute voix

Le plus important ici crsquoest de ne pas reacuteagir agrave ce qursquoil fait mais simplement le regarder faire sans lrsquoaider mecircme srsquoil est bloqueacute

Srsquoil 983540983586983588983589 de983543 983578983547983589s983545i983586983585s reacutepo983539983592983530z 983540983580983590 un983530 983577983548e983588t983534983587983539 o983547 d983535983545e983588 l983547983535 983577u983530 983550983587us 983536983547983535 983590eacutepo983539983592r983530983555 983578983548an983591 983534983537 983580ur983527 fi983539983535 983588rsquoil 983534983539983588983535s983545e Srsquoil 983530983543983546 v983542983580i983593983530n983545 983529l983587983577ueacute di983545983530983588 l983548i 983577983547983589 983550o983547s 983580983536983537ez 983542983530983550983587ir 983549983586983546r983589 983579o983541983534983589 et 983530983543983588983580ye983555 983592983530 c983587983538983541re983539983592r983530 983579983589 983578u983534 l983589 9835316ne

Introduction agrave lrsquoergonomie

Pas besoin de reacuteinventer la roue DIY

80

Cornelia Laros

Il existe des bonnes pratiques qui vous eacuteviteront de reacuteinventer la roue Utilisez des laquo design patterns raquo pour concevoir vos interfaces

Renseignez vous sur la Gestalt Theorie pour agencer vos pages

Utilisez les critegraveres de Bastien et Scapin pour trouver des deacutefauts eacutevidents avant de tester vous en tirerez des enseignements plus inteacuteressants

Ma983534s ccedila crsquoes983545 983541983586983548r u983539983530 983580u983546r983530 983559983587i983588

Introduction agrave lrsquoergonomie

Quizz time

81

Cornelia Laros

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

82

Cornelia Laros

1 c Fonctionnel

2 a Fiable

3 d Accessible

4 b Intuitif

5 e Plaisant

6 f Porteur de sens

text

F - Quel besoin ai-je oublieacute dans la question preacuteceacutedente

83

Cornelia Laros

Uti983536983534983588983580b983536e

Introduction agrave lrsquoergonomie

Tests DIY84

Cornelia Laros

Reacutedigez la proceacutedure pour tester un de vos projets drsquoIHM avec le test de votre choix perception arborescence ou utilisabiliteacute

Notez la question que vous vous posez et la question que vous allez poser

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

Introduction agrave lrsquoergonomie

Controle explicite59

Cornelia Laros

Introduction agrave lrsquoergonomie

Controles explicites60

Cornelia Laros

Dar983595 983541983527t983545983589983590n

text

Adaptabiliteacute61

Cornelia Laros

text

Gestion des erreurs62

Cornelia Laros

text

Signifiance des codes et deacutenominations

63

Cornelia Laros

text

Homogeacuteneacuteiteacute - coheacuterence64

Cornelia Laros

text

Homogeacuteneacuteiteacute - Distinction65

Cornelia Laros

text

Compatibiliteacute66

Cornelia Laros

text

Compatibiliteacute67

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction68

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction69

Cornelia Laros

text

Gestalt Theorie70

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Gestalt Theorie71

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Dark patterns72

Cornelia Laros

Introduction agrave lrsquoergonomie

A vous de jouer

73

Cornelia Laros

Introduction agrave lrsquoergonomie

Outils de prototypages DIY74

Cornelia Laros

Low tech papier + crayons post-its cartes agrave jouer

Gratuit en ligne Invision app Moqups UXPin

Mac Sketch Balsamiq Mockups Axure

PC Axure Balsamiq

Mobile Prototyping on Paper

Ap983540983590en983530983555 983592983589 no983547983549983589983537le983543 983581h983586983543983589983588

Introduction agrave lrsquoergonomie

Test de perception DIY75

Cornelia Laros

La premiegravere impression qursquoun utilisateur se fait de votre IHM va influencer tous ses jugements ulteacuterieurs Crsquoest lrsquoeffet de halo

bull Un utilisateur qui a une premiegravere impression positive de votre appli passera plus facilement outre les bugs

bull Une premiegravere impression negative rendra lrsquoutilisateur plus critique vis agrave vis de deacutetails qui confirment son jugement

Cel983527 983538983580983590c983532e 983527983548983588si 983527983549983589983581 vo983543 983586983590983580ux 983591rsquoex983527983538983589983585s vo983543 983530983585t983542983589983546i983530n983543 983592rsquoem983528983527983548983581he 983530983545 983550983587s 983542e983585d983530983555-vo983547983543 983581l983535e983539983546s

Introduction agrave lrsquoergonomie

Test de perception DIY76

Cornelia Laros

Montrer votre prototype agrave quelqursquoun pendant 5 secondes

Demandez-lui

bull Ce qursquoil a vu

bull Ce qursquoil a compris de ce qursquoil a vu

bull Ce qui lrsquoa surpris ou marqueacute

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY77

Cornelia Laros

Les difficulteacutes de navigation se produisent souvent dans les niveaux les plus haut de votre structure de contenu Vous pouvez veacuterifier facilement si la classification logique pour vous lrsquoest aussi pour vos utilisateurs

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY78

Cornelia Laros

Lister trois (max) niveaux de profondeur de votre contenu structureacute Masquez ensuite les contenus de niveau plus bas Utilisez par exemple les groupements de lignes dans excel pour creacuteer des pliers-deacutepliers ou imprimer la liste sur une feuille que vous pliez pour masquer certaines parties

Demandez agrave un utilisateur de vous dire ougrave il penserait trouver un contenu bien preacutecis en preacutecisant qursquoil nrsquoy a pas de bonne reacuteponse

Notez srsquoil va chercher lagrave ougrave vous vous y attendiez ougrave il a heacutesiteacute et ce qursquoil a fini par choisir pour vous aider agrave rendre la navigation plus intuitive

Introduction agrave lrsquoergonomie

Test drsquoutilisabiliteacute DIY79

Cornelia Laros

A chaque nouvelle fonctionnaliteacute ajouteacutee demandez agrave quelqursquoun qui ne connait pas le projet de srsquoen servir Proposez lui une seule tacircche geacuteneacuterique agrave accomplir avec la fonctionnaliteacute

Exemple Tu veux prendre un rendez-vous avec un meacutedecin sur ce site montres-moi comment tu ferais en commentant agrave haute voix

Le plus important ici crsquoest de ne pas reacuteagir agrave ce qursquoil fait mais simplement le regarder faire sans lrsquoaider mecircme srsquoil est bloqueacute

Srsquoil 983540983586983588983589 de983543 983578983547983589s983545i983586983585s reacutepo983539983592983530z 983540983580983590 un983530 983577983548e983588t983534983587983539 o983547 d983535983545e983588 l983547983535 983577u983530 983550983587us 983536983547983535 983590eacutepo983539983592r983530983555 983578983548an983591 983534983537 983580ur983527 fi983539983535 983588rsquoil 983534983539983588983535s983545e Srsquoil 983530983543983546 v983542983580i983593983530n983545 983529l983587983577ueacute di983545983530983588 l983548i 983577983547983589 983550o983547s 983580983536983537ez 983542983530983550983587ir 983549983586983546r983589 983579o983541983534983589 et 983530983543983588983580ye983555 983592983530 c983587983538983541re983539983592r983530 983579983589 983578u983534 l983589 9835316ne

Introduction agrave lrsquoergonomie

Pas besoin de reacuteinventer la roue DIY

80

Cornelia Laros

Il existe des bonnes pratiques qui vous eacuteviteront de reacuteinventer la roue Utilisez des laquo design patterns raquo pour concevoir vos interfaces

Renseignez vous sur la Gestalt Theorie pour agencer vos pages

Utilisez les critegraveres de Bastien et Scapin pour trouver des deacutefauts eacutevidents avant de tester vous en tirerez des enseignements plus inteacuteressants

Ma983534s ccedila crsquoes983545 983541983586983548r u983539983530 983580u983546r983530 983559983587i983588

Introduction agrave lrsquoergonomie

Quizz time

81

Cornelia Laros

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

82

Cornelia Laros

1 c Fonctionnel

2 a Fiable

3 d Accessible

4 b Intuitif

5 e Plaisant

6 f Porteur de sens

text

F - Quel besoin ai-je oublieacute dans la question preacuteceacutedente

83

Cornelia Laros

Uti983536983534983588983580b983536e

Introduction agrave lrsquoergonomie

Tests DIY84

Cornelia Laros

Reacutedigez la proceacutedure pour tester un de vos projets drsquoIHM avec le test de votre choix perception arborescence ou utilisabiliteacute

Notez la question que vous vous posez et la question que vous allez poser

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

Introduction agrave lrsquoergonomie

Controles explicites60

Cornelia Laros

Dar983595 983541983527t983545983589983590n

text

Adaptabiliteacute61

Cornelia Laros

text

Gestion des erreurs62

Cornelia Laros

text

Signifiance des codes et deacutenominations

63

Cornelia Laros

text

Homogeacuteneacuteiteacute - coheacuterence64

Cornelia Laros

text

Homogeacuteneacuteiteacute - Distinction65

Cornelia Laros

text

Compatibiliteacute66

Cornelia Laros

text

Compatibiliteacute67

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction68

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction69

Cornelia Laros

text

Gestalt Theorie70

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Gestalt Theorie71

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Dark patterns72

Cornelia Laros

Introduction agrave lrsquoergonomie

A vous de jouer

73

Cornelia Laros

Introduction agrave lrsquoergonomie

Outils de prototypages DIY74

Cornelia Laros

Low tech papier + crayons post-its cartes agrave jouer

Gratuit en ligne Invision app Moqups UXPin

Mac Sketch Balsamiq Mockups Axure

PC Axure Balsamiq

Mobile Prototyping on Paper

Ap983540983590en983530983555 983592983589 no983547983549983589983537le983543 983581h983586983543983589983588

Introduction agrave lrsquoergonomie

Test de perception DIY75

Cornelia Laros

La premiegravere impression qursquoun utilisateur se fait de votre IHM va influencer tous ses jugements ulteacuterieurs Crsquoest lrsquoeffet de halo

bull Un utilisateur qui a une premiegravere impression positive de votre appli passera plus facilement outre les bugs

bull Une premiegravere impression negative rendra lrsquoutilisateur plus critique vis agrave vis de deacutetails qui confirment son jugement

Cel983527 983538983580983590c983532e 983527983548983588si 983527983549983589983581 vo983543 983586983590983580ux 983591rsquoex983527983538983589983585s vo983543 983530983585t983542983589983546i983530n983543 983592rsquoem983528983527983548983581he 983530983545 983550983587s 983542e983585d983530983555-vo983547983543 983581l983535e983539983546s

Introduction agrave lrsquoergonomie

Test de perception DIY76

Cornelia Laros

Montrer votre prototype agrave quelqursquoun pendant 5 secondes

Demandez-lui

bull Ce qursquoil a vu

bull Ce qursquoil a compris de ce qursquoil a vu

bull Ce qui lrsquoa surpris ou marqueacute

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY77

Cornelia Laros

Les difficulteacutes de navigation se produisent souvent dans les niveaux les plus haut de votre structure de contenu Vous pouvez veacuterifier facilement si la classification logique pour vous lrsquoest aussi pour vos utilisateurs

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY78

Cornelia Laros

Lister trois (max) niveaux de profondeur de votre contenu structureacute Masquez ensuite les contenus de niveau plus bas Utilisez par exemple les groupements de lignes dans excel pour creacuteer des pliers-deacutepliers ou imprimer la liste sur une feuille que vous pliez pour masquer certaines parties

Demandez agrave un utilisateur de vous dire ougrave il penserait trouver un contenu bien preacutecis en preacutecisant qursquoil nrsquoy a pas de bonne reacuteponse

Notez srsquoil va chercher lagrave ougrave vous vous y attendiez ougrave il a heacutesiteacute et ce qursquoil a fini par choisir pour vous aider agrave rendre la navigation plus intuitive

Introduction agrave lrsquoergonomie

Test drsquoutilisabiliteacute DIY79

Cornelia Laros

A chaque nouvelle fonctionnaliteacute ajouteacutee demandez agrave quelqursquoun qui ne connait pas le projet de srsquoen servir Proposez lui une seule tacircche geacuteneacuterique agrave accomplir avec la fonctionnaliteacute

Exemple Tu veux prendre un rendez-vous avec un meacutedecin sur ce site montres-moi comment tu ferais en commentant agrave haute voix

Le plus important ici crsquoest de ne pas reacuteagir agrave ce qursquoil fait mais simplement le regarder faire sans lrsquoaider mecircme srsquoil est bloqueacute

Srsquoil 983540983586983588983589 de983543 983578983547983589s983545i983586983585s reacutepo983539983592983530z 983540983580983590 un983530 983577983548e983588t983534983587983539 o983547 d983535983545e983588 l983547983535 983577u983530 983550983587us 983536983547983535 983590eacutepo983539983592r983530983555 983578983548an983591 983534983537 983580ur983527 fi983539983535 983588rsquoil 983534983539983588983535s983545e Srsquoil 983530983543983546 v983542983580i983593983530n983545 983529l983587983577ueacute di983545983530983588 l983548i 983577983547983589 983550o983547s 983580983536983537ez 983542983530983550983587ir 983549983586983546r983589 983579o983541983534983589 et 983530983543983588983580ye983555 983592983530 c983587983538983541re983539983592r983530 983579983589 983578u983534 l983589 9835316ne

Introduction agrave lrsquoergonomie

Pas besoin de reacuteinventer la roue DIY

80

Cornelia Laros

Il existe des bonnes pratiques qui vous eacuteviteront de reacuteinventer la roue Utilisez des laquo design patterns raquo pour concevoir vos interfaces

Renseignez vous sur la Gestalt Theorie pour agencer vos pages

Utilisez les critegraveres de Bastien et Scapin pour trouver des deacutefauts eacutevidents avant de tester vous en tirerez des enseignements plus inteacuteressants

Ma983534s ccedila crsquoes983545 983541983586983548r u983539983530 983580u983546r983530 983559983587i983588

Introduction agrave lrsquoergonomie

Quizz time

81

Cornelia Laros

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

82

Cornelia Laros

1 c Fonctionnel

2 a Fiable

3 d Accessible

4 b Intuitif

5 e Plaisant

6 f Porteur de sens

text

F - Quel besoin ai-je oublieacute dans la question preacuteceacutedente

83

Cornelia Laros

Uti983536983534983588983580b983536e

Introduction agrave lrsquoergonomie

Tests DIY84

Cornelia Laros

Reacutedigez la proceacutedure pour tester un de vos projets drsquoIHM avec le test de votre choix perception arborescence ou utilisabiliteacute

Notez la question que vous vous posez et la question que vous allez poser

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

text

Adaptabiliteacute61

Cornelia Laros

text

Gestion des erreurs62

Cornelia Laros

text

Signifiance des codes et deacutenominations

63

Cornelia Laros

text

Homogeacuteneacuteiteacute - coheacuterence64

Cornelia Laros

text

Homogeacuteneacuteiteacute - Distinction65

Cornelia Laros

text

Compatibiliteacute66

Cornelia Laros

text

Compatibiliteacute67

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction68

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction69

Cornelia Laros

text

Gestalt Theorie70

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Gestalt Theorie71

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Dark patterns72

Cornelia Laros

Introduction agrave lrsquoergonomie

A vous de jouer

73

Cornelia Laros

Introduction agrave lrsquoergonomie

Outils de prototypages DIY74

Cornelia Laros

Low tech papier + crayons post-its cartes agrave jouer

Gratuit en ligne Invision app Moqups UXPin

Mac Sketch Balsamiq Mockups Axure

PC Axure Balsamiq

Mobile Prototyping on Paper

Ap983540983590en983530983555 983592983589 no983547983549983589983537le983543 983581h983586983543983589983588

Introduction agrave lrsquoergonomie

Test de perception DIY75

Cornelia Laros

La premiegravere impression qursquoun utilisateur se fait de votre IHM va influencer tous ses jugements ulteacuterieurs Crsquoest lrsquoeffet de halo

bull Un utilisateur qui a une premiegravere impression positive de votre appli passera plus facilement outre les bugs

bull Une premiegravere impression negative rendra lrsquoutilisateur plus critique vis agrave vis de deacutetails qui confirment son jugement

Cel983527 983538983580983590c983532e 983527983548983588si 983527983549983589983581 vo983543 983586983590983580ux 983591rsquoex983527983538983589983585s vo983543 983530983585t983542983589983546i983530n983543 983592rsquoem983528983527983548983581he 983530983545 983550983587s 983542e983585d983530983555-vo983547983543 983581l983535e983539983546s

Introduction agrave lrsquoergonomie

Test de perception DIY76

Cornelia Laros

Montrer votre prototype agrave quelqursquoun pendant 5 secondes

Demandez-lui

bull Ce qursquoil a vu

bull Ce qursquoil a compris de ce qursquoil a vu

bull Ce qui lrsquoa surpris ou marqueacute

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY77

Cornelia Laros

Les difficulteacutes de navigation se produisent souvent dans les niveaux les plus haut de votre structure de contenu Vous pouvez veacuterifier facilement si la classification logique pour vous lrsquoest aussi pour vos utilisateurs

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY78

Cornelia Laros

Lister trois (max) niveaux de profondeur de votre contenu structureacute Masquez ensuite les contenus de niveau plus bas Utilisez par exemple les groupements de lignes dans excel pour creacuteer des pliers-deacutepliers ou imprimer la liste sur une feuille que vous pliez pour masquer certaines parties

Demandez agrave un utilisateur de vous dire ougrave il penserait trouver un contenu bien preacutecis en preacutecisant qursquoil nrsquoy a pas de bonne reacuteponse

Notez srsquoil va chercher lagrave ougrave vous vous y attendiez ougrave il a heacutesiteacute et ce qursquoil a fini par choisir pour vous aider agrave rendre la navigation plus intuitive

Introduction agrave lrsquoergonomie

Test drsquoutilisabiliteacute DIY79

Cornelia Laros

A chaque nouvelle fonctionnaliteacute ajouteacutee demandez agrave quelqursquoun qui ne connait pas le projet de srsquoen servir Proposez lui une seule tacircche geacuteneacuterique agrave accomplir avec la fonctionnaliteacute

Exemple Tu veux prendre un rendez-vous avec un meacutedecin sur ce site montres-moi comment tu ferais en commentant agrave haute voix

Le plus important ici crsquoest de ne pas reacuteagir agrave ce qursquoil fait mais simplement le regarder faire sans lrsquoaider mecircme srsquoil est bloqueacute

Srsquoil 983540983586983588983589 de983543 983578983547983589s983545i983586983585s reacutepo983539983592983530z 983540983580983590 un983530 983577983548e983588t983534983587983539 o983547 d983535983545e983588 l983547983535 983577u983530 983550983587us 983536983547983535 983590eacutepo983539983592r983530983555 983578983548an983591 983534983537 983580ur983527 fi983539983535 983588rsquoil 983534983539983588983535s983545e Srsquoil 983530983543983546 v983542983580i983593983530n983545 983529l983587983577ueacute di983545983530983588 l983548i 983577983547983589 983550o983547s 983580983536983537ez 983542983530983550983587ir 983549983586983546r983589 983579o983541983534983589 et 983530983543983588983580ye983555 983592983530 c983587983538983541re983539983592r983530 983579983589 983578u983534 l983589 9835316ne

Introduction agrave lrsquoergonomie

Pas besoin de reacuteinventer la roue DIY

80

Cornelia Laros

Il existe des bonnes pratiques qui vous eacuteviteront de reacuteinventer la roue Utilisez des laquo design patterns raquo pour concevoir vos interfaces

Renseignez vous sur la Gestalt Theorie pour agencer vos pages

Utilisez les critegraveres de Bastien et Scapin pour trouver des deacutefauts eacutevidents avant de tester vous en tirerez des enseignements plus inteacuteressants

Ma983534s ccedila crsquoes983545 983541983586983548r u983539983530 983580u983546r983530 983559983587i983588

Introduction agrave lrsquoergonomie

Quizz time

81

Cornelia Laros

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

82

Cornelia Laros

1 c Fonctionnel

2 a Fiable

3 d Accessible

4 b Intuitif

5 e Plaisant

6 f Porteur de sens

text

F - Quel besoin ai-je oublieacute dans la question preacuteceacutedente

83

Cornelia Laros

Uti983536983534983588983580b983536e

Introduction agrave lrsquoergonomie

Tests DIY84

Cornelia Laros

Reacutedigez la proceacutedure pour tester un de vos projets drsquoIHM avec le test de votre choix perception arborescence ou utilisabiliteacute

Notez la question que vous vous posez et la question que vous allez poser

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

text

Gestion des erreurs62

Cornelia Laros

text

Signifiance des codes et deacutenominations

63

Cornelia Laros

text

Homogeacuteneacuteiteacute - coheacuterence64

Cornelia Laros

text

Homogeacuteneacuteiteacute - Distinction65

Cornelia Laros

text

Compatibiliteacute66

Cornelia Laros

text

Compatibiliteacute67

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction68

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction69

Cornelia Laros

text

Gestalt Theorie70

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Gestalt Theorie71

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Dark patterns72

Cornelia Laros

Introduction agrave lrsquoergonomie

A vous de jouer

73

Cornelia Laros

Introduction agrave lrsquoergonomie

Outils de prototypages DIY74

Cornelia Laros

Low tech papier + crayons post-its cartes agrave jouer

Gratuit en ligne Invision app Moqups UXPin

Mac Sketch Balsamiq Mockups Axure

PC Axure Balsamiq

Mobile Prototyping on Paper

Ap983540983590en983530983555 983592983589 no983547983549983589983537le983543 983581h983586983543983589983588

Introduction agrave lrsquoergonomie

Test de perception DIY75

Cornelia Laros

La premiegravere impression qursquoun utilisateur se fait de votre IHM va influencer tous ses jugements ulteacuterieurs Crsquoest lrsquoeffet de halo

bull Un utilisateur qui a une premiegravere impression positive de votre appli passera plus facilement outre les bugs

bull Une premiegravere impression negative rendra lrsquoutilisateur plus critique vis agrave vis de deacutetails qui confirment son jugement

Cel983527 983538983580983590c983532e 983527983548983588si 983527983549983589983581 vo983543 983586983590983580ux 983591rsquoex983527983538983589983585s vo983543 983530983585t983542983589983546i983530n983543 983592rsquoem983528983527983548983581he 983530983545 983550983587s 983542e983585d983530983555-vo983547983543 983581l983535e983539983546s

Introduction agrave lrsquoergonomie

Test de perception DIY76

Cornelia Laros

Montrer votre prototype agrave quelqursquoun pendant 5 secondes

Demandez-lui

bull Ce qursquoil a vu

bull Ce qursquoil a compris de ce qursquoil a vu

bull Ce qui lrsquoa surpris ou marqueacute

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY77

Cornelia Laros

Les difficulteacutes de navigation se produisent souvent dans les niveaux les plus haut de votre structure de contenu Vous pouvez veacuterifier facilement si la classification logique pour vous lrsquoest aussi pour vos utilisateurs

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY78

Cornelia Laros

Lister trois (max) niveaux de profondeur de votre contenu structureacute Masquez ensuite les contenus de niveau plus bas Utilisez par exemple les groupements de lignes dans excel pour creacuteer des pliers-deacutepliers ou imprimer la liste sur une feuille que vous pliez pour masquer certaines parties

Demandez agrave un utilisateur de vous dire ougrave il penserait trouver un contenu bien preacutecis en preacutecisant qursquoil nrsquoy a pas de bonne reacuteponse

Notez srsquoil va chercher lagrave ougrave vous vous y attendiez ougrave il a heacutesiteacute et ce qursquoil a fini par choisir pour vous aider agrave rendre la navigation plus intuitive

Introduction agrave lrsquoergonomie

Test drsquoutilisabiliteacute DIY79

Cornelia Laros

A chaque nouvelle fonctionnaliteacute ajouteacutee demandez agrave quelqursquoun qui ne connait pas le projet de srsquoen servir Proposez lui une seule tacircche geacuteneacuterique agrave accomplir avec la fonctionnaliteacute

Exemple Tu veux prendre un rendez-vous avec un meacutedecin sur ce site montres-moi comment tu ferais en commentant agrave haute voix

Le plus important ici crsquoest de ne pas reacuteagir agrave ce qursquoil fait mais simplement le regarder faire sans lrsquoaider mecircme srsquoil est bloqueacute

Srsquoil 983540983586983588983589 de983543 983578983547983589s983545i983586983585s reacutepo983539983592983530z 983540983580983590 un983530 983577983548e983588t983534983587983539 o983547 d983535983545e983588 l983547983535 983577u983530 983550983587us 983536983547983535 983590eacutepo983539983592r983530983555 983578983548an983591 983534983537 983580ur983527 fi983539983535 983588rsquoil 983534983539983588983535s983545e Srsquoil 983530983543983546 v983542983580i983593983530n983545 983529l983587983577ueacute di983545983530983588 l983548i 983577983547983589 983550o983547s 983580983536983537ez 983542983530983550983587ir 983549983586983546r983589 983579o983541983534983589 et 983530983543983588983580ye983555 983592983530 c983587983538983541re983539983592r983530 983579983589 983578u983534 l983589 9835316ne

Introduction agrave lrsquoergonomie

Pas besoin de reacuteinventer la roue DIY

80

Cornelia Laros

Il existe des bonnes pratiques qui vous eacuteviteront de reacuteinventer la roue Utilisez des laquo design patterns raquo pour concevoir vos interfaces

Renseignez vous sur la Gestalt Theorie pour agencer vos pages

Utilisez les critegraveres de Bastien et Scapin pour trouver des deacutefauts eacutevidents avant de tester vous en tirerez des enseignements plus inteacuteressants

Ma983534s ccedila crsquoes983545 983541983586983548r u983539983530 983580u983546r983530 983559983587i983588

Introduction agrave lrsquoergonomie

Quizz time

81

Cornelia Laros

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

82

Cornelia Laros

1 c Fonctionnel

2 a Fiable

3 d Accessible

4 b Intuitif

5 e Plaisant

6 f Porteur de sens

text

F - Quel besoin ai-je oublieacute dans la question preacuteceacutedente

83

Cornelia Laros

Uti983536983534983588983580b983536e

Introduction agrave lrsquoergonomie

Tests DIY84

Cornelia Laros

Reacutedigez la proceacutedure pour tester un de vos projets drsquoIHM avec le test de votre choix perception arborescence ou utilisabiliteacute

Notez la question que vous vous posez et la question que vous allez poser

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

text

Signifiance des codes et deacutenominations

63

Cornelia Laros

text

Homogeacuteneacuteiteacute - coheacuterence64

Cornelia Laros

text

Homogeacuteneacuteiteacute - Distinction65

Cornelia Laros

text

Compatibiliteacute66

Cornelia Laros

text

Compatibiliteacute67

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction68

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction69

Cornelia Laros

text

Gestalt Theorie70

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Gestalt Theorie71

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Dark patterns72

Cornelia Laros

Introduction agrave lrsquoergonomie

A vous de jouer

73

Cornelia Laros

Introduction agrave lrsquoergonomie

Outils de prototypages DIY74

Cornelia Laros

Low tech papier + crayons post-its cartes agrave jouer

Gratuit en ligne Invision app Moqups UXPin

Mac Sketch Balsamiq Mockups Axure

PC Axure Balsamiq

Mobile Prototyping on Paper

Ap983540983590en983530983555 983592983589 no983547983549983589983537le983543 983581h983586983543983589983588

Introduction agrave lrsquoergonomie

Test de perception DIY75

Cornelia Laros

La premiegravere impression qursquoun utilisateur se fait de votre IHM va influencer tous ses jugements ulteacuterieurs Crsquoest lrsquoeffet de halo

bull Un utilisateur qui a une premiegravere impression positive de votre appli passera plus facilement outre les bugs

bull Une premiegravere impression negative rendra lrsquoutilisateur plus critique vis agrave vis de deacutetails qui confirment son jugement

Cel983527 983538983580983590c983532e 983527983548983588si 983527983549983589983581 vo983543 983586983590983580ux 983591rsquoex983527983538983589983585s vo983543 983530983585t983542983589983546i983530n983543 983592rsquoem983528983527983548983581he 983530983545 983550983587s 983542e983585d983530983555-vo983547983543 983581l983535e983539983546s

Introduction agrave lrsquoergonomie

Test de perception DIY76

Cornelia Laros

Montrer votre prototype agrave quelqursquoun pendant 5 secondes

Demandez-lui

bull Ce qursquoil a vu

bull Ce qursquoil a compris de ce qursquoil a vu

bull Ce qui lrsquoa surpris ou marqueacute

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY77

Cornelia Laros

Les difficulteacutes de navigation se produisent souvent dans les niveaux les plus haut de votre structure de contenu Vous pouvez veacuterifier facilement si la classification logique pour vous lrsquoest aussi pour vos utilisateurs

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY78

Cornelia Laros

Lister trois (max) niveaux de profondeur de votre contenu structureacute Masquez ensuite les contenus de niveau plus bas Utilisez par exemple les groupements de lignes dans excel pour creacuteer des pliers-deacutepliers ou imprimer la liste sur une feuille que vous pliez pour masquer certaines parties

Demandez agrave un utilisateur de vous dire ougrave il penserait trouver un contenu bien preacutecis en preacutecisant qursquoil nrsquoy a pas de bonne reacuteponse

Notez srsquoil va chercher lagrave ougrave vous vous y attendiez ougrave il a heacutesiteacute et ce qursquoil a fini par choisir pour vous aider agrave rendre la navigation plus intuitive

Introduction agrave lrsquoergonomie

Test drsquoutilisabiliteacute DIY79

Cornelia Laros

A chaque nouvelle fonctionnaliteacute ajouteacutee demandez agrave quelqursquoun qui ne connait pas le projet de srsquoen servir Proposez lui une seule tacircche geacuteneacuterique agrave accomplir avec la fonctionnaliteacute

Exemple Tu veux prendre un rendez-vous avec un meacutedecin sur ce site montres-moi comment tu ferais en commentant agrave haute voix

Le plus important ici crsquoest de ne pas reacuteagir agrave ce qursquoil fait mais simplement le regarder faire sans lrsquoaider mecircme srsquoil est bloqueacute

Srsquoil 983540983586983588983589 de983543 983578983547983589s983545i983586983585s reacutepo983539983592983530z 983540983580983590 un983530 983577983548e983588t983534983587983539 o983547 d983535983545e983588 l983547983535 983577u983530 983550983587us 983536983547983535 983590eacutepo983539983592r983530983555 983578983548an983591 983534983537 983580ur983527 fi983539983535 983588rsquoil 983534983539983588983535s983545e Srsquoil 983530983543983546 v983542983580i983593983530n983545 983529l983587983577ueacute di983545983530983588 l983548i 983577983547983589 983550o983547s 983580983536983537ez 983542983530983550983587ir 983549983586983546r983589 983579o983541983534983589 et 983530983543983588983580ye983555 983592983530 c983587983538983541re983539983592r983530 983579983589 983578u983534 l983589 9835316ne

Introduction agrave lrsquoergonomie

Pas besoin de reacuteinventer la roue DIY

80

Cornelia Laros

Il existe des bonnes pratiques qui vous eacuteviteront de reacuteinventer la roue Utilisez des laquo design patterns raquo pour concevoir vos interfaces

Renseignez vous sur la Gestalt Theorie pour agencer vos pages

Utilisez les critegraveres de Bastien et Scapin pour trouver des deacutefauts eacutevidents avant de tester vous en tirerez des enseignements plus inteacuteressants

Ma983534s ccedila crsquoes983545 983541983586983548r u983539983530 983580u983546r983530 983559983587i983588

Introduction agrave lrsquoergonomie

Quizz time

81

Cornelia Laros

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

82

Cornelia Laros

1 c Fonctionnel

2 a Fiable

3 d Accessible

4 b Intuitif

5 e Plaisant

6 f Porteur de sens

text

F - Quel besoin ai-je oublieacute dans la question preacuteceacutedente

83

Cornelia Laros

Uti983536983534983588983580b983536e

Introduction agrave lrsquoergonomie

Tests DIY84

Cornelia Laros

Reacutedigez la proceacutedure pour tester un de vos projets drsquoIHM avec le test de votre choix perception arborescence ou utilisabiliteacute

Notez la question que vous vous posez et la question que vous allez poser

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

text

Homogeacuteneacuteiteacute - coheacuterence64

Cornelia Laros

text

Homogeacuteneacuteiteacute - Distinction65

Cornelia Laros

text

Compatibiliteacute66

Cornelia Laros

text

Compatibiliteacute67

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction68

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction69

Cornelia Laros

text

Gestalt Theorie70

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Gestalt Theorie71

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Dark patterns72

Cornelia Laros

Introduction agrave lrsquoergonomie

A vous de jouer

73

Cornelia Laros

Introduction agrave lrsquoergonomie

Outils de prototypages DIY74

Cornelia Laros

Low tech papier + crayons post-its cartes agrave jouer

Gratuit en ligne Invision app Moqups UXPin

Mac Sketch Balsamiq Mockups Axure

PC Axure Balsamiq

Mobile Prototyping on Paper

Ap983540983590en983530983555 983592983589 no983547983549983589983537le983543 983581h983586983543983589983588

Introduction agrave lrsquoergonomie

Test de perception DIY75

Cornelia Laros

La premiegravere impression qursquoun utilisateur se fait de votre IHM va influencer tous ses jugements ulteacuterieurs Crsquoest lrsquoeffet de halo

bull Un utilisateur qui a une premiegravere impression positive de votre appli passera plus facilement outre les bugs

bull Une premiegravere impression negative rendra lrsquoutilisateur plus critique vis agrave vis de deacutetails qui confirment son jugement

Cel983527 983538983580983590c983532e 983527983548983588si 983527983549983589983581 vo983543 983586983590983580ux 983591rsquoex983527983538983589983585s vo983543 983530983585t983542983589983546i983530n983543 983592rsquoem983528983527983548983581he 983530983545 983550983587s 983542e983585d983530983555-vo983547983543 983581l983535e983539983546s

Introduction agrave lrsquoergonomie

Test de perception DIY76

Cornelia Laros

Montrer votre prototype agrave quelqursquoun pendant 5 secondes

Demandez-lui

bull Ce qursquoil a vu

bull Ce qursquoil a compris de ce qursquoil a vu

bull Ce qui lrsquoa surpris ou marqueacute

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY77

Cornelia Laros

Les difficulteacutes de navigation se produisent souvent dans les niveaux les plus haut de votre structure de contenu Vous pouvez veacuterifier facilement si la classification logique pour vous lrsquoest aussi pour vos utilisateurs

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY78

Cornelia Laros

Lister trois (max) niveaux de profondeur de votre contenu structureacute Masquez ensuite les contenus de niveau plus bas Utilisez par exemple les groupements de lignes dans excel pour creacuteer des pliers-deacutepliers ou imprimer la liste sur une feuille que vous pliez pour masquer certaines parties

Demandez agrave un utilisateur de vous dire ougrave il penserait trouver un contenu bien preacutecis en preacutecisant qursquoil nrsquoy a pas de bonne reacuteponse

Notez srsquoil va chercher lagrave ougrave vous vous y attendiez ougrave il a heacutesiteacute et ce qursquoil a fini par choisir pour vous aider agrave rendre la navigation plus intuitive

Introduction agrave lrsquoergonomie

Test drsquoutilisabiliteacute DIY79

Cornelia Laros

A chaque nouvelle fonctionnaliteacute ajouteacutee demandez agrave quelqursquoun qui ne connait pas le projet de srsquoen servir Proposez lui une seule tacircche geacuteneacuterique agrave accomplir avec la fonctionnaliteacute

Exemple Tu veux prendre un rendez-vous avec un meacutedecin sur ce site montres-moi comment tu ferais en commentant agrave haute voix

Le plus important ici crsquoest de ne pas reacuteagir agrave ce qursquoil fait mais simplement le regarder faire sans lrsquoaider mecircme srsquoil est bloqueacute

Srsquoil 983540983586983588983589 de983543 983578983547983589s983545i983586983585s reacutepo983539983592983530z 983540983580983590 un983530 983577983548e983588t983534983587983539 o983547 d983535983545e983588 l983547983535 983577u983530 983550983587us 983536983547983535 983590eacutepo983539983592r983530983555 983578983548an983591 983534983537 983580ur983527 fi983539983535 983588rsquoil 983534983539983588983535s983545e Srsquoil 983530983543983546 v983542983580i983593983530n983545 983529l983587983577ueacute di983545983530983588 l983548i 983577983547983589 983550o983547s 983580983536983537ez 983542983530983550983587ir 983549983586983546r983589 983579o983541983534983589 et 983530983543983588983580ye983555 983592983530 c983587983538983541re983539983592r983530 983579983589 983578u983534 l983589 9835316ne

Introduction agrave lrsquoergonomie

Pas besoin de reacuteinventer la roue DIY

80

Cornelia Laros

Il existe des bonnes pratiques qui vous eacuteviteront de reacuteinventer la roue Utilisez des laquo design patterns raquo pour concevoir vos interfaces

Renseignez vous sur la Gestalt Theorie pour agencer vos pages

Utilisez les critegraveres de Bastien et Scapin pour trouver des deacutefauts eacutevidents avant de tester vous en tirerez des enseignements plus inteacuteressants

Ma983534s ccedila crsquoes983545 983541983586983548r u983539983530 983580u983546r983530 983559983587i983588

Introduction agrave lrsquoergonomie

Quizz time

81

Cornelia Laros

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

82

Cornelia Laros

1 c Fonctionnel

2 a Fiable

3 d Accessible

4 b Intuitif

5 e Plaisant

6 f Porteur de sens

text

F - Quel besoin ai-je oublieacute dans la question preacuteceacutedente

83

Cornelia Laros

Uti983536983534983588983580b983536e

Introduction agrave lrsquoergonomie

Tests DIY84

Cornelia Laros

Reacutedigez la proceacutedure pour tester un de vos projets drsquoIHM avec le test de votre choix perception arborescence ou utilisabiliteacute

Notez la question que vous vous posez et la question que vous allez poser

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

text

Homogeacuteneacuteiteacute - Distinction65

Cornelia Laros

text

Compatibiliteacute66

Cornelia Laros

text

Compatibiliteacute67

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction68

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction69

Cornelia Laros

text

Gestalt Theorie70

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Gestalt Theorie71

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Dark patterns72

Cornelia Laros

Introduction agrave lrsquoergonomie

A vous de jouer

73

Cornelia Laros

Introduction agrave lrsquoergonomie

Outils de prototypages DIY74

Cornelia Laros

Low tech papier + crayons post-its cartes agrave jouer

Gratuit en ligne Invision app Moqups UXPin

Mac Sketch Balsamiq Mockups Axure

PC Axure Balsamiq

Mobile Prototyping on Paper

Ap983540983590en983530983555 983592983589 no983547983549983589983537le983543 983581h983586983543983589983588

Introduction agrave lrsquoergonomie

Test de perception DIY75

Cornelia Laros

La premiegravere impression qursquoun utilisateur se fait de votre IHM va influencer tous ses jugements ulteacuterieurs Crsquoest lrsquoeffet de halo

bull Un utilisateur qui a une premiegravere impression positive de votre appli passera plus facilement outre les bugs

bull Une premiegravere impression negative rendra lrsquoutilisateur plus critique vis agrave vis de deacutetails qui confirment son jugement

Cel983527 983538983580983590c983532e 983527983548983588si 983527983549983589983581 vo983543 983586983590983580ux 983591rsquoex983527983538983589983585s vo983543 983530983585t983542983589983546i983530n983543 983592rsquoem983528983527983548983581he 983530983545 983550983587s 983542e983585d983530983555-vo983547983543 983581l983535e983539983546s

Introduction agrave lrsquoergonomie

Test de perception DIY76

Cornelia Laros

Montrer votre prototype agrave quelqursquoun pendant 5 secondes

Demandez-lui

bull Ce qursquoil a vu

bull Ce qursquoil a compris de ce qursquoil a vu

bull Ce qui lrsquoa surpris ou marqueacute

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY77

Cornelia Laros

Les difficulteacutes de navigation se produisent souvent dans les niveaux les plus haut de votre structure de contenu Vous pouvez veacuterifier facilement si la classification logique pour vous lrsquoest aussi pour vos utilisateurs

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY78

Cornelia Laros

Lister trois (max) niveaux de profondeur de votre contenu structureacute Masquez ensuite les contenus de niveau plus bas Utilisez par exemple les groupements de lignes dans excel pour creacuteer des pliers-deacutepliers ou imprimer la liste sur une feuille que vous pliez pour masquer certaines parties

Demandez agrave un utilisateur de vous dire ougrave il penserait trouver un contenu bien preacutecis en preacutecisant qursquoil nrsquoy a pas de bonne reacuteponse

Notez srsquoil va chercher lagrave ougrave vous vous y attendiez ougrave il a heacutesiteacute et ce qursquoil a fini par choisir pour vous aider agrave rendre la navigation plus intuitive

Introduction agrave lrsquoergonomie

Test drsquoutilisabiliteacute DIY79

Cornelia Laros

A chaque nouvelle fonctionnaliteacute ajouteacutee demandez agrave quelqursquoun qui ne connait pas le projet de srsquoen servir Proposez lui une seule tacircche geacuteneacuterique agrave accomplir avec la fonctionnaliteacute

Exemple Tu veux prendre un rendez-vous avec un meacutedecin sur ce site montres-moi comment tu ferais en commentant agrave haute voix

Le plus important ici crsquoest de ne pas reacuteagir agrave ce qursquoil fait mais simplement le regarder faire sans lrsquoaider mecircme srsquoil est bloqueacute

Srsquoil 983540983586983588983589 de983543 983578983547983589s983545i983586983585s reacutepo983539983592983530z 983540983580983590 un983530 983577983548e983588t983534983587983539 o983547 d983535983545e983588 l983547983535 983577u983530 983550983587us 983536983547983535 983590eacutepo983539983592r983530983555 983578983548an983591 983534983537 983580ur983527 fi983539983535 983588rsquoil 983534983539983588983535s983545e Srsquoil 983530983543983546 v983542983580i983593983530n983545 983529l983587983577ueacute di983545983530983588 l983548i 983577983547983589 983550o983547s 983580983536983537ez 983542983530983550983587ir 983549983586983546r983589 983579o983541983534983589 et 983530983543983588983580ye983555 983592983530 c983587983538983541re983539983592r983530 983579983589 983578u983534 l983589 9835316ne

Introduction agrave lrsquoergonomie

Pas besoin de reacuteinventer la roue DIY

80

Cornelia Laros

Il existe des bonnes pratiques qui vous eacuteviteront de reacuteinventer la roue Utilisez des laquo design patterns raquo pour concevoir vos interfaces

Renseignez vous sur la Gestalt Theorie pour agencer vos pages

Utilisez les critegraveres de Bastien et Scapin pour trouver des deacutefauts eacutevidents avant de tester vous en tirerez des enseignements plus inteacuteressants

Ma983534s ccedila crsquoes983545 983541983586983548r u983539983530 983580u983546r983530 983559983587i983588

Introduction agrave lrsquoergonomie

Quizz time

81

Cornelia Laros

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

82

Cornelia Laros

1 c Fonctionnel

2 a Fiable

3 d Accessible

4 b Intuitif

5 e Plaisant

6 f Porteur de sens

text

F - Quel besoin ai-je oublieacute dans la question preacuteceacutedente

83

Cornelia Laros

Uti983536983534983588983580b983536e

Introduction agrave lrsquoergonomie

Tests DIY84

Cornelia Laros

Reacutedigez la proceacutedure pour tester un de vos projets drsquoIHM avec le test de votre choix perception arborescence ou utilisabiliteacute

Notez la question que vous vous posez et la question que vous allez poser

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

text

Compatibiliteacute66

Cornelia Laros

text

Compatibiliteacute67

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction68

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction69

Cornelia Laros

text

Gestalt Theorie70

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Gestalt Theorie71

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Dark patterns72

Cornelia Laros

Introduction agrave lrsquoergonomie

A vous de jouer

73

Cornelia Laros

Introduction agrave lrsquoergonomie

Outils de prototypages DIY74

Cornelia Laros

Low tech papier + crayons post-its cartes agrave jouer

Gratuit en ligne Invision app Moqups UXPin

Mac Sketch Balsamiq Mockups Axure

PC Axure Balsamiq

Mobile Prototyping on Paper

Ap983540983590en983530983555 983592983589 no983547983549983589983537le983543 983581h983586983543983589983588

Introduction agrave lrsquoergonomie

Test de perception DIY75

Cornelia Laros

La premiegravere impression qursquoun utilisateur se fait de votre IHM va influencer tous ses jugements ulteacuterieurs Crsquoest lrsquoeffet de halo

bull Un utilisateur qui a une premiegravere impression positive de votre appli passera plus facilement outre les bugs

bull Une premiegravere impression negative rendra lrsquoutilisateur plus critique vis agrave vis de deacutetails qui confirment son jugement

Cel983527 983538983580983590c983532e 983527983548983588si 983527983549983589983581 vo983543 983586983590983580ux 983591rsquoex983527983538983589983585s vo983543 983530983585t983542983589983546i983530n983543 983592rsquoem983528983527983548983581he 983530983545 983550983587s 983542e983585d983530983555-vo983547983543 983581l983535e983539983546s

Introduction agrave lrsquoergonomie

Test de perception DIY76

Cornelia Laros

Montrer votre prototype agrave quelqursquoun pendant 5 secondes

Demandez-lui

bull Ce qursquoil a vu

bull Ce qursquoil a compris de ce qursquoil a vu

bull Ce qui lrsquoa surpris ou marqueacute

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY77

Cornelia Laros

Les difficulteacutes de navigation se produisent souvent dans les niveaux les plus haut de votre structure de contenu Vous pouvez veacuterifier facilement si la classification logique pour vous lrsquoest aussi pour vos utilisateurs

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY78

Cornelia Laros

Lister trois (max) niveaux de profondeur de votre contenu structureacute Masquez ensuite les contenus de niveau plus bas Utilisez par exemple les groupements de lignes dans excel pour creacuteer des pliers-deacutepliers ou imprimer la liste sur une feuille que vous pliez pour masquer certaines parties

Demandez agrave un utilisateur de vous dire ougrave il penserait trouver un contenu bien preacutecis en preacutecisant qursquoil nrsquoy a pas de bonne reacuteponse

Notez srsquoil va chercher lagrave ougrave vous vous y attendiez ougrave il a heacutesiteacute et ce qursquoil a fini par choisir pour vous aider agrave rendre la navigation plus intuitive

Introduction agrave lrsquoergonomie

Test drsquoutilisabiliteacute DIY79

Cornelia Laros

A chaque nouvelle fonctionnaliteacute ajouteacutee demandez agrave quelqursquoun qui ne connait pas le projet de srsquoen servir Proposez lui une seule tacircche geacuteneacuterique agrave accomplir avec la fonctionnaliteacute

Exemple Tu veux prendre un rendez-vous avec un meacutedecin sur ce site montres-moi comment tu ferais en commentant agrave haute voix

Le plus important ici crsquoest de ne pas reacuteagir agrave ce qursquoil fait mais simplement le regarder faire sans lrsquoaider mecircme srsquoil est bloqueacute

Srsquoil 983540983586983588983589 de983543 983578983547983589s983545i983586983585s reacutepo983539983592983530z 983540983580983590 un983530 983577983548e983588t983534983587983539 o983547 d983535983545e983588 l983547983535 983577u983530 983550983587us 983536983547983535 983590eacutepo983539983592r983530983555 983578983548an983591 983534983537 983580ur983527 fi983539983535 983588rsquoil 983534983539983588983535s983545e Srsquoil 983530983543983546 v983542983580i983593983530n983545 983529l983587983577ueacute di983545983530983588 l983548i 983577983547983589 983550o983547s 983580983536983537ez 983542983530983550983587ir 983549983586983546r983589 983579o983541983534983589 et 983530983543983588983580ye983555 983592983530 c983587983538983541re983539983592r983530 983579983589 983578u983534 l983589 9835316ne

Introduction agrave lrsquoergonomie

Pas besoin de reacuteinventer la roue DIY

80

Cornelia Laros

Il existe des bonnes pratiques qui vous eacuteviteront de reacuteinventer la roue Utilisez des laquo design patterns raquo pour concevoir vos interfaces

Renseignez vous sur la Gestalt Theorie pour agencer vos pages

Utilisez les critegraveres de Bastien et Scapin pour trouver des deacutefauts eacutevidents avant de tester vous en tirerez des enseignements plus inteacuteressants

Ma983534s ccedila crsquoes983545 983541983586983548r u983539983530 983580u983546r983530 983559983587i983588

Introduction agrave lrsquoergonomie

Quizz time

81

Cornelia Laros

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

82

Cornelia Laros

1 c Fonctionnel

2 a Fiable

3 d Accessible

4 b Intuitif

5 e Plaisant

6 f Porteur de sens

text

F - Quel besoin ai-je oublieacute dans la question preacuteceacutedente

83

Cornelia Laros

Uti983536983534983588983580b983536e

Introduction agrave lrsquoergonomie

Tests DIY84

Cornelia Laros

Reacutedigez la proceacutedure pour tester un de vos projets drsquoIHM avec le test de votre choix perception arborescence ou utilisabiliteacute

Notez la question que vous vous posez et la question que vous allez poser

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

text

Compatibiliteacute67

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction68

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction69

Cornelia Laros

text

Gestalt Theorie70

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Gestalt Theorie71

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Dark patterns72

Cornelia Laros

Introduction agrave lrsquoergonomie

A vous de jouer

73

Cornelia Laros

Introduction agrave lrsquoergonomie

Outils de prototypages DIY74

Cornelia Laros

Low tech papier + crayons post-its cartes agrave jouer

Gratuit en ligne Invision app Moqups UXPin

Mac Sketch Balsamiq Mockups Axure

PC Axure Balsamiq

Mobile Prototyping on Paper

Ap983540983590en983530983555 983592983589 no983547983549983589983537le983543 983581h983586983543983589983588

Introduction agrave lrsquoergonomie

Test de perception DIY75

Cornelia Laros

La premiegravere impression qursquoun utilisateur se fait de votre IHM va influencer tous ses jugements ulteacuterieurs Crsquoest lrsquoeffet de halo

bull Un utilisateur qui a une premiegravere impression positive de votre appli passera plus facilement outre les bugs

bull Une premiegravere impression negative rendra lrsquoutilisateur plus critique vis agrave vis de deacutetails qui confirment son jugement

Cel983527 983538983580983590c983532e 983527983548983588si 983527983549983589983581 vo983543 983586983590983580ux 983591rsquoex983527983538983589983585s vo983543 983530983585t983542983589983546i983530n983543 983592rsquoem983528983527983548983581he 983530983545 983550983587s 983542e983585d983530983555-vo983547983543 983581l983535e983539983546s

Introduction agrave lrsquoergonomie

Test de perception DIY76

Cornelia Laros

Montrer votre prototype agrave quelqursquoun pendant 5 secondes

Demandez-lui

bull Ce qursquoil a vu

bull Ce qursquoil a compris de ce qursquoil a vu

bull Ce qui lrsquoa surpris ou marqueacute

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY77

Cornelia Laros

Les difficulteacutes de navigation se produisent souvent dans les niveaux les plus haut de votre structure de contenu Vous pouvez veacuterifier facilement si la classification logique pour vous lrsquoest aussi pour vos utilisateurs

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY78

Cornelia Laros

Lister trois (max) niveaux de profondeur de votre contenu structureacute Masquez ensuite les contenus de niveau plus bas Utilisez par exemple les groupements de lignes dans excel pour creacuteer des pliers-deacutepliers ou imprimer la liste sur une feuille que vous pliez pour masquer certaines parties

Demandez agrave un utilisateur de vous dire ougrave il penserait trouver un contenu bien preacutecis en preacutecisant qursquoil nrsquoy a pas de bonne reacuteponse

Notez srsquoil va chercher lagrave ougrave vous vous y attendiez ougrave il a heacutesiteacute et ce qursquoil a fini par choisir pour vous aider agrave rendre la navigation plus intuitive

Introduction agrave lrsquoergonomie

Test drsquoutilisabiliteacute DIY79

Cornelia Laros

A chaque nouvelle fonctionnaliteacute ajouteacutee demandez agrave quelqursquoun qui ne connait pas le projet de srsquoen servir Proposez lui une seule tacircche geacuteneacuterique agrave accomplir avec la fonctionnaliteacute

Exemple Tu veux prendre un rendez-vous avec un meacutedecin sur ce site montres-moi comment tu ferais en commentant agrave haute voix

Le plus important ici crsquoest de ne pas reacuteagir agrave ce qursquoil fait mais simplement le regarder faire sans lrsquoaider mecircme srsquoil est bloqueacute

Srsquoil 983540983586983588983589 de983543 983578983547983589s983545i983586983585s reacutepo983539983592983530z 983540983580983590 un983530 983577983548e983588t983534983587983539 o983547 d983535983545e983588 l983547983535 983577u983530 983550983587us 983536983547983535 983590eacutepo983539983592r983530983555 983578983548an983591 983534983537 983580ur983527 fi983539983535 983588rsquoil 983534983539983588983535s983545e Srsquoil 983530983543983546 v983542983580i983593983530n983545 983529l983587983577ueacute di983545983530983588 l983548i 983577983547983589 983550o983547s 983580983536983537ez 983542983530983550983587ir 983549983586983546r983589 983579o983541983534983589 et 983530983543983588983580ye983555 983592983530 c983587983538983541re983539983592r983530 983579983589 983578u983534 l983589 9835316ne

Introduction agrave lrsquoergonomie

Pas besoin de reacuteinventer la roue DIY

80

Cornelia Laros

Il existe des bonnes pratiques qui vous eacuteviteront de reacuteinventer la roue Utilisez des laquo design patterns raquo pour concevoir vos interfaces

Renseignez vous sur la Gestalt Theorie pour agencer vos pages

Utilisez les critegraveres de Bastien et Scapin pour trouver des deacutefauts eacutevidents avant de tester vous en tirerez des enseignements plus inteacuteressants

Ma983534s ccedila crsquoes983545 983541983586983548r u983539983530 983580u983546r983530 983559983587i983588

Introduction agrave lrsquoergonomie

Quizz time

81

Cornelia Laros

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

82

Cornelia Laros

1 c Fonctionnel

2 a Fiable

3 d Accessible

4 b Intuitif

5 e Plaisant

6 f Porteur de sens

text

F - Quel besoin ai-je oublieacute dans la question preacuteceacutedente

83

Cornelia Laros

Uti983536983534983588983580b983536e

Introduction agrave lrsquoergonomie

Tests DIY84

Cornelia Laros

Reacutedigez la proceacutedure pour tester un de vos projets drsquoIHM avec le test de votre choix perception arborescence ou utilisabiliteacute

Notez la question que vous vous posez et la question que vous allez poser

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

Introduction agrave lrsquoergonomie

Regroupement- distinction68

Cornelia Laros

Introduction agrave lrsquoergonomie

Regroupement- distinction69

Cornelia Laros

text

Gestalt Theorie70

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Gestalt Theorie71

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Dark patterns72

Cornelia Laros

Introduction agrave lrsquoergonomie

A vous de jouer

73

Cornelia Laros

Introduction agrave lrsquoergonomie

Outils de prototypages DIY74

Cornelia Laros

Low tech papier + crayons post-its cartes agrave jouer

Gratuit en ligne Invision app Moqups UXPin

Mac Sketch Balsamiq Mockups Axure

PC Axure Balsamiq

Mobile Prototyping on Paper

Ap983540983590en983530983555 983592983589 no983547983549983589983537le983543 983581h983586983543983589983588

Introduction agrave lrsquoergonomie

Test de perception DIY75

Cornelia Laros

La premiegravere impression qursquoun utilisateur se fait de votre IHM va influencer tous ses jugements ulteacuterieurs Crsquoest lrsquoeffet de halo

bull Un utilisateur qui a une premiegravere impression positive de votre appli passera plus facilement outre les bugs

bull Une premiegravere impression negative rendra lrsquoutilisateur plus critique vis agrave vis de deacutetails qui confirment son jugement

Cel983527 983538983580983590c983532e 983527983548983588si 983527983549983589983581 vo983543 983586983590983580ux 983591rsquoex983527983538983589983585s vo983543 983530983585t983542983589983546i983530n983543 983592rsquoem983528983527983548983581he 983530983545 983550983587s 983542e983585d983530983555-vo983547983543 983581l983535e983539983546s

Introduction agrave lrsquoergonomie

Test de perception DIY76

Cornelia Laros

Montrer votre prototype agrave quelqursquoun pendant 5 secondes

Demandez-lui

bull Ce qursquoil a vu

bull Ce qursquoil a compris de ce qursquoil a vu

bull Ce qui lrsquoa surpris ou marqueacute

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY77

Cornelia Laros

Les difficulteacutes de navigation se produisent souvent dans les niveaux les plus haut de votre structure de contenu Vous pouvez veacuterifier facilement si la classification logique pour vous lrsquoest aussi pour vos utilisateurs

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY78

Cornelia Laros

Lister trois (max) niveaux de profondeur de votre contenu structureacute Masquez ensuite les contenus de niveau plus bas Utilisez par exemple les groupements de lignes dans excel pour creacuteer des pliers-deacutepliers ou imprimer la liste sur une feuille que vous pliez pour masquer certaines parties

Demandez agrave un utilisateur de vous dire ougrave il penserait trouver un contenu bien preacutecis en preacutecisant qursquoil nrsquoy a pas de bonne reacuteponse

Notez srsquoil va chercher lagrave ougrave vous vous y attendiez ougrave il a heacutesiteacute et ce qursquoil a fini par choisir pour vous aider agrave rendre la navigation plus intuitive

Introduction agrave lrsquoergonomie

Test drsquoutilisabiliteacute DIY79

Cornelia Laros

A chaque nouvelle fonctionnaliteacute ajouteacutee demandez agrave quelqursquoun qui ne connait pas le projet de srsquoen servir Proposez lui une seule tacircche geacuteneacuterique agrave accomplir avec la fonctionnaliteacute

Exemple Tu veux prendre un rendez-vous avec un meacutedecin sur ce site montres-moi comment tu ferais en commentant agrave haute voix

Le plus important ici crsquoest de ne pas reacuteagir agrave ce qursquoil fait mais simplement le regarder faire sans lrsquoaider mecircme srsquoil est bloqueacute

Srsquoil 983540983586983588983589 de983543 983578983547983589s983545i983586983585s reacutepo983539983592983530z 983540983580983590 un983530 983577983548e983588t983534983587983539 o983547 d983535983545e983588 l983547983535 983577u983530 983550983587us 983536983547983535 983590eacutepo983539983592r983530983555 983578983548an983591 983534983537 983580ur983527 fi983539983535 983588rsquoil 983534983539983588983535s983545e Srsquoil 983530983543983546 v983542983580i983593983530n983545 983529l983587983577ueacute di983545983530983588 l983548i 983577983547983589 983550o983547s 983580983536983537ez 983542983530983550983587ir 983549983586983546r983589 983579o983541983534983589 et 983530983543983588983580ye983555 983592983530 c983587983538983541re983539983592r983530 983579983589 983578u983534 l983589 9835316ne

Introduction agrave lrsquoergonomie

Pas besoin de reacuteinventer la roue DIY

80

Cornelia Laros

Il existe des bonnes pratiques qui vous eacuteviteront de reacuteinventer la roue Utilisez des laquo design patterns raquo pour concevoir vos interfaces

Renseignez vous sur la Gestalt Theorie pour agencer vos pages

Utilisez les critegraveres de Bastien et Scapin pour trouver des deacutefauts eacutevidents avant de tester vous en tirerez des enseignements plus inteacuteressants

Ma983534s ccedila crsquoes983545 983541983586983548r u983539983530 983580u983546r983530 983559983587i983588

Introduction agrave lrsquoergonomie

Quizz time

81

Cornelia Laros

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

82

Cornelia Laros

1 c Fonctionnel

2 a Fiable

3 d Accessible

4 b Intuitif

5 e Plaisant

6 f Porteur de sens

text

F - Quel besoin ai-je oublieacute dans la question preacuteceacutedente

83

Cornelia Laros

Uti983536983534983588983580b983536e

Introduction agrave lrsquoergonomie

Tests DIY84

Cornelia Laros

Reacutedigez la proceacutedure pour tester un de vos projets drsquoIHM avec le test de votre choix perception arborescence ou utilisabiliteacute

Notez la question que vous vous posez et la question que vous allez poser

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

Introduction agrave lrsquoergonomie

Regroupement- distinction69

Cornelia Laros

text

Gestalt Theorie70

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Gestalt Theorie71

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Dark patterns72

Cornelia Laros

Introduction agrave lrsquoergonomie

A vous de jouer

73

Cornelia Laros

Introduction agrave lrsquoergonomie

Outils de prototypages DIY74

Cornelia Laros

Low tech papier + crayons post-its cartes agrave jouer

Gratuit en ligne Invision app Moqups UXPin

Mac Sketch Balsamiq Mockups Axure

PC Axure Balsamiq

Mobile Prototyping on Paper

Ap983540983590en983530983555 983592983589 no983547983549983589983537le983543 983581h983586983543983589983588

Introduction agrave lrsquoergonomie

Test de perception DIY75

Cornelia Laros

La premiegravere impression qursquoun utilisateur se fait de votre IHM va influencer tous ses jugements ulteacuterieurs Crsquoest lrsquoeffet de halo

bull Un utilisateur qui a une premiegravere impression positive de votre appli passera plus facilement outre les bugs

bull Une premiegravere impression negative rendra lrsquoutilisateur plus critique vis agrave vis de deacutetails qui confirment son jugement

Cel983527 983538983580983590c983532e 983527983548983588si 983527983549983589983581 vo983543 983586983590983580ux 983591rsquoex983527983538983589983585s vo983543 983530983585t983542983589983546i983530n983543 983592rsquoem983528983527983548983581he 983530983545 983550983587s 983542e983585d983530983555-vo983547983543 983581l983535e983539983546s

Introduction agrave lrsquoergonomie

Test de perception DIY76

Cornelia Laros

Montrer votre prototype agrave quelqursquoun pendant 5 secondes

Demandez-lui

bull Ce qursquoil a vu

bull Ce qursquoil a compris de ce qursquoil a vu

bull Ce qui lrsquoa surpris ou marqueacute

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY77

Cornelia Laros

Les difficulteacutes de navigation se produisent souvent dans les niveaux les plus haut de votre structure de contenu Vous pouvez veacuterifier facilement si la classification logique pour vous lrsquoest aussi pour vos utilisateurs

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY78

Cornelia Laros

Lister trois (max) niveaux de profondeur de votre contenu structureacute Masquez ensuite les contenus de niveau plus bas Utilisez par exemple les groupements de lignes dans excel pour creacuteer des pliers-deacutepliers ou imprimer la liste sur une feuille que vous pliez pour masquer certaines parties

Demandez agrave un utilisateur de vous dire ougrave il penserait trouver un contenu bien preacutecis en preacutecisant qursquoil nrsquoy a pas de bonne reacuteponse

Notez srsquoil va chercher lagrave ougrave vous vous y attendiez ougrave il a heacutesiteacute et ce qursquoil a fini par choisir pour vous aider agrave rendre la navigation plus intuitive

Introduction agrave lrsquoergonomie

Test drsquoutilisabiliteacute DIY79

Cornelia Laros

A chaque nouvelle fonctionnaliteacute ajouteacutee demandez agrave quelqursquoun qui ne connait pas le projet de srsquoen servir Proposez lui une seule tacircche geacuteneacuterique agrave accomplir avec la fonctionnaliteacute

Exemple Tu veux prendre un rendez-vous avec un meacutedecin sur ce site montres-moi comment tu ferais en commentant agrave haute voix

Le plus important ici crsquoest de ne pas reacuteagir agrave ce qursquoil fait mais simplement le regarder faire sans lrsquoaider mecircme srsquoil est bloqueacute

Srsquoil 983540983586983588983589 de983543 983578983547983589s983545i983586983585s reacutepo983539983592983530z 983540983580983590 un983530 983577983548e983588t983534983587983539 o983547 d983535983545e983588 l983547983535 983577u983530 983550983587us 983536983547983535 983590eacutepo983539983592r983530983555 983578983548an983591 983534983537 983580ur983527 fi983539983535 983588rsquoil 983534983539983588983535s983545e Srsquoil 983530983543983546 v983542983580i983593983530n983545 983529l983587983577ueacute di983545983530983588 l983548i 983577983547983589 983550o983547s 983580983536983537ez 983542983530983550983587ir 983549983586983546r983589 983579o983541983534983589 et 983530983543983588983580ye983555 983592983530 c983587983538983541re983539983592r983530 983579983589 983578u983534 l983589 9835316ne

Introduction agrave lrsquoergonomie

Pas besoin de reacuteinventer la roue DIY

80

Cornelia Laros

Il existe des bonnes pratiques qui vous eacuteviteront de reacuteinventer la roue Utilisez des laquo design patterns raquo pour concevoir vos interfaces

Renseignez vous sur la Gestalt Theorie pour agencer vos pages

Utilisez les critegraveres de Bastien et Scapin pour trouver des deacutefauts eacutevidents avant de tester vous en tirerez des enseignements plus inteacuteressants

Ma983534s ccedila crsquoes983545 983541983586983548r u983539983530 983580u983546r983530 983559983587i983588

Introduction agrave lrsquoergonomie

Quizz time

81

Cornelia Laros

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

82

Cornelia Laros

1 c Fonctionnel

2 a Fiable

3 d Accessible

4 b Intuitif

5 e Plaisant

6 f Porteur de sens

text

F - Quel besoin ai-je oublieacute dans la question preacuteceacutedente

83

Cornelia Laros

Uti983536983534983588983580b983536e

Introduction agrave lrsquoergonomie

Tests DIY84

Cornelia Laros

Reacutedigez la proceacutedure pour tester un de vos projets drsquoIHM avec le test de votre choix perception arborescence ou utilisabiliteacute

Notez la question que vous vous posez et la question que vous allez poser

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

text

Gestalt Theorie70

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Gestalt Theorie71

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Dark patterns72

Cornelia Laros

Introduction agrave lrsquoergonomie

A vous de jouer

73

Cornelia Laros

Introduction agrave lrsquoergonomie

Outils de prototypages DIY74

Cornelia Laros

Low tech papier + crayons post-its cartes agrave jouer

Gratuit en ligne Invision app Moqups UXPin

Mac Sketch Balsamiq Mockups Axure

PC Axure Balsamiq

Mobile Prototyping on Paper

Ap983540983590en983530983555 983592983589 no983547983549983589983537le983543 983581h983586983543983589983588

Introduction agrave lrsquoergonomie

Test de perception DIY75

Cornelia Laros

La premiegravere impression qursquoun utilisateur se fait de votre IHM va influencer tous ses jugements ulteacuterieurs Crsquoest lrsquoeffet de halo

bull Un utilisateur qui a une premiegravere impression positive de votre appli passera plus facilement outre les bugs

bull Une premiegravere impression negative rendra lrsquoutilisateur plus critique vis agrave vis de deacutetails qui confirment son jugement

Cel983527 983538983580983590c983532e 983527983548983588si 983527983549983589983581 vo983543 983586983590983580ux 983591rsquoex983527983538983589983585s vo983543 983530983585t983542983589983546i983530n983543 983592rsquoem983528983527983548983581he 983530983545 983550983587s 983542e983585d983530983555-vo983547983543 983581l983535e983539983546s

Introduction agrave lrsquoergonomie

Test de perception DIY76

Cornelia Laros

Montrer votre prototype agrave quelqursquoun pendant 5 secondes

Demandez-lui

bull Ce qursquoil a vu

bull Ce qursquoil a compris de ce qursquoil a vu

bull Ce qui lrsquoa surpris ou marqueacute

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY77

Cornelia Laros

Les difficulteacutes de navigation se produisent souvent dans les niveaux les plus haut de votre structure de contenu Vous pouvez veacuterifier facilement si la classification logique pour vous lrsquoest aussi pour vos utilisateurs

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY78

Cornelia Laros

Lister trois (max) niveaux de profondeur de votre contenu structureacute Masquez ensuite les contenus de niveau plus bas Utilisez par exemple les groupements de lignes dans excel pour creacuteer des pliers-deacutepliers ou imprimer la liste sur une feuille que vous pliez pour masquer certaines parties

Demandez agrave un utilisateur de vous dire ougrave il penserait trouver un contenu bien preacutecis en preacutecisant qursquoil nrsquoy a pas de bonne reacuteponse

Notez srsquoil va chercher lagrave ougrave vous vous y attendiez ougrave il a heacutesiteacute et ce qursquoil a fini par choisir pour vous aider agrave rendre la navigation plus intuitive

Introduction agrave lrsquoergonomie

Test drsquoutilisabiliteacute DIY79

Cornelia Laros

A chaque nouvelle fonctionnaliteacute ajouteacutee demandez agrave quelqursquoun qui ne connait pas le projet de srsquoen servir Proposez lui une seule tacircche geacuteneacuterique agrave accomplir avec la fonctionnaliteacute

Exemple Tu veux prendre un rendez-vous avec un meacutedecin sur ce site montres-moi comment tu ferais en commentant agrave haute voix

Le plus important ici crsquoest de ne pas reacuteagir agrave ce qursquoil fait mais simplement le regarder faire sans lrsquoaider mecircme srsquoil est bloqueacute

Srsquoil 983540983586983588983589 de983543 983578983547983589s983545i983586983585s reacutepo983539983592983530z 983540983580983590 un983530 983577983548e983588t983534983587983539 o983547 d983535983545e983588 l983547983535 983577u983530 983550983587us 983536983547983535 983590eacutepo983539983592r983530983555 983578983548an983591 983534983537 983580ur983527 fi983539983535 983588rsquoil 983534983539983588983535s983545e Srsquoil 983530983543983546 v983542983580i983593983530n983545 983529l983587983577ueacute di983545983530983588 l983548i 983577983547983589 983550o983547s 983580983536983537ez 983542983530983550983587ir 983549983586983546r983589 983579o983541983534983589 et 983530983543983588983580ye983555 983592983530 c983587983538983541re983539983592r983530 983579983589 983578u983534 l983589 9835316ne

Introduction agrave lrsquoergonomie

Pas besoin de reacuteinventer la roue DIY

80

Cornelia Laros

Il existe des bonnes pratiques qui vous eacuteviteront de reacuteinventer la roue Utilisez des laquo design patterns raquo pour concevoir vos interfaces

Renseignez vous sur la Gestalt Theorie pour agencer vos pages

Utilisez les critegraveres de Bastien et Scapin pour trouver des deacutefauts eacutevidents avant de tester vous en tirerez des enseignements plus inteacuteressants

Ma983534s ccedila crsquoes983545 983541983586983548r u983539983530 983580u983546r983530 983559983587i983588

Introduction agrave lrsquoergonomie

Quizz time

81

Cornelia Laros

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

82

Cornelia Laros

1 c Fonctionnel

2 a Fiable

3 d Accessible

4 b Intuitif

5 e Plaisant

6 f Porteur de sens

text

F - Quel besoin ai-je oublieacute dans la question preacuteceacutedente

83

Cornelia Laros

Uti983536983534983588983580b983536e

Introduction agrave lrsquoergonomie

Tests DIY84

Cornelia Laros

Reacutedigez la proceacutedure pour tester un de vos projets drsquoIHM avec le test de votre choix perception arborescence ou utilisabiliteacute

Notez la question que vous vous posez et la question que vous allez poser

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

text

Gestalt Theorie71

Cornelia Laros

Loi de la bonne forme

Loi de continuiteacute

Loi de proximiteacute

Loi de similariteacute similitude

Loi de destin commun

Loi de familiariteacute

text

Dark patterns72

Cornelia Laros

Introduction agrave lrsquoergonomie

A vous de jouer

73

Cornelia Laros

Introduction agrave lrsquoergonomie

Outils de prototypages DIY74

Cornelia Laros

Low tech papier + crayons post-its cartes agrave jouer

Gratuit en ligne Invision app Moqups UXPin

Mac Sketch Balsamiq Mockups Axure

PC Axure Balsamiq

Mobile Prototyping on Paper

Ap983540983590en983530983555 983592983589 no983547983549983589983537le983543 983581h983586983543983589983588

Introduction agrave lrsquoergonomie

Test de perception DIY75

Cornelia Laros

La premiegravere impression qursquoun utilisateur se fait de votre IHM va influencer tous ses jugements ulteacuterieurs Crsquoest lrsquoeffet de halo

bull Un utilisateur qui a une premiegravere impression positive de votre appli passera plus facilement outre les bugs

bull Une premiegravere impression negative rendra lrsquoutilisateur plus critique vis agrave vis de deacutetails qui confirment son jugement

Cel983527 983538983580983590c983532e 983527983548983588si 983527983549983589983581 vo983543 983586983590983580ux 983591rsquoex983527983538983589983585s vo983543 983530983585t983542983589983546i983530n983543 983592rsquoem983528983527983548983581he 983530983545 983550983587s 983542e983585d983530983555-vo983547983543 983581l983535e983539983546s

Introduction agrave lrsquoergonomie

Test de perception DIY76

Cornelia Laros

Montrer votre prototype agrave quelqursquoun pendant 5 secondes

Demandez-lui

bull Ce qursquoil a vu

bull Ce qursquoil a compris de ce qursquoil a vu

bull Ce qui lrsquoa surpris ou marqueacute

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY77

Cornelia Laros

Les difficulteacutes de navigation se produisent souvent dans les niveaux les plus haut de votre structure de contenu Vous pouvez veacuterifier facilement si la classification logique pour vous lrsquoest aussi pour vos utilisateurs

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY78

Cornelia Laros

Lister trois (max) niveaux de profondeur de votre contenu structureacute Masquez ensuite les contenus de niveau plus bas Utilisez par exemple les groupements de lignes dans excel pour creacuteer des pliers-deacutepliers ou imprimer la liste sur une feuille que vous pliez pour masquer certaines parties

Demandez agrave un utilisateur de vous dire ougrave il penserait trouver un contenu bien preacutecis en preacutecisant qursquoil nrsquoy a pas de bonne reacuteponse

Notez srsquoil va chercher lagrave ougrave vous vous y attendiez ougrave il a heacutesiteacute et ce qursquoil a fini par choisir pour vous aider agrave rendre la navigation plus intuitive

Introduction agrave lrsquoergonomie

Test drsquoutilisabiliteacute DIY79

Cornelia Laros

A chaque nouvelle fonctionnaliteacute ajouteacutee demandez agrave quelqursquoun qui ne connait pas le projet de srsquoen servir Proposez lui une seule tacircche geacuteneacuterique agrave accomplir avec la fonctionnaliteacute

Exemple Tu veux prendre un rendez-vous avec un meacutedecin sur ce site montres-moi comment tu ferais en commentant agrave haute voix

Le plus important ici crsquoest de ne pas reacuteagir agrave ce qursquoil fait mais simplement le regarder faire sans lrsquoaider mecircme srsquoil est bloqueacute

Srsquoil 983540983586983588983589 de983543 983578983547983589s983545i983586983585s reacutepo983539983592983530z 983540983580983590 un983530 983577983548e983588t983534983587983539 o983547 d983535983545e983588 l983547983535 983577u983530 983550983587us 983536983547983535 983590eacutepo983539983592r983530983555 983578983548an983591 983534983537 983580ur983527 fi983539983535 983588rsquoil 983534983539983588983535s983545e Srsquoil 983530983543983546 v983542983580i983593983530n983545 983529l983587983577ueacute di983545983530983588 l983548i 983577983547983589 983550o983547s 983580983536983537ez 983542983530983550983587ir 983549983586983546r983589 983579o983541983534983589 et 983530983543983588983580ye983555 983592983530 c983587983538983541re983539983592r983530 983579983589 983578u983534 l983589 9835316ne

Introduction agrave lrsquoergonomie

Pas besoin de reacuteinventer la roue DIY

80

Cornelia Laros

Il existe des bonnes pratiques qui vous eacuteviteront de reacuteinventer la roue Utilisez des laquo design patterns raquo pour concevoir vos interfaces

Renseignez vous sur la Gestalt Theorie pour agencer vos pages

Utilisez les critegraveres de Bastien et Scapin pour trouver des deacutefauts eacutevidents avant de tester vous en tirerez des enseignements plus inteacuteressants

Ma983534s ccedila crsquoes983545 983541983586983548r u983539983530 983580u983546r983530 983559983587i983588

Introduction agrave lrsquoergonomie

Quizz time

81

Cornelia Laros

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

82

Cornelia Laros

1 c Fonctionnel

2 a Fiable

3 d Accessible

4 b Intuitif

5 e Plaisant

6 f Porteur de sens

text

F - Quel besoin ai-je oublieacute dans la question preacuteceacutedente

83

Cornelia Laros

Uti983536983534983588983580b983536e

Introduction agrave lrsquoergonomie

Tests DIY84

Cornelia Laros

Reacutedigez la proceacutedure pour tester un de vos projets drsquoIHM avec le test de votre choix perception arborescence ou utilisabiliteacute

Notez la question que vous vous posez et la question que vous allez poser

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

text

Dark patterns72

Cornelia Laros

Introduction agrave lrsquoergonomie

A vous de jouer

73

Cornelia Laros

Introduction agrave lrsquoergonomie

Outils de prototypages DIY74

Cornelia Laros

Low tech papier + crayons post-its cartes agrave jouer

Gratuit en ligne Invision app Moqups UXPin

Mac Sketch Balsamiq Mockups Axure

PC Axure Balsamiq

Mobile Prototyping on Paper

Ap983540983590en983530983555 983592983589 no983547983549983589983537le983543 983581h983586983543983589983588

Introduction agrave lrsquoergonomie

Test de perception DIY75

Cornelia Laros

La premiegravere impression qursquoun utilisateur se fait de votre IHM va influencer tous ses jugements ulteacuterieurs Crsquoest lrsquoeffet de halo

bull Un utilisateur qui a une premiegravere impression positive de votre appli passera plus facilement outre les bugs

bull Une premiegravere impression negative rendra lrsquoutilisateur plus critique vis agrave vis de deacutetails qui confirment son jugement

Cel983527 983538983580983590c983532e 983527983548983588si 983527983549983589983581 vo983543 983586983590983580ux 983591rsquoex983527983538983589983585s vo983543 983530983585t983542983589983546i983530n983543 983592rsquoem983528983527983548983581he 983530983545 983550983587s 983542e983585d983530983555-vo983547983543 983581l983535e983539983546s

Introduction agrave lrsquoergonomie

Test de perception DIY76

Cornelia Laros

Montrer votre prototype agrave quelqursquoun pendant 5 secondes

Demandez-lui

bull Ce qursquoil a vu

bull Ce qursquoil a compris de ce qursquoil a vu

bull Ce qui lrsquoa surpris ou marqueacute

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY77

Cornelia Laros

Les difficulteacutes de navigation se produisent souvent dans les niveaux les plus haut de votre structure de contenu Vous pouvez veacuterifier facilement si la classification logique pour vous lrsquoest aussi pour vos utilisateurs

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY78

Cornelia Laros

Lister trois (max) niveaux de profondeur de votre contenu structureacute Masquez ensuite les contenus de niveau plus bas Utilisez par exemple les groupements de lignes dans excel pour creacuteer des pliers-deacutepliers ou imprimer la liste sur une feuille que vous pliez pour masquer certaines parties

Demandez agrave un utilisateur de vous dire ougrave il penserait trouver un contenu bien preacutecis en preacutecisant qursquoil nrsquoy a pas de bonne reacuteponse

Notez srsquoil va chercher lagrave ougrave vous vous y attendiez ougrave il a heacutesiteacute et ce qursquoil a fini par choisir pour vous aider agrave rendre la navigation plus intuitive

Introduction agrave lrsquoergonomie

Test drsquoutilisabiliteacute DIY79

Cornelia Laros

A chaque nouvelle fonctionnaliteacute ajouteacutee demandez agrave quelqursquoun qui ne connait pas le projet de srsquoen servir Proposez lui une seule tacircche geacuteneacuterique agrave accomplir avec la fonctionnaliteacute

Exemple Tu veux prendre un rendez-vous avec un meacutedecin sur ce site montres-moi comment tu ferais en commentant agrave haute voix

Le plus important ici crsquoest de ne pas reacuteagir agrave ce qursquoil fait mais simplement le regarder faire sans lrsquoaider mecircme srsquoil est bloqueacute

Srsquoil 983540983586983588983589 de983543 983578983547983589s983545i983586983585s reacutepo983539983592983530z 983540983580983590 un983530 983577983548e983588t983534983587983539 o983547 d983535983545e983588 l983547983535 983577u983530 983550983587us 983536983547983535 983590eacutepo983539983592r983530983555 983578983548an983591 983534983537 983580ur983527 fi983539983535 983588rsquoil 983534983539983588983535s983545e Srsquoil 983530983543983546 v983542983580i983593983530n983545 983529l983587983577ueacute di983545983530983588 l983548i 983577983547983589 983550o983547s 983580983536983537ez 983542983530983550983587ir 983549983586983546r983589 983579o983541983534983589 et 983530983543983588983580ye983555 983592983530 c983587983538983541re983539983592r983530 983579983589 983578u983534 l983589 9835316ne

Introduction agrave lrsquoergonomie

Pas besoin de reacuteinventer la roue DIY

80

Cornelia Laros

Il existe des bonnes pratiques qui vous eacuteviteront de reacuteinventer la roue Utilisez des laquo design patterns raquo pour concevoir vos interfaces

Renseignez vous sur la Gestalt Theorie pour agencer vos pages

Utilisez les critegraveres de Bastien et Scapin pour trouver des deacutefauts eacutevidents avant de tester vous en tirerez des enseignements plus inteacuteressants

Ma983534s ccedila crsquoes983545 983541983586983548r u983539983530 983580u983546r983530 983559983587i983588

Introduction agrave lrsquoergonomie

Quizz time

81

Cornelia Laros

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

82

Cornelia Laros

1 c Fonctionnel

2 a Fiable

3 d Accessible

4 b Intuitif

5 e Plaisant

6 f Porteur de sens

text

F - Quel besoin ai-je oublieacute dans la question preacuteceacutedente

83

Cornelia Laros

Uti983536983534983588983580b983536e

Introduction agrave lrsquoergonomie

Tests DIY84

Cornelia Laros

Reacutedigez la proceacutedure pour tester un de vos projets drsquoIHM avec le test de votre choix perception arborescence ou utilisabiliteacute

Notez la question que vous vous posez et la question que vous allez poser

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

Introduction agrave lrsquoergonomie

A vous de jouer

73

Cornelia Laros

Introduction agrave lrsquoergonomie

Outils de prototypages DIY74

Cornelia Laros

Low tech papier + crayons post-its cartes agrave jouer

Gratuit en ligne Invision app Moqups UXPin

Mac Sketch Balsamiq Mockups Axure

PC Axure Balsamiq

Mobile Prototyping on Paper

Ap983540983590en983530983555 983592983589 no983547983549983589983537le983543 983581h983586983543983589983588

Introduction agrave lrsquoergonomie

Test de perception DIY75

Cornelia Laros

La premiegravere impression qursquoun utilisateur se fait de votre IHM va influencer tous ses jugements ulteacuterieurs Crsquoest lrsquoeffet de halo

bull Un utilisateur qui a une premiegravere impression positive de votre appli passera plus facilement outre les bugs

bull Une premiegravere impression negative rendra lrsquoutilisateur plus critique vis agrave vis de deacutetails qui confirment son jugement

Cel983527 983538983580983590c983532e 983527983548983588si 983527983549983589983581 vo983543 983586983590983580ux 983591rsquoex983527983538983589983585s vo983543 983530983585t983542983589983546i983530n983543 983592rsquoem983528983527983548983581he 983530983545 983550983587s 983542e983585d983530983555-vo983547983543 983581l983535e983539983546s

Introduction agrave lrsquoergonomie

Test de perception DIY76

Cornelia Laros

Montrer votre prototype agrave quelqursquoun pendant 5 secondes

Demandez-lui

bull Ce qursquoil a vu

bull Ce qursquoil a compris de ce qursquoil a vu

bull Ce qui lrsquoa surpris ou marqueacute

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY77

Cornelia Laros

Les difficulteacutes de navigation se produisent souvent dans les niveaux les plus haut de votre structure de contenu Vous pouvez veacuterifier facilement si la classification logique pour vous lrsquoest aussi pour vos utilisateurs

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY78

Cornelia Laros

Lister trois (max) niveaux de profondeur de votre contenu structureacute Masquez ensuite les contenus de niveau plus bas Utilisez par exemple les groupements de lignes dans excel pour creacuteer des pliers-deacutepliers ou imprimer la liste sur une feuille que vous pliez pour masquer certaines parties

Demandez agrave un utilisateur de vous dire ougrave il penserait trouver un contenu bien preacutecis en preacutecisant qursquoil nrsquoy a pas de bonne reacuteponse

Notez srsquoil va chercher lagrave ougrave vous vous y attendiez ougrave il a heacutesiteacute et ce qursquoil a fini par choisir pour vous aider agrave rendre la navigation plus intuitive

Introduction agrave lrsquoergonomie

Test drsquoutilisabiliteacute DIY79

Cornelia Laros

A chaque nouvelle fonctionnaliteacute ajouteacutee demandez agrave quelqursquoun qui ne connait pas le projet de srsquoen servir Proposez lui une seule tacircche geacuteneacuterique agrave accomplir avec la fonctionnaliteacute

Exemple Tu veux prendre un rendez-vous avec un meacutedecin sur ce site montres-moi comment tu ferais en commentant agrave haute voix

Le plus important ici crsquoest de ne pas reacuteagir agrave ce qursquoil fait mais simplement le regarder faire sans lrsquoaider mecircme srsquoil est bloqueacute

Srsquoil 983540983586983588983589 de983543 983578983547983589s983545i983586983585s reacutepo983539983592983530z 983540983580983590 un983530 983577983548e983588t983534983587983539 o983547 d983535983545e983588 l983547983535 983577u983530 983550983587us 983536983547983535 983590eacutepo983539983592r983530983555 983578983548an983591 983534983537 983580ur983527 fi983539983535 983588rsquoil 983534983539983588983535s983545e Srsquoil 983530983543983546 v983542983580i983593983530n983545 983529l983587983577ueacute di983545983530983588 l983548i 983577983547983589 983550o983547s 983580983536983537ez 983542983530983550983587ir 983549983586983546r983589 983579o983541983534983589 et 983530983543983588983580ye983555 983592983530 c983587983538983541re983539983592r983530 983579983589 983578u983534 l983589 9835316ne

Introduction agrave lrsquoergonomie

Pas besoin de reacuteinventer la roue DIY

80

Cornelia Laros

Il existe des bonnes pratiques qui vous eacuteviteront de reacuteinventer la roue Utilisez des laquo design patterns raquo pour concevoir vos interfaces

Renseignez vous sur la Gestalt Theorie pour agencer vos pages

Utilisez les critegraveres de Bastien et Scapin pour trouver des deacutefauts eacutevidents avant de tester vous en tirerez des enseignements plus inteacuteressants

Ma983534s ccedila crsquoes983545 983541983586983548r u983539983530 983580u983546r983530 983559983587i983588

Introduction agrave lrsquoergonomie

Quizz time

81

Cornelia Laros

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

82

Cornelia Laros

1 c Fonctionnel

2 a Fiable

3 d Accessible

4 b Intuitif

5 e Plaisant

6 f Porteur de sens

text

F - Quel besoin ai-je oublieacute dans la question preacuteceacutedente

83

Cornelia Laros

Uti983536983534983588983580b983536e

Introduction agrave lrsquoergonomie

Tests DIY84

Cornelia Laros

Reacutedigez la proceacutedure pour tester un de vos projets drsquoIHM avec le test de votre choix perception arborescence ou utilisabiliteacute

Notez la question que vous vous posez et la question que vous allez poser

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

Introduction agrave lrsquoergonomie

Outils de prototypages DIY74

Cornelia Laros

Low tech papier + crayons post-its cartes agrave jouer

Gratuit en ligne Invision app Moqups UXPin

Mac Sketch Balsamiq Mockups Axure

PC Axure Balsamiq

Mobile Prototyping on Paper

Ap983540983590en983530983555 983592983589 no983547983549983589983537le983543 983581h983586983543983589983588

Introduction agrave lrsquoergonomie

Test de perception DIY75

Cornelia Laros

La premiegravere impression qursquoun utilisateur se fait de votre IHM va influencer tous ses jugements ulteacuterieurs Crsquoest lrsquoeffet de halo

bull Un utilisateur qui a une premiegravere impression positive de votre appli passera plus facilement outre les bugs

bull Une premiegravere impression negative rendra lrsquoutilisateur plus critique vis agrave vis de deacutetails qui confirment son jugement

Cel983527 983538983580983590c983532e 983527983548983588si 983527983549983589983581 vo983543 983586983590983580ux 983591rsquoex983527983538983589983585s vo983543 983530983585t983542983589983546i983530n983543 983592rsquoem983528983527983548983581he 983530983545 983550983587s 983542e983585d983530983555-vo983547983543 983581l983535e983539983546s

Introduction agrave lrsquoergonomie

Test de perception DIY76

Cornelia Laros

Montrer votre prototype agrave quelqursquoun pendant 5 secondes

Demandez-lui

bull Ce qursquoil a vu

bull Ce qursquoil a compris de ce qursquoil a vu

bull Ce qui lrsquoa surpris ou marqueacute

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY77

Cornelia Laros

Les difficulteacutes de navigation se produisent souvent dans les niveaux les plus haut de votre structure de contenu Vous pouvez veacuterifier facilement si la classification logique pour vous lrsquoest aussi pour vos utilisateurs

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY78

Cornelia Laros

Lister trois (max) niveaux de profondeur de votre contenu structureacute Masquez ensuite les contenus de niveau plus bas Utilisez par exemple les groupements de lignes dans excel pour creacuteer des pliers-deacutepliers ou imprimer la liste sur une feuille que vous pliez pour masquer certaines parties

Demandez agrave un utilisateur de vous dire ougrave il penserait trouver un contenu bien preacutecis en preacutecisant qursquoil nrsquoy a pas de bonne reacuteponse

Notez srsquoil va chercher lagrave ougrave vous vous y attendiez ougrave il a heacutesiteacute et ce qursquoil a fini par choisir pour vous aider agrave rendre la navigation plus intuitive

Introduction agrave lrsquoergonomie

Test drsquoutilisabiliteacute DIY79

Cornelia Laros

A chaque nouvelle fonctionnaliteacute ajouteacutee demandez agrave quelqursquoun qui ne connait pas le projet de srsquoen servir Proposez lui une seule tacircche geacuteneacuterique agrave accomplir avec la fonctionnaliteacute

Exemple Tu veux prendre un rendez-vous avec un meacutedecin sur ce site montres-moi comment tu ferais en commentant agrave haute voix

Le plus important ici crsquoest de ne pas reacuteagir agrave ce qursquoil fait mais simplement le regarder faire sans lrsquoaider mecircme srsquoil est bloqueacute

Srsquoil 983540983586983588983589 de983543 983578983547983589s983545i983586983585s reacutepo983539983592983530z 983540983580983590 un983530 983577983548e983588t983534983587983539 o983547 d983535983545e983588 l983547983535 983577u983530 983550983587us 983536983547983535 983590eacutepo983539983592r983530983555 983578983548an983591 983534983537 983580ur983527 fi983539983535 983588rsquoil 983534983539983588983535s983545e Srsquoil 983530983543983546 v983542983580i983593983530n983545 983529l983587983577ueacute di983545983530983588 l983548i 983577983547983589 983550o983547s 983580983536983537ez 983542983530983550983587ir 983549983586983546r983589 983579o983541983534983589 et 983530983543983588983580ye983555 983592983530 c983587983538983541re983539983592r983530 983579983589 983578u983534 l983589 9835316ne

Introduction agrave lrsquoergonomie

Pas besoin de reacuteinventer la roue DIY

80

Cornelia Laros

Il existe des bonnes pratiques qui vous eacuteviteront de reacuteinventer la roue Utilisez des laquo design patterns raquo pour concevoir vos interfaces

Renseignez vous sur la Gestalt Theorie pour agencer vos pages

Utilisez les critegraveres de Bastien et Scapin pour trouver des deacutefauts eacutevidents avant de tester vous en tirerez des enseignements plus inteacuteressants

Ma983534s ccedila crsquoes983545 983541983586983548r u983539983530 983580u983546r983530 983559983587i983588

Introduction agrave lrsquoergonomie

Quizz time

81

Cornelia Laros

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

82

Cornelia Laros

1 c Fonctionnel

2 a Fiable

3 d Accessible

4 b Intuitif

5 e Plaisant

6 f Porteur de sens

text

F - Quel besoin ai-je oublieacute dans la question preacuteceacutedente

83

Cornelia Laros

Uti983536983534983588983580b983536e

Introduction agrave lrsquoergonomie

Tests DIY84

Cornelia Laros

Reacutedigez la proceacutedure pour tester un de vos projets drsquoIHM avec le test de votre choix perception arborescence ou utilisabiliteacute

Notez la question que vous vous posez et la question que vous allez poser

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

Introduction agrave lrsquoergonomie

Test de perception DIY75

Cornelia Laros

La premiegravere impression qursquoun utilisateur se fait de votre IHM va influencer tous ses jugements ulteacuterieurs Crsquoest lrsquoeffet de halo

bull Un utilisateur qui a une premiegravere impression positive de votre appli passera plus facilement outre les bugs

bull Une premiegravere impression negative rendra lrsquoutilisateur plus critique vis agrave vis de deacutetails qui confirment son jugement

Cel983527 983538983580983590c983532e 983527983548983588si 983527983549983589983581 vo983543 983586983590983580ux 983591rsquoex983527983538983589983585s vo983543 983530983585t983542983589983546i983530n983543 983592rsquoem983528983527983548983581he 983530983545 983550983587s 983542e983585d983530983555-vo983547983543 983581l983535e983539983546s

Introduction agrave lrsquoergonomie

Test de perception DIY76

Cornelia Laros

Montrer votre prototype agrave quelqursquoun pendant 5 secondes

Demandez-lui

bull Ce qursquoil a vu

bull Ce qursquoil a compris de ce qursquoil a vu

bull Ce qui lrsquoa surpris ou marqueacute

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY77

Cornelia Laros

Les difficulteacutes de navigation se produisent souvent dans les niveaux les plus haut de votre structure de contenu Vous pouvez veacuterifier facilement si la classification logique pour vous lrsquoest aussi pour vos utilisateurs

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY78

Cornelia Laros

Lister trois (max) niveaux de profondeur de votre contenu structureacute Masquez ensuite les contenus de niveau plus bas Utilisez par exemple les groupements de lignes dans excel pour creacuteer des pliers-deacutepliers ou imprimer la liste sur une feuille que vous pliez pour masquer certaines parties

Demandez agrave un utilisateur de vous dire ougrave il penserait trouver un contenu bien preacutecis en preacutecisant qursquoil nrsquoy a pas de bonne reacuteponse

Notez srsquoil va chercher lagrave ougrave vous vous y attendiez ougrave il a heacutesiteacute et ce qursquoil a fini par choisir pour vous aider agrave rendre la navigation plus intuitive

Introduction agrave lrsquoergonomie

Test drsquoutilisabiliteacute DIY79

Cornelia Laros

A chaque nouvelle fonctionnaliteacute ajouteacutee demandez agrave quelqursquoun qui ne connait pas le projet de srsquoen servir Proposez lui une seule tacircche geacuteneacuterique agrave accomplir avec la fonctionnaliteacute

Exemple Tu veux prendre un rendez-vous avec un meacutedecin sur ce site montres-moi comment tu ferais en commentant agrave haute voix

Le plus important ici crsquoest de ne pas reacuteagir agrave ce qursquoil fait mais simplement le regarder faire sans lrsquoaider mecircme srsquoil est bloqueacute

Srsquoil 983540983586983588983589 de983543 983578983547983589s983545i983586983585s reacutepo983539983592983530z 983540983580983590 un983530 983577983548e983588t983534983587983539 o983547 d983535983545e983588 l983547983535 983577u983530 983550983587us 983536983547983535 983590eacutepo983539983592r983530983555 983578983548an983591 983534983537 983580ur983527 fi983539983535 983588rsquoil 983534983539983588983535s983545e Srsquoil 983530983543983546 v983542983580i983593983530n983545 983529l983587983577ueacute di983545983530983588 l983548i 983577983547983589 983550o983547s 983580983536983537ez 983542983530983550983587ir 983549983586983546r983589 983579o983541983534983589 et 983530983543983588983580ye983555 983592983530 c983587983538983541re983539983592r983530 983579983589 983578u983534 l983589 9835316ne

Introduction agrave lrsquoergonomie

Pas besoin de reacuteinventer la roue DIY

80

Cornelia Laros

Il existe des bonnes pratiques qui vous eacuteviteront de reacuteinventer la roue Utilisez des laquo design patterns raquo pour concevoir vos interfaces

Renseignez vous sur la Gestalt Theorie pour agencer vos pages

Utilisez les critegraveres de Bastien et Scapin pour trouver des deacutefauts eacutevidents avant de tester vous en tirerez des enseignements plus inteacuteressants

Ma983534s ccedila crsquoes983545 983541983586983548r u983539983530 983580u983546r983530 983559983587i983588

Introduction agrave lrsquoergonomie

Quizz time

81

Cornelia Laros

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

82

Cornelia Laros

1 c Fonctionnel

2 a Fiable

3 d Accessible

4 b Intuitif

5 e Plaisant

6 f Porteur de sens

text

F - Quel besoin ai-je oublieacute dans la question preacuteceacutedente

83

Cornelia Laros

Uti983536983534983588983580b983536e

Introduction agrave lrsquoergonomie

Tests DIY84

Cornelia Laros

Reacutedigez la proceacutedure pour tester un de vos projets drsquoIHM avec le test de votre choix perception arborescence ou utilisabiliteacute

Notez la question que vous vous posez et la question que vous allez poser

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

Introduction agrave lrsquoergonomie

Test de perception DIY76

Cornelia Laros

Montrer votre prototype agrave quelqursquoun pendant 5 secondes

Demandez-lui

bull Ce qursquoil a vu

bull Ce qursquoil a compris de ce qursquoil a vu

bull Ce qui lrsquoa surpris ou marqueacute

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY77

Cornelia Laros

Les difficulteacutes de navigation se produisent souvent dans les niveaux les plus haut de votre structure de contenu Vous pouvez veacuterifier facilement si la classification logique pour vous lrsquoest aussi pour vos utilisateurs

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY78

Cornelia Laros

Lister trois (max) niveaux de profondeur de votre contenu structureacute Masquez ensuite les contenus de niveau plus bas Utilisez par exemple les groupements de lignes dans excel pour creacuteer des pliers-deacutepliers ou imprimer la liste sur une feuille que vous pliez pour masquer certaines parties

Demandez agrave un utilisateur de vous dire ougrave il penserait trouver un contenu bien preacutecis en preacutecisant qursquoil nrsquoy a pas de bonne reacuteponse

Notez srsquoil va chercher lagrave ougrave vous vous y attendiez ougrave il a heacutesiteacute et ce qursquoil a fini par choisir pour vous aider agrave rendre la navigation plus intuitive

Introduction agrave lrsquoergonomie

Test drsquoutilisabiliteacute DIY79

Cornelia Laros

A chaque nouvelle fonctionnaliteacute ajouteacutee demandez agrave quelqursquoun qui ne connait pas le projet de srsquoen servir Proposez lui une seule tacircche geacuteneacuterique agrave accomplir avec la fonctionnaliteacute

Exemple Tu veux prendre un rendez-vous avec un meacutedecin sur ce site montres-moi comment tu ferais en commentant agrave haute voix

Le plus important ici crsquoest de ne pas reacuteagir agrave ce qursquoil fait mais simplement le regarder faire sans lrsquoaider mecircme srsquoil est bloqueacute

Srsquoil 983540983586983588983589 de983543 983578983547983589s983545i983586983585s reacutepo983539983592983530z 983540983580983590 un983530 983577983548e983588t983534983587983539 o983547 d983535983545e983588 l983547983535 983577u983530 983550983587us 983536983547983535 983590eacutepo983539983592r983530983555 983578983548an983591 983534983537 983580ur983527 fi983539983535 983588rsquoil 983534983539983588983535s983545e Srsquoil 983530983543983546 v983542983580i983593983530n983545 983529l983587983577ueacute di983545983530983588 l983548i 983577983547983589 983550o983547s 983580983536983537ez 983542983530983550983587ir 983549983586983546r983589 983579o983541983534983589 et 983530983543983588983580ye983555 983592983530 c983587983538983541re983539983592r983530 983579983589 983578u983534 l983589 9835316ne

Introduction agrave lrsquoergonomie

Pas besoin de reacuteinventer la roue DIY

80

Cornelia Laros

Il existe des bonnes pratiques qui vous eacuteviteront de reacuteinventer la roue Utilisez des laquo design patterns raquo pour concevoir vos interfaces

Renseignez vous sur la Gestalt Theorie pour agencer vos pages

Utilisez les critegraveres de Bastien et Scapin pour trouver des deacutefauts eacutevidents avant de tester vous en tirerez des enseignements plus inteacuteressants

Ma983534s ccedila crsquoes983545 983541983586983548r u983539983530 983580u983546r983530 983559983587i983588

Introduction agrave lrsquoergonomie

Quizz time

81

Cornelia Laros

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

82

Cornelia Laros

1 c Fonctionnel

2 a Fiable

3 d Accessible

4 b Intuitif

5 e Plaisant

6 f Porteur de sens

text

F - Quel besoin ai-je oublieacute dans la question preacuteceacutedente

83

Cornelia Laros

Uti983536983534983588983580b983536e

Introduction agrave lrsquoergonomie

Tests DIY84

Cornelia Laros

Reacutedigez la proceacutedure pour tester un de vos projets drsquoIHM avec le test de votre choix perception arborescence ou utilisabiliteacute

Notez la question que vous vous posez et la question que vous allez poser

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY77

Cornelia Laros

Les difficulteacutes de navigation se produisent souvent dans les niveaux les plus haut de votre structure de contenu Vous pouvez veacuterifier facilement si la classification logique pour vous lrsquoest aussi pour vos utilisateurs

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY78

Cornelia Laros

Lister trois (max) niveaux de profondeur de votre contenu structureacute Masquez ensuite les contenus de niveau plus bas Utilisez par exemple les groupements de lignes dans excel pour creacuteer des pliers-deacutepliers ou imprimer la liste sur une feuille que vous pliez pour masquer certaines parties

Demandez agrave un utilisateur de vous dire ougrave il penserait trouver un contenu bien preacutecis en preacutecisant qursquoil nrsquoy a pas de bonne reacuteponse

Notez srsquoil va chercher lagrave ougrave vous vous y attendiez ougrave il a heacutesiteacute et ce qursquoil a fini par choisir pour vous aider agrave rendre la navigation plus intuitive

Introduction agrave lrsquoergonomie

Test drsquoutilisabiliteacute DIY79

Cornelia Laros

A chaque nouvelle fonctionnaliteacute ajouteacutee demandez agrave quelqursquoun qui ne connait pas le projet de srsquoen servir Proposez lui une seule tacircche geacuteneacuterique agrave accomplir avec la fonctionnaliteacute

Exemple Tu veux prendre un rendez-vous avec un meacutedecin sur ce site montres-moi comment tu ferais en commentant agrave haute voix

Le plus important ici crsquoest de ne pas reacuteagir agrave ce qursquoil fait mais simplement le regarder faire sans lrsquoaider mecircme srsquoil est bloqueacute

Srsquoil 983540983586983588983589 de983543 983578983547983589s983545i983586983585s reacutepo983539983592983530z 983540983580983590 un983530 983577983548e983588t983534983587983539 o983547 d983535983545e983588 l983547983535 983577u983530 983550983587us 983536983547983535 983590eacutepo983539983592r983530983555 983578983548an983591 983534983537 983580ur983527 fi983539983535 983588rsquoil 983534983539983588983535s983545e Srsquoil 983530983543983546 v983542983580i983593983530n983545 983529l983587983577ueacute di983545983530983588 l983548i 983577983547983589 983550o983547s 983580983536983537ez 983542983530983550983587ir 983549983586983546r983589 983579o983541983534983589 et 983530983543983588983580ye983555 983592983530 c983587983538983541re983539983592r983530 983579983589 983578u983534 l983589 9835316ne

Introduction agrave lrsquoergonomie

Pas besoin de reacuteinventer la roue DIY

80

Cornelia Laros

Il existe des bonnes pratiques qui vous eacuteviteront de reacuteinventer la roue Utilisez des laquo design patterns raquo pour concevoir vos interfaces

Renseignez vous sur la Gestalt Theorie pour agencer vos pages

Utilisez les critegraveres de Bastien et Scapin pour trouver des deacutefauts eacutevidents avant de tester vous en tirerez des enseignements plus inteacuteressants

Ma983534s ccedila crsquoes983545 983541983586983548r u983539983530 983580u983546r983530 983559983587i983588

Introduction agrave lrsquoergonomie

Quizz time

81

Cornelia Laros

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

82

Cornelia Laros

1 c Fonctionnel

2 a Fiable

3 d Accessible

4 b Intuitif

5 e Plaisant

6 f Porteur de sens

text

F - Quel besoin ai-je oublieacute dans la question preacuteceacutedente

83

Cornelia Laros

Uti983536983534983588983580b983536e

Introduction agrave lrsquoergonomie

Tests DIY84

Cornelia Laros

Reacutedigez la proceacutedure pour tester un de vos projets drsquoIHM avec le test de votre choix perception arborescence ou utilisabiliteacute

Notez la question que vous vous posez et la question que vous allez poser

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

Introduction agrave lrsquoergonomie

Test drsquoarborescence DIY78

Cornelia Laros

Lister trois (max) niveaux de profondeur de votre contenu structureacute Masquez ensuite les contenus de niveau plus bas Utilisez par exemple les groupements de lignes dans excel pour creacuteer des pliers-deacutepliers ou imprimer la liste sur une feuille que vous pliez pour masquer certaines parties

Demandez agrave un utilisateur de vous dire ougrave il penserait trouver un contenu bien preacutecis en preacutecisant qursquoil nrsquoy a pas de bonne reacuteponse

Notez srsquoil va chercher lagrave ougrave vous vous y attendiez ougrave il a heacutesiteacute et ce qursquoil a fini par choisir pour vous aider agrave rendre la navigation plus intuitive

Introduction agrave lrsquoergonomie

Test drsquoutilisabiliteacute DIY79

Cornelia Laros

A chaque nouvelle fonctionnaliteacute ajouteacutee demandez agrave quelqursquoun qui ne connait pas le projet de srsquoen servir Proposez lui une seule tacircche geacuteneacuterique agrave accomplir avec la fonctionnaliteacute

Exemple Tu veux prendre un rendez-vous avec un meacutedecin sur ce site montres-moi comment tu ferais en commentant agrave haute voix

Le plus important ici crsquoest de ne pas reacuteagir agrave ce qursquoil fait mais simplement le regarder faire sans lrsquoaider mecircme srsquoil est bloqueacute

Srsquoil 983540983586983588983589 de983543 983578983547983589s983545i983586983585s reacutepo983539983592983530z 983540983580983590 un983530 983577983548e983588t983534983587983539 o983547 d983535983545e983588 l983547983535 983577u983530 983550983587us 983536983547983535 983590eacutepo983539983592r983530983555 983578983548an983591 983534983537 983580ur983527 fi983539983535 983588rsquoil 983534983539983588983535s983545e Srsquoil 983530983543983546 v983542983580i983593983530n983545 983529l983587983577ueacute di983545983530983588 l983548i 983577983547983589 983550o983547s 983580983536983537ez 983542983530983550983587ir 983549983586983546r983589 983579o983541983534983589 et 983530983543983588983580ye983555 983592983530 c983587983538983541re983539983592r983530 983579983589 983578u983534 l983589 9835316ne

Introduction agrave lrsquoergonomie

Pas besoin de reacuteinventer la roue DIY

80

Cornelia Laros

Il existe des bonnes pratiques qui vous eacuteviteront de reacuteinventer la roue Utilisez des laquo design patterns raquo pour concevoir vos interfaces

Renseignez vous sur la Gestalt Theorie pour agencer vos pages

Utilisez les critegraveres de Bastien et Scapin pour trouver des deacutefauts eacutevidents avant de tester vous en tirerez des enseignements plus inteacuteressants

Ma983534s ccedila crsquoes983545 983541983586983548r u983539983530 983580u983546r983530 983559983587i983588

Introduction agrave lrsquoergonomie

Quizz time

81

Cornelia Laros

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

82

Cornelia Laros

1 c Fonctionnel

2 a Fiable

3 d Accessible

4 b Intuitif

5 e Plaisant

6 f Porteur de sens

text

F - Quel besoin ai-je oublieacute dans la question preacuteceacutedente

83

Cornelia Laros

Uti983536983534983588983580b983536e

Introduction agrave lrsquoergonomie

Tests DIY84

Cornelia Laros

Reacutedigez la proceacutedure pour tester un de vos projets drsquoIHM avec le test de votre choix perception arborescence ou utilisabiliteacute

Notez la question que vous vous posez et la question que vous allez poser

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

Introduction agrave lrsquoergonomie

Test drsquoutilisabiliteacute DIY79

Cornelia Laros

A chaque nouvelle fonctionnaliteacute ajouteacutee demandez agrave quelqursquoun qui ne connait pas le projet de srsquoen servir Proposez lui une seule tacircche geacuteneacuterique agrave accomplir avec la fonctionnaliteacute

Exemple Tu veux prendre un rendez-vous avec un meacutedecin sur ce site montres-moi comment tu ferais en commentant agrave haute voix

Le plus important ici crsquoest de ne pas reacuteagir agrave ce qursquoil fait mais simplement le regarder faire sans lrsquoaider mecircme srsquoil est bloqueacute

Srsquoil 983540983586983588983589 de983543 983578983547983589s983545i983586983585s reacutepo983539983592983530z 983540983580983590 un983530 983577983548e983588t983534983587983539 o983547 d983535983545e983588 l983547983535 983577u983530 983550983587us 983536983547983535 983590eacutepo983539983592r983530983555 983578983548an983591 983534983537 983580ur983527 fi983539983535 983588rsquoil 983534983539983588983535s983545e Srsquoil 983530983543983546 v983542983580i983593983530n983545 983529l983587983577ueacute di983545983530983588 l983548i 983577983547983589 983550o983547s 983580983536983537ez 983542983530983550983587ir 983549983586983546r983589 983579o983541983534983589 et 983530983543983588983580ye983555 983592983530 c983587983538983541re983539983592r983530 983579983589 983578u983534 l983589 9835316ne

Introduction agrave lrsquoergonomie

Pas besoin de reacuteinventer la roue DIY

80

Cornelia Laros

Il existe des bonnes pratiques qui vous eacuteviteront de reacuteinventer la roue Utilisez des laquo design patterns raquo pour concevoir vos interfaces

Renseignez vous sur la Gestalt Theorie pour agencer vos pages

Utilisez les critegraveres de Bastien et Scapin pour trouver des deacutefauts eacutevidents avant de tester vous en tirerez des enseignements plus inteacuteressants

Ma983534s ccedila crsquoes983545 983541983586983548r u983539983530 983580u983546r983530 983559983587i983588

Introduction agrave lrsquoergonomie

Quizz time

81

Cornelia Laros

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

82

Cornelia Laros

1 c Fonctionnel

2 a Fiable

3 d Accessible

4 b Intuitif

5 e Plaisant

6 f Porteur de sens

text

F - Quel besoin ai-je oublieacute dans la question preacuteceacutedente

83

Cornelia Laros

Uti983536983534983588983580b983536e

Introduction agrave lrsquoergonomie

Tests DIY84

Cornelia Laros

Reacutedigez la proceacutedure pour tester un de vos projets drsquoIHM avec le test de votre choix perception arborescence ou utilisabiliteacute

Notez la question que vous vous posez et la question que vous allez poser

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

Introduction agrave lrsquoergonomie

Pas besoin de reacuteinventer la roue DIY

80

Cornelia Laros

Il existe des bonnes pratiques qui vous eacuteviteront de reacuteinventer la roue Utilisez des laquo design patterns raquo pour concevoir vos interfaces

Renseignez vous sur la Gestalt Theorie pour agencer vos pages

Utilisez les critegraveres de Bastien et Scapin pour trouver des deacutefauts eacutevidents avant de tester vous en tirerez des enseignements plus inteacuteressants

Ma983534s ccedila crsquoes983545 983541983586983548r u983539983530 983580u983546r983530 983559983587i983588

Introduction agrave lrsquoergonomie

Quizz time

81

Cornelia Laros

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

82

Cornelia Laros

1 c Fonctionnel

2 a Fiable

3 d Accessible

4 b Intuitif

5 e Plaisant

6 f Porteur de sens

text

F - Quel besoin ai-je oublieacute dans la question preacuteceacutedente

83

Cornelia Laros

Uti983536983534983588983580b983536e

Introduction agrave lrsquoergonomie

Tests DIY84

Cornelia Laros

Reacutedigez la proceacutedure pour tester un de vos projets drsquoIHM avec le test de votre choix perception arborescence ou utilisabiliteacute

Notez la question que vous vous posez et la question que vous allez poser

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

Introduction agrave lrsquoergonomie

Quizz time

81

Cornelia Laros

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

82

Cornelia Laros

1 c Fonctionnel

2 a Fiable

3 d Accessible

4 b Intuitif

5 e Plaisant

6 f Porteur de sens

text

F - Quel besoin ai-je oublieacute dans la question preacuteceacutedente

83

Cornelia Laros

Uti983536983534983588983580b983536e

Introduction agrave lrsquoergonomie

Tests DIY84

Cornelia Laros

Reacutedigez la proceacutedure pour tester un de vos projets drsquoIHM avec le test de votre choix perception arborescence ou utilisabiliteacute

Notez la question que vous vous posez et la question que vous allez poser

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

Introduction agrave lrsquoergonomie

E - Dans quel ordre les besoins des sites web doivent-ils ecirctre adresseacutes

82

Cornelia Laros

1 c Fonctionnel

2 a Fiable

3 d Accessible

4 b Intuitif

5 e Plaisant

6 f Porteur de sens

text

F - Quel besoin ai-je oublieacute dans la question preacuteceacutedente

83

Cornelia Laros

Uti983536983534983588983580b983536e

Introduction agrave lrsquoergonomie

Tests DIY84

Cornelia Laros

Reacutedigez la proceacutedure pour tester un de vos projets drsquoIHM avec le test de votre choix perception arborescence ou utilisabiliteacute

Notez la question que vous vous posez et la question que vous allez poser

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

text

F - Quel besoin ai-je oublieacute dans la question preacuteceacutedente

83

Cornelia Laros

Uti983536983534983588983580b983536e

Introduction agrave lrsquoergonomie

Tests DIY84

Cornelia Laros

Reacutedigez la proceacutedure pour tester un de vos projets drsquoIHM avec le test de votre choix perception arborescence ou utilisabiliteacute

Notez la question que vous vous posez et la question que vous allez poser

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

Introduction agrave lrsquoergonomie

Tests DIY84

Cornelia Laros

Reacutedigez la proceacutedure pour tester un de vos projets drsquoIHM avec le test de votre choix perception arborescence ou utilisabiliteacute

Notez la question que vous vous posez et la question que vous allez poser

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

Introduction agrave lrsquoergonomie

Devoirs agrave la maison85

Cornelia Laros

Googlez laquo Bastien et Scapin raquo et passez en revue votre proto (faites un proto rapide sur papier si vous nrsquoen avez pas)

Faites passer votre test agrave des eacutetudiants au hasard que vous ne connaissez pas dans le hall drsquoentreacutee la bibliothegraveque ou le self

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene

Introduction agrave lrsquoergonomie 86

Cornelia Laros

Merci

Cornelia Laros

cornelialarosgmailcom

Twitter Orsoral

Auteur du cours

Merci agrave Cyrille Jean-Baptiste et Heacutelegravene