Data Visualization & UX Basics

1. Introduction: Hi, my name is Sven. I'm a freelance Data Visualization Advisor and designer. I have a PhD in Computer Science, where I focused on data visualization. I've researched topics such as improving students awareness regarding their progress, how to help job seekers through visualizations, and how to improve the experience of spectators of video games. In this class, we will cover both data visualization and user experience. Often in data visualization, we start from the data. We analyze the data, we try to figure out what the message we can get from the data, and we build products on top of that. We don't want to do that here. We want to take the approach of focusing on the user first. What does the user need? What does user want? How can we improve their workflow? How can we provide new insights? To do that, we need to follow a proper user research process. You learn all about this process in class while you're learning also the basics of data visualization. By the end of this class, you will have created a data visualization mock-up by doing user studies, understanding what the user needs, and using basic data visualization theory. See you in class soon. 2. Class Project & Overview: The class will cover both data visualization and User Experience Research. The idea is that you cannot really design a thing just by sitting at your desk and just designing away. You don't know what the user wants. You can have a general idea, but you can be a 100 percent certain that it's not just you who lose like no idea. So what we do in pretty much designing, pretty much anything these days. Now, be it tools or applications or data visualization, is that, you want to get into the head of the user first. Once you've done that, you can get a better understanding what they want, you can involve them in the design as well. You can create things and go back to them and show them and then get the feedback and literate and get it make it even better. What you will end up with in the end is something that's proven to be useful and usable for your target audience if you've done it correctly. So you will have something you can take to a client and you can actually say, okay, this is actually you good stuff. You don't have to take my word for it. Here's the data we can actually show that this is actually good stuff. So in this class, we'll do that process, that user experience process, and we'll do it by creating a data visualization. So we will cover the basics of data visualization or why you need to know to create your data visualizations. We'll see what makes a good data visualization, what you should watch out for, how you can actually trick the viewer, which is not something that you want to do unless you have evil intentions. It will cover all the basic theories you need to create your own sketches and mock-ups. Now regarding creating sketches and mock-ups, in this class will try to stay tool agnostic. Meaning we will not be covering any tools in detail. I'll broadly go through all the different tools that exist. Well, not all of them, but a couple of them that exist that might be useful for your process. I'll explain what I use. But I'm assuming certainly, because I'm guessing there's a lot of graphic designers falling in this course is that you already have the tools you like, and it's better to stick with them and have a quick process where you can actually create a things you want to create, instead of learning all these new tools for the sake of learning tools which is a bit pointless. Now if you're not a graphic designer, don't worry, I'm not either. I'm a computer scientist, so you can still make amazing stuff if you don't have that necessarily, that specific skill, we will go from sketches to beautiful digital mock-ups or just regular digital mock-ups, which you can take to your client, and you can actually hand them over to the development team and they should be fine to make that data visualization a real thing. Now that's for the overview, next up we're choosing our class project. 3. Hands-on! Choosing a topic: It's already time for your first assignment. I'm assuming you might have come to this course with a specific idea in your head, maybe a specific industry you wish to work for, maybe have a client with a specific problem you want to help, or maybe you're just interested in data visualization, and you just want to explore, and learn, and whatnot. You get to choose the project topic that you wish to work on. We're not going to give you any default data visualization problems for you to solve. What I want you to do is create something you're passionate about. It's going to, get much more involved and much more exciting, I hope. If you cannot figure out what to work on, think of maybe existing data visualizations or data sets that you know about and that you think are interesting, and maybe you want to rework or you may be think like, "I can do this much better." That's one way of doing it. The other way is like, think about stuff in your daily life that you're may be passionate about like for example, let's say you watch some specific sports, there's lots of data in sports, right? You could look at daily stuff like maybe your commute, you live place x and you're thinking of moving place y, how much is this going to cost you? I know it's going to be more expensive to live there, but your commute time is going to go down, and maybe the costs of commute is going to go down. Using visualizations, you can start comparing all of these things and you will have a better tool to actually help you make a decision on this specific topic. Try to figure out if your topic, try to be creative, find something you're passionate about or something that you think is going to be really beneficial for you to work on. If not, look at existing examples, I can think of one, for example, the Apple Watches activity visualization. It does it's job, but it's not really that great. So much stuff to do, so much things to think about. I will see you in the next lesson. 4. UX Basics: Research: In this lesson, we will cover UX. UX stands for user experience, something you've probably heard a lot about lately. It's not all that difficult, it's just the idea of getting into the user's mind, right? It is designing for the user. It is not just creating something at your desk and then just sending it out there and hoping people would like it. No, we will be sure by the time it will send this mock about that people will like it and it's been proven to be good and to be useful and to provide benefits to your users. When we're talking about usefulness, we want to create something that may be improves their workflow, improves their life. If you can bring joy to the user. That's great, right? There's also a serendipity. Serendipity is pretty amazing where people just use your visualization to explore data and discover these things. But in order to do that, in order to reach a design that's useful and beneficial to your users, you need to involve them. To involve them, there are different UX methods that we can use to have them participate in your design process. Here in this lesson we will cover four methods, which is interviews, questionnaires, workshops, which can be brainstorms or co-design sessions, and observation. Before we go through all these methods, what's very important is that you find people that are your typical users, right? You want to design for a specific target audience, so your participants should reflect that target audience. That's quite important. Let's say you're focusing on people in their twenties who want to buy a house. You want to have different ages, different gender, maybe different educational backgrounds, maybe different kinds of income. So make sure it's as broad as possible. Okay. So now for the methods. We'll start off with interviews. Interviews is quite straight forward. You just sit down with someone and interview them. You'll figure out a few questions beforehand and then you will try to get better insights into what they need, what they want. Try not to lead them too much, you want to get their ideas. You don't want to push your ideas onto them. You can bring designs if you want them. Try to keep them for more the end of your conversation. Let's say you've gone through these questions, you've got all their feedback. Then you can present them with your design and say, "Okay, I have these ideas, what do you think about it, is just going to right direction?" Regarding the number of participants, if they're expert, let's say you're making something for expert users, you don't need a lot of experts to actually get the feedback you want. If you're going for more general audience, just try to make sure that at least your participant pools, like I said before, covers a wide range of backgrounds. You can't interview hundreds of people. It's impossible. We're talking maybe like 10 or 20 if you can, but maybe even five at the start will be good enough. It all depends on you getting feedback and if you see the same feedback coming back again, then maybe you can even stop interviewing. The other method is questionnaire. Now with questionnaires, the advantages is that with an interview, we're getting a lot of qualitative information, we go very deep into the subject; the questionnaires will give you a more broad quantitative dataset, which means it won't go as deep, but you will be sure to have covered a much broader audience. With questionnaires, you can have like hundreds of participants because you can put these questionnaires align. You can use tools like Google Forms or Monkey Survey. You can put them in line and just have as many people answered them as you want. Now when you do that, when you're trying to get all these participants, you can either go to your friends and have them tell their friends and their friends about your questionnaires. You can put them online on your Facebook. You can go through Reddit, which is always very popular. They have this subreddits on specific topics, let's say there's a specific topic for what you're working on. Go there. These people are usually very passionate. They will criticize your work like hell, but at least you'll get really honest feedback, right? As for gradient questionnaires, try to avoid as many open texts questions as possible because they're going to be very hard to process. If you get like 200 responses on your question and they're all text, it's going to be very valuable, but it's going to be held to process them. So if you want to make your life easy, use Likert scales, they totally disagree to totally agree kind of questions. There are specific sort of scales you can use for specific types of questions. Third method is doing sort of a workshop. You need to get a bunch of people together and you can do this maybe to your client, you can do this by getting a bunch of people you know together, maybe. The idea is you do a brainstorm, for example, where everyone just throws out their ideas and you sort of try to converge together to a specific solution. There's many brainstorm techniques out there. I won't go too much into detail. One other way that suits data visualization design quite well, is co-design sessions, which means you will give people paper and they would actually start drawing their ideas. You talk about the problem, or you talk about a topic you're trying to work around, and you ask them to come up with problems they have, to come up with ideas and how to solve these problems. Then you can get all these designs, put them on a whiteboard, try to find like topics that reemerge and categorized them. Try to figure out to get it with the group, which ones are the best wants to tackle and which will have the biggest impact. The last one I want to talk about his observation. The trick with observation is that you already need something that the person is used to doing to observe. I have an example from personal experience where we had these counselors that were helping students, but the data on the students was spread across all these different systems. We had a lot of issues trying to gather all that data and have proper insights into the specific situation of the student. Now, through data visualization, we were able to solve it. But to arrive at that point, what we did was we observed how they worked and what the issues were they into and how we could improve it workflow, right? If you have a client, for example, that has specific issue like that, you can actually sit with their employees and see how they work. To do that, you can observe them and write stuff down. That's one method. You can audio record, but then you will have to be talking or they will have to be talking quite a bit on what they're doing. It's actually called think-aloud, which we will get to later. You can record their screen, which might be an issue if you're working with a client. There might be sensitive data, You'll have to make sure to get all the agreements in order there. Or you can record your screen and their face, which is actually really fun because you can actually see their expressions while they are working and you can see at the points they get frustrated. So those are all the methods. One thing to certainly take into account is when you do this, make sure for all your users, you get their age, you get their gender, you get maybe their education background, if that's relevant to the topic you're working on. If you get information regarding income and all that. You don't want to go too intrusive, but if it is important to your design, then it is important to gather all that data. It will also help you down the line when you're making decisions, between participant x and y, whose ideas you should put more emphasis on? Having the background information that can help there quite a lot. 5. Dataviz Introduction: Okay. Now probably the lesson you've been waiting for, some data visualization. Data visualization is pretty much all around us, right? For example, traffic lights, your battery, on your camera or on your phone is visual indicator of how much percentage battery that's left. So those are very simple visualizations, we see all them on the news. We see all those bar charts and pie charts, explaining things about politics, about voting, maybe certain trends, the weather is a nice example as well. Data vis can be quite passive, it doesn't have to be something you immediately interact with. It can be someone's explaining something, there's a data vis on the side, it sort of gives you extra information. Let's say you dashboard in your car is a sort of data visualization, showing you with the gauges, how fast you're going, how much fuel you have left. But they're all very passive, they give you information, it's not like you're constantly interacting with it, or constantly even looking at it. It can be very ambient, like it can just be in your environment changing of colors to indicate specific information. Then you also have, for example, infographics, which are very popular. Huge amounts of information distilled into one big visual representation usually made by graphic designers. They're very pretty, but they tell a story, but they're also not interactive, right? Then there's interactive visualizations and they're designed for the user to explore data. For example, Google Maps is a pretty good example. So when you're designing a visualization here you have to think, okay, what's the purpose of what I'm creating? Is it something that's going to be used for exploring data, right? We have no idea about the data-set for example, we just have all these data and we want to give the user a way of exploring it and finding their own insights, discovering interesting new data, seeing patterns and all that. Then we're creating data vis specifically for exploration. So that's one way. Now data vis can also be used in informative, it's something you've seen reports that people send to their managers, made in Excel which would show certain results that company has made and the person making those data visualizations, we usually keep it quite simple and straightforward and non-interactive just to convey the message they want to convey, right. Same goes for the news, they will have their story and they will use data visualization to support that story and just sort of proof that what they're saying is true as well, and give us sort of visual representation that helps the viewer understand what's going on. Now these things aren't interactive. You could also put them on news websites and make them more interactive if you want to. When you're designing, you also want to figure out, okay, how do I balance these two? Do I want to make something very informative? Do have a specific story to tell? I want the user to actually just follow that story, or do I want to give them complete freedom and have them explore data as they wish? So there's this different views cases for these two as well, you'll have to figure out how to balance that. Something can be sort of informative and story-driven. But there can still be some interactivity that the user has to act to go through the story. It's you're sort of guiding them through the data. On the other hand, you just have the complete freedom where you just let them explore, but it's fair going to be very hard for a user to find what he's looking for because maybe he doesn't even know what he's looking for. So it depends on your target audience and depends on what the goal is. If it's expert users, there's a big chance you want to make it exploritative, if it's just your general audience, you will want to hold their hand and you will want to control on what they see and how to get from one point to the other. 6. Dataviz & Devices: When you are designing, you have to think devices. Because a data visualization always exist on some kind of screen. Every screen has its own potential, has its own limitations, and you will have to cater to each of those. Usually in pace with data visualization, there's not going to be a one size fits all. It's not like with responsive design where you're going to be able to maybe just make a little bit smaller it would be fine, no, if you have more pre-screened estate, you probably want to use that, because the screen is going to be the reason why you're actually designing for this. I'll give you an example. If you are designing for your watch, you want to make it as simple as possible. It has to be small, someone has to understand immediately. You can't put too much detail in there. When you are designing for different screens, you'll have to think, okay, not only the screen estate, but what's the context in which the user will actually use this screen? If it's a watch, it's probably going to be a glance. People are just going to quickly look at their watch and look away. So you want to keep it simple, keep the information very limited. Now, when you're going through a phone, there's more interaction. So you'll have to think, "Okay, maybe this use case is better for interaction. The person has more time to look at the visualization, to explore the visualization, but you're still limited in screen space. So that'll impact your design as well. When you're looking at a bigger screen, like for example, a desktop screen, you have more screen space, so you have more possibilities to do interesting things and you can make it more interactive. It goes beyond just regular screens. You can think about displays in cars, you can think about public, big commercial displays. Those have all different use cases again as well. I had mentioned this before, there's also ambient displays, which are displays that exist in your periphery. You could even think of your dashboard being somewhat ambient, because it's not something you're supposed to be watching all the time. Otherwise you will have accidents. The thing there is, the design rules there are completely different because you don't want to distract user. You want to give information really quickly and you could even compare it to your watch. You need to give information really quickly, but you need to have a distraction as low as possible. Because if you're distracting, then the point and it's on the ambient display anymore. In short, it's not just the user and their personal needs you have to think about, you have to think about the context in which they are doing what they're doing. If they're in a specific workplace where there's big screens, small screens where there's lots of hazards, it depends on how complicated you can make the visualization, how much distraction you can cause, or how little. With that also comes how much information you can put into a visualization. If all went well, you already have a topic for your project. Now, make sure to also start considering what the context will be in which this solution you're working on will be used. Will somebody be sitting in their bed may be checking on their phone or will they be using a watch, would they be sitting in their car, working in the library, maybe at their workplace, maybe in a factory. Think about that very well. Also when you're creating your questions for your questionnaires, which is something you'll be doing in the next lesson. 7. UX Basics: Personas, User Stories, Storyboards & Use Cases: I hope you got a lot of interesting feedback from your participants. I hope you got a lot of ideas, and I hope maybe you have a better understanding of the problem now. Now, I'm not going to explain to you how to process this in a scientific way, I'm from an academic background, and we've only been trained to do so, but I don't think that's very necessary here. You could do a statistical analysis if your customer may be requires that for some reason, but usually in a professional environment, time is of the essence, you just need to grab all his data and go through this quickly as possible, and try to get an idea of what users actually want. Now, you can try and categorize this a little bit and let it guide your designs for sure. Still, you can ignore specific ideas or specific critiques by a user, just have a very good reason why you do that. Now, we'll go through a couple of ways of trying to summarize this information into a usable format for you to continue your designs. A way of doing this is by using personas, use cases, user stories and storyboards. This is a way of grabbing all that information and trying to put it in different buckets, and trying to understand, what are the different cases here and how should I tackle them? Which should I tackle? Which are important? Also, to get a better idea of the contexts which we were talking about earlier. There are different ways of defining personas and use cases, user stories and how people use them, but we'll just cover one way and that should be fine, because we just want to get the job done right. But if you wish to follow a different method, that's fine as well. What we want is you to create an amazing mock-up by the end of this class. Now it's time to start creating personas. What's a persona? By definition, a persona is a fictional character which you create based upon your research, in order to represent the different user types that might use your service, product, site or brand in a similar way. Creating personas will help you to understand your user needs, experiences, behaviors, and goals. That's a bit of a mouthful. We want to take all the participants you have, and all the information they have, and imagine these fictional characters that encompass a couple of them. If we had 10 participants, we might end up with one or two personas. What we do is, we give each persona a name and a background. Persona could be something like, "This is Jenny, and she lives in New York City. She's been struggling many years with her finances, and it seems to be related to X, Y, Z and she's looking for a solution to do A, B, C." You can go very deep into detail, You can give them a little background story, but you have to make sure that you understand where she's coming from. It has to feel like a real person with real problems, and these problems come from all the data you get from your users. Once you have your personas, you want to look at your user stories, and these are stories which actually explain the problem they have and they're trying to solve. We're trying to figure out what their goal is. Usually these are written in the format of, As x, I wish to do Y, so I can achieve Z. That's the idea. You create a couple of these, and then you have proper user stories which will also help you guide your design. You want to solve these specific problems. These have to be solved in your data visualization design. Try to come up with a bunch of these per persona, and then maybe merge them into a couple of subsets where you're like, it's actually covers all the details and all the different user stories that I need. Maybe you can categorize them as well, saying these are more related to these kind of problems this person has, or these are more related to the kind of problem. Now, we've talked about context before, and something that can help you in this process is by creating storyboards. These can be very simple, like maybe two, three, four panels is just fine, but you're actually drawing, don't worry if you can't draw, you don't have to be able to draw, you can draw stick figures if you want, but you want to draw the situation this person is in and how he's actually using your tool to get to the solution. For example, let's say you're creating a dashboard for a car. Let's say panel one is, I'm stuck in traffic. I'm sitting there in my car, I'm driving and I'm just stuck in traffic, and I'm really annoyed. The next panel could be something with little explanation saying, I'm stuck in traffic and it's really annoying, because I need to get to place X. I need to know when I'll be getting there. The next panel would be, this person may be on their phone or on their dashboard, to get the information, or touch it, or get the information that they want regarding the time of arrival. Then the next frame you see them being happy, because their problem has been solved. This is a very simple example, but this is actually just how storyboards work. We've put the person into specific contexts, which means, now we know what we have to design for as well. We know the context is a car, so we're not working, for example, for a computer screen. We focused quite a bit on the user. Even in the storyboards, we were still focusing on the user, although there was a small interaction, or with a small panel explained that they're using your tool or using your visualization, we now want to focus more on how the design will actually look, or what it will do. In use cases, you can focus more on the actual screens you'll be designing. If it's an interactive data visualization, you could start thinking about, "The user does x, y, and z to get to the problem they're trying to solve." For example, if you would be using Google Maps, you wish to find a specific city, then you would say, the user opens the app, the user types in a specific name of the city, green would be, the map is loading, and then it moves to the city and zooms into it. That's all of these different steps. If you're still doing static data viz, let's say you're doing an infographic, it's still possible, because you could say, a user will always go through your visualization, it's not like they'll understand all the information at once, so you could say, "This is the overall view," and then the user's attention is drawn to this part and then they move through the visualization. Even those steps are important to think about, because that'll also, again, define how you will design your visualization. 8. Hands-on! Processing your feedback: In this lesson, the only thing we'll do is I'll ask you to create some personas based on the data you have. It's actually a matter of processing your data. If you have already, that's great. You can turn them into personas. If you haven't yet, keep in mind the personas when you're going through your data. It'll make life quite easy. Create some personas, think about the user stories, and do create some storyboards if you like, and be sure to share them because it's always really fun to see what students come up with. It'll give other people also good ideas of how to do the storyboards. If you would happen to already have created some designs, feel free to share them in the class. 9. Dataviz Basics: Let's start with some proper data visualization basics. I'm not going to explain what is a bar chart or a pie chart. I'm sure you've seen these online or on TV. They're quite common. What I want you to learn is, what are the basics that make these visualizations work, right? Let's focus first on something called Gestalt principles. Gestalt principles explain how we perceive things. There's a bunch of these that we can use when creating data visualization. I'll go through a couple of these principles. First of all, we have proximity or if things are close to each other, we see them as grouped. That's one way of showing these groups of data points, for example, belong together. Another way to do the same thing is similarity, if things look the same we perceive them as belong to the same group. If we have triangles and circles scattered across the screen, we will immediate identify the triangles as being one specific type or one specific group and the same for the circles. Now another more straightforward way is using enclosure. If you have a group of items and you create a border around these items, they are also grouped, right? That's quite obvious. That's also one of the Gestalt principles. Then there is connectedness. When things are connected to each other, we also perceive them as belong to each other, having a relationship to each other. If you want to use animation and we're animating objects and we have objects move in the same direction at the same speed. We also perceive them as being grouped together and that's called the principle of Common Fate. We've upgrading a visualization. I want to know what am I trying to achieve? Am I trying to show a distribution? Am I trying to show order? Am I trying to show relationships between different data points. Do I want to compare different kinds of values to each other? Or are we talking about location? For example, maps, that's an obvious one. Depending on what you want to do, we have different methods of doing this as well, right? For example, if you want to be very accurate and want to have people compared things, position and length were griddy well, like we're very good at comparing length of different objects. Certainly if they're all starting from the same point. If you have an axis and you start your bar charts, for example, from the same point in series to compare distances. We're also pretty good at comparing angles. If you have specific different slopes that we can actually also compare, not as good as link though. These are good methods for accuracy. But once you start using things like, for example, surface becomes more tricky for the human perception to actually understand what's going on. Because when you have two, for example, circles, if they're one very small, one very big, we can say, okay, that's clearly bigger and for these estimates, this works fine. But if we're comparing two circles which are almost the same in size, it becomes really difficult to see. When you want to know exactly what the differences between these, you would have to calculate the two surface values, which is not something we can easily to do in our head right away. Color hue is even more difficult for us to accurately compare. It's used and you can use it just fine, unless you want people to have like a very correct estimate of what's going on. Those are actually another basics to get you started with all these things. You can start creating your own very interesting visualizations and there's plenty of examples out there and you can try to modify those and mix them together. But I do urge you to think about how you can actually abuse all these little laws and all these little tricks to create your own very interesting visualizations. There's this one really fun thing to do if you feel like it is to take two numbers, let's say, number four and number even and try to visualize them in all these different ways. We've done workshops on these and there's unlimited amount of ways of actually visualizing it. If you feel like it, I would advise you to try that out. It might give you some inspiration for your project as well. Here you can see a bunch of examples which go really beyond what you usually expect from data visualization. I love these exams. I'll put the links in the notes as well, because they look amazing, but they also actually show a lot of information in a very unique way. I do advise if you want more inspiration and go check at Pinterest. There's actually lots of nice screenshots on Pinterest. Not all of them are perfect. Some really look good, but forget about, for example, these laws we just saw and make these mistakes which actually confuse the user that actually don't really help you get any proper insights, but still it's great for inspiration. 10. Dataviz: How not to!: Now it's very easy to make bad visualizations, and I'm sort of hoping your intentions are good, but a lot of people actually abused them to show things that aren't really true. I'll go over a couple of examples. The most straightforward and the most abused data visualization is the bar chart. I mentioned this in the previous lesson, that we are good at comparing differences in length when we start at the same axis, what often new sides will do is they will start their value at say, 50, and then start comparing values like 50.2 to 50.7 percent. But, the problem is that the scale is completely off because we don't start at zero, and that's one way of tricking your audience. So you'll hear a lot of people say, pie charts are evil, right? They're usually right. If we have a bunch of values in one pie chart, it becomes tricky to actually accurately say which one is bigger than the other when the values are close to each other. When there's a huge difference, it's fine. Let's say you have two values in a pie chart, and the differences are huge, then it works fine. It's when the values are close to each other, then it's very difficult to actually see these differences, so don't use them in those cases. You don't want to use them either if you're using multiple pie charts. If you have two pie charts next to each other, and you want to compare the angles in these two different pie charts. It becomes really tricky to compare these values, don't do that either. Another big mistake and one that again news channels are known to doing correctly, is the incorrect use of surface area. Let's say we have a bunch of circles and they are indicating different values, a lot of people base the size of the circle depending on their radius. So if something is twice as big, let's say we have Value 2 and we have Value 4, what they do is they multiply the radius by two and suddenly you have a very big surface. This is a distortion of reality. The comparison isn't fair anymore. What you need to do is you have to calculate the surface, then you'll see the difference in size of the circle becomes much smaller. So these are just a few examples. I do urge you to look out for them, check the news, check newspapers and websites that actually abuses and call them out, call the out for it because there's a good chance or doing it on purpose, and if not, now they can learn from their mistakes. 11. UX x Dataviz: sketch & design: Okay, so we're going to start sketching. Now this can be on paper, this can be your iPad, it doesn't matter as long as you can draw freely. You don't want to use any specific tools, or take too much time, you just want to be sketching really quickly. Maybe you've already done this when you started your project. I urge you to, with all the information we've seen now, to just explore as many ideas as possible. Look online for inspiration, think about what you could do with your data. Think about how your users could use it, just draw as many ideas as you can. You're doing it on paper because it's just much more easy to iterate, you won't be holding back that much if you do something wrong, you can just easily start over again. Now once you have enough ideas, try to pick one or two out that you're going to refine, and then just maybe if you feel like it, draw them again but properly use a ruler, use some colors, but still don't put too much effort in it. The problem is if you're putting in too much effort, you probably don't want to start over again, so we'd still want to keep this very short and very quick. Now, once you have these done, it's not a bad idea to go to some users, some of the participants you had before, and show them and go through the ideas you have. Go to your users, get feedback, and go back to the drawing board. Keep doing it as a few times until you see that okay, this is actually working out, people are understanding my idea, it's starting to make sense, they see value, they see benefit in this idea. Once you're there, then we can go over to digital sketching. Now with digital sketching, what I actually mean is we will create a digital mock-up, it can still be very basic. What we want to do is we want to create a minimum viable mock-up. I want you to create the shapes of your visualization in a digital environment. I don't want you to put too much effort in getting pixel-perfect, this is still a rough sketch, so use simple shapes, use simple colors. It doesn't have to be pretty, it just has to be a better iteration of what you had before. Again keep it simple because we're going to take this back to the users, and we're going to get feedback and we will have to change it. Okay once you're done with sketching, and you've got enough feedback from your users, it's time to create a digital version, or you can use pretty much any tool you want, whatever you feel comfortable with. I would advice something like Figma, there is Sketch if you're using a Mac. There is Affinity Designer if you're using an iPad, Illustrator on any platform, use whatever you feel comfortable with. If I would advise, if you don't know any of these tools, maybe look at Figma because it is becoming a standard in a lot of places. But if you already have a tool, stick with it, don't try to learn a new tool. Just find something where you're really, where you can go through this process really fast. I urge you to use something that you're fast with, so you don't feel bad again about iterating, and changing it up, and throwing it all away and starting again. Because if you're good with the tool you won't mind actually doing that. I personally use the Affinity Designer app on the iPad Pro. I think it's great that I can just take it to wherever I go, and I can just work on these designs whenever I want. My advice is whatever you feel comfortable with, just use that tool. I'm sure you'll have a much better time making these designs. 12. Hands-on! Start sketching: We are finally starting with the design. Get all those ideas out there, put them on paper. Once you're there ready, when you think, okay, I've got a couple of ones which are really good, I want to show them to the user," just first refine them a little bit. So at least, they're cleared, they're just not scribbles and people actually understand what you're showing them. Be sure to stick around for the next lessons, because there will learn how to get feedback due to proper evaluations with the user's regarding usefulness and usability, and how we can use that to further iterate our designs. 13. UX Basics: usability & usefulness: Now it's time to learn about how to evaluate these designs. Now, we've already spoken to the participants, we've spoken to the users, we've gotten feedback on the original idea. Now we have a design, we have a proper ID on paper, which we want to get feedback on. Now there's two things we have to do, we have to test on usability and we have to test on usefulness. Now, usability is important because you want to create something people can use. Otherwise it's very pointless. But it's a complete different way of evaluating than trying to evaluate whether something makes sense to a user. As in, does it actually provide any value whatsoever. We will start with usability, there is this common rule that says you need about five users to do usability testing, it is because after five users the amount of errors in your design or in your interface, they go down, the same thing keeps popping up again, it's no use to be testing with more users than that. If we're talking about usability, there's a couple of things we have to focus on. There's learnability, how easy is it for someone to learn your tool? How easy is it for someone to use your visualization. There's efficiency, which means how efficient is your application? How efficient is your data visualization? Do I need to click ten times to get to what I want to do? Do I need to click two times. Now, this all depends if you're creating something for expert users maybe they need to click 20 parameters before they actually get their result. But if we're talking about a common user who just walks through a shopping mall and sees a huge screen with the visualization, you want them to get the information that they need as quickly as possible. For example, if they're looking for a specific shop, you don't want them to be clicking 20 times before they find the shop or for example, the big map. Then there is memorability, how more efficient something is, or easier it is to use. How easier they are going to memorize how to actually do the steps they're supposed to do. Now to evaluate all these things, you can use questionnaires, now I'll put some in the notes. There's lots of standardized questionnaires you can use to get feedback on these specific items. There's a SUS questionnaire which is very famous, which you can actually use as a questionnaire to get feedback regarding usability. What you can do is, every iteration of your design use that same questionnaire, and it gives you a number value which you can start comparing, if the value goes up it means your design is getting more usable. If it goes down, it means it's getting less usable. Now, do keep in mind that sometimes during an iteration you will add a feature, so the usability goes down. It's because you've complicated your design, which is fine. But the question is, how do I get that usability up again? Now next to questionnaires, you can also use something called a think-aloud protocol, and it's very similar to what we've seen before, is you put a user down with your designs and you just tell them, "Okay, go through my design and say what you see, think out loud, say everything you're thinking in your head." You can record this. Do make sure you get their consent for recording. You can write notes down of what they're saying, when they're thinking out loud, you can actually see what they're thinking, where they're getting stuck, what they like, what they don't like, but do make clear to your participants that it is never their fault. If something doesn't work, if they don't like something, if they can't work with something it's the designs fault. You're making mistake because they are not understanding what you're trying to do and you have to learn from them. If you want to keep your participants happy, just make sure they know, it's never their fault. Now what you can also do is you can do eye tracking, which you can do with webcams, doesn't really work that well. If you have the hardware then great, you can do it with proper hardware, but you can do eye tracking of where they're looking, which is always very interesting even on static designs, you can see what actually grabs their attention, you can see things they missed, things they never look at, specific areas in your data visualization that never get any attention. It's always interesting to know. We've focus mostly on usability now. Now what we want to focus on is usefulness. With usefulness we want to make sure that what we're designing makes sense, is of use to the user, to your target audience. It's again important as we said before, that the arrange of participants that they're broaden up to be covered a wide spectrum of what your target audience would look like. If we're going through this small iterations, then you don't need a huge amount of participants. But once your design is finalizing, when you're seeing, "Okay, we're actually getting there. I think this is pretty much it." Then it's always good to do a final evaluation where you put it out in the wild and get a lot of feedback online from a huge amount of participants. We've always talked about digital mockups being very static, we were just designing these in Sketch or in Illustrator, but you could use something like Adobe XD where you can create your designs but actually make them interactive. The interactive is limited till you click, you go to a different screen. You can do very small animation things, but this method is great for getting real user feedback where you're really using replication, without you having to be too much involved. Now if you don't want to do that, you can still maybe print out the different designs or show them on screen and somebody says, "Okay, I click there." You just move to next screen or you show them the next paper, that actually works fine, it's good enough to do these kinds of evaluations. That also means if you're creating a visualization mockup that's very interactive, you will have to design in different stages. You could have maybe an overview, a bunch of data points, and then if someone would click one, then you could maybe zoom into that and make a design where it zoomed in and showing a lot of more information regarding the data point, that's one example. There's observation, again, same as in the usability, we can use think aloud where they just say what they're doing and you can actually observe where they're getting stuck, what insights are they getting? What are they learning from your visualization, are they learning anything at all? It's never a bad idea to do pre and post questionnaires, which can be just verbally or on paper. Maybe you want to see how many insights there is on a specific topic before they see a visualization, and then you ask them the same questions after, and you can compare whether it actually made any difference. Did they learn more by seeing the way you visualize the data instead of what to know by default about this topic. Now you can also compare mockups. Now, sometimes you'll end up with two or three or maybe even four designs and you don't really know which one is the best. Now it's better not to choose this yourself and it's better not to ask your client to choose, it's actually better to go to your participants and see which ones make most sense to the user. Now to do that, you do a comparison study, very important is that you switch it around. You show design A to the user first, then you show design B and get their feedback. Now with the next user, you switch it around, you show design B first and then you show design A, because they influence each other. If they see a design, it will make them think differently about the second design, it's very important to switch those around. It's called within subject design, if you're doing it with one subject and just switching around, if you have a lot of participants, you can have 20 participants looking at design A, 20 participants looking at design B and then do a comparison, that's more difficult to do. Within subject study it is usually much easier to achieve. Up to the final assignment. 14. Hands-on! Design, evaluate & iterate: Okay. This final assignment, you will end up with your final mock-up. It's going to be quite a bit of work depending on how much you've already done in the previous assignments, but what I want you to do is arrive at a final mock-up. To do that, you will go to all the steps. You've already gotten the feedback on your idea. You know what's going to work, you've started creating some sketches already. Now, I want you to go to users with your sketches, get feedback, and start iterating. Start iterating first on paper, then start iterating on digital design, which is created in Sketch, in Illustrator, in Affinity Design, or whatever suits your needs. Use a bunch of the techniques I've talked to you about. Do some observations, try questionnaires, try whatever methods work in a situation you're at the time frame you have as well. Just make sure that you iterate over your designs that you use the feedback you get. Again, if you don't use a feedback from your users, make sure you have a good reason because you will have to go back to your users and explain why you haven't followed their ideas. Make sure to get as many participants as possible. Use the feedback you get from the users in your designs and your iterations, go back to them, get more feedback, and try to come up with a final design, which you can say you're happy with, but which you can say your users are also happy with, very important. I think it's not important to do usability when you're sketching your ideas and going to your users, you just want to get as many ideas out there and you don't want to be restricted by technical issues or usability issues too much. Once you finalize your sketches, then you can start thinking about usability and start evaluating that as well. I do urge you to share your final mock-ups in the project gallery, but not only that. If you can show us the entire process, start from idea, to sketches, to all your different iterations, to your final mock-up or even just when your start and your end is also a great, your sketches on paper and your project. I'll be very happy to see that. I think fellow students would learn a lot from that as well. Really curious to see your results. Good luck. 15. Recap: We finally reached the end of this crash course in data visualization and UX. We've learned how to go from an ID, to get user feedback, and go through this entire user research process to create something that's valuable to your target audience. I hope your creativity went crazy and you've created some amazing projects and I'm really excited to see what you've done in the Project gallery and I do urge you to also publish the process that you've gone through and show us your original ideas, your original sketches, and how it turned into a beautiful final data visualization mock-up. Do fall my profile, check me out on Twitter. I'm also on [inaudible] if you want to follow me there. If you'd liked the class, do leave a review. If you have any thoughts on how this class can improve, or if you want me to dig into specific topics even deeper in future classes, do let me know. All feedback is welcome. Hope you enjoyed this class and do let me know if this has contributed to you in your life or career in anyway.