UXPA 2022 Build for action not distraction
0 likes155 views
The document outlines practical steps for building effective UI by minimizing distractions and enhancing user experience through prioritizing information and design simplicity. It emphasizes the importance of understanding user needs and avoiding unnecessary content while providing clear visual hierarchies and effective navigation. Key methods include research, iterative design processes, and the thoughtful application of color and typography to create intuitive and accessible digital experiences.
UXPA 2022 Build for action not distraction
- 1. 6/22/2022 1 Build for action not distraction Five practical steps you can take to build successful UI Jennifer Smith American Graphics Institute Current projects • Building educational games • Building mobile apps and websites for consumers and enterprise clients • Updating branding, style guide for luxury client • Over 15 years of UX experience • Former artist in residence for Microsoft • Author of over 21 books on design tools • Candidate in Human Factors master’s program • Co-founder of American Graphics Institute 1 2
- 2. 6/22/2022 2 “Simple can be harder than complex. You have to work hard to get your thinking clean and make it simple.” Steve Jobs Information hierarchy Visual hierarchy Creates 3 4
- 3. 6/22/2022 3 Information hierarchy Validated and prioritized information should be reflected in the structure of your app/website Visual hierarchy Reflect your findings. Map prioritized information to visual design without adding distractions such as unnecessary content and decorations 5 6
- 4. 6/22/2022 4 Agitraining.com “We live today with a lot of chaos, and designers should concentrate on helping to lighten the chaos, including the noise.” Dieter Rams Noise = Distractions 7 8
- 5. 6/22/2022 5 Agitraining.com Distractions in your content come from… Not understanding user needs and goals …which leads to poor information hierarchy …and too many choices …and redundant and confusing design Using practical techniques, you can vastly improve user experiences Talk to users Discover their needs Prioritize their needs Reflect that in your design 9 10
- 6. 6/22/2022 6 Visual distractions come from • Redundancy in design • Using too many type sizes and styles • Adding too many unnecessary decorations • Using borders and lines to separate content instead of using space and positioning • Not understanding how to use color effectively 11 12
- 7. 6/22/2022 7 Combine essential content and visual aesthetics to eliminate distractions If the content is bad, the visual design is bad. 13 14
- 8. 6/22/2022 8 Agitraining.com Agitraining.com Give the user what they ask for 15 16
- 10. 6/22/2022 10 Agitraining.com Project: Creating a mobile app for a food truck 19 20
- 11. 6/22/2022 11 Before you start… Avoid reviewing the current system right away …before recognizing user needs Forces you to question…do we need that? 21 22
- 12. 6/22/2022 12 Avoid creating distractions by NOT wireframing right away Makes it difficult to visualize new ideas Anything that must be explained in long text should be a warning Understand what the user is looking for Mapping results from research #1 Avoid distractions by… 23 24
- 13. 6/22/2022 13 No excuses, research does not have to be complicated • Qualitative, and quantitative research, such as contextual interviews and surveys • Interview 5-6 potential users • Survey as many as you can but understand that the results generally change little after about 10 responses https://www.nngroup.com/articles/why-you-only-need-to-test-with-5-users/ Sample size not always critical 11 responses 20 responses 25 26
- 14. 6/22/2022 14 You don’t have to recruit a crowd “Five participants will discover over 80% of the challenges.” Journal of Usability Studies Ritch Macefield Agitraining.com Practical methods you can use to help you understand what users are looking for 27 28
- 15. 6/22/2022 15 Agitraining.com Minimal resources Less time and expense Research existing data Surveys Online card sorts More time and expense Observation and contextual interviews Research existing data • Government data: data.gov • Google Scholar • Google Books • Data is Plural, an assorted data collection: spreadsheet • Open Access Directory http://oad.simmons.edu/oadwiki/Data_repositories • Zippia https://www.zippia.com career expert. • Google public data: google.com/publicdata/directory 29 30
- 16. 6/22/2022 16 Agitraining.com What we found about food trucks Top menu items Burgers Indian street food Stone baked pizza Loaded fries Grilled cheese Falafel Macaroni and cheese https://www.zippia.com/advice/f ood-truck-statistics/ Create and run surveys • Helps to discover various users and user groups • Provides inexpensive, but valuable, quantitative data • Can’t argue with data, helps to build and define design choices • Surveymonkey.com • Google Forms 31 32
- 17. 6/22/2022 17 Agitraining.com What we discovered 99% want to look for a food truck on their phone. 50% eat lunch out 1-2 times a week 65% of users don’t want to walk more than 10 minutes (½ mile) 75% of users have an hour for lunch, but 12.5% work through lunch Agitraining.com Interview your users Create a script of open-ended questions and start a conversation Don’t ask users what they want Don’t talk to users about your “system” as it may not have the features they need Find their goals, discover challenges Observe what they are doing Let them continue the conversation 33 34
- 18. 6/22/2022 18 Agitraining.com Finding the theme after 6 interviews “If working on a UX project, we would stop after 6 interviews for practical reasons. Although we may miss one theme and some further detail, the time taken to conduct and code 6 additional interviews could be better spent on researching other pressing problems.” Maria Rosala, User Experience Specialist at Nielsen Norman Group Agitraining.com What we discovered about our users Most users have limited time and don’t want to wait in a long line Most want to find trucks recommended by others Most want to be able to review menus Many are loyal to a food truck and want to know where it is at all times 35 36
- 19. 6/22/2022 19 Next step, Mind map • Take the noise out of your head so you can strategize • Take everything you learned about your users and organize it in a non- linear manner • Helps you group and categorize content • Provides opportunities for “a-ha” moments • “Fun” collaboration technique Agitraining.com Recognize user groups Cuts down on unnecessary content Research process is repeated for each Food truck seeker Food truck seeker Food truck owner Food truck owner 37 38
- 20. 6/22/2022 20 Focus is the key to simplicity What is your app going to be great at? “My Food Truck app is best in its category at locating my top-rated food trucks and informing me when they are nearby, as well allowing me to share comments and ratings, about the food trucks, with my friends.” 39 40
- 21. 6/22/2022 21 What is your site/app great at? NEEDS=FEATURES What you provide on the screen to help them Discover scenarios that align with what you are great at SCENARIOS Agitraining.com User needs = user requirements User requirements = features Features = what you see on the screen 41 42
- 22. 6/22/2022 22 Our prioritized scenarios • User wants to find a quick bite to eat from within 1 mile or less • User wants to locate the type of food they are craving • User wants to find a highly-rated food truck • User wants to get food quickly with little interaction • Wants to remember best places to go …or use user stories As a < type of user >, I want < some goal > so that < some reason >. • As a busy professional, I want to find a variety of lunch selections nearby, so I can get back to work quickly. • As an intern, I want to find inexpensive lunch options, so I can stay in budget. • As a mother of young children, I want to find healthy options, so I don’t have to pack lunch. • As a concerned health professional, I want to get food with little interaction, so I can stay healthy. 43 44
- 23. 6/22/2022 23 Only give your user what they ask for Brainstorming features that align to user needs #2 Avoid distractions by… Agitraining.com Aligning features to user needs 45 46
- 24. 6/22/2022 24 Building a rough information architecture from features #3 Avoid distractions by… Agitraining.com Design your information architecture using your features. Pay attention to hierarchy. 47 48
- 25. 6/22/2022 25 Agitraining.com Test your navigation. Make sure your user can reach their goals This is where the FIERCE REDUCTION OF UNNECESSARY INFORMATION is most often realized Sketch & Iterate on your design #4 Avoid distractions by… 49 50
- 26. 6/22/2022 26 Agitraining.com Sketch and iterate often • Discuss designs with stakeholders and users • The more you iterate the more practical your design becomes • Be willing to throw designs away Test from the beginning and often • Sketches • Paper prototypes • Balsamiq wireframes • As you discuss system with users you will discover what they really need and will be able to reduce UI Fierce reduction of unnecessary items is our mantra at this stage. If the user doesn’t ask for it, don’t give it to them 51 52
- 27. 6/22/2022 27 Understand the power of typography Avoid redundancy in design Don’t add unnecessary decorations Don’t use borders and lines to separate content Understand how to use color effectively Show restraint in visual design #5 Avoid distractions by… Agitraining.com Use a type ramp Limit text styles and sizes Keep them proportional to each other Exaggerate differences Modern design uses type sizes that are visually twice the size https://material.io/design/typography/the-type- system.html#type-scale 53 54
- 28. 6/22/2022 28 This is a headline <H1> This is a subhead; the headline can be visually twice the size to make it easier for the user to define the level of importance<H2> This is tertiary information set at 10 px<H3> This is Body copy. In this example. Notice that the body copy is visually half the size of the subhead. This is a typical type ramp that is used in Swiss design, but lso helps users define the level of importance for content on your page.<P> Type ramp can vary depending upon platform Agitraining.com 55 56
- 29. 6/22/2022 29 Agitraining.com This is really important You cannot tell the headline is important because it does not have a variation in style or size. If I keep adding information with no differentiation in size of style it all becomes grey to the user. Nothing is indicated as being more important. This does not provide a clear structure to the user. This is also important… but you might not ever know it As a designer I must interpret what my research has indicated is important to my user and organize my text and a type hierarchy to answer my common scenarios. American Graphics Institute This is really important You cannot tell the headline is important because it does not have a variation in style or size. If I keep adding information with no differentiation in size of style it all becomes grey to the user. Nothing is indicated as being more important. This does not provide a clear structure to the user. This is also important… but you might not ever know it As a DESIGNER I must interpret what my research has indicated is important to my user and organize my text and a type hierarchy to answer my common scenarios. 57 58
- 30. 6/22/2022 30 Agitraining.com This is really important You can tell the headline is important because it has a variation in style or size. If I keep adding information with no differentiation in size of style it all becomes grey to the user. Nothing is indicated as being more important. This does not provide a clear structure to the user. This is also important… but you might not know it As a designer I must interpret what my research has indicated is important to my user and organize my text and a type hierarchy to answer my common scenarios. Agitraining.com A grid that is based on the leading of your body copy Use a typographic grid 59 60
- 31. 6/22/2022 31 Why is using a grid important? • Organizes information within a space. • Makes information clear and optimally accessible • Lessens visual noise • Result: clearer and more accessible communication Agitraining.com 61 62
- 32. 6/22/2022 32 Agitraining.com Unwanted noise Sales Manager Mary Smith Our staff Office Manager Debbie Norton Sales Assistant Sophia Walker Sales Assistant Andy Gap Sales Assistant Robert Jordan 63 64
- 33. 6/22/2022 33 Noise eliminated Sales Manager Mary Smith Our staff Office Manager Debbie Norton Sales Assistant Sophia Walker Sales Assistant Andy Gap Sales Assistant Robert Jordan Agitraining.com Borders Drop Shadows that are not subtle Gradients Animations Avoid unnecessary decorations 65 66
- 34. 6/22/2022 34 Eliminate unnecessary objects Does this need a drop shadow? Does this need a drop shadow? Does the gradient help convey more information? Do you really need this in a box? Simplicity. The single most important usability guideline “The less stuff you show users, the less they'll have to scan and comprehend, and the better the odds that they'll pick the correct option at any given stage” Reduce Redundancy: Decrease Duplicated Design Decisions. nngroup 67 68
- 35. 6/22/2022 35 Use recognized patterns & icons wisely • Humans recognize patterns and icons quickly • Use toggle controls when it you can • Don’t fret if you have to label your icons Audio Agitraining.com Reconsider the use of skeuomorphic designs Describes interface objects that mimic their real-world counterparts in how they appear and/or how the user can interact with them 69 70
- 36. 6/22/2022 36 Blend simplicity with affordance 71 72
- 37. 6/22/2022 37 You don't have to make content look like it does outside the digital world Agitraining.com 73 74
- 38. 6/22/2022 38 Designed for the real world, not digital Don’t fill in empty space…embrace it! • Leads the viewer in important information • Allows viewers to focus on what is important • Rule of thirds or golden mean is a good start • Golden Mean, remember proportion of 1.618 75 76
- 39. 6/22/2022 39 Rule of thirds • Divided into nine equal parts • Important compositional elements should be placed along these lines or their intersections. Rule of thirds • Divided into nine equal parts • Important compositional elements are placed along lines or intersections. 77 78
- 41. 6/22/2022 41 The golden mean ratio rectangle What is the next number? 0, 1, 1, 2, 3, 5, 8, 13, 21... 81 82
- 42. 6/22/2022 42 Golden ratio • Discovered during Mathematical Competition in 1225 • Believed that this proportion (1.618) is aesthetically pleasing • Used to analyze the proportions of natural objects as well as man-made systems such as financial markets Agitraining.com 83 84
- 43. 6/22/2022 43 Agitraining.com Feel confident about where you place your content 85 86
- 44. 6/22/2022 44 Agitraining.com Understand the use of color • Choose a color harmony • Avoid excessive use of color • Use the 60-30-10 rule • Be careful with background images 87 88
- 45. 6/22/2022 45 Choose a color harmony Avoid excessive use of color 89 90
- 46. 6/22/2022 46 Agitraining.com Limit your palette to three colors This reinforces visual hierarchy and contrast because there is less for users to consider and get distracted by and also helps maintain branding Agitraining.com Use the 60-30-10 rule Use 60% for the dominant color, 30% for the secondary color, and 10% towards an accent color. These proportions help create balance and prevent you from making a colorful and chaotic mess 91 92
- 47. 6/22/2022 47 Agitraining.com Background images Sometimes nothing is better than too much. Success is when the user must do little to start reaching their goals jsmith@agitraining.com 93 94
- 48. 6/22/2022 48 Laws of simplicity by John Maeda • The simplest way to achieve simplicity is through thoughtful reduction. • Organization makes a system of many appear fewer. • Savings in time feel like simplicity. • Knowledge makes everything simpler. • Simplicity and complexity need each other. • What lies in the periphery of simplicity is definitely not peripheral. • More emotions are better than less. • In simplicity we trust. • Some things can never be made simple. • Simplicity is about subtracting the obvious and adding the meaningful. 95