The idea that an information dashboard should fit on a single screen is often a design challenge. In QlikView, it is common practice to place the filters to the left and at the top of the screen, where they may take up twenty percent or more of the available screen. Although QlikView list boxes are themselves informative objects that tell us what data is both related and unrelated to the current selection, they aren't always the most important objects on the screen.
This is especially the case with information dashboards, whose principal goal is to provide information that can be monitored at a glance and not necessarily dynamic analysis. However, it would also be a shame to use QlikView to create a fixed information dashboard, so let's allow the user to make data selections in an information dashboard in a way that doesn't take up so much space.
Before beginning the exercise, let's import this chapter's exercise files into the QDF as we did in Chapter 2, Sales Perspective. To create a filter pane bubble, let's do the following steps in 1.ApplicationBalancedScorecard_Sandbox.qvw:
- First, let's add the following text object to the top, right-hand side corner of the screen. In this case, we've used explicit enclosure to make it stand out more than just simple text:
- Next, let's place list boxes for the
[Sales Person],[Customer Group ENG], and[Item Group ENG]fields in a single object container. - Then, let's place the container that we created in a previous step, a current selections object, and a search object in the grid container object. The container should look like the following figure after we align it with the Other Selections text object and assign it to the Top layer in the Layout tab:
- Create a variable called
vToggleFilterPaneand define the grid container's Conditional Show expression as=vToggleFilterPane. - Create a Set Variable action in the Other Selections text object with
vToggleFilterPaneas the Variable and the following code as the Value:=if(
vToggleFilterPane= 1, 0, 1) - Finally, let's use the following code to define the background color of the Other Selections text object. We only change the color to green if we make a selection in a field that is neither Year nor Month, as their selected values are evident in their respective list boxes:
if( len( purgechar( replace( replace( GetCurrentSelections('|') , 'Year: '&GetFieldSelections(Year),'' ) , 'Month: '&GetFieldSelections(Month),'' ) ,'|' ) ) ,LightGreen(),RGB(232,232,232))
We intentionally use QlikView's native selection color for the background of the Other Selections text object. As they review the information dashboard, this helps remind the user of their selection, just like any list box. They can then quickly click Other Selections to edit or remove their selection. If they remove their selection, then Other Selections turns gray. It would also be reasonable for this to turn white. Although, we've reused QlikView's native color scheme, we may need to create a quick tutorial to help the user understand the application's unique interface.
There are a series of features that users expect to be the same in every application, such as the selection color scheme, bookmarks, cyclical dimensions, fast-type changes, and the ability to export to Excel. However, besides these powerful, generic features, every QlikView application is singular; each has its own data, data model, charts, filters, buttons, and actions. Therefore, if we expect users to get the most out of our applications, then it is often necessary to walk them through the application.
If the application serves one or two users, then the most effective way to show them the application is to give them a short personal tour. However, if we are dealing with an application that has more than a hundred users or has users that are prone to change, then we may want to create more efficient training material. Along with recorded videos lessons, we should also think about something more interactive that forces the user to start playing with the application.
Let's embed a tutorial into our information dashboard and create its first steps in the following exercise:
- Create variables called
vToggleTutorialandvTutorialStepNumber. - Add a text object that uses the following information icon and place it in the upper, right-hand side corner:
C:QlikSourceData1201.Balanced_Scorecard9.Misc3.ImagesInfo_Icon.png
- Create a Set Variable action in the information icon's text object with
vToggleTutorialas the Variable and the following code as the Value:=if(
vToggleTutorial= 1, 0, 1) - Create another Set Variable action in the information icon with
vTutorialStepNumberas the Variable and with1as the Value. - Let's add Step 1 and create a text object as it appears in the next figure with this background image and assign it to the Top layer in the Layout tab, as follows:
C:QlikSourceData1201.Balanced_Scorecard9.Misc3.Images Bubble_Without_Arrow.png
- Define the text object's Conditional Show expression as the following code:
=vToggleTutorial and vTutorialStepNumber=1
- In the text object, create a Set Variable action with
vTutorialStepNumberas the Variable and2as the Value. - Let's add Step 2 and create a text object as it appears in the next figure with this background image and assign it to the Top layer in the Layout tab, as follows:
C:QlikSourceData1201.Balanced_Scorecard9.Misc3.Images Bubble_UpperCenter_Arrow.png
- Define the text object's Conditional Show expression as the following code:
=vToggleTutorial and vTutorialStepNumber=2
- In the text object, create a Set Variable action with
vTutorialStepNumberas the Variable and the following code as the Value:=if(only(Year)=2015 and only(Month) = 9, 3, 2)
- Let's add Step 3 and create a text object as it appears in the next figure with this background image and assign it to the Top layer in the Layout tab, as follows:
C:QlikSourceData1201.Balanced_Scorecard9.Misc3.Images Bubble_UpperLeft_Arrow.png
- Define the text object's Conditional Show expression as the following code:
=vToggleTutorial and vTutorialStepNumber=3
- In the text object, create a Set Variable action with
vTutorialStepNumberas the Variable and the following code as the Value:=if(
vToggleFilterPane, 4, 3)
We stop the exercise at this point as we create all other steps in the same following way:
- Describe to the user what they are seeing from their perspective
- Give the user an action to perform before going on to the next step
The next steps in the interactive tutorial will help the user make a selection in the filter pane and understand that not all the measurements can be filtered by customer or item. It will then describe the measurements and any additional functionality that they may have, such as the detailed pop-ups that we saw in the customer fact sheet, or a link to another sheet or document.
We use the Set Variable action in each text object to validate the user's actions and proceed to the next step. We can easily validate user selections and the values in variables, which is what we use to create most custom QlikView UX. We can even validate some native functionality, such as changing a cyclical dimension, with the GetCurrentField() function or changing sheets with the GetActiveSheetID() function. However, other native functionality, such as exporting to Excel or creating a bookmark cannot be validated through chart functions, so we can only describe their functionality in the tutorial.
In all the other cases, the best practice is to create an interactive tutorial that offers users the chance to learn and remind themselves over and over again through active participation. Just like when somebody shows us how to get somewhere by car and we tend to learn more when we are the driver and not the passenger, we put the user in the driver's seat as we show them how to explore data.