How to fix a bad user interface

http://scotthurff.com/posts/why-your-user-interface-is-awkward-youre-ignoring-the-ui-stack

by kindachris • 11 years ago

127 23 11 years ago

scotthurff.com

williswee• 11 years ago

This is a must read for product managers and designers.

kagamine• 11 years ago

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

Terr_• 11 years 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• 11 years ago

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

andys627• 11 years 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• 11 years 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• 11 years 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/

eCa• 11 years 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.

frik• 11 years ago

Win7 shows a green progress bar in the address bar.

Coincoin• 11 years ago

Oh yes! The hard drive spin up delay always scares the shit out of me. I always think the drive crashed.

StuffMaster• 11 years 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.

will_pseudonym• 11 years 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• 11 years ago

Joel Spolsky's "User Interface Design for Programmers" is phenomenal, and available freely online (!): 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

BatFastard• 11 years ago

Thanks for the links to great books.

pbhjpbhj• 11 years 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• 11 years ago

Recently relevant, for those who missed it:

https://blog.intercom.io/the-dribbblisation-of-design/

clay_to_n2• 11 years 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• 11 years ago

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

oxguy3• 11 years ago

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

vitd• 11 years 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• 11 years 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_n2• 11 years 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• 11 years ago

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

How to fix a bad user interface

Related Stories