That being said, while the industry has made tremendous progress, some hurdles are still in place. In the end, taming forms is possible; it just takes some work.

In this post, we’ll take a look at some of the most used form controls and at different tools and plugins that should help you with the deployment of forms in your websites.

If you have any other tips or links to other useful resources, feel free to post them in the comments.

Breaking down the controls

Let’s start by dividing them into two buckets, because some form controls have never been much trouble to work with.

Friendly controls

The controls that are easiest to work with are the basic input box, text area and button. They work well with standard CSS and, fortunately, are the most common form elements. If you don’t need to use the more difficult ones, then you’re lucky.

With the progress of CSS3 rounded corners, drop shadows and gradients, many of the most common styles are now even easier. You have nothing to fear with these controls.

Troublesome controls

Certain other form controls can be a massive pain in the neck. For example, if you design a drop-down control that is extremely stylized, the developer will likely want to have a chat with you. Your options for styling will be quite constrained: border color, padding, background color, that sort of thing. If you need more styling than this, I suggest you consult with the developer to ensure you’re not creating a major problem for them.

Troublesome form controls include:

• select multiple,
• select drop-down,
• checkboxes,
• radio buttons,
• file upload.

Modern tools for forms

As mentioned, a number of incredible tools are available to help you whip form controls into shape.

Formalize is your secret weapon for getting basic form controls and styles to behave consistently across browsers. And its default styles are clean and beautiful. This awesome library also works perfectly with a wide range of JavaScript libraries, such as jQuery, Dojo and MooTools.

Form control replacement

If you want to do some radical things to a form, helpful tools are available. A brilliant tactic for taming web forms is to hide the actual control and replace it entirely with a manufactured one. This gives you far greater control over how the form renders.

One great example of this is Uniform, a jQuery plug-in for creating slick forms. It comes in three different themes. And if you want to create a custom theme, just use the service’s CSS generator to easily skin the plug-in.

Another jQuery plug-in Niceforms. While it doesn’t have the handy re-skinning functionality of Uniform, it does offer a basic style that could very well fit your needs as is.

Finally, there is the commercial jQuery extension Wijmo. The module we’re interested in here is the form decorator, which is actually free to use. It tackles a few of the more problematic controls: checkboxes, radio buttons and drop-downs. Being part of a larger commercial library, this tool brings some benefits, the foremost of which are strong documentation and paid support. Finally, I love the way it handles skinning; it uses the jQuery UI ThemeRoller, making easy work of custom designs.

Invented form controls

Finally, if there isn’t a form control that does what you need, you could invent one! Some very smart people have already done a lot of this, and perhaps one of their tools already fits your needs.

Sliders

One thing that is missing from standard HTML (but is a part of HTML5) is a basic slider control. There are many answers to this, including one from Wijmo, which is based on the jQuery UI slider.

Uploaders

While you could use the file input control to enable users to select a file for uploading, you might want something a bit snazzier, especially if file uploads are critical to your website. One of the best solutions is Uploadify. It allows users to select multiple files and to view progress. It comes with a variety of layout and functionality options.

Slider-style checkboxes and radio buttons

One popular UI element (thanks to the iPhone) is the on/off switch that slides from side to side. With this handy jQuery plug-in, you can transform a basic checkbox or radio button into one. Whether you call this an invented form control or a form replacement tool, it is a great way to enable users to turn options on and off.

Creative buttons

jQuery UI is another interesting take on basic controls. What it labels as buttons could also be used to make option sets based on buttons, radio buttons and checkboxes. In doing so, you transform these controls into a different visual form. In the image below is a set of radio buttons styled as a row of buttons.

HTML5 Forms

HTML5 has brought a lot exciting possibilities to web forms. While it is beyond the scope of this article, it’s still relevant. Here are some key resources to help you dig in:

• “A Form of Madness,” Dive Into HTML5;
• “Fun With HTML5 Forms,” Richard Shepherd;
• “HTML5 Forms,” Wufoo;
• “Have a Field Day With HTML5 Forms,” Inayaili de León.

In conclusion, form controls are one of the most critical hurdles in developing a basic website.

A designer who understands the limitations, knows the tools and recognizes opportunities for easy tweaks will be able to make informed decisions that ultimately improve the bottom line.

Written by Patrick McNeil,  a freelance writer, developer and designer. In particular he loves to write about web design, train people in web development and build websites. Patrick’s passion for web design trends and patterns can be found in his books on TheWebDesignersIdeaBook.com. Follow Patrick on Twitter @designmeltdown.

Never Ending WordPress Business Bundle – only $14!

Given this fast pace, many small details that are eventually required to build the website are often left out of the design process. While these details might be minor, they are what take a website from nice to truly awesome.

These details are often easy to miss because they don’t drive the overall look and feel of the website. The problem is that as your development team works through the design, it will be forced to design and create these elements for you anyway.

You could adjust the production cycle so that the developers have time to return these assets to you, but why not just get it all done up front so that the process is that much cleaner?

Even worse, the development team might decide to forge ahead and just create the assets as they go.

While many developers have a keen eye for design, the creative who is charged with designing the website should ultimately be the one who plans for these elements. Planning ahead for the subtlest nuances can have a profound impact on the quality of the final product.

Every element covered in this article stems from a question that a developer would ask the designer if an element were missing from the design.

Let’s dig into the 10 key elements to keep in mind as you polish your website.

1. Links

While styling the various states of a link is indeed rather basic, you might be surprised by just how often all of the extra details are overlooked. Include the following states for all links on the page:

• Normal
  This is the default state of a link; i.e. one that is not being hovered over or being clicked or pointing to a URL that the user has already visited. This is the link format that the majority of designers always cover.
• Visited
  This is a link that is not being hovered over or clicked but whose target has been visited by the user.
• Active
  An active link is one that is currently being clicked by the user. Most developers will replicate the hover state here if a style is not provided to them.
• Hover
  Finally, the hover state is what the link looks like when the user mouses over it. This and the normal states are the ones most designers prepare for.

One detail that is frequently overlooked is that these various states need to be planned for all regions of a website. For example, many websites have dark body copy against a light background, but the contrast is reversed in the footer. You need to plan for all of the various contexts of links found throughout the page.

On Full Moon BBQ, for example, we see basic red links inside the content region and basic white links in the footer below. Again, a tiny detail but important nonetheless.

2. Forms

For many designers, the configuration of forms is critical and impossible to overlook. Yet, for many others, it seems to come as a distant afterthought.

The problem with the latter attitude is that forms often represent the only real way to convert visitors into customers. And without proper planning and design, the usability of these forms could fall flat, crippling the only conversion point of the website. Preparing for these elements is essential, even if they seem much less pressing to clients than color, branding and images.

Two of the most important considerations when laying out a form are:

• Form label
  Forms typically collect personal data that users are reluctant to give out. As such, properly informing users of the exact purpose of the form is wise.
• Input fields and labels
  Secondly, plan for how the input fields of the form will be laid out on the page and how the labels for those fields will be styled and oriented relative to the fields.

When left to their defaults, forms can look awkward. But with proper preparation, the website will look seamless and be much more effective. Let’s look at a great example that must have started with good planning:

This business-critical form on Awesome was clearly well thought out. The entire mission and purpose of the page has been carefully considered. From the title and introduction to the layout of each set of fields, with their labels and control styles, this form is a model of planning.

Planning for forms actually leads us to several other considerations…

3. Button behavior

Buttons can be used throughout a website for various purposes, but they too seem to be often neglected, as do the various states of a button. The four states of a button are:

• Default
  This is the default state of a button, waiting to be clicked. Most designers cover this one but miss the others.
• Hover
  The hover state is seen when the user mouses over the button. This state is helpful to indicate to the user that the button is an actionable item.
• Click
  Once the user clicks the button, this state visually indicates to them that they have clicked it. Providing this visual cue can help minimize the frustration of users.
• Disabled
  The disabled state of a button is perhaps the least used but can be very helpful to developers. Seldom is this state planned unless the designer has prepared a validation process for the form (see the next section).

Much like the various states of links, be sure to consider the various states of the buttons used throughout your website. From pop-up log-in forms to search fields to newsletter sign-up forms, all of these buttons will need corresponding styles.

4. Form validation

An important related detail is form validation. This is the critical point where the website communicates the user requirements and errors in a form. There are three core things to consider:

• Required fields
  All required fields should be indicated. Most often, this is done with an asterisk, as seen on Please Start From the Beginning:

  

• Real-time validation
  Some validation can be done in real time as the user completes the form. This kind of validation informs the user as quickly as possible of any problems with the data they have inputted. This can be accomplished very well with this jQuery validation plug-in:
  
• Post-back validation
  This kind of validation happens after the user has submitted the form. The style used for real-time validation is often repeated here, but another option is to group all errors into a single message, as seen on Moo:
  

5. Status messages: errors, warnings, confirmations, etc.

Users will usually need some sort of feedback after performing an action on your website. The most likely scenario is after submitting a form, but many other events could occur as well. Carefully consider your website and the actions that users might take, and plan for the messages that the website will need to communicate.

On Life Today, we see a validation message that could easily serve as a global style for error messages. And with a slight change in colors and icons, it could also be used for subtler warning or even confirmation messages:

6. Extending the background on larger screens

Depending on the style of the website, the background elements could be a trouble spot for your developers. Most backgrounds are simple and don’t require much preparation, but some are complicated by gradients, patterns and imagery.

Considering that big monitors are becoming more and more commonplace and that most designs are planned for a 960-pixel-wide baseline, a lot of screen real estate is left open. If your background includes anything remotely complicated, it behooves you to plan how it will extend to fill larger screens.

In the example that I built below, I had to accommodate for a wood texture that extended in all directions. Not the sort of thing you want a heavy-handed developer tackling.

7. Base HTML elements

For copy-heavy websites, the design and styling of base HTML elements are fundamental and should not be overlooked. But on many marketing-oriented websites that have a busy layout and a distinct visual style, the base elements are forgotten. And of course, the developer never gets far into creating a website before having to produce a standard page template anyway.

Here are the base elements to always plan for: paragraphs, headings 1 through 6, unordered and ordered lists, tabular data, form fields, images, and bold and italicized text.

On many websites I work on, I put together a style guide to aid the developers, something like this:

8. Website emails

One thing I don’t see any designer plan for is website-generated emails. Such a basic element is easy to miss because it is not typically the core focus of the website. And yet email is a powerful tool that can promote and extend a service.

My suggestion is to carefully review the contents of the website at the planning stage to look for any emails that might be sent. Some of the most common are:

• Mailing list sign-up confirmation,
• Registration confirmation,
• Form-completion confirmation (such as for a contact form),
• Order verification after a purchase.

If you really want to blow the minds of your clients and developers, prepare an email marketing template for the website, too. You’ll provide users with a seamless transition from the website to the inbox, and you’ll maintain careful control over the branding in its various forms.

9. Page stretching

The question of how a design will stretch to accommodate changing content is also rarely dealt with but could be critical, depending on the style of the website. Let’s look at an example where this could have been messed up:

Full Moon BBQ has a tight home page. This design does not allow for much movement or change in the content. Everything has a specific size and placement. So what happens if the owners decide to really lengthen the welcome message or add an image? Fortunately, they have planned for this. As you can see in this mock-up, I have edited the page to include double the text. The page extends perfectly and accommodates for it:

Preparing alternate versions of a layout with much more content can be extremely helpful in demonstrating how to plan for such a scenario.

10. Animations: pop-ups, tooltips, transitions, etc.

On a standard HTML and CSS website (i.e. without Flash), animations and transitions are so easy to overlook. And when overlooked, they will often not even be accommodated at all. So, if animations are critical, your best bet is to provide developers with a sample of how they should work so that the product functions as it should.

Some of the most common places animations crop up are in:

• Tooltips
  Those little pop-ups when users mouse over elements.
• Image rotators
  Home page slideshows are all the rage, and a wide range of options is available for transitions and styles.
• Lightbox
  You can style not only the lightbox itself, but also the transition to it.

Each of these animated elements has a distinct visual style that must be accommodated all on its own.

Why should I care?

Many of the elements presented here seem more helpful to the developers than the designers. To be fair, this is partially true: if you prepare all of these elements ahead of time, the developers will love you. These are the kinds of things that developers get tired of asking for or of having to figure out on their own.

Still, by doing all of this work ahead of time, you keep developers from guessing, and you thus maintain control of the design. And by maintaining control of the design, you have a much greater chance of being able to add the kind of polish that turns an ordinary website into an outstanding one. Some designers refer to this as the secret sauce that makes their designs sing.

And if that isn’t motivation enough, consider this. Designers who plan ahead this well and deliver a package this complete are just fundamentally more valuable. They not only create a higher-quality product, but they also reduce the cost of production. This means there is more room for profit, which of course makes everyone happy.

So, keep all of these finer details in mind, and have fun planning your website. Frankly, these details are half the fun of designing for the web, that ever-changing medium that accommodates user interaction and changing content.

Patrick McNeil is a freelance writer, developer and designer. In particular, he loves to write about web design, train people in web development and build websites. Patrick’s latest book project is The Designer’s Web Handbook; it includes many additional topics along the lines of this article. You can find out more about it on TheWebDesignersIdeaBook.com. Follow Patrick on Twitter @designmeltdown.

What do you design for that everyone else seems to forget? Have you ever presented extras like these to your clients? What sorts of thing do you find developers always asking you to add to a design?

Never Ending WordPress Business Bundle – only $14!

Sometimes clients will suggest things such as forcing all users to register with a six page long form before they can even access the site. They aren’t web professionals, it’s not their fault for not knowing that this isn’t a good idea from a usability perspective.

If you’re going to convince them that this is a bad idea, however, then you’re going to need some rock solid material to back that up. While an element of trust is always important to a working relationship, you have to respect that sometimes clients will just need to see the facts in front of them to fully understand that what you’re saying is correct.

So, what we’ve done for you today is compiled a list of some of the biggest, most compelling usability articles which address common issues. Hopefully this should help you during tough conversations about what does and doesn’t work on a a website.

Bookmark this post, come back to it, use it in meetings and educate your clients on the things which work for other websites, so that they might also work for them.

How Not Forcing Users to Register Increased Sales by $300million

A truly fascinating article covering how one ecommerce site removed forced user-registration during the checkout process, with a result of a $300million increase in revenue. Very impressive.

10 Useful Usability Findings and Guidelines

• Form labels work best above the field
• Users focus on faces
• Quality of design is an indicator of credibility
• Most users do know how to scroll
• Blue is the best color for links
• The ideal search box is 27 characters wide
• White space improves comprehension
• Effective user testing doesn’t have to be extensive
• Informative product pages stand out
• Most users are blind to advertising

Browser Resolution Stats by Google

A big diagram by google showing browsers sizes overlaid on top of a web page and where you should place call to actions to ensure that they are immediately visible without the need to scroll.

The myth of the page fold: evidence from user testing

“People tell us that they don’t mind scrolling and the behaviour we see in user testing backs that up. We see that people are more than comfortable scrolling long, long pages to find what they are looking for. A quick snoop around the web will show you successful brands that are not worrying about the fold either.”

247 web usability guidelines

A massive post of usability articles covering:

• Home page usability: 20 guidelines to evaluate the usability of home pages.
• Task orientation: 44 guidelines to evaluate how well a web site supports the users tasks.
• Navigation and IA: 29 guidelines to evaluate navigation and information architecture.
• Forms and data entry: 23 guidelines to evaluate forms and data entry.
• Trust and credibility: 13 guidelines to evaluate trust and credibility.
• Writing and content quality: 23 guidelines to evaluate writing and content quality.
• Page layout and visual design: 38 guidelines to evaluate page layout and visual design.
• Search usability: 20 guidelines to evaluate search.
• Help, feedback and error tolerance: 37 guidelines to evaluate help, feedback and errors

An Introduction to Using Patterns in Web Design

A fascinating article covering the use of patterns for usability in web design, or “chunks” as the author calls them!

F-Shaped Pattern For Reading Web Content

Eye-tracking visualizations show that users often read Web pages in an F-shaped pattern: two horizontal stripes followed by a vertical stripe.

Top Ten Mistakes in Web Design

The ten most egregious offenses against users. Web design disasters and HTML horrors are legion, though many usability atrocities are less common than they used to be.

Weblog Usability: The Top Ten Design Mistakes

Blogs are often too internally focused and ignore key usability issues, making it hard for new readers to understand the site and trust the author.

Top-10 Application-Design Mistakes

Application usability is enhanced when users know how to operate the UI and it guides them through the workflow. Violating common guidelines prevents both.

Mega Drop-Down Navigation Menus Work Well

Big, two-dimensional drop-down panels group navigation options to eliminate scrolling and use typography, icons, and tooltips to explain the user’s choices.

10 Usability Crimes You Really Shouldn’t Commit

A big post by Chris Spooner covering forms, logo links, link states, alt attributes, background images, content, link text and text alignment.

101 Five-Minute Fixes to Incrementally Improve Your Web Site

An absolutely huge post covering quick improvements for usability across so many different levels. This is great one for picking out things that your client’s site might need to have done to it!

Blasting the Myth of the Fold

Another article slamming the idea that nothing below the fold ever gets seen. Users know how to scroll. The fold is relevant for a few things, but it is not the be-all and end-all.

UX Myths

A great site which is regularly updated with a list of (sometimes funny) myths of user experience issues, these include things such as “all pages should be accessible in 3 clicks” and “the home page is your more important one”.

Eyetracking points the way to effective news article design

Real eye tracking tests carried out and showing interesting results with regards to the effectiveness of laying out new articles and blog posts.

Label Placement in Forms

A detailed case study showing that the optimum placement for label forms is to the top-right of the form field.

12 Standard Screen Patterns

A great rouncup of some standard screen layouts which may pursuade clients away from spherical invisible navigation, or similar.

“Mad Libs” Style Form Increases Conversion 25-40%

This interesting article covers how well forms work when arranged as blanks within sentences rather than simple linear pages.

Breadcrumbs In Web Design: Examples And Best Practices

“On websites that have a lot of pages, breadcrumb navigation can greatly enhance the way users find their way around. In terms of usability, breadcrumbs reduce the number of actions a website visitor needs to take in order to get to a higher-level page, and they improve the findability of website sections and pages.”

Inline Validation in Web Forms

A study by A List Apart on inline validation in forms with live user videos showing the differences between standard forms vs inline validation.

This post was authored exclusively for WDD by John O’Nolan, a core contributor to the WordPress UI Team, writer and entrepreneur based in Surrey in the United Kingdom. John loves to talk to people, so why not follow @JohnONolan on twitter too?

What about you? Do you have any really great articles like these which you think would be a good addition to the list? Drop us a line in the comments below so that everyone can benefit from them!

Never Ending WordPress Business Bundle – only $14!

But the truth is that kids in the 3-12 age group are using the Internet in surprising numbers. Ten years ago, it was rare for a child who hadn’t even yet reached school-age to use a computer. Now, there are a surprising number of websites specifically catering to them. And that number is growing all the time.

The Nielsen Norman Group, long known for their usability studies, has recently completed a study on the Internet habits and related usability issues often encountered by kids in the 3-12 age group.

The report is based on actual user studies, rather than just surveys asking kids what their internet habits and experiences are, and provide invaluable insight into the real usability issues confronting kids, and what users can do about it.

Below is just a brief sampling of some of the topics covered in the report and the study. The report can be purchased and downloaded from the NN/G website.

Myth: Kids Have Cutting-Edge Technology

A lot of us tend to believe that kids have access to cutting-edge technology. They have the newest computers, cell phones, and other gadgets at their disposal. While this may be more common among teenagers, younger kids often have outdated computers.

If you think about it for a minute, it makes sense. Kids in elementary school often aren’t as dependent on computers for schoolwork, and therefore parents often give them hand-me-downs (either their own or from an older sibling) or less expensive machines. This not only means that kids often have computers with slower processors, but may also be more limited in internet connection speeds.

Even the computers kids use at school are often older and outdated. School computers are often donated and budgets for new technology are often very limited. School computer labs may hang on to the same computers for five years or more due to budgetary restrictions. And often these computers aren’t particularly cutting-edge when they’re purchased.

Myth: Kids Understand the Technology They Use

A lot of adults look at kids using computers and assume they understand how they work. After all, a lot of these kids have grown up using computers and it seems like second-nature for many of them.

The truth is that just because kids know how to use something doesn’t mean they have any clue how it actually does what it does:

Like most adults who don’t understand how a refrigerator works, kids do not feel they need to understand the underlying mechanisms of the Web before using it.

Because of this, it’s important that designers don’t overestimate the knowledge of their visitors. It becomes more important as a user’s age decreases, as they have less experience in how technology generally works.

Myth: Kids are More Web Savvy Than Adults

Because kids often spend so much time using technology, people often assume they’re much more savvy online than adults. But the truth is, they have just as many problems with usability as adults do.

Don’t think that you can skip certain principles of good usability with the idea that kids will just figure it out. Kids don’t have any special powers that allow them to circumvent usability problems. And in fact, when talking about the youngest web users, they’re often much less savvy with the Internet than their parents. They have no experience online to draw from, and therefore are constantly learning new things.

The youngest users do not know where to click and what to do on a website. There are no rules because the users are not aware of them. Many of the inexperienced users do not know how to read. How do you tell children what they are supposed to do when they cannot read instructions?

That last part presents a particular challenge to designers. Visual cues are particularly important for sites with younger user groups. Even on sites where the target audience can likely read, remember that reading comprehension is still a huge variable among young children and keep your instructions simple and straight-forward.

Kids Have Little Patience Online

We all have a tendency to stop using sites that frustrate us because of poor usability or other issues. Kids and teens do so even faster than adults. If they have issues using a site, they’ll leave almost immediately, where adults might click around and try to figure it out.

Kids also get fed up with loading times for things like videos. This can be compounded by the fact that these kids often have older and less powerful computers than their older siblings or parents. Designers should be very wary of longer load times, or at least make it clear how long kids can expect to wait (ex, using a progress bar rather than just a “loading” text or animation).

We saw several kinds of reactions while users were waiting for Flash files to download, but they all showed their dissatisfaction with the website when they had to wait. The longer the users had to wait, the worse their reactions got. Many just clicked the Back button.

Kids Are Online to Be Entertained

Adults often go online for information. They check out news sites, visit portals, and use search engines. Kids, on the other hand, mostly go online for entertainment (and homework). They play games, check out sites about their favorite characters or celebrities, and otherwise have fun online.

If the site you’re designing isn’t strictly an entertainment site, adding entertaining elements like games or other interactive content can greatly improve the site’s engagement among younger visitors.

Because many kids look for entertainment on the Web, multimedia elements are very attractive when they serve content in a richer and more amusing way.

Take Into Account Poorer Motor Skills

Designers often forget about the physical differences between children and adults when designing a site. Kids are less dexterous than adults, and therefore have a harder time typing and manipulating a mouse. This means they tend to make more mistakes than adults.

Kids also had trouble using the mouse and they often clicked on the right button by mistake, and many didn’t know how to drag. They…often missed the target and clicked a different item close by, by mistake.

Designers should take care to make links and clickable areas large and well-defined, with buffer space between them to help minimize the number of mistaken clicks kids make while using their sites.

Kids Are More Likely to Experiment Online

Adults often have very strict preconceived notions about how things should work online. They’re used to sites they visit behaving in a certain way, and expect similar sites to act in similar ways.

Kids, because of their limited experience online, don’t have all those same preconceived notions about the way things are supposed to be. Because of this, they’re much more willing to experiment with different elements of a website. Kids will even sometimes engage in a “minesweeping” method of exploring a website, where they basically just click randomly hoping for a response.

Because of this, designers need to be careful to remove unnecessary and extraneous links from their pages (or move them to places where kids are less likely to click, like below the footer) so kids don’t accidentally click on content that’s unlikely to engage them (like an about page or information intended for parents rather than kids).

If a kid gets lost on your site, they’ll often leave rather than knowing to use the back button to get back to where they wanted to be.

Kids Don’t Differentiate Between Content and Advertising

Adults often have “banner blindness” and ignore promotional or advertising content on websites they visit.

Kids, partly because of their limited web experience, make little distinction between advertising and promotional parts of a website and the site’s actual content.

This is both good and bad. It’s great for advertisers, who can often lure kids away from sites they’ve intentionally visited much more easily than they can adults. For site owners, it can be detrimental, as kids often leave a site without even realizing they’ve left.

So What Does That All Mean?

If you’re designing a website for young children, it’s important to note the differences between the way kids use the Internet and the way teens and adults do. Kids are much less forgiving in a lot of ways than adults, and will more quickly abandon a site that doesn’t meet their needs and expectations.

If you’re a designer who takes on projects aimed at kids on a regular (or even occasional) basis, it’s worth checking out the full-length study from Nielsen Norman Group.

Understanding how kids actually use the internet (rather than how they say they use it, which often varies widely from the truth) will greatly improve your ability to create websites that are engaging for this often-overlooked group of Internet users.

For more information, you can purchase and download the full report from the NN/G website.

Written exclusively for WDD by Cameron Chapman.

Never Ending WordPress Business Bundle – only $14!

Gradients and colors and contrast are all good, but there’s a more important side to web design that many people overlook most of the time: Designing emotions.

Discussing emotion in design is a bit of a hot topic at the moment, it seems to be popping up in more and more blog posts and speaker sessions. In fact I saw at least three different web designers say that it was the subject of the talk which they had recently submitted for next year’s SXSWi.

So what’s all the fuss about? Today we’ll take a look at what that means, how you can do it and why you should. This is taking design to the next level, beyond the norm.

Emotion Design

Emotions are important in design because emotions are important in absolutely everything.

Everyone is trying to make their brand, their website, their name the most memorable thing possible but how are they going to accomplish that? Think of the most memorable times in your life, right now, go ahead.

I’ll wager a good amount of money that the three to four things that you just thought of all involved a lot of emotion. The death of a loved one, the birth of a child, your wedding, the day you bought your first car. We remember the things which instill powerful emotions within us.

In his book, The Alchemies of The Mind, Jon Elster emphatically states that “Emotions matter because if we did not have them nothing else would matter. Creatures without emotion would have no reason for living, nor, for that matter, for committing suicide. Emotions are the stuff of life…. Emotions are the most important bond or glue that links us to others…. Objectively, emotions matter because many forms of human behaviour  would be unintelligible if we did not see them through the prism of emotion.”

Using Emotion in Web Design

As a web designer, it’s very easy to get caught up in just the design of the graphics. Of course the next step beyond that which everyone gets stuck on is usability.

So many people talk about usability like it’s the be-all and end-all of web design. As one speaker at the Future of Web Design in London succinctly put it this year: “Designing a website to be usable is like baking a cake to be edible. It’s simply not enough. A usable website should be the minimum requirement, it should go without saying that a website should be absolutely usable. It’s time to look beyond that.”

At the most basic level of considering your users’ emotions, you can consider letting them choose how they want your site to work. What content do they want to see on the home page? What order do they want to see it in? What’s their favorite color? Allowing users to customize your site to their preferences (without having to sign up for anything) creates and emotional attachment to the site with which the user is interacting. They’ve just invested time, however little of it, to make this site perfect for them. They’re going to remember that. Check out the BBC website if you want to see this in action.

What about making users happy without them having to do any customizations though? What about creating something that is so naturally pleasurable to use that people can’t put it down? Well, allow me to introduce you to my good friend: The iPhone.

The iPhone isn’t actually the story here, it’s the touch based device, regardless of who it’s manufactured by. As human beings we live in a real world, touching real things, moving them with our hands. In fact, if you think about it, computers are incredibly unnatural to use: We move one thing on our desk that moves another thing on a screen, and we spend hours pushing complex button combinations with our fingers whilst looking in a completely different (vertical) direction.

People are enthralled with touch based devices because they make computers work in a way that we’re naturally programmed to understand. We see something, we touch it, and it responds in some way. I recently watched a three year old girl navigating her way around an iPhone with absolutely no problems at all. The best part? No one had ever taught her to use it.

Touch based devices create emotions within us: joy, intrigue, and surprise. We understand them perfectly and yet they still thrill us because they’re so clever.

Creating Emotions

So how can we create emotions for users of our websites outside of the UI? Well, to an extent you need to put your marketing cap on here. You need to think about people, not design.

You need to think about perception, not composition. If you can ask yourself a few vital questions about how your users are feeling, then you can go a long way to pleasing them.

Consider FreeAgent for a moment, a fantastic piece of accounting software in the UK, they know that typically people who visit their website are angry, frustrated, and fed up with trying to do their accounts (and failing). Their website is targeted almost solely at cheering you up and telling you not to worry, there’s an easier way to do things. They win.

Desire

But what about creating emotions at more of a root-level? Apple (yes Apple, no article about design would be complete without some mention of them, so we might as well get it over with) create astonishing levels of desire and jealousy amongst their customers.

Despite producing over-priced, under-performing, over-rated products they still retain unprecedented success, constantly. Apple are the biggest fashion label of the tech world. That’s not an insult by the way, sex sells, and everyone else needs to catch up. Apple makes desirable products.

“Thin, beautiful, portable, durable, accessible, powerful, unlimited, magical, revolution.“

Sound familiar? All of those words and sentiments were used in Apple’s 30 second advertisement for the iPad, and not a single one of them has anything to do with what the product does.

Sympathy

Another common case study of companies creating emotions in customers, and this is going to be a controversial one, is with charities.

Charities instill sadness and sympathy from deep within you, in order to make sales. Think of every advertisement you’ve ever seen for a charity… most of them go like this: “Sally is a [starving child / stray dog / person with a terminal illness], she’s all alone. Her parents died just after she was born and she’s been living on the streets like this ever since.”

The cause may be just, but don’t mistake the marketing tactics as legitimate sentiments appealing to your moral integrity. The people who create those advertisements know exactly what they’re doing. They’re making you sad, they’re making you sympathetic, and they’re making you want to reach out and help – with your wallet.

Anger

Possibly the most interesting way to look at deliberately instilling emotions in users is from the perspective of anger.

Now, this has been suggested before, but to my knowledge never confirmed. What do we consider to be great customer service? Usually it’s when a company gets something really wrong, they own up to it, give you a full refund and treat you really well.

It’s unexpected and we absolutely love it. It may be cynical, but is it really unreasonable to think that companies may now be screwing up your order on purpose? If I was running an ecommerce store I would deliberately screw up about 5% of all my orders – then give the customer a full refund and send them the product anyway.

You can’t buy publicity like the way they’re going to talk about that to all their friends.

Closing Comments

Just because something functions correctly, doesn’t mean it’s any good. We need to stop thinking about usability for two seconds and push ourselves to go a little further than that. How are my users feeling? Why are they even on this site? What is going on in their life that made them come here?

What emotional reaction are they going to have to this site?

You’d better hope the answer to that last question isn’t “nothing in particular” because if it is, then you failed.

Study emotion, understand it, understand how it fits into what you’re doing and then use it to your benefit. Whether you use your understanding for noble purposes or not is entirely up to you, but take the next step and start designing emotions and experiences, not just aesthetics.

This post was authored exclusively for WDD by John O’Nolan. John is also going to be authoring a short title on designing emotion with WooThemes founder Adii Pienaar, so make sure you follow @JohnONolan on twitter for updates!

What do you think? Have you come across any really good examples of companies instilling emotions in users? Better yet, have you used any techniques like these yourself and had success? Let us know in the comments below!

Never Ending WordPress Business Bundle – only $14!

Some have automatic slideshow capabilities or buttons to scroll sideways or up and down, and most of them feature a transition effect, usually a slide motion.

Sliders can be great focal points on websites and blogs as they instantly draw the audience’s attention and provide for an easy and sleek way for visitors to interact with a lot of information that can be sorted through quickly.

In this post, we have compiled a massive amount of content slider examples that you can use for inspiration on your own websites. Enjoy!

Violet

Kodu

Teoskaffa

Tea Round App

Dailymile

The Great Bearded Reef

Templatica

Iceberg

Daniel Stenberg

Flourish Web Design

Howarths

Andy Shaw

Suki

The Horizontal Way

MetaLab

Digital Convulsions

SlideDeck

Seventy7

Richie Qilayout

Auxiliary Design Co.

Made By Elephant

MyGoLocker

Icon Designer

Food, Inc

Sketchen

Electronics Arts

Eric Johansson

Lodjixmedia

Holdifre

Apple

Paramore Redd

Pixelounge

Benjamin David

Lomotek Polymers

TweepMe

Vegas Uncork’d

Nike

EnterRodaGata

Alienware

Also Design

Traffik

Zendesk

Branded07

Helldesign

Slice Machine

JP3 DESIGN

FKQ

ShoeGuru

Go-On-Web

Tutorialzine

Dreamer Lines

Sunny Zheng

Visuall

Jarnheimer Productions

Tracermedia

Robert Atlan

A Simple Measure

Sean Nieuwoudt

Front-End Design Conference

Coda

Suberapps

Spundo

Hello Themes

Eighty8Four

Miro

Deluge Studios

Microsoft

Lucas Hirata

Threadless

Simplicity Law

Viewport

Sprinkle Penny

GoBible

Arteria Plastica

Wall Swaps

Lift

8Interactive

Rapid Xhtml

Find Me By IP

Cu3Er

Domenico Tedone Design

NETWiSE Strategies

Redesign Unit

Josh Smith Portfolio

Mint

Department of Infrastructure and Planning

Galan

Larkef

Direct Design

Nealite

World Wildlife Fund

Fat-Man Collective

Netdreams

Nuemedia

Viljami Salminen

OSDN

Chantyce

Giraffe Restaurants

Add Noise

Nosotros

HABITAT 4D

Go Site Wave

Do you use content sliders? How do they affect your website usability?

Never Ending WordPress Business Bundle – only $14!

Anyone can preview this redesign by creating an account, logging in and then clicking the “Try Beta” link at the top right of any page.

The “Wikipedia Usability Initiative” has been divided into two phases. Phase 1 was the prototype phase, and it ended in the summer of 2009.

The project team is currently in the second phase, which is the development and testing phase.

The project has also been separated into four releases; as of the writing of this article, the second release (Babaco) is currently in development.

In this article, we’ll discuss Wikipedia’s design changes and the reasons behind them.

The Wikipedia Usability Initiative is scheduled to be ready in the spring of 2010. More information about the project can be found here.

The redesign is focused on usability. Although no drastic changes have been made, the overall look and feel of the website is much cleaner and more modern. The revamped editing interface is a major upgrade that Wikipedia editors will surely get excited about.

Like many small-scale operations, Wikipedia does not have the budget to systematically test how visitors use the website. Instead, it relies on feedback from users to pinpoint and address issues.

Cleaned Up

Our first impression of the beta redesign is that it looks quite sharp and tidy. The layout is still fundamentally the same; this redesign likely won’t cause the same outrage that Facebook stirred with its redesign back in March 2009.

The most obvious change is that the various components on the page are no longer confined to their own box. The navigation and main content areas are not closed in, and they extend all the way to the edge of the browser window.

The other obvious change is that Wikipedia has retired the background image of the open book. This cleans up the design significantly and makes the logo look much sharper.

Old design:

New design:

Slight Change in Colors

On the whole, the new design looks softer. The navigation links in the left sidebar are now slightly bigger and easier to read. The link colors throughout have been altered slightly to make them less vibrant.

The old link color (left) compared to the new link color (right):

The old visited link color (left) compared to the new one (right):

Changing the visited link color from purple to dark blue goes a long way to making the website look more modern. It also simplifies the color scheme and makes the appearance more professional.

Search Bar Relocation

The one change that might trip up regular visitors is the relocation of the search bar.

It is no longer nestled in the middle of the navigation section. It has been moved to the top-right of the page. This placement has become standard on many websites and is where people look first when they want to perform a search.

The new location of the search bar:

Reorganized Tabs

The tabs have also been reorganized. They’ve been given a new look and are now easier to spot. Dividing them into two groups makes their structure more logical. The fading top of the tabs opens up the page, too.

Old design:

New design:

Page Editing

The new page-editing interface is wonderful. The mixture of textual and graphic icons and the grouping of editing options makes editing much easier.

To figure out what each button did before, the user had to hover over the unintuitive icon and wait for the tooltip to pop up; not anymore. And the new panel to the right of the text area helps users navigate the page.

Old editing interface:

New editing interface:

To turn on the new features, go to your “Preferences,” and then click on the “Editing” tab. At the bottom, you’ll find some checkboxes labeled “Experimental.”

Enabling the experimental features:

The latest release includes new dialog boxes for inserting links and tables. Because the text area can get a bit cluttered, these dialog boxes are handy for helping users focus on one task at a time.

The table dialog box could do with more functionality (such as allowing you to edit the contents of table cells), but this release is still in development, so I’ll wait to see if more comes before officially adding features to my wish list.

The dialog box for inserting a link:

The dialog box for inserting a table:

What’s Missing?

Because the project is still in beta, now is the best time to suggest what else can be done to improve Wikipedia’s user interface. Here are my ideas:

• AJAX BeautyTip preview on link hover
  It would be neat if a tooltip appeared, via the BeautyTip jQuery plug-in, whenever you hovered over an internal link. The tooltip would contain the first paragraph of the linked article. The increase in bandwidth from this feature might be too big, but I’d still like to see it tested.
• Syntax coloring in the editing text area
  Working with code all in the same color is very difficult. The human eye has to scan the text linearly to find it wants. Visual hints would be a huge help. While we’re at it, the text area should also have a horizontal scroll bar so that things like tables look nicer in the code.
• Option to have fixed-width body text
  When I’m reading a long passage of text, I like to maximize my window to minimize distractions. As it is, I can’t do this because the lines of text become wider than my widescreen monitor. I would love to be able to fix the width of paragraphs to around 600 pixels to make reading easier.
• Increase visual weight of “Go” button
  The one change I’m against is making the “Go” button the same weight as the “Search” button. The old design weighted the “Go” button text a little heavier, making it obvious that hitting the “Enter” key was the same as clicking the “Go” button. The difference in weight was small enough that users could see the difference only by looking right at it. This should be brought back.

Try It Out!

The new design looks pretty good, but it’s not finished yet. I’m sure that the Wikipedia Usability Initiative team would appreciate everyone trying out the beta and sending feedback.

Wikipedia depends on its users to figure out how to improve the website, and I’m certain the Webdesigner Depot community can come up with some great ideas.

Lastly, consider donating to Wikipedia. Because being able to read about old Nintendo games without Evony ads littering the page is rather nice.

Written exclusively for WDD by Eli Penner.

What do you think of Wikipedia’s upcoming design? How would you improve the design?

Never Ending WordPress Business Bundle – only $14!

During the design phase, it’s all about the look, and either the coding can be taken care of later, or be outsourced to a developer.

Either way, not thinking about the development usability or functionality is a great way for a designer to not feel limited in the design process.

This is a great way of thinking, and can lead to the best designs. However, once it does need to be coded, we as designers are in a tricky spot.

In this article, you’ll find a few simple tips that can help designers learn basic XHTML/CSS conversion efficiently for a quick-loading website that is accurate to the original PSD.

We either must slice and code the designs ourselves, or turn away part of our profits to an outsourcing PSD to XHTML/CSS company or developer. As primarily designers, the second option is usually the best choice for the client, because it will provide the best results.

Sometimes though, as with smaller projects or otherwise, we need to code a website ourselves. Whatever the reason, it shouldn’t be a fall-back, or something that takes up too much time.

Doing it Yourself vs. Outsourcing

This article is more targeted towards web designers, although hopefully those who are developers can take something away from it too. Focusing back onto the designers, though, it is common for many web designers not to like to code websites. We like to design. There are a few exceptions, but for the most part this is the attitude towards it.

Many designers have discovered the benefit of outsourcing: pay an outside company to slice and code your design, get it back in a few days, and save yourself the time and effort of doing it yourself.

If one is not experienced with coding a website efficiently enough, spending too much time on it may not be worth what you’ll be getting paid for on a project.

For example, if an inexperienced coder were to spend several hours trying to figure out how to code a design they just created, their time spent can easily be worth more than what it costs to just simply outsource the job.

Also, charging the client for the outsourcing work instead of your own labor can be cost effective for them, as well as time effective for yourself. (Oh, and you’ll be helping out the development community by giving them a bit of business too!)

There comes a time in every designer’s career, though, where it is just not practical to outsource a job. A few examples would be:

• You’re just not at a strong financial point.
  Especially for freelancers, strong financial months come and go. If you’re a bit low in the bank, it may not be the best option to spend $150 or so on outsourcing, when you could be paid the bit of extra for doing the work yourself. While the client would make up for the payment to the outsourcer as part of the project payment, that’s just making your finances break even for the development portion of the website. By doing it yourself, it’s that much more work, but it’s also that much more money in your pocket.
• It’s a small project.
  Is the project under $1000? Is having over 1/10 of the project’s budget not go directly to you worth it? If outsourcing the coding portion too large of a percentage of the project, it is probably more practical to just have it done yourself. Also, smaller projects are likely simpler, so it doesn’t necessarily have to take a lot of time.
• When it needs special customer service or customization.
  Some projects just need a bit more customer care, from you, the designer. Depending on both the client and the project, it may be best to break down the slicing and coding portion into more manageable pieces, with some pieces being variable upon the client’s opinion throughout the process. In any situation where you, the designer, would have to keep altering the code to fit the client’s needs after the initial website is coded, it is probably best to do the entire thing yourself.

So it is up to you based on each project, each client, and each set of circumstances to decide whether to outsource the coding portion or not.

As a benefit to outsourcing, experienced coders can create an identical coded version to your PSD design, while maintaining loading speed and usability.

If you are in the situation where you are having/wanting to slice and code a website yourself, here are some general tips to 1) save you time so you don’t have to work for $2/hr and 2) provide better results for your client, as an experienced developer would, while still saving the outsourcing costs.

1. Slice Effectively

Photoshop and Fireworks come with a built-in slicing tool that allows a designer to code a website directly into HTML. However, even modern versions of these pieces of software create table-based markup. This is not very useful for the modern web designer, of course.

That is why development and website coding is a separate practice that takes its own talent and experience. All web designs need some hand coding and a thought process behind it. No software can do it all for you.

Still, the slice tool in Photoshop and Fireworks can be put to good use for the development portion of the web design. The point is to know how to use the slice tool effectively.

Instead of delving into an entire slicing and coding tutorial here, a great tutorial over on nettuts+ can help many out: “Slice and Dice that PSD.” It goes over the basic thought processes, as well as the technical how-to, for slicing a web design the modern and correct way — while using the traditional slice tool.

It is in a chronological order, with different screencasts for each phase of the development process, as well as useful links to similar and additional screencasts.

The first step is to view these tutorials, and to take the most important points from them: know what images to slice, how to optimize those images for the balance of quality and speed, and what elements of your PSD should be plain XHTML and CSS.

Just watching a more experienced developer’s process and explanation can help a designer with little slicing and coding experience witness a process that is more efficient.

2. Simplify CSS

Sometimes, the first way one figures out how to use CSS to achieve a certain effect is not the best way to do it. If you find yourself creating too many custom classes, or complicated tactics otherwise, to achieve one effect, think of an alternative way to do it more efficiently.

For the most part, this comes with experience. The more you code a website and discover new techniques, the easier using CSS effectively will get.

For beginner’s ways on simplifying CSS, check out Woork’s article on “Top-Down approach to simplify your CSS code“.

The article shares tips on the balance of using CSS to create the basic wireframe and specific styling, how to reuse preset HTML elements effectively, and when it is appropriate to create your own classes or ID’s.

3. Use CSS Shorthand and Minimize HTML Markup

The smaller a file size is, the quicker it is to load, and it’s as simple as that. Using CSS shorthand and minimizing the length of XHTML markup by reusing elements is a great way to do this.

Coding an entire website has to be a balance of markup and styling that markup with CSS. Markup should be used for structure and CSS should be used for styling, so a great way to find that balance is to keep this in mind.

Other than this, the practice requires just understanding the technicalities of CSS shorthand, as well as gaining experience.

Check out a few of the tutorials below for mastering CSS shorthand:

• Introduction to CSS Shorthand
• Efficient CSS with shorthand properties
• CSS Shorthand Cheat Sheet

Also removing unnecessary whitespace can help the loading speed of markup and CSS files. Just like with a minimized JavaScript file (such as jquery.min.js), smaller files will make loading time more efficient, allowing the processor to read them more quickly.

As with CSS and markup, though, it’s not practical to remove all whitespace for editing and management purposes.

Instead, get into a practice of indenting and using line breaks only when necessary. Also remove any comments within the markup and stylesheet that are not necessary to the maintenance of the website.

4. Smush.it

Use a tool like Yahoo’s Smush.it to crunch any images even further. A tool like this uses a compression algorithm that reduces the file size significantly, without sacrificing image quality. An average of around 40% reduction of all images can make for a huge difference in the loading time of a website.

Just simply load any images for the website, after they’ve been optimized originally in Photoshop, into the Smush.it application. It will give you a new list of images for download, explaining how much space was saved, and how.

5. Pay Attention to CSS & Markup Order

Having the structural elements before the content elements, or the blockquote style before the paragraph style will not make a stylesheet load any quicker. However, a stylesheet does load in the order it is presented in the stylesheet, so one can use that to make a website ‘appear’ as though it is loading faster.

For example, if in a stylesheet, all of the content, images, and text styling were first defined, these elements would load before any backgrounds, structural elements, or design imagery were loaded.

Because of this, it appears as though the web design is loading slightly slower than if we saw the background and structure first.

With structure and main imagery first, the viewer has something to focus on for those seconds where content is still loading.

6. Know When to Use Client-Side or Server-Side Scripting

For basic projects, web designers probably won’t be getting into too much programming. However, some scripting may be required for a simple contact form or for special navigation effects.

Whatever it is for, two types of scripting languages can be used: client-side (where the scripting language runs on the user’s browser), or server-side (the scripting language runs on the server).

JavaScript, and any library under it, is the most common client-side scripting language. Because it runs locally on the user’s browser, it does not have to run all the way to the server to do its processing, therefore making it faster. Server-side scripting is slightly slower, but runs just fine in small doses and when used appropriately.

Use server-side scripting for anything that requires a database, or anything that is necessary to the website’s purpose. Since a user can disable JavaScript, but can’t disable a server-side language, server-side scripting is safe to use for any website necessities.

For example, a contact form, although it’s light and may not require a database, is best used with a server-side language because it is still accessible for someone with JavaScript disabled.

Overall, most websites that require any additional scripting should have a balance of both. Some smaller websites may only need one or the other, but it is important not to just use one for the sake of it. Know when, and why, to use each.

7. Last but Not Least, Validate

This is obvious to most of us, but as with any article like this, it must be said: throughout the process of coding, and when everything is said and done, validate CSS and XHTML code.

We all know the benefits of validation, in that it can make various browsers render similarly, make web pages load faster, and is a general error checker for semantic code.

An additional benefit to going through this process, though, is to explore new techniques for handling CSS code and markup.

If you’ve implemented a certain effect into a web design that doesn’t validate or gives a warning, chances are W3 has a reason for this. These are great moments for researching other options to create the same effect, but in a better, more validated way.

Wrapping Up

Some designers fear that they must sacrifice quality in the imagery of the design when coding to XHTML/CSS in order to make a fast-loading website — but that’s just not true.

There are many ways to code intelligently that can create for a user-friendly, fast-loading website that meets a designer’s quality. Using these tips can help, but there are many more things to learn.

Remember, if you are an inexperienced slicer and coder, it may be slow-going at first, especially when still in the learning process. We may know XHTML and CSS, but it is an entirely different skill to learn how to do it effectively. Just as we had to when learning design, we must learn how to code beautifully as well.

Written exclusively for WDD by Kayla Knight.

These are generalized tips, so be sure to share any additional tips for the practice of slicing a design and coding it, especially from a designer’s perspective.

Never Ending WordPress Business Bundle – only $14!

Studies have demonstrated that even a split-second delay in thinking on the user’s part will weaken their perception and interest in a website and ultimately lower the website’s conversion rate.

In certain niches and industries, having UI elements that are not obvious in their use may be perfectly acceptable. The blogging and web development industry are perfect examples.

But when we design user interfaces for non-tech-savvy audiences—which is usually the case with client work—we have to ensure that certain UI elements do not stray too far from what users are accustomed to.

This article discusses some best practices and usability traits of six user interface elements and the conventions for each, so that developers can create user experiences that are both beautiful and simple.

1. Appearance of the Search Box

On large information-rich or product-heavy websites, search is king. Users here generally forgo conventional navigation bars in favor of the search box.

A search box that is not immediately visible will have one of two effects: 1) the user will assume no search functionality is available, or 2) the user will find the search functionality after a delayed, and possibly irritating, period.

Ensure that the search box on your website is easy to see. Dark backgrounds and fancy graphics will impair usability, so keeping it white or light gray is best. Also, make sure the search box is large enough relative to other important elements on the page, thus maintaining its position in the visual hierarchy.

The search box on Domain by IP fits the visual theme of the website nicely, being orange and graphically consistent with its surroundings. But if a search box on a busier website were given this treatment, it would probably be difficult to spot.

The design is not a hindrance on Domain by IP because the website has one function: search, which is right in the middle of the page. Plus, being in a technology niche, its developers have less of an incentive to stick with convention. But this degree of creativity should be avoided on larger websites, whose target audiences may not be as technically savvy.

Adventure Time, meanwhile, keeps its search box white, conveniently sized and easy to find on the page:

Despite being in a foreign language, Adventure Time has a very clear search box, even for English-speaking users. The size and color of the box is complemented by the magnifying glass graphic, which has become the universal symbol for online search. A user looking for this functionality will not have a problem here.

This pattern should be followed in all projects targeted to a diverse user base.

Further Reading:

• Search Box: Examples and Best Practices

2. Clearly Marked Collapsible/Expandable Content

Websites benefit from collapsible panels and drop-down menus because they make for cleaner and less cluttered layouts. The hidden content in these interface elements can, however, impair a website’s usability if their presence is not clearly indicated.

When a user clicks on a bare link or button, they expect to be taken to a new page. But when a user clicks a link or button that has a hidden content indicator, they expect the new content to be instantly displayed (via JavaScript or AJAX) and have the option to hide it subsequently. Thus, a website should sharply differentiate between normal links and links that reveal new content via JavaScript.

Collapsible content, such as in side panels and menu trees, can be indicated with an arrow, triangle, or Windows Explorer-like plus/minus indicator. The panel that logged-in users see on CSS Globe clearly indicates that it is collapsible:

Below is the same page after the panel has been expanded to reveal a group of functions:

With the content in the panel now expanded, the arrow is rotated 90 degrees, suggesting that the same content can now be hidden or collapsed. This same principle can be applied to drop-down or fly-out menus, although these would not require a rotating arrow. Surprisingly, this feature is often omitted even on professionally designed websites.

Further Reading:

• Collapsible Panels: Interaction Design Patterns Library

3. AJAX Loading Indicator

When you improve the user experience by loading content through asynchronous requests, make sure to inform the user that an AJAX request is being processed. Without this indicator, the user may give up waiting or wonder why nothing has happened in response to their click.

You can accomplish this in a number of ways; one way is to highlight a “Loading” or similar message in or near the location where the action will occur, as Google’s RSS reader does:

At the top of the screenshot is yellow highlighted text, which appears when the “Mark all as read” button is clicked, telling the user that something is happening.

Another way to indicate this is with animation or a revolving hour glass, which would be familiar to Windows users. An animated indicator is used on numerous websites, including Twitter, where users click a “More” button to view older tweets:

Once the button is clicked, and depending on the speed of the client’s connection to the server, a familiar animated swirling graphic appears, telling the user that their request is being processed.

AJAX loading graphics are available for free from a number of different websites, many of which allow you to customize the graphics with size, color and other options.

This type of visual indicator is important for asynchronous requests that don’t provide client-side clues about what activity is loading.

An AJAX-like indicator could also be used to enhance non-AJAX functionality that behaves like AJAX and takes time to load. This could include a photo gallery that loads a larger image when a thumbnail is clicked.

AJAX loading graphics and other indicators don’t actually speed up a page, but they do improve the “perceived” load time, which is often just as valuable as improving the actual load time.

Further Reading:

• The Truth About Download Time

4. Location of Shopping Cart and Log-In and Register Functions

When users scan a page for the “Shopping cart” button or “Register now” link, the first place they look is the top-right corner of the page. Unless you have a compelling reason to do so, keep this functionality in its familiar location, or else you risk slowing down and disrupting the user experience.

Options and functions that would fall under this category include “View cart,” “Check out,” “Log in,” “Log out,” “Register,” “Submit link,” “Forgot password?” and even “Contact us.” This last item would usually be the last one in a horizontal navigation bar.

TasteBook includes four such links in the top-right corner of its layout:

Maui Divers Jewelry is another good example and also includes a shopping bag graphic:

5. Expiration Date Format on Credit Card Forms

When a form asks for your credit card’s expiration date, the format is always the same: the month, represented by two digits, followed by the year, represented by two or four digits (e.g. 03/11 or 03/2011). The four-digit format is how the expiration date appears on the credit card itself.

The best way, then, to collect this information and strengthen the user experience is to use two separate select boxes, one for the month and the other for the year. Don’t make the user enter the expiration date in a single text box, even if you provide instructions.

Here is a good example from the payment page of Maui Divers Jewelry:

And here is an example of a poorly designed expiration date field:

Moreover, the month selector should not display the names of the months, but instead should list the numbers 01 through 12. There is no reason to slow users down by making them figure out that “08″ means “August.”

6. Easily Identifiable Links

This should never be a problem, but unfortunately some websites still do not clearly distinguish between links and regular text in the main body.

In most cases, the best way to indicate this difference is by making links a different color and underlining them. In some cases, a strong contrasting color alone is enough; but only underlining or just changing the color slightly is rarely enough and will often impair accessibility.

Cameron.io makes this distinction well:

These links would not be as visible if they were merely underlined but not changed in color. You wouldn’t design a button that didn’t look like a button, so why let text links blend into the main body? As most users scan text online, designers should ensure that all links are identifiable long before a mouse is rolled over them.

Further Reading:

• WCAG 2.0 and Link Colors
• Guidelines for Visualizing Links

Conclusion

All of the user interface elements and functions discussed in this article are crucial to website usability and play important roles in the user’s perception of your brand.

Many small enhancements can make a big difference in perceived speed and can keep users from getting frustrated or uncomfortable.

Make your user interface elements simple and streamlined, and follow conventions where possible. You will see reduced bounce rates, better conversions and a steady flow of returning traffic.

Written exclusively for WDD by Louis Lazaris, a freelance writer and web developer. Louis runs Impressive Webs, where he posts articles and tutorials on web design.

How could some of these or other user interface elements be improved? Please share your thoughts in the comments below.

Never Ending WordPress Business Bundle – only $14!

The new design is beautiful, clean, organized and well-structured. It invites the eye to scan and find something interesting with the goal of clicking through to another page.

The previous design was somewhat cluttered and not very inviting; the content looked liked it was being forced into an unstructured space. The new layout is very different and embraces a number of modern web design and usability best practices and trends.

So, let’s look in more detail at not only the notable improvements, but some of the questionable design and usability decisions.

Grid-Inspired Layout

I’m using the phrase “grid-inspired” because the new design seems to be based on a grid, but the precision alignment of elements is not exactly there.

Taking a cursory look at their primary stylesheet, they appear to have loosely based their style and grid on the Blueprint CSS framework.

Their CSS reset bears many similarities to the Blueprint framework, and the word “blueprint” is included at the top, so this would be a logical assessment based on my own limited knowledge of Blueprint.

After analyzing a screen capture of their home page, I’ve concluded that if they based the new layout on a grid, the specifics of that grid would be: 16 columns, 50px per column, with 12px gutters (the space between columns), totaling 980px in width.

Below is a visual representation of my grid estimate, as a Photoshop mock up:

Even though the elements on the page do not follow the kind of alignment and balance that would customarily be expected of a grid layout, there is a noticeable improvement in this layout over the previous design, shown below:

The new layout keeps all page elements inside the 980px-wide container — unlike the clunky-looking previous design that had a fluid-width header that spanned the entire page above a fixed-width content section.

Also, while the old design couldn’t seem to decide between rounded corners and square, the new design consistently features square corners with subtle bevel effects separating appropriate elements, as shown in the image below.

Although the format is grid-like, it is, as mentioned, not a strict grid format, and the sections below the fold stray quite a bit in structure from those above.

Drastically Improved Header Section

One of the most apparent improvements in the new design is the header section.

The horizontal navigation bar is modern, clean, and clear. The search box, signup option and login link are in the top-right corner, where they should be.

And, although it is not customary in modern design to center the site logo, in this case it works. It creates a very dominant, vivid, brand experience that is not easily forgotten.

Another nice feature of the navigation bar is that it indicates by means of color and graphics which links are primary, which are secondary, and which will open in micro-sites or sister sites. The latter are indicated by right-pointing triangles (“Money” and “Sports” — more on this below).

Effective Use of Space

On the right-hand side of the page, below the primary ad unit, they’ve included an accordion-style content switcher, allowing the user to view previews, in a relatively small area, of content related to a number of different topics.

Emphasis on Video & Story Popularity

In the previous design, video had fairly strong emphasis, featured in a box on the right side. In the new design, video is a major category in the primary navigation bar, given virtually the same visual importance as the “Home” link.

Video stories are featured throughout the site, and are clearly indicated by the customary “play button” link on photos that link to video content, as shown below:

Another category given the same importance as “Home” and “Video”, as shown in the image above, is the “NewsPulse” section, which is new and still in beta.

This section displays news stories by popularity (which seems to be calculated by total page views, not comments), and allows the reader to filter the results by category or story type.

Strong Category Pages

The main category pages (“U.S.”, “World”, “Politics”, etc.), accessed from the primary navigation bar, work similarly to the home page.

In fact, if you didn’t know what page you were on, you might think you were on the home page. The “U.S.” category is shown below:

Each of these sections conveniently displays top stories, latest news, and other items related to that category.

The black and white captions below images, also featured on the home page and on article pages, are eye-catching and easy to read, without the use of overly-fancy graphics or font styles.

Strong Article Pages

The article pages, for the most part, maintain the vivid branding of the home page. Body text is nicely displayed in 14px Arial with a very readable line-height.

Although some elements on the pages seem somewhat small, I personally like the way the font size of the article body stands out on the page, so the reader can stay focused on it.

Also, on the left side of each story, there is a section called “Story Highlights” that summarizes the current story in a few bulleted-list points. This shows that CNN’s designers are aware of the online tendency of users to “scan” lengthy material.

Information Overload

Of all the negative aspects of the new design, probably the first problem that is immediately evident is the overload of links and information on the home page — although it is more structured and organized, as discussed earlier.

The home page is about two and a half screens long, and includes sections that duplicate items in the main navigation bar, with about a half dozen sub-links under each category. These sections appear below the fold and are shown in this image:

Since CNN is one of the most popular sites in the world (38 million unique visitors each month), these sections will receive considerable traffic in comparison to other sites, however, because they appear so far below the fold, and because there are so many links, the relative amount of traffic visiting those links through the home page would likely be quite low.

Important Sections Buried?

As pointed out above, a lot of information on the home page appears well below the fold. And, significantly, it appears that some important content is completely buried at the bottom of the home page, more than two full screens below the header.

For example, a section entitled “Hot Topics” appears near the bottom, on the right side, just above some promos and ads.

It seems to make more sense that this section would replace the accordion content switcher, or else be incorporated into the accordion.

The ads and promos that appear below the “Hot Topics” also appear to be more important than their location reveals. Again, although such a high traffic website would receive many clicks on these areas, the click-through rate in comparison to the sections and ads above the fold would likely be drastically different.

Of course, CNN’s producers know what content is most important, and they understand their users’ habits better than anyone else — but these layout and usability challenges are helpful to analyze should other developers face similar decisions.

Usability Mysteries

There are a few elements on the new site that may not be designed for optimal usability.

One example is the right-pointing triangle that appears on each of the micro-site links. At first glance, I wasn’t sure what those triangles were for. They appear to indicate some sort of a JavaScript slider section that would pop up.

Some users not paying full attention may even mistaken them for downward-pointing arrows that produce drop-down menus.

Is there a better way to indicate a same-window micro-site link? I’m really not sure. Maybe something similar to the well-known Wikipedia icon would have sufficed — but then that would present the problem of users assuming that the links opened in a new window, which in this case is not true.

The accordion content switcher, discussed earlier, also has a few usability problems. First, when JavaScript is disabled, the accordion is rendered useless and doesn’t display any content.

It should expand by default to display all content, or else display one of the items. Also, the hyperlinked headers for the accordion sections should still link to their respective sections, but they don’t.

Another problem with the accordion content is that, since the text it contains is so small, it is not always clear what is clickable inside the accordion. This makes the links less distinct from the rest of the accordion content.

In the image below, the red arrow I’ve drawn is pointing to two bulleted list items. The text in those list items is hyperlinked, but this is not obvious at first glance.

Some Sections Still Reflect Old Design

As will be the case with any redesign of a site the size of CNN’s, some sections will still reflect the old design until all pages are fully integrated.

This is usually the case with older content that won’t be visited as often, but in the case of CNN, some important sections still have the old skin.

Two examples are the about and contact pages.

Small Typography

One particular design issue that does not conform to modern web design trends is the use of small text and small typographic elements.

The small size of the font in the accordion content was discussed earlier. There’s also the “share” toolbar that appears on article and video pages, the “Latest News” section on the home page, the “Sign up” and “Log in” links in the header, and the text links below the fold on the home page, to mention a few.

Would the “share” toolbar, shown above, be more effective with bigger typography? What about the “recommended” section, shown below, or other sections with smaller type?

Conclusion

The new CNN.com site has added a number of features not discussed here that relate more to their news services and customized content. The first link below contains a video presented by CNN that discusses some of the new features.

I definitely think the new site presents a much more beautiful and interesting user experience than the old, and aside from the weaknesses in the accordion content switcher, the drawbacks to the new design are not really that significant.

It looks like a lot of time and planning went into the design of the new CNN.com, and I think web designers and those interested in improving usability on their own sites would do well to consider and try to learn from some of the changes presented on CNN’s new website.

Further Reading

• Welcome to the New CNN.com (Video on CNN.com)
• The New CNN.com (First Screenshots on TechCrunch)
• New CNN.com Goes Live: What Do You Think?

This post was written exclusively for Webdesigner Depot by Louis Lazaris, a freelance writer and web developer. Louis runs Impressive Webs where he posts articles and tutorials on web design. You can follow Louis on Twitter or get in touch with him through his website.

What do you like or dislike about CNN’s new site design? Share your comments below.

Never Ending WordPress Business Bundle – only $14!