Internet Applications Design and Usability

1. Internet ApplicationsDesign and Usability

2. Designing for Usability What is usability? • ISO 9241 Definition: usability is the extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use. • Originally used in industrial engineering, now applied to the web

3. Designing for Usability • Usability advocates for the creation of • Web sites that people can use “off-the-shelf” • Web sites that are user- and task- centered • Design standards • Importance of standards depends on approach • Artistic: focus is on creativity and novelty • Engineering: focus is on performance and efficiency

4. Standards ensure that users: • know what features to expect • know what these features will look like in the interface • know where to find these features on the site and on the page • know how to operate each feature to achieve their goal • don't have to ponder the meaning of unknown design elements • don't miss important features because they overlook a non-standard design element

5. Designing for Usability • Guidelines: • Are for the design of information-oriented sites whose main purposes are communication • May not be applicable to all audiences and contexts • Provide quantified, peer-reviewed evidence • Help reduce “opinion-driven” design • *Identify where new research is needed*

6. Accessibility • “A quality of web sites that ensures that everyone, including users with disabilities can use them” • Types of disabilities: visual, mobility, auditory and cognitive • All US Federal Government web sites must comply with the Section 508 Federal Accessibility Standards • Ultimately, each organization decides what they want to do about accessibility • UNC - http://www.unc.edu/webaccess/

7. Addressing Accessibility • Use XHTML and CSS • Provide textual equivalents for non-text elements • Enable users to skip repetitive navigation links • Ensure that plug-ins, applets and scripting allow for accessibility • Tables can be problematic • Color blindness: (http://ils.unc.edu/~kennedym/final/test.html)

8. Web Environment: Browsers • Browser wars and Web Standards Project (WaSP) http://www.webstandards.org/ • In mid-1997, Netscape was used 70-80% of the time; by 1998 the share was down to 50%

9. Web Environment: Browsers

10. Addressing Browser Variability • Don’t assume that all users have the same browser features, and the same set of defaults • Design for the most common denominator • Don’t use unnecessary “features” that may not be supported • Design a version for every browser • User chooses correct version • Server sends correct version • Dreamweaver’s Check Target Browser feature

11. Web Environment: Displays • Variation in display is a function of the monitor size and resolution, color capabilities, and a user’s personal preferences. • Typical monitor sizes: 15”, 17”, 19”, 20”, 21” … 40” • Monitor Resolution: the number of pixels on a screen (What is a pixel?)

12. Web Environment: Displays • Typical resolutions: • 640 X 480 (<1%); 800 X 600 (20%); 1024 X 768 (56%); 1152 X 864 (3%); 1280 X 1024 (14%); 1600 X 1200 (>1%) • Remember: the web page is not the only thing that is displayed on the user’s screen; other things take up space too!

13. Addressing Display Variability Flexible Designs. Content flows across the display, taking up all existing space. If a page is resized it reflows to fill up the size of the display. (example: http://www.xs4all.nl/~sbpoley/webmatters/nonflex.html) Fluid Designs. Stays the same for all users, regardless of monitor resolution or browser window size. More like print design principles (constant grid, relationship of page elements, comfortable line lengths). (example: www.ils.unc.edu)

14. Addressing Display Variability Advantages of Flexible Designs • Allows page to be “customized” to a variety of displays • Maintains good design standards • Avoids excessive white space • Mitigates the need to choose a target monitor

15. Addressing Display Variability Disadvantages of Flexible Designs • Line length can get very long making text difficult to read • Elements float around on a page making the page look un-unified and less coherent • Can be unpredictable

16. Addressing Display Variability Advantages of Fluid Designs • Basic layout of the page remains the same regardless of monitor size • Provide better control over line lengths and other elements of the page

17. Addressing Display Variability Disadvantages of Fluid Designs • Potential for horizontal scroll • Elements may be unpredictable if the user has set the font type size larger or smaller than the one that you specified • Bad because “the web is not like print” ----------- • Printing digression …

18. Web Environment: Color • Monitors differ in the number of colors that they can display, if they display color at all. • The most common types of color displays: 8-bit (256 colors); 16-bit (~65,000 colors); and 24-bit (~17 million colors). • What is the most common color display? • What happens when a monitor cannot display a color? Dithering

19. Dithering

20. Addressing Color Variability • There is a set of 216 colors, made from the cross-section of the Windows and Mac system palettes that will not dither on Windows or Mac 8-bit (and higher) displays. • Why is color important? • Assists users in comprehension and learning tasks • Improves performance in search and locate tasks, retention tasks, and decision tasks • Be careful not to only color-code information