Download ITI 230 - HCI: Understanding the Iterative Interface Design Process - Prof. J. Gwizdka and more Study notes Information Technology in PDF only on Docsity!
ITI 230 - HCI
Design
Dr. Jacek Gwizdka
http://www.scils.rutgers.edu/~jacekg/teaching/
Some Slides Copyright © Jacek Gwizdka; Some Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley (^) ITI 230 – HCI (^2)
Review
ITI 230 – HCI 3
Iterative Interface Design Process
Design
Evaluation
Discovery
“Understanding Humans”
ITI 230 – HCI 4
Iterative Interface Design Process
Conceptual Design
Evaluation Prototype & Implement
Discovery
Physical Design
“Understanding Humans” Collect & Interpret Æ Requirements
ITI 230 – HCI (^5)
The Design Process Model
- Discovery
- Discovery Phase questions
- What are the components of the project
- Who is involved
- What are the current work space and work flow like
- What are the contextual and extraneous factors that affect the work flow
- Stages
- Collection
- Interpretation Documentation
ITI 230 – HCI (^6)
The Design Process Model
- Design
- Conceptual Design— What are the possible ways in which the design can address the needs of the problem space? - Personas, - Scenarios, - Use cases, etc.
- Physical Design— What are the possible ways that the conceptual design can be realized in the real world? - Low-fidelity prototypes - Wireframes - Functional prototypes
ITI 230 – HCI (^7)
The Design Process Model
- Evaluation
- Questions
- How can we determine the relative merits of one design over another
- How can we measure the success of a proposed design
- How can we get real users to give us feedback about a proposed design
- How can we incorporate usability testing at the early stages of the design process
- This is documented by the results of formal and informal usability testing.
- Evaluation is not a discrete phase, it is layered
ITI 230 – HCI (^8)
Conceptual Design
ITI 230 – HCI 9
Technology Myopia
- Interaction designs must be sensitive to:
- Human-human communication
- Implicit Knowledge
- Non-technical aspects of work
Integrate technology and human activities carefully
ITI 230 – HCI 10
Conceptual Design
- Conceptual design involves
- Structuring the information space
- Creating of alternative solutions
- Determining which design concept to pursue
ITI 230 – HCI (^11)
Conceptual Design
- Some ways of approaching conceptual design:
A. Is there an appropriate interface metaphor? B. Which interaction style? C. Is there an interface type that could be used?
- Use “Intelligent borrowing”
ITI 230 – HCI (^12)
“Designers Palette” - Interaction Styles
- Command Line
- Menu-Based Interface
- Form Fill-In
- Question and Answer
- Direct Manipulation
- Metaphors
- Web Navigation
- Three-Dimensional Environments
- Zoomable Interface
- Natural Language
ITI 230 – HCI (^19)
Conceptual Design – Semantic
Network
- A semantic network is a web of concepts that are
linked through association.
ITI 230 – HCI (^20)
Conceptual Design – Semantic
Network
- Advantages of semantic networks:
- They allow an easy way to explore the problem space.
- They provide a way to create clusters of related elements.
- They provide a graphical view of the problem space.
- They resonate with the ways in which people process information.
ITI 230 – HCI 21
Conceptual Design – Semantic
Network
- Disadvantages of semantic networks:
- They require knowledge of the problem space.
- They can lead beyond the problem space.
- There is no formal semantics for defining symbol meaning.
ITI 230 – HCI 22
Conceptual Design – Scenarios,
Flowcharts, and Cognitive Walkthroughs
- Scenarios
- A description of a typical task
- It describes The basic goal The conditions that exist at the beginning of the task The activities in which the persona will engage The outcomes of those activities
Scenarios afford a rich picture of the user’s tasks
ITI 230 – HCI (^23)
Conceptual Design – Scenarios,
Flowcharts, and Cognitive Walkthroughs
- Flowcharts can be:
- Simple network diagrams that identify the pages of a Web site and the navigational links between them
- Sophisticated diagrams that capture conditional junctures and computational processes
ITI 230 – HCI (^24)
Conceptual Design – Scenarios,
Flowcharts, and Cognitive Walkthroughs
- Cognitive walkthrough - the evaluator follows the
various scenarios using the flowcharts or the low-
fidelity prototypes
- The evaluator takes the part of the primary
stakeholder and tries to accomplish that stakeholder’s
various tasks
ITI 230 – HCI (^25)
Design space analysis
- Questions-Options-Criteria
- QOC – hierarchical structure: questions (and sub-questions) - represent major issues of a design options - provide alternative solutions to the question criteria - the means to assess the options in order to make a choice
ITI 230 – HCI (^26)
QOC notation
Question
Option
Option
Option
Criterion
Criterion
Criterion
Question …^ ConsequentQuestion …
- Dashed lines represent negative assessments
- Solid lines represent positive assessments
ITI 230 – HCI 27
Process of QOC
- Get relevant information down
- Structure material into rough QOC
- Flesh out design space
- Generate new options and criteria
- Reformulate design space to tidy it up
- Reword Q, O, C if necessary
- Reformulate Questions (and reorganise O, C) to improve decomposition
- Make design decision
ITI 230 – HCI 28
QOC example
Matrix between Option and Criteria
ITI 230 – HCI 29 ITI 230 – HCI (^30)
For the Next Week
- Remember about Readings (Chapter 5)
- For Wed – part 2 of the project
