Making of R2D3 - Tony Chu
•Télécharger en tant que PPTX, PDF•
2 j'aime•2,300 vues
We'll look under the hood of R2D3, a project aimed at giving people without a technical background a sense of what machine learning is. R2D3 received a Vizzie from the National Science Foundation. The project was also an honoree in the 2016 Webby Awards. - Powered by the open source machine learning software H2O.ai. Contributors welcome at: https://github.com/h2oai - To view videos on H2O open source machine learning software, go to: https://www.youtube.com/user/0xdata
Recommandé
Recommandé
Contenu connexe
En vedette
En vedette (18)
Plus de Sri Ambati
Plus de Sri Ambati (20)
Dernier
Dernier (20)
Making of R2D3 - Tony Chu
- 1. CONFIDENTIAL Tony Chu July 19, 2016 Making of R2D3
- 9. Graphic Design is the use of space to control time. Time as in the experience of time, i.e. attention. – Barbara de Wilde (@badeWilde)
- 10. Look Look here, Then here, No explicit instruction required You still got here. This design leverages graphical conventions.
- 15. Talking Heads
Notes de l'éditeur
- One simple way is to use motion to hint at dimensions of the data. An example from R2D3 is how we illustrated elevation. The elevation of each house is literally introduced by bars that rose from the ground up.
- Communication, abstractly speaking, is the art of getting an idea in your head reconstructed in someone else’s head.
- To do that, we have to establish a connection, through some channel. For our purposes, this is often eyes, sometimes ears. And according to psychologists, the bandwidth for these channels are pretty good. For any ideas to be reliably reconstructed though, the most important bandwidth bottleneck is actually attention. Most people can only pay attention to a couple things at a time. Pair this with the limits of our short term memory (~7 bits a sec) … it’s clear that attention is any designer’s key constraint.
- The reality is that time is always working against you, because time is draining attention away. And depending on where your readers are coming from, you may not start with all that much. Thus a primary requirement of any exposition design (i.e. design that seeks to communicate an idea) is the judicious direction of attention.
- Each element on the page needs to earn its keep. Your design overall should gain more attention than it drains.
- To do that, I look to principles of graphic design. Here’s one of my guiding quotes from a dear mentor, Barbara de Wilde. Graphic design is the use of space to control time. We use size, shape, layout and typography to move people’s eyes around.
- Why is animation so effect? Animations tap into our brain’s motion detection systems, which makes them the strongest of all the various types of visual attention attractors.
- So the reader finally starts scrolling. What happens? Some fun animation happens … but it’s not just fun. It hints at the first dimension of data we are introducing. The elevation of each house is literally introduced by bars that rose from the ground up.
- Why the transition? Because it preserves the context of the variable, and it introduces the idea of dimensionality.
- To recap. We are trying to reconstruct an idea that’s in your head in someone else’s head. These lessons from graphics design and motion design help us conserve and direct attention. But how do we know where to direct that attention towards? What pieces of the idea goes first? How big should the pieces be? How should they build on one another?
- Pacing is how to structure and distribute the pieces of ideas over time. If you have a rough sense of how much complexity people can deal with at a time, you should try to pace your narrative so that you always give your audience enough to chew on, but not so much that they are overwhelmed.
- My favourite examples of this comes from my childhood playing with Legos. With legos you’re trying to construct something like this ...
- Starting with this. If someone just dump out a pile of Legos and said “build the Flatiron building with this” … you wouldn’t know what to do, because you wouldn’t know where to start.
- Your attention is overwhelmed. There’s too many pieces, and the pieces are too big.
- We have to break it down. Pace it out.
- Which is why Lego kits provides step-by-step instructions. It guides you through the process, one things at a time. It narrows the scope of things you have to think about at the same time. It preserves your attention, while still giving you a sense of progress.
- Implicit in a Lego instruction manual is the dependency tree between parts. Put the foundation together first. Then the core structure. Then stick the sides onto the tower, then put the roof onto it, etc. By distributing the dependency tree into concrete steps, the instructions show you how all the pieces fit together into a coherent whole. The organizing principle? Pace.
- Let me show you another pile of Legos. When I put this together, I wanted to show…. The reaction I usually got? “Oh cool! … what is it?”
- How do we know we broke something down enough? Well a good rule of thumb is – do you want to read it? Or skim it?
- Given a big idea in your head, how are you supposed to break it down? Well, ideas are not entirely novel. They are composed of existing ideas, kind of like how software are compose of other software. Ideas often depend on having other ideas established first, in a sort of ideas dependency tree. If exposition design seeks to reconstruct an idea that’s in your head in someone else’s head, then we need do more than just gather up the dependencies, we need to help establish the structure of the idea.
- So let’s go back to the machine learning example. We want to help people understand machine learning by showing them a decision tree example.
- What does the idea of a decision tree depend on?
- This is roughly the dependency tree of ideas in R2D3.us.
- The overall take-away is that. Our attention’s bandwidth is limited. We must pace our content to reduce the moment-to-moment cognitive load. And so we introduce ideas one at a time.