Flat UI

Flat UI has been the latest trend in interface design and many QlikView developers are adopting its principles in designing dashboards that are clean and easy to read.  If you are interested in jumping on the Flat bandwagon, but don’t know where to begin, download my Flat UI QVW below.  Based on inspiration from Arturo’s post here and the color schemes listed here, I have put together some sample interface components to get you started.  Take a look and let me know what you think.  For more information about Flat design and where it originates, check out this link.

Flat UI Capture

Updated Flat UI Download

 

User-Friendly Date Range Selection

When users want to search for a very specific date range, it can be time-consuming to use List Boxes to click and drag through a large date range. In addition, many novice QlikView users do not know that they can use advanced search strings to select a date range (i.e. ‘>=6/1/2010<=7/31/2010'). One way that I have found to simplify this process is by including a Calendar icon in my filters that allows users to input a From Date and a To Date and a button to 'Select' the date range.

To implement this functionality, I use variables to hide the date range selector when not in use, calendar objects to select the date ranges, and an action to select the date range in the date field. As a precaution against invalid selections, I also include an IF statement on the action and an error warning when the End Date falls before the Start Date.

Take a look at my attached example document to try it out. To use, click the Add Filter button in the upper right hand corner, then click the Calendar icon. Select a valid Start and End date and click the Select button. To return to the Filter, click the ‘Back’ arrow icon.

PageSnip

Date Range Select

Scatter Plot

This scatter plot is a simple take off one of my latest projects. The goal was to take a large number of scatter plot variations (x, y, and z axis combinations) and combine them into one interactive scatter plot in order to save real estate. By clicking on the graph icon in the upper right, the user can change the axes, turn the bubble size on or off, and adjust the plotted values. The plus-sign icon opens the available filters and displays the user’s current selections. Take a look, see what you think, and let me know how you would change/improve it!

Scatter Plot

Scatter Plot

Developing for the iPad

One of the most difficult aspects of QlikView design is anticipating the needs of the end user. A design can look great, but if the interface isn’t user-friendly, then it will be of no use to your clients. When designing for the iPad, I recommend using large scroll bars, easy-to-read font sizes, and large buttons. In addition, make sure your workspace either fits all into one screen or is formatted for easy scrolling. There is a great technical brief about designing for mobile devices at http://community.qlikview.com/docs/DOC-2191. Take a look at the iPad-friendly design I created and see what you think.

ipad

iPad

The Future of Web Design

This was an interesting article about some of the latest trends in web design.  Although on the surface this may seem like it has nothing to do with QlikView, I would argue that as designers, we should be up on the trends and ready to adapt as the industry changes.  Almost every trend listed mentioned scalability and the capacity to seamlessly transition between mobile devices, desktops, and tablets, all with varying screen sizes.  How have you varied your QlikView documents to address each potential device?  Have you designed separate documents for each device? Designed for the smallest possible denominator?

http://www.netmagazine.com/features/20-top-web-design-and-development-trends-2013

Matching your Company Website

This document started out as a challenge to see how close I could get my QlikView document to match a popular website.  I chose FRED because it provides a large amount of raw data that is free and open to the public to download.  I used text objects of images and played around with the snips to get the website look, and used actions to provide the click-functionality of a website.  Take a look at the FRED website and see how close it came:  http://research.stlouisfed.org/fred2/

FRED Example

Screenshot