If you've been tasked with designing or developing (or both) a cross-platform web application, you may have noted how difficult it is to add animation and interaction to the result.
Designing for interaction is empathy in disguise, and it can can encourage modular, performant code. Let's tackle some of these ideas and apply them to real HTML and JavaScript examples.
2. Welcome to Houston TechFest
Thank you for being a part of the
8th Annual Houston TechFest!
• Please turn off all electronic devices or set them to vibrate.
• If you must take a phone call, please do so in the lobby so as not
to disturb others.
• Thanks to our Diamond Sponsors:
1
3. Who Am I?
• Matthew Keas
• @matthiasak - http://mkeas.org
2
• The Iron Yard
(http://theironyard.com)
• http://codepen.io/matthiasak
• http://github.com/matthiasak
• Space City JS (http://spacecityjs.com)
• Houston.js Meetup
• Speaker, Author (http://mkeas.org)
4. Who Am I?
• I hold two security certifications from “the man”
– One of which is centered on health information
privacy and security
– The second of which is straight from the NSA: INFOSEC
• Paradoxically, I know write entire apps in
JavaScript
3
5. Previous Talks
4
• http://mkeas.org/#talks
• 3D Engines
– http://matthiasak.github.io/3D-svg-model-viewer/
• Caching Alternatives and High Performance Browser
Networking
– https://github.com/matthiasak/Loader
• Building Your Own JavaScript MVC Framework
• Building Fluid and Immersive Interactive Media
Applications
• The Power of Side Projects
• Cross Platform Interactions
6. Assumptions
• You are friends with JavaScript, HTML5, and
CSS3
• You may have a tendency to obsess over
little details -- like me
• You appreciate some scrappy DIY code-ethic
In other words… it’s a labor of love :-)
5
7. Interaction Design (IxD)
“… is about shaping digital things for
people’s use, alternately defined as the
practice of designing interactive digital …
[things] … with a primary focus on
behavior.”
6
8. Interaction Design (IxD)
“… it is synthesis and imagining
things as they might be, more
so than focusing on how things
are.”
In other words, “practicing imaginative
interfaces that aren’t cookie-cutter”
7
14. Dominating Thoughts
“The price of being a sheep is boredom.
The price of being a wolf is loneliness.
Choose one or the other with great care.”
13
Hugh Macleod
15. Dominating Thoughts
• Q: When is enough design, enough?
• Use just enough code and tech to give a great
experience, then get out of the way
• Tools, libraries, and frameworks are great, but
using too many can overwhelm; instead use a few,
use them effectively, and use them to their
greatest flexibility
• Nothing I build will ever be done, because I am
never done improving myself
14
18. It all starts somewhere…
So I’ve got this really awesome design idea…
17
19. And your dev team is all…
18
How do I even
start making
that!?!?
20. Increasingly Common Scenario
Edgy, fluid, unconventional designs and new
platforms (read: internet of things) continue to
shake up how the web is presented, how we
develop it, and how users interact with it.
19
21. Primary Topics of IxDD
20
1. Handling user input
– cross-browser/platform interaction code
(touchscreens, touch events, mouse events, pointer
events)
2. Non-standard UIs
– designing and developing non-standard UI, such as a
circular menu (like a rotary phone)
3. Putting it all together
– "try this, not that" – IxDD edition
24. 23
Part of the art of making
change happen is seeing
which cultural tropes are
past their prime and
having the guts to invent
new ones.
~ Seth Godin on the
clichés of visual
communication
25. “Natural language form”
http://tympanus.net/Tutorials/N
aturalLanguageForm/
increased conversions for
http://vast.com 25-40%
http://www.jroehm.com/2014/01/ui-pattern-natural-language-
24
form/
26. Slightly less contrived “Natural
language form”
http://www.codepunker.com/res
ources/natural-language-form/
25
27. Plan, Plan, Plan
For really big ideas/projects, it is
much cheaper to do it correctly the
first time than to redo it later on. The
sooner a problem is identified and
fixed, the cheaper it is to do so.
In other words… prototype!
26
28. Unconventional Events/Handlers
• Accelerometer and Gyroscope
– http://sense-js.jit.su/
– http://sense-js.jit.su/orientation
– http://matthiasak.github.io/starfield-test-3/
• Webcam / Face Detection / Movement with
getUserMedia()
– http://neave.github.io/face-detection/
27
• Google Glass JS API
– https://developers.google.com/api-client-library/
javascript/start/start-js
• LEAP Motion
– https://developer.leapmotion.com/leapjs/welcome
• PhoneGap
– http://phonegap.com/about/feature/
30. Tips
• http://caniuse.com/
• Debounce scroll handler with rAF
• Apple’s Safari on iOS touch guidelines
– https://developer.apple.com/library/safari/documenta
tion/AppleApplications/Reference/SafariWebContent/
HandlingEvents/HandlingEvents.html
• Minimize input handling code (avoid handlers if
possible, costly on scroll and touch)
• It’s about what you animate, when you animate,
and how much you animate
29
31. Tips
• Bind late (don't bind to hidden elements)
• Bind low (in the DOM)
– avoid delegating to window or document too much,
browsers will always execute the handler
• Unbind ASAP (don't keep handlers around for
dead elements)
• Speed up the handlers you have
• scoped event contexts (trello example)
– like https://github.com/piranha/keymage#scopes
30
32. Tips
• touchstart and mousedown handlers
actually delay the compositor thread until they
are done (JANK)
31
Delays everything:
touchstart listener
mousewheel listener
Only adds some delay:
scroll listener
Compositor
Draw to screen
JS?
nope
Compositor Thread
Main Thread
Execute JS
34. Takeaways
• Custom gestures and interaction is HARD
• Managing events and contexts is even HARDER
• Making it intuitive and habitual is the HARDEST
33
36. Non-standard UIs
• RWD is largely composed of media queries,
responsive media, grids, etc
• core tenets are important, but to build the high-quality
sites that we aspire to create, we need to
keep pressing forward
• http://bradfrostweb.com/blog/post/designing-an-effective-
35
donate-form/
37. Non-standard UIs
• that means accounting for:
36
– feature detection
• Modernizr - http://modernizr.com/
• Polyfills - https://github.com/Modernizr/Modernizr/wiki/HTML5-
Cross-browser-Polyfills
– device and platform-specific APIs (gyroscope? Firefox OS?)
– Performance and Above-the-fold rendering
– conditional, lazy-loading
– Caching and storing assets/resources in Web Storage or
Local Storage
– touch, motion, movement, and other sensory input
– Validation and Feedback
– ”responsive interaction” and “fat-finger” scenarios
38. Never Build Large Apps: The secret to
building large apps is never build
large apps. Break your applications
into small pieces. Then, assemble
those testable, bite-sized pieces into
your big application.
Justin Meyer, author JavaScript MVC
37
39. Quality Matters: When I hear “just
bang out code that works” I think of
all the apps I don't use anymore
because they gradually lost the
ability to iterate.
38
Avdi Grimm
40. I would much rather build project
that really rocks than build five
mediocre ones. No one ever
remembers the “meh”.
39
44. Extra Tidbits
43
• Validation
– Serverside
– Classic JS validation
– HTML5 validation e.g. ”:required”
• https://developers.google.com/web/fundamentals/input/form/provide-real-time-validation
• AtoZCSS "required” http://www.atozcss.com/the-required-pseudo-class/
• https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
• http://codepen.io/matthiasak/full/gCzol
• automation and intuition
– Always use labels on form inputs, and ensure they're visible when the field is in
focus.
– Use placeholders to provide guidance about what you expect.
– To help the browser auto-complete the form, use established name's for elements
and include the autocomplete attribute.
• today's holy grail: "movie FUIs”
– http://www.noteloop.com/kit/fui/movie/
– http://www.lorcanoshanahan.com/ctmgui
– http://work.gmunk.com/OBLIVION-GFX
45. Start a new project as simple as it can
get and only add things if you really
need them.
44
Stephen Hay
http://bastianallgeier.com/notes/simplicity
47. Creativity is within you and all you
need is a fast way to let it out. The
more direct, the better. For a web
developer the editor is the pen and
the browser is a piece of paper.
46
Bastian Allgeier
49. The Dawn of Microlibs
“This is the Unix philosophy: Write programs that do
one thing and do it well. Write programs to work
together. Write programs to handle text streams,
because that is a universal interface”
48
Doug McIlroy
A Quarter Century of Unix. Addison-Wesley. 1994.
51. The Dawn of Microlibs
50
Microlibs can help!
• If a problem is not completely
understood, it is probably best to
provide no solution at all.
• If you can get 90 percent of the desired
effect for 10 percent of the work, use
the simpler solution.
• Isolate complexity as much as possible.
52. There is no "one true way", experiment,
experiment, experiment!
51
54. Agile design and agile development go
hand-in-hand; if design isn't on your
mind when you are coding, you've
already lost. Design won't settle for
being an afterthought.
53
55. “Masters return to this childlike state,
their works displaying degrees of
spontaneity and access to the
unconscious, but at a much higher
level than the child.”
54
Robert Greene
Mastery
56. It’s about fundamentals…
“When you first start to study a field, it
seems like you have to memorize a zillion
things. You don’t.
What you need is to identify the core
principles – generally three to twelve of
them – that govern the field.
The million things you thought you had to
memorize are simply various
combinations of the core principles.”
55
John T. Reed
58. #PerfMatters
Making awesome stuff really
requires intimate knowledge of
positioning, design, an insatiable
appetite for speed, and ruthless
attention to detail.
57
59. #PerfMatters
Delay Reaction
0 – 100ms Instant
100 – 300ms Feels sluggish
300 – 1000ms It atleast works
1s+ User forgets we’re here
10s+ I’m gonna’ come back later…
58
60. #PerfMatters
Animate as much as you can with CSS.
Browsers can better optimize simple,
declarative CSS animations and
transitions.
But these obviously only work for
"one-shot" transitions, like toggling UI
element states.
59
61. #PerfMatters
• simple animation patterns and offsets really
make a great impact
– http://aerotwist.com/tutorials/protip-stick-vs-ease/
– http://aerotwist.com/tutorials/protip-offsets-and-opposing-
60
motion/
• Sometimes to achieve buttery smooth UI you
have to do things that don't scale well – but
don’t go crazy!
• keeping graphic detail lo-fi, but animation detail
hi-fi is all the latest rage
62. #PerfMatters
4 things a browser can animate cheaply
(move all your visual effects into these four things.
Transition everything else at your own risk)
1. size -> transform: scale(n)
2. position -> transform: translateX(npx)
3. rotation -> transform: rotate(ndeg)
4. opacity -> opacity: 0...1
61
68. Facing North
• Rendering is really hard to optimize.
– http://codepen.io/matthiasak/pen/ptHbw
– Use transforms only for animation
– “layer promote to the GPU” with translateZ, will-change,
and backface-visibility:hidden
• Audio and Video are hard
• Interactive is just plain hard
67
73. Please Leave Feedback During Q&A
72
If you leave session
feedback and provide
contact information in
the survey, you will be
qualified for a prize
Scan the QR Code to
the right or go to
http://bit.ly/1p13f3n