Download - UX Tips: 9 Tactics to Build Your Website

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 isn’t

► Best practices

► Introductions

► Questions

► Key takeaways

► Toolbox

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




► Best practices

► Introductions

► Questions

► Key takeaways

► Toolbox

4

Kyle Chandler

Director of Marketing Services, Hileman GroupEmail: [email protected] | Twitter: @ProjectChandler

Joe Ickes

UX Designer, Hileman GroupEmail: [email protected] | Twitter: @HilemanGroup

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





► Best practices

► Introductions

► Questions

► Key takeaways

► Toolbox

6

What UX is and isn’tH 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-user’s 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 “person’s 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





► Best practices

► Introductions

► Questions

► Key takeaways

► Toolbox

8

What UX is and isn’tH 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




► What UX is and isn’t► 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





► 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 website’s 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


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


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 can’t do on mobile.

Source:

designmodo.com

25


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


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


Cleanliness

6

31

Source: earthhour.paris

32


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


Don’t 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


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


Post-launch tracking & analysis

9

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

41

Source: boagworld.com

43

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

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





► 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

Don’t let a slow website be the reason your users leave

Once a website is launched, the work isn’t done






► Introductions


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






► Introductions


Download - UX Tips: 9 Tactics to Build Your Website

Top Related