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

Embed Size (px)

TRANSCRIPT

  • 1

    UX Tips:9 Tactics to Better Bui ld Your Website

    Presented By:

    Hileman Group. All rights reserved

    Hosted By:

  • 2

    AgendaH 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

    Toolbox

  • 3H 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

    Toolbox

  • 4

    Kyle Chandler

    Director of Marketing Services, Hileman GroupEmail: kchandler@hileman.biz | Twitter: @ProjectChandler

    Joe Ickes

    UX Designer, Hileman GroupEmail: jickes@hileman.biz | Twitter: @HilemanGroup

    IntroductionsH I L E M A N G R O U P

  • 5H 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

    Toolbox

  • 6

    What UX is and isntH I L E M A N G R O U P

    As 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 IS

    USER EXPERIENCE IS NOT JUST THE USER INTERFACE

  • 7H 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

    Toolbox

  • 8

    What UX is and isntH I L E M A N G R O U P

    Source: mediatemple.net

  • 9

    Difference between UX & UIH I L E M A N G R O U P

    Information Architecture

    Content Strategy

    Interaction Design

    Usability

    User Research

    User Interface

    USER EXPERIENCE

    Visual Design

    Visual Prototype

    USER INTERFACE

  • 10

    Source:

    uxdesign.cc

  • 11H 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

    Toolbox

  • 12

    Recommended processH I L E M A N G R O U P

    Get feedback directly from users of site on the current state

    STAKEHOLDER INTERVIEWS

    Testing users on a specific set of criteria to influence the direction of the new site/app

    USER TESTING

    A fictional character that demonstrates the characteristics of the target users

    PERSONAS

    An inventory of the current website

    UX AUDIT

    A review of competitors, based on usability, look & feel, etc.

    COMPETITIVE ANALYSIS

  • 13

    Recommended processH I L E M A N G R O U P

    List of new webpages displayed in a tree structure; used to determine content, hierarchy, location of information, and navigation throughout a product or experience

    SITEMAP

    The 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 functionality

    WIREFRAMES

  • 14H 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

    Toolbox

  • 15

    Best practicesH I L E M A N G R O U P

    Understand the business goals & objectives

    1

    How UX can help with site overall | You have to know your audience

  • 16

    1. Understand the business goals & objectivesH I L E M A N G R O U P

    1. 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 Study

    2. You have to know your audience before you can create a

    site for them.

  • 17

    Best practicesH I L E M A N G R O U P

    Content is king in marketing AND user experience

    2

    Content or design first? | Ways to make content more effective | Content and marketing |

    Navigation

  • 18

    ContentH I L E M A N G R O U P

  • 19

    2. Content Ways to make content more effectiveH I L E M A N G R O U P

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

  • 20

    2. Content Content and marketingH I L E M A N G R O U P

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

  • 21

    2. Content NavigationH I L E M A N G R O U P

    Your 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

    categories

  • 22

    Best practicesH I L E M A N G R O U P

    Mobile friendliness is no longer an option, it is a

    requirement

    3

    Mobile and Google | Mobile on desktop | Desktop on mobile

  • 23

    3. Mobile friendliness Mobile and GoogleH I L E M A N G R O U P

    If 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

    sites

  • 24

    3. Mobile friendliness Mobile on desktop & desktop on mobileH I L E M A N G R O U P

    1. 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.com

  • 25

    Best practicesH I L E M A N G R O U P

    Logo & brand identity

    4

  • 26

    4. Logo & brand identityH I L E M A N G R O U P

    Nielsen Norman Group says, Users are 89% more likely to remember logos shown in the traditional

    top-left position than logos placed on the right.

  • 27

    Best practicesH I L E M A N G R O U P

    Consistency

    5

  • 28

    5. Consistency with styling, headings, hierarchy, and language & toneH I L E M A N G R O U P

    1. 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.com

  • 29

    Source: uxdesign.cc

  • 30

    Best practicesH I L E M A N G R O U P

    Cleanliness

    6

  • 31

    Source: earthhour.paris

  • 32

    Best practicesH I L E M A N G R O U P

    1. Keeping it clean with whitespace

    Source: dropbox.com

  • 33

    Source: apple.com

  • 34

    6. CleanlinessH I L E M A N G R O U P

    White space has been proven to increase comprehension up to 20%.

    - Fastcodesign.com

  • 35

    Best practicesH I L E M A N G R O U P

    Dont hope end-users take action, give them easy calls-to-action

    7

    Intent | Clarity | Location

  • 36

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

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

  • 37

    7. Call-to-action Clarity & locationH I L E M A N G R O U P

  • 38

    Best practicesH I L E M A N G R O U P

    Attention spans are shrinking so should your page load times

    8

    End users attention spans | Search engine ranking signal

  • 39

    8. Website load time End-users attention spans & search engine ranking signal

    H I L E M A N G R O U P

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

  • 40

    Best practicesH I L E M A N G R O U P

    Post-launch tracking & analysis

    9

    Heatmaps | User tracking videos | Google Analytics | Search engine rank tracking

  • 41

    Source: boagworld.com

  • 42

  • 43

    9. Post-launch tracking & analysis Google Analytics & search engine rank tracking

    H I L E M A N G R O U P

  • 44H 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

  • 45

    Key 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 done

  • 46H 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

  • 47

    ToolboxH I L E M A N G R O U P

    S I T E M A P P I N G

    U S E R T E S T I N G

    W I R E F R A M I N G P R OTOT Y P I N G

  • 48H 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