You will present your results for exercises 8.11 and 8.12 in class on Wednesday, November 10th. Email your presentation to me as part of your homework assignment.
Exercise 8.3: To the left [in the book] is a graphic of a floppy disk. (A firm plastic case encases this disk; before this design, they really were floppy.) How many ways can this disk be inserted in a drive? How does the shape of the disk affect its use? (Is it a square, or is a rectangle? What are those notches for?) How well does this design support Norman’s principles? How so? Can you propose a better design?
Exercise 8.4 (social/ethical): When people cannot figure out to use a mechanical or computer system, why do they sometimes apologize, saying things like, “I’m sorry, I’m no good with mechanical things” or “I’m no good at computers”? Who’s to blame here? What are the business costs as well as broader social costs of interfaces that discourage users? What if anything can be done to alleviate these costs?
Exercise 8.10: How well does the newer user interface of The Universal Computer improve on The Universal Machine, in terms of the principles discussed above?
Exercise 8.11: Evaluate a user interface for another software system—any application or a web site of your choosing—in terms of the usability principles outlined above. Try to take into account the intended purpose and audience of the program. Write up a report describing both the strengths and weaknesses of the interface. Look for things that work as well as things that don’t—effective design isn’t easy! This is a good project for groups of students to work on, then present their results to the rest of a class, which can provide feedback on the group’s work.
Exercise 8.12: Next, propose a redesign of the interface you just critiqued. You may want to do a mock-up of a redesign on paper or use screen capture and graphics editing tools to manipulate the original design.
Exercise 8.13: What are the first three words after the <title> tag and where do these words appear in the browser?
Exercise 8.14: What does each of the parameters of the <body> tag do? (If you can’t figure them out, check out documentation at hhttp://devedge.netscape.com/library/manuals/1998/htmlguide/.)
Exercise 8.15: Looking back at this page in the browser, what happens when you roll the mouse over the picture of the book cover? What happens when you click on the book cover? Viewing the source code again, how did the page get these effects?
Exercise 8.16: Reload or refresh the page in your browser and notice what Knobby does on the right side of the page. What does Knobby do? What did the web page load in to give this effect? The effect is not something the browser does, it just plays the embedded file. (To learn how the file does it, look at http://www.cse.lehigh.edu/~glennb/mm/gifcon/index.htm.) Explain briefly how it works.
Exercise 8.17: There is a button at the bottom of this page that says “Contact Us”. What does it do and how does it work?
Exercise 8.18: Navigate to http://www.cse.lehigh.edu/~glennb/um/weblinks.htm. What happens when you click on different parts of the graphic on top? Explain how it works, in terms of the HTML code.
Exercise 8.19: Design your own web page (see note below). Give it a title,
use different text formatting, heading levels, paragraphs and breaks. Include
a couple of hyperlinks and a graphic as a link to another page. Use alt tags
in your images. Test your work either by having a browser open your HTML file
locally, or by uploading your file to a web server and giving a browser the
URL for your page. Make sure it is clear and usable. Notes: learn
how to set up your own public web page on Lehigh's web server. You can use
Dreamweaver (recommended) or Netscape Composer to create your web page, but
you should also understand the HTML code that the WYSIWYG creates.Exercise 8.22
(explore): Do some research on the web to study the differences between GIF
and JPG formats and when to use which. Support your conclusions about the tradeoffs
with a web page including links to sample images, highlighting the strengths
of each format.
Note: for this assignment, your web site should introduce a
concept that you have learned in this course to your parents.
The requirements are minimal; it should include enough text, graphics and links
to be informative, and it should Flash content (see exercises below); your Flash
movie should include at least two different kinds of animation (e.g., motion,
shape, alpha, motion guide tweens) and buttons that starts and stop each animation.
(Be creative with respect to what the animations look like and how the buttons
work; also consider usability criteria for your target audience.) Ask your parents
for feedback on you web site and evaluate their feedback with respect to the
principles of usability covered in this chapter. Include a link to your site
in your homework submission, and include your feedback from a parent along with
your usability evaluation.
Exercise 8.22 (explore): Do some research on the web to study the differences between GIF and JPG formats and when to use which. Support your conclusions about the tradeoffs with a web page including links to sample images, highlighting the strengths of each format.
Exercise 8.28: You can find the document shown in figure 8.6 on the web at http://www.cse.lehigh.edu/~glennb/um/book/bgcolors.htm. Load it into a web browser, and experiment with it. What are the first three colors and their hex values? Explain how they are produced. Then press the browser’s Refresh or Reload button and repeat the same experiment. Do you get the same three colors? Is this what you expected? Why or why not?
Exercise 8.38: Taking into account the user interface design principles introduced earlier in this chapter, when is a rollover effect a good idea and when might it not be such a good idea?
Exercise 8.43: What is a motion guide for? Explain how to use it to get an animation effect you couldn’t get without it.
Exercise 8.46: If you have access to Flash [you do on campus], experiment with motion tweens (changing the location, size, color and orientation of different images) and shape tweens (morphing between images and changing the alpha transparency of an image). Put each effect on a different layer (you create a new layer on the timeline by clicking on the + icon at the bottom of the timeline area).
Exercise 8.50: After experimenting with the ActionScript described above, try writing a script that will play a movie three times.
Exercise 8.51: The default behavior of the above ActionScript is to open the
specified URL in a new browser window. To open the URL in the same browser window,
you need to add a parameter to the action. Use Flash’s context-sensitive
help facility (a little reference book icon with a question mark on it near
the upper right corner of the Actions window) to learn more about getURL and
its parameters. Then write the ActionScript that opens a URL in the same window.
Extra credit:
Exercise 8.6 (explore, social/ethical): Do some research on the web to learn about accessible web design. What legislation and court rulings mandate accessible web design? What are a few techniques that web page designers can incorporate to made their content more accessible to hearing- or visually-impaired users?
Particularly interesting or cool web sites may be given additional extra credit!
Due: Monday, 11/22, anytime before midnight.
Hand in: When you're ready to submit your assignment, combine your answers to all the exercises into one text file, including a link to your web site. Then, attach your file to assignment #7 (where you got this assignment) in Blackboard.
Prof. Blank