Session 27

The Web: Critique and Design


Software Systems

Recap Session 26: Web Critique

In the Session 26, you began to critique web interfaces, first generally and then specifically. Even when we are familiar with something like my web space, we can learn a lot when we apply some external standards to analyze and understand it better. In fact, it may be more important to do so with familiar things, because our very familiarity can blind us to what's really there. And our users will see a different "what's there" than we do. (I certainly learn that whenever students critique my web pages...)

In Exercise 39, you are considering a "big question" in web space design...

Summary of Exercise 39

Three Bears! Three Bears! Three Bears!

Most on-line books, including much of the support for Shneiderman's book, use a traditional linear organization. The Extreme Programming wiki web tends toward more of a true hypertext model. Which works best best when?

In the first approach, the author either uses "what people know and are comfortable with" or guesses at an order that will work best for most of her readers. This can be a very non-user-centered approach; it does not recognize the diversity of the user population or of a particular user's needs at a given moment. But it does give the designer a sense of control over the presentation.

In the second approach, ideas are more closely related with hot links wherever appropriate. But what if the user has a particular question? Finding an answer in the "web" can be difficult. What if I need to know about something that I don't even know exists? The "web" may take me there--it's great for browsing--but maybe not! What if I want to print out the document to read elsewhere? The "web" doesn't always translate into good linear text. Sometimes the translation works best if we think of the pages as a form of "chat".

The first approach isn't really hypertext. The second approach is too hard for the reader to control. (The author, too! Consider an instructor who wants to control the time a student accesses certain material, for testing and learning reasons.)

Why not use a hybrid approach?

In fact, most situations call for a mix of the two approaches. By itself, the first over-linearizes content that is not linear. The result is repetition. (How many times does Shneiderman's book introduce the OAI model for interface design??) By itself, the second provides too little structure to the user, who becomes tangled in a deepening spiral of side links.

Providing index pages into tangled webs and aggressively crosslinking linear pages can provide some of the benefits of both approaches. Such hybrids offer multiple views on the same (data) model. Shouldn't adding new views be easy?

The Wiki Web is a great example of this principle in practice: anyone can create a new index page to organize a diverse discussion. The roadmap at which you began your reading of the XP stuff was a late addition to the pages, done by a non-XPer who wanted to help other navigate the web of pages that had grown off the original XP page. It has become something of a defacto front page now.

Thus, we could organize our web as a set of task-specific indices for users plus an underlying web of interconnected pages.

This approach creates some difficulties for the creators of web content! But we are computer scientists: we need to create and use tools that help us manage the practical difficulties (e.g., a request to "print all pages that deal with response time").

But we still face some questions: Which approach is the core design, and which is supplementary? Should topics be in one file or many? How do our answers to these questions affect readability, access time, printing?

Exercise 40: Designing a Hypertext Document for the Web

Work in the same teams as you did for Session 26.

Imagine: You are graduating from UNI and get an interview with Addison Wesley, a publisher of many computer science textbooks, including our own Designing the User Interface. AW is impressed that you studied human-computer interface design with the famous Dr. Wallingford.

The company would like to build upon the pioneering work on hyperbooks described by Shneiderman and begin to sell some of its textbooks as web sites -- no paper, no middleman, just a web site at, say,

Your experience in 810:171 leads AW to believe that your group may be the right team for the job.

As a part of the group interview, they ask your team to demonstrate its qualifications by designing a web site for Chapter 16.

Use the OAI model of Sections 16.6 to design and describe your web site. I suggest that you focus specifically on the material in Pages 567-570. You may also want to consider the Golden Rules of Hypertext of Section 16.2.

The tangible result of your work will be a design document describing the content and organization of your proposed web site. Include sample screen shots and other images to augment your text, as appropriate. Be prepared to present a summary of your design to the class.

Summary of Discussion

Using the OAI model means that you must define the following components in your answer:

How can the user access these necessary "extras": study questions, exercises, related resources, homework and exam questions, ...? At the end? As sidebars? As hot links sprinkled throughout? How would different audiences (students and instructors) affect your organization?

What role do the table of contents and index play now?

---- When I was an undergraduate architecture student at Ball State, I took a required course called Design Communications Media. It was really a freehand drawing class. We used a book call "Drawing on the Right Side of the Brain", which presented several creative techniques for drawing. Among its suggestions was that the artist not draw the chair or building she was looking at, but rather the "negative space" around the chair or building. The idea drew its power from a feature of the human mind: When we try to draw a chair, we sometimes don't really look at the chair because, hey, we all know what a chair looks like, right? We end up drawing a mixture of the chair we are looking at and the idea of a chair in our mind's eye. But we don't have pictures of the space around a chair in our mind, and so drawing it requires us to look at the space with care and great attention. I used this technique often, and I usually found that the chairs and buildings I drew looked more like the real thing than they would have had I tried to draw the chair or building itself.

Using the OAI model may seem like an unnecessary burden, but it is a lot like drawing negative space. We all know what web sites for books look like, right? We've seen such things, and we've seen web pages for similar content, so designing a new web page becomes a snap--just mimic what we know. The result, though, is often that we repeat the errors, or the lack of creativity, or the technological limitations, or the accidents we've seen in other sites, or we repeat errors in our understanding of those sites. Using the OAI model forces you take your eyes of the web site itself and look at the negative space around it: the user's task and goals, the user's mental model of the site present in its metaphor, and so on. The result is usually a better site--and sometimes one more creative and interesting than anything "we already know".

By the way, publishers really want to do this. They figure that electronic books are cheaper to produce than paper ones. But they don't yet have suitable answers to two important questions:

Eugene Wallingford ==== ==== April 17, 2001