Presentation on theme: "UI Best Practices Application Developer’s Intro School Week 1 Day 1."— Presentation transcript:
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 Shopping Cart Trash Can Electronic Mall
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.
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. 46KB6KB 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