3

Whatever Happened to UI Affordances?

 3 years ago
source link: https://shkspr.mobi/blog/2021/06/whatever-happened-to-ui-affordances/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client
Whatever Happened to UI Affordances? – Terence Eden’s BlogTerence Eden’s Blog

I am grumpy. As my very clever wife summarised, I hate when designers prioritise their æsthetic preferences over my usability needs.

I tried sharing a website using Google Chrome for Android. I hit the share button, and a panel popped-up from the bottom of the screen.

Default share panel with only a few options visible.

Hmmm. It didn't have the share destination that I wanted. It was early in the morning - when I'm not at my cognitive best - and I was stumped. There is nothing on this screen - other than the icons - to tell me how I can interact with it. There's no scrollbar, no handle, no "more" icon, nothing.

Let's talk about doors for a while.

I'm sure you've all come across a door with an ambiguous handle. This is what usually happens:

when you push a pull door and the person behind says "you need to pull" aye cheers lad sure next plan was to start lifting from the bottom

— perry (@SloanPerry) September 22, 2016

Ideally, all doors would look like this:

A pair of doors. One has a handle and says pull, the other a flat panel which says push.

Even if you don't speak the language written on the doors, the physical nature of the handles tells you what you can do with them. A flat panel can only be pushed. The protruding handle is designed to be pulled. This design feature is known as an "affordance".

If you're involved in design, at any level, I urge you to read the classic book "Design of Everyday Things". This is what it has to say on the subject:

How can design signal the appropriate actions? One important set of signals comes through the natural constraints of objects, physical constraints that limit what can be done. Another set of signals comes from the affordances of objects, which convey messages about their possible uses, actions, and functions. Where do we grab it, which parts move, and which parts are fixed? Affordances suggest the range of possibilities, constraints limit the number of alternatives. The thoughtful use of affordances and constraints together in design lets a user determine readily the proper course of action, even in a novel situation.

(Emphasis added.)

Let's go back to that accurs'd Android panel. I tried swiping it up - that's what I've learned most panels do in Android. But it did nothing. So I gave up. I didn't feel like battling with my computer to achieve a simple task. I just assumed that Google had chosen a set of default options and I was not allowed to stray from them.

As I went to dismiss the panel, my thumb slipped transversely. Nudging the row a few pixels to the left. The fucking thing was a horizontal slider!

When the panel is slid, more options become visible.

I felt like a bit of an idiot. And that violates the unwritten 0th law of robotics - no computer interface shall make a human feel stupid.

I vividly remember being pissed off 12 years ago at the iPhone's inability to delete podcasts. It turned out that, once again, you had to magically know that swiping a podcast revealed hidden buttons.

The thing is, it's easy to add an affordance. Here's my crappy paint attempt showing a couple of options:

Crappy drawing showing an arrow or a scroll bar.

Either an arrow to let the user know there's more to the side (maybe even give it a jaunty animation) - or a scrollbar to show how far through a list they are. I'm sure you can think of a dozen better ways to represent a scrollable area than literally nothing!

Apple's solution is to bisect the final icon in a row, to indicate to the user that there's more available.
Row of icons, the last one peeks out from the side of the screen.

That's a cute way to do it. But there's evidence that Apple are slowly undoing their great usability work in the name of elegance.

Modern design is so beautiful to look at - but an absolute nightmare to use. You either need to use trial an error on every element, or hope that someone else can tell you what you need to do.

Flat, minimalist, clean, material - whatever you want to call it - is an annoying antipattern. Computers are here to make life easier for humans. Removing affordances is just a nasty thing to do to your users.


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK