Lecture 9: Design & Prototyping

DESIGN PROCESS

Two types of design:
conceptual – developing conceptual model, captures what the product will do and how it will behave
physical – details of the design, e.g. screen, icons, graphics, menus

To effectively evaluate the design of an interactive product, must produce and interactive versions of the design

PROTOTYPE
A limited representation of a design that allows users to interact with it and to explore its suitability
Allows stakeholders to interact with the envisioned product, gain some experience of using and explore imagined uses
E.g. paper-based storyboards of a system,, cardboard mockup for a desktop laser printer, hyperlinked screens
E.g. PalmPilot’s founder Jeff Hawkin, carry a carved wood about the shape and size of the device to simulate scenarios of use.

WHY PROTOTYPE

Communication device among team members
Test out technical feasibility of an idea
Effective way for user testing/evaluation
Clarifying vague requirements
Check if the design direction is compatible with the rest of the system development
Recommended in software design, to come before any writing of code

TYPES OF PROTOTYPING



LOW FIDELITY PROTOTYPING

The prototype only retains limited characteristics of the final product
They are cheap and quick to produce -
therefore, they support the exploration of alternative
designs (multiple iterations)
They are particularly good for:
Considering early design issues, e.g. layout of controls and display items, sequencing, etc.
Identifying fundamental problems, I.e. those which lead to errors, confusions, major dislikes

Storyboarding
Series of sketches showing how a user might progress through a task using the device being developed
Often based on scenarios - typical activities
involving the product/system in a story form, e.g.
“a patron wants to purchase Harry Potter movie ticket from the cinema, he uses his mobile phone to make the booking while he is on the bus”

Index Card/Stickies:
Each card/sticky represents an element of a task, one screen or a screen element
Used in user evaluations where a member of
the design team “plays the computer”
Difficulties encountered are observed and/or recorded

Advantages:
Lower cost
Evaluate multiple design concepts
Useful communication device
Disadvantages:
Limited error/usability checking
Facilitator driven
Navigational and flow limitations

HIGH FIDELITY PROTOTYPING

Retains many of the characteristics of the final product
Time consuming and expensive to develop, however:
Enable a wider range of usability issues/ problems to be considered/uncovered
Enable other quality attributes such as aesthetics to be evaluated
Impress management, serve as a good marketing and sales tool

3D form with some limited interaction possible
A range of materials may be employed
Very useful when the physical fit/feel of the product is critical, e.g. a handheld device, a wearable device

Software prototyping
Computer-based mock-ups of interface enabling sophisticated user-system interactions
Variety of prototyping tools exist to support developers with differing levels of fidelity, e.g.
MS PowerPoint
Authorware
Macromedia Flash
Macromedia Director

Advantages:
Complete functionality, look and feel of final product
Fully interactive
User-driven
Marketing/sales tools
Disadvantages:
Expensive to develop
Time-consuming to create
Not effective for requirements gathering

COMPARING PROTOTYPING

Lecture 8: Usability & Usability Engineering

USABILITY

“Usability: the extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use.”

Why is usability important?
-It makes the difference between performing a task accurately and completely or not, and enjoying the process or being frustrated.
-Determine the success or failure of a system
Poor usability…
-Reduce productivity
-Increase cost time and effort

Usability usually refers to software but is relevant to any product. Some ways to improve usability include:
shortening the time to accomplish tasks,
reducing the number of mistakes made,
reducing learning time,
and improving people's satisfaction with a system.

According to Jakob Nielsen (2003), usability is
defined by 5 quality components :

Learnability : ease of learning for novice users.
Efficiency : steady-state performance of expert users.
Memorability : ease of using system intermittently for casual users.
Errors : error rate for minor and catastrophic errors.
Subjective Satisfaction : how pleasant the system is to use.

LEARNING CURVES
Some systems are designed to focus on learnability.

Others emphasise efficiency for proficient users.

Some support a combination of ease of learning and an “expert mode” (for example rich menus and dialogues plus a command/ scripting language)

DOMAIN AND EXPERTISE


RELATIONSHIP BETWEEN USABILITY GOALS AND USER TYPES

Novice Users:
No or limited knowledge of the occupational task to be performed, and of computers and interface concepts or
Knowledge of the occupational task to be performed, and of computers and interface concepts

Knowledgeable Intermittent Users:
Understanding of the task concepts
Broad knowledge of computers and interface concepts.
Intermittently use the system and may therefore have problems with retention

Expert Frequent (Power) Users:
Thoroughly familiar with both task and interface concepts. They are likely to use the system often and appreciate short cuts to speed their work.

TYPICAL WAYS OF MEASURING USABILITY

Learnability: pick novice users of system, measure time to perform certain tasks.
Distinguish between the various timings taken for some general computer experience.

Efficiency : decide definition of expertise, get sample expert users (which tends to be difficult), measure time taken to perform typical tasks.

Memorability : get sample casual users (who are usually away from system for certain time/duration) and measure time to perform typical tasks.

Errors : count minor and catastrophic errors made by users while performing some specified task.

Satisfaction : ask users subjective opinion (questionnaire, interview), after trying system for real task.

USABILITY ENGINEERING

The term usability engineering describes a process of user interface development, sometimes referred to as user centred design.
It is a lifecycle process that puts an early emphasis on user and task analysis and actual user involvement in the design and testing of a product.
A product developed with such a user centred process is likely to be a more usable product than one that is developed independent of user considerations and involvement.

USABILITY ENGINEERING LIFECYCLE



Identify user requirements and problems
-Profile Users
-Task Analysis
Identify usability goals based on user requirements
Checkout similar products
Design and prototype a solution (involve users)
Evaluate prototype
-Usability testing (real users and real tasks)
Reiterate steps 4-5 …until users are satisfied

Identify user requirements and problems:

Define your user population.
Determine the distribution of skills, knowledge and experience within your user population.
Assess the user’s skill level with respect to both the task and computer domain.


Identify user requirements and problems:

Typical Profile:
-40 % Novice Users
-57 % Knowledgeable/Intermittent Users
-3 % Expert Users
Other Important Information:
-10 % of user population colour blind
-15 % are the elderly

Identify user requirements and problems:

Task analysis allows a designer to identify the goals and purposes of the intended user group.
This used to involve further analysis of user requirements or investigation/observation of customers
Used to guide user interface design

Identify usability goals based:
Learnability, Efficiency, Memorability, Error, Subjective Satisfaction
Decide in advance on usability metrics and desired level of measured usability
E.g.


Check out similar products (Competitive Analysis):

Competitive analysis of software components
Competitive analysis of competing systems

Parallel Design (Explore design alternatives):
designers should work independently, then compare draft designs

Participatory Design:
Have access to pool of representative users.
Guided discussion of prototypes, paper mock-ups, screen designs with representative users.

Applying Guidelines:
Guidelines . . . general principles and advice about usability characteristics of interfaces
Can be intimidating – often hundreds or thousands of specific recommendations.

Prototyping & Testing:
Perform usability evaluation as early as possible in the design cycle by building and evaluating prototypes

Lecture 7: Interaction Techniques

MODELS OF INTERACTION

Norman’s Gulfs of Execution and Evaluation
The user formulates a plan of action, which is then executed at the computer interface. When the plan, or part of the plan, has been executed, the user observes the computer interface to evaluate the result of the executed plan, and to determine further actions

To get something done…
Start with a goal – the goal that is to be achieved
Take action to manipulate something
Check against your goal

MODELS OF INTERACTION-EXECUTION



The seven stages of action

1.Forming the goal
Something to be achieved
E.g. “make a nice meal”
2.Forming the intention
Specific statements of what has to be done to achieve the goal
E.g. “make a chicken casserole using a can of prepared sauce”
3.Specifying an action sequence
The precise sequence of operators that must be performed to effect the intention
E.g. “defrost frozen chicken, open can”
4.Executing an action
Actually doing something
E.g. “opening the can”


5.Perceiving the state of the world
Perceiving what actually happened
E.g. the experience of smell, taste and look of the prepared meal
6.Interpreting the state of the world
Trying to make sense of the perceptions available
E.g. putting those perceptions together to present the sensory experience of a chicken casserole
7.Evaluating the outcome
Comparing what happened with what was wanted
E.g. did the chicken casserole match up to the requirement of “a nice meal”?

INTERACTION STYLE
Dialog between the computer and user.
Identification of interaction styles:
-Command Line Interface
-Menu
-Natural Language
-Question/ answer and query dialogue
-form -fills and spreadsheets
-WIMP

INTERACTION STYLE- COMMANDLINE


First interactive dialog style to be used
A mean of expressing instruction to the computer directly using function keys, single characters, abbreviations or whole word command
user responds to a prompt on the screen by entering an appropriate command

Benefits of command line:
It offers direct access to system functionality
Quick to use.
The command can be applied to many objects at once
Easily extensible
Suitable for experience user

Disadvantages of command line:
Difficult to use
Difficult to learn
Difficult for error correction
Difficult for novice user
Text only data representation

Hint: using consistent and meaningful commands and abbreviations

Design guidelines:
Offer maximum flexibility
-Conduct task analysis to determine the necessary commands
-Facilitate command remembering
Use meaningful, descriptive names
-Use consistent format of the command line
-Provide on-line help
Facilitate error correction
-Give feedback on both successful and unsuccessful commands

INTERACTION STYLE-MENUS

A set of options displayed on screen
Relies on recognition rather than recall

Benefits of Menus:
Easy to use, reduces memorisation
Structure the user’s decisions
Easy to program

Disadvantages of Menus:
Limited choices per menu
Slow to use in large systems
Multi-user systems
-slow response times
Can take up a lot of space

Design guidelines:
Group logically related options
Various categories of grouping:
-Alphabetical
-Categorical
-Conventional
-Frequency
Limit options to 7 per menu approximately, or break into sections
Avoid excessively deep hierarchies
Options that are not available at a given time should be faded (grayed).

INTERACTION STYLE-QUESTIONS AND ANSWERS

Consists of computer prompt, i.e. question, set of choices, and a response from the user.
Next question may depend on previous answer given.

Benefits of Q&A:
Easy to use for naïve and novice users
Conversational systems
Computer initiated and controlled dialogue

Disadvantages of Q&A:
Slow to use
-Time to read
there is limited support for going back to correct errors that might have been made in earlier questions.
Generally they are quite slow to use - every question must be answered in order to get through the sequence

Design guidelines:
Only one question at a time
Re-display previous answer (s) if replies are linked
Keep sequences compatible with source document or user task model
Display format of acceptable responses

INTERACTION STYLE-FORM-FILLS

Designed for clerical workers
Requires little experience with computers
To enable them to carry out repetitive clerical data collection tasks.
Mimicked paper forms in order to retain the characteristics of the manual task
Designed for a specific type or task.

Advantages
-Forms offer a neat, structured way of gathering information.
Disadvantages
-A form has to be designed specifically for each task.
Users will require a certain level of typing skill

Design guidelines:
Text box :
-Maximum size of text-box can be determined beforehand.
In many fields it is possible to provide a default value for a data field
In some forms, certain values might be required, other optional.
-For required items, program might not proceed to other fields until value is entered.
Interdependencies can be incorporated in the program.
-For example, if one element asks if user is pregnant, then 'female' is automatically entered in the 'sex' field.

INTERACTION STYLE-WIMP

Windows, icons, menus and pointers
The user carries out some physical action (e.g. clicking, dragging) rather than typing commands with complex syntax
The results of the action are seen immediately and, usually, actions are reversible

Advantages:
Novices can learn the basic functions quickly, usually through demonstration and practice rather than from formal instruction or a manual.
Intermittent users can retain the main operational concepts of the interface because it involves visual recognition.
Error messages are rarely needed because most actions are reversible.
There is immediate feedback as to whether or not the user's goals have been achieved.
Users are less anxious, again because they know actions can be reversed.

SUMMARY

Interaction is the heart of all modern interfaces and is important at many levels from the ordering of screens to the clicking of a button.