Hacker News Reader

Comment by thatsenough | Hacker News Reader

> This shot by Dribbble user alexplyuto gained over 3000 likes and pushed the trend forward. [1]

That mockup is aesthetically pleasing, but from a usability perspective it's terrible: every UI element looks like a button. The progress bar (?) looks like a slider. How do users know which elements they're supposed to interact with? Why do we make the same mistakes over and over?

[1] https://miro.medium.com/max/3200/1*gza8htfpZ-5eDabA7_kTJw.pn...

View on HN

This picture immediately reminded me of this optical illusion:

https://www.thehits.co.nz/media/7538347/untitled-1.jpg

That progress bar doesn't even make sense. For "cash available"? What kind of progress bar makes sense for that? Having available cash in some shitty company's account is not a goal you want to reach.

It is unfortunate that people focus on such superficial aspects of design, especially in UI design. When there's some trend showing up, you'll see countless people talking bullshit about aesthetics and how pleasing things look, and people get so wrapped up in it that they ignore any sense of usability.

Do you look at a thermometer and ask "Who thought a progress bar made sense for the weather? 130 degrees should not be a goal for climate change!" and try to shit on designers for ignoring usability or do you just read it as a meter to see what the temperature is?

Not every bar is a progress bar.

Your pre-existing balance is $100. You just deposited another $100, but it's not yet available. You have $100 available, so the "progress bar" is at 50%.

Not saying I think it's useful to show as a progress bar, but it's not abnormal.

> That progress bar doesn't even make sense. For "cash available"? What kind of progress bar makes sense for that?

Savings goal. Credit limit. Mortgage.

It would be badly named, but it's not completely stupid.

I interpret the credit limit label right below to be the label if the progress bar.

That's exactly what it is; off to the right it says "$220 / $1000", about 1/5th, which is where the bar is.

Is there a good, up to date source on the relevant UI/UX research? I went looking for some the other day and found a combination of opinion, dogma and unreplicated research.

My experience is similar, though nngroup.com has some reports that look like an okay research (though unreplicated as well). NASA's color graphics pages [1] seem to be based at least partially on research, contain further references, and generally seem good to me, but they are focused primarily on accessibility (and similar to WCAG). Searching for relevant papers on CiteSeerX, Google Scholar, and so on usually yields surprisingly little.

[1] https://colorusage.arc.nasa.gov/issues.php

Text contrasts (or, rather, lack of those: red on dark blue, light grey on lighter grey, dark grey on dark orange) are appalling too, as are the tiny font sizes. The website on which it is written has similar issues (and a sticky header in addition to that); it is rather strange to read about subtle differences in UI aesthetics while failures to show comfortably legible texts and indicate element purposes are so common.

Accessibility may be an issue as well. All those subtle shadows defining the ui elements are not clear to an older or limited vision audience.

> That mockup is aesthetically pleasing

No it isn't; I nearly puked in my mouth from looking at that.

Reply on news.ycombinator.com