6 ms·

Common UI/UX mistakes devs make

120 points by Akcium 5y ago

cbm-vic-20 5y ago
#33: using Twitter for long-form content
- pbronez 5y ago
  https://threadreaderapp.com/thread/1421014957110579203.html https://threadreaderapp.com/thread/1421014957110579203.html
- Akcium 5y ago
  I got used to twitter threads, it's like when you get one portion of information per tweet
  - rchaud 5y ago
    It probably helps that writing copy on the Internet has mostly devolved into Twitter style single-sentence paragraphs.
- thrwyoilarticle 5y ago
  >Please don't complain about website formatting, back-button breakage, and similar annoyances. They're too common to be interesting. Exception: when the author is present. Then friendly feedback might be helpful. https://news.ycombinator.com/newsguidelines.html https://news.ycombinator.com/newsguidelines.html Regardless, all you need to do is scroll down. It's clearer than HN's trees.
  - burnished 5y ago
    It's not quite as clear that the rule applies when the subject under discussion is UI/UX right? Because it is interesting when some one who is telling you about their hot line on truth makes a mistake.
    - thrwyoilarticle 5y ago
      It's not their site, it's not the topic that relates to the title, and it's a discussion that this website has had hundreds of times before, equally as fruitlessly.
      - burnished 5y ago
        Sure, not their site, but their choice to publish there regardless? I think it is a valid line of criticism and distinct from the rule you quote, which I understand to be more about stopping off-topic nit-picking.
      - cjaybo 5y ago
        To me, it seems perfectly relevant to the OP, since the whole point of the thread is to give consideration to the UX. If the thread were about anything else, I'd agree with you.
- rchaud 5y ago
  This used to upset me as well, but I now think of it as reflecting the reality of the modern Internet. The post is on Twitter because the intention is for you to like and follow. Had you seen it on a blog post, would you have typed in your email address into the inevitable popup modal? Gaining some Twitter followers and a bunch of retweets is better than gaining 0 emails from a hard-to-discover blog post.
  - kevin_thibedeau 5y ago
    It demonstrates a business opportunity they're not taking advantage of. They don't have to cater to SMS any more. Sell long form blogging as a premium feature.
    - rchaud 5y ago
      Perhaps they have attempted to take advantage in the past and it turned out to be a dead end? Information is cheap and the cost to reproduce it is zero. This UI/UX stuff isn't info people are going to pay for, because it's available elsewhere for free.
      - kevin_thibedeau 5y ago
        Reading is free. Sell longer tweets to those who want more attention.
benrbray 5y ago
> #8 Not enough whitespace If anything software has TOO MUCH whitespace these days. It seems like with every UI update, everything gets 10% more padding, and I have to scroll more and more to see something that used to fit on one page. I bought a 34" monitor for a reason! Give me information density!!
- bxparks 5y ago
  Completely agree. My online bank redesigned the Bill Pay page with so much whitespace that I can see only one payee on a 14" laptop screen. They also disabled Ctrl-F searching so that I cannot quickly find the payee that I want. Instead, I have scroll up to the top of the page to use their tiny little search box, which causes a server request and a redraw of the list, which adds latency and friction to the whole process. Their old design may have been less pretty and slick, but it was far more usable and efficient.
  - Matrixik 5y ago
    Did they block search completely or only Ctrl-F? Firefox and Chrome also have Ctrl-G and / that start the search.
  - Cieplak 5y ago
    If you click the URL bar, then press ctrl-F / cmd-F, browser-native search should work. In my experience, this works around sites that override those keyboard shortcuts in JS to implement custom search functionality.
  - azalemeth 5y ago
    My oldest bank account has a website that used to be very accessible, fast, and widely used, with several 3rd party parsing libraries on GitHub that would, e.g. scrape the whole lot and put it in a CSV for you. They then "modernised" it. The whole thing is a JavaScript nightmare, with only one static page, over-ridden OS shortcuts and a very confused browser autocomplete -- oh, and a ton of tracking tags. A grease monkey script and uBlock bring it back to useable, but I'm still silently shopping for new banks entirely because of how utterly ridiculous and user hostile it is.
AnIdiotOnTheNet 5y ago
> Tip #24 - Increase clickable area > When the clickable area is small it's hard for users to hit the element. > You can add an invisible area (usually made with paddings) for making it easier. Or stop making buttons look like not-buttons and make the completely visible button bigger.
- Akcium 5y ago
  Sometimes indeed people make something that supposed to be a button, but it's impossible to guess that it's button. But this tip is more about links I'd say, or maybe controls in slide gallery and stuff like that
mariodiana 5y ago
Number 9, "Poor Validation," links to a discussion that encourages a fad that I can't get behind: namely, don't disable the submit button. As a long time Mac user, my understanding has always been that you should not allow the user to do anything you're going to flag an error for. In the discussion linked to, the example given falls apart in my mind because every one of the fields pictured omits placeholder text, and the placeholder text could easily say "Required." (That's just one solution.) https://twitter.com/vponamariov/status/1400388907401977857 https://twitter.com/vponamariov/status/1400388907401977857 I could maybe see a counter-argument in the event of a long form. But I would say that long forms may, in most cases, be a bad idea in the first place.
- jakelazaroff 5y ago
  The counter-argument is that it’s often unclear why a control is disabled, and an error message can help you figure that out. Even if you label a field “required”, what if the user accidentally skips it without noticing? Specifically highlighting the error might be more obvious than having the user scan the whole form for something that looks wrong.
  - Arrath 5y ago
    IMO the best forms are the one where, if you hit the submit button with something incomplete, it auto-scrolls back to the problem field and highlights it for you.
- Zababa 5y ago
  It's funny because the first advice is to not group all the problems together near the button, and then the second advice is to not disabling it because the user could have missed something higher up. It sounds like they're fixing a problem that they themselves created. The other advice seems solid though, I especially appreciate the part about adding an icon for colorblind people.
psweber 5y ago
It doesn't say a word about devs. This could probably use a title change. It's gonna make everyone defensive.
systemvoltage 5y ago
These are all based on “personal taste”. I prefer Nielson Norman group articles for authoritative UX/UI tips: https://www.nngroup.com/articles/ https://www.nngroup.com/articles/
thamer 5y ago
My pet peeve: structuring their UI to match their database schema. This is one of the most common issues for developers who build UIs or forms – anything that takes user input – and both one of the most consequential and difficult to address. You'll often find forms that closely match the structure of the underlying database used to store the data being entered. This leads to incomplete lists of titles or countries, form fields that don't accept non-ASCII or long or short names, that have constraints on fields that don't match real-world inputs, and more. The user interface should be built for the user first. How you structure your tables is none of their concern, and neither is your database schema.
- geoduck14 5y ago
  Oh yes! This is a good one!
spamizbad 5y ago
I feel like most of these mistakes are made by designers, not developers.
- arp242 5y ago
  Specifically: graphic designers. There certainly are lots of competent and skilful graphic designers out there, but also a lot of people who see designing a web page like as some sort of interactive museum piece. I've had entire discussions and conflicts with designers because I changed the colours a bit so it's actually, you know, readable.
- lovegoblin 5y ago
  I think the idea here is that people who are designers first are much less likely to make these beginner mistakes - but someone who's primarily a dev and putting together a simple web page or whatever might not realize they're make mistakes with the basics.
rkagerer 5y ago
Can we talk about the UI tragedy of using Twitter to publish something like this? Where each paragraph is surrounded by boilerplate distraction akin to scrolling through ads. Where I'm expected to hunt for a magical link somewhere to reveal the rest of the article. Where instead of putting the user first, the author prioritized his own self-promotion (like/share). Online, your choice of medium reflects on you like your clothes do in person. This may not be a popular opinion but I simply stop reading when I encounter long-form Twitter threads.
- saurik 5y ago
  I am using the Twitter app, as I imagine are most of the target audience of this person (whether either of us believe this is a good thing). There is no need to "hunt for a magic link somewhere to reveal the rest of the article": you just scroll down. Each paragraph is surrounded by.a bit of boilerplate, but it isn't at all like ads... it is all functional mechanisms that allow people to like and share individual thoughts, which is actually a powerful way to discuss ideas. (That said, I could totally appreciate a mode that let that information be hidden until you click.) You claim this is about self-promotion, but I think most users of Twitter see this as an opportunity for collaboration: a comments section on steroids that lets a discussion branch out in any number of separate directions. Maybe it would be useful to think of Twitter like a better way to publish presentation slides--another non-article format some people like to publish information in--or something?
  - rkagerer 5y ago
    Don't use it myself but I appreciate the alternate viewpoint, thanks!
binkHN 5y ago
> #18 Layout shifts This is the bane of the “modern” web. With ads constantly, and stupidly, jumping in and around and shifting the actual content, sheer happiness is my browser’s reader mode, which makes the content consumable again. Yay.
andrei_says_ 5y ago
https://threadreaderapp.com/thread/1421014957110579203.html https://threadreaderapp.com/thread/1421014957110579203.html

120 points by Akcium 5y ago

cbm-vic-20 5y ago

#33: using Twitter for long-form content

pbronez 5y ago
https://threadreaderapp.com/thread/1421014957110579203.html https://threadreaderapp.com/thread/1421014957110579203.html
Akcium 5y ago
I got used to twitter threads, it's like when you get one portion of information per tweet
- rchaud 5y ago
  It probably helps that writing copy on the Internet has mostly devolved into Twitter style single-sentence paragraphs.
thrwyoilarticle 5y ago
>Please don't complain about website formatting, back-button breakage, and similar annoyances. They're too common to be interesting. Exception: when the author is present. Then friendly feedback might be helpful. https://news.ycombinator.com/newsguidelines.html https://news.ycombinator.com/newsguidelines.html Regardless, all you need to do is scroll down. It's clearer than HN's trees.
- burnished 5y ago
  It's not quite as clear that the rule applies when the subject under discussion is UI/UX right? Because it is interesting when some one who is telling you about their hot line on truth makes a mistake.
  - thrwyoilarticle 5y ago
    It's not their site, it's not the topic that relates to the title, and it's a discussion that this website has had hundreds of times before, equally as fruitlessly.
    - burnished 5y ago
      Sure, not their site, but their choice to publish there regardless? I think it is a valid line of criticism and distinct from the rule you quote, which I understand to be more about stopping off-topic nit-picking.
    - cjaybo 5y ago
      To me, it seems perfectly relevant to the OP, since the whole point of the thread is to give consideration to the UX. If the thread were about anything else, I'd agree with you.
rchaud 5y ago
This used to upset me as well, but I now think of it as reflecting the reality of the modern Internet. The post is on Twitter because the intention is for you to like and follow. Had you seen it on a blog post, would you have typed in your email address into the inevitable popup modal? Gaining some Twitter followers and a bunch of retweets is better than gaining 0 emails from a hard-to-discover blog post.
- kevin_thibedeau 5y ago
  It demonstrates a business opportunity they're not taking advantage of. They don't have to cater to SMS any more. Sell long form blogging as a premium feature.
  - rchaud 5y ago
    Perhaps they have attempted to take advantage in the past and it turned out to be a dead end? Information is cheap and the cost to reproduce it is zero. This UI/UX stuff isn't info people are going to pay for, because it's available elsewhere for free.
    - kevin_thibedeau 5y ago
      Reading is free. Sell longer tweets to those who want more attention.

benrbray 5y ago

> #8 Not enough whitespace If anything software has TOO MUCH whitespace these days. It seems like with every UI update, everything gets 10% more padding, and I have to scroll more and more to see something that used to fit on one page. I bought a 34" monitor for a reason! Give me information density!!

bxparks 5y ago
Completely agree. My online bank redesigned the Bill Pay page with so much whitespace that I can see only one payee on a 14" laptop screen. They also disabled Ctrl-F searching so that I cannot quickly find the payee that I want. Instead, I have scroll up to the top of the page to use their tiny little search box, which causes a server request and a redraw of the list, which adds latency and friction to the whole process. Their old design may have been less pretty and slick, but it was far more usable and efficient.
- Matrixik 5y ago
  Did they block search completely or only Ctrl-F? Firefox and Chrome also have Ctrl-G and / that start the search.
- Cieplak 5y ago
  If you click the URL bar, then press ctrl-F / cmd-F, browser-native search should work. In my experience, this works around sites that override those keyboard shortcuts in JS to implement custom search functionality.
- azalemeth 5y ago
  My oldest bank account has a website that used to be very accessible, fast, and widely used, with several 3rd party parsing libraries on GitHub that would, e.g. scrape the whole lot and put it in a CSV for you. They then "modernised" it. The whole thing is a JavaScript nightmare, with only one static page, over-ridden OS shortcuts and a very confused browser autocomplete -- oh, and a ton of tracking tags. A grease monkey script and uBlock bring it back to useable, but I'm still silently shopping for new banks entirely because of how utterly ridiculous and user hostile it is.

AnIdiotOnTheNet 5y ago

> Tip #24 - Increase clickable area > When the clickable area is small it's hard for users to hit the element. > You can add an invisible area (usually made with paddings) for making it easier. Or stop making buttons look like not-buttons and make the completely visible button bigger.

Akcium 5y ago
Sometimes indeed people make something that supposed to be a button, but it's impossible to guess that it's button. But this tip is more about links I'd say, or maybe controls in slide gallery and stuff like that

mariodiana 5y ago

Number 9, "Poor Validation," links to a discussion that encourages a fad that I can't get behind: namely, don't disable the submit button. As a long time Mac user, my understanding has always been that you should not allow the user to do anything you're going to flag an error for. In the discussion linked to, the example given falls apart in my mind because every one of the fields pictured omits placeholder text, and the placeholder text could easily say "Required." (That's just one solution.) https://twitter.com/vponamariov/status/1400388907401977857 https://twitter.com/vponamariov/status/1400388907401977857 I could maybe see a counter-argument in the event of a long form. But I would say that long forms may, in most cases, be a bad idea in the first place.

jakelazaroff 5y ago
The counter-argument is that it’s often unclear why a control is disabled, and an error message can help you figure that out. Even if you label a field “required”, what if the user accidentally skips it without noticing? Specifically highlighting the error might be more obvious than having the user scan the whole form for something that looks wrong.
- Arrath 5y ago
  IMO the best forms are the one where, if you hit the submit button with something incomplete, it auto-scrolls back to the problem field and highlights it for you.
Zababa 5y ago
It's funny because the first advice is to not group all the problems together near the button, and then the second advice is to not disabling it because the user could have missed something higher up. It sounds like they're fixing a problem that they themselves created. The other advice seems solid though, I especially appreciate the part about adding an icon for colorblind people.

psweber 5y ago

It doesn't say a word about devs. This could probably use a title change. It's gonna make everyone defensive.

systemvoltage 5y ago

These are all based on “personal taste”. I prefer Nielson Norman group articles for authoritative UX/UI tips: https://www.nngroup.com/articles/ https://www.nngroup.com/articles/

thamer 5y ago

My pet peeve: structuring their UI to match their database schema. This is one of the most common issues for developers who build UIs or forms – anything that takes user input – and both one of the most consequential and difficult to address. You'll often find forms that closely match the structure of the underlying database used to store the data being entered. This leads to incomplete lists of titles or countries, form fields that don't accept non-ASCII or long or short names, that have constraints on fields that don't match real-world inputs, and more. The user interface should be built for the user first. How you structure your tables is none of their concern, and neither is your database schema.

geoduck14 5y ago
Oh yes! This is a good one!

spamizbad 5y ago

I feel like most of these mistakes are made by designers, not developers.

arp242 5y ago
Specifically: graphic designers. There certainly are lots of competent and skilful graphic designers out there, but also a lot of people who see designing a web page like as some sort of interactive museum piece. I've had entire discussions and conflicts with designers because I changed the colours a bit so it's actually, you know, readable.
lovegoblin 5y ago
I think the idea here is that people who are designers first are much less likely to make these beginner mistakes - but someone who's primarily a dev and putting together a simple web page or whatever might not realize they're make mistakes with the basics.

rkagerer 5y ago

Can we talk about the UI tragedy of using Twitter to publish something like this? Where each paragraph is surrounded by boilerplate distraction akin to scrolling through ads. Where I'm expected to hunt for a magical link somewhere to reveal the rest of the article. Where instead of putting the user first, the author prioritized his own self-promotion (like/share). Online, your choice of medium reflects on you like your clothes do in person. This may not be a popular opinion but I simply stop reading when I encounter long-form Twitter threads.

saurik 5y ago
I am using the Twitter app, as I imagine are most of the target audience of this person (whether either of us believe this is a good thing). There is no need to "hunt for a magic link somewhere to reveal the rest of the article": you just scroll down. Each paragraph is surrounded by.a bit of boilerplate, but it isn't at all like ads... it is all functional mechanisms that allow people to like and share individual thoughts, which is actually a powerful way to discuss ideas. (That said, I could totally appreciate a mode that let that information be hidden until you click.) You claim this is about self-promotion, but I think most users of Twitter see this as an opportunity for collaboration: a comments section on steroids that lets a discussion branch out in any number of separate directions. Maybe it would be useful to think of Twitter like a better way to publish presentation slides--another non-article format some people like to publish information in--or something?
- rkagerer 5y ago
  Don't use it myself but I appreciate the alternate viewpoint, thanks!

binkHN 5y ago

> #18 Layout shifts This is the bane of the “modern” web. With ads constantly, and stupidly, jumping in and around and shifting the actual content, sheer happiness is my browser’s reader mode, which makes the content consumable again. Yay.

andrei_says_ 5y ago

https://threadreaderapp.com/thread/1421014957110579203.html https://threadreaderapp.com/thread/1421014957110579203.html