Tags: interface

236

sparkline

The world is not a desktop

This 1993 article by Mark Weiser is relevant to our world today.

Take intelligent agents. The idea, as near as I can tell, is that the ideal computer should be like a human being, only more obedient. Anything so insidiously appealing should immediately give pause. Why should a computer be anything like a human being? Are airplanes like birds, typewriters like pens, alphabets like mouths, cars like horses? Are human interactions so free of trouble, misunderstanding, and ambiguity that they represent a desirable computer interface goal? Further, it takes a lot of time and attention to build and maintain a smoothly running team of people, even a pair of people. A computer I need to talk to, give commands to, or have a relationship with (much less be intimate with), is a computer that is too much the center of attention.

The User Experience of Design Systems

When you start a redesign process for a company, it’s very easy to briefly look at all their products (apps, websites, newsletters, etc) and first of all make fun of how bad it all looks, and then design this one single design system for everything. However, once you start diving into why those decisions were made, they often reveal local knowledge that your design system doesn’t solve.

In this talk transcript, Rune Madsen enumerates the reasons for his informed scepticism towards design systems:

  1. The first concern, which is also the main argument of this talk, is that humans – especially designers and engineers – are obsessed with creating systems of order. This is not really driven by a demand from users, so they often tend to benefit the designer, not the user.
  2. My second concern relates to what I believe design systems is doing to our digital experience. We’ve always had trends in graphic design (Swiss design, Flat UI, etc), but I’m getting increasingly concerned that this broad adoption of design systems is creating a design monoculture that really narrows the idea of what digital products can be.
  3. My third concern is that with all this talk about design systems, there’s very little talk about the real problem in digital design, which is processes and tools. Designers love making design manuals, but any design system will completely and utterly fail if it doesn’t help people in the organization produce faster and better products.

A11Y Style Guide

A library of accessible UI elements that you can use as a starting point, complete with HTML and CSS. Alas, no JavaScript, but there’s always Heydon’s inclusive components for that.

A Content Slider

Brad always said that carousels were way to stop people beating each other up in meetings. I like the way Heydon puts it:

Carousels (or ‘content sliders’) are like men. They are not literally all bad — some are even helpful and considerate. But I don’t trust anyone unwilling to acknowledge a glaring pattern of awfulness. Also like men, I appreciate that many of you would rather just avoid dealing with carousels, but often don’t have the choice. Hence this article.

Empty States

A gallery of empty UIs. It reminds me of those galleries of clever 404 pages. Next step: a gallery of witty offline pages.

Design Guidelines — The way products are built.

A collection of publicly available design systems, pattern libraries, and interface guidelines.

Inter UI font family

A nice free and open source font designed for digital interfaces:

Inter UI is a font for highly legible text on computer screens.

Voice Guidelines | Clearleft

I love what Ben is doing with this single-serving site (similar to my design principles collection)—it’s a collection of handy links and resources around voice UI:

Designing a voice interface? Here’s a useful list of lists: as many guiding principles as we could find, all in one place. List compiled and edited by Ben Sauer @bensauer.

BONUS ITEM: Have him run a voice workshop for you!

18F: Digital service delivery | Building a large-scale design system: How we created a design system for the U.S. government

Maya Benari provides an in-depth walkthrough of 18F’s mission to create a consistent design system for many, many different government sites.

When building out a large-scale design system, it can be hard to know where to start. By focusing on the basics, from core styles to coding conventions to design principles, you can create a strong foundation that spreads to different parts of your team.

There’s an interface inventory, then mood boards, then the work starts on typography and colour, then white space, and finally the grid system.

The lessons learned make for good design principles:

  • Talk to the people
  • Look for duplication of efforts
  • Know your values
  • Empower your team
  • Start small and iterate
  • Don’t work in a vacuum
  • Reuse and specialize
  • Promote your system
  • Be flexible

When the news goes sideways – James Donohue – Medium

The BBC has been experimenting with some alternative layouts for some articles on mobile devices. Read on for the details, but especially for the philosophical musings towards the end—this is gold dust:

Even the subtext of Google’s marketing push around Progressive Web Apps is that mobile websites must aspire to be more like native apps. While I’m as excited about getting access to previously native-only features such as offline support and push notifications as the next web dev, I’m not sure that the mobile web should only try to imitate the kind of user interfaces that we see on native.

Do mobile websites really dream of being native apps, any more than they dreamt of being magazines?

Draggable JS – JavaScript drag and drop library

This looks like a very nice little JavaScript library for drag’n’drop. The site works as an example of the functionality in action.

Brought to you by Shopify, the company enabling Breitbart.

Removing the White Bars in Safari on iPhone X

You could add a bunch of proprietary CSS that Apple just pulled out of their ass.

Or you could make sure to set a background colour on your body element.

I recommend the latter. Because reasons.

Fix Twitter by Jonathan Suh

Make Twitter Great Again:

Fix Twitter is a browser extension to always show “replying to” in replies and threads along with an option to restore the old-school @-mentions.

Why strong sound design is critical to successful products - O’Reilly Media

From Designing Products with Sound by Amber Case and Aaron Day:

Sound eases cognitive burdens.

Sound is also a powerful brand differentiator.

Sound is emotional.

Finally, sound impacts productivity.

But also:

Not every product needs sound design.

UI Sounds: From Zero To Hero | Icons8 Blog

Following on from Ruth’s piece, here are some more thoughts on sound in UI from Roman Zimarev, the creator of icon sounds.

He makes a distinction between notification sounds and interaction sounds, as well as talking about sound identity in branding.

Write.as — Spread your ideas

This looks like a really nice writing interface. It currently exports to Medium, Tumblr, and Twitter …but it would be really nice if it could post to a micropub endpoint.

Form Validation with Web Audio | CSS-Tricks

An interesting idea from Ruth—using subtle sounds to augment inline form validation.

There aren’t any extremely established best practices for this stuff. The best we can do is make tasteful choices and do user research. Which is to say, the examples in this post are ideas, not gospel.

User Interfaces for Variable Fonts · An A List Apart Article

A good introduction to variable fonts, and an exploration of the possible interface elements we might use to choose our settings: toggles? knobs? sliders? control pads?

Interface font family

Interface is a font for highly legible text on computer screens.

And it’s free!

What Would Augment Reality? (with images, tweets) · lukew · Storify

Luke has been asking people to imagine ways of augmenting the world. Spimes are back, baby!