As you will know, if you have ever used it, QlikView makes it very quick to pull in data and present it in an interactive way. The downside is that apps created in QlikView always have to look a certain way. Or do they? With a small amount of extra effort this does not have to be the case.
There are a number of UI defaults in QlikView that mean that you don’t have to worry about things, such as how to navigate between different sheets or where to put the caption on your chart. This is a great time saver, but it can mean that QlikView apps can end up not having the wow factor that the data being presented deserves.
Recently I have been working on a project for a company called Schools’ Intelligence (schoolsintelligence.co.uk – School Pupil Tracker), where the look and feel of the application was critical to the success of the project and ease of use had to be right to the fore. In order to ensure we ticked all the right boxes for the design we had to pull a few UI tricks out of the bag, and I would like to share these with you.
To see the finished app in action please see the video at the foot of this post.
Tabs, They Are Optional
Along the top of many QlikView apps are the familiar tabs, directing the user to the right place. Personally I like tabs, particularly now there is the drop down menu in the Full Browser version. Sometimes, however, a bit of extra flair can be added by integrating the navigation into the body of the app.
Suppressing the tabs is a simple matter of going into the Document Properties (under the Settings menu), selecting the General tab and ticking Hide Tabrow:
Turning off tabs doesn’t mean you don’t have to lose the ability to have sheets (though you can build everything on one sheet and use show and hide if you wish). Sheets can be created in the same way as when you have Tabs and can be navigated between by turning on the Sheets menu bar:
Alternatively, put the tabs back on for development and just remember to turn them off before publishing.
For our app we wanted a row of sheet navigation buttons in the app that changed colour to show where in the application you were, like this:
Each button is simply a text box with legends on. My blog post on buttons talks about how text boxes make the best buttons. Each text box has an action on it to activate the appropriate sheet:
Note how the Sheet has been renamed (on the General tab of the Sheet Properties) to make it easier to work with. The text boxes are created as linked objects across all sheets and the colouring of the buttons is done dynamically by looking at the sheet name. The code to set the colour dynamically reads like this:
if(GetActiveSheetId() = 'Document\SHAttain', $(vTabOn), $(vTabOff))
The colours for the buttons are in variables, and there is similar code for changing the text colour. This way positive feedback is given to the user that their button click has been acknowledged and there is always a reminder of where they are in the app.
One of the big UI advantages of having custom sheet navigation buttons in your app is that you can then re-use the same style and colour of buttons elsewhere, bringing consistency to the user interface. Here we have buttons for switching dimensions and turning on targets that look the same as the navigation buttons:
As with anything in user interface design, consistency is king.
Hide The Unnecessary
One of the key things with successful user interface design is to leave out as much as possible, so what is left is clean yet easy to understand. Functions that are necessarily more complex can be hidden until required.
The current selections box and the listboxes for making selections are hidden away until needed, with simple text objects showing the current state of things:
The forward, back and clear buttons are present right in the UI (these are things I tend to leave out as they are on the Ajax menu, but they were requested here) as are basic statistics around what selections you have on and the impact of that on the number of records that are in play.
The three items of text all have show / hide variables being set by them, and these are used to show the current selections box, a set of select criteria and a list of pupils respectively. Each item that can be shown by clicking on one of the links can be closed again by clicking on the same button, or on a close button tied to the screen that pops up:
This makes it easy for the user to find what they need when they need it, but also to put it back out of the way when they are done.
Another good way of hiding the unnecessary is to use silent legends. We use this on this display of pupil counts on the dashboard:
Dashboards require nice big easy to read numbers. As well as the total number of pupils in the current selection this also shows the gender split. Simple graphics and use of colours make it obvious which figures relate to which gender – without the need for a text legend.
Another way clutter can be removed is by making items transparent or utilising a base colour. In this example we are using the chart caption (another option is to turn this off) but making it the same colour as the chart background. By still having a caption, even one that is effectively hidden, we still have the placings for the fast change and XL buttons:
As with everything in this post, by not just accepting defaults things can be made to look nicer and perform better.
Handle Single Rows Differently
A trap that I often see people fall in to with their QlikView apps is not providing anything different when you are looking at a single row of data. A number of bar charts that only have one bar on them are really not conveying much information. Drill Down groups in QlikView are a native way of dealing with this – but I find they can be confusing to users and it doesn’t offer a truly custom way of viewing a single row.
In this application the single row of data we deal with differently is a single pupil record. When the selections are made that uniquely identify a pupil the Pupil tab changes to show a more detailed view. Firstly, we can show the pupil name prominently, as this screen could be used to sit with a parent and talk about performance:
We also use more of the object that I think is most under-used and under-appreciated in QlikView, the text box. Giving some of the headline information for this pupil:
The selected pupils performance in the latest term vs. the previous term are shown in a radar chart, and a trellis chart shows their performance over time in each of the subjects – the sorting on the trellis means that the Core subjects are shown first without scrolling. By using Set Analysis the grey line on the trellis plots the performance of the other pupils in the year – providing a comparison. There is also a table of data, again specific to this pupil. The overall look and feel of this sheet is like this:
The other subtle change when we move from many records to having a single record is our selections text changes to show the pupil name, even when we are on other tabs:
As I’ve mentioned in previous blog posts on QlikView Design: Everything Matters. If you want to create a really good app attention to the smallest detail is important. Make sure as well that you keep things simple, text boxes can often convey information better than other objects, as I cover in this post.
The Finished Result
Those were just some of the ways we went about producing a polished and pleasing to use application. The techniques applied, whilst they look really effective, don’t actually require that much extra effort. In fact, some of the design features end up saving development time – such as having consistent linked objects across all sheets.
The application has been produced by Schools’ Intelligence (with QlikView assistance from ourselves) to enable UK based Schools to be able to view and interpret the data they already have to collect in order to report back to Ofsted and other bodies. The Schools Intelligence system will allow schools to really get a view of how pupils are performing and what impact investments they are making in learning are having. From this more informed decisions can be made about the provision of learning, and that can only have a positive benefit on the children being taught.
If you would like to find out more about the Schools’ Intelligence offering you may like to see this video featuring the app we built with them or visit their web site at www.schoolsintelligence.co.uk