Design and User InterfaceBeth CaseEDSP 6325September 17, 2009

Introduction

Anyone can design a website. Not everyone can design one well.

A good web designer starts with a plan, focusing on the needs of the user, and applies time-honored multimedia design guidelines.

This presentation will cover some of the key design elements every web designer needs to know.

Metaphor

A metaphor is a symbolic representation of a concept that is familiar to the user. Metaphors can be used to convey information quickly and easily. A common metaphor is a graphic of a shopping cart for e-commerce.

Metaphor Examples

The CafePress site has a shopping cart, for purchasing items, and a gift box, for it’s Gift Center.

NPR uses a number of metaphors to show the different ways you can obtain their content.

Consistency

Users feel more comfortable and will stay on your site longer if there is consistency in the appearance, and function of your site. For example, maintaining a color scheme and the location of navigation buttons.

Consistency Examples

Visitors to the Texas Tech web site find a similar look and feel wherever they go.

Template

To help maintain consistency, a site may use a template. A template pre-determines a number of elements, such as layout, color, or content that remains the same from page to page, such as a copyright statement. Templates also reduce development time, and “object shift”.

Content

Users come to your website for its content, so make sure the content is clear, well organized, and easy to read. Avoid busy backgrounds or a cluttered appearance. Most people scan the page instead of reading from beginning to end, so make sure your content is organized in such a way to make it easy for visitors to find the information they want. And always provide some way for users to know where they are in the larger context of your site.

Balanced Layout

Each element on a page has an optical weight which refers to how much it draws the viewer’s eye. Balance refers to the distribution of this optical weight. A balanced website is evenly distributed across a horizontal or vertical center line, whether symmetrical, asymmetrical or no balance.

Symmetrical Balance

Symmetrical balance mirrors elements across a vertical or horizontal center line. The tutor-USA site categories are mirrored across a vertical line.

Asymmetrical Balance

Instead of mirroring elements, asymmetrical balance uses different types of elements on each side, but equalize the optical weight. In this case, the left column has several small elements to balance the large video on the right side.

No Balance

Pages without regard to balancing the visual weight appear disorganized.

Movement

Movement refers to the path the eye follows around the page. A well-designed web page arranges elements to encourage the visitor’s eye to follow the path the designer wants. Ways to accomplish this include emphasizing text or a graphic, using lines, color gradients, or gaze direction of people or animals on the page.

Color Scheme

Color choices affect the tone and effectiveness of your web site. Colors influence mood and convey meaning. When starting out, use only a few colors, or try a monochromatic look. Suggested color schemes are available in many editing programs and websites, and can benefit the beginning designer. However, they can be overused and appear amateurish, so branch out as you gain experience.

Color Scheme Example

Earth911, a website that talks about conservation, uses a green color scheme, emotionally conveying the message of “living green”.

Independence and Function

Web sites need to have consistency, yet not be stale. Carefully designed sites will allow you to update individual pages without a complete site redesign. Visitors don’t always start at the home page, so some basic information such as a link to the home page and contact information, should be included on all pages.

Unified Piece

All of the elements of a site need to work together to convey your information. An element that seems out of place will disrupt the effectiveness of your site. All the elements of a page must work together (intra-page unity) as well as all the pages on a site (inter-page unity).

Unified Piece Example

Amazon.com effectively uses balance, color, consistency, and function to create both intra-page and inter-page unity.

Interactive Interface

Interactive user interfaces gives the visitor control over their experience. A good user interface will be intuitive and meet the user’s needs and expectations, allowing visitors to find the information they want quickly and easily.

Interactive Interface Example

WeightWatchers provides clear navigation and search features to help visitors find what they want easily.

Link Effectively

Research shows users prefer menus with a minimum of 5-9 links. They prefer a few pages with lots of links over lots of pages with a few links. Your goal is to help visitors find the information as quickly as possible in the fewest number of clicks.

Sense of Context

Help users know where they are in the context of your site by creating contextual cues. For example, maintaining a color scheme, consistent navigation, and layout, for example. Providing visitors confidence in their ability to navigate your site will encourage them to explore.

Sense of Context Example

The Leisure Boutique maintains the same top navigation, with drop-down menu items, on all pages. Visitors can explore different crafts with confidence that they can always find their way back.

Feedback

Provide users with a simple way to contact you with feedback or questions, then respond promptly. Examples of effective feedback options include an on-line feedback form, email addresses and phone numbers.

Equal Access

As more and more multimedia and graphical elements are added to websites, they become less available to visitors with disabilities. In most cases, accessibility can be achieved with fairly simple additions to the page, such as appropriate alternative text for images, transcripts for audio, and captions for video.

Equal Access Example

The Disability Law Lowdown video podcast provides captions for all its videos.

Conclusion

Effective web design requires careful consideration and planning. However, following proven design principles results in a site that is professional and effective, providing users with a positive experience that leads to repeat visits.