A little late from looking for harbour seals. Here is the first part of the afternoon on CascadiaJS Browser Day.
Courtney Hemphill: Algorithms for Animation – Simple formulas to activate your UI
Animations started as cognitive aids.
Motion is something that humans inately respond to without help bubbles and breadcrumbs to help users move through our sites and apps.
There is a notion of affordance. If you see is a chair, you know that you can sit on it. Signifiers are signals that tell people what they can do.
Best design can use the affordance that signifies to them what can be done.
Animated transitions give logical map of where things lie in the interface e.g. swiping, scrolling
Auto Loading allows for new content without loading a new page.
Immediate feedback, like shaking left/right to show it’s wrong.
Navigation swipe to move through the main menu.
Progressive Disclosure giving them the information when needed.
Context = keep your users continually informed.
How do you communicate?
There’s tons of ideas on how to improve our interfaces, but can do a lot of patterns with animation.
The basics of animation: interpolation
valueAtTime = (end – start) * time / duration + start
It’s about making things making look as realistic as possible.“Using a term like nonlinear science is like referring to the bulk of zoology as the study of non-elephant animals.” -Stanislaw Ulam
Reality is organic. Natural movement include torque, drag, spin, friction. Can mimic the same thing using easing functions. Changing the rate at which we progress.
valueAtTime = (end – start ) * easing + start
Can use different algorithms, might have the specific algorithm in branding guidelines.
Follow Through = goes beyond 1. Not just moving and stopping at a place e.g. elasticity
Can create nice prototyping layers by creating parts around all the things talking about. It’s giving designers and front-end team all the tools they need to play around with how they can put in the different elements and really keeping within constraints.
With mobile, want more swiping, scrolling than directing where to tap.
Tools
- Prototyping: Axure, keynote, protoshare, flinto (iOS) justinmind, invision, easel (github)
- CSS: animate.css ; CSSanimate.com; Material Design Lite
- JS: Framer.js, Tween.js, GSAP (Greensock), jQuery
Performance
It depends. If tied to another element, then look at JavaScript. For eximple animations, CSS might be better.
To End
Go forth and animate!
Allen Pike: Framework Fatigue
Why are there so many? What is going on?
There is no community consensus about which framework is the best for your problem. This is not considered normal. e.g. Ruby: Rails, C++: Unreal.
“the latest and greatest JavaScript framework comes around every sixteen minutes.”
TodoMVC shows how to create a “to do” list in each framework to compare them.
The answer is JavaScript.
The defining thing about JavaScript is that it’s the language of the browser. The browser is the most successful, probably distributed application, software plat from in history. If you need to build something for the web, you get sucked into the vortex.
There is a huge diversity in backgrounds, and what languages they’re used to, and how they solve their problems. Also a huge diversity in what they’re trying to solve with JavaScript.
The basic thing that browsers give us is JavaScript. Unfortunately, many of the standard libraries (e.g. Date) are terrible.
Another problem is the number of frameworks that are dying off. The browser is changing too fast for frameworks to keep up. All the code that you’re not making use of becomes a liability. Size limitation on frameworks.
Believed that there was a framework that could solve al lthe problems, but mobile happened and it would crash because it couldn’t load the whole thing. Wanted it to be a thing, but now seems to just be
an evolutionary dead.
The small, nimble frameworks seemed to outcompete the large growing frameworks. It was more suited to the quirky, dynamic, loose language that works.
The general consensus seems to be to
build micro-frameworks.
Really, they’re just libraries, but build applications using micro-frameworks and compose it into one project.
Unfortunately, doesn’t give a sense of cohesion for a team. Frequently not tenable for large project or organization.
Need a set of teachable, readable set of documentation for their team about how to solve the problems. Unfortunately, what this causes is they end up creating their own framework and maintaining their own framework.
Options that will possible solve the problems
- Enshrine some of the functionality from the frameworks that we need into the browser.
- Get really low level. Build on a solid, base platform using new APIs e.g. WebGL, WebAssembly
- Incremental breakage: don’t build a car when you’re building a bicycle.
- Embrace the chaos.
http://www.allenpike.com/2015/javascript-framework-fatigue/
Ben Straub: Hacking Culture with JavaScript
Everyone wants a robot, but they have a PR problem.
Hu-bot is the key in how you change your company culture in how you
? Software is awful at making decisions.
It’s good at doing repeated tasks. You’re a terrible robot, and make mistakes, so you need to fire yourself and hire a software robot.
Thought Experiment
Get your team to use a robot.
- Get a chat room. Easier and better than email. Examples: HipChat, slack, Campfire, IRC
- Get a robot. Options: LITA, Hu-Bot, Err…
- Turn on GIF search. Get people used to asking bot for work. Get them to trust the robot. If they can’t trust it for silly things, won’t trust it for serious work.
- Automate. Just one thing. Example: continuous integration notification, deploying constantly because every sees when something goes wrong.
Start seeing opportunities everywhere. Example: work address, phone, trello notification, foursquare API, pull up test runs, twitter search, response time of site, machine statistics, graphs, twitter write access.
Each one is a cultural stimulus. Everyone can watch it happen. What you’re really saying is
We always want to know about this thing. Thing thing should be highly visible.
Automating is non-personal. Humans value effort, care, and personalization.
Virtual high five example tied to Amazon gift card. Random chance of doubling, and boomerang (where giver also gets it). Instead of having to
Benefits
- Money – seen reasonable use, never hit limits. 150 in 6 months, Average $24/gift, average $25/month. Then sharing
- Recognition – respond way more to recognition than money. Way less work for management. The people who know best give the rewards.
- Incentives – everybody wants the right thing, for it to work.
- Imaginificence (?) – use software to automate software, but got engineering to think about HR, feelings and stuff. Can help the company to make a better company. Culture is about how you work together, not just up to HR and management.
Break Time
Maybe go out to take a picture.
