Questions

• Need to change blue background color to something more related to topic.

• Check sequence on the powerpoint.

WebSet: Generating and Evaluating Alternative Layouts of a Webpage

By James Nichols

Web Goal: Fast creation of pages

• Create website design faster

• Create a few layouts with paper based sketches

• Trial and error “online” testing

• May use programmers as designers

• Usability should be built-in to the product“lorem ipsum dolor sit amet”"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit ...," Translation: "There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..." de Finibus Bonorum et Malorum, a treatise on the theory of ethics by Cicero in 45 B.C.

Problems

• User-friendliness is key – Desired but is an afterthought– Emergent property– “Big bang theory”

• Trial and error “online” doesn’t work well– Users find other sites– (Expert) Users resistant to change

Problems (cont.)

• Designers limited– Creation of layouts

• Time• Memory

– Not knowledgeable in HCI

• “Paper” based sketches – Not easily manipulated– Little tool support

Problems (cont.)

• Need to know more about users

• Difficult to create tools for evaluation because users vary

• Facilitate usability earlier in the design process

Usability: Biggest Risk

• Users determine success or failure

• Users typically judge based on:– Layout (easy to find what they’re looking for)– Understand what need to do and how to do it– Understand/recognize what system is doing– Speed

• Cognitive Friction (Cooper 1999)

• Variety of users

Variety of users

• Background– Age– Life experiences– Job– Physical abilities– Culture– Language

• Mental Models (Cooper and Reimann 2003)

Usability Tool Categories

• Low-level evaluation (consistency)– Spelling– Metrics (ex. number of displays)

• Run-time logging software– Captures users’ patterns of activity

• Tullis’s Display Analysis Program• NGOMS (Goals, operations, methods and

selection rules)

• Toolkits/Libraries (i.e. SATIN)• Design Assistance (i.e. DENIM)

DENIM

DENIM Advantages

• Allows refinement of navigation

• Interactive prototype

• Allows user to determine usability decisions

DENIM Disadvantages• Does not allow for refinement of individual

pages– Considering whether to include something in a

page

• Does not provide informative feedback

Problem Recap

• DENIM only addresses navigation and not design of individual pages

• Need to know more about user preferences

• Understand the requirements of tools to facilitate usability in the design stage

Goals

• Provide designers the ability to quickly view many possible solutions.

• Assist designers in choosing initial design to improve usability

• Explore the requirements for producing additional tools that incorporate usability into the design phase

• Understand how users work (evaluation details) How do users conceptualize an interface?

Goals (cont.)

• Assist designers in using user’s preferences to put the product in the solution space region more desired

• Perhaps seeing many designs will uncover requirement flaws such as incorrect assumptions or reveal new requirements

• (Although the above cannot be determined as well without a tool such as the one I’m describing).

Solution: WebSet

• Programmed in Java • Uses JESS Expert System and SATIN toolkit• Creating variations

– Ability to create large quantity– Ability to easily introduce new variations in the future

• Iteratively modify variations• Evaluating variations

– Present evaluation information to designer– Ability to easily update evaluation criteria in the future

WebSet Architecture

SATIN

JESS Expert System

Interface

Implementation Progress• Sketch initial Design

– Pen-based using SATIN toolkit

•Create variations using JESS

–Vertical, horizontal and combination

Implementation Progress (cont.)

• Modify a variation– Selecting a variation as the new starting point

…

Implementation Plan• User study (determine evaluation criteria)

– Two designs presented to the users with one aspect varying.

– User chooses a design. – Measure time to select design as well as

design chosen.– User will see approximately 20 pairs.– A survey will be filled out by the user once

they have completed the study.

Implementation Plan• Complete creation of WebSet

1. Variations based upon whitespace lines

2. Abstracting information

• Complete creation of WebSet

3. Drawing lines

4. Labeling headlines, photos, captions, navigation, sidebars, search function, form, header/footer, Ad, Logo,

Implementation Plan (cont.)

Implementation Plan (cont.)

• Complete creation of WebSet

5. Add evaluation criteria from User Study

6. Saving file and other commands

7. Testing the program

Contributions

• Designing a system to make knowledge of evaluation of variations explicit (first type of system)

• Increase knowledge of users’ preferences

• Provide many alternative designs to the designer to increase creativity

• Pave the way for individual webpage rankings to be combined with navigation (I.e. combining WebSet with DENIM).

Time tableSpring 2008: Present dissertation proposal/IRB

Approval for User study/Perform user study/Work on refactoring program

Summer 2008: Finish User Study/New functionality for program/Test the program/Initial journal paper

Fall 2008: Complete program/Finish up dissertation

Spring 2009: Write additional journal papers

Complete dissertation paper rework

Demo Program

References

• Cooper, Alan. “The Inmates are Running the Asylum” Sams Publishing, 1999.

• Cooper, Alan and Robert Reimann. “About Face 2.0: The Essentials of Interaction Design.” Wiley Publishing 2003.

• Lin, James and Michael Thomsen and James A. Landay. “A Visual Language for Sketching Large and Complex Interactive Designs” CHI 2002.