Quality in Human-Computer Interaction: Self-Explanatory User Interfaces by Model-Driven Engineering

1

Alfonso García Frey

Director: Gaëlle CalvaryCo-Director: Sophie Dupuy Chessa

Quality in Human-ComputerInteraction

Self-Explanatory User Interfacesby Model-Driven Engineering

2

Research Problem: Non Quality of UIs

3

Designer

User

Research Problem

Intended Quality

Perceived Quality

The designer is not the user

4

Research Problem: Explanations

0 2010

Different explanation types

5


0 2010


- Theory of Explanation in Philosophy of Science

Aristotle’s Theory of CausalityWhy (do things happen?)

[Aristotle, 370BC]

6


[Toulmin, 58]

0 2010




Why (reasons / arguments)

[Aristotle, 370BC]

1950

- Theory of Argumentation [Toulmin, 58]

7


[Toulmin, 58]

0

[Hughes, 89]

2010




How (does it work?) (can I do this?)

Why (reasons / arguments)

[Aristotle, 370BC]

1950

- Structural Explanations [Hughes, 89]

Internal parts as explanations

- Theory of Argumentation [Toulmin, 58]

8

Research Problem: Support Tools

Agents

Recommender Systems

Model-Based

Social-Network

Personal assistants

[Benyon, 93]

1970

Expert Systems [Neomycin, 81]

Avatars

Desktop facilities

2010

QA Systems [Lehnert, 78]

[Paterno, 95]

[Tooltip]

[Nichols, 12]

[Apple, 11]

[Ricci, 11]

A wide exploration of support tools

[Tensator, 12]

9

Research Problem: Limitations

Agents

Recommender Systems

Model-Based

Social-Network

Personal assistants

[Benyon, 93]

1970


Avatars

Desktop facilities

2010


[Paterno, 95]

[Tooltip]

[Nichols 2012]

[Apple]

[Ricci 11]

Problem 1: Coverage of explanations

[Tensator 2012]

1978

10


Agents

Recommender Systems

Model-Based

Social-Network

Personal assistants

[Benyon, 93]

1970


Avatars

Desktop facilities

2010


[Paterno, 95]

[Tooltip]

[Nichols, 12]

[Apple, 11]

[Ricci, 11]

Problem 2: Cost of the explanation

[Tensator, 12]

1997

11


Agents

Recommender Systems

Model-Based

Social-Network

Personal assistants

[Benyon, 93]

1970


Avatars

Desktop facilities

2010


[Paterno, 95]

Problem 3: Quality of the support

2012

[Tooltip]

[Nichols, 12]

[Apple, 11]

[Ricci, 11]

[Tensator, 12]

12

Research Problem: Topic

Agents

Recommender Systems

Model-Based

Social-Network

Personal assistants

[Benyon, 93]

1970


Avatars

Desktop facilities

2010


[Paterno, 95]

First class problem: Cost

[Tooltip]

[Nichols, 12]

[Apple, 11]

[Ricci, 11]

[Tensator, 12]

13


Model-Based [Paterno, 95]


14

Models

Explanations




15

Models

Explanations




Design models are suitable for supporting end users

in the interaction process.

Hypothesis

16

Research Problem





Hypothesis

Crystal Framework[Myers et al. 2006]

Cartoonist[Sukaviriya et al. 1990]

17

Research Problem





Hypothesis


Cartoonist[Sukaviriya et al. 1990]

18

Outline

Model-Based Self-Explanatory UIs for free2

Qualitative Evaluation3

Perspectives4

State of the Art in Model-Based Help systems1

Problem Statement and Focus Definition0

19

Outline


The QAP Problem Spacea

Related Workb

Overlapping Analysisc

20

State of the Art in Model-BasedThe QAP Problem Space

21


Coverage

22


Coverage Quality

23

State of the Art in Model-Based

Characterization


24


Characterization


25


Characterization


26


Characterization


27



Characterization


28



Characterization


29



Characterization


30



Characterization


31



Characterization


32



Characterization


33



Characterization


34



Characterization


35



Characterization


36

State of the Art in Model-BasedPervasiveCrystal

[Vermeulen et al. 2010]

Comparison of Help Systems

37

State of the Art in Model-BasedPervasiveCrystal

[Vermeulen et al. 2010]

Comparison of Help Systems

38

State of the Art in Model-BasedCartoonist

[Sukaviriya et al. 1990]

39

State of the Art in Model-BasedConclusion

[Vermeulen, 2010]

[Sukaviriya, 1990]

[Myers, 2006]

[Lim, 2010]

40


[Vermeulen, 2010]

[Sukaviriya, 1990]

[Myers, 2006]

[Lim, 2010]

Coverage:

41


[Vermeulen, 2010]

[Sukaviriya, 1990]

[Myers, 2006]

[Lim, 2010]

Coverage:

- no support for design rationale

42


[Vermeulen, 2010]

[Sukaviriya, 1990]

[Myers, 2006]

[Lim, 2010]

Coverage:


- no support for structure

43


[Vermeulen, 2010]

[Sukaviriya, 1990]

[Myers, 2006]

[Lim, 2010]

- dedicated purpose

Coverage:



44


Quality

[Vermeulen, 2010]

[Sukaviriya, 1990]

[Myers, 2006]

[Lim, 2010]

- dedicated purpose

Coverage:



45


Quality

[Vermeulen, 2010]

[Sukaviriya, 1990]

[Myers, 2006]

[Lim, 2010]

- dedicated purpose

Coverage:



- no initiative

46


Quality

[Vermeulen, 2010]

[Sukaviriya, 1990]

[Myers, 2006]

[Lim, 2010]

- dedicated purpose

Coverage:

- no simultaneous support for

- dynamicity, extensibility



- no initiative

47


Quality

[Vermeulen, 2010]

[Sukaviriya, 1990]

[Myers, 2006]

[Lim, 2010]

- dedicated purpose

Coverage:

- intrinsic and extrinsic

- no simultaneous support for

- dynamicity, extensibility



- no initiative

48

Outline



Perspectives4

State of the Art in Model-Based Help Systems1


49

Outline


Demonstratora

Conceptual Architectureb

Explanation Strategiesc

Conclusiond

50

Designer

User

Self-Explanatory UIs for freeDemonstrator

Models

51

Designer

User


Models

52

Designer

User


Models

53

Designer

User


Models

54


55

Designer

User

Models Metamodels Transformations

Self-Explanatory UIs for freeConceptual Architecture

56

Cameleon Reference Framework[Calvary 03]


57



[MacLean, 83]

QOC Model

58



[MacLean, 83]

QOC Model

Quality Model

[García Frey, 11]

59



60



[MacLean, 83]

QOC Model

61



[MacLean, 83]

QOC Model

62



[MacLean, 83]

QOC Model

63



[MacLean, 83]

QOC Model

64


ErgonomicCriterion

Questions Options Criteria

Moresuitablewidget?


[MacLean, 83]

QOC Model

65



[MacLean, 83]

QOC Model

Quality Model

[García Frey, 11]

66


67


ErgonomicCriterion

Questions Options Criteria

Moresuitablewidget?

68

Designer

User



69


Designer

User

Models Metamodels Transformations Functional core

70


Designer

User



Functional core

71


Designer

User



Functional core

72

Self-Explanatory User InterfacesExplanation Strategies: Usage Questions

73


How To select packs?

74


How To select packs?

75


How To select packs? Task Model

Abstract Model

Concrete Model

76


How To select packs? Task Model

Abstract Model

Concrete Model

77

Self-Explanatory User InterfacesExplanation Strategies: Design Rationale Questions

QOC Model

Why are enginesordered by price?

Why are engines Ordered by price?

Quality Model

78


QOC Model

Why are enginesordered by price?


Quality Model1

79

CRITERIA

Items of a selection list must be- either in an alphabetically ordered - or in an order significant for the

user in the context of the task.

[IBM, 89]


QOC Model


Quality Model

80

CRITERIA



[IBM, 89]


QOC Model


Quality Model

2

81

CRITERIA



[IBM, 89]


QOC Model


Quality Model

3

82

Functional core

Designer

User


Self-Explanatory UIs for freeImplementation


83

Functional core

Designer

User



Ecore Ecore


Ecore Ecore

84

Functional core

Designer

User



Ecore Ecore ATL


Ecore Ecore ATL

85

Functional core

Designer

User



Ecore JavaEcore ATL


Ecore JavaEcore ATL

86

Functional core

Designer

User



Ecore Java

Java

Vaadin

Ecore ATL


Ecore JavaEcore ATL

87

Functional core

Designer

User



Ecore Java

Java

Vaadin

EcoreOSGi ATL


Ecore JavaEcore ATLOSGi

88

Functional core


Ecore Java

Java

Vaadin

EcoreOSGi ATL



89

Functional core


Ecore Java

Java

Vaadin

EcoreOSGi ATL



- Metamodels dependent

90

Functional core


Ecore Java

Java

Vaadin

EcoreOSGi ATL



- Metamodels independent- Metamodels dependent

91

Functional core


Ecore Java

Java

Vaadin

EcoreOSGi ATL



- Metamodels independent

- QOC simplified- Design rationale


QOC Model

92

Functional core


Ecore Java

Java

Vaadin

EcoreOSGi ATL



- Metamodels independent

- QOC simplified- Design rationale

- Presentation


93

Self-Explanatory UIs for freeIn Summary

94


95

Self-Explanatory UIs for freeIn Summary

Full coverage of Questions

High potential for quality

- Design Rationale → Quality and QOC models - Structure → Cameleon models- Unification → Through explanation strategies

- Dynamicity → Models at runtime- Extensibility → Through explanation strategies

No cost

- By construction (model-based approach)

96

Outline



Perspectives4



97

Outline


Protocol Descriptiona

Phasesb

Conclusionc

98

Qualitative EvaluationObjectives

- HypothesisDesign models are suitable for supporting

end users in the interaction process.

- Three challenges:

- Cost- (by construction)

- Coverage

- Quality

- Approach: Experimental. Scenario based

- Use Case: Car shopping website

99

Qualitative EvaluationProtocol Description

Phase 1 Phase 2 Phase 3

100


- Objective: know participants - Questionnaire → profiles, help habits


Phase 1

101



- Objective: identification of problems- Demonstrator → Tasks. Think aloud


Phase 1

Phase 2

102



- Objective: identification of problems- Demonstrator → Tasks. Think aloud

- Objective: Models enough? Feedback- Self-Explanatory User Interface- Questionnaire


Phase 1

Phase 2

Phase 3

103

Qualitative EvaluationPhase 1

- Number: 20

Recruitment - Age: [23, 39] years, average 27.4

- Sex: 12 male, 8 female

- Familiar with new technologies

- 16/20 like new technologies

- 17/20 use new technology everyday

- 20/20 have found problems in their use

Habits

104


Select a Cabriolet model 20/20

Change the external color to Le Mans Blau 20/20

Select the Connected Drive pack 18/20

Select a diesel engine for less than 35.000€ 17/20

Choose a sport finishing touch 15/20

Ensure that the model has a navigation system. If not, add one

12/20

Select the maintenance contract of your choice 10/10

Ensure that the model has a Terra leather upholstery. If not, choose blue leather instead

12/20

Make sure that you can listen music in the car. If not, choose the best audio system available

12/20

Visualize the result and check that everything is OK. If not, try to solve the problem.

12/20

Task Accomplishment ratio

Easy

Moderated

Complicated

105


Full coverage of questions!

106



Usage

107



Usage

DR

108

Qualitative EvaluationPhase 3: Findings

Design models are suitable for supporting users

Good coverage is needed

Good acceptance but more work identified

- Most of questions identified as useful- Unsupported types of questions

- Good acceptance (How, Where)- Gain of time (How, Where)- Why questions → Better strategies!- Design Rationale → Push on!

109

Outline



Perspectives4



110

Outline

Perspectives4

Long Term Perspectivesc

General Contributionsa

Short Term Perspectivesb

111

Self-Explanatory UIs for freeConclusion

General: Design models are suitable for supporting end users

- Three challenges

- Cost

- Coverage

- Quality

112

Self-Explanatory UIs for freeConclusion: Challenges

- Presentation - Intrinsic and Extrinsic questions

- Initiative - Not covered

- Dynamicity - Fully generated support by keeping the models at runtime

- Extensibility - Through explanation strategies

Quality

Not perfect, but:

113


- Full coverage! - Design rationale- Structure

- Unification - Through explanation strategies

- New question types? - Add your own explanation strategy - Reuse it everywhere

Coverage

Good coverage:

114


Cost

- Free by construction - Model-Based approach

- But really no cost? - A minority number of metamodel dependent elements

- Complete models?

No cost

115


Cost

- Free by construction - Model-Based approach

- But really no cost? - A minority number of metamodel dependent elements

- Complete models?

No cost

For what type of non quality applications are we providing support?

116

Designer

User

Perspectives: Short TermClosing the loop

Models

117

Designer

User


Models

118

Designer

User


Models

119

Designer

User


Models

120

Designer

User


Models

121

Designer

User

Perspectives: Short TermUsability

Models

Question

Answer

122

Designer

User


Models

123

Designer

User


Models

Question

124

Designer

User


Models

Question

Answer

125

User

Designer

Perspectives: Long TermEnd User Programming

Models

126

User

Designer

Perspectives: Long TermEnd User Programming

Models

127

[email protected]

Thank you!It looks like you got questions.Can I help you?

128

Contributory Papers1. GARCÍA FREY, A., CALVARY, G., DUPUY-CHESSA, S., AND MANDRAN, N. Model-based self-explanatory UIs for free, but are they valuable? In Proceedings of the 14th IFIP TC13 Conference on Human-Computer Interaction (INTERACT’13), 2-6 September 2013, Cape Town, South Africa (2013), Springer

2. GARCÍA FREY, A., CALVARY, G., AND DUPUY-CHESSA, S. Users need your models! exploiting design models for explanations. In Proceedings of HCI 2012, Human Computer Interaction, People and Computers XXVI, The 26th BCS HCI Group conference (Birmingham, UK) (2012)

3. GARCÍA FREY, A., CÉRET, E., DUPUY-CHESSA, S., CALVARY, G., AND GABILLON, Y. Usicomp: an extensible model-driven composer. In Proceedings of the 4th ACM SIGCHI symposium on Engineering interactive computing systems (New York, NY, USA, 2012), EICS ’12, ACM, pp. 263–268

4. GARCÍA FREY, A., CÉRET, E., DUPUY-CHESSA, S., AND CALVARY, G. QUIMERA: a quality metamodel to improve design rationale. In Proceedings of the third ACM SIGCHI Symposium on Engineering Interactive Computing Systems (EICS 2011) (2011), ACM Press, pp. 265–270

5. GARCÍA FREY, A., CÉRET, E., DUPUY-CHESSA, S., AND CALVARY, G. QUIMERA - Toward an unifying quality metamodel. 2011 In Congrès INFORSID’11 (Lille, France, May 2011), 6 pages. (2011)

6. GARCÍA FREY, A., CALVARY , G., AND DUPUY-CHESSA, S. Self-explanatory user interfaces by model-driven engineering. In Proceedings of the CHI’10 Workshop on Model Driven Development of Advanced User Interfaces (MDDAUI’10) (2010), pp. 1–4

7. GARCÍA FREY, A., CALVARY , G., AND DUPUY-CHESSA, S. Xplain: an editor for building self-explanatory user interfaces by model-driven engineering. In Proceedings of the second ACM SIGCHI Symposium on Engineering Interactive Computing Systems (EICS 2010) (2010), ACM Press, pp. 41–46

8. GARCÍA FREY , A., CALVARY , G., AND DUPUY-CHESSA , S. Self-explanatory user interfaces by model-driven engineering. In Proceedings of the second ACM SIGCHI Symposium on Engineering Interactive Computing Systems (EICS 2010) (2010), ACM Press, pp. 341–344

9. DITTMAR, A., GARCÍA FREY, A., AND DUPUY-CHESSA, S. What can model-based ui design offer to end-user software engineering? In Proceedings of the 4th ACM SIGCHI symposium on Engineering interactive computing systems(New York, NY, USA, 2012), EICS ’12, ACM, pp. 189–194

Education

Quality in Human-Computer Interaction: Self-Explanatory User Interfaces by Model-Driven Engineering