Visualizing User Interface Events:

Event Stream Summarization

through Signs

ICEIS - 2012 - July 1st

slides available at: slideshare.net/santanavagner

Vagner Figueredo de Santana

Maria Cecília Calani Baranauskas

Institute of Computing - University of Campinas

São Paulo - Brazil

Agenda

1. Motivation

2. Objective

3. Background

4. Method

5. Results

6. Discussion and conclusion

Motivation

1. Evaluation of User Interface (UI) is a key

task in the development of information

systems

2. UI events are now in use by a number of UI

evaluation tools

3. Summarization of UI events appears as a

vital task in order to study the behavior

contained in hundreds of log lines

4. The only way of directly communicating

an idea is through an icon (Peirce, 1974)

Objective

1. Present usage data in a summarized way

through a usage graph

2. Propose a set of signs to represent UI

events based on Peirce's Semiotics

Background

Icon libraries

1. Large open icon libraries for designing

websites or Graphical User Interface are

available in the Web.a. Ex.: Open Icon Library

2. There is no such library for representing UI

events

Background

Theoretical references

1. Peirce presents properties and details signs

based on trichotomies

2. This work follows the most important

trichotomy in which a sign can be classified

as an

a. Icon

b. Index

c. Symbol

Background

Theoretical references

1. Peirce presents properties and details signs

based on trichotomies

2. This work follows the most important

trichotomy in which a sign can be classified

as an

a. Icon

b. Index

c. Symbol

Interpretant

Representamen Object

Background

Theoretical references

1. Peirce presents properties and details signs

based on trichotomies

2. This work follows the most important

trichotomy in which a sign can be classified

as an

a. Icon

b. Index

c. Symbol

Interpretant

Representamen Object

Background

Theoretical references

1. Peirce presents properties and details signs

based on trichotomies

2. This work follows the most important

trichotomy in which a sign can be classified

as an

a. Icon

b. Index

c. Symbol

Interpretant

Representamen Object

Background

Theoretical references

1. UI events considered are the standard ones

presented by W3C

2. Events involve actions (transition of states)

3. Photographic streaking effect was used

Method

Participants

1. This work counted on the participation of 28

potential users of evaluation tools

2. Two evaluations were conducteda. The initial proposal of signs (15 participants)

b. The redesigned set of signs (13 participants)

3. Participants of the groups had no contact

among themselves

4. An interval of 9 months separated the

evaluations

Method

Experiment design

1. In each evaluation the participants were separated in

two halves (+ or - 1)

2. Three forms were used (10min. each)

a. Form A: The proposed signs in a random order

b. Form B: The usage graph representing the real use

of a Web page

c. Form C: Matching exercise of signs and the

meaning

3. Half of the participants received first the form A then the

form B (Group AB), lastly C

4. Other half received first the form B then the form A

(Group BA), lastly C

Method

Overview of the forms A and B

Results

Summary

Attribute 1st evaluation 2nd evaluation

Participants 15 (12 men, 3 womem) 13 (7 men, 6 womem)

Mean age (years) 28.35 (SD = 6.1) 28.09 (SD = 4.41)

Mean of correct

interpretation of the

usage graph (Form B)

40% 61.54%

Results

Summary

Results

Summary

Results

Redesign

1. Examples of redesign results

Results

Best vs. worst results

1. Best results (accur. > mean accur. + SD)

a. 1st evaluation: abort, mousemove, mousedown, and

submit

b. 2nd evaluation: abort, error, mousedown, and

submit

2. Worst results (accur. < mean accur. + SD)

a. 1st evaluation: change, click, dbclick, error, focus,

and unload

b. 2nd evaluation: change, mouseover, mouseout, and

unload

Results

Class of sign vs. UI event

1. Mapping relating events and class of sign

Candidate

Class of Sign

Event

category

UI events

Icon Direct users

actions

click, dbclick, keydown, keypress, keyup,

mousedown, mousemove, mouseout,

mouseover, and mouseup

Index Effect of users'

actions or

abstract events

change, dragdrop, move, resize, reset,

select, and submit

Symbol Browser

functioning

abort, blur, error, focus, load, and

unload

Discussion and conclusion

1. The proposed set is a first approach to deal with

the nonexistence of an open set of UI events

signs

2. The proposed representation of usage was

understood by most of participants

3. The mapping proposed may help designers

who want to create signs

4. The proposed set of signs can be reused by

other applications

5. Future work involves the study of representing

events of modern mobile apps

Thank you!

vsantana@ic.unicamp.br

Set of signs is available at

http://bit.ly/uievents

Acknowledgments:

Participants, colleagues, and FAPESP

(Fundação de Amparo à Pesquisa do Estado

de São Paulo) grant #2009/10186-9