
Techniques To Improve Your User Interface Designs  - makimaki
http://www.smashingmagazine.com/2008/12/15/10-useful-techniques-to-improve-your-user-interface-designs/
======
edw519
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.

~~~
derefr
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
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.

~~~
mlLK
chroot jail

------
jmtame
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).

~~~
teej
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?

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

------
there
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").

------
ivank
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.

~~~
derefr
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.

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

~~~
nirmal
Gmail does this wrong when you add an attachment. After it has been uploaded
the textarea cursor is moved to the bottom and you end up typing after your
sig.

------
nihilocrat
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.

~~~
mahipal
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-...](http://www.slideshare.net/jeff_croft/elegant-web-typography-
presentation)

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...](http://www.webcredible.co.uk/user-friendly-
resources/css/css-forms.shtml)

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.

------
ricardo
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
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
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!

------
KevBurnsJr
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.

------
apmee
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...](http://www.amazon.com/Interaction-Color-Expanded-Josef-
Albers/dp/0300115954/ref=cm_cr_pr_pb_t)

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.

------
jamongkad
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.

------
fallentimes
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?

~~~
makimaki
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.

~~~
fallentimes
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.

~~~
makimaki
I'm not looking to 'win'. It doesn't give me any satisfaction. Just trying to
understand your antagonism towards me, a stranger who just happens to ALSO be
a digg user (something you seem to consider as an inherently inferior sub-
species of internet people).

Hacker News is not Digg and therein lies its appeal. I love the intelligent
comments here and the stories are terrific. So don't think for a second that
I'm trying to 'ruin' the community by submitting digg-like content (whatever
that is).

In any case, its a SOCIAL news site. Let the community sort it out with
editorial votes. Wisdom of the crowds, yes?

There's no way I'm going to make everyone happy with my submissions. It's
impossible. As long as its really interesting to me, doesn't violate TOS,
isn't spam and falls within the general topical focus/interest of Hacker News
readers, I'm going to make use of my right to contribute to the community.

I wish something like this won't happen again. If you want to continue this
off-topic discussion and thoroughly exhaust your frustration, feel free to
rant at me in private. My email is in my profile. Cheers.

~~~
fallentimes
Wait, who's ranting?

Anyways...no frustration on my part (what about you?). I was just too trigger
happy from the recent spam HN has been getting. That's all. Apologies man.

