https://shkspr.mobi/blog/2021/06/whatever-happened-to-ui-affordances/ Terence Eden's Blog Whatever Happened to UI Affordances? 2021-06-26 by @edent | #design #ui #ux | 12 comments | Read ~5,092 times. --------------------------------------------------------------------- I am grumpy. As my very clever wife summarised, I hate when designers prioritise their aesthetic 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. --------------------------------------------------------------------- More posts from around the site: 12 thoughts on "Whatever Happened to UI Affordances?" 1. [68b1f373] Jakub G says: 2021-06-26 at 12:16 My gut feeling is that it looks fine on the screen of developers/ designers so they're not aware of the problem, but your screen width or zoom level falls into "unlucky" case. Either arrow/smart cut as you suggested, or fadeout on the edge, should do the trick. Reply 2. [IfjmVAq2] Steven Reed says: 2021-06-26 at 12:19 Well said. I hate having to explain to elderly relatives how this stuff works, because there is no logic to any of it. I'm sure back in the 90s usability was the most important UI driver - 3D effects on buttons to make them look like real-world buttons, etc. 1/2 Reply 3. [68b1f373] Jakub G says: 2021-06-26 at 12:26 Had exactly this issue with Gboard: added virtual keyboards (for French and Russian) but they were non-QWERTY (annoying). Turns out there are QWERTY/YaWERTY versions available but you need to scroll horizontally to see them (not obvious at all) Reply 4. [064ab67e] Andreas Edvardsson says: 2021-06-26 at 13:15 There's a blog/site dedicated to bad UI by a few developers, grumpy website! It's great https://grumpy.website/ Reply 5. [05d14988] O says: 2021-06-26 at 14:25 This can been viewed as "older generation complaints" - as a younger generation would have checked swipe options. For the record... I agree with "affordance" 100% I belong to the "older generation" I get grumpy when people don't accept change ..also get grumpy when Devs whine about anything not being " regex terminal " compliant - and pretty much behave like the very same people they whine about - just my 5p - cue the flamethrower In case you need to rtfm - big ass arrow / bring back scrollbars is NOT the future - or we would still ride horses. ( or bang rocks together ) Reply 6. [] Jack says: 2021-06-26 at 14:35 I suspect that as computer interfaces became more common, having a bad interface resulted in more people needing to ask someone rather than refusing to use the computer, so the pressure to maintain a ui good for people who didn't already know it slowly ebbed away Reply 7. [05d14988] O says: 2021-06-26 at 14:39 Great point. This is likely optimisation at work...along with generational shift. Wish I would live long enough to see the young generation complain on the same thing...20yrs from now Reply 8. [G3sBtHlb] HackerNewsTop10 says: 2021-06-26 at 15:10 Whatever Happened to UI Affordances? Link: shkspr.mobi/blog/2021/06/w... Comments: news.ycombinator.com/item?id=276409... Reply 9. [ad3ae041] Tom says: 2021-06-26 at 16:10 Very nice article that concisely encapsulates a trend that has been annoying me for 30 years. I have to day that I find it pretty depressing when UI design from the late 80's ends up vastly more functional than current interfaces. They absolutely don't look like they're out of a Hollywood movie, but the amount of cognitive effort to use an 80's interface was vastly lower. (And being a troglodyte that barely appreciates the aesthetics, the new pretty interfaces buy me almost nothing.) Reply 10. [13b37577] JH says: 2021-06-26 at 16:38 Very much like the old Facebook "Share" option, which used to place a large translucent white layer over most of the screen on a pc for several seconds. Very annoying, now it seems to have gone to a more discrete notification bar. Its like trying to look up YouTube comments on a mobile from an email link, first there is no obvious way of opening them and second when you do if the comments section is long it won't open the ones above the comment in the email.So you have no idea what they are referring to, without further shortcut presses. I think the problem is the same as we are seeing in mass-produced programs, is the rush to get them out leaves the interface full of bugs and unfamiliar idiocracies. Reply 11. [e888fcae] Greg says: 2021-06-26 at 18:32 This has been a terrible trend that started with Apple and Google's fad obsession with "Flat UI." Buttons, scrollbars, dialogs, and modal controls lost their affordances. Links, Labels and Buttons all look the same for the sake of clean UI. I do hope that things come back to incorporating elements of skeuomorphism in the design. These physical elements don't just look good, they help us understand how to interact with digital objects. Reply 12. [] Dan Hon says: 2021-06-26 at 19:08 Makes me want to go back to Norman's book and just be methodically angry about even more things. Reply Leave a Reply Cancel reply Your email address will not be published. Required fields are marked * [ ] [ ] [ ] [ ] [ ] [ ] [ ] Comment[ ] Name * [ ] Email * [ ] Website [ ] [ ] Notify me of follow-up comments by email. [ ] Notify me of new posts by email. [Post Comment] [ ] [ ] [ ] [ ] [ ] [ ] [ ] [ ] To respond on your own website, enter the URL of your response which should contain a link to this post's permalink URL. Your response will then appear (possibly after moderation) on this page. Want to update or remove your response? Update or delete your post and re-enter your post's URL again. (Learn More) [ ] [Ping me!] Subscribe to Blog via Email Enter your email address to subscribe to this blog and receive notifications of new posts by email. Join 12,135 other subscribers. Email Address [ ] Subscribe Search for: [ ] [Search] Explore The Archives 2021 January 31 posts February 28 posts March 31 posts April 30 posts May 31 posts June 26 posts July August September October November December 2020 January 31 posts February 29 posts March 31 posts April 30 posts May 31 posts June 30 posts July 31 posts August 31 posts September 30 posts October 31 posts November 30 posts December 31 posts 2019 January 31 posts February 12 posts March 17 posts April 12 posts May 12 posts June 10 posts July 7 posts August 5 posts September 6 posts October 14 posts November 30 posts December 17 posts 2018 January 8 posts February 4 posts March 6 posts April 14 posts May 5 posts June 6 posts July 6 posts August 13 posts September 14 posts October 8 posts November 30 posts December 4 posts 2017 January 12 posts February 9 posts March 8 posts April 4 posts May 10 posts June 5 posts July 5 posts August 6 posts September 3 posts October 4 posts November 30 posts December 2016 January 10 posts February 10 posts March 11 posts April 9 posts May 8 posts June 9 posts July 6 posts August 9 posts September 4 posts October 2 posts November 30 posts December 14 posts 2015 January 8 posts February 11 posts March 10 posts April 4 posts May 9 posts June 3 posts July 7 posts August 9 posts September 10 posts October 2 posts November 30 posts December 4 posts 2014 January 13 posts February 13 posts March 14 posts April 14 posts May 7 posts June 7 posts July 9 posts August 5 posts September 5 posts October 1 post November 30 posts December 20 posts 2013 January 25 posts February 17 posts March 15 posts April 18 posts May 11 posts June 14 posts July 6 posts August 14 posts September 6 posts October 4 posts November 30 posts December 14 posts 2012 January 14 posts February 8 posts March 13 posts April 15 posts May 10 posts June 16 posts July 8 posts August 8 posts September 6 posts October 6 posts November 30 posts December 31 posts 2011 January 13 posts February 11 posts March 11 posts April 12 posts May 8 posts June 8 posts July 6 posts August 5 posts September 11 posts October 7 posts November 30 posts December 17 posts 2010 January 6 posts February 15 posts March 12 posts April 13 posts May 4 posts June 3 posts July 15 posts August 8 posts September 11 posts October 9 posts November 30 posts December 9 posts 2009 January 1 post February 5 posts March 3 posts April 7 posts May 12 posts June 8 posts July 10 posts August 10 posts September 12 posts October 22 posts November 31 posts December 15 posts 2008 January 2 posts February March 2 posts April 3 posts May 2 posts June July 1 post August 3 posts September 1 post October 3 posts November 2 posts December 1 post 2007 January February March April May June July August September October November 4 posts December 5 posts 2006 January February March April 1 post May June July August September October November 1 post December 2005 January February March 1 post April May June July August September 1 post October November December 2004 January February March April May 5 posts June 3 posts July 1 post August September October November December 2003 January February March 2 posts April May June July August September October November December 2002 January February 1 post March April 3 posts May June July August September October November December 2001 January February March April May June July 1 post August September October 1 post November December 2000 January February March 1 post April May June July August September October November 1 post December 1999 January February March April May June July August September 1 post October November December 1 post 1995 January February March 1 post April May June July August September October November December 1987 January February March April May June July August September October November December 1 post * (c) Terence Eden * Contact Me * Subscribe * Citations * Support My Blog * About Me