Tags: interaction



You Might Not Need JavaScript

Una has put together a nice collection of patterns that use CSS for interactions. JavaScript would certainly be more suitable for many of these, but they still provide some great ideas for robust fallbacks.

Aria-Controls is Poop | HeydonWorks

I wrote a while back about how I switched from using a button to using a link for progressive disclosure patterns. That looks like it was a good move—if I use a button, I’d need to use aria-controls and, as Heydon outlines here, the screen reader support is pants.

City Objects

A catalogue of objects and observations from cities around the world.

Building better accessibility primitives

On the need for a way to mark parts of a document as “inert” while the user is interacting with modal content.

eBay MIND Patterns - GitBook

A very handy collection:

This book contains frontend coding patterns (and anti-patterns) that will assist developers in building accessible e-commerce web pages, widgets and workflows.

I like that it contains a list of anti-patterns too.

There’s also a corresponding collection of working demos.

You Don’t Need JavaScript for That!

A few common patterns—tooltips, fly-out menus, and toggles—that you can achieve with CSS.

Richard Dawkins, Mount Improbable: Play With Evolution

A lovely interactive demonstration of evolution, based on the original code Richard Dawkins used for Climbing Mount Improbable.

Frend — A collection of accessible, modern front-end components.

A nice little collection of interaction patterns with built-in accessibility and no dependencies.

Developing Dependency Awareness – Smashing Magazine

A typically superb article by Aaron. Here, he breaks down a resilient approach to building for the web by examining the multiple ways you could add a button to a page. There’s a larger lesson here too:

We don’t control where our web-based products go or how our users access them. All we can do is imagine as many less-than-perfect scenarios as possible and do our best to ensure our creations will continue to do what they’re supposed to do. One of the easiest ways to do that is to be aware of and limit our dependencies.

OOUX: A Foundation for Interaction Design · An A List Apart Article

I really, really like this approach. I’ve used something similar in my responsive design workshops, where I get people to break things down into nouns and verbs (objects and actions). I think there’s a lot of crossover with good URL design here too—this is kind of like REST for UX designers.

Interactive Form

I quite like this step-by-step interface for a form, all cleverly handled with the :focus pseudo-class. I’d want to refine some of the usability issues before using it in production, but the progressive disclosure is nice.

Design without touching the surface – Leapfroglog

My concern is that by encouraging the practice of doing UX design without touching the surface of a product, we get shitty designs. In a process where UX and UI are seen as separate things the risk is one comes before the other. The UX designer draws the wireframes, the UI designer gets to turn them into pretty pictures, with no back-and-forth between the two. An iterative process can mitigate some of the damage such an artificial division of labour produces, but I think we still start out on the wrong foot. I think a better practice might entail including visual considerations from the very beginning of the design process (as we are sketching).

Revisiting the Float Label pattern with CSS — That Emil is Emil Björklund

A clever technique by Emil to implement the “float label” pattern using CSS. It all hinges on browsers supporting the :placeholder-shown pseudo-class which, alas, is not universal.

I was hoping that maybe @supports could come to the rescue (so that a better fallback could be crafted), but that tests for properties and values, not selectors. Damn!

Photo upload and progressive enhancement for FixMyStreet / mySociety

Matthew describes a very nice bit of progressive enhancement for drag’n’drop file uploads (similar to the CSS Tricks article I linked to recently).

It uses the Dropzone JS which looks like it aligns nicely with the progressive enhancement approach.

Five Goofy Things Medium Did That Break Accessibility — Medium Engineering

Some mea culpas from a developer at Medium. They share so that we may learn.

How to fix a bad user interface - Scott Hurff

A lesson on the importance of handling each state of an interface:

  • the blank state,
  • the loading state,
  • the partial state,
  • the error state,
  • and the ideal state

…instead of just focusing on that last one.

Spatial Interfaces — Elepath Exports — Medium

A detailed and humorous deep dive into motion design and spatial depth in digital interfaces.

Nicole Fenton | Interface Writing: Code for Humans

The text of Nicole’s excellent talk on writing helpful, human microcopy.

Let Links Be Links · An A List Apart Article

A superb piece by Ross Penman on the importance of being true to the spirit of the web.

Native Scrolling by Anselm Hannemann

This gets nothing but agreement from me:

For altering the default scroll speed I honestly couldn’t come up with a valid use-case.

My theory is that site owners are trying to apply app-like whizz-banginess to the act of just trying to read some damn text, and so they end up screwing with the one interaction still left to the reader—scrolling.