Design Principles for the Web

Lavanya Koppaka

Why follow design principles?

Structure the information being presented

Increase the readability Ease of navigation Ease of use (e-business) More appealing to the user

Pre-design considerations

Identify the target audience – novices, experts, disabled, international users

Have a statement of purpose (information presentation, e-business)

Have a concise outline of information that the site will present

Classification of Websites

News sites – frequent updates Educational sites – repository of

information Training sites – interactive, linear

design Business sites – reliable Entertainment – graphical,

attractive

Design Principles – Background

Single solid color, preferably light Avoid loud patterns, images, textures Contrast between background and

text Flexible color scheme for people of

various ages and eye conditions – user’s browser settings

Simplicity and consistency

Design Principles – Text

Standard font size adjustable by user’s browser settings

Avoid heavy use of graphics – fixed and unchanged

Text color – black on white background Avoid large blocks of italic, underlined

text Avoid capitalization of whole sentences

http://www.angelfire.com/super/badwebs/main.htm

Design Principles – Text

Provide appropriate headings and label all the elements included such as graphs, figures, tables

Avoid moving, blinking or auto-refreshing text

Ensure consistency in format Avoid “dead-end” pages

Design Principles – Images, Icons

Tool tip for users accessing in non-graphical format (e.g. text only, speech, braille)

Link complex images to pages containing detailed description

Use self-descriptive icons Avoid using standard icons for

different functions

Design Principles – Links

Contain useful information about their destination – ease of access

Separate links with text (e.g. the bar character “|”) or a graphic

Provide “text based links” for flexibility when increasing font size

Include a table of contents, back and forward buttons for large sites with too many links

Design Principles – Frames

Offer meaningful NOFRAMES content for browsers that do not support frames

Provide links to all other pages in the NOFRAMES section so that they can be accessed without frames

Provide sensible title to each frame If possible, avoid using frames

Design Principles – PDF Files

Ensure that HTML, plain-text versions are available

Make charts or graphs in the PDF file accessible

Readable by blind people – ‘Access Adobe Technology’

Include a link to “http://access.adobe.com/ “

Design Principles – User Interaction Specify input restrictions – text

only, numbers between 1 and 100 Provide list boxes, menus

wherever appropriate Do not limit cursor positioning to

mouse alone

Design Principles – User Interaction Avoid having the user to click on

small or moving objects to proceed to another page

If codes are involved, provide appropriate information or link to the page

Sensible TAB order

Testing and Validation

Ask a number of people with various abilities and disabilities to test and validate the designed page

Use the feedback to evaluate the objectives

Revise the design and iterate

References

Horton, W. K. 1994. The icon book: visual symbols for computer systems and documentation. New York: Wiley

Marcus, A. 1992. Graphic design for electronic documents and user interfaces. New York: ACM Press, Addison-Wesley

http://info.med.yale.edu/caim/manual/appendix/literature_cited.html