 to speak five minutes more than what's allotted. So I'm going to use that for our interaction. I'm Sanjita Jairam. I'm from TCA, data consistency services. I'm part of the visualisation centre of excellence. I head the visualisation centre of excellence. We've been here the last two days. This is my first experience here in UX India. I was a bit surprised to see that not many visualisation topics have been spoken about when that's one of the latest, one of the latest trending aspects of both design as well as the implementation field. So before we go ahead, I'd like to know how many of you have worked on visualisation projects and how many of you, there's a lot of disconnect between visual design and visualisation. So I want to understand how many of you have worked so that I can, I know where to begin. Can you guys raise hands? You've all been on visualisation projects. And the rest of you, you've heard of what visualisation is about. Okay, I see some nods and I see some nos. So I could be repetitive to some people. But I'm going to try and keep it as interactive as possible. Feel free to stop me now that I have some time. We could address the questions right then and there. So my presentation is going to be revolving around what visualisation is. And assuming that we all know the key design principles of visualisation, what are the small nitty gritties that we need to keep in mind when we are designing? So that we are actually able to address the actual needs of the users. You have heard of David McCandles. He is a writer, he's an author, he's a designer, he works independently, he's worked for, he's done a lot of visualisation projects. His talks are one of the most viewed ones. He classifies visualisation like this. So let me take a step back and say, define what visualisation is. So visualisation is the art and science of creating or art and science of designing information and data that can be perceived by the human cognitive system. So you're basically using your design skills, you're using your visual aesthetics, your appeal to ensure that whatever information you're presenting on the screen is easily understood and easily absorbed by the user. Now the context of where visualisation can be used is everywhere. You have to understand the context and then you can apply those things. But largely if you look at in areas such as reporting, you look at some, sometimes in dashboards, sometimes in geospatial views where you're trying to depict underlying geography, metaphor and things like that, visualisation comes into play. Why it comes into play? Because you're putting in lots and lots of information and it's very tough for the user to actually digest those information. So you need to play around the way in which the user is able to absorb. You work on his cognitive abilities and you work on the colours, aesthetics, positions so that he's able to derive information out of it and actually make some decisions. So the objective of visualisation is always an actionable alert. So he's able to take some kind of action or he's able to take some kind of a decision and then go forward. Now quickly, the definition of visualisation as I said is the art and the science of representing data and information. There are four perspectives which form the four legs of visualisation. So if you see information, you will work with information. Information is one of the legs of visualisation. The second is story. Third is goal. Any visualisation needs to have an objective and the fourth is the visual form, the way in which you represent information. So whenever you start getting into a visualisation project, somebody comes and tells you that I want to have this cool looking visual in my project or I want to have the first and foremost you need to understand whether does it really require visualisation? Does it justify or they're just looking for some kind of a branding or they're looking for some kind of aesthetic improvement of what they have. So once you categorise and you say that yes, I need this, this is a visualisation problem and I think I need to get down to crack it. So you start working as a data scientist. So how many of you attended Aptul Manohar's session yesterday afternoon on Big Data? So the concept, I'm just carrying it forward from there. So there it's more technical. You're working around data. You're working around lots of different information that's available. So here we're looking at it from a designer's perspective. So when you start, you should look at whether you have complete information that is data about the visualisation that you're looking at. What is the story? So you will have lots and lots of data. You will have data around, you know, let's say, just for instance, you're looking at a company's performance. You will have data around the performance. You will have data around the people who are using that product. You will have data around how they are interacting with various forms of, let's say, campaigns that the company is actually conducting to accept their product or a concept in your visualisation. And then you define the story. They say, how? I'm not getting into the design principles. I'm not getting into the design principles, but I'm just going to just patch upon a bit on the design principles. And then we look at the goal or the objective. So the objective is something that you will need to have it from the beginning, never waver from the visualisation's objective, because your primary insights are going to be derived from your primary objectives of the visualisation. Then you go to the visual form. So 50% of your visualisation is about how it looks, the aesthetic appeal and the way it gets presented. Now, what are the characteristics of visualisation? Something that's very insightful. Our visualisation is something that has to give insights. If there are no insights, then probably nobody will look at it. They'll just spend about one minute looking at it and say, oh, it's so beautiful, but then that's about it. They won't use it. It has to be interesting. It has to be captivating. So it's a tough call that you need to take, whether you want to keep it insightful or you need to keep it captivating. So if you're actually designing something for, let's say, forecasting analysts from supply chain background, you really don't want to keep it captivating. You have to keep it insightful. So that's something that's a balance that we need to draw. We'll see how we do that as well. And it needs to be intuitive. So the story actually comes from the intuition. So you actually define your storyline, and then when you actually design it that way, where it is intuitive, it actually kind of supports the user, assists the user in moving from one area to the other when he's actually exploring your visualization. Then it has to be interactive. Interactivity is another key characteristic of the visualization. Now quickly, a successful visualization, if you see, is actually something that is a combination of all these four. So if I just were to go and look at this, if my visualization had data, and it had a goal, I will end up with simple plots. I'm not sure if this is visible. It says plots here, and then it says visualization here. So if you carefully look at this particular slide, it actually sums up what any visualization needs to achieve. And for us to actually do a successful visualization, what are the ingredients that is required? Now, ingredients reminds me of food, and food reminds me of recipe. My colleague, Balakrishna, is going to talk about the design principles of data visualization. So that session is happening at five. So people who find this interesting can go and take a look there. So that's more about the process and the key design principles that you need to keep in mind while designing a visualization. Now, I'm going to go to common issues. So we looked at what visualization is. I hope you all have, or you are in the same page as me, where I say that visualization is the output of, let's say, a business insight, is an output of advanced data analytics, a dashboard, or a geospatial requirement. We are trying to show multiple insights in a metaphor, a complex set of information. You're trying to display that. So assuming we are all there, what are the common issues? So as a business user, you look at a visualization. You are not connected to it. So you haven't designed it. You're just looking at it, and then what would come to your mind? You see something that's too complex, and it's got a lot of information, and you wouldn't know how to use it. If the visualization is not designed intelligently, these are some of the issues. Sometimes we end up putting too much text. You look at infographies. Infographies, I would say, sometimes end up confusing the most, because that has content and it also has numbers. You just play around with numbers. It's easy to interpret, or you just play around with content. It's still easier, but the moment you mix both, it becomes too tough to comprehend. Clutter, many times we want to put a lot of information, a lot of visual encoding of information, and we want to keep things, we want to add things here and there and things like that. That actually ends up making things more cluttered, and hence your original objective of the visualization, which has to provide insight, is somewhere lost in between. Sometimes it gets too overwhelming. You look at some representations and you feel that how am I ever going to use this, or how is it going to help me? There are too many colors. Color is a very, very important pre-processing insight in visualization. If we don't understand the strengths of colors when we are representing insights, it ends up creating more confusion. So we need to keep in mind how to intelligently use colors. We'll see an example. We have a small exercise. We can do that. And it's not intuitive. So when you don't follow the storyline approach, when you don't start from, okay, I start here. I'm going to show these. These are my overviews that I want to show. And then when the user interacts with the visualization, he gets to go in a little deeper. He gets to dig a little deeper. And then these are the supportive evidences for the data that I'm showing. This is how I want to represent that. If you don't have that intuitive approach, it might appear not connected. There might be a lot of information disconnected. And the user will not be able to correlate. Some of the visualizations are misleading. We'll also see, there is an example on how a visualization can actually be misleading. So far, so good. I can proceed. So we now looked at what are the common issues or what are the common things that, you know, as users tend to feel when they look at visualization. So those are the general terms that we have observed. And we've also actually gained those terms from people who have looked at some of the visualizations we have created. So it's like, okay, so we need to be, we should not be, you know, too over-enthusiastic in putting in colors and putting in too much information and things like that. So keeping that as a base, we're gonna look at how do we ensure that we keep two aspects of the visualization design in mind when we are designing it. One is visual integrity. Visual integrity is how truthful you are when you are designing, because you're dealing with data, you're dealing with information. People are gonna take decisions based on what you show. And when they actually get to drill down one level below, you need to make sure that the information is right. You cannot have wrong information popping out or you cannot have wrong accesses there. We'll see how that can mislead a visualization. And pre-processing. So pre-processing, what are the pre-processing insights? What are the small integrities that we need to keep in mind? We'll try and touch upon that as well. I haven't gone into details for any of that, but feel free to connect with me after the presentation. I would be more than happy to give you guys a longer version of my presentation. So when we go to visual integrity, there is a concept called area-based encoding. How many of you have got a chance to see this infographic that was published by Bloomberg some time ago? What they did was they actually did a research on the baby boomers. Baby boomers are people who were born after the World War II. And they said that we will go to office environments, we will go and actually, you know, speak to them and identify what they think of themselves. And then they said that they... and then they represented it this way. Now, in a visualization scenario, when you're trying to show insights, you can use area-based encoding, but the interpretation of this is always a composition. So you're always showing a bottle full of water. So it's 0 to 100%, right? So that makes it... that would have actually made this... or they're interpreting this very clear. If you actually count this, this is 243%, right? This is not the right way to represent that. They should have made it... my entire bucket of people as 100%. That is the total count of people who are baby boomers become 100%. So many percent of them think of themselves as creative. So many percent of them think themselves as people-saving. So many think of them as tech-saving. Now, when you're designing this, how will you represent a person who thinks I'm a leader and I'm also tech-saving? What is your A union B in that case? How are you going to show that multi-combinations? Not just two, you want to show more. How would you show? How are you showing a person... which is the largest set of people? The maximum number of people from here, it appears as if it's people-saving, but when you actually do it in the 100% scale, you will know it will be more prominent. So the ideal way of representing this would have been a bar graph. But a bar graph can be as creative as it can get. Bar graph is just the concept that you might want to use it here. So these are called isotype visualizations. So if you really want to use an icon-based representation, an ideal way of it would be to use size and associate count to a size. So if you see here, you can actually associate... these could be your icons, and each icon could actually represent a set of... a number of people, for instance, and then you could make that more interpretive. So the moment a person would look at the visualization, he would know what is the largest percentage of people thinking of themselves as A with a particular characteristics. So this is called area-based encoding, which is a concept, and it falls under data composition if you want to get down to what actually it means in the visualization scenario. Now the second example is... this is a creative bar graph. This is another infographic. I'll just take 30 seconds. Can anyone tell me what could have been done better here? No, you need to have data points for that to do it. Definitely you could have done it. Yes? It's a bit hard to read all the labels, which are at the different angles. And then there's the negative space where the 66th pallet is in. For example, there's a big negative space on the 6th pallet, but the children at the 2nd pallet are the smaller pallets. So it's suggesting the space relationship to put it in the app. Yeah, so... It can be progressive. Right. I don't know... So you're saying that why not keep it in an ascending order? So it's easier to... The shape can be put to... Yes, yes. So, yeah? No, ma'am, you don't have to touch. How can you compare... Exactly. Why don't you even come bring it in a full space? Yes. So there is no scale of comparison. So if you see, while all of you have are right in, you know, the aspects of you can't read, it has to be in ascending format and the scale is not there, the scale takes a larger chunk of problem area here. So if you look at this, see, this is 957 depths of truck drivers, if you guys can read it. And this is 292. 292 is one-third of 900. And it appears, the information here is actually wrong. You feel you either associate this truck driver with the farmers or you associate the farmers with the truck drivers. But the gap is actually really huge. Right? And the scale, is a very, very important aspect when you are actually displaying information in a visual form. Because that actually creates a positive insight or it could also lead to a misleading insight. Right? So one way of representing whenever you're doing a bar, whenever you're doing data comparison on a scale, always remember that you have to follow this rule. That is you have to ensure that the scale mapping is done. You are directly representing it using a graph. You're using implementation that's going to take care of it. But when you're trying to do it in an infographic, you need to keep in mind that one-third you divide your overall, your maximum, and then you equalize the representations and then present it in the right way. Now we'll go to a case study. This is also based on economies of scale. Right? Why this case study? This is like when we actually start designing and when we start thinking of what to design and how to design, what we need to go in, we need to start probing. So I'm sure we all do that when we design our user experience and when we are designing our products. We talk to our consumers, we do all the probing and prodding. But when you're doing data visualization, the probing and the prodding of the data, you need to ask questions. You need to bring out evidences. You need to bring out justifications of why you're actually representing information the way it is. So once you understand the underlying way you need to represent your information, you can actually go and play around with creativity and you can come up with, there are millions of ways to show data comparison. The concept of it being bar graph, but you can do bar graph in multiple different ways. You can do data comparison in millions of ways, in creative ways. Now this was published again by Bloomberg. So what they said was that between 1972 and 2012 the average salary of men in the US dropped down. And this is the graph that they have published. So what they did was they categorized it by pretty different classification of men. So there's this person called Eric Portland's. He's actually a data scientist. So what he did was when he saw this data he thought that let me dig a little deeper. This doesn't seem right. So what he did he actually went and said that let me first add the scale. So they have 1972 and then 2012. Has the data actually the graph is going down? Or let me add it for each year and see how it actually comes out. So when he found out that there have been some increases, there have been some decreases and it's not a direct it has not come down in directly. So then what he said if you observe there is no scale. It's actually starting from 32,000. So we don't know whether it's actually a drop from here or it's actually gone up from here. So what he did he added a zero. He said always remember when you're doing a truncated axis it has to be justified and it's not recommended that you start somewhere in the middle to show something because that leads to misleading information which will actually end up giving the wrong insight to the user. So then when he did this he saw that actually nothing has happened. So these guys have been getting what they have been you know it has not a drop or it has not gone up from anywhere and it's a standard pattern. And then he added the 19, I mean he decided to see whether it is going up or down. So he added the number of years just post World War II. So his observation is that the salaries have been increasing steadily over a period of years and then after that it's been stagnating. It's not come down in relation to the inflation and in relation to the kind of opportunities that have been there. So he actually questioned the publication which said that the salaries of men forced between 1972 and 2012 have been drastically reduced that particular statement is actually untrue and then he actually proved it with that. So when we get into visualization projects what we need to do is we need to start probing, we need to act like scientists, we need to start looking for evidences and see to support your theory or support your opinion. Now the second one is preprocessing attributes. This is where you actually look at things like shape, you look at things like position. So visualization is nothing but the language of the eye and language of the mind. So your eye is very visual. It looks at shapes, it looks at colors, it looks at positions and your mind looks at content. So when you're trying to merge both you're actually having a whole gamut of methods using which you can actually present complex information fairly simply. Contextual awareness. In the interest of time I'm just going to quickly talk about this but not spend too much time on it. Whenever you're working on any visualization project it's very important to bring in the contextual awareness. So if you see here this is again publishing, this was a visualization that was done by David in the US where he actually analyzed the military spends of different countries. Now if you look at this USA seems to be actually spending a lot in comparison to the others. You go and present this graph it'll look like the US is actually spending too much on their defense and might send wrong signals. But what he actually did was he brought it to the context. My GDP is this much and I'm spending this much. So when you go and actually see how much you have spent it's actually 4% of what it is what the GDP of that country is. So which is fairly okay. So when you're representing information bring that contextual awareness into the visualization itself so that wrong information is not getting passed on and wrong interpretation doesn't result in wrong interpretation. So what happens if you do not follow the key principles? I have just two more slides. So this is a small exercise I'll tell you where I picked this from but I need more participation on this if you guys can tell me what's wrong here or what could have been done better. It's not just everything it's written black it's not this it's not right so this is a classic question when to use a Euler and when to use a Wendiger right so it should have been a Euler's here yeah please go on information is bad below give me another information which is not relevant to that right so you're partially right so my observation is right too. So in the interest of time I'm just quickly going to go and speak about the answer I mean my observations as well feel free to add more so one is as you said the Euler versus the Wendigram so as designers we need to know when to represent what and not end up in these kind of wrongful representations secondly it also makes you connect so when I did this exercise at my workplace we all mentally connected the red to all the reds so which actually led us to wonder Uttar Pradesh and Maharashtra and Rajasthan people between 15 to 34 die all the time you're 35 plus you're safe you're not going to die and similarly Tamil Nadu and Kannada poor guys the oldies are gone and it's the young crowd that's there so they have used color you're mentally associating red and black so a lot of you said reds and blacks and am I associating that and you also said that red is giving a different neutral and negative view the whole graph is negative actually it's showing the deaths toll or due to accidents now that's the second one right sorry the next one is you're actually talking about major causes of deaths right so when you say speeding is actually occupying the maximum so it's around 60,000 deaths have happened due to speeding you might want the user to actually take notice of that because that's something that's under your control right you can generate a positive thought that okay don't speed so you want to do that you want you probably have to do it in increase your space show more speed to speed to show the maximum death suckering through what type of death then you have overloading the second one is overloading third is hit and run and drunken driving is a measly 7,000 but they've given equal importance to all this is another this is again leading to a wrong interpretation of information and the third one as I said is the red correlation right anything more if we had had more time we could have sat and done this yes yes absolutely the reason why I said the alternate colors is he didn't correlate it with that but the reason is that when we see forms in excel we change the color alternate so that there is no confusion between two lines that is the reason visual ergonomics I'm applying so that is the reason I think it is so this up here on the virus of India front page about three weeks ago so we thought it's good a good example to be used here so we've done we've looked at different types of best practices we've looked at key things that we want to keep in mind when we are designing this is consolidation of general principles that we want to keep in mind as I said you will always be questioned between aesthetics and insight so depending on the context depending on who are you designing for you might want to choose and misleading with proximity you may not want to show information together where it's actually giving the wrong impression of things being together while they are not do not repeat information so you end up using colors and intensity to show the same thing shape and position to show the same thing so the user is going to interpret one you either show color, you show shape it's the same anyways if you used area based encoding you cannot show negative values so what we didn't talk about there when we did that 0 to 100% in area based encoding is if nobody thinks I'm a learner so it's minus how will you show that information you can't do that when you are using area based encoding remove noise as I said remove clutter wherever possible you can't really get away with some aspects of design but try and remove as much clutter as possible you can use typography to visually represent size so you can play around with fonts you can make certain things more obvious certain things less and it gets interpreted as something that's not important or very important keep the UI clean as I said remove the clutter and do not split information if they are correlated so you have one information on slide one and while the user is interacting if he has to correlate with something that is there in the the first screen or the overview ensure to repeat that if there is a correlation that's involved so that brings me to the end of this presentation I don't think we have time for questions but feel free to talk to me later on I'll be around tomorrow as well thank you