Vitor Casadei

Extending User Interface Design Patterns with

accessibility recommendations to guide mobile
developers

Sorocaba, SP
19 de Março de 2018
 Vitor Casadei

Extending User Interface Design Patterns with

accessibility recommendations to guide mobile developers

Dissertação de mestrado apresentada ao Pro-

grama de Pós-Graduação em Ciência da Com-
putação (PPGCC-So) da Universidade Fed-
eral de São Carlos como parte dos requisi-
tos exigidos para a obtenção do título de
Mestre em Ciência da Computação. Linha de
pesquisa: Engenharia de Software e Gestão
do Conhecimento.

Universidade Federal de São Carlos – UFSCar

Centro de Ciências em Gestão e Tecnologia – CCGT
Programa de Pós-Graduação em Ciência da Computação – PPGCC-So

Orientadora: Profa. Dra. Luciana Aparecida Martinez Zaina

Coorientadora: Profa. Dra. Sahudy Montenegro González

Sorocaba, SP
19 de Março de 2018
 Casadei, Vitor
Extending User Interface Design Patterns with accessibility
recommendations to guide mobile developers / Vitor Casadei. -- 2018.
140 f. : 30 cm.

Dissertação (mestrado)-Universidade Federal de São Carlos, campus

Sorocaba, Sorocaba
Orientador: Profa. Dra. Luciana Aparecida Martinez Zaina
Banca examinadora: Prof. Dra. Sahudy Montenegro González, Prof. Dra.
Renata Pontin de Matos Fortes, Prof. Dr. Alexandre Álvaro
Bibliografia

1. Mobile Accessibility. 2. Interaction Design Patterns. 3. Virtual

Ethnography. I. Orientador. II. Universidade Federal de São Carlos. III.
Título.

Ficha catalográfica elaborada pelo Programa de Geração Automática da Secretaria Geral de Informática (SIn).
DADOS FORNECIDOS PELO(A) AUTOR(A)
Bibliotecário(a) Responsável: Maria Aparecida de Lourdes Mariano – CRB/8 6979
 Acknowledgments

I would like to thank my advisor, Dra. Luciana Zaina for the patience, guidance
and support over the last couple of years. You have set an example of excellence as a
researcher, mentor, instructor and as a friend.
I would like to thank Dr. Toni Granollers for all the help, enthusiasm, encouragement
and guidance in this research project.
I would like to thank CAPES for the financial support during this research project.
I would like to thank for the financial support of CAPES and grant#2017/03397-0,
São Paulo Research Foundation (FAPESP).
I would like to thank my thesis committee members Dr. Alexandre Álvaro, Dra.
Renata Pontin de Matos Fortes for accepting being part of this comittee: your discussion,
ideas, and feedback have been absolutely invaluable.
I would like to thank Dra. Sahudy Montenegro González for the valuable friendship
and support.
I would like to thank all my colleagues from the research group UXLERIS for the
assistance and cooperation during this research project.
I would like to thank all my undergraduate teachers for without them I would not
be able to achieve anything.
I would like to thank my friends Rafael, Eduardo, Breno, Mauricio, Mariana, Ian,
Camila and many others for all the laughs, fun and joyful moments that we spent together.
Finally, I would like to thank my family for the incredible support, for helping me
through the tough times, for the uninterrupted patience and love and for always believing
in my potential and for bearing with me in all moments.
 “Communication has the power to build bridges, to enable encounter and inclusion, and
thus to enrich society.“ (Vatican.va1 , Pope Francis)

1
https://goo.gl/Y5AY63
 Abstract
With the dissemination of mobile devices and the migration of activities that were once
executed only on desktop computers to smartphones and tablets, the concerns related
to accessibility in this environments have increased. Accessibility barriers can directly
affect the access of information: a user with difficulties on accessing important information
can become frustrated, absorbing the content with difficulty or even not being able to
assimilate any information. The difficulties encountered by a great variety of users on
mobile devices adds new challenges to the task of creating accessible applications for
everyone. However, the accessibility impact of mobile interface design patterns in the life
of disabled people has not been widely addressed in academic works. At the same time, the
community of mobile designers and developers has made significant advances in identifying
accessibility issues with design patterns on mobile interfaces, reporting these findings
in virtual spaces of discussions as forums and blogs. Against this scenario, this project
proposes recommendations that will help to mitigate or eliminate the accessibility barriers
created by Interface Design Patterns on mobile applications. These recommendations
were created based on two main studies. The first study was an accessibility evaluation
based on interaction design patterns in an e-learning application containing 21 participants
without disabilities that collected the emotional response to seven design patterns and
video analysis using communicability metrics. While the second study aimed to explore the
experiences and knowledge of professionals through an ethnographic study in 18 virtual
communities of mobile design and development with the goal of identifying issues on the
accessibility of Android mobile interface design patterns. This work presents two main
contributions. It presents an approach to support the employment of virtual ethnography
studies in software engineering as means to observe software development practice based
on the information available in online communities. It also proposes 22 recommendations
of 11 Interface Design Patterns and 11 Cross-section elements of mobile applications with
the goal of improving the overall accessibility of mobile devices.

Key-words: Mobile Accessibility, Design Patterns, Virtual Ethnography, Universal Design

 List of Figures

Figure 1 – Research Flow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

Figure 2 – Overview of the methodology . . . . . . . . . . . . . . . . . . . . . . . 33

Figure 3 – A participant performing an activity . . . . . . . . . . . . . . . . . . . 36
Figure 4 – Lookback’s interface: video analysis with CEM tags . . . . . . . . . . . 38
Figure 5 – User satisfaction by Design Pattern . . . . . . . . . . . . . . . . . . . . 39
Figure 6 – User dominance by Design Pattern . . . . . . . . . . . . . . . . . . . . 40
Figure 7 – Occurrence of CEM tags by activity . . . . . . . . . . . . . . . . . . . . 41

Figure 8 – Virtual Ethnography Approach . . . . . . . . . . . . . . . . . . . . . . 50

Figure 9 – Example of Memo on Mobile Pagination Interface Design Patterns . . . 68

Figure 10 –
Relationships between categories . . . . . . . . . . . . . . . . . . . . . 72
Figure 11 –
Relationships of category Navigation . . . . . . . . . . . . . . . . . . . 72
Figure 12 –
Relationships of category Input . . . . . . . . . . . . . . . . . . . . . . 76
Figure 13 –
Relationships of category List and Pagination . . . . . . . . . . . . . . 77
Figure 14 –
Relationships of category Icons . . . . . . . . . . . . . . . . . . . . . . 79
Figure 15 –
On/Off button . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
Figure 16 –
Relationships of category Data Tables . . . . . . . . . . . . . . . . . . . 81
Figure 17 –
Data Table design proposed on “Lessons from building mobile-friendly,
accessible data tables” . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
Figure 18 – Relationships of category Select and Dropdown . . . . . . . . . . . . . . 83
Figure 19 – Relationships of category Sliders . . . . . . . . . . . . . . . . . . . . . 84
Figure 20 – Relationships of category Carousel . . . . . . . . . . . . . . . . . . . . 86
 List of Tables

Table 1 – Number of publications by Domain (Information Source) . . . . . . . . 65

Table 2 – Relationship connectors on Nvivo 11 . . . . . . . . . . . . . . . . . . . . 67

Table 3 – Title of documents used in the Virtual Ethnography study . . . . . . . . 117

 Contents

1 INTRODUCTION . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
1.1 Research Goals . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
1.2 Methodology . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
1.3 Contributions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
1.4 Organization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

2 FUNDAMENTALS AND RELATED WORKS . . . . . . . . . . . . . 25

2.1 Accessibility . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
2.2 Design Patterns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
2.3 Universal Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
2.4 Related Works . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

3 EXPLORATORY EXPERIMENT . . . . . . . . . . . . . . . . . . . . 31
3.1 Preparation and Execution . . . . . . . . . . . . . . . . . . . . . . . . 33
3.1.1 Participants . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
3.1.2 Apparatus and Artifacts . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
3.1.3 Procedure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
3.2 Analysis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
3.3 Findings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
3.3.1 User Perspective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
3.3.2 Researcher Perspective . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
3.4 Discussion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
3.5 Conclusions and Contributions . . . . . . . . . . . . . . . . . . . . . . 44

4 VIRTUAL ETHNOGRAPHY APPROACH FOR STUDYING ON-

LINE COMMUNITIES IN SOFTWARE ENGINEERING . . . . . . . 47
4.1 Fundamentals of Ethnography and Virtual Ethnography . . . . . . . 47
4.1.1 Virtual Ethnography . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
4.2 Virtual Ethnography Approach . . . . . . . . . . . . . . . . . . . . . . 48
4.2.1 1st Step: Planning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
4.2.1.1 Ethnography Protocol Definition . . . . . . . . . . . . . . . . . . . . . . . . . 50
4.2.1.2 Selection of Information Sources . . . . . . . . . . . . . . . . . . . . . . . . . 54
4.2.2 2nd Step: Ethnography Execution . . . . . . . . . . . . . . . . . . . . . . 55
4.2.3 3rd Step: Data Analysis . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
4.3 Conclusions and Contributions . . . . . . . . . . . . . . . . . . . . . . 56
5 INVESTIGATING ACCESSIBILITY ISSUES OF INTERACTION
DESIGN PATTERNS . . . . . . . . . . . . . . . . . . . . . . . . . . 59
5.1 Virtual Ethnography in Practice . . . . . . . . . . . . . . . . . . . . . 59
5.2 Contextualization of the research . . . . . . . . . . . . . . . . . . . . 59
5.3 Pre-planning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
5.4 Planning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
5.4.1 Ethnography Protocol Definition . . . . . . . . . . . . . . . . . . . . . . . 61
5.4.2 Selection of Information Sources . . . . . . . . . . . . . . . . . . . . . . . 63
5.5 Ethnography Execution . . . . . . . . . . . . . . . . . . . . . . . . . . 63
5.5.1 Source Exploration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
5.5.2 Data Selection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
5.5.3 Data Storage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
5.6 Data Analysis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
5.6.1 Grounded Theory process . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
5.7 Findings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
5.8 Conclusions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69

6 INTERACTION DESIGN PATTERN ACCESSIBILITY . . . . . . . 71

6.1 Interface Design Patterns . . . . . . . . . . . . . . . . . . . . . . . . . 71
6.1.1 Navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
6.1.1.1 Description . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
6.1.1.2 Accessibility Barriers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
6.1.1.3 Recommendations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
6.1.2 Hamburger Menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
6.1.2.1 Description . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
6.1.2.2 Accessibility Barriers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
6.1.2.3 Recommendations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
6.1.3 Tab Navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
6.1.3.1 Description . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
6.1.3.2 Accessibility Barriers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
6.1.3.3 Recommendations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
6.1.4 Input . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
6.1.4.1 Description . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
6.1.4.2 Affected Barriers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
6.1.4.3 Recommendation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
6.1.5 List and Pagination . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
6.1.5.1 Description . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
6.1.5.2 Accessibility Barriers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
6.1.5.3 Recommendations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
6.1.6 Icons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
6.1.6.1 Description . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
6.1.6.2 Accessibility Barriers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
6.1.6.3 Recommendations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
6.1.7 Data Tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
6.1.8 Description . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
6.1.8.1 Accessibility Barriers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
6.1.8.2 Recommendations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
6.1.9 Select and Dropdown . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
6.1.9.1 Description . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
6.1.9.2 Accessibility Barriers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
6.1.9.3 Recommendations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
6.1.10 Sliders . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
6.1.10.1 Description . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
6.1.10.2 Affected Barriers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
6.1.10.3 Recommendations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
6.1.11 Carousel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
6.1.11.1 Description . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
6.1.11.2 Affected Barriers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
6.1.11.3 Recommendations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
6.2 Cross-Sectional Elements . . . . . . . . . . . . . . . . . . . . . . . . . 87
6.2.1 Contrast . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
6.2.2 Color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89
6.2.3 Content Accessibility . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90
6.2.4 Screen Readers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92
6.2.5 Universal Accessibility . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
6.2.6 Text and Fonts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
6.2.7 Tap/Touch area . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95
6.2.8 Zoom of Content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95
6.2.9 Gestures . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
6.2.10 Errors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
6.2.10.1 Error Prevention . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
6.2.10.2 Error Handling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
6.2.11 Links and Buttons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
6.3 Conclusions and Contributions . . . . . . . . . . . . . . . . . . . . . . 99

7 CONCLUSION . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101
7.1 Contributions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103
7.2 Limitations and Future Works . . . . . . . . . . . . . . . . . . . . . . 103
Bibliography . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105

APPENDIX A – LIST OF DOCUMENTS SELECTED IN THE VIR-

TUAL ETHNOGRAPHY . . . . . . . . . . . . . . 113

APPENDIX B – CHARACTERIZATION FORM . . . . . . . . . . . 119

APPENDIX C – ACCOMPANIMENT FORM . . . . . . . . . . . . 123

APPENDIX D – OBSERVATION FORM . . . . . . . . . . . . . . . 135

APPENDIX E – FORM: SURVEY ON KNOWLEDGE BASES OF

MOBILE INTERFACE DESIGN PATTERNS . . . 137
 19

1 Introduction

For a long time Accessibility has been one of the focal points on Software Develop-
ment along with Usability and User Experience. There are initiatives, such as the World
Wide Web Consortium (W3C), that define guidelines for Accessibility on the web. The
most common example is the Web Accessibility Initiative (WAI) which define accessibility
recommendations for the web on desktop and mobile devices (HARPER; THIESSEN;
YESILADA, 2014). The initiative also supports the study and development of solutions
that help to improve the use of mobile devices as a mean of social integration, by over-
coming the problems and difficulties that users might face when using mobile devices
(KAPLAN; HAENLEIN, 2010).
It’s also not new that the use of mobile devices for Internet Browsing has increased
around the world and in some contexts these devices even started to replace personal
computers and laptops due to the more attractive cost and the mobility and convenience
provided. Currently in Brazil, 93 million of people own a smartphone and 68 million use
the mobile device for Internet browsing according to a research released in 2016 (NIELSEN,
2016). With a population of 200 million, this means that a quarter of the population
accesses the Internet through a mobile device and new research indicates that as the
number of smartphones in Brazil has increased 112% since 2010, it’s expected a greater
increase until 2020 (MAZETTO, 2015).
Although there are guidelines that help to improve accessibility issues on mobile,
these recommendations are mostly abstract (BRAJNIK, 2006). The user interface interac-
tion is essential for accessing any content and in many cases problems with the interface
may lead to Accessibility Barriers (BRAJNIK, 2008), which are conditions that make it
difficult for people to achieve a goal when using the web on mobile or desktop devices.
Therefore, the interaction of the user with a mobile interface needs to be deeply explored
in terms of Accessibility aiming to mitigate the accessibility barriers so that any user will
have access to information available in the web.
While the usual focus of accessibility is on designing for people with disabilities, the
outcomes of the research in accessibility also brings benefits to everyone, including people
that do not have a disability, but have situational limitations (HENRY; ABOU-ZAHRA;
BREWER, 2014). Situational limitations are any kind of accessibility problem that a
person without disabilities may experience due to environmental characteristics such as
excess or lack of luminosity that may difficult to see the information on the screen, loud
noise that will spoil the experience of listening to a music or video, limited bandwidth
and small screens for example. For this purpose, Universal Design brings the process of
20 Chapter 1. Introduction

creating solutions that comply with the needs of the widest possible range of situations
and for all audiences so that any person may use the same interface and have access to
the same content (MCGUIRE; SCOTT; SHAW, 2006).
In this context, the accessibility barriers faced by users with disabilities in desktop
platforms are also faced by users of mobile devices (YESILADA; BRAJNIK; HARPER,
2011a). And while smartphones provide mobility, convenience and access to information,
there are physical characteristics and characteristics related to the context of use of the
technology that hinder the access to information such as the small size of the screen
(and the wide range of resolutions), processing limitations, Internet signal shortages and
difficulties in entering information and navigation.
Interface Design Patterns (NILSSON, 2009) can be used as means to assess ac-
cessibility of mobile interfaces. Design Pattern is an interface element, that is a widely
used concept on Software Development (RIBEIRO; CARVALHAIS, 2012a) and there are
several Design Pattern libraries available for consultation. These patterns are defined
on what already exists and what works in specific situations, however, sometimes these
patterns are not given much importance in terms of user interaction with the pattern and
the usability and accessibility aspects that comes along.
Given the exposed context this masters project evaluates the accessibility of Mobile
Interaction Design Patterns under the perspective of Universal Design in order to contribute
to developers and designers by identifying Accessibility Barriers related to common patterns
and giving recommendations on how to avoid or minimize the barriers to any target group.
It is believed that the results of this project will contribute to the Human Computer
Interaction (HCI) area on accessibility for mobile and will be easily extended to other
Design Patterns.
In order to identify the accessibility barriers related to the Interface Design Patterns
and understand how these accessibility issues are addressed by designers and developers,
the technique of Virtual Ethnography was chosen. Ethnography is a common research
method recognized as a qualitative approach to understand social groups and work practices
(SHARP; DITTRICH; SOUZA, 2016), thus, the use of Virtual Ethnography is fitted to
the goal of this research as it helps to comprehend how the community of designers and
developers deals with accessibility barriers on Mobile Interface Design Patterns.

1.1 Research Goals

The main goal of this project is to propose recommendations to guide developers
and designers in the use of Interaction Design Patterns during the elaboration of mobile
interfaces in order to minimize the insertion of Accessibility Barriers in the interaction
with mobile applications. The proposal extends the description of the Interaction Design
1.2. Methodology 21

Patterns adding recommendations about the barriers that the pattern could insert into
the interaction. This project investigated Accessibility Barriers present in a selected set of
Interaction Design Patterns from the Android platform, however, it’s easy to extend this
research to all Interaction Design Patterns.
As specific goals of this research project, can be highlighted:

• An investigation on the accessibility impact that the implementation of Interaction

Design Patterns can have on mobile devices;

• A study on the use and understanding of mobile Interaction Design Patterns;

• A study to understand the solutions for common accessibility barriers related to

mobile Interaction Design Patterns by the community of developers and designers;

• Propose recommendations regarding the Interaction Design Patterns in terms of

accessibility.

1.2 Methodology
In order to achieve the proposed objectives, this study was conducted using bib-
liographic research, exploratory study and virtual ethnography (WOHLIN et al., 2012;
CHARMAZ, 2014).

Figure 1 – Research Flow

The steps of the methodology are identified by the letter S and enumerated and
Figure 1 presents the flow of the steps:
22 Chapter 1. Introduction

S1 - Literature Review: a literature review study about the main topics involving
this project as a form to identify the state of the art, new trends and discoveries in
the research field. This step was continuous through the research project so that the
bibliography and related works are up to date and relevant.

S2 - Exploratory Study: this steps contains the elaboration and execution of a user
experimentation. The outcomes of the study supported the identification of the main
design patterns which insert barriers of accessibility.

S3 - Virtual Ethnography on Design Patterns: an investigation on blogs and

forums of developers and designers that shall bring more light on accessibility
barriers related to Design Patterns.

S4 - Recommendations: This step considered the results of S2 and S3 in order to

outline the approach of this project.

S5 - Publication of results: this step was used for the publication of the results
through scientific papers, conferences, project reports and the master dissertation.

1.3 Contributions
Through the related works, the exploratory study on the accessibility of the
Interaction Design Patterns on mobile applications and the virtual ethnographic study,
the contributions listed below were obtained:

• Elaboration and execution of a study with end users to survey the problems of
interaction with mobile design patterns. Besides the findings, the study design allows
its replication;

• Systematization of a process for the execution of virtual ethnography through the

adaptation of the foundations of traditional ethnography and the inclusion of new
elements;

• Survey of problems with interaction mobile design pattern through the execution of
a virtual ethnography in virtual communities;

• Qualitative and in-depth analysis of the problems encountered;

• Elaboration of recommendations based on accessibility problems encountered.

• Publication: "CASADEI, V. et al. Accessibility evaluation of design patterns on moo-

dle mobile. In: Brazilian Symposium on Computers in Education (Simpósio Brasileiro
de Informática na Educação-SBIE). [S.l.: s.n.], 2016. v. 27, n. 1, p. 688" (CASADEI
et al., 2016).
1.4. Organization 23

• Publication: "CASADEI, V.; GRANOLLERS, T.; ZAINA, L. Investigating ac-

cessibility issues of ui mobile design patterns in online communities: A virtual
ethnographic study. In:Proceedings of the XVI Brazilian Symposium on Human
Factors in Computing Systems.New York, NY, USA: ACM, 2017. (IHC 2017), p.
33:1–33:10." (CASADEI; GRANOLLERS; ZAINA, 2017)

1.4 Organization
This dissertation consists of seven (7) chapters involving an introduction to the
work produced during the master’s project, related works, presentation of two studies and
conclusions.
On Chapter 1, an introduction to the main topics relevant to this study are
presented, as well as the methodology and research goals.
On Chapter 2 important concepts are explained and the state of the art and related
works to this research are presented. On Chapter 3 an exploratory experiment is presented,
in this chapter a study on a mobile application was performed and the results are discussed.
On Chapter 4 an approach to conduct virtual ethnography on online communities
is presented as an extended guide to aid researchers on similar ethnographic studies. On
Chapter 5 a virtual ethnography study is presented and discussed.
Chapter 6 presents the findings of the ethnographic study and recommendations
for the implementation of interaction design patterns on mobile applications with the goal
of mitigating accessibility barriers introduced with the design patterns.
Finally, Chapter 7 concludes this work by discussing the findings of this project.
 25

2 Fundamentals and Related Works

This chapter presents the main concepts, fundamentals and related works of this
project. The search and gathering process of these related works was based in two main
strategies: manual search and search for keywords.
The manual search for related works was done by exploring known conferences
and scientific journals on the area of Human-Computer Interaction (HCI) such as the
Conference on Human Factors in Computing Systems (CHI) e o Brazilian Symposium on
Human Factors in Computing Systems (HCI Brazil) as well as the International Journal
of Human-Computer Studies. On the other hand, the search by keywords was performed in
well known electronic scientific databases such as Google Scholar1 , ACM Digital Library2 ,
Scopus3 , IEEE Xplore4 and Web of Knowledge5 . Thus, this section compiles important
works used in the development of this masters project.
The following keywords were used (among others) in the process of searching
for related works: Mobile Accessibility, Accessibility Studies, Accessibility Guidelines,
Universal Design, HCI Accessibility, Mobile Interaction Design Patterns, Ethnography,
Virtual Ethnography and Accessibility Research.

2.1 Accessibility
The Web Accessibility Initiative (WAI) of the World Wide Web Consortium (W3C)
(HARPER; THIESSEN; YESILADA, 2014) presents guidelines, strategies and resources
related to accessibility in various contexts. However, some guidelines defined by W3C are
not applicable or adapted to mobile applications and as the web become more mobile and
ubiquitous, the need for accessibility in any context and device is urgent (ABOU-ZAHRA;
BREWER; HENRY, 2013).
Existing standards and guidelines (such as WCAG from W3C) do not give clear
instructions for designers on how to design accessible solutions nor give developers instruc-
tions on how to create accessible systems. Because of this, in most situations, developers
try to make a website accessible by simply adapting the software only at the end of the
development, which tends to the existence of accessibility gaps and increased cost in the
final product (NEWELL; GREGOR, 1988).
1
Link: scholar.google.com.br/
2
Link: dl.acm.org/
3
Link: www.scopus.com/home.uri
4
Link: ieeexplore.ieee.org/
5
Link: www.webofknowledge.com/
26 Chapter 2. Fundamentals and Related Works

Alongside the impairments and accessibility barriers that users encounter while
using a website, their mood is directly related to the overall experience and the accessibility
of a website or app is beneficial for everyone as it improves the usability for every user. This
is shown by Pascual et al. (2013) (PASCUAL et al., 2013) in a study conducted with 13
participants that who were blind or low-vision users and also users without disabilities. The
goal of the study was to record the mood of the users (in terms of interaction efficiency,
effectiveness and satisfaction) while using websites with and without accessibility barriers
and the results showed the elements with the highest rate of frustration on each group of
users.
Another important factor is that people with disabilities are not the only ones that
have problems using websites and mobile devices, as there is an exponential growth of the
elderly population in the world that suffers from a wide variety of disabilities developed
by the advanced age (LEME; ZAINA; CASADEI, 2015). In the mobile context such users
have even more difficulties, as they mostly are not used to mobile technology and with the
attention on this group of users, a set of guidelines was collected from various sources of
the literature and presented by Díaz-Bossini e Moreno (2013) (DÍAZ-BOSSINI; MORENO,
2013) in order to help designers and developers to better understand and to build solutions
that meet the needs of this growing parcel of the population.

2.2 Design Patterns

The concept of Design Pattern was first developed in the architecture field in the
late 1970s with the goal of being components of language that can be used as dialog about
organizations and development process. Although the concept was born on a very different
field, it can be easily applied to software and interactive design. Design Patterns can be
understood as best practices or some sort of heuristics of well knows design problems
and its solutions as presented on the work of Hoober e Berkman (2011) (HOOBER;
BERKMAN, 2011) in 76 patterns organized in 13 categories.
As there are many classifications and specific applications for Design Patterns,
many studies are made on individual categories of patterns as the work presented by
Sampaio (2013) (SAMPAIO, 2013) in which a tool was developed to automatically adapt
web sites navigation menu in different contexts of screens, resolutions and devices according
to common menu design patterns that are organized into two orders of navigation: simple
navigation and multi-level navigation.
There are various pattern libraries that can be consulted during the design process
of web and mobile interfaces and Ribeiro e Carvalhais (2012b) (RIBEIRO; CARVALHAIS,
2012b; RIBEIRO, 2012) presents a comparative analysis of some of the most known
libraries in order to propose 21 Design Patterns for general purpose derived from studies
2.3. Universal Design 27

in mobile and web design with the objective of helping designers and developers to design
mobile and web interfaces. The patterns defined are later applied to three case studies in
order to ascertain about their usefulness and applicability.

2.3 Universal Design

Universal Design is the process of developing a system or product that can be used
by any person with any ability, in any situation or environment. In HCI, Universal Design
is mainly related to accessibility in the development of computer systems for people with
and specially for people without disabilities in situations that can limit the ability to see,
hear, understand, concentrate and control motor movements (HENRY; ABOU-ZAHRA;
BREWER, 2014). It is important to point out that many accessibility barriers faced by
people with disabilities also are witnessed by other users, however, for disabled people,
accessibility is essential in order to actually have access to information, while people with
situational accessibility, this concern is mere convenience (HEUMANN, 1998).
In order to present better understatement to designers and developers in the
development of accessible systems by comparing problematic situations with real life
conditions, Fogli, Provenza e Bernareggi (2014) (FOGLI; PROVENZA; BERNAREGGI,
2014) presents a design pattern language for accessibility based on W3C specifications
and concerned with general design methods of universal access to support designers and
developers since the beginning of the development and design process.

2.4 Related Works

In the academic area mobile devices present a great potential to improve the
learning experience of any student by providing mobility and easy access to information
alongside several benefits in one device. In order to determine the existence of academic
mobile applications that aids visually impaired users and to understand the usage of these
applications, a systematic review was performed in the work of Silva, Braga e Damaceno
(2015) (SILVA; BRAGA; DAMACENO, 2015). As a result of this work, it was identified
that the accessible mobile applications had the impact of rehabilitation and educational
inclusion of visually impaired users and that this could be applied to users with other
types of disabilities as well.
In order to prevent accessibility barriers to be created by the lack of conformity with
accessibility guidelines defined by W3C (CALDWELL et al., 2008), a tool was developed
as the result of the research presented by Gabrielli et al. (2005) (GABRIELLI et al.,
2005). This tool acts as a reminder and obligates content producers of e-learning platforms
to follow (to some extent) the guidelines regarding content presentation such as textual
28 Chapter 2. Fundamentals and Related Works

description of images and other media files and transcripts or alternative text of video and
audio contents. A similar approach focused on persons with visual impairment is presented
by Ulbricht et al. (2012) (ULBRICHT et al., 2012).
Many efforts have been made in the challenge of improving accessibility on mobile
devices for users with different disabilities. Díaz-Bossini e Moreno (2014) (DÍAZ-BOSSINI;
MORENO, 2014) present a valuable set of guidelines to achieve accessibility in mobile
interfaces for elderly users as a result of a literature review study of academic works,
standards and best practices of mobile web design. Also as people with disabilities are
often excluded from the society by not having access to information through technology
(and older people are included in this group), the guidelines were compared with a survey
of three mobile Android apps, that were advertised as accessible, where all applications
showed accessibility problems.
Some efforts have been developed aiming to solve accessibility gaps to visually
impaired users. A literature review was carried out resulting in the mapping of 65 existing
accessibility problems in the interaction with mobile devices (DAMACENO; BRAGA;
MENA-CHALCO, 2017). The accessibility issues were classified in seven groups of problems
which contributed to the establishment of a set of recommendations to improve accessi-
bility. Concentrating on visually impaired issues, Color Vision Deficiency (CVD), which
means the difficulty or inability recognize a certain color or to perceive color differences,
can be seen as another important disability that affects many people in the world. A
solution that adapts colors preserving properties of the original colors was proposed by
Zhou, Bensal e Zhang (2014) (ZHOU; BENSAL; ZHANG, 2014).
Concerning on accessibility issues for elderly, a usability testing of three mobile
applications exploring navigation and interaction of older users was conducted. The
evaluation results led the authors to propose recommendations regarding the design of
mobile applications for older adults (BARROS; LEITãO; RIBEIRO, 2014). Similarly,
Leitao e Silva (2012) (LEITAO; SILVA, 2012) investigates the optimal target and spacing
size between elements in mobile applications intended for older adults. In the study, the
gestures of tap and swipe were used by 40 older users in two tasks on a mobile application.
From the data collected in the experimentation, the authors recommended appropriate
implementations of large tap and large swipe targets for the use of mobile applications by
the elderly.
The work presented by Jemni, Laabidi e Ayed (2014) (JEMNI; LAABIDI; AYED,
2014) defines accessibility in e-learning as the ability of e-learning environment to adjust
to the needs of any learner with any disability, which involves content, presentation and
interaction and also an extension for Moodle that seeks to improve its accessibility. Some
advantages of the use of e-learning systems are pointed in comparison with the traditional
classroom education for people with disabilities, which are peer support, proactivity and
2.4. Related Works 29

flexibility in time and space. It’s also important to remember that assistive technologies
do not remove all the accessibility barriers of a system as some barriers are created by the
lack of study and knowledge during the design.
On Virtual Ethnography the work published on software engineering and computing
related practices is not numerous. However, important works have been published as the
ethnographic study conducted on e-learning context that analyzed the experience of
students to understand the relation between the effectiveness of the learning methods
with the motivation of the students (KRUGER, 2006). And the study conducted on
online message boards by Steinmetz (2012a) (STEINMETZ, 2012a) that aimed to better
understand the topics of space, identity and ethics on virtual ethnography by exploring
these issues on an actual virtual ethnography study.
Virtual ethnography shifts the location of observation to online spaces adapting the
classical ethnography directions (BOELLSTORFF, 2012). Sharp, Dittrich e Souza (2016)
(SHARP; DITTRICH; SOUZA, 2016) suggest five dimension which aid the researcher in
the planning of an ethnography: (a) participant and non-participant observation (levels of
participation between only observation and total participation (HINE, 2008)); (b) duration
of the field study; (c) space and location; (d) use of theoretical underpinnings to support
the conduction and the analysis of results; and (e) the ethnographers’ intent in undertaking
the study. In virtual ethnography, the first puzzle that the researcher must face is choosing
a participation role in the research. While some researchers in the literature may agree
that some degree of participation is necessary, the nature of the community may force the
researcher to adopt an observer or hybrid position in the study (HINE, 2008).
Lastly, one important work on virtual ethnography analyzed online message boards
conversations in the online community with focus and detail on three specific aspects of
the research method: space and time, identity and authenticity, and ethics (STEINMETZ,
2012a).
The previous works present several approaches to the problem of mobile accessibility,
however they present limitations that this work sought to approach. The work of Silva,
Braga e Damaceno (2015) on the impact of mobile application in the inclusion of visual
impaired users is extremely rich, however, it does not present a general approach to
accessibility. Similarly, the work of Gabrielli et al. (2005) and (ULBRICHT et al., 2012)
are strongly tied to the W3C guidelines and therefore cannot be fully extended to mobile
devices.
Díaz-Bossini e Moreno (2014) presents a practical set of guidelines to improve
accessibility on mobile applications, however, it’s tied to a particula audience: elderly
users, and the same applies to Leitao e Silva (2012) and Barros, Leitão e Ribeiro (2014).
Damaceno, Braga e Mena-Chalco (2017) and Zhou, Bensal e Zhang (2014) present solutions
for mobile accessibility of visual impaired users, and Jemni, Laabidi e Ayed (2014) attacks
30 Chapter 2. Fundamentals and Related Works

the problem of accessibility on e-learning platforms.

Upon Ethnography, Steinmetz (2012a) presents an ethnographic study on message
boards exploring practical issues and Sharp, Dittrich e Souza (2016) presents a set of
dimensions to aid the researcher during the study, however, they do not approach the
topics of historical period and storage of volatile data that are presented in this work.
 31

3 Exploratory Experiment

Prior to the virtual ethnography, it was sought to understand in a practical manner

which interaction design patterns produced accessibility problems on mobile interfaces.
For this, an experimental study (LAZAR; FENG; HOCHHEISER, 2017) was conducted.
Firstly, the type of application was chosen to be used in the experiment and thereafter the
target audience.
Mobile Learning (M-learning) is an approach to e-learning where mobile devices
are used to access educational content. Considering that traditional LMS (Learning
Management Systems) were created before the dissemination of mobile devices with
Internet access, there is a gap that has not been filled on exploring the application and
adaptation of these systems on such devices as a way to motivate students to perform
educational activities and in the exploration of new patterns of interaction (GUTERRES;
SILVEIRA, 2015) as accessibility and usability studies have mainly been made on Moodle
desktop (BARBOSA; OLIVEIRA; PENNA, 2015; SANTANA; NETO; COSTA, 2014).
Accessibility in e-learning is the ability of the learning environment to adjust to the
needs of any learner with any disability (JEMNI; LAABIDI; AYED, 2014), which involves
content presentation and interaction. Also, it’s important to consider the impacts of mobile
learning in the life of students and educators as presented by Abachi e Muhammad (2014)
(ABACHI; MUHAMMAD, 2014).
In Education, mobile devices can be useful to enhance and support the learning
experience of the disabled user and the adaptation of content to accessible by anyone. This
adaptation brings several advantages to e-learning systems that complement the traditional
education system as recorded classes and materials in video or audio and use of forums for
discussion at any time, anywhere (MOURAO; FREIRE; SILVA, 2013).
The Web on the context of learning system has been a great channel for dis-
semination of information and communication. Now it’s possible to attend to university
classes from thousands of kilometers of distance and to graduate without having to leave
the comfort of home, it has brought access to education in areas of difficult. M-learning
(GEORGIEV; GEORGIEVA; SMRIKAROV, 2004) systems are platforms accessed through
mobile devices and this change of perspective from desktop to mobile is another channel
for learning and presenting information (ALLY; PRIETO-BLÁZQUEZ, 2014). On the
other hand not all learning systems are well adapted to mobile interaction and many of
them in general have serious accessibility issues that can insert barriers in the learning
process, which discourages students and users of such platforms (HASHEMI et al., 2011).
The new form of learning through mobile devices (M-learning) presents a great
32 Chapter 3. Exploratory Experiment

potential that can improve the learning experience of students by providing mobility and
easy access to information. In Brazil (and in many countries) the most used M-learning
system is Moodle which has more than 76000 sites over 230 countries (MOODLE.ORG,
2016).
Whilst Universal Design can be described as a framework that assists the design of
environments and products, the Universal Design for Learning (UDL) is presented as a
framework for the development of teaching strategies that encourage equal opportunities
and in this context the M-learning emerges as an opportunity to promote inclusive, user-
centered and democratic education as pointed out in the research developed by Tavares et
al. (2015) (TAVARES et al., 2015) that reviews the literature on Universal Design applied
to education and M-learning.
In order to understand and evaluate the interaction design patterns’ accessibility
on mobile adaptations, an exploratory study was planned.
The goal of this study is to present the results of an accessibility evaluation of
interaction design patterns on m-learning platforms from emotional assessment of users
without disabilities in the mobile application for Moodle. In the evaluation 21 participants
performed 5 tasks on the mobile application that were recorded and later analyzed in order
to identify possible accessibility barriers in the use of certain interaction design patterns.
The study presented in this chapter also suggests a methodology of evaluation
that is interested in both the user and researcher’s perspective and highlights common
accessibility problems faced by users without disabilities in the mobile scenario through
interaction design patterns. As a result of this study we have also identified accessibility
barriers related to common interface elements, which are mapped to interaction design
patterns and can serve as an input for future studies on mobile elements with users with
disabilities in the e-learning scenario.
The choice of M-learning systems as domain case study in this research was not
random, possible accessibility problems can spoil the learning experience of many disabled
people that cannot access information due to accessibility barriers. The study and discussion
of the impacts of these problems on education is a desired achievement, but not the main
purpose of this project.
The methodology of the study consisted of three phases with the execution of an
experiment on a controlled environment (LAZAR; FENG; HOCHHEISER, 2017) and the
general overview is shown in Figure 2.

1. Preparation - In this phase several mobile design patterns were analyzed together
with the Moodle Mobile application and its functionalities and limitations. The
activities were chosen with the help of the teacher and based on which features the
3.1. Preparation and Execution 33

Moodle application presented at the moment with eyes on the design patterns of the
interface.

2. Execution - Here all the questionnaires were designed and the experiment was
performed in a controlled environment. The users should execute the 5 activities that
were compiled in the previous phase and give their feedback while being recorded.

3. Analysis - With the data collected from the previous phases, there are two per-
spectives to be analyzed: the user’s and the researcher’s. The discussion, results and
implication of this analysis is presented in this article.

Figure 2 – Overview of the methodology

3.1 Preparation and Execution

The following subsections present the main elements of the study.

3.1.1 Participants
Twenty one participants took part in the research on April 2016 where 56% were
female and 44% were male with ages varying from 19 to 24 years old. All participants did
34 Chapter 3. Exploratory Experiment

not have identified disabilities, were undergraduate students and had a smartphone. When
asked about the experience using mobile devices (smartphones or tablets) 78% stated to
have 4 or more years using a device and only 4.3% had only two years of experience (the
rest was in between). Also the daily usage (in hours) of mobile devices was around 2 to 8
hours and the daily usage of Internet around 2 to 5 hours.
Although all participants used their mobile device to access the Internet, only
30.4% actually preferred the mobile device over a PC to access web content and when
asked to describe situations that influenced this preference we received many answers like
"I can’t find information or navigate in some websites", "The buttons are too small", "I
can’t understand the meaning of some icons in some sites" or "I have difficulties accessing
my grades on the smartphone". Another important information is that all participants
were users of Moodle and 48% accessed up to 3 times a week and 13% accessed Moodle
daily in a mobile device.
The participants were students of a chemistry class and were chosen randomly
by volunteering to participate in the research and in this initial study we have chosen
participants without disabilities in order to identify accessibility barriers in Design Patterns
that affect such users and doing so further explore in other experiments the affect of these
barriers in different participants (with different types of accessibility) using Moodle on a
mobile device.
The teacher of the chemistry class uses the desktop version of Moodle provided by
the University of blind review in his class and the students were accustomed to perform
the operations that were requested to be performed in the mobile version of Moodle. The
tasks were chosen with the help of the teacher while preparing the activities that were
related to the class material.

3.1.2 Apparatus and Artifacts

The experiment was performed in a laboratory of the Department of blind review
of the University of blind review. There were used five different mobile devices, all of them
with Android operating system (Nexus 5, Moto G, Moto E, Galaxy S4 and a Tegra Note
tablet), screen size varying from 4 to 7 inches and Android version 5 or above. All devices
had a clean desktop, containing the same keyboard layout, connected to the Internet and
to a power source and had the two applications that were used in the experiment installed:
the Moodle Mobile1 and the Lookback2 apps.
The mobile devices and questionnaires were distributed in separate desks in the
laboratory and the participants were seated in 5 different locations with a comfortable
space between them in order to provide privacy in the execution of the experiment.
1
www.download.moodle.org/mobile
2
www.lookback.io
3.1. Preparation and Execution 35

Each participant received a copy of the Terms of Consent for image and data usage, an
Accompaniment questionnaire (Appendix C) containing the description of the activities
and questions related to each activity and a page with screenshots of the Moodle Mobile
application grouped by each task containing enumerated elements of interface and a
mobile device tat was assigned randomly to each participant. The experiment had the
participation of 4 observers that would be distributed between the participants and
monitor their actions by taking notes of problems and difficulties that occurred during the
experiment (Appendix D).
The Accompaniment questionnaire (Appendix C) consisted of five activities and, for
each activity, the participants would evidence their satisfaction and feeling of dominance
(that should be indicated in a scale of one to nine based in the Self-Assessment Manikin
(SAM)) about interface elements that were highlighted and enumerated in the page
with Moodle Mobile screenshots. The observers were instructed to not interfere in the
participant’s interaction and the participants were told to perform all activities and ask
for help from the observer only when strictly needed.
The participants were also asked to fill a form where demographic and general infor-
mation about usage of mobile devices and e-learning systems were collected (Appendix B)
and presented in this section in order to characterize the participants.
The Lookback application that was also installed in each device was used to collect
video data of the experiment in order document the participant’s interaction with the
screen and to capture their facial expressions using the front camera of the mobile devices.
All sessions were recorded using the mobile app Lookback3 that records the screen
interaction and video and sound from the front camera of the mobile devices. The recordings
would start in the beginning of each sessions and end when the participants would signal
the completion of all activities. Each recording was identified by the participants unique
login information in the platform and were uploaded to a cloud platform also provided
by the Lookback service. These recording would be used again the the analysis phase as
described in Section 3.2.
All 4 observers that participated in this study are master’s students in the field
of Human Computer Interaction (HCI) and two of them had experience working with
accessibility on mobile devices. The other two develop research in the usability area (also
on mobile devices). For the experiment a new installation of Moodle version 3.1 was
performed in a server using the default theme. This was needed due to the fact that the
Moodle Mobile app present some limitations with older versions of Moodle.

3
www.lookback.io
36 Chapter 3. Exploratory Experiment

3.1.3 Procedure
The 21 participants performed the experiment in 5 sessions (4 with five participants
each and the last one with one participant only) due to the number of mobile devices
available for the experiment (5 devices), which means that, apart from the last session,
the devices were used evenly by the participants during the sessions. Figure 3 illustrates a
participant performing an activity during the experimentation alongside with the artifacts
described in the previous section.

Figure 3 – A participant performing an activity

In the beginning of each session the participants received general information about
how to use the artifacts provided, how to fill the forms and what activities they should
perform. It was given special attention to the explanation of the Self-Assessment Manikin
that was applied in the Accompaniment questionnaire. The participants were also asked
to think aloud about their progress, doubts and problems while performing the tasks.
The SAM is a non-verbal pictorial assessment technique that aims to measure
emotion in terms of satisfaction, arousal and dominance that are associated with the
reaction of a person to some sort of stimuli (BRADLEY; LANG, 1994). The SAM
technique used in this experiment aimed to capture only the participant’s satisfaction and
dominance of each element of interface that was actually used by the participant. The icon
representation of both satisfaction and dominance was adapted from the original version
as can be seen in Figures 5 and 6.
The five activities performed by the users would force the participants to explore the
application and use the interface elements that were evaluated in the SAM questionnaire
and had a correct order and description. The first activity was to check a specific event in
the calendar, then in the second activity, the participant should check the grade received
in a questionnaire that was answered in the chemistry class of the previous week; the third
activity consisted of finding an specific student enrolled in the class and initiate a chat by
3.2. Analysis 37

sending a private message; in the fourth activity the participant should find and read a
chapter of a chemistry book; finally in the last activity the participant would answer a
question about an upcoming event of the class.
The participants were advised to freely perform the tasks without any intervention
or any tips on how to perform an operation or screens that should be used. At the
completion of each activity they would indicate their satisfaction and dominance of some
selected interface items that were highlighted and enumerated for each activity (the
participants should do this only for the elements that they used during the task). On each
task the participants were also asked to report any difficulties or problems of usage or
understatement of any interface element and they were also asked to inform their level
of agreement in a Likert scale on the number of steps and localization problems in the
general execution of the task.
At the end of the experiment, each participant was asked to give feedback on the
execution of the experiment and also about the satisfaction with the adaptation and usage
of the Moodle e-learning system on mobile devices.

3.2 Analysis
The data collected after the experiment contained the satisfaction and dominance of
each participant about to the studied interface elements. A work of mapping and grouping
the interface elements into mobile interaction design patterns was then performed by
analyzing each element with the help of the patterns presented by (HOOBER; BERKMAN,
2011) and (RIBEIRO; CARVALHAIS, 2012b; RIBEIRO, 2012).
After mapping and grouping the interface elements into design patterns from the
data collected in the SAM questionnaire, we had identified 7 main design patterns used
by the participants that are Toggle Menu, Icon, Infinite List, Vertical List, Input Area,
Button and Form Selection and collected the satisfaction and dominance for each of the
seven design patterns. This data is represented in two bubble charts: one for satisfaction
(Figure 5) and another for dominance (Figure 6).
Another output of the experiment was the recording of the screen and front
camera video of the mobile devices during each session for every participant. With the
recording (and because the participants were asked to think aloud) it was possible to
better understand the interaction with the interface and which problems each user had
encountered and how they performed each one of the activities. With this, it was possible
to analyze in deeper detail the interaction with the Moodle Mobile app and identify
situations that could not be perceived by the observer during the session.
The video recording were stored in a cloud platform provided by the same tool
38 Chapter 3. Exploratory Experiment

used to record screen and front camera of the devices. With the cloud platform we could
identify each participant by the video, add tags and comments into the recording, identify
the duration that each participant took to perform the 5 tasks and discuss these findings.
The interface of Lookback as a collaborative tool can be seen on Figure 4.

Figure 4 – Lookback’s interface: video analysis with CEM tags

To catalog and analyze the recordings we used the Communicability Evaluation

Method (CEM) tags (CAPELÃO et al., 2011) as communicability directly impacts in the
understanding of the user about the interface and therefore impacts in accessibility and
usability because if a user had problems communicating with an interface, he will have
problems using and understanding the same interface. However, we did not use the whole
CEM method, but only used the tags in order to identify accessibility problems during
the interaction with the interface that are presented as communicability ruptures.
The tags were chosen because it was possible to easily add comments in parts of
the recordings in the Lookback platform, due to the possibility of grouping the problems
identified with the technique and because the tags of the CEM method are widely used and
make the analysis process easier. The tagging process was a collaborative work performed
by two evaluators in the cloud platform. In order to achieve more reliable results and
instigate the discussions of issues encountered by the participants, each evaluator would
tag all videos and discuss the tags of the other evaluator when having doubts or some
observation to add. Doing so, each video recording was analyzed twice.
After this tagging process, we had a set of videos with each one containing several
tags, then a work of grouping these tags by activity was performed and, with this informa-
tion, it was possible to better understand which factors had influenced the participants
during the experiment and even relate some of the results with the results of the SAM
questionnaire. The data collected in this step is represented in a chart which contains the
occurrence of CEM tags by each one of the five activities performed by the participants
on Figure 7.
3.3. Findings 39

3.3 Findings
After the analysis of the results of the experiment we could analyze and discuss
the findings of this study. This section presents the point of view of the participant that
answered the SAM questionnaire and the point of view of the researcher related to the
observation form and video analysis with CEM tags presented in Section 3.2.

3.3.1 User Perspective

The user perspective contains the satisfaction and feeling of dominance that were
indicated by the participants in the SAM questionnaire. By looking at Figure 5 that
presents the data distribution of satisfaction for the seven design patterns we can observe
that three of the patterns (Input Area, Button and Form Selection) did not have negative
scores of satisfaction (below 5) and had a high concentration of positive scores around 9
and 8. The same scenario can also be observed in Figure 6 about the dominance of these
patterns.
On the other hand, it is possible to see a higher incidence of negative scores of
both satisfaction and dominance on the other four design patterns (Toggle Menu, Icon,
Infinite List and Vertical List). These patterns still have high satisfaction and dominance,
however we can see that the scores are distributed in the scale, which means that some of
the participants were not satisfied or had trouble using such elements.

Figure 5 – User satisfaction by Design Pattern

Based on these results it can be observed that in all patterns the majority of
answers given by the participants float around 9 and 8, which meas high satisfaction and
dominance regarding the seven design patterns. However this is expected due to the fact
that the participants did not have disabilities and were familiar to mobile devices. Because
of this, only a small portion of the participants would in fact encounter barriers in the
design patterns while using the mobile application.
40 Chapter 3. Exploratory Experiment

Figure 6 – User dominance by Design Pattern

It is also clear that the same patterns that had poor satisfaction also had higher
incidence of negative dominance, which means that the overall emotion of the participants
while using these patterns was negatively affected.

3.3.2 Researcher Perspective

In contrast to the user perspective, the researcher perspective is oriented by activities
and not by patterns, although the correlation with the user perspective can be easily
noticed. Activity 1 had the highest occurrence of the Help tag which can be explained
by the fact that it was the first contact with the application and many questions about
localization would arise. Also, when comparing to the SAM results of the design patterns
and the video recording, it is possible to understand that due to the fact that to complete
the task the participants needed to navigate through the menu (Toggle Menu) of the
application, they would not know which options would be available in the menu and which
screens would be presented on each item.
Still on the first activity, there is a significant high occurrence of Where am I?
and Where is it? tags, which reinforces the argumentation that the users had difficulties
understanding their localization in the app, which actions they should perform to complete
the first activity and what operations were available.
On the second activity there was a high occurrence of Where is it? tag followed
by Where am I?, What now? and Oops. While analyzing this activity through the video
recordings, it was possible to understand that occurrence of the CEM tags were mainly
related to the Icon design patters, where the participants had great difficulty understanding
the meaning of the figures used to represent actions and functionalities in the application,
even in some cases where there was present a textual hint alongside with the icon, which
made it difficult for the participants to find actions and complete the activity.
3.3. Findings 41

Figure 7 – Occurrence of CEM tags by activity

In the third activity the participants should look for a specific student and send a
private message and one way of doing this was to iterate over an infinite list to find the
student. In Figure 7 we can see that this activity had a high occurrence of the Where
is it? tag, which means that the participants had difficulties using the infinite list and
finding the specific item of the list (that was conveniently located near the end of the list).
By looking at Figures 5 and 6 it is possible to identify that the Infinite List pattern had
the worst satisfaction and dominance signed by the participants, which means that they
had trouble using the design pattern, which negatively affected their interaction and the
completion of the activity.
The fourth and fifth activities did not present high occurrence of any tag, but some
isolated cases of What’s this?, Oops and Where am I? tags. This can be explained by
two factors: (i) these activities where the last ones and by the time the participants had
completed the first three, they already had explored great part of the applications and
had an idea of where to look and what to do and (ii) the design patterns related to three
activities were the ones with highest rates of satisfaction and dominance (Input Area,
Button and Form Selection), which leads to the conclusion that the users were used to the
adaptation of these patterns on mobile devices.
Finally, the observations made during the experiment by the evaluators was analyzed
and we could find important annotations that could not be identified in the recordings
and helped to better understand the occurrence of tags and the correlation to the emotion
feedback of the SAM questionnaire.
42 Chapter 3. Exploratory Experiment

3.4 Discussion

From both user and researcher perspectives it can be observed that there weren’t
identified major problems with the patterns Input Area, Button and Form Selection. One
of the reasons for this to happen is that these patterns are well known interface elements
that can be found in most web pages and thus, the participants were used with the mobile
adaptation of such elements as reflected with positive satisfaction and dominance and also
by the lack of CEM tags identified in the videos and problems related by the observers
which indicates low accessibility problems.
On the other hand, the Infinite List pattern: this patterns presented lower satisfac-
tion and dominance amongst the participants and a high concentration of Where is it?
tag and from the video analysis it was identified that a good portion of the participants
did not understand the continuous loading for new information at the end of the list and
were frustrated for not being able to find the correct list item (several participants gave
up the task of looking for an specific item and chose randomly). This represents a serious
accessibility barrier that the participants had to face and directly affected their mood
during the experiment.
Also, participants were troubled by the Toggle Menu: although it has mostly good
satisfaction, it presented worse results in terms of dominance and can be seen on Figure 5
and Figure 6. In the recordings it was possible to see that the participants would open
and close the menu several times in order to find the desired option in its Vertical List.
These problems impacted in the time consumed during the tasks and also in the mood of
the participants: it was possible to see the frustration of not finding an option and the
need for help from the evaluator in order to complete the task.
The Icon design patterns can also be highlighted as it had the highest occurrence
of "Where is it?" and "Oops" tags. It was possible to identify in the recordings that the
participants had trouble understanding the meaning of some icons and would do and
undo an operation in order to know what the icon represented. In Activity 2 (AT2) the
participants should check their grades on an assessment performed in a previous week
that was in the main page with an Icon and text representation, however as the image
presented in the Icon was a bar chart, the participants would not identify themselves with
the icon and ignored the text, trying to look somewhere else for the grades. This also
reflected in their satisfaction and mostly in the feeling of dominance, as it can be seen
that there is less concentration of points on 9 and more on 8 and 7 (and a good amount
below 5).
All issues reported impacted directly and indirectly the interaction of the par-
ticipants with the mobile application. For instance, we can relate the time consumed
performing the experiment with difficulties found with the elements Toggle Menu and Infi-
3.4. Discussion 43

nite List where the participant would spend most of the time looking for an option instead
of actually performing the activity: most participants took around 22 minutes to complete
all activities, however, in a few situations, some participants took more than 30 minutes
to complete the same activities. Also accessibility and usability barriers encountered by
some users caused frustration and irritation that were noted by the observers and during
the video analysis.
A possible comparison between the problem of finding information in a Toggle
Menu with visually impaired users can be identified: when a blind user or a user with
low-vision access an application, he doesn’t know which options a menu offers and needs to
access item per item to understand the available features; when a user without disabilities
access an interface with a toggle menu, he also doesn’t know which features are present in
the menu, in fact the user needs to identify the icon or text that represent the trigger for
the menu and only them he will be able to see the which options are available (YESILADA;
BRAJNIK; HARPER, 2011b).
The accessibility barriers encountered by the participants during the experiment
are problematic as they can directly impact the usage of the e-learning platform in a
mobile device. One must consider that during the experiment the participants could ask
for help when they had issues with some interface element, but that this help would not
be at hand if they were using the application in a real life scenario which could spoil their
learning experience and prejudice their educational performance.
The accessibility barriers encountered by the participants during the experiment
are problematic as they can directly impact the usage of the e-learning platform in a
mobile device. One must consider that during the experiment the participants could ask
for help when they had issues with some interface element, but that this help would not
be at hand if they were using the application in a real life scenario which could spoil their
learning experience and prejudice their educational performance.
Another important fact is that none of the participants had identified disabilities.
This is important to be noticed due to the fact that disabled people have serious issues with
the traditional education system because it is not adapted to their needs and sometimes
they seek aid in technology to help overcome their limitations. The presence of accessibility
problems related to design patterns in a m-learning application can create more problems
than it solves and discourage such users to continue with the learning process while in the
case of participants without disabilities, the problems are mostly situational and can be
overcome with some effort, using another platform or asking for aid.
While the use of mobile devices to access educational environments provide easy
access to information anywhere, anytime, accessibility problems as the described can
jeopardize the process of knowledge acquisition, leading to further issues that could
discourage users from using m-learning platforms. Also, by the time this article was
44 Chapter 3. Exploratory Experiment

written, we could not find any work that analyzed the accessibility of Moodle for mobile
devices which makes this study an important contribution for developers and designers
that work with Moodle on mobile.

3.5 Conclusions and Contributions

This study presented an accessibility evaluation of interaction design patterns
on the m-learning platform Moodle based on emotional assessment with users without
disabilities. The initial idea that accessibility barriers could be identified using design
patterns and that such barriers would also affect the experience of users without disabilities
while using the a m-learning platform was confirmed and the emotional impact of such
barriers can be identified in the user interaction as well.
The problems related to the seven design patterns analyzed in this study were
the result of an emotional assessment using the SAM technique as feedback from the
participant and by the analysis of video recording from each participant’s interaction with
the mobile app.
The accessibility barriers identified are diverse: the participants had trouble to
identify the meaning of icons present in the interface, which lead to errors while performing
the activities; there were reported problems of localization where the participants would
spend a long time looking for one information in the application menu or would not
understand the behavior of an infinite list, which would implicate in the increase of time
needed to perform an operation and lead to frustration and even abandonment of the
activity.
The results also show possible impacts of accessibility problems on m-learning
platforms in the learning process as users can be unmotivated to continue studying due to
barriers that are imposed by the lack of adaptation of the platform. This impact should
be later verified in further studies.
The 21 participants performed five common activities that were parts of a chemistry
class in a controlled environment where none of them had identified disabilities and all
were familiar with the Moodle e-learning platform for desktop. Due to the characteristics
of the participants (young, used to mobile devices and e-learning platforms and without
disabilities) the results presented here are not as expressive and they would be if the
experiment had been performed with disabled users, however this was intentional as the
principle of Universal Design is to design for everyone. Thus, it is important to analyze
the impact of accessibility problems to any person.
There were noticed problems with the interaction with the application and these
problems were mapped to Interaction Design Patterns and later investigated using record-
3.5. Conclusions and Contributions 45

ings of the screen and face of the participants. The major issues were related with finding
information or identifying the meaning of interface elements that directly affected in the
participant’s performance.
Lastly, the use of interface design patterns is a form of identifying problems and
proposing viable solutions that can be replicated by any developer or designer and used in
any situation and context to a wide variety of users and devices, promoting in its way a
form of design for all.
 47

4 Virtual Ethnography approach for studying

online communities in software engineering

Due to the difficulty in finding information and practical examples in the literature
about virtual ethnography studies in Software Engineering, this chapter presents an
approach to conduct ethnography studies in online communities where developers usually
share and discuss practical issues of software engineering.

4.1 Fundamentals of Ethnography and Virtual Ethnography

The path to understand a social group, its culture, institutions, interpersonal
interactions and beliefs is challenging and may seen even more inaccessible when not
using the appropriate research method (ANGROSINO, 2007). Ethnography may help
in situations where the goal is to understand a community by analyzing it’s behavior
and social interactions as it is a qualitative research method that combines observation,
participation, interview and document analysis as tools to aid in this discovery.
Ethnography is a descriptive technique that uses raw data collected from observation
or participation in a community or group and identifies common patterns that are present
in the raw data and produce general theories that explain such patterns (HAMMERSLEY;
ATKINSON, 2007).
In the literature there are not many ethnographic studies on Software Engineering
(SHARP; DITTRICH; SOUZA, 2016) and there are even fewer studies conducted on
virtual spaces. However the necessity of solving problems that frequently arise from the
market practice is one of the motivations for which Software Engineering and other
sciences produce research and the link between the practice and academy is essential for
the development of new research (SANTOS et al., 2012).
Although ethnography is being used recently in the area of Human Computer
Interaction and Software Engineering in order to help to improve the software development
practice, it has its roots in social sciences and anthropology where it was first used in studies
that aimed to understand new cultures and civilizations (LAZAR; FENG; HOCHHEISER,
2010).

4.1.1 Virtual Ethnography

While classical ethnography research focuses on the study of social interactions of
communities that take place in physical spaces, virtual ethnography transfers the research
48 Chapter 4. Virtual Ethnography approach for studying online communities in software engineering

site to socials spaces in the Internet (HINE, 2008).

Since the beginning of popularization of personal computers with access to the
Internet in the 1990s, interesting social formations started to emerge in the digital world
(BAYM, 1995) and this scenario caught the attention of many researchers that wanted
to explore and understand the interactions in this new form of communication. The
first ethnographic studies of virtual communities that emerged in mid-1990s analyzed
conversations, documents and interviews with group members as would happen in a
traditional ethnographic study, however important questions about the importance of
presence and other dilemmas were not yet discussed (HINE, 2000).
With the emergence of new forms of interaction on the Internet as online multi-
player games and social networks as Myspace, Orkut and later Facebook, different settings
for ethnographic studies appeared with new challenges of data collection from chat logs and
different types of media as pictures, video and audio files. Also the researcher needed to be
comfortable with the new reality and develop strategies to interact with the communities
(BOYD; HEER, 2006).
As on classical ethnography there are several dilemmas that ethnographers face in
deciding how to conduct an study, however, in virtual ethnography some concepts may
seem more complex and have more ramifications that have not been widely discussed
(BOELLSTORFF, 2012). One of the first puzzles that the researcher must face is choosing
a participation role in the research: there are several levels of participation between only
observation and total participation (HINE, 2008) and, while some researchers in the
literature may agree that some degree of participation is necessary, the nature of the
community may force the researcher to adopt an observer or hybrid position in the study.
Also, with the participation role defined other challenges also arise as the concern
with authenticity aspect regarding the disclosure of the researcher’s identity and intentions
and other ethical issues as the use of informed consent form and protection of privacy of
online users (DRISCOLL; GREGG, 2010).

4.2 Virtual Ethnography Approach

Based on the fundamentals of traditional ethnography and on the particularities of
the Software Engineering field, the approach may be considered a guideline for supporting
researchers to investigate the development practice. The approach for virtual ethnography
presented in this chapter aids the researcher in all stages of an ethnographic study, from
the planning to the execution and data analysis.
An important feature of the approach presented is the definition of a protocol to
answer and define important questions that arise during ethnographic studies focusing in
4.2. Virtual Ethnography Approach 49

the characteristics that are intrinsic to studies performed on online communities and virtual
artifacts as the selection of a historical period (that is a time frame in which information
in the Internet will be accepted for the research) and the definition of strategies for storing
and organizing volatile information from the Internet in order to preserve it’s availability
and original content.
Another significant aspect of both the approach is that in the literature one can
find a few examples of virtual ethnography in areas related to the software development
practice, however, these studies use as primary source of information the analysis of
interviews with participants of the online community. However, direct interviews may fail
to extract concerns and issues from the daily life of software development.
Therefore, research that considers the information and discussions publicly available
on forums and blogs (that are not directed to a person, but to the community) have the
opportunity to observe the interaction between developers and understand how the creative
process of software development and problem solving happens with the collaboration of
colleagues in its natural habitat: the virtual world.
The proposed approach for virtual ethnography in the study of the practice in
Software Engineering consists of 3 steps (1 - Planning; 2 - Ethnography Execution; 3 -
Data analysis) that are discussed in the following subsections and presented in Figure 8.

4.2.1 1st Step: Planning

The planning step consists of two phases which are the Definition of an Ethnography
Protocol and the Selection of Information Sources (steps 1.1 and 1.2 in Figure 8). The
phases are connected and executed in order, also, at the end of the second phase, the
researcher must decide whether it’s necessary to return to the protocol definition for
adjustments.
In the literature HINE (HINE, 2008) presents a set of dilemmas and practices of
online ethnography that includes several characteristics of ethnographic studies in virtual
communities as the participation role of the researcher among others characteristics. While
SHARP; DITTRICH; SOUZA (SHARP; DITTRICH; SOUZA, 2016) compiles five general
dimensions of ethnographic studies in Software Engineering containing key topics to help
the researcher in the planning and execution of the ethnography. These definitions together
are used to advise the researcher about key points of an ethnographic study.
However, in our study we’ve identified the urge of new dimensions that are specific
for ethnographic studies in virtual communities. A structured discussion of the dimensions
present on the literature alongside with the specific characteristics for virtual ethnography
are presented in the following sections as recommendations and definitions that the
researcher should account for previous to the ethnographic study.
50 Chapter 4. Virtual Ethnography approach for studying online communities in software engineering

Figure 8 – Virtual Ethnography Approach

4.2.1.1 Ethnography Protocol Definition

The definition of a protocol for an ethnographic study may differ according to how
the study will be conducted and what will be the approach adopted by the researcher.
However, it is advised because it will aid the researcher to think ahead about important
aspects of an ethnographic study as the participation role and ethical aspects. This is the
first phase of the planning step represented in Figure 8 and here we present a discussion
of the 5 dimensions of ethnographic studies proposed by SHARP; DITTRICH; SOUZA
(SHARP; DITTRICH; SOUZA, 2016) in the context of virtual ethnography and propose 2
more dimensions (Historical Period and Storage of Volatile Data) elemental to ethnography
in virtual communities that need to be addressed by the researcher in the definition of a
protocol.
4.2. Virtual Ethnography Approach 51

Participation role - On online communities the aspect of participation is of

great importance, as it defines the role that the researcher will take as a participant of the
group or as a simple observer that does not take direct actions in the group’s activities.
As ethnography is the science of describing and understanding a human group (WOHLIN;
HÖST; HENNINGSSON, 2003), the observation of social interactions between members
of a group is an essential data collection method alongside with other forms such as
interviews, document analysis and log analysis.
There are mainly two participation roles in ethnography: the participant observer
(or participant) and the non-participant observer (or observer). In the first case, the
researcher participates in daily actions of the studied group and directly interacts with
the subjects, becoming a member of the social group and participating in all activities in
order to observe the practice by becoming part of the interaction. In some environments
the participation can be challenging, as sometimes the group may not accept or receive
well new members which can impact their natural behavior or the researcher may not be
allowed to participate in all activities due to legal reasons.
The other participation role, called observer is when the researcher does not directly
interacts with the group and do not participate in the group’s activities, but observes the
subjects in their daily interactions. The observation role of participation may be helpful on
situations where direct participation is not allowed or not possible. Thus the observation
role is a valuable approach and it may allow the researcher to conduct its research on
environments that do not allow participation, but observation may also demand more
dedication in order to capture the essence of the community only by looking at it (HINE,
2008).
Other details also need to be addressed and defined by the researcher when choosing
a participation role in an ethnographic study as of being clear about his role and identity
as a researcher when joining a group which may be considered ethical in some contexts, but
also may cause the subjects, members of the studied group, to feel uncomfortable knowing
that they are being analyzed or may cause rejection by the group, directly interfering
in the research. There are other ethical questions that have been widely debated in the
literature (HINE, 2008; HINE, 2000; STEINMETZ, 2012b) and that the researcher needs
to be aware of as the use of informed consent of age in virtual environments and the
implications of preserving the privacy of participants of sensitive online communities.
Duration - In the social sciences area, a traditional ethnographic study would
require a long-term dedication in the phases of field participation and data analysis as the
researcher would have to visit the community studied and depending on the location and
the community, the journey and the duration of stay may be extensive in order to actually
understand the culture and social interactions of the group. In Software Engineering there
are also examples of long-term researches as LOW et al. (LOW et al., 1996) that conducted
52 Chapter 4. Virtual Ethnography approach for studying online communities in software engineering

an ethnographic study of 15 months interacting 4 days of the week and other studies that
have taken several months but had interactions of 1 time per month for example, which
illustrates that the researcher does not need to be located every day of the week, every
week in the study site, but can dedicate fewer days in site and have time to early analyze
the data collected.
Both on classical ethnography and virtual ethnography, there isn’t a metric that
can be used as reference by the researcher regarding the duration of an study. Usually,
ethnography in computing related areas takes less time than social sciences (SHARP;
DITTRICH; SOUZA, 2016) for example, as the goal is to understand the practice and
social interactions of small groups and not from a civilization for example. On virtual
ethnography the scenario is the same: while there are conveniences as easier access to
information, there may be more information available or it may demand more time to
filter through the information that is available.
Location - The location in ethnography is where the studied community is, where
it communicates and interacts and where the researcher will be able to extract information
from the group. With the globalization and dissemination of Internet and technologies the
location became a more abstract concept where the site where the group communicates
and interacts may not be a physical space or there may be more than one site (physical
or digital ones) (HINE, 2000). In Software Engineering it is becoming common to find
studies that are conducted in multiple field sites, in what is called a hybrid approach,
where the researcher observers in physical settings but participates and collects data in
virtual environments (JORDAN, 2009).
On virtual ethnography the location is somewhere in the Internet: it may be
blogs, forums, mailing lists, private groups, chats, online games, email or other forms
of electronic communication. The researcher do not choose the location in which the
community interacts and because of that, it’s necessary to know how to behave in different
environments and how to correctly participate and collect data in every setting. For that
the location should be studied in order to obtain better results. If the researcher doesn’t
know how to search and interact in a forum, the data collected may be insufficient or
inadequate for a correct analysis of the community that’s being studied.
Theoretical Underpinnings - Theoretical Underpinnings are the basic foun-
dations for a research. Ethnography as many other research methods is not presented
with a strict framework that every study must follow because it is a broad method for
qualitative analysis and the plurality of studies, communities and goals of all ethnographic
studies make it impossible to develop such general framework. Therefore there are several
theoretical frameworks that are commonly used in ethnography as Ethnomethodology
(GARFINKEL, 1991) and Activity Theory (ENGESTRÖM, 1999).
The choice of which framework and whether or not to use one depends on the
4.2. Virtual Ethnography Approach 53

intentions of the researcher and the nature of the research (SHARP; DITTRICH; SOUZA,
2016). On Software Engineering and on Virtual Ethnography it is not different as many
frameworks may not be applicable to the study, settings or nature of data collected in the
study.
Ethnographers’ intent - The intent of the ethnographer, the motives that
provoke the researcher to do research, and, in this case, to investigate a community
and understand its social interactions usually is the primary intent of the ethnographer
and not how the information collected can be used to exploit the group’s values (GOH,
2007). In Software Engineering the simple achievement of understating the practice can be
extremely valuable for empirical researchers as it may help to instigate the evaluation and
improvement of processes and methodologies.
However, other empirical software engineering researchers may not be satisfied
by simply understanding the practice without actually proposing improvements, new
methodologies or tools that would aid the software development practice. Thus, it is
important for the researcher to understand that his intent in the research may affect the
interaction with the community (DITTRICH, 2002) and that its actions can interfere with
the studied group and with the research. The researcher then needs to be clear about his
interests in the research in order to avoid future confusions.
Historical Period - New concerns and characteristics arise when dealing with
online data in virtual ethnography, one of which is the preoccupation with a well defined
scope that will help to filter enormous amounts of data that are available online. It’s not
possible for the researcher to collect and analyze all information produced by an online
community in the course of time and also a great part of the data will not be valuable for
the study as it’s not related to the intention of the research.
Therefore it’s important to know how to filter information in a way that valuable
information is selected and useless data for the research is not collected. In virtual worlds
trends and technologies are highly time sensitive: a discussion on development of solutions
for smartphone bluetooth 2.0 technology from 6 years ago may not be relevant for an
ethnographic study that intents to understand the use of current bluetooth technology
compared to other wireless protocols as the bluetooth protocol has advanced in speed and
power and the researcher wishes to study the interaction with recent technologies.
On other contexts the researcher may have access to historical records of conversa-
tions and may need to limit the scope of the research for a specific time frame. In this and
other several cases, the definition of a historical period is essential for the ethnographic
study and it will help to provide more precise data for the research.
The definition of a historical period on virtual ethnography was a necessity identified
during the planning and definition of the protocol in the study as the literature (HINE,
54 Chapter 4. Virtual Ethnography approach for studying online communities in software engineering

2000; HINE, 2008) do not mention this characteristic of ethnographic studies on online
worlds (perhaps the reason of this lack of information is the fact that usually ethnographic
studies consider interview transcripts as data input and not articles or historical chat logs
to be analyzed).
Storage of Volatile Data - Online information is volatile (STEINMETZ, 2012b)
and as ethnography in virtual communities often deals with historical data, it’s important
to store and catalog such information in order to preserve its integrity: a blog post that
was accessed and analyzed two weeks ago may not be available anymore or may have been
edited since then.
There are several strategies for dealing with volatile data from the Internet as saving
digital or physical copies of all necessary documents. However, there are key concerns that
the researcher needs to have while defining the strategy to preserve information content: if
the researcher chooses to hard copy all relevant information from a virtual ethnography
study he will probably have difficulty managing and organizing all information, also
searching for specific parts of information can be challenging. Another strategy is to save
.pdf files of every relevant information, however, as good as it may sound, there are also
possible problems with this approach as the browser’s pdf print service may not produce
a faithful representation to the actual page being printed, which may cause overlay of
important pieces of information.
Saving information in picture formats alone is also not advised when dealing with
textual information as it may prove almost impossible to use qualitative research tools in
the data analysis of text. Thus it’s important that the researcher understands the nature
of the data that is being captured and adopts an effective approach in order to lower the
chances of data loss by adopting more than one approach for data storage, even if this
means redundancy of information.
Another concern with data storage is the organization of information. After collect-
ing all information, the researcher needs to review all data and analyze the connections
that may exist between different pieces of information that may have originated from
different sources, thus the information must be cataloged in a meaningful way for the study.
The processes and strategies for cataloging data may differ according to the research’s
topic and data and the researcher must understand how to properly storage all information
as this can save time and effort on future steps of data analysis.

4.2.1.2 Selection of Information Sources

Selecting reliable and valuable information sources is essential for achieving relevant
results in ethnography and in any other research technique that receives data from different
sources as input. Therefore, this planning phase is extremely important as all the later
work will use the information extracted from the sources selected in this step. There are
4.2. Virtual Ethnography Approach 55

different strategies for gathering relevant data sources from the Internet and each one has
its advantages and disadvantages as presented in this section.
One strategy is to use personal previous knowledge of the online community
studied and choose the sources from the experiences that the researcher already had while
studying or interacting with online groups. This strategy depends solely on the researcher’s
point of view and background to select the information sources used in the ethnography
and, although this strategy provides agility and efficiency, it also raises concerns about
the relevance of up-to-date information as the researcher may know where to find the
information in the web, but may not be updated with new trends in the community and
important new sources can be left out of the research.
Another strategy is to consult experts and people with knowledge and experience
with the online community being studied in order to identify the information sources
relevant to the research. This strategy is useful when the researcher does not have a
deep knowledge of the online group or when the researcher wants to have plurality of
information from the experiences of other people that can be done by using techniques for
collecting information such as surveys or interviews. The use of this strategy may result
on more reliable and updated data, however, it takes more time as the researcher needs to
talk to other people and scheduling and analyzing these interactions can take time.
After gathering a set of information sources, many times it is necessary to select the
most reliable or valuable sources for the research as it would take a long time to analyze
everything that exists on the web about a topic. The researcher can adopt any criteria
that may help to rank the sources and then select the most relevant, one of which can
be the classification rank on search engines or conduct a quick analysis in each source in
order to determine the relevance.

4.2.2 2nd Step: Ethnography Execution

Having defined the protocol and selected the information sources for the study, the
next step is to iterate over all sources and gather information and whether the researcher
will perform interviews with selected audience or analyze data logs and conversations, the
researcher shall follow the three stages presented in Figure 8: (2.1) source exploration,
(2.2) data selection and (2.3) data storage.
Source Exploration - While visiting a source of information, the researcher needs
to have an efficient way of searching for information, and, in most cases, this can be done
by building search queries that are used in the search engines of each forum or blog and
paying attention to the period of time defined in the protocol. Most search engines do
not accept sophisticated search queries, therefore the search string is applied generally to
the raw data and the researcher needs to define one or more sentences that represent the
56 Chapter 4. Virtual Ethnography approach for studying online communities in software engineering

intended result. On other cases in which the researcher will perform interviews or analyze
data logs this process of defining search queries is not necessary.
Data Selection - The second stage is to perform a preliminary analysis of the
data in order to select only relevant data for the study as the amount of information tends
to be substantial when dealing with information available in the web. Here the researcher
must access every document, page, conversation, interview transcription or data log and
analyze it’s relevance to the research.
Data Storage - Having gathered and selected all relevant information from one
source, the researcher needs to safely store and catalog this information in order to prevent
data loss as all information in the Internet is volatile (STEINMETZ, 2012b). There are
several ways of storing online information as creating .pdf files or images or even text
copies and the choice depends on the preference of the researcher that was defined in
the protocol. With all relevant information extracted from one information source, the
researcher shall begin the same process with the next source until all sources have been
consulted.

4.2.3 3rd Step: Data Analysis

The last step of the approach is to actually analyze all the data of the ethnographic
study. In this step the researcher usually deals with large amounts of data and the
preliminary analysis performed in the previous step is deepened and compared with all
the information sources and documents used in the study. Any qualitative data analysis
methodology can be used to study the data collected in the ethnography and the preference
must be defined by the familiarity of the researcher with the research method and by the
data type and structure in order to obtain better results.

4.3 Conclusions and Contributions

The literature presents preparations that are proposed for the researcher in order
to plan and execute its ethnographic study. BOELLSTORFF (BOELLSTORFF, 2012)
introduces valid questions in the discussion of selecting a group or activity to study,
understanding the fieldwork and planning ahead the interaction with the studied community.
LAZAR; FENG; HOCHHEISER (LAZAR; FENG; HOCHHEISER, 2010) presents general
recommendations of how to prepare and execute an ethnographic study in the context
of Human Computer Interaction. SHARP; DITTRICH; SOUZA (SHARP; DITTRICH;
SOUZA, 2016) describes the five dimensions of ethnographic studies that delivers a good
understanding of some important aspects and details that the researcher needs to address
and be aware before the execution of the study. None of them actually presents a check-list
or a plan of work containing specific information about ethnography in virtual worlds.
4.3. Conclusions and Contributions 57

However the first step in the proposed approach, called Planning in Protocol
(Figure 8), instigates the researcher to think and plan ahead its actions before actually
starting the study and contemplates specific topics that are present on the study of
online information: the selection of historical period for data collection and the storage of
volatile information. The definition of the protocol for the ethnographic study was found
exceptionally useful in the study presented in this paper and there were rare cases of doubt
regarding behavior and actions that were necessary when dealing with sensitive data from
the web and having a document containing already discussed aspects of participation and
ethics for example was important to avoid unnecessary and redundant discussions.
Analogously, CRABTREE (CRABTREE, 2012) and LAZAR; FENG; HOCHHEISER
(LAZAR; FENG; HOCHHEISER, 2010) presents similar discussions on the selection of
a site or group of interest to research with emphasis on the Human Computer Interac-
tion context, outlying possible barriers that may occur in the task and advising correct
behavior on different contexts. Also LAZAR; FENG; HOCHHEISER (LAZAR; FENG;
HOCHHEISER, 2010) introduces the notion of convenience in the selection of communities
to the study and advises in situations where several candidates for the study are available
and the researcher needs to choose the most valuable ones for the research.
Despite these and other characteristics being covered in the literature, little is said
about the selection of information sources and communities in virtual worlds where the
situation may seem akin, however there are complications particular to the virtual world
as the large amount of similar data and the wide variety of sources and formats in which
the information is available. The second step in our approach gives special attention to
intrinsic characteristics of the task of selecting information sources from the Internet that
we found to be effective and appropriate in the study that was carried: with the use of a
survey to identify possible sources of information from experts of the research topic, we
had the opportunity to witness different views and opinions regarding the same subject
and could select sources that were valuable and fundamental to the research.
The second step presented on Figure 8 proposes a cyclic approach consisted of three
actions of visiting sources, collecting data and storing and cataloging documents. This is
not different from the strategies of data collection and historical and archival research in
virtual works presented by BOELLSTORFF (BOELLSTORFF, 2012) where the focus is
shared between various types of virtual artifacts from interviews, wikis, logs transcripts,
blog posts, forum conversations and other documents.
What distinguishes the proposed approach for virtual ethnography is the plan of
three self-contained actions that work together in the task of collecting documents and the
recommendation to catalog and organize data in a way that would simplify the process of
data analysis. As we had to deal with large amounts of data in the ethnographic study,
the organization of publications by information sources (domains) and the redundancy in
58 Chapter 4. Virtual Ethnography approach for studying online communities in software engineering

storing the data in different formats contributed to reduce the time spent subsequent to
the data analysis where metrics were necessary to better understand the quality of data
extracted from each source. Also when using different tools for qualitative analysis, the
option of having different formats of the same document was helpful as not every page
saved .pdf carries content in the same disposal layout and by the time that this paper is
being written, some of the links that were used in the research are no longer online.
There is no secret in analyzing qualitative data from ethnographic studies and,
although HINE (HINE, 2000; HINE, 2008) are vague when describing techniques for
data analysis, other references present different methods to analyze data from different
natures as participant observation data, interview transcripts, image, video and textual
data (CRABTREE, 2012; BOELLSTORFF, 2012; SHARP; DITTRICH; SOUZA, 2016;
LAZAR; FENG; HOCHHEISER, 2010).
Nevertheless, the approach presented in this chapter is both generic enough to be
adapted in different contexts without chaining the researcher to a strict research protocol
that would limit its ability to improvise and innovate, it is also sufficiently complete to be
used on virtual ethnography studies in Software Engineering supporting the researcher by
conducting and aiding the researcher to plan and execute the research following a well
defined plan and protocol.
 59

5 Investigating accessibility issues of interac-

tion design patterns

This chapter presents an investigation on accessibility of interface elements (design

patterns) of mobile applications in the form of a virtual ethnography. The study was
conducted with the goals of identifying accessibility issues and recommendations to better
understand the problems faced by disabled users when using interface mobile design
patterns and understand the impact that using interface design patterns can cause for the
accessibility of the mobile applications.
In this study were considered only information related to Android interface design
patterns. Thus, were discarded iOS and other mobile operating systems due to the fact
that Android has 81.7% of the smartphone market share in the world (GOASDUFF;
FORNI, 2017) and 93.2% of the smartphones in Brazil are Android (CARVALHO, 2017).
The virtual ethnography study presented in the following sections was based on
the approach for ethnography in virtual communities introduced on Chapter 4.

5.1 Virtual Ethnography in Practice

This section presents a case study in which the approach for virtual ethnography
proposed on Chapter 4 is used. The goal of the study was to investigate the problems and
solutions involving the use of interface design patterns in the mobile context by analyzing
public information available in forums and blogs and not present on academic articles.
The choice of using Virtual Ethnography was made due to the existence of few articles in
the literature on accessibility of mobile interface design patterns and the importance of
knowing the practical experience of developers who have faced accessibility problems in
the context on mobile interfaces and proposed improvements to surpass these barriers.
The following sections will present each step of the virtual ethnography study that
was performed.

5.2 Contextualization of the research

The idea of looking into the market and listen to developers and designers that deal
with mobile accessibility arose from an initial study where the literature was searched for
articles on the relationship of mobile interface design patterns and accessibility. A second
step was to produce a previous research where a set of Android mobile interface design
60 Chapter 5. Investigating accessibility issues of interaction design patterns

patterns where evaluated in terms of accessibility in an e-learning platform (CASADEI et

al., 2016). In that study was identified with user experimentation that some mobile design
patterns presented accessibility barriers to users without deficiencies and also identified
that there aren’t many updated works in the area of mobile interface accessibility (and
almost none related to interface design patterns).
With the lack of information on academic sources, it was decided to search for the
information on different channels and found several articles on blogs and useful discussions
on forums about designing mobile interfaces for people with different disabilities and
decided that this information was useful for our research and that it deserved to be
analyzed, cataloged and presented in academic format.
Due to the fact that the virtual ethnography success is directly linked with the
online locations where the study is carried out, it was conducted a pre-planning phase in
order to collect relevant references to be investigated.

5.3 Pre-planning
The identification and choice of sources of information with trustworthy and relevant
data is a crucial requirement for the success of any virtual ethnography study. Because
of this, it was decided to question active designers and developers in the community
about which places they used to gather information about mobile accessibility and design
patterns.
In order to achieve this, a quick survey was created in Portuguese and English
with questions about experience working with mobile technologies and accessibility and
a last question where any source found relevant to the topics should be informed (see
Appendix E).
The survey was shared (in mailing lists of universities, partners and on social
network groups dedicated to design) during three weeks in November 2016 and reached
a total of 44 participants (designer and developers) from 14 countries (Brazil, Colombia,
Chile, Germany, USA, Ireland, Japan, Spain, Portugal, France, England, Mexico, Peru
and Italy). Although the participants of the survey were anonymous, some professional
questions were asked and it was possible to find that 56% of the 44 participants were
developers (which means that the survey reached a similar amount of designers and
developers). Also, 32% of the developers and 58% of the designers have between 5 to 10
years of experience working in their profession and 63% of all participants "knew" or "knew
a lot" about Mobile Interface Design Patterns and Accessibility.
The survey resulted in 72 websites, forums and blogs informed by the participants.
However a preliminary analysis was done and all sources were accessed and searched
5.4. Planning 61

in a process that resulted in 54 sources being eliminated due to several reasons: some
addresses or names were not found, other sources were documentations or had focus on
iOS development or nothing on mobile accessibility and design patterns was found. Which
resulted in the selection of 18 information sources that were used in the study and will be
reported in analysis section.
After gathering sources where the information would be collected, the planning
step was initiated.

5.4 Planning
Before starting to search the web for information regarding mobile accessibility and
interface design patterns accessibility, there were defined several aspects of an ethnographic
study and compiled these aspects in our research protocol that is part of the Planning
process (step 1 on Figure 8).

5.4.1 Ethnography Protocol Definition

The protocol was defined for all 7 dimensions presented on Chapter 4.
Participation role - The first aspect that needs to be discussed is the role of
presence in the ethnographic study. Although the adoption of any presence role brings
advantages and challenges to the researcher and due to the nature of our research goal
(the wish was to examine public information available in the Internet), it was decided to
adopt the role of observer.
Regarding the concern with the researcher’s identity, it was decided to adopt the
position of not informing the subjects of our research intentions. This decision was made
because it was not wanted to influence the online community with our study and due to
the fact that was our intention to analyze data publicly available on the web.
Another important aspects of ethnography is the ethical position of the researcher
regarding the anonymity of the participants and the informed consent and age. Forum
and blog users, even of public content, often assume that anonymity is secured on the
Internet and that information and opinions posted online will not be traced back to their
real identities (STEINMETZ, 2012b).
Although our goal was to gather information that is public and shared in the
Internet without restrictions of reproduction and use, it was decided to maintain the
subject’s identity intact by not sharing citations linked to a username. Also the use of
informed consent and age was discarded as the information is public and each online
platform (blogs, forums and sites) already require its users to agree with terms of use and
disclosure of information.
62 Chapter 5. Investigating accessibility issues of interaction design patterns

Duration - The duration of the study cannot be foreseen by the researcher,

however, the researcher can trace a plan of work that determines the time spent in the
field site and doing data analysis. For this research it was defined to take an approach
where the analysis of data would be done after a source had been completely scanned as
several sources of information were going to be used.
Location - The choice of the location (or locations) of this virtual ethnography
came as an improvement form the phase of Selection of Information Sources and it was
decided to search blogs, forums and other virtual references given by researchers, developers
and designers (see Section 5.3).
Theoretical Underpinnings - The theoretical underpinning adopted in this
study came from my previous work on accessibility of mobile design patterns (CASADEI
et al., 2016) and from a technical report that assessed a set of design patterns in terms of
usability and accessibility barriers for the web (YESILADA; CHEN; HARPER, 2009).
Ethnographers intent - The intent in this research was to identify the practice
of developers and designers regarding mobile interface design patterns and understand
issues faced in the development of mobile application and solutions that are proposed.
Historical Period - This unique characteristic of virtual ethnography studies
was identified and had to define a period in which the information would be accepted
in the research. As its often deal directly with technology on Software Engineering it’s
important to have in mind the relevance and popularity and usage curve of the technology
in order to select a space of time where information about this technology will be relevant
and not obsolete while dealing with mobile web that has changed broadly in the last few
years and continues to change, it was decided to consider a window of 5 years of data. This
means that only articles or conversations that were published after 2012 were considered
to this study as it was perceived that most interface patterns had suffered modifications
with the dissemination of smartphones in the world, that started to be expressive in this
period of time.
Storage of Volatile Data - In the study with accessibility and mobile design
patterns was adopted the strategy of redundancy when storing articles and forum conver-
sations by generating a .png image of the entire page with the help of a plugin for Chrome
browser in order to maintain the original state of the page and two other copies of the
information in .pdf files (one generated with the browser’s pdf saving tool and another
with a special plugin that generates ready for print .pdf files) alongside with a .txt file
containing the URL of the page.
The choice of adding the redundancy of .png and .pdf files was due to the fact
that some pages do not adapt well when saved in .pdf and some information could be
lost or overlaid by images or other elements and also because the data analysis would be
5.5. Ethnography Execution 63

performed using the .pdf files and in our experience, some pdf readers do not perform well
with selecting and copying information from these files.

5.4.2 Selection of Information Sources

Although we already had background knowledge on mobile accessibility from

previous research and developing mobile applications with focus on accessibility, we believed
that for this study a valuable approach to gather information sources was consulting the
community of designers and developers from different parts of the world and ask which
blogs, sites and forums were they used to improve their knowledge on mobile design
patterns and accessibility.
In order to achieve this, we created a quick survey in Portuguese and English with
questions about experience working with mobile technologies and accessibility so that
we could better understand the participants of the survey and a last question where any
source found relevant to the topics should be informed.
With the amount of participants reached in this survey, the good coverage in
different countries and the information indicated related to work experience and knowledge
in the topic of the survey, we believe to have achieved the goal to gather information
sources from actual developers and designers.
The survey resulted in 72 websites, forums and blogs informed by the participants,
however a preliminary analysis was done and all sources were accessed and searched
in a process that resulted in 54 sources being eliminated due to several reasons: some
addresses or names were not found, other sources were documentations or had focus on
iOS development or nothing on mobile accessibility and design patterns was found. Which
resulted in 18 information sources that were used in the study (see Table 1).

5.5 Ethnography Execution

With the protocol well established and the 18 sources selected, it was time to
start the second step in our approach presented in step 2 of Figure 8, the Ethnography
Execution. This step consists of three cyclic actions that were executed to each one of the
information sources.
It’s also important to notice that this process took most of the time of the research:
the first cycle of this step was started on December of 2016 and the last cycle happened
14 weeks later.
64 Chapter 5. Investigating accessibility issues of interaction design patterns

5.5.1 Source Exploration

The first action was to access a source and search for content that was valuable to
the study and, in order to do this, we had to create search queries that would express the
topics we wished to find. As many web pages, all 18 sources had content and title based
search engines with no sophisticated search controls, which means that we had to create a
set of expressions in plain text and search for each expression.
The definition of these search strings is not random, the researcher shall have
previous knowledge of the topic studied and know which expressions are often used to refer
to each specific topic. In our study, as we reached professionals from several countries in
the survey, (we had sources in three different languages: Portuguese, English and Spanish),
we had to adapt our search strings to the correct expressions used in each language.
The list of search strings used in this research consisted of 10 expressions and
small variations of these expressions: Mobile Design Patterns, Mobile Accessibility, Design
Patterns, Inclusive Mobile, Inclusive Design Patterns, Android Accessibility, Android
Design Patterns, Mobile UI, Mobile UI Accessibility, interface design patterns.

5.5.2 Data Selection

Each information source was then accessed and explored using the search queries
where every blog post or forum discussion that matched the criteria was analyzed in order
to evaluate its relation with the topic, importance and value of both its raw content and
comments. Also, it was verified if the publication date matched the time criteria defined
in the protocol, that is, if the information had been published after 2012.

5.5.3 Data Storage

If the information was considered relevant to the study it needed to be stored and
cataloged. In our protocol we had defined that the documents would be saved in .png and
.pdf formats in order to preserve the original content from the date it was visited and
collected.
However it is also necessary to establish a set of criteria to catalog and organize
all documents. Usually in a classical ethnographic study where interview transcripts are
analyzed, the researcher organizes the transcripts by subject and date, in our study we
decided to adopt a similar approach adapted to the nature of Internet information: we
decided to create a structure of files containing domain folder, sub-domain folder (if
present) and publication title. With this approach we were able to organize all documents
and identify its origin, also, we chose to not catalog the publications by date because all of
them were published in the last 5 years and because this information was not considered
relevant to the study.
5.6. Data Analysis 65

Table 1 – Number of publications by Domain (Information Source)

Domain No. publications

medium.com 46
smashingmagazine.com 21
nngroup.com 12
stackexchange.com 10
reddit.com 9
creativebloq.com 7
uxpin.com 6
torresburriel.com 2
grihotools.udl.cat 2
uxmovement.com 2
usabilitygeek.com 2
bradfrost.com 2
androiduipatterns.com 1
visualhierarchy.co 1
lmjabreu.com 1
mobile-ui-design.ionicthemes.com 1
linkedin.com 1
jamesarcher.me 1

After analyzing all 18 information sources, we had selected 127 publications (pre-
sented on Appendix A). The distribution of publication by domain (information source)
can be seen on Table 1 and it’s clear that some sources as medium.com and smash-
ingmagazine.com presented a greater concentration of documents extracted and this is
explained by the fact that these pages publish articles from different authors, thus having
higher publication rate compared to other sources.

5.6 Data Analysis

The process of analyzing the data collected in the ethnography can be done using
several different qualitative analysis methods. In our study we had a large amount of
data (127 documents) and we wished to understand the point of view of developers and
designers who work with mobile UI and accessibility without the interference of personal
opinions and knowledge that the researchers could have.
Therefore it was decided to use Grounded Theory, that is a qualitative research
method used to develop a theory about something based only on data analysis (CHARMAZ,
2014), based on the theoretical knowledge that we had. Despite the core essence being the
same, there are more than one approach to Grounded Theory and we decided to follow
the version presented by CHARMAZ (CHARMAZ, 2014) as it is a practical and common
approach.
66 Chapter 5. Investigating accessibility issues of interaction design patterns

Different qualitative techniques can be used with the purpose of carrying out of
results analysis. One of them is Grounded Theory (GT), a method that uses a systematic
set of procedures in order to develop and to derive inductively a theory grounded about a
phenomenon based solely on the data collected (STRAUSS; CORBIN, 1997). Based on the
collection of qualitative data, the researcher reviews the data and analyze concepts and
ideas that are classified in the form of codes. Coding is a process where data is segmented
on small fractions that can be conceptualized and integrated in order to form a theory. This
way, codes are aggregated in concepts. Later, these concepts are organized in categories,
that are the base to build the theory. The analysis and coding process reaches its end when
theoretical saturation is reached, that is, when nothing new emerges from the process of
analysis and categorization of the data (ALLAN, 2003).
As a result of the Grounded Theory method, many artifacts can be created an
one of the most important artifacts is the Memo. Memos are notes about the data, codes,
relationships between codes or even conclusions that the researcher finds useful to better
mold the theory (BIRKS; MILLS, 2015). The creation of memos is extremely important
as these annotations are the first attempt to communicate in textual format the results of
a Grounded Theory.

5.6.1 Grounded Theory process

As described on Section 4.2.3 the process of analyzing the data collected in the
ethnography can be done using several different qualitative analysis methods. In our study
we had a large amount of data (127 documents) and we wished to understand the point of
view of developers and designers who work with mobile UI and accessibility without the
interference of personal opinions and knowledge that the researchers could have.
There are different methodologies with small differences of how to conduct Grounded
Theory research as the classical definition (CORBIN; STRAUSS, 1990) and more recent
and practical approaches (CHARMAZ, 2014). Despite the core essence being the same,
there are more than one approach to Grounded Theory and we decided to follow the
version presented by CHARMAZ (CHARMAZ, 2014) as it is a practical and common
approach.
There is more than just one method for coding. One popular coding technique
is called word-by-word coding. In this technique each word (or small groups or words)
receives a code in the open coding step and it’s usually used on extremely dense documents.
Another technique analyzes and assign a code to each line or each sentence, called line-
by-line (CHARMAZ, 2014). The coding technique that we adopted in this GT study is
called incident-to-incident coding. In this approach, any amount of text in any location
of the document can be coded. Incident-to-incident coding is mostly used on documents
that have low density, that is, documents that are not derived from direct interviews and
5.6. Data Analysis 67

may contain portions of text that are not relevant to the research as they address other
subjects.
On the Open Coding process (incident-to-incident coding), each document was
analyzed in order to identify text snippets that meant something and could be assigned to
a code. This snippet could be a line, a sentence, several lines or an entire paragraph. After
doing this for all documents, 243 codes were created.
The second step, called Axial Coding, reorganizes the data and established initial
connections or relationships between the codes. This means that new codes can be created
and also that existing codes can be deleted or merged into new ones. While on the first
coding step (open coding) 243 codes were created, by the end of the second step 189 codes
were left.
On the Axial Coding all previous codes were reviewed and all documents revisited.
In this process it was possible to identify codes that were too similar or had intersection of
codings in the text. In these cases, some code were created, some were deleted and other
were merged.
In the third coding step, Selective Coding, the codes created on the two previous
steps were refined and analyzed in order to identify main subjects in which the codes
would be categorized. In this step, the 189 codes were organized in 27 categories. During
this process, all codes were analyzed and were identified a set of categories were the codes
could be classified.
Lastly, but of utmost importance, several memos were created based on the discov-
eries that were made from the coding process and relationships that were found between
the codes. This resulted in 21 memos that detail several accessibility problems cited on
the documents identified in the virtual ethnography. These memos also contain important
thought and conclusions about possible solutions that might improve the accessibility of
content and design patterns on mobile devices.

Table 2 – Relationship connectors on Nvivo 11

Symbol Relationship Name
−→ A one-way relationship can Leads to
be used to demonstrate a rela-
tionship between items which
has a definite direction..
An associative relationship Associated with
can be used to demonstrate
that items are in some way af-
filiated.
←→ A symmetrical relationship Is related to
demonstrates a two-way ac-
tivity between the items

In this research, the qualitative research software Nvivo 11 (RICHARDS, 1999)

was used. Also, in this study all three coding steps from the GT method were used. Once
68 Chapter 5. Investigating accessibility issues of interaction design patterns

each category is defined and all codes are refined, it’s possible to determine relationships
between categories and between codes. These relationships are defined with the use on
connectors that are provided by Nvivo 11. These relationship types are presented on
Table 2.
After analyzing the data through the Grounded Theory research method with the
creation of all needed codes and memos, it was possible to better understand the problems
faced by developers and designers in the field of mobile accessibility of design patterns
and also learn from the creative solutions proposed to some of the accessibility issues.
In the end, the nature of the data and the familiarity of the researcher defines
the technique or methodology adopted. In this study, the use of Grounded Theory was
essential to achieve results that reflected the point of view of professionals in the field of
mobile development without interference of personal preferences or previous knowledge
from the researcher.

Figure 9 – Example of Memo on Mobile Pagination Interface Design Patterns

5.7. Findings 69

5.7 Findings
At the end of the study several issues involving interaction design patterns were
found and the relationship between discussions in different sources allowed the elaboration
of Memos, that are the description of the analysis of data or codes that can be done during
and after the coding process (CHARMAZ, 2014). With the productions of memos it’s
possible to better organize ideas and discoveries from the Grounded Theory method.
One important discovery of the case study is shown in Figure 9 in the form of a
memo that discusses the use of the interface design pattern List Navigation in terms of
mobile accessibility. In the study we’ve identified that the navigation in lists on mobile
devices is usually implemented in the form of an infinite list of items in which new items are
loaded each time the user reaches the end of the current list. Although this implementation,
called Infinite List, may seem appropriate and simple, it has several accessibility and
usability problems that were identified in the research as the lack of responsiveness in low
bandwidth scenarios and difficulty to find items in an ordered list. Also, from the stories
collected in the ethnography, we were able to propose a possible solution for a better
implementation in terms of accessibility.
Other important findings were also made from the analysis of data as a better
understanding of different types of visual impairments related to color blindness. It was
common to find developers and designers presenting how people actually see colors with
different varieties of daltonism and discussing or proposing solutions for better use of color
combinations in order to provide a better experience for such users. One common problem
found in many e-commerce sites for example, is choosing the color of a product without
supplementing the selection with the name of the color. This causes serious problems for
the colorblind as they will not be able to identify which color an item is if the name of the
color is not specified.
Another relevant accessibility barrier was identified with the use of the interface
design pattern Icon. In many contexts, icons are used to represent a functionality, action
or type of information. However, the use of icons is problematic as the association between
a graphic representation and an action, for example, depends on previous knowledge from
the user. Therefore, the use of icons alone to represent information can cause confusions
that may preclude the user from using an interface due to the difficulty in understanding
the icon.

5.8 Conclusions
Still in the subject of disabilities we could understand how design choices of fonts
and element positioning can be harmful for people with dyslexia.
70 Chapter 5. Investigating accessibility issues of interaction design patterns

In summary, it was possible to identify accessibility and usability problems with

various mobile interface design patterns. It was also possible to find similar discussions
around the same topic in different sources of information and with different perspectives,
which helped in the process of defining new memos in order to document the findings of
the study.
This chapter presented an ethnographic study on online communities that used
the approach introduced on the previous chapter (Chapter 4). It shows in more detail the
challenges of collecting, analyzing and storing data available on the Internet and gives
a notion of how designers and developers are currently addressing accessibility issues on
mobile applications.
The next chapter will present the detailed results from the analysis and the
accessibility recommendations for the Interface Design Patterns.
 71

6 Interaction Design Pattern Accessibility

From the GT in the data analysis phase a total of 189 codes were created and
organized in 27 categories (with 12 categories being interface design patterns) with 21
Memos.
In the end, the categories that resulted from the GT method consisted of Interface
Design Patterns and also other aspects related to accessibility (which are called "Cross-
Section Elements"). For example, the most coded category is Navigation with 130 codes
where this category contains citations related to navigation mobile UI elements such as
hamburger menu and tab navigation.
Each category has relationships with other categories and these relationships are
important to better understand the affect that "Color" has on the Interface Design Pattern
"Icon" for example.
These relationships are represented on Figure 10. In this image it’s possible to
see that there are three types of arrows, that represent the kind of relationship (see
Table 2). Also, from Figure 10, it’s possible to see the relationship between the Interface
Design Patterns studied (solid in red) and also the connection between the patterns and
other aspects (the cross-section elements - dotted in black) and thus, understand that
accessibility is a complex subject that is affected by many other elements.
In this image it’s possible to better understand the relationship between the
Interface Design Patterns and the cross-section elements. For example, the Design Pattern
"Icons" is related to "Color", that is associated with Errors and is related to "Contrast"
and "Content Accessibility", thus, "Icons" is related to "Content Accessibility".
In the following sections, the categories that were created during the data analysis
are presented as well as the accessibility recommendations related to each category.

6.1 Interface Design Patterns

This section presents 10 recommendations to improve the accessibility of Interface
Mobile Design Patterns.
Usually in the description and presentation of an Interaction Design Pattern some
elements are presented such as the pattern name, a description, a context of use, a solution
for the problem and examples. As in this work the patterns are not defined, but simply
extended and therefore if all elements were presented it would be similar to the Android
definition guidelines, it was decided to present only the elements that were necessary.
72 Chapter 6. Interaction Design Pattern Accessibility

Figure 10 – Relationships between categories

Each design pattern is then presented through a description, followed by acces-

sibility barriers or accessibility problems related to the pattern on mobile devices and,
finally, the recommendations to mitigate or eliminate the accessibility barriers.

6.1.1 Navigation

Figure 11 – Relationships of category Navigation

6.1. Interface Design Patterns 73

6.1.1.1 Description

The Navigation category was present on 28 documents with a total of 130 coded
sentences. Thus, navigation is the most frequent subject found in this research.
From the analysis of the codes identified for "Navigation", it was uncovered that
only two mobile interaction design patterns were discussed in the 28 documents where the
theme was found: the navigation drawer (or hamburger menu) and the tab navigation.
In Figure 11 we can see that the Navigation category has relationships with other
five categories that are Hamburger Menu, Tab Nav, Action Bar, Gestures and List and
Pagination. These relationships are important as they evidence that navigation accessibility
problems are affected or affect the interaction with mobile devices through gestures for
example.
Also, the navigation category has 7 child nodes represented by circles filled in
blue, these are some of the codes that compose this category. Although the software used
to in the GT method (NVIVO 11) doesn’t allow to show, the child nodes Hamburger
Menu and Tab Nav are also subcategories of navigation and contain 5 and 7 child codes
respectively. Similarly, navigation contains a memo containing key information about
accessibility issues on mobile applications and the subcategories Hamburger Menu and
Tab Nav, also contain memos reporting specific concerns about each design pattern that
are not shown on Figure 11 due to limitations on the qualitative data analysis software.
From the analysis of the codes in the category Navigation and its relationships, it’s
clear that the concern with accessibility in this category is focused on general navigation
interaction with mobile interfaces. It’s then possible to conceive recommendations to
improve or implement accessibility for general navigation in mobile applications.

6.1.1.2 Accessibility Barriers

When dealing with complex processes on mobile application, many times there is a
big number of steps that the user must follow in order to complete a task or achieve a
goal. Although it may seem more organized and appropriate to split actions in multiple
steps, on multiple screens, this segmentation of information requires the memorization of
previous actions. The problem is that people with cognitive deficiencies may struggle to
remember previous actions or information as they often suffer from short memory loss.
Also, elderly users also have problems locating themselves and remembering something
they did only moments ago. Even users that do not suffer from any disability may have
difficulty following actions that are split in multiple screens when using the mobile device
on busy environments where the user must be aware of its surroundings (in a bus for
example).
74 Chapter 6. Interaction Design Pattern Accessibility

6.1.1.3 Recommendations

One simple but effective solution for improving the general navigation experience
of users and provide accessible feedback to any user is to use breadcrumbs or hints of some
sort that inform the current location. Although breadcrumbs are a common practice on
web development, it’s rarely used on mobile. With the information of the current location,
older users that often get lost on mobile applications and are insecure about how to undo
some action for example, will be able to understand better where they are. However, the
developer or designer must understand that, by providing more information, more space
is occupied and less space is available for the content. Thus it’s important to find the
appropriate place to display such information, as for example an action bar or a simple
field above the page title.
There are also other concerns with mobile navigation accessibility that are specific to
implementations of mobile navigation. The sections below provide more detailed conclusions
about the categories Hamburger Menu and Tab Navigation.

6.1.2 Hamburger Menu

6.1.2.1 Description

Hamburger menu is a kind of navigation interface design pattern mostly used on

mobile applications that consists of presenting navigation options that are initially hidden
and that can be triggered by the click of a button.

6.1.2.2 Accessibility Barriers

The problem with this approach is that the navigation is hidden from the user
that needs to have previous knowledge to understand that the menu can be accessed by
clicking a button. The menu icon has low information scent, and, even with a label called
"Menu", users may still not use the navigation as they do not know which options are
available and don’t even click the button.
In the documents analyzed several use cases were presented about big companies
that initially adopted the hamburger menu, but soon changed to Tab navigation. Some
companies as Facebook and BBC used the drawer navigation, but due to the low discover-
ability that this type of menu provides, they identified that users had problems locating
sections and menu options.

6.1.2.3 Recommendations

When dealing with patterns that directly affect the discovery of content, the solution
is not always simple. However, some recommendations are effective:
6.1. Interface Design Patterns 75

• When using hamburger menu, use appropriate and explanatory terms for menu
items;

• Avoid creating too many menu items. This can lead to an extensive list of options
that are easily ignored and, sometimes, not well displayed on mobile devices;

• Although the menu is there, it’s positive to tell the user what are the main navigation
options available on the front page.

6.1.3 Tab Navigation

6.1.3.1 Description

The main advantage of the tab bar is that it doesn’t hide the navigation options,
they can be available all the time and the user has easy access to the navigation bar
without needing to open a drawer in order to locate which navigation options are available.

6.1.3.2 Accessibility Barriers

Although tab navigation may seen the perfect navigation element for mobile devices,
it can hold only up to 5 navigation options in order to be able to fit in the screen with
appropriate font size.

6.1.3.3 Recommendations

Another important contribution of tab navigation is that the tabs communicate

the user about the current location by visually featuring the current position in the related
navigation option. This simple feature makes the user capable of visually understanding
the current location and also gives more control to visually impaired user who use screen
readers and also to users with cognitive deficiencies who struggle with short term memory.
In situations where the number of navigation options are too big, there are two
approaches to still use a navigation tab bar: the first approach is to add a last option
called “more” or other appropriate label that will open a navigation drawer.
The second approach applies the use of a horizontally scrollable navigation tab
bar. In this approach, the navigation bar can hold more options while keeping the optimal
touch-target size. The downside of both approaches is that they still have discoverability
issues.
76 Chapter 6. Interaction Design Pattern Accessibility

6.1.4 Input
6.1.4.1 Description

Inputs were probably one of the first interface interactions that were designed in
the early days of graphical computing and they have not changed much ever since.
In Figure 12 we can see all relationships and codes related to the Input category.
One of the accessibility concerns that were most present in this category is the correct use
of placeholder and labels on input fields.

6.1.4.2 Affected Barriers

The use of placeholders alone saves the designer space for more elements. However,
when an input field does not have a label, the hit area of that element is reduced. This is
harmful for older users or users with motor disabilities that may limit they movement, for
instance.

Figure 12 – Relationships of category Input

In addition, a placeholder disappears when the user starts typing, which instantly
removes all the context of the input field. This problem is also harmful for people with
cognitive deficiencies as they may struggle to work with short term memory. Placeholders
are presented with low contrast to the background, which may spoil the experience of users
with visual impairments or users with situational disabilities caused by screen reflection in
the screen. There is no solution for this problem because if the contrast is higher, the user
may confuse the placeholder with actual content of the input, for example.
6.1. Interface Design Patterns 77

6.1.4.3 Recommendation

A solution for most of these problems is the appropriate use of label and placeholder
together. Labels are not help texts and thus should be succinct, short and descriptive so
that users can quickly identify what information is required. Also, labels must present the
necessary information for the user, for example: on a login form where the user can use a
username or an email to access the account, the label must contain “username or email".
Placeholders that are used with labels must be meaningful and contain information
about the format expected in the input field or other necessary information. Both on
placeholders and on labels, the text should never be in all caps, as it’s more difficult to
read and harder to quick scan.

6.1.5 List and Pagination

6.1.5.1 Description

From Figure 13 we can see that the category "List and Pagination" is related to
the "Navigation" category which is explained by the fact that the user navigates through
the items in a list.

Figure 13 – Relationships of category List and Pagination

On web desktop list navigation is usually implemented with pagination controls

at the bottom or top of the page. With these controls, the user has variety of actions to
choose as skipping pages, jumping to the end or returning to the first page.
78 Chapter 6. Interaction Design Pattern Accessibility

On mobile applications, a interface design pattern that has been widely used for
list navigation is the infinite list. In this pattern, the user does not have to click on any
button in order to load more items, instead, when reaching the bottom of the page, a new
set of results is automatically loaded and displayed to the user. This process continues
until the end of the list is reached.

6.1.5.2 Accessibility Barriers

Although the infinite list may seem like a good alternative of minimalist and
practical design, it raises serious accessibility concerns. On situations of low bandwidth,
that are common when using mobile devices outside a Wi-Fi network, infinite list may
present long waiting times while loading for new items to be displayed. This long wait
may cause the user to think that the application is not responding or think that the list
has reached its end. Also, visually impaired users may not understand what is happening
because the screen reader may not be able to correctly inform the user that the application
is loading new information.
One of the major problems with infinite scrolling is that it does not provide any
information regarding the position on the list. The same way that the lack of information
about location in the navigation of mobile applications (Section 6.1.1) can cause serious
problems for people with different disabilities (and even people without disabilities). It
also may cause confusion and uncertainty for many users that are not sure of their current
position, to how they got there and how to share or save the position of an item in the list
for example.
Also, on some implementations, the infinite list is sorted by date or alphabetically.
This situation causes a new problem where it’s extremely difficult and tiresome to find an
item at the end of the list as it’s not possible to jump to the end of the list. Many times,
list implementations do not provide any kind of filtering options, which contributes to
these issues.

6.1.5.3 Recommendations

With these issues, it was found that, in terms of accessibility, the better list
navigation pattern is still pagination, even on mobile devices (of course that with fewer
controls due to the small viewport). Also, it’s important to provide filtering and ordering
options in order to lower the number of items in the list.
Although in theory pagination requires more clicks and actions from the user, it
provides more control. Also, as pagination is controlled by buttons, screen readers are able
to correctly parse the elements in the page.
6.1. Interface Design Patterns 79

6.1.6 Icons

Figure 14 – Relationships of category Icons

6.1.6.1 Description

Icons are pictographic representations of actions or things and are widely used in
the everyday interaction with any computer or mobile device. And, as can be seen on
Picture 14, it’s strongly related to the category "Color".

6.1.6.2 Accessibility Barriers

However, many times, icons are used and inserted in the life of users without further
explanation and are even not representative. One great example is the On/Off button 15
present on any computer. The symbol is actually formed by two other symbols: a line
(POWER ON SYMBOL) that indicates that the device is fully receiving energy (I means
‘on’) and a circle (HEAVY CIRCLE) that indicates that the device is disconnected from
the energy. Together, the symbol that is well known by everyone means a switch that
will turn on and off the device without permanently interrupting the power supply. It’s
different from the I/O symbol found on switches for example that indicates full energy or
absence of energy.
There are also icons that are legacies from everyday objects of the past that are
incorporated by new users that do not correctly understand it’s meaning. The perfect
example is the floppy disk icon that means saving a file: this icon was relevant as floppy
disks were the main source of data sharing for a long time, however, new users do not even
know what a floppy disk is and simply associate the icon with the common use.
80 Chapter 6. Interaction Design Pattern Accessibility

Figure 15 – On/Off button

The downside is that if someone would not explain to the user that a floppy disk
means ‘save’ and the power button is the power button, the user would not know its use
and would have to guess, which harms the user experience and rises accessibility concerns
of whether the icon is helping the user by providing a pictographic representation of a real
object of is confusing the user.

6.1.6.3 Recommendations

It’s necessary to correctly choose meaningful icons that will actually help the user.
One great way of doing this is choosing icons that are available in the mobile platform,
because they appear in more places in the same interface and most of the times were
already tested with real users.
There are also other concerns that may arise with the use of icons, as the use of
colors to help the user to understand an icon. Colors are not reliable to give information
as people with difficulties to see some colors may be confused. Thus, in most cases, icons
must not be used alone, but with the aid of explanatory text.
Also in some interfaces that use only icons for a search box for example, where the
input box appears only after the user click on the search icon, the hit area is extremely
reduced, with is bad for many people and also if not provided alt text, screen readers will
not know how to parse such element.

6.1.7 Data Tables

6.1.8 Description
Data Tables is strongly related to the category "Content Accessibility", as can be
seen on Figure 16 and several are the problems involving table accessibility.

6.1.8.1 Accessibility Barriers

The more common issue found while dealing with displaying large amounts of data
on form of a table, is the space that the table requires. In some cases, even when viewing
6.1. Interface Design Patterns 81

Figure 16 – Relationships of category Data Tables

a table on desktop, the viewport and resolution of the computer may not be sufficient to
display the whole table in the page.
On mobile, the problem is more evident as the screen is significantly smaller.
Displaying data tables on mobile is already a challenge and making them accessible is an
even greater challenge.

6.1.8.2 Recommendations

Leaving the issue of correctly displaying the data, there are several other problems
that are not apparent but has been always present:

• Table borders are used by screen readers for identifying a data table. This means that
if a screen reader finds a table that does not have defined borders, it will possibly
parse the table as a layout table and will not read its contents correctly.

• Some screen readers have difficulty identifying commonly used operands and charac-
ters usually used in data. One example is the use of hyphens to demonstrate negative
numbers (for example -99.99). The screen reader will not read the hyphen in most
cases, for this, it’s necessary to use the correct minus Unicode character.

• On some framework implementations, tables are not defined with the usual <table>
HTML tag, but defined with <div> or custom tags. With this, the screen reader
will not be able to understand the content.

• Data tables as any other content must have well defined ARIA attributes
82 Chapter 6. Interaction Design Pattern Accessibility

• There are other issues with how to present a data table so that screen readers can
read it that are presented on http://webaim.org/techniques/tables/data

Returning to the problem of correctly presenting a data table on mobile, there are
several recommendations found on the research as selecting only the necessary and pertinent
information to be displayed, thus, reducing the number of columns. This approach is valid,
but it does not solve the whole problem, as many times, all information is necessary.

Figure 17 – Data Table design proposed on “Lessons from building mobile-friendly, acces-
sible data tables”

As mobile phones are usually used on portrait mode, the bigger problem faced while
showing data is displaying vertical information and maintaining the necessary spacing
between rolls. One solution for displaying data tables on mobile is presented on the
article “Lessons from building mobile-friendly, accessible data tables”1 and can be seen on
Figure 17.
The solution consists of following the accessibility recommendations of WebAIM
and displaying the table by sticking the first column of information in the leftmost part of
the screen and adding a vertical scroll-bar to the following columns, but maintaining the
fist column in sight in order to prevent loosing context while showing the rest of the data.
This solution works well with both desktop and mobile devices and solves the
problem of displaying data tables on mobile without loosing context or harming screen
reader usage.
6.1. Interface Design Patterns 83

Figure 18 – Relationships of category Select and Dropdown

6.1.9 Select and Dropdown

6.1.9.1 Description

Select and Dropdowns are well defined interface design patterns, however, in some
situations, the adaptation for mobile is not effective and accessibility and usability is
affected.

6.1.9.2 Accessibility Barriers

Especially when a dropdown has a large number of items, problems start to arise
regarding how to present the list on mobile devices with limited space on the screen.

6.1.9.3 Recommendations

Some possibilities of adaptation were identified in the study:

• Dropdowns items can be affected by context. For example, in a list of drugstore, the
list should be ordered by proximity to the user. In a list of airports, the same idea
may apply. On other contexts, the list could be ordered by the most selected item or
any other classification or rank that may be reasonable.

1
https://ux.shopify.com/lessons-from-building-mobile-friendly-accessible-data-tables-1e05c6924eaf
84 Chapter 6. Interaction Design Pattern Accessibility

• Another solution for a large number of items is to split the list into two or more
selects. This approach is not the best and many times cannot be meaningful, but
it’s a valid one on some cases.

• A different approach to the dropdown situation with many items is to provide filters
or categories in order to reduce the number of items displayed. This approach is
already used on many examples found, however, it increases the number of clicks
that the user needs to perform.

• Lastly, one more approach is a hybrid search plus select implementation where
the select box is also a search input and the user may type in order to filter the
items. This approach is extremely valid as searching for the item may be faster than
manually searching. One downside is that on mobile devices input entry may have
complications for some users due to the small screen.

6.1.10 Sliders

Figure 19 – Relationships of category Sliders

6.1.10.1 Description

Sliders are intuitive in terms of touch interaction because they mimic the interaction
obtained in the real world. Thus, the common slider implementation is usable both on
mobile with touch screen and desktop with the precision of the mouse.
6.1. Interface Design Patterns 85

6.1.10.2 Affected Barriers

However, there are some problems with the correct way to present the slider.
Firstly, there are two possible implementations of sliders: the continuous and the
discrete slider.
The continuous implementation of a slider gives the user more control over the
selection of range, however, this control can also spoil the usage as many times, it’s difficult
to select a specific value in a large interval, so with continuous slider, the precision may
not be satisfactory.
Also, another issue that rises with continuous sliders is that the user has no idea of
sizes and values that are currently available. This can lead to unwanted results.

6.1.10.3 Recommendations

Another variation is the slider with two selections. In this implementation, the user
may select using the same interval a lower and higher boundary for the filter. The problem
with this implementation is that in some cases, when the range of values is too big, the
user has trouble selecting a small interval as the slider selection icons can be overlaid or it
cannot be possible to perform such action.
Discrete sliders are preferred over continuous sliders, but there are also consid-
erations about this implementation. On discrete sliders, the user is given the choice of
predefined values and so, the user will not have precision problems that could happen in a
continuous range. With discrete sliders, it’s also possible to have a slider implementation
with two selectors in the same range bar.
However, in a simple range of prices that is divided by units of ten for example, the
user may select an option that does not have products and is presented with an empty list.
This is problematic as it hurts the user’s expectations. To fix this, the slider must contain
only intervals where there are products to be displayed. With this, values such as zero and
maximum must also be changed by the minimum and maximum price of products in our
example.
Other considerations are also necessary when implementing any kind of slider:

• The values of the slider selection should appear above the pegs, with this, when the
user clicks to select, the user’s fingers will not cover the value

• There should be an alternative form of selection that is different from sliding a peg.
This can be done by adding a input element on top of the slider where the value
can be manually changed by typing a new value or the value can be automatically
86 Chapter 6. Interaction Design Pattern Accessibility

changed when moving the selection along the slider’s range. This option is useful for
many disabled users with motor impairments and for those who use screen readers.

• In order to give the user more control over the selection, the slider could provide
more information regarding the number of items available in a position (for example,
the inventory counts). A way of implementing this is by dividing the slider positions
by number of items in a range. With this, a certain distance of movement on the
slider’s axis represents and equal absolute change in value.

• Another way of presenting the user with more information regarding quantity if
results, is to present a histogram based on the number of items in stock attached to
the slider.

6.1.11 Carousel

Figure 20 – Relationships of category Carousel

6.1.11.1 Description

The Carousel design pattern is used to show featured items in a vertical list of
items with pictures and descriptions, but unfortunately, many mobile app implementations
do not offer satisfying carousel experience.
In this pattern the user is able to view several images of products across a row with
horizontal swipe to navigate from one product to another. Typically, an arrow indicates the
direction of the carousel and apart from the featured item, there are other items partially
hidden.
6.2. Cross-Sectional Elements 87

6.1.11.2 Affected Barriers

The carousel is a typical pattern that shows the use of gestures to swipe and
navigate through the carousel’s items in a mobile device. The functionality is intuitive,
however, it’s necessary to provide visual information regarding the direction of the carousel
and also button alternatives for the swiping gesture.
The pattern works well on small devices because it uses screen space efficiently, but
there are some implementations and variations that have serious accessibility and usability
problems.

6.1.11.3 Recommendations

In the following items problems and solutions are described for the carousel pattern:

• At the end of a carousel, it’s necessary to give the user the opportunity to see more
results. A “See more” link can be added and redirect the user to a page listing more
products.

• Some implementations present vertical scrolling that are not smooth. The scrolling
of this pattern must regard the user with the option of fast and precise scrolling
without keeping the user stuck and limiting the user’s navigation.

• The implementation should always indicate the scrolling direction. Also, the carousel
shall provide a unique starting point, presenting the far left item first.

• An infinite carousel makes the user tired and is not recommended. A good amount
of items varies from 8 to 20 items. When the carousel is infinite or has too many
items, the user feels bored or tired.

• A carousel does not replace any kind of list of items.

• It’s important to maintain consistency in the item’s structure, so if one item has
image and description, all items must have the same information. Also, the items
must have meaningful images and descriptive texts in few words.

6.2 Cross-Sectional Elements

The following subsections present other elements that arised from the data analysis.
These aspects are strongly related to the Interface Design Patterns and cannot be ignored.
Therefore, these concepts are explained and recommendations are also proposed in
order to improve the general accessibility of mobile interfaces.
88 Chapter 6. Interaction Design Pattern Accessibility

6.2.1 Contrast
Good color contrast on web and mobile applications does not mean to use only
black elements on white canvas, what is truly necessary is the correct usage o colors and
differentiation of color that respect an appropriate contrast ratio. When two colors are of
the same temperature or lightness, its difficult to list them apart.
One common issue on most pages is the use of images as background for texts.
Text overlaid on imagery is tricky because some or all of the image may not have sufficient
contrast in relation to the text, so it’s best to avoid or to provide a separate background
for the text (text highlight).
Placeholders in input fields are another common problem with contrast. Usually,
placeholders are auxiliary information that are greyed out or have low contrast in compar-
ison with the background of a form field. The insufficient contrast of placeholders makes it
hard for people with vision impairments to see. Also, if the contrast of placeholders is too
high, users may be confused and think that the field is already filled, skipping important
information.
On modern websites and mobile applications, it’s common to find grey text on
slightly darker grey background. Although it may look beautiful and clean on the designers’
computer, people with visual impairments may have difficulties to see the text. The same
applies to older screens from older computers that do not differentiate colors well and not
provide satisfactory contrast.
The WCAG standards define that contrast ratio should be a minimum of 4.5 for
any fonts smaller than 24px and if the font is larger than 24px, the contrast ratio drops to
a minimum of 3. On mobile, although there are still discussions about the appropriate
number, the contrast ratio should be at least 7:1.
This happens because it’s more difficult to maintain correct color contrast on
smaller portable devices as they are used on a wide variety of situations and environments.
For example, the smartphone screen contrast and ability to display colors is directly
affected by the incidence of direct sunlight. Thus these guidelines of minimum contrast
benefit not only the visually impaired but also regular users that are exposed to situational
disabilities.
Also, on mobile devices, the size of the font, icons, context of use, size of the screen,
definition and scratches on the screen may also affect the way that color and contrast is
displayed.
High contrast is also necessary for people that suffer from other kinds if disability
that are not related to eye sight. For example, users who suffer from dementia are affected
by low contrast as they have difficulties identifying and remembering elements on the
screen.
6.2. Cross-Sectional Elements 89

One alternative to ensure that users will be able to differentiate colors and contrast
of forms and graphics on any screen is the use of patterns and textures to enforce the
contrast differentiation. For example, graphs and charts are most of times a challenge for
colorblind users and textures may be used to help users differentiate colors.
When the contrast is too low, users experience eye strain as they try to decipher
the words. Research has also shown that people are less trusting of text that is hard to
read — a carryover from the age of "fine print".
Accessibility is severely reduced for users with low vision or cognitive impairments.
As we get older our vision degrades. Millions of people around the world have some type
of vision impairment, including presbyopia (difficulty focusing on close objects), macular
degeneration, glaucoma, and cataracts. But not only low-vision users are affected: cognitive
conditions that impact short-term memory and ability to maintain focus make using
hard-to-see text extremely difficult.

6.2.2 Color
Colors have a lot of responsibility on accessibility of websites and applications as
different variety of colors can be used and there are a lot of people in the world who have
difficulties seeing colors or combinations of colors.
On a website that sells different products for example, it’s important to name colors
and use common names for colors. While buying a cool blazer or a T-shirt, colorblind
users usually have to take a second opinion from a friend about the color.
In other situations, users may also have issues understanding a color that does
not have its name while choosing the color of a product as there are external factors that
contribute to color representation (as the capacity of the screen in differentiating colors
and contrast).
One important fact is that color blindness doesn’t mean that a person sees the
world without color, it’s actually a decreased ability to distinguish particular hues from
one another. It’s also much more common in men than women: around 8-10% of the male
population has some sort of color blindness.
It’s advised to use colors in the shades of opposite colors on the color wheel, also
mix cool and warm contrasts, dark and light and different hues, which allows more people
to have the experience of correctly seeing the information.
Another important tip is to test the website or application in gray scale mode. If
all elements are distinctly visible there is a pretty good chance that it will be good for the
color blind users as well as it shows that the color differentiation is being done right.
One worrisome new trend is the use of dark grey font on light grey background or
90 Chapter 6. Interaction Design Pattern Accessibility

vice-versa on interfaces. While it may see good and readable to you, the contrast is not
enough for many users.
Also, for many reasons, color should not be used as the only means of conveying
any kind of information, indicating an action, prompting a response, presenting context or
meaning or distinguishing a visual element.
Sometimes it’s useful to use colors together with icons for example to display error,
warning or info messages as appropriate icons may help to give the user more context
even when the user do not correctly see colors. Still on error messages, it’s important to
use text or prefixes to such messages that will indicate the meaning of the message as
“Success” or “Error”.
On other situations, using colors with the aid of patterns or textures may help
users to see the difference between two colors. For example, graphs are usually a problem
for the colorblind, however, when using different textures for each color this problem can
be solved.
Also links should be easy to spot without relying on color, for that it’s important to
use both underline and hover on links so that all users can easily identify and differentiate
links from the rest of the text.
On forms it’s also important to not rely only on colors to indicate fields with
problems as many users will not be able to see the difference. For that user a combination
of colors and icons.
Finally, daltonism is not the only reason to take colors and contrast seriously when
designing an interface: there are other forms of visual deficiencies as eye cataract and low
vision, that are common on older users, who are a growing number of users. And, even on
users with normal vision, the context may affect how people see colors as the brightness
and contrast of the screen as well as the illumination of the environment and time of the
day.

6.2.3 Content Accessibility

If a website or mobile application is accessible or not depends on them implemen-
tation of the UI and mostly on the content presentation. When talking about content
accessibility W3C has good definitions, but they are not practical.
Content is the main aspect of any application and therefore, the accessibility of
the content is essential to the application.
Many are the problems that can arise with badly formatted content, such as the
difficulty of understanding the contents of a website that uses technical words. Another
example of accessibility barrier related to content is when the text is not correctly adapted
6.2. Cross-Sectional Elements 91

to screen readers and other assistive technologies.

This concept is extremely important, and the accessibility barriers that are conse-
quence of problems with content are serious as they affect other elements and interaction
design patterns.

• All images must have alt text with descriptive information. The only exception is
when an image is only for decoration purposes.

• When writing text avoid making reference to images in order to explain things.
This reduces readability for screen reader users as they need to listen the text and
then search for the image (and be at the mercy of the developer that might have
remembered to add alt text to images). Also, users with normal sight might also
have difficulties trying to understand the image because it depends on resolution
and several other factors.

• Pop-up and messages displayed at the top or bottom of the screen cause serious
issues because these messages require the user to click on close buttons that most
times are represented by icons and may not have good contrast. Also, on small
screens, lightboxes and pop-ups may not adapt well.

• ARIA mark-up should always be used in order to improve the semantic experience
of screen readers. ARIA enables us to build universal accessibility at scale because it
attacks the problems of web accessibility for people with disabilities in a way that
parallels how web engineers are solving them for people who do not have a disability,
harvesting user expectations, paradigms, technologies, and lessons learned from the
desktop GUI world.

• One of the challenges of using ARIA is that it’s invisible. Unless you use a screen
reader, there is no way to tell whether ARIA has been used or whether it has been
used correctly. The Visual ARIA tool helps developers overcome this problem, by
visualizing ARIA roles and attributes on the page.

• Content must be clear and concise on mobile devices.

• All pages must be correctly printable as it helps people with visual and cognitive
disabilities.

• It’s important to provide subtitles or transcripts for video or audio contents.

• All links must have meaningful texts and title properties.

• Always provide <label> tags for inputs, textareas or any other information input
HTML tags.
92 Chapter 6. Interaction Design Pattern Accessibility

• If native inputs can’t be used (with good reason), create custom checkboxes with
role=checkbox , aria-checked , aria-disabled and aria-required , and wire up keyboard
events

6.2.4 Screen Readers

Screen Readers are currently the only option that visually impaired users have to
interact with a computer or smartphone. The basic idea is that the screen reader will read
out loud everything there is in a page in an ordered way and receive commands for the
interaction with interface elements.
One of the most use features of a screen reader is to navigate on a page by
jumping through the links in order to find something interesting for the user to click. This
functionality is important as listening to a whole page is tiresome and the users do not
have the visual aid for skipping parts of the page.
Thus, it’s important to have well defined link texts, so that users will know what
they are clicking.
Also, if an image contains a text, the screen reader will not be able to read it as
it’s an image and not plain text. Thus the screen reader relies on alt tags to understand
and give to the user the meaning of images and other medias used on pages.
Also the use of hover to activate of reveal information must be discouraged as many
people use assistive keyboards to navigate through a page and will not be able to trigger
the hover effect without a mouse or touch, thus making information inaccessible.
Other HTML elements that contain high density of information must also be
labeled in the appropriate way. For example, when a screen reader focuses on a table, the
table’s caption is automatically read. That makes it easy for a blind person to understand
what the table contains and to determine if the table’s content will be accessed of skipped.
For tables it’s necessary to explain on captions more than what the table represents,
but also what conclusions the table brings or what is the highlighted information.
On forms, the screen reader also relies on label tags to identify input fields, thus,
it’s necessary to have label HTML tags and not rely on placeholders (as they are most of
the times not parsed by screen readers).
On mobile devices, there are built-in screen readers where VoiceOver is available
on iOS and TalkBack on Android. However, as well as desktop screen readers, it takes a
lot of practice to actually understand the usage of a screen reader and to get used to it.
For example, some screen readers use table borders to differentiate a table that is
part of a page’s content to a table that is part of the page structure. Thus, tables without
borders will be considered layout and not be read.
6.2. Cross-Sectional Elements 93

Another characteristic of screen readers is that some of them require the correct use
of mathematical symbols on equations. For example, if a negative number is represented
with an hyphen for the minus operand, the screen reader might read the positive number
as it does not semantically comprehend the hyphen as a mathematical operand. Thus it’s
necessary to use the correct Unicode symbols.
People who are blind or have low vision must rely on their memory and on a rich
vocabulary of gestures to interact with touchscreen phones and tablets. Designers should
strive to minimize the cognitive load for users of screen readers.

6.2.5 Universal Accessibility

As we design experiences, we ought to remember that the internet is a part of
everybody‘s lives, including those who are visually impaired or blind.
One thing that is highly overlooked, is assuring that the web design is accessible
for people who are visually impaired. Some may think of this as being “extra” work, but
not only is there an ethical element but it can also pay off in the long run.
Designing a new page or web app can be challenging, but the development and
design team must consider any user and consider people who are blind, color blind, or
have low vision, those who are deaf or have hearing difficulties, people with mobility
impairments which may be temporary or permanent, or people with cognitive disabilities
as potential users. Design for people who are young, old, power users, casual users, and
those who just enjoy a quality experience
In simple words, accessibility is the design of products for people with disabilities.
In the context of mobile apps, these disabilities could be visual, hearing, physical or
mobility related. Based on what your app does and your target user segments, you might
need to include support for some or all of these types.
Also, it is easier to design and develop apps that support accessibility than to
introduce the support later during the product life cycle. And being responsive does not
mean being accessible.
Furthermore, many disabilities are temporary, those called situational disabilities.
Even a mother holding a baby in one arm, is one arm down. If we can create something
great for people with one arm, then we’ll be creating something even better for people
with two.
When proposing accessibility in the market practice, it’s common to hear from
the stakeholders that this or that group of disabilities are not the target (“You know, we
don’t have blind people as customers”), however, it’s important to explain that anyone
can suffer from sight loss for example, even temporally.
94 Chapter 6. Interaction Design Pattern Accessibility

Ultimately universal design promotes the development of products that are used by
the greatest amount of people and is composed of a series of principles, as equality in use,
flexibility, simple and intuitive interface, error tolerance, minimum effort and adaptability.

6.2.6 Text and Fonts

When displaying text, there are several accessibility concerns that need to be
addressed and some of these aspects are more apparent as the size of the font and assure
high contrast between the text and background. While other characteristics as the selection
of the correct font for example are usually not taken into account.
Many modern design fonts are clean and thin and although lightweight fonts are
good looking, they are not accessible for the visually impaired, so it’s important to choose
fonts that are not too thin and well spaced.
It’s the relationship between stroke and counter that determines letter recognition.
If a letter has extremely thick strokes with small counters, it takes longer for the eye to
decode. The same is true for thin strokes and small counters. The height ratio between
capital and lowercase letters is also critical in determining overall legibility. Typefaces with
tall x-heights are thought to be easier to read because they appear larger. This doesn’t
mean we need to choose these typefaces, but it’s something to consider. Another ratio to
consider is width-to-height . Letters that are too wide or too narrow impede legibility.
Another concern regards the choice of text alignment. Justified text for example is
not only difficult to read by dyslexic users, but for non-dyslexic users as well because it
creates large uneven spaces between letters and words. When these spaces line up above
one another, a distracting river of white-space can appear.
This can cause dyslexic readers to repeatedly lose their place when reading. You
can avoid creating the river effect by using left-aligned text, instead of justified text for
your paragraphs. Also, long blocks of unbroken paragraph text are also hard for dyslexic
and non-dyslexic users to read as it’s easy for dyslexic readers to lose their place with long
paragraphs.
Serif fonts have hooks at the ends of the letter strokes. They may look decorative,
but they can cause reading problems for dyslexic users. Serifs tend to obscure the shapes
of letters, making the letters run together.
Italics are sometimes used to highlight text. But you shouldn’t use italicized text
because they make letters hard to read. The letters have a jagged line compared to
non-italic fonts. The letters also lean over making it hard for dyslexic users to make out
the words, prefer using bold text instead.
When representing numbers on texts, use multiple forms of presentation of that
6.2. Cross-Sectional Elements 95

information (with numerals and written with words) as dyslexia users have trouble
processing numbers and words together.

6.2.7 Tap/Touch area

When designing mobile applications, a constant concern that must be on the
developer and designer head is the correct size of screen elements in order to provide
adequate touch target size for screen elements that receive touch interactions. Although
this concern exists on desktop web, on mobile the problem is even more critical due to the
size of the small screens.
There are many definitions on minimum size on pixels, some say that touch targets
must not be smaller than 44x44 pixels, however, older users and users with limited vision
may still have problems seeing and interacting with those elements.
Another importance concern is the distance between interface elements: On form
fields for example it’s difficult for users to correctly click on small targets that are too close
to other targets. Usually it’s said that a minimum distance of 2 millimeters is required.
Elements that are too big on mobile devices are not aesthetically good (the average
thumb size varies from 45 to 57px), so it’s necessary to design and size elements with
caution. However, it’s of no use a clean and small interface if people are not able to use it.
Lastly, another important consideration regards the use of clearly defined boundaries
for form fields and other interface elements.
Some UI elements have low contrast compared with the background and may not
be visible to the user that will have to guess the boundaries of the element if it doesn’t
have well defined borders or shadows.
The lack of well defined boundaries is problematic because the user will not be
able to see the are available to click and also because some screen readers use borders to
semantically identify the correct usage of UI elements.

6.2.8 Zoom of Content

While using mobile devices every person must have had the challenge of using
zoom in order to access some sort of content. In fact, a survey from WebIM shows that
42% of users require a minimum magnification level of at least 300% in order to be able to
read comfortably on the web. This survey also shows that WCAG has established 200% of
zoom, which is not enough.
Also, modern browsers natively support text resizing, however as sometimes the
pages are not prepared, parts of the text stay hidden, truncated or overlaid by other screen
elements. In fact, text resizing brings more problems and may not be a viable option.
96 Chapter 6. Interaction Design Pattern Accessibility

If allowed by the implementation, browsers also provide a native zoom functionality,

which might seem a goo solution. But what user testing regularly reveals is that zooming
a page makes content more difficult to read by low vision users due to content overflowing
the viewport as the scroll-bar forces users to pan left and right every time there user jumps
to the next line and this constant interruption in reading breaks concentration.
Also zooming brings another problem for users who depend on screen magnification
as they can only see a small portion of the content at once, which means that it’s
impossible to get a full view of the screen and it’s more likely to miss important clues and
not understand correctly the context.
An aggravating problem of screen magnification emerges when a page is designed
to have large amounts of white-space between related objects. This issue is more common
on forms, where the spacing between fields is too big, making it difficult for low vision
users to connect related form fields. Also, the positioning of submit buttons that are too
far from the rest of the form also creates problems as the users will have difficulty finding
the button.
Unfortunately, on some mobile implementations, it’s a common practice to lock
zooming of content by developers. Screen magnification must never be blocked, and the
web page must be tested with zoom.
Font size control can also be used as a form of providing better experience to
users, however, it must be done the right way: there must be a text control flow that will
guaranty that the text does not stay hidden and do not overflow the viewport, which can
be done by testing and defining a max font size for example.

6.2.9 Gestures
Gestures are widely used on mobile devices as the touch interaction provides good
opportunities. We use gestures for the simplest actions as sliding the keyboard instead of
typing, sliding and email to delete or dismiss a notification by swiping.
Although for the experienced user gestures provide fluent interaction with small
devices, other users face problems understanding and remembering those gestures or have
difficulties with old devices that are not able to correctly respond to gestures and provide
fluent interaction.
Also, gestures are hidden features that depend on the user’s memory, cognition,
understanding and motor abilities which also makes it difficult for users with various
disabilities to use the application. Thus, no application must depend only on gestures.
Another concern about gestures is regarding the use of natural gestures, which are
gestures that are intuitive for the user. If you hide an option or feature (for example, the
6.2. Cross-Sectional Elements 97

hamburger menu), less people will use and perceive it.

Also, still there is no consensus about the appropriate gestures. For example,
there are different gestures for zooming content and images: some implementations use
pinch-zoom others use double tapping for zooming content.
Other gestures have implications with users with motor disabilities. For example,
older users or users with reduced mobility may have problems with press gestures (when
the user needs to press and hold elements) as they may have different perceptions of time
when pressing and holding.
After all considerations, it’s advised to use gestures, however, studies are necessary
to identify the necessity and correct usage of such gestures as well as it’s necessary to
provide alternative interaction to gestures that are more common and visible for all users:
tapping and clicking.

6.2.10 Errors
Errors, regardless of the cause, becomes a problem for users that may block them
from moving forward in the experience with the interface. Thus the best way to handle
errors is to prevent errors from happening or to early identifying an error.

6.2.10.1 Error Prevention

For example, it’s usually hard to correctly fill out a form in the first attempt and
even if all data is valid, sometimes network problems may occur (even more on mobile
phones with 3G connection for example) and data can be lost.
The path to prevent users from making errors consist of offering suggestions, using
constraints and being flexible with data. One example of form filling error that is extremely
simple and happens too often is when uploading data from .txt or .csv files.
Usually a .csv files contains several rolls that will be stored in a database and each
row in the CSV is a new entry in the database. However, let’s say that the third row of
the CSV file has an error, a missing field, and the submission returns an error. With a
meaningful message the user fixes the error and submits again, however, the back-end
implementation of database storage had not executed a rollback in the database after the
error in the third line, and thus, new errors will be returned to the user regarding the first
and second lines that are already stored in the database. This example shows that we
need to prevent errors and avoid inducing the user to more errors.
One example of error prevention in a hotel reservation system is to display only
dates available (past dates must be disabled for example). Another way of preventing
errors is by validating fields as the user fills them, however, validating a field on each
98 Chapter 6. Interaction Design Pattern Accessibility

keystroke can confuse the users, the error (if found) must be displayed after the user
finished typing, when the focus has leaved the current field.

6.2.10.2 Error Handling

If the error is imminent and there is nothing to be done without sending the data
to the back-end and receiving an error, there are some considerations regarding error
presentation and handling that can make the experience less painful to the user:

• Error messages must be clear. An “email is invalid” error message is not enough;
the error should contain what caused the error. On some occasions, as when dealing
with passwords, it’s interesting to provide some context to the user, but not too
much information that may rise security issues.

• Also technical messages are not to be used such as “error 2 has occurred” or
“segmentation fault”. Such error messages will only scare the user.

• All data typed in a form must be kept safe. If an error occurs, the data must be
saved and the user should not have to redo all his work.

• Do not rely on color to show error states. Simply applying a red border to the input
field is not enough as many users will not be able to perceive the color. Use icons
that indicate error states.

• Keep error messages near the place where the error occurred. With this the user will
have no trouble identifying which field has errors.

• Dead-end error messages are only harmful to the experience. When an error occurs,
the user must be informed, but also, the message must be helpful stating what went
wrong and what to do about it.

• Error states are an excellent opportunity to use pertinent icons and illustrations as
people usually respond better to visual information than plain text. However, it’s
necessary to provide the user with tools to leave an error state.

6.2.11 Links and Buttons

Although links and buttons are well defined and diffused patterns, there are still
misconceptions regarding accessibility and usability that may be harmful to users.

• Links and buttons texts must be contextual to the content and descriptive. Sentences
like “more” or “click here” do not give the user a real understanding of the action
apart from the rest of the content. For screen reader users, it’s essential that links
6.3. Conclusions and Contributions 99

and buttons are descriptive as sometimes they navigate through a page by listening
to all actions (i.e. buttons and links) available.

• Consider using appropriate size, placement, boldness, borders and contrast that
actually make a button look like a button and a link look like a link. On links,
for example, it’s necessary to have both hover and underline alongside with color
differentiation from the rest of the content.

• Buttons must follow WCAG definitions on color and contrast. Also, the text should
be sufficiently independent of color or context as visually impaired users may not
experience the visual design of the page.

• Do not use images for styling buttons.

• Use the appropriate HTML tags to represent buttons (<button>)

• Do not insert button or link destination using JavaScript injection as some browsers
and assistive technologies may disable JavaScript usage.

6.3 Conclusions and Contributions

This chapter presented the results of an investigation of issues on the accessibility
in mobile interaction design patterns and the appropriate recommendations to eliminate
or mitigate the accessibility problems related to the interaction mobile design patterns.
A total of 22 categories were presented in this chapter as they were repeatedly cited
by the 127 documents analyzed and were strongly connect with each other. Therefore, the
categories "Research data on disabilities", "Disabilities", "Accessibility Testing", "Situational
Accessibility", "Cards" and "Action Bar" were not presented not because they are less
important than the other categories, but simply because there was so little information
about these topics on the set of documents, that the information available was not
considered representative.
The results of the study presented in this chapter shows the importance of studying
the practice of software development in order to help to understand issues discussed in the
academia and learn from solutions proposed by practitioners (developers and designers).
Therefore, it’s clear that the collaboration between industry and academia should be
strengthened.
The qualitative analysis based on Ground Theory supported the findings of many
accessibility concerns with special attention to the use of interaction design patterns. The
main contribution of this work was to bring up the issues of using popular interaction
mobile design patterns which can introduce accessibility concerns. The results can aid the
100 Chapter 6. Interaction Design Pattern Accessibility

developers’ community on concentrating efforts in the improvement of these patterns as

well as in being more careful in their use in order to avoid accessibility problems.
 101

7 Conclusion

This master’s project sought to investigate the accessibility of mobile interface

design patterns in order to mitigate or eliminate accessibility barriers that might be created
in the use of such patterns.
To conduct this project, it was determined that the first step was to better
understand the problem and, therefore, have a strong basis to conduct another in-depth
study in which more information was unveiled and shaped this dissertation.
On the Exploratory Study (Chapter 3) it was possible to notice the first accessibility
problems regarding the implementation of some of the interaction design patterns studied
and the affect that the accessibility barriers imposed in the lives of users with and without
accessibility.
This study was a foundation to the whole research presented in this project as it
showed, in the user’s and researcher’s perspective (Section 3.3) that in a simple e-learning
application, multiple accessibility barriers were present by simply containing a specific
implementation of an interaction design pattern. Also, it was visible from the video analysis
conducted that these barriers directly affected the users and sometimes became prohibitive
while performing an action on the application. The results of this study were published
on the paper "CASADEI, V. et al. Accessibility evaluation of design patterns on moodle
mobile. In: Brazilian Symposium on Computers in Education (Simpósio Brasileiro de
Informática na Educação-SBIE). [S.l.: s.n.], 2016. v. 27, n. 1, p. 688" (CASADEI et al.,
2016).
It’s important to remember that the participants of the exploratory study did not
have any disability, and even so, there were noticed numerous accessibility problems related
to the design patterns in the interface of the application. Thus, it might be appropriate to
say that if this study had also been conducted with participants with any kind of disability
(visual, motor or auditory for example), the results would show the same barriers and
possibly even more.
As the results of this first exploratory study were intriguing and during the research
in the literature for previous works on the accessibility of interaction design patterns on
mobile devices returned only a handful of results, a more in-depth exploration was needed
in this topic.
The best way found to do so then was to hear from the community of designers and
developers about their discoveries and advances on the improvement of the accessibility
of mobile interaction design patterns. Evidently, this second part of the project could be
102 Chapter 7. Conclusion

done by only talking with the professionals that were geographically near, however, with
this approach, the information collected might not be representative of the community as
a whole, regarding costumes and traditions of other groups and nations.
Therefore, it was decided to explore the Internet for international and national
forums, blogs and general discussions regarding accessibility, interaction design patterns
and mobile development and design. On Chapter 4 an improved approach for conducting
virtual ethnography was proposed on online communities. This approach and the results
of its application resulted on a publication of the paper "CASADEI, V.; GRANOLLERS,
T.; ZAINA, L. Investigating accessibility issues of ui mobile design patterns in online
communities: A virtual ethnographic study. In:Proceedings of the XVI Brazilian Symposium
on Human Factors in Computing Systems.New York, NY, USA: ACM, 2017. (IHC 2017),
p. 33:1–33:10." (CASADEI; GRANOLLERS; ZAINA, 2017)
On Chapter 5 the virtual ethnography approach presented in the previous chapter
was put into action in a big study that aimed to finally understand the community and to
bring to the academia the results of the research informally developed by developers and
designers.
During the ethnographic study, it was possible to identify the need for better
preparation and definition of a protocol to guide the conduction of such research (Section 5.3
and Section 5.4).
Many lessons were learned from conducting a large scale study such as this one, as,
for example, the enormous amount of that has to be analyzed and organized in order to
extract useful information and the difficulty to extract such information from reports and
narratives available in the 18 information sources selected (Section 5.5.2).
From the qualitative data analysis of documents collected in the ethnographic study
using Grounded Theory (Chapter 6), many accessibility concerns were identified with the
development and design of mobile interfaces, with special attention to the use of interaction
design patterns. It was then possible to propose improvements and modifications in these
patterns that should improve the accessibility of applications by better understanding the
necessities of users who suffer with some disability and struggle with the use of mobile
application.
Lastly, it was possible to comprehend the relationship between the interaction
design patterns and other topics related to mobile design and development during the
analysis of the data: how navigation is intrinsically related to several aspects of mobile
applications such as pagination, menu; and gestures and the importance of the correct
choice of icons and colors to represent states and information in any screen.
Finally, by observing the information collected in each category of the Grounded
Theory, it was possible to present a guide to extend mobile interaction design patterns in
7.1. Contributions 103

order to improve the accessibility and remove accessibility barriers that were previously
created by the mistaken implementation of some of these patterns.

7.1 Contributions
Throughout the development of this project, it’s possible to enumerate some
important contributions that originated from the studies presented in this dissertation.
The bibliographic study also showed the deficit of academic works on interaction
design patterns on mobile platforms. Through this discovery, it was possible to understand
the need for more research in this topic and indicate to other researchers another area of
research that needs special attention.
The approach for virtual ethnography on online communities presented on Chapter 4
is another strong contribution of this research as it might aid future researchers to be
better prepared and have a more complete guide that shall answer some of questions that
arise in this type of study. Also, it’s an approach that can be used for any ethnography
study on virtual communities, not being restricted to studies in the HCI or Software
Engineering areas.
Finally, the most relevant and important contribution of this study is the identi-
fication of accessibility barriers related to common interaction design patterns and the
suggestions to improve the implementation of such patterns and mitigate these barriers.

7.2 Limitations and Future Works

As limitations and future works for this research project we can list a few possible
studies that will help to improve the research in the area and improve the overall accessibility
of mobile applications:

• Extend the knowledge on accessibility problems of mobile interface design patterns;

• Propose recommendations for a better design for other design patterns patterns in
order to improve their accessibility;

• Apply the approach for virtual ethnography in other contexts of Software Engineering;

• Propose solutions for mobile accessibility design patterns in terms of accessibility

and validate such patterns with the development and usage of mobile applications
by real users;

• Further research with other user groups with different types of disabilities (elderly
and visually and hearing impaired users) on m-learning systems;
104 Chapter 7. Conclusion

• Validate the results and recommendations for a better implementation of the inter-
action design patterns presented in this research with experiments with real users
and functional mobile applications.

As the area of accessibility of mobile interaction design patterns has not yet been
extensively studied by the scientific community and due to the broadness of the topic, it’s
possible to mention the above future works among other studies that would be of great
importance to the research area.
 105

Bibliography

ABACHI, H. R.; MUHAMMAD, G. The impact of m-learning technology on students and

educators. Computers in Human Behavior, Elsevier, v. 30, p. 491–496, 2014. Citado na
página 31.

ABOU-ZAHRA, S.; BREWER, J.; HENRY, S. L. Essential Components of Mobile Web

Accessibility. In: Proceedings of the 10th International Cross-Disciplinary Conference on
Web Accessibility - W4A ’13. [s.n.], 2013. p. 1–4. ISBN 9781450318440. Disponível em:
<http://dl.acm.org/citation.cfm?id=2461121.2461138>. Citado na página 25.

ALLAN, G. A critique of using grounded theory as a research method. Electronic journal

of business research methods, v. 2, n. 1, p. 1–10, 2003. Citado na página 66.

ALLY, M.; PRIETO-BLÁZQUEZ, J. What is the future of mobile learning in education?

Revista de Universidad y Sociedad del Conocimiento, Springer, v. 11, n. 1, p. 142–151,
2014. Citado na página 31.

ANGROSINO, M. Doing ethnographic and observational research. [S.l.]: Sage, 2007.

Citado na página 47.

BARBOSA, G.; OLIVEIRA, E.; PENNA, J. Apreciação da usabilidade do moodle: Um

estudo de caso no contexto do ensino fundamental. In: Anais do Simpósio Brasileiro de
Informática na Educação. [S.l.: s.n.], 2015. v. 26, p. 712. Citado na página 31.

BARROS, A. C. de; LEITãO, R.; RIBEIRO, J. Design and evaluation of a mobile user
interface for older adults: Navigation, interaction and visual design recommendations.
Procedia Computer Science, v. 27, p. 369 – 378, 2014. ISSN 1877-0509. 5th International
Conference on Software Development and Technologies for Enhancing Accessibility and
Fighting Info-exclusion, DSAI 2013. Citado 2 vezes nas páginas 28 e 29.

BAYM, N. K. The emergence of community in computer-mediated communication. Sage

Publications, Inc, 1995. Citado na página 48.

BIRKS, M.; MILLS, J. Grounded theory: A practical guide. [S.l.]: Sage, 2015. Citado na
página 66.

BOELLSTORFF, T. Ethnography and virtual worlds: A handbook of method. [S.l.]:

Princeton University Press, 2012. Citado 5 vezes nas páginas 29, 48, 56, 57 e 58.

BOYD, D.; HEER, J. Profiles as conversation: Networked identity performance on

friendster. In: IEEE. System Sciences, 2006. HICSS’06. Proceedings of the 39th Annual
Hawaii International Conference on. [S.l.], 2006. v. 3, p. 59c–59c. Citado na página 48.

BRADLEY, M. M.; LANG, P. J. Measuring emotion: The self-assessment manikin

and the semantic differential. Journal of Behavior Therapy and Experimental
Psychiatry, v. 25, n. 1, p. 49 – 59, 1994. ISSN 0005-7916. Disponível em:
<http://www.sciencedirect.com/science/article/pii/0005791694900639>. Citado na
página 36.
106 Bibliography

BRAJNIK, G. Web accessibility testing: when the method is the culprit. Computers
Helping People with Special Needs, Springer, p. 156–163, 2006. Citado na página 19.

BRAJNIK, G. Beyond conformance: the role of accessibility evaluation methods. In:

SPRINGER. Web Information Systems Engineering–WISE 2008 Workshops. [S.l.], 2008.
p. 63–80. Citado na página 19.

CALDWELL, B. et al. Web content accessibility guidelines (wcag) 2.0. w3c

recommendation. World Wide Web Consortium (W3C), v. 11, 2008. Citado na página 27.

CAPELÃO, L. et al. Avaliação de comunicabilidade do moodle para usuários surdos e

ouvintes. COMPETIÇÃO DE AVALIAÇÃO DO IHC & CLIHC, 2011. Citado na página
38.

CARVALHO, L. Android cresce no Brasil e aumenta distancia para iOS e Windows

Phone. 2017. Retrieved May 10, 2017. Disponível em: <https://goo.gl/xp2GES.> Citado
na página 59.

CASADEI, V.; GRANOLLERS, T.; ZAINA, L. Investigating accessibility issues of

ui mobile design patterns in online communities: A virtual ethnographic study. In:
Proceedings of the XVI Brazilian Symposium on Human Factors in Computing Systems.
New York, NY, USA: ACM, 2017. (IHC 2017), p. 33:1–33:10. ISBN 978-1-4503-6377-8.
Disponível em: <http://doi.acm.org/10.1145/3160504.3160521>. Citado 2 vezes nas
páginas 23 e 102.

CASADEI, V. et al. Accessibility evaluation of design patterns on moodle mobile. In:

Brazilian Symposium on Computers in Education (Simpósio Brasileiro de Informática na
Educação-SBIE). [S.l.: s.n.], 2016. v. 27, n. 1, p. 688. Citado 4 vezes nas páginas 22, 60,
62 e 101.

CHARMAZ, K. Constructing grounded theory. [S.l.]: Sage, 2014. Citado 4 vezes nas
páginas 21, 65, 66 e 69.

CORBIN, J. M.; STRAUSS, A. Grounded theory research: Procedures, canons, and

evaluative criteria. Qualitative sociology, Springer, v. 13, n. 1, p. 3–21, 1990. Citado na
página 66.

CRABTREE, A. Doing design ethnography. London New York: Springer, 2012. ISBN
978-1-4471-2725-3. Citado 2 vezes nas páginas 57 e 58.

DAMACENO, R. J. P.; BRAGA, J. C.; MENA-CHALCO, J. P. Mobile device accessibility

for the visually impaired: problems mapping and recommendations. Universal Access in
the Information Society, p. 1–15, 2017. ISSN 1615-5297. Citado 2 vezes nas páginas 28
e 29.

DÍAZ-BOSSINI, J. M.; MORENO, L. Accessibility to mobile interfaces for older people.

Procedia Computer Science, Elsevier Masson SAS, v. 27, n. 2013, p. 57–66, 2013. ISSN
18770509. Disponível em: <http://dx.doi.org/10.1016/j.procs.2014.02.008>. Citado na
página 26.

DÍAZ-BOSSINI, J.-M.; MORENO, L. Accessibility to mobile interfaces for older people.

Procedia Computer Science, Elsevier, v. 27, p. 57–66, 2014. Citado 2 vezes nas páginas 28
e 29.
Bibliography 107

DITTRICH, Y. Doing empirical research on software development: Finding a path between

understanding, intervention, and method development. In: Social Thinking-Software
Practice. [S.l.: s.n.], 2002. p. 243–262. Citado na página 53.

DRISCOLL, C.; GREGG, M. My profile: The ethics of virtual ethnography. Emotion,

Space and Society, Elsevier, v. 3, n. 1, p. 15–20, 2010. Citado na página 48.

ENGESTRÖM, Y. Expansive visibilization of work: An activity-theoretical perspective.

Computer Supported Cooperative Work (CSCW), Springer, v. 8, n. 1, p. 63–93, 1999.
Citado na página 52.

FOGLI, D.; PROVENZA, L. P.; BERNAREGGI, C. A universal design resource

for rich internet applications based on design patterns. Universal Access in the
Information Society, v. 13, n. 2, p. 205–226, 2014. ISSN 1615-5297. Disponível em:
<http://dx.doi.org/10.1007/s10209-013-0291-6>. Citado na página 27.

GABRIELLI, S. et al. A comprehensive approach to accessibility for elearning design.

Heme, zoos, p. 82, 2005. Citado 2 vezes nas páginas 27 e 29.

GARFINKEL, H. Studies in Ethnomethodology. [S.l.]: Polity, 1991. ISBN 0745600050.

Citado na página 52.

GEORGIEV, T.; GEORGIEVA, E.; SMRIKAROV, A. M-learning-a new stage of

-learning. In: International Conference on Computer Systems and Technologies. [S.l.: s.n.],
2004. v. 4, n. 28, p. 1–4. Citado na página 31.

GOASDUFF, L.; FORNI, A. A. Gartner Says Worldwide Sales of Smartphones Grew 7

Percent in the Fourth Quarter of 2016. 2017. Retrieved May 14, 2017. Disponível em:
<http://www.gartner.com/newsroom/id/3609817.> Citado na página 59.

GOH, D. P. States of ethnography: Colonialism, resistance, and cultural transcription in

malaya and the philippines, 1890s–1930s. Comparative Studies in Society and History,
Cambridge Univ Press, v. 49, n. 01, p. 109–142, 2007. Citado na página 53.

GUTERRES, J.; SILVEIRA, M. Desafios e novas possibilidades de uso de learning

management systems. In: Anais do Simpósio Brasileiro de Informática na Educação. [S.l.:
s.n.], 2015. v. 26, p. 21. Citado na página 31.

HAMMERSLEY, M.; ATKINSON, P. Ethnography: Principles in practice. [S.l.]:

Routledge, 2007. Citado na página 47.

HARPER, S.; THIESSEN, P.; YESILADA, Y. Research Report on Mobile Web

Accessibility. [S.l.], 2014. (W3C WAI Research and Development Working Group (RDWG)
Notes). Disponível em: <http://www.w3.org/WAI/RD/2012/mobile/note/ED-mobile>.
Citado 2 vezes nas páginas 19 e 25.

HASHEMI, M. et al. What is mobile learning? challenges and capabilities. Procedia-Social

and Behavioral Sciences, Elsevier, v. 30, p. 2477–2481, 2011. Citado na página 31.

HENRY, S. L.; ABOU-ZAHRA, S.; BREWER, J. The role of accessibility in a

universal web. In: Proceedings of the 11th Web for All Conference. New York, NY,
USA: ACM, 2014. (W4A ’14), p. 17:1–17:4. ISBN 978-1-4503-2651-3. Disponível em:
<http://doi.acm.org/10.1145/2596695.2596719>. Citado 2 vezes nas páginas 19 e 27.
108 Bibliography

HEUMANN, J. Keynote address to Microsoft employees and experts on disabilities and

technologyl. 1998. Redmond, Washington, February 19, 1998. Citado na página 27.

HINE, C. Virtual ethnography. [S.l.]: Sage, 2000. Citado 5 vezes nas páginas 48, 51, 52,
54 e 58.

HINE, C. Virtual ethnography: Modes, varieties, affordances. The SAGE handbook of

online research methods, Sage Thousand Oaks, CA, p. 257–270, 2008. Citado 6 vezes nas
páginas 29, 48, 49, 51, 54 e 58.

HOOBER, S.; BERKMAN, E. Designing mobile interfaces. [S.l.]: O’Reilly Media, Inc.,
2011. Citado 2 vezes nas páginas 26 e 37.

JEMNI, M.; LAABIDI, M.; AYED, L. J. B. The new development of technology enhanced
learning: Concept, research and best practices. In: . Berlin, Heidelberg: Springer
Berlin Heidelberg, 2014. cap. Accessible E-learning for Students with Disabilities: From
the Design to the Implementation, p. 53–74. ISBN 978-3-642-38291-8. Disponível em:
<http://dx.doi.org/10.1007/978-3-642-38291-8_4>. Citado 3 vezes nas páginas 28, 29
e 31.

JORDAN, B. Blurring boundaries: The "real" and the "virtual" in hybrid spaces. Human
Organization, v. 68, n. 2, p. 181–193, 2009. Citado na página 52.

KAPLAN, A. M.; HAENLEIN, M. Users of the world, unite! the challenges and
opportunities of social media. Business Horizons, v. 53, n. 1, p. 59 – 68, 2010.
ISSN 0007-6813. Disponível em: <http://www.sciencedirect.com/science/article/pii/
S0007681309001232>. Citado na página 19.

KRUGER, S. Students’ experiences of e-learning: a virtual ethnography into blended

online learning. In: th International Conference on Networked Learning. [S.l.: s.n.], 2006.
Citado na página 29.

LAZAR, J.; FENG, J. H.; HOCHHEISER, H. Research methods in human-computer

interaction. [S.l.]: John Wiley & Sons, 2010. Citado 4 vezes nas páginas 47, 56, 57 e 58.

LAZAR, J.; FENG, J. H.; HOCHHEISER, H. Research methods in human-computer

interaction. [S.l.]: Morgan Kaufmann, 2017. Citado 2 vezes nas páginas 31 e 32.

LEITAO, R.; SILVA, P. A. Target and spacing sizes for smartphone user interfaces for
older adults: Design patterns based on an evaluation with users. In: Proceedings of the
19th Conference on Pattern Languages of Programs. USA: The Hillside Group, 2012.
(PLoP ’12), p. 5:1–5:13. ISBN 978-1-4503-2786-2. Citado 2 vezes nas páginas 28 e 29.

LEME, R.; ZAINA, L.; CASADEI, V. Um estudo da interação do público da terceira

idade com o facebook em dispositivos móveis: identificação e definição das personas. In:
Proceeding of the 16th Brazilian Symposium on Human Factors in Computing Systems
IHC ’15. [S.l.]: Brazilian Computer Society, 2015. p. 53–62. Citado na página 26.

LOW, J. et al. Read this and change the way you feel about software engineering.
Information and Software Technology, v. 38, n. 2, p. 77 – 87, 1996. ISSN 0950-5849.
Citado na página 51.
Bibliography 109

MAZETTO, L. Uso do smartphone para acesso à internet cresce 112% no Brasil. 2015.
Http://computerworld.com.br/uso-do-smartphone-para-acesso-internet-cresce-112-no-
brasil (Accessed on 03/14/2016). Citado na página 19.

MCGUIRE, J. M.; SCOTT, S. S.; SHAW, S. F. Universal design and its applications in
educational environments. Remedial and special education, SAGE Publications, v. 27, n. 3,
p. 166–175, 2006. Citado na página 20.

MOODLE.ORG. Moodle Statistics. 2016. Https://moodle.net/stats/ (Accessed on

05/28/2016). Disponível em: <https://moodle.net/stats/>. Citado na página 32.

MOURAO, V. H. M.; FREIRE, F. M. P.; SILVA, A. C. da. Estudo exploratório da

portabilidade de softwares educacionais em dispositivos móveis. In: Proceedings of the
12th Brazilian Symposium on Human Factors in Computing Systems. Porto Alegre,
Brazil: Brazilian Computer Society, 2013. (IHC ’13), p. 321–322. ISBN 978-85-7669-278-2.
Disponível em: <http://dl.acm.org/citation.cfm?id=2577101.2577183>. Citado na
página 31.

NEWELL, A.; GREGOR, P. Human computer interaction for people with disabilities.
In: HELANDAR, M. G.; LANDAUER, T. K.; PRABHU, P. V. (Ed.). Handbook of
Human-Computer Interaction. New York: Elsevier Science Publishers, B. V., 1988. p.
813–824. Citado na página 25.

NIELSEN. 68 milhões usam a internet pelo smartphone no Brasil. 2016.

Http://www.nielsen.com/br/pt/press-room/2015/68-milhoes-usam-a-internet-
pelo-smartphone-no-Brasil.html (Accessed on 03/14/2016). Citado na página
19.

NILSSON, E. G. Design patterns for user interface for mobile applications. Advances in
Engineering Software, Elsevier, v. 40, n. 12, p. 1318–1328, 2009. Citado na página 20.

PASCUAL, A. et al. Impact of accessibility barriers on the mood of blind, low-vision and
sighted users. Procedia Computer Science, Elsevier Masson SAS, v. 27, n. 2013, p. 431–440,
2013. ISSN 18770509. Disponível em: <http://dx.doi.org/10.1016/j.procs.2014.02.047>.
Citado na página 26.

RIBEIRO, J. Web Design Patterns for Mobile Devices. 158 p. Tese (Master’s
thesis) — Faculdade de Engenharia da Universidade do Porto, 2012. Disponível em:
<http://repositorio-aberto.up.pt/handle/10216/64860>. Citado 2 vezes nas páginas 26
e 37.

RIBEIRO, J.; CARVALHAIS, M. Web design patterns for mobile devices. In: Proceedings
of the 19th Conference on Pattern Languages of Programs. USA: The Hillside
Group, 2012. (PLoP ’12), p. 13:1–13:48. ISBN 978-1-4503-2786-2. Disponível em:
<http://dl.acm.org/citation.cfm?id=2821679.2831283>. Citado na página 20.

RIBEIRO, J.; CARVALHAIS, M. Web design patterns for mobile devices. In: Proceedings
of the 19th Conference on Pattern Languages of Programs. USA: The Hillside
Group, 2012. (PLoP ’12), p. 13:1–13:48. ISBN 978-1-4503-2786-2. Disponível em:
<http://dl.acm.org/citation.cfm?id=2821679.2831283>. Citado 2 vezes nas páginas 26
e 37.
110 Bibliography

RICHARDS, L. Using NVivo in qualitative research. [S.l.]: Sage, 1999. Citado na página
67.

SAMPAIO, A. I. Responsive Web Design. 104 p. Tese (Master’s thesis) — Escola de

Engenharia, Universidade do Minho, 2013. Citado na página 26.

SANTANA, M. A.; NETO, B. F. dos S.; COSTA, E. de B. Avaliando o uso das

ferramentas educacionais no ambiente virtual de aprendizagem moodle. In: Anais do
Simpósio Brasileiro de Informática na Educação. [S.l.: s.n.], 2014. v. 25, p. 278. Citado
na página 31.

SANTOS, G. et al. Strategic alignment between academy and industry: A virtuous cycle
to promote innovation in technology. In: 2012 26th Brazilian Symposium on Software
Engineering. [S.l.: s.n.], 2012. p. 196–200. Citado na página 47.

SHARP, H.; DITTRICH, Y.; SOUZA, C. R. B. de. The role of ethnographic studies in
empirical software engineering. IEEE Transactions on Software Engineering, v. 42, n. 8, p.
786–804, Aug 2016. ISSN 0098-5589. Citado 10 vezes nas páginas 20, 29, 30, 47, 49, 50,
52, 53, 56 e 58.

SILVA, J.; BRAGA, J. C.; DAMACENO, R. Estudo de aplicativos móveis para deficientes
visuais no âmbito acadêmico. In: Anais do Simpósio Brasileiro de Informática na
Educação. [S.l.: s.n.], 2015. v. 26, p. 722. Citado 2 vezes nas páginas 27 e 29.

STEINMETZ, K. F. Message received: Virtual ethnography in online message boards.

International Journal of Qualitative Methods, SAGE Publications Sage CA: Los Angeles,
CA, v. 11, n. 1, p. 26–39, 2012. Citado 2 vezes nas páginas 29 e 30.

STEINMETZ, K. F. Message received: Virtual ethnography in online message boards.

International Journal of Qualitative Methods, v. 11, n. 1, p. 26–39, 2012. Citado 4 vezes
nas páginas 51, 54, 56 e 61.

STRAUSS, A.; CORBIN, J. M. Grounded theory in practice. [S.l.]: Sage, 1997. Citado na
página 66.

TAVARES, R. et al. Universal design for learning: potencial de aplicação no ensino

superior com alunos com nee e por recurso a tecnologias mobile. Educação, Formação &
Tecnologias-ISSN 1646-933X, v. 8, n. 1, p. 84–94, 2015. Citado na página 32.

ULBRICHT, V. R. et al. A tool to facilitate including accessible content in moodle to

the person with visual impairment. Procedia Computer Science, v. 14, p. 138 – 147,
2012. ISSN 1877-0509. Proceedings of the 4th International Conference on Software
Development for Enhancing Accessibility and Fighting Info-exclusion (DSAI 2012).
Disponível em: <http://www.sciencedirect.com/science/article/pii/S1877050912007788>.
Citado 2 vezes nas páginas 28 e 29.

WOHLIN, C.; HÖST, M.; HENNINGSSON, K. Empirical research methods in software

engineering. In: Empirical methods and studies in software engineering. [S.l.]: Springer,
2003. p. 7–23. Citado na página 51.

WOHLIN, C. et al. Experimentation in software engineering. [S.l.]: Springer Science &

Business Media, 2012. Citado na página 21.
Bibliography 111

YESILADA, Y.; BRAJNIK, G.; HARPER, S. Barriers common to mobile

and disabled web users. Interact. Comput., Elsevier Science Inc., New York,
NY, USA, v. 23, n. 5, p. 525–542, set. 2011. ISSN 0953-5438. Disponível em:
<http://dx.doi.org/10.1016/j.intcom.2011.05.005>. Citado na página 20.

YESILADA, Y.; BRAJNIK, G.; HARPER, S. Barriers common to mobile and disabled
web users. Interacting with Computers, v. 23, n. 5, p. 525–542, 2011. ISSN 0953-5438.
Disponível em: <http://www.sciencedirect.com/science/article/pii/S0953543811000543>.
Citado na página 43.

YESILADA, Y.; CHEN, T.; HARPER, S. D3: Mobile Web Barriers for the Barrier
Walkthrough Method. [S.l.], 2009. Citado na página 62.

ZHOU, L.; BENSAL, V.; ZHANG, D. Color adaptation for improving mobile web
accessibility. In: 2014 IEEE/ACIS 13th International Conference on Computer and
Information Science (ICIS). [S.l.: s.n.], 2014. p. 291–296. Citado 2 vezes nas páginas 28
e 29.
 113

APPENDIX A – List of Documents selected

in the Virtual Ethnography

# Document Title URL

1 #15 — Pagination, Accessibility and UI https://goo.gl/ad8uYF
2 “It’s Alive!”- Apps That Feed Back Accessibly https://goo.gl/J8FvJi
3 108 million web users are color blind. Tips for https://goo.gl/xHbDkw
designing keeping them in mind
4 11 reasons why placeholders are problematic https://goo.gl/fpzFtY
5 5 Simple Guidelines To Improve Your Website’s https://goo.gl/9LeRgW
Accessibility
6 6 Principles Of Visual Accessibility Design https://goo.gl/BNVRM4
7 6 Surprising Bad Practices That Hurt Dyslexic https://goo.gl/x96BLa
Users
8 7 Things Every Designer Needs to Know about https://goo.gl/xvGRPZ
Accessibility
9 8 Website Accessibility Best Practices to Improve https://goo.gl/wxzzW3
UX
10 A color wheel for the color-blind https://goo.gl/Q2xHRZ
11 A Definitive Guide To The Android Carousel De- https://goo.gl/7AwQAG
sign Pattern
12 A designer’s guide to colour and accessibility https://goo.gl/AqCjzz
13 A Study of Trends in Mobile Design https://goo.gl/YbJdA5
14 Accessibility - beyond the screen reader https://goo.gl/MG2Nqn
15 Accessibility APIs- A Key To Web Accessibility https://goo.gl/eGAxrS
16 Accessibility for mobile https://goo.gl/XRJdC9
17 Accessibility for mobile apps. Just go for it. https://goo.gl/cgKSd9
18 Accessibility- Improving The UX For Color-Blind https://goo.gl/qDyd5m
Users
19 Accessibility Is Not Enough https://goo.gl/Jeiuwx
20 Accessible and Responsive Tables https://goo.gl/VZ3Weq
21 Accessible data tables https://goo.gl/2ew5sG
22 Accessible Interface Design https://goo.gl/XmNYF3
23 Acessibilidade - experiências acessíveis em vários https://goo.gl/z8JdbK
dispositivos
114 APPENDIX A. List of Documents selected in the Virtual Ethnography

24 Acessibilidade - muito além do design https://goo.gl/56gnFi

25 Acessibilidade- o impacto das cores https://goo.gl/x4JtvT
26 Algumas dicas de Acessibilidade https://goo.gl/sFsKnD
27 Always use a label https://goo.gl/2fejoW
28 Basic Patterns for Mobile Navigation https://goo.gl/DGozio
29 Basic Patterns for Mobile Navigation - pt2 https://goo.gl/KpPBmz
30 Basic Patterns for Mobile Navigation 2 https://goo.gl/yQmsFV
31 Basic Patterns for Mobile Navigation- A Primer https://goo.gl/qZmsCh
32 Best table pagination pattern for a mobile browser https://goo.gl/HS3Lbo
experience
33 Building accessible flash messages https://goo.gl/ceZteP
34 Cards for layout in mobile apps https://goo.gl/C18b4h
35 Considerations for mobile accessibility https://goo.gl/wLEFft
36 Danger! Testing Accessibility with real people https://goo.gl/Lmev72
37 Design Patterns - UX https://goo.gl/ggX5W7
38 Designers, let’s talk about accessibility https://goo.gl/FVHKxm
39 Designing A Dementia-Friendly Website https://goo.gl/a4bhqZ
40 Designing Accessible Mobile User Experiences https://goo.gl/4TXzy6
41 Designing for Accessibility- The Ultimate in UX https://goo.gl/HdCS7G
42 Designing for Everyone https://goo.gl/czSqnd
43 Designing For The Elderly- Ways Older People Use https://goo.gl/b1WLpv
Digital Technology Differently
44 Designing inclusively https://goo.gl/jLRWRm
45 Designing Perfect Text Field - Clarity, Accessibility https://goo.gl/pVk3dx
and User Effort
46 Developing for Android vs. iOS- Navigation Pat- https://goo.gl/sgBNsd
terns
47 Disabilities first design https://goo.gl/XzkQaV
48 Diseñando productos digitales accesibles para móvil https://goo.gl/z1DNxj
49 Do mobile devicescomputer tablets have a future https://goo.gl/UAo5ET
in video games in a way that offers immersion and
accessibility
50 Ensure High Contrast for Text Over Images https://goo.gl/Qiu2x5
51 Everything About Color Contrast And Why You https://goo.gl/1uEDk7
Should Rethink It
52 Float Label Pattern https://goo.gl/Ta4z7B
53 Hamburger menu alternatives for mobile navigation https://goo.gl/qE3dbM
 115

54 Hamburger Menus and Hidden Navigation Hurt https://goo.gl/zNAJya

UX Metrics
55 How accessible are dropdown lists on mobile devices https://goo.gl/J9t3Gw
56 How can graphic design be more accessible for https://goo.gl/c5hhk5
people with disabilities
57 How To Design Error States For Mobile Apps https://goo.gl/UyrFEv
58 How to Design for Color Blindness https://goo.gl/W2gSBQ
59 How To Design For Different Age Groups https://goo.gl/3RdTtg
60 How to Design for Dyslexia https://goo.gl/FQTkE7
61 How to make a menu discoverable with the right https://goo.gl/FY2zpN
icon on e-commerce mobile
62 How to Make Navigation (Even a Hamburger) Dis- https://goo.gl/pYTqeZ
coverable on Mobile
63 How To Plan for Visually Disabled Users on Com- https://goo.gl/9Xoxk4
puters and Mobile Devices- Color Blindness, Low
Vision, and Blindness
64 In Plain Sight- Text, Contrast, and Accessibility https://goo.gl/FdxEcy
65 Infinite Scrolling- Let’s Get To The Bottom Of https://goo.gl/kPd5AG
This
66 Infinite Scrolling, Pagination Or “Load More” But- https://goo.gl/Gxg9yu
tonsUsability Findings In eCommerce
67 Is top navigation an accepted pattern for mobile https://goo.gl/1P6nnE
devices
68 It sounds stupid but how important are design https://goo.gl/zTTJpZ
patterns
69 La accesibilidad en entornos digitales https://goo.gl/j9BRj9
70 Las personas con discapacidad y el acceso a la Web https://goo.gl/TfnhL6
71 Lessons from building mobile-friendly, accessible https://goo.gl/W5eXoD
data tables
72 List Thumbnails on Mobile- When to Use Them https://goo.gl/e1gskw
and Where to Place Them
73 Looking for a Mobile device for an uncle with https://goo.gl/bxkLjD
epilepsy.
74 Low-Contrast Text Is Not the Answer https://goo.gl/ZN5pv7
75 Misused mobile UX patterns https://goo.gl/YLfH5o
76 Mobile And Accessibility- Why You Should Care https://goo.gl/Nx5GbR
And What You Can Do About It
116 APPENDIX A. List of Documents selected in the Virtual Ethnography

77 Mobile Design Pattern- Inventory-Based Discrete https://goo.gl/91SpCG

Slider
78 Mobile First Is NOT Mobile Only https://goo.gl/jZWMs6
79 mobile input feedback design pattern https://goo.gl/cQEngf
80 Mobile Navigation For Smashing Magazine- A Case https://goo.gl/h7HrmA
Study
81 Mobile Navigation- Image Grids or Text Lists https://goo.gl/66gq8V
82 Mobile Phones and the Importance of Accessibility. https://goo.gl/6PGGvt
83 Mobile platform design guidelines vs consistenty in https://goo.gl/THnYdA
user experience across platforms
84 Mobile UI Design Patterns — Sign In https://goo.gl/Bse534
85 Navigating the Mobile Application - 5 UX Design https://goo.gl/4X8iBT
Patterns
86 Notes On Client-Rendered Accessibility https://goo.gl/DziGiQ
87 O impacto do menu hamburger nas métricas do https://goo.gl/SuLWbx
seu produto
88 Opciones de accesibilidad para dispositivos móviles https://goo.gl/P5Xuqp
89 Placeholders in Form Fields Are Harmful https://goo.gl/czso2T
90 Prototyping accessibility in web and mobile UI https://goo.gl/fnDbik
design
91 Responsive Navigation Patterns https://goo.gl/6mfZWT
92 Rethinking Mobile Tutorials- Which Patterns Re- https://goo.gl/nbm4KY
ally Work
93 Screen Readers on Touchscreen Devices https://goo.gl/KezSUw
94 Seeking design patterns for indicating more content https://goo.gl/FjQEYM
below the fold
95 Smartphone UI Patterns https://goo.gl/gh1hyz
96 Successful Mobile Applications - Using UI Design https://goo.gl/uJi7n6
Patterns
97 Supporting Mobile Navigation in Spite of a Ham- https://goo.gl/sjV4o9
burger Menu
98 Taking Pattern Libraries To The Next Level https://goo.gl/jhF1oY
99 The 4 Types of Creative Website Scrolling Patterns https://goo.gl/EKSTsD
100 The Beginner’s Guide to Accessible Mobile UI De- https://goo.gl/psVxXE
sign
101 The Burger Menu https://goo.gl/SQt9zi
102 The cost of accessibility https://goo.gl/j6dQYT
103 The Golden Rules Of Bottom Navigation Design https://goo.gl/VrwJKJ
 117

104 The hamburger menu doesn’t work https://goo.gl/zjb2ZU

105 The Hamburger Menu Doesn’t Work - it’s a beau- https://goo.gl/JaNiVP
tiful, elegant solution that gets it all wrong, and
it’s time to move on
106 The Most Creative Mobile Navigation Patterns https://goo.gl/gc4JQW
107 The Most Creative Mobile Navigation Patterns 2 https://goo.gl/65KbXz
108 The Quest For Mobile Accessible Apps https://goo.gl/HEB1Vs
109 The Thumb Zone- Designing For Mobile Users https://goo.gl/uy1TQi
110 The Underestimated Power Of Color In Mobile https://goo.gl/ADzbdf
App Design
111 The UX of Password fields https://goo.gl/qm6u4A
112 UIUX design and accessiblitly https://goo.gl/MBrLRS
113 We need to talk about Accessibility on Chatbots https://goo.gl/5B1cBo
114 Web Layout Best Practices -12 Timeless UI Pat- https://goo.gl/MGFVSp
terns Analyzed
115 What features do blindvisually-impaired look for https://goo.gl/LhNCtt
in audio voice memo recorders on mobile
116 What is the best UX pattern for large dropdowns https://goo.gl/tBfow6
in case of mobile web pages
117 What’s holding back accessibility in 2016 https://goo.gl/CxiWME
118 What’s so wrong about hamburger menus https://goo.gl/aCDK1X
119 What’s the best navigation UI pattern for nested https://goo.gl/gopnbB
resources on mobile
120 When to Choose the Dark Side in Mobile Design https://goo.gl/bkz4r3
121 When to ignore ’Mobile-First’ https://goo.gl/p9xdqB
122 Why accessibility impacts UX web design https://goo.gl/Ysvrs3
123 Why and How to Avoid Hamburger Menus https://goo.gl/anH76n
124 Why mobile design means accessible design https://goo.gl/rEHZFX
125 Why You Should Never Pair Green and Red on the https://goo.gl/NbDaNC
Web
126 Why Your Links Should Never Say “Click Here” https://goo.gl/NfeiGy
127 Writing for all people- how to use alternative text https://goo.gl/9pfX3S
well

Table 3 – Title of documents used in the Virtual Ethnography study

 119

APPENDIX B – Characterization Form

120 APPENDIX B. Characterization Form

Formulário de Caracterização
*Obrigatório

1.
Login Moodle (primeira parte do e­mail, antes
do @) *

2.
Sexo *
Marcar apenas uma oval.

M
F

3.
Idade *

4.
Escolaridade *
Marcar apenas uma oval.

Ensino Médio Completo

Ensino Superior Incompleto
Ensino Superior Completo
Pós graduação Incompleto
Pós graduação Completo

5.
Ocupação/Profissão *

6.
Possui algum tipo de necessidades
especiais? Se sim, Qual? *

7.
Possui aparelho móvel (smartphone ou tablet)? *
Marcar apenas uma oval.

Sim
Não
 121
8. Há quanto tempo tem contato com smartphones/tablets? *
Marcar apenas uma oval.

Menos de 1 ano
1 ano
2 anos
3 anos
4 anos ou mais

9.
Qual a frequência de uso diária do smartphone/tablet? *
Marcar apenas uma oval.

Menos de 2 horas por dia

Entre 2 e 5 horas por dia
Entre 5 e 8 horas por dia
Mais de 8 horas por dia
Não uso smartphone/tablet diariamente

10.
Qual a frequência de acesso diário de Internet? *
Marcar apenas uma oval.

Menos de 2 horas por dia

Entre 2 e 5 horas por dia
Entre 5 e 8 horas por dia
Mais de 8 horas por dia
Não acesso a Internet diariamente

11.
Você utiliza o smartphone/tablet para acessar a Internet? *
Marcar apenas uma oval.

Sim
Não

12.
Prefere o smartphone/tablet ou computador para acessar sites da Web? *
Marcar apenas uma oval.

Smartphone/Tablet
Computador/Notebook

Exemplo de Botão Radio e Checkbox

122 APPENDIX B. Characterization Form
13. Assinale sua satisfação quanto a adaptação dos seguintes elementos web para
smartphones/tablets: *
Marcar apenas uma oval por linha.

Parcialmente Insatisfeito Satisfeito Muito Satisfeito

Tabelas
Formulários
Tamanho de Imagens
Tamanho da fonte de textos
Links
Ícones
Botões
Botão radio/Checkbox
Inserção de texto
Menus de sites
Listas
Caixa de pesquisa
Navegação

14.
Já encontrou algum obstáculo ou barreira* que tenha prejudicado encontrar informações
em um site acessando pelo celular? Se sim, descreva a situação e o obstáculo ou barreira
abaixo: *
* Uma barreira é qualquer tipo de dificuldade que possa ter prejudicado ou até impedido a
execução de alguma atividade.

15.
Utiliza alguma plataforma de e­learning? Se sim, qual? *
Marque todas que se aplicam.

Moodle

Outro:

16.
Com que frequência costuma acessar plataformas de e­learning pelo smartphone ou
tablet? *
Marcar apenas uma oval.

Diariamente
2 ou 3 vezes na semana
1 vez na semana
Nunca

Powered by
 123

APPENDIX C – Accompaniment Form

124 APPENDIX C. Accompaniment Form

Formulário de Acompanhamento
Este questionário está dividido em 6 seções que correspondem a atividades que devem ser
executadas no aplicativo Moodle Mobile. O objetivo é ter um feedback da sua experiência de uso do
aplicativo quanto a alguns elementos da tela.

Cada seção terá algumas imagens com elementos indicados e enumerados. Nem sempre para a
execução de uma operação você passará por todas as telas das imagens, mas é importante que
responda em todas as situações onde utiliza um elemento ilustrado.

*Obrigatório

Satisfação e Sentimento de Controle

Abaixo, você encontra uma figura com alguns sentimentos mapeados para ícones.

O objetivo desta escala é mapear suas emoções quanto a Satisfação e Sentimento de Controle ao
utilizar um elemento de interface por meio de imagens: smiley faces para Satisfação (de infeliz a feliz)
e joinhas para Sentimento de Controle (de dominado a dominante).

Em cada uma das atividades, será requisitado que você aponte seu grau de satisfação e Sentimento
de Controle, e você deve utilizar a escala definida nessa imagem para responder a tais questões.

Identificação
1.
Login Moodle (primeira parte do e­mail, antes
do @) *

Atividade 1: Consultar Eventos do Calendário

Nessa atividade, você deverá acessar a tela de Eventos do Calendário e acessar o detalhe do Evento
"Experimento 26/04".

Algumas possíveis telas são reproduzidas, onde alguns elementos da interface estão destacados com
 125
dos elementos/telas que utilizou somente (como existem várias formas de executar uma operação,
podem existir telas e elementos que você não tenha utilizado para completar a atividade).

Possíveis telas

2.
Satisfação por elemento:
Com base na escala de Satisfação, você deve assinalar (somente os elementos que
encontrou/utilizou) seu grau de Satisfação ao utilizar cada elemento de interface enumerado.
Marcar apenas uma oval por linha.

1 2 3 4 5 6 7 8 9
Elemento 1
Elemento 2
Elemento 3
Elemento 4
Elemento 5
Elemento 6
Elemento 7
Elemento 8
Elemento 9
Elemento 10
Elemento 11
Elemento 12

3.
Sentimento de Controle por elemento:
Com base na escala de Sentimento de Controle, você deve assinalar (somente os elementos que
encontrou/utilizou) seu grau de Sentimento de Controle ao utilizar cada elemento de interface
enumerado.
Marcar apenas uma oval por linha.

1 2 3 4 5 6 7 8 9
Elemento 1
Elemento 2
Elemento 3
Elemento 4
Elemento 5
Elemento 6
Elemento 7
Elemento 8
Elemento 9
Elemento 10
Elemento 11
Elemento 12
126 APPENDIX C. Accompaniment Form
4. Durante esta atividade você teve alguma dificuldade ou problema em utilizar ou entender
algum elemento de interface? Se sim, cite o número do elemento e a dificuldade. *

5.
Sobre a atividade em geral, responda: *
Marcar apenas uma oval por linha.

Discordo Discordo Concordo Concordo

Discordo Concordo
Fortemente Parcialmente Parcialmente Fortemente
Eu consegui
cumprir a
atividade
A quantidade de
passos e telas
na navegação
para completar a
atividade é
adequada
A interação com
a interface na
execução da
atividade foi
fluida e não
houveram
problemas de
localização e/ou
direcionamento

Atividade 2: Verificar nota de Questionário

Nessa atividade, você deverá verificar a nota recebida na correção do questionário.

Algumas possíveis telas são reproduzidas, onde alguns elementos da interface estão destacados com
retângulos pontilhados e enumerados. Você deve assinalar sua Satisfação e Sentimento de Controle
dos elementos/telas que utilizou somente (como existem várias formas de executar uma operação,
podem existir telas e elementos que você não tenha utilizado para completar a atividade).

Possíveis telas
 127
6. Satisfação por elemento:
Com base na escala de Satisfação, você deve assinalar (somente os elementos que
encontrou/utilizou) seu grau de Satisfação ao utilizar cada elemento de interface enumerado.
Marcar apenas uma oval por linha.

1 2 3 4 5 6 7 8 9
Elemento 1
Elemento 2
Elemento 3
Elemento 4
Elemento 5
Elemento 6
Elemento 7
Elemento 8
Elemento 9
Elemento 10

7.
Sentimento de Controle por elemento:
Com base na escala de Sentimento de Controle, você deve assinalar (somente os elementos que
encontrou/utilizou) seu grau de Sentimento de Controle ao utilizar cada elemento de interface
enumerado.
Marcar apenas uma oval por linha.

1 2 3 4 5 6 7 8 9
Elemento 1
Elemento 2
Elemento 3
Elemento 4
Elemento 5
Elemento 6
Elemento 7
Elemento 8
Elemento 9
Elemento 10

8.
Durante esta atividade você teve alguma dificuldade ou problema em utilizar ou entender
algum elemento de interface? Se sim, cite o número do elemento e a dificuldade. *
128 APPENDIX C. Accompaniment Form
9. Sobre a atividade em geral, responda: *
Marcar apenas uma oval por linha.

Discordo Discordo Concordo Concordo

Discordo Concordo
Fortemente Parcialmente Parcialmente Fortemente
Eu consegui
cumprir a
atividade
A quantidade de
passos e telas
na navegação
para completar a
atividade é
adequada
A interação com
a interface na
execução da
atividade foi
fluida e não
houveram
problemas de
localização e/ou
direcionamento

Ir para a pergunta 10.

Atividade 3: Enviar uma mensagem a um aluno

Nessa atividade, você deverá enviar uma mensagem qualquer ao participante "Aluno Moodle" ou
"Aluna Moodle"

Algumas possíveis telas são reproduzidas, onde alguns elementos da interface estão destacados com
retângulos pontilhados e enumerados. Você deve assinalar sua Satisfação e Sentimento de Controle
dos elementos/telas que utilizou somente (como existem várias formas de executar uma operação,
podem existir telas e elementos que você não tenha utilizado para completar a atividade).

Possíveis telas
 129
10. Satisfação por elemento:
Com base na escala de Satisfação, você deve assinalar (somente os elementos que
encontrou/utilizou) seu grau de Satisfação ao utilizar cada elemento de interface enumerado.
Marcar apenas uma oval por linha.

1 2 3 4 5 6 7 8 9
Elemento 1
Elemento 2
Elemento 3
Elemento 4
Elemento 5
Elemento 6
Elemento 7
Elemento 8
Elemento 9
Elemento 10
Elemento 11
Elemento 12
Elemento 13

11.
Sentimento de Controle por elemento:
Com base na escala de Sentimento de Controle, você deve assinalar (somente os elementos que
encontrou/utilizou) seu grau de Sentimento de Controle ao utilizar cada elemento de interface
enumerado.
Marcar apenas uma oval por linha.

1 2 3 4 5 6 7 8 9
Elemento 1
Elemento 2
Elemento 3
Elemento 4
Elemento 5
Elemento 6
Elemento 7
Elemento 8
Elemento 9
Elemento 10
Elemento 11
Elemento 12
Elemento 13

12.
Durante esta atividade você teve alguma dificuldade ou problema em utilizar ou entender
algum elemento de interface? Se sim, cite o número do elemento e a dificuldade. *
130 APPENDIX C. Accompaniment Form
13. Sobre a atividade em geral, responda: *
Marcar apenas uma oval por linha.

Discordo Discordo Concordo Concordo

Discordo Concordo
Fortemente Parcialmente Parcialmente Fortemente
Eu consegui
cumprir a
atividade
A quantidade de
passos e telas
na navegação
para completar a
atividade é
adequada
A interação com
a interface na
execução da
atividade foi
fluida e não
houveram
problemas de
localização e/ou
direcionamento

Atividade 4: Ler um texto

Nessa atividade, você deverá ler rapidamente o texto "The sun is our only truly renewable energy
source"

Algumas possíveis telas são reproduzidas, onde alguns elementos da interface estão destacados com
retângulos pontilhados e enumerados. Você deve assinalar sua Satisfação e Sentimento de Controle
dos elementos/telas que utilizou somente (como existem várias formas de executar uma operação,
podem existir telas e elementos que você não tenha utilizado para completar a atividade).

Possíveis telas
 131
14. Satisfação por elemento:
Com base na escala de Satisfação, você deve assinalar (somente os elementos que
encontrou/utilizou) seu grau de Satisfação ao utilizar cada elemento de interface enumerado.
Marcar apenas uma oval por linha.

1 2 3 4 5 6 7 8 9
Elemento 1
Elemento 2
Elemento 3
Elemento 4
Elemento 5
Elemento 6
Elemento 7
Elemento 8
Elemento 9

15.
Sentimento de Controle por elemento:
Com base na escala de Sentimento de Controle, você deve assinalar (somente os elementos que
encontrou/utilizou) seu grau de Sentimento de Controle ao utilizar cada elemento de interface
enumerado.
Marcar apenas uma oval por linha.

1 2 3 4 5 6 7 8 9
Elemento 1
Elemento 2
Elemento 3
Elemento 4
Elemento 5
Elemento 6
Elemento 7
Elemento 8
Elemento 9

16.
Durante esta atividade você teve alguma dificuldade ou problema em utilizar ou entender
algum elemento de interface? Se sim, cite o número do elemento e a dificuldade. *
132 APPENDIX C. Accompaniment Form
17. Sobre a atividade em geral, responda: *
Marcar apenas uma oval por linha.

Discordo Discordo Concordo Concordo

Discordo Concordo
Fortemente Parcialmente Parcialmente Fortemente
Eu consegui
cumprir a
atividade
A quantidade de
passos e telas
na navegação
para completar a
atividade é
adequada
A interação com
a interface na
execução da
atividade foi
fluida e não
houveram
problemas de
localização e/ou
direcionamento

Atividade 5: Responder a uma pergunta

Nessa atividade, você deverá responder à pergunta "Quando você prefere a apresentação das
Olimpíadas?"

Algumas possíveis telas são reproduzidas, onde alguns elementos da interface estão destacados com
retângulos pontilhados e enumerados. Você deve assinalar sua Satisfação e Sentimento de Controle
dos elementos/telas que utilizou somente (como existem várias formas de executar uma operação,
podem existir telas e elementos que você não tenha utilizado para completar a atividade).

Possíveis telas
 133
18. Satisfação por elemento:
Com base na escala de Satisfação, você deve assinalar (somente os elementos que
encontrou/utilizou) seu grau de Satisfação ao utilizar cada elemento de interface enumerado.
Marcar apenas uma oval por linha.

1 2 3 4 5 6 7 8 9
Elemento 1
Elemento 2
Elemento 3
Elemento 4
Elemento 5
Elemento 6
Elemento 7
Elemento 8
Elemento 9
Elemento 10

19.
Sentimento de Controle por elemento:
Com base na escala de Sentimento de Controle, você deve assinalar (somente os elementos que
encontrou/utilizou) seu grau de Sentimento de Controle ao utilizar cada elemento de interface
enumerado.
Marcar apenas uma oval por linha.

1 2 3 4 5 6 7 8 9
Elemento 1
Elemento 2
Elemento 3
Elemento 4
Elemento 5
Elemento 6
Elemento 7
Elemento 8
Elemento 9
Elemento 10

20.
Durante esta atividade você teve alguma dificuldade ou problema em utilizar ou entender
algum elemento de interface? Se sim, cite o número do elemento e a dificuldade. *
134 APPENDIX C. Accompaniment Form
21. Sobre a atividade em geral, responda: *
Marcar apenas uma oval por linha.

Discordo Discordo Concordo Concordo

Discordo Concordo
Fortemente Parcialmente Parcialmente Fortemente
Eu consegui
cumprir a
atividade
A quantidade de
passos e telas
na navegação
para completar a
atividade é
adequada
A interação com
a interface na
execução da
atividade foi
fluida e não
houveram
problemas de
localização e/ou
direcionamento

Considerações Finais
Está quase acabando :)
Nesta seção gostaria de ouvir sua opinião sobre mais alguns assuntos:

22.
Sobre o Moodle Mobile, responda: *
Marcar apenas uma oval por linha.

Discordo Discordo Concordo Concordo

Discordo Concordo
Fortemente Parcialmente Parcialmente Fortemente
Eu continuaria
utilizando o
Moodle em
dispositivos
móveis
Eu estou
satisfeito com a
adaptação da
plataforma
Moodle em
dispositivos
móveis

23.
Você possui alguma sugestão ou reclamação sobre a execução da atividade?

Muito Obrigado!
Agradecemos imensamente sua colaboração!
 135

APPENDIX D – Observation Form

136 APPENDIX D. Observation Form

Formulário de Observação
Avaliador: _______________________ | Usuário: _____________________________

1.
Em qual(is) atividades o aluno encontrou
dificuldades?

2.
O aluno entendeu como funciona o formulário SAM?
Marcar apenas uma oval.

1 2

Sim Não

3.
O aluno realizou todas as Atividades e respondeu a todas as questões do quiz?
Marcar apenas uma oval.

1 2

Sim Não

4.
O aluno teve dificuldade na utilização (touchscreen, botões etc) do dispositivo móvel
(smartphone ou tablet)?
Marcar apenas uma oval.

1 2

Sim Não

Observações Gerais

Caso tenha observado algo importante (alguma dificuldade ou peculiaridade), informe abaixo:

Powered by
 137

APPENDIX E – Form: Survey on Knowledge

Bases of Mobile Interface Design Patterns
138 APPENDIX E. Form: Survey on Knowledge Bases of Mobile Interface Design Patterns

Survey on Knowledge Bases of Mobile Interface

Design Patterns
Hello, my name is Vitor Casadei. I am a masters student at the Federal University of São Carlos in
HCI (Human­Computer Interaction) and produced this survey with the objective of identifying online
knowledge bases (websites, blogs, forums, feeds, etc.) from the community of developers and
designers on the design and construction of Mobile interfaces.

If you are a Designer or Developer, please, contribute to this survey. There are fewer than 10 quick
questions and your help will greatly contribute to the development of my research.

And you can rest easy, if you want to change or add something to your answer, you can at the end of
the form.

If you want to know more about my work, contact me by e­mail ([email protected]) or visit my
website (https://ux­leris.github.io/vitor_casadei/).

Thank you very much!

*Obrigatório

1.
Email (Optional)
This field is optional and will only be used to
answer questions I may have about your
answers.

2.
Are you a Designer or Developer? *
Marcar apenas uma oval.

Designer Ir para a pergunta 3.

Developer Ir para a pergunta 5.

Designer
Some questions about your work and experience

3.
What's your work experience as a Designer? *
Marcar apenas uma oval.

up to 1 year of experience
from 1 to 3 years of experience
from 3 to 5 years of experience
from 5 to 10 years of experience
more than 10 years of experience
 139
4. Check the platforms that you work or have already worked as a designer: *
You may select all options that apply
Marque todas que se aplicam.

Web
Mobile (Android)
Mobile (iOS)

Outro:

Ir para a pergunta 7.

Developer
Some questions about your work and experience

5.
What's your work experience as a Developer? *
Marcar apenas uma oval.

up to 1 year of experience
from 1 to 3 years of experience
from 3 to 5 years of experience
from 5 to 10 years of experience
more than 10 years of experience

6.
Check the platforms that you work or have already worked as a developer: *
You may select all options that apply
Marque todas que se aplicam.

Web
Mobile (Android)
Mobile (iOS)

Outro:

Ir para a pergunta 7.

UI/Interface Design Patterns

An Interface Design Pattern is a solution to a problem in designing an interface. It can be a way to
implement or present an interface element or the whole screen.

Common examples of Interface Design Patterns are those defined by Google Material Design
(https://material.google.com).

7.
Point your knowledge about Interface Design Patterns: *
Marcar apenas uma oval por linha.

Don't know know a little know fairly know a lot am an Expert

I ...
140 APPENDIX E. Form: Survey on Knowledge Bases of Mobile Interface Design Patterns
8. If you have already used Interface Design Patterns in any project, check the alternative that
corresponds to the size of the project in number of users: *
Marcar apenas uma oval.

I have never used

from 1 to 10 users
from 11 to 25 users
from 26 to 50 users
from 51 to 100 users
more than 100 users

Ir para a pergunta 9.

Knowledge Bases
The purpose is to hear from you, a member of the community, about websites, blogs, forums or any
other digital means by which you update yourself on subjects related to the design of mobile
interfaces.

9.
Enter websites, blogs, forums, mailing lists, feeds, and other media that you know about
and consult information on mobile interface design: *
Insert the links along with the names of all the knowledge bases you know about the subject. It
can be any link that you find relevant to the search for solutions for mobile interfaces. Add all the
links you think are pertinent.

Powered by