Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Usability

Web Design Reference Guide

Hosted by

Design

Last updated Oct 17, 2003.

The requirements have been collected, and it's time to get dirty. The design team huddles together to brainstorm solutions. After hours of hair-pulling, arguing, and narrowing the list, the team has arrived to a handful of purposeful solutions worthy of the client's eyes while taking the audience in consideration. Before conducting show-and-tell with the client, the solutions need to become visible, tangible using any or some of the following means:

  • Wireframes. Architectural diagram representing a page.

  • Prototype. Visual sample of a page, either on paper or on screen with no interactivity.

  • Briefs. Documents the project, audience, goals, and objectives as well as describes how the design addresses these issues.

  • Comps. Mock-up pages showing how the Web site will look, offering several options (from color schemes to layout).

  • Flow. Process diagram showing the how the Web pages connect to each other.

  • Sketches. Informal hand-drawn drawings to brainstorm the layout of a Web page. Sketches has been used to mean the same thing as prototype.

These terms have different meanings to different organizations. In general, a project involves a detailed document (brief) describing the design, a process flow showing the information architecture for the site, rough sketches to explore how the site or page looks, comps to determine the preferred scheme, and mock-ups of the site that aren't yet interactive.

You might begin with one of the means and present it to the client for further feedback and narrow the options. Then, you might use another way to break it down into more detail. A design shop with a well-crafted process adds flexibility to the equation to better react and adapt to the client's feedback and requests. One project might use all methods, and another might use just two.

This leaves breathing room for working with the client and making adjustments. The challenge is to avoid the black hole of creating comp after comp after comp because of "cherry picking," where bits and pieces of every comp are picked for changing and creating a new comp. No one wants to tell a client, "Enough! Just make up your mind," at least, not out loud. Offer options while keeping boundaries based on the design round. In earlier rounds, you expect to work on narrowing down to two high-level possibilities. Later rounds generally have the layout decided with minor changes in colors, images, or other consistent elements. To avoid potential sticky moments, add a maximum number of rounds or time spent on iterations to the contract. Taking this approach prepares the client to make solid decisions during the design process.

Like Taking Eye Candy from a Baby

In today's fast-paced society, where first seconds can make or break a site, heavy-duty graphics is becoming a burden and many have taken the road to the minimalist or simplicity approach.

Sites full of eye candy have little usefulness. It's become a problem of designing for design's sake to shout, "Look what I can do!" Such designers have created a beast: an eyesore. Like judging a book by its cover, they believe that offering awe-inspiring beauty will blind the users that it's not usable.

Instead of admiration, it provokes responses of "This is taking too long to load!" and "How do you use this site?" Clients who request Web design services may fall in the pile of "do something cool" instead of "let's see how we can best meet our customers' needs." This is where it gets thorny as Web designers have to balance politics with advice of focusing on "need" as opposed to "want."

It's a Flashy, Flashy World

Design has a purpose. It speaks. It informs. It shows. It leads. The saying, "A picture is worth a thousand words" applies to design through colors, typography, shapes, composition, and perspective. Put these elements together with a few words and the design can be powerful, or not.

When the Web hit the scene in the '90s, its newness pushed designers to experiment and pioneer while exploring what the Web is about using any new tool that appeared on the market. Fast forward to today, to where those who didn't adopt computers early have since followed the masses to join the Internet revolution, but for purposes of getting tasks done—pay bills; email co-workers, friends, and family; manage a business. They don't want to wait for a page to load, nor do they all want to pay for a faster connection. They're not the first to download a new version of a browser when it arrives. With this thinking, they also want to accomplish the task quickly and easily.

Flash's arrival pushed designers further: They wanted to see what they could do with it. The results were amazing eye candy, but also Flash backlash, slow loading sites, usability challenges, and splash pages taken to a new level.

Flash and its accompanying preloader (a short message indicating that the page is loading) have quickly brought "skip intro" to the forefront because few wanted to sit through the splash page, a title page with no purpose.

Macromedia.com offers tips and software add-ons to help designers make Flash more accessible and usable. Depending on the purpose of the Web site, maybe Flash is needed only in a small portion rather than be the entire site's functionality. Many Flash-created pages open another window of a different size, and it annoys users when a second window is opened without their permission or control.

Flash doesn't automatically mean long wait times. It's the designers who can work with Flash's capabilities to reduce the bandwidth used. It's time to return the basics of good Web design when designing with Flash for the visitor's sake.

Visual Aids

A speaker prepares for her speech by creating sharp looking PowerPoint slides. On the day of her presentation, guess what breaks? The computer housing the presentation. She's left with nothing else and gives her speech without the slides. The speech doesn't go well because she treated her presentation as if it were the speech instead of supporting the speech. Her speech should stand alone without any help from the presentation.

PowerPoint is a great tool that has given us the opportunity to create visual aids to accommodate the presentation. Over time, people begin squeezing in more and more content into the presentation. Slides provide a brief cue, not lecture. The rule is the same for the Web: Visual aids are there to support the presentation without being the presentation. They point the way for the user to find what he needs quickly with little thought.

Design without Standards? Pay the Price

If there's one thing that motivates the check writer for a Web design project, it's to keep costs low. Remember the days of BETA and VHS video formats? The tapes weren't interchangeable, and film companies had to shell out money to produce it for both formats or make the decision to roll out one format neglecting owners of the other. Eventually, BETA died, and manufacturers created VCRs that worked with the standard VHS format.

The concept applies when not following Web standards. If the design works in only one browser, it takes more time and money to design it to work with other browsers. The workarounds aren't always easy and fast to implement.

Designing and building with Web standards increases the chance of reaching greater audience, no matter the Internet device used. Using XHTML 1.0 strict and CSS, the Web Standards Project Web site shows up nicely on a Palm handheld. No WAP code. No other special code.

The Web Standards Project (WaSP) came to be when browsers makers failed to follow W3C standards. Designers were forced to create multiple version of a Web page to accommodate nonstandard browsers. Users were missing bits and pieces of information because they used the "wrong" browser. When users couldn't perform tasks or transactions, it hurt the business. People with disabilities or special needs struggled to access incompatible Web sites.

Design is what makes a user feel like she is in the right place and gets what she needs. Good design and functionality makes completing the tasks a smooth and fast effort, not a klutzy one. Users respond faster to visuals—graphics, icons, images—than to text. Visuals support the presentation rather than become the presentation distracting the user from what needs to be done. The window of opportunity is open only for a moment—before losing the user to an incompletely loaded page.

A fast-loading site is a good start. Now, how quickly can folks figure out what does what and what does it mean? Yes, users are demanding and don't want to wait for or decipher the puzzle of icons and clickable areas. Then, there's the issue of how it looks on their monitors. Size, color settings, and browser version impact how they view the site. It's back to the mantra of accepting that your site won't look identical on every screen.