Share your visual Tips

[#1]

Hi Everyone,

I had a couple of questions and decided it might be a good opportunity for a discussion around visual tips. My specific interest is around any good tips for designing a background image and tips for creating colour/color schemes especially when you have stacks based on multiple groups (up to 10 or more) or a gradient (i.e. rank).

Anyone have any winning tips we could all benefit from?

Thanks

Gareth

[johnw]

My tip for designing a background image is "don't". Don't add anything to the sheet that distracts from the data, no matter how pretty you think it is. The job of business intelligence isn't to impress; it is to INFORM.

I personally use a pure white background on the theory that black ink on white paper is easiest to read. It's the same theory this website follows. People also commonly use a very pale color as the background, probably on the theory that a pale background is less harsh than a pure white background. Either seems fine to me, but I would be consistent across applications in my background color choice.

I don't have a good tip for color schemes for large numbers of groups. In a case like that, I'll typically use the default color scheme provided by QlikView.

For gradients, I'd use a calculated color value. For instance, here's an example intended to show the connection strength relative to the maximum between two points on a graph.

argb(10+245*sqrt("Count")/sqrt(max(total "Count")),0,0,0)

And this is from an example heat map:

if(len(count(ID))=0,black()
,if(count(ID)<10,rgb(105+count(ID)*15,255-count(ID)*15,105+count(ID)*15)
,rgb(255-(count(ID)-10)*15,255-count(ID)*15,255)))

[#3]

If you follow "pure" dashboard theory, you'll end up in a sea of greyness. We're all watching 1080P TVs at home, but designing dashboards in grey? It just doesn't make sense (to me).

To spruce up a recent project, I went to a well know company's website and tried to mimic their UI approach in QV. They pay people good money to create and optimize their site. Not downloading anything from their site but ideas on how to present data in a clean way without distracting the audience. The ideas worked out pretty well based on the feedback I received.

Good luck!

[#4]

Hi gcampbell ,

My opinion is dont give any color to the sheet as background. but take TextObject for every listbox, tablebox,etc.. and change the text object properties as..

1. Change the color of the text object as white.

2. Right clik on the textObject and goto properties, goto Layout tab then change the Shadow Intensity as Intence and border width as 1pt.

now you will get good finishing..

[#5]

Thanks guys, all good stuff - keep it coming.

I use a pure white background but I create an image of a particular size that has a thin border around the edge to control layout design area and a company logo. I agree that we don't want to start putting too much colour in the background.

[matt_crowther]

I'm all for discussions on the visuals of Qlikview - there's far too much focus on getting the backend right (which is of course vital) and then forgetting about the frontend that the users actually interact with, I see so many dashboards that have fallen by the wayside because they simply haven't been put together in a way that helps the user.

My overwhelming tip for dashboard design / layout in general is: 'care' - if you care about it looking right and spend the time to make it look right it's not difficult but as it's not a 'crucial' element of a dashboard it gets ignored - obviously if you ignore an element of the script the dashboard won't work; get a colour wrong and it will work but look terrible.

Once you've started caring; start aligning, I have to tidy up so many dashboards (including ones created by Qliktech employees) where everything is in the default colour scheme (inc the ever so slightly off-white background - come on Qliktech get that defaulted to pure white) and objects are left floating around in an incoherent miasma of data. Look at any website, newspaper, billboard etc etc and everything will be alligned - move that alignment by even the slightest amount and it looks terrible - the old graphic design adage that 'the final 2% counts for 20%' holds true in Qv as it does everywhere else.

Generally I agree with previous posters in that backgrounds should always be white - let the data and the objects draw the eyes attention not the background, the only exception to this is in my personal companies demo dashboards; here I use a black background to make the colours used in charts etc to appear more vibrant - it worls well in a sales environment but I'd be reluctant to roll it out for a Production deployment.

Example below:

*I'm in no way advocating this as being the Holy Grail of dashboard design - Steven Few would have kittens if he saw it! But as a previous poster says; why are we making everything Grey!?

All the best,

Matt - Visual Analytics Ltd

[johnw]

Aligning! Yes, yes, a thousand times yes. I see a lot of people not taking the extra five minutes to make sure everything is lined up and evenly-spaced, so everything is just a few pixels off. It is so distracting to me. I'm sure there are plenty of people who don't find it distracting, but people like me go insane looking at things like that.

As for why a sea of gray isn't always bad, again, think black text on white background. It's what we grow up reading. It's easy to read. It does not distract from the message in any way. And then when you DO use colors, particularly bright colors, they stand out. So you can use more vibrant colors to draw the eye to one specific spot on the dashboard, one particular piece of information. If you make everything vibrant, the eye isn't drawn anywhere in particular. Highlighting everything is the same as highlighting nothing, just more visually jarring.

Basically, mimic Google. Don't mimic all the portals they wiped out of business, the ones with all the flashing blinking text and images and moving ads and so on. Simple is good. Presenting information as simply and clearly as possible is good.

Something else to consider when designing a color scheme is color blindness and printing on non-color printers. There are web sites that show you what a palate of colors looks like to people with various forms of color blindness, and can help you design good color schemes. I don't actually do that, and I also ignore warnings to avoid using red and green. Red and green are FAR too useful for their normal meanings, allowing you to say something important in a very simple way. But if you DO use red and green, be certain that one is darker than the other so that they're distinguishable to the color blind and when printed on a non-color printer. I also often use symbols on data points, even though I think they're ugly, because I want to be certain that lines are distinguishable even when printed or when viewed by someone who is color blind.

[#8]

John I agree with you. Keep it simple. The site I was speaking of is named after a fruit. They have a simple design, mostly white background, and some gradients. Most text is either dark (close to black) or lighter blue for links and important text. Clean design is good.

As far as alignment, yes it's very important. I wish there was an easier way to accomplish this. Tedious, but neccessary.

Overall the dashboard must be visually appealing, just like a website should (must) be.

The site you were speaking of for the color schemes is:
http://colorschemedesigner.com/

[#9]

great stuff folks, agree completely with the simple design, light background - i'll throw another one into the mix if that's ok.... designing apps to be diplayed using Ajax. What i've found is that something that looks great on your laptop using the desktop edition, with rounded corrners, showing effects etc... when deployed on a server using the Ajax client looks 'Clunky' the captions and scrollbars are enlarged for instance.

To get round this I have started to create my objects without a caption bar, using a text box for the titles, making the backrounds transparent so they blend with the page and only the chart columns, grid and lines show... a similar approach to tables. It looks much better, but losing the cations you lose the ability to move things around & export easily .

Has anybody else come across this - anyone got any tips for designing app to be deployed using Ajax that look professional and being able to lose the 'Office 2003' type ajax captions (sorry Qliktech but thats what they remind me of!)

FYI - Using QVS 9 at the moment