UI Best Practices Application Developer’s Intro School Week 1 Day 1 Key Learning Points • Understand the basic principles of User Interface Design • Apply the concepts of usability to Web design • Adopt and adapt Smart best practices to development work What is Usability? • Something is easy to use to the extent that it effectively performs the task for which it is being used. Why is Usability Important? • It can mean the difference between the success or failure of a system. Usability Principles: Mental Models Usability Principles: Task Analysis Usability Principles: Obviousness Usability Principles: Affordance Usability Principles: Consistency Usability Principles: Metaphors Electronic Mall Shopping Cart Trash Can Questions? • Do you have any questions about usability? Web Page Design: Training the Web Users • Web users cannot be trained to use a site. • Sites should be designed to expedite learning. Web Page Design: Perceived Stability vs. Regular Updates • A site should change regularly to reflect new information, but updating the content should not involve changes to the interface. Web Page Design: Typography • The first thing a user sees in a Web site is the overall patterns and layout of the page. Web Page Design: Typography • Serif vs. Sans Serif • Proportional character spacing vs. fixed character spacing • Font size and color • NEVER USE CAPS and avoid italics as much as possible • Avoid using: Blinking, Glowing, Scrolling (marquee style) or Zooming effects on text Web Page Design: Color • Color is an effective communication tool that can be used to elicit emotional responses and represent hierarchies of importance. Web Page Design: Color • Contrast colors for better readability. • Keep it simple. – As a general rule, using a light background with a dark text or a dark background with light text. Web Page Design: Graphics • Graphics are effective if the user recognizes it, but if the graphic is outside the user’s realm or experience, recognition does not occur and the graphic loses its power. Web Page Design: Graphics • GIF vs. JPEG • Interlaced GIF – definitely; animated GIF – maybe • Use ALT tag for all images. • Preview graphics on all possible browsers and platforms Web Page Design: Graphics • Optimize your images for the web. Make your pictures download fast for your viewers. Use 72 dpi when scanning or creating an image for the web. 46KB 6KB See any difference? Web Page Design: Navigation • Any navigation element other than an underlined hypertext link introduces a new level of complexity for the user. Web Page Design: Navigation • Your user should be able to navigate to the main sections (especially the home page) on your site from every page. Web Page Design: Content Structure • Reduce eye movement • Use left alignment for text and headings Web Page Design: Content Structure 1. Show Importance and Priority Web Page Design: Content Structure 2. Show Relationships Family relationship Child relationship Web Page Design: Content Structure 3. Aid scanning and comprehension Web Page Design: Frames • Frames introduce a new mechanism for viewing data, the ability to view multiple pages simultaneously. • Viewing multiple pages simultaneously destroys the link between URL and content. Web Page Design: Testing • Web sites must be tested and updated on a regular basis. – Existing links, content and images must be verified. – It must be viewed using new browsers and platforms. Web Page Design: Cutting Edge Technology • The Web is not an opportunity to show off technical prowess. Questions? • Do you have any questions about web page design? Smart Best Practices: Page Elements • • • • • Background Text Header Footer Menu Smart Best Practices: Cascading Style Sheets (CSS) • Existing intranet sites have CSS • When developing a module for these, adhere to the current CSS as much as possible. Smart Best Practices: Optimal Loading • Frames • Load times • Animation Smart Best Practices: Intuitiveness • Visual cues • Audible alerts • Document mapping Smart Best Practices: Security • Avoid simulating back button using JavaScript • Avoid using hidden fields • Hide page source Questions? • This is the end of the presentation. • What questions do you have?