public phd defense vivian motti

Vivian Genaro Mo,

École Polytechnique de Louvain Université catholique de Louvain

Louvain-‐la-‐Neuve, Belgium vivian.genaromo>@uclouvain.be

TriPlet: A Conceptual Framework for Mul<dimensional Adapta<on of User

Interfaces to the Context of Use

Place des Doyens, 1 – B-‐1348 Louvain-‐la-‐Neuve, Belgium hPp://www.lilab.be, hPp://www.lilab.eu, hPp://www.lilab.info

Louvain Interac<on Laboratory (LILab)

Louvain-la-Neuve, December 10th, 2013

§  IntroducBon §  ContextualizaBon §  MoBvaBon §  DefiniBons

§  TriPlet §  Goals §  Methodology §  Outcomes

§  ValidaBon §  Case Studies

§  Final Remarks

PresentaBon Outline

Louvain-la-Neuve, December 10th, 2013 3

ContextualizaBon §  InteracBve systems tend to consider convenBonal

contexts of use §  Able-‐bodied user §  Stable environment §  Desktop PC

4 Louvain-la-Neuve, December 10th, 2013

ContextualizaBon §  The interacBon currently occurs in non-‐convenBonal

contexts

§  Heterogeneity of §  Users §  PlaUorms §  Environments


Contexts


Contexts

Louvain-la-Neuve, September 23rd, 2013 7

ContextualizaBon


§  Users §  Heterogeneous group §  PlasBc user interfaces

§  Technology §  Fragmented device market

§  Environment §  Variety of contexts

§  Stakeholders §  Only limited support

MoBvaBons


§  Stakeholders §  Limited coverage of context

MoBvaBons

10 Published in CASFE’2013 and SigDoc’2013 [Mot13]

§  Context §  Any informaBon that is relevant for adapBng the

system to the scenario of the user [Abo99], [Dey00]

§  Adapta<on §  Modifying applicaBon aspects [Bro86], [Thi94],

[Bru96], [Lor00] §  Goal

§  higher usability and accessibility levels §  be^er user experiences

§  Context-‐aware Adapta<on

DefiniBons


Scope §  Target Audience

§  UI designers and developers

§  Focus §  InteracBve InformaBon Systems §  ValidaBon mainly on web apps and GUI’s

§  SDLC coverage


13

Methodology


14

Methodology


15

Methodology



Methodology

17

Methodology


State-‐of-‐the-‐Art

Applied Perspective •  Application Domains •  System Aspects •  Context Information

Support Perspective • Meta-models •  Frameworks • Design Spaces



Applied Perspective •  Application Domains •  System Aspects •  Context Information


§  Applica<on Domains §  Any interacBve

system §  E-‐health

[Rev00], [Bar05],

§  idTV [Yha12] §  Safety CriBcal

[Aca04]

§  System Aspects [Bru01] §  PresentaBon

[Lum02] §  NavigaBon

[Bru94], [Jan07]

§  Content

§  Context Informa<on §  User §  PlaUorm §  Environment

Applied PerspecBve


§  E-‐health, e-‐commerce, e-‐government, safety criBcal

ApplicaBon Domain

[Smi02]

[Bru02]


§  Naviga<on, Presenta<on, Content

System Aspects

Adaptive hypermedia technologies

Adaptive presentation

Adaptive multimedia presentation

Adaptive text presentation

Natural language

adaptation

Canned text adaptation

Inserting/removing fragments

Altering fragments

Stretchtext

Sorting fragments

Dimming fragments

Adaptation of modality

Adaptive navigation support

Direct guidance

Adaptive link sorting

Adaptive link hiding

Hiding

Disabling

Removal Adaptive link annotation

Adaptive link generation

Map adaptation

[Bru01]


§  User

Context InformaBon

[Dir09]

[Gue11]


§  Pla[orm

Context InformaBon

[Sch12]

[Neb11]


§  Pla[orm

Context InformaBon


§  Environment

Context InformaBon


Dimension Category Properties Classes Scenario

User Profile Age Children Teenager Adult Elderly

If the users are elderly, the targets must be larger, and drag and pinch gestures must be preferred [Kob11]

Attention Level

Distracted Regular Concentrated

If the user is distracted, then motion gestures may be preferred as the input modality [Neg12]

Interaction History

Often Regular Rare

If the menu items have a often access, they must be easily accessed [Gaj06]

Disabilities Cognitive Dyslexia Autism

If the user is dyslexic, the font size must be adapted [Dir09]

Visual Blind Color-blind

If user is blind, then haptic feedback must guide touch-based interactions [Gon11]

Domain Expertize Level

Numeracy Poor Medium High

If the user has poor numeracy, simplify the numerical information [Bau11]



Platform Device Network Bandwidth

Bits per second

If there are rate constraints in the network bandwidth, then remove channels or quality layers of the audio [Fei05]

Type Mobile Phone If mobile phones, then the UI must support multiple interaction methods (focus-based, pointer-based and touch-based) [W3C10]

Screen Large Screen Wall Display Vertically Curved

If large screen, then optimize the use of screen space and reduce the scrolling [Neb11]



Environment Environmental Factors

Temperature Cold Warm Hot

If temperature is cold, then display advertisements appropriate for winter [Hea12]

Noise Level Loud Moderate Silent

If noise level is loud, then replace audio content per text [Fei05]

Period Date Day Month Year

If commemorative date, then replace logo image [Doo12]



Support Perspective • Meta-models •  Frameworks • Design Spaces


Meta-‐Models

UsiXML [Luy11]

[Gan07]

K-Model[Fah05]


Meta-‐Models

[Lóp09] [Far07] [Mor12]


Meta Models

Louvain-la-Neuve, September 23rd, 2013 Published in RCIS’2013 [Mot13]

Frameworks

[W3C03]

[Fis12]


Frameworks

[Pre09]

[Bar05]

36

Frameworks

User

Platform Environment

CaFT, W3C, PersonisAD,

ACAMD, CAWE, MIMOSA,

CAAUIG, CF, FAME, LCAAF,

FMIA

CFAWS AEHS

PUC ROAM

LF

FAHD FAÇADE SUPPLE

XIF

Presentation

Navigation

Content

W3C, AEHS, FAÇADE, ACAMD, CAWE, MIMOSA,

CAAUIG, CF, LCAAF

PUC XIF LF

CFAWS

SUPPLE ROAM FAME

FAHD PersonisAD

CaFT JCAF

JCAF

FMIA


Context Information Support Application Aspects

User Plat. Env. Type Pres. Nav. Content

W3C[W3C03] + ++ + Meta arch. ++ + +

ACAMD [Jan07] + +++ + IDE, Arch. ++ ++ +++

CAWE [Ard08] +++ ++ + Framework,

Arch, Logic ++ ++ +

MIMOSA [Mal10] ++ +++ + Arch.,

Framework ++ ++ +++

CAAUIG [Han04] ++ ++ ++ Framework,

Language + + +

CF [Fis12] +++ + ++ Framework +++ +++ +++

LCAAF [Pre09] ++ ++ + Design

Method + + ++

Frameworks


Design Spaces 1990

Nig93

1995

Kar96

2005

Van05

Gaj06

Cou07

Cal07

Arh09

Van08

Rou08

Car09

2010

Boh10

Cal11


Design Spaces

Modalities, Fusion, Abstraction

What, When, Why, How, To What, Who, How many, With what, For what

Costs, Benefits, Frequency, Predictability, Performance, Satisfaction

Technique, Quality, Function

Target, Means, Time

Presence, Content Suggestion, Actionables


AdaptaBon Lifecycle

The ISATINE framework [Lóp08]

41

Goals

Meaning of an input expression

Meaning of an output expression

Action Specification

Shape of an input expression

Shape of an output expression

Execution

Interpretation

Intention Evaluation

System

Perception

User interface adaptation

Initiative

Proposal Decision

Execution

Goals





Action Specification





Execution

Interpretation

Intention Evaluation

System System

Perception

User interface adaptation

Initiative

Proposal Decision

Execution


AdaptaBon Lifecycle

42

Published in RRIOC [Mot13]


Shortcomings S1. Limited coverage of CAA dimensions S2. Focused impact on CAA S3. Specific applicaBon domain S4. ParBal support for guiding CAA S5. Moderate usability for CAA UI’s S6. Technology-‐dependency of the soluBons S7. Obsolescence of the support provided S8. Simple logic to address CAA S9. Lack of unificaBon of the vocabulary and approaches


Thesis Statement §  To propose, to define, to develop, and to instanBate a

mulBdimensional conceptual framework (TriPlet)

§  To provide stakeholders structured guidance for addressing context-‐aware adaptaBon of user interfaces


Tri

Ple

t CAMM CARF

CADS

Methodology


47

Tri

Ple

t CAMM CARF CADS


CAMM

48

Published in RCIS’2013 [Mot13] and RRIOC


CAMM: Agents


CAMM: Context


CAMM: Rules


CAMM: Models


CAMM: EnumeraBons


CAMM §  34 classes §  72 a^ributes §  37 methods §  39 relaBonships

§  11 associaBons §  4 aggregaBons §  21 composiBons §  4 inheritances

§  3 enumeraBons §  Classifier (2) §  Operator (8) §  PresentaBon type (29)


CARF §  Mind map diagram §  Provides alternaBve designs for

§  What §  How §  To what §  Why §  When §  Where §  Who

Quintilian

55

CARF


Steps followed to Extract AT’s §  Search on digital bases (ScienBfic and

Commercial) §  Context-‐aware adaptaBon §  And concepts closely related

§  SystemaBcally extract adaptaBon techniques §  A funcBon to change a system aspect according to a

given criteria

§  Locate the concepts within a common template §  Publish them in a wiki


References [Cou07]; [Ser10]

Description Re-molding consists in the reconfiguration the UI according to the target context: elements can be re-located, re-sized, added and supplied. Pagination and scrolling may be used.

Rationale Given a UI and a target context, the elements are re-arranged for the new context to assure usability

Example When the user changes the platform (e.g. from a Desktop PC to a Smartphone)

Context According to the platform, device, screen dimensions

Advantages The usability level will be improved

Disadvantages It is necessary to know before hand the best location for the elements, some of them may be suppressed

Source: http://www.alistapart.com/articles/switchymclayout


CARF §  7 core dimensions

§  What: 10 aspects types §  Why: 44 qualiBes §  How: 152 adaptaBon techniques §  To what: 480 context informaBon §  Who: 4 agent roles §  When: 3 stages §  Where: 3 locaBons


CADS §  8 dimensions §  4 ranges §  26 adaptability levels

§  It supports up to 3 applicaBons compared simultaneously


Methodology


ValidaBon §  Several approaches

§  InstanBaBon of the framework §  By exploraBon on selected case studies

§  Variability of decisions

§  2 illustraBve case studies §  Car rental

§  A reference case study for FP7 Serenoa and W3C WG on MBUI

§  Touris<c applica<on §  Weather, Weathaware, Walkaware §  A reference case study for ITEA UsiXML


Case Study §  3 implementaBons each

§  TriPlet support

§  Costumers §  Car Rental and TourisBc App

§  IT Team §  UI Designers, Developer Team and Project Manager


TriPlet support during the SDLC

68

Planning

Design

Development

Analysis

CADS CARF

CAMM

customers designers

development team

Car Rental Example

§  Task §  Users rent a car


Car Rental Example


Car Rental #1 – Context of Use A and B

B

A


Car Rental #1 – Context of Use A and B


Car Rental #1 – Context of Use A

74

§  Credits: Aldemar Aramayo, Alexander Damnjanovich (LSINF2356 – HCI course)


Car Rental #1 – Context of Use A


Car Rental #1 – Context of Use B


Car Rental #1 – CoU A (Video)


Car Rental #1 – CoU B (Video)


Car Rental #1 – CADS


Car Rental #2 – Context of Use A, B and C


Louvain-la-Neuve, September 23rd, 2013

Car Rental #2 – Context of Use A, B, C

82 82

A

B C

83

Car Rental #2 -‐ Video

Credits: Thibault Goemans, Michael Lacroix, Grégory Nuy^ens, SébasBen Scoumanne (LINF2356 – HCI course)


Car Rental #3 – Context of Use 1, 2 and 3


Car Rental #3 – Context of Use 1 and 2

A B C D


Car Rental #3 – Context of Use 3

E F

87

§  Credits: Javier Escolar, CrisBna Cachón, and Ignacio Marín (reference case study and demos Serenoa project)


Comparing CS1 – CADS


Model Voyager

Louvain-la-Neuve, September 23rd, 2013 90 Louvain-la-Neuve, December 10th, 2013

TourisBc ApplicaBon

§  Task §  Support users in planning their trip §  Weather informaBon §  Sightseeing

§  Credits: QuenBn Poncelet and François Debande mater thesis [Deb11]


TourisBc ApplicaBon §  Context

§  XML-‐based document


TourisBc ApplicaBon §  Decision Rules

§  Table


Weather – CARF


Weather – Smart phone


Weather – Tablet PC


Weather – Desktop PC

97

Weather – CADS


Walkaware -‐ CARF


Walkaware – Smart phone


Walkaware – Tablet PC


Walkaware – Desktop PC


Walkaware – CADS


Weathaware – CARF


Weathaware – Smart phone


Weathaware – Tablet PC


Weathaware – Desktop PC


Weathaware – CADS


Comparing CS2 – CADS


§  A conceptual framework for MulBdimensional Context-‐aware AdaptaBon of User Interfaces

§  TriPlet §  CARF

§  DescripBve Templates for AdaptaBon Techniques

§  CAMM §  Formal definiBon of concepts, their properBes and relaBonships

§  CADS §  A Design Space to analyze, evaluate and compare applicaBons

ContribuBons


§  Designer and Developer §  AlternaBves for design decisions §  Standard Framework enabling instanBaBons §  Unified terminology

§  End user §  QualiBes §  Completeness §  More suitable and context-‐aware UI’s

Benefits


§  Criteria vs. Discussion §  Extensibility §  Scalability §  Flexibility §  General purpose §  UBlity

EvaluaBon


§  Many trade-‐offs sBll exist §  Privacy vs. Context §  Context opBmizaBon vs. prioriBzaBon §  User control vs. system control

§  Decisions vary according to each scenario

Discussion


§  The framework supports stakeholders in the development of context-‐aware adaptaBon §  Providing a catalog that aids the design decisions §  Providing a meta-‐model that standardizes concepts §  Providing means to analyze the applicaBon

§  No toolkit is provided though

Final Remarks


§  One-‐size-‐does-‐not-‐fit-‐all §  AdaptaBon is needed

§  So far, not enough support §  Unified, integrated, complete

§  TriPlet §  Extensible §  Flexible §  Generic Purpose §  Technology-‐independent §  Domain-‐independent

Conclusion


§  AdaptaBon techniques as:

§  (Design) pa^erns §  Library of algorithms

§  A portal to publish the knowledge and tools §  Enabling search and retrieval of CAA Knowledge

§  A toolkit / Eclipse plugin to generate the computaBonal version of the framework

Future Works


§  Serenoa project that is funded by the European Union through its Seventh Framework Programme as a STREP Project no. FP7-‐ICT-‐258030

§  ITEA2-‐Call 8 UsiXML (User Interface eXtensible Markup Language) project that is funded by DirecBon Générale DGO6 of Région Wallonne

§  QualIHM (Région Wallonne, DirecBon générale operaBonnelle de l’Economie, de l’Emploi et de la Recherche DGO6)

§  “The WIST -‐ Des<ne research project (Design & EvaluaBon Studio For Intent-‐ Based Ergonomic Web Sites), funded by «WIST» Wallonie InformaBon Science & Technology research program (Walloon Region, ConvenBon n°315577, h^p://www.info.fundp.ac.be/DESTINE

Acknowledgments

LILAB


Publications §  Vivian Genaro Motti, Javier Escolar, Cristina G. Cachón, Ignacio Marín and Jean

Vanderdonckt: Managing Adaptation Rules for Context-aware Graphical User Interfaces. In: UMUAI 2013 (Under review)

§  Vivian Genaro Motti and Jean Vanderdonckt: A Unified Model for Context-aware Adaptation of User Interfaces. In: RRIOC 2013 (To appear)

§  Vivian Genaro Motti, Dave Raggett, Sascha Van Cauwelaert, Jean Vanderdonckt: Simplifying the Development of Cross-Platform Web User Interfaces by Collaborative Model-Based Design. In: SIGDOC 2013

§  Vivian Genaro Motti, Dave Raggett, Jean Vanderdonckt: Current Practices on Model-based Context-aware Adaptation. In: CASFE 2013: 17-23

§  Vivian Genaro Motti, Jean Vanderdonckt. 2013. A Computational Framework for Context-aware Adaptation of User Interfaces. In: RCIS 2013.

§  Ugo Braga Sangiorgi, Vivian Genaro Motti, François Beuvens, and Jean Vanderdonckt. 2012. Assessing lag perception in electronic sketching. In: NordiCHI '12

§  Charles-Eric Dessart, Vivian Genaro Motti, and Jean Vanderdonckt. 2012. Animated transitions between user interface views. In: AVI '12

§  Charles-Eric Dessart, Vivian Genaro Motti, and Jean Vanderdonckt. 2011. Showing user interface adaptivity by animated transitions. In: EICS '11


Courses §  VANDERDONCKT, J.; MOTTI, V. G. . Multi-Dimensional Context-Aware

Adaptation of Web Applications. In: ICWE’2011. Paphos-Cyprus (Course Presented).

§  MOTTI, V. G.; VANDERDONCKT, J. . Context-Aware Adaptation of User

Interfaces. In: Interact’2011. Lisbon-Portugal (Course Presented).

§  7 Deliverables (Serenoa) §  6 Working Papers (LSM)


Q+A


Weather – Smart phone



CAMM


CARF


CADS