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
Animation IS FOR GROWNUPS(Dimensions = INFORMATION)<br />
ZX-81: A whopping 4k of fun...<br />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...<br />
My dad’s first Luggable...<br />You could have text in any colour you want...as long as it was green...<br />No bold, no italics (just ^B, ^Y, etc.) <br />A writer’s dream machine. A body builder’s dream machine (26lb).<br />
Sinclair Spectrum:How I lost my faith...<br />Color = New Dimensions!<br />
And then...Windows 3.0...<br />WYSIWYG...<br />Holy Batman! Lowercase, Uppercase, Bold, Italic, Icons, FontSize, Graphics, and Colour to boot! Multiple Dimensions of meaning: HUGE ( )Steps forward...<br />
Then more Windows...<br />95, 98, ME, 2000, XP...<br />Each one adding more capabilities in terms of colour depth, DPI, clarity, access... <br />
And not to be forgotten,the stateless web...<br />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.<br />
The tough part is making clear information from raw data...<br />The term sparkline was proposed by Edward Tufte for "small, high resolution graphics embedded in a context of words, numbers, images".Tufte describes sparklines as "data-intense, design-simple, word-sized graphics".<br />
It’s all about making Decisions<br />In the end, as we rush faster and faster through our days, with smaller and smaller interfaces, we still have to make decisions. <br />Just Faster.<br />
Going beyond static orthagonalPNGs:Adding Dimensions of Data<br />Color<br />Hot/Cold (Market’s popping, market’s cold)<br />Animation<br />Pulse = Attention (Hey! Don’t forget me)<br />Zoom <br />Small scale, parked Previews, relevance<br />Rotation Angle<br />Direction, From, To, Value (Volume Knob image, Wind direction, etc.)<br />Transparency/Opacity<br />Relevance (Distance = Fog)<br />Overlaying information / Heads up Displays<br />DropShadows and Glow Effects<br />Clarity at small scales and overlaying<br />
What more dimensions add...<br />Faster Comprehension:<br />= better understanding of software purpose<br />better following of instructions (fewer errors)<br />Less need for reaching for the help doc<br />A help doc is – by definition – a declaration of UI Design failure.<br />= More productivity<br />More Fun / Engaging: <br />= Less zoning out (ie, fewer errors)<br />= More word of mouth <br />more free marketing<br />More involved feedback = fresh ideas<br />