My name is Kevin.

Just make sure that you're in the right spot.

This is the spot for dashboard design tips.

I'll be talking about dashboard design, info buttons, and toggle switches.

And let's get started.

First things first, please make your purchase decisions of any Tableau products and service based on existing features and services.

This conversation may go well or not, it may be awesome or awful, it's too early to tell, so please make your purchase decision wisely.

With that said, I'd like to say thank you to all of you for attending the session.

And let's talk a little bit about myself so that we can get to know each other a little bit better.

My name is Kevin, Kevin Wee.

If we have any Mandarin speaking people here, it's Huang Kewen in Mandarin.

And there's several things I'd like to know about myself before we start the session.

First of all, I've been using Tableau for more than five years.

I'm currently the lead BI analyst at Discover Financial Services.

I'm also a Tableau ambassador.

That's just another word to say that when I'm not using Tableau at work, I use Tableau for fun to try to push the limit of the tool to see what it can do that's not commonly available at a moment.

I'm also a Tableau visionary.

That just means that I am very, very passionate in sharing my findings with all of you.

And I try to do that every year in a conference.

So with that said, let's talk about what you may get out of the conference.

This is the agenda.

I'll start with the demonstrations of a dashboard that filled with buttons.

Then we'll talk about how you may find good icon libraries for your own dashboard development.

I'll talk about a specific kind of button called icon buttons, and then a specific category of icon buttons called toggle switches.

We'll end the session with giving you all learning resources so that you could use them to create your own business dashboards as well.

Sounds good?

Great.

Let's get started.

By the end of the session, you should be able to do the following.

First of all, you should be able to find suitable icon libraries that are readily available to use for you for dashboard development.

You should be able to create custom-shaped icons with good user interface, or UI for short.

These icons, some of them should have good parameter interactivity.

Last but not least, you should be able to lease at least three applications of icon buttons in dashboard design.

So with that said, please raise your hand if you have explained the same thing about a dashboard or a metric over and over again in the last couple of days.

People just keep asking the same questions about a chart, a metric, a equation.

Now raise your hand if you have had too many filters or parameters in a dashboard.

People just keep asking for more, but you only have limited real estate in the dashboard, a lot of you.

How many of you have tried to find good icons on internet, but you always ended up with something that you're not sure whether they're proper or professional, right?

In a business context.

So today I'll try to help you solve all of these problems.

Before I demo the dashboard, there are two notes I'd like to give to you and myself.

First of all, a well-designed dashboard button should help the target users.

They should be easily used by them, but not bedazzled them.

They shouldn't spend too much time looking at them.

And the second thing is, later, I'd like you to pay attention to the buttons.

In this session, charts are not a hero.

These are the buttons that changes the charts.

We good?

Cool.

Now let's look at what can actually be done with icon buttons.

I have published this dashboard on my Tableau public account, and it's currently publicly accessible to all of you.

These are the three icon buttons that I will be demonstrating today.

Number one, it's a hover button.

So what does it do is when you hover your cursor on it, it will spill out an information about a dashboard or a chart.

An example of use would be in the chart on the right side here, it has a fancy metric called punctual delivery rate.

If you hover your cursor over it, you will read the definition of that metric.

So this could be useful for all of those indexes, all of those rates in your company.

The second kind of icon buttons that I'd like to introduce to you is called A-B switch.

It lets you switch between setting A and setting B in the same chart when you click it.

So here it tells you when you click it, it will switch from B to A. And when you click it again, it will switch back.

So back and forth.

An example of this application would be you can switch the X metrics between two different metrics.

Currently, the X metrics for this chart is sales per order by category.

When you click the icon, it will switch to profit per order by category.

The third kind of button that I'd like to introduce to you is a special kind of A-B switches.

It's called on off switch.

Basically you turn on or turn off a setting of a chart or a dashboard by clicking it like this on and off.

It's pretty much like the light switch at your home.

The example that I'm showing you here is sometimes when we compare the existing value with our plan value, like a target, like a forecast, we want to temporarily hide or show that forecast or that compared value.

So with the on off switch, you can accomplish so.

I know that all of this is very overwhelming with a lot of buttons on the screen, but now let's take a step back.

Let's talk about how do we actually get this icon buttons.

On the screen here, we have two set of icons.

I'd like you to spend about five seconds to think which one set, which set is better for a professional business dashboard.

How many of you say the bottom one?

How many of you say the top one?

Awesome.

We're in a good, we're in a good, we're in a good place.

Oh, by the way, I'm not a graphic designer.

I did not create any of this icons, but I do agree with you that icons on the top are better than the ones on the bottoms.

So what exactly that make them better?

According to Google material design, the icons that could be, should be used in a software or in our case, a dashboard, this should be simple in design, they should be easily recognizable.

That means that when you step at a very far and you can still figure out a small one, what do they mean without the text next to it.

And amongst the icons, they should have style consistency, meaning that the color should be similar.

If they have any line in it, their line weight should be similar, their thickness should be similar.

They should look like they belong in the same family.

So in the past couple of months, I have gathered about 26 icons that I deem they could be commonly used in dashboard designs.

And then by the end of the session, you will get all 26 of them.

Okay, so stay tuned, sit tight.

Now let's get back to these buttons.

And what do they actually do?

Let's compare these three buttons.

They look so different, right?

But actually, they're all coming from the same starting point.

All three buttons are actually one worksheet, like each of them is their own worksheet, with one custom shape mark overlap with a transparent shape.

For those who are not familiar with the term, a transparent shape is just a circle PNG file with zero opacity, or 100% transparency.

You can export it and then import it to Tableau.

Basically all of them starting with this starting point, they're just two marks overlap with each other with a transparent circle being larger than the actual icon.

And of course, we have some text in the tooltip.

What else that they have in common?

All of them arguably have a better UI compared to one shape mark icon button.

So in this small icon here, this is just like one shape mark.

So why do we need to overlay it with a transparent circle and everything?

So you can see that usually when people create one custom shape icon, when you hover over it, you see the very ugly black outline, right, making it very hard to read.

And then the second you move your cursor away from it, the tooltip text won't stay, it's just gone.

But if you hover over mine icon, you can move your cursor onto the tooltip, and when my hand's out, it's still up there.

So in a meeting, it could be easy for you to demonstrate the dashboard.

Last but not least, when you compare these three icons with the very original icon here, when you click it, it will have a lot of unrelatable command buttons above it.

It's just ugly and it's just confusing.

They don't serve any functions here.

But in my icon, when you click on them, not that there are no outlines, no ugly outlines, they're also very clean, doesn't have all of those command buttons.

So how do we accomplish them?

I'll explain that later.

But with that, let's talk about their differences.

These three buttons, one of the major significant difference is that they have different informations in the tooltips.

The first one just tells you whatever useful informations you want, and the second one it tells you to switch to B or A, and the third one telling you to turn on or off a dashboard setting.

The last comparisons between these three buttons would be what would happen when you click on them.

For the hover button, when you click on it, nothing would happen.

And for the A, B switch, when you click on it, it won't change the shape, but it would change the text next to it and a parameter value.

And then for the on-off button, it'll just change everything.

So how do we actually create them?

Let's go to my Tableau desktop, which you will also get the file by the end of the session.

Here, this is what I call a proto-button, the starting point of all three buttons.

You can tell that I just use min-zero as a placeholder to create the zero lines, and then I just place two custom shape marks overlapping with each other.

And to create that special kind of cleaner tooltip text, here are what I did.

For show tooltips, I select on-hover instead of responsive, so your tooltip will last longer.

And also, I unchecked the include command buttons option so that it doesn't have those weird command buttons show up when you click the button.

So that's how you create a cleaner proto-button.

So with this proto-button, all I did was I changed the circle to a transparent shape, and I hid all of those zero lines, and I changed the shape mark under it.

That is how I create the hover button.

So it's very simplistic, very clean.

All it does is just tell you one information, one information about a dashboard.

And here you will see that I have apple and oranges in the detail, and a lot of people will be like, why do you always have apple, oranges, pears, and strawberries in your dashboard?

The thing is, this, even though the top layer is a transparent shape, when you click on it in the worksheet, sometimes it will still glitch out a little bit.

So to prevent that, when I create the button in the dashboard action, I use something that

I call highlight deactivation, or some of the DataFam leader, they call it a false highlight.

I make Tableau, when we click on that icon, we force Tableau to compare apple and orange.

And because apple will never equal to orange, it will default to show all value, so there will not be any white highlights or black highlights on the button.

So now the button seems very seamless, very integrable into your dashboard.

Now let's look at some of the use cases for hover button.

Rather than showing the metric, or the metric definition, or SQL logic, or calculation formula, you can also show who is responsible for this chart, or who is responsible for the metric.

So that could be very useful.

And sometimes when your dashboard has some data issue, you can also show the data issue in a red alert.

And then if you have the link to the JIRA ticket or Merrill ticket of someone's taking care of that issue at the moment, you can place it in the tool tip too, so that when people use the click to go to URL function in the dashboard, they may directly access to the current status of that problem.

So this could be a very useful case.

Now let's talk about A-B switches and on-off switches.

They're actually very similar as I described earlier.

For an A-B switch, you just need to place what I call a flip formula in the text.

For those who are not familiar with the flip formula, it's basically telling us if the current parameter is A, then the answer is B. If the current parameter is B, then the answer is A. With the flip formula in the text, we can know what would happen, or which setting we could go to when we click it.

And for an on-off switch, it's just building one layer above of it.

Now in the text, it is showing you the current parameter, but we place the flip value in the tool tip.

So now we know when we click it, it will turn off, but the current setting is on, and so on.

And using dashboard change parameter function, we can use the button to control the parameter, and then the parameter control the chart.

Here are some of the examples.

Like I said earlier, you can change a metric.

In this use case, I'm changing the Y metric between monthly profit per order to monthly sales per order by clicking the icon.

Oh, by the way, for those who looks a little bit confused, basically this is a button.

These are the title of the chart.

I just create a space holder so that I can float that icon above of it.

You can also switch between two breakout dimension.

So practically with the A-B switch, you can switch metrics, you can switch dimensions.

These are practically everything, everything in Tableau.

Regarding on-off switch, there are a lot of things in a dashboard that you can turn on and off.

Here are some use cases.

First of all, you can group or ungroup the line charts like this.

When you ungroup it, when you hover over it, you read both the category and subcategory products.