Robert Crocker & Nathan Settembrini - Tableau + Figma | ATUG (January 15, 2020)

cool so robert you want to share your screen yeah i should do that okay sharing awesome over here cool all right so yeah so as i said we are nathan and robert today we are talking about um tableau and figma so a while back did uh tips and tricks on how to use figma to make your dashboards prettier and so everyone there's a ton of interest in it and folks asked if we could do a whole presentation on it so that's why we're here today and so we're actually going to be presenting in figma i asked robert i was like hey you want to put a put a deck together he's like you mean you mean powerpoint no we're going to do this in figma okay cool so yeah let's go over to the next slide yeah so we already did a bit of intros but robert is there anything else you want to add about yourself or whatever yeah i mean we talked about certifications earlier today let me talk about how like what do you want to learn next uh it's yeah i think that everything that i've learned i've learned online i've been doing that for the past 10 years so if you look at me as a composite or a combo of business technical and design i've just been spending so much time since i graduated studying like technology i mean i think please on the call so cui was my manager when i was in 19 studying sql um asking him questions and then yeah when i went to san francisco it's a little bit more on the design side and that's where i got to work with some really cool companies pinterest was one of them uh just pushing pixels around very painfully so i wish i had sigma at that time and uh yeah since then i've been working for some other companies like nike apple and i've got a main client propeller industries right now as a freelancer but uh yeah just a big mess of technical and design but all self-taught that's awesome yeah and so for me uh you know we were kind of using the trifecta of database that i don't know i came up with this or maybe i stole it from somebody but you know database it's all about business technical and design and you have to be pretty strong in all three to be able to do them and so yeah i started my career more business analysts did the mba from georgia tech um so definitely have a strong focus on the business side and how technology can enable decision making and business technical kind of engineering background picked up tableau about five years ago um just went through the partner certification um and then on the design side um don't really have any formal training we always have an eye for design and i've been using figma for about a year thanks to uh our boy robert crocker here introduced me to it and yeah it's super fun but yeah so last presentation you can slide over to the next one um you know back on o2 20 20 20 i don't know if you guys were in attendance that was one of our i think it was our last in-person a tag before cobin uh i gave a presentation and i had this whole bit at the beginning about um you're proposing that maybe the word analyst uh has the word anal in it for a reason um because you know when i pump a gas i always like to to get it nice and even or some kind of interesting number um i saw this on consulting comedies instagram that uh i guess they retweeted or whatever from underpaid employee but yeah february is this nice beautiful rectangle shape uh so we've definitely got something to look forward to and then today's date one two one two one i mean it doesn't get too much better than that um but yeah so maybe good design is related uh to some of these strange obsessions that we have or at least i have uh as an analyst so yeah so next little slide there cool so our presentation today robert and i will be walking through how we can use figma and tableau together to create better designed dashboards so to help guide us through some of these fundamentals of design we're actually using some concepts that are adapted from this book that i recently finished it's called joyful by ingrid fedor lee has that nice joyful cover but so in this book she identifies 10 aesthetics of joy so 10 different ways that physical attributes of our designs can generate joy from our users and she defines joy as an intense momentary experience of positive emotion uh in our culture you know we're kind of focused on happiness which is kind of long it's joy over a long period of time but joy is an intense feeling a positive emotion in a short period of time most of her examples in the book tend to focus on product design because she was a product designer from ideo an interior design because a lot of physical spaces it's just easy to comprehend this stuff um so you know i mentioned nelson's uh basement like this is the reason why nelson's basement gives him so much joy and so much of a better environment for him to work in it's because of the physical space look at that light-colored walls and at the end we should talk about how uh you know how these principles apply to your physical space um but yeah so if you've if you've watched any sort of data vis talks in the past or been to tableau conference i'm sure you've heard of this concept of pre-attentive attributes and these are visual attributes that our brains are hardwired to quickly interpret so we look at a bar chart and we can quickly compare the difference between the lengths of those two bars but it's hard for us to maybe tell the difference between two hues of green or two slices of a pie chart we're just not hardwired to interpret that type of information quite as well so very similarly there are psychological and physiological reasons why we respond to the external world in certain ways so it's why a dark dirty alleyway seems scary but a bright open field uh with lush green grass you know puts a smile on your face so in the book she goes into a ton more detail about all the research neuroscience to explain what happens in our brains as we interpret the visual world around us and so like if the aesthetic of something is the look and feel of it she explains why a certain look evokes that feeling um and you know so appearance evokes emotion it's subconscious it's a primal response a lot of times and the the feeling of joy can actually impact our actions this is really cool so she gives examples of how these tools have been used to change the environment in schools in prisons and show a massive impact on human behavior lowering crime improving attendance improving behavior and so really the point of me going through all this stuff is just to answer the question like why should we even care about good design why should we even go through the effort of learning figma so that we can make our designs more beautiful make them more joyful so as database creators we can leverage these aesthetics of joy that ingrid lays out to give our users a much more pleasant experience which will drive engagement pulling people into the data so they can better understand it and there's actually research that shows doctors who experience joy make more accurate diagnoses and business people who experience joy make more accurate decisions when they're in this joyful state of mind it's because you're considering a broader range of scenarios and you can actually become more productive so nelson's going to be 20 more productive in that new basement um i already am i'm back in baby it's it's proven it's science um yeah so joy and good design are not distractions they they open us up to new ideas and this is a phenomenon known as cognitive flexibility um when you're joyful you're you're more open when negative things actually make our focus more acute because we focus on the pain it's why you know if your legs broken it's hard to fall asleep or you know that kind of thing so um joy does the opposite it opens this up okay so today we're walking through the first five aesthetics of joy taking a slightly different order than she does in the book and just think of these five as kind of tools for your tool belt we're going to use all five and kind of layer them on top there's some interactivity that happens but you know as you're using these in your designs you can use them to varying degrees to best suit your application so to start and you can slide over now we created this very bland boring version of a business dashboard using real estate data because that's where i came from so this is a real estate portfolio data set of leases and that type of information and robert is going to walk us through how we use figma uh to and tableau combined together to spruce this baby up make it more joyful and we're going to take these aesthetics of joy one at a time starting with harmony so robert has a mouthful but it needed to be said we needed the y so we're starting with y all right and we got the line now we need the now we need the detailed bit so tell us a little bit about harmony awesome okay so harmony this is all about balance rhythm symmetrical shapes geometric patterns um and so the reason why this is important is it's associated with well-being and safety and it's way easier to process information that's ordered versus disorder so how do we add some harmony to our dashboards robert right so this yeah it's a blend it's a bland dashboard but this might not be too different from dashboards that you have in your workplace so good place to start a lot of tableau defaults here i think nathan study center the uh center of the text in the bands at the top but the first step to like make sense of what we're working with we need to reorganize the content this is information design there's information here that matters so we can't lose it uh we might hide it we might move it around um so i've sort of identified a few groupings of the content and if we look at it let me just select this frame all right so we got our kpis at the top we've got our location information right there in the center we've got another chart over here let's call that like a comparison i don't know metric comparison and lease is expiring okay so if that's what we're working with that's what we need to organize and group together we just need to figure out how to position that on the screen in a more harmonious way so here is here's that in a more harmonious structure and it you know we've got the kpis across the top they're nicely centered our text is nicely centered we've got area and area for the locations off to the left-hand side the metrics on the right just below the kpis it's all grouped together nicely and these these are also balanced right there's a little bit of a vertical rhythm how do you get there with sigma right so what i'm going to start to do is i'm going to show you something called the layout grid in sigma so let me just i think let's see here we're starting with harmony and it looks like my harmony ah okay i'm gonna go in and edit it right so you got a couple layers here so there's this concept called layout grids and this comes from like manuscript design but sigma has it in graphic design as well so we're going to give ourselves a 12 column grid which does not seem to want to play let me see if i can get this to show up no all right i'm gonna i'm gonna do it from scratch sorry okay so layout grid how do you do that grid than figma we are going to add a layout grid we are going to give ourselves a column grid 12 columns we're going to center it go with 80 pixels across and 20 pixels of gutter okay so there's an anatomy to this but you can see with that with that little layout grid we've got some ways of structuring our content that's balanced okay the next step is going to be getting that vertical rhythm so we can add another layout grid but this time we're going to make it a row grid right we're going to give ourselves 10 here and i believe i've got [Music] yeah there we go so i just created a row grid to get that vertical rhythm again we've got harmony going left to right harmony going up and down and you can see that these these elements in the screen they actually fit perfectly in here there's a little bit of spacing a little bit of spacing everything's got its position good stuff and now we want to go put this into tableau so in sigma just go down here in the pan on the right hand side we're going to export this frame so when i export it to be like where do you want to put this guy i'm going to call it harmony and then in tableau we've got my starting point so when you're in tableau you need to know the dimensions of your frame those are up here on the right hand side we've got a 1440x1024 so we're just going to switch this from yeah fix this perfect got 1440 to 1024 so now we have a dashboard canvas that matches the size of our sigma frame we just need to bring in that image we're going to choose it got this harmony png we want to fit it and center it and need to make sure that you remove the padding right because if we made like pixel perfect aesthetics and then tablet comes in and smushes it a little bit it's going to distort things so you just want to make sure over here in your layout or your item hierarchy that you don't have any uh see got a little little outer padding just get rid of that okay cool now we're set up and it's a good start so the next next robert real quick so you created a frame in figma that was that desktop size yes and um then in tableau you created a dashboard that was the exact same size pixel perfect but then when you exported from figma you did 2x the pixels just to make it crisper right so it's from a pixel density perspective or yeah the reason the reason that i do two effects here so you get this little drop down you can export it different resolutions for pixel densities the reason i do 2x is that when i'm working with text in figma we'll see some text and sigma later it's that bringing that into tableau if i do it at 1x sometimes that text gets pixelated so exporting it at 2x takes this massive image in tableau and when you fit it tableau actually gives you the crisp text that you would expect to see in tableau so yes if you're seeing some pixelation export is 2x and that should help cool thanks for clarifying cool so that was harmony and um you know it's all about balance symmetry symmetry and we saw how we used the figma grid to create a really nice layout um the next one is freedom and so freedom is all about open spaces the sensation of wild nature negative space greenery natural textures materials basically the idea is how do we help kind of soften the constraints of our man-made world and so the reason why um you know psychologically physiologically why this is joyful is because it like this idea of being constrained is that's a negative feeling whereas the ability to move around freely uh if you think about if you're a wild animal and you want to be um you know at the top of a hill with good visibility so you can escape from predators there's nothing lurking behind and so that's why freedom and kind of this sense of openness is a valuable trait to try to incorporate into our designs cool all right so i'm going to take that concept and try to inject it into what we have here so that's where we left off and we don't want to lose the organization that we had you know with with what was above but we do need to inject some space and you might see this in like apple stores there's just a lot of white space it's luxurious you don't go in there and feel uh pending you don't feel anxious you don't feel stressed they have products all over for you to buy but you're not feeling pressured to buy um unless they're wood textures there maybe maybe they're playing some psychological games on us probably probably so the way we do this in sigma now is we are going to adjust the grid a little bit that i was using in the last lesson so these are our it's like our main content rectangles so i'm just going to group those together and call that like mean content and now i got these spacers so i'm going to reveal these and i should be able to i don't know what happened to my layout all right let's see what happens when i put my [Music] vertical my vertical layout grip back in place right so we had a center with 80 and i believe there's like a 40 and 40 pixel uh offset was it 10 maybe 20 i'm not i'm not a hundred percent i lost my i lost my nice nice layout grades let's see [Music] okay good still happen okay so what i did with this with this one is i created a honestly just a two row uh two row grid and it you can you can set the type to top and then i just pushed it down 40 pixels and the reason i pushed it down 40 pixels because before uh it was there was 20 pixels of space everything had 20 pixels of space in between but we want to inject a little bit more freedom here so we want to give it a little bit more space you know we're not doing anything extreme but where where this ties in the database is that proximity principle like a principle of proximity so those elements that are closer together are going to feel more related we could make this more extreme for this example again we didn't but we pushed the content like into the center a little bit more by creating these 40 by 40 uh little spacers and the reason that we went with um 40 i'll tell you about a little bit later but this one's 40 it's pushing our content sort of sandwiching our content here and then this one is 30 now so our grid over here is actually a two row grid with 30 pixels of gutter spacing so it's different from what we had before right and then we we just stopped there right our bit at the top it's it's separate from our main content down here uh we have separated our kpis with uniform squares of 30 pixels so very symmetrical and then this block is an inner frame so created a frame inside of this frame and the grid here is a two by two and the 2x2 grid it it has you know two rows two columns but we're back to 20 pixels of spacing in between so that you know these elements feel a little more tightly related right kpi's are up here they're just chilling but then we've got some content that we might want users to focus on it's going to be a little tighter together and then all the content it's nicely sandwiched um here 40 pixels from the top and 40 pixels from the bottom so got a lot going on to try and make this feel slightly more free just a smidge um nothing too extreme i'm just gonna take off these elements and then we would export this again as our freedom frame and i can actually let's see before we add harmony i'm just going to override harmony so i'm going to have an image in there that's harmony and when i drag anything onto the screen let's see [Music] tableau says oh i need to render this again so it goes to check that file and it pulls in like the updated version of whatever you put there so i had harmony in place i overrode harmony i brought in some element moves something around tablet says okay i need to re-render i'm gonna go pull that uh image again to re-render and now we see our slightly freer form uh in tableau nice yeah so that's uh basically adjusting the layout to create negative space gives this feeling of uh more freedom that's awesome um okay so now the next aesthetic of joy this is three out of five we got a boogie because we're running out of time but this one is fun so the other two the first two have been pretty structural which you have to have a nice good structure to start out with um but now we can start introducing what's called play so play circles spheres curves um so in our man-made world with all these uh right angles um the rounded shapes actually set us at ease and invite our playful inner child out into the open to uh to quote ingrid um so yeah so we're actually hardwired to have a negative response to sharp things so if you see your sharp teeth or spikes or thorns rounded things are safe and therefore we see them as positive and that's why you know all these fun things come from a circle or a sphere right so you think about balloons bubbles hula hoops basically everything fun from your childhood is uh probably a circle so all right robert take it away buddy so notice this is already a little bit more playful than it should be so if we drop out of corners right quarter radius okay so this this is what it should have looked like uh we got boxes okay but we want to make this playful and there are a couple couple fun things uh that we can do with figma we can first bring in some friendlier fonts so a friendly font that i found is one called valera so i just downloaded this put it in my font book and then i've got it as a font i can use over here blair around nice then with icons these are playful learn to get some rounded uh so the reason so taboo people might be cringing about like oh you're going to use some kind of a new font in tableau it's like no this is why we're using figma we're going to embed this font in figma so it'll be basically an image of a beautiful font as opposed to requiring tableau to try to render this special font which we know it's very bad at so you can do arial you can do tableau fonts but for the most part web safe or non-website fonts just are not going to render for every user reliably when you see people doing ridiculous fonts they might have used powerpoint they might use something else they could use big mouse create an image and then bring that in tab which is what we're showing you here um yeah so then let's go find some fun icons to spruce it up create some symbols i had a lot of luck with flat icon often i'm using the noun project i like the project uh they actually want to create like an icon for every word or every noun um so i think the project but i did not have as much love as i did on flat icon so we got these here cool now we can just select these guys right and i don't know what's up with that one but in the right-hand side you see this little selection colors this is nice because now i can actually edit the color of the icon so with the noun project you can export as a color but maybe you export as a color and you don't want to export it again you can just go here uh make the selection i'm sorry select the icon and then edit the color later you want to export it as svg and so you can get sort of high fidelity editing there and of course use these as images or shapes in tableau so i've got i had a little icon playground here and all i wanted to do is show you basically that it's like all right we can play with the farm play with the color pick another color pick another color a lot of fun and then as far as the font goes um this is test test so figma you can quickly like see how the font feels or you can just like thumb through it and i literally went through my entire very long list of fonts to try to find one that felt fine i've spent too much time doing that lately robert are you using figma desktop like the app yep okay yeah i so they have a web application as well which is what i typically use um and the font list is all the google fonts right and then so i think the desktop application uses your local fonts plus the google phones probably yeah i don't don't know but that sounds right the the browser application probably doesn't have access to my local fonts um one thing i did with this particular font to make it extra bubbly was i actually added a stroke to it now you could like make it to that um to where it's unleashable maybe you want to do that the burger king farm is pretty fat and um that's fine i was hoping to get my hands on that but i can't now we can see all right these these characters are too tight together and maybe we want to space them out a little bit you can do all that and you can do it very quickly in sigma so that's some fun there one other thing i want to share with people if you've got a line and you want to make your lines a bit more fun more joyful then just hit this little ellipse inside the stroke and that'll give you access to the end cap you can make the end cap round right so now we now we've got round incomes which is nice and if we take this and we were to extend it which were to extend it somewhere you can also right all right you can edit the elbow joint as well to make that round awesome so just some fun things that you can do to try and make things uh less pointy more durable all right so how does this how does this work in our dashboard well we were using roboto and now i can just go grab all of the text in the dashboard that i have so i'm just going to shift click all of my text and i think it was varela around right so i've i've updated the text to be that nice round text and we want to also like we just add some bubbles right we're going to add some bubbles and bring those down maybe float them over one another duplicate these uh bring them over here and like rotate them around maybe so you can see how you would make shapes out of this maybe it's two people having a conversation when you're looking at them in aerial view who knows but we introduced some bubbles in our layout and also brought in those icons right where that makes sense and i believe that is all we are going to export this and update our background image that was harmony so we're currently pointed to and just go into tableau drop something else boom and now we've got um we've got our structure with some more playful elements in it all right nice yeah so to summarize we introduced play with some circles rounding the edges of the containers in our font choices in icons and um actually in the tableau viz which we'll see in a little bit we're using bubble charts which are also fun and so you could you could see introducing play um through your actual tablet visualizations as well we're showing it right now specifically in figma um so anything else to add there no it's just that you know we went from the square i was just showing people how they can round the edges whenever you have a rectangle uh you get this corner radius option that's where you want to adjust the roundedness of of that object or that shape okay yeah yeah that's super helpful uh okay so the next one is abundance and so this is i think repeating patterns polka dots polka polka dots stripes uh layering different textures using multi-color palettes this is kind of like the kid in a candy store feeling you walk in the candy store and it's just like so many colors so many different types of lollipops and candy and chocolate and all that good stuff and so this feeling that comes from quantity and variety gives you kind of this physical and sensorial sense of abundance and the reason why we're hardwired to feel good about abundance is fairly obvious uh if you were you know if scarcity is bad you know we were just talking about food insecurity and all that but if you you know you see a tree full of fruit or a field full of flowers you know that this is a a good place to be because there's a lot of variety you walk into a golden corral and there's just every type of food ever just kidding any any uh 80s babies um know what i'm talking about but um yeah yeah so show us how we use abundance in our dashboards okay so i'll i'll be honest i do not i don't incorporate abundance in my dashboards very often if you thought about database you could think about unit charts waffle charts uh things like that i don't know about scatter plots um but maybe those are chart types that speak to the idea of abundance but yeah when it comes to design i don't add that aesthetic very often so whenever i'm at a creative block i check out dribble so i went to dribble literally typed in joyful and that was really fun to scroll i came across where's she at there we go i came across this and i saw some little patterns here i was like yeah we could do something like that uh maybe that's maybe that's hitting the abundance check and how would we do that in sigma so in sigma what you can do is we're going to create one of these little circles again because we're anal analysts we're gonna make them you know 100 pixels and i want them to be i don't know 100 pixels apart is that right boom nope and i'm just going to grab these my option shift drag to duplicate and bring them 100 pixels apart so now i got like the top of the lego basically um i can duplicate this and make it 100 pixels apart and then i can just continue to command d right but that that gets pretty big pretty fast so let me do that just a couple times and then i'm going to scale it down so this is 100 pixels good and now if i want to grab all of these and scale it down i'm just going to go grab my little scale scale it down option bring it in maybe maybe we want really dense bubbles and now if i can duplicate this so we've already got a little pattern but if we want to make it let's see shift drag good i can rotate it and i can just like put it off to the side like we like we saw and give it give it a nice fill [Music] right and now we got just a little stamp on our frame so that's fun and they do they do similar sort of things in in this example so what does that look like in our dashboard well what i did i took the made a couple invisible groups this one it's gonna look very similar to the one that you just saw right made some dots duplicated them rotated it and uh this one same deal i duplicated dots rotated them the only difference is i gave these dots a drop shadow let's see yep believe that i get used out the drop shadow and i gave these dots an inner shadow again just plan with it who knows maybe it makes it feel like these dots fit inside of these larger dots uh not sure but it's fun and uh that's the point so when i export that to overwrite the harmony let me just replace what we got and drop another thing cool good let me actually write something in here [Music] let me let me get our text box all right okay cool so next time i'll just move this and it'll update okay so there we go we got some abundant we got some abundance represented in our dashboard now nice yeah so some repeating patterns variety and shapes and size you could also do this in tableau with a variety of chart types so we've all come across dashboards that are you know three by two grid of bar charts which you get a little um you know tired of seeing the same thing and so a lot of times you know introducing other chart types can actually be more engaging but yeah so the last one we wanted to go out with a bang on energy in the book she actually goes over this one first because it is so fundamental energy is all about bright colors warm sunlight pops of color it's caffeine for the eyes um so bright colors we all know um we've all experienced how that can just put a smile on your face if you see you know the guy in a suit looking all tough and then he he kicks up his leg and there's some bright pink socks uh on there with some dress shoes like that's just like you know that's energy at work it's also another aesthetic called surprise which we'll maybe cover in the future but um but yeah so warmth signifies life bright colors typically mean there's lots of nutrients vitality so you think about bright red strawberries versus some like brown ones like which one are you gonna go for right that that's kind of built into our brains um and so yeah so robert now we're gonna light this baby up with uh with some energy cool and you were talking about abundance another another thing you can think of there if you want to inject abundance into your dashboards it might be the small multiples so not thinking of drought visualizations like decades and then years going down you've got the same map but it's just repeated um i would definitely speak to abundance okay so this is where we left off and that image that i found on dribble was definitely not in black and white so this is what it looked like and in in sigma you might be thinking all right like how can i how can i leverage this well what i often do is i create little rectangles and i'll make these little rectangles again like perfectly square uh cool and yep we're good so i'm just gonna option shift drag and then i'm gonna duplicate duplicate cool now i got these to use a little eyedropper you just press i and you can go grab a color and then i'll grab another color and i'll grab another color right she's got a pattern on your shirt but i just noticed uh purple cool so i've got my palette that i want to work with i could make this a um like a color palette in sigma but that's for another day uh what what i now do in my dashboard design is i'm gonna go drop these colors in their respective places so i'll just select the object right little eyedropper and eyedropper and click select your object eyedropper and click [Music] so we're starting to get some color here i i wanted to like spruce up the background still so you can see it selected the frame and this frame actually is a fill it's currently white but i can make it like a slight teal and if y'all aren't familiar with hsl you want to be that's huge saturation lightness so what we can do here is if we start with like uh a teal that we like so this guy we can then start from there but like lighten it up like almost all the way right and that way where we're in a related uh color which is really nice it's a nice way to add a little bit of color without going maybe off-brand so get the variety you want without losing losing the aesthetic so i've got another one there and last one is that and another fun thing is that this inner shadow actually colored it to be synonymous with the color of the circles um again i don't want like a harsh black it's just too it's too intense so i made it um i made it uh an off and off teal right and then we just throw this into our dashboard and now you'll see how like imagine this is the chart so that i do this all the time i'm like okay background imaging figma i want to see it update i just like grab a chart and when you move it tablet re-renders and now we see our energetic uh background in tableau awesome all right so we are getting close on time here um yeah so we now we've got this bright color palette and pretty much the dashboard is done um so do you have the final dashboard that you want to show with the charts embedded and everything do you have that up uh yeah let me let me throw this in here while you do that there were a couple questions that i wanted to quickly address one was about the cost of figma figma is free just it's a freemium product so to start out it's free for individuals there's some limitations but for the most part um look at that so i know it's like oh very cool you just did a bunch of stuff in one damn it's fine um we we use sigma's like coordinates right so i click on this frame it says i need to position my container at 130 259 okay tableau like i got a container here and this is at 130 259 right it is just floating but sigma tells me where to put it so that i'm lining it up with the the background image yes folks are asking about is it tiled or is it floating are you stuck with floating and it's actually floating tiles is what you tend to end up doing right yeah so so he's got these two in the left side we've got the map and the tree map in a vertical container that is kind of equally spacing the two visits and then he's floated that in the exact right spot based on the figma coordinates yeah um yeah and one thing that i didn't mention mentioned earlier if y'all do want to learn about some of this stuff i've got a course on layout grids so that'll get you started off right and this is going to be updated pretty soon with the guy that we're about to with the help of a guy that we're about to talk about um so yeah didn't get to mention that earlier but if you go to visibly.com you can find a course to get you started with sigma right there yep and i i am a student of that course i'm going through it right now and it's it's pretty good pretty helpful even though i've been using figma for a while but he starts with the basics and builds upon it you know and for this presentation today we definitely took a lot of shortcuts and uh but you can learn a lot through that course um okay so um my wife actually introduced me to this joyful book and so when she posts instagram sometimes she hashtags it joy spotting which is you know there's this whole following of people who are constantly looking for joy out in the wild i thought it'd be great practical application for us to take some beautiful work by our friend josh hughes yeah data josh h so he makes some beautiful stuff and so using what we just learned let's identify a few things that he does really well so this internet advertising really nice harmony i'd say a really nice use of energy and um play with the the curves in the viz he's got a lot of space so he's talking to him last night he you just said like use more space than you would generally use in a business dashboard right um if you're going to put this up on a wall if you're going to put it on a website just like give it give it more space than you think you need and even for me in this presentation uh 40 pixels of space in between things 20 pixels of spacing sometimes that's way too much uh in the business dashboard you just like cram the information in there so you're going for joyful lean air on the side of more space i love the energy in that nintendo switch like the colors that he uses and the flow and in that i guess kind of a sankey chart that he does use the natural i mean that background image in the the one right below it i mean that's freedom all day um you also have the the variety um the abundance in those that dotted chart and then also in the the right hand chart um a lot of play a lot of abundance i love the the little curves little waves at the top of that dashboard but yeah so as you guys are looking at tableau public looking around your organizations and dashboards that you've personally built start to think about this stuff start to think about how can i incorporate some of these aesthetics of joy to improve dashboards um yeah and really the whole the whole point is to make stuff that is more joyful for your users so that they get more value out of the data and can better see and understand what they're what they're looking at so we are about out of time um if there's any quick questions feel free uh robert anything else to add no i was just commenting on the rounded corners just like little details yeah no what questions i haven't been looking at the questions there there was one question uh sorry there was one question about filters do you guys have any suggestions for you know i noticed on those it didn't look like there were many filters do you try to avoid that on purpose or do you have any thoughts i try to build them into interactivity in the charts um and then in the the viz robert did have a um kind of a collapsible container um which if you don't have a version of tableau that has that feature built in yet like if you're on a dated version then you're kind of out of luck there but um i don't know robert any other thoughts sir i i'd say that you know when you're at that organization stage of the project how do i organize my information yeah if you're able to use collapsible containers or the show hide it gives you a chance to simplify the view and maybe get a more spacious visualization because you can completely hide certain charts so that's a big benefit there um and then on the filters you notice in the vids that we made we actually use some of the icons as filters so that's a fun way to um like interact with your dashboard through icons instead of you know the standard way that's perfect awesome a lot of people are asking about the course we just put the link in the chat and in the q a so um super helpful but yeah thank you guys for having us robert thank you this is great this is exactly these types of sessions i think are exactly why people attend a tug it's like these types of tips and tricks that are so helpful that improve like everything you do at work so i just i appreciate what you guys shared wow that's awesome thanks karen see the invite

Channel: Atlanta Tableau User Group

Views: 896

Rating: 5 out of 5

Keywords: Atlanta Tableau User Group, ATUG, Tableau User group, User Group, Tableau, Nathan Settembrini, Robert Crocker, Figma, data, visualization, dashboards

Id: fwfpkM-wa5o

Length: 53min 22sec (3202 seconds)

Published: Mon Feb 08 2021