UI UX Design module-2 AU.pptx ui/ux design explanation

hjhdkjhc;dsljkchd;slcjkhds;CLKHDSC;LDSHcldskhc;dlskchds;kcsd;LKCJDS;lckvhSD;LKDS;lckfds;lckds;lckds;lckds;lckds;lckds;lkcdscjsdckldscj;ldskcvlkdscjvds

1. UI UX Design Dr.R.Rajasekhar Associate Professor,Dept.of CSE

2. Module-2 Syllabus Module 2: Interaction Design & Goal-Directed Design About Face’s paradigm: what makes good interaction; goal-directed design; personas; conceptual models vs metaphors; interaction patterns About Face – Part I: Understanding Goal-Directed Design; Chapters on Personas, Conceptual Models.

3. Interaction Design Principles What is interaction design: Interaction design ( IxD ) is concerned with designing how users interact with digital products and services, such as websites, mobile applications, and other platforms. It focuses on small and big decision points in the interaction that can dictate the overall user experience and level of satisfaction. IxD includes the design of buttons, display of text and visuals, and navigation flow that aid the users in achieving their goals.

4. In today’s digital world, high-quality interaction design plays a critical role in business success. IxD enhances user satisfaction, improves customer retention, and paves the way for long-term relationships and loyalty. Smooth, intuitive, and effective interactions help users understand information and achieve their goals quickly, making their lives easier. Users' positive experiences lead to increased trust in the brand, boosting the organization’s image.

5. Core Principles of Interaction Design When it comes to creating high-quality interactions and effective digital experiences, designers rely on some key principles. These principles streamline the design process and make the interactions more natural, intuitive, and purposeful.

6. What is interaction design: In design, human–computer interaction, and software development, interaction design, often abbreviated IxD , is “about shaping digital things for people’s use”, alternately defined as “the practice of designing interactive digital products, environments, systems, and services.” — Wikipedia Interaction design is the practice of creating the dialogue between users and products, focusing on the interactive behavior of digital products, systems, and services. 

7. Interaction design is a process of connecting the digital world to the human one. It’s making things that are screen-based, appear real and function in the digital realm as they would in the physical space. This connection helps people use and interact with digital products and devices, from desktop computers, phones and watches to websites, apps and games. Interaction design is a concept that combines everything we know about design and function into a single idea.

8. Core purpose Goal-oriented:   To create products that enable users to achieve their objectives in the best way possible.  User-centric:   To create meaningful relationships between people and the products they use, making interactions feel natural and personal.  Behavioral focus:   It is less concerned with the aesthetic "look" of a product and more with how it "works" and behaves during use. 

9. Key elements and examples How it works:   An interaction designer might look at how images, typography, and buttons on a website or app guide a user.  Hardware influence:   They also consider how physical hardware, like a phone's touch screen, influences user behavior.  Immediate interactions:   Interaction design involves designing the immediate actions and reactions at any given moment, such as deciding the best way to display images in an app or how to handle voice commands for an ATM.  Language and feedback:   This includes the words used in an interface (like button labels and error messages) and the feedback the system provides to the user. 

10. Examples in practice Swipe and like:   Swiping left or right on a dating app to indicate interest is a direct example of an interaction design element.  Language learning:   The encouraging characters and progress feedback in an app like Duolingo are designed to motivate the user through interaction.  Online ordering:   Deciding the most intuitive way to let a user view food images in an online ordering app—swiping, tapping, or long-pressing—is a task for an interaction designer. 

11. The 5 dimensions of interaction design The 5 dimensions of interaction design(1) is a useful model to understand what interaction design involves. Gillian Crampton Smith, an interaction design academic, first introduced the concept of four dimensions of an interaction design language, to which Kevin Silver, senior interaction designer at IDEXX Laboratories, added the fifth.

12. 1D: Words Words—especially those used in interactions, like button labels—should be meaningful and simple to understand. They should communicate information to users, but not too much information to overwhelm the user. 2D: Visual representations This concerns graphical elements like images,  typography and  icons  that users interact with. These usually supplement the words used to communicate information to users.

13. 3D: Physical objects or space Through what physical objects do users interact with the product? A laptop, with a mouse or touchpad? Or a Smartphone, with the user’s fingers? And within what kind of physical space does the user do so? For instance, is the user standing in a crowded train while using the app on a Smartphone, or sitting on a desk in the office surfing the website? These all affect the interaction between the user and the product. 4D: Time While this dimension sounds a little abstract, it mostly refers to media that changes with time (animation, videos, sounds). Motion and sounds play a crucial role in giving visual and audio feedback to users’ interactions. Also of concern is the amount of time a user spends interacting with the product: can users track their progress, or resume their interaction some time later?

14. 5D: Behavior This includes the mechanism of a product: how do users perform actions on the website? How do users operate the product? In other words, it’s how the previous dimensions define the interactions of a product. It also includes the reactions—for instance  emotional responses  or feedback—of users and the product.

15. Interaction Design ( IxD ) Definition: Interaction Design is the practice of designing interactive digital products that enable users to achieve their goals effectively and efficiently. It focuses on behavior , feedback , and usability rather than just visuals.

16. Key Aspects of Interaction Design : User Goals: Understanding what the user wants to accomplish. Actions: How users perform tasks (clicks, swipes, inputs). Feedback: Response from the system after each action (confirmation, error messages). Constraints: Limitations that guide user behavior (disabled buttons, restricted inputs). Consistency: Uniform behavior across different screens or actions. Affordances: Design elements that suggest their function (e.g., a button looks clickable). Principles of Good Interaction Design: Visibility of system status – Always inform users about what’s happening. Match between system and real world – Use familiar concepts/metaphors. User control and freedom – Allow easy undo/redo. Consistency and standards – Follow familiar patterns. Error prevention – Design to minimize mistakes. Recognition rather than recall – Make options visible. Flexibility and efficiency – Support both novice and expert users. Aesthetic and minimalist design – Avoid clutter.

17. 2. Goal-Directed Design Definition: Goal-Directed Design is a user-centered design approach that focuses on what users want to achieve rather than what the system wants to provide. It emphasizes understanding users’ goals, behaviors, and needs .

18. Core Concepts : Personas: Fictional characters based on real user research. Represent different user types, motivations, and goals. Help in designing for real users rather than abstract targets. Scenarios: Stories describing how personas interact with the system to achieve goals. Helps visualize context of use and potential challenges. Goals vs Tasks: Goals: Long-term user intentions (e.g., “I want to manage my finances”). Tasks: Steps taken to achieve goals (e.g., “I want to transfer money online”). Design Principles: Focus on user motivation and behavior . Iterative prototyping and testing. Align interface elements to support user goals rather than system features.

19. Steps in Goal-Directed Design (Alan Cooper’s Approach ): Research: Observe users, gather data on behaviors and pain points. Modeling: Identify personas and define goals. Requirements Definition: Determine system requirements that help users achieve goals. Framework Definition: Establish interface structure (navigation, hierarchy, flow). Refinement: Prototype, test, and refine based on feedback. Implementation: Build the final product aligned with goals.

20. 3. About Face Paradigm (Alan Cooper) Key Idea: Focus on people first , not technology. Design for goals, not features . Users are categorized as: Volunteers: Primary users with high motivation. Captives: Users forced to use the system but still goal-directed. Indifferent: Casual users with low engagement.

21. Benefits of Goal-Directed Design : Reduces unnecessary features. Improves usability and satisfaction. Aligns product with real user needs. Facilitates clear communication within design teams.

22. 4. Conceptual Models vs Metaphors Conceptual Model: Mental model of how users think the system works. Metaphor: Design elements that map the system to real-world concepts (e.g., desktop, trash bin). Importance: Helps users predict system behavior and reduces learning curve.

23. 5. Interaction Patterns Reusable solutions for common UI problems. Examples: Modal windows , tabs , infinite scroll , dropdown menus . Ensure consistency , predictability , and efficiency in interaction.

24. Summary Interaction Design: Focuses on how users interact with the system. Goal-Directed Design: Focuses on why users use the system and what they want to achieve . Personas, scenarios, and user goals guide design decisions. Using conceptual models and patterns improves usability and learnability.

25. https://public-media.interaction-design.org/images/uploads/31d533650b478341a0b9f6526930fa18.gif

26. How to design products with goal-centered design What Is Goal-Directed Design? Goal-directed design is an approach founded by Alan Cooper, which he described in his book that first came out in 1995. The technique’s intention is to understand the essence of users’ needs and their behavior, to eventually create a product whose interface and pursuit satisfy those requirements. Ultimately, your goal is to create a user interaction strategy and a user model that will guarantee that your customer will approve and keep using the product.

27. How to Design Useful Products with Goal-Centered Design? To create a high-quality software product you must focus on user goals and trends in user interactions, at the same time not leaving behind the technological side of things. The design process in UX/UI design studio can be broken down into six steps that comprise interactive research and user behavior analysis: research; modeling; requirements definition; framework definition; refinement; development support.

28. What Is Goal-Directed Design? Goal-directed design is a user-centered approach with accent on understanding and addressing end users' goals. It focuses on how a product fits into users' lives and helps them achieve their desired outcomes effectively. we analyze user behavior, motivations, and pain points. Then, it is important to define user personas to represent users' goals, frustrations, and needs. Focusing on real data and insights derived from user observation, we will avoid designing for hypothetical users.  ‍