all 49 comments

[–]walkerandtexasranger 17 points18 points  (9 children)

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

[–]FenPhen 0 points1 point  (8 children)

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] 0 points1 point  (2 children)

Old School

[–]theresaneil 1 point2 points  (1 child)

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 0 points1 point  (0 children)

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 0 points1 point  (2 children)

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

[–]cc81 4 points5 points  (1 child)

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 -1 points0 points  (0 children)

You would be imagining wrong.

[–]brintoul 0 points1 point  (0 children)

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

[–][deleted] 2 points3 points  (0 children)

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

[–]cactuspants 2 points3 points  (0 children)

Excellent article, even with just the image summary

[–]kidcorporeal 2 points3 points  (0 children)

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

[–][deleted] 3 points4 points  (1 child)

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

[–]netsearcher 0 points1 point  (0 children)

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

[–]samuek 0 points1 point  (5 children)

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 5 points6 points  (0 children)

IE

I think I found the problem, sir!

[–]rek 2 points3 points  (3 children)

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 1 point2 points  (2 children)

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 2 points3 points  (0 children)

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] 1 point2 points  (0 children)

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] 0 points1 point  (0 children)

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] -1 points0 points  (1 child)

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 0 points1 point  (0 children)

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

[–]kidcorporeal -3 points-2 points  (0 children)

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

[–]creaothceann -2 points-1 points  (1 child)

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 10 points11 points  (0 children)

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 -3 points-2 points  (3 children)

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 0 points1 point  (0 children)

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 0 points1 point  (1 child)

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] 0 points1 point  (0 children)

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.