Web Usability & SEO Site Architecture
-
Upload
charles-edmunds -
Category
Documents
-
view
222 -
download
0
Transcript of Web Usability & SEO Site Architecture
-
8/8/2019 Web Usability & SEO Site Architecture
1/54
web architecture
-
8/8/2019 Web Usability & SEO Site Architecture
2/54
What Ill be covering
InformationArchitecture
Usability
Findability
URL Structures
Site Architecture
Thematic Siloing
-
8/8/2019 Web Usability & SEO Site Architecture
3/54
The Pareto Principle(the 80/20 rule)
A successful web
strategy is aboutPRIORITIZATION:
focus your time on
the 20% responsible
for bringing you the
80%
-
8/8/2019 Web Usability & SEO Site Architecture
4/54
Information Whut?
The structural design of shared information environments
The combination of organization, labeling, search and navigationsystems within websites and intranets
The art and science of organizing and labeling web sites, intranets,online communities, and software to support findability and
usability
An emerging community of practice focused on bringing principlesof design and architecture to the digital landscape
-
8/8/2019 Web Usability & SEO Site Architecture
5/54
Why is IA Important?
Many DifferentApplications of
Information Architecture
Touches on UserExperience, Design, SEO...
Can Strongly InfluencePage Spidering
Its kinda Complex and abit Technical!
-
8/8/2019 Web Usability & SEO Site Architecture
6/54
Users Content
Context
IA
business goals, funding, politics, culture,
technology, resources & constraints
audience, tasks, needs,
information seeking behavior, experience
document & data types, content objects,
volume, existing structures
-
8/8/2019 Web Usability & SEO Site Architecture
7/54
Noteworthy...
IA is an essential factorinfluencing search spidering and
page indexing
IA encompasses labeling andnavigation
IA is directly related to usabilityand conversion rate
-
8/8/2019 Web Usability & SEO Site Architecture
8/54
Pop Quizz
True or False? Information
Architecture (IA)
and Usability are
the same thing?
-
8/8/2019 Web Usability & SEO Site Architecture
9/54
FALSE!
-
8/8/2019 Web Usability & SEO Site Architecture
10/54
Dont Make me Think!
Usability?!?
-
8/8/2019 Web Usability & SEO Site Architecture
11/54
1. Where the hell am I?
2. Wheres the stuff Im looking for...
3. I cant find what Im looking for...
4. Whats next?
5. Where should I click?
-
8/8/2019 Web Usability & SEO Site Architecture
12/54
Navigation
BasicsGlobal Navigation Area
Local Navigation Area
Local Content Area
-
8/8/2019 Web Usability & SEO Site Architecture
13/54
A Balancing Act
-
8/8/2019 Web Usability & SEO Site Architecture
14/54
Site Logo
Home
PrimaryNavigation
Sub-Navigation
Breadcrumbs
Language
Typography
Copywriting Whitespace
Search Box &
Forms
Error Recovery
Progress
Indicators
Call-to-Actions
-
8/8/2019 Web Usability & SEO Site Architecture
15/54
Lets look under the hood...
-
8/8/2019 Web Usability & SEO Site Architecture
16/54
expected at top left of the page clickable back to home
perfect example
-
8/8/2019 Web Usability & SEO Site Architecture
17/54
is expected first item in the main navigation
home is first &
shows its selected
-
8/8/2019 Web Usability & SEO Site Architecture
18/54
is expected (horizontal) limit the number of items selected status
simple &
clearly selected
-
8/8/2019 Web Usability & SEO Site Architecture
19/54
is expected (vertically) close to main navigation selected status
close to main nav
clearly selected
-
8/8/2019 Web Usability & SEO Site Architecture
20/54
indicates travel path show site / content hierarchy alternative way back
shows traveled path
plain & simple
-
8/8/2019 Web Usability & SEO Site Architecture
21/54
expected near main nav ISO standards (EN / FR) indicate current languages
top right
clear option
-
8/8/2019 Web Usability & SEO Site Architecture
22/54
difference between titles ¶graphs
Links should look like links use colors and fonts to show
importance
titles in orange
links in blue
meta information
in grey
-
8/8/2019 Web Usability & SEO Site Architecture
23/54
use keywords fortitles
match navigationand page titles
avoid duplicatecontent
group yourcontent wisely
keywords as
navigation
-
8/8/2019 Web Usability & SEO Site Architecture
24/54
use whitespace to createstructure
more screensize doesntmean more content
whitespace is SEXY!
PERFECT!
-
8/8/2019 Web Usability & SEO Site Architecture
25/54
expected top right average search query is 35 characters
top right
as expected
-
8/8/2019 Web Usability & SEO Site Architecture
26/54
default OS design is expected different length for each
input format pre-format input fields / data
obvious CTA
clearly shows
required fields
-
8/8/2019 Web Usability & SEO Site Architecture
27/54
show what theuser did wrong
indicate how theycan fix mistakes
stop punishingusers
use inline errorswith care
inline errors
-
8/8/2019 Web Usability & SEO Site Architecture
28/54
show a progress indicator people love making progress group your information
(obvious vs personal)
4 clear stepscurrent step
clear CTA
-
8/8/2019 Web Usability & SEO Site Architecture
29/54
people should know how tojoin
people should know where tojoin
consistan style for your CTAs
good color usage
-
8/8/2019 Web Usability & SEO Site Architecture
30/54
GREAT Usability...WEAK Findability
www.useit.com - Dr. Jakon Nielsen - usability expert
-
8/8/2019 Web Usability & SEO Site Architecture
31/54
Findability
the ease with whichinformation contained on
a website can be found,
both from outside the
website and by usersalready on the website
-
8/8/2019 Web Usability & SEO Site Architecture
32/54
In English please?
A website that is easy to find in the searchengines
A website thats easy to navigate
A website that has content organizedintuitively
Puts the user in the mix
A better term than search engineoptimization (SEO) ;)
-
8/8/2019 Web Usability & SEO Site Architecture
33/54
Bots vs. Users
The user is often leftout in SEO
Findability is lessmyopic than SEO
Findability and IA are
crucial parts of webproduction
-
8/8/2019 Web Usability & SEO Site Architecture
34/54
Web Accessibility 101
Text Equivalent for everynon-text element
Organize documents so theymay be read without
stylesheets
Use clearest and simplestlanguage
Ensure that dynamic contentis accessible
Identify the target of eachlink
-
8/8/2019 Web Usability & SEO Site Architecture
35/54
How does a Search
Engine see your site?
-
8/8/2019 Web Usability & SEO Site Architecture
36/54
People Matter... A LOT!
Balancing the needs ofa spider with the needs
of a visitor is a key
feature behind any
successful web strategy
Who do we create
websites for?
-
8/8/2019 Web Usability & SEO Site Architecture
37/54
Get to know
your
audience
-
8/8/2019 Web Usability & SEO Site Architecture
38/54
The Problem Solver Way
Information Needsare common tasks
and topics
How do I solve%problem%?
Who are...
Ask People who know the answers...
people that are facing the problems
-
8/8/2019 Web Usability & SEO Site Architecture
39/54
How is your website holding
together?
-
8/8/2019 Web Usability & SEO Site Architecture
40/54
URL Structures
Keep URLs as short aspossible
Keep session IDs in URL to aminimum (max 2)
Never use spaces, quotes,ampersands or other bad
ascii characters
Use hyphens to separatefields
URLs are the foundation forcrawling and indexing
-
8/8/2019 Web Usability & SEO Site Architecture
41/54
URL Characteristics
http://www.phpnuke.com/modules.php?name=PHP-nume_HOWTO&page=php-nuke-vs-xoops.html
http://www.joomla.org/content/view/2446/1/
http://drupal.org/node/65059
http://www.cmsmatrix.org/matrix/cms-matrix?
func=viewDetail;listingId=1050
http://www.wordpress.org/?p=2
http://www.phpnuke.com/modules.php?name=PHP-nume_HOWTO#http://www.phpnuke.com/modules.php?name=PHP-nume_HOWTO#http://www.phpnuke.com/modules.php?name=PHP-nume_HOWTO#http://www.phpnuke.com/modules.php?name=PHP-nume_HOWTO#http://www.phpnuke.com/modules.php?name=PHP-nume_HOWTO#http://www.phpnuke.com/modules.php?name=PHP-nume_HOWTO#http://www.phpnuke.com/modules.php?name=PHP-nume_HOWTO#http://www.phpnuke.com/modules.php?name=PHP-nume_HOWTO#http://www.phpnuke.com/modules.php?name=PHP-nume_HOWTO#http://www.phpnuke.com/modules.php?name=PHP-nume_HOWTO#http://www.phpnuke.com/modules.php?name=PHP-nume_HOWTO#http://www.phpnuke.com/modules.php?name=PHP-nume_HOWTO#http://www.phpnuke.com/modules.php?name=PHP-nume_HOWTO#http://www.phpnuke.com/modules.php?name=PHP-nume_HOWTO#http://www.phpnuke.com/modules.php?name=PHP-nume_HOWTO#http://www.phpnuke.com/modules.php?name=PHP-nume_HOWTO#http://www.phpnuke.com/modules.php?name=PHP-nume_HOWTO#http://www.phpnuke.com/modules.php?name=PHP-nume_HOWTO#http://www.phpnuke.com/modules.php?name=PHP-nume_HOWTO#http://www.phpnuke.com/modules.php?name=PHP-nume_HOWTO#http://www.phpnuke.com/modules.php?name=PHP-nume_HOWTO# -
8/8/2019 Web Usability & SEO Site Architecture
42/54
Benefits of Clean URLs
Its logical for users
Each link contains a keyword
Becomes an automatic keyword rich link
http://www.domain.com/topic-keyword/supporting-longtail-keyword
http://www.domain.com/topic-keyword/supporting-longtail-keywordhttp://www.domain.com/topic-keyword/supporting-longtail-keywordhttp://www.domain.com/topic-keyword/supporting-longtail-keyword -
8/8/2019 Web Usability & SEO Site Architecture
43/54
about
history
Homepage
management
awards
products
product 1
product 2
product 3
services
service 1
service 2
service 3
contact
Traditional Structure
-
8/8/2019 Web Usability & SEO Site Architecture
44/54
about
history
Homepage
management
awards
products
product 1
product 2
product 3
services
service 1
service 2
service 3
contact
inbound linking campaign
-
8/8/2019 Web Usability & SEO Site Architecture
45/54
stop confusing users
-
8/8/2019 Web Usability & SEO Site Architecture
46/54
thematic site siloing
-
8/8/2019 Web Usability & SEO Site Architecture
47/54
siloing and theming
Look at the site as a whole and to
compartmentalize it into... SILOS!
Start broad and work your way down
Link to the topics above and below,never across
-
8/8/2019 Web Usability & SEO Site Architecture
48/54
SEO Friendly Architecture?
narrow websitecontent into a singletheme
establish your themeand maintain focus
site
theme
content topic silos
related topic articles / content
each content topic silo supports the
site theme with related topics articles
-
8/8/2019 Web Usability & SEO Site Architecture
49/54
Lets examine the keyword hierarchy...
Market
Market Category
Market Segment
Theme
Niche
Micro-Niche Phrase
-
8/8/2019 Web Usability & SEO Site Architecture
50/54
red
keyword1
widgets theme
keyword2
keyword3
green yellow
Quality Incoming Links
Subject Matter Expert
Authority Site Quality Content
keyword1
keyword2
keyword3
keyword1
keyword2
keyword3
-
8/8/2019 Web Usability & SEO Site Architecture
51/54
siloingis an inbound
linking campaign
on your own site
-
8/8/2019 Web Usability & SEO Site Architecture
52/54
Take Aways
Follow the best practices of usability
Use keyword rich navigation structure
Build your site with a clear hierarchy
Use keyword rich clean URLs
Create an information-rich website
Implement thematic siloing
Offer a site map that is grouped into themes
-
8/8/2019 Web Usability & SEO Site Architecture
53/54
Now, about thosequestions...
-
8/8/2019 Web Usability & SEO Site Architecture
54/54
my 411...
Charles Edmunds
@edmundsflywww.edmundsfly.com
nerdec web consulting
www.nerdec.com
http://www.edmundsfly.com/http://www.edmundsfly.com/http://www.edmundsfly.com/