Upload
vagner-santana
View
995
Download
0
Tags:
Embed Size (px)
DESCRIPTION
Slides of the presentation during the ICEIS 2012.
Citation preview
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!
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