User Experience. 10 Principles to Ensure a Great. on your Website. Issue 3. An Appnovation Digital ebook

Size: px

Start display at page:

Download "User Experience. 10 Principles to Ensure a Great. on your Website. Issue 3. An Appnovation Digital ebook"

Marylou Parks
5 years ago
Views:

1 Issue 3 10 Principles to Ensure a Great User Experience on your Website An Appnovation Digital ebook 10 Principles to Ensure a Great User Experience on your Website P.1

2 Thank you for downloading our E-Book: 10 Principles to Ensure a Great User Experience on your Website We hope you learn a lot from our free resource. If you have any questions, please do not hesitate to contact us online or in person at any of our offices around the world. We look forward to hearing from you soon! The information in this E-Book is transcribed by Appnovation Technologies from User Experience & Your Company Website - The Top 10 Principles That Play A Major Part in How Visitors Experience Your Company s Website, webinar presented by Adrian Jones, and Tim Welsch. For more information, visit Appnovation Technologies P.2

3 Table of Contents Understand Your Users & Support Their Goals P.5 Make Your Interface Easy, Clear & Enjoyable to Use P.7 Remain Consistent P.9 Design with a Purpose P.10 Be Problem Free P.12 Allow Your Users to Complete Tasks without Interruptions P.13 Use Meaningful Labels, Signs & Symbols P.15 Make Actions Reversible P.17 Optimize Your Site & Reduce Latency P.18 Use Emotion, but Appropriately P.17 P.3

4 While these principles may seem obvious, the point is to put them into practice. In other words, design with these principles in mind. P.4

5 Understand 10 Principles to Ensure a Great User Experience on your Website Your Users & Support Their Goals 1The objective of user experience design is to create a memorable and Principle 1: Understand Your Users & Support their Goals efficient experience for the user before creating an efficient process for the computer. The process should also allow users to get more done in less time while acknowledging user goals and business goals. Whether it be lead generation, or memberships, every purpose of your website should be considered. Use the Right Defaults Know who comes to your website and why, and design with that in mind. Make a Good First Impression Design can give you credibility and create a memorable experience. Set the right expectations. Be Trustworthy Be transparent; follow through with your promises; don t pretend you can do something you can t do. P.5

6 BUSINESS LOGIC TECHNOLOGY FUNCTIONALITY PROTOTYPING TECHNOLOGY 2 OFFER BACKEND PROCESSES FRONTEND PROCESSES INTERACTION DESIGN PERFORMANCE RELEASE CANDIDATE UX SIMPLICITY INFORMATION ARCHITECTURE USABILITY ENGINEERING INTERFACE INFORMATION DESIGN BUSINESS CASE BUSINESS ANALYSIS BUSINESS PLAN MARKETING COMMUNICATIONS CONSISTENCY BRAND DESIGN STYLE GUIDE SURFACE DESIGN VISUAL DESIGN DEVELOPMENT LOOK & FEEL MARKETING BUSINESS DESIGN CORPORATE COMMUNICATION P.6

7 Make Your Interface Easy, Clear & Enjoyable to Use Principle 2: Make Your Interface Easy, Clear & Enjoyable to Use The typical user does t care about the brilliance of the software or the hardware engineering that went into creating their device. Don t make them learn or feel like they are doing any work. The ideal situation is picking up a device and using it right away; no manuals, no tutorials. Visual Hierarchy Should Match the Needs of the User There are different ways to create hierarchies; choose the one that best matches your users goal. Use simple elements of design (ie. size, color, placement, etc.) to help users navigate through information. Group Related Objects in Close Proximity The layout should not force the user to jump around when trying to complete a task. P.7

fold line 53 Section Section 4 Section 3 Section 2 Section 1 The 2014 Appnovation home page (www.appnovation.com) will be used to briefly describe visual hierarchy.

8 fold line 53 Section Section 4 Section 3 Section 2 Section 1 The 2014 Appnovation home page ( will be used to briefly describe visual hierarchy. A major factor to consider is what users see above the fold (area in the browser before scrolling). Online users can only digest whatever is viewable, therefore multiple elements can have a strong presence, or a supporting role. It s safe to say that the industry standard is to have the company s logo at the top left (linking to the home page), followed by the navigation menu. The way most cultures read (left to right), and the fact that it is at the top of the page, automatically makes the logo and navigation high on the hierarchy. The main graphic area can be considered the most important aspect on this website because of the size, graphics, call to action, and the fact that it is above the fold. Secondary information usually follows the information above the fold. Section 2 targets specific user groups in order to influence the way they can reach us; getting users to contact us is the primary goal of our website. This section is supported by client logos and social media; information used to instill trust and confidence to our brand. Next on the list is our tertiary information, creative content intended to keep the users on our site. Here we showcase featured projects, free resources, recent blog posts and news. Keeping in mind the fold, this section is broken into two, each with primary content and supporting elements. Lastly, our footer, a common element used for `SEO and assisting users navigate to specific areas of our site. The footer is the lowest on our hierarchy, but essential for many reasons. P.8

9 Remain Consistent Principle 3: Remain Consistent Keys to being consistent: Keep a clickable logo and link to the homepage in the same place on every page: Users will be confused if they have to look for the same element in different places when they navigate from one page to another. Keep navigation consistent (same location, same visual treatment): otherwise the experience feels disjointed, confusing, uncomfortable Use breadcrumb trails and/or you are here markers to indicate where the user currently is in relation to the rest of the site: helps in offloading users mental load Page labels should match naming conventions used in navigation: consistency leads to stability. P.9

10 Design with a Purpose P.10

Minimize the design to the necessary fundamentals Use bulleted lists and text formatting Make hyperlinked text user-friendly; make them obvious Use visuals strategically: use for communicating your

11 Principle 4: Design With a Purpose Every design has a purpose. Most things are purely functional; some things are purely aesthetic. But if elements aren t adding to the overall positivity of the experience, remove them. Minimize the design to the necessary fundamentals Use bulleted lists and text formatting Make hyperlinked text user-friendly; make them obvious Use visuals strategically: use for communicating your message, not the looks Color is a good way to differentiate content Hierarchy of information - what you want your audience to see first, second, third and so forth Typography - use it to your advantage. Use legible fonts at a good size, utilize bold and italic fonts properly, and make sure your headers are tagged properly fig. 4.1 Left to Right: Peer1 Hosting, Bay Area Rapid Transit website, NYCDOT Mobile Site, & Kobo Instant Reader App P.11

Be Problem Free 6 Principle 5: Be Problem Free The quickest way to inhibit enjoyment is to create frustration over simple interface and navigation issues.

12 Be Problem Free 6 Principle 5: Be Problem Free The quickest way to inhibit enjoyment is to create frustration over simple interface and navigation issues. It s a competitive marketplace out there, and if your system s interface has noticeable bugs you risk losing your users forever, no matter how good your content is. If possible, try to watch your users (both experts and novice) interacting with your site and observe their reaction. Watch for signs of confusion and frustration. Techniques such as A/B testing used by companies like Google and Amazon is very effective in identifying usability problems quickly. fig. 5.1 Using the Kobo Instant Reader App P.12

13 Allow Your Users to Complete Tasks without Interruptions Principle 6: Allow Your Users to Complete Tasks Without Interruptions Keep design, layout and content simple and free of unnecessary obstacles. Designs should create an obvious path for the user to complete a specific task with ease. Avoid designs and layouts that complicate the user s overall goal. An easy way to achieve simplicity is to eliminating non-essential user options, avoiding verbiage, long paragraphs, and properly use headings and bullet points. P.13

14 P.14

15 Use Meaningful Labels, Signs & Symbols 7Use clear language, labels and headlines to help the user find what they are Principle 7: Use Meaningful Labels, Signs & Symbols looking for with ease. Users should never feel lost on a page, rather, they should be aware of where they are within the overall experience at all times. Show the user where they came from and where they are going. This may not be easy as symbols have different meanings in different cultures. Keep in mind that symbols are about users, not the business. P.15

16 8 P.16

because they misunderstood the directions or mistyped

17 Make Actions Reversible Principle 8: Make Actions Reversible Ensure that if people make mistakes (either because they misunderstood the directions or mistyped or were misled by you), they are able to easily fix them. P.17

18 1 Optimize Your Site & Reduce Latency Principle 9: Optimize Your Site & Reduce Latency No one likes to wait. Do whatever you can to respond to people s requests quickly or else they ll feel like you aren t really listening. And if they really have to wait, provide feedback and explain the reason why they are waiting. You have a few seconds to impress your audience and build a relationship with them. Take too long and you might loose them. P.18

19 0 Use Emotion, but Appropriately 10 Principles to Ensure a Great User Experience on your Website Principle 8: Make Actions Reversible Don t Make Users Feel Manipulated. P.19

20 Thank you again for downloading this E-Book. If you would like to know what it takes to deliver your next web or mobile development project that ensures a great user experience, contact us today at contact@appnovation.com. We look forward to hearing from you soon! Proudly delivering quality projects to companies, organizations and government entities around the world. Here are just a few of the names you might recognize: P.20

1. You re boring your audience

1. You re boring your audience OK, so you ve convinced your users to visit your landing page. Or even better they ve signed up for your mailing list. That s great! Now that you have their attention, the