GUI: Taking Lessons from Hand-Drawn Animation

Chuck Jones inspires UI designers in this classic paper from Ungar and Change.

Another paper about the SELF programming language, this time on its interface, "Animation: From Cartoon to the User Interface" by Bay-Wei Chang and David Ungar.

Chang and Ungar take lessons from traditional animation to inform the design of their own GUI. It opens with the observation that animators work with 24 frames of per second, and the audience is never confused from frame to frame, but even the simplest GUI can trip users up when things change unexpectedly. The solution, of course, to buy the ACME Web Development Framework. No, wait... The solution is to steal a few simple lessons from hand-drawn animation to make a GUI more intuitive. Everything from bouncing at the end of a move, to motion blur when an object moves more than its size in a single frame, to using non-linear easing.

The paper ends with three big categories of improvements, but I think they can be summarized in two.

  • Elements on the screen should feel solid. Specifically when created, dragged, and dismissed. This gives affordances to the user, making it obvious what they can do, and how the user can work with the items. Nothing should apparate without at least a little cloud of smoke.
  • Elements on the screen should reinforce what happened. Whether it's a little bounce at the end of a movement, a zoom when opening an application, or a gentle curve when moving on it's own. The UI should quickly reinforce what just happened, or even what's about to happen.

This 1993 paper was too late to have inspired the original Macintosh, but I can see its remnants in both the now-unfashionable skeuomorphic school of interface design and the entire iPhone interface, with its scrolling-bounces, and app-zoom-openings.

The flat school of design has definitely lost some of these lessons. Nothing is solid anymore, and there's little-to-no difference between a piece of text and a UI element. I don't miss the worse excesses of skeuomorphism, but I miss the affordances.

To sum it all up, use jQuery's easeInOutBack. Bam.

Comments

https://0daymusic.org/

— by Virgilrep on 24th Jun, 2017

nike schoenen,adidas schoenen,asics schoenen,birkenstock schoenen,converse schoenen,jordan schoenen,new balance schoenen,puma schoenen,reebok schoenen,supra schoenen,timberland schoenen,vans schoenen,beste schoenen jordan schoenen Groot Aanbod Sale Producten Met Hoge Kortingen. Nike Schoenen,Adidas Schoenen,Asics Schoenen,Birkenstock Schoenen,Converse Schoenen,Jordan Schoenen,Puma Schoenen,Supra Schoenen,Timberland Schoenen,Vans Schoenen,Schoenen Online Kopen? Nu 76% Korting! jordan schoenen Bekijk alle goedkope schoenen in de uitverkoop ♥ Groot aanbod sale producten met hoge kortingen. Vergelijk en koop via BesteSchoenen.nl. adidas schoenen <a href=http://www.besteschoenen.nl/schoenen-c-209_210_225/>adidas schoenen</a> adidas schoenen <a href=http://www.besteschoenen.nl/schoenen-c-209_213_224/>adidas schoenen</a> timberland schoenen <a href=http://www.besteschoenen.nl/schoenen-c-250_251_252/>timberland schoenen</a> timberland schoenen <a href=http://www.besteschoenen.nl/schoenen-c-250_253_254/>timberland schoenen</a> converse schoenen <a href=http://www.besteschoenen.nl/schoenen-c-255_256_257/>converse schoenen</a> converse schoenen <a href=http://www.besteschoenen.nl/schoenen-c-255_258_259/>converse schoenen</a> vans schoenen <a href=http://www.besteschoenen.nl/schoenen-c-264_265_266/>vans schoenen</a> vans schoenen <a href=http://www.besteschoenen.nl/schoenen-c-264_267_268/>vans schoenen</a> asics schoenen <a href=http://www.besteschoenen.nl/schoenen-c-269_270_271/>asics schoenen</a> asics schoenen <a href=http://www.besteschoenen.nl/schoenen-c-269_272_273/>asics schoenen</a> jordan schoenen <a href=http://www.besteschoenen.nl/schoenen-c-274_275_276/>jordan schoenen</a> jordan schoenen <a href=http://www.besteschoenen.nl/schoenen-c-274_277_278/>jordan schoenen</a> new balance schoenen <a href=http://www.besteschoenen.nl/schoenen-c-279_280_281/>new balance schoenen</a> new balance schoenen <a href=http://www.besteschoenen.nl/schoenen-c-279_282_283/>new balance schoenen</a> puma schoenen <a href=http://www.besteschoenen.nl/schoenen-c-284_285_286/>puma schoenen</a> puma schoenen <a href=http://www.besteschoenen.nl/schoenen-c-284_287_288/>puma schoenen</a> reebok schoenen <a href=http://www.besteschoenen.nl/schoenen-c-289_290_291/>reebok schoenen</a> reebok schoenen <a href=http://www.besteschoenen.nl/schoenen-c-289_292_293/>reebok schoenen</a> nike schoenen <a href=http://www.besteschoenen.nl/schoenen-c-294_295_296/>nike schoenen</a> nike schoenen <a href=http://www.besteschoenen.nl/schoenen-c-294_297_298/>nike schoenen</a> adidas dames <a href=http://www.besteschoenen.nl/dames-c-209_210/>adidas dames</a> timberland dames <a href=http://www.besteschoenen.nl/dames-c-250_253/>timberland dames</a> converse dames <a href=http://www.besteschoenen.nl/dames-c-255_258/>converse dames</a> vans dames <a href=http://www.besteschoenen.nl/dames-c-264_267/>vans dames</a> asics dames <a href=http://www.besteschoenen.nl/dames-c-269_270/>asics dames</a> jordan dames <a href=http://www.besteschoenen.nl/dames-c-274_277/>jordan dames</a> new balance dames <a href=http://www.besteschoenen.nl/dames-c-279_282/>new balance dames</a> puma dames <a href=http://www.besteschoenen.nl/dames-c-284_287/>puma dames</a> reebok dames <a href=http://www.besteschoenen.nl/dames-c-289_292/>reebok dames</a> nike dames <a href=http://www.besteschoenen.nl/dames-c-294_295/>nike dames</a> adidas heren <a href=http://www.besteschoenen.nl/heren-c-209_213/>adidas heren</a> timberland heren <a href=http://www.besteschoenen.nl/heren-c-250_251/>timberland heren</a> converse heren <a href=http://www.besteschoenen.nl/heren-c-255_256/>converse heren</a> vans heren <a href=http://www.besteschoenen.nl/heren-c-264_265/>vans heren</a> asics heren <a href=http://www.besteschoenen.nl/heren-c-269_272/>asics heren</a> jordan heren <a href=http://www.besteschoenen.nl/heren-c-274_275/>jordan heren</a> new balance heren <a href=http://www.besteschoenen.nl/heren-c-279_280/>new balance heren</a> puma heren <a href=http://www.besteschoenen.nl/heren-c-284_285/>puma heren</a> reebok heren <a href=http://www.besteschoenen.nl/heren-c-289_290/>reebok heren</a> nike heren <a href=http://www.besteschoenen.nl/heren-c-294_297/>nike heren</a> birkenstock schoenen <a href=http://www.besteschoenen.nl/schoenen-c-248_249/>birkenstock schoenen</a> supra schoenen <a href=http://www.besteschoenen.nl/schoenen-c-262_263/>supra schoenen</a> adidas schoenen <a href=http://www.besteschoenen.nl/adidas-c-209/>adidas schoenen</a> asics schoenen <a href=http://www.besteschoenen.nl/asics-c-269/>asics schoenen</a> birkenstock schoenen <a href=http://www.besteschoenen.nl/birkenstock-c-248/>birkenstock schoenen</a> converse schoenen <a href=http://www.besteschoenen.nl/converse-c-255/>converse schoenen</a> jordan schoenen <a href=http://www.besteschoenen.nl/jordan-c-274/>jordan schoenen</a> new balance schoenen <a href=http://www.besteschoenen.nl/new-balance-c-279/>new balance schoenen</a> nike schoenen <a href=http://www.besteschoenen.nl/nike-c-294/>nike schoenen</a> puma schoenen <a href=http://www.besteschoenen.nl/puma-c-284/>puma schoenen</a> reebok schoenen <a href=http://www.besteschoenen.nl/reebok-c-289/>reebok schoenen</a> supra schoenen <a href=http://www.besteschoenen.nl/supra-c-262/>supra schoenen</a> timberland schoenen <a href=http://www.besteschoenen.nl/timberland-c-250/>timberland schoenen</a> vans schoenen <a href=http://www.besteschoenen.nl/vans-c-264/>vans schoenen</a>

— by besteschoenen on 26th Aug, 2017

Downloads WEB Scene Music FLAC/mp3 1990-2017 Private FTP http://0daymusic.org

— by Johnnieskert on 27th Sep, 2017

Add your voice