Techniques To Improve Your User Interface Designs

http://www.smashingmagazine.com/2008/12/15/10-useful-techniques-to-improve-your-user-interface-designs/

by makimaki • 18 years ago

153 44 18 years ago

smashingmagazine.com

fallentimes3• 18 years ago

Makimaki,

Submitting stuff like this doesn't help your cause:

http://news.ycombinator.com/item?id=394963

http://news.ycombinator.com/item?id=393490

None of us are perfect, but a top ten list?

makimaki2• 18 years ago

First of all, I don't have a 'cause' or agenda. I found some tips in this article useful and hence submitted it. That's all. Content quality is subjective, some hate it and some like it. I have no control over this and neither do I have a problem with negative comments ON the article itself. What I dislike are personal attacks like this.

I don't even know who you are so I'm not sure why you are targeting me. Had a bad day?

Are you suggesting that top ten lists are inherently flawed? Should all list posts NOT ever be submitted to Hacker News? Or are you suggesting that I shouldn't be allowed to participate in this community because everything I share is more or less rubbish?

I joined this community 602 days ago. That's 1 year and eight months ago. I'm not a fly-by-night spammer. Everyone can see the stories I submit to verify this.

Your obvious condescension is quite unnecessary. And frankly, I find it quite insulting. I don't have a devious plan to destroy Hacker News so maybe you should chill out a bit.

unalone2• 18 years ago

This article was quite good, yes. SmashingMag makes Top 10 lists that are genuinely interesting: not always, but often.

fallentimes3• 18 years ago

Sorry, I wasn't trying to be insulting. I just noticed that you've had other run ins submitting digg like stuff. But the other readers have spoken, you win; I lose.

tamar• 18 years ago

Would you have preferred that it be submitted with a different title? Title is subjective.

lawrence• 18 years ago

the content is more important than the format. I thought the content was pretty solid.

unalone2• 18 years ago

But it's not a Top Ten list. It's a Ten list. Those are fine.

I think that proclaiming the "top anything" is pretty damn annoying, but this isn't that. It's more of a "Here! We thought of some neat ideas you might like!" And I liked a good four or five of the tips.

ivank2• 18 years ago

Tip #2 is nice in theory, but styling button spacing in a cross-browser manner is nearly impossible.

Tip #7 is awful. By the time the images load, the user could already be typing in another input box. If you must set focus, do it right after the <input>.

Tip #8 is pretty bad too. Users expect input boxes to look like input boxes. See Wufoo, which does this properly by highlighting the background.

Some of the ideas aren't bad, but a few "useful techniques" won't lead to a usable interface.

bena• 18 years ago

Definitely agree on your assessment. I started questioning this guy's advice after his bit on button spacing. Having the words in a button "balanced" within the button does not make it any more of less useful.

Intuitive, functional, and pretty aren't always the same thing. Having a pretty interface doesn't make it inherently usable.

derefr3• 18 years ago

The button tip makes sense if you align the button to other text. Then, the baseline of the text in the button should be aligned to the baseline of the text outside it (if both texts are of the same font-size.) If buttons center their text vertically, and themselves are centered with respect to the half-height of the smaller characters, this can misalign the text within them; playing with vertical padding can help with this.

derefr3• 18 years ago

Tip #7 works if you put in a bit of extra effort, and make sure that the text field you're taking the focus away from hasn't been altered from its default value.

ivank2• 18 years ago

Yes, exactly. The subtleties are so dangerous that even Google gets it wrong (Google Images did this wrong, at least for a long time)

potatolicious• 18 years ago

Agreed. I despise it when sites pull my focus to another field when I"m already halfway through data entry. Same goes for apps - if I launch an app and then switch to something else, for God's sake don't pull me back when you're done loading. I wanted you in the background dammit.

It's also a bad idea generally to break the UI the user is accustomed to.

edw519• 18 years ago

Nice little writeup that skims the surface of "User Interface Designs".

Problem is that when you decouple interface design from system design, that's all you can do: skim the surface.

#10 provides the perfect example: how to label your dialog boxes.

Once you take a larger, more organic view, you reach a much simpler conclusion: don't have dialog boxes. Just do it and provide an Undo, and leave the user alone. Millions will thank you.

An outcome you can only reach by looking at the whole system, not just the way it looks.

derefr3• 18 years ago

But almost no one really follows this advice to its core. Imagine an operating system designed this way: you could quit Photoshop, then "undo" the quit, and all your windows would reopen without anything have to re-load from disk (because it wasn't really unloaded yet to begin with.) You could "rm -rf /" and then press Ctrl-Z in your shell. You could send an email, and then pull it back from the server (or all the way from the other person's inbox), as long as they both had the same system installed.

If the entire world worked this way, you could even wire $5000 to a Nigerian scammer, then pull it back out, undoing the purchase of anything they spent it on in the process. Of course, cash would have to be replaced with a reversible commodity (credit chips that really just referenced a row in a central, though distributed, table) so money could flow back into your pocket without anyone having to hand you anything.

Taken even further, to the point where you can take out a hit on someone and then press undo after the person is dead, this begins to sound like the start of a good Science Fiction. "The Reversible Society", perhaps.

Jasber• 18 years ago

I often wish I had an undo button in the terminal. Obviously not everything can have an undo. But most things (anything you can undo in Windows) you should be able to undo on the Web.

This is what people will expect from web applications or they won't use them.

shiranaihito• 18 years ago

Exactly.

It's much easier to lecture people to provide Undo with everything than it is to actually implement it in a worthwhile way.

daleharvey• 18 years ago

it isnt about "to the core", there are obviously non associative things that should be warned as such, but seeing as you use photoshop as an example

edit a photoshop file, quit, it will warn you to save changes blah blah, it is annoying, but also stops you deleting stuff, load it again, history is lost

Use lightroom, another adobe product for editing photos, edit a photo, quit, no dialog, its already saved, open the file again, and the history is preserved

its a much nicer experience in a lot of situations

teej2• 18 years ago

I know this isn't 100% relevant to your post, but AOL used to have undo on sent emails (to other aol members)

nostrademons• 18 years ago

IIRC, this was one of the design principles for ErosOS. Everything was transparently persistable and undoable, so you could reverse closing that document, or editing it, and so on.

auston• 18 years ago

Actually, millions will not thank you, because they would not have had to deal with that pesky dialog box in the first place!

volida• 18 years ago

they interacted with other dialog boxes in the past

there• 18 years ago

i hate number 7. as a user that navigates web pages by keyboard (and most of the time by vi keys), i hate it when sites focus a text box on a page that has enough other content to require scrolling.

it's one thing if it's on a solitary login page or google.com where the primary content on the page is the text input field, but when you focus a search box or some other field when i'm trying to scroll with the 'j' key, it's very frustrating.

i was actually using a site the other day that not only focused some search box way off to the corner, but actually re-focused the text box every time i hit a key. it took me a short while to figure out why i couldn't scroll down (the search box was by then filled with "jjjjjjjjjjjjjjjjjjjjj").

nihilocrat• 18 years ago

A good deal of these techniques are applicable in an intranet setting, but are there any design tips for non-designers working on internal backend web tools?

The emphasis, of course, is on usability for long-term users. I'm not really concerned about users being able to easily learn the interface or grabbing their attention one way or the other; they are going to be trained to do that. I am more interested in making it convenient and usable for long-term users who are going to be using this software almost 40 hours a week. The vast majority of the app is asking for a few variables of input, showing tables of output, and pages of links to the forms that provide this functionality. Really boring stuff, but there is probably room for improving the usability and readability of the forms/tables.

run4yourlives• 18 years ago

The emphasis, of course, is on usability for long-term users. I'm not really concerned about users being able to easily learn the interface

The solution to your problem lies buried in this sentence.

mahipal• 18 years ago

A good interface is intuitive, in the sense of both easily learnable and easily usable. I don't think you can really decouple the two. It sounds like you're mostly just displaying giant blocks of text, so I'd recommend this excellent slideshow on web typography:

http://www.slideshare.net/jeff_croft/elegant-web-typography-...

It's a bit long, but very thorough and very helpful for content-heavy design -- and it gives you exactly the CSS you need. To summarize it very briefly: a little bit of white space goes a long way.

It's also worth putting a little bit of thought into styling the forms, especially since unstyled web forms can be really hideous. Here's a quick walk-through of styling a web form: http://www.webcredible.co.uk/user-friendly-resources/css/css...

Obviously a contrived example, and you wouldn't want so many fancy colors in a professional setting. But the key point there is to align everything nicely, and go to the trouble of grouping related fields using fieldsets and legends.

ig1• 18 years ago

Have a look at "Information Dashboard Design" by Stephen Few, I also found "The Non-designer's Design Book" by Robin Williams very good but it's more concerned with general design principle then the specific stuff you're interested in.

ahoyhere4• 18 years ago

The #1 bit of advice I'd give you: avoid Tons Of Data Just Lying There Syndrome.

Data is FOR something. In and of itself it is not useful. This something may be actions the user will want to take. It may also be mean taking raw data and coming up with metrics or other useful indicators.

Too many info "dashboards" just sit there, tons of stuff slapped on without this sense of actionable purpose / context.

ahoyhere4• 18 years ago

Also, ignore everyone who thinks that quickly onramping newbs is the highest goal of interface.

Everything in moderation.

There is a big difference between the needs of Flickr and the needs of a professional analytical tool.

The key issues are A) legibility, B) smart information usage/display/actionableness, C) proper metaphors, D) faultless internal consistency.

jmtame• 18 years ago

I found the single most effective thing to do in UI is this: iterate. The average number of iterations I take for a single view is about 10 before I'm really happy.

You see #1, and it doesn't feel too bad. Then you do #2, and it makes #1 look bad. You get an idea, so you experiment and try to tweak it a little. Before you know it, you've created something that just feels good at heart. It looks good, it's appealing, it's usable, and attractive.

Some companies go extreme on this, I know Apple can go through hundreds of designs for a single product.

I have a few rules of thumb with this:

1) Never delete an iteration, including #1 which probably will look the absolute worst.

2) Just do #1, yes it will probably suck. Do it and get it over with. Then make #2 and subsequent iterations incremental improvements.

3) Don't stop until you're absolutely proud of the iteration. Be honest, don't let fatigue be your reason for stopping or moving on. True UI design is difficult and requires endurance, just like anything else that's difficult (sports, programming, writing a novel, etc).

teej2• 18 years ago

How do you mitigate the risk of local maxima? Is there good way to try (or justify trying) radically different approaches without undermining past work?

ahoyhere4• 18 years ago

Assuming you're the type of person who analyzes past mistakes, it just comes from experience.

ricardo• 18 years ago

A great technique is to modify the UI based on context and allowed actions. As I started using Basecamp (37signals) on a daily basis I realized that there are hardly any error messages in the application. If you aren't allowed to do something they hide any UI elements associated with the invalid action. This results in a simpler interface that is more intuitive.

Tichy• 18 years ago

I don't know, isn't that confusing sometimes? I know that I hate those menus with greyed out items and no explanation why a certain option is not available at the moment. Not even seeing the option at all might be even more confusing, because then I might start looking everywhere for the option to show up.

Hexstream• 18 years ago

I don't know why we still don't have interfaces where you can always access a precise, clear, context-sensitive explanation for why a control is grayed out and when it's enabled. The benefits to usability would be huge!

johns• 18 years ago

Hiding items will limit your users' ability to discover what they can do with your product. I would minimize hiding and instead de-emphasize unavailable features with explanations why they're not yet available.

jamongkad• 18 years ago

Everything is gravy except for the part of focus on the input. I cannot express how many times that has annoyed the hell outta me whenever I use a web app that employs that technique.

apmee• 18 years ago

For anyone as fascinated as I am by the orange-box-on-blue-background phenomenon in #4, I really recommend Josef Albers's Interaction of Colour. http://www.amazon.com/Interaction-Color-Expanded-Josef-Alber...

It's educational and illuminating, but compared to most colour theory books it's more poetic than academic in tone, and more emotional than theoretical in its insights.

KevBurnsJr• 18 years ago

Here's 2 Useful Techniques To Improve Your User Interface Designs :

Use your fucking eyes, and do the work.

If something looks out of alignment, fix it.

If something is hard to click on, fix it.

If you find yourself reading useless information, demote it.

If you find it difficult to find useful information, promote it.

Good design is the sum of a million minute decisions.

There is no silver bullet, nor even a list of silver bullets.

Take the time to make good decisions at the ground level, or don't, and settle for poor design.

Mixed with plenty of exposure to both good and bad design, this process will inevitably turn anyone into a good designer.

Techniques To Improve Your User Interface Designs

Related Stories