HCI_4_DesignProcess
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)