9

Consider a single button.

At one extreme, we have a black OpenGL window, with:

  • outline (in white) of a rectangle
  • bitmap remdered font inside of it, saying "Ok"

At the other extreme, we have Mac OS X, a button that is:

  • well rounded
  • has some gradient showing light effects on it
  • nice antialiased "OK"
  • soft shadow of some sort

These two UIs present very very different user experiences. The former says "This is from the 80s" the latter says "this is professional".

This is something I do not understand well as a programmer (and don't know where to learn about this).

Does anyone know of a good technical resource for this? [I'd prefer things that draws upon psychology / perception literature to say why to do something rather than design books that just says "use color XYZ with a gradient of blah"]

Charles
  • 50,943
  • 13
  • 104
  • 142
anon
  • 41,035
  • 53
  • 197
  • 293
  • 1
    Unless you're artistic, you're liable not to get a really great grasp of this. You can do ok, and a lot of people do, but there is little substitute for a good graphic designer. It's much easier to recognise a professional looking UI than it is to sit down and design one from scratch yourself. – Paddy Mar 02 '10 at 11:39
  • Is there no theory of this? I'd love something like "this is how humans preceive stuff", therefore we should optimize for this function; optimizing for this function, we get buttons that look like this. – anon Mar 02 '10 at 11:41
  • 3
    It's a matter of fashion, too. In five years, we'll be puking all over these currently fashionable OS X buttons. (And "web 2.0" style, as well.) – Thomas Mar 02 '10 at 11:42
  • 1
    @anon - I guess there are theories, but I don't think they will be as hard and fast as other programming theories. As mentioned, it will depend on fashion and also on what your audience will be. – Paddy Mar 02 '10 at 12:20
  • @Paddy: still, he may be interested in being a programmer *and* a graphic designer (see, for example, the work of Shaun Inman). Of course one has to take into account the intrinsic problems of multiclassing… ;) – Agos Mar 02 '10 at 13:52
  • 1
    Suggested reading: http://ignorethecode.net/blog/2010/01/21/realism_in_ui_design/ – Josh Lee Mar 03 '10 at 07:01
  • +1 @jleedev for the link nice. – zapping Mar 03 '10 at 07:10
  • @Paddy: There's another specialty here: human engineering. Get an artist and a programmer together to do an interface and it'll be lovely garbage. This is a complex problem. To summarize: People are complicated. – David Thornley Mar 30 '10 at 20:15
  • @David Thornley - quite true. This is definitely one of those things that when done right looks easy, but conceals a raft of complexity underneath. – Paddy Mar 31 '10 at 08:52
  • @MagicAndi: [Don't tag](http://meta.stackexchange.com/questions/43879/anti-tags-valid-use-or-not) [not-programming-related.](http://meta.stackexchange.com/questions/10216/can-we-disallow-the-use-of-belongs-on-xxxxxxx-and-not-programming-related-tag) –  Apr 08 '10 at 19:35

5 Answers5

7

Here is something on it. http://www.alistapart.com/articles/indefenseofeyecandy

You can check this link out to answer the part of your query in the comment. It has lots of references to samples and some helpful links too. http://www.usernomics.com/user-interface-design.html

The perception and psychology part of designing the UI does not come as any rule or steps, as we all know. It gets developed over time. Making your application user friendly and pleasing, that part of the magic or deal gets added from experience\survey and also you can include layman testing. I do it many times.

Also thinking out of the box. You will get a solution when solve it within the box. But you will get a better solution when you think out of it.

Another useful thing is be a good learner and observer. Note something nice and useful when you visit sites or use other applications. You might not even notice it. It might be something very small or trivial but it makes a lot of difference when it's used in the right places.
zapping
  • 4,118
  • 6
  • 38
  • 56
  • awesome answer. +10 (if I could). That post directly answers the question. – Bryan Oakley Mar 02 '10 at 12:01
  • great, how do I actually create that shinny search button? – anon Mar 02 '10 at 14:53
  • @anon: that question is too deep to answer in a tiny comment box. Google is a wonderful resource for answering questions like that. – Bryan Oakley Mar 02 '10 at 17:02
  • @Bryan -- I don't mean "create a button" in the sense of a QT/MacOSX tutorial; I mean what equations gives me rise to the lighting/shading that creates that shinny like button? – anon Mar 02 '10 at 20:44
  • @anon: I realize that. Google it. There are plenty of tutorials for using photoshop to create such buttons, and there are websites where you just type in text and it gives you back an image. And there are desktop apps that do the same thing. There's nothing magic about it. – Bryan Oakley Mar 03 '10 at 00:29
  • Have edited the initial post with some things that are nice to read but very hard to develop it out. But it has helped me a lot to visualize application. – zapping Mar 03 '10 at 07:04
3

You will want to read up on Human User Interface guidelines HIG and Usability:

Apple's Human Interface Guidelines

Windows User Experience Guidelines

Platform agnostic guidelines

Amazon has plenty of books on the HIG subject, but I'd also recommend books based on usability. Steve Krug's "Don't make me think" is a great book (mainly tailored for web usability) etc.

scunliffe
  • 62,582
  • 25
  • 126
  • 161
  • None of those resources have much to say on this subject. They are more concerned with button placement, choice of widgets, colors, etc. They don't address how or why or whether "professional" looking buttons are more effective than their plain counterpart. – Bryan Oakley Mar 02 '10 at 11:38
  • Useful, but precisely not what Anon meant ;) – Bastiaan Linders Mar 02 '10 at 11:39
  • @Bastiaan Linders: how is this answer useful *to this question*? It's useful for some other question, but not this one. – Bryan Oakley Mar 02 '10 at 11:40
  • 1
    I would argue that a slick professional interface is the result of a well designed layout/form that takes usability and human interaction into consideration. These links also discuss things like why certain shading/gradients create a 3D look and thus better "indicate" a button is clickable. – scunliffe Mar 02 '10 at 11:44
  • @scunliffe: I agree a professional interface is the result of a well designed layout. But that's not what the user is asking. They are asking *why* is this so. What are the psychological reasons why a professional graphical design is more usable. I think the question (and answer) goes deeper than just the affordance of widgets. One can have a really ugly button with a 3D look so that it looks "clickable", but anecdotal evidence suggests a more professional looking button is more effective. Why? How does your answer address that issue? – Bryan Oakley Mar 02 '10 at 11:56
  • I upvoted @zapping's answer - the brief article on ALA illustrates/explains some of the philosophy behind the design. I don't think that there is a single resource with the answer for this question. I think one needs to read up on all aspects of usability and philosophy of design to obtain a complete understanding. – scunliffe Mar 02 '10 at 12:01
  • @MagicAndi: Don't add [not-programming-related] tags. http://meta.stackexchange.com/questions/43879/anti-tags-valid-use-or-not –  Mar 30 '10 at 20:08
  • Roger, possibly you should re-read the meta question. This question is not directly programming related, but is being asked by a programmer with an interest in UI. I believe it is fair to tag it with a 'non-programming related' tag to indicate this. Also, some 1350 other uses of the same tag indicate that a sizeable number of my fellow SO users also find this tag useful. – Tangiest Apr 05 '10 at 20:32
1

alt text

A classic: The Design of Everyday Things

Pretty quick read, discussed some of the psychology behind using and understanding human interfaces. It's a bit dated and doesn't directly focus on programming GUIs but I would start here.

swanson
  • 7,377
  • 4
  • 32
  • 34
0

I'd start with Vitruvius' firmness, commodity, and delight. Also Gibson's affordances. Also, many HCI researchers have applied activity theory, with mixed results. Norman's DOET is a good start, but I think it covers only the first 2 of Vitruvius' triad - you're asking about the delight. Might also look at McCloud's Understanding Comics.

ja.
  • 4,245
  • 20
  • 22
0

The Opera web standards curriculum has a very good section on aesthetic aspects, especially regarding color usage. I think it's very useful reading not only for web development, but all application design.

There is also a color scheme designer website, which allows you to play around with some of the color theory aspects. Definitely worth a visit.

Rob Lachlan
  • 14,289
  • 5
  • 49
  • 99