1. UI Best Practices Application Developer’s Intro School Week 1 Day 1

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

3. What is Usability? Something is easy to use to the extent that it effectively performs the task for which it is being used.

4. Why is Usability Important? It can mean the difference between the success or failure of a system.

5. Usability Principles: Mental Models

6. Usability Principles: Task Analysis

7. Usability Principles: Obviousness

8. Usability Principles: Affordance

9. Usability Principles: Consistency

10. Usability Principles: Metaphors Shopping Cart Trash Can Electronic Mall

11. Questions? Do you have any questions about usability?

12. Web Page Design: Training the Web Users Web users cannot be trained to use a site. Sites should be designed to expedite learning.

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

14. The first thing a user sees in a Web site is the overall patterns and layout of the page. Web Page Design: Typography

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

16. Web Page Design: Color Color is an effective communication tool that can be used to elicit emotional responses and represent hierarchies of importance.

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

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

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

20. 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. 46KB6KB See any difference?

21. Web Page Design: Navigation Any navigation element other than an underlined hypertext link introduces a new level of complexity for the user.

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

23. Web Page Design: Content Structure Reduce eye movement Use left alignment for text and headings

24. Web Page Design: Content Structure 1.Show Importance and Priority

25. Web Page Design: Content Structure 2.Show Relationships Family relationship Child relationship

26. Web Page Design: Content Structure 3.Aid scanning and comprehension

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

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

29. Web Page Design: Cutting Edge Technology The Web is not an opportunity to show off technical prowess.

30. Questions? Do you have any questions about web page design?

31. Smart Best Practices: Page Elements Background Text Header Footer Menu

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

33. Smart Best Practices: Optimal Loading Frames Load times Animation

34. Smart Best Practices: Intuitiveness Visual cues Audible alerts Document mapping

35. Smart Best Practices: Security Avoid simulating back button using JavaScript Avoid using hidden fields Hide page source

36. Questions? This is the end of the presentation. What questions do you have?