Lecture 4 Flashcards
The design framework. Which are the 4 basic activities?
- Identifying needs and establishing requirements
- Developing alternative design
- Building interactive versions of the designs
- Evaluation designs
What happens if you focus on specific designs and interaction TOO early in the process?
It can get in the way of effectively designing a comprehensive framework
- A big picture is important
What does Goal-directed process mean?
High-level structure of the user interface and associated behavior
What is key while designing?
ITERATE, iterate, iterate! - Revision is fact of life in design
From Requirements to Design: ?
The Design Framework = overall structure of the users’ experience, behavior + Form
What do you define while Defining in Interaction Framework?
- High-level structure of screen layouts
- The flow, behavior, and organization of product
What are the steps while defining in Interaction Framework? (6)
- Define form factor, posture, and input methods
- Define functional and data elements
- Determine functional groups and hierarchy
- Sketch the interaction framework
- Construct key path scenarios
- Check designs with validation scenarios
Defining the Interaction Framework
- 1. Define form factor, posture, and input methods?
– 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
Defining the Interaction Framework
- 2. Define functional and data elements?
– 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
What is a design pattern a solution for?
To a recurring problem in a specific context(good to use when designing new apps/product)
Defining the Interaction Framework
- 3. Determine functional groups and hierarchy ?
– 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.
Defining the Interaction Framework.
- 4. Sketch the interaction framework?
- Simple visualization first
- Top-level view
- Low-fidelity sketches (paper prototypes)
Defining the Interaction Framework.
- 5. Construct key path scenarios?
– 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
Defining the Interaction Framework.
- 6. Check designs with validation scenarios
- A series of “what if..” questions
- key path variant scenarios
(alternate) - Necessary use scenarios
(must be infrequent)
- Edge case use scenarios
(atypical)
- key path variant scenarios
– Poke holes in the design and adjust when needed
Defining the Visual Design Framework
- Develop visual language studies
ex. explore visual treatments, color, fonts, photopraphyies, widget, contrast etc…. (related to the experience goals of personas)
Mood Boards?
An arrangement of images, colors, and materials/shapes/textures that in aggregate give a clear suggestion of a product’s design mood and genre.
Refine and Construction
- Learning from the prototypes and creating a whole
- Flesh out and complete the design
- Quality must be attended to
- Product must be engineered
A Different Process to this?
AgileUX
AgileUX
- 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
Prototype?
• 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
Why Prototype?
• 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
What to Prototype?
• 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
Low-fidelity Prototyping
• 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.
Storyboarding
- 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
Generate Storyboard From Scenario
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.
‘Wizard-of-Oz’ Prototyping?
• The user thinks they are interacting with a computer, but
actually a developer is responding.
Low-fidelity Prototyping, Advantages?
– Low development cost
– Evaluate multiple design concepts
– Useful communication device
– Proof of concept
Low-fidelity Prototyping, Disadvantages?
Disadvantages
– Limited error checking
– Poor detailed specification to code to
– Limited usefulness for usability tests
When is Low-fidelity Prototyping best used?
Best used for exploring initial ideas
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.
⚫ Shows the real system behavior in an interactive manner rather than just presenting static screens
