Week 7. Module 7: Introduction to User Centered Design

WEEK 7. Module 7: Introduction to User Centered Design

7.1. Theory
7.1.1. Reading: Internet Design Challenges
 
7.1.2. Reading & Exercise: User Centered Design: User Statistics 

7.1.1 Internet Design Challenges

Web pages are served quickly by tapping into as many features as possible of a user's computer operating system. Things like fonts, colours, and graphic displays. The problem is Microsoft Windows is quite different from Apple Macintosh and Linux systems – and this causes most Web pages to display quite differently on different operating systems. This inconsistency is further exasperated by the range of browsers available which also have their own quirks in displaying information. Although great steps have been taken to establish standards that will alleviate these problems, they still represent one of the biggest challenges for Web designers today.
You typical HTML document is nothing but a set of instructions written in ASCII that tells your visitor's browser what other files to download and how to display them. HTML and XHTML are very different from Desktop Publishing — instead of bundling every component of your page into one document, they keep everything independent and rely on Web browsers to stitch everything together after reading the instructions provided in the code.
Here are some characteristics of the three most popular operating systems that will affect the way Web pages function and are displayed on them:

Windows Characteristics	Macintosh Characteristics	Unix/Linux Characteristics
larger fonts than Mac different color palette from Mac 72 dpi is really 96 dpi (which will make graphics appear smaller) different font set darker gamma appearance uses \ back slashes to separate directories	different color palette from Windows smaller fonts than Windows different font set different interpretation of 72 dpi from (graphics appear larger) lighter appearance than Windows	Usually text based Case-sensitive! Won't tolerate spaces in file names or folder names No such thing as an extension (but often uses *.html) A dot before a file denotes hidden files Fonts & color palette different from Mac and Windows uses / forward slashes to separate directories

Unix — most Web servers use the Unix operating system (see http://www.netcraft.com/survey/ ), which often causes problems when uploading Mac/PC documents if you're not careful about UNIX file and folder naming conventions.

Historial Battle of the Browsers:

• Mosaic — the original multimedia browser, developed by Marc Andreessen when he was a student at the University of Illinois' National Center for Supercomputing Applications. It was VERY slow, largely because it waited for entire page before showing you anything. See http://www.ncsa.uiuc.edu/SDG/Software/mosaic-w/
  
• Netscape — a commercial version of Mosaic? After Marc Andreessen left the National Center for Supercomputing Applications at the University of Illinois , he helped start a company originally called “ Mosaic Communications Corp ”, and later “ Netscape ”. Netscape was revolutionary because it supported interlaced graphics and showed pages while they were downloading. Netscape flooded marketplace by introducing free beta verion (0.9), and then turned around and started charging commercial users for the full version (1.0). It was MUCH faster than Mosaic.
  
• Microsoft Internet Explorer 3-6 — Revolutionized free access to Web browsers. Why would anyone pay for Netscape when Microsoft was giving away a browser for free with their operating system? After Microsoft realized that Netscape was potentially positioning themselves to develop a Web-interfaced java-run multi-platform operating system, they flooded market place with a free version of MSIE 2.0 and built it into the Windows 95 Operating System. Netscape had to start giving their browser away for free to compete, relying on server software to earn revenue.
  
• Mozilla Firefox – Once Microsoft solidified their lead in the browser war, they stopped doing any serious development on Internet Explorer after 2000. The Mozilla Fondation was established in 2003 to provide organizational, legal, and financial support for the Mozilla open-source software project (About the Mozilla Foundation, 2005). Mozilla released browsers that automatically blocked pop-up advertisements and introduced other new features to create a faster and more enjoyable browsing experience than Internet Explorer was able to provide. In May, 2005, some Web sites keeping track of Web surfing statistics were reporting as many as 25% of their visitors were using Mozilla Firefox Web sites were Mozilla Firefox.
  
• Microsoft Internet Explorer 7 – Now that Mozilla Firefox has clearly demonstrated a significant surge in popularity, Microsoft has resumed development and is preparing the release of its next browser.
  
• Other browsers making up a much smaller percentage of browser pie include Opera (Win/Mac), Safari (Mac), and Konquerer (Linux). 
• 
  

References

Browser Statistics 2005. Retrieved: May 10, 2005, from http://www.w3schools.com/browsers/browsers_stats.asp . Gillespie , J 1999, Designing for 'The Other' platform , Retrieved: May 10, 2005, from http://www.wpdfd.com/editorial/wpd0499.htm . Browser News 2005. Retrieved: May 10, 2005, from http://www.upsdell.com/BrowserNews/stat.htm . About Mozilla 2005. Retrieved: May 10, 2005, from http://www.mozilla.org/about/ . Thurrott, Paul 2005. Internet Explorer 7 Preview 1. Retrieved: May 10, 2005, from http://www.winsupersite.com/reviews/ie7_preview_1.asp .

7.1.2 User Centered Design: User Statistics

As we've discussed earlier, part of the challenge of Web design is to satisfy the wide variety of visitors' computers and software. The World Wide Web has been designed to use as many client resources as possible to speed up the browsing experience. These resources include fonts, colors, screen resolutions, and more. Because of this, it is important that you know what computer and software your visitors are using to view your pages.
The following is a list of some Web sites that collect and publicly list visitor browser statistics. You can use this information to follow the trends in browser use and make sure your Web sites are visibly similar and function properly for the majority of Web users:

• http://www.w3schools.com/browsers/browsers_stats.asp
  
• http://www.upsdell.com/BrowserNews/stat.htm
  
• http://www.upsdell.com/BrowserNews/stat_trends.htm
  
• http://www.webreference.com/stats/browser.html
  
• http://www.thecounter.com/stats/
  

Other Internet use statistics that might be of interest:

• http://www.clickz.com/stats/
  
• http://www.w3.org/WAI/GL/2001/01/22-stats.html#browsers
  
• http://www.e-consultancy.com/knowledge/statistics/
  
• http://webreference.com/internet/statistics.html
  
• http://www.netmechanic.com/browser-photo/tour/BrowserList.htm
  

This is a good source for finding old browsers for testing purposes:

• http://browsers.evolt.org/
  

This site will take multiple snapshots from the perspective of many different browsers, operating systems, and resolutions so you can see how they differ in appearance to users of the Web:

• http://browsershots.org/

Things to Know about Screen Resolutions

Resolution refers to “dots per inch”, or “pixels” (picture elements) in multimedia. The higher the resolution, the smoother and more detailed an image appears.
Unlike printing (which uses varying sides of dots), multimedia graphics are composed of pixels which all occupy a full square. Therefore, dpi should really only refer to printing dots, while for multimedia resolution, you should really use the term ppi (pixels per inch).
Screen Resolutions:

• Macintosh Computers = 72 pixels per inch
  
• Windows Computers = 96 ppi

72 ppi is considered the standard for multimedia use.
A 72 pixel wide graphic will, theoretically, appear to be

• one inch wide on a Macintosh screen
  
• Slightly smaller on a Windows screen

 
Screen Dimensions:
As you'll notice from examining the statistics sites, while most people are currently using monitors with a resolution of 1024x768, there are still a significant number of people viewing the Web in 800x600, 1280x1024, and 1152x864 pixels. There are probably not enough people surfing the Web at the old 640x480 resolution we were using ten years ago to worry about designing for anymore.

Tutorial Exercise

Visit http://www.ranks.nl/tools/screen_resolutions.html and test the Curtin University home page [ http://www.curtin.edu.au ] for the following screen resolutions: 640x480, 800x600, 1024x768. What observations can you make? Will the page work effectively at each of these resolutions? Why or why not? Which resolution(s) seems to work best? Why? Visit http://www.anybrowser.com/ and run the Curtin University Home page (http://www.curtin.edu.au) through the following browser tests to see if there are any problems: SiteViewer HTML Validation Engine View Be sure to read the instructions and background notes carefully. Then write your observations about any problems you've encountered viewing the Curtin University home page. Post your findings to the Flecs-Blackboard discussion board.