Tags: ui

Lightning Design System

A nice combination of style guide and pattern library, with plenty of documentation.

CSS element() function - Vincent De Oliveira

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!

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.

The Hamburger Menu Doesn’t Work - Deep Design

Building on Luke’s research, James outlines the problems with hiding navigation behind a hamburger icon. So, to be clear, the problem isn’t with the icon, so much as the way it is used as a cupboard to shovel all our messy navigation issues into.

The Language of Modular Design · An A List Apart Article

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.

Spatial Interfaces — Elepath Exports — Medium

A detailed and humorous deep dive into motion design and spatial depth in digital interfaces.

Styleguide

Huge have released their tool for generating front-end style guides.

The Ushahidi Platform ~ Pattern Library

A really nicely-documented pattern library.

Nicole Fenton | Interface Writing: Code for Humans

The text of Nicole’s excellent talk on writing helpful, human microcopy.

Interface Experience Maps, From the Notebook of Aaron Gustafson

This sounds like it could be a very useful tool to introduce early in projects to get a shared understanding of progressive enhancement.

Style Guides with Jeremy Keith

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.

Hamburger icon: How these three lines mystify most people - BBC News

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?

Dev.Opera — UX accessibility with aria-label

A great run-down by Heydon of just one ARIA property: aria-label.

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 Brighton Makerlab - where technology meets awesome! by Simon Riley — Kickstarter

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.

Purple: A UI kit for Heroku’s web interfaces

Hot on the heels of Github’s pattern library, here’s Heroku’s.

Home · Primer

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).

Productivity Future Vision

Any sufficiently advanced vision piece is indistinguishable from Black Mirror.

Futures of text by Jonathan Libov

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.)

Password Masking

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.

BBC - Future Media Standards & Guidelines - Accessibility Guidelines v2.0

The minimum dependency for a web site should be an internet connection and the ability to parse HTML.

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.

Penguin Classics - Take the Little Black Classics for a spin

A cute way of exploring a collection of classic works.

What we would change about Rizzo - Ian Feather

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.

LukeW | Showing Passwords on Log-In Screens

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.

Thoughts on Pagination

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.

MakerLab HQ - Maker Club

Good news, Brighton! There’s a Maker Club opening up on London Road (above the new Presuming Ed coffee shop). Grab your robot kits and come along.

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.

Atomic Design by Brad Frost

Brad’s writing a book.

Insert take-my-money.gif here.

Sass Guidelines

Advice for writing Sass. I don’t necessarily agree with everything, but on the whole, this is a solid approach.

It’s worth bearing Chris’s advice in mind.

Poor Man’s Styleguide | A frontend styleguide for the pragmatic

A handy starting point for creating a front-end styleguide: a single document of HTML elements.

ST4I - Stuff That Talks To The Internet - workshop on Vimeo

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!

The New Yandex.Browser. Alpha version

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.

Alien | Typeset In The Future

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.

Style Guide Resources

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.

Cursors

A self-describing list of cursors available through CSS.

Code for America — Responsive Web Design on Huffduffer

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.

CSS Guidelines – High-level advice and guidelines for writing sane, manageable, scalable CSS

Harry has written down his ideas and recommendations for writing CSS.

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.

A Maintainable Style Guide - Ian Feather

The challenges of maintaining a living breathing front-end style guide for an always-evolving product (the Lonely Planet website in this case).

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.

Smart Fixed Navigation

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.

Urban Giants on Vimeo

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.

Practical ARIA Examples

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

Monday, 7 July 2014 – The Pastry Box Project

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.

rel=search on Flickr

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.

rel=search

ntlk’s blog: Chrome obfuscates the URLs, Google benefits

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.

Labelmask | Brad Frost Web

I really like this interface idea from Brad that provides the utility of input masks but without the accessibility problems.

Avoiding ‘words to avoid’ | Inside GOV.UK

I love the thinking behind this plugin that highlights the weasel words that politicians are so found of.

Creating Style Guides · An A List Apart Article

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.

Readmill Epilogue - Readmill

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).

Council Toolkit

A reusable set of responsive patterns and templates for UK councils.

being a client (tecznotes)

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.

Label Pattern - CodePen

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.

Robin Rendle › A Visual Lexicon

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.

Origins of Common UI Symbols

A lovely little tour of eleven ubiquitous icons.

Getting Started With Pattern Libraries ∙ An A List Apart Blog Post

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!

A List Apart Pattern Library

Another front-end style guide for the collection. This time it’s from A List Apart. Lovely stuff!

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?

A Pocket Guide to Master Every Day’s Typographic Adventures

A nice little cheat sheet for simple simple typography wins.

xkcd: Syllable Planning

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.

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.

Styleguide | MapBox

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.

Pattern Library | MailChimp

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.

Responsive App Design

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

Benedict Cumberbatch Name Generator

I bet you’re going to just keep clicking and clicking and clicking…

Ooh, Yay!

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 slippery slope | 90 Percent Of Everything

The transcript of a terrific talk by Harry on how dark patterns are often driven by a slavish devotion to conversion rates.

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.

Style Guide Boilerplate

A very handy starting point for creating a front-end style guide.

Request Quest

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.

Auto-Forwarding Carousels, Accordions Annoy Users

Carousels are shit. Auto-animating carousels are really shit. Now proven with science!

The State Of Responsive Web Design on Smashing Mobile

A comprehensive look at the current state of things in the world of responsive design, with a look to possible future APIs.

Screenshots of Despair

The existential angst of unfeeling feedback.

An acquisition is always a failure

An acquisition, or an aqui-hire, is always a failure. Either the founders failed to achieve their goal, or – far likelier – they failed to dream big enough. The proper ambition for a tech entrepreneur should be to join the ranks of the great tech companies, or, at least, to create a profitable, independent company beloved by employees, customers, and shareholders.

Quietweet - A Simpler Twitter Reader

A cute little read-only Twitter client from James that only displays fully-formed tweets: no hashtags, no @-replies.

List of pseudo-elements to style form controls by TJ VanToll

Want to style those new HTML5 input types? I hope you like vendor prefixes.

On pattern portfolios | Clear Thinking - The Clearleft Blog

Jon gives some insight into how and why we use pattern portfolios as deliverables at Clearleft.

Bradshaw’s Guide For Tourists in Great Britain

Keep it under your hat, but Paul has soft-launch his Project Portillo. And very nice it is too.

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!

datalist experiment

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 range and date.

So nifty!

Fictive Kin, The Joke’s On Us?

The story of one site’s disgraceful handling of acquisition and shutdown (Punchfork, acquired by Pinterest) and how its owner actively tried to block efforts to preserve user’s data.

Abandonedography

Armchair travelling to Ballardian locations.

Our Incredible Journey

A collection of those appalling doublespeek announcements that sites and services give when they get acquired. You know the ones: they begin with “We’re excited to announce…” and end with people’s data being flushed down the toilet.

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.

No to NoUI by Timo Arnall

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.

Sensory Interfaces (SI) on O Danny Boy

Dan isn’t keen on the term “natural user interface.” Here’s why.

Seb Lee-Delisle: Playing With Code

A nice feature on Seb in the latest issue of Make magazine.

The World Wide Web is moving to AOL! by Brian Bailey

Biting satire that hits its mark superbly. Ouch! Be careful — this is sharp …and funny.

Not click. Not tap. Select. : Cennydd Bowles

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.

Knobfeel - Feels good man!

Reviews based entirely on the feel of the knob.

Barebones — An initial directory setup, style guide and pattern primer by Paul Lloyd

Here are some nice patterns that Paul uses for starting points in his own projects.

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?

» Responsive Design for Apps — Part 1 Cloud Four Blog

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?

Connecting (Full Film) on Vimeo

A short film about interaction design.

Soundslice: Tabs have never sounded so good

A lovely new service from Adrian that allows you to sync up guitar tabs with videos. It’s a very impressive in-browser app.

LukeW | Mobile Design Details: Hide/Show Passwords

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.

New Rule: Every Desktop Design Has To Go Finger-Friendly (Global Moxie)

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.