Home | Previous Conferences



1st Conference on Human Factors and the Web

Theme: Human Factors in HTML/SGML and Web Development

Conference Chair: Chris Forsythe

Date: March 19, 1996

Location: Sandia National Laboratories, Albuquerque, New Mexico

Authors: Mary Czerwinski and Kevin Keeker, Microsoft Usability

Attached are notes taken at the Human Factors in HTML/SGML and Web Development meeting, describing the speakers and their involvement and research on various aspects of Web design.

List of Presentations
  1. Electronic Gridlock, Chris Johnson
  2. A Zooming Web Browser, Ben Bederson
  3. Children's Online Education Environments, Alison Druin
  4. Role of Visualization and Computer Graphics in the WWW, Nahum Gershon
  5. Nine Conundrums in Electronic Publishing, Bob Schumacher
  6. Standardizing the Web: Necessity or Stupidity, Rick Omanson
  7. UI Design of Groupware Applications on WWW, Alex Sorin
  8. Human Factors Methodology for Designing Web Sites, Mark Edwards and Pawan R. Vora
  9. Enterprise Viewing Environment (EVE): Sandia National Laboratories' Corporate Internal Information Infrastructure, Fran Current
  10. Interactive Collaborative Environments (ICE): A Tool for Collaborative Work across the Internet, Keith Bauer
  11. Characterization and Assessment of HTML Style Guides, Eric Gros
  12. Patterns of Usage for a Large, Corporate, Web-based Information Infrastructure and Development of a Corporate Common Look and Feel, Chris Forsythe

Electronic Gridlock
Chris Johnson, U. of Glasgow

Problems with putting video on the Web. The main problem is one of richness at run-time, so you compress them, and force user to download before user can see what they're getting. He has solved the problem by allowing users to see the video before they download it.

Registered sites on the internet:

Demand has gone up because supply has gone up and improved. Result is electronic gridlock: Delays (10% of 240k at É); Frustration; Time shifting (students change their hours to fit the loadings on the Web); Inefficient retrieval (info rich resources eat up bandwidth)

Problems of video retrieval: has a lot to offer but high download latencies. File size:.5 mb=10 sec download time

Tradeoff of compression and reproduction quality.

What is the optimal length of running time for the film to be compressed into? What is the optimal clip length? Didn't answer this. Said there was a pain threshold.

Geographical location: my pain threshold is higher for downloads from farther away. But no direct correlation between geographical location and download time, it interacts with file size. Also affected by the time of day (longest mid-day). Network traffic affects download.

So, file size, location, and network loading have little meaning to na•ve users. Only the clip length has meaning for most users. But, how effective is this style of interaction for 2 sets of users? (casual, browsing users v. motivated, searching users). This was a text- based evaluation: text description of video clips plus their clip lengths. Used subjective satisfaction ratings of download times for a variety of video lengths from 22 through 75 seconds). Most responses were unsatisfactory and Not Bothered. Some users did not download. Asked users questions that could only come from viewing video clips. Then, asked them for satisfaction ratings for same video clip lengths. Even lower ratings for this motivated group, but higher avg. ratings of satisfaction.

Can we approve on the Web standard? Looked at local cinemas, tv listings, etc. Use thumbnail sketches:

Add a graphic and thumbnail to the text description of the video (but give more detail). Used asymmetry in the pages (VERY IMPORTANT tip from design). Also looking at incorporating image maps directly into page and rerunning experiment.

(see work of hyperG people in Austria). With this redesign, folks much more satisfied with download times. Users more willing to voluntarily download longer clips when browsing casually (on museum floor). Perceiving cost-benefit analysis to be in their favor. Motivated users again more satisfied. (higher than browsers).

Now replicating the results on a local disk drive to control for retrieval time confounds from the museum and classroom floors.

Conclusions:


A Zooming Web Browser
Ben Bederson, University of New Mexico

His conclusion from the previous talk is that our tools are completely inadequate, we need video browsers. Feedback is of course important. Maybe a quick browse of the video at very low resolution so you can see if you want the video to download. Or maybe after 10 seconds of a one minute video you can review those first 10 seconds, etc. , and then decide to wait.

He's been developing a new tool for looking at HTML files with a different interaction style. Current Web technology is based on ui technology that's 20 yrs old. Computation time is now just replaced with the limitation of communication time. Relationships in software are completely lost (like, across windows). WIMP interfaces are motivated by real world, but do not offer richness of real world. Lacking smoothness, periphery, and activity. In real world, things don't jump from point a to point c. Uis today lack a smoothness of transition. Periphery means that you have broader knowledge guiding your interaction about what's going on.

His talk is mainly about information retrieval using hypertext on www. His tool, a zooming Web browser, is developed in Pad++, it's a zoomable, graphical sketchpad. Very large workspace that can be panned and zoomed. Based on work by Sutherland, Donelson, Furnas, Perlin and Fox. It's a 2D space with size. Why not 3D? One reason is practical, one is theoretical. To do good 3D with 1000s of nodes, high quality text, etc., it was too expensive. Quickly not becoming the case. For the kind of info he's presenting, he thinks 3D hurts. It's hard to navigate. Zooming is easy enough for people to navigate (if content is organized well) and find the info they want. There's still a training period.

Web browsing application: Web pages get loaded into same info space as everything else. To follow links, it loads new pages off to the side and makes a tree relationship showing where it came from. Focus is larger than others. Dynamic size adjustments show focus. Farther node is from focus node, smaller the node becomes. Fonts are very criticalÑuse a fast system font, but can use any other font. Change to Helvetica, and the system is too slow. Depends on how much text you have loaded in.

They've been using a mini, local spider. It fetches (automatically) things they might be interested and builds the tree for them if system is idle.

Thinks it's preferable to any Web browser in all situations, if technical (speed) details were worked out.

Don't use any scroll bars, just pan. They've been experimenting with other styles of interaction. Use a camera as a porthole over any page or space.

When you move mouse over links on a page, you can see which tree limb off to side is going to be the focus. Other layouts are availableÉ.could show links to urls instead of pages, etc. Says he has run usability studies. Half subjects had used Web browsers, half hadn't. Had them use prototype of Pad++ and just did qualitative testing. Asked satisfaction and preference questions. People thought it was interesting but there were some that thought it was frustrating. All would try it again. These folks were from the UNM, some were from CS and some were from Education, obviously not plain folk. Someone from U of Maryland (Marchioni) ran another qualitative study, but also collected some performance data. Qualitative results showed they preferred pad to Mosaic and that they had fun using it. Preference data showed no content or retrieval rate differences between the two.


Children's Online Education Environments
Alison Druin, U of New Mexico

She claims that the kids ask the following questions:

Another big constructionist talk. Give kids something to DO on the Web, and get away from interactive textbooks. 3-button mouse UI is terrible for kids (adults too).

Summary for kids' Web design
Need clarity of communication, context of information space, and to expand the interactivity.


Role of Visualization and Computer Graphics in the WWW
Nahum Gershon, The Mitre Corporation

Has a list of the 10 worst Web maladies. Need to think about how to design the information and present it to the users one piece at a time. We know a lot about how to design for books, but this is a new medium and we don't understand it well yet. I guess he has a list of things to do in Web design too, but he can't get his computer up on the display. Of, course, he's running on a Mac and the last talk had a different resolution display.

Talks about putting more than one page on the screen if it makes sense. Also talked about wanting to reconnect the pages into your own hyperspace for your own problem, just containing those pages that are relevant to your problem. For instance, if you're just interested in one quotation from Alice in Wonderland, you don't want the whole book. He claims our mind doesn't work in hypertext fashion, it goes in many directions at once. He's designing in STML a site like this. His system would allow you to drag in pictures, pages, text paragraphs, etc., into your own space all on one page. You can then connect them up the way you want. Completely non-linear.

Visualization can help when you query. Dynamic queries are helpful in 3D space. Another system where people at Xerox PARC where people take advantage of visualization on www are Web books. This will be at CHI.

Maladies

See David Seigal's Web page (light pastel backgrounds for dark text; use feeble backgrounds... should be a background, not a foreground). Large white vertical spaces degrade so use single pixel transparent gifs for indents instead. Line lengths of 10-12 words are optimal. Also, use a single pixel trans color GIFs for... ? Hierarchies and relationships-Don't make too deep or too shallow. Depends on user expertise. Represent tree structure with regular layout... didn't get this. Can use cityscapes, color and shapes used for info. Network diagrams in 3d space by Eich is useful for this too. Themescapes (Jim Weiss) can represent relationships too.

Dilemmas


Nine Conundrums in Electronic Publishing
Bob Schumacher, Ameritech

Ameritech is looking at the Web problem from a particular viewpoint. They get reams of information on a daily basis. It can't be handled easily on the Web. He's also interested in document production, and how difficult this is on the Web. His users are 8000 service reps. Task is customer sales and service reps getting info into huge Web documents for call tracking.

He did a Task Analysis, 300 user interviews. Sought good and bad examples, desk audits of users and authors, and examined self-optimized work environments. He examined errors and error rates. In desk audits, he looked at how people organized their massive arrays of information. Looked at all of the diff organizing techniques. Looked at work habits of users.

TA results showed that data needed to turn over daily. And that they had to change the model of how people consumed info. Users rely on a "just in case" model, as opposed to "just in time". Paper is sub-optimal. Writing was difficult to comprehend and use. Poor conceptualization of information space.

Conundrums

Conclusions
Changes need to occur at a systemic level. Document production is key, and good HF is necessary, but not sufficient.


Standardizing the Web: Necessity or Stupidity
Rick Omanson, Ameritech

Why do we need standards? sites are complicated, have multiple owners, created by multiple authors, change constantly.

Difficulty with Standards: limitations and technology change, functionality changes and the types of interaction continually change.

It would be nice to have general usability standards so that we at least avoid the bad mistakes. But it's even harder to have standards for particular sites. His talk will focus on site standards.

What would a good site standard look like? What would be good to document?

When things change... how would you update the standards? Keep em modular, keep em on the Web, maintain a distribution alias of vendors and owners.

Alternative is to have things as they are, and rely on word of mouth.


UI Design of Groupware Applications on WWW
Alex Sorin, Oracle

This talk was on designing a Web client for a groupware application. It's called Interoffice, and it allows folks to share and access info from a variety of sources on Internet. Email, Calendar, Doc management, Conferencing, Directory services. Open interfaces allowed it to be HTML enabled, WWW, and other platforms. Developing a UI in HTML is different from previous UI design paradigms.

Navigation differences

Interaction differences

Layout differences:

So, they designed a prototype given these limitations. Groupware via Internet. Looks like windows, with tabs and button bar across top, button bar on bottom, and it runs in Netscape. Like a more fully integrated Exchange, Schedule+ and Word app running in IE. This is what they were striving for, apparently, they wanted the ui to look as familiar as a windows app. Tried to mimic Windows behavior in HTML, decided to use JavaScript in order to do that, and used image maps for certain windows. He didn't share any other tricks he used to get this kind of windows behavior, due to the proprietary nature of his product (under development right now).

Conducted 2 usability focus groups (2 groups, 16Ss). Ss came from industries with large dbs, and were experienced Win, groupware and www users. Used product usage scenarios with actor using electronic storyboard prototypes (WWW and Win 95 UIs). Wanted to see if there was a need for the Web addition to this groupware product. WWW UI was a big hit. Liked remote access to schedule and email. UI perceived as easy as Win95, and they didn't perceive the html limitations, except for such things as drag Ôn' drop. They also identified some usability issues from this focus group, which they have since fixed.

Showed tapes of the focus groups.


Human Factors Methodology for Designing Web Sites
Mark Edwards and Pawan R. Vora, U S WEST Communications

Exploding Web growth, from 130 servers in 1993, to 90,000 in Jan, 1996, with about 50% being commercial sites. 64% have college degrees, professional (50%), well paid (25% have income over 80,000.00/yr).

Reasons for such growth: ease of navigation, relatively small investment, ease of publishing on the Web, focus from the media (nearly every channel has a Web site, as do newspaper and mag's).

The days of initiating large-scale apps seem to be behind us... for a while. Two types of Web apps have emerged: corporate information/marketing and sales, and data integration from a number of legacy systems.

His talk is about HF has been involved with this embracement of the Web at U S WEST. Three stages of Web site development:

  1. Content analysis,
  2. Design and development,
  3. Content maintenance.

...This process is very iterative.

Stage 1: Content Analysis
Identify and understand the needs of potential users and analyze the info content to be put on the Web. Identify the importance of units of info, determine order of presentation and deployment schedule. Provide an overall structure to the info content (categorization task), generally, they use a hierarchically structured table of contents. They also identify Web clusters at this stage: hierarchical clusters, sequential clusters, catalog and newletter clusters. This is like an information model (cardinality, informationality, etc.). Web clusters are another way to categorize stuff. (Horton, 1995).

Identify Òpage types" and Òlink types" at this stage, too. Page types are based on units of info (people pages, product pages, search pages, etc.) Link types (graphical or textual). These page and link types might become a standard for other, incoming information. Then, consistent navigation within and between pages. Just like node and link type ideas in hypertext literature.

Stage 2: Design and Development Stage
... Decisions made during the content analysis stage are translated into the actual design. HF can influence the look and feel and examine issues of color, contrast and graphics. IMG tag should width and height parameters specified so Netscape browsers can display text while graphics load
... Interlaced GIF format graphics
... If there are linked graphics, give em a 3D look; don't scroll to buttons
... Testing: Though not considered a stage itself, the importance of testing shouldn't be overlooked; and should occur as early and often as possible. Remote testing is easy and useful. The usability specialist can lead remote client through the product over the phone and discuss design alternatives, while maintaining navigational structure.

Stage 3: Content Maintenance
Web site maintenance and information updates. Timely responses to user inquiries and feedback. HF involvement may include: determining process by which feedback is given; determine how updates are communicated to users; determining how frequently outdated info is removed.

Summary
HF can make a significant contribution at each stage of Web site development. We can enrich the user's interaction by facilitating navigation and info access. The biggest contribution comes from the content analysis stage. Need to create guidelines for Web sites to promote consistency of navigation and look and feel.


Enterprise Viewing Environment (EVE): Sandia National Laboratories' Corporate Internal Information Infrastructure
Fran Current, Sandia National Laboratories

Showed the Sandia Web site. Has a tool bar for navigation which is consistent throughout. Home page has a series of categories available. Have administrative v. technical sides of houses separated out by color. Used an index card sort to determine categorization scheme for the Web site. 10 categories made it to top level, and users named the categories. They have policies (like those discussed by Rich above), on home page. Hot news is on home page too. They do a lot of marketing to keep their Web site active. Used the Sun article for how they described their Web site for their empirical methodology. Wrote one big piece of middleware, called the Website information management system, and use that to generate the apps.

Guidelines followed: missed it.

Categories


Interactive Collaborative Environments (ICE): A Tool for Collaborative Work across the Internet
Keith Bauer, Sandia National Laboratories

ICE is an x-windows communication app, in which the client runs the application, which is multiplexed out from a server somewhere. Soon, it'll be Win95 and NT-based. They wanted a client to talk to multiple servers. They chose the magic number of 20 as the limit of servers they could talk to. Client talks to CLERVER (.5 server, .5 client). CLERVER is engine which allows them to share the app. CLERVER talks to servers. Client and servers are unmodified, and unaware of what is going on. No one person is in control (potential for cursor wars), although you can turn off others' input while you're running. They made the assumption that the people using the system are communicating with each other somehow, like over the phone. He ran a demo, shared pointer feature didn't work, probably because he was running an old demo (this he pointed out was very expensive, even if you're running a 28.8 modem). Have licensed it out to a university for use in math classes. Main thrust will be in education. Another good use is to remotely debug machine problems together. The difference between this and something like ProShare is that it's Web-based, they were running on Netscape. Written and licensed to Sun Microsystems 2 yrs ago, now they have SharedApp (or something like that), so this stuff is available on Suns already, but can't use it across other platforms.


Characterization and Assessment of HTML Style Guides
Eric Gros, Sandia National Laboratories

Really titled ÒTraditional v. Web Style Guides: How do they differ?" Web is growing without a lot of direction; style guides have recently emerged. How do these new stylegudes differ from the traditional style guides of the 80's?

Study had 3 focuses:

  1. compare the dev't env's
  2. see how ergonomic they are
  3. see how useful the guides are in actual practice

Five Web and five traditional style guide authors responded to a survey. They found that, for the authoring environment, Web style guides were developed informally (as opposed to traditional guides, which were developed formally). Authors traditionally from HF backgrounds, but Web authors are now from educational env's, and the writing time is now 4 weeks as opposed to year or more.

Comparing the content, 21 WWW sites offering style rec's, yielding 357 unique rec's. Five traditional style guides were sampled -- 270 unique rec's were obtained. They sorted the rec's by category, and compared them to the traditional guidelines. They excluded every rec that wouldn't be relevant to html from both sets (like keyboard equivalence, button fdbk, focus, etc.). Heavier emphasis on common look and feel for Web, also, nav, labels, formatting, content, structure, general and graphics. Traditional styleguidelines emphasized info display, color, menus, icons, buttons, system response, help, data entry, abbrev and acronyms and message boxes more heavily.

Ten HF professionals filled out a survey to determine "essential" rec's from the traditional style guides. Looked at a dataplot of these ratings, and found 26 guidelines whose mean score was > 3, and s.d. < .75 (high agreement amongst raters for these 26). They used a 5- point likert scale (1=not critical, 5=highly critical guideline). He'll give us top 8.

Top 8:

  1. If a user can't log on, a prompt should be provided to explain why
  2. Text should be readable from a normal viewing distance
  3. Use precise values if necessary
  4. Displayed info should be readable
  5. A positive indication of function actuation should be provided
  6. The system should provide positive feedback regarding the acceptance or rejection of input
  7. Data entry formats should match source document formats
  8. An easy mechanism should be provided for correcting erroneous entries

None of these essential recommendations were directly referenced in the Web style guides sampled.

Third phase of experiment was to find out how useful these style guides would be in comparison to Web style guides in practical use (Sandia's Web-based corporate infrastructure).

They then combined all of the guidelines into one big guidelines document, and compared to heuristic evaluation of their Web site. For Sandia Web apps, 40% of findings (HF usability issues) were accounted for in Web style guides. For info only pages, 64% of findings (HF usability issues) were accounted for in Web style guides. Confound is that the different type of Web pages might only need different numbers of guidelines. Base rate error.

Approximately 75% of the recommendations they found appeared in only one Web styleguide. Most of what's being espoused as good design for Web is nothing more than personal opinion. Web styleguides written with less emphasis on traditional ergonomic principles. Web will probably undergo the same pressures to standardize as did the GUI industry (product-driven standards).


Patterns of Usage for a Large, Corporate, Web-based Information Infrastructure and Development of a Corporate Common Look and Feel
Chris Forsythe, Sandia National Laboratories

Competing themes in his talk: what is typical, common most frequent usage vs. what is of interest, diversity..? Also, a contextual theme: Interaction between corporate culture and the Web.

They had a taper off in their Web usage when employees were caught downloading porno off the Web. This caused a huge backlash from upper management in terms of what was appropriate. Web usage shot up when a new president came on board and reorganized the company. People were reading to get the news about who is reporting to whom. Then, an event occurred so that some people might have been laid off, and this caused a number of people to read the Web for news of this. These events were personal, significant events. Correlated to this was the fact that hot news was put up high on their home page. People go in most often to use phone, home page, vacation balance, hotnews, communications, heads up, financial management, administration, weekly bulletin. Top 10 are interactive and change often. User surveys uncovered user naivete with the Web (info haves vs. havenots), that some users still view Web as a toy, and not something to be used during work hours, etc.