 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

 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

 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

 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

 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

 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

 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

 You never get it right first time.. 9

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

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

 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

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

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

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

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

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

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

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

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

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

Card sorting :  Idea from Peter Merholtz 24

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

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

Storyboards: 28

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

Sketching: 30

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

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

Example: 33

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

 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

 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

 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