Animations = Dimensions = Data
Upcoming SlideShare
Loading in...5
×
 

Animations = Dimensions = Data

on

  • 523 views

 

Statistics

Views

Total Views
523
Views on SlideShare
509
Embed Views
14

Actions

Likes
0
Downloads
0
Comments
0

1 Embed 14

http://skysigal.xact-solutions.com 14

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • The ZX-81 was the first computer I had the fun of playing around on... Notice the conceptual graphics – where we used one character creatively. ‘*’ for bricks, and of course, a ‘6’ for the ball, etc. No ColorNone was required, really, to give life to our fertile imaginations, as long as it fit into 4k of memory that is.24 lines x 32 characters (text)64 x 44 pixels in graphics mode
  • Then my Dad bought a Kaypro II ...which was THE laptop of the time...(Arthur C. Clarke had one (he was writting 2010 from Shri Lanka)And being 13, it was a great way to get in shape lugging it around after my father (it was very lightweight at 26lbs....)But it didn’t have a notion of onscreen Bold. Or Italic. If anything was Italic, I would have thought there was a magnet too close to the screen, and if Bold, I would have thought the CRT wasn’t tuned right, and would have fiddled around with the Brightness knob at the back...So, no Color, no Bold, but heck, who needed it, right?
  • And then the Sinclair Spectrum came out. And I prayed and prayed and prayed, and soon I became an atheist, because my father never ended up getting one for me. Bastard.What was cool about the Spectrum was that it not only had much better graphics capabilities than the ZX-81, but it also had Color.Graphics meant that the ‘*’ could be replaced with spaceship or alien. “ALIEN SPACESHIP” = 15 chars in one char space.And Colour, meant a Second dimension of Data (BAD ALIEN SPACESHIP – WORTH 50 POINTS).
  • And then WOW. Uppercase, lowercase, Bold, italic, Icons....And a gazillion diskettes (something like 17 to install the OS...)It’s hard to imagine how profound a change this was. So profound that it was years before anyone had a Colour printer to actually match it...
  • Each one handling more capabilities:more concurrent tasks, more DPI, higher resolution, more depth of colors, And then that XP skinning business...But one of the things they learnt is that had to start adding background drop shadows for legibility, etc. Effects (flashing toolbar minimized windows) to bring attention in such a cluttered space.
  • While XP chugged along, the web came into full force.Fine tune text formatting via CSS became common. Background’s images became common.DynamicCharts, created on the server, and sent over the wire to the client browser. Popped up everywhere, and were so useful, that it spawned a whole world of languages to deliver it to clients faster than PERL / CGI programming could.Of course, many types of charts came into existence: Pie charts, Bar charts, etc...Now, one that interests me a lot is the SparkLines. Because it highlights the essense of the problem of generating images from information...
  • Edward R. Tufte gave a voice to a growing search for displaying information as data, succinctly.
  • To absorb data faster, we need to increase dimensions of data, to go from serial reading, to parallel dimensions of data.
  • Doesn’t matter if we are talking about BMP’s, GIF’s, JPG’s or PNG’s...or laying it out with Tables or CSS, there’s only so much info one can cram into a static image.

Animations = Dimensions = Data Animations = Dimensions = Data Presentation Transcript

  • Animation IS FOR GROWNUPS(Dimensions = INFORMATION)
  • 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...
  • 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).
  • Sinclair Spectrum:How I lost my faith...
    Color = New Dimensions!
  • 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...
  • Then more Windows...
    95, 98, ME, 2000, XP...
    Each one adding more capabilities in terms of colour depth, DPI, clarity, access...
  • 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.
  • 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".
  • 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.
  • Going beyond static orthagonalPNGs: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
  • 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