Tags: interaction

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.

Thomas Byttebier - The best icon is a text label

A look at the risks of relying on a purely graphical icon for interface actions. When in doubt, label it.

The Smithsonian’s design museum just got some high-tech upgrades

A profile of the great work Aaron and Seb have been doing at the Cooper Hewitt museum. Have a read of this and then have a listen again to Aaron’s dConstruct talk.

Productivity Future Vision

Any sufficiently advanced vision piece is indistinguishable from Black Mirror.

Awesomplete: Ultra lightweight, highly customizable, simple autocomplete, by Lea Verou

Lea wasn’t happy with the lack of styling and extensibility of the datalist element, so she rolled her own lightweight autocomplete/type-ahead widget, and she’s sharing it with the world.

The challenge for web designers in 2015 (or how to cheat at the future)

Designing primarily in a laptop web browser and testing with a mouse rather than fingers may come to look very out of date soon.

The Humane Representation of Thought on Vimeo

Yet another brilliant far-ranging talk from Bret Victor.

I’ve tried to get him to come and speak at dConstruct for the past few years, but alas, with no success.

How did Twitter become the hate speech wing of the free speech party?

A look back at how Twitter evolved over time, with examples of seemingly-trivial changes altering the nature of the discourse.

Kevin finishes with a timely warning for those of us building alternatives:

In the indieweb world we are just starting to connect sites together with webmentions, and we need to consider this history as we do.

Physical Web by google

This is what Scott Jenson has been working on—a first stab at just-in-time interactions by having physical devices broadcasting URLs.

Walk up and use anything

The Tink Tank » Understanding screen reader interaction modes

Léonie gives a great, clear description of how screen readers switch modes as they traverse the DOM snapshot.

Somebody

We are on our way to a bright Maneki Neko future.

UX How-To with Luke Wroblewski - YouTube

A fantastic collection of short videos from Luke on interaction design for devices of all shapes and sizes.

Make yourself a nice cup of tea, hit “Play all”, sit back, relax and learn from the master.

Radio-Controlled Web Design · An A List Apart Article

Turns out that the :checked pseudo-class selector allows you to do some clever interaction without JavaScript.

Breach - A browser for the HTML5 era

A new browser on the block (though not a new rendering engine), this one is written is written entirely in JavaScript. It’s worth taking it for a spin to see some of the interesting interface ideas around tabs and loading indicators.

Personally, I’m all for more browsers. The more, the merrier.

The Making of Aprilzero

The first in a series of posts looking at the process behind builfing this “quantified self” site:

As with most decisions in my life, I asked myself: What would Tony Stark do?

Practical ARIA Examples

Heydon Pickering put together a great collection of accessible self-contained interface patterns that demonstrate smart use of ARIA.

Wearables versus there-ables.

Some interesting thoughts that follow on nicely from Scott Jenson’s ideas around just-in-time interactions:

What if the technology was actually already in the room when we got there? Maybe that’s the kind of Internet-of-things that will be more sustainable and will win long-term.

Scrolling is easier than clicking

This observation by Josh seems obvious in hindsight (all the best insights do), but there’s a powerful idea there:

So here is the real difference: scrolling is a continuation; clicking is a decision. Scrolling is simply continuing to do what you’re currently doing, which is typically reading. Clicking, however, is asking the user to consider something new…is this new thing the same as what I’m already doing, or something new?

300ms tap delay, gone away - HTML5Rocks Updates

I think Chrome is doing the right thing by removing the 300 millisecond tap delay on sites that set width=device-width — it’s certainly better than only doing it on sites that set user-scalable=no, which felt like rewarding bad behaviour.

Toward A People Focused Mobile Communication Experience - Tantek

Some good brainstorming from Tantek that follows on nicely from Anne’s recent manifesto.

What Screens Want by Frank Chimero

Frank’s fantastic closing talk from this year’s Build. There’s a lot of great stuff in here about interaction design, and even more great stuff about what’s been happening to the web:

We used to have a map of a frontier that could be anything. The web isn’t young anymore, though. It’s settled. It’s been prospected and picked through. Increasingly, it feels like we decided to pave the wilderness, turn it into a suburb, and build a mall. And I hate this map of the web, because it only describes a fraction of what it is and what’s possible. We’ve taken an opportunity for connection and distorted it to commodify attention. That’s one of the sleaziest things you can do.

Wallop Slider

I hate carousels, but if you’re going to have one, this progressively enhanced approach looks pretty good.

Responsive App Design

Dan Bricklin—co-creator of the original VisiCalc spreadsheet—turns his attention to responsive design, specifically for input-centric tasks.

Enabling new types of web user experiences - W3C Blog

Scott gives us an excellent State Of The Web address, looking at how the web can be central to the coming age of ubiquitous computing. He rightly skips through the imitation of native apps and gets down to the potential of just-in-time interactions.

Human Interest by Trent Walton

Trent proposes a way to avoid implementing dark patterns: take a leaf from the progressive enhancement playbook and assume the worst conditions for your user’s context.

Responsive Navigation: Examples of Navigation in Responsive Design

A nice collection of navigation patterns for responsive designs. The demos aren’t using a mobile-first approach, and they’re reliant on jQuery, but they could be easily adapted.

Issue 18850005: Disable double tap zoom on mobile sites, to remove 300ms click delay - Code Review

Well, this is interesting: it looks like Chrome might stop waiting 300ms for potential double-tap-to-zoom events if the site is using a meta viewport declaration that sets the width to device-width.

Designers’ Friend

I kind of love the interaction design of this site.

A Digital Tomorrow on Vimeo

A design fiction video depicting technology that helps and hinders in equal measure.

Responsive Nav — Responsive Navigation Plugin

This looks like a handy little bit of JavaScript for progressively enhancing navigation lists to show/hide them on smaller screens. And it’s not a jQuery plug-in!

Don’t Be Afraid To Teach Interactions by Timoni West

Timoni tackles the tricky topic of teaching taps.

Discoverability can be hard, but that shouldn’t stop us trying out new interactions.

You can’t create a button by Nicholas Zakas

Related to my rant on links that aren’t actually links: buttons that aren’t actually buttons.

Carousel interaction stats by Eric Runyon

I’ve never been a fan of carousels on websites, to put it mildy. It seems I am not alone. And if you doubt the data, ask yourself this: when was the last time you, as a user, interacted with a carousel on any website?

The changing face of computers on screen

A look at the depiction of computer hardware and peripherals in sci-fi movies over time.

Form Follows Function

A gorgeous collection of experiments that showcase just how much is possible in browsers today.

Text Adventure: Zork Creators Honored With Pioneer Award | Game|Life | Wired.com

This might well be the best thing Wired has ever published. I wish every article were in this format.

Connecting (Full Film) on Vimeo

A short film about interaction design.

The best interface is no interface | Cooper Journal

Interaction dissolving into the environment.

The Past 100 Years of the Future

This (free!) PDF looks like it could be a nice companion piece to Chris and Nathan’s recent book:

Human-computer interaction in science-fiction movies and television.

It’s a work in progress. You’ll notice a lot of placeholders where the images should be. That’s because the studios are demanding extortionate rates for screenshots.

What is the medium? – David Bushell – Web Design

I’m really enjoying these thoughts prompted by Paul’s article in A List Apart. I particularly the idea of taking a long-zoom approach to progressive enhancement: evolving the aesthetic of web design over time.

The Computer for the 21st Century

A classic piece of design fiction written by Mark Weiser 21 years ago.

The most profound technologies are those that disappear. They weave themselves into the fabric of everyday life until they are indistinguishable from it.

The Slow Web – Jack Cheng

This resonates deeply with me. It is worth your heartbeats.

10 Timeframes | Contents Magazine

I didn’t count how many heartbeats it took to read this, but it was worth every single one.

Resizable Displays | Fluid Interfaces

See now, this is why liquid layouts are the way to go.

CSS3 Pseudo-Classes and HTML5 Forms | HTML5 Doctor

A look at the new pseudo-classes in CSS3 that go hand-in-hand with the form enhancements introduced in HTML5.

Thoughts on Responsive Navigation

Prompted by Brad’s recent post, here are some musings on three methods of handling navigation in responsive sites.

How to Approach a Responsive Design | Upstatement

A great behind-the-scenes look at the process behind the responsive Boston Globe site, with a particular emphasis on the visual and interactive design challenges.

Clear for iPhone (Coming Soon!) on Vimeo

Nik demos the neat interactions in Realmac’s latest piece of iOS software in this cute little video.

Jeremy Keith: Paranormal Interactivity on Vimeo

This is the talk I gave at An Event Apart through 2010. It’s all about interaction design with some examples from Huffduffer.

Buxton Collection

Bill Buxton’s collection of input devices going back thirty years.

Fixed Positioning in Mobile Browsers | Brad Frost Web

Brad takes a detailed look at mobile browser support for fixed positioning and how it intersects with page zooming.

A Brief Rant on the Future of Interaction Design

The next time you make a sandwich, pay attention to your hands. Seriously! Notice the myriad little tricks your fingers have for manipulating the ingredients and the utensils and all the other objects involved in this enterprise. Then compare your experience to sliding around Pictures Under Glass.

Mobile Apps Must Die | Blog | design mind

Scott writes up some of the things he talked about at the Breaking Development conference: the just-in-time interactions that are inevitable in a heavily-instrumented world.

Web Actions: Identifying A New Building Block For The Web - Tantek

Tantek’s braindump of research he and Erin have been doing on web actions—verbs for the web, specifically interactions across sites: sharing, liking, and so on. I agree with him that this terminology feels better than “web intents.”

Button Sluts and Web Actions

Erin documents the next step after web intents.

Journal of Emerging Investigators | JEI is a scientific journal for middle and high school scientists.

A great responsive design from Scott Jehl for a publication aimed at young science hackers. Notice how the interactions change according to available screen real-estate.

timoni.org - The most important page on Flickr

It’s funny, I’ve just recently become acutely aware of exactly the problem that Timoni describes here: the inability to filter new uploads by a particular user.

It makes stalking someone that much harder.

End hover abuse now : Cennydd Bowles on user experience

An excellent little rant by Cennydd that I agree with 100%: hovering does not demonstrate user intent.

aM laboratory

A beautiful piece of musical mathematical poetry.

Non Hover | Trent Walton

A timely reminder: don't hide information behind mouseover events.

What Apple needs to do now « Adam Greenfield’s Speedbird

Adam Greenfield is spot-on here, dismantling Apple's "imitate real world objects" design guideline for iPhone and iPad apps.

FUI Fantasy User Interfaces | Mark Coleran Visual Designer

A portfolio of imaginary interfaces as seen in the movies.

101 Things I Learned in Interaction Design School

A set of short, easily-digested lessons from the world of interaction design, inspired by "101 Things I Learned In Architecture School."

Adding “1UP notification” with jQuery - O! Mr Speaker!

A jQuery plug-in inspired by the interaction feedback on Huffduffer, which was in turn inspired by retro games.

Cadence & Slang is a book about interaction design. — Kickstarter

If you want to see this book published (and you should), why not pledge a little something to the cause?

Dave Gorman: When Twitter Gets Weird...

Dave Gorman understands Twitter. Many do not.

Cooper Journal: One free interaction

Small interactions that serve no useful purpose but are nonetheless satisfying. "Design this interaction such that: It's “free,” i.e. having no significance to the task or content, It's discoverable in ordinary use of the product, It's quick and repeatable (Less than half a second.), It's pleasant"

Rands In Repose: A Signature Cadence

Heartfelt and moving: praise for those who sprinkle doses of humanity into software interfaces.

iphone login screens - a set on Flickr

Screenshots of various log in screens on the iPhone. I think Cindy has been hanging out with Luke W.

Flickr login mobile

adaptive path » aurora concept video

A proof of concept browser from Adaptive Path together with Mozilla Labs. This must have been fun to work on.

RA DIOHEA_D / HOU SE OF_C ARDS - Google Code

The new Radiohead video isn't really a video at all. It's data visualisation. Here you can interact with the data points while the song is playing. I love this.

Stop using Ajax! - Opera Developer Community

Ignore the attention-grabbing headline. Brothercake is something more nuanced here (and he's backing it up with examples).

The Highly Extensible CSS Interface

Cameron has put all the materials from his four-part series together in one handy spot.

Exploring Methods of Accessing Virtual Worlds - AccessWorld® - March 2008

This is pretty freakin' awesome: an accessible interface onto Second Life.

Space Time/No Time - Brightcove

Matt Jones speaks about "Designing for SpaceTime, Building in No Time."

AJAX and Screen Readers - Content Access Issues - The Paciello Group Blog

Steve Faulkner gives a rundown of the current state of play between screen readers and Ajax.

KnickerPicker - online dressing room

A Flash interface that allows you to interact with lingerie models when shopping for knickers. I point this out purely for reasons of interaction research, of course.

Cognitive accessibility of user interfaces summarised in an oversimplified rule // plasmasturm.org

The Sapir WIMP hypothesis: "The more easily you can talk about a user interface, the more easily you can understand how to manipulate it."

No Ideas But In Things

"No Ideas But In Things is a library of controls, animations, layouts, and displays that might be a source of inspiration for interaction designers. Dan Saffer is the curator. The title comes from a William Carlos Williams poem."