Available via license: CC BY 4.0
Content may be subject to copyright.
Journal of the Brazilian Computer Society, 2024, 30:1, doi: 10.5753/jbcs.2024.2592
This work is licensed under a Creative Commons Attribution 4.0 International License.
Adopting Human-data Interaction Guidelines and Participatory
Practices for Supporting Inexperienced Designers in
Information Visualization Applications
Eliane Zambon Victorelli [Universidade Estadual de Campinas (UNI-
CAMP) |eliane.victorelli@gmail.com ]
Julio Cesar Dos Reis [Universidade Estadual de Campinas (UNICAMP) |jreis@ic.unicamp.br ]
Institute of Computing, Universidade Estadual de Campinas, Av. Albert Einstein, 1251, Cidade Universitária Zeferino
Vaz, Zip code: 13083-852, Campinas – SP, Brazil
Received: 23 March 2022 •Accepted: 27 September 2023 •Published: 05 April 2024
Abstract Nowadays, voluminous data support may influence decision-making. People with varied profiles need
to interact with data to gain valuable insights. There is a need for software tools to support the understanding and
management of information to favor Human-Data Interaction (HDI) with a richer user experience. This study ex-
plores the combination of HDI design guidelines and participatory approaches to improve user experience in data
interaction. We defined a design process to support the activities and adapted participatory practices to facilitate
HDI design. We conducted workshops with inexperienced designers developing information visualization applica-
tions for common-sense domains. They generated and analyzed several application prototypes. Results suggest that
design guidelines help generate HDI-based prototypes with a good user experience.
Keywords: Human-data interaction, Interaction design, Design process, Participatory design
1 Introduction
Individuals, companies, and organizations are increasingly
leveraging data-based decision-making. This context has mo-
tivated the development of data-driven systems as special-
ized solutions for acquiring, managing, and presenting infor-
mation [Mahjourian, 2008]. Information visualization (IV)
systems support people in exploiting the potential of large
data volumes and require advanced interaction techniques.
Designing software interfaces that favor Human-data In-
teraction (HDI) is necessary to build effective IV sys-
tems.HDI refers to enabling people to manipulate, analyze
and understand large, unstructured, and complex datasets
[Elmqvist, 2011]. The design of an application to support
effective data interaction should provide a good user expe-
rience (UX).
The skills and knowledge necessary to design this type of
software application are challenging. Properly understand-
ing the application domain and the detailed data is essen-
tial while considering stakeholders’ needs and users’ profiles.
Designers must be creative, visionary, logical, and analyti-
cal [Stolterman, 1992]. They need skills in interface design,
data representation, requirements engineering, and a deep un-
derstanding of the domain’s peculiarities. It is very unusual
for an inexperienced designer to have all the knowledge and
skills necessary to design visualization applications [Martín-
Rodilla et al., 2014]. Frequently, many individuals partici-
pate in the design process with distinct roles. In Participa-
tory Design (PD), stakeholders usually act as co-designers
enrolled as design team members [Kuhn and Muller, 1993].
These approaches support stakeholders’ engagement in dif-
ferent perspectives at various stages of the design process.
We investigate HDI in IV systems adopting the human-
centered perspective proposed by Hornung et al. [2015]. It
states that the primary goal of HDI should be to design inter-
actions enabling stakeholders to promote desired and avoid
undesired consequences of data use. The vision and percep-
tions of people who access and use the data directly and those
who affect and are affected by the results of use must be ag-
gregated in the design. In this context, we adopt PD tech-
niques to involve stakeholders in the design process.
Design recommendations constitute an approach to im-
prove design quality. Recommendations help designers pre-
dict the consequences of their design decisions and can en-
hance the interactive properties of the system [Dix et al.,
2004]. Guidelines are experts’ design recommendations that
can help design other applications by facilitating the selec-
tion of the best appropriate solution to solve a design prob-
lem [Dix et al., 2004].
Several initiatives have established guidelines to improve
the design quality of information visualization applications
[Buchdid et al., 2014; Hayashi and Baranauskas, 2013].
Some investigations have focused on guidelines concerning
user interaction with information visualizations [Baldonado
et al., 2000; Elmqvist et al., 2011; Endert, 2014].
The use of taxonomies to analyze interaction techniques
is another approach to achieve quality in IV design [Amar
et al., 2005; Keim, 2002; Shneiderman, 1996; Yi et al., 2007].
It can be helpful to better understand the interaction space.
The identification of interaction categories improves the con-
sistency and standardization of the solution. It facilitates the
designers’ conception of a solution and the users’ understand-
ing of the system.
This article investigates the combination of design guide-
Adopting Human-data Interaction Guidelines and Participatory Practices
for Supporting Inexperienced Designers in Information Visualization Applications Victorelli and Dos Reis, 2024
lines, interaction categories, and participatory practices to
help inexperienced designers create information visualiza-
tion applications that provide a good user experience. In par-
ticular, we consider developing IV for common sense do-
mains (noncomplex domains that require no specific knowl-
edge to be understood). In the study, we address a typical
problem for undergraduates.
This study relies on the existing knowledge from previ-
ous investigations represented by design guidelines. We use
a set of design guidelines for HDI in information visualiza-
tion [Victorelli and Reis, 2020]. We explored the feasibility
of adopting a set of previously selected guidelines, and a set
of categories of interaction [Yi et al., 2007] to facilitate the
work of inexperienced designers.
The investigation emphasizes how to combine them with
participatory practices. The objective is to involve users with-
out forgoing pre-existing knowledge materialized in the de-
sign guidelines. Design recommendations and participatory
practices have the potential to leverage advanced interac-
tive solutions. The combination of these two approaches is
a promising research path. Although existing studies have
proposed blending the two approaches [Muller et al., 1998],
these studies were not focused on data interaction.
In a previous work, the HDI design process combined de-
sign guidelines and participatory practices [Victorelli et al.,
2020b] in complex domains. These domains often involve in-
tricate problems understood by few experts. The addressed
design scenario required the involvement of domain special-
ists and experienced designers. The emphasis was on the par-
ticipation of the main stakeholders in the design of visualiza-
tion applications. A socially aware approach [Baranauskas
et al., 2013] for the creation of HDI applications coordinated
design guidelines with artifacts and methods from Organiza-
tional Semiotics [Liu, 2008; Stamper et al., 2000] and Par-
ticipatory Design [Bjögvinsson et al., 2012; Simonsen and
Robertson, 2012].
Common sense domains are less complex and enable in-
experienced designers to participate in the design of data-
driven applications. Less experienced designers can signif-
icantly contribute to the process, bringing new ideas without
bias. However, they may have difficulties conducting partici-
patory activities as proposed in the former HDI process [Vic-
torelli et al., 2020b]. Selecting appropriate guidelines to the
context as the design evolves is an example of a practice that
requires designer’s maturity.
This study investigated how to evolve the HDI design pro-
cess so as to enable inexperienced designers to conceive IV
applications.
We sought to make it easier to apply the process and con-
duct the practices so novice designers could design informa-
tion visualization applications. To this end, we propose a new
process and several new practices.
This study addresses the following research question:
“How to combine participatory approaches with design
guidelines to enable inexperienced designers to design data
interaction in IV?” To the best of our knowledge, there are no
studies on the participation of inexperienced designers in pro-
cesses that combine participatory practices and design guide-
lines for data interaction.
This study proposes improvements to a previous proposal
for the HDI design process [Victorelli et al., 2020b]. Thereby,
less experienced designers can conduct participatory prac-
tices and apply design guidelines, learning the relevant de-
sign guidelines at the beginning of the process. In this sense,
designers will start future activities with prior knowledge of
the recommendations.
In addition, our investigation advanced the use of partici-
patory practices to refine interaction with data design alterna-
tives. A necessary approach considering that PD techniques
usually consider the design object static (e.g., the BrainDraw
technique helps to design a single interface at time). We
needed procedures to enable participants to express the dy-
namic aspects of data interaction. Specifically, we proposed
PD activities to support the representation of transitions be-
tween different data states.
We started this study by proposing evolutions for the HDI
design process. Then, we prepared materials to facilitate the
understanding of the HDI design guidelines set [Victorelli
and Reis, 2020] and data interaction categories [Yi et al.,
2007]. We presented the guidelines to the study participants
(undergraduate students), who explored the recommenda-
tions on existing websites to consolidate learning. Then, they
applied the guidelines in a practical context choosing a new
country to live in. We organized design teams and conducted
in-person workshops where participants developed naviga-
ble prototypes. Afterward, they inspected HDI guidelines us-
age and evaluated their user experience in the prototypes
built by different design teams. Finally, they answered a ques-
tionnaire about the HDI guidelines and participatory prac-
tices.
The key contributions of this investigation include the fol-
lowing:
1. A design process to guide inexperienced designers to
create information visualization applications.
2. Adaptation of PD techniques to deal with data interac-
tion design.
3. A study to analyze the applicability of the proposal.
The remainder of this article is organized as follows: Sec-
tion 2 presents the theoretical and methodological back-
ground in addition to the related work. Section 3 presents
the proposed process detailing the practices and the experi-
mental study overview. Section 4 presents the results of the
application of our approach in the study. Section 5 reports
an assessment of the research results, including user experi-
ence evaluation and participants’ design process assessment.
Section 6 discusses the findings, Section 7 presents our final
considerations and directions for future research.
2 Background
This section describes the basic concepts and techniques ex-
plored in our research. We present the participatory design
standpoint, some of its methods, and the prototyping tech-
niques. The role of interaction in information visualization
and the HDI design guidelines used in this study are ex-
plained. In addition, an overview of related works is pre-
sented.
Adopting Human-data Interaction Guidelines and Participatory Practices
for Supporting Inexperienced Designers in Information Visualization Applications Victorelli and Dos Reis, 2024
2.1 Participatory Design and Prototyping
User-centered approaches situate the user at the core of the
solution design. The focus is shifted from the technology, and
the users’ needs are emphasized. User involvement can occur
on many levels, from being observed to actively cooperating
with designers.
Participatory Design (PD) is a user-centered approach that
enables a high degree of user involvement in the design pro-
cess [Muller et al., 1997]. Those affected by design should
have a voice in the design process. End users act as effective
members of the design teams. They are not only a subject of
observation and experiments. Users perform practical contri-
butions by reflecting on their perspectives and needs.
Several PD techniques support stakeholder engagement at
various stages of the design process to develop a solution to
a problem. The use of simple techniques and small compro-
mise of materials are characteristics of the PD methods. PD is
seen as a means of anticipating or envisioning use before ac-
tual use, as it takes place in people’s life [Bjögvinsson et al.,
2012].
Prototyping is a strategy to deal effectively with problems
that are difficult to predict. It is a practice adopted to facil-
itate anticipation of use. Prototyping creates approaches to
express ideas quickly, easily and spontaneously, providing
user feedback instantly.
Prototypes are visual representations of systems and inter-
action models and can elucidate the possible visual appear-
ance of the artifacts.
The prototyping process includes applying good design,
product conceptualization, user modeling, and product vali-
dation. Prototypes help to understand how users experience,
feel, and behave to generate effective interactions. Interac-
tion design is a key factor for creating successful prototypes
[Preece et al., 2002].
In the initial phase of design it may be convenient to cre-
ate several different versions of the same idea to test which
one works best. Low-fidelity static prototypes can guarantee
more speed and detachment from the created solution. As
confidence in the design increases, it is interesting to detail
the application interactions. An interactive high-fidelity pro-
totype can be more faithful in the interface representation and
enables deepening the tests with users.
Our work focuses on specific practices involving proto-
types. We improved some prototyping techniques for PD of
human-data interaction. The following techniques were en-
hanced:
• Storyboarding is commonly used in system interface
prototyping. This technique organizes sequential graph-
ical sketches resulting in a chain of illustrations resem-
bling comics. The user interface snapshots show the
story that occurs as people interact with the interactive
solution.
Narrative storyboards are commonly applied to interac-
tion design [Vertelney, 1989]. It provides the context
in which the interaction occurs and shows what is hap-
pening in the world, complementing the interface story-
board that emphasizes what is happening on the screen
[Greenberg et al., 2012].
In this work, we adapted a narrative storyboard that
must be assembled in a participatory manner to mate-
rialize the interaction under design (see Section 4.3.2).
• BrainDraw supports graphic brain-storming. Drawing
cycles emable quickly populating an interface design
space. Each participant starts the drawing related to the
solution to be developed. At the end of a certain period,
each participant moves the drawing to the next partici-
pant. The participant receives a drawing from the other
one and continues it. The process continues until all
participants have worked through one another’s ideas.
Then, they discuss the solutions and generate consoli-
dated low-fidelity prototypes [Muller et al., 1997]. We
adapted BrainDraw practice to emphasize data interac-
tion (see Section 4.3.3).
• Brainwriting is an alternative for brainstorming. It is a
silent, group-generated generation of ideas [VanGundy,
1984]. The process used is similar to Braindraw; how-
ever instead of making drawings, participants describe
scenarios to contextualize and refine the concept of a
product. In our workshops, the participants described
how users would interact with data (see Section 4.3.1)
2.2 Interaction in Information Visualization
Applications
In an IV application, the interaction mediates the dialogue be-
tween the user and the data. The interaction is an important
support for data understanding and the decision-making pro-
cess. There are studies that seek a deeper understanding of
the role of interaction through the analysis of interactive re-
sources [Elmqvist et al., 2011; Dimara and Perin, 2020; Lam
et al., 2012; Yi et al., 2007].
The studies present different approaches to help the design-
ers of IV tools. Some studies defined interaction taxonomies
[Yi et al., 2007], and others proposed practical design guide-
lines [Elmqvist et al., 2011]. In our study, we use both ap-
proaches to facilitate HDI design.
Taxonomies help organize and classify elements logically.
It facilitates the creation and understanding of a solution fa-
voring consistency and standardization.
In the literature, the taxonomies for interaction with IV
present significantly different levels of granularity. Some tax-
onomies categorize low-level interaction techniques [Keim,
2002; Shneiderman, 1996], such as filtering out uninterest-
ing items or viewing relationships among items. Other stud-
ies focus on users’ tasks and intend to capture the benefits
provided by interaction [Amar et al., 2005; Yi et al., 2007].
Some examples of these tasks are computing a derived value,
finding extreme or anomalies, clustering, or correlating.
Yi et al. [2007]. Proposed seven general categories of in-
teraction techniques for IV applications. The proposed tax-
onomy connects the user’s objectives or intent with the inter-
action techniques[Yi et al., 2007]. It enables the description
of a significant range of existing interfaces. In our study, we
used interaction categories to help detail the solution under
design. We adopted seven interaction categories of the taxon-
omy proposed by Yi et al. [2007], as follows:
1. Select: mark something as interesting;
Adopting Human-data Interaction Guidelines and Participatory Practices
for Supporting Inexperienced Designers in Information Visualization Applications Victorelli and Dos Reis, 2024
2. Explore: show me something else;
3. Reconfigure: show me a different arrangement;
4. Encode: show me a different representation;
5. Abstract/Elaborate: show me more or less detail;
6. Filter: show me something conditionally;
7. Connect: show me related items.
2.3 Design Guidelines
Guidelines constitute an approach that favors design in the
context of data interaction. Recommendations based on good
or bad design can help design systems with similar character-
istics. The knowledge of the most experienced designers can
benefit the less experienced. They can facilitate the identi-
fication of problems and the advantages of alternatives so-
lution. Recommendations help designers determine the con-
sequences of their design decisions enhancing the systems’
interactive properties [Dix et al., 2004]. In this investigation,
we use the term guideline broadly to refer to design recom-
mendations regardless of their level of abstraction, general-
ity, and authority.
Several sources provide recommendations that can rep-
resent guidelines to help designers to conceive the interac-
tion with IV applications. A set of design guidelines for
HDI brings gathers recommendations scattered in the liter-
ature [Victorelli and Reis, 2020]. The set gathers classical
guidelines for HCI usability [Nielsen, 1994a]; principles for
User-Centered Design [Norman and Draper, 1986]; specific
design recommendations for interaction with visualizations
[Baldonado et al., 2000; Elmqvist et al., 2011; Endert, 2014];
and requirements for HDI design [Victorelli et al., 2020a].
The conceived guidelines address various aspects involved
in data interacting.
Our study employed the set of HDI design guidelines
to help inexperienced designers develop applications for
common-sense domains (see Sections 4.2 and 4.3). The
guidelines we used in design activities are summarized be-
low.
DG 1. Reinforce a clear conceptual model.
DG 1.1. Self-evidence in coordinated visualizations.
The design should provide perceptual hints or clues to make
relationships between multiple visualizations apparent to the
user [Baldonado et al., 2000].
DG 1.2. Consistency between coordinated visualiza-
tions. Ensure consistency between the interfaces for multiple
views and between the states of multiple coordinated visual-
izations [Baldonado et al., 2000].
DG 1.3. Reversible operations in visualizations. The
user must be able to recover in cases of mistake [Norman,
2013].
DG 2. Use smooth animated transitions between visu-
alizations states. Animated transitions help users maintain
an accurate mental model of the current state of the system
DG 3. Immediately provide visual feedback on the in-
teraction. Each keystroke or mouse movement, and not just
for major events, such as mouse clicks and the “Enter key”
must provide feedback [Elmqvist et al., 2011].
DG 4: Maximize direct manipulation with data.
Avoid control panels separate from the visualization When
it is not possible, make them an integral part of the visualiza-
tion [Elmqvist et al., 2011].
DG 5. Minimize information overload. Simplify users’
cognitive load without compromising effectiveness and com-
pensate for memory failures [Cook and Thomas, 2005].
DG 5.1. Show the information context. Ensure users
have the information necessary to know where they are and
how to go where they want [Beard and Walker II, 1990].
DG 5.2. Avoid requiring data memorization.
Avoid forcing users to store information in memory. Al-
low users to select, write or mark the information [Norman,
2013].
DG 6. Semantically enrich the interaction. Add seman-
tics to various types of interaction [Endert, 2014].
DG 6.1. Semantically enrich search interaction. Use se-
mantics dealing with synonyms, antonyms, meanings, and
abstractions to retrieve information and access heteroge-
neous and unstructured data.
DG 6.2. Enriched feedback from humans incorporated.
Incorporate into the application user’s feedback on the infor-
mation presented [Wilke and Portmann, 2016].
DG 6.3. Refine and train models through user feed-
back. Capture users’ tacit knowledge when manipulating
data and refining the underlying analytical models [Endert,
2014].
2.4 Related Work
Most systems use data, but what differentiates data-driven
systems from others is the emphasis on data. These systems
are built to facilitate human-data interaction. In this context,
there has been an increasing need to understand how to de-
sign data-driven applications properly. Studies address data
design from multiple perspectives, examining at different
facets of this diverse topic.
A relevant focus lies at the intersection of data science and
HCI. Investigations of data science working practices with a
human-centered approach have improved our understanding
of how specialists on data team members collaborate [Muller
et al., 2019; Passi and Jackson, 2018]. It is essential to design
tools that enable collaboration, considering what is specific
and distinctive about cooperation in data science. An inves-
tigation on strategies that people in this context adopt to per-
form their tasks helped develop a taxonomy of work practices
and open questions in the behavioral and social study of data
science workers [Muller et al., 2019]. Data science processes
and tools must address the needs of skilled users, domain ex-
perts that are not programmers, and the actual consumer of
the results of data science work. They recognize that evalu-
ating the tools’ efficiency is challenging due to the diversity
of scenarios and profiles. Still, they understand that methods
are needed to assess the usefulness and usability of tools de-
signed to support data analysis [Muller et al., 2019].
Feinberg [2017] proposes a distinct perspective on data by
understanding them as design material. Data generation is sit-
uated within a design perspective and understood as a set of
multiple layers of related design activities. Users are seen as
data designers, not as mere data appropriators. Data are pre-
sented as a product that evolves from design decisions regard-
ing infrastructure, collection, and aggregation. Data acquire
Adopting Human-data Interaction Guidelines and Participatory Practices
for Supporting Inexperienced Designers in Information Visualization Applications Victorelli and Dos Reis, 2024
a new character with each use, as they are manipulated to fit
their new context [Feinberg, 2017].
A similar approach was proposed to view data as a “de-
sign thing” [Seidelin et al., 2020]. Since organizations need
to deal with multiple heterogeneous data sources, the au-
thors propose tools that help select data sources that enable
advancement and innovation in their services. Data-related
work practices are investigated to propose tools to support
the exploration of and experimentation with data by domain
experts with different data sources. Co-design is a practical
approach to address the dependency between data and data
to work [Seidelin et al., 2020].
Others found it necessary to investigate how to guide inex-
perienced designers. Stolterman investigated how designers
think and found that experienced designers generally did not
believe that teaching design skills to inexperienced designers
is possible. The way to obtain such skills is “through experi-
ence” [Stolterman, 1992]. However, the most popular skills
that could characterize a skilled designer were being creative,
visionary, logical, and analytical. The study highlights that
while these four skills are trainable and able to be mastered,
they are often considered incompatible [Stolterman, 1992].
Another study contrasted the cognitive efficiency of expe-
rienced and inexperienced designers. The comparison mea-
sures designers’ mental effort to achieve creativity and the
creativity level of design outcome [Sun et al., 2014]. An ap-
proach to support novice designers in instructional systems
shows that they can solve realistic, complex design problems
when spending enough time and receiving adequate support.
In our study, we supported inexperienced designers with
design guidelines [Verstegen et al., 2008]. We combined this
support with participatory practices to facilitate the design of
visualizations by inexperienced designers.
3 Guidelines and Participatory Prac-
tices for Information Visualization
Design
We present our proposal starting with an overview of the de-
sign process in Subsection 3.1. Subsection 3.2 shows how we
applied the proposal in an experimental study.
3.1 Design Process Overview
We proposed an interaction design process to enable inexpe-
rienced designers to conceive IV applications. Participatory
practices combined with design guidelines and interaction
categories supported design activities.
Previous research proposed an HDI design process that
needed to be conducted by experienced designers [Victorelli
et al., 2020b]. The former study exercised developing in-
formation visualization in a complex domain. The study in-
volved a few participants with particular backgrounds, such
as domain experts. The process did not include previously
selected design guidelines applied during the practices. De-
signers chose the relevant recommendations and presented
them to the participants as the design process progressed -
the selection made while conducting the process required a
certain maturity from the designers.
Designers with little experience lack extensive knowledge
of guidelines. They would find it difficult to quickly rec-
ognize the recommendations applicable in a given situation
without researching the subject. It is hard to understand the
details of a new domain and, at the same time, help specialists
generate prototypes. This situation would need a long time of
involvement for novice designers.
In the current study, we propose an HDI design process
to be applied by inexperienced designers. We involved de-
signers with little or no experience in designing interactive
visualization applications.
We simplified some aspects of the process, intending to
enable inexperienced designers to conduct the activities. In
this sense, we previously defined a set of design guidelines.
This approach eliminated the need to select guidelines and in-
troduce them to participants dynamically during the design
phase. In our proposal, presented in Figure 1, we used a set of
HDI design guidelines in IV conception activities [Victorelli
and Reis, 2020]. We also introduced a set of interaction cate-
gories with information visualization to guide the designers
[Yi et al., 2007]. We investigate how inexperienced design-
ers could apply this predefined set of recommendations in a
participatory design process.
The scenario of this study does not require the participa-
tion of domain specialists. We approached less complex de-
sign problems in common-sense domains. This context en-
ables a significant number of participants to exercise the pro-
posed process. The evolved HDI design process consists of
four key phases, as follows:
1. Problem Clarification. Activities begin by clarifying a
design problem (see Subsection 4.1). This step aims to
identify the stakeholders, elucidate the issues and ideas
regarding the decisions supported by visualizations, and
state the requirements for the application.
2. Guidelines and Interaction Categories Understand-
ing. Next, the participants are prepared to use the HDI
design guidelines and interaction categories (see Sub-
section 4.2). They explore the guidelines and the inter-
action categories by performing pre-activities with an
existing Website which helps their learning.
3. Design Materialization. The design materialization ac-
tivities’ goal is to design low-fidelity IV prototypes to
support the user in making a specific decision. In this
phase, participants use design guidelines and interac-
tion categories directly in designing the application (see
Subsection 4.3). These activities included design tech-
niques adapted to the context of HDI as follows: Brain-
writing for Data Interaction Design (see Sub-subsection
4.3.1); Storyboarding for Data Interaction Design (see
Sub-subsection 4.3.2); and Braindraw for Data Interac-
tion Design (see Sub-subsection 4.3.3). The designed
low-fidelity prototypes are transformed into navigable
prototypes (see Sub-subsection 4.3.4).
4. Evaluation. Finally, participants evaluate the proto-
types concerning the use of the guidelines (see Subsec-
tion 5.1). Users also rate their experience with the proto-
types (see Subsection 5.2). Depending on the results of
Adopting Human-data Interaction Guidelines and Participatory Practices
for Supporting Inexperienced Designers in Information Visualization Applications Victorelli and Dos Reis, 2024
Figure 1. HDI design process combining guidelines with participatory design approaches.
this phase, it may be necessary to begin a new iteration
of the process.
The main focus of our study was the phases related to un-
derstanding the recommendations and design materialization.
The following subsections explain the details of each stage
of the design process and the results obtained from its appli-
cation in an experimental study.
3.2 Applying the proposed design process
We invited sixty-six undergraduate students to participate in
our study; fifty-two agreed to participate 1. However, not all
students participated in all workshops.
Groups had a minimum of two and a maximum of five stu-
dents so everyone could learn and participate. Sixteen groups
participated in the activities.
The participants were students from a computer science
school. They were all from the same school/undergraduate
program. The participants were enrolled in the Human-
Computer Interaction course. This discipline is suggested for
the sixth semester of the program and has Object-Oriented
Programming and Data Structures as prerequisites. There-
fore, all participants had notions of computer implementa-
tion. Most of them have yet to gain experience with Informa-
tion Visualization application design.
Students interested in participating as volunteers were in-
formed about the justifications and objectives of the research,
methodology, practices, procedures, benefits, and privacy of
their information. It was clarified that participation was vol-
untary and that there would be no impact on their activities if
the student decided not to participate. The participant could
discontinue their participation at any time if they wished. The
whole course was designed to address it. Confidential infor-
mation was not collected. Data and materials obtained from
subjects participating in the workshops were made anony-
mous. The secrecy and privacy of all information collected
were guaranteed. In this sense, we believe the hierarchical
aspects do not negatively affect the design activities, and the
overall evaluation carried out.
1The Research Ethics committee of the University of Campinas ap-
proved the study under protocol No.#18927119.9.0000.5404.
Feinberg argues that any “use” of the data represents a
continuation of its design. In this sense, user and designer
roles are intertwined when working with data and are often
performed by the same person [Feinberg, 2017]. Our study
considered it relevant to involve students who could simulta-
neously act as users and designers. Even if the group of stu-
dents was not necessarily a statistically representative sam-
ple of the whole population of inexperienced designers, they
have a unique profile to test our proposal because they could
simultaneously act as users and designers.
The participants had a period of four full weeks to im-
plement the high-fidelity prototype. During recruitment to
participate in the research, volunteers were previously told
about all the study phases, including that they should develop
high-fidelity prototypes. Implementing some of the guide-
lines would require code implementations regarding the se-
mantics of data operations. Although participants’ profiles
were compatible with this type of implementation, this would
require additional efforts to learn a subject that might not be
a priority for them at that time. In this sense, such guidelines
were not explored by the groups.
We chose a design problem that involved a typical decision
for this group of students. As the study consists of a problem
situation of interest to undergraduate students, they were po-
tential users of the solution. Students represented both users
of the product and executors of the process and practices.
They played both the roles of end-user and designers. All
students enrolled as participants of the design team acted as
co-designers.
Our study required seven workshops that consisted of face-
to-face activities bringing together most participants in per-
son to perform tasks according to our specified process. Par-
ticipants collaborated in various activities proposed for prob-
lem clarification, requirement elicitation, interface design-
ing, and prototype creation and evaluation. The process was
conducted in roughly fourteen hours of face-to-face sessions
with forty participants on average. Groups needed additional
twenty hours on average to complete the activities started in
the workshops. In addition, the researcher’s preparation of
the practice required twenty hours of work. Table 1 shows
the activities performed in each phase of the process, and the
Adopting Human-data Interaction Guidelines and Participatory Practices
for Supporting Inexperienced Designers in Information Visualization Applications Victorelli and Dos Reis, 2024
Table 1. Workshops that focused on each phase of the process and the activities, practices, and techniques involved
Process phase Activity Practices and Techniques Used and
Adapted
See
Sec-
tion
WS1 Problem Clarification Stakeholder
Identification
Stakeholder Identification Diagram
(SID) [Liu, 2008]
4.1
WS1 Problem Clarification Issues and Ideas Evaluation Frame (EF) [Baranauskas
et al., 2005]
4.1
WS1 Problem Clarification Requirements Semiotic Framework (SF) [Stamper,
1973]
4.1
WS2 Guidelines and Interac-
tion Categories Under-
standing
Explanation of
HDI Design
Guidelines
“Preparation of the Workshops” and
“Participants’ Understanding of HDI
Design Guidelines in [Victorelli et al.,
2019]. Guidelines described in: [Vic-
torelli and Reis, 2020]
4.2
WS2 Guidelines and Interac-
tion Categories Under-
standing
”Explanation
of Interaction
Categories”
Interaction categories [Yi et al., 2007] 4.2
WS3 Design Materializa-
tion
Low Fidelity
Prototype De-
signed
Brainwriting [VanGundy, 1984]
adapted for Data Interaction Design
4.3.1
WS4 Design Materializa-
tion
Low Fidelity
Prototype De-
signed
Storyboarding [Greenberg et al., 2011,
2012] adapted for Data Interaction De-
sign
4.3.2
WS4 Design Materializa-
tion
Low Fidelity
Prototype De-
signed
Braindraw [Muller et al., 1997]
adapted for Data Interaction Design
4.3.3
WS5 Design Materializa-
tion
Navigable Proto-
type Constructed
Supporting Tools such as: Figma, Mar-
vel, InVision and Axure.
4.3.4
WS6 Evaluation HDI Design
Guidelines Us-
age Evaluation
Questionnaire 5.1
WS7 Evaluation User Experience
Evaluation
One general question 5.2
Adopting Human-data Interaction Guidelines and Participatory Practices
for Supporting Inexperienced Designers in Information Visualization Applications Victorelli and Dos Reis, 2024
practices and techniques that supported the workshops.
We sought a subject that would motivate the participants
to define the design problem addressed in the study. The
desire to have an experience abroad emerged from the re-
searchers’ conversations with the participants in preparation
for the workshops. The underlying design problem selected
for the study was to support the user’s decision to choose a
new country to live in.
A common challenge for young people who graduate
studies and want to live abroad is selecting a new country.
This decision involves many aspects of young people’s lives.
Moving to another country is a challenge that excites young
people like most participants. In Brazil, according to a sur-
vey2, forty-three percent of the adult population expressed a
desire to leave the country. Sixty-two percent of young peo-
ple aged between 16 and 24 would move to another country
if they could. There are 19 million young people who would
leave Brazil.
It is not easy to muster courage and undo the bonds. Many
doubts go through the mind of people who want to migrate.
How to choose the country? What to take into account? What
are the factors that impact the lives of individuals who move
abroad? Will I get a job? What could I count on if I faced
any difficulties? How do people live in different countries?
How do the government and citizens understand and treat
the individuals who move there? What are the requirements
for applying for a residence visa? Choosing a new country
requires time, insight, and analysis.
Individuals who will make this decision need to know
themselves well. They analyze their relationship with the
characteristics of the countries of origin and destination. Dif-
ferent types of data visualization regarding the quality of life
in countries, labor markets, and academic opportunities can
help them analyze this information. An interactive Website
can be a tool to clarify doubts about each country’s main char-
acteristics and support decision-making about moving.
In our study, we invited the participants to design infor-
mation visualizations and interactions to support users’ de-
cisions to choose a new country. Although all participants
were students, there was a significant diversity of profiles
and perspectives on the subject. When choosing a country to
live in, some prioritized a place where they could earn money
quickly; others wanted a place with better quality of life; or
where they could feel that their work would make a “differ-
ence” in the social context. Some of them did not consider
moving to another country at the time. They also differed
on the best way to obtain information and various other as-
pects. When asked where they would obtain information to
support this decision, most mentioned the Internet and refer-
ences from people living abroad. Some said they would feel
safer consulting a specialized travel agent, and others would
prefer to consult the embassies of the countries in which they
were interested.
The socio-technical needs influenced the design of the arti-
facts. The environment may favor important factors of partic-
ipatory design standpoint concerning workplaces and the in-
troduction of new technology [Bjögvinsson et al., 2012]. Our
2https://www1.folha.uol.com.br/cotidiano/2018/06/se-
pudessem-62- dos-jovens- brasileiros-iriam- embora-do-
pais.shtml Datafolha, May 2018
study ensured that those affected by design should have a say
in the design process. The prevailing situation during the de-
sign process was controversy rather than consensus around
the emerging object. The study favored the prediction of use
before actual use.
We aimed to understand if and how the applied process and
participatory practices could help inexperienced designers to
create IV. At this stage, we were interested in the qualitative
aspects. We decided not to use a control group to compare the
results. It was impossible to ensure that all groups were com-
posed of members with equivalent profiles because the par-
ticipants had diverse skills, knowledge, and previous experi-
ence. Then, maintaining a group that did not have access to
the defined practices and recommendations would not serve
as a basis for comparing the design produced by groups that
followed the process and those that did not. We understand
that maintaining a control group would result in more disad-
vantages by depriving some students of the experience than
real gains regarding the study’s validity. Section 4 details the
results of the HDI development process. The evaluation is
presented in Section 5.
4 Results
We present the results obtained in the first three phases of
the proposed process. Subsection 4.1 presents problem clari-
fication activities. Subsection 4.2 describes the activities pre-
sented for facilitating the participants’ understanding before
design activities. Subsection 4.3 presents the low-fidelity pro-
totype design and the construction of the navigable proto-
types.
4.1 Results of the problem clarification
The clarification activities started with presenting the design
problem to the participants. They discussed and explored
the issue by themselves. To this end, the participants con-
sidered Socially Aware Design (SAD) [Baranauskas et al.,
2009; Baranauskas, 2014]. SAD supports the understanding
of the organization, the solution under design, and the con-
text in which the solution will be introduced. This approach
seeks to effectively address the socio-technical needs of a
particular group or organization. In SAD, design activities
involve all types of stakeholders to fill in artifacts collabo-
ratively. The artifacts facilitate the expression of ideas and
deliberation about design solutions.
Figure 2. Activities for the clarification phase of the HDI Design Process.
Adopting Human-data Interaction Guidelines and Participatory Practices
for Supporting Inexperienced Designers in Information Visualization Applications Victorelli and Dos Reis, 2024
Figure 2 presents the main activities in the clarification
phase. Various artifacts were used to mediate the communi-
cation and facilitate creative and collaborative design engage-
ment. As support material for the activities, the participants
received printed sheets of paper with figures to fill out for
each artifact. The participants filled in SAD artifacts cover-
ing the main concerns and interests of the stakeholders on the
proposed problem, as follows:
1. Stakeholder Identification Diagram (SID) [Liu, 2008]
helps to identify the people interested or affected by
the solution. Several stakeholders involved in the de-
sign problem were identified, including young people
interested in migration, migration agencies, Brazilians
living in other countries, and embassies.
2. The Evaluation Frame (EF) [Baranauskas et al., 2005]
supports coordinating problems and the initial search
for solutions. It informs about specific problems and
issues of stakeholders and ideas or solutions they en-
visage. For embassies, for example, issues regarding
changes in immigration laws were pointed out. Possible
solutions include in-depth knowledge of the country’s
laws. The product owner, another type of stakeholder,
has the problem of creating a monetizing strategy for
the solution. Interviewing potential customers to under-
stand how much they would be willing to spend on this
product can solve this problem.
3. Semiotic Framework (SF) [Stamper, 1973] supports
identifying and organizing requirements according to
six different communication levels. The first three lev-
els can be related to technological issues (physical, em-
pirical, and syntactic), and the other levels concern the
aspects of human information functions (semantic, prag-
matic, and social world). For the physical level, for ex-
ample, participants identified cloud-based systems. For
the social layer, they stated that it was essential to help
people choose another country, considering cultural as-
pects and beliefs.
The artifacts are filled in an integrated way; the informa-
tion captured in one artifact can influence the filling of the
others. For instance, a group identified expatriates, people
who already live in another country, as a stakeholder. Iden-
tifying this type of stakeholder may have helped to consider
requirements or functionality related to them. This group’s
solution enabled expatriates to report their experiences and
review information from their country.
4.2 Results of guidelines and interaction cate-
gories understanding activities
In a previous study about the HDI process, specialists learned
the guidelines as required by the subject covered in each
workshop [Victorelli et al., 2020b]. They understood the
guidelines during the design and evaluation activities. In
this study, we involved inexperienced designers. Participants
needed to know and understand the guidelines before start-
ing the design. Therefore, the guidelines were previously se-
lected and introduced to the participants. Figure 3 presents
the activities conducted in the phase of understanding guide-
lines and interaction categories.
Figure 3. Activities in the phase of understanding guidelines and the inter-
action categories.
The understanding phase aims to ensure the comprehen-
sion of the HDI design guidelines and interaction categories.
To this end, we tailored the activities that guarantee under-
standing of the guidelines for the scenario under study. We
prepared the support material and conducted the understand-
ing by the stakeholders following the steps proposed for
”Preparation of the Workshops” and ”Participants’ Under-
standing of HDI Design Guidelines” in a previous study [Vic-
torelli et al., 2019]. We included items to facilitate the assim-
ilation of the interaction categories in practices.
We introduced the data interaction categories (see Subsec-
tion 2.2) and the HDI design guidelines (see Subsection 2.3)
to the participants in an integrated way. We explained each
guideline and interaction category with examples of appli-
cations. Different contexts familiar to the participants, such
as renting property, were used. Simplified examples that in-
volved interactions similar to those that would be used in the
following steps were chosen. We explored the design guide-
lines and the interaction categories in the same examples so
they could better understand the relationship between them.
We prepared some practical tasks to be performed on two
particular websites highlighting points that users should ob-
serve. The participants explored by themselves the interac-
tions on the website while performing the predefined tasks.
They identified interaction categories and HDI design guide-
lines involved. Then, the participants are gathered to discuss
their understanding of the guidelines and interaction cate-
gories.
First, a real estate website was used to execute the pre-
pared tasks. Participants should choose a property to rent in
a specific city area. This website enabled users, for exam-
ple, to pan the map to see the properties on the streets near
other views. Other visualizations were updated when mov-
ing the map view, showing photos and data of the properties
of the new area. Thus, while performing an interaction of the
category “Explore” they could observe the guidelines “con-
sistency between coordinated visualizations”, and “immedi-
ately provide visual feedback”.
We investigated the participants’ first impressions of how
the guidelines were followed in developing the real estate
website. We asked participants about the importance of the
guidelines. This exercise aimed to force participants to think
more deeply about applying the guidelines.
They selected the most relevant recommendations from
the HDI design guidelines set according to their view. Partic-
ipants listed the guidelines in order of relevance to them. For
Adopting Human-data Interaction Guidelines and Participatory Practices
for Supporting Inexperienced Designers in Information Visualization Applications Victorelli and Dos Reis, 2024
each selected guideline, they explained in their own words
how it could support users and gave an example of the guide-
line application in any context or a counterexample. They
sketched information visualizations and interactions to ma-
terialize the example. We encouraged them to mention the
categories of interaction explored for each example.
We consolidated the results and established a ranking of
the most relevant HDI design guidelines according to the par-
ticipants’ perceptions. The participants chose the most rele-
vant design guidelines related to reinforcement of a clear con-
ceptual model. In contrast, they considered the guideline on
the use of smooth animated transitions between visualization
states less critical.
To reinforce their understanding of the guidelines, the
participants also explored and interacted with an existing
website with IV entitled “What’s the Happiest Country in
the World?”. The United Nations Sustainable Development
Solutions Network annually releases the Happiness Report,
which seeks to analyze the happiness of citizens from over
160 countries3. The countries’ Happiness Index is a combi-
nation of six measured variables: gross domestic product per
capita, healthy life expectancy, social support, perception of
corruption, freedom to make life choices, and generosity.
This application facilitates the investigation of the satisfac-
tion level among several countries’ inhabitants. We proposed
comparing the happiness index of some countries of their
choice. While executing this task, participants verified the
application of HDI design guidelines in visualizations based
on a happiness index.
The groups’ participants understood the data about each
country and observed the clarity of information, how infor-
mation was exposed, and how data were interrelated.
For example, an insightful way to analyze the data set
was to observe the correlation between different variables
that constitute the happiness index. Figure 4 shows a scatter
plot with correlation data between gross domestic product
per capita (GDP per capita) and healthy life expectancy for
countries (the color of each point is based on the happiness
score). It was possible to visually observe that, in general,
the higher a country’s GDP per capita, the higher its life ex-
pectancy.
Figure 4. Correlation between GDP per capita and Healthy Life Expectancy
(January 2021)
While executing the task with the website, the participants
3https://s3.amazonaws.com/happiness-report/2016/HR-V1_web.pdf
performed a procedure similar to the usability heuristics eval-
uation [Nielsen, 1994b]. They assessed whether the website
design respected each HDI design guidelines and the cate-
gories of interaction supported. They should check which
categories of interaction they could perform. An example of
interaction from the “Reconfigure” category was the ability
to navigate between different visualizations using the tabs at
the top of the page, as shown in Figure 4. This allowed the
user to switch from a map visualization to rank, correlation,
or history visualizations.
The groups reported their evaluation of the application of
each guideline in a free text.
They stated whether each guideline was identified and
where they observed its application on the website. The
groups were encouraged to provide an assessment of the de-
gree of application of each guideline throughout the website.
No scale has been defined for this assessment. The inspection
procedure performed by the participants provided descriptive
answers about the application of the guidelines.
To better understand the results of this activity, we need to
have an overview of the assessment made by the groups. We
performed a thematic analysis establishing codes for classi-
fying qualitative evaluations provided. We analyzed the an-
swers to identify the participants’ comments on each guide-
line to assign a code to each response. We gave one of the fol-
lowing codes to each comment: 1) the group did not analyze
the guideline; 2) the guideline was analyzed by the group but
not applied on the website; 3) the guideline was analyzed by
the group and applied on the website.
In general, most groups could adequately recognize the ap-
plication of the guidelines on the website. The evaluations
for each guideline were similar across the groups, with minor
discrepancies in a few cases. Some groups identified poten-
tial points of application of specific guidelines. They identi-
fied guidelines that were not used, but could have been ap-
plied. Spontaneously, they wrote suggestions on how to ap-
ply them.
Overall, the groups’ evaluations noted applications of
guidelines related to immediate feedback and the clear con-
ceptual model. The missing guidelines in the participants’
perception were related to smooth transitions and semanti-
cally enriched interactions. The groups could correctly ob-
serve the application or the absence of the guidelines they
considered most important in this activity.
4.3 Results of the design materialization
The goal of the design materialization phase is to produce
a navigable prototype. The participants proposed design al-
ternatives in low and high-fidelity prototypes for data visual-
izations concerning the design problem at this step. To this
end, they considered issues and ideas of solutions obtained
as results of the clarification phase (see Subsection 4.1).
Figure 5 presents the main activities of this phase. Partic-
ipatory and prototyping practices were adapted with a focus
on data. The HDI design guidelines and categories of inter-
action were used to guide the participants in the design ma-
terialization activities.
The design practices were organized to guide the partici-
pants in the proposal, materialization, and refining solutions
Adopting Human-data Interaction Guidelines and Participatory Practices
for Supporting Inexperienced Designers in Information Visualization Applications Victorelli and Dos Reis, 2024
Figure 5. Activities conducted in the design materialization phase of the
HDI Process.
for the design problem. We enhanced the participatory prac-
tices Storyboarding, BrainWriting, and BrainDraw (see Sub-
section 2.1) to facilitate the conception of prototypes focus-
ing on data interaction design using the HDI design guide-
lines (see Subsection 2.3) and interaction categories (see Sub-
section 2.2).
4.3.1 Brainwriting for Data Interaction Design
Brainwriting activity produced a textual description of an in-
teraction scenario. Participants described how users would
interact with visualizations to select a new country. The goal
was to tell the analysis that would be performed to support
the decision-making on choosing a country to live in.
Brainwriting is a speedy practice to capture the partici-
pants’ first ideas.
Our BrainWriting for Data Interaction Design proposal
combined the Brainwriting practice with the taxonomy for
interaction categories. The taxonomy of Yi et al. [2007]. Es-
tablished verbs to describe high-level operations in IV appli-
cations [Yi et al., 2007]. The operations enabled the discus-
sion and conception of the interaction involved in an analy-
sis scenario. Participants should describe an interaction sce-
nario using verbs representing interaction categories when-
ever possible.
Participants started remembering the interaction cate-
gories. Each participant proposed a short written description
of an interaction scenario supporting the choice of a new
country to live in. They indicated the steps the user should
take in writing a report of the interaction’s intentions.
Then, the user’s intention in each step of the scenario was
classified by choosing one verb related to the interaction cat-
egories, such as ”Select”, ”Explore”, and ”Filter”.
However, if they could not remember or identify which
verb to use, they should go ahead and write down their ideas
in the best possible way. In these cases, the verbs of interac-
tion categories could be introduced in the next step. In this
step, capturing users’ ideas quickly is the most relevant goal.
After a pre-defined time, everyone exchanged their piece
of paper with the person next to them. In each turn, the par-
ticipants read the interaction scenario received and comple-
mented the proposal of interactions based on their ideas. This
was repeated several times until the participants received
their scenarios back. Then, the group discussed the scenar-
ios and consolidated them into one.
The following excerpt exemplifies one interaction sce-
nario described with verbs related to interaction categories
by one of the groups. “The user will be able to select the
country they prefer and be will be guided to the country de-
scription page. Alternatively, on the home page, the user can
explore the survey information (happiness index, generos-
ity, social support, etc.) in the form of a single map on the
home interface, which can be filtered. The interface will be
updated according to the filtered information. The user can
click on the selected country and access its description page.
In addition, the user will be able to configure the map dis-
play.”
4.3.2 Storyboarding for Data Interaction Design
Having the written consolidated interaction scenario, the
groups materialized and detailed it with storyboarding. This
activity visually represented the interaction scenario. Our
Storyboarding for Data Interaction Design enables connect-
ing transitions with interaction categories and HDI design
guidelines. The artifact produced shows how the prototype
would support step by step the choice of a new country to
live in.
To this end, the groups prepared an annotated and in-
dexed state transition storyboarding [Greenberg et al., 2011,
2012]. They generated a sequence of transitions represent-
ing the steps of the interaction scenario proposed to select
the place they wanted to live. For each transition, the partic-
ipants reflected on the data and the moments when the tran-
sition would begin and end. Thinking about data from the
early stages of design helped to identify the applicable cate-
gories of interaction and design guidelines. In this step, they
could include some relevant aspects of data visualizations,
data manipulation, controls, mechanisms, and the context in
which the interaction occurs. The group could use additional
sketches to include these details.
Figure 6 shows the template proposed to the participants to
produce the adapted storyboard. They identified the interac-
tions that triggered transitions from one state to another using
representative verbs regarding the interaction categories. In
each interaction, they could indicate the possibility of using
HDI design guidelines if they could anticipate their applica-
tion. They wrote the guidelines applicable in each transition
of the storyboarding. Figure 7 illustrates an example of sto-
ryboarding generated during the workshops.
Figure 6. The template for storyboarding with spaces to identify interaction
categories and design guidelines.
Figure 7. An annotated and indexed storyboard with adopted design guide-
lines and interaction categories representing the transitions between states.
Adopting Human-data Interaction Guidelines and Participatory Practices
for Supporting Inexperienced Designers in Information Visualization Applications Victorelli and Dos Reis, 2024
4.3.3 Braindraw for Data Interaction Design
Braindraw is a technique for graphic brainstorming in cycles.
It is helpful in quickly populating an interface design space
focusing on a particular interface proposal. Our Braindraw
for Data Interaction Design adds elements to study the user’s
data interaction appropriately, as the original Braindraw was
not initially designed for it.
Braindraw for Data Interaction Design enables detailing
what changes occur between data states and representations
when users navigate from one interface to another. Using the
adapted BrainDraw the participants could design each tran-
sition considering the HDI guidelines and interaction cate-
gories involved. To focus on understanding the dynamics of
specific transitions, the groups should choose the most criti-
cal state transitions from the storyboard to detail using Brain-
Draw.
In the BrainDraw activity, the participants drew the inter-
faces and the IV on a blank sheet folded in half and opened
again. Figure 8 shows our proposal for the areas of the sheet
and guidance on how to fill them out.
In the left half sheet, the participant delineated the inter-
face and visualization where users trigger the interaction.
They should represent the elements involved in transitioning
from one screen to another. In the right half, they drew how
the transition ends, detailing the resulting information visu-
alization. They were instructed to consider some recommen-
dations:
• Highlight the data and context that matters for the inter-
action’s start and end.
• Mark data, controls, or other mechanisms users select
to perform the transition.
• Include elements that evidence the transition. Show if
users interact directly with the data; how they made the
selection; how they triggered the transition; and other
relevant details.
• After the time indicated by the activity coordinator, pass
the drawing to the next participant.
• Repeat the process until each participant has received
their drawing back. If participants deem it appropriate,
the cycle can be repeated.
Figure 8. Template for BrainDraw page with areas to draw the transition
start and end, and identify interaction categories and design guidelines.
The participants should write the verb that characterized
the users’ intention in the transition in the paper fold region.
Optionally, they could indicate the HDI design guidelines
that were or should be applied in the design of that transi-
tion. They could use as many guidelines as they considered
relevant to each transition.
They had two minutes to draw the interaction individually
in the first round. After that period, the participants passed
on their drawing to their right-hand colleagues. Upon receiv-
ing a drawing, the next participant continued the process by
filling in as much information as possible. After each par-
ticipant received their initial design back, they gathered to
discuss the generated alternative designs. They consolidated
the ideas into a new draw that sometimes included elements
from different proposals.
Figure 9 illustrates the result of a BrainDraw session per-
formed by one of the groups. In the illustrated transition,
coordinated visualizations show a map and a ranking of
the countries according to the pre-defined Happiness Index.
Users can change the importance of each variable that deter-
mines the ranking according to their preferences. When users
change their preferences, the map and the ranking must be
presented in different configurations.
The group stated that the interaction category involved
was Reconfigure. The guideline applied was “Consistency
between coordinated visualizations”. The map visualizations
and the ranking must be consistent with the users’ prefer-
ences and with one another. According to the group, other
potentially applied guidelines were “Immediately provide vi-
sual feedback on the interaction” and “Use smooth animated
transitions between visualizations states”. These guidelines
guarantee that the user can observe the results of the changes
in preferences immediately on the map and in the ranking.
And users could perceive the relations between information
in both presentations with the animated transition.
4.3.4 Navigable prototype construction
The static low-fidelity prototypes were transformed into
high-fidelity interactive prototypes to refine the design. The
prototypes aimed to support the most critical interactions in
the scenario under study. The navigable prototypes helped
represent how the human-data interaction would occur. The
focus was on detailing the transition between visualizations.
Our goal was that the participants could understand how
to apply the HDI design guidelines in human manipulation,
analysis, and construction of meaning of data. They chose
from the designed interactions – detailed in previous activi-
ties (see Sections 4.3.1, 4.3.2 and 4.3.3) – those that would
be addressed in the high-fidelity prototype. The participants
traced the interaction scenario steps that would contribute to
the investigation of user interaction with the data.
The groups should consider all the HDI design guidelines
that benefit the solution and the importance of each one in the
context. They decided which guidelines would be effectively
used (applied to the high-fidelity prototype), considering the
time and resources they had. They had to explain the reasons
for not using the applicable guidelines. Finally, they built a
high-fidelity interactive prototype.
Supporting Tools. In transforming a low-fidelity proto-
type into a high-fidelity interactive prototype, participants
were allowed to use any available prototyping tool. The rec-
ommendations were that the chosen prototyping tool should
Adopting Human-data Interaction Guidelines and Participatory Practices
for Supporting Inexperienced Designers in Information Visualization Applications Victorelli and Dos Reis, 2024
Figure 9. Sample drawing resulting from the BrainDraw activity adapted with two drawing areas and space for notes on the category of interaction and HDI
design guidelines involved.
enable exploring the various interaction categories involved
in the scenario and enable demonstrating the application of
the HDI design guidelines. Preferably, the high-fidelity inter-
active prototype should be presented in Html files. In general,
files of this type are generated automatically by prototyping
tools.
The groups chose the prototyping tool they considered
most appropriate. Most of the groups used tools such as
Figma 4, Marvel 5, InVision 6and Axure 7. However, some
groups adopted simpler alternatives, for example, using Pow-
erPoint slides connected by links.
Sixteen groups built navigable prototypes detailing transi-
tions to enable evaluating data interaction.
Figure 10 shows one prototype in which the “direct ma-
nipulation” guideline was applied to the “select” interaction
category. Users selected one country on the map to obtain
more information about it.
5 Evaluation
We conducted three different evaluations to assess our pro-
posal. We evaluated the process and the quality of the prod-
uct generated by the execution of the design process, which
was materialized in the prototypes. In the first step, the proto-
types were inspected to verify if the guidelines were used (see
Subsection 5.1). The user experience in the interaction with
the constructed prototypes was also evaluated (see Subsec-
tion 5.2). Additionally, we assessed the process conducted
to generate the products asking participants about the useful-
ness of the process and guidelines (see Subsection 5.3).
4https://www.figma.com/
5https://marvelapp.com/
6https://www.invisionapp.com/
7https://www.axure.com/
Figure 10. The transition between visualizations started with the interaction
of the category “Select” to mark a country on the map. The “Maximize direct
manipulation with data” and “Minimize information overload” guidelines
were applied.
Adopting Human-data Interaction Guidelines and Participatory Practices
for Supporting Inexperienced Designers in Information Visualization Applications Victorelli and Dos Reis, 2024
5.1 HDI Design Guidelines Usage Evaluation
The goal of the first evaluation was to understand whether
the teams really used the guidelines. The use of the guide-
lines was not mandatory and the designers could use only
the ones they wanted or considered relevant for the scenario
they planned. They could not use any guidelines if they did
not consider them relevant. Therefore, we need to know if
the guidelines were applied.
The prototypes were inspected to determine how much the
HDI design guidelines were followed in constructing the pro-
totypes. The inspector analyzed various interaction elements
concerning the HDI design guidelines.
The prototypes were distributed to the evaluators in ran-
dom order, with the restriction being that the group mem-
bers could not evaluate the prototype developed by the group
itself. Therefore, each participant analyzed the design solu-
tion materialized in an interactive prototype built by another
group. The identity of the group that created the prototype
being evaluated was hidden for the evaluators. All 52 partici-
pants inspected one of the 16 prototypes to verify the level of
application of the guidelines. On average, 3 to 4 inspectors
evaluated each prototype.
A form registered the analysis of HDI design guidelines
usage. According to the inspector’s judgment, each guideline
received a classification with a scale from 0 to 5. Grade 0
indicated that the guideline was not used in the prototype;
5 referred to an adequate application of the guideline in all
relevant points; the intermediate values on the scale represent
partial use.
The inspectors were also instructed to justify the classifi-
cation of each guideline in the prototype in a free-text form.
Optionally, they could give suggestions for improving the ap-
plication of each guideline. At the end of the form, the inspec-
tor could make suggestions for improving data interaction in
a generic way, even if it were not related to the application
of the guidelines.
Table 2 summarizes the results showing the number of pro-
totypes that had the application of guidelines evaluated in
a given range of grades. Almost all prototypes had grades
greater than two and less than four. According to the evalua-
tion scale used, these results indicate that the guidelines were
applied in constructing the prototypes but not in all points
where it would be possible to apply them. Only one of the
sixteen prototypes was graded outside these ranges.
Table 2. Summary of the results of the inspection of application of
guidelines indicating the number of prototypes evaluated in a given
range of grades.
Average Grade Number of
Prototypes
4< grade < 50
3< grade < 48
2< grade < 37
1< grade < 21
We deepened the analysis, checking the extent to which
each guideline was applied in the prototypes according to
the participants’ answers. Table 3 details each guideline, the
average score received, and the standard deviation. The av-
erage score considered all assessments conducted by all par-
ticipants/inspectors in all prototypes.
The guideline better evaluated was “DG 5.1. Give Infor-
mation Context” - related to ensuring that users have the nec-
essary information to know where they are and how to go
or navigate where they want to go. Some inspectors consid-
ered that filters by countries and annotations about previous
choices represented good ways to contextualize the user. The
inspectors also highlighted that due to the simplicity of the
application, it would be easy for users to know where they
are and how to go where they want.
The following guideline better evaluated was “DG 1.1.
Self Evidence in Coordinated Views of Data”. This is a rec-
ommendation about making relation between multiple visu-
alizations apparent to users. Many inspectors mentioned that
users could always have a clear idea of the state of the visu-
alization.
The worst rated guideline was “DG 6.3 Refinement and
training of models through user feedback” - related to pro-
viding semantic interaction to capture a user’s knowledge for
refining models. Many inspectors understood that this guide-
line was not applied due to the complexity of its implementa-
tion compared to the simplicity of the constructed prototype.
They gave suggestions for the evolution of the prototype us-
ing this guideline. Inspectors suggested that the application
learn and behave according to user preferences for countries,
hotels, etc.
We investigated whether the guidelines considered most
important at the beginning of the study were the most used
in designing prototypes. Comparing the results of Table 3
about guidelines usage and results about guidelines consid-
ered most relevant (see Section 4.2), we understood that
the guidelines considered most relevant were not always the
most used, as the following examples show:
• Design guidelines considered most relevant (see Sec-
tion 4.2) were related to reinforcing a clear conceptual
model. This assessment seems to be aligned with the
fact that this group of guidelines has been widely ap-
plied in prototypes (see Table 3).
• The smooth animated transitions between visualizations
were the least relevant in the participants’ opinion (see
Section 4.2). Although not considered relevant, it had a
meaningful application in prototypes (see Table 3). This
may be due to some tools’ ease for implementing these
guidelines.
• Guidelines related to semantic enrichment, although
considered important in the results of initial activities
(see Section 4.2), were little used in prototypes (see Ta-
ble 3). We hypothesize that the participants were not
entirely familiar with the concept of semantic interac-
tion. The lack of experience working with semantic in-
teraction in design made it harder for them to notice
that concept in other existing applications. This made it
difficult to apply that guideline in their projects. Addi-
tionally, the difficulty in implementing solutions to use
these guidelines may have inhibited their exploration.
We also analyzed the variation between grades assigned
by the participants. The standard deviation shown in Table 3
Adopting Human-data Interaction Guidelines and Participatory Practices
for Supporting Inexperienced Designers in Information Visualization Applications Victorelli and Dos Reis, 2024
Table 3. Average Grade for the Application of each Guideline
Guideline Average
Grade
St. Devi-
ation
DG 1. Reinforce a clear conceptual model. — —
DG 1.1. Self Evidence in Coordinated Views 4.07 1.21
DG 1.2. Consistency between coordinated visualizations 3.47 1.74
DG 1.3. Reversible Operations in visualizations 3.83 1.55
DG 2. Use smooth animated transitions between visualizations states. 3.02 1.76
DG 3. Immediately provide visual feedback on the interaction 3.38 1.79
DG 4: Maximize direct manipulation with data 3.34 1.66
DG 5. Minimize information overload — —
DG 5.1. Give information context 4.15 1.04
DG 5.2. Avoid requiring memorization 3.34 1.87
DG 6. Semantically enrich the interaction — —
DG 6.1. Semantically enrich search interaction 2.26 2.09
DG 6.2. Enriched feedback from humans incorporated into the system 1.21 1.82
DG 6.3. Refinement and training of models through user feedback 0.75 1.43
shows the most significant discrepancies, as in “DG 6.1. Se-
mantically enrich search interaction”. Initially, we suspected
the differences could be due to a lack of understanding of the
guideline, or the difficulty of recognizing the guideline appli-
cation in the prototype.
We further investigated the justifications for the grades for
each guideline. We observed that most of the inspectors ade-
quately recognized the application of the guideline in the pro-
totypes. However, although the inspectors read the proposed
interaction scenario for the prototype, they did not know pre-
cisely what each part of the prototype intended to show. This
may have generated a different understanding of the function-
ality of the same prototype.
We looked even deeper into the details of the grades re-
ceived by each prototype. We investigated some very differ-
ent grades for the same guideline in each prototype. Justifica-
tions for some divergent given grades clarified that some in-
spectors considered features that they thought the prototype
intended to show. Meanwhile, other inspectors considered
only what was implemented in the prototype. The grades as-
signed to guidelines application were well justified with con-
sistent arguments, even if they presented a significant varia-
tion.
5.2 User Experience Evaluation
In the subsequent evaluation, our goal was to further un-
derstand users perceptions and responses that resulted from
using the information visualization prototypes built in this
study. We evaluated the experience that the participants had
during the interaction with the prototypes developed.
For user experience evaluation, we chose six of the sixteen
prototypes built. The criterion for selecting the six prototypes
was the prototype classification regarding guidelines usage.
We selected two prototypes with best, two with worst, and
two with intermediate classification regarding guidelines ap-
plication.
Forty-eight people participated in this assessment. Each
participant evaluated the experience with two different pro-
totypes. The prototypes were assigned to evaluators in ran-
dom order, but assuring the assigned prototype was different
from the ones they had built or evaluated in the first step (see
Subsection 5.1). The developers’ names of the evaluated pro-
totype were hidden for the evaluators.
User experience is subjective, context-dependent, and
changes over time. It includes the emotions and physical and
psychological responses that occur before, during, or after
product usage [ISO, 2018]. Users’ experience with an inter-
active product involves several aspects, including the way it
feels in their hands, how well they understand how it works,
how they feel about it while they are using it, how well it
serves their purposes, and how well the product fits into the
entire context [Alben, 1996]. In short, the experience should
be pleasant and useful for the user.
The participants should not position themselves as design-
ers in this evaluation. They interacted with prototypes from
the end-users perspective, executing an interaction scenario
that prototype designers proposed in the Brainwriting for
Data Interaction Design activity (see Subsection 4.3.1).
For experience evaluation, we asked one general question
about the participant’s perception with the question: “In gen-
eral, what was your experience with the prototype?”. Users
answered by rating their experience on a scale from 0 to 10.
We calculated the general experience of each prototype by
the average score obtained in the answers to this question.
As a result, most prototypes’ user experience was evalu-
ated above the average scores. On a scale from 0 to 10, four
prototypes scored above 6. The other two prototypes scored
between 4 and 6.
Finally, we considered the hypothesis of a relation be-
tween the guideline’s degree of use (application) and the user
experience using the prototype. Figure 11 shows a scatter plot
with the relation between the average grades for HDI design
guidelines usage and the average grades for general experi-
ence perceived for each prototype. For guidelines usage, we
considered the average grade obtained for each prototype tak-
ing into account the usage evaluation for all guidelines (see
section 5.1).
We used too few prototypes to claim that this relation fol-
lows a linear pattern based on this graph. Therefore, the re-
Adopting Human-data Interaction Guidelines and Participatory Practices
for Supporting Inexperienced Designers in Information Visualization Applications Victorelli and Dos Reis, 2024
sults require further investigation to verify if the more inten-
sive the use of HDI design guidelines, the better the user ex-
perience tends to be.
Figure 11. Relation between the average grade obtained in the HDI Design
Guidelines Usage Evaluation and the general UX perceived by the users per
prototype.
5.3 Evaluation of Process Practices and
Guidelines
Finally, the participants were invited to evaluate the process,
guidelines, and practices. The objective was to understand
if the participants found the activities and guidelines easy to
understand. It was also important to verify if the recommen-
dations facilitated the design, were useful, and enabled every-
one to participate. Thirty students who participated in the de-
sign activities assessed the process, guidelines, and practices.
Responses to the assessment protocols were anonymous.
The participants assessed the guidelines and practices
through an online questionnaire so we could understand how
the participants perceived the different methods used, The
participants expressed the level of agreement in ten sentences
(four about the guidelines and six about the practices) and
answered one open question. The sentences about guidelines
are presented in Table 4, and the sentences regarding prac-
tices are shown in Table 5.
We used a Likert scale from 1 to 5 in which the respon-
dents specified their appraisal of a specific aspect. For each
sentence, the participant should choose one of the following
options: ”I totally agree” (N1 - weight 5- 100%), ”I agree”
(N2 - weight 4- 75%), ”I neither agree nor disagree” (N3 -
weight 3 - 50%), ”I disagree” (N4 - weight 2 - 25%), and ”I
totally disagree” (N5 weight 1 - 0%). Based on these answers,
a degree of agreement was calculated using the formula:
Agreement = N1*100 + N2*75+ N3*50+ N4*25+
N5*0)/SUM(N1:N5)*100
Figure 12 presents the data in two visualizations. The bars
represent the absolute number of answers each sentence re-
ceived from the participants. After the bar, we show the cal-
culated degree of agreement, represented by a percentage.
All aspects had similar assessments. The guidelines were
evaluated with intermediate scores. The best-evaluated as-
pect was item P2 - “opportunity to contribute to the design for
all group members”. The lowest grade was assigned to Item
P6 - “BainDraw activity with two screens”. The most general
Figure 12. Questionnire answers for user evaluation of guidelines and prac-
tices.
items on participatory practices, such as items P1, P2, and P3
of Table 5, were the best evaluated. Nevertheless, items on
specific participatory practices, such as P4, P5, and P6 of the
Table 5, had a good assessment but slightly lower than more
generic items.
6 Discussion
We proposed a design process to support inexperienced de-
signers in conceiving IV applications in non-complex do-
mains. Our contribution seeks to help design software tools
that facilitate user interaction with data. The proposed design
practices involve specific aspects of data-driven application
design and consider data from a design perspective. The pro-
posal has particular elements of HDI and information visual-
ization.
The focus on HDI enabled a prior selection of guidelines.
The design guidelines selected are specific to data interaction
[Victorelli and Reis, 2020]. Interaction categories describe
data-related actions to the data in IV systems [Yi et al., 2007].
The verbs associated with data interaction categories drive
the choice of interactions in practices in adapted Braindraw
[Muller et al., 1997], Storyboard [Greenberg et al., 2012],
and Brainwriting [VanGundy, 1984]. Participatory practices
for prototyping acquired additional elements and recommen-
dations to support the design of specific aspects of informa-
tion visualizations.
The particularities demanded by the focus on inexperi-
enced designers designing data interaction brought other im-
plications for the proposed process. We introduced the prede-
fined set of HDI design guidelines [Victorelli and Reis, 2020]
before starting the design process. We anticipated introduc-
ing guidelines regarding the sequence of activities proposed
in Victorelli et al. [2020b]. This order of tasks enabled the
designers, even with little experience, to expand their knowl-
edge of alternatives and act with a broader view of possible
solutions.
One limitation of the work was inherent to the context in
which it was carried out. It was desirable to involve a control
group with participants not informed as to the set of guide-
lines, the process, and its practices. However, that was not
possible, as this study was carried out in the context of a
course for undergraduate students and had educational ob-
jectives. Leaving some students without the opportunity to
learn the design process was undesirable. On the other hand,
Adopting Human-data Interaction Guidelines and Participatory Practices
for Supporting Inexperienced Designers in Information Visualization Applications Victorelli and Dos Reis, 2024
Table 4. User Evaluation of Guidelines.
Item Sentence
G1 I understood the HDI design guidelines.
G2 The design guidelines were used.
G3 All participants were able to argue about design guidelines.
G4 The guidelines helped drive interaction design.
Table 5. User Evaluation of Process Practices.
Item Sentence
P1 The participatory practices suggested in the activities helped achieve the task’s objectives.
P2 All group members had the opportunity to contribute to the design activities.
P3 The activities enabled the reconciliation of different points of view.
P4 The BrainWrite with verbs representing interaction categories helped create an analysis scenario.
P5 The Storyboard helped clarify the steps of the scenario.
P6 The BrainDraw with two screens on each sheet facilitate the appearance of new solutions for interaction design.
because the group of students was large, it was possible to
involve more than fifty participants as designers, which is
usually unfeasible.
The initial website exploration in the same context as the
design problem may have inhibited the students’ creativity.
Probably, the use of this website may have influenced the de-
sign solutions. The participants’ goals were to design a new
solution to the problem of choosing a country to live in. We
did not expect a redesign of an existing application. However,
most prototypes generated had a home page with a map simi-
lar to the evaluated website. To avoid bias in the solution, the
participants should explore websites that involve the guide-
lines being studied but that deal with an unrelated theme in
future experiments.
Other limitations can be overcome in the next studies. It
is feasible to improve the process to consider the selection
of the data sources phase. And finally, it is also possible to
conduct more detailed user experience evaluations with a val-
idated tool, even if it is not dedicated to information visual-
ization systems.
Despite their limited experience as designers, we found
that the students understood the HDI design guidelines and
interaction categories. Based on our workshop observations
and results, we observed that the participants mastered these
subjects. The participants could discuss the design guidelines
and the interaction categories using appropriate terms, mean-
ings, and application forms. When working on the design ac-
tivities, the guidelines and interaction categories became part
of their vocabulary.
Additionally, the participants adequately evaluated the
guidelines on existing websites and prototypes. They also
gave many relevant suggestions when inspecting the guide-
lines’ application in prototypes other students built. We inter-
preted the excellent quality of evaluations and justifications
the participants provided as another indication that they rea-
sonably understood the guidelines and interaction categories
presented.
Above all, the participants used the guidelines in the so-
lutions designed. The reasonable grades assigned for guide-
lines usage in the prototypes (see Table 3) may indicate that
the HDI design guidelines were helpful for designing them.
The participants generally used the recommendations in the
prototypes constructed at points that were appropriate and di-
rectly related to the guidelines. They were not limited to the
obvious applications, which enable the emergence of ideas
for innovative solution. For example, one of the groups de-
veloped a quiz to trace user interests and present personalized
recommendations and data considering the quiz results.
From a different perspective, the participants’ guideline
assessment can represent a relevant contribution to the evo-
lution of the guideline repository proposed by Elmqvist
et al. [2011]. Our study included several guidelines from
that repository. The repository author asked for contributions
from people other than the creators themselves. In our study,
the participants’ assessment highlights some strengths and
weaknesses of the guidelines in the repository.
Another positive aspect was the feasibility and usefulness
of the proposed practices. The participatory approach facili-
tated the design of interactions in the information visualiza-
tion application for use in the common-sense domains by in-
experienced designers according to the level of agreement
for P1 to P6 in Figure 12). According to these results, we
have more than 80% agreements that all group members had
the opportunity to contribute to the design activities, and that
the suggested participatory practices helped achieve the ob-
jectives of the design activities. The results also show more
than 75% agreement regarding the possibility of reconciling
different points of view of several participants.
We observed that inexperienced designers were inspired
by users’ intentions listed in the interactions categories [Yi
et al., 2007]. The practices of Storyboarding [Greenberg
et al., 2012], BrainDraw [Muller et al., 1997], and Brainwrite
[VanGundy, 1984] combined with the interactions categories
[Yi et al., 2007] seem to have facilitated designing the appli-
cation and helped structure the design activities. We materi-
alized a practical way to conduct design by adapting these
practices to the context of interaction with visualizations and
incorporating the categories of Yi et al. [2007]. The adapted
techniques made it easier for inexperienced designers to iden-
tify what type of interaction they could use in their design.
The usefulness of specific participatory practices, such as
BrainWriting and BrainDraw, had a good evaluation but was
slightly lower than the other questionnaire items (see P4 and
P6 in Figure 12). There were variations in how the partici-
Adopting Human-data Interaction Guidelines and Participatory Practices
for Supporting Inexperienced Designers in Information Visualization Applications Victorelli and Dos Reis, 2024
pants conducted these activities, although the practices were
simple, and their step-by-step procedures were very detailed.
The variations may indicate that the participants need more
explanations about the activities and their objectives. We will
refine the practice description to deal with the detected devia-
tions. We intend to include an oral explanation and discussion
of the practices before the execution.
Several groups significantly advanced the design solution
when they performed the BrainDraw activity (see Subsection
4.3.3). Thanks to this practice, the groups managed to deepen
the analysis of the interaction dynamics in the solution and
went far beyond drawing the elements of each screen. It is
worth further investigating what aspects triggered the sped-
up progress at this stage. This deepened understanding may
help find a way to start this sped-up advance early in the pro-
cess and lead to improvements in the “Understanding” phase
(see Subsection 4.2).
We observeed that design support tools were crucial in
making participatory practices feasible. The participants
were allowed to choose the tools they would use. They pre-
ferred to use paper during the workshops. When the partici-
pants could not complete the activities during the workshop,
they needed a tool that supported the design done remotely in
a collaborative manner. Most groups chose tools that helped
remote activities carried out by several designers simultane-
ously. The immediate updating of information between the
various group members seems to have been considered more
important than other advanced features offered by some de-
sign tools. We understand this is one of the most relevant
requirements for prototyping tools that support participatory
design practices carried out remotely.
The user experience evaluation (see Section 5.2) sought to
understand relevant aspects of the product quality generated
by the proposed process. The participants’ assessment seems
to indicate that the products generated by the process (the
prototypes) provide a good experience. Figure 11 showed an
apparent correlation between guidelines application and gen-
eral experience perceived. In this graph, the more significant
application of the guidelines corresponds to the prototypes
with a better overall experience perceived by the user. We
plan to study instruments further to evaluate the experience
with HDI applications in future work.
The evaluations carried out in this study provided
prospects for new activities that can help to refine our pro-
posal. Some methods are proposed in the literature to assess
user experience applicable to software applications [Hassen-
zahl and Tractinsky, 2006; Minge et al., 2017]. However,
they do not focus on the dynamic aspects of data interactions.
In subsequent studies, we will analyze existing evaluation in-
struments and propose new criteria for HDI-related user ex-
perience.
Considering data from a design perspective is still an
under-explored research topic. Existing efforts in related re-
search must be added to enable progress in this area. We
intend to study ways to harmonize our results with other
initiatives that approach the subject from different perspec-
tives [Seidelin et al., 2020; Muller et al., 2019; Feinberg,
2017]. Adding the results of studies focused on selecting
data sources to our proposal can provide new ideas about the
method and the activities needed in each design step [Fein-
berg, 2017]. We consider it relevant to evolve our approach
to have practices to deal with the complexity inherent in se-
lecting data sources. We understand that improving our pro-
posal for data interaction design with co-design practices is
possible [Seidelin et al., 2020]. Combining these approaches
may improve the current data practices, help address poten-
tial challenges, and obtain more significant benefits from ex-
ploiting large volumes of data.
7 Conclusion
Inexperienced designers can provide new undiased ideas for
information visualization solutions. However, designers with
little experience may find it difficult to participate in such
design process without support. They lack sufficient knowl-
edge of design guidelines, and participatory practices are not
focused on developing data-driven applications. This article
proposed a design process to guide inexperienced designers
in creating information visualization applications. We used a
set of HDI design guidelines and interaction categories as in-
put and combined them with participatory practices defined
to consider the context of data interaction. We found that the
proposal is feasible to be used by inexperienced designers.
The participants exhibited facility in using the proposed
guidelines and practices and were comfortable discussing
their ideas with arguments based on the guidelines. They
effectively used the recommendations in developing proto-
types and inspected prototypes using them.
The results indicate the feasibility of applying our pro-
posal in information visualization development projects in
common-sense domains.
Declarations
Acknowledgements
This study was financed in part by the São Paulo Research
Foundation (FAPESP) (Grant #2022/15816-5)8
Authors’ Contributions
EV and JR contributed to the conception of this research approach,
planned the experiments, and conducted the workshops. EV ana-
lyzed the results and is the writer of this manuscript. JR reviewed
the manuscript. All authors read and approved the final manuscript.
Competing interests
The authors declare that they have no competing interests.
References
Alben, L. (1996). Quality of experience: defining the criteria
for effective interaction design. interactions, 3(3):11–15.
DOI: 10.1145/235008.235010.
8The opinions expressed in this work do not necessarily reflect those of
the funding agencies.
Adopting Human-data Interaction Guidelines and Participatory Practices
for Supporting Inexperienced Designers in Information Visualization Applications Victorelli and Dos Reis, 2024
Amar, R., Eagan, J., and Stasko, J. (2005). Low-level
components of analytic activity in information visualiza-
tion. Proceedings - IEEE Symposium on Information Vi-
sualization, INFO VIS, pages 111–117. DOI: 10.1109/IN-
FVIS.2005.1532136.
Baldonado, M. Q. W., Woodruff, A., and Kuchinsky, A.
(2000). Guidelines for using multiple views in information
visualization. In Proceedings of the working conference on
Advanced visual interfaces, pages 110–119,Palermo, Italy.
ACM, NY-United States. DOI: 10.1145/345513.345271.
Baranauskas, M. C. C. (2014). Social awareness in HCI. In-
teractions, 21(4):66–69. DOI: 10.1145/2621933.
Baranauskas, M. C. C., Martins, M. C., and Valente, J. A.
(2013). Codesign de Redes Digitais: tecnologia e edu-
cação a serviço da inclusão social. Book.
Baranauskas, M. C. C., Schimiguel, J., Simoni, C. A. C.,
and Medeiros, C. B. (2005). Guiding the Process
of Requirements Elicitation with a Semiotic-based Ap-
proach – A Case Study Understanding User Require-
ments : a Semiotic-based View. In 11th International
Conference on Human-Computer Interaction, pages 100–
111. Available at:https://lis-unicamp.github.io/
wp-content/uploads/2014/09/CHI2005.pdf.
Baranauskas, M. C. C. et al. (2009). Socially aware comput-
ing. In ICECE 2009 VI International Conference on En-
gineering and Computer Education, pages 1–5. Available
at:https://tnr.nied.unicamp.br/interhad/nied/
interhad/producao/socially-aware-computing/
socially-aware-computing.pdf_icon.pdf.
Beard, D. V. and Walker II, J. Q. (1990). Navigational tech-
niques to improve the display of large two-dimensional
spaces. Behaviour and Information Technology, 9(6):451–
466. DOI: 10.1080/01449299008924259.
Bjögvinsson, E., Ehn, P., and Hillgren, P. A. (2012). Design
things and design thinking: Contemporary participatory
design challenges. Design Issues, 28(3):101–116. DOI:
10.1162/DESIa00165.
Buchdid, S. B., Pereira, R., and Baranauskas, M. C. C.
(2014). Playing Cards and Drawing with Patterns - Sit-
uated and Participatory Practices for Designing iDTV
Applications. Proceedings of the 16th International
Conference on Enterprise Information Systems. DOI:
10.5220/0004887100140027.
Cook, K. A. and Thomas, J. J. (2005). Illuminating the
path: The research and development agenda for visual
analytics. Technical report, Pacific Northwest National
Lab.(PNNL), Richland, WA (United States). Available
at:https://www.osti.gov/biblio/912515.
Dimara, E. and Perin, C. (2020). What is Interaction
for Data Visualization? IEEE Transactions on Visu-
alization and Computer Graphics, 26(1):119–129. DOI:
10.1109/TVCG.2019.2934283 .
Dix, A., Finlay, J., Abowd, G. D., and Beale, R.
(2004). Human-Computer Interaction. Pear-
son, Englewood Cliffs, third edition. Available
at:https://paragnachaliya.in/wp-content/
uploads/2017/08/HCI_Alan_Dix.pdf.
Elmqvist, N. (2011). Embodied Human-Data Interaction.
ACM CHI 2011 Workshop “Embodied Interaction: Theory
and Practice in HCI, 1:104–107. Workshop.
Elmqvist, N., Moere, A. V., Jetter, H. C., Cernea, D., Reit-
erer, H., and Jankun-Kelly, T. J. (2011). Fluid interaction
for information visualization. Information Visualization,
10(4):327–340. DOI: 10.1177/1473871611413180.
Endert, A. (2014). Semantic interaction for visual analyt-
ics: Toward coupling cognition and computation. IEEE
Computer Graphics and Applications, 34(4):8–15. DOI:
10.1109/MCG.2014.73.
Feinberg, M. (2017). A Design Perspective on Data.
Proceedings of the 2017 CHI Conference on Human
Factors in Computing Systems, pages 2952–2963. DOI:
10.1145/3025453.3025837.
Greenberg, S., Carpendale, S., Marquardt, N., and Buxton,
B. (2011). Sketching user experiences: The workbook.
Available at:https://www.sciencedirect.com/book/
9780123819598/sketching-user-experiences-
the-workbook.
Greenberg, S., Carpendale, S., Marquardt, N., and Buxton,
B. (2012). The Narrative Storyboard Telling a story about
use and context over time. Interactions, pages 64–49. DOI:
10.1145/2065327.2065340.
Hassenzahl, M. and Tractinsky, N. (2006). User experience
- A research agenda. Behaviour and Information Technol-
ogy, 25(2):91–97. DOI: 10.1080/01449290500330331.
Hayashi, E. C. S. and Baranauskas, M. C. C. (2013). Af-
fectibility in educational technologies: A socio-technical
perspective for design. Journal of Educational Tech-
nology Society, 16(1):57–68. Available at: https://
www.jstor.org/stable/jeductechsoci.16.1.57.
Hornung, H., Pereira, R., Baranauskas, M. C. C., and Liu,
K. (2015). Challenges for Human-Data Interaction –
A Semiotic Perspective. Springer, 9169:37–48. DOI:
10.1007/978-3-319-20901-2_4.
ISO (2018). Ergonomics of human-system interaction—
part 11: usability: definitions and concepts. International
Organization for Standardization., 9241(11). Available
at:https://www.iso.org/standard/63500.html.
Keim, D. A. (2002). Information visualization and
visual data mining. IEEE Transactions on Visu-
alization and Computer Graphics, 8(1):1–8. DOI:
10.1109/2945.981847.
Kuhn, S. and Muller, M. (1993). Participatory Design. Com-
munications of the ACM. DOI: 10.1145/153571.255960.
Lam, H., Bertini, E., Isenberg, P., Plaisant, C., and Carpen-
dale, S. (2012). Empirical studies in information visual-
ization: Seven scenarios. IEEE Transactions on Visual-
ization and Computer Graphics, 18(9):1520–1536. DOI:
10.1109/TVCG.2011.279.
Liu, K. (2008). Semiotics In Information Systems Engineer-
ing. Cambridge University Press. Book.
Mahjourian, R. (2008). An architectural style for data-driven
systems. Lecture Notes in Computer Science (including
subseries Lecture Notes in Artificial Intelligence and Lec-
ture Notes in Bioinformatics), 5030 LNCS:14–25. DOI:
10.1007/978-3-540-68073-42.
Martín-Rodilla, P., Panach, J. I., and Pastor, O. (2014). User
interface design guidelines for rich applications in the con-
text of cultural heritage data. Proceedings - International
Adopting Human-data Interaction Guidelines and Participatory Practices
for Supporting Inexperienced Designers in Information Visualization Applications Victorelli and Dos Reis, 2024
Conference on Research Challenges in Information Sci-
ence, 1:1–10. DOI: 10.1109/RCIS.2014.6861049.
Minge, M., Thüring, M., Wagner, I., and Kuhr, C. V. (2017).
The mecue questionnaire: a modular tool for measuring
user experience. In Advances in Ergonomics Modeling,
Usability & Special Populations, pages 115–128. DOI:
10.1007/978-3-319-41685-4_11.
Muller, M., George, T., John, B. E., Feinberg, M., Jackson,
S. J., Kery, M. B., and Passi, S. (2019). Human-centered
study of data science work practices. Conference on Hu-
man Factors in Computing Systems - Proceedings, pages
1–8. DOI: 10.1145/3290607.3299018.
Muller, M. J., Haslwanter, J. H., and Dayton, T. (1997). Par-
ticipatory Practices in the Software Lifecycle. In V., E.
S. B., editor, Handbook of Human-Computer Interaction,
volume 11, pages 256–296. Elsevier Science B.V, second
edition. DOI: 10.1016/B978-044481862-1.50077-7.
Muller, M. J., Matheson, L., Page, C., and Gallup, R. (1998).
Participatory heuristic evaluation. Interactions, 5(5):13–
18. DOI: 10.1145/285213.285219.
Nielsen, J. (1994a). Enhancing the explanatory power of us-
ability heuristics. Proceedings of the SIGCHI conference
on Human factors in computing systems, 1:152–158. DOI:
10.1145/191666.191729.
Nielsen, J. (1994b). Usability inspection methods. In Confer-
ence companion on Human factors in computing systems,
pages 413–414. ACM. DOI: 10.1145/259963.260531.
Norman, D. (2013). The design of everyday things: Re-
vised and expanded edition. Basic books, Philadelphia,
PA. Book.
Norman, D. A. and Draper, S. W. (1986). User centered sys-
tem design; new perspectives on human-computer interac-
tion. L. Erlbaum Associates Inc., 365 Broadway Hillsdale,
NJ. DOI: 10.2307/1422802.
Passi, S. and Jackson, S. J. (2018). Trust in Data Science.
Proceedings of the ACM on Human-Computer Interaction,
2(CSCW):1–28. DOI: 10.1145/3274405.
Preece, J., Rogers, Y., and Sharp, H. (2002). Interaction De-
sign - beyond human-computer interaction. John Wiley &
Sons. DOI: 10.1007/s10209-004-0102-1.
Seidelin, C., Dittrich, Y., and Grönvall, E. (2020). Co-
designing data experiments: Domain experts’ exploration
and experimentation with self-selected data sources. In
Proceedings of the 11th Nordic Conference on Human-
Computer Interaction: Shaping Experiences, Shaping So-
ciety, pages 1–11. DOI: 10.1145/3419249.3420152.
Shneiderman, B. (1996). The eyes have it: a task by data
type taxonomy for information visualizations. In Proceed-
ings 1996 IEEE Symposium on Visual Languages, pages
336–343, Boulder, CO, USA. IEEE. DOI: 10.1016/B978-
155860915-0/50046-9.
Simonsen, J. and Robertson, T. (2012). Routledge interna-
tional handbook of participatory design. In Routledge
International Handbook of Participatory Design, number
63070, pages 1–300. DOI: 10.4324/9780203108543.
Stamper, R. (1973). Information in business and admin-
istrative systems. John Wiley & Sons, Inc. Available
at:https://dl.acm.org/doi/abs/10.5555/1097035.
Stamper, R., Liu, K., Hafkamp, M., and Ades, Y. (2000). Un-
derstanding the roles of signs and norms in organizations-
a semiotic approach to information systems design. Be-
haviour & information technology, 19(1):15–27. DOI:
10.1080/014492900118768.
Stolterman, E. (1992). How system designers think about de-
sign and methods: some reflections based on an interview
study. Scandinavian Journal of Information Systems,
4(1):7. Available at:https://www.proquest.com/
openview/26c574fb8c4b29cc69a2d4adafa7cd24/
1?pq-origsite=gscholar&cbl=5340588.
Sun, G., Yao, S., and Carretero, J. A. (2014). Comparing
cognitive efficiency of experienced and inexperienced de-
signers in conceptual design processes. Journal of Cog-
nitive Engineering and Decision Making, 8(4):330–351.
DOI: 10.1177/1555343414540172.
VanGundy, A. B. (1984). Brain writing for new product ideas:
an alternative to brainstorming. Journal of Consumer Mar-
keting. DOI: 10.1108/eb008097.
Verstegen, D., Barnard, Y., and Pilot, A. (2008). Instruc-
tional design by novice designers: Two empirical stud-
ies. Journal of Interactive Learning Research, 19(2):351–
383. Available at:https://www.learntechlib.org/p/
22961/.
Vertelney, L. (1989). Using video to prototype user in-
terfaces. ACM SIGCHI Bulletin, 21(2):57–61. DOI:
10.1145/70609.70615.
Victorelli, E. Z., Dos Reis, J. C., Hornung, H., and Prado,
A. B. (2020a). Understanding human-data interaction: Lit-
erature review and recommendations for design. Interna-
tional Journal of Human-Computer Studies, 134:13 – 32.
DOI: 10.1016/j.ijhcs.2019.09.004.
Victorelli, E. Z., Dos Reis, J. C., Santos, A. A. S., and
Schiozer, D. J. (2020b). A Design Process Inte-
grating Human-Data Interaction Guidelines and Semio-
Participatory Design. In Lecture Notes in Business Infor-
mation Processing series, volume 378, chapter 1, pages
334–360. Springer, Springer. DOI: 10.1007/978-3-030-
40783-416.
Victorelli, E. Z., Dos Reis, J. C. d., Santos, A. A. S., and
Schiozer, D. J. (2019). Participatory evaluation of human-
data interaction design guidelines. In Lamas, D., Loizides,
F., Nacke, L., Petrie, H., Winckler, M., and Zaphiris, P.,
editors, Human-Computer Interaction – INTERACT 2019,
pages 475–494, Cham. Springer International Publishing.
DOI: 10.1007/978-3-030-29381-930.
Victorelli, E. Z. and Reis, J. C. D. (2020). Human-data in-
teraction design guidelines for visualization systems. In
Proceedings of the 19th Brazilian Symposium on Human
Factors in Computing Systems, IHC ’20, pages 1–10. DOI:
10.1145/3424953.3426511.
Wilke, G. and Portmann, E. (2016). Granular comput-
ing as a basis of human–data interaction: a cognitive
cities use case. Granular Computing, 1(3):181–197. DOI:
10.1007/s41066-016-0015-4.
Yi, J. S., Kang, Y., Stasko, J. T., and Jacko, J. A. (2007). To-
ward a Deeper Understanding of the Role of Interaction in
Information Visualization. IEEE Transactions on Visual-
ization and Computer Graphics, 13(6):1224–1231. DOI:
10.1109/TVCG.2007.70515.
