Functional UX, and no you can't 'Build in Public'

The importance of functional UX is understated. We talk a lot about personas and research, but when push comes to shove, somehow we arrive at
Product Manager > Consumer

This talk touches on the laws of UX and their subsequent takeaways, then dives into real world learnings and patterns based on them. Lastly, it touches on user testing methodology, the wireframing and prototyping journeys, tools and best practices for each of those phases, and key learning outcomes and objectives of a robust design process.

Transcript

1. Functional UX and no, you can’t ‘Build in Public’ Faiz Malkani
2. The importance of functional UX is understated. We talk a lot about personas and research, but when push comes to shove, somehow we arrive at Product Manager Consumer What is Functional UX WeWork Jumpstart
3. Laws of UX are the science behind how people behave and interact with digital interfaces. They're a set of principles that are the theory behind real-world UX decisions and guidelines A set of rules to base your UX on Laws of UX WeWork Jumpstart
4. An aesthetically pleasing design creates a positive response in people’s brains and leads them to believe the design actually works better Users often perceive aesthetically pleasing design as more usable Aesthetic- Usability Effect WeWork Jumpstart
5. Productivity soars when a computer and its users interact at a pace 400ms) that ensures that neither has to wait on the other Interaction time is important Doherty Threshold WeWork Jumpstart
6. Touch targets should be large enough for users to accurately select them, have ample spacing between them, and should be placed in areas of an interface that allow them to be easily acquired Time to acquire a target is a function of the distance to, and size of the target Fitt's Law WeWork Jumpstart
7. Tesler's Law states that for any system there is a certain amount of complexity which cannot be reduced Also known as the law of conservation of complexity Tesler's Law WeWork Jumpstart
8. The time it takes to make a decision increases with the number and complexity of choices. Less choices equal faster journeys Hick's Law WeWork Jumpstart
9. Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know Consistency is key Jakob's Law WeWork Jumpstart
10. Organize content into smaller chunks to help users process, understand, and memorize easily. Remember that short-term memory capacity will vary per individual, based on their prior knowledge and situational context Average recall is 7 / 2 items Miller's Law WeWork Jumpstart
11. The best method for reducing complexity is to avoid it in the first place. Analyze each element and remove as many as possible, without compromising the overall function Keep it simple Occam's Razor WeWork Jumpstart
12. People judge an experience largely based on how they felt at its peak and at its end, rather than the total sum or average of every moment of the experience Pay attention to the intense and final points of a journey Peak End Rule WeWork Jumpstart
13. Be empathetic to, flexible about, and tolerant of any of the various actions the user could take or any input they might provide Be liberal in what you accept, and conservative in what you send Postel's Law WeWork Jumpstart
14. Von Restorff predicts that when multiple similar objects are present, the one that differs from the rest is most likely to be remembered Keep important objects distinct and isolated Von Restorff Effect WeWork Jumpstart
15. Apps are now a mainstream, trusted way to deliver content and services. But in a crowded market, how does a product use the principles of UX to become useful, relevant, and valued? CX as a Differential Factor WeWork Jumpstart
16. People's Behavior is Changing It's become tougher for developers and brand marketers to get people to find and download their products, and once they do, stay engaged. As many as 25% of users open an app once and never return Though that’s made things harder Their experiences need to be efficient and delightful. Plus, a well- designed product that provides utility has the power to cut through the clutter. It can deliver on people's many 'I want to know', 'I want to go', 'I want to buy', and 'I want to do' moments. They’re engaging with their phones more than ever WeWork Jumpstart
17. App Navigation and Exploration 01 In-App Search and Discoverability 02 Key Areas of Focus WeWork Jumpstart
18. Commerce and Conversions 03 Registration and Onboarding 04 Key Areas of Focus WeWork Jumpstart
19. Form Entry and Data Collection 05 Usability and Comprehension 06 Key Areas of Focus WeWork Jumpstart
20. App Navigation and Exploration 01 In-App Search and Discoverability 02 Key Areas of Focus WeWork Jumpstart
21. Address people’s needs and tasks front and center. Highlight your app’s key and new features in context at the appropriate place in the app so they're a source of delight and interest rather than frustration and confusion Show the value of your app upfront WeWork Jumpstart
22. People struggle to interpret and distinguish menu categories that do not align with their mental models for categories. Menu categories should be clear with no overlap. This is particularly important when someone turns to a menu as a last resort after exhausting options through search Organize and label categories WeWork Jumpstart
23. People may only want to go back one step as they use the app. Apps should leverage back functionality so that they don't feel forced to have to start over from the home screen, which, in some cases, results in losing any unsaved data Allow people to go back easily WeWork Jumpstart
24. Auto-detection of location can save people’s time. However, there are times when they need to find a store that's not located nearby. Make manual entry of location easy and straightforward Make it easy to change location WeWork Jumpstart
25. Users can get frustrated when an app takes them to the mobile web for more content or to complete a task. If it is necessary to transition the user to the mobile web, ensure a consistent design to support the transition Keep transitions frictionless WeWork Jumpstart
26. App Navigation and Exploration 01 In-App Search and Discoverability 02 Key Areas of Focus WeWork Jumpstart
27. People with a specific task or need will typically look for a search field. They often prefer this to browsing. Apps that do not have a prominently placed search box can cause frustration and slow person down significantly Prominently display search WeWork Jumpstart
28. Some helpful functions include spelling auto-corrections, recognition of root words, predictive text, and suggestions while the person enters text. These help speed up the search process and keep them on-task toward conversion Use effective search indexing WeWork Jumpstart
29. People become overwhelmed when their search terms result in seemingly irrelevant and/or too many results. Filter and sort options can help them narrow and organize their results, which otherwise requires extensive scrolling or pagination on a small screen Provide filter and sort options WeWork Jumpstart
30. Commerce and Conversions 03 Registration and Onboarding 04 Key Areas of Focus WeWork Jumpstart
31. Save time and effort by making previous searches and recent purchases readily available. This is particularly important in frequently used apps where people conduct repeat searches or purchases and want time and effort saved Provide previous information WeWork Jumpstart
32. A large number of reviews gives prospective buyers more confidence. Aggregate rating distributions and allow people to sort and filter so they can get the "real story" about an item. Verified reviews from people who have purchased are also appreciated Allows reviews to be filtered WeWork Jumpstart
33. When people shop, they want an easy way to compare items of interest. In-app comparison features can eliminate the need for these workarounds to help drive consumers’ purchase decisions. Enable comparison WeWork Jumpstart
34. Apps that provide these payment options, such as PayPal, Apple Pay, and Google Pay, relieve people from the pain point of filling out additional forms during checkout and can provide an increased sense of security Provide third party payments WeWork Jumpstart
35. Simplify payment storage and reduce the number of steps involved. Create a simple credit card entry page and be sure to include the ability to add multiple cards and a function to toggle between them Make it easy to manage payments WeWork Jumpstart
36. Commerce and Conversions 03 Registration and Onboarding 04 Key Areas of Focus WeWork Jumpstart
37. People will abandon an app that asks them to provide personal information upfront unless there's some form of immediate payoff. In particular, apps with low brand recognition, or those in which the value proposition is unclear suffer the most Provide utility upfront WeWork Jumpstart
38. Many people end up taking the wrong action when attempting to sign up for an account. Design a "sign in" and a "sign up" that are easily distinguishable from each other so they can get to where they want to go quickly Differentiate sign in and sign up WeWork Jumpstart
39. People get annoyed when they have to go through an arduous, multi-step task to set up or reset a password. Reduce the risk of abandonment by simplifying the authentication experience. Minimize the number of steps required or use different auth methods such as a third- party login or fingerprint touch login Make auth frictionlesss WeWork Jumpstart
40. Form Entry and Data Collection 05 Usability and Comprehension 06 Key Areas of Focus WeWork Jumpstart
41. Forms should be compatible with how people enter information. As people complete form fields, automatically advance each field up the screen. It's also a good idea to include efficiencies like auto-populate, auto-capitalization, and credit card scanning Build user friendly forms WeWork Jumpstart
42. Provide real-time error information to alleviate a pain point and continuously clarify when an area of a form is successfully completed or validated. Test the experience to ensure that the process is smooth, and the flow is not disrupted. Communicate errors in realtime WeWork Jumpstart
43. People appreciate apps that provide an appropriate keyboard for text entry. Ensure that this is implemented consistently throughout the app rather than only for certain tasks but not others Match keyboard with input type WeWork Jumpstart
44. Have relevant, in-context information ready to assist people to move through the form easily. For example, when scheduling dates, people appreciate context like a monthly calendar to identify days of the week. It also reduces the risk of the them becoming distracted by another task Provide info and context WeWork Jumpstart
45. Form Entry and Data Collection 05 Usability and Comprehension 06 Key Areas of Focus WeWork Jumpstart
46. Unknown terms or phrases will increase cognitive load for the user. When calls to action are labeled with brand-specific terms, people may get confused. Clear communication and functionality should always take precedence over promoting the brand message Speak the same language WeWork Jumpstart
47. Icons for a menu, cart, account, or store locator as well as for actions like filtering or sorting are not universal and not well understood across apps. Icons that are labeled are much more likely to be used Provide labels and visual keys WeWork Jumpstart
48. When people add an item to the cart or submit an order, lack of feedback can cause them to question whether the action has been processed. Apps that provide a visual animation or another type of visual eliminate this guesswork for them Be responsive with feedback WeWork Jumpstart
49. People want to be able to control the level of zoom when they view an image. They can become frustrated by apps that zoom in at a predetermined magnification level. Put them in control by allowing them to zoom in as they prefer Let the user control zoom WeWork Jumpstart
50. People can get stuck in a task when they deny permissions integral to the app's proper functioning. Apps should ask for permissions in context and communicate the value the access will provide. They’re more likely to grant permission if asked during a relevant task Take permissions in context WeWork Jumpstart
51. Finding our biases and mistakes early is the key to a well designed product. Taking these steps before moving to engineering is crucial We aren't our consumers WeWork Jumpstart
52. Anyone involved with the product should wireframe. They’re the blueprint for design, and define the underlying conceptual structure for a product, communicating details and putting across ideas and assumptions And why should anyone? Who uses wireframes WeWork Jumpstart
53. While high fidelity prototypes sound fantastic in theory, product teams can't just go from 0 to 100. Instead of making a Minimum Viable Product MVP , rely heavily on wireframing, using digital tools like UXPin or analogue ones like pencil and paper Key differences Wireframes vs prototypes WeWork Jumpstart
54. And once you have your ideas and strategy in place, your assumptions validated, and your product outlined, then move to the high fidelity stuff. It’s always better to break stuff faster at the earlier stage Wireframe, then go on to prototype WeWork Jumpstart
55. Choose your wireframing style WeWork Jumpstart
56. Choose your journey style WeWork Jumpstart
57. Plan a little, do the rest 01 Set expectations, not just goals 02 Be consistent, not uniform 04 Think how, not what 03 Design Principles for Wireframing WeWork Jumpstart
58. Experiment and break things fast 05 Shipped is better than perfect 06 Design Principles for Wireframing WeWork Jumpstart
59. You’ve created wireframes - what are the key learnings and outcomes of the process? What's Next in the Process? WeWork Jumpstart
60. Call out where elements might be clouding the intentions of the project or contradicting the stakeholder’s requests. With each frame, ask: how is this serving the greater user journey? Don’t get too creative too quickly, and then have to re- do your hard work when the goals change User journeys and goals WeWork Jumpstart
61. Much like project goals, each page should have a purpose that can be clearly understood. Think, why is this page here? What does it want me to do? Is it important that I do what it’s asking? Again, put yourself in the user’s shoes. Every page needs a specific reason for being there Give them a purpose WeWork Jumpstart
62. Bad navigation can impact UX, SEO and other key aspects of a project. If you fail to catch navigation errors in your wireframe, you could cost your teams a lot of time. Consider elements like how many clicks a task takes, is important content readily available, and how easy is it to find what you’re looking for Product navigation WeWork Jumpstart
63. Wireframes help prioritize content. When critiquing this area, look for content placement, spacing, and grouping. Regardless of if you use actual content or placeholders, consider how the layout creates a content hierarchy and how that hierarchy serves the goals of the page. Use real content as much as possible! Use real content WeWork Jumpstart
64. Forget about colors and styles so you don’t get ahead of yourself. Start by asking yourself, what do I want a user to do when they get to my site? What steps do I want them to take? By removing the element of design, you will be able direct your focus to these important aspects of your website Calls to action WeWork Jumpstart
65. If a wireframes layout is difficult to understand, the actual design is going to be a nightmare. Point out areas that might confuse or overwhelm. Give feedback on components like content placement and page order. Furthermore, focus on readability. One problem wireframes run into is trying to fit too much content on a single page Simplify page layouts WeWork Jumpstart
66. It has to come in at some point, right? Well, it's after you're satisfied with the outcome of the wireframing process and are ready to see how they'll look in an interactive format Then when do you prototype? WeWork Jumpstart
67. Once you’ve broadly finalized the approach and structure of the product, it’s important to understand how that will look in a real world environment, and to bridge the gap between concepts and actual products. Something that works well in a wireframe, might just break when within a set of constraints Bridge the gap WeWork Jumpstart
68. How to approach prototyping Vertical prototyping addresses a smaller feature set, but in absolute detail and depth Vertical prototyping Horizontal prototyping involves addressing a wide range of features but in little detail Horizontal prototyping WeWork Jumpstart
69. Efficient tools for prototyping WeWork Jumpstart
70. Keep the laws of UX in mind 01 Understand how they map to the real world 02 Follow the design principles to do so 04 Wireframe, then prototype 03 In Conclusion WeWork Jumpstart
71. Define learning outcomes 05 Pick a prototyping approach that suits you 06 Don't forgo the importance of the process 07 WeWork Jumpstart In Conclusion
72. Design is never done Faiz Malkani @malkani_faiz malkanifaiz@gmail.com