User Interface vs User Experience: Understanding the Essentials
Exploring the distinctions between User Interface (UI) and User Experience (UX) in human-computer interaction design. UI focuses on the space of interaction between humans and machines, while UX encompasses users' behavior, attitude, and emotions towards a product or service. The goal is to create intuitive, efficient, and enjoyable interfaces that meet user needs effectively.
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. Download presentation by click this link. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
E N D
Presentation Transcript
BBuckley - 1 CSc 238 Human Computer Interface Design ABOUT FACE The Essentials of Interaction Design Cooper, Reimann, Cronin, and Noessel
BBuckley - 2 Questions If achieving the user s goals drives the design process, won t the user be satisfied and happy with the product? If the users are happy, won t they pay money for the product and spread the word to others? If you make the user happy, won t your products be a success? and if it doesn t happen The absence of design
BBuckley - 3 Cooper - Introduction Products that exhibit complex behavior Techie ovens and complex behavior Buttons for non-cooking related things Start, Cancel, Program Bake, Broil Press any button what happens depends on the state of the oven and the buttons already pushed Interaction Design designing the behavior of complex systems. design affects behavior (in fact, it defines the behavior)
BBuckley - 4 The difference between UI and UX UI The User Interface is the space where interaction between humans and machines occurs. The goal of this interaction is the effective operation and control of the machine at the user s end, and feedback from the machine, which aids the operator in making operational decisions. In other words, a user interface is the system by which people (users) interact with a machine. The user interface includes hardware (physical) and software (logical) components. User interfaces exist for various systems, and provide a means of: Input, allowing the users to manipulate a system Output, allowing the system to indicate the effects of the users manipulation
BBuckley - 5 The difference between UI and UX UI The main goal of human-machine interaction engineering is to produce a user interface which allows to easily (intuitively), efficiently, and enjoyably (user friendly) operate a machine in the way which produces the desired result. Actually, it s great when the user needs to provide minimal input to achieve the desired output, and also that the machine minimizes undesired outputs to the user. Given our dependence personal computer devices, the term user interface is generally assumed to mean the graphical user interface (GUI) Note. Industrial control panels and machinery control designs are more commonly referred to as human-machine interfaces.
BBuckley - 6 The difference between UI and UX User experience relates to a person s behavior, attitude, and emotions about using a particular product, system or service. User experience includes the practical, experiential, effective, meaningful and valuable aspects of human- computer interaction and product ownership. Additionally, it includes a person s perceptions of system aspects such as utility, ease of use and efficiency. The user experience!
UX Wheel of Emotions (User eXperience) grief
BBuckley - 8 The difference between UI and UX User experience may be considered subjective in nature to the degree that it is about individual perception and thought with respect to the use of the system. User experience is dynamic as it is constantly modified over time due to changing usage circumstances and changes to individual systems as well as the wider usage context in which they can be found.
BBuckley - 9 UX: User experience design User experience design starts with a solid understanding of your user-base, generating personas for the dominant character types within your user-base, then setting specific requirements for the project at hand. Sort out your information architecture through generating a data inventory and organize a solid information hierarchy which would help a ton once the prototyping process begins. Choose the best prototyping method that would be both cost-efficient and would allow you to gather feedback and reiterate in a fast and easy fashion.
BBuckley - 10 UX: User experience design Prototypes could be: horizontal (broad feature-set, less depth functionality-wise) vertical (deep functionality, narrow set of features) T-prototypes (much of the design is done at a shallow level while some features are implemented in great depth) local prototypes (used to come up with design alternatives for particular interaction model). After choosing an appropriate prototype the iterative process begins. This usually varies greatly between working on software products, services or industrial design projects.
BBuckley - 11 UI and UX design the differences although the two concepts are very closely related A UI is often a part of UX Both could be applied to (almost) any product (category type). Both refer to solving the problem statement related to the design aspect of the product. Both are targeted at the user s comfort.
BBuckley - 12 Definitions Formrefers to the work s style, technique and media used and how the elements are implemented UXis focused on the user s journey to solve a problem the complete experience Contentrefers to a work s essence or what is being depicted UIis focused on how the product s surface looks and functions Analogy UX is the feeling you get being able to ride the horse UI is the saddle, stirrups and the reigns
BBuckley - 13 Design (Victor Papanek) The conscious and intuitive effort to improve meaningful order Human-oriented design activities: Understanding the desires, needs, motivations, and contexts of people using products Understanding Business, technical, and domain opportunities, requirements, and constraints Using this knowledge as a foundation for plans to create products whose form, content (UI), and behavior (UX) are useful, usable, and desirable, as well as economically viable and technically feasible
BBuckley - 14 Consequences of Poor Product Behavior Digital products Are rude Require people to think like computers Have sloppy habits Require humans to do the heavy lifting
BBuckley - 15 Brief History 1970s and 1980s: Xerox PARC Consumers want good technology That is, Technology that has been designed to provide a compelling and effective user experience. Not just interface design and the arrangement of widgets on the screen. Influencing people s experiences by designing the mechanisms for interacting with a product (IxDA: Interaction Design Association www.ixda.org)
BBuckley - 16 User Experience (UX) Design Interaction Design focus Designing to effect the experience of users Relating behavior (UX) to formandcontent (UI) Information architecture focus Structure of content The way content is provided to users Industrial Design & Graphic Design focus Form of products and services Ensuring that form supports use (requiring attention to behavior and content)
BBuckley - 17 Three overlapping concerns Behavior (UX) Interaction designers Form Content Industrial designers Graphic designers Information architects Copywriters Animators Sound designers (UI)
BBuckley - 18 Interaction Design and the Product Team Division of responsibilities: Design team Users satisfaction Engineering team Implementation and fabrication Marketing team Convincing customers to purchase product Management Profitability of the product, effecting what others work on
BBuckley - 19 Effective & Practical Tools for Interaction Design Principles Ideas about the practice of design Rules & hints on use of user interface and interaction design idioms Patterns Common ways to address user req ts & design concerns Processes How to understand & design user req ts How to apply design principles & patterns
BBuckley - 20 Goal Understand how users will comprehend and interact with your digital product, and how to use this knowledge to drive your design No such thing as an objectively good user interface it depends Who is the user What is the user doing What are the user s motivations One size does not fit all
BBuckley - 21 If you want good design? Understand the people who will interact with your product Understand there are no fixed guides to style or interface standards! Four main steps to designing interactive systems: 1. Researching the domain 2. Understanding users & their req ts 3. Defining the framework of a solution 4. Filling in the design details
Part I Understanding Goal-Directed Design BBuckley - 22 CHAPTERS: 1. Goal-Directed Design 2. Implementation Models & Mental Models 3. Beginners, Experts, and Intermediates 4. Understanding Users: Qualitative Research 5. Modeling Users: Personas and Goals 6. The Foundations of Design: Scenarios & Req ts 7. From Req ts to Design: The Framework & Refinement
BBuckley - 23 CSc 238 Human Computer Interface Design A Design Process for Digital Products Cooper Chapter 1
BBuckley - 24 Need - Better Design Methods Technologically focused solutions difficult to use and control. Unsatisfied users products are difficult to use and control. Design (viewed as a conscious & intuitive effort to impose meaningful order) Understanding users desires, needs, motivations, & context. Understanding business, technical, and domain opportunities, req ts, and constraints. Using this knowledge to create products whose form, content & behavior (UI) are useful, usable, and desirable (UX), as well as economically viable & technically feasible.
BBuckley - 25 Developer and Marketers What marketers bring: Understanding & quantifying of market opportunities. Typical lists of req ts focused on: Chasing the competition Managing IT resources with to do lists Making guesses based on market surveys what people say they will buy. However we know few users can clearly articulate their needs! Adding easy to use to the list of req ts doesn t help.
BBuckley - 26 What we get Products that irritate, reduce productivity, and do not meet user needs. Interactions patched on at the end Digital products can be rude! Where did you hide that file? Are you sure? Did you really want to delete that file or did you have some other reason for pressing the Delete key?
BBuckley - 27 Figure 1-2 Thanks for sharing. Why didn t the program notify the library? What did it want to notify the library about? Why is it telling us? And what are we OK-ing? It is not OK that the program failed!
BBuckley - 28 Introductory Dialog Box People listen up! Just think as if you are the computer! MS Word User wants to rename a document they are editing: Close the document, then rename it (or) Use Save AS with new name and then delete the file with the old name You save a document, then print & close it But you are then asked if you want to Save it Excel has a different approach! This has been fixed
BBuckley - 29 Work interrupted Software requires you to stop what you are doing. How much work are you forced to do in order to manage your use of the software? What about you? Think discuss and write down some examples
BBuckley - 30 Why products are so bad? 1. Misplaced priorities Focus is on functionality, not how it is to be provided User s goals are not front and center to the design (see Figure 1-2) 2. Ignorance about users How will users use the product? What will they be using the product to do? Why did they choose our product? What will make users happy? 2. Conflicting interests Tradeoff between ease of coding & ease of use Programmers cannot advocate for the user, the business, and the technology - simultaneously 3. The lack of a process A repeatable, predictable & analytic process Transforms understanding of users into products that meet their needs & excite their imaginations Especially when buyers are not users
BBuckley - 31 Evolution of the Software Development Process (Figure 1-2) Developers Build / Test Ship Managers Developers Initiate Build / Test Ship Managers Developers QA Designers Initiate Build Test "look & feel" Ship Mandate Specs Code Product Managers Designers Developers QA Initiate Design Build Test Ship Feasibility, Feedback Bug Report Users User Input
BBuckley - 32 Evolution of the Software Development Process (Figure 1-2) Developers Build / Test Ship Managers Developers Initiate Build / Test Ship Managers Developers QA Designers Initiate Build Test "look & feel" Ship Mandate Specs Code Product Managers Designers Developers QA Initiate Design Build Test Ship Feasibility, Feedback Bug Report Users User Input
BBuckley - 33 Evolution of the Software Development Process (Figure 1-2) Developers Build / Test Ship Managers Developers Initiate Build / Test Ship Managers Developers QA Designers Initiate Build Test "look & feel" Ship Mandate Specs Code Product Managers Designers Developers QA Initiate Design Build Test Ship Feasibility, Feedback Bug Report Users User Input
BBuckley - 34 Evolution of the Software Development Process (Figure 1-2) Developers Build / Test Ship Managers Developers Initiate Build / Test Ship Managers Developers QA Designers Initiate Build Test "look & feel" Ship Mandate Specs Code Product Managers Designers Developers QA Initiate Design Build Test Ship Feasibility, Feedback Bug Report Users User Input
BBuckley - 35 What about Agile? The mantra is to ensure that users and user needs are an integral part of the project req ts and the team s development process. Intent: Shared design responsibility for solving human interface design problems. Domain knowledge they have! Accomplishing their work with no interaction, so it works for them! Solving the design problem is problematic.
BBuckley - 36 Analogy Patient goes to the doctor has horrendous stomach ache. It really hurts. I think it s my appendix. You have to take it out as soon as possible. The patient is good at explaining symptoms. The patient has no skills to make the correct diagnosis.
BBuckley - 37 Now enter the computer Allows for limitless behavior Alters the nature of the products it touches User focus is on the screen, keyboard and mouse it is this interactive behavior that is important! Design requires understanding the user s relationship with product before purchase How will the user actually use the product, in what ways, and to what ends?
BBuckley - 38 Evolution of Design Product development concerns: 1. Desirability 2. Viability 3. Capability All three must be addressed to achieve user goals providing appropriately designed user interactions
Figure 1-3 Building successful digital products. Desirability What do people need? Capability What can we build? Successful product is desirable and viable and buildable Viability What will sustain a business? Designers Management Technologies User model motivations behaviors attitudes & aptitudes Business model funding model income/expense projections, etc Technology model core technologies technology components build vs. buy Product design design schedule form and behavior spec. Business plan marketing plan launch plan distribution plan Technology plan engineering schedule engineering spec User effectiveness & Customer adoption Sustainable Business Product Delivery Overall Product Success
BBuckley - 40 Companies that have struggled to find the balance Apple emphasized desirability but has made many business blunders. Nevertheless, it is sustained by the loyalty created by its attention to user appearance Microsoft is one of the best run businesses ever, but it has not been able to create highly desirable products. This provides an opening for competition Novell now part of emphasized technology and gave little attention to desirability. This made it vulnerable to competition
BBuckley - 41 User s Goals? Are goals the tasks users do? Are they the same for all users? Authors example: Accounting clerk Processing invoices? Employer s goal Employeegoals but maybe Appearing competent Keeping engaged in work while doing routine and repetitive tasks
BBuckley - 42 Business Goals the driver? Notnecessarily aligned with user s goals Satisfy user s goals and the Business Goals have a better chance of being achieved Reminder: What commercial software does? Makes users feel stupid Causes users to make big mistakes Requires too much effort to operate effectively Does not provide and engaging or enjoyable experience
BBuckley - 43 The Message Goals are not the same as tasks or activities! Goals motivate people to perform activities. Understand the goals, you understand user expectations & aspirations. You need to understand the meaning of the activities to the user. Task and activity analysis is needed for detail after user goals are understood.
BBuckley - 44 Goal versus tasks and activities? User s goals change slowly tied to motivation Change in activities & tasks tied to current technology Concentrate only on activities & tasks May leave you with a design embedded in the existing technology May meet corporate goals but not the users Understanding user s goals allows you to use the technology to eliminate irrelevant tasks and transform the users work environment.
BBuckley - 45 Designing to meet goals Context is important Good design makes users more effective not to make users look or feel stupid should improves business throughput & ease of use Software that enables users to perform their tasks without addressing their goals rarely helps them be truly effective. Good design makes users more effective
BBuckley - 46 Computer Literacy Some have it some don t but it is needed in an information economy Really? It s a euphemism for forcing human beings to stretch their thinking to understand the inner workings of application logic rather than having software-enabled products stretch to meet people s usual ways of thinking.
BBuckley - 47 Striving toward perfection Software has a behavioral face it shows to the world that is created by the developer or designer. What the user sees is the representation of the computer s executed code. (the developers code in implementation model) How the computer gets the job done is hidden from the user. (the user interacts with the represented model) Implementation Model (reflects the technology) Mental Model (reflects user's vision) Represented Models worse better DESIGN PRINCIPLE mental models rather than implentation models User interfaces should be based on user
BBuckley - 48 A Goal-Directed Design Process Identifies user req ts Defines a plan for behavior and appearance of products Design should capture the Product Definition Goals of users Needs of business Constraints of technology
BBuckley - 49 Problematic Design Process Figure 1-6 ? Research Design of Form Performed by market analysts and ethnographers Performed by graphic / GUI and industrial designers The Gap Traditionally, research and design have been separated, with each activity handled by specialists. Research has, until recently, referred primarily to market research, and design is too often limited to visual design or skin-deep industrial design. More recently, user research has expanded to include qualitative, ethnographic data. Yet, without including designers in the research process, the connection between research data and design solutions remains tenuous at best.
BBuckley - 50 What about empathy? The action of Understanding Being aware of Being sensitive to, and vicariously experiencing the feelings, thoughts, and experience of another without having the feelings, thoughts, and experience fully communicated in an objectively explicit manner
