User Interface design chapter 3-Conceptualizing Interactions

An overview of the 3rd chapter of Interaction Design made by students

1. CONCEPTUALIZING INTERACTIONS GROUP 3

2. INTRODUCTION What is Conceptualizing Interactions The process of understanding and designing how users interact with a system Focuses on: User perceptions User actions System responses It’s about turning ideas → practical user experiences

3. Why It Matters Helps check if ideas are realistic, useful, and desirable Transforms assumptions into workable models Improves user clarity: how users will learn, understand, and interact Fits into the Double Diamond framework → Define & Explore

4. Key Aspects of Conception Interactions Mental Models → Users’ expectations from prior experience Affordances → What looks clickable/touchable Feedback → System responses to user actions Discoverability → How easily features can be found Consistency → Predictable design patterns Error Prevention & Recovery → Help users avoid or fix mistakes

5. Example – Robot Waiter Idea: Voice-assisted robot takes orders in restaurants Questions: What real problem does it solve? Will customers find it useful or gimmicky? Lesson: Conceptualizing interaction filters “cool” ideas into practical solutions

6. The Process of Conceptualizing Interaction Understand user needs & goals Define interaction models Map user flows Prototype interactions Apply interaction design principles Consider context of use Test & iterate

7. Understanding Assumptions, Claims, and Design Space Assumptions and Claims Assumption: Something taken for granted, needs investigation. Example: “Customers prefer free shipping.” stated as a belief(needs validation) Claim: Statement assumed true but still open to question. Example: “Offering free shipping will boost sales by 20%.” stated as a fact(needs testing) Design space: The scope of possible design solutions for a given problem, which is shaped by the assumptions, claims, and decisions made during the design process. Writing them down helps: Highlight vague or weak ideas Reformulate poor design ideas Take away: Explicitly stating assumptions and claims lets teams see potential weaknesses early. It transforms vague ideas into something that can be tested and refined, shaping the direction of the project.

8. Case Study: Mobile Web Browser A software company wants to upgrade its smartphone browser because many users switched to competitors. The design team investigates how to improve the product. Assumptions: Marketing team: Something is wrong with the browser; rivals are better. Design team: Improving usability of certain features will bring users back. Claims: Design team: Simplifying and improving the interface will automatically attract users. Software engineer: The bookmark function is unnecessary because users mainly rely on history. User Research Findings: Many users never used bookmarks. Some prefer bookmarks over history. Moving bookmarks is error-prone; cluttering the interface is a concern. Outcome: Team identifies conflicting assumptions and claims. They focus on designing a simpler, user-friendly way to save, order, and revisit websites. Explicitly stating assumptions and claims helps clarify the problem space and guides the conceptualization of interaction.

9. Benefits of Conceptualizing the design space Orientation: Helps the design team ask specific questions about how users will understand the conceptual model. Open-Mindedness: Allows exploration of multiple ideas to solve identified problems. Common Ground: Establishes shared terms and understanding across the team to avoid confusion and misunderstanding later. Blueprint for Design(once formulated the concept model): Becomes a shared, testable proof of concept. Can be textual or diagrammatic depending on how the design team wishes to present it. Used by UX designers to Communicate ideas to, engineering, marketing, and business teams. Impact: Produces simpler designs aligned with users’ tasks. Speeds up development. Improves customer adoption and reduces training/support needs.

10. Conceptual Models A model is a simplified description of a system or process that helps describe how it works. A conceptual model is a high-level description of how a system is organized and operates Abstraction showing: What users can do with a product. Concepts needed to interact with it. Helps designers clarify thinking before interface design.

11. Benefits and Core Components Benefits Provides a framework and strategy for design. Guides mapping of concepts to user experience . Supports systematic decision-making. Simplifies and makes operations intuitive . Core Components Metaphors & analogies (e.g., browsing, bookmarking). Concepts: objects, attributes, operations (save, revisit). Relationships: containment, hierarchy. Mappings: link between concepts and user actions.

12. Impact on Design and Challenges Ipacmt on Design Defines user experience . Helps debate methods: saving, revisiting, categorizing, etc. Supports exploration of new metaphors (e.g., combining browsing & searching). Guides simplicity and memorable design. Challenges Upgrades can make models complex. Users often resist feature changes/removals. Difficulty in introducing new features while keeping usability. Example: Facebook Newsfeed changes caused backlash.

13. Examples of Conceptual Models Examples of Conceptual Models Shopping websites: cart, checkout, navigation patterns. Classics that transformed UX: Desktop (Xerox, 1970s) Digital Spreadsheet (Bricklin & Frankston, 1970s) World Wide Web (Berners-Lee, 1980s)

14. Interface Metaphors Interface metaphors are design elements that draw on familiar real-world concepts to help users understand and interact with a system. According to Interaction Design (5th ed.), metaphors bridge the gap between the digital system and users’ existing knowledge, making the UI more intuitive. Through metaphors users understand the complexity of the system. Shopping Cart

15. Types of metaphors Verbal metaphors: These involve comparison of previous to new technology. Virtual metaphors:These involve interface elements with a metaphor. Composite metaphors: These involve adding new features to a metaphor. word processor typewriter

16. Why Metaphors? Familiarity: Metaphors leverage users’ prior experiences to make the UI immediately understandable. eg shopping cart. Simplifying Interaction: Metaphors simplify complex interactions by mapping them to familiar concepts. eg desktop metaphor. Cultural and Contextual Relevance: The book notes that metaphors must be appropriate for the target audience. A metaphor that works in one culture e.g a mailbox for email