An entertaining presentation from South By Southwest on the UI element of last resort.
It’s funny because it’s true.
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.
I’m not a fan of the checklist approach to accessibility, but this checklist of checklists makes for a handy starting point and it’s segmented by job role. Tick all the ones that apply to you, and this page will generate a list for you to copy and paste.
A newsletter dedicated to all things related to design systems, style guides, and pattern libraries.
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.
Susan describes the process behind creating Bocoup’s style guide…
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.
I think I’ve gotten tired of Google telling me “This is how you have to build websites now.” Or Apple coming down from the mountain once a year saying “Here are the two new products you will buy this year.”
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.
A nice little collection of interaction patterns with built-in accessibility and no dependencies.
Here’s a nice little pattern from Dave—showing data tables one column at a time on smaller screens.
Marvellous insights from Mark on how the robustness principle can and should be applied to styeguides and pattern libraries (‘sfunny—I was talking about Postel’s Law just this morning at An Event Apart in Boston).
Being liberal in accepting things into the system, and being liberal about how you go about that, ensures you don’t police the system. You collaborate on it.
So, what about the output? Remember: be ’conservative in what you do’. For a design system, this means your output of the system – guidelines, principles, design patterns, code, etc etc. – needs to be clear, unambiguous, and understandable.
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.
Rachel and Drew have been beta-testing Mark’s Fractal project for organising a library of components for Perch’s interface. Sounds like it’s working out very, very well indeed!
This is my kind of talk—John Snow’s cholera map, the Yucca Mountain think-tank, the Pioneer plaque, the Voyager record, the Drake equation, the Arecibo signal, and the love song of J. Alfred Prufrock.
♫ These are a few of my fav-our-ite things! ♫
Here’s a well put-together collection of common patterns that are now much easier thanks to flexbox.
As well as compèring the event, Chris took the time to make notes at the Clarity conference, dedicated to all things patterny.
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.
You know that front-end pattern libraries have hit the mainstream when the Nielsen Norman Group get in on the action.
As ever, I’m not sure their sweeping generalisations can be applied to every project, but their checklist approach makes for a good starting point.
Jon outlines his technique for keeping “the 30,000 foot” view when patterns are coalescing during a project.
See also: Andy P.’s experience of working with Jon this way.
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.
This is truly a book apart.
A pattern library of Walmart’s front-end code.
Cennydd speaks his brains on conversational interfaces—a refreshing counterpoint to Chris’s cheerleading.
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 nicely documented pattern library.
I love this. I really love this. Remy absolutely nails what makes the web so great.
There’s the ubiquity:
If the viewer is using the latest technology beefy desktop computer that’s great. Equally they could view the website from a work computer, something old and locked in using a browser called IE8.
Then there’s the low barrier to entry—yes, even today:
It’s the web’s simplicity. Born out of a need to connect documents. As much as that might have changed with the latest generation of developers who might tell you that it’s hard and complex (and they’re right), at the same time it is not complicated. It’s still beautifully simple.
Anyone can do it. Anyone can publish content to the web, be it as plain text, or simple HTML formed only of <p> tags or something more elaborate and refined. The web is unabashed of it’s content. Everything and anything goes.
I might just print this out and nail it to the wall.
If you sit back for a moment, and think about just how many lives you can touch simply by publishing something, anything, to the web, it’s utterly mind blowing.
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.
This is a wonderful, wonderful look back at the state of hypertext in the run-up to the creation of the World Wide Web.
My jaw may have dropped when I saw the GML markup.
Now I’m going to read part two.
The new style guide and pattern library for Buzzfeed.
It all looks pretty reasonable on the surface but if you poke around in the CSS, you’ll find 1157 uses of
The whole point of having an agreed-upon codebase in a pattern library is so that developers need never reach for nuclear options like
!important, so I’m afraid, for me, this is a demonstration of what not to do (in terms of CSS—the output of the HTML in the styleguide looks perfectly fine).
Solid uses immutable, atomic CSS classes…
CSS is “mutable”. By design. I don’t think we should be working against that.
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.
A fascinating look into the challenges encountered translating Anne Leckie’s excellent Radchaai novels into Bulgarian, German, Hebrew, Japanese, and Hungarian.
What is clear in all of these responses is that by examining the notions of ‘neutral’ and ‘feminine’ in grammar and gender through the lens of translation, we reveal their complexity – and some of their possible futures in languages, in both literature and speech.
A tool for generating a pattern library from Markdown comments in CSS. This isn’t the way that I tend to work, but I can see how it would be quite handy.
This looks like a terrific presentation from Alla on iconography, semiotics, and communication.
The comprehensive style guide and pattern library for North Carolina.
I really like the way that you can literally flip between the source code and the output in this styleguide for The Toast.
A nice combination of style guide and pattern library, with plenty of documentation.
An old-school styleguide.
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:
…instead of just focusing on that last one.
Alla has taken the ideas she presented in her superb talk at Responsive Day Out and published them as a great article in A List Apart.
A detailed and humorous deep dive into motion design and spatial depth in digital interfaces.
Huge have released their tool for generating front-end style guides.
A really nicely-documented pattern library.
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.
I had a lot of fun chatting with Brad and Anna for the final episode of their small batch podcast on style guides and pattern libraries.
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.
Still a few days left to back this great project for Brighton:
Build, tinker, make and play! For anyone with imagination, The Brighton Makerlab lets ages 8 to 80 create cool stuff with technology.
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.
The minimum dependency for a web site should be an internet connection and the ability to parse HTML.
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.
A cute way of exploring a collection of classic works.
I really like the self-examination that Ian and his team at Lonely Planet are doing here. Instead of creating a framework for creating a living style guide and calling it done, they’re constantly looking at what could be done better, and revisiting earlier decisions.
I’m intrigued by the way they’ve decided to reorganise their files by component rather than by filetype.
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.
Designing primarily in a laptop web browser and testing with a mouse rather than fingers may come to look very out of date soon.
Brad’s writing a book.
Insert take-my-money.gif here.
A handy starting point for creating a front-end styleguide: a single document of HTML elements.
Seb will be running this workshop again at the start of February—details here. I can’t recommend it highly enough—it’s so, so good!
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 very handy collection from Anna: articles, books, talks, podcasts, and examples of front-end style guides. If something’s missing, feel free to add it.
A self-describing list of cursors available through CSS.
This was a fun podcast—myself and Cyd from Code For America talk to Karen and Ethan about how we worked together. Good times.
The audio is available for your huffduffing pleasure.
Harry has written down his ideas and recommendations for writing CSS.
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.
The challenges of maintaining a living breathing front-end style guide for an always-evolving product (the Lonely Planet website in this case).
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 look at the architectural history of the network hubs of New York: 32 Avenue of the Americas and 60 Hudson Street. Directed by Davina Pardo and written by her husband Andrew Blum, author of Tubes: A Journey to the Centre of the Internet.
These buildings were always used as network hubs. It’s just that the old networks were used to house the infrastructure of telephone networks (these were the long line buildings).
In a way, the big server hotel of New York—111 Eight Avenue—was also always used to route packets …it’s just that the packets used to be physical.
Heydon Pickering put together a great collection of accessible self-contained interface patterns that demonstrate smart use of ARIA.