animations = dimensions = data
TRANSCRIPT
![Page 1: Animations = Dimensions = Data](https://reader036.vdocuments.us/reader036/viewer/2022062703/55526a61b4c905d41d8b50f0/html5/thumbnails/1.jpg)
ANIMATION IS FOR GROWNUPS(DIMENSIONS = INFORMATION)
![Page 2: Animations = Dimensions = Data](https://reader036.vdocuments.us/reader036/viewer/2022062703/55526a61b4c905d41d8b50f0/html5/thumbnails/2.jpg)
ZX-81: A whopping 4k of fun...
Made no sense to parents, but to us was perfectly reasonable to use ‘*’ to denote bricks, ‘6’s as the ball, and Emphasis words by Flipped the Forefront/Background...
![Page 3: Animations = Dimensions = Data](https://reader036.vdocuments.us/reader036/viewer/2022062703/55526a61b4c905d41d8b50f0/html5/thumbnails/3.jpg)
My dad’s first Luggable...
You could have text in any colour you want...as long as it was green...No bold, no italics (just ^B, ^Y, etc.) A writer’s dream machine. A body builder’s dream machine (26lb).
![Page 4: Animations = Dimensions = Data](https://reader036.vdocuments.us/reader036/viewer/2022062703/55526a61b4c905d41d8b50f0/html5/thumbnails/4.jpg)
Sinclair Spectrum:How I lost my faith...
Color = New Dimensions!
![Page 5: Animations = Dimensions = Data](https://reader036.vdocuments.us/reader036/viewer/2022062703/55526a61b4c905d41d8b50f0/html5/thumbnails/5.jpg)
And then...Windows 3.0...
WYSIWYG...
Holy Batman! Lowercase, Uppercase, Bold, Italic, Icons, FontSize, Graphics, and Colour to boot!
Multiple Dimensions of meaning: HUGE ( )Steps forward...
![Page 6: Animations = Dimensions = Data](https://reader036.vdocuments.us/reader036/viewer/2022062703/55526a61b4c905d41d8b50f0/html5/thumbnails/6.jpg)
Then more Windows...
95, 98, ME, 2000, XP...
Each one adding more capabilities in terms of colour depth, DPI, clarity, access...
![Page 7: Animations = Dimensions = Data](https://reader036.vdocuments.us/reader036/viewer/2022062703/55526a61b4c905d41d8b50f0/html5/thumbnails/7.jpg)
And not to be forgotten,the stateless web...
The web brought charts generated on the fly, giving a semblance of immediacy to data even if it came from across the world, compacting lots of variables into simple to digest images.
![Page 8: Animations = Dimensions = Data](https://reader036.vdocuments.us/reader036/viewer/2022062703/55526a61b4c905d41d8b50f0/html5/thumbnails/8.jpg)
The tough part is making clear information from raw
data...
The term sparkline was proposed by Edward Tufte for "small, high resolution graphics embedded in a context of words, numbers, images".[1] Tufte describes sparklines as "data-intense, design-simple, word-sized graphics".
![Page 9: Animations = Dimensions = Data](https://reader036.vdocuments.us/reader036/viewer/2022062703/55526a61b4c905d41d8b50f0/html5/thumbnails/9.jpg)
It’s all about making Decisions
In the end, as we rush faster and faster through our days, with smaller and smaller interfaces, we still have to make decisions.
Just Faster.
![Page 10: Animations = Dimensions = Data](https://reader036.vdocuments.us/reader036/viewer/2022062703/55526a61b4c905d41d8b50f0/html5/thumbnails/10.jpg)
Going beyond static orthagonal PNGs:
Adding Dimensions of Data Color Hot/Cold (Market’s popping, market’s cold)
Animation Pulse = Attention (Hey! Don’t forget me)
Zoom Small scale, parked Previews, relevance
Rotation Angle Direction, From, To, Value (Volume Knob image, Wind
direction, etc.) Transparency/Opacity
Relevance (Distance = Fog) Overlaying information / Heads up Displays
DropShadows and Glow Effects Clarity at small scales and overlaying
![Page 11: Animations = Dimensions = Data](https://reader036.vdocuments.us/reader036/viewer/2022062703/55526a61b4c905d41d8b50f0/html5/thumbnails/11.jpg)
What more dimensions add... Faster Comprehension:
= better understanding of software purpose better following of instructions (fewer
errors) Less need for reaching for the help doc
A help doc is – by definition – a declaration of UI Design failure. = More productivity
More Fun / Engaging: = Less zoning out (ie, fewer errors) = More word of mouth
more free marketing More involved feedback = fresh ideas