nishtha's dashboard design - dimensional insight · 2017-06-13 · nishtha adroja di user...

©2017 Dimensional Insight, Inc.

Dashboard Design

Presenters: Rose WeinbergerNishtha Adroja

DI User Conference June 7, 2017

Welcome to the Dashboard Design presentation.

I’m going to get started now. My name is Rose and I’m part of the Marketing team here at Dimensional Insight.

Later in this session, you will see a demonstration by a member of our Measure Factory development team, Nishtha Adroja.

1

6/13/20172017 Jan Customer Webinar ‐ Dashboard Design


Today I’m going to be talking to you about design in the visual sense.

2



A word about style

Conservative FlashyFunctional

People sometimes confuse design with style. Design principles do not change. Yet style is changing constantly.

Here are 3 shoe styles: conservative, functional and flashy.

The choice of style is a personal one. Take these shoes for example. Your audience may have a preference for one style over another.

Their preference MAY differ from what YOU prefer.

My advice is to have a conversation about style early in your process. Ask questions about style in your survey of stakeholders. Get agreement about the direction of your style BEFORE you begin any work.

Get the agreement in writing. Say “These are the style parameters that we will work within.” And then list the font names, color codes, style descriptions like “conservative” and layout components that are agreed upon and have everyone sign the document like a contract.

3


If you do not use this method, disagreements about style can eat up a lot of valuable time. If disagreements arise, go back to the agreed upon style document and point out that you have adhered to the agreed upon style.

2017 Jan Customer Webinar ‐ Dashboard Design

6/13/2017

3


Agenda

Key Considerations– Hierarchy of Information– Ideal Number of Metrics– Fundamentals of Design

Mechanics– Fonts– Colors

Simplified User Interface Self Service Dashboard

Design Resources

So let’s cover some key considerations about design and at the end of my presentation I’ll cover some improvements we’ve made to assist dashboard design.

Please note that you do not need to take notes unless you just like to do it.

All of my slides and notes will be made available to all registrants after the conference is over.

4



Attendees have Version 6.4 and 7.0

Version 6.4 is “Classic” interface.– The Version 7.0 Interface may be changed to “Classic” in

environment settings Version 7.0 defaults to “Simplified User Interface”

– Benefit of built in tools to improve:• Navigation• Visual Design

BOTH environments require color, font and layout choices … that is the realm of this presentation

Customers attending this session may be using version 6.4 or 7.0 of DivePort.

6.4 uses the “Classic” environment.

7.0 has both the Classic environment and the new Simplified User Interface environment.

Dashboard designers working in both environments will find a use for thinking about these key considerations.

5



Key Considerations

The most important consideration is your audience. Do you know what they need in a dashboard?

6



Addressing key considerations

Survey users– Types of Users– Personal Preferences– Individual Needs

Decide on Content– Content for Implementation– Content per Page

Design Activities– Hierarchy– Style– Layout on a Single Page

There are some key considerations to address for dashboard design that will hold true for all dashboards, regardless of the intended audience or industry.

Starting with the most important consideration that I have already mentioned – your audience – you can start to build a very useful dashboard.

The entire process flows like the shape of a funnel.

You’re going to start with lots of information and hone all of it down to only what is needed.

7



Hierarchy of Information

Once you’ve surveyed your users and gathered all the content you’ll need, you need to make some decisions about layout.

8



Sales by Product Sales Growth Sales by Region % Goal % Discounted Items

Cost of Goods Sold Total Quantities Sold Quantities Sold by

Product Current Inventory

Sales Manager Example

Here’s some content that might go on a Sales Manager’s dashboard.

9




If everything has equal importance to the end user, the dashboard might look like this.

10




But when we know that Sales by Product is the most important thing to the audience, we make it larger and display it in the upper left hand corner of the page.

Essentially, you are contrasting size and position to differentiate the “Sales by Product” portlet from other portlets on the page. I noticed yesterday that Johan’s dashboard used the same method to differentiate the 5 user role buttons. He had 5 larger buttons at the top of the page separated by their location – the use of a row.

The highest contrast on a page will receive the most attention.

Other forms of contrast you could use instead of size and position are: Shape, Hue, Saturation and Value.

11




SalesGrowth

Sales byProduct

% Saels by Region

Sales ‐ %Discounted Items

Total QuantitiesSold

Sales –% Goal

Current InventoryCost of Goods

SoldQuantities Soldby Product

To contrast Shape – You might have the most important item displayed within a circle instead of a rectangle.

12




SalesGrowth

% Saels by Region

Sales ‐ %Discounted Items

Total QuantitiesSold

Sales –% Goal

Current InventoryCost of Goods

SoldQuantities Soldby Product

Sales byProduct

For Hue contrast – If all of your portlets exude a gray feeling, use a colorful background behind the most important item.

You’re probably starting to get the picture. So you could contrast saturation or value too.

Saturation is the intensity of the hue. Value refers to lightness and darkness of a hue.

13



Ideal Number of Metrics

You might wonder just how many portlets you should display on a dashboard.

It depends on your audience. Airplane pilots have hours and hours of training and need to know all of the information displayed on their dashboard to get their jobs done.

Are your analysts used to looking at this many pieces of data all at once? Is this amount of data even needed for them to do their jobs?

14



High information density

Will users “get it all”? Limits to human capacity for

seeing and comprehending

When there is a lot of data to communicate, one has to wonder if the audience will be able to effectively USE all of it.

Just like the riddle: “How do you eat an elephant?” … “One bite at a time.” … data displayed on a dashboard can only be consume one piece at a time.

The data must be processed by the end user in order to turn than data into meaningful information.

Good dashboard design makes it easier for the audience to see and process the data they are seeing.

15



???357122430!

So how much data SHOULD you display on a dashboard?

16



7 metrics per screen, (plus or minus 2)

Densely populated dashboards obstruct readability—Difficult to quickly

locate and understand information

Poor readability leads to poor user adoption

"The Magical Number Seven, Plus or Minus Two: Some Limits on Our Capacity for Processing Information" (Miller 1956)

You might want to try using “Miller’s Law”. Miller’s law states that humans can only process between 5 and 9 pieces of data in short term memory.

In other words, 7 plus or minus 2 is the ideal amount of “stuff” to display.

When there are more than 9 pieces of data, use “chunking” to facilitate use of the data in short term memory.

17




Here’s an example of visually chunking.

18




And this is another example of chunking.

19




How do you go about chunking portlets on a dashboard?

You might want to think about it like an exercise in fashion.

20




Just as Glamour magazine advises women NOT to combine too many conflicting patterns and shapes in one outfit …

21




Too many different graph types can lead to confusion

versus

… I advise not to combine too many different sizes and shapes on one dashboard. If you have a lot of similar shapes, chunk them together.

22




A refrigerator can be a sort of dashboard.

In an emergency, one might leave a note on the ‘frige.

23




But if the surface is cluttered and too busy, that important note will never be noticed.

It’s the same with dashboards. If a dashboard is too busy, an important alert may not be noticed.

Don’t clutter your dashboards.

24




You’ve got to act like a filter. You’ve got to filter all of this information about your users and come up with a solution that’s right for them.

What is the minimum amount of data needed for the user to get their job done?

25



Limiting factors

Short-term memory capacity Familiarity with data

If you have a power user that number might be 42!

So chunk the 42 items into 5 to 9 smaller areas.

26



Physiological Factors:

Capacity for seeing Illumination needs Color contrast perception Color blindness

When you survey your users, you may also want to find out if they have any

physiological limitations that would be important to know as you design the dashboard.

For instance, some people have trouble distinguishing levels of gray in low light

settings. For these people, muted colors are nearly impossible to tell apart.

27



Technological Capabilities:

Computer experience Browser interface experience Experience with Diver

You should also survey users about their technical backgrounds.

28



Walk A Mile In Your User's Shoes:

Ask Users:—What data do you want to see?—How do you want to see it?

– Are you a visual thinker?…verbal?

Identify key metrics:—Have users rank key metrics

by importance

As you act like a filter, you’ll be keeping the needs of the user at the forefront of your key considerations.

29



Then create a dashboard for userreview.

Iterative processWhat-if scenarios

You can then start your first dashboard.

Get feedback. Revise.

And repeat until you have the audience’s ideal dashboard.

30



Fundamentals of Design

ELEMENTS

Size

Shape

Distance

Hue

Saturation

Value

TECHNIQUES

Comparison

Contrast

Repetition

Juxtaposition

Proximity

EFFECT

Harmony

Agitation

Rhythm

Focus

Balance

Hierarchy

FEELING

Comfort

Discomfort

Joy

Sadness

Alarm

Security

It’s all about leveraging the fundamentals of design…

31



Fundamentals of Design

FEELING

Comfort

Discomfort

Joy

Sadness

Alarm

Security

To lead the audience to see what is most important to see.

32



Simplified User Interface

Let’s look at how Diver’s user interface design has changed.

33



Auto Parts Demo

Our Auto Parts Demo showcases the look and feel available with version 6.4 of Diver and DivePort.

Although there is nothing “wrong” with these styles, we wanted our version 7.0 of Diver to have a fresh look and feel.

34



DiveTab‘s original look and feel

Here is the look of one of our latest products, DiveTab.

With DiveTab, we wanted to provide a simple and consistent user experience for our customers.

The iconic user interface element of DiveTab is the menu page that you see here on the left.

The menu has large banners on top and buttons with big icons.

You can click on one of the buttons to view reports or presentations on the full screen.

DiveTab is super easy to use.

35



Healthcare Demo

Because the look and feel of DiveTab was so popular, we decided to bring the DiveTab design principles into DivePort.

You can see the result of integrating these design principles in the new look and feel of our healthcare demo.

Two major user interface changes have been implemented in this demo:

1. the Simplified User Interface (SUI) and

2. the Skyline skin.

The Simplified User Interface brings the same navigation system from DiveTab to DivePort.

And the Skyline skin was the skin we developed in our product, Teamer.

These two changes made the DivePort display look cleaner ‐‐ even though there are many things on a single page. This resulted ultimately in an application that is easier to use.

36



Self-Service Dashboards

So, as you can see, dashboard design is easier with the Simplified User Interface. Now, Dimensional Insight has gone one step further to make dashboard creation easier for everyone, not just administrators.


6/13/2017

37


Self Service Dashboard Functionality

Version 7.0 Solution

Self-service dashboard functionality?

NO

Version 7.0 Platform

Self-service dashboard functionality?

YES

Version 7.0 Platform

+ Measure FactorySelf-service dashboard

functionality?

YES+ automation functionality

The self‐service functionality is part of the 7.0 platform.

It is NOT available in 7.0 solution.

And for clients that add Measure Factory to 7.0 platform, there is increased automation functionality.


6/13/2017

38


Demonstration

But what IS self service dashboard functionality?

To help illustrate this functionality I’d like to have Nishtha Adroja give you a short demonstration.

Nishtha is working on her Masters in Information Systems and is also a member ot the Measure Factory development team.

[Nishtha gives demo.]


6/13/2017

39


Thank You

So you can see just how easy it is to create dashboards with this Self Service Functionality!

If you want to see more of the Self‐Service Dashboard Functionality, there are several things you can do.

You can sit in on the Measure Factory session with Jamie Clark or one of the Rules sessions with George Dealy.

Or, you can check out our Product Showcase today at 3:50 in the SkyLine Ballroom.

Nishtha will be there to demonstrate what can be done …

… and you will be able to ask any questions you have about how it is set up, or used, and so on.

[If there is more time, go into resources slides.]


6/13/2017

40


Resources

Let’s review the resources that you can use on your own after this presentation is over.

As I said before, attendees will be able to get a copy of this presentation after it is over … so there is no need to write notes at this time.

41



Content selection

Survey users or key stakeholder for content requirements: https://www.surveymonkey.com/user/sign-up/

In this presentation, I mentioned several times that you should interview your users prior to building your dashboard.

Some of our customers have a handful of users …. Some have thousands.

When you have a lot of user to survey, it may be useful to use a tool like Survey Monkey.

It is easy to use and free to get started.

42



Sample QuestionsWhat type of BI user do you consider yourself to be: ExecutiveAnalystPower User Casual User

When it comes to colors, I prefer:Company Colors Muted ColorsBright Colors Dark Colors

Please adjust colors for me:Deuteranope Protanope Tritanope

Which of these fonts is available on your system:Arial Courier NewGeorgiaTimes New RomanTrebuchet MS Verdana Don’t know

Please indicate yourcomputer platform:PCMac Workstation

Please indicate your operating system: WindowsMac Linux

Monitor Resolution:1024 x 7681280 x 8001344 x 10081600 x 12001920 x 1200Other:

What metrics would you like displayed?

There are many question you’ll need to ask your user.

Here are a few to help you start thinking about what to ask.

43



Content selection

Select the right graphs for each data display.http://www.dimins.com/blog/2016/08/18/how-to-select-charts-for-effective-data-display

I’ve written several blog articles that focus on certain aspects of dashboard design.

This article addresses the issue of selecting the right type of chart to accurately display user data.

44



Layout - Size in pixels &Device

Use GA to determine most commonly used screen size/device.http://www.dimins.com/blog/2016/01/20/how-to-determine-the-ideal-screen-dimensions-for-dashboards/

This article shows how to use Google Analytics to uncover your users’ most commonly used screen dimensions.

45



Color

Leverage your company’s corporate colorshttp://www.dimins.com/blog/2013/05/09/how-to-make-your-dashboard-interface-more-visually-appealing/

If you are having trouble deciding on a good color combination for your environment, this article shows how you can leverage your company’s corporate colors, which can improve user adoption rates.

I noticed that Johan was leverage the colors of the Dalarna University logo in his new dashboards. You can see how that change made the program feel more like it is part of the school’s activities – I love it!

46



Color - Trends

Check out this cool tool for exploring color combinations:http://www.dimins.com/blog/2016/02/16/a-cool-tool-for-experimenting-with-dashboard-and-portal-color-schemes/

Color can be fun or frustrating to determine. The tool found in this article makes color fun.

47



Colors – accommodating Color blindusers

Blog article on color blind users:– http://www.dimins.com/blog/2015/03/23/how-to-design-a-

dashboard-for-colorblind-users/

You may not realize that some of your users are color blind. If they are, you should follow the instructions in this article to accommodate their needs.

48



Current trend: add icons

https://thenounproject.com/ Access a seemingly unlimited amount of icons to use on

dashboards Remember: some people are more visual than literal

and these icons help them quickly understand the information being displayed

Finding high quality low cost imagery is not a problem when you go to this web site.

(You may recall that the new menu page uses images on every button so you might need a few images that are unique to your own company.)

49



Dashboard Design Take Away

Content needed on a dashboard depends on the user needs; get their input! See Blog article about feedback loop: http://www.dimins.com/blog/2016/03/31/how-to-refine-your-dashboard-design-using-a-feedback-loop/

This article shows how to implement a feedback loop so that you can continue to learn what is working and what is NOT working on your dashboards.

50



Use collaboration tool to gather feedback

I use Teamerto share design ideas in my office.

Another way to gather user information is to use an information sharing tool like Teamer.

That’s what I use in our office.

Now, you could also use the new Diveport collaboration functionality.

51



Easy way to get up-to-datesuggestions

Subscribe to our blog

And if you go to none of the other Resources referenced in this presentation … you should at least go to this resource and sign up for our blog.

That’s where all of the articles I wrote “live” … and by signing up for the Blog you’ll be notified of my future articles, as well as the valuable articles written by other staff here at Dimensional Insight.

52



How to learn more

6.4 User Manual

If you would like to learn more …

Information about how to adjust the colors and fonts in a portlet for version 6.4 can be found in the user manual that is available on our customer web site.

Just go to our web site and click on “Sign in” in the upper right hand corner of the screen.

This takes you to the sign in page where you can click the link to sign in to either the customer site or partner site.

You WILL need a password to log in to these sites. If you do not have a password, contact support at [email protected].

53



How to learn moreManuals

6.4 User Manual 7.0 Online HelpOnline help for 7.0 is bundled with the software. The DivePort section of 7.0 online help is currently under development and coming soon. In the meantime, 7.0 users should refer to the 6.4 manual that can be accessed through 7.0’s Workbench.

On the Customer or Partner site home page, click the link for Downloads.

On the Downloads page shown here with a huge gray box blocking my own personal information … there is a “Manual” column on the far right hand side of the page.

This is where you will find the 6.4 manual.

Online help for 7.0 is bundled with the software. The DivePort section of 7.0 online help is currently under development and coming soon. In the meantime, 7.0 users should refer to the 6.4 manual that can be accessed through 7.0’s Workbench.

54



Dashboard Design Training

http://www.dimins.com/training/ [email protected]

If you would like EVEN more help, you can sign up for our class on Dashboard Design through our Training department … it is excellent!

The best way to sign up is to contact support at the email address shown here.

55



Questions?

OK. Let’s see if we have time for questions.

If you do have a question, please send it to us via the chat box of the GoToWebinar portal.

If we do not have time to answer your question right now, we will follow up with an answer by email.

56


nishtha's dashboard design - dimensional insight · 2017-06-13 · nishtha adroja di user...

Documents