Technical Brief

User experience guidelines

Best practices for QlikView based on
human-computer interaction principles
2 | User Experience Guidelines
Table of Contents
Introduction 3
Human information processing 3
Perception 4
Emotion and design 4
Less is more 6
Reective level of perception 8
Visual design best practices 9
Visual tricks 13
Content format 15
Cognition 16
Consistency 19
Information organization 19
Mental models 20
Contextual effect 21
Progressive disclosure 22
Action 23
Universal design 26
Cultural considerations 27
Summary 28
References 29
Appendix 29
User Experience Guidelines | 3
Introduction
Usability Design or User Experience Design involves very careful consideration of human
psychological and behavioral aspects such as perception, cognition, and actions. Understanding
these human behaviors can enable a designer to know exactly what will suit the users
intentional and unintentional behavior. This understanding enables them to design interfaces
that are not only seamless but also guide the users in their tasks by minimizing or eliminating
cognitive loads and hurdles.
Though QlikView is a unique application in itself, a lot of parallels can be drawn between designing
for QlikView and designing for the web. When it comes to humans interacting with a piece of
software or any form of computer program or device, the same principles of Human Computer
Interaction Best Practices apply across the board.
This document discusses various topics of Human Computer Interaction (HCI) principles and
illustrates how we can apply these principles to QlikView application design.
First, let us briey look at the basic concept of how humans process information in order to act
or react to something.
Human information processing
The rst concept of Cognitive Psychology and Articial Intelligence in the eld of HCI was that
people think like machines
Input Processor Output
This model was used to study the mechanics of complex human behavior such as vision and
communication. Later, Claude Shannon from Bell Laboratories came up with the theory that
translated the initial mechanical concept into a more human behavioral pattern.
Perception Cognition Action
Perception - How we perceive something and its psychological impact
Cognition - How we learn and understand something and keep it in our mind as accumulated
knowledge
Action - How we act upon something we come across or react to something we experience
These three concepts are extremely important to understand the human mind and design
interfaces that follow the pattern of the human mind. In this document, we will look at these three
concepts of Perception, Cognition, and Action in terms of using these principles to analyze how
and why certain norms can be applied to designing QlikView applications.
4 | User Experience Guidelines
Perception
Perception is relative, meaning different people perceive the same thing differently.
To illustrate this point, the Nielsen Norman Group conducted a research study where some
participants were shown the picture below and then asked to replicate the picture by drawing it
without seeing it.
After the drawings were gathered, the conductors found that every drawing looked different even
though it was supposed to be a replica of the same photo. Some people showed the head of the
lamp post while others showed the entire view of the two ower baskets in spite of them being cut
off in the original photo.
For designers, this means that the assumption that their design is perceived by all users in the
same way that the designer intends to is incorrect.
So, when we design a QlikView application, it is always a good idea to get opinions from others
and conrm whether or not a user perceives your design the way you intended.
Perception: emotions and design
Emotions within our minds are generated by what we see and feel about something. And what
we see and feel about something is our perception about it. There are two ways in which people
perceive things: Top Down processing and Bottom Up processing.
In Top Down processing a persons background knowledge about the things based on past
experiences inuences what is perceived. It is theory-driven, knowledge-driven, and context-driven.
Bottom up processing is pre-attentive processing which can take less than 250 milliseconds to
register in our brains. Unique traits of the information perceived are visible instantly.
So, what do these concepts from cognitive psychology have to do with designing interfaces?
These concepts tell us how users will perceive information presented to them. The way a user
perceives and interacts with information is highly inuenced by his emotions. It is important for a
designer to know which strings to pull in the design and which not to in order to inuence emotions.
User Experience Guidelines | 5
According to usability guru Don Norman, attractive things and products trigger positive emotions
which make us more tolerant to minor difculties, and thus makes problem solving easier. For
example, Apples products are so attractive in their designs that most of the users tend to forgive
usability issues under the tremendous inuence of its attractiveness.
Bottom up perception is the rst impression of something. This is the rst level of perception
which has an immediate emotional impact. For example, when a user sees a great looking
design, he assumes that it will have a great experience factor due to its appearance. For
designers, this means that the appearance can in turn lower cognitive loads and frustration
levels for the user.
The My Life in Data app on the Qlik demo site is a great example of an attractive design which
sets a strong ground for a positive user experience.
Top down perception, on the other hand, is highly inuenced by prior knowledge or a personal
experience. It is the highest level of cognitive thought process and is capable of the highest level
of feelings, emotions, and cognition. If people have prior knowledge of the information presented
to them, they focus more on the details and notice things quicker than usual.
For example, when people see Apple launch a new version of the iPhone, they are compelled to
compare it with the old one and the critiquing factor becomes extremely high, as people already
have a prior knowledge of how the device should look and work. However, the rst iPhone created
a wow factor since it was a novelty at the time. People had no expectations nor prior knowledge
which is bottom up processing.
2014 Qlik
6 | User Experience Guidelines
The Pro Golf app is a good example of a top down level of perception since there is already an
existing golf app that people have seen and liked on our website. Also golf is a popular sport that
people relate to, therefore, they have preconceived notions and expectations of what the app
should look like and what it should do.
Everybody is not a trained designer, but some basic rules can be used by everyone to make a
design look nice.
Keep the layout clean and airy with lots of white space
Group similar items together
If you are unsure about using colors, it is a good practice to use soft colors
Processing information depends on the user, but creating emotions in the design depends on the
designer. There are many obvious ways to create emotions using colors, pictures, and shapes.
And, there are not-so-obvious elements like humor, recognition, dissonance, tone of voice, and
engagement. Combining some of these factors to create the right emotion with respect to the
audience is very important.
Perception: the less is more theory
We just saw how aesthetics play a signicant role in stimulating perceptive senses in humans.
The prettier the design, the more it triggers positive emotions in human beings. So, what about
content density? Does that have an impact to how someone perceives something?
According to a study conducted by Nielsen Norman Group, users were given two versions of the
same website to work with. One version had a lot of information displayed on a single page, while
the other version had information broken down into several pages, with only a little bit of content on
each page. The study found that the users preferred to work with the version that has a little bit of
content on each page and found with this version, they remembered things quickly and easily.
What this means for us is that the more information on a page, the more time a user takes to
decipher things. So, to elevate the aesthetic appeal and make the information consumption easier
and faster, it is recommended to keep the designs light and simple. The content can be broken
2014 Qlik
User Experience Guidelines | 7
down into sections on more than one when a lot of information needs to be presented. A content-
heavy and dense design can slow down the information processing speed.
Below is an example of an introduction page to a QlikView application. We redesigned this page
to be broken down into two pages which were lighter in design and quicker to understand.
2014 Qlik
Original sheet
2014 Qlik
Redesigned sheet
8 | User Experience Guidelines

Perception: reective level of perception
Reective level of perception is the feeling of what does this product say about me? This idea
seems trivial, but it is very important from the point of a users psychology and what shapes their
perception about something.
When designing a QlikView application for a customer, it is extremely important to concentrate on
showing data discovery. But in addition, showing a customer the application with their branding
skin on top, will impact the customer on a reective level, which can have a huge impact on the
customers perception about the application and the product.
Redesigned sheet
2014 Qlik
QlikView application for US Department of Defense branded per their
design style
2014 Qlik
User Experience Guidelines | 9
Perception: visual design best practices
When it comes to perception, the rst thing people notice is how something looks. Visual design
is what denes the look and feel of something. Below are some best practices to apply when
designing that help to make the visual design effective and awless.
Aiding to the color blind audience
About 4.5% of the worlds population is color-blind, including about 8% men and 0.5% women.
As color forms an important aspect of visual design, we must choose our colors wisely in order to
serve all user types including the color-blind audience. There are three types of color-blindness,
but the most common is the Red Green Color-blindness.
Red and green are two colors which appear as shades of yellow to color-blind people. When we
create dashboard, red, green, and yellow are the most common indicators that we use to convey
alert messages.
When using red and green together, choose a green which is closer to blue in hue, this way they
can be differentiated easily by the color-blind users.
2014 Qlik
10 | User Experience Guidelines
Using icons
The use of icons needs careful consideration and understanding since it has the ability to solve or
complicate a problem.
Icons that are universally known and accepted form a good visual cue for enhancing usability.
However, using icons which are not commonly seen or used add ambiguity.
Also, for the color-blind audience, icons are an important indicator because color is not always a
reliable source of information. Icons can be used in conjunction with color to delineate information
as shown below.
There are a number of free resources for icons online:
http://www.iconarchive.com/
http://openiconlibrary.sourceforge.net/
http://ndicons.com/
http://glyphicons.com/ Monochromatic
If the icons designed are not among those used universally, it is a
good idea to add text along with the icon to explain the context as
shown in the example on the left.
2014 Qlik
2014 Qlik
User Experience Guidelines | 11
Text color
It is highly recommended to keep a high contrast between the text and the background. A low
contrast between text and background can not only make the text non-legible, but can also
cause discomfort to the eyes. Using black text on a white background is preferred.
Overlays
Translucent background overlays can make it highly difcult to read the text over it.
In the QlikView world, we use background overlays to show the additional lters option under
the show/hide condition. Keeping background overlays opaque or with the least amount of
transparency, only if required, will increase legibility to 100%.
2014 Qlik
2014 Qlik
12 | User Experience Guidelines
Competing navigation
Placing a set of lters on the left and a set on the right is confusing to the user since the eyes
tend to continue to dart from left to right to make sense of what is going on, causing stress and
slowing down the information processing speed.
Providing lters, navigation or controls only in one area of the page is recommended like shown
in the example below.
Differentiating between buttons and icons
Using icons that look like buttons, as shown below in the example on the left, can cause
confusion and misguide the user. Bevels and shadows cause non-clickable UI elements to look
like buttons because this is how we traditionally have been showing buttons. Using icons without
bevels can help in dening them more clearly.
2014 Qlik
2014 Qlik
User Experience Guidelines | 13
Perception: visual tricks
There are some simple visual tricks that can be applied to make the design more visually
appealing and to guide the ow of information in the design.
Closure
Arranging information so that it appears to be enclosed in a box is a way to create a sense
of a closure and group similar information for the sake of visually guiding the user.
In the dashboard example below, the way the three sections of the dashboard are laid next
to each other, they appear to be in context of each other. The user naturally tends to make
a comparison between them, which is the intention of the design.
2014 Qlik
2014 Qlik
14 | User Experience Guidelines
Grouping and proximity
Grouping similar items together can make them look like they belong to the same section of a
page. Playing around with the proximity can create this visual effect. In the dashboard example
below, the top section of the page is grouped together to show high level KPI and low section is
grouped to show more details about trends.
2014 Qlik
User Experience Guidelines | 15
Perception: content formats
When it comes to presenting a lot of information at once in the form of tables or paragraphs, it is
very important to display the content in a format that can be easy to scan and read, and doesnt
lose the user in a sea of information.
Structured and narrative formats of information display
When we design dashboards, we know the KPIs that we need to display on the dashboard. Many
times, the format is obvious since KPIs need to be compared over time, but it is often difcult to
think of the perfect layout to display the information in the most effective manner.
There are two kinds of layouts that can be implied: the structured format and the narrative format.
Structured format - A structured format is effective when there are many different dimensions
to compare at the same time. In the next example of a dashboard, the same metrics have to be
compared over a series of time, so a structured format is used.
2014 Qlik
16 | User Experience Guidelines
Narrative format - In a narrative format, the intent is often to take the user from one point to
another in the form of a story. In the dashboard below, the highest level of information needs to be
shown at the top and then the following information is shown according to the level of detail.
Cognition
Cognition is a group of mental processes that includes attention, memory, and learning.
Decreasing cognitive load increases positive user experience. Let us have a look at these three
concepts and how they can affect the users psychology.
Attention
Your audience has a short attention span. When information gets larger in quantity and in length,
their attention span decreases. A content-heavy sheet forces the user to pay more attention to each
piece of information resulting in a lowered attention span. On the other hand, a light, concise, and
airy design can help the user understand how and what to pay attention to on the page.
2014 Qlik
2014 Qlik
User Experience Guidelines | 17
Overly promoted entry points are always ignored. For instance, in the introduction sheet shown
above, there are many images and visual distractions all over the page. This can divert attention of
the user from focal point of the design, causing the user to ignore important action elements like
the start button.
Memory
Memory is an important aspect of cognitive processing. In some cases, making the user
remember certain items in a dashboard or the current state of the KPIs as they ip through other
tabs is not efcient.
Recognition is easier than recall, so providing the users with little cues can ease the cognitive load.
For example, the application below is designed so that the KPIs are carried across all the sheets
in the form of a header bar. In this scenario, it was necessary to have the KPIs as a baseline for
comparison in the entire application. So, they were carried over across all sheets in the application
instead of requiring the users to memorize them from the dashboard or ip back and forth
between the sheets.
Adding a Current Selections box in every application is a helpful feature in QlikView. It enables
the user to have their exact drill down path in front of their eyes instead of forcing them to
remember it. So, in order to decreasing the cognitive load, it is highly recommended to have the
Current Selections box in all sheets in the QlikView application.
2014 Qlik
18 | User Experience Guidelines
Learning
Constant learning of an interface causes frustration and tremendous cognitive load. It lays the
groundwork for making a lot of mistakes and often results in a bad user experience.
Learning by doing is much more intuitive and immersive than learning by instruction. However,
people are more receptive to instructions when you provide them at the very point of need as
shown below.
Providing cues throughout the application can enhance learning. For example, providing text
inside the search box to inform the user of what to expect the search engine to nd for them
is a good practice.
2014 Qlik
User Experience Guidelines | 19
Cognition: consistency
Once a user understands the basic UI and style of an application, it is necessary to maintain
consistency with the style, layout, position of navigation, and controls. Do not compromise on
consistency while designing the UI of an application. Inconsistency in the design leads to a lot of
guess work and a poor user experience. A layout that keeps changing within every page in an
application forces the user to constantly relearn and adapt.
Cognition: information organization
Many times, we need to present a lot of information in a single QlikView application which can
result in the creation of a high number of document-level tabs. This means that in order to
make sense of information, a user needs to go back and forth between document level tabs.
This phenomenon is popularly known as pogo sticking. Also, in a QlikView application, a user
generally works a lot with lters and when the information changes on various tabs, it becomes
hard to keep track of the changes.
One solution to this problem is to break down information and organize it into sub tabs within
a sheet. This allows the changes in data and lter lists to appear in one view, even when the
information is ltered.
2014 Qlik
2014 Qlik
20 | User Experience Guidelines
Cognition: mental models
A mental model is a persons thought process and their belief of how something should be based
on their past experiences and knowledge. For example, for a Windows OS user, closing an
application is always done from the top right corner of the application window. This is their mental
model of closing an application.
Mental Model is a very important concept when it comes to designing user interfaces.
Understanding a users mental model can help tremendously with designing a UI that exactly suits
the users thinking.
When a users mental model is broken, it takes a little while for them to regure the correct
procedure and move forward. For example, if the same Windows OS user is given a Mac OS to
work with, they will look for the same interaction paradigm in a Mac but will not nd it, so their
mental model of closing an application will be disturbed.
Sometimes, there is a conict between a designers mental model and the users mental model.
When this occurs, there needs to be a smooth transition from the designers mental model to the
users mental model. This can be done by providing subtle cues in the design to make the learning
process easy. The other way to create a seamless interaction is to use the existing interaction
paradigms that users are familiar with instead of creating new ones.
Though we design for an entirely different platform at Qlik, all of our users also use the internet
and navigate through various websites. Taking advantage of their existing mental model of how
websites works can help in designing QlikView applications by using the same tried and tested UI
methodologies.
For example, it is a good idea to place the lters panel to the left side of the sheet in a QlikView
application because the navigation in most websites is always on the left. This is a widely-known
and accepted paradigm.
Also, taking advantage of other UI paradigms such as using similar toggle buttons that people see
on the internet can help people learn the usability of an application quickly on the basis of familiarity.
2014 Qlik
User Experience Guidelines | 21
Cognition: contextual effects
When something is put into context, it becomes more meaningful and the cognition process
becomes faster and more convincing.
Using images, titles, and descriptions which are suggestive of the content that you want to
present and not ambiguous can set the groundwork for introducing the topic. This makes the
learning process easier. Images that have vague or loose associations can confuse the audience.
In the context of QlikView, we tend to use images, titles, and descriptions in the Introduction sheets.
Using the right images to introduce the topic is very important, as shown in the example below.
2014 Qlik
22 | User Experience Guidelines
Cognition: progressive disclosure
Showing supplemental information and options at the point of need is called progressive disclosure.
The human brain can only process a certain amount of information at a given point in time so, as
designers, we should consider this human limitation when designing interaction patterns for the user.
Showing information to the user progressively, at the point of need, can help simplify the cognition
process and help speed up the consumption of information.
When developing a QlikView application, we often come across the need to have a lot of lters and
list boxes. But many times it is not necessary to show all the lters at once. In this case, the list
boxes can be prioritized such that only the most important list boxes are shown on the sheet, while
others are hidden and accessed only at the point of need as shown below.
2014 Qlik
2014 Qlik
User Experience Guidelines | 23
Action
For a user to interact with a website or a QlikView application, there are actionable elements such
as buttons, lters, etc. that are designed for the user to perform actions. Designing action items
such that the user only does what they are supposed to do to complete the action seems like an
easy task, but can create a complicated path for the user if it is not designed well.
Below are some recommendations with respect to button and controls.
Text buttons, specically those with text smaller than a 12 point font, is harder to target with a
mouse cursor than a button with a solid background.
The solid background around the button gives the user more real estate to click. In contrast, with
a text button, the user struggles to nd the target area to click and sometimes has to make two to
three attempts in order to complete the action.
A different way of optimizing the text only button is by expanding the target area around the
button as shown below. This way, the user can click anywhere close to the text and still accomplish
the desired action.
Alphabetically-sorted lists
Alphabetically-sorted lists are more user-friendly and make it easier to nd information than
categorically-sorted lists.
An alphabetically-sorted list works better in a vertical format, not in a horizontal format. In a QlikView
app, sometimes the list boxes are broader and we tend to arrange the text in a horizontal alphabetical
order which becomes difcult to scan.
2014 Qlik
24 | User Experience Guidelines
However, a horizontal order works well for arranging time lters in a QlikView app like shown below.
Escape paths
It is always a good idea to clearly provide an escape route to the users when it comes to model
windows or overlays. For example, the obvious and legible close button that is provided on the
more lters overlay panel shows users how to close the box.
Use of color for action items
Use of colors for action items or elements that need to alert the user is a very important and
common concept when designing QlikView apps. We design dashboard to give an overview of
the situation and the health of a particular business, and often use a lot of bright colors, especially
red, to notify the user about something that needs their attention.
Below is a chart which shows how the varying difference in the saturation of a color affects the
stress level in human beings.
2014 Qlik
2014 Qlik
User Experience Guidelines | 25
According to the chart above, more saturated colors cause higher stress than less saturated
colors. Using less saturated colors is recommended for elements like backgrounds and non-data
elements. Using more saturated, strong, and bright colors for action items like buttons, icons, and
KPIs can be a good indicator to highlight important information like shown in the dashboard below.
In the example above, bright and saturated colors are used for data elements such as the bar
chart, line chart, and icons, helping the user to quickly identify the important elements in the
dashboard.
In the example below, a contrasting color is used for the Get Started button to emphasize the
call to action which needs to catch the users attention immediately.
2014 Qlik
2014 Qlik
26 | User Experience Guidelines
Universal design
Designing systems that can be used by anyone in any circumstance should be the nal goal of
any designer. When usability turns into accessibility, the design is said to be universal.
Some people suffer from permanent physical or mental disabilities like color-blindness, while the
rest of us often experience temporary disabilities from time to time such as nding it difcult to
locate a fact in a complex data set while delivering a presentation.
It is important for every design to acknowledge all kinds of disabilities at all times. This is when
any task becomes natural and seamless.
Below are few simple tips to consider while designing for all types of audience:
1. Always check that the colors used are color-blind safe - http://colororacle.org/ is a good
tool for evaluation.
2. Do not use a font size that is less than 10 points.
3. Always use titles and sub-titles to break down information.
4. If the application is to be used in multiple languages, design the layout considering that
some languages contain longer words.
5. Respect white space. This can help users to scan through information quickly and also
contributes to a cleaner design.
6. Re-check the voice of your sentences, as writing in the second person can be confusing.
7. Provide alternating text for non-text elements such as icons.
8. Give hyperlinks unique, descriptive names.
2014 Qlik
User Experience Guidelines | 27
Cultural considerations
Though we live in a global society and work with people from all parts of the world, we cannot
deny the fact that there are wide cultural differences between us, especially between eastern
and western societies. Cultural differences are also seen in design language, peoples taste, and
sense of design.
It is seen that the eastern societies have different design style than the western societies. For
example, the eastern countries are used to busy, content-heavy, colorful designs. While in the
western cultures, the design style is usually light and airy, using soft colors.
If you know your audience, designing according to their sense of taste is a good idea but if the
audience is either not known or global, a right balance in the design style is the best option.
Cultures are not only based on countries and regions but are also associated to a corporate
organization. When designing for a specic company, it is a good idea to have a look at their
company website, corporate portal, and other material to get a sense of their design culture and
deliver your design accordingly.
Below is an example of a dashboard designed for a specic company which incorporates their
design language and branding style.
2014 Qlik
28 | User Experience Guidelines
Summary
There is always a lot to consider while designing any application, be it web or QlikView, but the
usability guidelines remain the same even when audience and constraints differ. Even though all
of us are not trained usability experts, it helps to think as if you were a user of your own creation.
Always test out your design in a real environment, and then take an iterative approach towards
your design process.
User Experience Guidelines | 29
References
Nielsen Norman Usability training presentation on the topics of Human Computer Interaction and
Human Mind and Usability which was held in Dallas, US in April, 2013.
Appendix
A brief history about the eld of Human Computer Interaction
1946 During the early days of invention, computers used to be the size of a whole room,
and the only purpose was to achieve good computing power. Humans had to be trained to use
complex interfaces and only expert users were able and expected to operate them.
Until the late 1970s, the only people who interacted with computers were technology
professionals and hobbyists.
1973 Xerox PARCs Alto was the rst Mouse, graphical User Interface, Ethernet, email, and
word processor prototype.
1980 In late 1970s and early 1980s, the personal computers emerged and gave rise to novice
and non-expert users using the computers. This highlighted the deciencies in the interface of the
early computers with respect to usability due to which scientists realized the need to take human
limitations and capabilities into account when designing computer interfaces. So the computer
interface needed to be changed to suit human needs instead of the other way around. This gave
rise to the eld of Human Computer Interaction which was a bifurcation from the eld of computer
science. This new eld incorporated the study of cognitive psychology, articial intelligence,
linguistics, cognitive anthropology, sociology and the philosophies of the human mind.
2014 QlikTech International AB. All rights reserved. Qlik

, QlikView

, QlikTech

, and the QlikTech logos are trademarks of QlikTech International AB which have been registered in
multiple countries. Other marks and logos mentioned herein are trademarks or registered trademarks of their respective owners.
qlik.com