Up until now, our focus has been more on loading data into QlikView and building the data model than on actually visualizing the information. It's about time we started working on the frontend of our document and present the data in the form of a dashboard.
Besides presenting useful insights, a very important aspect of a business dashboard is that it should be visually appealing. Our users will be accessing the document every day, so we had better give them something nice to look at while they are drinking their morning coffee.
Our course of action for now will be to take advantage of QlikView's customization flexibility to style up our document, brand it with HighCloud's corporate identity, and set up the general layout on which we will ultimately place our charts.
In this chapter, we will cover the following topics:
- Setting up the workspace
- Understanding and changing the sheet's properties
- Managing our sheet object's appearance
- Using some of the most fundamental objects for selecting and filtering data
- Placing, resizing, and aligning the sheet objects
But before we start, a word of warning.
Tip
Just because you can, does not mean you should.
Design is obviously a very subjective thing. However, there are some general design principles that will ensure your QlikView document is easy on the eyes and also easily understood by the user.
The main principle is: minimize non-data pixels. This is a principle introduced for print by Edward R. Tufte and brought to the digital age by Stephen Few. This principle states that we should focus on showing the data, while minimizing or de-emphasizing those pixels that do not represent data. Examples of non-data pixels include borders, grid lines, drop shadows, 3D objects, and glossy reflections. For those interested in data visualization and dashboard design, we highly recommend Stephen Few's book Information Dashboard Design, (First Edition), O'Reilly Media, ISBN: 0596100162.
Of course, the main objective of this book is to teach you how to develop QlikView solutions. For that reason, we want to let you explore as many options as possible. Unfortunately, this also means that sometimes, while showing you the technical workings of a feature, we might also be showing you things that could be considered bad visual design. Ultimately, the decision to use certain visualizations or design principles lies with you; so keep a critical mind.
When we start building the frontend of a QlikView document, we should always begin by defining two fundamental characteristics:
- The screen resolution on which most users will access the document
- The general style and layout of the document
We need to set a standard screen resolution right from the start because it will ultimately determine the placement and size of the objects across the screen. If we build the document targeting a screen resolution higher than that which users have on their machines, they will probably need to use the scroll bars too often. On the other hand, if we target our document to a screen resolution lower than our users' screen resolution, they will see a lot of empty space. Both of these situations will be an inconvenience that our users will need to deal with every day, so we don't want that to happen.
Note
Having a predefined resolution in the document does not keep the user from accessing a document using a lower (or higher) resolution monitor. QlikView allows users to "zoom" a screen to a different size using the View | Fit Zoom to Window and View | Zoom options. However, using these options can lead to alignment and display issues. It is better to avoid them if possible.
For the HighCloud Airlines document, we will use a screen resolution of 1280 x 1024, since it's the one our primary users (top executives) have set on their monitors.
At the same time, it's been determined that we will divide the frontend layout into four main panels:
- The top panel will be used to place time-related user controls as well as the HighCloud logo
- The left-side panel will hold a majority of the listboxes used to filter the data
- The central area will be used to place the different charts and visualizations
- The right-side panel will have other special objects (that we will discuss later on)
The four main panels are shown in the following diagram:
The general style of the document should also reflect the HighCloud corporate identity. We will achieve this by:
|
Color name |
Color code (RGB) |
|---|---|
|
HighCloud Blue |
0, 112, 192 |
|
HighCloud Brown |
73, 68, 41 |