7 ms·

For more of these daily annoyances: https://grumpy.website https://grumpy.website The growing user hostility of UIs makes me want to stop developing software a

by todfox 5y ago

For more of these daily annoyances: https://grumpy.website https://grumpy.website The growing user hostility of UIs makes me want to stop developing software and even stop using computers. I started using computers because they made more sense to me than a lot of things. Now, I'm encountering these little moments of illogic and unreason every hour of the day. It's not just beginners who need little cues. I'm deeply familiar with the APIs behind many of these monstrosities and yet I still find myself annoyed or momentarily confused by UIs that minimize, obscure, and hide in the name of Design.

chiph 5y ago
Thanks for that link. One related to this one just got me on DVD Netflix's payment settings site. https://grumpy.website/post/0VkVVuQ6t https://grumpy.website/post/0VkVVuQ6t There is no button to remove your card info. It had my old ZIP code and updating it wasn't working (it would still fail address verification). So to update the value, you are somehow expected to know to clear the field and then save, then enter the correct value and save a second time. Except it doesn't work.[0] What does work is entering a different credit card, saving it, then reentering your original card with the correct ZIP code.[1] So bad design with no affordances and a broken help function, lead to a long-time customer wanting to unsubscribe out of frustration. [0] Neither did the chat function to ask for help. I had to talk to a support person who told me how this was supposed to work. A phone call to support is an expensive cost to a business based on volume. [1] Which made me think they were storing extra info using my card number as a key. And that's not great.
andai 5y ago
This is hilarious, but I'm puzzled by his reaction to a hamburger menu: > Oh-oh. Drag-n-drop icon used for a dropdown menu - May 8, 2021 https://grumpy.website/post/0V_dyk3EP https://grumpy.website/post/0V_dyk3EP
- tesseract 5y ago
  Horizontal lines (or sometimes an array of dots) are sometimes used as a "grip" icon to represent reorderable list rows.
  - andai 5y ago
    I know, I've used them in my own designs. It just sounded like he saw a hamburger menu now for the first time 5 weeks ago! Or maybe it is some kind of joke?
    - frereubu 5y ago
      This is the case for many people. Another explanation is that he was being empathetic.
    - craftinator 5y ago
      As a designer himself, he probably tries to approach design examinations from many different perspectives (we do this at work with new designs: if I was an 70 year old woman, what would I see here?) to find edge cases where the design doesn't work.
    - djur 5y ago
      Hamburger menu icons usually have a fixed position and are part of a header or something of that sort. Floating lines like that would always read as "drag grip" to me.
    - tacotacotaco 5y ago
      Everyone sees the hamburger icon for the first time. It certainly isn't obvious what it means. You need to decide what is more important, that your site look contemporary or that your users can find the information/product/service they are looking for. https://www.nngroup.com/articles/hamburger-menus/ https://www.nngroup.com/articles/hamburger-menus/
    - sroussey 5y ago
      We have found that people are afraid to mess things up, and don’t know what three lines means, so never click them. A lot more than you would think.
    - tomjakubowski 5y ago
      I don't think I'd seen a hamburger menu rendered on a list, for each item, before. Normally a "hamburger menu" appears once, probably at the top of the page, in some kind of navigation bar. In that context, that icon definitely reads "drag to re-order list item" to me.
- OJFord 5y ago
  You're only puzzled because of its ubiquity, and your accustom to it. Nothing about it inherently says 'opens a menu from the side'.
  - andai 5y ago
    Late "edit": Turns out I'm the confused one! (Bit of sleep dep...) I thought this was the main menu for a page, just in a weird low position, but it's the menu that appears on hover for each item and in this context indeed would be interpreted as a drag handle. In this context perhaps something unambiguous like three vertical dots would have been better? Also I agree with you -- perhaps the three lines represent a pictogram of a list (vertically stacked menu items?). And the triple dot version is either a compacted version of the same, or a vertical ellipsis?
    - OJFord 5y ago
      Sure, but that's not an affordance. If it were vertical instead of horizontal lines for example, it'd be like a grip horizontal pulling.
lelanthran 5y ago
There used to be a Hall of Shame for GUIs on the web that I used to read around 2002 or thereabouts. Very similar to this, only for native programs.
- mkr-hn 5y ago
  Is it one of these? https://wiby.me/?q=hall+of+shame https://wiby.me/?q=hall+of+shame
  - lelanthran 5y ago
    Yup! Wasted an hour there just now :-)
systemvoltage 5y ago
I tried reading the footer to get the contact information for on https://grumpy.website https://grumpy.website but it keeps doom-scrolling and only visible for a fraction of a second. What an irony. I dream of a day when we go back to pagination. No, not just pagination numbers on the bottom of the page to flip through pages, but also the URL should reflect that and be able to share the 7th page with someone using a link.
- zorrolovsky 5y ago
  For some experiences, content needs to be updated in page 1 (google is a good example). How would you then share page 7? that requirement could only be met if content was static (no updates) or the ordering of results was old to new. Am I missing something?
  - systemvoltage 5y ago
    That's true. Pagination makes sense when it is static and not chronological, thanks for pointing that out. But, the problem still exists that I cannot get to the footer where there seems to be some contact information of the author :-)
    - zorrolovsky 5y ago
      You're right, the behaviour of the footer clearly creates a major usability issue. I personally dislike infinite scrolling with a passion. I can't see any big advantages and there are a lot of cons. I keep my hopes high that one day I will see it die... like Adobe Flash :)
  - PoignardAzur 5y ago
    The classical solution is to have a "content before ID_OF_LAST_ITEM_ON_PREVIOUS_PAGE" url, though there isn't really a way to do that and also display page numbers on the bottom.
    - zorrolovsky 5y ago
jackson1442 5y ago
I can see how this one might be confusing- https://grumpy.website/post/0Vp0pSilq https://grumpy.website/post/0Vp0pSilq but the site is misrepresenting the state. That user's state is still "muted," the red line indicates that it is a client side mute (so the user who checked the mute box can't hear them, but everyone else can) while the mute icon without a red line indicates that the other user has muted themselves; they're not transmitting audio. There is a third state- Server Mutes turn the entire mute icon red and is a "far-end" mute. No one in the voice channel can hear that user and the user probably can't unmute themselves. Looking more at the site I feel like the point it's trying to convey would be much stronger if it went for a quality over quantity approach and/or proposed solutions to some of these problems. A lot of them seem to almost intentionally miss the point of the UI. For example, the airpods post[0] notes, "Want to listen to the podcast on your iPhone while playing a game on your iPad? Well tough luck using your AirPods for that," which is just completely false. Sticking to posts like this[1][2] would lead to a much higher quality website imo. [0]: https://grumpy.website/post/0VaJdRL-y https://grumpy.website/post/0VaJdRL-y [1]: https://grumpy.website/post/0VlYhfUMg https://grumpy.website/post/0VlYhfUMg [2]: https://grumpy.website/post/0VfEvLg0j https://grumpy.website/post/0VfEvLg0j
- mixedCase 5y ago
  The Discord mute icon having three states is no excuse for it being bad. Unmuted -> The mic, no diagonal line. User muted -> Red diagonal line. Server muted -> Could be the muted icon with a lock next to it; or the diagonal red line replaced by vertical bars like a jail cell; or even a cross instead of a diagonal, maybe within a circle for further distinction.
  - jackson1442 5y ago
    Those are still three states with just different shapes. If you hover the symbol it tells you what it is and if that changed it to your system tomorrow I’d still need to hover to figure out what everything means. Unless replaced by text, I don’t see how changing the icons that all mean some form of “muted” really does anything.
prox 5y ago
I post this everytime, but for the love of UX, even if your the most hardcore code/terminal junkie… and never see a user near your program…read the book called About Face : Essentials of Interaction Design!
cratermoon 5y ago
There's also https://userinyerface.com/ https://userinyerface.com/

by todfox 5y ago

chiph 5y ago

Thanks for that link. One related to this one just got me on DVD Netflix's payment settings site. https://grumpy.website/post/0VkVVuQ6t https://grumpy.website/post/0VkVVuQ6t There is no button to remove your card info. It had my old ZIP code and updating it wasn't working (it would still fail address verification). So to update the value, you are somehow expected to know to clear the field and then save, then enter the correct value and save a second time. Except it doesn't work.[0] What does work is entering a different credit card, saving it, then reentering your original card with the correct ZIP code.[1] So bad design with no affordances and a broken help function, lead to a long-time customer wanting to unsubscribe out of frustration. [0] Neither did the chat function to ask for help. I had to talk to a support person who told me how this was supposed to work. A phone call to support is an expensive cost to a business based on volume. [1] Which made me think they were storing extra info using my card number as a key. And that's not great.

andai 5y ago

This is hilarious, but I'm puzzled by his reaction to a hamburger menu: > Oh-oh. Drag-n-drop icon used for a dropdown menu - May 8, 2021 https://grumpy.website/post/0V_dyk3EP https://grumpy.website/post/0V_dyk3EP

tesseract 5y ago
Horizontal lines (or sometimes an array of dots) are sometimes used as a "grip" icon to represent reorderable list rows.
- andai 5y ago
  I know, I've used them in my own designs. It just sounded like he saw a hamburger menu now for the first time 5 weeks ago! Or maybe it is some kind of joke?
  - frereubu 5y ago
    This is the case for many people. Another explanation is that he was being empathetic.
  - craftinator 5y ago
    As a designer himself, he probably tries to approach design examinations from many different perspectives (we do this at work with new designs: if I was an 70 year old woman, what would I see here?) to find edge cases where the design doesn't work.
  - djur 5y ago
    Hamburger menu icons usually have a fixed position and are part of a header or something of that sort. Floating lines like that would always read as "drag grip" to me.
  - tacotacotaco 5y ago
    Everyone sees the hamburger icon for the first time. It certainly isn't obvious what it means. You need to decide what is more important, that your site look contemporary or that your users can find the information/product/service they are looking for. https://www.nngroup.com/articles/hamburger-menus/ https://www.nngroup.com/articles/hamburger-menus/
  - sroussey 5y ago
    We have found that people are afraid to mess things up, and don’t know what three lines means, so never click them. A lot more than you would think.
  - tomjakubowski 5y ago
    I don't think I'd seen a hamburger menu rendered on a list, for each item, before. Normally a "hamburger menu" appears once, probably at the top of the page, in some kind of navigation bar. In that context, that icon definitely reads "drag to re-order list item" to me.
OJFord 5y ago
You're only puzzled because of its ubiquity, and your accustom to it. Nothing about it inherently says 'opens a menu from the side'.
- andai 5y ago
  Late "edit": Turns out I'm the confused one! (Bit of sleep dep...) I thought this was the main menu for a page, just in a weird low position, but it's the menu that appears on hover for each item and in this context indeed would be interpreted as a drag handle. In this context perhaps something unambiguous like three vertical dots would have been better? Also I agree with you -- perhaps the three lines represent a pictogram of a list (vertically stacked menu items?). And the triple dot version is either a compacted version of the same, or a vertical ellipsis?
  - OJFord 5y ago
    Sure, but that's not an affordance. If it were vertical instead of horizontal lines for example, it'd be like a grip horizontal pulling.

lelanthran 5y ago

There used to be a Hall of Shame for GUIs on the web that I used to read around 2002 or thereabouts. Very similar to this, only for native programs.

mkr-hn 5y ago
Is it one of these? https://wiby.me/?q=hall+of+shame https://wiby.me/?q=hall+of+shame
- lelanthran 5y ago
  Yup! Wasted an hour there just now :-)

systemvoltage 5y ago

I tried reading the footer to get the contact information for on https://grumpy.website https://grumpy.website but it keeps doom-scrolling and only visible for a fraction of a second. What an irony. I dream of a day when we go back to pagination. No, not just pagination numbers on the bottom of the page to flip through pages, but also the URL should reflect that and be able to share the 7th page with someone using a link.

zorrolovsky 5y ago
For some experiences, content needs to be updated in page 1 (google is a good example). How would you then share page 7? that requirement could only be met if content was static (no updates) or the ordering of results was old to new. Am I missing something?
- systemvoltage 5y ago
  That's true. Pagination makes sense when it is static and not chronological, thanks for pointing that out. But, the problem still exists that I cannot get to the footer where there seems to be some contact information of the author :-)
  - zorrolovsky 5y ago
    You're right, the behaviour of the footer clearly creates a major usability issue. I personally dislike infinite scrolling with a passion. I can't see any big advantages and there are a lot of cons. I keep my hopes high that one day I will see it die... like Adobe Flash :)
- PoignardAzur 5y ago
  The classical solution is to have a "content before ID_OF_LAST_ITEM_ON_PREVIOUS_PAGE" url, though there isn't really a way to do that and also display page numbers on the bottom.
  - zorrolovsky 5y ago

jackson1442 5y ago

I can see how this one might be confusing- https://grumpy.website/post/0Vp0pSilq https://grumpy.website/post/0Vp0pSilq but the site is misrepresenting the state. That user's state is still "muted," the red line indicates that it is a client side mute (so the user who checked the mute box can't hear them, but everyone else can) while the mute icon without a red line indicates that the other user has muted themselves; they're not transmitting audio. There is a third state- Server Mutes turn the entire mute icon red and is a "far-end" mute. No one in the voice channel can hear that user and the user probably can't unmute themselves. Looking more at the site I feel like the point it's trying to convey would be much stronger if it went for a quality over quantity approach and/or proposed solutions to some of these problems. A lot of them seem to almost intentionally miss the point of the UI. For example, the airpods post[0] notes, "Want to listen to the podcast on your iPhone while playing a game on your iPad? Well tough luck using your AirPods for that," which is just completely false. Sticking to posts like this[1][2] would lead to a much higher quality website imo. [0]: https://grumpy.website/post/0VaJdRL-y https://grumpy.website/post/0VaJdRL-y [1]: https://grumpy.website/post/0VlYhfUMg https://grumpy.website/post/0VlYhfUMg [2]: https://grumpy.website/post/0VfEvLg0j https://grumpy.website/post/0VfEvLg0j

mixedCase 5y ago
The Discord mute icon having three states is no excuse for it being bad. Unmuted -> The mic, no diagonal line. User muted -> Red diagonal line. Server muted -> Could be the muted icon with a lock next to it; or the diagonal red line replaced by vertical bars like a jail cell; or even a cross instead of a diagonal, maybe within a circle for further distinction.
- jackson1442 5y ago
  Those are still three states with just different shapes. If you hover the symbol it tells you what it is and if that changed it to your system tomorrow I’d still need to hover to figure out what everything means. Unless replaced by text, I don’t see how changing the icons that all mean some form of “muted” really does anything.

prox 5y ago

I post this everytime, but for the love of UX, even if your the most hardcore code/terminal junkie… and never see a user near your program…read the book called About Face : Essentials of Interaction Design!

cratermoon 5y ago

There's also https://userinyerface.com/ https://userinyerface.com/