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.
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.
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.
Translating Gender: Ancillary Justice in Five Languages Alex Dally MacFarlane | Interfictions Online
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:
- the blank state,
- the loading state,
- the partial state,
- the error state,
- and the ideal state
…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.
Words of wisdom from Scott on the clash of brand guidelines and the flexible nature of the web:
One thing I am pretty sure of though, is that having a fast, accessible, user-friendly site can reflect incredibly well on a company, and I’d love to see more guidelines and expectations that prioritize these aspects of a service as branding requirements in addition to the usual visual details.
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.
I love the thinking behind this plugin that highlights the weasel words that politicians are so found of.
A great article by Susan on getting started with creating a styleguide for any project.
I’ve seen firsthand how style guides save development time, make communication regarding your front end smoother, and keep both code and design consistent throughout the site.
If your startup gets acquired and shut down by a larger company, this is the way to announce it—no “we’re excited to announce”; no “incredible journey”. Instead there’s an apology and regret (which is exactly what your users will be feeling).
A reusable set of responsive patterns and templates for UK councils.
Mike writes about what it was like being a client for a change. After working with him on the Code for America project, I can personally vouch for him as a dream client:
Clearleft’s pattern deliverables are the special-special that made the final work so strong. Jon Aizlewood’s introduction to the concept convinced me to contact Clearleft. Jeremy Keith’s interest in design systems kicked off the process, and Anna Debenham’s fucking rock star delivery brought it all home.
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.
Some great thoughts in here about web development workflow and communication between designers and developers.
I believe that the solution is made up of a variety of tools that encourage conversation and improve our shared lexicon. Tools such as styleguides, pattern libraries, elemental and modular systems that encourage access not only by developers, but by designers, shareholders and editors as well.
A lovely little tour of eleven ubiquitous icons.
A great post from Anna on the front-end styleguides she’s worked on for A List Apart and Code for America. ‘Twas a pleasure working with her on the Code for America project.
A-mer-ica! Fuck yeah!
Another front-end style guide for the collection. This time it’s from A List Apart. Lovely stuff!
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?
A nice little cheat sheet for simple simple typography wins.
This is called expletive infixation.
I’ll always remember the “Phila-fucking-delphia” example from Steven Pinker’s The Language Instinct:
If you said “Philadel-fucking-phia”, you’d be laughed out of the pool hall.
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.
Hot on the heels of the Mailchimp styleguide, here’s the collection of patterns used by Mapbox. I’m not keen on some of their markup choices, but again, it’s great to see organisations publicly documenting this stuff.
The markup for the patterns that Mailchimp use on their products. I love getting a glimpse of how companies handle this kind of stuff internally.
Dan Bricklin—co-creator of the original VisiCalc spreadsheet—turns his attention to responsive design, specifically for input-centric tasks.
I bet you’re going to just keep clicking and clicking and clicking…
This is a great idea—the Brighton Cookbook Club:
You know when you get a new cookbook, but you only ever end up using two or three recipes from it? Coming along to Cookbook Club means that you’ll get to try a whole range of recipes from one book to see what you fancy, maybe broaden your palate, and have a jolly fun evening meeting others while you’re at it!
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.
A very handy starting point for creating a front-end style guide.
A terrific quiz about browser performance from Jake. I had the pleasure of watching him present this in a bar in Amsterdam—he was like a circus carny hoodwinking the assembled geeks.
I guarantee you won’t get all of this right, and that’s a good thing: you’ll learn something. If you do get them all right, either you are Jake or you are very, very sad.
Carousels are shit. Auto-animating carousels are really shit. Now proven with science!