Rules for Intuitive UX

https://learnui.design/blog/4-rules-intuitive-ux.html

by stanislavb • 7 years ago

440 113 7 years ago

hizxy• 7 years ago

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.

davnicwil4• 7 years ago

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.

arrrg6• 7 years ago

But that’s not correct. Amazon changes the nuts and bolts parts of it’s UI a lot and they do not tend to make egregious UI mistakes.

They use dark patterns, sure, but don’t confuse useable UI with beautiful UI.

hesarenu2• 7 years ago

Amazon UI is crap compared to Flipkart. If i want to drill down then i usually do on Flipkart and then do a search on amazon if the prices differ.

holy_city• 7 years ago

I think Amazon would have benefited from better UI for particular parts of their platform and achieved better growth.

They're great for point of sale, terrible for product discovery as a direct result of the UI. That's fine for most products where you can research what you want to buy then purchase on Amazon anyway (because free 1/2-day shipping), but it means services like Prime Video are terrible to use compared to Hulu/Netflix.

Which is a shame, since I think their originals and content library is really solid. It's just impossible for you to discover it without a huge ad campaign.

pembrook2• 7 years ago

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.

taneq7• 7 years ago

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.

arrrg6• 7 years ago

I’m not sure what you are trying to say here and how it relates to the article.

It’s a pithy quote but it’s also sort of pointless since all of culture is like that. To a certain extent intuitive = familiar and that’s not even weird or surprising.

taneq7• 7 years ago

I thought it was pretty straightforward:

I don't believe there is any such thing as intuitive interfaces, only familiar interfaces.

You read so much about "intuitive" UI/UX design. It's in the article's title, after all. All based to some degree on what interactions come naturally to humans. I don't think much does come naturally beyond a very basic level, and after that it's purely to do with familiarity. So rather than focusing on some hypothetical universal intuition, focus on what your target audience is familiar with.

wallawe• 7 years ago

The best way I've heard it put, is that good UX isn't automatically knowing what to do the first time you interface with something. It's doing it once and then it feeling intuitive every time after.

dsego9• 7 years ago

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

taneq7• 7 years ago

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...

nnq• 7 years ago

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!

EdwardDiego3• 7 years ago

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• 7 years ago

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.

EdwardDiego3• 7 years ago

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.

mrunkel• 7 years ago

My special pet peeve is when the country list has been translated, but uses the sorting order of the english names.

So much find searching for Deutschland under G. Seems to happen quite a bit.

Cenk• 7 years ago

Mine is the country search box that Google uses in some places, where typing G brings up all countries that include the letter G, but in alphabetical order. Meaning “Afghanistan“ is on top, so I type “Ge“, which results in “Algeria“ being first. It’s so infuriating and makes no sense at all. Why would someone looking for Algeria search for Ge? Who on earth thought this is how people searched for their country anywhere?

Screenshot: https://i.imgur.com/QBqZdRml.png

dsego9• 7 years ago

Oh, also experienced this on some sites, where you can see they plugged in translation to come after the sql queries are done, so the 'sort by' happens before the strings get replaced.

mmerlin• 7 years ago

haha I habitually enter Australia as B with 3 up arrows on desktop.

duckqlz• 7 years ago

You can just mash N 5 times... (6 if there is a Nevis although I feel like that’s some weird hold out of colonialism that is specific to kiwi sites and I cannot find an example of a drop down containing it)

koonsolo• 7 years ago

I hate language drop-downs more, because I never know if the language will be in English "Dutch" or Dutch "Nederlands".

misnome• 7 years ago

It's always terrible. If nothing else, am I in "Britain", "England", "Great Britain", "United Kingdom", "The United Kingdom" or some obscure different variant, sometimes the entry is at the top of the list, sometimes sorted, sometimes random. Every list seems somehow different.

ASalazarMX• 7 years ago

To be fair, that confusing amalgamation was your own historical doing.

goblin892• 7 years ago

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.

roguesherlock2• 7 years ago

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

goblin892• 7 years ago

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.

vmurthy• 7 years ago

As a total newbie to UX (I used to be a middleware/back-end developer :-P), I read this article differently. The article mentioned a list of things NOT to do which has its own uses. Let me give you some context:

I currently work as a PM at a startup. We don't really have a UI/UX guy since the last full-stack dev quit. By avoiding a lot of these issues in the first place, I , as the PM can ensure that my customers don't get pissed off because my team mates have built a solid product (code quality, functionality, stability etc) but with glaring UX howlers :-). Via negativa FTW!

alex3305• 7 years ago

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.

aschmid• 7 years ago

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.

arendtio• 7 years ago

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.

Smithalicious• 7 years ago

Hah, I had only ever seen that abbreviation used for Prime Minister. Thank you for telling me the other options.

taneq7• 7 years ago

What, you mean it's not intuitively obvious? /s

crazygringo• 7 years ago

"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".

andrewla2• 7 years ago

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• 7 years ago

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.

andrewla2• 7 years ago

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.

Silhouette• 7 years ago

The "Add Playlist" example is a case of "why not both?"

One potential answer is that while two possible actions may be obviously equivalent to the designer, that is not necessarily obvious to the user. It's a classic usability problem: the designer tries to be helpful but in reality there is now a confusing variety of similar-looking ways forward, and then the user gets analysis paralysis and gives up. The mistake is often compounded by having equivalent things look slightly different, for example using different types of controls, or using slightly different terminology or phrasing.

elbrian• 7 years ago

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?

megous3• 7 years ago

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").

taneq7• 7 years ago

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.

moojd2• 7 years ago

The most confusing toggle I've seen is the "Listen for debug connections" in intellij [0,1]. It shows the current status instead of the action you would be performing. You have to click the "Hang up" icon[0] to START listening and and "Connect" icon[1] to STOP listening.

In their defense that's how most UI toggles[2] work but they are using a 'phone' metaphor and it's implemented backwards from how you would usually expect a phone call UI to work.

[0] https://www.jetbrains.com/help/img/idea/2019.2/php.icons.deb...

[1] https://www.jetbrains.com/help/img/idea/2019.2/php.icons.deb...

[2] https://www.jqueryscript.net/images/jQuery-Plugin-For-Slidin...

yellowapple4• 7 years ago

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.

ken• 7 years ago

Apple is very consistent with this: the visual display always indicates the current state.

Other operating systems and third-party applications are not always consistent, even some big popular ones. 1Password used a "locked padlock" icon to both mean "it's locked" and "it's not locked (click here to lock it)", for the first 12 years. (They never fixed it, though with 1Password 7 they strangely removed the lock button entirely.)

Maybe it's because I grew up using Apple computers, but I never understood why one would make a control show the state that it isn't in.

MatekCopatek• 7 years ago

The logic is relatively sound, you're describing what will happen when used.

Look at it from a different perspective - say you have a TV remote with two separate buttons to turn it on and off. They will be labeled after what they do and that makes total sense. Then someone says "hey, only one of these is usable at any point" and merges them into one button with magically changeable text. Should the text say what the button does or what state the TV is currently in?

4mitkumar• 7 years ago

Problem with (help or any other) text in UI is with internationalisation.

megous3• 7 years ago

You probably want to have text in UI. :)

I mean it's fine for physical things to avoid it, as you probably don't want to manufacture 200 different power on buttons for your TV.

But in software, I like UI's using text much more than the icon/graphics using ones.

jonahx• 7 years ago

This is a well-known UX anti-pattern, discussed in "About Face". Your suggestion is one of the solutions described there:

https://ux.stackexchange.com/questions/1318

guylepage3• 7 years ago

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• 7 years ago

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.

dsego9• 7 years ago

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?

XJ6• 7 years ago

Native dropdowns do have integrated search, you just start typing, but it has very poor UX.

It used to be worse, if you used to type "Eng" then you'd find yourself at "Gabon" not "England" but that was fixed 5-10 years ago so as long as you keep typing it'll keep searching.

But there's no UX, so there's no discoverability to that feature.

dsego9• 7 years ago

I am aware of this feature, but it doesn't do fuzzy search, right? Also, I can't do it on my phone, the virtual keyboard doesn't show up.

atombender• 7 years ago

Pet peeve: On macOS, dropdowns let you type to jump to the right item. But hitting space resets the search. So in a form with a "state" field, to select "New York" you can't type "new<space>y" to jump to it. You have to type "new", then hit the down arrow three times to get past New Hampshire, New Jersey and New Mexico.

dsego9• 7 years ago

For example, this horrific page to pick a bus destination: http://www.ak-split.hr/en/departures-from-split

The dropdown sort of works on desktop where you can start typing and the dropdown will change the selection. But this is a very exact search, no fuzzy lookup.

On my android phone however, there is no typing, the keyboard doesn't show up and you can only flick scroll the list, which is a really subpar experience.

Arnt• 7 years ago

Initialisation order, narrow demand and documentation difficulties, in my case. I wrote and discarded that class for Qt.

It had tricky setup issues: Qt might need to test <N and commit to the result before the final N was known.

It made documentation more difficult, since application screenshots would vary more.

And finally, its niche was narrow. It only works if the number of items isn't known and varies across the threshold and the application developers don't have strong opinions about what to use.

GuB-42• 7 years ago

The worst part is that most native GUIs support editable combo boxes. I think they were common even before the web existed.

I don't understand why they weren't available in html forms since day one. Using the edit field as a search field would be a slight deviation but nothing that couldn't be solved with a bit of JS. At least the rendering could be fully native.

Also worth noting that native drop down boxes usually have a crude search feature: type they beginning of what you are searching fast enough.

giancarlostoro• 7 years ago

This has frustrated me the most about when I was getting into web development. I would look it up, and thought surely even Bootstrap or modern HTML supports this? Nope, I gotta sort through hackish approaches instead of having a native solution.

type they beginning of what you are searching fast enough.

Obnoxious that if you take too long you have to start over. Arguably browsers could add searching in a non-intrusive way that wont require additional code. Gnome 3 does this in a few places.

radley2• 7 years ago

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.

SamuelAdams• 7 years ago

Additionally: do you allow for words to be spelled incorrectly? People fat-finger things all the time, more so on mobile devices. Many pieces of software have this to some degree, see robots.txt as an example:

https://github.com/google/robotstxt/blob/bacd8ba94b6d066ff6c...

dsego9• 7 years ago

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.

wruza• 7 years ago

- - - -

Delegation. A control has simple defaults but may consult you if you provide a specific method. You don’t have to describe a complex behavior of say NSTableView beforehand, you just set yourself as its delegate and then decide at beforedraw-time which rows will be group rows, how to patch cell’s colors and fonts, etc. It is a very good part of desktop ui design. Web controls never delegate anything beyond trivial onaction=f(event).

symlinkk2• 7 years ago

There is an HTML control called <datalist> that is a dropdown with integrated search:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/da...

dsego9• 7 years ago

That's interesting and works in all browsers. Not very discoverable though, looks like an ordinary text box... and behaves like one, I can select an option and then edit it. So, more like a list of suggestions and not specific options to choose from.

WD-42• 7 years ago

This is like desktop Safari still not having native date/time pickers. Drives me insane that we still have to install datepicker libraries when the native ones in every other browser are just fine (if not better!)

dexen• 7 years ago

Why can't native dropdowns have an integrated search?

At least in Firefox, the normal <select> combobox does search by prefix matching the values of <option> tags as you type.

However it's pretty hard -nigh impossible?- to make a good globally generic search widget. Different datasets warrant widely differing matching rules (prefix matching vs. any place matching vs. any word matching; OR search vs AND search; case sensitivity; i18n concerns; non-alphanumeric characters).

Sharlin• 7 years ago

Prefix search in dropdown boxes is one of those small UX features that every self-respecting desktop UI kit has had since the antiquity, long before the term "UX" was even a thing. It is also something that's missing in almost all naive web-based custom dropdown components.

However, its discoverability is almost nonexistent, and it's rather awkward to use because you don't see what you're actually typing. How fast should I type before the builtin timeout erases the buffer? How do I know if I made a typo? Does backspace work? And so on. Blind typing and trying to second-guess the logic behind the feature is not very fun.

dsego9• 7 years ago

I don't understand this line of reasoning. I am sure we have text search figured out by now, any sane matching heuristic can be used.

charlesdaniels• 7 years ago

This is something that macOS does well. You can search through the entire tree of options in drop-down menus for that program. This is definitely something I've missed after leaving the Apple ecosystem.

For those who haven't used macOS, here's a video of what this looks like in action: https://www.youtube.com/watch?v=anUt0Kw8C28 (full disclosure: not my video, no affiliation with the video poster).

nunb• 7 years ago

The solution lies beyond ... Prefab by Fogarty & Dixon.

References:

1 https://www.youtube.com/watch?v=lju6IIteg9Q

2 https://www.washington.edu/news/2010/04/01/what-if-all-softw...

dsego9• 7 years ago

Someone should share this with the Gnome devs.

symlinkk2• 7 years ago

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• 7 years ago

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

Gene_Parmesan• 7 years ago

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.

radley2• 7 years ago

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

ikurei• 7 years ago

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• 7 years ago

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.

iamaelephant• 7 years ago

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

Rules for Intuitive UX

Related Stories