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
Hi Steve , in this same way can we hide dynamically the dimensions and expressions in a chart
in both QV desktop and in accesss point.
Especially in access point can we give a chance to the end user to select to his own dimensions and measures.
Kindly let me know if it possible.
Hi Kiran – both dimension and expression can be read from variables on a chart, so you can add buttons to allow users to visualise any measure over any dimension. The Attainment/Progress/Pupils button does this for the expression in our app. In the simplest implementation of this set two variables to defaults in the load script (e.g. let vDim = ‘Customer’; let vExp = ‘sum(Sales)’;) and then set the calculated dimension to $(vDim) and the expression to $(vExp). Then set up buttons to update the variables to the users values. You can also use list boxes on top of data islands for a more dynamic way of achieving this, by loading dimensions and expressions into fields in the data model.
The possibilities are many!
Really a good looking app
Thanks Jeroen!
Hi Steve,
Good looking dashboard. I do have two questions:
1. Why do some of the headline information text boxes have green backgrounds? That makes them just about the most prominent things on the dashboard. But the information displayed there does not really seem all that important. And I find the green background text boxes are harder to read as well.
2. Why a radar chart? That kind of chart takes up quite a bit of space, but I don’t see the advantage over using for example a bar chart for the kind of information displayed in this case.
regards,
Gysbert
Hi Gysbert, agree on the green for the information box, I also think it makes them look too much like buttons (which they are not). I knew that someone would pick up on the radar chart – as I have often stated that they should only be used for cyclical dimensions (such as hour of the day). However, compromises are sometimes necessary when building something for a client who has fixed ideas on what they want. Your comments will be passed on!
Hi Steve,
Nice article, always refreshing to discover new ways to present data on QlikView.
Do you find that your UI design is influenced by the audience, in other words the developers approach
to the UI to be delivered is very much determined by the audience e.g. a marketing department rather than trying to do a one design fits all (all Departments in a corporation) ?
Cheers
Paul
Hi Paul – thanks for your comments. Design is usually arrived at by a number of factors. Most of my implementations are on tight deadlines and budgets – so things that are quite generic and not fussy can be the order of the day. It’s nice to have a project like this one, where the app will be provided to many schools and the look and feel is key – it gives more scope to spend the time to get things just right. When marketing departments wade in and start being dictatorial about colours and fonts things often don’t go well – what works for a brochure web site doesn’t necessarily translate well to analytics.
As the article states though, don’t leave things to chance or leave design as an afterthought. Even when time is tight getting simple things right (like alignment and colour) is essential.
Very cool user interface!!
Thank you steve for your immediate response,I will sure try the suggestions.
Hi steve,
I have gone through one of your articles on Nprinting. Recently we are implementing a div integration
of Qlikview objects into a website of the client, I know that a sheet can be exported into various formats like excel,pdf, csv etc but is it possible in a web page where a Qlikview object is integrated and when we right click or some other on that object can we export the data of that chart into different formats.
Kindly suggest if there are any tools in view of div integration.
Thank You
Hi Kiran,
NPrinting is a great product, which is why we are a reseller of it. One of the things it can do is pull objects from QlikView and build a HTML page up around those objects that you can put up on a site. With a simple a tag around an image you can put a hyperlink to another file (perhaps also created in NPrinting) but it would take a bit more HTML coding to have a right menu selection for options about which other data you linked to.
Hope that helps…
Its Fine, I think we have a solution with Nprinting, can you provide a demo or url where such type of concepts are implemented using Nprinting.
Thank You
Hi Kiran – I’m not aware of anywhere that specifically describes the steps for this. It sounds like a good topic for a blog post or maybe even a video. Watch this space. In the mean time you will be able to get some pointers from the Vizubi help pages – you will need to create a number of reports tied to the same schedule to do this.
Hi Steve
That is an absolutely cracking application you have produced there – good work. Before moving across to the Data/QlikView industry in April I was one of many thousands of teachers spending hours entering data into SIMS only to drag it back out to Excel to perform analysis, and then compare the results of that analysis to data held on another system. This application would have saved myself and others countless hours each half-term. If only I had known about QlikView back then!
Luke
Hi Luke. Many thanks for your comment – it’s great to get that feedback from someone that both knows QlikView and the education sector. We’re really excited about getting this out to more schools to help them save the time that analysing using spreadsheets takes and making them able to concentrate on educating their pupils.
[…] Quickintelligence – User interface design in QlikView […]
Great work Steve! I really like your minimalist approach to UI design.
Steve,
I’m new to Qlikview. How and where do you input the code below:
if(GetActiveSheetId() = ‘Document\SHAttain’, $(vTabOn), $(vTabOff))
Is it under “edit module”?
This goes in the colour properties of the Text Box. Right click the text box, select Properties, then the General tab. Click on the block of colour that is the background (light blue by default) and change the colour type to Calculated. Paste the code into the Expression box that becomes active there. The variables will need to be set up in the Variable Overview.
Post back here if you need any further guidance.
very clean design, Steve, great job! I have a few questions:
– how much time it took to create the UI alone?
– how “show supporting data” link works?
– finally, I see many different fact measures – did you use linked tables or concatenated fact table to support them?
Hi Boris, Thanks for your comment, glad you like the UI.
I would not like to say how long the UI took to build, but it certainly took more time than on some other projects delivering as much data. As it is a dashboard that is being taken out and pitched as an OEM offering it had to be top notch. Simple things like alignment of buttons added a little to the effort, and overlapping object were sometimes a pain – but worth it. Generally though I am a big advocate of making your QlikView dashboard look like a QlikView dashboard, as going with the natural UI does make things simpler and quicker.
The Supporting Data link just fires the user off to another sheet with a number of straight tables showing row level information. There is a vertical scroll on this tab, as each table is shown one above another. It’s not likely to be used by many users (in fact I think the link has a show condition on it) but is useful during development.
I inherited the data model and it was very much based around a link table. This made some things a bit problematic. After taking the project on I concatenated more into the main fact table (as is generally my preference) but there is still a link table for some entities.
thanks for sharing your experience, Steve! good job again! I know it is not easy to build a dashboard like this in QV and this there it helps to be an expert like yourself! :)
[…] User Interface Design in QlikView […]
Hi Steve, Nice write up. I am into SAP. I want to get a better grasp of Qlikview. How long does it take for someone to learn this? And is there a prerequisite?
Hi Nair,
Being a ‘proper’ developer, in any language is a definite plus point – as you need to take care to get your semi-colons and brackets in all the right places. Getting started is relatively quick and simple, but really mastering the product takes time. Getting some kind of training in will certainly help speed up the process.
I have done a couple of previous blog posts that you may find interesting:
What Makes A QlikView Developer
How Do I Learn QlikView
Good luck picking up the product, it can do amazing things in the right hands.
Hi Steve,
This is a great dashboard. I’m really interested in how your slide out Ajax selection menu works. Could you explain how it was implemented?
Hi Andy,
Thanks for your comment. The menu does not slide out (that would require macros and not be pleasant to build), rather it simply appears over the top of other objects. To achieve this a number of objects are layered on top of each other with the show/hide condition set. This is relatively simply, but you do need to ensure you set explicit layer values on everything, so that objects appear in the right order.
Hope that helps.
HI….more than one qvw files can load attime, can possible are not?
Yes, it is possible. If you are reloading in QlikView Server you need to ensure that the Concurrent Reloads option is set to greater than one to allow this. You also need to be careful to ensure that you don’t have two QVW files reloading at the same time which read and write the same files.