Dashboards by Design
By Ignazio Lacitignola
About Ignazio Lacitignola
Ignazio Lacitignola is an Italian designer, creative and entrepreneur. He feels weird talking about himself in 3rd person, but for the sake of this bio, he will. Ignazio grew up in the ghetto side of Milan, Italy, and somehow managed to graduate with honors at Nuova Accademia di Belle Arti without going to jail. He now lives with his two kids in fabulous Las Vegas living the American Dream.
Ignazio runs MENO Design, a User Interface and Experience design studio focused on solving design challenges with simple and intuitive solutions. Minimalist and agile enthusiast, Ignazio finds his passion for simplifying digital experiences down to their core and learning through experimentation.
He believes that every piece of design can be a work of art and constantly reads and writes about all things design. He worked with startups like Bow & Drape or Lendbuzz and big companies like Cisco, Zappos.com or BevMo.
When not in front of his Macbook he loves cooking, making Limoncello, riding his Vespa, selling bicycle things on his store MollettaDesign, and help kids wear their imagination at Picture This Clothing. He is pretty friendly, you should say hi.
Table of Content
My Dashboard Definition
Before we begin with some dashboards design tips, let’s make sure we are aligned on how we’re defining the term, “Dashboard”.
According to Wikipedia and the interwebs, a dashboard is defined as:
“A graphical summary of various pieces of important information, typically used to give an overview of a business.”
However we now refer to dashboards in a broader way that involves not only the one page that graphically representation of data, but the entire tool environment:
“A specially designed website or application that serves as the single point of access for information, tools, collaboration, or task management.”
Why Dashboard Design Matters
Why do we care so much about dashboard design? Because the way a dashboard is designed can make the difference between capturing people’s attention and embracing your product or ignoring it altogether.
Dashboards are hubs where information is stored and sorted, problems are identified, decisions are made, people interact, learn, and get their work done. The way they are designed and how they function can deeply affect the direction of a company.
What I have noticed over the years is that dashboards and internal tools are often a neglected area, considered like a tool of secondary importance that “doesn’t need much design”, maybe they are for internal use and they already work well enough, so who cares!
I find absurd seeing most of the design resources going towards a pretty customer facing site because “that’s what people see”. But what about the tools that your team or customers use everyday?
Dashboards that don’t have a root in design are left to the faith of managers, developers and the intern that “has an eye for design” end up being painfully hard to use, which lead to poor performance and lower productivity, which lead to poor service and a good amount of frustration.
Heavy investment on only the marketing website and not the dashboard design and usability also creates a disconnect between various aspects of a product or company. Inconsistent experiences weaken a brand and lead users to think poorly of a platform.
You must have experienced this disconnect at some point.
You find the hottest service and they have a well spoken beautiful website that totally resonates with you. So, you sign up and then after poking around the actual product suddenly, something feels different… There is a total mismatch between your expectations and the reality of the product.
We want to bridge this gap, we want to see companies carry the same level of care they have for their marketing website to all aspects of their products, tools and dashboard.
A unified branded message and experience strengthen both the brand and product.
We want all dashboards and portals to align people in one direction, to bring clarity to metrics and goals, and truly empower people to get their work done.
We believe in a world where people can accomplish anything they want using tools that they love. The purpose of this book is to show you our approach to dashboard design that understands its users.
A Pinch of Research
- Poor user experiences inevitably come from poorly informed design teams.
Design solves problems; research allows you to identify which problem you should be solving. Thus, before I even begin dreaming and wireframing, I usually conduct a small level of research. No one likes to find out post launch date their design failed to solve problems for the users. Every new dashboard design project comes with an endless supply of unknowns and this is the stage in the design process where you uncover as many unknowns as possible.
Now, I know the word “research” can be intimidating, so if it helps you to replace the word research with “User Curiosity”, then by all means, go for it. Think of research as any other stage in the design process – but this stage simply involves you asking “why” over and over and over again.
As designers, we naturally want to dive into projects and design from our gut and brilliant instincts. No matter how keen your instincts may be, the users of your dashboard are complex people with their own agenda and their own unique context. Find out what their needs are and solve for that.
This will highly reduce the risk of bad design assumptions based off of personal experiences and subjective preferences.
1 - Drop the Assumptions
- Yeah, but, I’ve been working at this company for a while, so I’m pretty sure I know our users.
Wonderful! This gives you both an advantage and a disadvantage in solving new user challenges. As Erika Hall puts it in her book, Just Enough Research, “Familiarity breeds assumptions and blind spots.” Thus, your familiarity to the product may actually be the very thing that is preventing you from seeing and using the tool the way your users are using it. 😣
But all is not lost. You will just have to play the part of someone who has never met or seen one of your users and go out in the real world to observe and interact with real life users, designers, project stakeholders, and customer service reps – all in a very curious and unbiased fashion. Leaving biases behind is hard, but the better you are at doing this, the better your research will be.
2 - Ask “Why”, Five Times.
- User research helps us understand how other people live their lives, so that we can respond more effectively to their needs with informed and inspired design solutions.
The good news is, you don’t need to be a professional researcher in a white lab coat to conduct your own round of research! All you have to do is set a goal (i.e. Identify why new users aren’t completing their personal profile) and run with it. Asking “why” five times will help you get to the root of the problem.
Problem: Users aren’t completing their user profile
- Why are new users not completing their profiles?
We never prompt them to do so. - Why aren’t we prompting users to complete this section?We want the onboarding to be as frictionless as possible.
- Why do we need to make it so frictionless?
We just want people to sign up and start using the platform. - Why do we want people to start using the platform right away?
We assumed it was the most effective way to engage the user. - Why we assumed so?
We didn’t test different onboardings.
This technique is attributed to Taiichi Ohno, father of the Toyota Production System. What may start out as a technical problem may actually turn out to be a human and process problem.
Example:
Researcher: What’s the first thing you do when you sit down at your desk?
User: I check my emails.
Researcher: Why do you check your emails?
User: Mainly habit, I guess.
Researcher: Why do you think that is?
User: Well, my email helps me find a focus for the day and I want to make sure there aren’t any urgent needs that need to be address.
Researcher: Why?
User: Well, every day kind of feels different and I’m not sure what I should be doing. Also, I don’t want to seem unresponsive.
Researcher: Why?
User: Because I really don’t have any defined goals in my job nor another way to let others know I’m here and ready to take on new challenges.
Researcher: Why?
User: My boss and I really never set them. We just work reactively.
Researcher: Wonderful insight. Thank you. (Note down that adding a task and systems manager to the dashboard could possibly be useful, along with a feed of emails that are tagged urgent.
And there you have it! If the design team would have stopped at the first question, you may have sought out to design a better inbox. But since you were persistent, you found out the the users could greatly benefit from a task and goals managing system.
3 - Don’t Overthink It
- Overthinking – the art of creating problems that weren’t even there.
User research can be something that takes years and hundreds of thousands of dollars and participants to perform, or it can be a simple act of interviewing a handful of users and go on your merry way. So which do you choose?
Here’s where we fall on the research spectrum – if the product that you are designing could potentially put someone’s life at risk, then please, do all the research possible to ensure people are safe.
For a non-life threatening user portal/dashboard I have found that qualitative research and simple conversations and interviews with a handful of users gives us just the right amount of information to move us over to the design phase.
It really is all about finding just enough information to give you the evidence and direction you need to iterate, test, and move on. Sometimes too much unstructured research up front can paralyze the creation and exploration process needed to get the tool to the next phase. You can’t design an effective tool that checks-off every little box or suggestion that users give. Taking your users into consideration is good, but the best design will come from a continuous focus on the most important problem to solve.
With that said, we have found that the approach of conducting research and iterating as you go is far more useful in designing Saas platforms and dashboards than it is doing a hefty amount of research upfront, since you learn as the technology and customers evolve.
Simplify
- To complicate is simple, to simplify is complicated. ... Everybody is able to complicate. Only a few can simplify.
A basic fundamental for good design and usability in any tool is simplicity. When something is hard to use we use it less often, and stop using it altogether.
People have different tolerance for complexity. Some rare unicorns can efficiently navigate complex systems and actually feel lost when presented with a simple interface. Some people associate simplicity with “dumb”, “easy”, “underthought”, or even “cheap”. But simplification done right is actually an incredibly difficult undertaking that requires building from the ground up.
Design trends come and go, good design is often easy to recognize, and truly great design it’s actually invisible as it disappears in the experience.
Starting with solving the single most important thing in a design encourages you to focus on making tradeoffs that impact the usability and ultimately the experience someone has with your product. It’s easy to get lost polishing graphics and icons, and in the process lose sight of the bigger picture.
Prioritizing and focusing on only the most important problem will increase the chances of creating an intuitive experience and interface that is easy to use.
Simplifying a system that was initially conceived in complexity will result in a mediocre design. However adding layers of complexity on a system that was conceived in simplicity will increase the chances of staying effective.
Simplicity also sells. It has been proven over and over to be the success recipe of many products and services. People would rather pay more for something that does one thing right, rather than paying less for something that does many things mediocrely.
This example may oversimplify the dynamics that play in the success of a product, but think of Apple. Most of their products do less things than the competitors but they do it reliably, they also come at a higher cost due to the intensive simplification process they go through.
These products have a higher perceived value and people don’t mind paying the difference and often tolerate flaws because they understand the standard of quality.
Simplicity and quality can drive desirability. Desirability drives perceived value.
Desirability can change our perception, the more we love something, the more likely we are to not only tolerate problems but reinterpret them as part of the process to achieving something better.
Simplicity is about the courage to say no and, as Stephen Covey said, “The main thing is to keep the main thing, the main thing.” Hopefully by now you are pumped about simplifying. Here are 5 simplification tips that will help remove unnecessary complexities from your dashboard design, they are in an order that works best for me but feel free to jump around – they also work independently.
1 - Remove, Reduce & Hide
- Simple can be harder than complex. You have to work hard to get your thinking clean to make it simple.
Thanks to the research process illustrated in the previous chapter, hopefully you now have a good idea of what is important to the user and why, now you are ready to select the right content and functionalities to bring your dashboard design through thoughtful reduction.
Remove – The easiest way to simplify a dashboard (or any tool) is to remove functionalities and information.
The removal process is the absolute hardest as it brings up a great conflict. On one end we want a product to be simple and easy to use but we also want to include all the cool features and data that a person might want.
A prioritization exercise can help make decisions here, listing things in order of importance then removing the pieces at the bottom is the simplest way to go.
As a general rule if you find yourself in doubt, just remove.
If removing some elements will put your tool in jeopardy,, consider the following:
Reduce – This can be done quite literally by shrinking the size of an element or by lowering its importance in the hierarchy of the design. The smaller the element the lower the expectations around it, the lower the perceived importance and attention that calls.
Please don’t abuse this, making things small is meant to lower the hierarchy of something, so making everything small makes everything not important. If you find yourself shrinking too many elements that you are certain cannot be removed then reference the following tip:
Hide – When something can’t be removed or reduced, hide it!
The hiding process has to be thoughtfully done because the things that are hidden do need to be found. We are not designing a scavenger hunt here, so the elements that are hidden away will need a clear path for retrieval.
If your dashboard has more advanced capabilities and options, please do a favor for the majority of your users and hide away such things, that way you are creating an environment that is less daunting and easier to understand. Motivated power users will seek these features out and and feel rewarded when they discover them
This hiding process often involves the creation of sub pages, sub-menus, and dropdowns that will require a good information structure which we’ll go through in the next step.
2 - Group & Organize
- Organization makes a system of many appear fewer.
There is no greater waste of time than organizing the unnecessary, this tip is about organizing what matters.
As humans we love organizing and finding patterns, we can’t help but to group and categorize the world around us. This exercise will come relatively easy and will feel very gratifying.
The main objective is to organize only what’s necessary, just like a successful garage cleanup requires letting go of the unnecessary before categorizing things into bins. Make sure to really apply the simplification tip 1, then you are good to go!
To organize your dashboard data and tools we recommend itemizing them onto post-it’s and start clustering or “chunking” them on the wall.Place the post-its relevant to each other close by and when you have some solid groups you can then assign a label to the whole group.If groups contain similar topics you might want to consider merging them, the fewer the groups the better.
As a last step you can organize the groups in order of importance (left most important, right least important) to visualize and determine what are the most important tools and data in your dashboard. This exercise will bring great clarity around the general abstract structure of the design.
3 - Visual Design Hierarchy
- How Users Read on the Web? They don’t. People rarely read web pages word by word; instead, they scan the page picking out individual words and sentences.
Creating a clear hierarchical structure is the best way to organize content in anything designed for humans, from stone tablets to papyrus scrolls, to paper, and dashboards!
Visual hierarchy is one of the core techniques designers use to organize content in user interface (UI) clearly for users. Based of the Gestalt psychological theory which examines humans visual perception of elements in relation to each other and proves how users have the innate tendency to visually unify elements into groups.
The visual presentation of UI elements can greatly influence the user experience of a product. When a product lacks visual structure, people can’t properly navigate it.
Unstructured copy has low legibility, so users are forced to make a significant effort to scan the information in order to find what they are looking for.
Our eyes process information in a particular way, people don’t read every word on a webpage, they only stop to read when something catches their eye and with design we have the power to influence where people look and create the right path for the visitor’s eyes to follow.
To keep people engaged, each page should make it easy to respond these questions:
Where am I? Why am I here? What should I do now?
Here are 4 tips to improve your dashboard hierarchical structure:
3A - Scanning Patterns
All cultures read from the top down and most cultures read from left to right, but there is more to that when designing dashboard.
When scanning a non text heavy page people follow a specific path on a page that is shaped like a Z. Typically, people first scan across the header of the page starting from the top left corner, searching for core information, and then go down to the opposite corner at a diagonal, finishing with the horizontal line at the bottom of the page from left to right.
So designing according to the Z-layout is actually pretty simple, start by visualizing an imaginary Z on the visible page section, then:
- Section one – This is the starting point of viewer’s journey so place the most important thing across this first horizontal line like your logo or navigation.
- Section two – Then fill the middle area across the diagonal line with content that interests the user, while still driving their sight downward. Usually graphics or images work well here.
- Section three – This last horizontal line is the finish line and you can place content that pushes the user’s sight to the corner where you can present what you want them to do next, like a call to action or an invite to scroll more.
The nice thing about the Z-pattern is that it can extend throughout the whole length of the page as a series of Z-movements (Not just one big Z-movement). The repetition of the Z-pattern creates a zig-zag pattern, which is very useful for longer pages.
3B - White Space
Designers love it, some people want to fill it. Whitespace can be a controversial aspects of design.
Also called negative space, it refers to the empty space between and around elements of a page. Despite its name, whitespace does not need to be white. It can be any color, texture, pattern, or even a background image.
Whitespace is not to be considered wasted space, but an active element, a powerful design tool that can help provide proper structure to a dashboard.
Whitespace can help group or separate UI components so that they can come together as an effective layout. Negative space also helps creating a visual hierarchy that can emphasize particular elements that we want to highlight to the users.
Integrating more empty space and reducing unnecessary elements will also drastically improve your website’s visual appeal making a dashboard seem lighter and more elegant.
Whitespace is also important at a micro-level in typography. Keeping the proper distance between characters and lines of text makes the content easier to read and it helps users to read faster, and easier.
whitespace can be hard to master as it’s both an art and a science that needs practice. When you hear the comment “There is just too much whitespace.” now you know how to respond!
3C - Patterns
There is no need to reinvent the wheel when it comes to usability. A great way to increase comprehension is to follow existing design conventions. Realize that people are already using a variety of tools and when they come to yours, they have a preconceived notion of how things should work.
For example, a stop sign is always an octagon and red, you will always know what that means whether or not the words are on there. You have been trained.
While this practice of designing predictable patterns can sound terribly unexciting, offering clarity and best practices for common actions means less thinking for the user.
Imagine that you have some tasks to accomplish, would you prefer to use a new tool for each task or a familiar tool? Learning a new tool takes time, energy, and concentration. When you keep things easy to comprehend, you reduce the barrier for users to quickly get to the benefits of your product.
Your goal should always be to entirely remove the need for instructions, making things as self-explanatory as possible, or try to solve the design issue causing the explanation. If for any reason instructions are necessary, cut them back to the bare minimum, and perhaps use this as an opportunity to make a delightful experience out of it!
3D - Golden Ratio
Designing according to the Golden Ratio is an elegant way to give your dashboard an harmonious and comfortable perception. The Golden Ratio is a tool that removes the guessing out of many design decisions and helps strike the right balance.
The Golden Ratio has been used for the last 4,000 years in human art and design, and our brains are hard-wired to prefer things that are proportioned according to the Golden Ratio. It’s a subconscious attraction that give us a positive visual impact.
Without going into too many mathematical details that you can find on Wikipedia, in its simplest form the Golden Ratio is just the ratio of the parties to each other as 1: 1.618.
Mathematical calculations are boring for most of us – while designing your dashboard keeping in mind this simple formula can help strike an effective composition where the elements work together to make a pleasant experience.For example, consider the Golden Ratio as a guideline for determining dimensions of a two-column layout. For example, with a total page width of 1200px, the main column would be 742px (1200/1.618) and the sidebar would be the remaining 458px (1200-742)
You can also use this ratio to calculate spacing and balance negative or positive space. Determining the spacing between elements can be a rather time-consuming work of guessing but the Golden Ratio structure can help you guide where to place each element. Just overlay the Golden Ratio grid on top of the design and try to align things accordingly. This way the proportions are more calculated and not just ‘instinctual’.
The Golden Ratio is also very useful in typesetting, to proportion different typographic levels and set an armonius hierarchy. For example, if your body copy is 16px the sub header could be 26px (16*1.618) and the main headline 42px (26*1.618)
Designing according to the Golden Ratio makes your dashboard design feel naturally familiar to the user and helps set a positive visceral reaction bringing your design from good to great.
Because we use the Golden Ratio so much at Meno Design, we have developed an handy app called <a href=”https://itunes.apple.com/us/app/goldie-app/id1375037046?mt=12″><b><u>Goldie</u></b></a> that helps you visualize and calculate the Golden Ratio on your Mac.
Delight
- Delight promotes word of mouth.
Finally, the topic I’m the most passionate about! Evoking positive emotion by going beyond user expectations.
Your aim should be to delight your customers and there are many guidelines out there for designing for delight, but not many rules. That’s why when we are needing to make a design decision we often hear from designers “It depends!”
Delight comes first and foremost from a problem being solved, even if the problem was introduced by the product you have created.
Designing for delight means understanding how people think, what makes people tick, and understanding the mental limitations people have.
1 - Be Human
Making a product feel human is about understanding how to be human, and how to always add a personal touch. How to make someone feel comfortable, to smile and that treats users like superstars.
Delighting your users is about removing all the little annoyances, offering functionalities users didn’t know they needed, facilitating tasks they don’t like doing, and taking mundane work away from users so that they are left with an interaction that truly helps them accomplishing their goals.
For example, people tend to be really bad at remembering things and doing math. Luckily tho, that’s what computers do best, so if you are able to present information to users in a way that helps them get results rather than creating more work for them to do, users will be stoked.
Make it easy for people to remember things and not do math or have to remember a lot of information. Things like facilitating notifications of upcoming task, offering deadlines, calculating totals, working-out breakdowns, or even something as simple as marking clicked links a different color are all great ways to do the heavy-lifting for your users.
2 - Use the Unexpected
3 - Graphical Representation
The most successful way to make things easier to remember is by using a combination of words integrated into graphical interfaces. Every one of us think through images, that’s how humans are wired.
Humans didn’t use language up until relatively recently, abstract concepts and numbers are relatively new to the human mind in the perspective of human evolution.
Humans existed over 2.5M years ago, but language developed hand-in-hand with our tool-making skills only for the last 50.000 years.
We are insanely good at visualizing information. That’s how we think and graphics engage the the brain more, and facilitate the remembering process.
4 - Movement
Evolutionarily, there are some stimulations that resonate with the ancient part of the brain. Movement, for example, catches attention because in the past something that moved was likely a threat, like a tiger in the forest.
Animations can help tell a story, and make something memorable. This can be as simple as having movement hovering over things to denote click-ability, having a simple animation to certain graphics or a video explainer. Make sure to strike a balance between static and animated. If everything is animated, then nothing is interesting anymore and becomes more of an annoying distraction.
It’s important also to keep a sense of movement throughout the experience, using things like active verbs “Continue shopping” or “Checkout” help tell the story of what comes next.
5 - Keep it Real
One way to create a delightful and intuitive interface can be by mimicking the physical world. Google Material Environment Guidelines express this beautifully:
“In the physical world, objects can be stacked or attached to one another, but cannot pass through each other. They cast shadows and reflect light.
Material Design reflects these qualities in how surfaces are displayed and move across the Material UI. Surfaces, and how they move in three dimensions, are communicated in ways that resemble how they move in the physical world.”
Another way to create an intuitive dashboard can be by copying a successful one that already exist and people are familiar with.
People are innately good at responding to stories so if you are able to wrap your product or message in a story it will be remembered more easily.
Here is an example of a practical story, a checkout experience:
- Pick a product
- Add it to your cart
- Go to checkout
This story is based on real life experiences and changing it would make things confusing. Mimicking reality just makes sense, so let’s not mess with that for as long as we live in reality. If you feel like changing a story from what people are familiar with, make sure it can still relate to people.
6 - Attractiveness
Our brains work differently based on how we feel (Pleased vs Worried, Relaxed vs Stressed) so when we work with attractive products which make us feel more pleased and happy, it’s likely that we pay less attention to minor annoyances that a product can have. The opposite is also true. If we work with an aesthetically unpleasing product we get frustrated much more easily. As Don Norman sais “Attractive things work better”.
According to Don Norman there are 3 levels of attractiveness and ideally your dashboard can address all 3:
Visceral Attractiveness
This is about things that we subconsciously find attractive because of design and aesthetics. For example, brains have a natural attraction to certain colors, shapes or things like faces, especially those showing strong emotion. The faces don’t even need to be human, our brains care about young, helpless, things, like puppies and babies. Or puppies hugging babies.
Brains care about things that cause a feeling. Having an emotional response helps get information to a deeper part of the brain, causing things to be better accepted, remembered and repeatedly used.
Think of the iconic Hello Kitty character, the attractive round interior of a Mini Cooper or Taco, the mascot of my beloved Trello task management tool.
Behavioral Attractiveness
This level of attractiveness is also subconscious, we are not aware of it, and it’s about how a product can meet our needs while using it, how it makes us feel in control, it’s about performance, functionality, and usability.
Think of the feeling of driving a sport car on a demanding curve, a sharp and balanced japanese knife, or a sophisticated stock trading dashboard.
Reflective Attractiveness
This level of attractiveness has nothing to do with the product itself. It’s about your self image, what does a product say about me? How am I perceived using this product?
Think of how high profile tech companies never advertise product features, but a lifestyle.
Think of how you feel wearing Toms shoes, or using Lyft instead of Uber, or owning a Tesla. It’s about the image you project to the world.
7 - Remove the Little Annoyances
Having an attractive design will diverge the user attention from the little annoyances, however hiding annoyances behind a beautiful interface it’s not the point, you need to put extra effort to remove them.
It’s actually not that hard to spot the the little annoyances in a product just by observing people doing their work. Listen to things like: “It’s always been that way”, “I always make that mistake”, or “I hate it when…”.
Catch these annoyances before your design goes to code. Catching them afterward maybe too late.
The best way to minimize annoyances is to start with the minimum amount of interfaces, remove options, and make smart defaults. New elements should be added to an interface when there is a demonstrated need.
Less interface means less to learn, search through, remember, and process; also clean interfaces reduce friction and smooth the user’s path through the interactions
This focus on removing small annoyances also has the benefit to avoid turning a small project to turn into a large one.
The result is a product that people actually want to work with and brag about.
This concludes “Dashboard by Design – Pretty much everything you need to know to design tools that users brag about.”
I hope the principles we have gone through will come in handy valuable while designing your dashboard. For any feedback or question feel free to reach out to me at ignazio@menodesign-31.mystagingwebsite.com
Ciao,
Ignazio
Thank You
