DESIGNING A USER-FOCUSED EXPERIENCE

Transcription

1 DESIGNING A USER-FOCUSED EXPERIENCE HubSpot Design Certification Class 5 Kyle Geiste Experience Designer HubSpot

2 TODAY S GOAL: You will be able to create templates that are optimized for the user.

3 AGENDA 1 Why is user-focused design important? 2 How do you design for the user? 3 Implementing key UX design principles

4 1 WHY IS USER-FOCUSED DESIGN IMPORTANT?

5 FLICKR USER NORIO-NAKAYAMA 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. And we probably aren t the customer, here.

6 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. Don Norman, Design and Usability Expert Sharing Ownership of UX UXMatters.com, 2007 FLICKR USER ANDR3

7 A lack of user focus yields complexity, and complexity is the enemy of good design. When users struggle to perform the basic operations necessary to find their way to their personal goals, they typically don t find it, no matter how nice-looking it is.

8 But bare-bones simplicity isn t always the solution, either. 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. Don Norman ACM Interaction, Volume 15, Issue 5

9 In other words: The answer lies in the user, not in you. (Don t take that too hard, just know that it s impossible to naturally understand a user s intentions and needs if we aren t the user.)

10 2 HOW DO YOU DESIGN FOR THE USER?

11 Start and finish with the user. From the beginning of the process, and 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, What would the user want?

12 Develop the site s user personas. Buyer Personas are a great start, but as a designer you ll want to focus on the experience that your user will have when using pages created from your template. Ask yourself Who would use this content? What problems are they trying to solve? What is their level of technical expertise? What other websites do they frequent? What devices/software do they use?? (No Buyer Personas? Start by watching the our Buyer Personas training videos!)

13 BEST PRACTICES FOR USER-FOCUSED DESIGN

14 BEST PRACTICES FOR USER-FOCUSED DESIGN Discover the problems with your current site design. Create a basic prototype to solve those initial problems. Test it on anyone you can. Iterate until the testing no longer surprises you. Continue the feedback loop indefinitely.

15 Start with your current problems. 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 everything your site does well, and every way it could be improved.

16 Create prototypes. Start very simple and low-tech, on paper or in mockup software, and then create more fully-featured versions. The point here is to move quickly, so that you can work out the issues fast.

17 Test your designs. Start local, then branch out. Start with your colleagues, friends and family to work out the major flaws, then test samples of your user personas. Ideally, test with real customers.

18 Interested in learning about how to conduct user testing? Check out our Contextual Marketing Certification! There, you ll learn more about the entire process of creating user-centric site experiences, including use of Smart Content and Personalization. academy.hubspot.com/certification

19 Prototype, test, repeat. Continue this cycle until the results no longer surprise you. Remember: if a user makes a mistake once, it might be their fault. If they continue to make that same mistake, it s probably your fault.

20 When does the cycle end? In a way, never. Launch when it feels ready, but expect that you ll continue to prototype and test new ideas to ensure that your users are always delighted.

21 3 IMPLEMENTING KEY UX DESIGN PRINCIPLES

22 PRINCIPLES FOR USER-FOCUSED DESIGN 1. Consistency 2. Visibility 3. Affordances/Signifiers 4. Mapping 5. Feedback 6. Constraints

23 PRINCIPLE 1, 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.

24 CONSISTENCY IN HUBSPOT Work with as few templates as possible to keep the design fluid and consistent, helping users recognize how and where they can find information and navigation on a page, as they explore.

25 CONSISTENCY IN HUBSPOT While creativity is always appreciated, try not too wander too far from commonly accepted design patterns. Don t reinvent design language use what s already out there. Create beautiful buttons, but stick to the form that people know.

26 PRINCIPLE 2, VISIBILITY Visibility ensures that the most important options available to your user are quickly located and easily accessible. For example, emergency buttons in an elevator are often bright red and placed near the ground so that they are easy to reach.

27 Header Navigation: 9 Links, no sub-menus Footer Navigation: 39 Links, complete site map VISIBILITY IN HUBSPOT Don t bury your important content beneath endlessly-unfolding menus. Less is often more: keep your major categories easily visible, and expand when necessary in the footer or in sub-pages.

28 PRINCIPLE 3, AFFORDANCES/SIGNIFIERS Affordances/signifiers 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.

29 Button Animation In this example, when hovering, the button outline fades to white and the arrow slides down, out of sight. Navigation Menu Animation In this example, when hovering, a white bar fades in below the link. AFFORDANCES IN HUBSPOT Focus on making the interactive, input-based sections of your templates teach people about what s possible. For example, you can indicate an interactive element using subtle animations.

30 PRINCIPLE 4, MAPPING Mapping is the principle of drawing natural 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.

31 Okay: Classic Hamburger Menu (for displaying a mobile navigation menu) Better: Hamburger Menu with text, clearly stating what the button does. MAPPING IN HUBSPOT Ensure that all of your helpful text (on buttons, links, forms) is as descriptive as possible, and ensures that a prospective user can easily understand what event will happen next.

32 PRINCIPLE 5, FEEDBACK When a user completes an action, appropriate feedback will help them understand that the action was recognized and completed correctly or incorrectly. For example, when downloading music, a gradually-filling progress bar informs you that your download has begun.

33 FEEDBACK IN HUBSPOT Forms are a common place where instant feedback is key. Use styling to keep the user informed of which item is selected or required, and what they may have missed Required field selected (red border) 2. Non-required field selected (blue border) 3. Required fields missed, (error messages)

34 PRINCIPLE 6, 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. For example, a washing machine may lock itself during a spin cycle, to prevent injury or damage to the machine.

35 Here, when a lead selects their role, the site content is customized to suit them. CONSTRAINTS IN HUBSPOT Utilize personas to create site sections that only show details pertinent to the person viewing them. In this case, the content was based on the user s role at their company.

36 Test on multiple devices. Be sure to test them to the limits. Spend a good hour or more just navigating around your site on a smartphone or tablet. Resizing the window on your browser isn t enough. Get a feel for what it s really like to use your template on a smaller scale.

37 Design for the content creator, too! Don t forget your content creators! Using instructive custom modules, module labels, and descriptive default text blends education into the template. The more work you do up-front, the less time you ll spend providing template support.