15 ms·

User Interface Design: Rules of Thumb

montebicyclelo 4y ago
I'd add that I've noticed older people struggling with hidden UI elements. (E.g. not knowing that button X will appear if they do Y (and then not remembering if told...)).
- neon_electro 4y ago
  ESPECIALLY "buttons" that are basically text links without the underline. If you're lucky, you might have a "pill" border or drop shadow, but that hasn't helped my dad in my experience observing him.
  - Mesopropithecus 4y ago
    Hasn't helped me either, and I'm in all likelyhood a bit younger than most people's dads :). This is an anti pattern which good directly against the concept of "affordance."
- ericmcer 4y ago
  There must be a whole branch of design geared towards older generations. I have been trying to work in this area and have noticed older people are very persistent and will read instructions carefully, but are very hesitant to click and explore things. Meanwhile young people immediately click and interact with everything without any fear but will completely ignore any kind of written instruction. I was testing a web app out on my dad and he dragged the cursor to the bottom of the screen, which brought up the Mac Dock which immediately confused him and he asked my why I did that. I am not sure how to code around just general inability to use a computer, maybe avoid elements at the edges of the viewport haha.
  - ragnese 4y ago
    I've noticed this as well. Ironically, I believe it's because product design was generally worse "back in the day." Normal items you'd buy from a store or catalog could be legitimately dangerous if you operated them incorrectly (electrically powered appliances like lamps and toasters that were not polarized/grounded, for example). So, rather than risk the very real likelihood of breaking your new gadget or injuring yourself, you were better off reading the instructions and only using the device as you were instructed to. These days, things are pretty much "stupid proof." No matter how many times I insist on it, people my parents' age simply refuse to believe that there is nothing they could reasonably type or click while using their computer that will irreparably harm it. (Yes, of course they could somehow format their hard drive, etc, but there's zero chance you'd be able to do that on accident.)
    - BuckyBeaver 4y ago
      "I believe it's because product design was generally worse 'back in the day.'" I don't agree with this generalization. Here's an example: A stereo receiver, even today's A/V receiver, has a certain number of physical inputs. Back in the day, you had buttons on the front to select the input you wanted, clearly labeled. One press gets you the source you want, every time. Many receivers today force you to press an Input button or turn a wheel to iterate through a list of inputs, a list of unknown size and unknown beginning and end. This is because the display idiotically doesn't show a complete LIST of the inputs at once, or even a moving dot to show you where you are in the list. So you could be one input below the one you're trying to select in the list, but if you happen to turn the dial the other way you'll go through 10 inputs to get back to it. Granted, this is much less commonly encountered now because nobody is going over to his receiver to put a disc in the player, but it was a problem for many years when people were still doing so. In some cases, older designs were also better for safety. When safety is on the line, the best design (or at least universally-understood standards) often percolate to the top and stay there. A sad example of this was Jeep's attempt to "innovate" with a disastrously defective gear shift, which killed Star Trek actor Anton Yelchin: https://www.theguardian.com/film/2016/jun/20/star-trek-actor-anton-yelchin-death-jeep-grand-cherokee-recall https://www.theguardian.com/film/2016/jun/20/star-trek-actor... But I also acknowledge that there have been major safety improvements. The other day I rented a chain saw for the first time and was comforted to see the safety brake on it.
- hateful 4y ago
  The latest example of this I've seen is that after the latest cable box update - full screen ads will show for shows when it turns on and my mom doesn't know how to close them and I have to come help. She only knows how to change the channels, not interact with GUIs. She's never used a mouse before or used "arrow" keys to move an interface. She only knows "this button does this". Another example is that our last TV had a "Source" Button. But it doesn't change the source, it brings up a list so you can choose a source. Nearly every week she would accidentally hit Channel Up or Down on the TV remote and then not know how to switch it back to the Cable Box. She'd hit Source and it wouldn't change the source and then call me. Sadly, she has dementia now and will never learn.
  - paulryanrogers 4y ago
    Could you open the remote and remove channel up/down buttons? Or put some electrical tape underneath to make them ineffective?
- tracker1 4y ago
  I think that beyond a relatively obvious menu, non-obvious UI elements are an anti-pattern. And I'm someone that largely came up in text-based UI interfaces (BBSes, terminal apps, etc). Things should be largely discoverable in practice for graphical user interfaces, even if there's a shortcut.
- runarberg 4y ago
  I’m generally not a fan of this design pattern. If an action is required before the button is applicable, consider disabling it instead of hiding it, or—even better—allow clicking it and simply guide the user to the required action (e.g. focus the required element and show and error message under it; maybe shake it a little if you‘re up to it).
- BuckyBeaver 4y ago
  That's why UI elements should almost never appear and disappear. There's a reason that GREYING OUT disabled controls has always been a fundamental concept of GUI design. It shows users that the function exists, where it exists, and that it's conditional. Peek-a-boo UI is incompetent. It's even dumber when you consider that, in most cases, the space for the disappearing controls has already been reserved; so nothing is gained by hiding them. And almost as bad as peek-a-boo UI is "flat" UI, where most controls aren't demarcated as such. So you're reduced to clicking on plain text labels and other inert-looking components to see if there are hidden goodies associated with them. Absurd. This is age-related only in that that it's about visual cues, which are the entire point of GUIs to begin with. Physical buttons on a device are inherently discoverable, as were the controls in GUIs for decades. Younger people are used to the incompetence of newer designs, and more tolerant of having to click every pixel on the screen to find things. It's unfortunate. The bright spot is that there has been some backlash against the "flat" laziness and a return to some visual cues.
politelemon 4y ago
I can't help but notice, the first rule there has an overlap with dark patterns. It makes sense, you're trying to encourage a specific behaviour through an option, so it represents how far you're willing to go.
- a-r-t 4y ago
  Fixed options can also reduce the outcome (donations in this case) if you don't A/B test them properly.
happytoexplain 4y ago
Spinner vs progress bar is not short vs long operation, it's non-progressive vs progressive operation (though you may opt for a spinner if a progressive operation is consistently, predictably very short). In the software world, designers need to be engineers (or work very closely with engineers, very early in the process). We recently had designers give us a nice looking progressive indicator for a non-progressive operation that happened to take a somewhat predictable amount of time. Business loved the look and visual feedback. Then we got use cases where the operation could be instantaneous. They didn't want to skip the progress animation because they liked how it made the app feel like it was doing something, and also if the user got the result instantly, it was "jarring". So now, even if the operation finishes instantly, we show the animation, wasting the user's time.
- a-r-t 4y ago
  Do you work for TurboTax by any chance? :)
  - happytoexplain 4y ago
    No, but I'm aware they do the same thing for psychological reasons. Our road to hell was much less formal (Business: "I like the way it feels").
    - geysersam 4y ago
      Perhaps you can reduce the animation time by 5% every month. One day people will have gotten used to the faster behavior. Eventually you can remove it without anyone feeling that something is off.
      - franky47 4y ago
        And brag to management that you made the app 100% faster.
- geysersam 4y ago
  Wonder how often this is the case. Especially a couple of years ago, in early SPA time, show 1s spinner every page navigation. shudder
RicoElectrico 4y ago
The zeroth should be "don't fuck with the middle mouse button". Though it's not as bad as it used to be.
- savingGrace 4y ago
  While pair programming I will say something like "just click on it with your mmb" and I always hear "what's that do?" I have yet to work with a single developer that uses the mmb. I live and die by mine. This doesn't include the "I don't have a MMB" Mac club.
  - neon_electro 4y ago
    My "middle mouse button" on my Mac is the Command key. It does the same thing as the middle mouse button when combined with a left click.
    - jonas-w 4y ago
      Yes, there is also a ctrl + left-click feature in Windows and Linux, but it isn't nearly as convenient as the middle mouse button.
      - Izkata 4y ago
        And on a laptop, 3-finger tap on a touchpad can act as the middle mouse button. May have to enable it, though.
  - RicoElectrico 4y ago
    It is quite handy as a clipboard in Linux distros. That said, I learned the hard way the switches put for MMB are often subpar and fail quite fast. I replaced an Omron (?) switch in a Logitech mouse... twice. Thankfully the current Corsair M55 (pretty basic wired gamer mouse) goes strong.
  - antifa 4y ago
    I'm guessing you mean clicking the scroll wheel, which is awesome and I'm surprised that's rare.
gsich 4y ago
Don't use the slider checkbox from example 2. It's not obvious what the state is, especially without color/contrast.
- buttersbrian 4y ago
  I don't think slide toggles are inherently bad, but yes color is your friend and doing them like Material does them is a solid foundation.
  - cosmotic 4y ago
    Slide toggles are widely considered to have bad usability because it's not clear what position they are in.
  - foobarbecue 4y ago
    Slide toggles are such an annyoing fad. I find them really unusable. If you're going to implement one, please label which side is on vs off. Or just use a damn checkbox -- it's the same thing, but actually clear when it's enabled or disabled.
    - andrei_says_ 4y ago
      Appple iOS design uses these instead of checkboxes and the web followed. Don’t see how they are better - maybe when used without a submit button to imply that the change takes place immediately.
      - skydhash 4y ago
        I believe because it always mean On/Enabled/Active when it’s green. So consistent meaning.
      - frosted-flakes 4y ago
        That's exactly what they're for. Checkboxes are for forms, and forms need to be submitted. Toggles take immediate effect.
thealienthing 4y ago
Do the opposite of this blog post and you get Eclipse IDE
Damogran6 4y ago
You ever get two button choices and due to the color selection, can't tell which is highlighted? Not a fan of that.
- dylan604 4y ago
  When programming DVD menus, this was a very common issue. I used to think to myself that at least in web design, this isn't an issue since the :hover type action is what caused the highlight. Then we got touch screens without :hover and it now haunts me again.
mykowebhn 4y ago
Okay, good. Now that you got the UI right, stop tweaking and changing it. I can't stand when the UI on so many apps and webpages change simply because the UI folks and programmers need something to do.
- papito 4y ago
  "Hey, everyone - new guideline bible from AirB&B just dropped!"
- notatoad 4y ago
  UI doesn't change because UI folks have nothing to do, it changes because people love to complain, and sales loves to be able to tell customers "we made that change you asked for". If you like an app and don't want the UI to change, tell the company. as long as all the people who like it are silent and all the people who don't like it are complaining loudly, apps are going to keep changing.
  - InCityDreams 4y ago
    1000 purchases. 100 complaints. Change something because 900 people didn't tell you they were ok with things?
    - timfsu 4y ago
      Sure, because you don't know if the 900 people are silent because they're happy or lazy. A 10% complaint rate feels quite high for a typical feature and would tell me that I probably got something wrong.
    - deleted 4y ago
      [deleted]
  - BuckyBeaver 4y ago
    Eh, not sure about that. Microsoft has made a profound mess out of Windows and Office, in ways that are hard to imagine anyone asking for.
- deleted 4y ago
SicSemperUranus 4y ago
So far 3 out of 5 items in the list have been called into question. Seems like an entire domain of knowledge might be a bit too broad to be summarized into listicles, even with the caveat that they are "rules of thumb".
yashap 4y ago
There’s a couple that stand out as “nice ideas in theory, but rarely practical in reality” - undo over confirmation, and progress bar over spinner. Confirmation dialogs take about 2 minutes to implement. Undo, while there’s the odd problem where it’s easy, very often it’s a massive amount of work to implement, like many months. Likewise, a spinner is a few mins of work, while an ACCURATE progress bar can be much, much more. It’s often really hard to predict how long a given operation will take.
- zdragnar 4y ago
  One thing I hate about my phone is that certain apps have horizontal swipe to delete list items. It presents an undo option, but the undo option doesn't appear for very long, and can itself be dismissed quite easy by accident. Text message conversations are especially prone. The number of times I've deleted something with no recourse because my dog bumped my hand while holding the phone (or some similar unintentional action) went from frustrating to embarassing to enraging long ago.
- btbuildem 4y ago
  I think the key thing to keep in mind is that the end user really, really, and I cannot emphasize this enough, absolutely and totally does not care about how much effort something was for a developer. This guide is from a UX person, they are looking at things from a usability perspective. Developer effort is not a consideration here, and rightfully so.
- hbrn 4y ago
  > Confirmation dialogs take about 2 minutes to implement. Undo, while there’s the odd problem where it’s easy, very often it’s a massive amount of work to implement, like many months. UX is a feature. Might be irrelevant for yet another SaaS, but for consumer-facing products it will be the reason you succeed. Looks at this decade old presentation from Instagram: https://speakerdeck.com/mikeyk/secrets-to-lightning-fast-mobile-design https://speakerdeck.com/mikeyk/secrets-to-lightning-fast-mob... This is the mindset that led to $1B valuation (which many believe to be undervalued).
- rahoulb 4y ago
twojacobtwo 4y ago
I'm starting to get into frontend development after sticking to backend for years. Does anyone know of a more fleshed-out set of rules of thumb for beginners in UI/UX development?
- runarberg 4y ago
  Not really, but browsing Smashing Magazine[1] or A List Apart’s[2] more popular articles could give you a better sense, and some more in depth knowledge. 1: https://www.smashingmagazine.com/ https://www.smashingmagazine.com/ 2: https://alistapart.com/ https://alistapart.com/
  - twojacobtwo 4y ago
    Added to my bookmarks. Much appreciated!
- andrei_says_ 4y ago
  An example of thoughtful approach to ui https://design-system.service.gov.uk/ https://design-system.service.gov.uk/ A collection of ui patterns https://every-layout.dev/ https://every-layout.dev/ A great resource for css reference https://css-tricks.com/ https://css-tricks.com/ https://typographyforlawyers.com/ https://typographyforlawyers.com/ Covers the basics with zero pretense Kevin Powell on YouTube has great css rutorials https://youtu.be/rg7Fvvl3taU https://youtu.be/rg7Fvvl3taU Jen Simmons on YouTube and https://labs.jensimmons.com/ https://labs.jensimmons.com/ https://youtu.be/0Gr1XSyxZy0 https://youtu.be/0Gr1XSyxZy0
  - twojacobtwo 4y ago
    Wow! This is an excellent set of resources. Thank you!
  - joegahona 4y ago
    Any experience or opinions on https://baymard.com/ https://baymard.com/ ?
- 4y ago
joegahona 4y ago
Small quibble: I agree with No. 1, but I'm annoyed with the example of the "Good" version, because it gives no option for an amount that doesn't exist. Imagine buying your next coffee and having the barista swivel that iPad around to you to pay, and your options for tipping were ONLY "$5, $10, or $15." In reality, there's always a backdoor to put a custom amount, so I acknowledge I'm being fussy.
- deleted 4y ago
  [deleted]
- JakeAl 4y ago
  You're right, it's not user-centered design, it's creator-centered design, like those god-awful lightbox overlays for subscribing to newsletters that are the most horrible interference ever. And no, I don't care that they have huge conversion rates, they piss off the user, so they are bad design. This is the kind of garbage designed by marketing people, not tech design people who know anything about good UX.
  - joegahona 4y ago
    I wish there were a way to quantify "they piss off the user" -- I was never able to successfully do that. Even if we were to show 10 of 10 people in qualitative interviews hated them, Marketing would still point to how many signups they yielded.
foobarbecue 4y ago
His "flash mode" example, which he labels "good," is bad, in my opinion. He's drawn one of those circle-in-a-slot switches. I often have trouble figuring out what the on / off state of those is supposed to be. And then the discription "flash mode" makes it even more unclear how a switch state corresponds to app state (does on mean enabled? does on mean suppressed?). The good example for "email weekly summary" is actually good, because checkboxes have a clearly enabled / disabled state and if it's enabled the user knows the thing in the text next to it will happen. It's clear. "flash mode" should be re-written in the "email weekly summary" style. It would have a checkbox with a label "use Adobe Flash for rendering."
- waboremo 4y ago
  His flash example is particularly bad because it's not a setting that should be binary in the first place. Auto/On/Off are all important settings for flash photography. Removing one of them would actively anger a lot of people. This section is actually a really great example of how tiny decisions made in UI can actively reduce usability even though on the superficial level it seems like a good idea. I also think flash mode is represented well on most camera apps. I wouldn't change a thing about them other than maybe adding a text label.
- Groxx 4y ago
  The real solution is to stop describing the thing being changed and start describing the state. "Flash mode" is the problem. "Flash is on/off" is the solution. ("is" is important here. "flash on" has many ways to be interpreted because it's missing a verb.) Your UI should be understandable from text alone if needed.
  - Dalewyn 4y ago
    One of the problems compounding unusable UI that I've noticed is the trend to use as little text as possible. I can understand why designers and even developers want to not use text: Handling multiple languages is annoying and getting people to read is impossible. But you know what? I don't understand what that fucking black-and-white hieroglyph you pulled out of your ass five days ago fucking means.
GGO 4y ago
if you want dark patterns in your UI, just do all the bad ones :)
btbuildem 4y ago
I'm curious about the hierarchy one. On one hand, it seems like a good rule, because one of the hallmarks of a dense, hard-to-use UI is the presence of deep option trees. On the other hand, there is ALWAYS complexity in something large enough, and it cannot be abstracted away, best we hope for is to organize it well -- and hierarchies are a natural way of doing that. A good middle ground that I've seen across programs, apps and OS-level menus is to add a search box that "skips" the hierarchy navigation when the user knows what they're looking for. Another interesting idea was "adaptive" menus where the most used options (per user) would be "nearest" / easiest to get to. That one is nice in theory, but in practice it causes things to move around, and makes it harder to develop familiarity with the nested menus. On the point of familiarity: a solution that appears clever and great, but hasn't taken off (probably because it still feels "unusual") is the circle menu. It makes good use of muscle memory, as all the options are arranged in concentric rings around a start point, with selection on one ring opening the next (more outer) ring with more options. As far as the author's suggestion -- I guess it aims to keep the top-level menus simple. Where does the complexity go? If it's boxed away in some other dialog, per "category" or "subject", it could work relatively well. A bit more effort from the designers to make it that way, but generally that means it's less effort for the user to interact with.
- notatoad 4y ago
  i don't think there's a good answer on the hierarchy problem. there's two types of users - the ones who like to see all the settings available to them, and the ones who get angry or confused if any settings are displayed that aren't relevant to them. these two groups of users will never agree on what settings should be visible and what should be hidden.
- deltarholamda 4y ago
  >A good middle ground that I've seen across programs, apps and OS-level menus is to add a search box that "skips" the hierarchy navigation I use this in the iOS Settings all the time. It truly is a great and important UI element. Web sites could benefit from adopting this as well. With the rise of Google, it seemed like everybody just kind of gave up on search. "They'll just Google it anyway." But for a lot of Web sites, having a decent and working search tool is really important. I remember a lot of articles talking about how to handle search on your Web site, with lots of tools and libraries and whatnot, and it just kind of dried up. There's still work happening on Big Time search technologies (Lucene, et. al.), but other than built-in things for platforms like Wordpress, it's kind of stale and quiet.
larsrc 4y ago
Additional rules of thumb: * Avoid single choices. If there's only one possible choice, don't waste the user's time by requiring an action. At most show that that value is chosen. * Select the best defaults you possibly can. If some extra coding work allows pre-selecting the right default infor 50% of the users without making it harder for the rest of the users, it's a win. * Remember the user's input. Making the user select the same thing again and again is insulting. * Don't have an explicit setting when an implicit one will do. The width of a panel can be remembered from the last time the user resized it, there doesn't have to be a place to enter a value for it.
83457 4y ago
I communicated with my son's doctor through a system that included a checkbox with label Not Urgent that defaulted to checked. As I submitted an urgent message, I clicked that checkbox and hit submit in quick succession. Later I went through sent messages and the urgency indicator was opposite of intended on all. I looked at the form more closely and realized that the label was actually indicating what clicking the checkbox would change the state to, so clicking indicated it was not urgent. I emailed the company about the confusing behavior and received no response.
- efortis 4y ago
  [x] Set as Urgent Having a verb helps. Here'a blog post with more examples, and tips for checkboxes. https://blog.uidrafter.com/guidelines-for-checkboxes https://blog.uidrafter.com/guidelines-for-checkboxes
- 83457 4y ago
  Just to clarify, when the checkbox is checked the label is "Not Urgent" and the message is considered urgent. When it is unchecked the label becomes "Urgent" and the message is not considered urgent.
Nifty3929 4y ago
One thing I haven't seen discussed before are the two different types of options, which should be handled differently. - Options which any particular user might want to change on a regular basis. These should be near the "front" of the UI within reach according to how often a user might be expected to change it. - Options which different users may select differently, but which a specific user is unlikely to change. These can be buried, as long as they are easily discoverable so that users are at least aware of the option. Also please make toggles unambiguously on or off. Those little sliders, especially solo, can be difficult to figure out the current state of. Maybe put the word "On/Off" right on the slider itself. Or put the state in the label: (-0) Flash is ON. (0-) Flash is OFF
throwaway4good 4y ago
Anyone remember Jakob Nielsen and his usability heuristics: https://www.nngroup.com/articles/ten-usability-heuristics/ https://www.nngroup.com/articles/ten-usability-heuristics/ 10 Usability Heuristics for User Interface Design ?
BuckyBeaver 4y ago
6. Don't hide things that are disabled. GREY THEM OUT. That's how users learn that a. The function exists b. Where it resides c. That it requires some condition to be satisfied before usage
- kersplody 4y ago
  Furthermore, communicate why the function is disabled. Nothing is more frustrating than knowing a function existents but not knowing the conditions required to enable it.
  - BuckyBeaver 4y ago
    Yep, that's ideal. Sometimes, though, this can be hard to convey efficiently when there are multiple conditions. ToolTips can help.
- brailsafe 4y ago
  It depends on whether they can affect the condition that would enable it imo.
  - reitanuki 4y ago
    Disagreed. As a newcomer to Grafana, some features were hidden because of privileges and I was super confused about how to do them. Being disabled with a tooltip saying 'Not available for your user. Contact your administrator.' would have massively helped me rather than going on a wild goose chase.
    - brailsafe 4y ago
      That's a pretty good counterexample, and probably the more common one. But what if your company only paid for a tiny subset of the product? Would you want to see everything that's unavailable along with a tooltip even if it really detracts from the user experience of the features you did pay for?
- runarberg 4y ago
worldmerge 4y ago
Does anyone have recommendations for learning physical user interface design or hci? A lot of the articles I find on UI design are focused on websites or apps.
hermitcrab 4y ago
I find the slide left/right buttons shown as the first diagram in point 2 to be confusing. Is the text referring to the current state or what happens if I click it? Is there an official name for that button type? Give me a check box any day.
mixedCase 4y ago
Here's another one: Have proper contrast for the close button in the newsletter ad.
rkagerer 4y ago
This article lost me in the first two examples. Defaults are fine, but as a user I'd like a choice to enter my own donation amount. I've always found the touted toggle box control to be ambiguous compared to the old-fashioned checkmark in a box.
chiefalchemist 4y ago
> "... cchoices or behaviour you want to encourage." Perhaps. But too often tbat mindset results in dark patterns. That is, the user is "encouraged" to make choices not in their best interest. This was in the first couple of lines. I checked out immediately.
JakeAl 4y ago
I recommend this book, but it's pre-smartphone. Still the best book for telling you what design elements should be used under which circumstances. https://archive.org/details/guidesignhandboo0000fowl https://archive.org/details/guidesignhandboo0000fowl
trilbyglens 4y ago
Apparently "rule of thumb" is now banned accordingly to Stanford as it's "harmful"
- orthecreedence 4y ago
  Do you have any idea how hurtful the phrase is to people without thumbs? And if we only follow "rules of thumb" where does that leave canines, whales, and tardigrades? Not to mention mycelium. What UI best practices are they to follow? Let's try to be a bit more inclusive...
- type0 4y ago
  This rule is considered harmful and hurts Koalas that have two opposable thumbs
jerryzh 4y ago
I think negative labels are deliberately designed to trick user into subscribing things they don't want.

I'd add that I've noticed older people struggling with hidden UI elements. (E.g. not knowing that button X will appear if they do Y (and then not remembering if told...)).

neon_electro 4y ago
ESPECIALLY "buttons" that are basically text links without the underline. If you're lucky, you might have a "pill" border or drop shadow, but that hasn't helped my dad in my experience observing him.
- Mesopropithecus 4y ago
  Hasn't helped me either, and I'm in all likelyhood a bit younger than most people's dads :). This is an anti pattern which good directly against the concept of "affordance."
ericmcer 4y ago
There must be a whole branch of design geared towards older generations. I have been trying to work in this area and have noticed older people are very persistent and will read instructions carefully, but are very hesitant to click and explore things. Meanwhile young people immediately click and interact with everything without any fear but will completely ignore any kind of written instruction. I was testing a web app out on my dad and he dragged the cursor to the bottom of the screen, which brought up the Mac Dock which immediately confused him and he asked my why I did that. I am not sure how to code around just general inability to use a computer, maybe avoid elements at the edges of the viewport haha.
- ragnese 4y ago
  I've noticed this as well. Ironically, I believe it's because product design was generally worse "back in the day." Normal items you'd buy from a store or catalog could be legitimately dangerous if you operated them incorrectly (electrically powered appliances like lamps and toasters that were not polarized/grounded, for example). So, rather than risk the very real likelihood of breaking your new gadget or injuring yourself, you were better off reading the instructions and only using the device as you were instructed to. These days, things are pretty much "stupid proof." No matter how many times I insist on it, people my parents' age simply refuse to believe that there is nothing they could reasonably type or click while using their computer that will irreparably harm it. (Yes, of course they could somehow format their hard drive, etc, but there's zero chance you'd be able to do that on accident.)
  - BuckyBeaver 4y ago
    "I believe it's because product design was generally worse 'back in the day.'" I don't agree with this generalization. Here's an example: A stereo receiver, even today's A/V receiver, has a certain number of physical inputs. Back in the day, you had buttons on the front to select the input you wanted, clearly labeled. One press gets you the source you want, every time. Many receivers today force you to press an Input button or turn a wheel to iterate through a list of inputs, a list of unknown size and unknown beginning and end. This is because the display idiotically doesn't show a complete LIST of the inputs at once, or even a moving dot to show you where you are in the list. So you could be one input below the one you're trying to select in the list, but if you happen to turn the dial the other way you'll go through 10 inputs to get back to it. Granted, this is much less commonly encountered now because nobody is going over to his receiver to put a disc in the player, but it was a problem for many years when people were still doing so. In some cases, older designs were also better for safety. When safety is on the line, the best design (or at least universally-understood standards) often percolate to the top and stay there. A sad example of this was Jeep's attempt to "innovate" with a disastrously defective gear shift, which killed Star Trek actor Anton Yelchin: https://www.theguardian.com/film/2016/jun/20/star-trek-actor-anton-yelchin-death-jeep-grand-cherokee-recall https://www.theguardian.com/film/2016/jun/20/star-trek-actor... But I also acknowledge that there have been major safety improvements. The other day I rented a chain saw for the first time and was comforted to see the safety brake on it.
hateful 4y ago
The latest example of this I've seen is that after the latest cable box update - full screen ads will show for shows when it turns on and my mom doesn't know how to close them and I have to come help. She only knows how to change the channels, not interact with GUIs. She's never used a mouse before or used "arrow" keys to move an interface. She only knows "this button does this". Another example is that our last TV had a "Source" Button. But it doesn't change the source, it brings up a list so you can choose a source. Nearly every week she would accidentally hit Channel Up or Down on the TV remote and then not know how to switch it back to the Cable Box. She'd hit Source and it wouldn't change the source and then call me. Sadly, she has dementia now and will never learn.
- paulryanrogers 4y ago
  Could you open the remote and remove channel up/down buttons? Or put some electrical tape underneath to make them ineffective?
tracker1 4y ago
I think that beyond a relatively obvious menu, non-obvious UI elements are an anti-pattern. And I'm someone that largely came up in text-based UI interfaces (BBSes, terminal apps, etc). Things should be largely discoverable in practice for graphical user interfaces, even if there's a shortcut.
runarberg 4y ago
I’m generally not a fan of this design pattern. If an action is required before the button is applicable, consider disabling it instead of hiding it, or—even better—allow clicking it and simply guide the user to the required action (e.g. focus the required element and show and error message under it; maybe shake it a little if you‘re up to it).
BuckyBeaver 4y ago
That's why UI elements should almost never appear and disappear. There's a reason that GREYING OUT disabled controls has always been a fundamental concept of GUI design. It shows users that the function exists, where it exists, and that it's conditional. Peek-a-boo UI is incompetent. It's even dumber when you consider that, in most cases, the space for the disappearing controls has already been reserved; so nothing is gained by hiding them. And almost as bad as peek-a-boo UI is "flat" UI, where most controls aren't demarcated as such. So you're reduced to clicking on plain text labels and other inert-looking components to see if there are hidden goodies associated with them. Absurd. This is age-related only in that that it's about visual cues, which are the entire point of GUIs to begin with. Physical buttons on a device are inherently discoverable, as were the controls in GUIs for decades. Younger people are used to the incompetence of newer designs, and more tolerant of having to click every pixel on the screen to find things. It's unfortunate. The bright spot is that there has been some backlash against the "flat" laziness and a return to some visual cues.

politelemon 4y ago

I can't help but notice, the first rule there has an overlap with dark patterns. It makes sense, you're trying to encourage a specific behaviour through an option, so it represents how far you're willing to go.

a-r-t 4y ago
Fixed options can also reduce the outcome (donations in this case) if you don't A/B test them properly.

happytoexplain 4y ago

Spinner vs progress bar is not short vs long operation, it's non-progressive vs progressive operation (though you may opt for a spinner if a progressive operation is consistently, predictably very short). In the software world, designers need to be engineers (or work very closely with engineers, very early in the process). We recently had designers give us a nice looking progressive indicator for a non-progressive operation that happened to take a somewhat predictable amount of time. Business loved the look and visual feedback. Then we got use cases where the operation could be instantaneous. They didn't want to skip the progress animation because they liked how it made the app feel like it was doing something, and also if the user got the result instantly, it was "jarring". So now, even if the operation finishes instantly, we show the animation, wasting the user's time.

a-r-t 4y ago
Do you work for TurboTax by any chance? :)
- happytoexplain 4y ago
  No, but I'm aware they do the same thing for psychological reasons. Our road to hell was much less formal (Business: "I like the way it feels").
  - geysersam 4y ago
    Perhaps you can reduce the animation time by 5% every month. One day people will have gotten used to the faster behavior. Eventually you can remove it without anyone feeling that something is off.
    - franky47 4y ago
      And brag to management that you made the app 100% faster.
geysersam 4y ago
Wonder how often this is the case. Especially a couple of years ago, in early SPA time, show 1s spinner every page navigation. shudder

RicoElectrico 4y ago

The zeroth should be "don't fuck with the middle mouse button". Though it's not as bad as it used to be.

savingGrace 4y ago
While pair programming I will say something like "just click on it with your mmb" and I always hear "what's that do?" I have yet to work with a single developer that uses the mmb. I live and die by mine. This doesn't include the "I don't have a MMB" Mac club.
- neon_electro 4y ago
  My "middle mouse button" on my Mac is the Command key. It does the same thing as the middle mouse button when combined with a left click.
  - jonas-w 4y ago
    Yes, there is also a ctrl + left-click feature in Windows and Linux, but it isn't nearly as convenient as the middle mouse button.
    - Izkata 4y ago
      And on a laptop, 3-finger tap on a touchpad can act as the middle mouse button. May have to enable it, though.
- RicoElectrico 4y ago
  It is quite handy as a clipboard in Linux distros. That said, I learned the hard way the switches put for MMB are often subpar and fail quite fast. I replaced an Omron (?) switch in a Logitech mouse... twice. Thankfully the current Corsair M55 (pretty basic wired gamer mouse) goes strong.
- antifa 4y ago
  I'm guessing you mean clicking the scroll wheel, which is awesome and I'm surprised that's rare.

gsich 4y ago

Don't use the slider checkbox from example 2. It's not obvious what the state is, especially without color/contrast.

buttersbrian 4y ago
I don't think slide toggles are inherently bad, but yes color is your friend and doing them like Material does them is a solid foundation.
- cosmotic 4y ago
  Slide toggles are widely considered to have bad usability because it's not clear what position they are in.
- foobarbecue 4y ago
  Slide toggles are such an annyoing fad. I find them really unusable. If you're going to implement one, please label which side is on vs off. Or just use a damn checkbox -- it's the same thing, but actually clear when it's enabled or disabled.
  - andrei_says_ 4y ago
    Appple iOS design uses these instead of checkboxes and the web followed. Don’t see how they are better - maybe when used without a submit button to imply that the change takes place immediately.
    - skydhash 4y ago
      I believe because it always mean On/Enabled/Active when it’s green. So consistent meaning.
    - frosted-flakes 4y ago
      That's exactly what they're for. Checkboxes are for forms, and forms need to be submitted. Toggles take immediate effect.

thealienthing 4y ago

Do the opposite of this blog post and you get Eclipse IDE

Damogran6 4y ago

You ever get two button choices and due to the color selection, can't tell which is highlighted? Not a fan of that.

dylan604 4y ago
When programming DVD menus, this was a very common issue. I used to think to myself that at least in web design, this isn't an issue since the :hover type action is what caused the highlight. Then we got touch screens without :hover and it now haunts me again.

mykowebhn 4y ago

Okay, good. Now that you got the UI right, stop tweaking and changing it. I can't stand when the UI on so many apps and webpages change simply because the UI folks and programmers need something to do.

papito 4y ago
"Hey, everyone - new guideline bible from AirB&B just dropped!"
notatoad 4y ago
UI doesn't change because UI folks have nothing to do, it changes because people love to complain, and sales loves to be able to tell customers "we made that change you asked for". If you like an app and don't want the UI to change, tell the company. as long as all the people who like it are silent and all the people who don't like it are complaining loudly, apps are going to keep changing.
- InCityDreams 4y ago
  1000 purchases. 100 complaints. Change something because 900 people didn't tell you they were ok with things?
  - timfsu 4y ago
    Sure, because you don't know if the 900 people are silent because they're happy or lazy. A 10% complaint rate feels quite high for a typical feature and would tell me that I probably got something wrong.
  - deleted 4y ago
    [deleted]
- BuckyBeaver 4y ago
  Eh, not sure about that. Microsoft has made a profound mess out of Windows and Office, in ways that are hard to imagine anyone asking for.
deleted 4y ago

SicSemperUranus 4y ago

So far 3 out of 5 items in the list have been called into question. Seems like an entire domain of knowledge might be a bit too broad to be summarized into listicles, even with the caveat that they are "rules of thumb".

yashap 4y ago

There’s a couple that stand out as “nice ideas in theory, but rarely practical in reality” - undo over confirmation, and progress bar over spinner. Confirmation dialogs take about 2 minutes to implement. Undo, while there’s the odd problem where it’s easy, very often it’s a massive amount of work to implement, like many months. Likewise, a spinner is a few mins of work, while an ACCURATE progress bar can be much, much more. It’s often really hard to predict how long a given operation will take.

zdragnar 4y ago
One thing I hate about my phone is that certain apps have horizontal swipe to delete list items. It presents an undo option, but the undo option doesn't appear for very long, and can itself be dismissed quite easy by accident. Text message conversations are especially prone. The number of times I've deleted something with no recourse because my dog bumped my hand while holding the phone (or some similar unintentional action) went from frustrating to embarassing to enraging long ago.
btbuildem 4y ago
I think the key thing to keep in mind is that the end user really, really, and I cannot emphasize this enough, absolutely and totally does not care about how much effort something was for a developer. This guide is from a UX person, they are looking at things from a usability perspective. Developer effort is not a consideration here, and rightfully so.
hbrn 4y ago
> Confirmation dialogs take about 2 minutes to implement. Undo, while there’s the odd problem where it’s easy, very often it’s a massive amount of work to implement, like many months. UX is a feature. Might be irrelevant for yet another SaaS, but for consumer-facing products it will be the reason you succeed. Looks at this decade old presentation from Instagram: https://speakerdeck.com/mikeyk/secrets-to-lightning-fast-mobile-design https://speakerdeck.com/mikeyk/secrets-to-lightning-fast-mob... This is the mindset that led to $1B valuation (which many believe to be undervalued).
rahoulb 4y ago

twojacobtwo 4y ago

I'm starting to get into frontend development after sticking to backend for years. Does anyone know of a more fleshed-out set of rules of thumb for beginners in UI/UX development?

runarberg 4y ago
Not really, but browsing Smashing Magazine[1] or A List Apart’s[2] more popular articles could give you a better sense, and some more in depth knowledge. 1: https://www.smashingmagazine.com/ https://www.smashingmagazine.com/ 2: https://alistapart.com/ https://alistapart.com/
- twojacobtwo 4y ago
  Added to my bookmarks. Much appreciated!
andrei_says_ 4y ago
An example of thoughtful approach to ui https://design-system.service.gov.uk/ https://design-system.service.gov.uk/ A collection of ui patterns https://every-layout.dev/ https://every-layout.dev/ A great resource for css reference https://css-tricks.com/ https://css-tricks.com/ https://typographyforlawyers.com/ https://typographyforlawyers.com/ Covers the basics with zero pretense Kevin Powell on YouTube has great css rutorials https://youtu.be/rg7Fvvl3taU https://youtu.be/rg7Fvvl3taU Jen Simmons on YouTube and https://labs.jensimmons.com/ https://labs.jensimmons.com/ https://youtu.be/0Gr1XSyxZy0 https://youtu.be/0Gr1XSyxZy0
- twojacobtwo 4y ago
  Wow! This is an excellent set of resources. Thank you!
- joegahona 4y ago
  Any experience or opinions on https://baymard.com/ https://baymard.com/ ?
4y ago

joegahona 4y ago

Small quibble: I agree with No. 1, but I'm annoyed with the example of the "Good" version, because it gives no option for an amount that doesn't exist. Imagine buying your next coffee and having the barista swivel that iPad around to you to pay, and your options for tipping were ONLY "$5, $10, or $15." In reality, there's always a backdoor to put a custom amount, so I acknowledge I'm being fussy.

deleted 4y ago
[deleted]
JakeAl 4y ago
You're right, it's not user-centered design, it's creator-centered design, like those god-awful lightbox overlays for subscribing to newsletters that are the most horrible interference ever. And no, I don't care that they have huge conversion rates, they piss off the user, so they are bad design. This is the kind of garbage designed by marketing people, not tech design people who know anything about good UX.
- joegahona 4y ago
  I wish there were a way to quantify "they piss off the user" -- I was never able to successfully do that. Even if we were to show 10 of 10 people in qualitative interviews hated them, Marketing would still point to how many signups they yielded.

foobarbecue 4y ago

His "flash mode" example, which he labels "good," is bad, in my opinion. He's drawn one of those circle-in-a-slot switches. I often have trouble figuring out what the on / off state of those is supposed to be. And then the discription "flash mode" makes it even more unclear how a switch state corresponds to app state (does on mean enabled? does on mean suppressed?). The good example for "email weekly summary" is actually good, because checkboxes have a clearly enabled / disabled state and if it's enabled the user knows the thing in the text next to it will happen. It's clear. "flash mode" should be re-written in the "email weekly summary" style. It would have a checkbox with a label "use Adobe Flash for rendering."

waboremo 4y ago
His flash example is particularly bad because it's not a setting that should be binary in the first place. Auto/On/Off are all important settings for flash photography. Removing one of them would actively anger a lot of people. This section is actually a really great example of how tiny decisions made in UI can actively reduce usability even though on the superficial level it seems like a good idea. I also think flash mode is represented well on most camera apps. I wouldn't change a thing about them other than maybe adding a text label.
Groxx 4y ago
The real solution is to stop describing the thing being changed and start describing the state. "Flash mode" is the problem. "Flash is on/off" is the solution. ("is" is important here. "flash on" has many ways to be interpreted because it's missing a verb.) Your UI should be understandable from text alone if needed.
- Dalewyn 4y ago
  One of the problems compounding unusable UI that I've noticed is the trend to use as little text as possible. I can understand why designers and even developers want to not use text: Handling multiple languages is annoying and getting people to read is impossible. But you know what? I don't understand what that fucking black-and-white hieroglyph you pulled out of your ass five days ago fucking means.

GGO 4y ago

if you want dark patterns in your UI, just do all the bad ones :)

btbuildem 4y ago

I'm curious about the hierarchy one. On one hand, it seems like a good rule, because one of the hallmarks of a dense, hard-to-use UI is the presence of deep option trees. On the other hand, there is ALWAYS complexity in something large enough, and it cannot be abstracted away, best we hope for is to organize it well -- and hierarchies are a natural way of doing that. A good middle ground that I've seen across programs, apps and OS-level menus is to add a search box that "skips" the hierarchy navigation when the user knows what they're looking for. Another interesting idea was "adaptive" menus where the most used options (per user) would be "nearest" / easiest to get to. That one is nice in theory, but in practice it causes things to move around, and makes it harder to develop familiarity with the nested menus. On the point of familiarity: a solution that appears clever and great, but hasn't taken off (probably because it still feels "unusual") is the circle menu. It makes good use of muscle memory, as all the options are arranged in concentric rings around a start point, with selection on one ring opening the next (more outer) ring with more options. As far as the author's suggestion -- I guess it aims to keep the top-level menus simple. Where does the complexity go? If it's boxed away in some other dialog, per "category" or "subject", it could work relatively well. A bit more effort from the designers to make it that way, but generally that means it's less effort for the user to interact with.

notatoad 4y ago
i don't think there's a good answer on the hierarchy problem. there's two types of users - the ones who like to see all the settings available to them, and the ones who get angry or confused if any settings are displayed that aren't relevant to them. these two groups of users will never agree on what settings should be visible and what should be hidden.
deltarholamda 4y ago
>A good middle ground that I've seen across programs, apps and OS-level menus is to add a search box that "skips" the hierarchy navigation I use this in the iOS Settings all the time. It truly is a great and important UI element. Web sites could benefit from adopting this as well. With the rise of Google, it seemed like everybody just kind of gave up on search. "They'll just Google it anyway." But for a lot of Web sites, having a decent and working search tool is really important. I remember a lot of articles talking about how to handle search on your Web site, with lots of tools and libraries and whatnot, and it just kind of dried up. There's still work happening on Big Time search technologies (Lucene, et. al.), but other than built-in things for platforms like Wordpress, it's kind of stale and quiet.

larsrc 4y ago

Additional rules of thumb: * Avoid single choices. If there's only one possible choice, don't waste the user's time by requiring an action. At most show that that value is chosen. * Select the best defaults you possibly can. If some extra coding work allows pre-selecting the right default infor 50% of the users without making it harder for the rest of the users, it's a win. * Remember the user's input. Making the user select the same thing again and again is insulting. * Don't have an explicit setting when an implicit one will do. The width of a panel can be remembered from the last time the user resized it, there doesn't have to be a place to enter a value for it.

83457 4y ago

I communicated with my son's doctor through a system that included a checkbox with label Not Urgent that defaulted to checked. As I submitted an urgent message, I clicked that checkbox and hit submit in quick succession. Later I went through sent messages and the urgency indicator was opposite of intended on all. I looked at the form more closely and realized that the label was actually indicating what clicking the checkbox would change the state to, so clicking indicated it was not urgent. I emailed the company about the confusing behavior and received no response.

efortis 4y ago
[x] Set as Urgent Having a verb helps. Here'a blog post with more examples, and tips for checkboxes. https://blog.uidrafter.com/guidelines-for-checkboxes https://blog.uidrafter.com/guidelines-for-checkboxes
83457 4y ago
Just to clarify, when the checkbox is checked the label is "Not Urgent" and the message is considered urgent. When it is unchecked the label becomes "Urgent" and the message is not considered urgent.

Nifty3929 4y ago

One thing I haven't seen discussed before are the two different types of options, which should be handled differently. - Options which any particular user might want to change on a regular basis. These should be near the "front" of the UI within reach according to how often a user might be expected to change it. - Options which different users may select differently, but which a specific user is unlikely to change. These can be buried, as long as they are easily discoverable so that users are at least aware of the option. Also please make toggles unambiguously on or off. Those little sliders, especially solo, can be difficult to figure out the current state of. Maybe put the word "On/Off" right on the slider itself. Or put the state in the label: (-0) Flash is ON. (0-) Flash is OFF

throwaway4good 4y ago

Anyone remember Jakob Nielsen and his usability heuristics: https://www.nngroup.com/articles/ten-usability-heuristics/ https://www.nngroup.com/articles/ten-usability-heuristics/ 10 Usability Heuristics for User Interface Design ?

BuckyBeaver 4y ago

6. Don't hide things that are disabled. GREY THEM OUT. That's how users learn that a. The function exists b. Where it resides c. That it requires some condition to be satisfied before usage

kersplody 4y ago
Furthermore, communicate why the function is disabled. Nothing is more frustrating than knowing a function existents but not knowing the conditions required to enable it.
- BuckyBeaver 4y ago
  Yep, that's ideal. Sometimes, though, this can be hard to convey efficiently when there are multiple conditions. ToolTips can help.
brailsafe 4y ago
It depends on whether they can affect the condition that would enable it imo.
- reitanuki 4y ago
  Disagreed. As a newcomer to Grafana, some features were hidden because of privileges and I was super confused about how to do them. Being disabled with a tooltip saying 'Not available for your user. Contact your administrator.' would have massively helped me rather than going on a wild goose chase.
  - brailsafe 4y ago
    That's a pretty good counterexample, and probably the more common one. But what if your company only paid for a tiny subset of the product? Would you want to see everything that's unavailable along with a tooltip even if it really detracts from the user experience of the features you did pay for?
runarberg 4y ago

worldmerge 4y ago

Does anyone have recommendations for learning physical user interface design or hci? A lot of the articles I find on UI design are focused on websites or apps.

hermitcrab 4y ago

I find the slide left/right buttons shown as the first diagram in point 2 to be confusing. Is the text referring to the current state or what happens if I click it? Is there an official name for that button type? Give me a check box any day.

mixedCase 4y ago

Here's another one: Have proper contrast for the close button in the newsletter ad.

rkagerer 4y ago

This article lost me in the first two examples. Defaults are fine, but as a user I'd like a choice to enter my own donation amount. I've always found the touted toggle box control to be ambiguous compared to the old-fashioned checkmark in a box.

chiefalchemist 4y ago

> "... cchoices or behaviour you want to encourage." Perhaps. But too often tbat mindset results in dark patterns. That is, the user is "encouraged" to make choices not in their best interest. This was in the first couple of lines. I checked out immediately.

JakeAl 4y ago

I recommend this book, but it's pre-smartphone. Still the best book for telling you what design elements should be used under which circumstances. https://archive.org/details/guidesignhandboo0000fowl https://archive.org/details/guidesignhandboo0000fowl

trilbyglens 4y ago

Apparently "rule of thumb" is now banned accordingly to Stanford as it's "harmful"

orthecreedence 4y ago
Do you have any idea how hurtful the phrase is to people without thumbs? And if we only follow "rules of thumb" where does that leave canines, whales, and tardigrades? Not to mention mycelium. What UI best practices are they to follow? Let's try to be a bit more inclusive...
type0 4y ago
This rule is considered harmful and hurts Koalas that have two opposable thumbs

jerryzh 4y ago

I think negative labels are deliberately designed to trick user into subscribing things they don't want.