Qlik Community

Qlik Design Blog

All about product and Qlik solutions: scripting, data modeling, visual design, extensions, best practices, etc.

Not applicable

I've been a designer for about 10 years, 8 of which I've been designing web sites. The fancy buzz-word way of saying you work on websites is to say that you work in "User Experience Design." The user experience is how someone (a user) might interact with something (a website, an ATM, or in this case QlikView). You consider what troubles a user might encounter, what might be helpful, how they will accomplish certain tasks, etc. From Amazon to Zappos, User Experience Design is the (not so) secret ingredient that separates the bad experiences from great experiences with loyal customers.

So what makes User Experience Design work? One of the keys is to be empathetic, to put yourself in the shoes of the user and design for them and not yourself. You design for and with others, that is you don't do it alone. Designers are just one group of people who take a website from conception to completion. Information Architects, Writers, Designers, Developers, and Usability Engineers all contribute to the process. People with specialized disciplines doing what they do best to make great experiences. If you aren't lucky enough to have a team of bright UX professionals, it probably means you will have to become a "jack of all trades" and take on all of these roles yourself.

Never fear. As a guide I've written the attached Technical Paper that walks you through how you can apply the iterative UX waterfall design process to developing QlikView applications. There is a lot of overlap between designing a website and designing a QlikView application because at the heart of both is the user experience. Designing for what is best for the user is key no matter what the final product.

Next Steps? Start small. I would recommend trying these ideas on a smaller, easier project first and then apply what works for you to larger projects over time.

15 Comments
Or
Valued Contributor II

Thanks, Michael - this looks like a handy mechanism for designing dashboards. I'm not too sure about how useful it would be for a full application, though - the most difficult part of designing a good QVW is getting the selections (list box / multi box / etc) right. It is almost impossible to achieve both consistency and usability when the same QVW contains dashboards, summaries, lower-level summaries, and details - there's simply too many different selections that need to be made when this is the case.

A couple of points where QV design is drastically different from web design:

1) Generally speaking, web design caters to one type of user, or a small set of user types. QV applications often need to cater to large, heterogeneous groups, making the design more difficult.

2) In most cases, web pages are designed to be self-contained insofar as functionality and ease of use - i.e. the underlying assumption is that a new user must be able to figure out everything on their own, easily and immediately. With QV applications, we are generally able to train users, which means more leeway when it comes to design. While it is best to keep things simple where possible, QV applications often need to feature things a little more complex than "Search" or "Add to cart".

One other point of design - what's your policy on page design vs. monitor resolution? I find myself constantly explaining to desktop users that I can't extend objects onto that blank space they see to the right/bottom of their screen, since laptop users generally do not have that extra space on their monitors. QlikView does not feature proper resolution scaling / autozoom (at least, last I checked), which means I am still designing for 1200x768 monitors when many of my users have full HD monitors.

0 Likes
980 Views
Not applicable

Hi

A few thoughts on the universal nature of well thought out UX design.

When I speak of consistency I don't necessarily mean having the same objects repeated on every page so much as how objects are presented on every page. Objects should look cohesive, but if a list box isn't needed on a particular page then there is no reason to feel obligated to keep it just because it is on most of the other pages.

I agree that the content of individual web sites tend to cater to people with certain kinds of interests and needs, but the broader computer-human interaction between people and websites is fairly universal, just like QlikView. The way in which people interact with user interfaces is largely consistent regardless of job type, gender, age, software, etc. This is reflected in the fact that most usability guidelines remain almost unchanged over decades because human behavior is fairly consistent. What information a user might want out of a QVW would be based around their job type, but how they interact with a QVW and how it is designed lives outside of these differences. If it is well designed for one person, it is well designed for everyone. There is also a subtle but important difference between being well designed and being aesthetically pleasing. Aesthetics can come down to personal style which can be much more subjective, but being useful & usable can be more universal. I might not like the style of an airport but if it is well designed then I got where I needed to be without difficulty.

When web design works well (and it doesn't always), it frequently relies on established patterns of behavior that make experiences seem easy. That their is a need to train users how to use a QVW I think speaks to the failure of the designer of the QVW to be honest. Some critical thinking & analysis might require training to learn how to understand / interpret the information presented to the user, but how to interact with an application should be effortless because it was well designed. Using the Dashboard should be just as easy using pages of more granular Analysis. I think it is a cop-out that the shortcomings of the design should be resolved by hand-holding. Poorly designed websites are abandoned unless using them is absolutely crucial, just like QVWs. When I make a financial transaction with my bank the entire process should be accomplishable, not just looking at my balance. Filing my taxes can be just as challenging, if not more so, than gaining insights out of a QVW, but I don't receive special training on how to use Turbotax. It's a well designed experience all the way through, that's why people keep using it.

As for monitor resolution I rely on analytical data of users when available. I look for what the major lowest resolution is and go from there. 1024x768 is still a pretty good resolution to aim for but if your audience can handle larger screens then I would definitely take advantage of that. Nobody wants their design to look like it is just crammed away in the top left corner just because of a few outlier users on older monitors. I'd really like to not only have objects scale dynamically based on resolution but also have the option to center align documents. Hopefully someday.

980 Views
Not applicable

Hi Paul,
The document for this blog post is below the last paragraph under the "Attachments" header. Hope that helps.

Thanks,

MA

0 Likes
980 Views
hencovanee
Contributor II

Hi Michael Anthony,

Thanks for sharing with us. It is really valuable.

One thing I can't figure out is how you developed 3 sheets into 1 sheet (Sales Analysis in Executive dashboard). I can see you worked with conditional show, but I am not sure how you get the three buttons on the top of the sheet (Sales Overview | What if scenario | Order Details.

Could you please tell me more on how to do this? Thanks in advance.

Kind regards,

Henco

0 Likes
980 Views
Employee
Employee

Hi Henco,

In Executive Dashboard, the 3 tabs on the Sales Analysis sheet are actually 3 different sheets and we use a conditional show (using a variable) on each sheet to show or hide it based on the user's tab selection.  So when you select the "What-if?" Pricing tab, we perform 2 actions: one to set a variable for the page selected and the other is to activate the selected sheet.  Thus, hiding the current sheet and activating the new one.

Hope this helps.

Kind Regards,

Jennell

0 Likes
980 Views
hencovanee
Contributor II

Thanks for the explanation Jennel. I will definitely going to use it in my documents.

Kind regards,

Henco

0 Likes
980 Views
hencovanee
Contributor II

Ok I made it as described. It works very well, but there is one (small) problem. When I view the document in webview modus and I select the second tab, the sheettab is placed to the end of all sheets (in the tabrow). It usually is set on the third position of ten tabs. In regular modus the tabs are all set on the right place, even when I show them all without conditional show. Does anyone know how this can be?

Tabrow:

Usually: Dashboard | Orders | Salesanalysis | Contact | and so on

Webview: Dashboard | Orders | Contact | and so on | Salesanalysis

Last one is after clicking the second tab on sheet Salesanalysis.

Hope someone can help, because I don't prefer to set up a whole new document

Kind regards,

Henco

EDIT: I just see it is also happening on your example document: Executive dashboard. Any thoughts on this?

0 Likes
980 Views
Employee
Employee

Hi Henco,

Unfortunately this is a bug but it has been reported.

Kind Regards,

Jennell

0 Likes
980 Views
bdunphy
New Contributor III

Hi ,

I cant open your dotx file. Any chance you could post as a pdf or .doc?

Thanks

Brian

0 Likes
980 Views
Not applicable

Hi Brian,

Sure thing. I just uploaded a PDF version. Hopefully it should work, but if not let me know.

Thanks,

MA

0 Likes
980 Views
bdunphy
New Contributor III

thanks. very useful

0 Likes
980 Views
Not applicable

Who will use it?

What are they going to get out of it?

What would be good?

What would be bad?

Applications are tools and no tool is useful to all people for all problems.

Thanks,It is very usefull.

0 Likes
980 Views
Not applicable

Hi Michael,

Being new to Qlikview this was a very helpful post, thanks for your insight. In the capture below (from your technical paper) I really like the simple, clean look to your filter. I'm assuming this view must be created in PS and can't be accomplished in QlikView. Is this correct? Filter design capture.PNG

0 Likes
980 Views
Not applicable

We have similar looking filters on our dashboards and we found they can be designed several different ways - one of the many great things about QlikView  🙂

navigation_listBoxes_textBoxes.png

The first method is quicker :

Use a List Box.  You can use a border (we do) or choose not to, depending on your style/theme.

Second method takes a little more design time, but looks better (IMO):

Use Text Objects. These objects are more flexible than button objects, in terms of sizing and styling.

The 'Year' and 'Month' filters are list box objects - the rest of the (white) objects are individual text objects.

To achieve the look you are asking about, just use a text object with no border, space them apart and insert a vertical line object in between them.  Set the desired action to the text object and you're on your way.

0 Likes
980 Views
vikasmahajan
Esteemed Contributor

Very Nice !!!

0 Likes
980 Views