

Designing Web Interfaces: Standard Screen Patterns - nreece
http://designingwebinterfaces.com/designing-web-interfaces-12-screen-patterns

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

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

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

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

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

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

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

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

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

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

------
showerst
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...](http://www.flickr.com/photos/morville/collections/72157603785835882/)

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

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

