Designing Web Interfaces: Standard Screen Patterns

http://designingwebinterfaces.com/designing-web-interfaces-12-screen-patterns

by nreece • 18 years ago

105 22 18 years ago

dan_sim2• 18 years ago

I'm no web designer expert but won't screen patterns be used as default design for web site when they shouldn't. I mean, will they be as overused as programming design patterns? Don't forget that the singleton ruined a part of my life.

moe• 18 years ago

I think UI patterns are a good thing because there is only a small number of good solutions to any given UI-problem but an infinite number of ways to screw it up. Identifying and explaining a few proven solutions for the most common tasks can help newcomers to make good choices instead of reinventing the wheel (potentially badly) every time.

dan_sim2• 18 years ago

I'm really on both sides of the fence here. I said that because I'm currently writing an app that has a completly non-standard design because every app that does what I want uses "search/results" design but it just doesn't work (at least for me).

On the other side, I'm happy to see that maybe a bad UI idea will be standardized into something usable.

lacker• 18 years ago

Like design patterns, you should learn them so you can both use them intelligently when appropriate, and make fun of people who overuse Singleton or the "Column Browse" template.

jscn• 18 years ago

Can you overuse a design pattern? You can use them incorrectly or when it's inappropriate, but that's not the same thing.

sethg• 18 years ago

I think when a pattern is used widely enough, it just fades into the background; when the navigation tools are in their expected places, then the users who have gotten used to the pattern can spend more time paying attention to the content. Which is what we want, right?

dantheman• 18 years ago

I think this is great. Excellent work. I think we need more work identifying useful patterns to: 1. make it easier for users & 2. save development time and effort on standard views.

yeahit• 18 years ago

In my daily browsing, I often see Designs that are not on that list.

For example Hacker News is a very standard interface to me. I would call it "Forum".

"Search" looks like it has multiple columns, but in my daily experience the main characteristic of "search" is that it only has a single column of results. (Google, Amazon, Yeahit...)

Another standard Layout, I would call "Portal". Yahoo is an example. Most pages are more or less "Portal" these days. (Another name for "Portal" is "utter mess".)

ibsulon• 18 years ago

The author qualified this list as designs he has used for himself in enterprise software. I don't believe that he was suggesting that these were a list Set In Stone.

fharper1961• 18 years ago

Speaking of the design of Hacker News. I think that not having a footer that gives visual feedback that you've reached the end of the page is a glaring usability flaw!

On HN, when you scroll down page by page and you reach the bottom there is no visual indication that you are at the bottom. And since you haven't scrolled a complete page down you are forced to rescan the page to find where you left off reading.

The NYT gets this right. Their footer is big enough so that with a regular window you'll always scroll complete pages until you see the footer.

I like the HN contents, so I put up with the design flaw.

ph0rque2• 18 years ago

Someone should make Balsamiq templates (http://www.mockupstogo.net/) for each of these...

rbanffy2• 18 years ago

Well... I am not sure about Balsamiq, but I am inclined to do so for Django, if there isn't one already.

ph0rque2• 18 years ago

I think we're talking about different levels of templates here... balsamiq is just a mockup tool, not a web app framework.

bmelton• 18 years ago

As a recent Django convert, I think that'd be insanely useful. Shoot me a line if you'd like some assistance (barry.meltonATgmail)

Having played around with a few of the pluggables recently, are their standards for block areas? E.g., in some of the pluggables I've used, they use "TITLE" for the HTML page title element, while some have used "PAGETITLE" and another used "HEADTITLE".

balsamiq• 18 years ago

Hi ph0rque, funny you should mention that...Theresa Neil, who put the patterns together, was very instrumental on helping me get the new mockupstogo.net site together (I thank her here: http://www.balsamiq.com/blog/?p=617). She was planning on putting all of the patterns on Mockups To Go as well, but if someone wanted to do it for her I'm sure she wouldn't mind... :)

timf• 18 years ago

I started reading this book on Oreilly's Safari service a couple days ago, recommend it (nb: I am a remote services/concurrency guy learning UI principles/techniques, not an experienced designer).

jskopek• 18 years ago

I've started saving and tagging screen captures of sites I like; this terminology will definitely make it easier to consistently tag/identify layouts.

nickb• 18 years ago

Vast majority of these patterns are from desktop apps, not web apps. Majority of the example screenshots are from desktop apps as well.

While desktop and web apps share a lot of similarity, they're not the same. Web and desktop apps have different limitations and as a result have different evolutionary paths. Also, people expect them to behave differently so you can't present a UI to the user that doesn't behave like they expect it to behave.

fauigerzigerk• 18 years ago

They say "These are are broadly applicable solutions for general problems that arise in enterprise software and productivity web app design. They are not web site patterns, which have already been cataloged and explored quite thoroughly*."

You say desktop and web apps are not the same. Sure, but the question is whether their logical UI differences are determined more by their webiness/desktopness or by the fact that most desktop apps are enterprise/productivity apps whilst the majority of web apps is not.

showerst• 18 years ago

If you like these, you may also be interested in this flickr collection of search UI patterns: http://www.flickr.com/photos/morville/collections/7215760378...

dustineichler• 18 years ago

I'm not a UI guy, but I found this incredibly useful. It'd be interesting to find the anti-pattern in all this and implement that instead. Seems ironic to standardize such a creative aspect of development.

Designing Web Interfaces: Standard Screen Patterns

Related Stories