Choosing the right input type for your form field.
Some interesting interface ideas here for informing users when a service worker is doing its magic.
In the future users may expect a site to work offline after visiting again, but until this happens, I think it is a good idea to let the users know about this feature.
This is witchcraft. I’ve been deconstructing the CSS to figure out how this works and it’s really clever.
(Hint: try commenting out some of the CSS and see what happens.)
An entertaining presentation from South By Southwest on the UI element of last resort.
It’s funny because it’s true.
The trouble with overflow menus is that you didn’t actually take anything away, you just obnoxiously obfuscated it.
Words of warning and advice from Daniel.
Instead of prioritizing, we just sweep complexity under the rug and pretend that it doesn’t exist.
Jason breaks down the myths of inputs being tied to device form factors. Instead, given the inherent uncertainty around input, the only sensible approach is progressive enhancement.
Now is the time to experiment with new forms of web input. The key is to build a baseline input experience that works everywhere and then progressively enhance to take advantage of new capabilities of devices if they are available.
Accessibility Matters: Meet Our New Book, “Inclusive Design Patterns” (Pre-Release) – Smashing Magazine
I think it’s a safe bet that this new book by Heydon will be absolutely brilliant.
It’s a handbook with valuable, time-saving techniques that will help you avoid hacky workarounds and solve common issues effectively.
Striking that balance between the reusability of modular components and maintaining a big-picture vision of the overall design:
We should always strive to use patterns in an application. For example, consistent use of colors and font sizes can quickly indicate to the user elements in the UI that can be interacted with. However, avoid using a pattern just because it has been implemented before; rather, use it because it really solves the problem at hand.
A catalogue of objects and observations from cities around the world.
You’re supposed to be able to create two-handled sliders with
input type="range" but the browser support isn’t there yet. In the meantime, Lea has created a nice lightweight polyfill.
Here’s a nice little pattern from Dave—showing data tables one column at a time on smaller screens.
Our Harry’s in the New York Times! Well, an article on dark patterns is in the New York Times, and Harry is Mr. Dark Patterns.
Here’s a well put-together collection of common patterns that are now much easier thanks to flexbox.
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.
Well, this is rather wonderful! A one-stop-shop for exploring UI patterns on CodePen …this is going to be time sink.
Infinite Scrolling, Pagination Or “Load More” Buttons? Usability Findings In eCommerce – Smashing Magazine
A good side-by-side comparison of loading techniques, with some clear advice. But pay attention to this note:
While the debate over “Load more” versus infinite scrolling versus pagination has been debated for years, the product loading method shouldn’t be the first thing that most e-commerce vendors spend their development resources on.
Cennydd speaks his brains on conversational interfaces—a refreshing counterpoint to Chris’s cheerleading.
I love this little markup pattern: simple, accessible and elegant …with some quirky CSS gotchas around styling non-standard prefixed pseudo-elements. They came from the Shadow DOM …dun dun DUN!
We have some new
font keywords that are basically shortcuts to using the system fonts on a device. This article explains the details.
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.
Jennison Asuncion outlines the problem with relying on a swipe gesture for interactions.
I would say that this could be expanded to just about any interaction: it’s always dangerous to rely on one specific gesture. It’s always better to either provide multiple ways of accomplishing a task, or to simply take a declarative approach, get out of the way, and let the user agent handle it.
This is a terrific example of progressive enhancement in action: going from a simple file input to a lovely interactive drag’n’drop interface.
This looks like a terrific presentation from Alla on iconography, semiotics, and communication.
Fire up Firefox and try out these demos: the CSS
element value is pretty impressive (although there are currently some serious performance issues).
To put it simply, this function renders any part of a website as a live image. A. Live. Image!
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.
This sounds like it could be a very useful tool to introduce early in projects to get a shared understanding of progressive enhancement.
The controversial hamburger icon goes mainstream with this story on the BBC News site.
It still amazes me that, despite clear data, many designers cling to the belief that the icon by itself is understandable (or that users will “figure it out eventually”). Why the aversion to having a label for the icon?
A great run-down by Heydon of just one ARIA property: aria-label.
A look at the risks of relying on a purely graphical icon for interface actions. When in doubt, label it.
Hot on the heels of Github’s pattern library, here’s Heroku’s.
Github’s pattern library.
As always, it’s great to see how other organisations are tackling modular reusable front-end code (though I can’t imagine why anyone other than Github would ever want to use it in production).
Any sufficiently advanced vision piece is indistinguishable from Black Mirror.
This would be better titled “Futures of texting” but it’s an interesting grab-bag of observations. I’ve always felt that SMS has been overlooked as an input mechanism.
(Conversely, I’ve always felt that voice is really over-rated as input mechanism, but under-rated for output.)
A great investigation into the usability benefits of allowing users to fill in their passwords in plain text.
Major caveat: make sure you still offer the ability to mask passwords too.
Luke continues to tilt against the windmills of the security theatre inertia that still has us hiding passwords by default. As ever, he’s got the data to back up his findings.
I’ve been thinking about this a lot lately; alternate ways of paginating through the past e.g. by day instead of by arbitrary amount.
A concept browser from Yandex that takes an interesting approach to URLs: on the one hand, hiding them …but then putting them front and centre.
But the main focus of this concept browser is to blur the line between browser chrome and the website it’s displaying.
Typeset In The Future is back with another cracking analysis. This time—following on from 2001 and Moon—we’ve got Alien.
In her final recorded message before hypersleep, Ripley notes that she is the sole survivor of the Nostromo. What she forgets to mention is that she has not once in the past two hours encountered any Eurostile Bold Extended.
A self-describing list of cursors available through CSS.
Personally, I’m all for more browsers. The more, the merrier.
Here’s an intriguing approach to offering a navigation control that adapts as the user scrolls.
I’m not too keen on the way it duplicates the navigation in the markup though. I might have a play to see if I can find a way to progressively enhance up from a link-to-footer pattern to achieve this.
A concise case study from gov.uk:
Designing for the constraints of mobile is useful – if we get the fundamentals of the service working on small screens and slow network speeds, it can work on more capable devices.
Heydon Pickering put together a great collection of accessible self-contained interface patterns that demonstrate smart use of ARIA.
A clever way of doing progressive disclosure with CSS.
Here’s a nice little UI addition to Chrome. When you focus on the URL bar, if the current site has site-specific search discoverable via rel=”search”, then you get a greyed-out hint to press tab so you can start searching the site.
Nat’s take on Chrome’s proposal to bury URLs:
The URLs are the cornerstone of the interconnected, decentralised web. Removing the URLs from the browser is an attempt to expand and consolidate centralised power.
I really like this interface idea from Brad that provides the utility of input masks but without the accessibility problems.
This looks like a nifty take on the ol’ using-labels-like-placeholders pattern for forms. I still prefer to have a label visible at all times, but this seems like a nice compromise.
A lovely little tour of eleven ubiquitous icons.
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 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.
The transcript of a terrific talk by Harry on how dark patterns are often driven by a slavish devotion to conversion rates.
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.
Carousels are shit. Auto-animating carousels are really shit. Now proven with science!
A comprehensive look at the current state of things in the world of responsive design, with a look to possible future APIs.
The existential angst of unfeeling feedback.
A design fiction video depicting technology that helps and hinders in equal measure.
Want to style those new HTML5 input types? I hope you like vendor prefixes.
Yes, yes, yes!
This is wonderful stuff! I’m a big fan of the
datalist element but I hadn’t realised how it could be combined with
input types like
Timoni tackles the tricky topic of teaching taps.
Discoverability can be hard, but that shouldn’t stop us trying out new interactions.
A sweet, beautiful love letter to design, from Oliver.
A well-reasoned and excellently hyperlinked piece from Timo pushing back against the calls for “invisible” design.
To be fair, I’ve only ever heard the “no UI” argument in the context of “sometimes the best UI is no UI at all.”
Still, this is a great explanation of why “seamlessness” in design is by no means a desirable attribute.
Dan isn’t keen on the term “natural user interface.” Here’s why.
Cennydd uses the word “select” as an input-neutral term for what we might be tempted to call clicks or taps. Personally, I like the term “choose”, although that word might have too much intent bundled with it.
Reviews based entirely on the feel of the knob.
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 great piece by Jason analysing the ever-blurring lines between device classes.
Mind you, there is one question he doesn’t answer which would help clear up his framing of the situation. That question is:
What’s a web app?
Beautiful thoughtful work from the BERGians.
A short film about interaction design.
I concur completely with Luke’s assessment here. Most password-masking on the web is just security theatre. Displaying password inputs by default (but with an option to hide) should be the norm.
Let’s be polite. Especially when starting relationships.
Josh takes an-depth look at the navigation design implications of touch/keyboard hybrid devices, coming to a similar conclusion as Luke and Jason:
Unfortunately, the top-of-screen navigation and menus of traditional desktop layouts are outright hostile to hybrid ergonomics. Tried-and-true desktop conventions have to change to make room for fingers and thumbs.
Want to test for a hybrid device? Tough luck. Instead, argues Josh, the best you can do is assume that any device visiting your site could be touch-enabled.
Luke and Jason have done some excellent research (and put together some demos) into how the placement of navigation could be optimised for touch screens of all sizes. Turns out that the “standard” convention of having navigation along the top is far from ideal on a touch-enabled device.
Interaction dissolving into the environment.
Andy makes a good point here, point out the difference between device testing and design testing:
When I’m designing, it’s incredibly important for me to quickly gain an affinity with how my design feels when I hold it in my hands.
Chris and Nathan’s book is finally out. I’m going to enjoy reading through this.
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.
A fascinating insight into the psychological implications of animated progress indicators.
See now, this is why liquid layouts are the way to go.
Harry’s 15 minute case-study presentation at UX London was excellent. He says the lesson is that we shouldn’t be afraid to make mistakes, but there’s another lesson here too: testing with users will save your ass.
In amongst all the shiny demos on this site, this one could actually be useful.
Existential ennui delivered through interface copy.
Andy documents the kinds of symbols being used to represent revealable navigation on mobile.
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.
Nik demos the neat interactions in Realmac’s latest piece of iOS software in this cute little video.
This looks like it’s going to be a great event on February 25th right here in Brighton: a gathering of minds to brainstorm around web intents. Get there if you can.
This looks like a nice progressive enhancement pattern: convert a select element into an auto-completing input element (a country selector in this case).
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.
Possibly the least imaginative concept video ever made, this piece commissioned by Blackberry shows a dystopian near-future ruled by security departments run by people with very, very tired arms.
This vision thing commissioned by Microsoft shows a future-friendly networked world where content flows like water from screen to screen.
A cute glanceable interface onto Foursquare that turns it into your own private railway station.
A nice Huffduffer-style mad libs form gives this registration form a friendly quality.
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.
I agree with this. I like it. I plus one it. So to speak.
New Mobile Safari stuff in iOS5: position:fixed, overflow:scroll, new input type support, web workers, ECMAScript 5 | David B. Calhoun – Developer Blog
This looks like a beautiful way to present information, although it seems a real shame that the information is locked to just one class of device.
Ben documents the improvements in Twitter’s OAuth flow. Maybe this will help to stop people blindly giving permission to dodgy third-party sites to update their Twitter stream.
Well, there goes my afternoon: here’s an endless supply of computer interfaces from films.
There are two things I’d like to see after watching this video:
- A slew of parodies to highlight the unintended consequences of this marketeer’s panopticon,
- The Paleofuture blog post in 100 years looking back at this.
An argument against skeuomorphic design. The Windows Mobile 7 design vocabulary is rightly praised for its no-nonsense beauty.
One potential nightmare vision of the future …that looks kind of cool.
A heated discussion around the decision in Firefox 4 to remove the RSS icon from the address bar.
I firmly believe that this is very relevant to visual design on the web.
An interesting way of using scrolling to tell a story.
Watch this space. Glenn has a really interesting idea (and implementation) for exchanging structured data between browser windows using drag'n'drop.
Aza Raskin on the UI failings of kitchens.
I like this idea: stencils for common interface elements to be used with good ol' pen and paper.
An excellent little rant by Cennydd that I agree with 100%: hovering does not demonstrate user intent.
An emotionally affecting endorsement of the accessibility features on the iPhone.
Personality in software. Pieces of technology are people too.
A timely reminder: don't hide information behind mouseover events.
A rip-o...— I mean, another form inspired by Huffduffer.
Adam Greenfield is spot-on here, dismantling Apple's "imitate real world objects" design guideline for iPhone and iPad apps.
An interesting proposal for a Huffduffer-style mad-libs ad-posting form for Craigslist.
Another Huffduffer-style sign-up form, this time from the good folks at Automattic. Very cute.
A very nice colour picker from the brilliant Dmitry Baranovskiy.
Finding the sweet spot between realism and abstraction in interface elements.
Balancing complexity and control.
A portfolio of imaginary interfaces as seen in the movies.
A very nice take on the to-do list app.
Aza Raskin share's some mockups of ideas for incorporating identity management into the browser.
A very handy interface for browsing the contents of the HTML5 spec.
A very in-depth article on visually representing Boolean logic in an interface. Stick with it; it's worth it.
A hands-on account of the new accessibility features in the iPhone. Sounds like a great experience.
Nice Huffduffer-style contact form.
Here's an interesting idea: generating a sparkline when you input a password ...familiarity with the generated sparkline acts as a visual aid to the user.
The sign up process is using the Huffduffer model. Good to see more human forms in the wild.
The 26 step process required to add +1 to a feature request in IE. Franz Kafka is alive and well and living in Redmond.
A visualisation of Twitter messages designed for display in public spaces. From the mad genius that is Cameron Adams.
Stevie Wonder talks about assistive technology. I think this finally proves that yes, accessibility *is* sexy!
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"
A collection of Flash preloaders. Out of context, they make for surprisingly compelling viewing all together.
A thoughtful post from Ben on how the flow of OAuth, OpenID and Facebook Connect can be improved.
The five second test is a simple usability test that helps you measure the effectiveness of your user interfaces.
An experiment in human storytelling, using a photographic heartbeat of 3,214 images to document an Eskimo whale hunt in Barrow, Alaska.
John Resig offers an alternative user interface for selecting a time.
A comprehensive set of sketches, diagrams and screenshots from Soxiam showing the evolution and iteration of interfaces on Vimeo and other sites.
Weekly gallery of popular websites reconstructed by removing all words and images, replacing them with blocks.
Collections of visual design patterns from web interfaces.
A good list of interface guidelines based on real world experience with a mobile phone, an music player and an operating system.
Interface elements as fridge magnets. Make prototyping fun!
A nice collection of sketches and paper prototypes.
Fullscreen mode for Flash movies could be used to totally freak people out. Here's how.
Knitted body-technology interfaces.
A nice piece of UI design. I think Kathy Sierra would like this.
Cameron has put all the materials from his four-part series together in one handy spot.
The importance of good URL design.
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."
Chris mocks up an interface idea for Apple.
A natural language interface onto Wikipedia. More of this kind of thing, please.
What would happen if Google tried to apply SEO techniques to itself?
A nice little extension to jQuery from Michael Heilemann for displaying unobtrusive feedback messages.
NetNewsWire now supports microformats.
Amazon is AB testing their next design iteration. Bye, bye tabs (yay!), hello fly-out menus (boo!).
The Validator got a new lick of CSS paint and it's looking good.
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.
Dave has made some icons — very nice ones.
David Pogue gets down and dirty with the iPhone. The good: "It feels amazing in your hand." The bad: "Typing is difficult."
Sarah mocks up an interface for importing contacts across social networks.
The screen of this mobile phone looks like a glass of water. The amount of water shows the battery life. The phone has a built in motion sensor to keep the water level.