5 Web Design Patterns for Happy Users

27 Jul 2006 Category: Features, Internet

5 Web Design Patterns for Happy Users

In terms of designing for the web, a Design Pattern can be defined as a repeatable solution to a commonly-occurring usability problem. Design Patterns can vary from being strict ideologies on how you should lay out code, to more general methodologies on how you can make interacting with a website more natural and less frustrating.

Written by Jon

Coding can be quite dogmatic - often there are methods that are incontrovertibly “the best” or at least far better than other methods. Design Patterns for interaction and usability, however, is an area that is a bit more subjective - and thus interesting. They are also far more apparent to the common user - whilst a user might not notice (or even care about) your flawless coding, the experience that your website provides them through it’s ease of use will have a definite impact on a user’s “happiness”. Here are 5 Design Patterns for web design that I think contribute to a happy browsing experience…

Instant Form Feedback

Instant Form Feedback

I’ve lamented over unusable forms before, in the Warm Fuzzy Feelings article. Now I’m back and my preferences are more specific than ever!

On any form element that needs to be validated (for example on a “member registration” form, checking that a username has not already been registered), the check should be made immediately after the user stops typing. Too many forms still use the old convention of sending you to a separate validation page telling you “Sorry! This, This, This and This was wrong with your form! Try Again!“. Filling in forms is undeniably boring, and it baffles me as to why anyone would want to risk frustrating users at such a critical time as member registration. You can see my implementation of an instant feedback registration form here.

AJAX Tabbed Content

AJAX Tabbed Content

I’ll get some disagreement here, but I think AJAX Tabbed Sub-Content is a good thing. For an example, take a look at the new Yahoo! homepage. There are two AJAX-powered tabbed sub-content panels that deliver the bulk of the page’s most pertinent information.

Each tab switches out the panel’s content for something else. Now, this could all be done with some simple Javascript and CSS to “hide and show” the content panels, but the beauty of the AJAX method is you can keep your page load time down to a minimum - users get a fast-loading page and don’t have to wait those extra few miliseconds for the (for example) “Sports” content to download in the background, which they might not even want to see anyway. The Yahoo method also uses some extra Javascript to remember what tab you left open from your last visit. Overall, a nice implementation.

Semi-Transparent Overlay Notices

Semi-Transparent Overlay Notices

Popularised by Lightbox and now Digg, I think we are going to see more and more of this design pattern as time goes on, because it makes so much sense. Common website notices such as “you need to be logged in to do that” shouldn’t exist as a separate entity to the action that invoked them. For example if I attempt an action on a website that requires me to be logged in for that action, bringing me to a separate page saying “Sorry, you need to be logged in to do that” is only compounding the problem of my action. I’ll have to wait for another page to load, read the message, and then either go back to log in or log in from this newly-loaded page.

Digg and other sites are now employing a semi-transparent overlay that pops up when you attempt something like the above. Sequentially it makes much more sense - you are not taken away from where you were, you are simply notified of the error and are then free to rectify it from exactly where you left off.

Elastic Design

Elastic Design

Elastic Design is in very basic terms, building your site so that it scales relative to the user’s desired text size. For a good example go here and make your browser’s text size bigger or smaller.

In practice it can be quite frustrating for a web designer to build a site that is completely elastic, retains the design aesthetic at any size and also displays correctly in all browsers - but I think Elastic Design Elements are definitely a design pattern we will see more of in the future.

Why is this good for users? Well, not everyone wants to view the site at the font-size you specify. Users can always change their browser’s text size - but in a fixed, non-elastic design, increasing the text size can both mess up the layout or just look silly when you have text columns with 5 words to a line. Creating a fluid, elastic design with a content column that preserves the line width (in terms of words) creates a much better experience for users who need to view your site differently to how you intended it.

Public Test Areas

Public Test Areas

There are so many websites and web services requiring registration nowadays that I find myself really evaluating which ones are worth my time before signing up - each sign up is another password to remember, my personal information stored in yet another place on the web, and possibly some sort of newsletter thing in my mailbox now and again. Do I really want all that?

There has evolved a kind of weird opportunity cost to consider, when registering with these web services - despite most of them being free. Therefore, letting a user know exactly what your service is before you ask them to surrender their personal information to you is absolutely vital. A good public test area is a win-win situation - you provide everyone with the chance to try your service, and in return you get registered users who found genuine value in your service, not simply people who were curious and signed up to see what it’s all about, then never came back. For an excellent example of a public test area that lets you play with everything before you sign up, have a look at Wufoo.

35 Comments

  1. Really informative. I especially like the overlay function by Lightbox and Ajax tabs. Now I’m finally getting the gist of this whole Web 2.0 thingy thanks to your article.

    Posted by: Gada on July 27th, 2006 at 10:47 pm

  2. Good stuff. But why have a minimum number of characters for user names (Orchestrate registration)? And why not state the acceptable range, as you do for passwords?

    Posted by: Fred on July 27th, 2006 at 11:24 pm

  3. These are for the most part not very good ideas.
    A whole host of design problems are created by these “patterns” which in reality are just more javascript induced usability problems.
    Good design that serves all users with a minimal reliance on browser specific technologies would be good advice.
    Self validating forms are a good idea, however forcing a server call for every onBLur event in a form especially without a clear affordance as to how the field should be field is a waste of time. Simple validation on the client side may seem easy until you actually try to deal with an internationalized web app.
    Ajax tabs (and yes it is spelled Ajax, note proper case) are a neat idea, however the need to degrade gracefully is paramount. However, if one is so concerned with load times, don’t forget that including 120k of javascript, which must then be interpreted by the client is a far greater performance hit on a slower machine than 300k of static content.
    When all you have is a hammer…

    Posted by: dange on July 27th, 2006 at 11:58 pm

  4. dange > what is more of a waste of time, validating a field asynchronously on the onBlur event, or validating it after it is sent, which means a whole extra page, including text, images etc etc. I’d rather there was a tiny call to a script than to deliver a whole page’s worth of content - in terms of the server AND the user.

    You are right about the bulk of extra javascript but you make it sound as if the benefit of that javascript is seen only in the AJAX tabs. If you are delivering a content-heavy site (and thus can justify using something like AJAX tabs) it’s more than likely that the benefit of a Javascript library to handle this kind of thing will likely be seen across the entire site in all sorts of other functionality. If you are including a 120k library JUST to implement some AJAX tabs then it might be a bit silly.

    As for AJAX / Ajax? Semantics? Depends on whether you view it as an acronym or a buzzword. Today I was in an acronym mood.

    Oh and I have a little request - whenever I hear “not good ideas” I always look to see if any better ideas have been suggested. Either you forgot that part or you don’t have any better solutions? I’m always interested to hear alternatives.

    Posted by: Administrator on July 28th, 2006 at 12:16 am

  5. dange > I disagree with you. You don’t need to do a postback to the server every onblur event. You just check the content with javascript.

    For one or two fields the postback would be OK: User name availability check for example. But for most form elements, it’d be a waste of bandwidth.

    As for the lazy tab loading: if the user doens’t has javascript installed, he/she should get a normal link to the sports section (buzz: onubtrusive javascript).

    Posted by: Okke on July 28th, 2006 at 12:46 am

  6. “As for AJAX / Ajax? Semantics? ” Just responding to the all too common misspellings in the strange colloquialism of the IT field. Sorry for being picky.
    My statement about onBlur server calls was aimed at more complex field validation e.g., validating an international phone number/postal code/captcha. Simple form validation can take place in the JS without taking a performance hit, but these ‘design patterns’ are way too vague about implementation.
    “or validating it after it is sent, which means a whole extra page” -> how about a simple extra page load that is low on graphics and helps the user to solve their problem? Remember that what we want is good data from the user so that we can provide service to them, not something that simply validates. In the end you are going to have to show them a confirmer screen anyway, so provide them with proper affordances to give the right data the first time.
    Example, and this was even on Digg yesterday: Most email validation code will not allow you to have a + sign in your email, however this is a perfectly valid part of the RFC and thanks to Google’s implementation in gMail a wonderful way to track spammers. Which unfortunately doesn’t work most of the time because site designers are obsessed with Regexing the data to death and not simply allowing the user to input the correct data. I have seen on many occasions 20k of code for validating an email address, that could be reduced to a single call to indexof.
    By running the callback you are still hitting the server far more than with a single request. Users that are sending those multiple callbacks will increase server load exponentially, as opposed to a 1:1 hit that a single page load would cause. Additionally, the amount of work that the browser has to perform to manage the memory for Ajax callbacks increases the chance for memory leaks and a performance hit for the client. These can be avoided, but they are all too common in the current crop of browsers.
    I think the primary discussion I tried to start, but came off sounding like a ‘not enough coffee this morning a$$h0le’ is that these are ‘good ideas or suggestions’ and not true design patterns. I was wrong to say they were bad ideas, because they’re not, but a design pattern is not simply a ‘good idea’ it is a well-formed solution that encompasses both the problem and a direct solution to the problem in it’s language. Also there should be a way to model it so that it can be analyzed and integrated into the methodology of it’s user.
    I guess that is what stuck in my craw. I apologize for dissing them as bad ideas.

    Posted by: dange on July 28th, 2006 at 2:24 am

  7. dange > thanks for taking the time to reply.

    You mention giving a user a newly-loaded “barebones” page to give a user information on how to correct that form. I simply don’t see the merit in that, and more than often, it does not happen in real life like that. Forms are never thought about as much as they should be, and it’s far more likely that a site will have some kind of “generic template” including all the superfluous stuff around the content (images, ads, banners, inline javascript, other content requiring multiple database queries etc etc) and just shove whatever instructions the user needs to fix the form in the content area.

    To me, a simple query to a specific row in a database to verify a field asynchronously is far more preferable to loading a page like that, which will be even more of a burden on the server.

    The other problem with your solution is that metaphorically (and this goes for millions of forms around the web) it is flawed. When I submit a form, I am sending it. I’m not asking for it to be checked over, I am submitting it because I am at the end of the form-filling process. The fact that we have come to accept the word “submit” to also mean “please check this and tell me on the next page what I’ve done wrong” is an unfortunate matter of evolution, simply because we did not have the technology 10 years ago to asynchronously check a form.

    I think it’s time for that to change.

    Yes, there are flaws inherent with the design pattern - I think it’s profoundly easy to pick holes in anything web based purely because you are dealing with so many variables. Your point about browser memory is correct, but innovation and adoption of standards would never happen if people just sat around on their hands waiting for everything to be perfect.

    In terms of providing a user with a seamless, natural and non-frustrating experience, instant form validation is one of the things that I feel will make my life on the web much better.

    Posted by: Administrator on July 28th, 2006 at 12:17 pm

  8. [...] W Tokijskim magazynie PingMag, Jon przedstawia pięć webdesignerskich wzorów, które mają być odpowiedzią na najczęstsze problemy użytkowników dotyczące usability. [...]

    Posted by: yashke.com » Elastyczny układ strony on July 29th, 2006 at 12:39 am

  9. I had my first ‘Semi-Transparent Overlay Notice’ experience the other day - very unpleasant it was too! the whole webpage (maximised to full screen) greyed over and a warning message came up in a little box - my intuitive reaction was that OS X had just undergone a kernel panic, I was horrified.

    Posted by: eleventhvolume on July 30th, 2006 at 6:09 am

  10. I tried out your registration form, and noticed that it only allows the use of the english alphabet in the username field and if I use for example, “HassuJäbä” as a user name, it says “Only alphanumeric please”. The problem is that å, ä and ö indeed are a part of the finnish alphabet. So could the message be more specific?

    And you can use any TLD in the email field - real or non-real.

    Posted by: Emil Virkki on July 31st, 2006 at 7:22 am

  11. I find it ironic that I accidently hit Enter before typing in this comment, and it took me to a separate page that said, “Error, please type in a comment.”

    Anyway, while I entirely agree with the idea of validating form information in the background as a user is filling in the form and displaying error indications as soon as possible, your paricular example of that is awful. The instant feedback is about the only thing it has going for it. The “mystery criteria” (how long does a user name have to be, anyway?) are awful, making the user feel like he’s got to solve some sort of puzzle just to pick a user name.

    Posted by: Curt Sampson on July 31st, 2006 at 10:06 am

  12. woah, “awful”? we’re talking about a simple wording fix. Functionality-wise, it works as I explained it should.

    However, whilst I agree with you (and will fix ASAP), there still needs to be a balance between design and functionality. It seems like a very simple fix to just put all the criteria somewhere, such as “Must be X characters long”, “Must have no space”, “Must be this, must be that” - but by doing that you clutter up the page. Sometimes you have to assume that people who are going to be typing in unusually-long usernames are in the minority and you sacrifice 1 second of their time for a better-looking form for everyone.

    Remember, a form that is cluttered and badly-designed eats up just as much of your time and patience as one that functions badly.

    Whilst I probably didn’t get it right (and indeed, I picked my upper and lower bounds rather arbitrarily), I don’t think it’s the right thing to do to start explicitly labeling forms with all sorts of validation criteria where a user hasn’t asked for them and might not want them.

    Posted by: Administrator on July 31st, 2006 at 12:23 pm

  13. [...] This article lists 5 “design patterns” for websites: 5 Web Design Patterns for Happy Users. In summary, the author advocates in-context system feedback, preservation of user’s locus of attention, scalable page layouts, and an access area that doesn’t require user registration. Although all of these are good advices, none of them really fit the tranditional definition of a “design pattern”. Design patterns are repeatble solutions that solve commonly seen problems in a field of practice. The proper description of design pattern needs a motive, a description of the general problem and instuctions on how the pattern can be applied to solve the identified problem. The first 3 points in the article are basically re-hashed basic interaction design principles. Flexible page layouts is again commonly known good (but sadly rarely practiced) web design guidelines. The advice of having a free access area is more of a business proposal and has very little to do with design. A more proper collection of web design patterns can be found here. [...]

    Posted by: connection76 » Blog Archive » 5 Web Design Patterns on August 1st, 2006 at 2:45 pm

  14. [...] 第一次听到”Design Pattern”这个词是从GOF(Gang of Four)的那本经典但难懂的”Design Patterns”里听说的。相信80％听说过的人也都是如此。 今天看到pingmag.jp上的一篇关于web design中的几个作者认为不错的design patterns: http://www.pingmag.jp/2006/07/27/5-web-design-patterns-for-happy-users/。还有篇用小玩偶来表示网站的开发流程，从图片结合文字看真的是浅显易懂：The Website Development Process。 [...]

    Posted by: Liki - from dawn of design » Blog Archive » Design Patterns for Design on August 1st, 2006 at 3:53 pm

  15. Very good information package - to employ creativity back to the hard coded world of html.
    I also decided to check the CSS ZEN Garden and found out they had renewed it since I visited there last time.
    AJAX is interesting but why they had to rip off the MacOSX rotating thingy? They should design better by themselves :)

    Posted by: ヤーッコ on August 2nd, 2006 at 5:46 am

  16. All of the patterns mentioned are very big and will be seen more and more as we keep diving in this so-called Web 2.0.

    I develop intranet applications for a media outlet and I employ all of these patterns and the response from users has been very, very positive. Prior, I used your standard page model and it worked, but once I learned how to integrate Ajax and use the CSS effects for better interfaces, it made all the difference.

    Not only did the users appreciate the changes, it was easy to manage from a developer standpoint. Maybe a little tag soup here and there, but overall every has been quarantined to their respective files; css, javascript, html, etc.

    So long as we can all overcome browser issues, which is do-able using these patterns will only make things better. Just don’t break that Back button!!

    Jon, very good insight on this article and the patterns are understood well enough to tell everyone what they need to know.

    Posted by: Brian on August 7th, 2006 at 10:54 am

  17. take a shot

    Posted by: x-noise on August 12th, 2006 at 2:47 am

  18. Very nice site. Thanks.

    Posted by: Nina Fedorova on August 12th, 2006 at 7:36 am

  19. [...] Una de recomendaciones en diseño web: Dieciséis elementos que debes incluir en el diseño de tu página web y 5 Web Design Patterns for Happy Users. [...]

    Posted by: Criterion :: Diseño gráfico y editorial, recursos y enlaces de utilidad :: on August 14th, 2006 at 8:56 pm

  20. This was so useful, great article.

    Posted by: Pratana Areepitak on August 16th, 2006 at 3:22 pm

  21. To all who do not want to sign up at a web site for a single download or to try it out, I can recommend http://www.bugmenot.com, which has many passwords and usernames for many sites.

    Posted by: Lenny on September 4th, 2006 at 8:13 am

  22. I have another one for you that is becoming more and more common on the web (well 2.0 at least): secure urls. You get a personal url for a page you define. The url has some long (e.g. base64) code in it, and is sent to you by email. It will not be found by spiderbots and you can send it to friends. That way a signup is not needed anymore, and you still have semi-personal data.

    Posted by: Michiel van der Blonk on October 3rd, 2006 at 5:12 am

  23. Some interesting reflections about communications and design:
    http://fadtastic.net/2006/10/25/jorge-frascara-about-designing-effective-communications-communication-design/

    Posted by: Johan on October 28th, 2006 at 8:48 pm

  24. [...] Паттерны дизайна для счастливых пользователей 5 Web Design Patterns for Happy UsersИсточник: PingMag [...]

    Posted by: p1uton » Паттерны дизайна для счастливых пользователей on June 17th, 2007 at 12:20 am

  25. [...] Паттерны дизайна для счастливых пользователей 5 Web Design Patterns for Happy UsersИсточник: PingMag [...]

    Posted by: Блог про юзабилити и дизайн интерфейсов » Паттерны дизайна для счастливых пользователей on August 25th, 2007 at 2:31 pm

  26. hey mate!!! we are from down under!!! Australia if you dont know what down under is!!!! plz comment bak i would love to hear from you. i luvthe t-shirt designs on this site they ROCK!!!!!!

    Posted by: lauren on August 27th, 2007 at 1:50 pm

  27. OMG AUSTRALIA ROCKS!!!!!!!!

    Posted by: lauren on August 27th, 2007 at 1:51 pm

  28. melissa u are one werid girl!!!!!! wat are you talking about?????????? tara omg im so effing bored!!!!!! i srsly cant be botherd to open my mouth and say this so im just typing it and using up room :)

    Posted by: neelam on August 27th, 2007 at 1:52 pm

  29. Great post. I really agree with lauren comment

    Posted by: Edwardian Conservatory on February 21st, 2008 at 5:46 pm

  30. nice looking designs

    Posted by: web design on June 19th, 2008 at 3:09 am

  31. Design with lot of variations. good work

    Posted by: list of 10,000 web directories on June 28th, 2008 at 11:43 am

  32. Great concepts to think about…

    Posted by: Flavio Hebaru on September 19th, 2008 at 9:50 pm

  33. internetten para kazanmanın tüm yollarını bulabileceğiniz bu sitede evede oturarak para kazanmanın keyfine varacaksınız.

    Posted by: internetten para kazanmak on May 16th, 2009 at 2:09 am

  34. Great concepts to think about…

    Posted by: ek gelir imkanı oluştur on September 11th, 2009 at 7:46 pm

  35. Fantastic of your tips should include your sidekick coming in with a bucketful of water and throwing it completely terminated you. That exercises.
    montreal outcalls

    Posted by: zeeshan on June 5th, 2010 at 12:33 am

  • Share and Enjoy:
  • del.icio.us
  • digg
  • Fark
  • NewsVine
  • RawSugar
  • Reddit
  • YahooMyWeb
Previously on PingMag