16 ms·

Rules for Intuitive UX

440 points by stanislavb 7y ago

hizxy 7y 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.
- davnicwil 7y 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.
  - arrrg 7y 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.
    - davnicwil 7y ago
      Could you give me an example of this? My impression as a user is that it's not changed very much at all for years. This is the web UI by the way. Both on Amazon.com and AWS. If I'm wrong, fair enough. Need to change my model! > don’t confuse useable UI with beautiful UI. Perhaps I didn't get this across clearly enough, but I definitely don't. It's actually the main point I'm trying to make. Beautiful UI serves a certain type of UX which most products don't need. What most products need is boring, functional, useable design that just works, Amazon being a good example of this.
      - arrrg 7y ago
        Amazon has changed massively over the years. Check out the Wayback Machine. (Sadly looking at the checkout itself that way isn’t really an option.) Only one example of thinking outside the box that’s relatively new on Amazon is putting your delivery address right there in the main navigation and giving you the opportunity to change it. This kind of upfront communication allows them to keep the checkout process itself extremely light and effortless which to me seems to be pretty much the focus of everything they do.
        davnicwil 7y ago
        Ah, very interesting example thanks. We're back to definitions of UI and UX and the overlap between the two :-) That example you gave, whilst obviously literally an update of the UI, I would punt as being more a UX change, actually. The reason is that the point of it is what you say - to reduce friction of the checkout flow by not forcing you to wait until you do that to change your address, but letting you do it ahead of time so that next time you check out, you're just a couple of clicks away from hitting the 'pay' button - as opposed to leaving functionality the same and just making things look nicer. Obviously this change is physically implemented as a UI change, but my question would be did the nav bar's design, position on the screen, etc, change? No - it was a flow change implemented within the existing UI design metaphors. What I'm more alluding to with UI changes is changing those designs and metaphors, with the hope of making the UX 'nicer' as a result. This only works if nicer UI is nicer UX. In Amazon's case that's not true, so they stick with the same server-rendered pages, buttons, navbar, form fields, etc etc that they've had forever. They make flow changes within that UI though, of course, to facilitate better UX.
  - hesarenu 7y 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.
    - davnicwil 7y ago
      I understand what you're saying, but this anecdote just confirms to me that Amazon's UI has the correct focus. As long as you can very quickly and easily buy on Amazon because it's cheaper and perhaps other reasons like the delivery story, returns story, customer services story etc are all better, then the UI in service of the UX is doing its job really well. They're not (necessarily) optimising for you searching for products or finding more detail about products, they're optimising for you buying the products. They very likely care zero if you did the former elsewhere, because why would it affect them if you did or not, you still bought with them.
      - hesarenu 7y ago
        Searching is very important factor. For simple things i can search in amazon but if i have to drill down like laptop, computer parts, mobiles its practically useless. Which then makes me check their competitor which is a huge fail. Now you have sponsored ads between search which don't respect the search filter. I am actually buying more in flipkart these days then amazon.
  - holy_city 7y 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.
  - pembrook 7y 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.
    - catmanjan 7y ago
      They are two sides to the same coin but they are definitely different - think of an application with a good UI, now imagine if the business rules around doing things in the application were suddenly made convoluted - that's UX Good UI seems to be a "know it when I see it" but I'm not convinced a good UX exists yet (or even could exist?) otherwise all applications would use the same methodology
    - plausibilities 7y ago
      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 7y ago
        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.
    - machinecoffee 7y ago
      Well, they did invent (and patent!) One Click purchase - so they at least did care about UX at one point.
deleted 7y ago
[deleted]
goblin89 7y 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.
- roguesherlock 7y ago
  I'm intrigued. How does one internalise this (first principles)?
  - goblin89 7y 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.
    - roguesherlock 7y ago
      makes sense. thanks!
- vmurthy 7y 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!
katakuchi 7y ago
I wonder if these rules are really that universal when you consider the UX and needs of different sectors such as banking, aviation or governmental for that matter. Plus there's always that economic trade-off of filling the consumer's windows with ads, bloat and Pavlovian purchase incentives. (Yes, I'm looking at you Booking.com)
taneq 7y 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.
- arrrg 7y 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.
  - taneq 7y 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.
    - arrrg 7y ago
      But familiar = intuitive. You are just splitting hairs. Obviously what’s intuitive is intuitive largely because it’s familiar (mixed in with a bit of psychology and perception) but that’s not really an issue at all. Rigid adherence to guidelines isn’t a good idea, obviously, and there aren’t any universal truths and all of that is good to know but at first it doesn’t really get you anywhere, besides being obvious. Whenever human brains are involved it gets complex and no hard and fast rules exist.
      - httpsterio 7y ago
        Familiar = you've used it already and know how it operates. Intuitive = it's new to you, but it's function is based on something you know and lesrning this requires very little of you.
nnq 7y 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!
EdwardDiego 7y 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 7y 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.
  - EdwardDiego 7y 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.
    - OisinMoran 7y ago
      Have you tried typing N multiple times? My go to method is typing I six times to get me to Ireland and it usually works.
    - Normal_gaussian 7y ago
      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.
deleted 7y ago
[deleted]
alex3305 7y 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 7y 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 7y 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.
- deleted 7y ago
  [deleted]
- Smithalicious 7y ago
  Hah, I had only ever seen that abbreviation used for Prime Minister. Thank you for telling me the other options.
- taneq 7y ago
  What, you mean it's not intuitively obvious? /s
- crazygringo 7y 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".
- deleted 7y ago
  [deleted]
andrewla 7y 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 7y 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.
  - andrewla 7y 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 7y 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 7y 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?
megous 7y 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").
- taneq 7y 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.
  - moojd 7y 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.debug_listen_off.svg@2x.png https://www.jetbrains.com/help/img/idea/2019.2/php.icons.deb... [1] https://www.jetbrains.com/help/img/idea/2019.2/php.icons.debug_listen_on.svg@2x.png https://www.jetbrains.com/help/img/idea/2019.2/php.icons.deb... [2] https://www.jqueryscript.net/images/jQuery-Plugin-For-Sliding-Toggle-Switches-LC-Switch.jpg https://www.jqueryscript.net/images/jQuery-Plugin-For-Slidin...
    - coldpie 7y ago
      > It shows the current status instead of the action you would be performing. This comment being right next to this one shows the joy of designing UIs: > I never understood why one would make a control show the state that it isn't in. https://news.ycombinator.com/item?id=20737877 https://news.ycombinator.com/item?id=20737877
guylepage3 7y 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 7y 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.
dsego 7y 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 7y 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.
  - dsego 7y 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 7y 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.
    - emilfihlman 7y ago
      Bad UX that for it to be space imho, it should be backspace that triggers it.
      - wokkel 7y ago
dsego 7y ago
Someone should share this with the Gnome devs.
- symlinkk 7y 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 7y ago
I've never heard anyone say: typeahead. I have usedAutoComplete.
- Gene_Parmesan 7y 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.
radley 7y 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 7y 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 7y 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 7y ago
UX design is using 20% of your horizontal space for two sharing buttons, apparently. Why would I take this guy's advice again?

440 points by stanislavb 7y 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.

davnicwil 7y 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.
- arrrg 7y 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.
  - davnicwil 7y ago
    Could you give me an example of this? My impression as a user is that it's not changed very much at all for years. This is the web UI by the way. Both on Amazon.com and AWS. If I'm wrong, fair enough. Need to change my model! > don’t confuse useable UI with beautiful UI. Perhaps I didn't get this across clearly enough, but I definitely don't. It's actually the main point I'm trying to make. Beautiful UI serves a certain type of UX which most products don't need. What most products need is boring, functional, useable design that just works, Amazon being a good example of this.
    - arrrg 7y ago
      Amazon has changed massively over the years. Check out the Wayback Machine. (Sadly looking at the checkout itself that way isn’t really an option.) Only one example of thinking outside the box that’s relatively new on Amazon is putting your delivery address right there in the main navigation and giving you the opportunity to change it. This kind of upfront communication allows them to keep the checkout process itself extremely light and effortless which to me seems to be pretty much the focus of everything they do.
      - davnicwil 7y ago
        Ah, very interesting example thanks. We're back to definitions of UI and UX and the overlap between the two :-) That example you gave, whilst obviously literally an update of the UI, I would punt as being more a UX change, actually. The reason is that the point of it is what you say - to reduce friction of the checkout flow by not forcing you to wait until you do that to change your address, but letting you do it ahead of time so that next time you check out, you're just a couple of clicks away from hitting the 'pay' button - as opposed to leaving functionality the same and just making things look nicer. Obviously this change is physically implemented as a UI change, but my question would be did the nav bar's design, position on the screen, etc, change? No - it was a flow change implemented within the existing UI design metaphors. What I'm more alluding to with UI changes is changing those designs and metaphors, with the hope of making the UX 'nicer' as a result. This only works if nicer UI is nicer UX. In Amazon's case that's not true, so they stick with the same server-rendered pages, buttons, navbar, form fields, etc etc that they've had forever. They make flow changes within that UI though, of course, to facilitate better UX.
- hesarenu 7y 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.
  - davnicwil 7y ago
    I understand what you're saying, but this anecdote just confirms to me that Amazon's UI has the correct focus. As long as you can very quickly and easily buy on Amazon because it's cheaper and perhaps other reasons like the delivery story, returns story, customer services story etc are all better, then the UI in service of the UX is doing its job really well. They're not (necessarily) optimising for you searching for products or finding more detail about products, they're optimising for you buying the products. They very likely care zero if you did the former elsewhere, because why would it affect them if you did or not, you still bought with them.
    - hesarenu 7y ago
      Searching is very important factor. For simple things i can search in amazon but if i have to drill down like laptop, computer parts, mobiles its practically useless. Which then makes me check their competitor which is a huge fail. Now you have sponsored ads between search which don't respect the search filter. I am actually buying more in flipkart these days then amazon.
- holy_city 7y 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.
- pembrook 7y 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.
  - catmanjan 7y ago
    They are two sides to the same coin but they are definitely different - think of an application with a good UI, now imagine if the business rules around doing things in the application were suddenly made convoluted - that's UX Good UI seems to be a "know it when I see it" but I'm not convinced a good UX exists yet (or even could exist?) otherwise all applications would use the same methodology
  - plausibilities 7y ago
    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 7y ago
      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.
  - machinecoffee 7y ago
    Well, they did invent (and patent!) One Click purchase - so they at least did care about UX at one point.

deleted 7y ago

[deleted]

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

roguesherlock 7y ago
I'm intrigued. How does one internalise this (first principles)?
- goblin89 7y 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.
  - roguesherlock 7y ago
    makes sense. thanks!
vmurthy 7y 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!

katakuchi 7y ago

I wonder if these rules are really that universal when you consider the UX and needs of different sectors such as banking, aviation or governmental for that matter. Plus there's always that economic trade-off of filling the consumer's windows with ads, bloat and Pavlovian purchase incentives. (Yes, I'm looking at you Booking.com)

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

arrrg 7y 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.
- taneq 7y 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.
  - arrrg 7y ago
    But familiar = intuitive. You are just splitting hairs. Obviously what’s intuitive is intuitive largely because it’s familiar (mixed in with a bit of psychology and perception) but that’s not really an issue at all. Rigid adherence to guidelines isn’t a good idea, obviously, and there aren’t any universal truths and all of that is good to know but at first it doesn’t really get you anywhere, besides being obvious. Whenever human brains are involved it gets complex and no hard and fast rules exist.
    - httpsterio 7y ago
      Familiar = you've used it already and know how it operates. Intuitive = it's new to you, but it's function is based on something you know and lesrning this requires very little of you.

nnq 7y 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!

EdwardDiego 7y 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 7y 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.
- EdwardDiego 7y 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.
  - OisinMoran 7y ago
    Have you tried typing N multiple times? My go to method is typing I six times to get me to Ireland and it usually works.
  - Normal_gaussian 7y ago
    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.

deleted 7y ago

[deleted]

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

deleted 7y ago
[deleted]
Smithalicious 7y ago
Hah, I had only ever seen that abbreviation used for Prime Minister. Thank you for telling me the other options.
taneq 7y ago
What, you mean it's not intuitively obvious? /s
crazygringo 7y 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".
deleted 7y ago
[deleted]

andrewla 7y 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 7y 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.
- andrewla 7y 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 7y 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 7y 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?

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

taneq 7y 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.
- moojd 7y 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.debug_listen_off.svg@2x.png https://www.jetbrains.com/help/img/idea/2019.2/php.icons.deb... [1] https://www.jetbrains.com/help/img/idea/2019.2/php.icons.debug_listen_on.svg@2x.png https://www.jetbrains.com/help/img/idea/2019.2/php.icons.deb... [2] https://www.jqueryscript.net/images/jQuery-Plugin-For-Sliding-Toggle-Switches-LC-Switch.jpg https://www.jqueryscript.net/images/jQuery-Plugin-For-Slidin...
  - coldpie 7y ago
    > It shows the current status instead of the action you would be performing. This comment being right next to this one shows the joy of designing UIs: > I never understood why one would make a control show the state that it isn't in. https://news.ycombinator.com/item?id=20737877 https://news.ycombinator.com/item?id=20737877

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

dsego 7y 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 7y 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.
- dsego 7y 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 7y 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.
  - emilfihlman 7y ago
    Bad UX that for it to be space imho, it should be backspace that triggers it.
    - wokkel 7y ago

dsego 7y ago

Someone should share this with the Gnome devs.

symlinkk 7y 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 7y ago

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

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

radley 7y 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 7y 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 7y 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 7y ago

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