Intro to UX and prototyping Welcome to PV 267 UX workshop Tereza Novotna Interaction Designer Overview ▸ The slides and recording of the class will be available to you in the GoogleClassroom. ▸ If you have any questions - feel free to reach out to me tnovotna@redhat.com ▸ Agenda of this workshop ･ Intro to ux design ･ Usability heuristics ･ Brainstorming and concepting ･ Wireframing ･ Prototyping ･ User testing ▸ Final assignment: an interactive prototype including ･ Detailed high fidelity prototype showcasing new feature or enhancement of messaging application ･ All packaged together, well-documented and presented on our last class Overview ▸ A lot of topics to cover in one month ▸ We won’t be able to cover each topic in depth ▸ I will be sharing real life work examples, struggles and wins ▸ I want to include your thoughts and discussion in this class. ▸ If possible -- please keep your cameras on, so we can leverage the best virtual experience ⓘ Start presenting to display the poll results on this slide. Where are you located? About me ▸ Tereza Novotna ▸ Interaction Designer at Red Hat for the past 3 years ▸ Graduated from Elon University in North Carolina with Master’s in Interactive Media and Bachelor in International Business ▸ I like to run ⓘ Start presenting to display the poll results on this slide. Got questions? EXERCISE Introduce yourself - create a stickie with your name and draw your favorite animal! https://app.mural.co/t/imperative3workshops1726/m/imperative3workshops1 726/1607359508206/dca36c4d102f9df0efab991f7a11ad2d96e4d64b Interaction design Visual design User research Front-end development (HTML/CSS, JavaScript, React) Content/copy design 110 UXD members . Roles in the UX Multiple web UIs - and multiple teams Multiple frameworks Custom component library - PatternFly Roles in the UX What are some programs/applications that designers use? Try the free trials and get familiar with these! 41 2 3 5 Sketch / Figma InVision / Marvel Adobe (XD, Illustrator, Photoshop) Github / Gitlab WebAIM (accessibility checker) 6 Google (Docs, Slides, Sheets, Forms, Jamboard) Sketch is the main tool that designers on our team use! Show example What is user experience (UX) The first requirement for an exemplary user experience is to meet the exact needs of the customer, without fuss or bother. Next comes simplicity and elegance that produce products that are a joy to own, a joy to use. True user experience goes far beyond giving customers what they say they want, or providing checklist features. In order to achieve high-quality user experience in a company's offerings there must be a seamless merging of the services of multiple disciplines, including engineering, marketing, graphical and industrial design, and interface design. Source: https://www.nngroup.com/articles/definition-user-experience/ It's important to distinguish the total user experience from the user interface (UI), even though the UI is obviously an extremely important part of the design. As an example, consider a website with movie reviews. Even if the UI for finding a film is perfect, the UX will be poor for a user who wants information about a small independent release if the underlying database only contains movies from the major studios. We should also distinguish UX and usability: According to the definition of usability, it is a quality attribute of the UI, covering whether the system is easy to learn, efficient to use, pleasant, and so forth. Again, this is very important, and again total user experience is an even broader concept. Source: https://www.nngroup.com/articles/definition-user-experience/ User experience discipline “User experience is a discipline focused on designing the end-to-end experience of a certain product.” [or service, or system, etc.] UX User experience is the way a person feels about using a product, system or service. https://www.youtube.com/watch?v=9BdtGjoIN4E&feature=emb_logo What is user experience? Almost everything you do in life - the purchases you make, the restaurants you eat in, the parks you explore, the cars you drive, the apps you download - is a user experience. Source: https://blog.adobe.com/en/2017/08/28/where-did-the-term-user-experience-come-from.html#gs.mpjhi9 History Source: https://blog.adobe.com/en/2017/08/28/where-did-the-term-user-experience-come-from.html#gs.mpjhi9 The term first appeared in acclaimed UX design expert Donald Norman’s book, The Design of Everyday Things, which was first published in 1988. It marked a shift from the previous term “user centered system design” where instead of focusing on the system itself and the aesthetics of the interface, Norman concentrated on the needs of the user. ▸ Donald Norman together with Jakob Nielsen established the Nielsen Norman Group, active consultancy group The difference between UX and UI Source: https://www.uxoui.com/tutorial/explaining-what-is-the-difference-between-ux-and-ui-design/ Design process ⓘ Start presenting to display the poll results on this slide. Co je to UX? Design thinking ● an approach used for practical and creative problem-solving ● Design Thinking can also be applied to any field; it doesn’t necessarily have to be design-specific ● is extremely user-centric ● understand people’s needs and come up with effective solutions to meet those needs Source: https://www.nngroup.com/articles/definition-user-experience/ Use case Source: https://www.usability.gov/how-to-and-tools/methods/use-cases.html ▸ Usability.gov ･ A written description of how users will perform tasks on your website. 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. ･ Project teams can then negotiate which functions become requirements and are built ✅ What uses cases include ❌ What use cases do NOT include ● Who is using the website ● What the user want to do ● The user's goal ● The steps the user takes to accomplish a particular task ● How the website should respond to an action ● Implementation-specific language ● Details about the user interfaces or screens. How to write a use case Source: https://www.usability.gov/how-to-and-tools/methods/use-cases.html 1. Identify who is going to be using the website. 2. Pick one of those users. 3. Define what that user wants to do on the site. Each thing the use does on the site becomes a use case. 4. For each use case, decide on the normal course of events when that user is using the site. 5. Describe the basic course in the description for the use case. Describe it in terms of what the user does and what the system does in response that the user should be aware of. 6. When the basic course is described, consider alternate courses of events and add those to "extend" the use case. 7. Look for commonalities among the use cases. Extract these and note them as common course use cases. 8. Repeat the steps 2 through 7 for all other users. Example Use Cases Source: https://www.usability.gov/how-to-and-tools/methods/use-cases.html Below, are examples of three use cases with increasing levels of complexity. For our purposes we have defined them as Simple, Middleweight and Heavyweight use case for doing the laundry. In each of these types of uses cases you will see that: ● A housekeeper does laundry on a Wednesday ● She washes each load. ● She dries each load. ● She folds certain items. ● She irons some items. ● She throws away certain items ● Example of use cases and alternatives. EXERCISE You’ll be divided into groups (1) think of as many as possible use cases a messaging app can have (Messenger, imessage, whatsapp etc). (2) Select an application, and include screenshots how the app performs specific use cases (3) Make sure you notice what some applications cannot do. Add it all into Mural. Heuristic principles 10 general principles for interaction design Source: https://www.nngroup.com/articles/ten-usability-heuristics/ Watch Heuristic Evaluation of User Interfaces Source: https://www.mockplus.com/blog/post/what-is-a-wireframe-what-is-a-prototype https://www.youtube.com/watch?v=6Bw0n6Jvwxk&feature=emb_titl e&ab_channel=NNgroup Presented by Jakob Nielsen