1. Questions Need to change blue background color to something more related to topic. Check sequence on the powerpoint.

2. WebSet: Generating and Evaluating Alternative Layouts of a Webpage By James Nichols

3. 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.

4. 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

5. Problems (cont.) Designers limited – Creation of layouts Time Memory –Not knowledgeable in HCI “Paper” based sketches –Not easily manipulated –Little tool support

6. Problems (cont.) Need to know more about users Difficult to create tools for evaluation because users vary Facilitate usability earlier in the design process

7. 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

8. Background –Age –Life experiences –Job –Physical abilities –Culture –Language Mental Models (Cooper and Reimann 2003)

9. 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)

10. DENIM

11. DENIM Advantages Allows refinement of navigation Interactive prototype Allows user to determine usability decisions

12. DENIM Disadvantages Does not allow for refinement of individual pages –Considering whether to include something in a page Does not provide informative feedback

13. 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

14. 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?

15. 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).

16. 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

17. WebSet Architecture

18. Implementation Progress Sketch initial Design –Pen-based using SATIN toolkit Create variations using JESS –Vertical, horizontal and combination

19. Implementation Progress (cont.) Modify a variation –Selecting a variation as the new starting point …

20. 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.

21. Implementation Plan Complete creation of WebSet 1.Variations based upon whitespace lines 2.Abstracting information

22. Complete creation of WebSet 3.Drawing lines 4.Labeling headlines, photos, captions, navigation, sidebars, search function, form, header/footer, Ad, Logo, Implementation Plan (cont.)

23. Complete creation of WebSet 5.Add evaluation criteria from User Study 6.Saving file and other commands 7.Testing the program

24. 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).

25. Time table Spring 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

26. Demo Program

27. 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.