6 ms·

How to fix a bad user interface

127 points by kindachris 11y ago

williswee 11y ago
This is a must read for product managers and designers.
- kagamine 11y ago
  And programmers. You know, the people who often have a lot of control over the final product in many companies.
deleted 11y ago
[deleted]
Terr_ 11y ago
Alternately, the UI is awkward because it's been micromanaged and bikeshedded to the point where it duplicates a worrying amount of domain ... Unreliably.
louhike 11y ago
I got an error for the examples telling me than no video with a managed format has been found.
andys627 11y ago
This is stuff that gets left out a lot by hurried programmers (like me). A simple unceremonious <p>Loading...</p> at the top of the page is better than nothing.
- atom-morgan 11y ago
  At a bare minimum this is all I need. Your loading animation may be aesthetically pleasing but in the end all I really want is feedback.
firasd 11y ago
This is so important. Many people create async requests and overlook the state indicators. This seems harmless until the user doesn't know they need to wait for something to load, messing up their whole understanding of the widget. Related article on how working with React (UI from data) can help you consider all your states: Pure UI http://rauchg.com/2015/pure-ui/ http://rauchg.com/2015/pure-ui/
eCa 11y ago
> For a second, I get scared. [...] Where are my movies? I have a similar situation in Win8.1. I have an external hard drive that sometimes go to sleep. When I wake it up by trying to view its contents in Explorer, Windows shows a friendly "No files in this folder" message while the disk spins up. It should know that it doesn't know that.
- StuffMaster 11y ago
  Lol, that's probably where in the past explorer would just lock up. They probably just converted a spinlock into "return null". I remember sometimes XP would do a full, multi-minute lockup (including keyboard) when the C drive was trying to recover a bad block.
- frik 11y ago
  Win7 shows a green progress bar in the address bar.
- Coincoin 11y ago
  Oh yes! The hard drive spin up delay always scares the shit out of me. I always think the drive crashed.
will_pseudonym 11y ago
Really looking forward to this book! I'm constantly blown away by bad UI, and I'm wondering to see what I can learn, and what I might be able to teach others. Anyone have ideas for additional learning/connecting with others in this area? I am about to start reading "The Design of Everyday Things".
- jordanlev 11y ago
  Joel Spolsky's "User Interface Design for Programmers" is phenomenal, and available freely online (!): http://www.joelonsoftware.com/uibook/fog0000000249.html http://www.joelonsoftware.com/uibook/fog0000000249.html If you build websites, also check out Steve Krug's "Don't Make Me Think": http://www.sensible.com/dmmt.html http://www.sensible.com/dmmt.html
  - BatFastard 11y ago
    Thanks for the links to great books.
pbhjpbhj 11y ago
I disagree with his objection to using tags and other tertiary UI for onboarding, I nearly always find that helpful. Indeed he appears to disagree with it himself: >"Instead, telling your customer the exact button to press and why they should press it is a much more helpful prospect." // I think I also disagree on the false-feedback he suggests is good. If you give immediate UI change on a like showing that it has been registered and then you can't register it you find that user experience can break trust - next time I go to that page/post/comment I see my "like" is missing yet the UI showed it had been registered. Surely this is a place for an intermediate state? Similarly with the skeleton screens, it can lead to a situation like the one he has with his videos being missing. The page changes but it's not got content, but there's no loading indicator as there is elsewhere on the site/in the app - so is it loading, did it break? We're left guessing about what is happening. Petty complaints follow: >"Awkward UI is a missing a loading indicator." // Oops. There are always errata! Surprised to see the segment on loading indicators avoid using the word "feedback". >"Even if you're creating weather apps (cue Dribbble joke), one state won't cut it." // Will the targeted readership understand this reference, I don't. I even went to Dribbble.com for illumination but none came. I see a lot of missing [obj] which appear to be mostly/all "" being used as a section marker. It appears not to exist in the chosen font on my system though? [latest FF on WinXP]
- TheOtherHobbes 11y ago
  Recently relevant, for those who missed it: https://blog.intercom.io/the-dribbblisation-of-design/ https://blog.intercom.io/the-dribbblisation-of-design/
- clay_to_n 11y ago
  I'd love to see more advice regarding optimistic state and when it should be used. For Instagram or Facebook, it seems worth it to give them satisfaction even while the request is processing - if they're lied to, it's not a big deal. In a financial app, this isn't the case. Anyone have any articles or resources about this? Is there ever a place for optimistic interfaces in financial or otherwise-serious apps?
nilved 11y ago
Not going to take any UI advice from somebody with pop-ups to sign up for a newsletter.
- oxguy3 11y ago
  Yeah really, those pop-ups were obtrusive as hell on mobile, and forced horizontal scrolling.
vitd 11y ago
Some of this advice is really good, but some of it is terrible. The section on gamifying user interaction is absolute garbage. I'm not "80% done filling in my LinkedIn Profile." I'm 100% done, but LinkedIn just wants me to give it more for its benefit. I will never give it the remaining information. It isn't encouraging me to do the remaining 20%, it's just annoying me that LinkedIn can't take "No" for an answer. Also, I object to breaking the interface down into "screens". It encourages creating modal apps. Thinking about working in Photoshop, for example, while there are modes that depend on the tool you're using, you aren't in a different screen for every thing you're doing. (In fact, Lightroom does sort of have that problem, and it's why I don't use Lightroom.)
- greggarious 11y ago
  I guess you could call that nudging, but nudging people to give away their personal information doesn't bring up the same warm fuzzy feelings as "gamification"
- clay_to_n 11y ago
  On your second point: all of these examples were mobile apps, where it is hard to get around designing in "screens". I don't know what Adobe's mobile Photoshop is like, but I'd hope it's more modal and screen-based than their desktop application, considering it's used on a phone.
sogen 11y ago
Looks like a rehash of Luke W's previous articles http://www.lukew.com/ff/ http://www.lukew.com/ff/ He even took Luke W's pics of Luke W's Polar app...

127 points by kindachris 11y ago

williswee 11y ago

This is a must read for product managers and designers.

kagamine 11y ago
And programmers. You know, the people who often have a lot of control over the final product in many companies.

deleted 11y ago

[deleted]

Terr_ 11y ago

Alternately, the UI is awkward because it's been micromanaged and bikeshedded to the point where it duplicates a worrying amount of domain ... Unreliably.

louhike 11y ago

I got an error for the examples telling me than no video with a managed format has been found.

andys627 11y ago

This is stuff that gets left out a lot by hurried programmers (like me). A simple unceremonious <p>Loading...</p> at the top of the page is better than nothing.

atom-morgan 11y ago
At a bare minimum this is all I need. Your loading animation may be aesthetically pleasing but in the end all I really want is feedback.

firasd 11y ago

This is so important. Many people create async requests and overlook the state indicators. This seems harmless until the user doesn't know they need to wait for something to load, messing up their whole understanding of the widget. Related article on how working with React (UI from data) can help you consider all your states: Pure UI http://rauchg.com/2015/pure-ui/ http://rauchg.com/2015/pure-ui/

eCa 11y ago

> For a second, I get scared. [...] Where are my movies? I have a similar situation in Win8.1. I have an external hard drive that sometimes go to sleep. When I wake it up by trying to view its contents in Explorer, Windows shows a friendly "No files in this folder" message while the disk spins up. It should know that it doesn't know that.

StuffMaster 11y ago
Lol, that's probably where in the past explorer would just lock up. They probably just converted a spinlock into "return null". I remember sometimes XP would do a full, multi-minute lockup (including keyboard) when the C drive was trying to recover a bad block.
frik 11y ago
Win7 shows a green progress bar in the address bar.
Coincoin 11y ago
Oh yes! The hard drive spin up delay always scares the shit out of me. I always think the drive crashed.

will_pseudonym 11y ago

Really looking forward to this book! I'm constantly blown away by bad UI, and I'm wondering to see what I can learn, and what I might be able to teach others. Anyone have ideas for additional learning/connecting with others in this area? I am about to start reading "The Design of Everyday Things".

jordanlev 11y ago
Joel Spolsky's "User Interface Design for Programmers" is phenomenal, and available freely online (!): http://www.joelonsoftware.com/uibook/fog0000000249.html http://www.joelonsoftware.com/uibook/fog0000000249.html If you build websites, also check out Steve Krug's "Don't Make Me Think": http://www.sensible.com/dmmt.html http://www.sensible.com/dmmt.html
- BatFastard 11y ago
  Thanks for the links to great books.

pbhjpbhj 11y ago

I disagree with his objection to using tags and other tertiary UI for onboarding, I nearly always find that helpful. Indeed he appears to disagree with it himself: >"Instead, telling your customer the exact button to press and why they should press it is a much more helpful prospect." // I think I also disagree on the false-feedback he suggests is good. If you give immediate UI change on a like showing that it has been registered and then you can't register it you find that user experience can break trust - next time I go to that page/post/comment I see my "like" is missing yet the UI showed it had been registered. Surely this is a place for an intermediate state? Similarly with the skeleton screens, it can lead to a situation like the one he has with his videos being missing. The page changes but it's not got content, but there's no loading indicator as there is elsewhere on the site/in the app - so is it loading, did it break? We're left guessing about what is happening. Petty complaints follow: >"Awkward UI is a missing a loading indicator." // Oops. There are always errata! Surprised to see the segment on loading indicators avoid using the word "feedback". >"Even if you're creating weather apps (cue Dribbble joke), one state won't cut it." // Will the targeted readership understand this reference, I don't. I even went to Dribbble.com for illumination but none came. I see a lot of missing [obj] which appear to be mostly/all "" being used as a section marker. It appears not to exist in the chosen font on my system though? [latest FF on WinXP]

TheOtherHobbes 11y ago
Recently relevant, for those who missed it: https://blog.intercom.io/the-dribbblisation-of-design/ https://blog.intercom.io/the-dribbblisation-of-design/
clay_to_n 11y ago
I'd love to see more advice regarding optimistic state and when it should be used. For Instagram or Facebook, it seems worth it to give them satisfaction even while the request is processing - if they're lied to, it's not a big deal. In a financial app, this isn't the case. Anyone have any articles or resources about this? Is there ever a place for optimistic interfaces in financial or otherwise-serious apps?

nilved 11y ago

Not going to take any UI advice from somebody with pop-ups to sign up for a newsletter.

oxguy3 11y ago
Yeah really, those pop-ups were obtrusive as hell on mobile, and forced horizontal scrolling.

vitd 11y ago

Some of this advice is really good, but some of it is terrible. The section on gamifying user interaction is absolute garbage. I'm not "80% done filling in my LinkedIn Profile." I'm 100% done, but LinkedIn just wants me to give it more for its benefit. I will never give it the remaining information. It isn't encouraging me to do the remaining 20%, it's just annoying me that LinkedIn can't take "No" for an answer. Also, I object to breaking the interface down into "screens". It encourages creating modal apps. Thinking about working in Photoshop, for example, while there are modes that depend on the tool you're using, you aren't in a different screen for every thing you're doing. (In fact, Lightroom does sort of have that problem, and it's why I don't use Lightroom.)

greggarious 11y ago
I guess you could call that nudging, but nudging people to give away their personal information doesn't bring up the same warm fuzzy feelings as "gamification"
clay_to_n 11y ago
On your second point: all of these examples were mobile apps, where it is hard to get around designing in "screens". I don't know what Adobe's mobile Photoshop is like, but I'd hope it's more modal and screen-based than their desktop application, considering it's used on a phone.

sogen 11y ago

Looks like a rehash of Luke W's previous articles http://www.lukew.com/ff/ http://www.lukew.com/ff/ He even took Luke W's pics of Luke W's Polar app...