DesignTalk Ep. 49: Creating design-driven data visualization with Hayley Hughes of IBM

July 29, 2019 posted by



hello everyone and welcome back to envisions design talk series the first design talk of 2017 and we're starting off with a bang Haley Hughes which is who is the design language suite at IBM is here to talk with us today about creating a design driven data visualization I'm Margot Kelsey I work on our content and community here at envision and we're going to be taking over envisions twitter feed for the next hour that means you can use hashtag design talks with an F on the end and tweeted us any questions and comments you have we'll have our finger on the retweet button and Haley will be answering your questions at the end of her talk if you happen to forget that hashtag it's on our Twitter page we're at envision app if that's not enough motivation we'll be giving away a surprise gift to the person with the best week from today gifts are just however you say them are encouraged and I'll be contacting the winner immediately following the event we are recording this talk today and we're going to have a recording up on the landing page to use to sign up and a recap on our blog in just a few days in case you missed any parts of it or want to pass it along to friends and colleagues I'll be sending you an email with a link to that recording and any other links we discussed today so keep an eye on your inbox for that without further ado I would like to present to you Haley Hughes Haley welcome will you tell us a little bit about yourself hi thanks so much for having me here today Margaret sure I'd love to tell you a little bit about myself like Margaret said my name is Haley and I am the design language lead at IBM I'm based in our flagship studio in Austin Texas which is the capital breakfast tacos mid-century modern furniture and a workplace to nearly 300 designers I was one of the first 16 that went through IBM design bootcamp three and a half years ago and I can answer any questions you have about how the program's evolved the mission I signed up for was to help build a sustainable culture of design at a company of over 300,000 people which by population is roughly about the size of Iceland our formula for ensuring that the culture lives us once we're no longer at IBM is that if we invest in our people our processes and our places it will lead to great outcomes and that sustainable design culture we're trying to build and my job is to steward one of our design practices the design language our design language in its current incarnation is a website filled with guidance resources and inspiration that evolves over time its intent is to help people create soulful designs at the scale of enterprise software to give you a little sense to that scale iBM has over 1300 formally trained designers working in 30 different studios worldwide on 3,000 products and 170 different countries our design language helps people make products but also offers a point of view for how to think about doing great design so it's not simply a specification of sizes or colors or styles but also includes principles and the reasons behind best practices to educate teams and even more the design language isn't just for designers it's also meant to be useful for people who appreciate their design maybe your colleagues who work with you and are trying to gain empathy for their teammates or looking to brush up on terms and concepts that help them sell visual communication problems and user experience challenges so on a typical day in my shoes I'm looking at other industries or into the past to make software guidelines and examples we create more relatable to everyday life when I'm not looking at old typewriter advertisements or hardware buttons I also try to keep up to speed on the tools and technologies our designers are using so our language can anticipate the needs for what's next my goal is to help teams unify the look and feel across all of IBM's products and upon doing some research last summer I discovered that data visualization was a huge topic of interest and need for teams working in industries ranging from banking and healthcare to education and entertainment software as a disclaimer for today's talk I'll let you know that my background is in design not data visualization per se but for the past seven months my team has been closely working with some of the world's most talented DataViz experts and we've learned a lot about how to bring a design driven approach to this topic we're excited to announce that our data vis guidelines will be available this afternoon for you to cruise around shortly after the talk IBM comm flash design /language so today I'm going to talk about three database principles you should be designing for and why what a good process for design driven data looks like the elements that make up our style for our guidelines examples of how our motion concept gets applied to data vis and I'll walk through some interaction patterns that encourage engagement for users lastly I'll highlight a section I won't be going into during the talk too deeply and give you a preview into what we're working on next so as we're kicking off this project we ran across a small booklet called understanding IBM with these brand promises that spoke to the kinds of reasons DataViz exists in the first place but after we read these the team wanted more raw material to translate these words and images so we looked back at the design expressions from IBM heritage and saw a strong relationship between the written words and the printed layouts which reminded us a lot of abstract data and with these in mind the team got to making some visual experiments done by hand you can see in these initial sketches how I danced artwork shapes and other physical objects from the past could be analogies for new data vis concepts in this example you'll see here the texture of numbered rows and columns and what an IBM punch cards look like single elements that can be interacted with to hunt for patterns which you can see in more detail in this example where we brought our data vis to a higher but my favorite sketch was the team's translation as bold and colorful Smarter Cities campaign posters each of these concepts were translated into practical examples I'll share in more detail later but for now what's important to take away is the value that is sketching exercise brought to the way we could be uniquely IBM with data so as we kept iterating and reflecting on each prototype these principles emerged as themes we felt were critical to a design driven data approach to visualization designers need to know that data is not a replacement for human observation but it is equally subject to imperfect interpretation with humanity reaching peak data collection apparently of all the data we've ever collected 90% of this has taken place just in the past few years it's easy to believe that the truth is somehow hidden inside like a needle in a haystack but the data-driven goldrush with a promise of results doesn't make data unmistakeably true because data and the tools that collect it are s human-made as our observations data is just evidence that filters reality in a very subjective way and how they need power to abstract our world and help us understand it according to different factors that are constantly changing as a designer striving to create visualizations that gives people the answer can be a mistake there's a lot of people collecting a lot of data there is a lot of responsibility to put it study towards issues that aren't just black and white designing for imperfection is about defining a meaningful issue data this can be applied to forming a hypothesis worth exploring and being saved fooled to the complexity of a problem without the pressure of needing to get people to as to a result on the first click being faithful to complexity also asks designers to resist the temptation to oversimplify data which can be dangerous instead we need advocate for multi-layered storytelling that progressively unfolds and coupled with interactive data manipulation this more human approach gives people many macro and micro ways to experience their data the biggest piece of inspiration for this concept of progressive complexity with a video that I van produced with Charles and Ray Eames in the 70s called powers of 10 where every 10 seconds the camera zooms 10 times further out from the original viewpoint and then all the way back in helping to educate people by reviewing the power of scale in complex systems when designing for enterprise software it's not uncommon to get a future request from marketing or sales teams asking for a database they might ask us how to show all the data at once or boil it down into a single piece of eye candy but smart clients don't base their bottom lines on a dashboard of circles and numbers they usually compare carefully many types of data before coming to a conclusion and it's usually on this search where they synthesize their way to an insight designing for deep engagement means that we need to build better wayfinding into our users data research by building ways to navigate multiple complex data sets through comparing visualizations or offering insights we can encourage meaningful exploration and frequent return visits so what you're seeing here is an example of a layered experience for developing how you go from a bird's eye view of a visualization in this case a tree map and having thoughtful transition zooming in this case gets us to a more granular view of the data in this way our goal is to represent people's interest in a topic as layers instead of simply showing a number used to measure it like you might see on a traditional dashboard at the granular level a user sees a matrix they can explore in detail with the legend labels and the ability to highlight segments our of color or shapes and one at a time to look for patterns and get into the complexity of the data visually lastly designing for a personal touch means that as we begin to layer data we should try to add more context into the visualization annotations interactive components and changing visual elements can add richness and give people more control over their explorations as designers in order to make our charts more unique for the purpose of creating value we need to start from scratch this means instead of converging too quickly on an out-of-the-box chart or a d3 library we should start with the problem our data vis aims to solve and look deeply into the real data we can always arrive at a standard graph later if it's most appropriate but by starting with a blank page and sketching instead of using presets or tools you can be experimental and sometimes more appropriate with a custom visualization so now I'm going to tell you a little bit about our process as we were working our design driven approach to data viz what's really a specific set of steps but more so an iterative process that isn't just about the visualization itself but also about good analysis of real data to look for edge cases and a story to tell the trap for data vis is that we sometimes tend to design for the optimal case that looks good on paper but when developers try to apply real data it becomes a useless mess so we have to be collaborative not only with our engineers but also with subject matter experts and users and so in the process when you dive deeper into detail itself on our website you can see more tips and tools about understanding and cleaning data and look at the different ways in which you can go back and forth between the process and and really this is in hand with IBM design thinking principles which tell us not to focus first on perfection but really a continuous learning cycle and releasing new concepts and prototypes with our users and that's great because data Mis tends to be more analytical it takes more time and requires us to really scope with developers on the complexity of our designs how they can be built especially if it's a custom visualization I'm going to walk you through a few key elements that make data look like IBM and offer a few tips for making your own data have a unique character one of the more challenging aspects of data visualization is coming up with a color for palette that works across multiple visualizations is accessible and has enough contrast we recently expanded the quantity of colors in our design language palette to accommodate for the greater need for flexibility and we have a few suggestions that we think could help so this is probably one of the easiest things to remember as you build out your color palette the same kind of data in a certain category like an image of adults should have the same color and as you can pair complementary data like different products it's helpful to represent those as complementary colors lastly contrasting data should also reflect contrasting colors like in a situation where someone's strongly agreeing or disagreeing to show obvious differences so same data same color complementary data complementary colors and contrasting day to contrasting colors another tricky situation is making data vis accessible to everyone but it is crucial especially an enterprise software design when designing visual analytics tools to help people understand complex problems and make informed decisions is an everyday thing here are some things to keep in mind when designing for people with visual impairment for people who are blind include text descriptions of any meaningful images that can be read by assistive technology like screen readers a person with should still be able to perceive visual insights with the help of accessibility features and considerations like the opportunity to increase the size of elements and focus on particular areas by zooming and magnifying at IBM we follow the WCAG level a guy double-a guidelines for contrast because high contrast is crucial to improving legibility we also include text contents to provide alternatives to visual information especially color use captions and provide a table version of the visualization and allow keyboard alternatives for navigating graphical user interfaces another user that we always include is someone who has color blindness there's different types and they primarily account for about 6 percent of men in the population and also about 2 percent of women so there are very similar guidance in accessibility for designing for people with color blindness but always make sure to test with simulators and make sure to understand the differences between the simulations so that you're covering all your bases another situation that you might be in is really trying to define how you can bring an element forward and the best way that we recommend doing that is using color contrast to attract the eye towards a main element augmenting color with other strong visual features like shape line or pattern can also help with accessibility and to make sure that the focal point is immediately recognizable what if you're in a situation where you have a color constraint and you can only use black or one color one thing is that visualizations can be rich and accessible even in situations in color can't be used employing different shades of black together with patterns and markers is a valid and stimulating substitute to color you want to mean in contrast between light and dark shades and play with the pattern density to create hierarchy and guys focus with color and texture you start to get a lot of variation between data to increase clarity in the complex state of is that you create you can also overlap colors for deeper comparison patterns are one of the most distinctive visual variables one example the IBM logo is based on a pattern of eight horizontal lines in this 1960 annual report famous designer Paul ran cheekily cross the logo off the page to show how even the slightest suggestion of stripes says IBM and patterns are not a decoration but instead become a way to convey information you can use lines with different weights to play with the density of elements in this case the examples are not differentiated through color but instead pattern and size and in more practical examples like this Geographic map texture is the most effective variable for showing density differences along with color with color and texture you start to get a lot of variation between data and to increase the clarity you can also look at layering an information visualization color paired with overlapping shapes for example communicates a message of relationships and as a rich layer of meaning to your visualization in situations like a Venn diagram it can be used to enhance attributes and properties of a data set and in this situation you not only get highlighted layers showing how these things are overlapping but you can see where things Co occur and make some inferences to dive deeper into the data one example that we worked on with this alluvial diagram to layer two shapes of information on top of the grid the inspiration was very powerful when we saw it as a poster and already kind of looked like a data visualization the curves and colors overlaying different shapes we could see the potential to create a simple visual that has some sort of tie to the IBM heritage and play with multiple features another way to look at style is to determine the shape of your data vis in IBM we wanted to service this edgy feeling of the aesthetic that was very clear from the past and set us apart from other brands the design heritage at IBM has the simplicity and effectiveness that we wanted to pursue which was kind of a graphic purity when designing with information visualization so we always use geometric shapes and keep things pretty pointy even selecting these basic essential shapes when you pair them with color and animation can become highly dynamic and interactive transitioning from a hole to its part and then you can start breaking bigger shapes down into smaller sizes as a visual analogy for going from macro to micro in detail when you layer in a grid you can bring science and mathematics to your design relying on different rules to communicate solidity accuracy and reliability so we always look for ways to use the 8×8 grid proportions to develop more granular patterns from a bigger shape that can live in a make matrix or in this case can be overlaid on to a geographic map to show general patterns that can drill down into an ax last I'll element is really just eject supposition of a few treatments outline shapes solids lines which can be used by themselves devoid of text overlay to create strong focal points with high contrast greens are the essential outline they create a frame on which a database hangs even the grids in the background greatly support the readability of a chart and we think of them as the basic architecture underneath many types of visualization instead of trying to make the grid disappear we use color and contrast to develop something bold as a base layer for visualization our grids are rich with color and generous spacing to activate the background area that oftentimes is left dull and gray we want the grids to breathe and instead of trying to make them disappear the outline and solid relationships as I mentioned is also a great way to create hierarchy and highlight key messages in this case solid color bars are used to identify the focus of a chart and can be a great method for more interactivity like brushing and linking which I'll show later it's also about creating a sharp contrast between colorful elements and wireframe ones to engage the users attention it can help people more clearly see relationships and complex visualizations like node and link diagrams and networks and help them see a cluster or group of data they've selected it's also useful when analyzing areas that are growing and shrinking like in the spider chart or lastly the visual tension of outline and solid can help you build really custom nonlinear stories through data vis by experimenting with uncommon visual models and metaphors in this case our radial flower chart on the solid side can feel a little more human well on the outline has a more analog in mechanical feeling to get into detail here you could use this flower chart when you want to create an overview indicating subdivisions and categories of a specific element on a bubble chart for example you can think about how you could show revenues among product categories on one side or revenues among the stores on another side and compare those two revenues left and right since the radial representation creates a sort of glyph it works loan small multiple layouts where you can graphically highlight the differences that single glyph can lead to a further detailed exploration of the values that it shows so now I'm going to talk a little bit about animation animation applied to data visualization is really about communicating the relationships between two or more elements we like to use motion to make state changes explicit and enhance or add information to data visualization so we oftentimes study the relationships of our IBM Hardware machines and take inspiration from those movements for the way that data visualizations animate we found motion principles of accumulation wears layers of data visualization could be drawn on top of each other or sequential sequential 'ti where elements appear at different times relying on little delays to create an effective transition other animation principles of machine motion that were useful in data visualization specifically were these ideas of iteration in the cyclical movement where a process is repeated for countless times which provides the feeling of endless exploration and rhythm where transitions have a typical pattern and pace that is precise efficient and repetitive while this was one of our core concepts it was fascinating to see how some elements of the machine have a gunshot entrance due to kind of how they're built mechanically it led us to think of more complex ideas like a transformation funnel so things that enter in one shape and get processed exit in another way and take on a different shape our data vision through the visualization animations with machine motion applied our last topic interaction is really about giving people as much control as possible to analyze their information from different angles in complex visualizations navigation must guarantee a seamless and intuitive exploration between different layers of information ben shneiderman information-seeking mantra overview first zoomin filter and details-on-demand is probably one of the most common navigational behavioral patterns and data vis that we definitely leverage to create layers so as I mentioned when talking about designing for low vision users panning and zooming offers more to see painting the view to focus on a specific portion of the screen when coupled with quick and smart inputs for an item selection you can really instill confidence and reduce a user's confusion so this is how we applied the flower chart to our details-on-demand and really went from the macro view to the micro view allowing users to dig into the details to filter and to see on any given node a lot of other options that it could drill down further into situations benefit from risk visual analytics tools with multiple visualizations and robust settings that access to focus on building environments for experimentation to coordinate and manage a set of visualization and designers need to focus on consistent and meaningful transitions among the views which can help reduce the ambiguity of global and specific controls and when building these environments sometimes multiple visualizations using the same data can be seen on a single screen from different views this gives the user a way to identify patterns and behaviors among views the use of brushing and linking as I mentioned earlier such as the process of selecting or brushing items in one display to highlight or hide corresponding data in other views is very powerful once you just understand the space you've designed for them to navigate the analysis that they do rarely happens all at once manipulating filters is one fundamental means of looking at a full data set by limiting the number of items in a view coupled with possible real-time updates to the visualization you can allow for a rapid and reversible exploration of data subsets another common interaction pattern that can drive deep engagement is selection in this case users should be able to point to an item or region of interest in the data and take action on it common forms of selection include a mouse hover a mouse click or region selection selection can also be a starting point for more complex actions based on the objects properties for example how to keep or exclude something or drill down you want to let the users sort data according to a specific variable and give them control to arrange elements in the layout to highlight trends or clusters and create a hierarchy among dimensions and when you're working with element constraints sometimes simple graphical components like checkboxes and sliders are often enough to support exploration any level of control you can give the user beyond the static image can enhance understanding and help them in their search for insights so the last topic I wanted to mention this in our updated visualization guidelines that you can peruse today is a chart model picker that when you go and visit it has about 12 different standard charts that you may be familiar with but what's important to understand is that we've provided some guidance to help you understand based on the need that you're trying to fill for your user whether that's compare comparing and contrasting or showing geographic regions we've tried to give some advice some recommendations of best practices and and do's and don'ts and and really advise you on which charts are most appropriate based on the thing that you're trying to do or the problem that you're trying to solve in the next couple of months one quadric that we're really excited about is actually taking all of this practical guidance and the principles that we've designed and applying them to a real use case we're currently working with Watson analytics and our goal is to try and design a visualization that can be used in any of our products that helps visualize how to forecast or anticipate change and really what that means is to help IBM errs have a way to create a visualization that looks like the future so in order to visualize the future of IBM we've been searching in our past and we're really excited to share what data looks like as anticipated in the future and when current exploration of that is this idea of a black dot that might indicate or use does it represent a Shinto show a future state so that's a current iteration of different interactions of how a single symbol might be a representation for how we can anticipate change or or see that something is happening in the future and we're really excited to share all of this with you were really open to feedback and looking forward to having great conversations with everyone on Twitter you can reach out to us at IBM design thank you so much for your time and thanks Margaret and and visions awesome we already have a few great questions and in just a moment Haley I'm going to start asking those to you I encourage everyone to use Twitter hashtag design talks to ask them but also feel free to use that GoToWebinar question portal to submit them if you prefer Neal asked when should you bring your developers into the process of data vis that's a great question um you know at IBM and definitely when talking with our data vis experts they really you know and again this is just embracing the idea of using design thinking they really bring their whole team into the process at the very beginning so developers when you're thinking about a data vis should be considered co-creators in the ideation phase so when designers you know ask a set of questions about you know users need and and really start forming a relationship with the person they're designing for they should also cue the developers into what that problem spaces and who those users are so that they can develop empathy as well for that user and then perhaps generate ideas that would be really valuable and you know while they won't necessarily be designing the formal aspects that I went into detail about in terms of the style and the and the you know animation for example they might certainly have some ideas or input around the and we'll definitely have a lot of background and accessibility and we'll help you make sure that along the way when you're doing your sketching and getting into prototyping that you're always being inclusive with your designs awesome that's great advice I think sounds like the earlier you bring developers into any design project the more successful it can probably be yeah and I would say just to add to that that you know sometimes there's kind of a hesitancy you know on either side design or development to to feel that it's necessary and you know maybe even to be enthusiastic about different aspects of each other's process but you know it's also important to have designers really understanding you know how the how the visualization gets built so that when they come to you you know the next time with with something maybe they have a better understanding of the feasibility and even a better sense of the scope of how long it might take to to make something awesome so Julie I had two questions the first one is more of a technical one and what that's what does IBM build their visualizations on d3 was the question and then she also asked to these design principles break if you're looking to support exploration of thousands of variables what do you do then um those are great questions there's a a lot of different frameworks that that IBM designers and developers use to build data visualizations internally we we had a project called rave that kind of has a lot of different and different kinds of examples very much like this you can be library and kind of build off of it on so I know that rave is one that that they use frequently but even more so designers and developers are looking at how they can use more kind of vanilla code and and actually build out their own own libraries so I know that I can speak for the team here when we released our design our database guidelines internally they got really excited about the concepts in the visual directions and the interactivity especially and wanted to build out their own library internally so that's a new project that we're spinning us called IBM design charts and I know that the team will be probably building data visualizations and then kind of skinning them for different frameworks like like react or angular what it whatever it is that they're using and then the second question Margaret can you repeat that one about the lot of data it's do these design principles break if you're looking to support exploration of thousands of variables what do you do then um you know I don't think that the principles themselves are in particular to a small data set or big data I think we really at any time could try and you know design for deeper engagements and I mean especially if you are working on a custom visualization I know that one of the teams here in our awesome studio is working on a project where their product helps users who are trying to build and discover new new drugs to help for different cures of diseases and stuff like that they they have a really complex kind of node and link diagram that is extremely dense and is something that a you know user that of that specific subject matter expertise would be able to navigate and I guess the recommendation is as it relates to you know these principles I think it's really more important than ever when you have a lot of data to work with to break that down into you know by sighs pieces that that users can can really chew on and get into from from different perspectives and really make sure that there is a personal touch to that so that you're reflecting you know not only the the kind of essence and brand of the company that you work for but more importantly what's the users mental model is and kind of their their expectations around what they're trying to find out so I guess I would just say that in relationship is that you know I would focus on making sure that the complex that you can be please look at the complexity and then allow for that progressive kind of disclosure in the VIS itself awesome and I have two questions that are sort of tied together so Jorge asked do you think it's good to give the user the opportunity to choose the graph to show their data for example to change the data of a bar chart over to a line graph etc and John asks is something similar in kind of a broader sense but how much control should you give viewers overview in Europe their data and it should it be total control yeah that's so the that's a great question I think that the importance that you know the important responsibilities that we have as designers of data visualizations and I I think that this is this is really getting back to the principles a little bit is that you know having allowing users to have control over their data and to explore them in new ways is just like the in some ways it's kind of the icing on the cake because you know what we're really trying to do through that deep engagement is help users really form a relationship with their data and get get to know it in a way that you know allows allows the different aspects of it so that not just the data itself that the elements of the visualization the layer labels or you know different widgets that you design and and aspects that overlay and and zooms and filters and stuff like that all of all to say that that kind of that kind of additional interactivity as well as you know just annotations that you can provide with the visualization itself will give more context to the visualization and help the user really understand what what the value of of data visualization is and really I guess to say that designers aren't just responsible for making a great visualization that users can navigate but also to democratize data vis as a practice and really educate people about what visualizations might need appropriate for the data that that they have be it you know a bio band that they're using to track their own personal health data or you know really big datasets like you know global health data that you would get from the CDC I think it just really key that that users have as much or understanding that you can provide them or education about how to think about data visualization and purpose as much as they do to get visualizations that they can get their hands on themselves interesting stuff it's kind of along the same lines Catherine's asking how much of any information sorry how much if any should a designer or UX specialist know about data analysis to implement a correct design that's a good question and you know as I was working with some of the some of the experts that that we've partnered with I think that you know the the response I got or the sentiment that that I expressed to them was that it seems just as people who are designing for data vis need to understand the the who and what and why you know behind the problem they're trying to solve with of is that they also need to kind of have the same nuts and bolts for for the the data itself and and I guess I think this data analysis is something that you know if you're going to be designing a data visualization is something that you should start to you know really maybe get some some quick you know brainstorm sessions around with with a data analyst maybe in your office or start you know taking like an online class something small that you can do to start getting some details or even just reading some blogs about it I feel like you know there's there's different tools out there that are really helpful for you know processing the data and cleaning it and understanding what's good what what constitutes good data and maybe less valuable data but in the end you know part of it is also the designers responsibility to kind of really start pulling out insights or forming a hypothesis when something in a data set seems kind of off or surprising or you know unfamiliar and asking questions and I think that those things are always you know a great way it is just fine find a mentor or a buddy that can really start to help you learn more about it I do think it's a pretty essential part of the process which is why on our process page I really made sure that that we you know gave some pro tips and pointers to the data analysis itself because it's something you do throughout the process of data visualization it doesn't just you know start in the beginning and then kind of trickle off you're always going back and asking you know checking your work with the data fantastic and again continuing kind of along this idea of building up a skill set milena asked or said that you mentioned that your background is not necessarily in data vis how did you find your way here and build your skill set personally um you know I I think that as I mentioned earlier my responsibilities at IBM is really to help our product teams and our designers solve the problems that they have for their users while also giving them some inspiration for how they can build kind of character and soul into the things that they create and so you know I guess the journey happens pretty organically based on you know the needs of the teams and honestly I having you know spent spent time with with our data vis experts a lot of it is really you know like I mentioned and I'll just say this again but embracing the design thinking process so you know when when they when they joined us our our team you know went and and interviewed a lot of other teams as well as you know did surveys and a lot of you know just employee different research methods to understand what problems teams were having with data visualization and you know my expertise is actually more in the kinds of the kinds of issues and the kinds of hang-ups that teams are having and then bringing those concerns to you know people who really have that deep domain knowledge and data visualization and and co-creating with them around the way that we can solve those problems in that way and then also be an expert in how IBM looks and feels so that we can bring some of that essence to life as well and just and just consult with them along the way so you know like I said it I my expertise is more in design but I always you know try to continuously you know engage with the teams and see how they're building and also try to build some things myself and see you know where things fall apart for me so that that's that's kind of how I've approached it awesome and Katie asked a specific question she said how can you help users interpret data when you don't necessarily know what the data is so her thought is about a financial product where the users financial data is presented to them so I think this is more about data vis that kind of morphs into whatever data is being fed into the system oh yeah that make sense so I I think that you know I mean we have a lot of we have a lot of tools and and kind of our own set of products offerings like like Watson analytics in IBM and they have you know business users who are you know trying to like like you mentioned make sense of the data and you know one of the things that if you if you can't what they anticipate what what kind of data is going to be in the visualizations that a user you know uploads or adds for in a given to like I guess the suggestion I would have is just to try and well there's a few try and first get a sense that set maybe you know within your company of sponsor users who are more general maybe less experienced DataViz experts and and kind of get them to you know to ask them if there's some sample data sets that that you could explore to start to see if there's any patterns across those different data sets seeing if you know a certain kind of data works really well in a certain kind of visualization and then maybe within the tool itself it would be valuable to start to provide hints or suggestions that could point users you know to an intelligent choice so in some cases you're like you said you're definitely not going to know what kind of data a user is going to load but you can definitely get a sense for a typical pattern of data samples across different sponsor users for that tool and then start to you know do some investigation for yourself about which visualizations might be most appropriate and offer advice fantastic so Justin asked do you have a Geo general guidelines for the type of grass you use to express a specific point or do you revisit it each time can you repeat that one more time on that side do you have a general guideline for the type of graph you use to express a specific point or do you revisit the types of graphs each time um yeah you you you would you revisit if I'm if I'm understanding the question properly you would revisit the graph every time in an ideal situation there there isn't one specific set of you know styles that are most appropriate for a certain kind of visualization like a like a bar graph versus a pie chart or something custom that you design and I think you know what we're trying to advocate for is really to first see if on your own you can kind of come up with different ideas maybe go outside of the box the sandbox a little bit and and just visually try and represent the data that in a way that's faithful to the content or the context of someone situations and then as you're kind of iterating on that look for opportunities where different interaction patterns can you know drive deeper engagement or can kind of foster analysis and interpretation for the user itself him or herself and I I think that you know there there isn't any one set that anyone could really give because the idea behind some of the style stylistic treatments as well as the interaction patterns and animations also come from the kind of unique history of our company that we're embracing in order to kind of evolve those ideas for IBM that makes a lot of sense is that correctly but I'm on sir I was exactly what you were asking so you can follow up with me later – perfect that makes a lot of sense to me and I think it reminded me of that slide – when you had a couple different vis visualizations of the same set of data so if somebody could kind of look to see where as they're selecting things as it pops up so that kind of makes the point that there's not necessarily one type of image or or exploration to use per data set yeah that's totally true okay awesome and Bill is curious about your top two or three books that are must-haves hmm bill I can't choose because there's a lot of really good ones but what we are going to have on our website is a little section in the interaction or visualization topic and if you click on that link when we go live and you may not see it for a couple days because we're still working on it but we're actually going to have a selection of reads just good reads good good lots and lots of links and also books that that we recommend so I want to say that I've been seeing a lot of good things on the web recently and and so I've been trying to kind of infuse those throughout the guidelines but I will get back to you on that and let you know which ones were my favorite this year perfect it sounds like a great follow-up follow-up blog article to koi asked or said can you talk more about design empathy how does IBM design approach it sure well so IBM as I mentioned you know our mission is creating a sustainable culture of design really you know is that formula of people practices and places which we think will lead to great outcomes and one of the other practices that we we have spent you know the past year and a half or so really fleshing out and trying to describe in details for our teams is design research and one of the things that you know if you go to that that website and check it out it's ibm.com clash design plus slash research that I've always really appreciated about the team that created that with kind of at first statement on the on the homepage that just says we're not our users and I really think that that's IBM's kind of point of view that that we're trying to champion across the company not just not our users but also you know we're not our clients either and you know it's as a result it's our responsibility to you know put put ourselves in in their shoes and really you know spend a lot of time with them actually doing face-to-face workshops and you know doing anything that we can even if it's remote research to try and better understand how you know they're real situations come out because you know I don't know I think one of the things that I always think about is that we were supposed to as the designers really help teach people how to see things differently and also see things that others don't ourselves and so you know whether that's going on a contextual inquiry and actually going and seeing where somebody's working and observing them in their real environment you know we can start to look at details that you know someone with a checklist who has you know a certain kind of goal in mind wouldn't be looking for and and sometimes it's those little insights idiosyncrasies and details of user behavior what they're not telling you had face value that then really helped us build an understanding and an emotional connection to to their situation so yeah I would definitely check out IBM design research and and you know we hire a lot of design researchers here at IBM as well and so we make sure that we embed them on our product teams as kind of expert guides for the rest of the individuals that are also expected to have you know a curious appetite awesome so I think we have time for one more question and this is an interesting one dan asked Haley what are your thoughts on 3d or Z space and data vis do you have thoughts on data vis yeah we do we you know for the for the guidance itself in in the guidelines you won't you won't really feel a lot about using the layers or 3d space um you know a lot of I think it's probably because it's overdone and can oftentimes be more confusing to users if they don't have a really strong grasp of spatial models but it is something that you know especially with virtual and augmented reality one of the things that IBM is looking at and we've been working on kind of a special project here about VR as it relates to some of our developer users is you know how you can start to represent people data objects in 3d space and allow them to manipulate it with you know virtual reality kind of products and Jeff so that is something that I think we'll definitely try and cover and we do have someone on our team who's already kind of writing a few best practices based on a project she just completed so there'll be more to come there but as it relates to user interface design and software design we we are asking teams to kind of focus on first creating kind of that layered experience and avoiding overcomplicating that fantastic that's awesome so unfortunately that's all the time we have today I feel like I could have asked you a million more questions mostly because we have a bunch more questions here so I apologize to anyone on the line who we didn't have a chance to answer your question go ahead and send us a tweet and we will try to get to it so Haley thank you so much for chatting with us and sharing your knowledge today and a big thank you to everyone who attended I hope you guys have a great rest of your day and keep designing awesome things thanks Margaret

1 Comment

One Reply to “DesignTalk Ep. 49: Creating design-driven data visualization with Hayley Hughes of IBM”

  1. Rahul Gupta says:

    It starts off from ep.49?

Leave a Comment

Your email address will not be published. Required fields are marked *