data.bythebay.io: Boriana Viljoen, Visualizing the silent force of the Bay
Recording: data.bythebay.io: Boriana Viljoen, Visualizing the silent force of the Bay
hi thanks guys hi guys thank you uh for coming uh just before lunchtime and um here I am to talk about um something I care about greatly and um how how many of you know about what kite surfing is oh this is great do you does any of you hear kite surfs do or do you just know about it okay you're just familiar which is great I included this picture just in case people uh haven't seen it um this is SK surfing it's a beautiful sport it's a lot of fun and um in the backdrop this is Golden Gate this photo a friend of mine took um and it's really uh encapsulates how U exciting a sport like this can be and um um here I am to tell a story of Alan Chung who's a friend of mine um he used to live in LA and uh that's where he learned to kite surf um I I believe in a Long Long Beach area and when he came to visit in Chrissy field uh San Francisco chrisy field is a great park right East of um Golden Gate Bridge and he wanted to go on the water and go kite surfing so he went to the beach looked around it was sunny it was windy and the water looked like water so uh what a you know all the three things you need is good wind and um equipment and um a body of water so he went out and he ended up um you know he had a few years of experience and he didn't realize why he ended up being pushed downwind to alcatra and ended up um in distress because he couldn't go back to where he started from uh he ended up being picked up by a vessel passing by and uh learned a valuable lesson that even though the Bay looks like a calm beautiful ocean even when it's choppy it's actually a very uh violent moving River um that changes directions Depending on time and you have to know how to utilize these directions to your best um for your safety and um it happens all the time uh where kite Surfers are and or other kind of water users not just kite Surfers wind Surfers small vessels for sailing even large vessels for sailing whenever your equipment fails you you end up having to make it back to Shore and the distances look so small um and you think oh I'm a good swimmer but it's actually because of the currents people end up being in distress and having to get uh picked up by a motorized vehicle uh that's powerful enough and um at the beach at Chrissy field we have uh a community of people that kind of look out for each other and we joke it's the peanut gallery um but Jokes Aside all of us have Coast Guard at at speed um not speed do but in my contacts on my phone and I've called it multiple times for various people um because even the smallest distances can be really difficult when you're being pulled in a different direction with a bunch of equipment on you even without equipment it could be tricky um and um in racing um it's important to know what the currents are doing uh because uh you could use them to your advantage or they could hurt you if you don't know if you don't anticipate a certain the water to be moving in a direction you didn't um essentially know it would and what I thought was interesting is the best way for me to figure out what the currents are doing is not to check a chart but to ask uh a failer an experienced sailor and Mark is one of those people um he's a he's been kiting and sailing and wind surfing uh the bay for since the 80s and I would ask him and he would explain to me all the different nuances of the way the currents are and he's like well right now if you go you need this but if you know an hour from now the water's going to do this so you know keep that in mind and then go this way instead of the straight way so I thought it was very interesting and uh the problem I saw a problem as a designer um is that the title currents are very dangerous and yet people underestimate their power and um why are the conventional tile title charts not working um and how can we figure out a more reliable accurate way to um educate users about um the how to work with the water to their advantage and um the goals I did a very user centered um design process and the goals of my study was to examine the traditional child charts and how can co-art intervention be avoided and how can technology Aid in doing that and um um I don't know human centered design approach uh developed by Ido and um used by many schools one of them Stanford design school and so essentially first I searched uh I I questioned over 110 users at Chrissy field of uh with experience for more than one year how they've been what do they do with equipment or whether conditions fail them um so a third had been rescued by the Coast Guard a third had been rescued by themselves or friend and only third have been the lucky few have which have never been needed they've never been in distress um and this is an interesting um visualization done U with data from coast guard that I sourced um and it shows that even though the Coast Guard involvement has decreased over the years over the last decade the number of deaths has very uh very minor decrease so the size of the circle is how many deaths there were I believe this is for the whole West Coast not for the bay uh and um what's interesting is that what this tells us is uh in addition to other uh data that I uh looked at is um that by the time coastar gets involved is usually too late um and it's I'm guessing it has to do with overturned boats or um you know kiteboarding I don't have data to have how many people die during kiteboarding uh because of Coast Guard not being involved in time but uh this is um a scatter plot where the size of the circle is how many times you were rescued and um the different colors signify different users and um so I my hypothesis was that if you're a more experienced user you are less likely to need a rescue because I thought you have a higher skill level uh but what this showed is that there's no correlation uh what there is a correlation with is the more you go the more likely you are to get in trouble so um is it's essentially it's not a matter of if it's a matter of when and um the then I did sport distribution I'm not sure why this chart is here oh yeah because the colors yeah so essentially this the colors the green is wind Surfers blue is sky Surfers yellow is people that do both um and I did some study I went I looked back before I look forward and this is an interesting map done uh one of the first Maps uh that we uh know of and know of the humankind and as you see it's most most Europe uh Northern Africa and some part of Asia and it's kind of interesting uh was it is it that they didn't know that there's more or was it that they didn't care and um so that I thought that was um quite uh interesting and that's a Babylonian map where uh it was a user very user centered view of the world and they believed that you know we are the center of the world and the sun revolves around us um I don't know exactly how to read that map but that's what I got out of it when I was researching some other Specialists have um figured it out and the very first time weather was visualized on a 2d mass-produced medium was this in uh 1875 in the times English newspaper and it shows wind direction and sea conditions which I thought was very Nifty and it's interesting how the designer or the data visualizing uh agent had to really decide what exactly he's going to show what details he's going to emit um and this is how cell phone like cell phone visualization was uh cell phone was diag oh sorry this is a telephone system uh done by Cooper for Motorola in 70 uh 1973 and it's interesting how things have evolved now we have technology that it could be predictive to what a user is doing what the user will do and can give you you on the-go advice of what the best uh best course of action is for the user so I thought that was um very relevant to my problem and then I analyzed some best practices if anybody here watches the Super Bowl you've seen this line that moves and tries to explain the viewer of the TV um what is going on and that's an example where you uh that same designer that was developed by Stan honey um and he developed America cup visualization of uh trying to explain to viewers on TV what's going on in sailing What boat is really in front and what are the boats aiming for um I thought it was done really well because sailing is one of those Sports it's really hard to figure out and he developed this where uh they before every race they show on americ couple a few years ago I don't know how many of you watched it uh they would show a little uh video of what the currents are doing and that's really important in racing because the currents are very different close to land they are in the middle of the water and also as the current shifts they change directions so he tried to show this to kind of explain why boat will go this way versus that way um when you are going up wind and um the previous speaker here I thought was uh very uh funny that he showed that because I have an example this this was published in the New York Times online and it was a visualization of an America's Cup race um and what I really like this as a designer is that um the map is white sorry land is white and water is BL uh blue and the focus of the user goes on the data points that are moving sorry this is a static but in reality this is a they they animate and you kind of see the little race over time and I just loved how simplified it is and beautiful and easy to understand and um another uh example of how currents were visualized in the past this is a navigational chart uh from the Marshall Islands and the interesting thing about this is every uh fisherman uh would make his own chart and they would leave it on land though and they would not take it with them in the boats which I thought it was interesting and each of these churns and little shells uh signify an island or current that they knew um it's quite beautiful um and once again I don't really know how to read it um maybe if I was a you know more familiar with the local ways I would um and this many of you might be familiar if you're into sailing this is a standard way currents are visualized today uh if you go to the national weather uh website no oa.org I believe um and this is an old attempt of mine to visualize uh I to solve that problem in 2010 this was a small a smaller school project that I then made into a larger school project um so essentially I was trying to explain to users what flood really means so when Alan Chun our friend went to the beach people warned him they told him it's flooding you shouldn't go he said what do you mean I know how to kiteboard leave me like don't don't bug me it looks beautiful it looks really windy I know what to do but what essentially I tried to show like maybe with arrows you to try to show people what the air water is doing um I could see a lot of U problems with this design now but the idea was this screen would stay on the beach so when you go out you can't miss it it's an interactive uh moves via through time um and what was interesting is when I would ask power users like one of my friends his name is Hugo he is a bar pilot driver uh Bar Pilot I don't think he's supposed to be a driver Bar Pilot and he drives those big ships uh tanker ships and he lives here in the bay and his job is on a small boat to approach a big ship get on it before they reach the bay and navigate the bay because as you know the Bay has crazy uh topography on the bottom and I asked him what do you do for Curr he's like oh look at the numbers so he is like Neo from The Matrix and all he needs is to look at those numbers he to him this this tells him what's going on to me that that's not how it works so like how does a normal person that's not Hugo um seem can understand this crazy complex moving water um and this is a uh interesting this is dry ice on alcohol unfortunately it's a static screenshot um but it's it's an the explor it's an exhibit in the Exploratorium and you can drop that dry ice and see it the reaction makes it Propel throughout the water and um it was very INSP spiring um watching how natural elements react and you could use this as in your data visualization as inspiration and another example of that is pressurized air through fine sand um it kind of looked like waterfalls but it was sand and air which was I thought it was quite interesting um and uh Casey Rees who was referenced at the previous presentation he was an expert in taking data and art and finding ways for them to work together um and that's another example of his work um and I thought all of us can benefit from uh this and a good example is the wind map by hint FM which has been used in many database books you might have seen it um but it was an example how this is data visualization but people have a printed on posters and put it on their walls and how can we create products that are compelling like this um so then I took an app called uh I worked with uh the bake currents folks app and um that's what they have when I I had already in the mid my research I met one of the guys that works for them and then I learned about this product that was being developed and it was just like faith that we uh you know joined forces and I did some research to try to see how we can improve their app um it was built by engineers and um I thought well I'm going to take this to the users and to my assumptions and hypothesis as a designer and see what the best design would be and Exploratorium took what statement design Labs has done with the water map and uh the data they had from the uh the bay uh uh from the bay currents app folk so this is the same data they visualize it slightly different um and they have this live uh on the display in the exploratory Museum right now um and it's it's great it was done by an engineer and I could think of a few things I could change about it just to make the focus more on the currents and less on right now the colors of the land I I would argue distra um but uh what people at staming design really do really well um and why their maps have become famous and used is that um they figured out a way to combine fine Artistry with um engineering and um I I interviewed Sean Allen who's one of the main folks of St in design and he said I was like what is the secret to your success and essentially that's what he said he's like we for the water map watercolor map which is very famously used it's here at the bottom um right Cor Corner um it was a fine artist that worked with an engineer to create this and it became like a viral piece that now has been used and it's a really beautiful interesting way to uh break from the norm um so this is a result of my research so essentially I wanted to see how do people want to visualize uh strength of current should it be a gradient or should it be overlaying of data points so uh most people prefer the gradients so essentially to them a change in value color value uh signified change in strength more than it did um just overlaying the same valued piece and then the shape of the arrow what what should the arrow look like should it be an organic curve or should it be a triangular or more sterile um Arrow that's in in math used in math which was the the previous use the product used like more straight um so people really prefer the organic movement and um and then I dealt further and one thing I learned is you know there has to be a slight blend between math and um nature in this case is this arrow is an example of that where in nature you don't really have things that look like a Straight Arrow but if you can make it more organic uh it really res resonates with the user's mental model um and I'm just going to fast forward through that because I think we're close to time uh but the idea was I tried to simp I looked at all different variations of what the current might do and simplify it so instead of having hundreds of arrows to look like can we uh make the experience clearer and um better for a user to understand and one thing we have to consider is the shipping channels so this what we're looking at here is overlay of GPS tracks from friends of mine that have phones on them like and they most of use straa um in a waterproof case and they would go in a kite surfing session and map their route and as you see as a cut Surfer you cross over the shipping channels many many times and what happens if something happens like for example the wind dies which is very often occurrence um in the bay and or you break a line you end up having to swim through the shipping channels and are taking somewhere where you shouldn't be taken um so how can you avoid this and it's interesting how people do not go so this is usually people ride north of alcatra because the wind goes in um from the West to the east but if you have boat support users tend to venture further down from alcatra um and it's because you have to not worry about coming back up wind and um an interesting story is a shipping channel that had rubber duckies in 200 and no 98 lost 28,000 rubber duckies and we scientists were able to study where those rubber duckies ended up it was between Japan and USA and most of the rubber duckies ended up in Alaska and and that my oceanographer used this as an example when um the horrible earthquake in Japan happened I was freaking out that radiation will come and impact our Bay immediately like I was like oh my God it's going to come straight like I was looking at the map he's like oh don't worry currents will take it all the way to Alaska unfortunately for Alaska but he was like do not worry you can go surfing and not be you know freaking out about the radiation in the water which is um still kind of quite sad um and uh I am on time but one thing I would I were to leave you with is my research on maps I asked people what map do they prefer to look at when they see the currents visualized on their mobile device and my theory was that middle map was going to win because I thought it's the cleaner it helps uh the currents stand out the most if it's a red color whatever color it is it really simplifies the experience but people really preferred the map that looks like the map you get for directions I think that this has to do with familiarity and the satellite map did not do well that because the contrast was not enough and um essentially what I recommended is a simplified version of the currents uh organic shape to them and if you could substract you don't have to show as many arrows but you just kind of give an idea of the user what the water is doing in an organic fashion and maybe allow the user to drop a pin in the water and see where it's going to end up so this us a computer generary model where it tells you what's going to happen to you if you have to swim right now in this case you end up in the Bay Bridge um and yeah so looking forward it could be used in wearable devices where Google Glass could tell you could warn you before going out that you should riger bigger larger equipment or if you have a phone oh sorry not phone wearable device it could tell you where to go to um sometimes with currents you you might go from point A to point B but because of the current you should actually be swimming this way which will end up taking you to that way so essentially uh using where about devices to tell people um tricks about how to work with the currents and uh yeah thank [Applause] you