Lecture 4

Question 1

The design framework. Which are the 4 basic activities?

Answer 1

• Identifying needs and establishing requirements
• Developing alternative design
• Building interactive versions of the designs
• Evaluation designs

Question 2

What happens if you focus on specific designs and interaction TOO early in the process?

Answer 2

It can get in the way of effectively designing a comprehensive framework
- A big picture is important

Question 3

What does Goal-directed process mean?

Answer 3

High-level structure of the user interface and associated behavior

Question 4

What is key while designing?

Answer 4

ITERATE, iterate, iterate! - Revision is fact of life in design

Question 5

From Requirements to Design: ?

Answer 5

The Design Framework = overall structure of the users’ experience, behavior + Form

Question 6

What do you define while Defining in Interaction Framework?

Answer 6

• High-level structure of screen layouts

- The flow, behavior, and organization of product

Question 7

What are the steps while defining in Interaction Framework? (6)

Answer 7

1. Define form factor, posture, and input methods
2. Define functional and data elements
3. Determine functional groups and hierarchy
4. Sketch the interaction framework
5. Construct key path scenarios
6. Check designs with validation scenarios

Question 8

Defining the Interaction Framework

- 1. Define form factor, posture, and input methods?

Answer 8

– Form factors: a combination of hardware and software that enable a product to function
– Posture: how much attention a user will devote to interacting with the product?
– Input methods: the way users will interact with the product, e.g., keyboard, mouse, touch screen, voice, etc.
– Based on context scenarios

Question 9

Defining the Interaction Framework

- 2. Define functional and data elements?

Answer 9

– Data elements: fundamental objects of interactive
products, e.g., photos, emails, orders, etc. (Consider relationships between data elements, e.g., a photo within an album)
– Functional elements: operations that can be done to the data elements and their representations

– Should be defined in response to requirements identified earlier
– Apply design principles and patterns

Question 10

What is a design pattern a solution for?

Answer 10

To a recurring problem in a specific context(good to use when designing new apps/product)

Question 11

Defining the Interaction Framework

- 3. Determine functional groups and hierarchy ?

Answer 11

– Facilitate the persona’s flow both within a task and
between related tasks. E.g.,
• Which elements are used together and which aren’t?
• In what sequence will a set of related elements be used?
• Which elements need a large amount of real estate and
which do not?
• Which elements can be hidden in the main frame?

– Organize data and functions into top-level container elements such as screens, frames, and panes.

Question 12

Defining the Interaction Framework.

- 4. Sketch the interaction framework?

Answer 12

• Simple visualization first
• Top-level view
• Low-fidelity sketches (paper prototypes)

Question 13

Defining the Interaction Framework.

- 5. Construct key path scenarios?

Answer 13

– How the persona interacts with the product: the primary pathways (i.e., the greatest frequency)
– Iterate the key path scenarios and simplify user operations
– Task-oriented with goals in mind – Build low-fidelity prototypes, e.g.,
storyboarding

Question 14

Defining the Interaction Framework.

- 6. Check designs with validation scenarios

Answer 14

• A series of “what if..” questions
  
  • key path variant scenarios
    (alternate)
  • Necessary use scenarios
    (must be infrequent)
    - Edge case use scenarios
    (atypical)

– Poke holes in the design and adjust when needed

Question 15

Defining the Visual Design Framework

Answer 15

• Develop visual language studies
  ex. explore visual treatments, color, fonts, photopraphyies, widget, contrast etc…. (related to the experience goals of personas)

Question 16

Mood Boards?

Answer 16

An arrangement of images, colors, and materials/shapes/textures that in aggregate give a clear suggestion of a product’s design mood and genre.

Question 17

Refine and Construction

Answer 17

• Learning from the prototypes and creating a whole
• Flesh out and complete the design
• Quality must be attended to
• Product must be engineered

Question 18

A Different Process to this?

Answer 18

AgileUX

Question 19

AgileUX

Answer 19

• User research is conducted before the project begins or is announced (iteration 0)
• Requirements are specified only in enough detail for implementation to begin
• Re-prioritization may happen frequently in design in response to changing business needs
• Focusing on getting (innovative) products into the market and capturing user feedback for products already in the marketplace

Question 20

Prototype?

Answer 20

• In interaction design it can be (among other things):
– a series of screen sketches
– a storyboard, i.e. a cartoon-like series of scenes
– a PowerPoint slide show
– a video simulating the use of a system
– a lump of wood
– a cardboard mock-up
– a piece of software with limited functionality written in the
target language or in another language

Question 21

Why Prototype?

Answer 21

• Evaluation and feedback are central to interaction design
• You can test out ideas for yourself
• It encourages reflection: very important
aspect of design
• Team members can communicate effectively
• Stakeholders can see, hold, interact with a prototype more easily than a document or a drawing

Question 22

What to Prototype?

Answer 22

• What gets prototyped must be pre-defined and agreed upon
• Create pages, page elements, and interactions that are part of a prioritized list of user workflows that must be tested
– Prototype high-priority use cases (and primary scenarios) first
– Negotiate which alternative scenario, if any, needs to be prototyped
• Low vs. high fidelity prototyping

Question 23

Low-fidelity Prototyping

Answer 23

• Uses a medium which is unlike the final medium, e.g. paper, cardboard
• Is simple, quick, cheap and easily changed
• Never intended to be kept and integrated into the final
product.

Question 24

Storyboarding

Answer 24

• It is a series of sketches showing how a user might progress through a task using the device
• Often used with scenarios, bringing more detail, and a chance to role play
• Used early in design

Question 25

Generate Storyboard From Scenario

Answer 25

Scenarios express proposed or imagined situations
– Scripts for user evaluation of prototypes – Concrete examples of tasks

• Plus and minus scenarios to explore extreme cases

–As the basis of storyboard creation and to build a shared understanding among team members

• Breaking the scenario into a series of steps which focus on interaction, and creating one scene in the storyboard for each step

• As a means of selling ideas to users, managers, and potential customers.

Question 26

‘Wizard-of-Oz’ Prototyping?

Answer 26

• The user thinks they are interacting with a computer, but

actually a developer is responding.

Question 27

Low-fidelity Prototyping, Advantages?

Answer 27

– Low development cost
– Evaluate multiple design concepts
– Useful communication device
– Proof of concept

Question 28

Low-fidelity Prototyping, Disadvantages?

Answer 28

Disadvantages
– Limited error checking
– Poor detailed specification to code to
– Limited usefulness for usability tests

Question 29

When is Low-fidelity Prototyping best used?

Answer 29

Best used for exploring initial ideas

Question 30

High-fidelity Prototyping

Answer 30

⚫ Uses materials that you would expect to be in the final product.
⚫ Prototype looks more like the final system than a low-fidelity version.
⚫ Shows the real system behavior in an interactive manner rather than just presenting static screens