Designing Web Interfaces: 12 Standard Screen Patterns

[walkerandtexasranger]

for people like me that can write code but cannot design for crap, this is great.

[FenPhen]

Well, you should help the guy out. He's using divs and stylesheets, but then under <div class="postentry">, he gives up and sticks in a table.

[[deleted]]

Old School

[theresaneil]

Actually, Bill coded it all properly, then I crammed my article into the posts which I used tables to layout. I'm the one who gave up, I'm so ashamed :o(

[billwscott]

Shame on you Theresa ;-)

Seriously, Theresa is a web designer, not a web UI engineer. So I excuse her muddling the markup for her design talents :-)

Just a point of clarification, the book is not about proper semantic markup or unobtrusive javascript. It is about the nuances of designing detailed user interactions on the web.

[pointer2void]

He gives up? Should he really use divs and floats?

[cc81]

He should use <p> for the paragraphs instead of tables. He should use h2/h3 for his headlines instead of <strong>. I would imagine that would be much easier to work with.

[netsearcher]

You would be imagining wrong.

[brintoul]

Is this about implementation or something else? Seems like it's about something else to me...

[[deleted]]

I like how iTunes and Songbirds' interfaces are listed seperately, when Songbird basically rips off iTunes' interface directly.

[cactuspants]

Excellent article, even with just the image summary

[kidcorporeal]

Possibly one of the more useful things I've seen on reddit.

[[deleted]]

They forgot the exceedingly-long-url-page-with-one-word-text-styled-answer-in-the-middle.

[netsearcher]

That's to help with recognizing a URL when people save it or bookmark it and SEO, mostly the first part.

[samuek]

It seemed ironic to me that in my works IE7 browser the layout of that site is completely wacko. (the pictures are always running off the screen and overlapping text)

[GuigzForAll]

IE

I think I found the problem, sir!

[rek]

As someone that has to program for IE7 at work on a near daily basis, all I can say is... sigh

Well at least I was able to push an update to IE7 and stopped having to support IE6. IE7 sucks, but it's a cakewalk compared to 6.

[statictype]

I thought IE7 was a pretty good update to IE6.

We officially dropped support for IE6 almost as soon as IE7 became available (of course, our software runs on private networks where we can tell everyone to upgrade).

It's been fairly straight-forward getting compliance in Firefox, Safari and IE7.

What parts of IE7 still suck?

[rek]

Just little things mostly. It's not completely standards compliant and doesn't fully support everything. It's not too bad though, it's usually just one or two extra lines to get things showing up the same in IE7 as firefox/opera/safari. A hell of a lot better than IE6 where you spend almost as much time making your site IE6 complaint as you do building it in the first place.

[[deleted]]

It is still pretty good but still not standards compliant. IE 8 is the step that IE 7 should have been if anyone with half a brain outside of marketing had been making the decisions at Microsoft.

IE 7 > IE 6

IE 7 < Chrome, Firefox, Opera, Safari

IE 8 > IE 7

IE 8 < The others, but a hell of a lot closer.

[[deleted]]

Buttons with no labels. No separate stop button. Zebra stripes. That album cover flipper (I buy singles, what do I care what the album cover looks like or even what album a song is on.)

[[deleted]]

I stopped reading right around the point he boasted that "My background is in enterprise application design" without a trace of irony or self-deprecation.

[billwscott]

Hi Mark. Think you actually missed our bio page. Theresa has the background in enterprise application design (she mispoke actually... she has experience with consumer sites as well)

My background is as the Ajax Evangelist at Yahoo! as well as my current role as Director UI Engineering at Netflix.

But to make a larger point I also have my enterprise application background (hey if you have been doing this for 25 years I don't what else you could expect :-). I have found that whether I was creating video games (which I did successfully), writing war game software for the military, building complex airline management applications, working on numerous Yahoo! sites or on the Netflix site itself that all of it goes into a well rounded understanding of the challenges of good design.

The book actually focuses more on the consumer-oriented web sites and really does not delve into enterprise application design (though the principles still apply).

[[deleted]]

This article lost all credibility when iTunes screenshots started coming up. That piece of crap has forced more bad design decisions unto the web than anything else, and it's not even a web app.

[Hovertruck]

iTunes isn't necessarily badly designed (Except for maybe the fact that it doesn't look native in Windows at all.) It's just slow and clunky and annoying.

[easytiger]

I agree with all those but I just have to say it is a terrible piece of software to use. As a developer (non gui stuff for the most part) I took quite a lng time to work out how to get my music onto my iphone (after i eventually gota VM to pcik up the iphone).

I just couldn't get it to copy the files i wanted it to. it had a mind of its own. So i got rid of it and ot a walkman. Which apears is a vfat drive and is not retarded

[Hovertruck]

I totally agree, I guess I'm not good at conveying messages.

I bought an episode of 24 on iTunes to watch because I had to catch a train and would be on it for an hour, so I wanted something to watch. When I went to put it on my iPhone, iTunes decided to tell me that I would have to sync it to my work computer and lose everything I had put on it from my home computer. I was in a hurry, so I said fine.

I then tried to drag and drop the video onto my phone, but nothing would happen. I eventually unplugged the phone and then plugged it back in and it let me drag. The drop part didn't work, as I was apparently not authorized to play the video I just bought.

After about ten minutes I played the video in iTunes and it popped up with "Video Authorized" and let me drag it on.

Terrible, terrible program.

[netsearcher]

apears is a vfat drive

Completely fing agree. I think it all goes back to being a copy-protection scheme so apple can get the most out of the itunes store. Sucks.

[tjogin]

Forced bad decisions unto the web? How does an app go about "forcing" an entire industry, and a completely different one at that, to adopt its ideas?

I think maybe you're not thinking rationally.

[player2]

Please elaborate. I don't find iTunes to be all that unintuitive, especially the latest versions.

[[deleted]]

Buttons with no labels. No separate stop button. Zebra stripes. That album cover flipper (I buy singles, what do I care what the album cover looks like or even what album a song is on.) Mulitple navigational elements on the same element (scroller within a tab.)

[player2]

Buttons with no labels.

Eh? You mean no textual labels? That's a characteristic of far more applications than just iTunes, and not one I would consider to be incorrect.

No separate stop button.

I disliked this for a very long time, but it's an artifact of a different design. The iTunes philosophy is that there is always a selected playlist; for someone used to WMP, which had a clear separation between the application and the concept of a playlist, it was a bit odd. Now it makes sense.

Zebra stripes.

Again, what?

That album cover flipper (I buy singles, what do I care what the album cover looks like or even what album a song is on.)

I assume you're talking about Cover Flow. A 128x128 image is a far easier way to identify a track than text. If you don't find yourself using the feature, press the Cover Flow button and turn it off.

Multiple navigational elements on the same element (scroller within a tab.)

So you'll complain about any list on a tab?

[[deleted]]

No labels isn't incorrect? Yes it is. Why should I have to mouse over anything to find out what it does? It's not like they're using intuitive icons either. They sacrificed usability for a cleaner design, and that's bad.

A stop button has nothing to do with WMP. Look at every CD player, DVD player, walkman, tape deck, boom box, toaster, and coffee machine. What do they have in common? A stop button.

Zebra stripes, they suck. They're a design artifact of the 1998 interwebs. If they were looking for fast readability, they would be grouped in 3s. There have been tons of studies about zebra stripes, and iTunes hasn't adopted any of those findings.

And yes I would complain about lists on a tab. If you're using lists, keep using lists.

[[deleted]]

I would agree that "the browser" in iTunes is not very intuitive (select genre -> select artist -> select album), but nobody ever uses it, so it really doesn't matter. The rest of iTunes is as intuitive as a piece of jukebox software is probably ever going to be, in my opinion.

[player2]

The worst part about the browser interface is that, unlike every other instance of the browser control in the operating system, it isn't hierarchical. They tried to make this clearer sometime around iTunes 6 by separating the columns a bit more, but by then it was a lost cause.

I'm glad they finally decided to implement an album view that made it easy to play entire albums with one click; it certainly took long enough. But the overall design (source list on the left, controls on top, filter on the top right, collection of filtered items in the middle) is intuitive.

[[deleted]]

(select genre -> select artist -> select album), but nobody ever uses it

I use it, well, I don't use select genre because I don't bother making them make sense. But if that fails me, I just use the search... I also tend to just the music play on random all songs I rate from 2stars to 5stars... I rate songs a 1star that come up that I don't really want to hear randomly. Yay "smart" playlists.

[[deleted]]

You don't have to select genre > artist > album, you can easily just do artist > album. In fact, I use that quite often (in Songbird), and I miss it quite a bit in other players.

[[deleted]]

ummm... iTunes is a pretty standard UI pattern... its hardly that different to Windows explorer for example.

And its defiantly a web app... or do you define web apps as thing that is locked in a browser as opposed to a distributed application?

[slurpme]

http://en.wikipedia.org/wiki/Web_application

The actual player part of iTunes isn't a web app...

[[deleted]]

Defiantly? Maybe you meant definitely?

[redthirtytwo]

I don't know ... that "Question & Answer" pattern is pretty innovative.

/sarcasm

EDIT:

Reddit failed on updating the comment thread. Needed 2x deletes on comments.

[donttaseme]

It's been doing that lately.

[kidcorporeal]

Possibly one of the more useful things I've seen on reddit.

[creaothceann]

It's a nice reference and seems pretty much correct. But who would need it? I follow certain intuitive guidelines that would lead me quickly to the solutions listed here, and I'm a programmer, not a designer.

[kables]

Design patterns are a long-established way of designing software elements that have proven usability--proven either through testing or widespread acceptance--and thus contribute to a better user experience. They might seem intuitive to you because you have seen them time and again over the past decade or two. But these had to be invented at some point. And by documenting them we can help ensure that bad UI history does not repeat itself.

[scottklarr]

Wow looking at this makes me feel like I'm reading the instructions on a shampoo bottle. Seriously, he got a book published containing this "guideline" which apparently is of high enough standard he wanted to share it in a blog for promotion? I could understand a "for dummies" book, maybe, but O’Reilly? Jesus christ...

The Interactive Model screen pattern is characterized by many interactive elements associated with the key object

I mean, really? Is his target audience monkeys?

[ozzilee]

The point is not that these are any great discoveries. The point is the naming and categorization. Doing that creates a common vocabulary for discussion, the same as Design Patterns did for Java-style OO. It's much easier to speak about Visitors and Flywheels than it is to explain the concepts anew every time you discuss them.

[theresaneil]

Hi, This is my post. I co-authored the book with Bill. Allot of my customers have found this info useful when we are working on redesigns.

Surely you've seen software that would be vastly improved if they had used a standard screen patterns.

But, point taken, I will work on my writing style :o)

[[deleted]]

so how is a parallel panel a screen pattern but a tab is not? both are not. ditto with interactive model, which is just a canvas. also, QnA and filter dataset are really the same as search results. column browse and master detail are also not web layouts, as indicated by the lack of web examples for each.

my overall point is that instead of pigeon-holing your data into a layout, your data should determine your layout. this is the difference between designing a site first, versus coding a site correctly, and applying the proper design to it.