Lecture 7
Mental Models and Conceptual Design
UX Theory / IIT 2014 Spring
Class hours : Monday 4 pm – 7 pm
14th April
INTRODUCTION
Lecture #7 IIT_UX Theory 2
Figure 8-1
You are here; the second of three chapters on creating an interaction d...
MENTAL MODELS
• Designer’s mental model
– Vision of how system works as held by designer
• What the system is
• How it is ...
MENTAL MODELS
Lecture #7 IIT_UX Theory 4
Figure 8-2
Mapping the designer's mental model to the user's mental model.
MENTAL MODELS
• Designer’s Mental Model
– Designer’s mental model in the ecological perspective: Describing what
the syste...
CONCEPTUAL DESIGN
• Leverage Metaphors in Conceptual Design
– Metaphors in the ecological perspective
– Metaphors in the i...
CONCEPTUAL DESIGN
Lecture #7 IIT_UX Theory 7
Figure 8-3
Designer workflow and connections among the three conceptual desig...
CONCEPTUAL DESIGN
Lecture #7 IIT_UX Theory 8
Figure 8-4
Part of a conceptual design showing immersion in the emotional per...
CONCEPTUAL DESIGN
Lecture #7 IIT_UX Theory 9
Figure 8-5
Early conceptual design ideas from the ecological perspective(sket...
CONCEPTUAL DESIGN
Lecture #7 IIT_UX Theory 10
Figure 8-6
Ecological conceptual design ideas focusing on a feature for a sm...
CONCEPTUAL DESIGN
Lecture #7 IIT_UX Theory 11
Figure 8-7
Ecological conceptual design ideas focusing on a feature showing ...
CONCEPTUAL DESIGN
Lecture #7 IIT_UX Theory 12
Figure 8-8
Ecological conceptual design ideas focusing on the features for
c...
CONCEPTUAL DESIGN
Lecture #7 IIT_UX Theory 13
Figure 8-9
Part of a conceptual design in the interaction perspective(sketch...
STORYBOARDS
• Making Storyboards to Cover All Design Perspectives
– Hand-sketched pictures annotated with a few words
– Al...
STORYBOARDS
Lecture #7 IIT_UX Theory 15
Figure 8-10
Example of a sequence of sketches as a storyboard in the ecological pe...
STORYBOARDS
Lecture #7 IIT_UX Theory 16
Figure 8.10, cont’d
STORYBOARDS
Lecture #7 IIT_UX Theory 17
Figure 8-11
Part of a different Ticket Kiosk System storyboard in the ecological p...
STORYBOARDS
Lecture #7 IIT_UX Theory 18
Figure 8-12
Sample sketches for a similar concert ticket purchase storyboard in th...
Lecture #7 IIT_UX Theory 19
Figure 8.12, cont’d
STORYBOARDS
Lecture #7 IIT_UX Theory 20
Figure 8.12, cont’d
STORYBOARDS
Lecture #7 IIT_UX Theory 21
Figure 8-13
Storyboard transition frame with thought bubble explaining state chang...
DESIGN FOR EMBODIED INTERACTION
• Embodied interaction
– Involves user’s physical body in interaction with technology
– In...
DESIGN FOR EMBODIED INTERACTION
• Embodiment
– “How nature of living entity’s cognition shaped by form of its physical ma
...
DESIGN FOR EMBODIED INTERACTION
Lecture #7 IIT_UX Theory 24
Figure 8-14
The Scrabble Flash Cube game.
UBIQUITOUS AND SITUATED INTERACTION
• Ubiquitous, Embedded, and Ambient Computing
– Ubiquitous interaction is interaction ...
Exercise 8-2: Storyboard for Your System
• Goal
– Get a little practice in sketching storyboards.
• Activities
– Sketch st...
Mid-Term Presentation Guideline
• Presentation Document Content
– System Concept Statement
– Flow Model
– Social Model
– P...
Mid-Term Submission Guideline
• Post a blog
– Embed the presentation file from slideshare.
– 3 mins(Maximum) concept movie...
Upcoming SlideShare
Loading in …5
×

Week 07 mental models and conceptual design

1,343 views

Published on

Published in: Education, Technology
  • Be the first to comment

Week 07 mental models and conceptual design

  1. 1. Lecture 7 Mental Models and Conceptual Design UX Theory / IIT 2014 Spring Class hours : Monday 4 pm – 7 pm 14th April
  2. 2. INTRODUCTION Lecture #7 IIT_UX Theory 2 Figure 8-1 You are here; the second of three chapters on creating an interaction design in the context of the overall Wheel lifecycle template.
  3. 3. MENTAL MODELS • Designer’s mental model – Vision of how system works as held by designer • What the system is • How it is organized • What it does and how • User’s mental model – Description of how system works as held by user • Conceptual design is what we use to connect the two Lecture #7 IIT_UX Theory 3
  4. 4. MENTAL MODELS Lecture #7 IIT_UX Theory 4 Figure 8-2 Mapping the designer's mental model to the user's mental model.
  5. 5. MENTAL MODELS • Designer’s Mental Model – Designer’s mental model in the ecological perspective: Describing what the system is, what it does, and how it works within its ecology – Designer’s mental model in the interaction perspective: Describing how users operate it – Designer’s mental model in the emotional perspective: Describing intended emotional impact Lecture #7 IIT_UX Theory 5
  6. 6. CONCEPTUAL DESIGN • Leverage Metaphors in Conceptual Design – Metaphors in the ecological perspective – Metaphors in the interaction perspective – Metaphors in the emotional perspective • Conceptual Design from the Design Perspectives – Conceptual design in the ecological perspective – Conceptual design in the emotional perspective Lecture #7 IIT_UX Theory 6
  7. 7. CONCEPTUAL DESIGN Lecture #7 IIT_UX Theory 7 Figure 8-3 Designer workflow and connections among the three conceptual design perspectives.
  8. 8. CONCEPTUAL DESIGN Lecture #7 IIT_UX Theory 8 Figure 8-4 Part of a conceptual design showing immersion in the emotional perspective (sketch courtesy of Akshay Sharma, Virginia Tech Department of Industrial Design).
  9. 9. CONCEPTUAL DESIGN Lecture #7 IIT_UX Theory 9 Figure 8-5 Early conceptual design ideas from the ecological perspective(sketch courtesy of Akshay Sharma, Virginia Tech Department of Industrial Design).
  10. 10. CONCEPTUAL DESIGN Lecture #7 IIT_UX Theory 10 Figure 8-6 Ecological conceptual design ideas focusing on a feature for a smart ticket to guide users to seating (sketch courtesy of Akshay Sharma, Virginia Tech Department of Industrial Design).
  11. 11. CONCEPTUAL DESIGN Lecture #7 IIT_UX Theory 11 Figure 8-7 Ecological conceptual design ideas focusing on a feature showing communication connection with a smartphone (sketch courtesy of Akshay Sharma, Virginia Tech Department of Industrial Design).
  12. 12. CONCEPTUAL DESIGN Lecture #7 IIT_UX Theory 12 Figure 8-8 Ecological conceptual design ideas focusing on the features for communicating and social networking (sketch courtesy of Akshay Sharma, Virginia Tech Department of Industrial Design).
  13. 13. CONCEPTUAL DESIGN Lecture #7 IIT_UX Theory 13 Figure 8-9 Part of a conceptual design in the interaction perspective(sketch courtesy of Akshay Sharma, Virginia Tech Department of Industrial Design).
  14. 14. STORYBOARDS • Making Storyboards to Cover All Design Perspectives – Hand-sketched pictures annotated with a few words – All the work practice that is part of the task, not just interaction with the system, for example, include telephone conversations with agents or roles outside the system – Sketches of devices and screens – Any connections with system internals, for example, flow to and from a database – Physical user actions – Cognitive user actions in “thought balloons” – Extra-system activities, such as talking with a friend about what ticket to buy Lecture #7 IIT_UX Theory 14
  15. 15. STORYBOARDS Lecture #7 IIT_UX Theory 15 Figure 8-10 Example of a sequence of sketches as a storyboard in the ecological perspective (sketches courtesy of Akshay Sharma, Virginia Tech Department of Industrial Design).
  16. 16. STORYBOARDS Lecture #7 IIT_UX Theory 16 Figure 8.10, cont’d
  17. 17. STORYBOARDS Lecture #7 IIT_UX Theory 17 Figure 8-11 Part of a different Ticket Kiosk System storyboard in the ecological perspective(sketches courtesy of Akshay Sharma, Virginia Tech Department of Industrial Design).
  18. 18. STORYBOARDS Lecture #7 IIT_UX Theory 18 Figure 8-12 Sample sketches for a similar concert ticket purchase storyboard in the interaction perspective (sketches courtesy of Akshay Sharma, Virginia Tech Department of Industrial Design).
  19. 19. Lecture #7 IIT_UX Theory 19 Figure 8.12, cont’d
  20. 20. STORYBOARDS Lecture #7 IIT_UX Theory 20 Figure 8.12, cont’d
  21. 21. STORYBOARDS Lecture #7 IIT_UX Theory 21 Figure 8-13 Storyboard transition frame with thought bubble explaining state change (sketches courtesy of Akshay Sharma, Virginia Tech Department of Industrial Design).
  22. 22. DESIGN FOR EMBODIED INTERACTION • Embodied interaction – Involves user’s physical body in interaction with technology – In a natural way, such as by gestures • Moving interaction off screen and into action-situated real world Lecture #7 IIT_UX Theory 22
  23. 23. DESIGN FOR EMBODIED INTERACTION • Embodiment – “How nature of living entity’s cognition shaped by form of its physical ma nifestation in world.” – Central to idea of phenomenological interaction – Dourish: “How we understand the world, ourselves, and interaction come s from our location in a physical and social world of embodied factors.” Lecture #7 IIT_UX Theory 23
  24. 24. DESIGN FOR EMBODIED INTERACTION Lecture #7 IIT_UX Theory 24 Figure 8-14 The Scrabble Flash Cube game.
  25. 25. UBIQUITOUS AND SITUATED INTERACTION • Ubiquitous, Embedded, and Ambient Computing – Ubiquitous interaction is interaction occurring not just on computers and laptops but potentially everywhere in our environment. Interactive devices are being worn by people; embedded within appliances, homes, offices, stereos and entertainment systems, vehicles, and roads; and finding their way into walls, furniture, and objects that we carry. • Situated Awareness and Situated Action – In a social interaction setting, this can help find other people and can help cultivate a feeling of community and belonging (Sellen et al., 2006) Lecture #7 IIT_UX Theory 25
  26. 26. Exercise 8-2: Storyboard for Your System • Goal – Get a little practice in sketching storyboards. • Activities – Sketch storyboard frames illustrating narrative sequences of action in each of the three perspectives. – Include things like these in your storyboards: • Hand-sketched pictures annotated with a few words • All the work practice that is part of the task, not just interaction with the system, for example, include telephone conversations with agents or roles outside the system • Sketches of devices and screens • Any connections with system internals, for example, flow to and from a database • Physical user actions • Cognitive user actions in “thought balloons” • Extra-system activities, such as talking with a friend about what ticket to buy – For the ecological perspective, illustrate high-level interplay among human users, the system as a whole, and the surrounding context. – In the interaction perspective, show screens, user actions, transitions, and user reactions. – Use storyboards in the emotional perspective to illustrate deeper user experience phenomena such as fun, joy, and aesthetics. • Schedule – You decide how much time you can afford to give this. If you cannot do this exercise in all three perspectives, just pick one, perhaps the ecological perspective. Lecture #7 IIT_UX Theory 26
  27. 27. Mid-Term Presentation Guideline • Presentation Document Content – System Concept Statement – Flow Model – Social Model – Persona – Some sketches (as many as possible) – Storyboard Lecture #7 IIT_UX Theory 27
  28. 28. Mid-Term Submission Guideline • Post a blog – Embed the presentation file from slideshare. – 3 mins(Maximum) concept movie • Brief your product/service idea • You can add your interview – Compile into the Kickstarter format • Your funding goal • USP you need to promote • https://www.kickstarter.com/projects/aldobeqiraj/bringrrtm-helping-you-keep- track-of-what-matters-m Lecture #7 IIT_UX Theory 28

×