Generated by Jive on 2014-11-27-08:001

Business Discovery Blog: Best Practices forQlikView iPad User Interface Design

Posted by Christopher Mabardy Apr 13, 2011

The user interface for touch screen mobile devices such as iPad is different from the UI forlaptop or desktop computers in two primary ways: screen real estate and user interactionmechanism (touch screen vs. keyboard and mouse). QlikView developers should take theseimportant differences into account when designing QlikView applications. Timed with therelease of our newest QlikView on Mobile functionality in QlikView 10 service release (SR) 2,we thought we'd share with you a few best practices for designing QlikView apps that userswill access via iPads. These practices come to you courtesy of Shima Nakazawa, QlikTech'sDirector of Demos and Best Practices.

Design for limited space

Because of the limited real estate on an iPad, plan out which objects to place on a sheetand eliminate unnecessary objects. Build to the native iPad resolution - even though an iPadscreen size is 1024 x 768 pixels, its native resolution is slightly smaller. The best resolutionyou can design QlikView application for is 980 x 590 with a tab row, and 980 x 610 withouta tab row. Use portrait mode when your app contains mainly a long list of records in a table,and landscape mode to display visual charts and graphs. When including many charts inone sheet, put the charts in a container object so users can interact with one larger-sizedobject at a time. Use list boxes for the most frequently-used fields and a search object forother fields. If multiple charts are sharing the same field, use consistent colors so one legendcan refer to multiple objects. Steer clear of too much text in charts and graphs; considerusing a data table in these cases.

Make sure the most important information is visible

Because of the limited space, but you may have a tendency to use small font sizes to openup space for more objects. Keep users' reading comfort in mind. Make everything visible andeasy to navigate. We recommend a minimum 11pt font size. Use Arial or other font facesthat are supported in iPad browser?not fonts that can be found only on desktop computers.Also remember that people will navigate through the user interface with their fingers, whichmeans that each touch point must be large enough to point at with a finger, not a mouse.

Focus on usability

On an iPad, there is no mouse pointer or right click. Be sure to implement only functionalitythat makes sense to use with the touch of a finger. Make sure all objects are easy to

Business Discovery Blog: Best Practices for QlikView iPad User Interface Design

Generated by Jive on 2014-11-27-08:002

navigate and interact with. For example, always include an object that displays currentselections (applied filters). To make it apparent how people should interact with appliedfilters, provide buttons for actions like "clear," "forward," and "back." Use search objectsinstead of multi-boxes. Don't require a "mouse-over" for charts and graphs, given that thisis not possible without a mouse. Lastly, use standard icons on your objects, such as a"clear" icon for simple navigation in a list box and a "menu" icon for the full list of options forinteracting with a field.

By taking these guidelines to heart, you'll be able to create QlikView on Mobile apps that areeasy to navigate and easy to interact with, and take advantage of both the screen real estateof mobile devices and the touch screen user interaction mechanism.

36485 Views Tags: design, ipad, browser, mobile, best_practices, html5

Nov 13, 2014 9:57 AM Ivan Gadzhonov Neil Gulliverin response to on page 2

Hi Neil,

Have you understood if there are any updates for the new generations of iPads?

Thanks

Jan 30, 2014 4:28 AM Neil Gulliver

Hi, Christopher.

A really useful blog.

Are there any updates you can provide on the latest generation of iPad or do the sameissues/rules apply ?

Thanks,

Neil

Business Discovery Blog: Best Practices for QlikView iPad User Interface Design

Generated by Jive on 2014-11-27-08:003

Jun 15, 2013 8:59 AM tallurisrikanth12

Is it possible the SWIPE in application ???????????

Nov 9, 2011 1:50 PM Christopher Mabardy in response to Amy Miller on page 3

Hi Amy - hover-over is a little tough on touch devices because there is no pointer to moveover an object without tapping - and tapping usually results in a selection. So we're lookinginto the best touch metaphor for this but it's not something in the current product. Onesuggestion would be to build charts and graphs that display values at all times, vs. requiringa hover-over. This could simply be a value at the top of the bars (in a small font) forexample.

Nov 9, 2011 11:30 AM in response to Shima Nakazawa on page 3

Regarding the guidance "Don't require a "mouse-over" for charts and graphs, given that thisis not possible without a mouse" --- is there some workaround for this when using the iPad/iTouch? The ability to hover over a data point and see the actual value is critical to someapps -- e.g., those with bar charts, graphs, etc, where we don't want to make a selection,but want to see the value for that particular point. How do we make this informationavailable on the iPad?

May 31, 2011 9:37 AM in response to Senjaya Harianto on page 4

Hi Senjaya,

I have not seen a behavior like that, but is it a blue solid color or gradient? Is thebackground color from document settings or sheet properties? Or is it a text object?

I have seen an application with a blue text object on a sheet, and it appeared fine on iPad.

Business Discovery Blog: Best Practices for QlikView iPad User Interface Design

Generated by Jive on 2014-11-27-08:004

If you think the behavior is suspicious, please send it to support@qliktech.com with a sampleapplication as well as your system information (Ctrl + Shift + Q).

Regards,

Shima

May 17, 2011 11:05 AM Senjaya Harianto

Hi Shima,

I got a quick question for you. I build the qvw with the blue background as default. butsomehow none appears on the ipad 2. Is there anything like that ever happen to you ?

Regards,

Senjaya