Artistic aspects of UI?

views:

236

answers:

+9 Q:

Artistic aspects of UI?

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"]

+3 A:

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 2010-03-02 11:33:31

+1 to counter the drive-by downvote. Useful links.

MagicAndi 2010-03-02 11:37:53

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 2010-03-02 11:38:38

Useful, but precisely not what Anon meant ;)

Bastiaan Linders 2010-03-02 11:39:21

@Bastiaan Linders: how is this answer useful *to this question*? It's useful for some other question, but not this one.

Bryan Oakley 2010-03-02 11:40:42

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 2010-03-02 11:44:10

@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 2010-03-02 11:56:18

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 2010-03-02 12:01:29

@MagicAndi: Don't add [not-programming-related] tags. http://meta.stackoverflow.com/questions/43879/anti-tags-valid-use-or-not

Roger Pate 2010-03-30 20:08:51

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.

MagicAndi 2010-04-05 20:32:02

+7 A:

zapping 2010-03-02 11:46:31

awesome answer. +10 (if I could). That post directly answers the question.

Bryan Oakley 2010-03-02 12:01:39

great, how do I actually create that shinny search button?

anon 2010-03-02 14:53:14

@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 2010-03-02 17:02:15

@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 2010-03-02 20:44:49

@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 2010-03-03 00:29:55

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 2010-03-03 07:04:33

+1 A:

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 2010-03-03 07:07:17

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 2010-03-03 15:08:47

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 2010-04-08 19:49:53

ansaurus

tags:

views:

answers:

Artistic aspects of UI?

related questions