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