User Interface design chapter 3-Conceptualizing Interactions

User Interface design chapter 3-Conceptualizing Interactions

• 1.
  CONCEPTUALIZING INTERACTIONS GROUP 3
• 2.
  INTRODUCTION What is ConceptualizingInteractions 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 Helpscheck 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 ofConception 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 – RobotWaiter 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 ofConceptualizing Interaction 1. Understand user needs & goals 2. Define interaction models 3. Map user flows 4. Prototype interactions 5. Apply interaction design principles 6. Consider context of use 7. 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: MobileWeb 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 Conceptualizingthe 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 modelis a simplified description of a system or process that helps describe how it works. Aconceptual 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 CoreComponents 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 Designand 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 ConceptualModels Examples of Conceptual Models  Shopping websites: cart, checkout, navigation patterns.  Classics that transformed UX: o Desktop (Xerox, 1970s) o Digital Spreadsheet (Bricklin & Frankston, 1970s) o World Wide Web (Berners-Lee, 1980s)
• 14.
  Interface Metaphors Interface metaphorsare 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 Verbalmetaphors: 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: Metaphorsleverage 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