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 VanderdoncktLouvain School of Management

Université catholique de Louvain Place des Doyens, 1 – B-1348 Louvain-la-Neuve, Belgium

[email protected] – 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


Quelques recommandations• 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



Quelques recommandations• 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



Quelques recommandations• 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)


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 Séminaire de méthodologie du

mémoire

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)

Final User Interface (FUI)

Concrete User Interface (CUI)

Abstract User Interface (AUI)

Task & Domain (T&D)



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



Multi-path development based on CRF• Potential paths for platform adaptation



Multi-path development based on CRF• Potential paths for platform adaptation


User

Platform

Environment

Tasks

Abstract UI

Concrete UI

Final UI


Multi-path development based on CRF• 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




Tasks

Abstract UI

Concrete UI

Final UI

User

Platform

Environment

Tasks

Abstract UI

Concrete UI

Final UI

Tasks

Abstract UI

Concrete UI

Final UI




User

Platform

Environment

Tasks

Android Final UI

Abstract UI

Concrete UI

iOSFinal UI

Windows PhoneFinal UI

HTMLFinal UI




User

Platform

Environment

Tasks

Final UI1

Abstract UI

Concrete UI

Final UI2 Final UIn…




User

Platform

Environment

Tasks

Concrete UI1

Final UI1

Abstract UI

Concrete UI2

Final UI2

Concrete UIn

Final UIn

…

…




User

Platform

Environment

Tasks

Abstract UI1

Concrete UI1

Final UI1

Abstract UI2

Concrete UI2

Final UI2

Abstract UIn

Concrete UIn

Final UIn

…

…

…




User

Platform

Environment

Tasks1

Abstract UI1 Abstract UI2

Concrete UI2

Final UI2




Final UI1ms

Final UI1m1

Concrete UI1m

Concrete UI12

Tasks

Abstract UI1

Concrete UI11

Final UI1m1

User

Platform

Environment

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



1.3 Règles ergonomiques

• 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



1.3 Règles ergonomiques• Mise en évidence par la taille (maximum 3)

ggggggggggggggggggggggggggggTaille 1 (petit)Taille 2 (normal)Taille 3 (mis en évidence)



1.3 Règles ergonomiques• Mise en évidence par les symboles (max. 5)



1.3 Règles ergonomiques• Mise en évidence par le contraste (maximum 3)

Video normal Video inversé



1.3 Règles ergonomiques• Mise en évidence par la texture (max. 4)

0102030

40506070

8090

1er trim.

2e trim.3e trim.4e trim.

Est

Ouest

Nord



1.3 Règles ergonomiques• Eviter les vibrations



1.3 Règles ergonomiques• Mise en évidence par la couleur (de 6 à 8)



1.3 Règles ergonomiques• 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



1.3 Règles ergonomiques• 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?

– orderare changes in this variable perceived as ordered?

– lengthacross how many changes in this variable are distinctions perceptible?



Position• selective

• associative

• quantitative

• order

• length

100

0100



• 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– theoretically infinite but practically limited– association and selection ~ < 7 and distinction ~ 10

< < < < < <



Color• selective

• associative

• quantitative

• order

• length– theoretically infinite but practically limited– 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 systemsfor 1 user

10 to 50 systemsfor 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?



Consequence: transcoding needed



Example of animated transition• PivotViewer

Séminaire de méthodologie du mémoire 61[www.silverlight.net/learn/pivotviewer/]


Example of animated transition• InfoVis

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


Example of animated transition• Transition between statistical graphics

Séminaire de méthodologie du mémoire 63[Heer, Robertson, 2007]


Example of animated transition• 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


When use an animated transition?

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


When use an animated transition?• 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

Business