Web Page Design Basics

User Interface Issues

Human Factors Issues

User Interface Components

Electronic Handcuffs

Some General Rules

---

User Interface Issues

• What do you expect it to do?
• What information do you expect to get?
• What tools do the users need to accomplish the tasks?

• Involvement
• Words and Symbols
• Content and Layout
• Procedures
• Organizational structure

User interface encompasses the following items.

Usability	Can the users interact with and learn from the program without heavy "overhead" learning? Does the program get in the way of the actual purpose of the program? Does the program require the learner to learn another set of skills before mastering content?
Functionality	What functions and controls are available to the user? Are they all available all the time? What do the users need when?
Aesthetics	How do the visual appearance and spatial locations optimize use of the program? Are there cultural biases incorporated with the images? Not until a discipline becomes a way of life do the priorities become invisible.
Content	How easy is it to "see" the organization of the content?

Human Factors

• Screen resolution and brightness
• Flicker rate
• Colors
• Information density
• Orientation to the user
• Involve the way people think, communicate, observe, decide, calculate, simulate, debate, design.

User Interface Components

• Graphics/Pictures
• Text
• Objects and Events
• Visual Design

• Do the users need an index or a menu?
• Do the users need a table of contents?

Text Issues

• A screen full of nothing but text is hard to read and to understand.
• Hyphenation should not be used because it reduces readability.
• Justified text is harder to read, as is ALL CAPS.
• The spacing between words should not distract the reader.
• Text should be lined up and not scattered throughout the screen.
• Italics should only be used for emphasis.
• Break it up! (Chunk the information.)
• Justify text left.
• Use italics and boldface only for emphasis.
• Be consistent with fonts and colors.
• Do not underline.
• Use a grid or a table to line things up.
• Text ALL UPPER CASE LETTERS ARE MORE DIFFICULT TO READ.
• Upper and lower case letters are easier to read.

Electronic Handcuffs

• Determine types of options and choices.
• Establish a user interface and stick to it.
• Design icons.
• Provide a way for the user to understand the interface.
• Be consistent.
• Base decisions on standards, principles, and guidelines.
• Test the screen design on real users.
• Let human constraints dictate, not equipment constraints.

---

Some General Rules

Write clearly and be brief.
Organize your documents for quick scanning.	Summarize topics with headings.  Think in menus. Provide viewers with a quick overview of what is available and segment the content into chunks.  Group related information visually on page.  Use lists.  Put important information at the top of the page. You have 1-2 clicks to capture a viewer.
Use a consistent layout for a group of pages.
Make each page stand on its own.	Use descriptive titles for your pages.  Keep single topics in one document; don't split the topic across pages.  Provide navigational links if you have documents that precede or follow your page.  Realize that you will not have control over who links to your page, how your visitors get there, or where they go after they have visited your page.
Emphasize with caution.	Too much bold face, italic or ALL CAPS is distracting and hard to read.  Use headings as headings and not for emphasis.
Use browser generic terminology.
Spell check and proofread.
Don't overuse graphics and keep them small.	Keep graphics fairly small--under 100 K--for fast loading.  Use alternative text to images.
Provide links back to your home page and to other organizational home pages.
Sign your documents.	Provide contact information for page creator.  Provide information about the date the documents were created and how often it will be updated.  Include copyright information if necessary. Include the URL (address) of the document on the page.
Remember that what you see and what someone else sees will probably be different.	Look at your pages from someone else's computer. Ask colleagues to review your pages from their computer. Reset your browser to look at your pages with different backgrounds and fonts.

Reference: Lemay, Laura. (1995). Teach yourself web publishing with HTML in 14 days. Indianapolis: SamsNet.

URL: http://www.utc.edu/Teaching-Resource-Center/ THECMath/webpagedesign.html
Posted:  June 16, 1999
Last updated: April 30, 2002
Comments to: Karen I Adsit, EdD