Qlik Design Blog

13 Posts authored by: Apeksha Pathak

A Tip for the Type

Posted by Apeksha Pathak Aug 8, 2014

If you think that your typeface or font that you use does nothing more than just conveying the content of the words themselves or just add an artistic streak to your page then, you’re wrong! Rather I must put it this way, YOU’RE WRONG!

 

Notice my tone of voice change when I used the uppercase letters instead of lowercase in stating ‘You’re Wrong’. The UPPERCASE Bold letters not only communicate the message boldly but do it in a strong assertive, almost authoritative manner. Typography forms a quintessential part of Graphic Design and Visual Communication. In fact, typography makes 95% of Graphic design.

 

The visual aspect of type has as much effect on how the content is communicated and perceived as does the verbal aspect. Visual appearance of text can communicate more than the text itself like expressing the mood, personality, gender, age or situation that is in context. It can also give visual cues about the hierarchy of the content, how to read it and which part is more important than the other. It can be perceived the same way as wearing the right clothes for the right occasion like wearing formal clothes for a job interview and wearing a casual pair of shorts for a barbecue house party.

 

For instance, the 2 images below use a different typeface for the tag line.

 

s2.jpgs1.jpg

 

Although the one on the left side is a clean, legible and a good looking typeface, it doesn't suite the context at all. Whereas the one on the right not only suits the context but also builds the atmosphere and gives certain punch and flavor to the poster.  If we put the context aside and look at both typefaces side by side there is no grounds for comparison since both have distinct personalities but if compared on a contextual level, the type used on the right immediately stands out as better suited to the image than the one on the left.

 

Typefaces have their own distinct personalities and it is the role of a designer to decide which typeface will suite which condition. However, certain general rules can be established depending on the typeface.

 

Recommendations for using typefaces

  1. Sans Serif fonts (Arial, Helvetica) are better to use for body text while Serif fonts (Garamond, Times New Roman) are better to use for headings and titles.
  2. Avoid combination of similar typefaces together like Franklin Gothic and Helvetica since types from the same family (in this case Geometric Sans) break the visual harmony as they don’t look alike but are not totally different. For typeface combinations contrasting fonts work best like Helvetica and Garamond.
  3. Avoid using more than 2-3 types per design.
  4. Create a gradation in weight to show hierarchy in text and for better visual flow.
  5. Use Script fonts and accent fonts sparingly only to highlight elements in a design.
  6. When unsure stick to traditional and popular fonts like Arial.
  7. Consider the tone of voice and context when choosing an appropriate font.

 

Google fonts are a great way to integrate some of the web fonts in QlikView. See blog post by Arturo Munoz about 8 ways to customize your QlikView applications with Google Fonts in which he talks about the step by step process of incorporating Google fonts in QlikView.

 

In summary, each typeface has a different personality which needs to be identified and applied to the context accordingly. And remember, apart from saying all about the design the typeface also adds the much needed aesthetic streak to the design so don’t hesitate to experiment.

 

postscript -

 

Typeface & Font – What’s the difference?

People often get confused between typeface and font and sometimes use it interchangeably. Typeface is the style of design of the letters, symbols or numbers whereas fonts are a set of printable text characters in a specific style. For example, Arial, Times New Roman, Garamond are typefaces but Arial Bold 12 points or Times New Roman Regular 9 points are fonts.


Resources

http://www.smashingmagazine.com/2009/08/20/typographic-design-survey-best-practices-from-the-best-blogs/

 

http://www.fastcodesign.com/1664719/infographic-of-the-day-why-should-you-care-about-typography

Design for Reflection

Posted by Apeksha Pathak Jun 27, 2014

When designing QlikView applications we are constantly striving to create sparkling applications which comply with usability best-practices, have a great look and feel and have charts that justify the purpose of showing data which can add value to the customer’s business. But a lot of times, in spite of checking off everything that we can think of in terms of creating a world class app, the customer is not convinced and app is left on the table for us to take back. Maybe then, taking design one step further is what is required to make a full impact.

 

Don Norman, in his book ‘Emotional Design: Why We Love (or Hate) Everyday Things’ talks about 3 levels of perception. Visceral – 1st stage - how someone perceives the visual aspect of a product, Behavioral – 2nd stage - how the product works, ease of use and ergonomics.  Reflective – 3rd level – what does this product say about me. Most often times, we work on the first two aspects, usability of our apps and then making them look good but it is seldom that we think about how our apps reflect the users. Does it suite the image of the customer? Apart from showing all the value that our product brings to them, does it connect with the customer on a psychological, cultural and aesthetic level?

 

Reflective processing is when our desires for sophistication and to be aesthetically at par with cultural biases influences our likes and dislikes.  It is a very common human trait since we live in a complex social and cultural set up. Owning products that reflect positively on our personality is a natural human instinct. For instance, preferring a coffee from Starbucks over an ordinary coffee place not just because you like the coffee but also because it reflects something about your personality and brand consciousness.ref.jpg

 

According to Norman, designing for reflection is one of the most powerful ways to build long term product-user relationships. Not only does it impacts the user’s perception but also creates a deeper psychological connection and an emotional engagement with the user.

 

Simple tricks like skinning the QlikView application with the customer’s brand identity can make a big impact on the customer’s perception of the app in a positive way. But influencing someone on a reflective level goes beyond aesthetic appeal. The key is to be user-centric rather than being product-centric.

 

Here is what some of the successful product strategists have done in order to hit the inner nerve of the customer’s brain.

  1. Cultural Trends - Studying cultural patterns and trends that exist within the target user group helps in identifying user expectations and preferences. This can help a lot when designing apps that customers can identify with and prefer owning.
  2. User pain points – Tackling the pain points of the user in the design and then branding the product in a way that orchestrates those pain points and offers solutions to help resolve those can really hit the note. This helps in creating a self-reflection of the user in the product.


In general spending some extra time and efforts to research the target audience and catering to their needs and preferences can create a product that is a reflection of the users and will stand a better chance of appealing to the user as opposed to just being a good looking robust application.

Human Mind and Design

Posted by Apeksha Pathak May 16, 2014

Design in almost every field needs careful consideration of human behavior in order to best fit to human needs. Likewise in the digital world design needs careful consideration of human psychology and behavior. Cognitive psychology forms a big part in the study of user experience design. It helps to know how the human mind works (perception, memory & learning) in order to design interfaces that do not hamper the natural human processes and instead help in making the digital interactions as easy as possible.

 

It is imperative to any digital interface to apply design principals and best practices based on usability research. As such QlikView applications also need careful design consideration for them to be seamless or else small usability issues can form big hurdles.

 

Take for instance the information icon shown below.

 

atsh.png

 

What would you gather from this icon? I would think that the icon is a button to get more information and is inactive because of its grey color and very little contrast between the background and text. In most scenarios something that is inactive or non-clickable is shown to be greyed out.  But in reality, this icon is active and clickable. So there is a break in the mental model due to an action that is opposite of what the user expects. These are small things to consider but they make a huge impact on the user experience.

 

The document User-Experience-Guidelines for QlikView shows many such examples, guidelines and best practices to be considered with respect to usability based on principles from cognitive psychology, all of which can be applied to the design of QlikView applications.

 

In the QlikView world, showing data the right way and making the application usable is important but enhancing the whole experience is the key to a great product. In the words of usability expert Don Norman “It is not enough that we build products that function, that are understandable and usable, we also need to build products that bring joy and excitement, pleasure and fun, and, yes, beauty to people’s lives”.

attractive.jpg

“Attractive things work better” says usability expert Don Norman in his article Emotion & Design. I fully agree with this statement since I have seen and experienced myself how something that is attractive can turn on a switch inside my brain by which I tend to overlook flaws and problems and re-prioritize what I want.

 

I use the iPhone analogy a lot but have you ever thought why the iPhone is so popular among people? It is not only because of its colorful and seamless interface but also because of the way the body of the phone is crafted that you feel like you want own it. And why do we want to own those expensive, sleek cars that don’t give a good mileage and also aren’t very economical? Because they make us feel good and attract people around us which makes us feel even better since it reflects something about our personality.

 

So we all know that attractive things are certainly more preferred than not so attractive things, but why would they work better? In many of the experiments that scientist have conducted to study the human psychology, they have all found that emotion has a huge role to play in how we perceive things and how we solve problems. Positive emotions broaden the thought processes and enhance creative thinking. So how does that make something easier to use? Simple, when people feel good about something it makes it easier for them to find solutions to the problems they encounter.

 

Considering the theory above, QlikView applications that we design should work the same way. The more attractive they are the more the customers will like them, will like to own them, and will like to use them. And the most important of all, they will be more tolerant to minor difficulties and issues. But that certainly doesn’t imply that it is okay to ignore the usability quotient. As I quote Don Norman “True beauty in a product has to be more than skin deep, more than a façade. To be truly beautiful, wondrous, and pleasurable, the product has to fulfill a useful function, work well, and be usable and understandable.”

 

To hear more on this topic you can watch this video.

When Microsoft unveiled its Windows 8 UI, which they called the ‘Metro’ style, there were whispers of a new underlying design concoction which was happening in an effort to set a trend. The whispers quickly turned into a buzz when Google switched their visual design and UI for all its platforms to bold and contemporary. Then came Apple with its iOS 7 designed flat as paper which turned the big buzz into what was being called a design revolution which was the antithesis of faux bevels, shadows and the real world lookalikes.


“There is a profound and enduring beauty in simplicity, in clarity, in efficiency, true simplicity is derived from so much more than just the absence of clutter and ornamentation. It’s about bringing order to complexity” these are words from Sir Jony Ive, the chief designer of all the beautiful Apple products we own. It was just déjà vu for some of us who thought it was like the return of the BAUHAUS.


So what exactly are we talking about?


It is about a Design style, an approach to UI that has become a mainstream and what everyone seems to be following these days. It can be seen in websites, mobile apps, print, branding, logos, icons and even in dashboards. It is called Flat design.


So what exactly is a Flat design and what is not a Flat design?


Flat design is essential visual elements that are literally flat, they are without any shadows, bevels and gradients. Apart from its elements Flat is minimalistic in its style and places greater emphasis on colors, typography and imagery as core design principles. Basically it is striping off the ornamentation which doesn’t support the UI and doesn’t mimic real-life objects. Something like this...

a.jpg

And this..

c.jpg

 

What is not flat design is obviously completely the opposite, and the word for it is “Skeuomorphism”. Skeuomorphism is something that mimics a real-life object, just like the previous Apple UIs before iOS7. Something like this

 

d.png

…As opposed to this.

e.jpg

 

It is obviously a design language of the present times but there are certain pitfalls that come along with it that are hard to ignore. They tend to blur the line between navigational elements and aesthetic elements within a design. This means certain UI elements like buttons and toggles merge into the background and cannot be recognized quickly as action items. But again, it depends on how they are designed.

 

Design is a combination of science and aesthetics; however, visual design is also a lot of personal aesthetic choices we make to support the user interface in becoming seamless. My style choice may not be someone else’s. As a designer, I like following the trends to avoid looking like a pair of bell bottom pants in the age of skinny jeans.

 

Another argument for moving away from the age old Skeuomorphism is that we have come such a long way in the digital world that the need to relate to real-life objects in the digital sense seems redundant.

 

So, what should one follow? You can follow your own style of design as long as it justifies the purpose. And if you are the fashionable type then just remember to do a contextual based design, which means do it where necessary and strip off where unnecessary. Just like how Google gets it right, a little shadow where needed but mostly flat.

f.png

Pre-attentive processing, as the name suggests is the initial stage of processing information by our brain where certain characteristics are immediately detected without focusing on an object.  This act is done quickly and effortlessly where the brain tries to recognize certain visual attributes that make things stand out or show groupings of similar objects.  Color, shapes, position, orientation, proximity, size and motion are some of the elements that can be easily detected pre-attentively by the human mind.  The examples below show how the brain immediately spots anomalies because of their attributes.

xs.png

While designing a dashboard we rely a lot on showing visual attributes of data for quick and easy detection so pre-attentive processing becomes an important aspect to consider.  The ability of the human mind to recognize and process information at light speed can be used advantageously in order to show data outliers and similarities in data in a dashboard.

 

Applying visual attributes to a dashboard like a bright color or an icon that stands out from the rest of the information can justify the purpose of a dashboard making it easy for a user to gauge the situation at a glance.  As shown in the example below, color and icon is used as an attribute to highlight numbers that need attention.

sd.png

Color is a strong perceptive attribute but there are others that vary in intensity, like difference in shape is not as striking as contrasting colors. Depending on what information needs to be shown, whether qualitative or quantitative, various attributes can be applied.

dsd.png

Visually encoding data for rapid perception can make information consumption in a dashboard extremely easy and convenient for a user. And since a dashboard is a summary or high-level information providing system, it is important to strive to be as visually informative as possible to target the pre-attentive senses in a user.

 

So, the use of pre-attentive information processing techniques while designing dashboards can not only justify the purpose of the dashboard but also help in projecting information as needed.

There are some common misconceptions that surround the field of Visual Design. One of them is that visual design is just the act of making something look pretty or to make something pop. However, Visual Design is more than that.

While making something looks aesthetically pleasing is one of the important parts of Visual Design, it goes beyond that to effectively communicate to people what the product or the application is all about. Visual Design if not done well cannot help the user to answer basic questions like – What is this? How do I use it? Why should I care?

 

These are some crucial questions that a design needs to answer in order for it to be user friendly and seamless.

For instance, Figure 1 below shows information about Silicon Yogurt stores in the United States of America and a comparison between other brands. The information below is visually appealing but the problem is that I don’t get the story.

 

Figure 1

i1.png

In Figure 1, the first set of information tells me about the total number of Silicon Yogurt stores and across how many malls, then my eyes go down to the average number of yogurt stores per state which is a high level information then a comparison is made between other brands and Silicon brand which again is something that talks about the detailed statistics and then it gives me information about other brands. All this information is delivered in bits and pieces and it is hard for someone to understand the point of this material as it is not organized in a proper high-level to low-level sequence.

 

Whereas in Figure 2 below, all elements of the visual design are the same but the information is organized is in a way that tells a story and the info graphic makes more sense.

 

Figure 2

i2.png

The Title introduces the topic, the map and piece of information goes hand in hand by giving a high level summary of Yogurt stores per State. Once a high level summary is given, my eyes then go to the details and a comparison is made side by side which is useful to understand instantly?

 

The difference between Figure 1 and 2 was only about content organization which made a huge difference in creating a story to the article, something which is an important part of visual design.

 

This is just one part but there are a number of other things that need to be thought about along with the look and feel of something.

 

  • Organizing information in an effective way
  • Looking at the design problem holistically so that everything works in conjunction with each other
  • Balancing the look and feel such that no element in the design pops up unless intentional
  • Choosing the right colors, fonts and other UI elements

 

These are some considerations that need to be taken care of while working on the visual design of something. And then of course there is making everything look neat and pretty.

I recently updated to iOS7….hmm...The new look and feel is certainly delightful, although, one particular thing really got me frustrated. While exploring Apple’s new eye candy, I was trying to delete an email from my phone by the usual way, which is by swiping my thumb from left to right. Obviously, I was expecting a delete button to show up. I tried once, twice and several times, it just wouldn’t do anything and the most frustrating part was that it opened the email instead of deleting it. At this point, I gave up and went into my setting to see if something was turned off…and nothing! Finally I decided to do a web search and AHAA!....They actually switched the whole interaction paradigm of deleting an email from swiping from left to right to now swiping from right to left.

 

mental model.jpg

This was the complete opposite of the model that I had carried in my mind for all these years. This was just a small example of a mismatch in the user’s mental model to the designer’s mental model which caused some degree of frustration and took some time and efforts in figuring out. In this instance, the learning curve was quite low, but what happens when there are so many things in an interface which throw you off because what you expect it to do, is not what it does in reality. This not only causes frustration but a repulsion effect and even the things that work well go un-noticed spoiling the whole experience.

 

A designer’s goal should be to keep the learning curve as smooth as possible. This is when the concept of mental models comes into play. A mental model is a person’s perception and an understanding of how something works based on prior knowledge and experience, it is based on beliefs not facts. These mental models are very loose and keep evolving over time; they cannot be visualized and often times aren’t accurate.

 

Today, we are constantly surrounded by different systems and interfaces that we have to keep adapting to. Although, these interfaces differ from one another, there are certain design standards that have evolved over time, which they all follow. People form a mental model of how these interfaces work. For example, one of the reasons why we place our Filters on the left side of the sheet in a QlikView application is because we are all used to the web where mostly the navigation panel is always on the left side. Leveraging these already formed mental models in our designs can be very useful in creating a seamless interaction pattern and creating a good user experience.

 

However, sometimes, it becomes necessary to challenge the standards in order to keep up with the changing technological landscape. This needs a seamless transition of the already formed mental models to new and evolved paradigms.  As we move slowly into the phase of designing QlikView applications in the 'Next' version, these considerations will become vital to ensure a smooth transition. The below mentioned design considerations can be helpful in achieving this -

  • Providing subtle cues so that users don’t get lost
  • Frequently used functions to be easily accessible
  • Providing certain familiarity aspects in the new design which users can recognize easily
  • Providing flexibility
  • Always providing a feedback from the system to the user

 

More information on this topic can be found at http://www.nngroup.com/articles/mental-models/.

Color Codes

Posted by Apeksha Pathak Aug 16, 2013

Colors are a very important and critical part of our lives. They not only give meaning to objects but also trigger feeling and emotions within us, influence perspective and affect our psychological being.  The study of colors is very complex and a lot has been written and talked about the role and use of colors in various aspects of life.  

 

As QlikView application designers, we don’t have to study in depth the meaning and theories of colors but it is of utmost importance for us to be aware of the usability norms, best practices and social and cultural implication of colors to use them in a conscious and respectful way in our designs and data visualizations. It is very easy to fall in traps of using excessive color variations or inapt color schemes since we have such a wide range to choose from which leads us to falling for temptations of using colors as per our personal likes and dislikes.

 

A few tips and tricks about how to use colors judiciously can not only help tremendously from falling into these traps that impair usability and deceive the user but also allows datasets to be layered in order to tell eloquent stories. The following guides can be applied to our data visualization for QlikView applications.

 

1.     Use minimal amount of colors in your designs and data visualization. Every application has a focal point or something to highlight. Overly colorful designs can tend to hide the focal point, giving an overall vibrancy to the design and hindering the user from focusing on important points in the data.

1.jpg

 

 

2.     Using Shades and tints of the same color while showing quantitative information instead of different hues of colors is preferable, like in the pie chart shown below. 

2.png

However, it is okay to use different color in the same chart when color is used as an indicator of information as long as the colors are limited to 3-5 and color choice is such that they don’t create visual noise. The example below shows how color is used as an indicator of information.

3.png

 

 

3.   Avoid pure gradient rainbow color scales to show data. Because there is no inherent order in the scale, they all appear to come from different families.

4.png

4.     Keep the colorblind audience in mind when choosing color schemes. Since a large portion of our audience might be colorblind, it is unaffordable to use colors which are not colorblind safe. Color Oracle(http://colororacle.org/index.html) is a good evaluation tool for colorblindness.

 

5.     In places where Red, Green, Yellow have to be used together, introduce other attributes such as icons so that color is not the only differentiating factor. These colors appear similar to colorblind people.

5.jpg

6.     When using Red and green together, choose a green which is closer to blue in hue, this way tthe 2 colors can be differentiated easily by the colorblind users.

 

6.png7.png

 

Apart from the above basic usability guidelines, there are other things to consider while choosing color schemes for designs. Choice of colors is very subjective, however, this not only because of personal preference but can also due to deep rooted cultural and social connotations associated to colors that are imbedded within us. Colors hold different meanings in each culture and we should be conscious of those meaning when presenting to a global audience or a specific country.  This way misinterpretations and offensive use of colors can be avoided.

 

An elaborate insight on colors, their use and interpretations can be found in this Technical Brief.

In a presentation, or a seminar or just a conversation, the speaker starts presenting the topic by introducing the title of the topic, then gives a brief overview, the background and then gently flows into talking about the details of the topic and concludes with the summary or an inference.

Similarly, when writing an article, one first starts with an abstract, an introduction, then writes the details of the topic in the body and ends by writing a summary or a conclusion.

 

Order and organization of information from a reference point to the last detail, in sequence, is the most crucial part of effective and seamless communication and storytelling.

 

Design, like writing, or a verbal presentation, or even a casual conversation is a medium of communication and a channel for storytelling. It follows the same principles of hierarchy and order as in any method of communication. Only when information is organized in a good hierarchical manner, the story is told most effectively.

 

Most people are visual thinkers, chances of people understanding a set of images and text put together in a grid with no starting or an end point are very slim, instead, going through and comprehending information which is ordered in a top to bottom approach is much more meaningful.

For instance, the design of a newspaper is a classic example of using hierarchy in the most effective way to help people read highlights and pick information they want to read.  Hierarchical patterns in design can not only aid comprehension but also enable quick scanning of information, guide the user through the story and improve usability. 

 

As time becomes an increasingly valuable commodity, grabbing the user’s attention and retaining it has become the most important and the most challenging thing today. Designing information in a way that calls for the user’s attention and retains it is the key to a successful communication strategy and Hierarchy forms one of the most important ingredients for effective communication.

 

In a QlikView application the D-A-R concept (Dashboard, analysis, report) is a great method to provide contextual hierarchy where the content is presented in a top down approach. This makes it easier for the user to grasp the data from start to finish and also enables them to pick out information that they intends to drill down to and analyze.

However basic and overemphasized these principles may seem, the fact is that they always seem to work and give rise to good user experience. Research and usability tests prove that when a design layout adheres to the basic principles of design, the design becomes more user-friendly, simple and obvious. Hierarchy is one of the most important principles of basic design and should be applied to all designs from simple to complex.
A technical brief can be found here which expands more on this topic.

When we start working on a new project, the customer requirements form the guiding rails for us to begin the process of designing. As we start brainstorming and throwing out ideas, we begin to fill the empty spaces with uncertain experiments. We then start making tiny decision which we stitch together part by part in trying to complete the big picture.

 

Initially to get started with drawing an outline of the project, we naturally tend to ask ourselves the basic questions of why, what, where, how. As the project progresses, we come across unforeseen hurdles, feedback, opinions and try to work our way through it to achieve the big goal.  However, in the process of doing so, there are very strong chances of digressing from the main purpose of the project. In trying to put the small pieces together, and focusing on how to make it happen, we sometimes tend to lose the purpose of why we are doing what we are doing.  This is when the question “Why” always comes handy to validate our work.

 

A design can never be a solution if it doesn’t fulfill the underlying purpose of its existence. Asking the question “Why” each time we complete our little milestones, that we set for ourselves, can do wonders to the final solution.

 

In the book called “The Shape of Design”, Frank Chimero points out - “Our mistake was the same as that of the creative person who places too much focus on How to create her work, while ignoring Why she is creating it. Questions about How to do things improves craft and elevates form, but asking Why unearths a purpose and develops a point of view. We need to do more than hit the right note. The creative process, in essence, is an individual in dialogue with themselves and the work. Why is usually neglected, because How is more easily framed.”

 

The process of design is most successful when it is an iterative process rather than a linear one. Asking the question “Why” at every stage to validate your work can not only help in creating a strong argument for your work but also help in delivering a legitimate story. So, a reality check by asking the question “why” at every stage of the process can help in creating the solution that one set out to provide in the first place.

Use of Icons in Design

Posted by Apeksha Pathak Mar 15, 2013

Have you ever noticed how information is constantly communicated to you via icons in the world of electronic media?

1.png

Right from the first screen that appears after you start your computers, tablet or phone to checking your emails and then moving on to surfing the web, you are constantly being informed by these little visuals which help you navigate your way through information and effectively alert you of various situations.Icons are a great way of communicating information quickly and precisely.

 

3.pngIf we look at some of the top usability rated websites and applications, we will find that they rely very heavily on the use of icons to facilitate excellent user experience. For instance, Dropbox uses icons for almost every function which not only makes it quick to grasp but also makes it visually appealing.In our case as QlikView application designers, we need to consider the use of icons as a way to draw the users’ attention, to alert them of a situation or to alarm them of an impending.  Also icons can be used very effectively to display priorities for KPIs which can be used in combination with the traffic light chart (Red, yellow, green). 4.png

The other part to the story is that the use of icons has become very popular in the industry today, especially the web world, so people tend to associate certain actions to certain icons. In our case, while designing application, it becomes important to consider the fact that the users’ psychological paradigm works in alignment to the surfing the web when trying to work with an application. They try to find similarities between using a website and using an application. So, the use of icons becomes all the more relevant in designing applications for us.

So, what are some of the reasons that can justify why icons can be effective in designs? There are a few:-

•Effective visual communication
•Easy identification of information
•Draw users’ attention and alert them of a given situation – this is especially important in dashboards
•To provide a visual relief and enhance visual display of information
•To save screen real estate by replacing text with icons

Although icons can be a great way of conveying an idea, their use, in design can be slightly tricky. There are a few dos and don’ts that one needs to keep in mind when incorporating icons in design.  That said, Icons can enhance the look and feel of a design and at the same time can enhance the readability of content and thus the usability of an application.

A detailed description with examples of best practices of using icons can be found in the technical brief here.

Bar charts, pie charts, Speedometer gauges, Traffic Light gauges – These are some of the visualization objects that come to the mind when one think’s of designing a Dashboard to show KPIs. Some are used for their grandeur and others simply because they show the data very clearly.

 

Now, let’s take a step back and rethink on what is the main purpose of Visualization objects within the Dashboard. When there is a large amount of data, it becomes difficult to scan through it in the form of a table and recognize a pattern or select that data which is useful to make sense of situation. This is when visualization objects help the user understand the data clearly in a quick and easy way and enable recognition of the underlying patterns by giving out the big picture and pointing precisely to deviations, outliers and connections.. So, if we take some of the charts that we frequently use in our dashboards and analyze them for their intuitiveness, the answer might not always be positive.

 

Some visualization objects that have proven to be intuitive in showing the data clearly are sometimes embellished with ornate presentation techniques that compromise the ability of the data visualization to focus on the data itself, while other visualization objects commonly used are not intuitive at all in the first place.

 

The Speedometer Gauge is a classic example of a visualization object that is used very frequently in Dashboards, the use of which can be arguable. The speedometer Gauge is drawn as a metaphor in the BI industry from the dashboard of a car. In the dashboard of the car, the speedometer does absolute justice in showing the current state. The driver is only required to know the current situation at any given time. Thus, the speedometer solves the main purpose. In a Business Dashboard however, the user more than often times needs to know a whole lot of other things which support the current state like historical trends and other things for purpose of comparison. In which case, the speedometer gauge, which can show only one data point, fails to show the complete picture.

 

On the other hand, the most simple and extremely popular objects like bar charts and pie charts display the data in a highly intuitive way. They are easy to understand and can inform the user about the patterns and trends. However, if these intuitive charts are not presented well, they can hamper the user’s ability to quickly grasp information and sometimes even mislead the user.

 

As QlikView application Designers, we are always thinking of ways in which we can represent the data in the most simple and intuitive form for our users. As a result we sought to various resources for references and ideas and often times we come across snazzy looking displays, but it might be of great help to take a step back and analyze whether the representation of the data that we put across is easily understandable by the user or not.

 

A detailed description with examples of this excerpt can be found in the technical brief here.

Filter Blog

By date:
By tag: