
Rules for Intuitive UX - stanislavb
https://learnui.design/blog/4-rules-intuitive-ux.html
======
dsego
> Long dropdowns are ridiculous to navigate.

But why, why, why? Why can't native dropdowns have an integrated search? Are
we stuck in some sort of native UI limbo? Why aren't OS and browser developers
doing anything about it. Why can't we have more advanced controls without div-
soups and js galore?

With just a little bit of intelligence we could have controls that adapt to
the offered choices: for example if < N show radio buttons, else show a
dropdown, if too many - show a search box with auto-complete. Why is this so
difficult?

~~~
radley
_> But why, why, why? Why can't native dropdowns have an integrated search?_

Search filtering requires UX/biz logic:

\- Do you search only the beginning of the string or look for contained
substrings?

\- How do you prioritize results: whole-word matches or position of the
substring?

\- Do you highlight/bold the matching portion of the string?

\- Spaces: ignore or include? Or search all results to see if spaces are
relevant and if so, then use them...?

 _> With just a little bit of intelligence we could have controls that adapt
to the offered choices: for example if < N show radio buttons, else show a
dropdown, if too many - show a search box with auto-complete. Why is this so
difficult?_

You'd have the overhead of a search component just to show a couple of radio
buttons.

~~~
dsego
> Search filtering requires UX/biz logic:

I don't buy that some specific biz/ux logic is ever needed for a list of
textual entries. We're not talking about a general search engine here. I
imagine a simple heuristic could cover most of the cases (eg whatever c-f
does). Also, the control can have additional params passed in to configure it
differently when needed. Stuff like hightlight/bold (and even the matching
rules) are imho either configurable or a system-specific implementation detail
- like how macos dropdowns center on the selected item, or how on mobile a
dropdown shows a modal scrolling interface, and so on.

------
megous
OTOH, I never know when the switch is on. Coloring it doesn't help me much,
because I'm not sure it the color means current state or the one it will get
after clicking. It's like with the collapse button: does ^ mean it's currently
collapsed, or that clicking it will collapse some list (state vs action).

It's best to have some note next to it describing the current state ("enabled"
/ "disabled").

~~~
taneq
Aaaargh this one gets me every time. Any interface made out of on/off toggles
needs some really clear signalling to say which way is on and which is off.

Also an honourable mention goes to touchscreen widgets that _look_ like a
left/right slidey switch but are activated by a tap and not a drag.

~~~
yellowapple
> Also an honourable mention goes to touchscreen widgets that look like a
> left/right slidey switch but are activated by a tap and not a drag.

Wait, that's a _bad_ thing? I can only imagine how pissed off I'd be when
using an interface that insisted on me using my mouse to click and drag a
switch to turn it "on" or "off" instead of, you know, just clicking. I don't
even do the left/right swipe thing on mobile, either; way more convenient to
just tap instead of drag.

~~~
joshuak
Yes it's a bad thing not because of the action, but because of the
representation.

It is an attempt at communicating state and action at the some time, but I
think disconnecting look and behavior is a mistake. Don't use a skeuomorphic
slider to represent a push button switch, especially if selling the realism of
a touch interface is the goal.

~~~
yellowapple
I think the representation's fine (but I'm a fan of skeuomorphism...), as long
as I don't have to physically drag :) Clicking on or tapping one side or the
other is fine by me.

------
andrewla
One thing I don't see very often but is intensely useful is that you don't
always have to make a choice. The "Add Playlist" example is a case of "why not
both?" \-- have it at the bottom of the list, have it in the header of the
list, sure, throw one in the menu as well. The user journeys can be either "I
came here to add a playlist", "Hey, here are playlists, I should make one",
and "Oh, they don't have the playlist I want, I'll make one", and all of those
end up in different places. The Material-style "+" in the corner is in my mind
almost always the worst case -- if everyone did it, then it wouldn't be so
bad, but it's a thing you never think to look for with an unfamiliar UI.

I like the discussion of "Poisson" options; thinking about the distribution of
inputs is an important factor. For location/country dropdowns, I find it
frustrating that often my country, the "United States of America" is put at
the top of the dropdown for convenience, but if you miss that and start to
scroll down, it does not appear in the "U" section of the dropdown. Just put
it in both!

~~~
spiderfarmer
The more buttons, the less visibility per button. One (clear) button in the
right place beats two separate buttons, when other buttons are taken into
account.

~~~
andrewla
I think that's making assumptions about user attention that aren't valid. The
user is not looking for all ways to do something; they are looking for the
first way that satisfies their intention.

Specifically in the case of the add playlist example given on the article,
having it both at the bottom of the playlist list and the header of the
playlist section does not detract from either one, but just satisfy different
user journeys to get there.

I think you're certainly right when the UI gets crowded -- the MS Office
ribbon comes to mind; too many buttons to do formatting including dropdowns
that do the same thing as other buttons makes it hard to find related
functionality -- "why can I bold and italic here, but not strikethrough here?"
because strikethrough was relegated to a submenu somewhere.

------
EdwardDiego
God I hate country drop-downs, especially ones that don't have search
functionality, double hate them on mobile. Yep, a normal drop-down will let me
move down the options by pressing a key - I'm a Kiwi, so N for New Zealand,
but that just moves me to Namibia, then I've got to carefully scroll to locate
my country in between Nevis and Nicaragua.

What adds insult to injury is that Nevis isn't even a country, it's part of
the Federation of Saint Kitts and Nevis.

~~~
grenoire
One thin that people miss for dropdowns is that you can actually type
N..E..W.. and it will select New Zealand. Most browsers implement some sort of
combo counter for it, such that the entry resets after a while too.

I do agree that search boxes are better in general, and especially so for
things that are _not_ standardised such as country or airport 3-letter codes.
But it's not the end of the world, even for date inputs you can just type 1984
and it'll select it for you.

EDIT: It does not change the fact that mobile dropdown implementations are
horrendous.

~~~
EdwardDiego
> One thin that people miss for dropdowns is that you can actually type
> N..E..W.. and it will select New Zealand

I need to find those, because I keep getting the ones that go Namibia > East
Timor > Wake Island when I try that.

~~~
Normal_gaussian
A default select works with combinations using the latest Firefox and Chrome -
see [https://jsfiddle.net/0kcbnfd2/](https://jsfiddle.net/0kcbnfd2/)

It could be a case of custom controls being poorly implemented.

~~~
TeMPOraL
It's why I always recommend against non-native controls by default, whether on
the web or desktop/mobile - even if you're particularly observant about your
platform (and most devs aren't), there's probably still a bunch of little
things like these that you'll miss and won't implement, and that people
actually use daily.

~~~
yellowapple
And not only that, but unless you're observant about _literally every platform
on which your app will run_ , you are bound to break something, whether subtly
or majorly.

------
arendtio
> PMs. Your job is already like 25% UX designer. Would be nice to level up
> those skills.

I wish fewer people would use the PM abbreviation. You never know if it means
'Product Manager' or 'Project Manager' and have to consult the context.

~~~
crazygringo
"PM" is strategic ambiguity -- it's actually a benefit that it can mean
either, because a product manager at one company might be called a project
manager at another, and vice-versa. And don't forget "program manager" as a
third variant.

All three titles tell you nothing about what the job is at a specific company,
because every company defines them a little (or a lot) differently. Hence:
"PM".

------
goblin89
Pieces like this might give an illusion that by following the listed rules
you’ll achieve “intuitive UX” (sic). I believe they could be useful if you
already have the first principles somewhat internalized, but otherwise are
likely to be a dangerous distraction.

First principles include knowing that you communicate with the user through
interface, being intentional, having an overall vision, being consistent[0].

People’s expectations as to exact UI layout and behavior can vary a lot,
depending on their background and previous experience (for example, on macOS I
personally often look for things & shortcuts in menu bar first instead of
scouting app’s interface). However, people are not stupid, they learn.

[0] Including consistency in evolution across product lifetime.

~~~
roguesherlock
I'm intrigued. How does one internalise this (first principles)?

~~~
goblin89
To internalize something is to make it come naturally without reminding
yourself about it every time. Practice, reading material on those topics
(books like “The Design of Everyday Things”, “Notes on Graphic Design and
Visual Communication”) help.

~~~
roguesherlock
makes sense. thanks!

------
aschmid
I'm surprised the date text inputs part didn't mention anything about the date
format, which is something I've seen users frequently confused over,
especially the US format of mm/dd/yy which is different than what most of the
rest of the world uses.

------
taneq
It's been said that "the only intuitive user interface ever created was the
nipple", but even then it can take hours or days for an infant to figure out
how to use a nipple.

I don't believe there is any such thing as intuitive interfaces, only familiar
interfaces. So learn what your users are familiar with, and build around that.

~~~
dsego
What about sex? I wonder if it ever happened that a couple didn't really know
what to do with their parts?

~~~
taneq
It's very uncommon, but every now and then there's a news story like this:
[https://www.inquisitr.com/5042023/couple-tried-to-have-a-
bab...](https://www.inquisitr.com/5042023/couple-tried-to-have-a-baby-for-
four-years-it-turns-out-they-were-doing-something-wrong/)

------
elbrian
Every time I select a bit of text on this page, a share box pops up, at least
partially covering some other text on the page.

Is this intuitive UX?

------
alex3305
This write up seems quite decent, but it just boils down to some basic stuff.
Like putting a button near a new feature and choosing the right tool for
selection. Which are both really valid points.

The thing I really miss in this article is accessibility. For some visually
impaired users it can be beneficial to use a dropdown instead of some visual
markers, which can be distracting and unusable for some.

Also the text and arrows explaining the 'design mistakes' are quite tiny, have
insufficient contrast and thus do not make for a good visual experience.

------
guylepage3
A very misleading title to this article but a couple of great reminders. One
thing that is somewhat missing is to always remind yourself to remove blockers
of any kind for users. The easier it is to use your product, the better
experience users will have.

------
duxup
It's amusing that they pick a music player as I find music players endlessly
confusing.

It's understandable as there is a playlist(s) view, playlist content view,
album view, song view ... and so on.

I never know what the back button or any click will do for me.

------
nnq
I still can't believe it _how these kinds of things are not OBVIOUS to ALL UI
and UX designers out there!_ This resources should be drilled into every UX/I
designer's head. It's amazing how much pain and frustration can be avoided by
following such simple rules. I imagine a kitten being squished in a blender
alive every time I see checkboxes used as radio buttons... or people avoiding
to use radios and toggles where they make clear sense...

The hell with material design and all the other fads, _learn these basics
first please and don 't screw them up!_

------
ikurei
Great write-up, concise enough but not too dry.

I generally agree with dropdowns being overused, but this seems too much to
me:

> Picking a date from dropdowns is the worst. If I ever do this, then I’ve
> really failed as a UX designer.

Really? On a laptop, native dropdowns use keyboard input as search, so using
tab (granted, not everyone knows this) I can generally enter my age almost as
if I was writing it.

On mobile, scrolling through the iOS dropdown control is fine, more
comfortable than typing. Scrolling 30 options back to enter my age is the
worst part, and getting worse every year, but it isn't that bad.

~~~
baddox
Yeah, I pretty much disagree with the author when it comes to something like
inputing your birthday. For something like hotel stays or airplane tickets, it
does make sense to show a full calendar to give a sense of the range between
two dates, but for inputing a birthday I'll take the "9 taps" required to fill
out the three fields on mobile. I think it's going to end up faster than
alternating between tapping to select a field and typing to enter the value.

------
hizxy
This has nothing to do with the “UX” of your application. Sure, you may
frustrate users if you don’t follow these rules. However, users will never use
the thing you’re building if doesn’t meet their needs.

~~~
davnicwil
My favourite example of the definitions and distinctions between UI and UX is
Amazon.

Their UI hasn't really changed in years, but their UX has, a lot. Do you think
they would have seen the same amount of growth if they'd focused on improving
the UI of their site, rather than the UX of their service?

It's not that UI is unimportant. On the contrary, I personally think it's very
important, but only in as much as it serves the UX. This for instance means
that a company like Apple has to invest a lot more in evolving and improving
their UI. It's fundamental to their UX of beautiful, useable devices. In a
sense the UI _is_ the UX, so they're tied together very closely. For most
companies/products that isn't the case though. Most are more like Amazon.

To Amazon, the UI just needs to be functional, and get the user through to
making a purchase as quickly and with as little hassle as possible. That's why
they've stuck with essentially the same design and layout for years -
customers know it, and it just works. Any changes making it fancier or
prettier would be, at least in the short term, detrimental to the UX.

~~~
pembrook
Both the UI and UX of amazon's web store are terrible. The reason people buy
from amazon is price, breadth of selection, and speed of delivery, not the
wonderful shopping experience.

Trying to differentiate UI and UX in the context of a web app makes no sense.
Both are two sides of the same coin. In your own comment, you couldn't even
come to a conclusion as to where one ends and the other begins!

This is the hallmark of a buzzword. When a phrase like UX comes to describe
everything and nothing at the same time it ceases to have meaning.

~~~
plausibilities
The scope of any given human experience reaches far beyond that of direct
visual/tactile interactions.

For instance, how is Prime 2-day shipping not considered part of the
purchasing experience?

~~~
pembrook
Absolutely it is. And that's my point.

Every interaction you have with a business in any capacity is an "experience."
How then, can you have employees who are tasked with _everything_? Conversely,
by definition, isn't everybody in the company then a UX person?

UX is everything and nothing depending on the agenda of the person using the
term. It's a buzzword.

------
dsego
Someone should share this with the Gnome devs.

~~~
symlinkk
What's wrong with GNOME? I've been using it for years, I think it's by far the
most consistent and logically laid out desktop environment on Linux. In fact I
think it's more usable than Windows, which is impressive for it being such a
small project.

------
majortennis
I've never heard anyone say: typeahead. I have usedAutoComplete.

~~~
Gene_Parmesan
I've always understood it to be that 'type-ahead' is a category that includes
both autocomplete and autosuggest. Those two are subtly but importantly
different. As 'suggested' by the name, autosuggest acts somewhat like a
recommendation engine. It takes the characters that have already been typed,
and uses those to search for potentially related keywords, etc., even if those
don't match the literal characters the user has typed. Autocomplete,
meanwhile, is a 'dumb' tool that enables things like tab-complete. Both are
considered flavors of type-ahead.

------
radley
TLDR:

\- place the "add" button at the end of lists

\- if you're still using dropdowns like it's 1997, stop

\- make your call to action obvious

\- examples help sell your product

------
iamaelephant
UX design is using 20% of your horizontal space for two sharing buttons,
apparently. Why would I take this guy's advice again?

