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:

Other Internet use statistics that might be of interest:

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:

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.

6.1. Theory
6.1.1. Reading: Typography Tips

Typography Defined

Typography is the balance and interplay of letterforms on the page, a verbal and visual equation that helps the reader understand the form and absorb the substance of the page content (Lynch and Horton, 2001).
Good typography depends on the visual contrast between one font and another and between text blocks, headlines, and the surrounding white space (Lynch and Horton, 2001). Your typographic treatment determines how easy your final product is to use, whether it be in print or online. Not only should your typographic treatment be easy to read, it should clearly indicate what should be read first, second, and third, and compliment the overall visual design of your site.
The original designers of the Web were more interested in sharing physics documents with each other than worrying about the visual design of there output. HTML tags were limited to paragraphs, line breaks, and heading tags, and a few others. In the late 1990's, graphic designers using HTML traditionally ignored those HTML tags they felt rendered unattractive typography, like the <H1> and <H2> heading tags, which are too large and heavy for most layouts, and <H4>, <H5>, and <H6> heading tags, which are too small for most uses. Unfortunately, these heading tags have always been very important to the non-visual functionalities of the Web as well, such as automated search engines and specialized accessibility software for people with disabilities. Now you can get the best of both worlds by taking advantage of structural and functional properties these tags have while retaining much more visual control of their output on your Web pages by using them in conjunction with stylesheets (Lynch and Horton, 2001).

References

Castro, E. 2003, HTML For the World Wide Web 5th Edition with XHTML and CSS , Peachpit Press, Berkeley, CA.
Graham, L. 1999, The Principles of Interactive Design , Delmar Publishers, Albany.
Landa, R. 1996, Graphic Design Solutions , Delmar Publishers, Albany.
Lynch, PJ and Horton, S 2001, Web Style Guide , Yale University Press, New Haven, CT.
Shea, D and Holzschlag , ME 2005, The Zen of CSS Design , Peachpit Press, Berkeley, CA .
The Chicago Manual of Style 1993, The University of Chicago Press, Chicago , IL.

6.1.2. Reading: Typography Considerations

Typography Considerations

Fonts that are too light or too heavy may be difficult to read, especially in smaller sizes.
Examples:
- http://www.spork.org/
- http://www.hosanna1.com/
Typefaces with too much thick/thin contrast may be difficult to read if they are set too small – the thin strokes may seem to disappear.
Examples:
- http://www.brownielocks.com/
- http://www.brownielocks.com/mastersgolf.html
Condensed or expanded letters (in letterspacing) are more difficult to read because the forms of the letters change.
Example:
- http://www.w3schools.com/quality/quality_readability.asp
Larger sizes require tighter spaces than smaller sizes. If the type is a display size, you will have to space it differently than a text size.
Example:
- http://www.csszengarden.com/?cssfile=026/026.css
In both display and text sizes, type set in all capitals is generally more difficult to read. A combination of capitals and lowercase letters provides maximum readability.
Example:
- http://www.hosanna1.com/
In general, type that is flush left, ragged right is easiest to read. That does not mean you should not use any other type alignment. Base your decision on several factors: the type size, the leading, the meaning, the audience, and the amount of type. Reading a short message in flush right, ragged left is not too difficult.
Examples:
Where you break the lines of type depends on two basic factors: aesthetics (appearance) and editorial meaning. Line breaks should be aesthetically pleasing. Break lines in natural places to enhance meaning. Indentations and leading between paragraphs also enhance legibility. Paragraphs that are too long are difficult to read. The use of initial capitals also can enhance readability.
Examples:
- http://www.mezzoblue.com/zengarden/alldesigns/official/
- http://cssvault.com/2005/03/
Italics are best used for emphasis, rather than for large blocks of text, which may be difficult to read.
Example:
- http://www.urban.org/publications/900778.html

(Landa, 1996)

6.1.3. Reading: Typography Suggestions

Typography Suggestions

Carefully consider your audience and what limitations they may have when reading text on your Web site. Make sure your text is easy to read.
Design type in a visual hierarchy (that makes the order of material they choose to read through your page self evident). People who tend to read the biggest elements first; they tend to read headlines or titles first, subtitles or pull (large) quotes second, then captions, and finally the text type. When you look at other Web pages, observe the order in which you are attracted to the information and how you read through the various text displayed.
Type arrangement or alignment should enhance readability, not hinder it.
Letterspacing, word spacing, and line spacing all factor into readability, communication and expression.
Consider letterforms as pure forms; think about them as positive/negative space relationships.
Color should enhance the message and expression and not hinder readability.
Word spacing and line spacing establish a rhythm, a pace at which the viewer reads the message.
The typography should be appropriate for the message and audience
Typography should enhance the a message, not detract from it.
When mixing typefaces, think about appropriateness to the message, contrast, weights, visual hierarchy, and scale.
Become very familiar with, and learn to use, at least five classic typefaces, for example, Bodini, Caslon, Futura, Univers, and Times Roman
Avoid novelty or decorative typefaces.

(Landa, 1996)

6.1.4. Reading: Common Web Fonts from Microsoft

Common Web Fonts from Microsoft

6.1.5. Reading: Common Web Fonts By Platform

Common Web Fonts By Platform

6.2. Practice
6.2.1 Reading & Exercises: Getting Intimate with Elements: The Box Model

Getting Intimate with Elements: The Box Model

	Tutorial Exercise
DONE	Read and do the exercises and quizzes in Chapter 10 of Freeman & Freeman's Head First HTML with CSS & XHTML (pp. 385-428). Learn from your mistakes by checking to see if your solutions are correct.

6.2.2 Reading & Exercises: Advanced Web Construction: Divs and Spans

Advanced Web Construction: Divs and Spans

	Tutorial Exercise
	Read and do the exercises and quizzes in Chapter 11 of Freeman & Freeman's Head First HTML with CSS & XHTML (pp. 429-486). Learn from your mistakes by checking to see if your solutions are correct.

6.2.3. Photoshop Tutorials
6.2.3.1. Tutorial: Photoshop Copy Paste Cut Overview
6.2.3.2. Tutorial: Photoshop Canvas Overview
6.2.3.3. Tutorial: Photoshop Pencil Paintbrush Airbrush Overview
6.2.3.4. Tutorial: Photoshop Smudge Tool Overview
6.2.3.5. Tutorial: Photoshop Brushes Overview
6.2.3.6. Tutorial: Photoshop Colors Overview
6.2.3.7. Tutorial: Photoshop Eyedropper Overview
6.2.3.8. Tutorial: Photoshop Rulers Guides Grids Overview

Pages

Tuesday 12 July 2011

Week 7. Module 7: Introduction to User Centered Design