Design Principles for the Web

1. Design Principles for the Web Lavanya Koppaka

2. 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

3. 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

4. Classification of Websites • News sites – frequent updates • Educational sites – repository of information • Training sites – interactive, linear design • Business sites – reliable • Entertainment – graphical, attractive

5. 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

7. 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

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

9. 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

10. 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

11. 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

12. 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

13. 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/ “

14. 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

15. 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

16. 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

17. 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