ux tips: 9 tactics to build your website
Post on 21-Jan-2018
110 Views
Preview:
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 isn’t
► 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 isn’t
► 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 isn’t
► 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
7H 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
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
11H I L E M A N G R O U P
► Recommended process
► Difference between UX & UI
► 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
14H 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
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
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 can’t 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
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
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 isn’t
► 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
46H 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 ► 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 isn’t
► Best practices ► Key takeaways
► Introductions
► Toolbox ► Questions
top related