Mind Benders, Day 2

The second day of a conference can be challenging to stay focused and find those takeaway gems. I’m happy to say day two of the 2016 An Event Apart in Seattle, Wash. was equally challenging as the first.

Jeremy Keith – Resilience: Building a Robust Web That Lasts

Jeremy broke out the history books for this presentation. He shared some really interesting things that highlighted ways to create resilient sites.

Did you know the first online message was sent, October 29, 1969? The developers tried to send the word  “login” but ended up crashing the Internet after sending the first two letters.  http://thisdayintechhistory.com/10/29/first-message-on-the-internet/

HTML tags started with 21 elements borrowed from SGML. Today HTML5 has 121 elements.

Backwards compatibility is built into the web by design.

One of the things Jeremy shared was Postel’s law of robustness. “Be conservative in what you send, liberal in what you receive.” https://en.wikipedia.org/wiki/Robustness_principle This law resonated with me at a pretty deep level. Not only is applicable to online development but to how I approach life. Apply this law to human relationships; hold high standards for yourself and yet be tolerant of others. #soapboxoftheday

3 Steps To Building Things

  1. Identify core functionality
  2. Make that functionallity available using the simplest technology
  3. Enhance!

Easy trap: developer convenience over user needs. #stayoutofthisone

Funniest moment of the presentation: Jeremy’s use of the term consensual hallucinations to describe how we’ve all made assumptions about the web. For example how we’ve assumed  everyone uses a 800 pixel screen or has access to the same colors.

Jason Grimsby – Adapting to Input

4 Input Truths

  1. Input is exploding, we can’t make assumptions on screen size and form factor
  2. It’s undetectable
  3. It’s a continuum
  4. It’s transient

Design for the largest target by default.

What to check out and explore: Autocomplete standard for input types. input type=“email” autocomplete=“email” / requestAutocomplete standard

Val Head – Designing Meaningful Animation

It’s right before lunch and I’m starting to fade when all of a sudden Val Head sweeps onto the stage and wakes me up with really entertaining thoughtful insights into web animation. It’s a subject that might get a little deep, but Val brought solid principles from the world of movie animation to inform the decisions we make for the web.

The book, Illusion of Life, by Disney shares 12 principles of animation. vimeo.com/93206523 Val shared three of the 12 to illustrate how to approach making decisions about animating the web.

1. Timing and Spacing = duration and change in speed over the duration

-make animated objects appear to obey the laws of physics

-establishes mood emotion and reaction

-timing = duration, Spacing = easing

cubic-bezier (.3 .4 .5 .2) – these are two x y coordinates

Tool of the hour: cubic-bezier.com

2. Followthrough = not everything stops at once

3. Secondary Action = supplemental action, reinforces and adds dimension to the primary action.

Takeaways:

  1. Make animations that feel like they are working together.
  2. Make similar objects animate in similar ways.
  3. Decide how do you define your brand in motion; then document it. Build your own animation library.

Cameron Moll – Unified Design

Previous experiences inform new experiences. So how can we make a seamless user experience regardless of how a person accesses our content?

People want to do the same actions/tasks on all devices.

Unified Design = A consistent experience regardless of where the experience begins, continues and ends.

More than 40% of all online U.S. users start an activity on one device and finish on another. (Data source: Facebook)

8 Best Practices

  1. Unify your internet presence, not just your web presence.
  2. Treat every facet of the user experience as a contributor to unity. Branding is autocratic. Unified design is duocratic; a two-way partnership.
  3. Consider using web views when developing your native app.
  4. Unify actions, not just content.
  5. Store session data in the cloud, not locally.
  6. Replace ‘click’ with tap, press, point or select.
  7. Replace ‘mobile’ with small, smallish, etc.
  8. Eliminate big screen bloat.

The best interface is the one within reach. The best user experience assumes every interface is the one within reach

(Site to check: Musicbed.com)

Eric Meyer – Compassionate Design

Directly from Eric’s personal pain, comes a challenge not to write off the worst case scenarios. He starts off with an account how Facebook reminded him on Christmas Eve of what was happening a year earlier with a smiling face of his daughter who had recently passed away from cancer.

Compassionate design takes into consideration multiple case scenarios or less than ideal scenarios and makes plans for that in our design. It’s really easy to be wrong when designing because we tend to envision a stereotype or envision ourselves.

Plan for what can go wrong and adapt the design for it. Plan for the worst.

How to be a compassionate designer:

  1. Perform a project premortem.
  2. Create a designated dissenter role in each design project to enable the system two analytical thinking processes that will catch the worst case scenarios.
  3. Communicate intent
    • A good example is Patientslikeme.com.
    • Ask about activating things and include a confirmation.
  4. Consider the context
    • Simple banking is a good example when you need to block your card
    • MailChimp is another site that considers the distinction between voice and tone. Their use of This not That principles is on point; i.e. fun, not childish. Read it aloud advice is the “What would a human do” test.
  5. Value Users
    • People get incredibly frustrated if they feel like they have to lie.
    • The Question Protocol book asks four points to help you value users.
  6. Making the Case
    • Be conservative in what you ask and liberal in the types of options you accept
    • It will make money –  Slack.com makes it really simple to get support and scours feedback for things that need changing.Screenshot of Slack.com
    • It will save money – gov.uk saved money by looking at the calls they were getting and making it easier to to access the info requested only and saved 4 billion pounds a year.
    • It will decrease risk – minimize the risk of being a viral story in social media. Minimize the risk of loosing trust of your users or potential users.

Compassion is vital!

Lara Hogan – Designing for Performance 

Have performance anxiety? Use webpagetest.com to take your site to the doctor.

By optimizing images, we can make significant headway toward better performance because images make one of the bulkiest parts of the web.

  • Replace GIF animations with css
  • Replace non-animated GIFs with PNG-8s.
  • Replace movie GIFs with asynchronously-loading videos.
  • Replace simple images with SVG.
  • Responsive images specification

ImageOptim is a tool for mac. 44% average space saved when Etsy implemented this image optimization.

WordPress Plugin wordpres.org/plugins/ewww-image-optimizer/

SVG scrubber – codedread.com/scour/ or github.com/svg/svgo

Use font subsets – but document your process.

Semantics and Repurposability

  • Create assets that can get reused.
  • Rename non-semantic elements
  • Remove inefficient selectors
  • Remove unnecessary elements