SlideShare ist ein Scribd-Unternehmen logo
1 von 11
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

Weitere ähnliche Inhalte

Ähnlich wie Animations = Dimensions = Data

2D Graphics animation - Bouncing ball(Python).pptx
2D Graphics animation - Bouncing ball(Python).pptx2D Graphics animation - Bouncing ball(Python).pptx
2D Graphics animation - Bouncing ball(Python).pptxAishwarya SenthilNathan
 
Steam presentation deux 3 d prints from photographs
Steam presentation deux  3 d prints from photographsSteam presentation deux  3 d prints from photographs
Steam presentation deux 3 d prints from photographsScott Eastellerson
 
Scanocity
ScanocityScanocity
Scanocitytpitre
 
الوسائط المتعددة Multimedia تاج
الوسائط المتعددة  Multimedia تاجالوسائط المتعددة  Multimedia تاج
الوسائط المتعددة Multimedia تاجmaaz hamed
 
Computer game graphics
Computer game graphicsComputer game graphics
Computer game graphicslouishardman
 
Computer game graphics
Computer game graphicsComputer game graphics
Computer game graphicslouishardman
 
Digital illustration handbook
Digital illustration handbookDigital illustration handbook
Digital illustration handbookMrLawler
 
[1] Data Representation
[1] Data Representation[1] Data Representation
[1] Data RepresentationMr McAlpine
 
Adobe Skills Portfolio
Adobe Skills PortfolioAdobe Skills Portfolio
Adobe Skills Portfolioblazedchicken
 
Project on DTP by manny verma
Project on DTP by manny vermaProject on DTP by manny verma
Project on DTP by manny vermamannyverma786
 
Lesson 1 • Introduction to Photoshop
Lesson 1 • Introduction to PhotoshopLesson 1 • Introduction to Photoshop
Lesson 1 • Introduction to PhotoshopMarcio Sargento
 

Ähnlich wie Animations = Dimensions = Data (20)

multimedia image.ppt
multimedia image.pptmultimedia image.ppt
multimedia image.ppt
 
computer graphics
computer graphicscomputer graphics
computer graphics
 
Gamegraphics
GamegraphicsGamegraphics
Gamegraphics
 
2D Graphics animation - Bouncing ball(Python).pptx
2D Graphics animation - Bouncing ball(Python).pptx2D Graphics animation - Bouncing ball(Python).pptx
2D Graphics animation - Bouncing ball(Python).pptx
 
Steam presentation deux 3 d prints from photographs
Steam presentation deux  3 d prints from photographsSteam presentation deux  3 d prints from photographs
Steam presentation deux 3 d prints from photographs
 
Scanocity
ScanocityScanocity
Scanocity
 
الوسائط المتعددة Multimedia تاج
الوسائط المتعددة  Multimedia تاجالوسائط المتعددة  Multimedia تاج
الوسائط المتعددة Multimedia تاج
 
Computer game graphics
Computer game graphicsComputer game graphics
Computer game graphics
 
Computer game graphics
Computer game graphicsComputer game graphics
Computer game graphics
 
Module 4
Module 4Module 4
Module 4
 
Digital illustration handbook
Digital illustration handbookDigital illustration handbook
Digital illustration handbook
 
Computer graphics, bba 1
Computer graphics, bba 1Computer graphics, bba 1
Computer graphics, bba 1
 
Computer graphics, group 9, bba a
Computer graphics, group 9, bba aComputer graphics, group 9, bba a
Computer graphics, group 9, bba a
 
2d pixel art
2d pixel art2d pixel art
2d pixel art
 
[1] Data Representation
[1] Data Representation[1] Data Representation
[1] Data Representation
 
Adobe Skills Portfolio
Adobe Skills PortfolioAdobe Skills Portfolio
Adobe Skills Portfolio
 
of Pixels and Bits
of Pixels and Bitsof Pixels and Bits
of Pixels and Bits
 
Project on DTP by manny verma
Project on DTP by manny vermaProject on DTP by manny verma
Project on DTP by manny verma
 
Lesson 1 • Introduction to Photoshop
Lesson 1 • Introduction to PhotoshopLesson 1 • Introduction to Photoshop
Lesson 1 • Introduction to Photoshop
 
Pixel art
Pixel artPixel art
Pixel art
 

Kürzlich hochgeladen

SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024Lorenzo Miniero
 
Vector Databases 101 - An introduction to the world of Vector Databases
Vector Databases 101 - An introduction to the world of Vector DatabasesVector Databases 101 - An introduction to the world of Vector Databases
Vector Databases 101 - An introduction to the world of Vector DatabasesZilliz
 
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Scott Keck-Warren
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek SchlawackFwdays
 
Story boards and shot lists for my a level piece
Story boards and shot lists for my a level pieceStory boards and shot lists for my a level piece
Story boards and shot lists for my a level piececharlottematthew16
 
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationBeyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationSafe Software
 
Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Enterprise Knowledge
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr BaganFwdays
 
My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024The Digital Insurer
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfAlex Barbosa Coqueiro
 
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubKalema Edgar
 
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxArtificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxhariprasad279825
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLScyllaDB
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):comworks
 
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupStreamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupFlorian Wilhelm
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsSergiu Bodiu
 
AI as an Interface for Commercial Buildings
AI as an Interface for Commercial BuildingsAI as an Interface for Commercial Buildings
AI as an Interface for Commercial BuildingsMemoori
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Manik S Magar
 

Kürzlich hochgeladen (20)

SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024
 
Vector Databases 101 - An introduction to the world of Vector Databases
Vector Databases 101 - An introduction to the world of Vector DatabasesVector Databases 101 - An introduction to the world of Vector Databases
Vector Databases 101 - An introduction to the world of Vector Databases
 
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
 
Story boards and shot lists for my a level piece
Story boards and shot lists for my a level pieceStory boards and shot lists for my a level piece
Story boards and shot lists for my a level piece
 
DMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special EditionDMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special Edition
 
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationBeyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
 
Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan
 
My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdf
 
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding Club
 
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxArtificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptx
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQL
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):
 
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupStreamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project Setup
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
 
AI as an Interface for Commercial Buildings
AI as an Interface for Commercial BuildingsAI as an Interface for Commercial Buildings
AI as an Interface for Commercial Buildings
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!
 

Animations = Dimensions = Data

  • 1. Animation IS FOR GROWNUPS(Dimensions = INFORMATION)
  • 2. 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...
  • 3. 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).
  • 4. Sinclair Spectrum:How I lost my faith... Color = New Dimensions!
  • 5. 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...
  • 6. Then more Windows... 95, 98, ME, 2000, XP... Each one adding more capabilities in terms of colour depth, DPI, clarity, access...
  • 7. 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.
  • 8. 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".
  • 9. 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.
  • 10. 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
  • 11. 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

Hinweis der Redaktion

  1. 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
  2. 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?
  3. 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).
  4. 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...
  5. 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.
  6. 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...
  7. Edward R. Tufte gave a voice to a growing search for displaying information as data, succinctly.
  8. To absorb data faster, we need to increase dimensions of data, to go from serial reading, to parallel dimensions of data.
  9. 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.