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

Slide 1

Slide 1 text

Functional UX and no, you can’t ‘Build in Public’ Faiz Malkani

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

App Navigation and Exploration 01 In-App Search and Discoverability 02 Key Areas of Focus WeWork Jumpstart

Slide 18

Slide 18 text

Commerce and Conversions 03 Registration and Onboarding 04 Key Areas of Focus WeWork Jumpstart

Slide 19

Slide 19 text

Form Entry and Data Collection 05 Usability and Comprehension 06 Key Areas of Focus WeWork Jumpstart

Slide 20

Slide 20 text

App Navigation and Exploration 01 In-App Search and Discoverability 02 Key Areas of Focus WeWork Jumpstart

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

App Navigation and Exploration 01 In-App Search and Discoverability 02 Key Areas of Focus WeWork Jumpstart

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

Commerce and Conversions 03 Registration and Onboarding 04 Key Areas of Focus WeWork Jumpstart

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

Commerce and Conversions 03 Registration and Onboarding 04 Key Areas of Focus WeWork Jumpstart

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

Form Entry and Data Collection 05 Usability and Comprehension 06 Key Areas of Focus WeWork Jumpstart

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

Form Entry and Data Collection 05 Usability and Comprehension 06 Key Areas of Focus WeWork Jumpstart

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

Choose your wireframing style WeWork Jumpstart

Slide 56

Slide 56 text

Choose your journey style WeWork Jumpstart

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

Experiment and break things fast 05 Shipped is better than perfect 06 Design Principles for Wireframing WeWork Jumpstart

Slide 59

Slide 59 text

You’ve created wireframes - what are the key learnings and outcomes of the process? What's Next in the Process? WeWork Jumpstart

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

Efficient tools for prototyping WeWork Jumpstart

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

Design is never done Faiz Malkani @malkani_faiz malkanifaiz@gmail.com