MOBILE USABILITY

RECOMMENDATIONS

QlikView Technical Brief

August 2013
Introduction
This document is intended to give advice, guidance, and best practices regarding a variety of
design considerations to create the best user experience on mobile devices. The suggested best
practices in this paper are based on experience as well as usability research.

Summary
The basic findings and recommendations in this document are that:
• The conversation around mobile devices is less about Consumption vs. Creation and
more about Task Complexity vs. Task Duration.
• Properly sized designs for the desktop experience will also work for the tablet experience.
• Smartphones want customized experiences.
• Progressive disclosure is more important than ever on smartphones.
• How people interact with touch-based devices influences success rate of applications.
• Leave room to enable scrolling.

The Mobile Market

While the share of the mobile market depends on what study you read, a 2012 study by Chitika
said US mobile devices accounted for about 20% of all US internet traffic. Of that 20%
smartphones were 14.6% while tablets were 5.6%. Of the roughly 5.6% tablet market Apple
takes around 82%. Even more recently a Pew study from January 2013 said as many as 31% of
American adults own tablets.

In addition, around 44% of Americans use smartphones while Great Britain it's even higher at
51%. A comScore survey found that Apple iphones made up 39.2% of the 138.5 million
Americans who owned a smartphone. Samsung is number 2 with 22%. Also Google controlled
52% of the mobile operating system market, Apple was at number two with 39.2% and
BlackBerry was third with 5.1%.

The take away from this, whichever set of numbers you focus on, is that designing digital content
to be consumed on a mobile device is becoming more important. Also, for the time being,
Apple's devices are the dominant players in this field.

QlikView Technical Brief | 2

 As such, most of this paper’s technical recommendations will be based on designing for ipads
and iphones.

Consumption vs. Creation, or

Task Complexity vs. Task Duration
The traditional position of tablets, and especially smartphones, has been that they are devices
for content consumption while desktop computers are tools for content creation. The general
idea behind this is true however, as Fraser Speirs has written about on his blog, mobile devices
are becoming increasingly more powerful & sophisticated so many of the tasks you do on your
desktop computer can also be done on mobile devices. Therefore the difference between mobile
and desktop devices should move away from Consumption vs. Creation to be reframed as Task
Complexity vs. Task Duration.

Essentially, the more difficult a task becomes and the longer you plan on spending on a device,
the more likely you will use a desktop computer vs. a tablet vs. a smartphone. A quick and easy
response to an email is an easy task for a smartphone. A long and complicated activity like doing
your taxes is something best suite for a desktop computer. Some people make the argument that
anything you do on a desktop computer you could do on a mobile device, but the likelihood of
this is slim as some software requires the precision of a mouse and users tire of typing away on
a flat piece of glass with no tactile response.

Dimensions
The ipad

So the nice thing about designing for the ipad is that, if you are already designing for the industry
standard baseline size of 1024 x 768px, then you are most of the way there. The latest two
generations of ipads (ipads 3 & 4) have resolutions of 2048 x 1536px and a pixel per inch (ppi)
resolution of 264ppi (which Apple calls "retina" display"). Both of these measurements are just the
measurements of the previous ipad doubled. Also, a display that would mimic the human eye and
be a true "retina" display would have to be at least 477ppi. The term "retina" display is just an
Apple marketing gimmick. Since 2048 x 1536px is 1024 x 768px doubled you can design for 1024
x 768px and the iPad's operating system will take the content and scale it up to fit based on the
device's orientation. So when the ipad is in landscape orientation, it will take your 1024px wide
design and have it fit nicely while the page may scroll vertically.

QlikView Technical Brief | 3

There are 596px of available vertical space on an ipad in landscape orientation before scrolling.

An additional consideration is how much screen space is available before scrolling - above the
fold as it were. There are two sets of controls that take up space at the top of the ipad. First is the
Safari browser chrome and the second is the QlikView chrome. As of May 2013 the available
space in landscape orientation is 596px. In portrait orientation it is 792px. This means that in
landscape you have 596px of space to design for before people have to scroll the page to see
additional content. As has been discussed and documented for years, scrolling content is
perfectly acceptable and is widely understood but it is still valuable to know what content people
will see when a page loads before scrolling.

The iphone

There are currently two popular iphone sizes to design for. The newest iphone is the iphone 5
which has a resolution of 640 x 1136px at 326ppi. The iphone 4's have shorter resolutions of 640
x 960px also at 326ppi. What size to design at in QlikView is harder to answer.

Similar to the ipad, the iphone will also scale content to fit the orientation of the device.
Currently however there is a sizing problem between QlikView and iphones.

QlikView Technical Brief | 4

Above is an application created as a test. The application is the same but the version on the right
has the tab row turned off and the QlikView browser chrome has been removed using an
extension. The dark blue box at the top of the application is an image which is 640px wide which
should run the full width of the phone but doesn’t. This application has effectively been zoomed-
out for some unexplained reason. The current best practice is to design applications 970px wide
or wider to avoid this resizing problem

Design Considerations
The ipad

Other than designing for the appropriate resolution, usability studies have shown that users are
fine consuming full site designs on tablets. Full sites being websites designed for desktop
computers and traditional web browsers as opposed to “mobile sites” which are designed for
smaller devices such as smartphones. The same is true of QlikView applications. A well-designed
application intended for desktop computers should be fine on tablets.

QlikView Technical Brief | 5

The iphone
Smartphones on the other hand are not as simple. Usability studies have shown that mobile sites
and mobile apps have a higher success rate (64%) than full sites (58%) on smartphones. In
many cases users prefer experiences that are designed specifically for smaller devices when on
a smaller device. The reason is because mobile site design considers the limitations (and a few
advantages) of smartphones. Limitations such as memory, screen size, speed etc. Smartphone
experiences should be fast, light, and streamlined. Load time is incredibly important.
Smartphones are more limited in terms of their processing power so everything takes longer to
load. You should reduce the amount of content (text and images) you are using.

Also, users prefer a single column design in mobile sites as opposed to traditional site design
where you have more horizontal space. Single column design lends itself better to scrolling up
and down in a smaller window.
The Nielsen Norman group's general recommendation for designing content for smartphones is
to:
- Cut features to eliminate things that are not core to the mobile use case;
- Cut content to reduce word count and defer secondary information to secondary pages
(essentially Progressive Disclosure)

To make this happen in QlikView, you have to design common objects very large. Seemingly
small things such as text objects, list boxes, charts, etc. have to be blown up to be larger in order
to scale correctly for smartphones.

QlikView Technical Brief | 6

Insurance application in QlikView designed for desktop/tablet usage.

Insurance application in QlikView designed for smartphone usage.

This is an Insurance application created by the Demos & Best Practices team. It has both
desktop and smartphone versions. The top image is the design for the full app while the bottom
image is what you have to do to create a smartphone experience. Everything has to be designed
larger to fill the 970px of width correctly on an iphone. For example the title “Insurance
Dashboard” is set at 55pt where the standard desktop version it was only 20pt.
Some of this is trial and error to get the sizing correct but you also have to decide what stays and
what goes. If you have 30 objects on a page in the full-site you might not want all 30 on the
mobile version.

QlikView Technical Brief | 7

Progressive Disclosure
Part of designing for smartphones is to use progressive disclosure, which is the placement of
lesser used features and options to secondary pages or menus. This helps new users learn the
interface while still offering these options to seasoned expert users who know where to find them.
In the case of smartphones this is especially useful because in reducing the amount of content
on one page you reduce load time and clutter. Smartphones have a very small screen to display
content at a legible size so you need to maximize the efficiency of what content you display and
when. Perhaps instead of a column of list box filters you have a button or link that says "Filters"
and it opens a layer with list boxes.

In the top image we see there is a link on the right side for “Filters & Current Selections.” Upon
selecting that a layer shows up at a higher Z level with additional options and filters that users

QlikView Technical Brief | 8

can make selection in and then close the layer. This helps free up space. Perhaps these were list
boxes that ran down the left rail that don’t need to be selected very often. It’s up to you, but it’s
one way to keep options available while freeing up the main space to tell the main story. It’s
about prioritizing content. Not everything is equally important.

Interaction model
In general remember that interacting with mobile devices is almost always done with a finger
which is larger than a mouse cursor. As far as touch-first sizing guidelines, you should be
generous with your hit areas on buttons, links, and try larger text sizes. Any element designed to
be interacted with by touch will also work for a mouse. The reverse is not necessarily true.

Touch target sizes should be around 23 x 23px in size or larger. Also, leave an additional 6
pixels of space or more around objects to avoid users selecting the wrong object by mistake.
Touchable is not the same as touch-enabled. Giving users a larger hit area makes your
application touch-enabled.

Also, most people are right handed. This isn't really an issue on tablets, but for smartphones this
can make a bigger difference. When people are using their phone with just their right hand,
scrolling and selecting with their thumb, this makes certain parts of the phone easier or harder to
reach. You can design for this by placing more severe concepts like Clear All in a hard to reach
spot to avoid being selected accidentally.

Scrolling
An additional consideration is to leave some negative space, some white space, in your design
for scrolling. When a page scrolls on a touch based device the design should have a built in area
where users can scroll the page with their finger. You can't scroll a page when you are touching
the part of the page that has a QlikView object on it because your touch engages the object
rather than scrolling the page. Consider leaving 10px or so down the right side as a track where
users can interact with the page to scroll if need be.

QlikView Technical Brief | 9

Conclusion
In the infancy of the web, people would tolerate usability problems, but eventually people grew
tired of web design novelties and today a website that meets certain UX standards is a must for
any company to be taken seriously. The same is becoming true for mobile sites and apps. A few
years ago people would tolerate less than stellar UX but now people expect high-quality well
thought out mobile presentations of content.

Hopefully these recommendations can help you get closer to that goal.

© 2013 QlikTech International AB. All rights reserved. QlikTech, QlikView, Qlik, Q, Simplifying Analysis for Everyone, Power of Simplicity, New Rules, The Uncontrollable Smile and other QlikTech
products and services as well as their respective logos are trademarks or registered trademarks of QlikTech International AB. All other company names, products and services used herein are
trademarks or registered trademarks of their respective owners. The information published herein is subject to change without notice. This publication is for informational purposes only, without
representation or warranty of any kind, and QlikTech shall not be liable for errors or omissions with respect to this publication. The only warranties for QlikTech products and services are those that
are set forth in the express warranty statements accompanying such products and services, if any. Nothing herein should be construed as constituting any additional warranty.

QlikView Technical Brief | 10