HCI_4_DesignProcess

Lakukan tugas rumah & ujian kamu dengan baik sekarang menggunakan Quizwiz!

Overview of Prototyping

Project start Low fidelity prototypes Medium fidelity prototypes High fidelity prototypes Project end

Low Fidelity Prototyping

Uses a medium which is cheap and can be easily changed (paper, cardboard) Low fidelity prototypes: Paper prototypes (sketches,task sequ.) Post-it notes Wizard of oz

Low Fidelity Prototyping: Post-It Prototype

More interactive paper prototype: Dialogs, menus, windows on post-its +Allows simulating actions such as opening dialogs +Quick to change by making new notes

User vs. Stakeholders

Not only primary users are affected by the system. Therefor the term stakeholder has been created. Stakeholder = everybody who is affected by or has an influence of the system Group of SH is usually larger than the group of user. => be aware of the wide impact of any product

Involving Users

Observing what users do to achieve a certain activity Map against features already present in the software and choose features that will be added Each time a feature is finished, it is tested with users off the street, than Findings are fed back into development.

Design at Apple

Paired design meetings: 2 meetings a week First to go crazy Second to work out how this crazy things might work

High Fidelity Prototyping Advanced Software Prototyping

Animation apps (Flash) Web prototyping (DHTML) User Interface Builders + Real look&feel + Can be used for final implementation + More functionality can be added easily

Why Prototype?

- Evaluation and feedback are central to interaction design - Stakeholders can see, hold, interact with a prototype more easily than with a document or an oral description - Team members can communicate effectively - You can test out ideas for yourself - It offers reflection: very important aspect of design - Prototypes answer questions, and support designers in choosing between alternatives

Advantages of Storyboarding

- Helps working out the interaction details - Gives a good overview of the interaction - Helps developing usage scenarios, tasks, and tools

2. Design: Developing an Initial Conceptual Model

- Some elements of the conceptual model will directly derive from the requirements for the product (e.g. storyboard) - Other elements are gained from the attempt to empathize with the users (e.g., product's user experience goals)

2. Design "From Requirements to Design" What are the key principles?

1. Keep an open mind but never forget the users and their context 2. Discuss ideas (with other stakeholders) 3. Don't move to a solution too quickly. Iterate, iterate, iterate 4. Think of alternatives: Prototyping helps a lot

Is There a Suitable Metaphor? Three steps for identifying a well-suited metaphor

1. Understand functionality 2. Identify potential problem areas in which users have difficulties 3. Generate metaphors that support those aspects

The three fundamental activities of all design processes

1. Understanding the requirements 2. Producing a design that meets these requirements 3. Evaluating the design

The First 2 Questions.. you should ever ask

1. Who are the users 2. What they want to do with the system (3. Where is the UI used)

What means "Conceptual Model"

A description of the 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.

Examples of Prototypes

A prototype can be a series of screen sketches a storyboard 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

What are Prototypes

A prototype is a (simplified) model of (parts of) the final product. (It can range from a very simple one like a non-functional sketch; to a piece of software which is close to the final product) Get as early as possible feedback from users

A key for good design in all stages of the process is...

Design alternatives. 1. Discuss them as early as possible, focus on the most promising ones. 2. Refine them in an iterative process. 3. Don't move to a solution too quickly.

High Fidelity Prototyping Screen Shots

Draw screens / UI storyboards (Photoshop, PowerPoint)

Low Fidelity Prototyping: Wizard of Oz Good for...

Early user testing Adding simulated and complex functionality Testing futuristic ideas

Low Fidelity Prototyping: Paper Prototypes Simulate with paper prototypes

Either on one single sheet of paper or sketch each UI snapshot frame on a separate page -> Allows you to simulate the UI for user Show start screen page to user - he selects an action - you turn to the resulting page ...

How to Generate Design Alternatives? "Brainstorming"

First step: - generate plenty of new ideas - do not constrain yourself -> all ideas are allowed -> no "but" Second step: - go through all ideas: rate and prioritize - select the most promising ones => early mock-ups, prototypes

What are Needs? The right way.

Focusing on users goals and on usability and user experience goals. Better than focusing on people's needs and expecting them to be able to tell us the requirements for a product. (Know your user! Find real people interested in your system)

Summary: Interaction Design

Four basic activities in the design process Identify needs and establish requirements Design (and re-design) potential solutions Choose between alternatives (evaluate) Build the artifact Focus on users and tasks Iterate, iterate, iterate Create design alternatives Make heavy use of prototypes Evaluate the design alternatives at each stage

Low-Fidelity Testing

Gather feedback from users using low-fidelity prototypes -> Summarize problems and prioritize them ->Refine the prototype Then: Next iteration of low-fidelity prototyping Until design is promising: -> then: construct higher-level prototype

Why are alternative designs so important?

Helps to 'break out of the box' and to come up with really good new solutions

Horizontal and Vertical Prototypes

Horizontal prototype: provide a wide range of functions, but with little detail Vertical prototype: provide a lot of detail for only a few functions (Typical approach: combination of horizontal and vertical prototype)

Low Fidelity Prototyping: Wizard of Oz

Human ‚wizard' simulates system response Interprets user input according to an algorithm and controls computer to simulate output

Low Fidelity Prototyping: Card-based Prototype

Index cards Each card represents one screen or part of screen

High Fidelity Prototyping

Prototype looks more like the final system (more detail, precise, interactive) Mock-up of some (but not all) aspects of the final UI Create only after initial, simpler prototypes! Important: UI, not functionality is the key! Ex: Flash animation, series of screenshots

Low Fidelity Prototyping: Physical Prototypes

Quickly made out of simple materials (wood, clay, 3D printing) Goal: haptic experience (How large is it, does it fit in your hand,etc)

Low Fidelity Prototyping: Paper Prototypes How-to

Rough paper & pencil sketches Hand-drawn (Similar to a storyboard ,but only shows UI)

Expanding the Conceptual Model: How are the functions related to each other?

Sequential? One functions must be performed before another Or Parallel? What functions can be grouped together?

High Fidelity Prototyping On-Screen Storyboards

Series of screenshots (PowerPoint, Photoshop Layers) Transitions between screenshots are possible (Clickthrough prototype with interactive areas; timing)

The Wrong Way

The Waterfall Model

What means "From Requirements to Design"

Transform users needs/requirements into a conceptual model

From Conceptual Design to Physical Design..

Up to now, we talk about conceptual design. Now we look at physical design. Conceptual Design -> general questions: Metaphors, interaction types, functionality Physical Design -> more concrete: Restrictions of the real product (screen size, small keyboard of smartphones) Concrete mappings, dialogs (How many buttons and where? Which infos displayed and how?)

What are Needs?

User: - rarely know what is possible - can't tell you wthat they need to help them achieve their goals Instead look at existing tasks: - the characteristics and capabilities (Fähigkeiten) of the users - what they are trying to achieve and how they do it currently

When and how to use the Storyboard Technique

- Storyboarding is done after describing a task - The storyboard is presented to the users - Feedback is collected (did you get the story right?)

2. Design: Developing an Initial Conceptual Model Important Questions

- Which interface metaphors are suitable to help users understand the product? - Which interaction type(s) would best support the users' activities? - Do different interface types suggest alternative design insights or options? - Is There a Suitable Metaphor?

Is There a Suitable Metaphor? Evaluate metaphors

1. How much structure does it provide? 2. How much is it relevant to the problem? 3. Is it easy to represent? 4. Will the user understand it? 5. How extensible (erweiterbar) is it?

What are appropriate (geeignete) Interaction Types?

Choose an (or combine) interaction type Choose between different interface types (WIMP, AR, Tangible interaction)

10-3-1 Rule

Come up with 10 entirely different designs Select the 3 most promising ones -> iterate, develop refined versions Select the strongest design

How to Generate Design Alternatives?

Creative atmosphere + Inspiration: look at similar products or look at very different products (design builds heavily upon established ideas) + Use methods like Brainstorming

What are the idea / advantages of Metaphors?

Interface metaphors combine familiar (bekanntes) knowledge with new knowledge in a way that will help the user understand the product.

The Right Way

Involve users during the entire process

1. Question: Who are the users? (Three categories)

Primary: hands-on Secondary: via someone else Tertiary: affected by introduction or influencing purchase

High Fidelity Prototyping Screen Shots Pro / Con

Pro: + Allows for visual detail and quality + Easier to change than hand drawings + Design can become part of actual UI Con: - No interaction, no dynamics - Danger of looking too polished, limits feedback, suggests interface is „done"

High Fidelity Prototyping Pro / Con

Pro: + More engaging for user to try + User can interact with it without designer Cons: - Danger that users think they have a full system... - Users focus on design details and overlook larger problems - Users are afraid to criticize or suggest changes to the "nice" UI design - Management may think the software is almost done

Low Fidelity Prototyping: Pro / Con Paper Prototypes

Pro: + Not detailed, so designer and user focus on important high-level UI designs + Design can be modified quickly Con: - Dialog sequence is hard to convey - Drawing many screens is a lot of work

High Fidelity Prototyping On-Screen Storyboards Pro / Con

Pro: + More interactive than simple screen shots Con: - Simulation fails when script is not followed

Low Fidelity Prototyping: Pro / Con Physical Prototypes

Pro: Get quickly an impression of how the physical product looks like Con: Only little interactive functionality

When to Prototype?

Throughout the entire development phase The open design questions are getting smaller and smaller The fidelity of the prototypes is getting higher and higher

Expanding the Conceptual Model: What information needs to be available?

What data is required to perform the task? How is this data to be transformed by the system

Expanding the Conceptual Model

What functions will the product perform? How are the functions related to each other? What information needs to be available?

Expanding the Conceptual Model: What functions will the product perform?

What will the product do and what the human do? What will be realized in hardware / software? What options are under the control of the user?

When using "Storyboarding" and What is a "Storyboard"?

When: For the early stages of design What: Is generated from the tasks identified in the requirements activity (as a series of sketches showing how a user might progress through a task using the product)


Set pelajaran terkait

HLTH 1100 | HILLMAN | CHAPTER 6 TEST

View Set

34.1-34.5: Flow of Charge, Electric Current, Voltage Sources, Electric Resistance, & Ohm's Law

View Set

Ch. 1 Intro to Human Anatomy and Physiology

View Set

Production & Costs - Practice Quiz

View Set