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