Distinguishing decorative from meaningful elements in UI design

http://www.37signals.com/svn/posts/1524-distinguishing-decorative-from-meaningful-elements-in-ui-design

by brm • 18 years ago

26 8 18 years ago

37signals.com

teej• 18 years ago

I've definitely clicked that "all" link thinking it meant my repositories.

Who did the Github design? Was it internal or third party?

pjhyett2• 18 years ago

Tom Preston-Werner (mojombo on HN), a co-founder, does all of the design work as well as write pretty sweet erlang, c, and ruby.

albertsun• 18 years ago

That element is for navigation so it's not awful to have it all set off. I don't see it as a design issue so much as GitHub just missing the common sense feature of having a link to all your repositories.

pjhyett2• 18 years ago

The username and gravatar both link to your dashboard which contains a list of your repos.

walterk2• 18 years ago

The word he's looking for is "gestalt". Objects that are grouped together are perceived to be related.

Personally, I would not have put those global navigation links anywhere near the user-specific links. Put global navs next to the GitHub logo, which is the global signifier supreme. All the variations Ryan proposes are merely slight improvements on a fundamentally flawed design. It's like trying to sharpen a spoon when what you need a knife.

The user-specific navigation choices are: all | public | private | sources | forks . You can put these in the upper right block instead.

By the way, you can learn the underlying principles behind this stuff very quickly by flipping through an HCI textbook. Just find a cheap, used copy of a well reviewed textbook online. Ryan's post has nice mockups of a real world example, but barely scratches the surface of the theory. More to the point, he entertains a totally flawed approach all throughout.

andreyf• 18 years ago

a well reviewed textbook online

Have any recommendations? Everything I see sets of bullshit-alarms of one sort or another...

walterk2• 18 years ago

The one I have personal experience with is this:

http://www.amazon.com/Human-Computer-Interaction-3rd-Alan-Di...

Which is not particularly well reviewed, but it is adequate, and you can apparently get the 2nd edition for $1.27 + shipping. It's major problem, as with most textbooks, is that's it's written in dry, overly qualified prose. But it should still be skimmable.

Honestly, these things are jam-packed with good, reliable information. I thought I knew a bunch after years of doing Donald Norman-esque analyses, but I still got a lot out of it. Just remember that it's less important to remember the theory than to have been exposed to it. It's enough just to have the concepts rattling around in your brain somewhere.

anuraggoel• 18 years ago

Good example, but more often than not, there is no clear answer to the 'brain' part of the UI, because people don't think the same way, especially for non-standard UI elements. In Ryan's blog post itself, the following design choices can be questioned:

1. The balloon image just below the post title (and to the left of the number of comments) is not clickable. Should it be clickable? If so, should it lead to the comments section? Should it lead to the post-new-comment form?

2. To the right of the comment count, in the 'Latest by John Doe' part, again, no links. Even though 'John Doe' is a link in the original comment if he has a web page. If we linkify it, should both 'Latest' and 'John Doe' be links?

I am, of course, picking hairs like Ryan, but that's precisely the point - when you start picking hairs, there is more than one way to see it.

Distinguishing decorative from meaningful elements in UI design

Related Stories