search engine friendly web design smx east 2015 edition

#SMX #14D @sharithurow

Designing for people who search™

SEARCH-ENGINE FRIENDLY WEB DESIGN


• Author of Search Engine Visibility and co-author of When Search Meets

Web Usability.

• Columnist for Marketing Land and Search Engine Land.

• SEO professional since 1995, pioneering search-engine friendly website

design.

• Web designer/developer since 1995.

• Website usability and UX professional since 2002.

• Information architect/scientist since 1989.

Introductions:


• User Experience Professionals Association (UXPA)

Board Member

Formerly the Usability Professionals Association

• Information Architecture Institute (IAI)

Board Member and Advisory Board

• ASLIB Journal of Information Management

Editorial Advisory Board

• Bing Ads

Accredited Professional Advisory Board


• SEO and User Experience

• What is Search-Engine Friendly?

• Universal Rules of Web Design

• 4 SEO Principles

• Home Pages

• Questions and Answers

Session goals:


If you check out some of the sample web pages used in this

presentation, they are likely to look different.

The principles & guidelines that these screenshots illustrate

are relevant long after a site has changed.


SEO and User Experience (UX)


UX Hierarchy of Needs

@Uxhow on Twitter


The first law of e-commerce is that if users cannot find the product, they

cannot buy it either.

- Dr. Jakob Nielsen, Usability Guru and Author

http://www.nngroup.com/articles/usability-101-introduction-to-usability/


Findability precedes usability.

In the alphabet and on the Web.

You can’t use what you can't find.

- Peter Morville, Information Architect & Author of Ambient Findability and Search Patterns


findable

desirable

useful

valuable

accessible

credible

usable

Peter Morville’s User

Experience Honeycomb

findable


Browsing:


SearchKeyword(s)Results

(SERP)

Searching:


Asking:


ALGORITHM


“… A good way to solve problems is

to start with the big picture…

[because if you don’t understand the

big picture] you may solve the wrong

problem, or might not explore other—

possibly better—answers.”


What is Search-Engine Friendly?


spam

technology-centered

design

Search-engine optimization is NOT…

…optimizing a website for search engines only.


technology-centered

design

Search-engine optimization is…

…optimizing a website for people who use search engines.

user-

centered

design

SEARCH-

ENGINE

FRIENDLY

DESIGN


Search-engine friendly design is…

…a user-friendly website design that enables websites

to be easily found via the crawler-based search

engines, other types of search engines, and industry-

related websites.

In other words, it is a website that is made for users

but also accommodates search engines.

1

2


• Primary: End users/site visitors/searchers/target audience

• Secondary: Crawler-based search engines/technologies

Niche and industry-related sites

Importance of site design:

How words (copy), graphic images, and multimedia files are labeled,

formatted, and placed on web pages communicates the content that you

feel is important to both search engines and to site visitors.


Universal Rules of Web Design


1. Easy to read

2. Easy to navigate

3. Easy to find

4. Consistency and clarity in layout, design, and labeling

5. Quick to download

5 Universal Rules of Web Design:


Legible

Readable

Scannable

Understandable

Text makes sense in search listings

1. Easy to read:


• Techniques & Relevancy Factors

http://searchengineland.com/bing-mobile-ranking-techniques-relevancy-factors-209418

• Google Quality Guidelines

https://support.google.com/webmasters/answer/66353

Readability is a ranking factor!

http://searchengineland.com/bing-mobile-ranking-techniques-relevancy-factors-209418

https://support.google.com/webmasters/answer/66353


Google’s Mobile Friendly Test:




https://www.google.com/webmasters/tools/mobile-friendly/



Legibility

is how well users

see the letters.

Readability

refers to the ease with

which a user can scan

over paragraphs of type.


• Readers with limited vision

• Tiny screens

• Glare and poor lighting

• Low-quality monitors

Be aware of:


Is this text easy to read? …to scan?

Search Engine Optimization is an important part of any search engine marketing initiative. Some people believe that submitting the site to search

engines alone is sufficient in getting top-10 rankings. This is not true. Search engine submission only announces your site's existence to the

search engines. To get a good search engine ranking, it is important that you carry out title tag optimization, meta tags optimization, and anchor

text optimization of your website amongst other SEO techniques. You'll need to optimize the visible text of your site through SEO copywriting after

extensive keyword phrase search. It is also important to boost your Google PageRank in order to get a good website ranking. You can increase

PageRank of your site by building your site's link popularity through a link building campaign. A link exchange campaign with good industry

relevant sites is the simplest way to get several incoming links to promotion. Remember, search engine positioning is a powerful media for your

website promotion. While the above example seems like overkill, this is just to illustrate how you can accommodate your important keyword

phrases by carefully rewording the text of your web pages. If you feel that the standard blue, underlined hyperlinks appear ugly on your website,

then you can reformat its HTML markup code to change color of the text and get rid of the underline without losing the power of the anchor texts.






















How about this navigation footer?


Distinguishable

Scannable

Clickable/tappable

Predictable

Consistent

2. Easy to navigate:


Google’s Mobile Friendly Test:




Is this easy to navigate? Why or why not?

Search Featured States

Alabama Real Estate

Alaska Real Estate

Arizona Real Estate

View More States

Search Popular Metros

Atlanta Homes for Sale

Chicago Homes for Sale

Dallas Homes for Sale

View More Popular Metros

Search Popular Cities

Atlanta Homes for Sale

Boston Homes for Sale

Charlotte Homes for Sale

View More Popular Cities


Calls to action:





It’s not enjoyable to…move the pointer around a site (‘minesweeping’) in

hopes of finding something clickable.

-Nielsen, J. and Loranger , H. (2006). Prioritizing Web Usability, Pearson Education.


“Small children like minesweeping (passing the mouse around the screen to see what's

hidden)…


“…but teenagers don’t like it…”


“…and adults hate it.”

Jakob Nielsen, http://www.nngroup.com/articles/top-10-ia-mistakes/


• When searchers arrive on a website from a commercial web search engine,

such as Google, they usually land on a page in the middle of the site, not the

home page.

Inceptor’s Pyramid:


• Where am I? (orientation/placemaking)

• Am I in the right place? (arrival)

• Where can I go? (information scent)

Purpose of site navigation:


The purpose of site navigation is to enhance website effectiveness to

enable task completion for both humans and technology.

-adapted from Nielsen Norman Group


Consistency in navigation is important for task completion:


Before arriving

After arriving

3. Easy to find:


Searchers follow an information scent:




1


2


Another example:




1


2


It’s the same with social media:




1 2


• Go directly to the relevant page

• Within 7-8 clicks, preferably less, as long as…

• Graph available at:

http://www.uie.com/articles/three_click_rule/

• Also see: http://marketingland.com/user-experience-

myth-truth-three-click-tap-rule-104760

After arriving:

http://www.uie.com/articles/three_click_rule/

http://marketingland.com/user-experience-myth-truth-three-click-tap-rule-104760


Content should be accessible within 3 clicks or

less from the home page.


If this rule were true:




___ ___ ___

___ ___ ___

___ ___ ___

___ ___ ___

___ ___ ___

Site Map ContentContent

___ ___ ___

___ ___ ___

___ ___ ___

___ ___ ___

___ ___ ___

Home Site Map Content


• Based on 25M sessions across the web, the

most viewed area of the page is just above the

fold, at about 550 pixels, with just over 80%

viewership.

• See:

http://blog.chartbeat.com/2013/08/12/scroll-

behavior-across-the-web/

To scroll or not to scroll:

http://blog.chartbeat.com/2013/08/12/scroll-behavior-across-the-web/


• There is No Fold

http://www.lukew.com/ff/entry.asp?1946

People don’t scroll when:

http://www.lukew.com/ff/entry.asp?1946


Before: After:


…well-designed, easy-to-use navigation is important in establishing

credibility, authority, and trust.

-Kalbach, J. (2007). Designing Web Navigation. O’Reilly.


4. Consistency and clarity in design, layout, and labeling:

Communicates trust, reliability, and dependability

Contributes to cohesive brand and user experience

Contributes to ease & predictability of navigation (information scent)

Increases user satisfaction

Leads to more rankings…and conversions


…consistent interfaces can reduce errors and task completion times. It

can also reduce learning curves, and increase user satisfaction.

- http://guidelines.usability.gov/guidelines/109


The more users' expectations prove right, the more they will feel in

control of the system and the more they will like it.

Consistency is one of the most powerful usability principles: when things

always behave the same, users don't have to worry about what will

happen.

- http://www.nngroup.com/articles/top-10-mistakes-web-design/


5. Quick to download:

Actual download time – machine speed

Perceived download time – human speed


• Gender

• Time online

• Economic factors

• Perceived length of wait

• Attitude to delay (patient vs. impatient people)

• User expectations

• Type of task

• Uncertainty and information about the wait

Download time depends on context:

“Men prioritize download speed.”

“Women prioritize navigation.”

--Whitenton, K. (2010). Principles of Interface Design, p. 59.


75

“… perceptions of download waiting are found to be more reliable

than actual waits in predicting web site abandoning.”

“…delays near the start of the download are perceived as longer than

later in the process, and time pressure worsens the effect of download

waiting at earlier stages of delay.”

Dabholkar, P. and Sheng, X. (2008). Perceptions of download delays: relation to actual waits, web

site abandoning, and stage of delay. The Service Industries Journal 28 (10),1415-1429.


“If people cannot find what they want on a site, they will regard the

download time as slow.”

Perfetti, C. and Landesman, L. (2001). “The Truth About Download Time.”

At: http://www.uie.com/articles/download_time/

http://www.uie.com/articles/download_time/


What Google measures:


1. Easy to read

2. Easy to navigate

3. Easy to find

4. Consistency and clarity in layout, design, and labeling

5. Quick to download

To remember:

5 Universal Rules of Web Design


SEO Principles


1. Index text

2. Follow links

3. Measure popularity

4. Accommodate searcher goals and behaviors

Search engines:

} All crawlers


1. Index text

2. Follow links

3. Measure popularity

4. Accommodate searcher goals and behaviors

Search engines:

} Ranking factor


1. Index Text (Keywords & Labels)


• The words your target audience is typing into search queries are called

keywords or query words.

• Your website should have a labeling system that clearly communicates

‘aboutness’ to both humans and technology.

What kind of text?


• Content

• Navigation

• Document

Types of labels:


An image’s file name is a label:

http://www.mayoclinic.org/~/media/kcms/gbs/patient%20consumer/images/2013/11/15/17/37/ds00050_%20m

y00164_im01229_mcdc7_cataracts2_jpg.png

http://www.mayoclinic.org/~/media/kcms/gbs/patient consumer/images/2013/11/15/17/37/ds00050_ my00164_im01229_mcdc7_cataracts2_jpg.png


• Short but descriptive.

• Use natural word order (help-desk-software vs. help-software-desk)

• Use hyphens instead of underscores.

• All lowercase.

• 2 or less parameters (ideally, no-parameter URLs are best).

• No “funky” characters in URL (?, &, %, =, etc.)

• No trailing forward slashes at the end of a URL.

• Eliminate or minimize stop words.

• Proper file format.

URL guidelines:


For text-based documents:

PRIMARY TEXT

• Title tags

• Visible <body> copy

• Text at the top of a web page

• In and around hypertext links

• Domain and file names (accessibility)

SECONDARY TEXT

• Meta-tag content

• Alternative text

• Domain and file names (descriptive)

ALL search engines read and use to

determine relevancy.

SOME search engines read and use to

determine relevancy.


Keywords are dead.


• Make sure you place your keywords in titles, visible body text, anchor text,

meta tags, and alternative text.

• Remember to focus most of your efforts on primary text, not secondary text.

• Create a clear and consistent labeling system.

• Place your keywords prominently on your pages.

• Use keywords frequently enough on your pages so that page appears

focused, but don’t overdo it.

Hint: Use the 5-Second Usability Test

Keywords and labels summary:


2. Follow Links (Navigation & Accessibility)


• Search engine follow links from one web document to another.

• How your web documents link to each other communicates (to both humans

and technology) how important you believe your content is.

• In other words, navigation matters!

• Search engines and searchers look at:

Information architecture

Site navigation (global, local, contextual, supplemental)

URL structure

Search engines follow links:


The navigation elements of your website provide [both humans and

technology] an understanding of your organization and give them a sense

of where they are within the site structure.

Adapted from Wroblewski, L. (2002). Site Seeing: A Visual Approach to Web Usability. New York, NY: Hungry

Minds, Inc.


Types of site navigation:




Global

Utilities

Contextual

Loc

al

Supplemental

Where am I?

Need help?

What’s related tothis content?

What’s

nearb

y?

Site map


• Text links

• Navigation buttons

• Image maps

• Menus

Dropdown

Flyout

Expanding/collapsing

Types of site navigation formats:

• Flash

• Carousels

• Sliders

• Parallax


Responsive design menus:


Menus as global and local navigation:


Hamburger menus:


Too much navigation, and our audience is overwhelmed; too little, and

they are lost.

Adapted from Wroblewski, L. (2002). Site Seeing: A Visual Approach to Web Usability. New York, NY: Hungry

Minds, Inc.


Principle of Choices:

Adapted from Brown, D. (2011). Principles of Information Architecture. UIE Virtual Seminars presentation.

Schwartz, B. (2005). The Paradox of Choice: Why More is Less. New York: HarperCollins.


Challenge of multi-device design:


Scrolling contextual navigation:


If a site navigation scheme is not search-engine friendly,

you should avoid using it in your site design.


• Formal navigation (global + local)

• Location-based breadcrumb links

• “Inline” or embedded text links

• Site map (wayfinder) or site index

Types of text-based navigation:


For details, please read:

http://marketingland.com/breadcrumb-links-good-user-

experience-yes-97848

Parent

Child

http://marketingland.com/breadcrumb-links-good-user-experience-yes-97848


Inline or embedded text links provide context and scent:

Spool, Jared. (2006). “Why Good Content Must Suck: Designing for the Scent of Information.” Available at:

https://www.uie.com/brainsparks/2006/09/26/webmaster-jam-presentation-online/

https://www.uie.com/brainsparks/2006/09/26/webmaster-jam-presentation-online/


Before:


After:


Don’t do this:

Search Engine Optimization is an important part of any search engine marketing initiative. Some people

believe that submitting the site to search engines alone is sufficient in getting top-10 rankings. This is not true.

Search engine submission only announces your site's existence to the search engines. To get a good search

engine ranking, it is important that you carry out title tag optimization, meta tags optimization, and anchor text

optimization of your website amongst other SEO techniques. You'll need to optimize the visible text of your

site through SEO copywriting after extensive keyword phrase search. It is also important to boost your

Google PageRank in order to get a good website ranking. You can increase PageRank of your site by

building your site's link popularity through a link building campaign. A link exchange campaign with good

industry relevant sites is the simplest way to get several incoming links to promotion. Remember, search

engine positioning is a powerful media for your website promotion. While the above example seems like

overkill, this is just to illustrate how you can accommodate your important keyword phrases by carefully

rewording the text of your web pages. If you feel that the standard blue, underlined hyperlinks appear ugly on

your website, then you can reformat its HTML markup code to change color of the text and get rid of the

underline without losing the power of the anchor texts.


Example #1 of contextual links:

Sibling Sibling

Cousin Cousin


• Always use at least two forms of navigation on your website: one for your

site visitors (humans) and one for search engines (technology).

• Know when and how to use text links effectively.

Type/format

Placement

Selection

• Don’t assume…test.

• Try to make the URLs to your most popular pages as human-friendly and

technology-friendly as possible.

• Usability counts!

Navigation and accessibility summary:


3. Measure Popularity (Validation)


• Number of links

• Quality of links

• Number of times people click on links to your site

• How long end users visit your site

• How often people return to your site

What is popularity?

} Link popularity


• Signal = maybe

• Directive = absolutely

• One goal is to get more followers / build an audience (qualitative)

• In terms of SEO, links can be a by-product of great social campaigns

Social media optimization (SMO):


• Substantial and unique content (is content linkworthy?)

• How other sites are linked to your site (anchor text)

• Social signals

• Website usability

Organization of content assets

Labels

Placement to support task completion

Factors that affect link development (earning):


• Reference

• FAQs, Q&As

• Coupons

• Articles

• Checklists

• Fact sheets

• Guides

Types of digital content assets:

• Quizzes

• Comparisons

• White papers

• Tools

• Infographics

• Slideshows

• Videos

• Audio files

• Spreadsheets

• Presentations

• Links & resources


• Quality trumps quantity.

• Link development = directive. Social media = signal.

• Your website should contain user-friendly digital assets.

• Learn to optimize each digital asset!

Site architecture & navigation

Labels

Link prospecting and outreach

Social sharing

Link development summary:


4. Accommodate Searcher Behaviors


• Go (Navigational)

Searchers want to go directly to a website, or go to a

specific page on a website.

• Know (Informational)

Searchers want to know or learn more about a topic.

• Do (Transactional)

Searchers want to do or perform some web-mediated

activity.

Remember Go, Know, Do:


Home Pages


• Keyword-rich text (when possible)

• At least one spider-friendly navigation scheme

• Links to the most important sections on your site

• Visible link to a site map or site index

• Recommended reading:

http://www.nngroup.com/articles/113-design-guidelines-homepage-usability/

Items that should be on your home page:

http://www.nngroup.com/articles/113-design-guidelines-homepage-usability/


• Easy to read

• Easy to navigate

• Easy to find

• Consistent and clear in layout, design,

and labeling

• Quick to download

In summary:

• Keywords and labels

• Navigation and accessibility

(architecture and design)

• High-quality link development

• Accommodate searcher behaviors

For searchers: For search engines:


From one of my favorite usability books:

Reiss, E. (2012). Usable Usability: Simple Steps for

Making Stuff Better. John Wiley & Sons.


Content is King. Context is the Kingdom.


Remember:

SEO is optimizing for people who use search engines.


Questions?

Shari Thurow, Founder and SEO Director

Omni Marketing Interactive

[email protected]

This presentation is dedicated in loving

memory to a dear friend and colleague,

Dana Lookadoo.

www.danasfund.org

http://www.danasfund.org


THANK YOU!

SEE YOU @SMX WEST

SAN JOSE, CA

MARCH 1-3, 2016