Put your visualizations in a logical order

The visualizations which show the key metrics should be at the top and to the left of the dashboard as this is where research shows the user will direct most of their attention (as shown). Make sure that related visualizations, or visualizations where a comparison can be made are placed next to each other. The dashboard should be arranged to make the end user consume the dashboard in the order the dashboard creator intended it to be consumed. In Bime changing the layout of visualizations on your dashboard could not be easier, once in the edit mode simply drag-and-drop.






1. Be space efficient







Try to minimize the amount of ‘unused’ space on the dashboard. Bime makes this easy to do with some simple built in customizable features. Why not try these few simple tweaks to optimize space on a dashboard.

• Delete unnecessary legends
• Put labels inside of the visualization itself rather than below or by the side
• Rotate your labels to fit more labels into a smaller area
• When using an ‘explosion’ measure use the cover view instead of the tile view


















2. One screen?

Ideally a dashboard would always fit one screen without the need for scrolling, switching between pages etc. to allow the user to dig into the data, quickly and easily. However, this doesn’t mean visualizations should be crammed onto one page at all costs. If a dashboard doesn’t fit one page, the next best thing is to organize the dashboard so the viewer has only one scrolling bar, either to scroll down or to scroll across, but preferably not both. Alternatively in Bime several dashboards can be linked together to be listed under different tabs but under the same heading. This is usually only advisable if there are natural divisions in your data.

3. Size your visualizations adequatly

If possible, make your visualizations big enough so that all information on the visualization can be viewed without having to make further clicks on specific points to find out the underlying data. If the space you have allocated for a visualization isnt enough then that visualization will require its own scrolling bar, this makes it more difficult for the user to get the information quickly – ideally, visualizations should be made large enough so they don’t require their own scrolling bars. However, making your visualizations too large can often result in making the overall dashboard inconveniently large, therefore a trade off may be required.

Remember, it is important to have the end user in mind, how will they be consuming the dashboard? For example if the end user will be viewing the dashboard on the Bime mobile app then it may be a good idea to consider making the visualizations larger.

4. Align the elements of your dashboard

In all forms of web design, designers often use a grid system, leaving small gaps between elements on the page to ensure the lines on the page align where possible (see the example below from The Guardian homepage). In Bime users have the option to utilise the free flow grid layout setting or let Bime automatically align size and position of visualizations on a dashboard.



5. Utilize color

Color can be used to show patterns, set the overall mood or just make the dashboard look sleeker and the user has several different options of how to use color on the dashboard. Using different colors to the rest of the dashboard can draw attention to certain parts and using similar colors can also tie two parts of a dashboard together. Generally, a complimentary color scheme can drastically improve the appeal of your dashboard as a coherent color scheme draws the whole dashboard together and makes it look more professional. A good starting point is to identify colors which are prominent in any images or visualizations you have used on your dashboard and then use a color scheme to compliment these colors. However, the color scheme of your dashboard can also be used to provoke certain emotions or use colors which are related to the information you are trying to show on the dashboard. Different colors can be used as running themes throughout a dashboard to represent different groups, such as with this football dashboard from our showcase in which throughout, red represents the English league and blue the French.



Certain color combinations will be more pleasing on the eye, the color wheels below are taken from a Kissmetric blog post on the subject.



6. Keep your dashboard updated

In Bime, if selected, the built in cache, Deja Vu, will take a snapshot of your data therefore if your original data source is on premise the user is still able to share the dashboard created from this data, online. The deja-vu is updated automatically every time the dashboard is loaded and saved and can be scheduled to update automatically at regular periods, for example daily. In Bime all the data on the dashboard can easily be re-loaded from the query cache, from the data cache and from the data source. It is also possible to allow users to update the cache to allow them to view a perfectly up-to-date version of the dashboard.

7. Make sure you provide context to your data

In Bime the stunning range of visualizations bring the data to life and as they say ‘a picture (or interactive visualization!) is worth a thousand words’. However, again it is important to think about the end user, what information do they need to consume the dashboard? Make sure the dashboard includes adequate labels, legends and provide enough data on the dashboard to allow the user to get the information they need.

8. Allow interactivity on your dashboard

Which interactivity features may be useful for the end-user to get the most out of the data? The user may want to look at slightly different metrics to the owner of the dashboard or look at the underlying data behind a visualization on the dashboard. In Bime dashboards are interactive and everyone viewing the dashboard can click on a specific data point to view the numbers associated with that point. Additionally, in the premium version of Bime, the owner of the dashboard can choose to allow external viewers the ability to drill through, drill down and decompose the data.

9. Use text efficiently

Make sure that the text you have used on your dashboard, such as visualization headings, helps to explain the dashboard, graph titles are important and should signal exactly what that visualization shows. Use text to direct and assist the user in certain parts of the dashboard using rich text including font size, type and hyperlinks.

10. Avoid overloading the user

One of the main purposes of a dashboard is to provide a clear summary of the data, quickly and clearly. Therefore be selective with visualizations and only provide information which is needed for analysis. If it is essential to include extremely detailed visualizations in the dashboard then it can sometimes be useful to add them nearer the bottom and put the visualizations which provide a more general overview at the top so as the user works there way through the dashboard, layers of detail are gradually revealed. Alternatively in the example just mentioned, if they just want to look at the dashboard quickly then the key metrics are summarized as soon as they click to open the dashboard at the top of the page.

This is obviously only an express guide to dashboard design. What killer tips do you have for designing stunning dashboards? To view our selection of showcase dashboards, click here

BIME is a dashboarding and data visualization tool that helps you shine new light on your data. Click here to go to our Pricing & Plans page and sign up to turn your data into dollars!

Flash – Search engine spiders don’t like flash files. There are no textual elements in flash i.e. the spiders can’t scan, read them or understand what the pages or the site are all about half as well as they can with html pages.  Many new designers make the mistake of relying on flash files because they look great but in reality, all of that content, including your keywords, will not be of much use if they only appear in flash format.  Google and other search engines are working on understanding flash better but the technology is not quite there yet. Also, try not to rely on images as navigation – text is much better from an SEO point of view.

Frames – Frames are another design element that is largely ignored by spiders. Like flash, if you feel you must use frames, keep them to a minimum and find another way to represent important information in text form.

Images with Text – Search engine spiders will not index text that is included in images, so it is important that your images do not contain vital text. It is a better idea to use “alt” tags which serve as descriptive text that tells the spiders what the image is or represents; or to use CSS to display text behind an image.

Other non-design related common website optimization mistakes that people tend to make when beginning to optimize their sites for search engines could be:

“Black Hat” web site optimization

This includes techniques that are unethical and not looked upon favorably by search engine spiders – keyword stuffing, doorway pages, invisible text, and many more. These practices are technically likely to raise your site ranking. However, search engine spiders have become very smart to Black Hat SEO techniques and can now detect them with ease. As a result, your site will be poorly ranked and you lose any good SEO that you have done. Don’t go for the quick fix; learn how to optimize your site for the long haul.

Using link farms and FFA’s

There is no doubt that link building is a vital part of SEO. But inbound links are only valuable when they are legitimate. Link farms and FFA’s (free for all’s) are used by many sites looking for inbound links, but these links carry no value. Search engines know when links are coming from these kinds of sites, and not only will these sites not provide your site with any traffic, certain search engines will ban those who participate.

For 7 Ways to Design a Search Engine Friendly Site click here.

Tweet

Be prepared to see some change here, and a lot more information about what we are doing at WE ARE CLOUD in particular with paperboy.

Just a few words about the UI design strategy of WE ARE CLOUD.

Paperboy is a business tool. It should be appealing but not too much because it is designed to be used on daily basis by our users. All ‘special effects’ must be justified in some ways in the process of increasing the efficiency or pleasure to use it. I guess the best illustration of what I am trying to explain here is Buzzword: a slick user interface with a twist of visual sex appeal.

A website, at least its home page, has a much narrow focus : show the world what you are doing and who you are in the most appealing way.

In our opinion, the two filters for defining a good home page are :

* is the message clear ? I guess the best example of a clear message on a home page is 37signals (a bit easy to point again those guys, but they are definetly good )

* is it appealing ? the ‘WOW’ effect at its best. I guess the expected consequences of it are :

1) sustain the message. Good text is good in order to convey a message but good text + beautifull effect that reformulate the text in a visual way is better.

2) increase credibility. A small company like us starts with an obvious competitive disadvantage : no one knows us. To fight that, we think the people who hit our web site must know that we have some serious skills.

I don’t pretend in any way that we did good the first time but I do pretend that we will succeed to go though the two filters we defined about a good home page. Let’s apply some Agile practice to the field of web design, let’s work in increment. We get some feedback from you then we improve the existent.

That’s it for the reasonnable part of the story. The unreasonnable one is : frustration. While we were working on Paperboy we didn’t use the full power of the flex and flash plateform (the ‘with great power comes great responsabilities’ usual stuff) and we were calling for a good reason to play with 3d engines, physics library or distortion effects…