UX Tips: 9 Tactics to Build Your Website

Download UX Tips: 9 Tactics to Build Your Website

Post on 21-Jan-2018

101 views

Category:

Marketing

3 download

TRANSCRIPT

1UX Tips:9 Tactics to Better Bui ld Your Website Presented By: Hileman Group. All rights reservedHosted By:2AgendaH I L E M A N G R O U P Recommended process Difference between UX & UI What UX is and isnt Best practices Introductions Questions Key takeaways Toolbox3H I L E M A N G R O U P Recommended process Difference between UX & UI What UX is and isnt Best practices Introductions Questions Key takeaways Toolbox4Kyle ChandlerDirector of Marketing Services, Hileman GroupEmail: kchandler@hileman.biz | Twitter: @ProjectChandlerJoe IckesUX Designer, Hileman GroupEmail: jickes@hileman.biz | Twitter: @HilemanGroupIntroductionsH I L E M A N G R O U P5H I L E M A N G R O U P Recommended process Difference between UX & UI What UX is and isnt Best practices Introductions Questions Key takeaways Toolbox6What UX is and isntH I L E M A N G R O U PAs the Nielsen Norman Group defines it is encompassing all aspects of the end-users interaction with the company, its services, and its products.Usability.gov defines it as focusing on having a deep understanding of users, what they need, what they value, their abilities, and also their limitations.International Organization for Standardization defines it as persons perceptions and responses resulting from the use and or anticipated use of a product, system or service.USER EXPERIENCE ISUSER EXPERIENCE IS NOT JUST THE USER INTERFACE7H I L E M A N G R O U P Recommended process Difference between UX & UI What UX is and isnt Best practices Introductions Questions Key takeaways Toolbox8What UX is and isntH I L E M A N G R O U PSource: mediatemple.net9Difference between UX & UIH I L E M A N G R O U PInformation ArchitectureContent StrategyInteraction DesignUsabilityUser ResearchUser InterfaceUSER EXPERIENCEVisual DesignVisual PrototypeUSER INTERFACE10Source: uxdesign.cc11H I L E M A N G R O U P Recommended process Difference between UX & UI What UX is and isnt Introductions Best practices Questions Key takeaways Toolbox12Recommended processH I L E M A N G R O U PGet feedback directly from users of site on the current stateSTAKEHOLDER INTERVIEWSTesting users on a specific set of criteria to influence the direction of the new site/appUSER TESTINGA fictional character that demonstrates the characteristics of the target usersPERSONASAn inventory of the current website UX AUDITA review of competitors, based on usability, look & feel, etc.COMPETITIVE ANALYSIS13Recommended processH I L E M A N G R O U PList of new webpages displayed in a tree structure; used to determine content, hierarchy, location of information, and navigation throughout a product or experienceSITEMAPThe blueprint of a future website, used to show the functional elements of a website or page, typically used for planning a site's structure and functionalityWIREFRAMES14H I L E M A N G R O U P Recommended process Difference between UX & UI What UX is and isnt Best practices Introductions Questions Key takeaways Toolbox15Best practicesH I L E M A N G R O U PUnderstand the business goals & objectives1How UX can help with site overall | You have to know your audience161. Understand the business goals & objectivesH I L E M A N G R O U P1. How UX can help with site overall: A good UX design can raise a websites conversion rate between 200% to 400% (forbes.com) Companies with highly effective UX have increased their revenue by 37%, and top 10 UX leaders in America outperform the S&P with close to triple the returns (uxpassion.com) 90% of users reported stopped using an app due to poor performance, according to The App Attention Span Study2. You have to know your audience before you can create a site for them.17Best practicesH I L E M A N G R O U PContent is king in marketing AND user experience2Content or design first? | Ways to make content more effective | Content and marketing | Navigation18ContentH I L E M A N G R O U P192. Content Ways to make content more effectiveH I L E M A N G R O U P1. Use small digestible chunks of content and concise text with a scannable layout (bulleted lists, numbered lists, etc.).2. Use separate content headers and different levels of headers (h2, h3, h4, etc.), making sure there is an established hierarchy.3. Callout specific pieces of text in a paragraph using bold or italicized type.4. Content isn't text only; use high quality imagery, icons, and infographics.202. Content Content and marketingH I L E M A N G R O U POne of the most important aspects in content alignment within marketing is ensuring that the specific keywords/context of your content aligns not just to end users, but also to search trends. 212. Content NavigationH I L E M A N G R O U PYour website navigation and structure benefit both the end users' experience and search engines alike. Ensure page authority flows from your highest level pages to the deepest/lowest level pages Leverage a section landing page approach so that no content is ever more than 3 clicks away from the home page This approach ensures that the page authority will evenly flow from your home page to any page throughout the website Plus it allows for easy to understand section categories22Best practicesH I L E M A N G R O U PMobile friendliness is no longer an option, it is a requirement3Mobile and Google | Mobile on desktop | Desktop on mobile233. Mobile friendliness Mobile and GoogleH I L E M A N G R O U PIf Google likes mobile, so should you. In early 2015, Google rolled out what was called Mobilegeddon where they began penalizing non mobile-friendly websites from appearing on search queries on mobile devices This shift is truly pushing all brands to take a mobile first approach, ensuring their content is optimized for any device; especially as mobile device traffic officially broke above desktop, driving more than 56% of traffic to top sites243. Mobile friendliness Mobile on desktop & desktop on mobileH I L E M A N G R O U P1. Have a responsive solution to your desktop site.2. The desktop experience cannot be the exact same experience on mobile and vise versa.3. Remember, there are some things you can do on a desktop that you cant do on mobile.Source: designmodo.com25Best practicesH I L E M A N G R O U PLogo & brand identity4264. Logo & brand identityH I L E M A N G R O U PNielsen Norman Group says, Users are 89% more likely to remember logos shown in the traditional top-left position than logos placed on the right. 27Best practicesH I L E M A N G R O U PConsistency5285. Consistency with styling, headings, hierarchy, and language & toneH I L E M A N G R O U P1. UX designer, Anton Nikolov says, Consistent design is intuitive design. It means when users use your website or app, they follow a set of patterns established throughout the site.2. Visual consitency can be established through things like style guides and brand guidelines.Source: logicearth.com29Source: uxdesign.cc30Best practicesH I L E M A N G R O U PCleanliness631Source: earthhour.paris32Best practicesH I L E M A N G R O U P1. Keeping it clean with whitespaceSource: dropbox.com33Source: apple.com346. CleanlinessH I L E M A N G R O U P White space has been proven to increase comprehension up to 20%.- Fastcodesign.com35Best practicesH I L E M A N G R O U PDont hope end-users take action, give them easy calls-to-action7Intent | Clarity | Location367. Call-to-action IntentH I L E M A N G R O U P Industry thought leadership Blog posts Articles Brand content Awards and recognitions News and PR Community involvement Live events Virtual events Assessment tools Interactive quizzes Video Testimonials Case studies Specific brand content Targeted white papers Phone call Request a consultation Request a proposal / quote Web contactThroughout your website, you want to have clear and concise calls-to-action to help drive your end-users through the marketing funnel. However, keep in mind where they are in their own customer journey.377. Call-to-action Clarity & locationH I L E M A N G R O U P38Best practicesH I L E M A N G R O U PAttention spans are shrinking so should your page load times8End users attention spans | Search engine ranking signal398. Website load time End-users attention spans & search engine ranking signalH I L E M A N G R O U PSite and page load time not only affect how an end-user experiences your brand, but also your search engine rankings and, in turn, your overall traffic. Google has indicated site speed as one of the signals used by its algorithm to rank pages In addition, a slow page speed means that search engines can crawl fewer pages using their allocated crawl budget, which could negatively affect your indexation Page speed is also important to user experience, pages with a longer load time tend to have higher bounce rates and lower average time on page. Longer load times have also been shown to negatively affect conversions.40Best practicesH I L E M A N G R O U PPost-launch tracking & analysis9Heatmaps | User tracking videos | Google Analytics | Search engine rank tracking41Source: boagworld.com42439. Post-launch tracking & analysis Google Analytics & search engine rank trackingH I L E M A N G R O U P44H I L E M A N G R O U P Recommended process Difference between UX & UI What UX is and isnt Best practices Key takeaways Introductions Toolbox Questions45Key takeawaysH I L E M A N G R O U P Knowing your users is paramount to your success Content is KEY for any UX effort Mobile friendliness is needed for any site to reach its full potential The logo in the upper left corner of a website is standard Consistency makes a website that much easier to use White space allows the user to focus on the content There must be a goal to go along with your CTAs Dont let a slow website be the reason your users leave Once a website is launched, the work isnt done46H I L E M A N G R O U P Recommended process Difference between UX & UI What UX is and isnt Best practices Key takeaways Introductions Toolbox Questions47ToolboxH I L E M A N G R O U PS I T E M A P P I N GU S E R T E S T I N GW I R E F R A M I N G P R OTOT Y P I N G48H I L E M A N G R O U P Recommended process Difference between UX & UI What UX is and isnt Best practices Key takeaways Introductions Toolbox Questions