Slides of the presentation during the ICEIS 2012.

1. 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

2. Agenda
1. Motivation
2. Objective
3. Background
4. Method
5. Results
6. Discussion and conclusion

3. 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)

4. 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

5. 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

6. 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

7. 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 Interpretant
a. Icon
b. Index
c. Symbol
Representamen Object

8. 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 Interpretant
a. Icon
b. Index
c. Symbol
Representamen Object

9. 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 Interpretant
a. Icon
b. Index
c. Symbol
Representamen Object

10. 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

11. Method
Participants
1. This work counted on the participation of 28
potential users of evaluation tools
2. Two evaluations were conducted
a. 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

12. 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

13. Method
Overview of the forms A and B

14. 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 40% 61.54%
usage graph (Form B)

15. Results
Summary

16. Results
Summary

17. Results
Redesign
1. Examples of redesign results

18. 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

19. Results
Class of sign vs. UI event
1. Mapping relating events and class of sign
Candidate Event UI events
Class of Sign category
Icon Direct users click, dbclick, keydown, keypress, keyup,
actions mousedown, mousemove, mouseout,
mouseover, and mouseup
Index Effect of users' change, dragdrop, move, resize, reset,
actions or select, and submit
abstract events
Symbol Browser abort, blur, error, focus, load, and
functioning unload

20. 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

21. 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