SlideShare uma empresa Scribd logo
1 de 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

Mais conteúdo relacionado

Semelhante a Animations = Dimensions = Data

Computer game graphics
Computer game graphicsComputer game graphics
Computer game graphics
louishardman
 
Computer game graphics
Computer game graphicsComputer game graphics
Computer game graphics
louishardman
 
Digital illustration handbook
Digital illustration handbookDigital illustration handbook
Digital illustration handbook
MrLawler
 
Adobe Skills Portfolio
Adobe Skills PortfolioAdobe Skills Portfolio
Adobe Skills Portfolio
blazedchicken
 

Semelhante a 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
 

Último

Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
 

Último (20)

"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistan
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamDEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
 
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
 

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

Notas do Editor

  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.