Web Page Design

Visual Design for Web

When considering design for a web page, one should pay particular attention to their audience. Putting a page on the internet opens up the audience far beyond who is the intended audience. The designer also has to always keep in mind the aim of the organization behind the website, its values, and its goals, as the web page will be used to communicate this to the users, and members of the page’s organization may also be users of the page.

Lin (2002) wrote that “A Web site is such a multi-user product. It is also a product designed for use by multiple audiences. Therefore, designing a Web page imposes the need for the designer to take the interests and concerns of those multiple audiences into consideration”. Therefore, the page’s purpose must always be in mind. The best way to overcome the possible differences in audience from intended and actual audience is to abide by certain values in web design, which revolve around simplicity, clarity and consistency.

Audience and Purpose

Redish quote: “understand your audience, why they come, what they need, and how to write web content for them.”

When you begin working on a web page, and throughout the process, keep these tasks, listed by Redish (2000), in mind. These will help keep you on focused on the goal of information design. This list is especially true for websites, since the designer has to understand that lay users may access the page. The page must be designed so that those who may, or must, use the information can:

Find the information they need
Understand what they find on the page
Use what they find and understand appropriately

The most important aspect of creating an aesthetically pleasing document is being familiar with your audience. Gathering information on the specific group you are writing for is helpful when deciding on content and how to structure the information in your document.

A way to help audiences feel connected to the information on the document is to create personas and scenarios.

A persona and a scenario are similar in the fact that they both contain invented information in the form of a mini story. The information presented in the persona is based off of the perceived audience. This allows the reader to connect to the person in the story and also gain information at the same time.

Page Content

There are many ways content can be presented, depending on the role of your document. If your document serves an informative purpose it might be helpful to display your content in question form that a typical reader might ask.

Effective Content Format Example:

Question: What type of batteries does this toy require?
Answer: The racecar requires two double A batteries.

Not only does this type of content display make it easy for the reader to find answers, but it also helps cut back on the amount of wordy content displayed on the page.

It is also helpful to break content up into topics and sub topics. Content should be displayed in time, sequence, or task format, which is typically used for information about a consumer product.

Sequence of Content Example:

When planting flowers, first prepare the flowerbed.

A short explanation of how to prepare the flowerbed would be placed directly under the main topic.

After preparing the flowerbed select the flower seeds you would like to plant.

A short explanation of different types of seeds would go here.

For more information on how to organize your webpage visit hierarchy and web design.

Simplicity, Clarity, and Consistency

As Williams (2000) described, elements on the screen must be legible, and often a pair of critical eyes is needed to judge legibility of text and images. Elements should contrast greatly with their backgrounds. Very small color elements can be seen much more easily on a black background rather than a white background.

Backgrounds should not be “busy” with clutter or heavy use of patterns. The foreground needs to be clear and easily distinguishable from the background, so a busy background distracts the user. Also to give the greatest contrast, backgrounds should be white or short-wavelength colors, such as light blue. It can also be a bad thing to use too many large file size elements on the page such as pictures, as they can take too long to download to be seen on the user’s screen, which hurts the page’s usability.

Since computer screens are typically wider than they are tall, often have less space than paper media, and give light rather than reflect light, certain considerations need to be made to distinguish design of a paper document with a Web document. The space available on a screen allows you to break information into chunks so that different elements on the page can be viewed easily on any screen. If there is an intended sequence in chunks, it is possible to use numbers or letters to code the sequence, or use graphical elements such as arrows to direct the user from one piece of information to the next. Otherwise, the most contrasted element to its background will likely be read first.

The following is a guide of key elements to consider:

Chunking - The average reader will not wish to read long passages of text on a computer screen, so use chunking, or break down a large text into shorter, more digestible pieces of information which can be read independently from each other.
Color Scheme – Don’t mix a lot of colors. It is best to select only a few colors that either complement each other or are appropriate in representing the group for which the website is written, or appropriate for the audience. Also, colors can call attention to elements of importance.
Using images – Pictures, or video, can sometimes communicate information much more quickly and clearly than text. It is encouraged to include images where appropriate, but the designer shouldn’t clutter the page, or use pictures which have are only for aesthetic and have no relation to the text or other elements on the page, as this can confuse the user.
Consistency – Visual appearance has a large effect on how users read and value Web sites. One important aspect of professional Web pages is consistency. Information and user interface should be presented in a consistent manner throughout the page and the entire structure of the Web site. Logos, page titles, headers, and interface elements such as navigation, buttons, and graphics are all to be consistently represented. This will ensure the users will perform on the website without error or confusion.

To better understand how to effectively layout a web page, read more about how users process information on the web.

Loorbach and Geest (2005) cite Grudin’s distinctions of consistency in interface design.

Internal consistency in graphical layout, command naming, dialog forms, and etc.
External consistency in the featuring of elements of interfaces already familiar to the users.
External correspondence of the interface features to familiar features outside of realm of computer interface.

Cues should also be given to remind the user where they are, and what organization’s Web pages they are accessing, so placement of logos or bylines should be consistent between sister Web pages to create a unity, and immediate and unambiguous recognition on the part of the user.

Maintaining simplicity, consistency, and clarity will help in the design of a very clean and usable, professional Web page. More information on web and information design can be found at the resources listed below.

References

Lin, C. (2002, February). Organizational size, multiple audiences, and web site design. (Applied Research). Technical Communication, 49(1), 36+. Retrieved from http://go.galegroup.com/ps/i.do?id=GALE%7CA83262375&v=2.1&u=udel_main&it=r&p=AONE&sw=w

Loorbach, N., & van der Geest, T. (2005, February). Testing the visual consistency of Web sites. Technical Communication, 52(1), 27+. Retrieved from http://go.galegroup.com/ps/i.do?id=GALE%7CA129165917&v=2.1&u=udel_main&it=r&p=AONE&sw=w

REDISH, J. C. (2000, May). What Is Information Design? Technical Communication, 47(2), 163. Retrieved from http://go.galegroup.com/ps/i.do?id=GALE%7CA62828567&v=2.1&u=udel_main&it=r&p=AONE&sw=w

Redish, J. (2007). Letting go of the words. (pp. 13-257). San Francisco: Morgan Kaufmann Publishers.

WILLIAMS, T. R. (2000, August). Guidelines for Designing and Evaluating the Display of Information on the Web. Technical Communication, 47(3), 383. Retrieved from http://go.galegroup.com/ps/i.do?id=GALE%7CA64702894&v=2.1&u=udel_main&it=r&p=AONE&sw=w

Annotated Bibliography