2.  refers to the overall experience a user has with a product. This experience doesn’t stop at the use of the product but starts with the advertising and presenting of the brand, through the purchase to the use and the day-to-day feeling the user carries with them about the product.  not enough that people can use a system  they must want to use it! 2

3.  Synonyms for “user-friendly” in Microsoft Word 2002 are easy to use; accessible; comprehensible; intelligible; idiot proof; available; and ready  But a “friend” also seeks to help and be valuable. A friend is not only understandable, but understands. A friend is reliable and doesn’t hurt. A friend is pleasant to be with.  These measures are still subjective and vague, so a systematic process is necessary to develop usable systems for specific users in a specific context 3

4.  The U.S. Human Engineering Design Criteria for Military Systems (1999) states these purposes:  Achieve required performance by operator, control, and maintenance personnel  Minimize skill and personnel requirements and training time  Achieve required reliability of personnel- equipment/software combinations  Foster design standardization within and among systems  Should improving the user’s quality of life and the community also be objectives?  Usability requires project management and careful attention to requirements analysis and testing for clearly defined objectives 4

5.  Ascertain the user’s needs  Determine what tasks and subtasks must be carried out  Include tasks which are only performed occasionally. Common tasks are easy to identify.  Functionality must match need or else users will reject or underutilize the product 5

6.  Ensure reliability  Actions must function as specified  Database data displayed must reflect the actual database  Appease the user's sense of mistrust  The system should be available as often as possible  The system must not introduce errors  Ensure the user's privacy and data security by protecting against unwarranted access, destruction of data, and malicious tampering 6

7.  Promote standardization, integration, consistency, and portability  Standardization: use pre-existing industry standards where they exist to aid learning and avoid errors (e.g. the W3C and ISO standards)  Integration: the product should be able to run across different software tools and packages (e.g. Unix)  Consistency: ▪ compatibility across different product versions ▪ compatibility with related paper and other non- computer based systems ▪ use common action sequences, terms, units, colors, etc. within the program  Portability: allow for the user to convert data across multiple software and hardware environments 7

8.  Complete projects on time and within budget Late or over budget products can create serious pressure within a company and potentially mean dissatisfied customers and loss of business to competitors 8

9.  You never get it right first time.. 9

10. Why do we prototype?  Get feedback on our design faster (save money)  Experiment with alternative designs  Fix problems before code is written  Keep the design centered on the customer 10

11. Fidelity in prototyping :  Fidelity refers to the level of detail.  High fidelity: Prototype look like the final product.  Low fidelity: Artists renditions with many details missing. 11

12. 12

13.  does not look very much like the final project.  Uses materials that are very different from the intended final version, such as paper and cardboard rather than electronic screens and metal  Used during early stages of development  Cheap and easy to modify so they support the exploration of alternative designs and ideas  It is never intended to be integrated into the final system. They are for exploration only. 13

14. Types of Low-Fidelity prototyping:  Paper :  Often surprisingly effective  Experimenter plays the computer  Implemented Prototype  Visual Basic  PowerPoint  Web tools (even for non-web UIs) Html Scripting 14

15. Paper prototyping:  Main idea:  Sketch out prototypes of the interface on paper  Potential users “walk through” task scenarios using the paper interface  A designer “plays computer”  Change the design on-the-fly if helpful  Widely practiced in industry:  Sounds silly at first, but is surprisingly effective  Helps people work together on the design 15

16. The materials:  Large, heavy, white paper (11 x 17)  5x8 in. index cards  Post-it notes  Tape, stick glue, correction tape  Pens & markers (many colors & sizes)  Transparencies (including colored)  Colorforms (toy stores)  Scissors, X-acto knives, etc. 16

17. 17

18. Constructing the model:  Set a deadline  don’t think too long - build it!  Draw a window frame on large paper  Put different screen regions on cards  anything that moves, changes, appears/disappears  Ready response for any user action  e.g., have those pull-down menus already made  Use photocopier to make many versions 18

19. Constructing the model:  Set a deadline  don’t think too long - build it!  Draw a window frame on large paper  Put different screen regions on cards  anything that moves, changes, appears/disappears  Ready response for any user action  e.g., have those pull-down menus already made  Use photocopier to make many versions 19

20. Preparing for a test:  Select your participants  understand background of intended users  use a questionnaire  don’t use friends or family  Prepare scenarios that are typical of the product during actual use 20

21. Conducting a test:  Three or Four testers (preferable)  greeter : puts users at ease & gets data, gets forms filled, assure confidentiality…..  facilitator : only team member who speaks  gives instructions & encourages thoughts, opinions  computer: knows application logic & controls it  always simulates the response, w/o explanation  observer(s) : take notes & recommendations  Typical session is approximately 1 hour (preparing, testing, debriefing) 21

22. Evaluating results:  Create a written report on findings  gives agenda for meeting on design changes  Make changes & iterate 22

23. Advantages of Low-Fidelity prototyping:  Takes only a few hours  no expensive equipment needed  Can test multiple alternatives  Can change the design as you test  Allows designers to work together 23

24. Card sorting :  Idea from Peter Merholtz 24

25. Card sorting : Open Card Sorting: Participants are given cards with no pre- established groupings. They are asked to sort cards into groups that they feel are appropriate and then describe each group. Closed Card Sorting: Participants are given cards showing site content with an established initial set of primary groups. Participants are asked to place cards into these pre-established primary groups. Closed card sorting is useful when adding new content to an existing structure, or for gaining additional feedback after an open card sort 25

26. 26

27. Storyboards:  Where do storyboards come from?  Film & animation  Give you a “script” of important events  leave out the details  concentrate on the important interactions 27

28. Storyboards: 28

29. Sketching:  Advantages:  do not require specification of details  designers feel comfortable with sketching  Drawbacks:  do not evolve easily  force manual translation to electronic format 29

30. Sketching: 30

31. The Wizard of OZ :  Faking the interaction.  The term is from the film “The Wizard of OZ”  “the man behind the curtain”  Main idea:  The participant interacts with a computer interface as usual  Instead of the program writing back, a person writes back pretending to be the computer  Very useful for assessing hard-to-implement features  Speech & handwriting recognition interface design 31

32. DENIM: Designing Web Sites by Sketching :  A sketching tool  Early-phase information & navigation design  Supports informal interaction  sketching, pen-based interaction 32

33. Example: 33

34. Designing Interfaces with Denim : 1. Designer sketches ideas rapidly with electronic pad and pen  recognizes widgets  easy editing with gestures 2. Designer or end-user tests interface  widgets behave  specify additional behavior visually 3. Automatically transforms to a “finished” UI 34

35.  Integrate pen-based and electronic sketching  Support whole design cycle  unlike a paper sketch, this electronic sketch is interactive and can easily be annotated and modified using editing gestures.  SILK allows the designer to extend the interactivity of the recognized widgets using storyboards 35

36.  There are several key differences between DENIM and SILK :  DENIM supports more views of the design (e.g. site map) than SILK and integrates those views through zooming.  SILK recognizes widgets that are sketched by the designer. DENIM does not (yet). 36

37.  Informal prototypes allow you to design (and test!) before writing code.  Paper+ink is the traditional tool, some emerging research tools (SILK, DENIM) also support informal design. 37

38. 38