HCI Module-4-UX-Emotion-and-Experience.ppt
- 1. Module 4 UX: Emotion and Experience
- 2. Learning Objectives • Difference of UX vs UI. • 4 stages of UX. • user persona, use cases, user flows, wireframes and prototypes.
- 3. UX and UI Design • UX design – “user experience” design • UI stands - “user interface” design • Both elements are crucial to a product and work closely together
- 4. UX Design • User experience encompasses all aspects of the end-user’s interaction with the company, its services, and its products. (Don Norman, 1990s)
- 5. UX Design in a nutshell • User experience design is the process of developing and improving the quality of interaction between a user and all facets of a company. • User experience design is, in theory, a non- digital (cognitive science) practice, but used and defined predominantly by digital industries. • UX design is NOT about visuals; it focuses on the overall feel of the experience.
- 6. UI Design • User interface design is a purely digital practice. It considers all the visual, interactive elements of a product interface—including buttons, icons, spacing, typography, color schemes, and responsive design. • The goal of UI design is to visually guide the user through a product’s interface. It’s all about creating an intuitive experience that doesn’t require the user to think too much! • UI design transfers the brand’s strengths and visual assets to a product’s interface, making sure the design is consistent, coherent, and aesthetically pleasing.
- 7. “UX design usually comes first in the product development process, followed by UI" UX UI Build
- 8. The 4 Stages of UX
- 9. The 4 Stages of UX 1. Research Understanding who your audience is, what their needs are and what purpose they will be using your site or app for. UX and UI are involved in the process. (example: Interview) 2. Analysis Understanding their needs, their lifestyle or hidden preferences. 3. Design This is the exploratory phase that will lead to sitemaps, wireframes and prototypes.
- 10. The 4 Stages of UX (cont.) • Sitemaps show the structure of a website and the relationship between different pages. It shows where content goes and what is missing. Sitemaps also helps you see how a user will navigate the site and if it is user-friendly. • Wireframes help you envision a floor plan for your website or app. This way you will be able to understand where content goes and what type of design you want to see. A wireframe will help you visualize where elements will be placed. • Prototypes allow you to transform your wireframe into an interactive design. At this stage, you can conduct user-testing and receive feedback on what they liked or disliked about the interactions
- 11. The 4 Stages of UX (cont.) 4. User Testing You can now conduct a thorough testing of the prototype you have built. You can do this by looking at user interactions on your website, sending out surveys or questionnaires and interviewing users to help further simplify your website or identify problem areas.
- 12. The User Persona, Use Cases, User Flows, Wireframes and Prototypes
- 13. User Persona • Fictional character which you can create based upon your research in order to represent the different user types that might want to use your service, product, or site. • Understanding users and their needs
- 14. A persona clarifies who is in your target audience • Who is my ideal customer? • What are the current behavior patterns of my users? • What are the needs and goals of my users? • What issues and pain-points do they currently face within the given context?
- 15. How to create a user persona? Four stages of creating a user persona: 1. Choose questions for your survey 2. Set up a survey on popular page 3. Analyze your data 4. Build persona
- 16. The User Persona
- 17. Use Cases • Graphical representation of how users will perform tasks. It outlines, from a user’s point of view, a system’s behavior as it responds to a request. • Each use case is represented as a sequence of simple steps, beginning with a user's goal and ending when that goal is fulfilled. This Includes: • Actor • Use Case • Relationship
- 18. Use Case Diagram
- 19. Wireframes • A skeleton representation of the UI and the various components that makes up the UI. • The aim of a wireframe is to provide a visual understanding of a page early in a project to get stakeholder and project team approval before the creative phase gets underway.
- 20. Wireframes
- 21. Wireframes (cont.) Advantages 1.Provides an early visual that can be used to review with the client. 2.Users can also review it as an early feedback mechanism for prototype usability tests. 3.Provide confidence to the designer. Disadvantages 1.It is not always easy for the client to grasp the concept. 2.Wireframe is often needed to explain why page elements are positioned as they are. 3.the designer and copywriter will need to work closely to make this fit
- 22. Prototyping • A creation of the initial UI design which may be interactive or may not be interactive. • An experimental process where design teams implement ideas into tangible forms from paper to digital.
- 23. Sample prototype
- 24. Why should we prototype? • Obtain early feedback on design alternatives • Give concrete examples to elicit feedback • Show what is possible • Create better designs • Useful in communicating concepts
- 25. Summary • UX design refers to the term “user experience design”, while UI stands for “user interface design”. Both elements are crucial to a product and work closely together. • User experience (UX) Design: is the process design teams use to create products that provide meaningful and relevant experiences to users. • User Interface (UI) Design: the means by which the user and a computer system interact, in particular the use of input devices and software. • User Persona - a Fictional character which you can create based upon your research in order to represent the different user types that might want to use your service, product, or site. • Understanding who your audience is, what their needs are and what purpose they will be using your site or app for. Some forms of research include interviewing potential customers or users and finding competitors. • You can then develop a product (website) that suits your audience and caters to their needs. By interviewing core stakeholders or potential customers, you might find out, for example, that they do not like to spend a lot of time at order checkout. • Sitemaps - how the structure of a website and the relationship between different pages. • Wireframes - help you envision a floor plan for your website or app. • Prototypes - allow you to transform your wireframe into an interactive design.