internet applications design and usability l.
Skip this Video
Loading SlideShow in 5 Seconds..
Internet Applications Design and Usability PowerPoint Presentation
Download Presentation
Internet Applications Design and Usability

Loading in 2 Seconds...

play fullscreen
1 / 20

Internet Applications Design and Usability - PowerPoint PPT Presentation

  • Uploaded on

Internet Applications Design and Usability Designing for Usability What is usability?

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'Internet Applications Design and Usability' - liam

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
designing for usability
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
designing for usability3
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
standards ensure that users
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
designing for usability5
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*
  • “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 -
addressing accessibility
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: (
web environment browsers
Web Environment: Browsers
  • Browser wars and Web Standards Project (WaSP)
  • In mid-1997, Netscape was used 70-80% of the time; by 1998 the share was down to 50%
addressing browser variability
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
web environment displays
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?)
web environment displays12
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!
addressing display variability
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:

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:

addressing display variability14
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
addressing display variability15
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
addressing display variability16
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
addressing display variability17
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 …
web environment color
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
addressing color variability
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