Designing Web Interfaces: Standard Screen Patterns | Hacker News Reader

Designing Web Interfaces: Standard Screen Patterns

designingwebinterfaces.com

105 pointsnreece22 comments

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.

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.

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

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.

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.

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.

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.

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.

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.

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

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?

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

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.

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

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

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

I know, but several of them seem to be quite modular and easy to generalize in useful ways.

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

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

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

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.

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

Reply on news.ycombinator.com