Présentation d'un mémoire à la Louvain School of Management

E X C E L L E N C E & E T H I C S I N B U S I N E S S
Jean Vanderdonckt
Louvain School of Management
Université catholique de Louvain
Place des Doyens, 1 – B-1348 Louvain-la-Neuve, Belgium
jean.vanderdonckt@uclouvain.be – http://www.uclouvain.be/jean.vanderdonckt
Présentation d’un mémoire

Place des Doyens, 1 – B-1348 Louvain-la-Neuve, Belgium
http://www.lilab.be, http://www.lilab.eu, http://www.lilab.info
Louvain Interaction Laboratory
(LILab)

Who is teaching?
• Jean VANDERDONCKT
– Lic. & Agreg. Mathematics, Univ. Namur, 1987
– Lic. & Master in Computer Science, Univ. Namur, 1989
– PhD in Computer Science, Univ. Namur, 1997
– Post-doc in eLearning, Univ. Lille 1, 1998
– Post-doc in HCI, Stanford Univ., 2000
• Researcher in Human-Computer Interaction (HCI) since 1988
• Full professor at UCL, President of LSM Research Institute
• Involvement in various R&D projects
– local level, Walloon Region
– Federal level, Belgium
– In Europe and outside (e.g., with USA)
• Scientific coordinator of the UsiXML Consortium
• See profile at
– DBLP: http://www.informatik.uni-trier.de/~ley/pers/hd/v/Vanderdonckt:Jean
– Google Scholar: http://scholar.google.com/citations?user=U-FgGrkAAAAJ&hl=fr
– Microsoft Academic: http://academic.research.microsoft.com/Author/495619.aspx
– ArnetMiner: http://arnetminer.org/person/j-vanderdonckt-1306161.html
3

Who is teaching?
• LinkedIn Profile: http://www.linkedin.com/in/jeanvdd
• Academia Profile: http://uclouvain.academia.edu/JeanVanderdonckt
• Slides: http://www.slideshare.net/jeanvdd
• Books
4

Quelques recommandations
• Adopter une présentation en pyramide
– Titre (sous-titre)
– Objectif central du mémoire: une phrase
– Décomposer l’objectif en sous-objectifs
– Méthodologie de la recherche
• Méthode
• Résultats
• Discussion
Séminaire de méthodologie du mémoire 5

• Structurer en grandes étapes
– Titre & objectif central du mémoire: une phrase
– Contexte du problème
• Situation existante
• Problèmes rencontrés
• Problème à traiter: il doit être
– Original
– Ouvert
– Non trivial
– Non encore résolu
– Méthodologie de la recherche
• Méthode (y compris revue de la littérature)
• Résultats
• Discussion

• Structurer en grandes étapes
– Conclusion
• Résumé des apports
– Théoriques (ou conceptuels)
– Méthodologiques
– Empiriques
– Autres
• Bilan
– Avantages vs inconvénients
• Travaux futurs
– Court-terme
– Moyen-terme

• Raconter une histoire
– Partir d’un point de départ (acquis – As Is)
– Développer la méthodologie de recherche
• Etape par étape
• Schéma : méthode – résultats – discussion
• Ne pas tout présenter en une fois
• Raisonner par analogie, généralisation
• Un exemple – plusieurs résultats
– Aboutir à une fin (à acquérir - To be)

Séminaire
de
méthodolo
9
Mapping Example: Euros
• Size::value

Mapping variables

Mapping variables
• Diagramme de Kiviatt

Comparer avant/après
12Source: http://www.theusrus.de/blog/too-hot-to-handle/
• How they should be presented (e.g., in the US)

Quels sont les pièges à éviter?
• Les 7 péchés de spécification de Meyer
Sin Representation Observed frequency
Bruit Ø  High at beginning, low after
(students add unspecified
elements)
Silence  Ø Moderate (usually simply
forgotten)
Surspecification  Very low
Contradiction  Moderate (unnoticed)
Ambiguité  High (no unicity, duplication)
Référence en
avant
 {o} … Low
Vœu pieu  Low

Cameleon Reference Framework (CRF)
Final User Interface (FUI)
Concrete User Interface (CUI)
Abstract User Interface (AUI)
Task & Domain (T&D)
Context of use
User
Platform
Environment
Final User Interface (FUI)
Concrete User Interface (CUI)
Abstract User Interface (AUI)
Task & Domain (T&D)
Context of use
User
Platform
Environment

Multi-path development based on CRF
• Classical path for complete forward engineering

• Potential paths for platform adaptation

• Potential paths for platform adaptation
User
Platform
Environment
Tasks
Abstract UI
Concrete UI
Final UI

• Potential paths
Tasks
Abstract UI
Concrete UI
Final UI
User
Platform
Environment
Tasks
Abstract UI
Concrete UI
Final UI
Tasks
Abstract UI
Concrete UI
Final UI

• Potential paths
User
Platform
Environment
Tasks
Android
Final UI
Abstract UI
Concrete UI
iOS
Final UI
Windows
Phone
Final UI
HTML
Final UI

• Potential paths
User
Platform
Environment
Tasks
Final UI1
Abstract UI
Concrete UI
Final UI2 Final UIn
…

• Potential paths
User
Platform
Environment
Tasks
Concrete UI1
Final UI1
Abstract UI
Concrete UI2
Final UI2
Concrete UIn
Final UIn
…
…

• Potential paths
User
Platform
Environment
Tasks
Abstract UI1
Concrete UI1
Final UI1
Abstract UI2
Concrete UI2
Final UI2
Abstract UIn
Concrete UIn
Final UIn
…
…
…

• Potential paths
User
Platform
Environment
Tasks1
Abstract UI1 Abstract UI2
Concrete UI2
Final UI2

• Potential paths
Final UI1ms
Final UI1m1
Concrete
UI1m
Concrete
UI12
Tasks
Abstract
UI1
Concrete
UI11
Final UI1m1
User
Platform
Environm
ent
Abstract
UI2
Abstract
UIn
Final UI12r
Final UI122
Final UI121
Final UI11p
Final UI112
Final UI111
Final UInus
Final UInu2
Concrete
UInu
Concrete
UIn2
Concrete
UIn1
Final UInu1
Final UIn2r
Final UIn22
Final UIn21
Final UIn1p
Final UIn12
Final UIn11
Concrete
UI2j
Concrete
UI22
Concrete
UI21
…
…
… … …
… … … … … …
…
…
…
…
…
…

Zone of Proximal Flow
Extract of Figure from Repenning,
A. "Programming Goes to School",
B. CACM, 55, 5, May, 2012.

Zone of Proximal Development
http://lmrtriads.wikispaces.com/file/view/zpdgraph.jpg/74751165/zpdgraph.jpg

1.3 Règles ergonomiques
• RE pour le graphisme :
– utiliser une hiérarchie de concepts
Peu
Plus
Encore plus
Davantage

• RE pour les diagrammes :
– utiliser un arbre de décision pour guider l'utilisateur pour donner une
réponse appropriée dans des conditions diverses
Nbre-valeurs-choisir = 1
Type-dom = inconnu : champ d'édition uni-linéaire profilé
Type-dom = connu
Nbre-valeurs-possibles [2,3]
Densité-FL = faible : bouton radio
Densité-FL = élevée : boîte à options
Nbre-valeurs-possibles [4,Nmag]
Densité-FL = faible : bouton radio + boîte de regroupement
Densité-FL = élevée : boîte à options

• Mise en évidence par la taille (maximum 3)
gggggggggggggggggggggggggggg
Taille 1 (petit)
Taille 2 (normal)
Taille 3 (mis en évidence)

• Mise en évidence par les symboles (max. 5)

• Mise en évidence par le contraste (maximum 3)
Video normal Video inversé

• Mise en évidence par la texture (max. 4)
0
10
20
30
40
50
60
70
80
90
1er
trim.
2e trim.3e trim.4e trim.
Est
Ouest
Nord

• Eviter les vibrations

• Mise en évidence par la couleur (de 6 à 8)

• Synthèses additives et soustractive
• Utiliser des couleurs opposées
Jaune sur fond bleu Jaune sur fond rouge Bleu sur fond blanc
Rouge sur magenta Cyan sur fond vert Bleu sur fond noir

• Legibility of fonts
Table 1. The twelve fonts studied (View a sample of each font type)
Sans Serif Fonts Serif Fonts Ornate Fonts
Agency FB
(Agency)
Arial
Comic Sans MS
(Comic)
Tahoma
Verdana
Courier New (Courier)
Georgia
Goudy Old Style (Goudy)
Century Schoolbook
(Schoolbook)
Times New Roman (Times)
Bradley Hand ITC
(Bradley)
Monotype Corsiva
(Corsiva)
Source: Michael Bernard, Melissa Mills, Michelle Peterson, & Kelsey Storrer, A Comparison of Popular Online Fonts: Which is Best and When?
Usability News, Vol. 3, No. 2, 2001. http://psychology.wichita.edu/surl/usability_news.html

Visual variables - attributes
• position
– changes in the x, y (z) location
• size
– change in length, area or repetition
• shape
– infinite number of shapes
• value
– changes from light to dark
• orientation
– changes in alignment
• colour
– changes in hue at a given value
• texture
– variation in pattern
• motion

Which coding scheme?

Visual variables - characteristics
• Different variable attributes may be:
– selective
is a change enough to allow us to select it from a group?
– associative
is a change enough to allow us to perceive them as a group?
– quantitative
is there a numerical reading obtainable from changes in this variable?
– order
are changes in this variable perceived as ordered?
– length
across how many changes in this variable are distinctions perceptible?

Position
• selective
• associative
• quantitative
• order
• length
100
0
100

• selective
• associative
• quantitative
• order
• length
– theoretically infinite but practically limited
– association and selection ~ 5 and distinction ~ 20
Size
> >> > > >
=4 X ?

• selective
• associative
• quantitative
• order
• length - infinite variation
Shape
>> >> > > >

Shape

Value
• selective
• associative
• quantitative
• order
• length
– association and selection ~ < 7 and distinction ~ 10
< < < < < <

Color
• selective
• associative
• quantitative
• order
• length
– association and selection ~ < 7 and distinction ~ 20
> > > > > > >>

Color

Encoding color
• Common advice says use a rainbow scale
– Marcus, Murch, Healey
– problems with rainbows

Orientation
• selective
• associative
• quantitative
• order
• length
– ~5 in 2D; ? in 3D
< < < < < < <
?

Texture
• selective
• associative
• quantitative
• order
• length
– theoretically infinite
> > > >

Motion

1970 1980 1990 2000 2010 2020
10
100
1000
10000
(Amount of end users)
(Amount of interactive systems)
50
500
5000
50000
1 system for
100 users
1 system for
1 user
2 or 3 systems
for 1 user
10 to 50 systems
for 1 user
[Weiser, 1998]
[Forrester Research, 2002]
Why multiple platforms?

Unit Sales (per thousand)
0
100.000
200.000
300.000
400.000
500.000
600.000
700.000
800.000
900.000
1.000.000
1997
1998
1999
2000
2001
2002
2003
2004
2005
2006
2007
Mobile Terminals
PC units
[Pierce et al.,2004]
Which platforms should be supported?
• Some reasons
– Sales increase
– Capabilities increase

Which platforms should be supported?
• Break-even point before 2014
[MEE 2010]

For which type of user?
Web users
100%
Multi-platform
users 52%
Everywhere
users 30%

For which type of user?

Consequence: transcoding needed

Example of animated transition
• PivotViewer
Séminaire de méthodologie du mémoire 61[www.silverlight.net/learn/pivotviewer/]

• InfoVis
Séminaire de méthodologie du mémoire 62[Elmqvist et al., 2008]

• Transition between statistical graphics
Séminaire de méthodologie du mémoire 63[Heer, Robertson, 2007]

• Adaptive Layout
Séminaire de méthodologie du mémoire 64[Plomp & Keranen, NordiCHI'2002]

When use an animated transition?
• Transition types
Icon Name: definition
Horizontal scroll from right: to display the next element from a sequence of elements
Horizontal scroll from left: to display the previous element from a sequence of
elements
Vertical scroll from bottom: to proceed with a step-by-step reasoning, a continuous
subject or a long passing over, or a movement
Vertical scroll from top: to move back in a step-by-step reasoning, a continuous
subject or a long passing over, or a movement
Diagonal replacement from top/bottom left corner: to go back to the previous page
or screen or element
Diagonal replacement from top/bottom right corner: to move to next page or screen
or UI element
Venetian blinds: to present a completely different topic, to provide a feeling of
coordinated time, to convey a significant transition
Barn door close: to close a transient screen (e.g., an information screen, the About…
splash screen), to close a current scene, to signify game over
Barn door open: to open a transient screen, to initiate a new step, to open a new
window or UI element, to launch a game, a simulation
Iris open: to show more detailed information about a particular topic
Iris close: to show more general information about a particular topic

Séminaire de méthodologie du mémoire 66[Baecker, Small, Mander ,2001]
• Use animation
– to draw the audience's attention to a single element out of several, or to alert
people to updated information
– to indicate the function of a hot spot (for example, a moving hiker could indicate
the current location of Mungo Park adventurers)
– to draw attention to changes from one state to another (for example, animated
map area changes could indicate deforestation over time).
– to demonstrate navigation in a particular direction (for example, a simple page-flip
animation could easily distinguish forward from backward movement
– to create icons for actions that can't be adequately expressed with a flat, static
picture
• Permanently moving (looping) animations should rarely be included on a
Web page because they will make it very hard for your audience to
concentrate on other page content. Research suggests that movement in our
peripheral vision can dominate our attention. Research also indicates that
moving text is harder to read than static text

• A number of visual effects are available. For global changes to the entire screen these
are the cut, fade in and fade out, dissolve, wipe, overlap, and multiple exposure.
Locally, within a region of the screen, pop on and pop off, pull down and pull up, flip,
and spin can be used
• Note: Visual effects should be used carefully. When employed too often, they will be
fatiguing or even annoying or distressing to the user
• Animation covers a range of creative techniques and media, from three-dimensional
figures captured on film to wholly computer-generated images. Typical for animation is
the rapid and continuous change of the graphical objects making up the animation
• The dynamic of animation can be used to direct the user's attention to a specific point
– Time and movement can be visualised by animation.
– Animation can be used to show an invisible process. It enables the simulation of processes which are too
dangerous or difficult to perform directly.
– Animation of structures is useful for the exploration of complex environments.
– Animation can be used for gradual illustration of a content.
– Complex contents (e.g. process, function) can be simplified by animation.
– Animation can be used to show the reaction on an interaction
Séminaire de méthodologie du mémoire 67[Baecker, Small, Mander ,2001]

How to do an animated transition?
• Design
– An animation sequence should be short
– The direction of movement influence the meaning of the information conveyed
– Animation should be supported by sound
– Animation techniques for global changes to the entire screen are cut, fade in and
fade out, dissolve, wipe, overlap, and multiple exposure
– Animation techniques for local changes within a region of the screen are pop on
and pop off, pull down and pull up, flip, and spin
• Interaction
– The user should be able to interrupt the animation sequence at any time
– The user should be able to repeat parts of the animation
– The user should be able to control the animation playing speed (e.g. fast forward)
– The user may manipulate an animated object
Séminaire de méthodologie du mémoire 68[Ware ,2004]

Questions?
IHDCM030 Interfaces homme-machine 69

Présentation d'un mémoire à la Louvain School of Management

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Présentation d'un mémoire à la Louvain School of Management

Ähnlich wie Présentation d'un mémoire à la Louvain School of Management (20)

Mehr von Jean Vanderdonckt

Mehr von Jean Vanderdonckt (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Présentation d'un mémoire à la Louvain School of Management