Tags: interaction



Designing The Perfect Date And Time Picker – Smashing Magazine

Vitaly’s been bitten with date-picker fever. Here’s his deep, deep, deep dive into one interface element.

What football will look like in the future

I can’t remember the last time I was genuinely surprised, delighted, and intrigued by an online story like this.

It is as if you were doing work

Stop dilly-dallying and just get this work done, okay?

Design in the Era of the Algorithm | Big Medium

The transcript of Josh’s fantastic talk on machine learning, voice, data, APIs, and all the other tools of algorithmic design:

The design and presentation of data is just as important as the underlying algorithm. Algorithmic interfaces are a huge part of our future, and getting their design right is critical—and very, very hard to do.

Josh put together ten design principles for conceiving, designing, and managing data-driven products. I’ve added them to my collection.

  1. Favor accuracy over speed
  2. Allow for ambiguity
  3. Add human judgment
  4. Advocate sunshine
  5. Embrace multiple systems
  6. Make it easy to contribute (accurate) data
  7. Root out bias and bad assumptions
  8. Give people control over their data
  9. Be loyal to the user
  10. Take responsibility

Christina Xu: Convenient Friction: Observations on Chinese UX in Practice on Vimeo

This was my favourite talk from this year’s Interaction conference—packed full of insights, and delivered superbly.

It prompted so many thoughts, I found myself asking a question during the Q&A.

A Todo List

A great step-by-step walkthrough by Heydon of making an accessible to-do list, the “Hello World” of JavaScript frameworks.

There’s a lot of great knowledge in here that can be applied to plenty of other interface elements too.

Strange Beasts on Vimeo

A small black mirror.

1968 Demo Interactive - Doug Engelbart Institute

A new way to enjoy the mother of all demos, organised into sections that you can jump between. This was put together by Douglas Engelbart’s daughter Christina, and Bret Victor.

Let’s Make the World We Want To Live In | Big Medium

Josh gives a thorough roundup of the Interaction ‘17 event he co-chaired.

“I think I’ve distilled what this conference is all about,” Jeremy Keith quipped to me during one of the breaks. “It’s about how we’ll save the world through some nightmarish combination of virtual reality, chatbots, and self-driving cars.”

Let them paste passwords - NCSC Site

Ever been on one of those websites that doesn’t allow you to paste into the password field? Frustrating, isn’t it? (Especially if you use a password manager.)

It turns out that nobody knows how this ever started. It’s like a cargo cult without any cargo.

Rafaël Rozendaal - Formal characteristics of the browser

I really like this list of observations (Vasilis pointed it my way). I feel like it encapsulates some of what I was talking about in chapter two of Resilient Web Design. The only point I’d take issue with now is the very last one.

Hey designers, if you only know one thing about JavaScript, this is what I would recommend | CSS-Tricks

This is a really great short explanation by Chris. I think it shows that the really power of JavaScript in the browser isn’t so much the language itself, but the DOM—the glue that ties the JavaScript to the HTML.

It reminds me of the old jQuery philosophy: find something and do stuff to it.

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.