VIDEO 1: WHY IS USER-FOCUSED DESIGN IMPORTANT?

Transcription

1 VIDEO 1: WHY IS USER-FOCUSED DESIGN IMPORTANT? Hello again! Are you ready to think about the user experience? This is Angela with HubSpot Academy. Feel free to connect with the me on twitter or the entire Design Community on the Design Forum on inbound.org. After watching this class, you ll be able to create templates that are better optimized for the user, the most important person around. So, why do we focus so closely on the user? Bringing it back to our building a house analogy: if you aren t focusing on the homeowner, then who are you building for? If we don t involve the user s persona, needs, and goals in our work, then we re basically just designing for ourselves. Typically, we aren t the target customer so our needs simply don t apply. In order to create the strong web interfaces that will help people get what they need, we have to move past what we think we want it to look like or do in order to ensure that the final product is serving the users. One of the leading figures in human-centric design, psychologist Don Norman once a VP of Apple and the author of the seminal book, The Design of Everyday Things, has a lot to say on the subject. This quote says it all. Too many companies believe that all they must do is provide a neat technology or some cool product or, sometimes, just good, solid engineering. Nope. All of those are desirable (and solid engineering is a must), but there is much more to a successful product than that: understanding how the product is to be used, design, engineering, positioning, marketing, branding all matter. It requires designing the total user experience. To sum, when we don t focus on the user, our work becomes complex, and complexity is the enemy of good design. When our users struggle to find their way to their personal goals, they typically give up, no matter how pretty it is. Design has come a long way, but ultimately the most successful designs are the ones that are most focused on the people using them. The enemy of good design is anything that immediately sends a user to customer service, taking them away from the experience that you worked so hard on. However, radical, bare-bones simplicity isn t necessarily the solution. Placing a giant buy our stuff button on our page isn t going to suit the user either. [ 1 ]

2 To quote Norman once more, The argument is not between adding features and simplicity, between adding capability and usability. The real issue is about design: designing things that have the power required for the job while maintaining understandability, the feeling of control, and the pleasure of accomplishment. And that s what you re looking for, when design is good, it becomes a pleasure to use. It s so effortless that what might be considered work becomes fun. To sum it all up, the answer lies in the user, not in you and there s no way around it. It s impossible to naturally and effortlessly understand a user s intentions and needs if we aren t the user. Up next, we ll start discuss some strategies to help get you thinking like your users. VIDEO 2: HOW DO YOU DESIGN FOR THE USER? From day one of conceptualizing your design and past the date that your work goes live, you need to consider your users needs, goals, and challenges. Every decision point should begin with What would the user want? Remember, we may think we know what they want, but more often than not, we just don t know. As a guide for designing for your users, develop the site s user personas. Focus on the experience that your user will have when using pages or the created from your template. Ask yourself questions such as who would use this content? Or what kinds of problems are they trying to solve? Amongst other questions. If your personas are well developed, then you can look at your users habits on your current site and other sites that the user frequents to come up with a strategy for your designs. The sites that they visit often are sites they re comfortable with using. Those sites have design ideas that your user is already familiar with. You don t have to reinvent the wheel in your design and don t be ashamed to work from those ideas that already exist and improve upon them. Let s go over some big picture best practices to follow during the design process that help us to keep our users in mind. We re going to take a look at each of these, but first, discover the problems with your current site design. Start with your current problems. If you don t know where you re starting from, then it s hard to know where to go next. Ask yourself, What do your existing users complain about? What do they have trouble finding? What resources should be easier for them to find, but aren t? Once you have put this list together, the design process can begin. [ 2 ]

3 Create a prototype that responds to those initial problems, but don t start writing code yet. Use pen and paper if you have to. The point here is to start very simply and low-tech on paper or in mockup software and then create more fully featured versions. The goal is to move fast, so that you can work out the issues quickly. After each successful prototype, run user testing sessions and involve anyone that you can. Start local, with the people around you friends, family, colleagues and then work out to samples of your user personas and ideally real customers. Seek out those relationships that you ve had in place for years, and incentivize the process if you can. People who like you are typically more than happy to help. Continue to iterate the testing until the results no longer surprise you. Ultimately, it s a cycle. Prototype, test, repeat. Continue the cycle until you can speculate the results. And remember, if a user makes a mistake once, it s probably just a one-time mistake. If they or multiple users demonstrate the same navigational mistake, it s something to improve upon. As you make changes and test new ideas, you ll continue the feedback loop indefinitely. The testing and feedback cycle in some ways never ends. But, launch when it feels ready. Expect that you ll continue to prototype and test new ideas to ensure that your users are always delighted. Up next, we ll discuss some important principles for user-focused design. VIDEO 3: IMPLEMENTING KEY UX DESIGN PRINCIPLES Hi there. We re going to discuss some key principles for user-focused design. While these design principles may not be a new concept to you, they were initially developed by Don Norman as a way to discuss user-focused design and to develop a language around this particular design approach. The first principle we ll discuss is Consistency. Consistency is the implementation of design patterns and repetition, which help users to quickly learn how an interface works. For example, while ten cars may all have wildly different dashboards, the brake pedals will always be in the same location. Great designs teach you how to use them and consistency helps the user learn. A way to achieve consistency across your content is not only by how you design your templates, but also in using as few templates as possible. This makes easy work of ensuring consistency so [ 3 ]

4 that your users recognize how they can navigate the content and find information while they explore. Media Junction has used the same template for each work portfolio page in the examples here. They have responded to what their users want which is a quick visual overview with further detailed information about the work. By keeping this consistent from page to page, they ve created an experience that makes it simple for their users to browse what the agency is capable of. By reusing templates, you re helping create recognition of where to find information. As a user navigates from one portfolio page to the next, it becomes obvious where to find things such as the navigation and other typical visual language cues like bullet points, links and calls-to-action. A user that can learn the interface quickly is more likely to not only spend more time browsing the content but also find the information that they are looking for. Another way to have consistency is in following existing design patterns and practices. For example, we ve learned that underlined words and phrases in all and across the internet are typically hyperlinks. Oftentimes, these are blue in color as well. By adhering to a common design language you re helping users get information even faster. Now that isn t to say that you shouldn t use your creativity to design beautiful, visually-rich page elements, but stick to a format that most users will know. This way, you can ensure that your buttons are recognized as buttons and as something to click on, like the example calls-to-action shown here. The last recommendation for how to create consistency in HubSpot is to spend some time developing a style guide. While some designers may be able to quickly read through a stylesheet and understand the design direction, you might have some non-designers or marketers that cannot. By providing a style guide, the content creators will have a better sense of what their work should look like. However, if you re creating a standalone design, perhaps an template that could be used by many different companies, then a style guide is unnecessary. The contents of your style guide is up to you and you ll continuously update the guide as needed. Here are some ideas to get you started with style guide creation to help keep marketers on track: Show color palettes with hex codes. Marketers will appreciate knowing exactly which colors they should use and where. For example, when a marketer needs to design a call-to-action, having defined colors will make their work easier. Next, font families, colors, font sizes, spacing and examples of when they should be used. If a marketer is creating a content offer or an image with text for social media promotion, how do they [ 4 ]

5 get the text to match your designs? Outlining what the font should look like will help create consistency. Also, if you have images that you use often, perhaps a banner for the top of a page and obviously, the company logo, help the marketer know how to use these images. Do they need to be a certain size in s? What about manipulating the image? Can the marketer crop the photo or add a filter to change the look? Define the design direction for the marketer to follow. You may also choose to include iconography and design accents that are commonly used, as well as descriptions of how and when to use a custom module. Again, the level of detail is up to you. When you are working with other creative individuals, a style guide can help make sure that you re all creating consistency for the brand. The more details and logic that is explained in the guide, the better it is for the readers. Setting up a style guide can save you a significant amount of time when managing brand consistency. The second principle we ll discuss is visibility. Visibility ensures that the most important options are quickly located and easily accessible to the user. As you test and think about what your users want, consider how you might create an easier experience for them by placing important elements within easy reach. One key way to ensure visibility of the most important options is by simplifying the navigation at the top. Don t bury your important menu items beneath endless secondary or tertiary menus. Less is often more, keep the most important items clearly visible, and expand on your site map in the footer. We can see this in practice with an example from Outdure, a HubSpot customer who provides outdoor decking solutions. At the top of the template, the header navigation has 9 links with no sub-menus, concentrating on the most common solutions to user problems. In the footer, however, they expand the entire site map, featuring 39 links and an easy way to get to anything the user might need. In this way, they have made everything visible for the person who scrolls, looking for it, but have selectively chosen the most visible links at the top, based on what their users come looking for. This brings us to the affordances principle, which is also commonly referred to as the signifiers principle. Affordances are visual cues that teach the user how something can be operated. For example, a doorbell button may be concave or light up, inviting you to touch it. [ 5 ]

6 Make the input-based sections of your templates teach people about what s possible. For example, you can indicate an interactive element using subtle animations. In the example on the left from Cloud Manager, they ve used a button animation that, upon hover, causes the button outline to change to white and the arrow is no longer displayed. This helps users understand this is an interactive space, that this is something to click on. On the right, we have an example of their navigation menu animation. When a user hovers over a menu item, a white bar fades in below the link which not only places emphasis on the menu item but also explains where you ll go if you click on that spot. However, not all animations are effective on a mobile device, so you might want to use other affordances as well. Shadows on buttons give them dimension and imply you can press me. As another example, you might not care for the aesthetics of blue, underlined links, but a user certainly knows what the links will do. Next, we ll discuss mapping. Mapping is the principle of drawing connections between interface objects and their intended effects. For example, turning a steering wheel left makes a car go left you can easily map the direction of the wheel to the direction of the turn. A common way to use mapping is to make your helpful text on buttons, links and forms as descriptive as possible to ensure that a user can easily understand what event will happen next. This shows up often on mobile devices as a hamburger menu and is typically used to indicate a mobile navigation menu. While the hamburger menu is becoming common place, not everyone may understand that this symbol implies a navigation menu. The example on the right from Impact Branding and Design expands the button to include the word menu so there s no confusion about what happens next when clicked. The mobile menu is a topic of hot debate at this time. We ll discuss navigation on mobile in the next class, so stay tuned. In the meantime, you ll want to evaluate your design and make sure that each interactive element tells the user what they do and has the affordance to indicate that it s something to interact with. The exception to the rule is based on your user persona. If you feel they don t need as much instruction and direction, then perhaps you don t have to go this far but it s still a good principle to keep in mind as you design. Next, we ll talk about the feedback principle. When a user completes an action, appropriate feedback will help them understand that the action was recognized and completed successfully. For example, when running a race, there s a finish line to indicate that you ve completed the race and made it to the end. [ 6 ]

7 There are many places where we can give feedback and forms are a common place for instant feedback. Use styling to inform the user of which item is selected or required and what they may have missed. Look at the three different states of the same form. The first example has a red border to draw attention to the fact that the selected field is required. The red makes the field stand out from the other fields. Next a non-required field shows which field is selected, but the blue border doesn t have the same sense of urgency as the red border. Third, required fields when missed, show error messages to explain to the user that the form wasn t filled out properly. Error messages are helpful. Imagine if the form didn t have the error messages after submitting. The user wouldn t know that the form didn t actually submit properly and wouldn t know what to do next. In fact, the user might navigate somewhere else and in turn, their information was never captured. Similarly, this is why it s recommended to create thank you pages so that the user can understand that their form has been submitted successfully and tells the user what to expect next. Lastly, we ll talk about constraints. Constraints are purposeful limitations placed on an interface or device. Often times, creating the best user experience means only providing what s necessary for the user to achieve their goals, and nothing else. For example, a washing machine may lock itself during a spin cycle, to prevent injury or damage to the machine. In this example from SBI, they have used personas to create content sections that only show details that are pertinent to the person viewing them. When a user selects their role on the example on the left, they are presented only the most relevant content, as seen in the example on the right. Using constraints helps users reach their goals rather than having to search through all content to find what they are looking for. Although your constraints do not have to be as restrictive as this example. You could help a user flow from one piece of content to another by connecting content that logically and naturally comes together. In short, this principle constrains the view of content based on the user that is viewing it. Customized, curated and personalized content is what we re aiming for when applying this principle to designing the user experience. Lastly, do not create unnecessary constraints to block users from content. For example, let s say that you navigate to a company s blog from the top navigation and you ve never read their blog before. [ 7 ]

8 Before you have a chance to browse the blog posts, let alone read one, a form to subscribe to the blog pops up, preventing you from doing anything other than interacting with the form. This isn t the best user experience. The timing of the form pop-up is out of sync with when the user would be making that decision to subscribe or not. You don t have to avoid this design tactic entirely, but it s recommended to avoid the overuse of modals, overlays, pop-ups and slide-in assets that force the user to interact with them. Unnecessary constraints can cause users to become frustrated and in turn, they may stop interacting with your content. Once again, here are all of the key user-focused design principles. Use these principles in each of your designs in order to create the best possible user experience. [ 8 ]