Week 9: Design, Prototyping and construction

1
Week 9 Design, Prototyping and construction

• Dr Kathy Egea
• Ch 11 text

2
Assessment update

• Assignment 1 marks are out and feedback delivered
  in class
• Assignment 2 needs to have fixed format
• comp2506_Assignment2_TeamName.pdf (or .doc).
• Team Name is coded as
• T1-9a-z eg T1a
• Submission date
• Completed Assignment work report
• 12 May 09 1600

3
Overview

• Introduction to Prototyping
• Low fidelity and high fidelity prototype design
• Conceptual design from requirements to the
  conceptual model
• Physical design (getting concrete)
• Case Study of paper -prototyping

4
What is a prototype?

• Scaled model
• Beta version of software
• Paper-based outline of a screen (or set of
  screens)
• cardboard mockups
• Simple stack of hypertext links
• etc

5
What is a prototype?

• Paper based story board to a Complex piece of
  software
• Cardboard mockup to a molded piece of metal
• And so, a prototype
• Allows stakeholders to interact with an
  envisioned product, to gain some experience of
  using it in a realistic setting, and to explore
  imagined uses.
• It is a limited representation of a design that
  allows users to interact with it and to explore
  its suitability

6
Example 1

• PalmPilot (Jeff Hawkins)
• Original idea was mocked as a piece of wood about
  size and shape of the device
• Jeff used to carry this piece of wood around with
  him and pretend to enter information into it just
  to see what it would be like to own such a device
  (Bergman and Haitani (2000).
• example of a simple prototype for purpose of
  stimulating scenarios of use.

7
Example 2

• 1982, use of a cardboard box labelled as desktop
  Laser printer as a mockup to enable users to
  experience and envision the use of such a machine
  on desktops
• At that time, printers were not usually on
  desktops, but similar to photocopy machines
  large and in another room.

8
Why prototype?

• Communication device
• Useful to discuss ideas/stimulate alternative
  with shareholders
• Activity of building prototypes encourages
  reflection in design
• Important aspect of the design process

9
Why prototype?

• Answer questions and support designers in choose
  between alternatives
• Serve a variety of purposes
• Test out technical feasibility of an idea
• Clarify vague requirements
• Enable user testing and evaluation
• Check out if the design direction is compatible
  with rest of the system development
• The type of prototype being built will depend on
  the specific purpose of the activity

10
Why prototype?

• If you were trying to determine how users might
  perform a set of tasks and whether your proposed
  design would support them in this, you might
  produce a paper-based mockup
• Example prototype of a hand held device designed
  to support an autistic child to communicate
• Paper-based mockup
• investigate scenarios of use
• decide appropriateness on design features
• Overall shape of the device
• Functions of buttons
• Positioning and labeling of buttons

11
Text, page532
12
Low-Fidelity prototyping

• Does not look like the final product
• Eg different materials such as paper, cardboard,
  wood
• Benefits
• Simple, cheap and quick to produce and modify
• Support exploration
• Used in early stages of design and development
• Never intended to be kept and integrated into the
  final design, used for exploration only

13
Low-level prototyping Storyboarding

• Used in conjunction with scenarios
• Series of sketches showing how one might progress
  through a task using the project under
  development
• Offers stakeholders the opportunity to role play
  with the prototype, interacting with it and
  stepping through the tasks
• Eg Figure 11.2 (p533) demonstrates the steps a
  user might go through in order                   
    to use the system

14
(No Transcript)
15
Low-level prototyping Sketching

• Sketching is important to low-fidelity
  prototyping, part of storyboarding
• Two types
• Objects people, parts of a computer, desks,
  books, etc
• Actions give, find, transfer, and write
• Dont be inhibited about drawing ability.
  Practice simple symbols
• See page 534 for ideas (next slide)

16
Sketching icons
Things
Activities
17
Activity

• Produce a storyboard that depicts how to fill a
  car with petrol.

18
Activity

• Produce a storyboard that depicts how to fill a
  car with petrol.

19
Card-based prototypes

• Index cards (3 X 5 inches)
• Each card represents one screen or part of screen
• Often used in website development

COMP2506 Week 9 Envisionment and prototyping
20
Low-level prototyping Wizard of Oz

• The user thinks they are interacting with a
  computer, but a developer is responding to output
  rather than the system.
• Usually done early in design to understand users
  expectations

User
gtBlurb blurb gtDo this gtWhy?
21
Low-level prototyping Wizard of Oz

• Used as a means to study user expectations and
  requirements or to test difficult interface
  concepts before they are fully working.
• For example, in a search system, a user may type
  in a query, and an expert behind the scenes
  rewrites the query in a formal syntax or
  hand-selects search results. This allows you to
  test theories in query formulation and filtering
  of results.
• Originally used for simple keyboard-input natural
  language recognition system (phd thesis 1980)

References http//www.usabilityfirst.com/glossary
/term_105.txl http//en.wikipedia.org/wiki/Wizard_
of_Oz_experiment (extensive list)
22
Design process with paper prototyping

• Brainstorm contents and concept
• List features and content
• List user goals and client goals (reference
  point)
• Start first version of prototype
• Consider features, their access, supporting
  goals, usage
• Sketch, discuss, iterate ideas until all
  stakeholders are comfortable with the design
  decisions and the shape of the product
• Test you first paper prototype design with users
• Iterate your design to create a second prototype
  design
• Test your second paper prototype design with a
  second set of users. Did your iterations improve
  the user experience?

23
High-fidelity prototyping

• Uses materials that you would expect to be in the
  final product.
• Prototype looks more like the final system than a
  low-fidelity version.
• For a high-fidelity software prototype common
  environments include Flash, Visual Basic, and
  Smalltalk.
• Danger that users think they have a full system

24
(No Transcript)
25
Compromises in prototyping

• All prototypes involve compromises
• Two common types of compromise
• horizontal provide a wide range of functions,
  but with little detail
• vertical provide a lot of detail for only a
  few functions
• Compromises in prototypes mustnt be ignored.
  Product needs engineering
• Interactive design teams need both designers and
  technical folk to ensure that design direction
  can be engineered.

26
Construction

• Taking the prototypes (or learning from them) and
  creating final product
• Final product can be tested for
• usability, reliability, robustness,
  maintainability, integrity, portability,
  efficiency, etc
• Developmental approach and quality control
• Evolutionary prototyping requires rigorous
  testing at each stage
• But Throw-away prototyping does not.

27
Conceptual design from requirements to design

• Conceptual model
• a description of the proposed system in terms of
  a set of integrated ideas and concepts about what
  it should do, behave and look like, that will be
  understandable by the users in the manner
  intended
• Ie
• It is an outline of what people can do with a
  product and what concepts are needed to interact
  with it

28
Concepts underpinning product design

• Depend on
• Who uses it (ie User characteristics)
• What kind of interaction
• What kind of interface
• Terminology
• Metaphors
• Application domain
• etc

29
Conceptual design

• ThusConceptual design is process of transforming
  user requirements and needs into a conceptual
  model
• The question is how
• Guiding principles
• Keep an open mind and never forget users and
  context
• Discuss ideas (all stakeholders)
• Use low-fidelity prototypes for rapid feedback
• Emerge yourself into the user experience
• Iterate, iterate and iterate

30
How to really understand the user experience

• Experience prototyping
• Give designers an insight to users experience in
  more personal way
• Learn by doing concept
• Example Device
• Chest-implanted automatic defibrillator
• Box 11.2 p.541 text

Implanted Cardioverter Defibrillator. http//www.c
hfpatients.com/implants/icds.htm
31
Develop initial conceptual model

• To start
• understand task and activities
• understand the products user experience
• Immerse yourself in the data
• Empathize with users
• Decide on
• Interface metaphors
• Interaction types
• Interface types

32
Is there a suitable metaphor?

• Interface metaphors combine familiar knowledge
  with new knowledge in a way that will help the
  user understand the product.
• Three steps to choose a good metaphor
• Understand what the system will do
  (functionality)
• Identify where users may have problems
• What tasks are critical, or complicated (metaphor
  can support these)
• Generate metaphors
• Look for metaphors in users descriptions
• Look at other metaphors in similar applications

33
Is there a suitable metaphor?

• Then Evaluate the metaphors
• How much structure does it provide?
• How much is relevant to the problem?
• Is it easy to represent?
• Will the audience understand it?
• How extensible is it?
• Consider the travel organiser from week 7
• What metaphor were you considering in your
  design?
• Travel brochure? travel agent? Calendar?

34
Considering interaction types

• Which interaction type?
• How the user invokes actions
• Types
• Instructing, conversing, manipulating/navigation
  or exploring/browsing
• Explore each of these interaction types with the
  online library catalog at UQ

35
What interface types?

• Yes! at the beginning
• Different interface types prompt and support
  different perspectives
• Input and output devices may be a constraint
  (practical prototyping)

• From ch6 (week 1)
• WIMP/GUI interface
• Adv graphical interface
• Web based interfaces
• Speech interfaces
• Pen, gesture, touch screens
• Appliance interfaces
• Mobile interfaces
• Multi-model interfaces
• Shareable interface
• Tangible interface
• Augmented and mixed reality interfaces
• Wearable interfaces
• Robotic interfaces

36
Expanding the conceptual model

• What functions will the product perform?
• What will the product do and what will the human
  do (task allocation? - scenarios of use, use
  cases)
• How are the functions related to each other?
• Sequential or parallel?
• Categorisation e.g. all actions related to
  telephone memory storage of your mobile phone
• What information needs to be available?
• What data is required to perform the task?
• How is this data to be transformed by the system?
  

37
Physical design getting concrete

• No rigid border between conceptual design and
  physical design
• Design is making choices and decisions
• Need to balance environmental context, user, data
  and usability requirements with functional
  requirements
• Eg PDA
• - functionality of data input and output, use of
  function keys affected by physical constraints
  of portable design and display screen

38
Designing for different cultures

• 1 Power distance dimension
• Strong hierarchical cultures (high power
  distance) focus on expertise, authority,
  certificates, leaders, official stamps
• Flat structures (low power distance) focus on
  social and moral order, customers, freedom of
  ideas
• 2 Uncertainity avoidance cultures (routine vs
  risk taking)
• simple clear metaphors and navigation schemes,
  reducant cues to reduce ambiguity
• vs complex with maximum choice, less control,
  multiple links with different coding (colour,
  sound, typography)

39
Designing for different cultures

• Guidelines
• Image
• be careful about using images that depict hand
  gestures or people
• Use generic icons
• Colours
• not associated with national flags or political
  movements
• Data
• support different formats, eg date, time,
  currencies
• Avoid text in graphics not accessible
• Layout
• Allow for text expansion when translated

40
Using scenarios in design

• Express proposed or imagined situations
• Used throughout design in various ways
• scripts for user evaluation of prototypes
• concrete examples of tasks
• as a means of co-operation across professional
  boundaries
• Plus and minus scenarios to explore extreme cases
  see p555 for example

41
Scenario for holiday planner
The Thomson family enjoy outdoor activity
holidays and want to try their hand at sailing
this year. There are four members of the family
Sky who is 10 years old, Eamonn who is 15 years
old, Claire who is 35, and Will who is 40. While
out on a shopping trip they call by at the travel
agents in their local town to start exploring the
possibilities ... The travel organizer is located
in a quiet corner of the agents office, where
there are comfortable seats and play things for
young children. They all gather around the
organizer and enter their initial set of
requirementsa sailing holiday for four novices.
The stand-alone console is designed so that all
members of the family can interact easily and
comfortably with it. The systems initial
suggestion is that they should consider a
flotilla holiday, where several novice crews go
sailing together and provide mutual support for
first-time sailors
42
From scenario to main steps

• Scenario from p. 507 can be broken down into 6
  steps
• The Thomson family gather around the travel
  organiser and enter initial requirements
• The systems initial suggestions is that they
  consider a flotialla holiday but the children are
  happy system travel organiser
• The travel organiser shows them some descriptions
  of the holidays written by young people
• The system asks for various futher details
• The system confirms that there are placed in the
  Mediterranean
• The travel organiser prints out a summary

43
Generate storyboard from scenario (p.507 text)
44
Use case for holiday planner

• 1. The system displays options for investigating
  visa and vaccination requirements.
• 2. The user chooses the option to find out about
  visa requirements.
• 3. The system prompts user for the name of the
  destination country.
• 4. The user enters the countrys name.
• 5. The system checks that the country is valid.
• 6. The system prompts the user for her
  nationality.
• 7. The user enters her nationality.
• 8. The system checks the visa requirements of the
  entered country for a passport holder of her
  nationality.
• 9. The system displays the visa requirements.
• 10. The system displays the option to print out
  the visa requirements.
• 11. The user chooses to print the requirements.

45
Alternative courses for holiday planner
Some alternative courses 6. If the country name
is invalid 6.1 The system displays an error
message. 6.2 The system returns to step 3. 8. If
the nationality is invalid 8.1 The system
displays an error message. 8.2 The system returns
to step 6. 9. If no information about visa
requirements is found 9.1 The system displays a
suitable message. 9.2 The system returns to step
1.
46
Use case diagram for holiday planner
47
Generate card-based prototype from use case
(p.511)
COMP2506 Week 9 Envisionment and prototyping
48
Prototyping physical design

• Expand cards to generate a more detailed software
  or paper-based prototype
• Translate the cards to create a sketch to
  consider
• Input and output technology
• Icon usage
• Error messages
• Menu structures
• Style conventions if appropriate
• Interface layout
• Information display
• Cognitive requirements attention, memory etc

49
Guidelines for physical design

• Shneiderman (1998) - 8 Golden Rules of Interface
  design
• Strive for consistency
• Enable frequent users to use shortcuts
• Offer informative feedback
• Design dialogs to yield closure
• Offer error prevention and simple error handling
• Permit easy reversal of actions
• Support internal locus of control
• Reduce short-term memory load

Reference Shneiderman, B. (1998). Designing the
User Interface Strategies for effective Human
Computer Interaction. 3rd Ed. Reading,MA
Addison-Wesley.
50
Selecting a country from a scrolling window
51
Is this method any better?
52
Menus

• A number of menu interface styles
• flat lists, drop-down, pop-up, contextual, and
  expanding ones, e.g., scrolling and cascading
• Flat menus
• good at displaying a small number of options at
  the same time and where the size of the display
  is small, e.g., iPods
• but have to nest the lists of options within each
  other, requiring several steps to get to the list
  with the desired option
• moving through previous screens can be tedious

53
flat menu structure issues?
54
Cascading menu issues?
55
design issues

• What are best names/labels/phrases to use?
• Placement in list is critical
• Quit and save need to be far apart
• Many international guidelines exist emphasizing
  depth/breadth, structure and navigation
• e.g. ISO 9241

56
Icon design

• Icons are assumed to be easier to learn and
  remember than commands
• Can be designed to be compact and variably
  positioned on a screen
• Now populate every application and operating
  system
• represent desktop objects, tools (e.g.,
  paintbrush), applications (e.g., web browser),
  and operations (e.g., cut, paste, next, accept,
  change

57
Icon forms

• The mapping between the representation and
  underlying referent can be
• similar (e.g., a picture of a file to represent
  the object file),
• analogical (e.g., a picture of a pair of scissors
  to represent cut)
• arbitrary (e.g., the use of an X to represent
  delete)
• Most effective icons are similar ones
• Many operations are actions making it more
  difficult to represent them
• use a combination of objects and symbols that
  capture the salient part of an action

58
Early icons
59
Newer icons
60
Simple icons plus labels
61
Activity

• Sketch simple icons to represent the operations
  to appear on a digital camera LCD screen
• Delete last picture taken
• Delete all pictures stored
• Format memory card

62
Toshibas icons

• Which is which?
• Are they easy to understand
• Are they distinguishable?
• What representation forms are used?
• How do yours compare?

63
design issues

• There is a wealth of resources now so do not have
  to draw or invent icons from scratch
• guidelines, style guides, icon builders,
  libraries
• Text labels can be used alongside icons to help
  identification for small icon sets
• For large icon sets (e.g., photo editing or word
  processing) use rollovers

64
Case study paper prototyping

• Introduction (Mobile phone UI)
• Mobile devices are feature rich and therefore
  requires complex interactive design solutions
• Mobile phone user experience (UE) design projects
  involve multiple disciplines
• SE, Marketing managers, network specialists,
  business managers (all stakeholders in the
  design)
• Other stakeholders include the clients (users)
• Paper prototyping provides a tool for everyone to
  be involved in the design process collaborative
  and consideration of multiple perspectives.

Reference case study Interactive design website
http//www.id-book.com/casestudy_11-2_paper.htm
65
Part 1 Problem space

• Design issues mobile user experience (UE)
  designers have these challenges
• Issues of device constraints, time to market,
  diverse team involved in the projects, proof of
  concept, technology-led design.
• Problem How to design the best UE in the fastest
  time possible?
• Solution rapid methods to allow collaboration,
  prototype, evaluate, and iterate the designs
• Paper prototyping helps the designers to achieve
  this solution.

66
Design Issues (1)

• Device constraints
• Limited input controls, small screen size
• Varying configurations - Different manufactures,
  different navigational approaches
• Often need to design a service for multiple
  devices
• Eg designing a search function for the mobile
  phone
• Issues?

67
Design Issues (1)

• Designing a search function for the mobile phone
• More constraints than a PC, eg text entry is slow
• Search results screen is a challenge eg How can
  a long list of items with many words be
  effectively displayed on a small screen?

68
Design Issue (1)

• Considerations softkeys, menus, sub-menus, use
  of hard keys, time taken for the process to
  complete, menu architecture, payment issues and
  so on.
• Design solution Paper prototyping
• a process is rapid and iterative
• issues can be explored from many angles quicker
  than other methods.
• In this case, to cater for multiple devices,
  method included the creation of a set of
  prototypes for each device

69
Design Issue (2)

• Time to market
• Mobile industry is fast moving
• Design methods need to be rapid
• Challenge design rapidly but be innovative
• Paper prototyping helps
• Develop right product from start
• UE designers work with the team identifying
  UE/usability issues from the start
• Iterations and discussions before visual designs
  or writing code
• Saves time and money

70
Design Issue (3)

• Multiple stakeholders
• May include software engineers, project managers,
  marketing managers, commercial managers, handset
  manufacturers, network operator specialists,
  visual designers and content managers.
• Major challenge
• Question how to get all stakeholders on the same
  page?

71
Design Issue (3)

• Each stakeholder has a varied skill set,
  background, discipline language, requirements
  and motivations.
• Eg
• Marketing person profit and cool designs
• SE challenge - new concepts and timelines
• Handset manufacturer limitations of own device
• UE designer complete product experience from
  user perspective

72
Design solution Paper prototyping

• Powerful communication and collaborative tool
• Enables all stakeholders to work on a single view
  of the product experience, as a group.
• Discuss ideas, compare designs, removing designs,
  iterating the designs until optimum design is
  reached
• Strength simplicity of the materials used in
  design sessions pen and paper, sketching ideas,
  common tool for communication of ideas
• Stakeholders become attached to ideas the more
  they are developed (even if the user experience
  is negative)

73
Design Issue (4)

• Issue Proving concepts early
• Proof of concept prototypes are needed for
  buy-in from stakeholders and others who provide
  investment dollars
• Since designs for mobile technology are
  innovative, concrete examples are necessary
• how it will work and how it looks like
• Here paper prototyping and high fidelity
  prototyping based on real devices are most
  effective

74
Design Issue (5)

• Technology-led, not user-centred
• Typically mobile industry creates products with a
  technology first approach
• Ie created by engineers and technologists with
  limited input from user experience designers or
  usability experts
• Focus is therefore less aware of actual end user
  needs and behaviours
• Paper prototyping enables a user-first approach
• UE designer crafts the user experience
• Design is centred on user and their product
  experience rather than being led by technology.

75
Part 2 Project walkthrough

• Design of a Manchester United Fan mobile phone
  UI
• Walkthrough of various issues
• Small phone app for this case study

76
Design scenario

• Design a rich content experience for a mobile
  telecoms operator company
• Target customers personal interests, and provide
  downloadable themes via online services
• Themes will change the way the customers phone
  looks on screen, and also provide new content
• The example for this scenario is a Manchester
  United football team theme, targeting fans of
  the team.

77
User focus Identify user goals

• First step to identify the key user goals that
  the service is to support, eg
• Checking latest wallpapers online
• Downloading the chosen wallpaper
• Changing the wallpaper settings of the phone to
  new downloaded wallpaper
• Checking the team news headlines
• Checking an individual news story
• Checking the teams upcoming fixtures
• Checking the teams position and scores in the
  league table

78
Content audit/structure identify features and
content

• Operator company aims
• Enable personalisation
• Encourage customer usage of online content

• Content and features
• Manchester United
• Wallpaper images
• Fixtures information
• News stories
• League tables updates

• User Experience considerations
• The download and purchase process
• The installation process for the theme
• The switching between multiple themes
• The navigation of the theme and its contents

79
Design process early stage

• Aim meet the needs of both the client and the
  target user
• Group Braining storming
• Consider all possible content and features
  individually
• Look at how they work together as a completed
  product

80
First Paper prototype first iteration macro vs
micro views
Entire application view
Details of one particular section
81
Macro vs micro view

• Check for consistency of
• Words
• Options
• Layouts
• Other elements
• Consistency is very important with a mobile UI
  design

82
Screen by screen flows

• Map every screen and every view that the user
  will see on each screen
• -note the level of detail captured
• Here the user chooses a player card
• Previews it, downloads it, links it to a WAP
  (wireless application protocol)
• browser screen, waits for the download, and gets
  their card.

83

• Sections and Content
• Explore the content, eg
• What would users expect when they view the
  wallpapers for their teams?
• Do they want to see 20 on a screen at once or
  just 9?
• What design issues are raised based on the visual
  design, the interaction, the marketing viewpoint
  and the network operator viewpoint?

84
Two Design alternatives
Paper prototyping enables a side by side viewing
within the context of the entire
application. Process remove less effective
design once this has been discussed.
85
Mobile phone network issues

• Designers need to consider effect of network
  download issues from the user perspective.
• Some questions to consider at this early stage of
  design.
• What effect does the connection and download
  process of their selected wallpaper have on their
  overall experience with the product?
• Does the user have to wait for a connection to be
  made?
• Do we have to prompt users about what is
  happening or does it happen quickly?
• Can we predict approximately how long it will
  take or is this variable?

86
Mobile phone network issues

• Here the network stakeholder, the client and the
  UE designer might interact and discuss
• Network person understands the technical issues
  of network latency and possible complications
• Client would care about both the network, cost
  to operator and the user experience and how to
  make the business model work
• UE designer role UE diplomat between both
  what users need and what client wants

87
User wait times/user feedback

• Need to map out significant user wait times
• Need to provide users with feedback to manage
  user expectations
• consider
• How to provide feedback
• Type of feedback
• Wording
• Ensure consistency

88
Navigational consistency

• Paper prototype of whole system enables design of
  navigation to be considered as coherent and
  consistent process
• Labels and words
• Hard keys (key pad)
• Soft keys (top hard keys left and right)
• Options menus
• Relevancy of menu to context
• Consistency wording, positions in item lists,
  etc
• Use of a back key (safety)

89
Visual design treatments

• Typeface
• Font size
• Screen size
• Pixel measurement (major constraint)

• Design based on drawings not text descriptions

90
Part 3 Design Exercises (Activity)

• Possible ideas to explore for your concept mobile
  applications are
• A theme that includes content focussed on your
  favourite sport team, music artist, film, city,
  etc.
• A new downloadable city guide to where you live,
  aimed at tourists
• A new service aimed at commuters who have long
  journeys
• A new mobile phone device for elderly people

91
Summary

• Different kinds of prototyping are used for
  different purposes and at different stages
• Prototypes answer questions, so prototype
  appropriately
• Construction the final product must be
  engineered appropriately
• Conceptual design (the first step of design)
• Consider interaction types and interface types to
  prompt creativity
• Storyboards can be generated from scenarios
• Card-based prototypes can be generated from use
  cases