When in doubt, label your icons.
When not in doubt, you probably should be.
When in doubt, label your icons.
When not in doubt, you probably should be.
The fascinating story of Charles K. Bliss and his symbolic language:
The writing system – originally named World Writing in 1942, then Semantography in 1947, and finally Blissymoblics in the 1960s – contains several hundred basic geometric symbols (“Bliss-characters”) that can be combined in different ways to represent more complex concepts (“Bliss-words”). For example, the Bliss-characters for “house” and “medical” are combined to form the Bliss-word for “hospital” or “clinic”. The modular structure invites comparison to the German language; the German word for “hospital ” – “krankenhaus” – translates directly to “sick house”.
¶, &, @, ‽, ☺, #, and ☛.
A profile of Susan Kare, icon designer extraordinaire.
I loved the puzzle-like nature of working in sixteen-by-sixteen and thirty-two-by-thirty-two pixel icon grids, and the marriage of craft and metaphor.
Design fiction from the UK parliament. I mean, it’s not exactly a classic of speculative fiction, but it sure beats a white paper.
Cennydd is writing (and self-publishing) a book on ethics and digital design. It will be released in September.
Technology is never neutral: it has inevitable social, political, and moral impact. The coming era of connected smart technologies, such as AI, autonomous vehicles, and the Internet of Things, demands trust: trust the tech industry has yet to fully earn.
There was a time, circa 2009, when no home design story could do without a reference to Mad Men. There is a time, circa 2018, when no personal tech story should do without a Black Mirror reference.
Black Mirror Home. It’s all fun and games until the screaming starts.
When these products go haywire—as they inevitably do—the Black Mirror tweets won’t seem so funny, just as Mad Men curdled, eventually, from ha-ha how far we’ve come to, oh-no we haven’t come far enough.
There’s this idea that our homes — and our lives, and our workflows, and everything, really — should be micromanaged and accessed through technology, but, like many new experiments, this kind of technological advance has little actual real-world benefit. Like many new experiments, smart home technology is a perceived convenience masked as a wild hair — it’s advancement because we can, not because we need to.
A lyrical assessment of the current state of home automation.
Things are getting really smart on their own, but they’re still struggling to interact as a community — the promise of a smart home falling short because our appliances can’t draft a cohesive constitution. What’s more, we ourselves are struggling to modulate our reaction to these gadgets. We’re getting excited about automated lights and pretending the future has already come.
Along the lines of John’s recent post, Henrik makes the business case for progressive web apps.
He also points out how they can be much better than native apps for controlling hardware.
They can be up and running in a fraction of the time whether or not they were already “installed” and unlike “apps” can be saved as an app on the device at the user’s discretion!
Essentially they’re really great for creating “ad hoc” experiences that can be “cold started” on a whim nearly as fast as if it were already installed.
Steven Johnson dives deep into the METI project, starting with the Arecibo message and covering Lincos, the Drake equation, and the Fermi paradox.
He also wrote about what he left out of the article and mentions that he’s writing a book on long-term decision making.
In a sense, the METI debate runs parallel to other existential decisions that we will be confronting in the coming decades, as our technological and scientific powers increase. Should we create superintelligent machines that exceed our own intellectual capabilities by such a wide margin that we cease to understand how their intelligence works? Should we ‘‘cure’’ death, as many technologists are proposing? Like METI, these are potentially among the most momentous decisions human beings will ever make, and yet the number of people actively participating in those decisions — or even aware such decisions are being made — is minuscule.
Ben points to a new product aiming to ease the pain of connected devices bumping up against the harsh realities of shearing layers:
By exposing the ‘hardwiring’ of our electrical systems, Conduct emphasises how much we rely on existing systems to power our ‘new’ technology – the rate of change and advancement in our traditional technologies moves at a much slower pace than our mobile app-based world and there are physical limitations as a result of this hardwired legacy.
I am—unsurprisingly—in favour of exposing the seams like this.
An illustrated history of digital iconography.
Here you go: a free book on icon design in three parts, delivered via email.
There is one truism that has been constant throughout my career on the web, and it’s this: naming things is hard.
Trent talks about the strategies out there for naming things. He makes specific mention of Atomic Design, which as Brad is always at pains to point out, is just one way of naming things: atoms, molecules, organisms, etc.
In some situations, having that pre-made vocabulary is perfect. In other situations, I’ve seen it cause all sorts of problems. It all depends on the project and the people.
Personally, I like the vocabulary to emerge from the domain knowledge of the people on the project. Building a newspaper website? Use journalism-related terms. Making a website about bicycles? Use bike-related terms.
Related: this great chat between Jen Simmons and Stephanie Rieger.
Andy’s been playing Devil’s Advocate again, defending the much-maligned hamburger button. Weirdly though, I think I’ve seen more blog posts, tweets, and presentations defending this supposed underdog than I’ve seen knocking it.
Take this presentation from Smashing Conference. It begins with a stirring call to arms. Designers of the web—cast off your old ways, dismiss your clichés, try new things, and discard lazy solutions! “Yes!”, I thought to myself, “this is a fantastic message.” But then the second half of the talk switches into a defence of the laziest, most clichéd, least thought-through old tropes of interface designs: carousels, parallax scrolling and inevitably, the hamburger icon.
But let’s not get into a binary argument of “good” vs. “bad” when it comes to using the hamburger icon. I think the question is more subtle than that. There are three issues that need to be addressed if we’re going to evaluate the effectiveness of using the hamburger icon:
An icon is a gateway to either some content or a specific action. The icon should provide a clear representation of the content or action that it leads to. Sometimes “clear” doesn’t have to literally mean that it’s representative: we use icons all the time that don’t actually represent the associated content or action (a 3.5 inch diskette for “save”, a house for the home page of a website, etc.). Cultural factors play a large part here. Unless the icon is a very literal pictorial representation, it’s unlikely that any icon can be considered truly universal.
If a hamburger icon is used as the gateway to a list of items, then it’s fairly representative. It’s a bit more abstract than an actual list of menu items stacked one on top of the other, but if you squint just right, you can see how “three stacked horizontal lines” could represent “a number of stacked menu items.”
If, on the other hand, a hamburger icon is used as the gateway to, say, a grid of options, then it isn’t representative at all. A miniaturised grid—looking like a window—would be a more representative option.
So in trying to answer the question “Does the hamburger icon succeed at being representative?”, the answer—as ever—is “it depends.” If it’s used as a scaled-down version of the thing its representing, it works. If it’s used as a catch-all icon to represent “a bunch of stuff” (as is all too common these days), then it works less well.
Which brings us to…
Much of the criticism of the hamburger icon isn’t actually about the icon itself, it’s about how it’s used. Too many designers are using it as an opportunity to de-clutter their interface by putting everything behind the icon. This succeeds in de-cluttering the interface in the same way that a child putting all their messy crap in the cupboard succeeds in cleaning their room.
It’s a tricky situation though. On small screens especially, there just isn’t room to display all possible actions. But the solution is not to display none instead. The solution is to prioritise. Which actions need to be visible? Which actions can afford to be squirrelled away behind an icon? A designer is supposed to answer those questions (using research, testing, good taste, experience, or whatever other tools are at their disposal).
All too often, the hamburger icon is used as an excuse to shirk that work. It’s treated as a “get out of jail free” card for designing small-screen interfaces.
To be clear: this usage—or misusage—has nothing to do with the actual icon itself. The fact that the icon is three stacked lines is fairly irrelevant on this point. The reason why the three stacked lines are so often used is that there’s a belief that this icon will be commonly understood.
That brings us to last and most important point:
By far the most important factor in whether an icon—any icon—will be understood is whether or not it is labelled. A hamburger icon labelled with a word like “menu” or “more” or “options” is going to be far more effective than an unlabelled icon.
@andybudd Adding the word “menu” next to it goes a long way, and would help with teaching aspect to help it become more familiar in time.— Paul Annett (@PaulAnnett) January 16, 2016
Don’t believe me? Good! Do some testing.
In my experience, 80-90% of the benefit of usability testing is in the area of labelling. And one of the lowest hanging fruit is the realisation that “Oh yeah, we should probably label that icon that we assumed would be universally understood.”
Andy mentions the “play” and “pause” symbols as an example of icons that are so well understood that they can stand by themselves. That’s not necessarily true.
@andybudd FWIW, I know some people in their 60s who couldn’t tell you what the two line pause icon would do on a web video player.— Paul Annett (@PaulAnnett) January 16, 2016
I think there are two good rules of thumb when it comes to using icons:
Now that we’ve established the three criteria for evaluating an icon’s effectiveness, let’s see how the hamburger icon stacks up (if you’ll pardon the pun):
So there you go. The answer to the question “Is the hamburger icon good or bad?” is a resounding and clear “It depends.”
This looks like a terrific presentation from Alla on iconography, semiotics, and communication.
But we are promised and shown a world where technology is gorgeous and streamlined and helpful and light and unobtrusive. We don’t live in that world. That world is a fantasy. The hope that the Internet of Things will allow us to be free from daily headaches and logistical errors is naive.
We need the Internet of Things to be the next step in the series that began with the general purpose PC and continued with the Internet and general purpose protocols—systems that support personal autonomy and choice. The coming Internet of Things envisions computing devices that will intermediate every aspect of our lives. I strongly believe that this will only provide the envisioned benefits or even be tolerable if we build an Internet of Things rather than a CompuServe of Things.
Imagine a location service that sold itself on the fact that your personal information was securely contained in its environs, used by you and you alone. You could have devices on your person that used their sensors to know things about you – when you last ate, what your dining preferences are, what your blood-sugar is, and so on, but these devices would have no truck with the cloud, and they would not deliver that information to anyone else for analysis.