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

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

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 The icon book: visual symbols for computer systems and documentation. New York: Wiley Marcus, A Graphic design for electronic documents and user interfaces. New York: ACM Press, Addison-Wesley html