Video
 
  • Description
  • Transcripts

Why Video: Why is User-Focused Design Important? (7:10)

Learn why focusing on the user persona is important in design. User personas are semi-fictional representations of different ideal users.

Hi there. I’m Angela with HubSpot Academy. Why is user-focused design important? To answer this question, let’s take a step back and address this one: When you design, who are you designing for?

You can think of a website like a house, since it houses a company’s information and content. And designers often take on many roles when building a website, or building a house.

Designers will serve as the house builder, architect, project manager, electrician, plumber... all of those roles and more to build this house. And if you aren’t focusing on the homeowner, who are you building for? Avoid designing for yourself by involving the user’s persona, needs, and goals in your work.

Typically, you aren’t the ideal customer for the homeowner or company, so in order to guide your process in creating a strong web interface for you or a client, focus on the website user. Let’s discuss the user persona, needs, and goals in more detail.

No matter the type of design project you’re working on, design for the user persona. User personas are semi-fictional representations of different ideal users.

They’re based on real data and some select educated speculation about customer demographics, user behavior patterns, motivations, and goals. Unlike a buyer persona, if you’re familiar with the term, user personas focus on usability.

You can address a user persona’s needs by designing for the buyer’s journey.

The buyer’s journey is the active research process people go through leading up to making a purchase.

The journey takes place from the buyer’s perspective.The buyer’s journey is comprised of three stages: awareness, consideration, and decision.

As an individual moves through the buyer’s journey, they first identify a problem or opportunity, next, they investigate possible solutions, and finally, they decide on a way to solve their problem.

Your designs should be created in support of the user, helping them work their way toward solving a problem and making a purchasing decision, and simultaneously supporting the content creator.

Content creators will be producing things like white papers, webcasts, case studies, and more. They may create any or all of these assets in support of the buyer’s journey while keeping their persona in mind.

This list should give you an idea of what kinds of assets marketers will want to place on your templates, and what they might need your help in creating.

While designing, you’ll conceptualize all of the different paths a user might take. Journey-driven design centers around the journeys users take on your website and the flows they follow to complete their objectives. What is a user trying to do with the content? On what type of device are they accessing it? On how many devices?

Now, there are a variety of reasons that designers take a mobile-first design approach. That is, to design the mobile experience first. But mobile-first doesn’t mean mobile-only.

When designing the journey for your users, consider all of the different devices and even the experience from device to device. For example, if I’m checking an email notification on a smartwatch, and I open the email on a mobile phone but decide to read all the email details on a desktop device, how has the designer shaped the experience from device to device?

In fact, "while smartphone use is overwhelmingly popular for some activities, such as social media, messaging, and catching up with news and gossip, the majority of consumers in western markets also have desktop (and tablet) devices which they tend to use for more detailed review and purchasing." (Dave Chaffey, CEO, Smart Insights)

In order to discover the user’s journey in journey-driven design, map the ideal journey for different user personas and identify the micro moments.

According to Google, a micro moment is an intent-driven moment when a person turns to a device, increasingly a mobile device, to act on a need: to know, to go, to do, to buy.

Don Norman, one of the leading figures in human-centric design, psychologist, and author of the bestselling book, “The Design of Everyday Things,” consolidates user-focused design to this: “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.”

Without focus, design work can be very complex, and complexity is the enemy of good design. Attention spans are low, and when a user struggles to accomplish their goals, they often put forth little effort and give up entirely. The most successful designs are focused on the people using them, and they keep the user immersed in the experience, regardless of the aesthetic choices.

But simplicity isn’t always the solution to complexity. Placing a giant ‘buy our stuff’ button on your page, while simple in supporting the buyer’s journey, isn’t helpful to the user.

To quote Don 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.”

That’s what you’re aiming for in your designs; an experience that’s a pleasure to use and helps a user reach their goals.

This is paramount for you and your clients, since 40% of users don’t return to a site when their first visit is a negative experience.

Understanding your users’ needs helps you create a good user experience. Your process in designing the user experience should be guided by questions such as:

What micro moment is happening? What is the user trying to learn, do, or buy? What does an ideal user interaction look like? How does the user’s journey change on different devices? Is the current website architecture helping or hurting the user’s experience?

In order to create a good user experience, your designs will simply help deliver the right content to the right person, at the right time.

Quiz

Quiz: Why is User-Focused Design Important?

Test your knowledge on what you just learned!

Video
 
  • Description
  • Transcripts

How Video: How Do You Design for the User? (11:41)

You'll learn about six key principles of user-focused design and how to apply them when designing for a user.

Hi there. I’m Angela from HubSpot Academy. We’re going to discuss six key principles of user-focused design:  consistency, visibility, affordances or signifiers, mapping, feedback, and constraints.

Don Norman developed these over thirty years ago as a way to approach user-focused design, so they may be a bit of a review for you, but these principles will help guide your efforts in designing for a user.  

The first principle is consistency. Consistency is the usage of repetition and design patterns, which help users quickly learn how an interface works.

For example, while ten automobiles may have different dashboard gauges and instruments, perhaps even in different languages, the brake pedals are all in the same location. Great designs teach users how to use them, and consistency helps the user learn.

One 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.

Media Junction has used the same template for each work portfolio page in the example here. They have responded to what their users want, which is a quick visual overview with written details about the work.

By keeping this consistent from page to page, they’ve created a simple browsing experience that showcases 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 menu and other typical visual language cues like bullet points, links, and calls-to-action.

A user who can learn the interface quickly is more likely to not only spend more time browsing the content but also find the information they’re looking for.

Another way to create consistency is in following existing design patterns and practices. For example, most users readily recognize that underlined words are typically hyperlinks. By adhering to a common design language, you’re helping users get information even faster.

Now, that isn’t to say 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 creating consistency 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 content creators who cannot. By providing a style guide, the content creators will have a better sense of what their work should look like.

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, include 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 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 hero image or the company logo, help the marketer know how to use these images. Do they need to be a certain size in emails? 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.

The level of detail is up to you. When you’re 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’s 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 of user-focused design is visibility. Visibility ensures that the most important options are quickly located and easily accessible to the user. One key way to accomplish this in the navigation is to keep your major categories easily visible and expand them when necessary in the footer or in subpages.

In this example from Outdure, the header navigation has nine links with no sub-menus. In the footer the entire site map is represented with 39 links, providing more options to the user who scrolls and is actively looking for more information.

The next principle is the signifiers, or as it’s also called, the affordances principle. Signifiers are visual cues that teach the user how something can be operated. If you want a user to interact with an element, teach the user what’s possible.

In this button animation example, a hover effect causes the button outline to change to white and the arrow is no longer displayed when a user hovers the cursor over the button.

The navigation menu animation has a white bar below the link which places visual emphasis on the item and explains where the user will go when clicked.

However, not all animations are effective on a mobile device, so you’ll want to use other interaction signifiers as well.

Shadows on buttons imply ‘you can press me’ and of course underlined links are easily understood by a user. 

The next principle of user-focused design is mapping. Mapping is the act of drawing connections between interface objects and their intended effects.

For example, turning a steering wheel left makes a car go left — the direction of the wheel can be mapped to the direction of the turn.

A common way to use mapping is through written description. Helpful text on buttons, links, and forms should be as descriptive as possible to ensure that a user can easily understand what event will happen next.

While the hamburger menu is becoming common place, especially on mobile devices, not all users may understand the symbol on its own.

The example on the right expands the button to include the word ‘menu’ so there’s no confusion about what happens next when clicked.

The exception to this 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, the feedback principle. When a user completes an action, appropriate feedback will help them understand that the action was recognized and completed successfully.

Can you imagine running a race without a finish line? How do you know when you’re done? Provide feedback to users to show their actions were successful or not.

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.

The red border draws attention to the selected field, which is required. The red makes this particular field stand out from the other fields. Let’s see how a selected non-required field looks on the same form.

The blue border doesn’t have the same sense of urgency as the red border. Lastly, when the user submits, any missed required fields 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 away, resulting in their information not being 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 they know what to expect next.

The last principle of user-focused design is constraints. Constraints are purposeful limitations placed on an interface or device. Often times, creating the best user experience means only providing what is necessary for the user to achieve their goals and nothing else.

As an example, a washing machine may lock itself during a spin cycle, to prevent injury or damage to the machine and the user.

In this example, the user is in control of what they view. Use personas to create content sections that only show details that are relevant to the person viewing them.

When a user selects their role in the example on the left, they’re presented with only the most relevant content, as seen on the right. Using constraints helps users reach their goals rather than having to search through all of the content to find what they’re looking for.

Although, your constraints don’t 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.

Make sure that you don’t create unnecessary constraints to block users from content. Imagine a user navigating to a company’s blog for the very first time. Upon arrival, the user is blocked from reading all content and the pop-up modal prevents the user from reading the content -- they are forced to subscribe.

This isn’t the best user experience. The timing of the pop-up form 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.

In short, this principle constrains the view of content based on the user who’s viewing it. Customized, curated, and personalized content is what we’re aiming for when applying this principle to designing the user experience.

Once again, here are all of the key user-focused design principles: consistency, visibility, affordances or signifiers, mapping, feedback, and constraints.

Use these principles to create the best possible user experience in all of your designs.

Quiz

Quiz: How Do You Design for the User?

Test your knowledge on what you just learned!

Video
 
  • Description
  • Transcripts

What Video: What Does User-Focused Design Look Like? (4:56)

A walk through of a user-focused design strategy for you to follow whether you’re designing for your company or a client.

What does user-focused design look like? We’re going to walk through a user-focused design strategy for you to follow whether you’re designing for your company or a client.

Like most of the design process, your work is never really finished. Revisit this strategy as often as you need to make sure that your design strategy is most effective in creating a great user experience.

First, develop or review the user personas. Focus on the experience your user will have when using the pages or the email created from your template. Unlike a buyer persona, focus on usability.

Ask yourself questions such as: Who would use this content? What problems are they trying to solve? What micro-moment are they trying to have? What devices or software do they use? What other websites do they frequent?

In developing user personas, you should evaluate the user’s habits on the site you’re designing and other sites the user visits often. Those sites have design ideas your user is already familiar with.

But you don’t have to reinvent the wheel in your design or feel limited by working from ideas that already exist. You can improve upon them.

Next, focus on the user persona’s needs over marketing goals. From the beginning of the design process to beyond when the site goes live, you need to consider your users’ needs, goals, and challenges.

Every decision point during the design process should begin with the question, “What would the user want to accomplish?”

At times it can be difficult to balance the user’s needs with marketing goals in order to drive revenue for the business. When working with clients, be firm about making the user your top priority. It will serve the client well in the long run.

The next step is to assess your current design strategy. Begin by evaluating the current site design. 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?

Make a list of what your site does well and every way it could be improved. Your list might look something like this. You can list out large themes, such as typography, or specific elements, such as the footer site map.  

If you don’t know where you’re starting from, it’s hard to know where to go next. You’ll build your to-do list or a list of must-haves along with a wish list or list of nice-to-haves to be completed in a specific timeframe.

You can see that during the next two months, the must-haves are going to be tackled first, and if there’s time left, the wish list items will be worked on.

Design is a creative process that’s always a work in progress, so it’s important to keep your lists finite and actionable.

Your wish list for improvements could be miles long, but that doesn’t give you any prioritization on which tasks to accomplish.

The next step in developing a user-focused design is to discover problems that users are having with user testing tools. Set up tools for remote user testing and tracking if you haven’t already.

There are plenty of tools for user testing, and a lot of them are free. Your task is to start collecting data on how users are interacting with your content and identify problems users have with navigating and interacting with the content.

Next, create a wireframe to address those initial problems. It’s important to start simply. Start low-tech -- on paper or in mockup software --- to move fast so you can work out the issues quickly.

Then, you’ll create a prototype for testing. Your clickable mockup should be created quickly so you can spend your time on user testing.

Test on anyone you can, especially people who fit into your user personas or are real customers. After testing, refine the prototype again. Continue the cycle of prototype, test, repeat until the testing results no longer surprise you.

Lastly, you’ll want to consider the content creator’s needs. This is the time to involve the marketers or content creators who will be using your designs.

Is this solving for what they need from a marketing perspective? Is the content creator able to use your template without you explaining it to them?

Make sure your design supports the content creator’s needs and goals, because a content creator is using your design too!

Workbook

Worksheet: Website Design Audit

Whether you’re designing for your company or for a client, use this worksheet to plan the direction and timeline for your website improvements.