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.
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.
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).
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!
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.
Some mea culpas from a developer at Medium. They share so that we may learn.
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.
A detailed and humorous deep dive into motion design and spatial depth in digital interfaces.
The text of Nicole’s excellent talk on writing helpful, human microcopy.
A superb piece by Ross Penman on the importance of being true to the spirit of the web.
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.
A look at the risks of relying on a purely graphical icon for interface actions. When in doubt, label it.
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.
Any sufficiently advanced vision piece is indistinguishable from Black Mirror.
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.
Designing primarily in a laptop web browser and testing with a mouse rather than fingers may come to look very out of date soon.
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.
A modest proposal: respect.
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:
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
Léonie gives a great, clear description of how screen readers switch modes as they traverse the DOM snapshot.
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.
Personally, I’m all for more browsers. The more, the merrier.
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?
Heydon Pickering put together a great collection of accessible self-contained interface patterns that demonstrate smart use of ARIA.
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.
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?
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.
Some good brainstorming from Tantek that follows on nicely from Anne’s recent manifesto.
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.
I hate carousels, but if you’re going to have one, this progressively enhanced approach looks pretty good.
Dan Bricklin—co-creator of the original VisiCalc spreadsheet—turns his attention to responsive design, specifically for input-centric tasks.
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.
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.
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.
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.
I kind of love the interaction design of this site.
A design fiction video depicting technology that helps and hinders in equal measure.
Timoni tackles the tricky topic of teaching taps.
Discoverability can be hard, but that shouldn’t stop us trying out new interactions.
Related to my rant on links that aren’t actually links: buttons that aren’t actually buttons.
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?
A look at the depiction of computer hardware and peripherals in sci-fi movies over time.
A gorgeous collection of experiments that showcase just how much is possible in browsers today.
This might well be the best thing Wired has ever published. I wish every article were in this format.
Beautiful thoughtful work from the BERGians.
A short film about interaction design.
Interaction dissolving into the environment.
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.
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.
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.
This resonates deeply with me. It is worth your heartbeats.
I didn’t count how many heartbeats it took to read this, but it was worth every single one.
See now, this is why liquid layouts are the way to go.
A look at the new pseudo-classes in CSS3 that go hand-in-hand with the form enhancements introduced in HTML5.
Prompted by Brad’s recent post, here are some musings on three methods of handling navigation in responsive sites.
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.
Nik demos the neat interactions in Realmac’s latest piece of iOS software in this cute little video.
This is the talk I gave at An Event Apart through 2010. It’s all about interaction design with some examples from Huffduffer.
Bill Buxton’s collection of input devices going back thirty years.
Brad takes a detailed look at mobile browser support for fixed positioning and how it intersects with page zooming.
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.
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.
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.”
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.
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.
An excellent little rant by Cennydd that I agree with 100%: hovering does not demonstrate user intent.
A beautiful piece of musical mathematical poetry.
A timely reminder: don't hide information behind mouseover events.
Adam Greenfield is spot-on here, dismantling Apple's "imitate real world objects" design guideline for iPhone and iPad apps.
A beautiful reminder.
A portfolio of imaginary interfaces as seen in the movies.
A set of short, easily-digested lessons from the world of interaction design, inspired by "101 Things I Learned In Architecture School."
A jQuery plug-in inspired by the interaction feedback on Huffduffer, which was in turn inspired by retro games.
If you want to see this book published (and you should), why not pledge a little something to the cause?
Dave Gorman understands Twitter. Many do not.
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"
Heartfelt and moving: praise for those who sprinkle doses of humanity into software interfaces.
Screenshots of various log in screens on the iPhone. I think Cindy has been hanging out with Luke W.
A proof of concept browser from Adaptive Path together with Mozilla Labs. This must have been fun to work on.
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.
Ignore the attention-grabbing headline. Brothercake is something more nuanced here (and he's backing it up with examples).
Cameron has put all the materials from his four-part series together in one handy spot.
This is pretty freakin' awesome: an accessible interface onto Second Life.
Matt Jones speaks about "Designing for SpaceTime, Building in No Time."
Steve Faulkner gives a rundown of the current state of play between screen readers and Ajax.
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.
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 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."
From the people who brought you jQuery comes a set of widgets built using jQuery complete with documentation and tutorials.
Finally revealed: what Jeff has been working on since he moved into the lair of the Google. He's been making Google Analytics look and feel nicer.