Common UI/UX mistakes devs make | Hacker News Reader

Common UI/UX mistakes devs make

twitter.com

120 pointsAkcium39 comments

> #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!!

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.

Did they block search completely or only Ctrl-F? Firefox and Chrome also have Ctrl-G and / that start the search.

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.

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.

> I bought a 34" monitor for a reason! Give me information density!

Indeed. Imagine an architect or a chip engineer or someone using some audio tool or a trader or someone using a spreadsheet working on a phone with "lost of white space" in the UI.

I understand that people reading tweets and watching TikTok videos may like "lots of whitespace" but anybody doing real work need information density.

Agreed! Gratuitous whitespace is a signal. A classic example is purchasing a full page ad in a newspaper with a single sentence in the middle. The signal is basically "look, we're throwing away all this expensive real-estate to tell you this one simple thing." I don't mind this occasionally, but the prestige signaling has leaked into everyday UI design trends. In my view, information dense UIs would be unusable without adding carefully reasoned whitespace.

And that padding is in addition to a sidebar that occupies 40% of page width.

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.

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?

Don't use it myself but I appreciate the alternate viewpoint, thanks!

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

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

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.

Oh yes! This is a good one!

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

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.

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.

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.

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.

These are all based on “personal taste”.

I prefer Nielson Norman group articles for authoritative UX/UI tips: https://www.nngroup.com/articles/

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

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

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

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.

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.

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

#33: using Twitter for long-form content

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

I got used to twitter threads, it's like when you get one portion of information per tweet

It probably helps that writing copy on the Internet has mostly devolved into Twitter style single-sentence paragraphs.

>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

Regardless, all you need to do is scroll down. It's clearer than HN's trees.

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.

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.

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.

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.

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.

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.

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.

Reading is free. Sell longer tweets to those who want more attention.

Reply on news.ycombinator.com