Intro to UX: Design Effective Dashboards With Brain Science | Cody Hebert | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Intro to UX: Design Effective Dashboards With Brain Science

teacher avatar Cody Hebert, Senior Product Designer

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

10 Lessons (26m)
    • 1. Introduction

      2:31
    • 2. Our Primal Brain

      3:30
    • 3. Memory

      2:23
    • 4. Miller's Law

      1:28
    • 5. Cognitive Load Theory

      1:55
    • 6. Hick Hyman Law

      1:45
    • 7. From Brain Science to Design

      1:13
    • 8. Be Contextual & Classify

      3:51
    • 9. The Inverted Pyramid & Data Visualization

      6:00
    • 10. Your Class Project

      3:10
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

199

Students

1

Project

About This Class

In this class, you will be introduced to different types of dashboards used today; and how to apply brain science to design them better. If names like George Miller and John Sweller don’t sound familiar, get ready for a rollercoaster ride of learning! You will learn why dashboards are a core necessity in today’s society, what they are used for, and the different types of visualization methods used within them. The class project will allow you to design your very own dashboard applying the knowledge learned from this class. This class is geared towards students who are new to UX and want to get a better understanding of design principles in real scenarios and experienced designers who want to broaden their understanding of how effective dashboards are designed.

Meet Your Teacher

Teacher Profile Image

Cody Hebert

Senior Product Designer

Teacher

Hello, I'm a strategic, enthusiastic designer, with a focus on creating fun, interactive, and intuitive products. I crave continuous study in behavioral and cognitive psychology.

Find my work at https://www.behance.net/codyahebert

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Introduction: Hey, guys, My name is Cody. A beer. I'm a product designer with the focusing cognitive and behavioral psychology. This class is all about dashboards and why our brain just so attracted to them when we think about it. Dashboards air everywhere from inside our cars to business analytics tools that were used everywhere. People rely on dashboards to not only do their jobs, but toe actually allow their cars to function. And this class will be learning about different dashboard classifications and why they're so important. Brain science techniques and philosophies will also be applied in conjunction with all sorts of design principles to create effective dashboards for our users. This class is geared towards students who are new to you. X and one apply design principles to real life scenarios. We'll be talking about science design psychology. So even seasoned designers with 10 15 years experience can take a lot from this course. Not to mention the class project is going to be amazing will be applying our cognitive design hacks as well as the design principles through data visualization that you'll be learning to create your very own dashboard. I'll step you through each part of data visualisation that you'll be learning and you actually apply those to either A low fidelity are high fidelity mock up to be ableto upload and share with everyone else in the class. This is gonna be a great time. We're gonna have lots of fun. I can't wait to see you there to get started. 2. Our Primal Brain: this section is all about our primal minds and the theory of why the unknown is uncomfortable from an evolutionary standpoint. If our ancestors had control of their environments, they had a much higher chance of survival. Our subconscious mind prepares us for freeze fight or flight response, depending on our perceived level of control that we have in the environment. There's a specific part of the brain called the brain stem that helps register what's known and what's unknown when something is registered as known, we approach it as being safe, are preferable. But whenever something is registered is unknown. We approach it with some suspicion and perhaps cautioned that there may be danger to get a better idea of where this brain stem is located at. Let's take a look at this diagram. Here we can see that the brain stem consists of the midbrain pons and the medulla oplan Gotta it creates a carrot like structure at the bottom of our brains. Now I want to give you an example of a real life scenario to better describe the concept of unknown equals uncomfortable. Recently, my wife asked if we could go to a new restaurant that we had never been to. She had spent countless hours reading on Yelp, looking at photos studying their menu. She knew exactly what the restaurant consisted of and what we were walking into. But when she dropped it on me and said that she wanted to go to this restaurant, I instantly started getting anxious and maybe a little bit stress. I knew it was because I knew nothing about this restaurant. I didn't know how busy it would be. I didn't know what types of food was gonna be served. I didn't even know where the restaurant was located. So how did I get over that stress response? How did I get over the unknown factor? Well, I did exactly what she did. I went on Yelp. I read some reviews, I looked at the menu. And would he note the restaurant looked great. The food was amazing. We went over to the restaurant. We had a great time. It was exactly what we expected of the restaurant. It wasn't like we were sitting on the side of the mountain with rapid waters hanging on for hard dear life. Or was it a fast food joint where we had kids running around ruining our romantic evening. But the idea that I didn't know what type of rush on it waas before we went in there is what made the entire night feel uncomfortable. Before I did my own studying. Let's look at one more example to really drive home. The unknown equals uncomfortable philosophy. Let's see, at the end of the day, you're ready for bed. You're tucked in your nice and warm. Maybe your home alone. Or maybe with your spouse, you hear a sound, or maybe the power goes out. The first thing that jumps into your mind is wow, Is someone in my home or Wow, that horror movie that I watched last night? Is it actually coming true in real life? These are all responses from the brainstem telling yourself, Is this an unknown or known situation? Most likely, it's unknown. So you having those feelings of stress and anxiety due to the idea that you don't know it's happening in your house. Now you'll probably get out of bed with a flashlight and realize that nothing really happened there. Nothing severe. But that initial thought is the concept of what is unknown is uncomfortable to us not only now, but has been for thousands of years 3. Memory: this part of the class is about memory and which parts of our brains air used Humans are not robots. We have very finite amount of memory and brain space. Think about the last time you went to a restaurant. Do you remember the name of the waiter or the waitress that you had? Ah, what about that last networking event? Do you remember someone's phone number or even their name? Memory is a very complicated process, not to mention we have working short term and long term memory. But I promised you that we would have psychology, design and science. So this is a chance to look at a diagram and get a better understanding of what our memory is and which parts of the brain dislocated in here. In the diagram you see, we have the prefrontal cortex, the amygdala, the hippocampus and the cerebellum. The prefrontal cortex and the cerebellum process and retain new memories. They can also ate in creating new memories. In the case of injury or loss to the hippocampus, we have the prefrontal cortex in the front of the brain and the cerebellum in the back, a prominent function of the prefrontal cortex is working memory. This allows us to build furniture, even follow a recipe. We'll go over working memory more in a later section. When we talk about Miller's wall, the cerebellum is in charge of implicit or motor memories. An example is when we learn to shoot a basketball for the first time. We initially have lots of miss shots. However, the brain can adjust their shots by adjusting the movements based on errors from the previous miss shots, and they're produced more accurate ones. It's known that the cerebellum is responsible for this motor learning and memory. The amazing plays, an important part and how members were stored. Because storage is influenced by stress hormones, An example would be the anxiety you have been going to the dentist after a root canal or cavity. I don't know about you guys, but every time I think about the dentist, I get an increased heart rate and sweaty palms. Every time the hippocampus is job is to send information to cortical regions that give memories meaning and connect them with other connected memories. It's also part playing in memory consolidation, which is the process of transferring new learnings into long term memory. If the stimulus is strong enough 4. Miller's Law: and the next couple of sections. We're gonna learn three brain science hacks to help you design better dashboards. The first brain science hack is by George Miller, and it's Miller's Law. This states that the number of objects an average person can hold in their working memory is seven now working memory and short term memory or two different things. Many people get them confused, so I'm gonna help explain what the differences are and why Working Member is specifically used for things like building furniture are following a recipe. It's responsible for temporarily holding information available for processing. Another example that we have here is reading a book. You're using your working memory to read each line. The entire concept of the book, however, is held in your short term or long term memory, depending on how good you think it ISS. Next, we have short term memory. It's used for things like remembering people's names at a networking event, or even what you have for lunch. Oh, in my all time favorite, where you parked your car. Unlike your working memory, though, which stores in foot speeds of a light flicker, short term memory can temporarily store small chunks of information. It's also possible that we could become overstimulated by trying to store too much information and are working or are short term memory. And in that case there's a theory called cognitive overload, and we're going to be discussing that and the next section. 5. Cognitive Load Theory: in this section, we're gonna discuss brain science Hack number two John Swell ER's cognitive overload theory . Cognitive overload happens when are short term and working memory become over flooded with too much information at once. This leads to frustration and even compromise decision making. So how do we fix this? How do we overcome the limitations that we know exist about working in short term memory? As a designer, I say dashboards, Dashboards helped by only showing relevant information. Teoh each specific user on one screen within their I Span. Now I get the question a lot. Won't there be too much information on the screen? There'll be words everywhere. How will the user ever find what they're looking for? And my answer to that question is visuals. Visuals speak louder than words, but not just any visual types. It's important to understand which data visualization is needed for every dashboard for your users need. And to show an example of that, I'm going to show you a graph to Grass. Actually, that should the same information but formatted a little bit differently. In this first graph, we see the annual sale summary on the left hand side. We have the amount spent and on the bottom we have months, acid duration and this next graph. We have the exact same information, except it's formatted a little bit differently. We have sales in U. S. Dollars on the left hand side and the months in duration at the top. So my question to you is, do you remember which month had the highest number of sales and witchcraft did you use to remember that and come up with your answer? But take away here is that we should always use charts and graphs to reduce the dependence on our short term memory when building products, especially dashboards. 6. Hick Hyman Law: in this section, we're going to talk about the final but third brain science hack, and that's the hick heim in law. This law states that the fewer options you provide to your users, the more enjoyable or even pleasurable, what the experience will be. And many people say, This doesn't sound like me. I love options. I wanna have a variety. And while you may feel that way, your subconscious brain is telling you something very different. In a recent study, we found that by adding options and more choices, not only slow down our users from completing a specific task, but also increase the abandonment rate on e commerce websites. An example of this is relevant to a project that recently worked on It's a food delivery app. The home page consisted of a never ending list of restaurants that users could scroll through to find a restaurant that they wanted to order From. Whenever we asked users about feedback on the app, they would tell us they wanted more variety. So we did exactly that. We met up with that restaurant partners to provide the variety that the users felt like they need it, but after we did that. We didn't see an increase in the order conversion funnel on check out. So we decided to run an experiment. We took users, favorite restaurants and the items that they ordered most frequently, and we put it on top of the restaurant list that already existed. The results uses not only ordered more frequently, but they converted much faster. Users even reported that they had a more enjoyable experience within the APP for dashboards . You should be mindful of how maney options you provide on the surface level but allow users to drill down to complete more advanced tasks if they need, especially in those analytical dashboards that will be discussing later. 7. From Brain Science to Design: So we've talked about brain science and why we do specific things. But in the next couple of classes were gonna pivot, and I'm going to give practical design advice and how you can design your very own dashboard. There's four things to consider when designing your dashboard. The 1st 1 is understand what the dashboard should communicate, and this is usually through contextual interviews. The second determine which type of dashboard is needed. The two types that will be talking about his operational and analytical, and I'll explain why those two is so different. The third is apply the inverted pyramid approach Now. This was adopted from a newspaper philosophy, but it's still relevant in dashboard design. The fourth use the correct visualization tools to convey information you remember. In the previous class, I showed two charts that were designed differently but showed the exact same information. You've probably remembered which state had the highest number of sales and one specific chart easier than the other, and that's why it's important to use the right visualization on every dashboard. So let's get started learning these design principles so you can create your own dashboard 8. Be Contextual & Classify: The first principle we're going to talk about is the contextual interview now. For these to be successful, you need to leave your assumptions at the door. You have to visit the users in their actual environments, and you need to understand what your users need to see. You don't want to throw too much of them all at once. And unless you're in the environment with them, you won't know what stimuli is happening in that environment that may be distracting them from doing their jobs. Let's look at an example here You can see a cockpit area on the left hand side with no pilots and no weather conditions. It's the ideal scenario. You can design the perfect screen with the perfect amount of buttons that's distraction free. But in reality, if you conduct a contextual interview, you can see on the right hand side of the designer is sitting with the pilots in the cockpit. The weather conditions are pretty poor. There's lights, there's buzzing. There's all kind of external stimuli that was not taken into account on the left hand side design that a contextual interview would have showed the designer. This is why contextual interviews are so important. Well, if you designed the button that was in the far right side of the control panel that was easily accessible and visible when the lighting was perfect. That scenario that looked it on the right hand side when the weather was poor and maybe even a couple of lights went out in the cockpit. That button may effect if that plane land successfully are not, depending on the design decisions that you made in that scenario. Next, we'll go over the two types of dashboards you can use in your class project. The 1st 1 is an analytical dashboard thes, contain vast amounts of data and are used by business analysts to make long term business decisions. The second is an operation of dashboard is the most commonly used from monitoring and analyzing a company's activities and real time. Here's an example of an analytical dashboard on the left and an operational dashboard on the right. Analytical dashboards used to show vast amounts of information but usually requires lots of interaction from the user to draw down to specific results, filtering in drill downs or key components that create the success of an analytical dashboard. Now I put together three bullet points to kind of capture what an analytical dashboard is. The first you'll see grids. Grids were extremely common within analytical dashboards to keep the content organized. The second they're very flexible, and they allow from many alternatives. With all the filtering that you can do and drill downs, you have to keep the dashboard flexible. Always includes drill downs and filters. Once again, that's probably one of the most important ports of the analytical dashboard operational or sometimes called monitoring dashboards. 80 users in getting a quick glance of how the organization are the company is doing, you'll see these a lot and big tech companies. When you walk in for tours, they'll be monitors all over the screen, and you'll see real Time analytics and how their companies are performing. Now a couple of bullet points on what operational dashboards usually consist of. They often compare sub units or data. There's many graphs illustrating target areas of the company that people need to watch out for, and the data is usually real. Time are almost real time. So in this class we talked about contextual enquiries and the specific type of dashboard classifications that air really common, and the next class will talk about the inverted pyramid methodology and even what type of data visualisation tools you can use when designing your dashboard. 9. The Inverted Pyramid & Data Visualization: We talked about the contextual interviews and the dashboard classifications, but now we're going to discuss the inverted pyramid I mentioned to you that we adopted the philosophy from newspapers that the more important big picture details are always at the top. And then we chunk content and a large medium and then more granular structure. And these two examples of the newspaper you can see on the right hand side. The classifieds have a couple larger squares or chunks of information, and then as we go down the paper, we get into, the more smaller adds. It's the same with dashboard hierarchy and high designed those dashboards. The top is usually the most noteworthy information. This is where you have the high level insights and the KP eyes, and in the second part we have the important details thes air, the graphs that have provided more context to how you achieve the KP eyes, or maybe even issues that arise that will prevent the company from meeting there. KP eyes and then a tertiary info is any granular details, and you can drill down to further explore. Now let's look in an example of a home dashboard that used this philosophy. Here we have a dashboard for Paul's home and the top left. We can see the total consumption of power that Paul is using. You can see how this is extremely helpful and knowing how much Paul is gonna paint on his next bill. But the next question is, where am I using all this power and the section on the right? We can see how many lights Paul has and how many are currently active. This is an example of a real time analytic using operational dashboards. Then, to get even more informative on the bottom left, you can even see which rooms air using the most power. All these insights come together to help all make better decisions on how to save money on its next bill. Now let's talk about some specific data visualization tactics used in dashboard design. The 1st 2 that we're gonna look at is the pie chart and the column short. The pie chart shows contributions from different categories. While the column chart is used for comparing values side by side in this usage trend pie chart, we can see social networks by account. Now, quickly at a glance, we concede that the right hand side blue section is taking up most of the pie chart. And on the chart we see that it's 52 accounts or on Twitter and then following that pie chart spectrum, we can see a darker blue shade at the bottom left, and that's 27 accounts on Facebook. This next pie chart is on yearly expenses, and it's broken down by categories. The huge blue section that takes up almost 50% of the chart. On the right hand side is houses and utilities, and that's 105 K of their yearly expenses. Next is the Yellow section, which is 25 k spent on transportation, 20 k on insurance. And all of these sections of the pipe chart come together to fill out the 200 k that has spent yearly on specific expenses. The next start that we have is a comparison chart. This comparison bar chart shows the Summer Olympics medal tally. On the left hand side, we have the count of metals going from 0 to 140 on the bottom we have the countries that were awarded these medals. When makes this chart so easy to read, as we only have two colors to look at. We have the bluish purple color and we have the green. But the fact that those two colors is side by side for each country, we can easily see how those years comparing and how many medals each of those countries are being awarded. In this slide. I want to show you a basic example of how those charts were created, so you have metric one on the left hand side, metric two on the bottom. We have months going along that metric to side, and we have numeric values going up on the metric one. On the bottom, you can see we have a comparison of the green and a comparison of blue, and they're always side by side for each month. This makes it really easy for you to make your own chart just by using this template right here, which I'll attach in the class notes. Another two common visualization methods is the bubble chart and the conversion funnel. The bubble chart illustrates the weight of values by circle size, and the conversion fund was really common by showing customer dropoffs and retention for a product, the bubble chart and the word categorization kind of go together and the sense of trying to tell you what are the most common words that customers are using to describe your business . This can be helpful with APP. Store reviews may be pulling some key words that your customers were saying into your operational dashboards of that investors or even the CEO or everyone in the company can get an idea of what customers are saying about a specific product. The conversion funnel is helpful for the folks in marketing and even the CEO if they want to know where their customers air going and where they're dropping off that and this funnel begins, he had 100%. It captures all total sessions. And then, as we get into sessions with product page views, the funnel starts getting smaller and smaller. So at 43.8% that's the number of customers that have actually viewed a product page at 14.5%. You have how many sessions that a customer added something to cart and then, of course, at 3.3% the sessions with the transaction. This is normally where the majority of your customers are jumping off because they see a price point. Or maybe they just don't want to invest in the product at this point. Either way, if you haven't e commerce dashboard, you definitely want to put one of these funnel conversion charts in there to give marketing an idea of how well you're converting your users. 10. Your Class Project: Hopefully, you learned a lot my class, from brain science to data visualization to dashboard classifications. Now it's your turn to put all this new knowledge to the ultimate test and design your very own dashboard. I'll start with some simple steps to get you started. Step one. Ask yourself Where would a dashboard be helpful or even informative in my day to day life? Step two. What information do you need dashboard to tell you to make more informative decisions? Step three. Write down what information you need to see and how you want to display that information. An example for this is what type of visuals are needed and this dashboard that we discussed earlier. Step four Draw Squares are blocks out on your paper using the inverted pyramid method. Step five at section title Sear blocks that defined the information the dashboard is providing and even at a dashboard title, Step six. Add color using markers or pencils and even bring it to the computer. Using sketch are Adobe X, D and Fig MMA. You choose the software you want to use to bring your dashboard to life. Step seven. Upload your dashboard example to share with the class. I can also provide feedback to you. If you'd like to use it as a portfolio piece, be creative, have fun and check out these dashboard examples to get those creative juices flowing. How even Show some dashboard examples from low fidelity toe high fidelity To give you an example of what you can create banks again for taking this class, and I really can't wait to see what dashboard designs you upload.