6 ms·

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

> 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.png https://miro.medium.com/max/3200/1*gza8htfpZ-5eDabA7_kTJw.pn...

jimbobimbo 7y ago
This picture immediately reminded me of this optical illusion: https://www.thehits.co.nz/media/7538347/untitled-1.jpg https://www.thehits.co.nz/media/7538347/untitled-1.jpg
ScottFree 7y ago
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.
- itsallideologyj 7y ago
  No because a few years ago it was shown to be emotional ideology. Personally, I loath graphical UIs I am expected to interact with. And it isn’t just because of bad designers. It’s the melding of data and functionality like Oop enables. It’s a straight up dumb paradigm. There’s been so many cases, before we were building modern intelligent helpful UI, where GUI widgets functionality changes as the data changes. I have to undo and separate out an idea or rework something because the GUI wasn’t able to consider the nuance I had in mind. Desktop computing software design influences of old need to die. Trying to make people productive by giving them buttons that are just wrappers to functions is a crap way to make office life more productive. Programmers spend all day editing text. Just make nicely formatted text record standards for our users and show them how to combine those ideas, feed it into a machine that presents a nice result. I did this once at a job years ago. Everyone loved it. Now I get to copy paste yaml and tell people there is fuck all I can do about Gmail bring shit GUIs make people waste time trying to deal with problems the developer was never tasked with solving.
- defanor 7y ago
  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 https://colorusage.arc.nasa.gov/issues.php
_JC_Denton 7y ago
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.
fragsworth 7y ago
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.
- viraptor 7y ago
  > 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.
  - delusional 7y ago
    I interpret the credit limit label right below to be the label if the progress bar.
    - Izkata 7y ago
      That's exactly what it is; off to the right it says "$220 / $1000", about 1/5th, which is where the bar is.
- zamadatix 7y ago
  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.
- allworknoplay 7y ago
  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.
defanor 7y ago
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.
a1369209993 7y ago
> That mockup is aesthetically pleasing No it isn't; I nearly puked in my mouth from looking at that.

jimbobimbo 7y ago

This picture immediately reminded me of this optical illusion: https://www.thehits.co.nz/media/7538347/untitled-1.jpg https://www.thehits.co.nz/media/7538347/untitled-1.jpg

ScottFree 7y ago

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.

itsallideologyj 7y ago
No because a few years ago it was shown to be emotional ideology. Personally, I loath graphical UIs I am expected to interact with. And it isn’t just because of bad designers. It’s the melding of data and functionality like Oop enables. It’s a straight up dumb paradigm. There’s been so many cases, before we were building modern intelligent helpful UI, where GUI widgets functionality changes as the data changes. I have to undo and separate out an idea or rework something because the GUI wasn’t able to consider the nuance I had in mind. Desktop computing software design influences of old need to die. Trying to make people productive by giving them buttons that are just wrappers to functions is a crap way to make office life more productive. Programmers spend all day editing text. Just make nicely formatted text record standards for our users and show them how to combine those ideas, feed it into a machine that presents a nice result. I did this once at a job years ago. Everyone loved it. Now I get to copy paste yaml and tell people there is fuck all I can do about Gmail bring shit GUIs make people waste time trying to deal with problems the developer was never tasked with solving.
defanor 7y ago
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 https://colorusage.arc.nasa.gov/issues.php

_JC_Denton 7y ago

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.

fragsworth 7y ago

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.

viraptor 7y ago
> 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.
- delusional 7y ago
  I interpret the credit limit label right below to be the label if the progress bar.
  - Izkata 7y ago
    That's exactly what it is; off to the right it says "$220 / $1000", about 1/5th, which is where the bar is.
zamadatix 7y ago
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.
allworknoplay 7y ago
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.

defanor 7y ago

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.

a1369209993 7y ago

> That mockup is aesthetically pleasing No it isn't; I nearly puked in my mouth from looking at that.