Towards Task-Based Linguistic Modeling for designing GUIs

Towards Task-Based Linguistic Modeling for designing GUIs

Iyad Khaddam, Nesrine Mezhoudi, Jean Vanderdonckt Université catholique de Louvain

Louvain School of Management (LSM)Place des Doyens, 1 – 1348 Louvain-la-Neuve (Belgium)

iyad.khaddam@uclouvain.be

Louvain School of Management Presentation (Louvain-la-Neuve, 17 March 2015) 2

Agenda

• What is the Linguistic perspective?• Yet another task model?• The Linguistic Task model• Example and Demo• Questions and answers

IHM’2015 Presentation (Toulouse, France, 29 October 2015) 3

The Linguistic Perspective

• A perspective to develop GUIs• Aims at enhancing maintainability• Based on the Nielsen’s Virtual Protocol for Interaction

Louvain School of Management Presentation (Louvain-la-Neuve, 17 March 2015) 4

GoalPragmatic

(Task)

Semantic

Syntactic

Lexical

Alphabetical

Physical

GoalPragmatic

(Task)

Semantic

Syntactic

Lexical

Alphabetical

Physical

Realizers

Linguistic Classification of Interaction

Nielsen’s Virtual Communication Protocol for Interaction (1986)

Louvain School of Management Presentation (Louvain-la-Neuve, 17 March 2015) 5

Level Key GUI Concept at the level

Goal Task

UI Elements SemanticSyntax-time Containers and

navigation elementsSyntax-Space

Widgets UI Widgets Widgets Properties

-

6

Louvain School of Management Presentation (Louvain-la-Neuve, 17 March 2015) 7

Example: Goal and Task levels

Fill Registration Information

Pay Conference

Fees

Register for a

conferenceGoal

TaskFinalize Order

Louvain School of Management Presentation (Louvain-la-Neuve, 17 March 2015) 8

Example: Goal and Task levels

Fill Registration Information

Pay Conference

Fees

Register for a

conferenceGoal

TaskFinalize Order

Louvain School of Management Presentation (Louvain-la-Neuve, 17 March 2015) 9

Example: Goal and Task levels

Fill Registration Information

Pay Conference

Fees

Register for a

conferenceGoal

TaskPay

Detailed Function

Detailed Function

Semantic

Louvain School of Management Presentation (Louvain-la-Neuve, 17 March 2015) 10

Example: The Semantic level

First Name

Last Name

Email

Special dietary needsDetailed dietary needs

Special Requirements

First Name

Last Name

Email

Special dietary needsDetailed dietary needs

Special Requirements

Personal Information

Conference Fees

Regular Fee

Discount Fee

Student Fee

Description for Discount

Uploaded file name

Upload letter

Regular Fee

Discount Fee

Student Fee

Description for Student

University letter

Uploaded file name

Info msg: no file

……. Finalize Order

Louvain School of Management Presentation (Louvain-la-Neuve, 17 March 2015) 11

Example: The Syntax-TimeFirst Name

Last Name

Email

Special dietary needsDetailed dietary needs

Special Requirements

First Name

Last Name

Email

Special dietary needsDetailed dietary needs

Special Requirements

Personal Information

Conference Fees

Regular Fee

Discount Fee

Student Fee

Description for Discount

Uploaded file name

Upload letter

Regular Fee

Discount Fee

Student Fee

Description for Student

University letter

Uploaded file name

Info msg: no file

Finalize Order

Example: The Syntax-Space

12

style 1

style 2

First Name

Last Name

Email

Special dietary needsDetailed dietary needs

Special Requirements

First Name

Last Name

Email

Special dietary needsDetailed dietary needs

Special Requirements

Personal Information Next Step

First Name Last Name

Email

Special dietary needsDetailed dietary needs

Special Requirements

First Name Last Name

Email

Special dietary needsDetailed dietary needs

Special Requirements

Personal Information

Next Step

Louvain School of Management Presentation (Louvain-la-Neuve, 17 March 2015) 13

Example: The Widget level

First Name

Last Name

Email

Special dietary needsDetailed dietary needs

Special Requirements

First Name

Last Name

Email

Special dietary needsDetailed dietary needs

Special Requirements

Personal Information Next Step

Label Text Box Drop-Down Button Panel

14

Example: The Widget Properties level

Louvain School of Management Presentation (Louvain-la-Neuve, 17 March 2015) 15

A Linguistic Modeling of GUIs

GM1 GM2

TM1 TM2

SM1 SM2

STM1 STM2

SSM1 SSM2

WM1 WM2

WPM1 WPM2

Goal

Task

Semantic

Syntax-time

Syntax-space

Widgets

Widgets Properties

Two different abstractions/notations on the level

Interface between the two levels

Louvain School of Management Presentation (Louvain-la-Neuve, 17 March 2015) 16

Agenda

• What is the Linguistic perspective?• Yet another task model?• The Linguistic Task model• Example and Demo• Questions and answers

IHM’2015 Presentation (Toulouse, France, 29 October 2015) 17

Linguistic Task model Requirements

R1: Well-defined criteria to separate goal and task levels.R2: Well-defined criteria to separate task and semantic levels.R3: A notation that supports identifying task input elements.

Louvain School of Management Presentation (Louvain-la-Neuve, 17 March 2015) 18

Review of existing task models

Task Model Stopping Criteria Linguistic Levels

GOMS judgment calls : The analyst needs to decide when to stop relying on a psychological theory or model for how people do the work

Covers Goal, Task and Semantic levels

CTT may continue and stop at the granularity of identifying needed user input element

Goal, Task, Semantic,

K-MAD elementary action Goal, Task, Semantic

R2: Task Decomposition Stopping Criteria

Louvain School of Management Presentation (Louvain-la-Neuve, 17 March 2015) 19

Review of existing task models

R2: Task Decomposition Stopping CriteriaGuerrero’s Model: criteria are based on changes on the work environment .They are:

Change of space: when the location of operations changes. Change of resource: a different resources is exploited.

Resources are of types: • User• Material (Hardware)• Immaterial (Software)

Change of time: a different time period in which the task is performed. Three type:

• interruption• waiting point (decision or accumulation) • permanence of execution unit (synchronization point).

Change of nature: tasks can have the following natures:• Manual, • Automatic• Interactive• Mechanical.

Louvain School of Management Presentation (Louvain-la-Neuve, 17 March 2015) 20

Review of existing task models

R3: A notation to identify task input elements

• The widely used notation is the CTT notation, with variations in different task models

• Temporal relations in CTT are not enough to identify task input elements.

Search Select

Flight No Airways Time

1 Jetair 12:30

2 Ryanair 14:50

3 EasyJet 18:45

Can we re-execute the search? Can the user change the already-selected flight?

Louvain School of Management Presentation (Louvain-la-Neuve, 17 March 2015) 21

Agenda

• What is the Linguistic perspective?• Yet another task model?• The Linguistic Task model• Example and Demo• Questions and answers

IHM’2015 Presentation (Toulouse, France, 29 October 2015) 22

The Linguistic Task Model

• Follows the HTA theory.• Categories of tasks: user, interactive, system,

mechanical and abstract.• Employs a configurable task state diagram => identify

task input elements.

23

The linguistic task state diagram

Louvain School of Management Presentation (Louvain-la-Neuve, 17 March 2015)

Created StartedOffered

Destroyed

Completed

Suspended

Repeat. If task is repeatable. Automatic

destroy. IIf the task is created by another task

cancel

startoffer

suspend

complete

resume

State-full Rollback

Stateless Rollback

Create

Errored

recover error

Manual state transitions identify task input elementsState transitions can have a type: User, automatic or based on a condition.

Louvain School of Management Presentation (Louvain-la-Neuve, 17 March 2015) 24

Task Relations

Event, Condition and Action (ECA ) rules

Event ON TS.State TS is the source task

Condition TD.State= “value” TD is the destination task

Action TD.Transition

Example:

ON Search_params.Completed If (Display_Flight.State=”Created”)

Display_Flight.offer

Search Params

Display Flights

On Completed

offer

State: Created

Louvain School of Management Presentation (Louvain-la-Neuve, 17 March 2015) 25

Task Repetition

Repetition can be implemented on a task T using relations like:

On T.Completed If (true) T.create

T is a dynamic task

The decision to create a a dynamic task is either a system or a user task.

A Justification to create a repetition task

Repetition is implemented using repetition tasks as:

On R.Completed If (true) T.create

R is called a pumping task

This would produce an infinite number of tasks

Louvain School of Management Presentation (Louvain-la-Neuve, 17 March 2015) 26

Agenda

• What is the Linguistic perspective?• Yet another task model?• The Linguistic Task model• Example and Demo• Questions and answers

Example on using the notation

27

Search for flight

Id Parent Task Justification Configuration1 / Search for a flight Grouping Abstract, Stateless rollback,

2 1 Fill Search params. - Interactive, State-full rollback, canCancel=true

3 1 Display Flights Grouping Abstract, Stateless rollback,

4 3 Repeat on flights Repetition. System, Stateless rollback, repetitionTask=true

5 3 Display a Flight From 2: Change in nature: interactive->system

System, Stateless rollback, canCancel=false

6 3 Select the Flight From 5: Decision point, System->Interactive

Interactive, Stateless rollback, canCancel=false

1. Search for flight

2. Fill Search Params. 3. Display Flights

4. Repeat on Flights 5. Display a flight 6. Select the flight

On Completed

offer

On Completed

create

On Completed

create

Abstract User SystemRepetitive Dynamic Task Categories

On Completed

Complete

On CompletedComplete

Any

Louvain School of Management Presentation (Louvain-la-Neuve, 17 March 2015) 28

Demo

Louvain School of Management Presentation (Louvain-la-Neuve, 17 March 2015) 29

Thanks for listening

Louvain School of Management Presentation (Louvain-la-Neuve, 17 March 2015) 30

Questions?