How to Design Websites for People Who Use Search Engines By Shari Thurow

#SMX #14D @sharithurowHow to Design Websites for People Who Use Search Engines

SEARCH ENGINE

FRIENDLY WEB DESIGN

#SMX #14D @sharithurow

Founder & SEO Director at Omni Marketing Interactive. Author of Search Engine Visibility & co-author of When

Search Meets Web Usability. Columnist for Marketing Land & Search Engine Land. SEO professional since 1995, pioneering search-engine

friendly website design. Web designer/developer since 1995. Website usability & UX professional since 2002. Information architect/scientist since 1989.

Introductions:


• User Experience Professionals Association (UXPA)Board MemberFormerly the Usability Professionals Association

• Information Architecture Institute (IAI)Board Member & Advisory Board

• ASLIB Journal of Information ManagementEditorial Advisory Board

• Bing Ads Accredited Professional Advisory Board


What is Search-Engine Friendly? SEO & User Experience (UX) Universal Rules of Search-Engine Friendly Design SEO Principles Home Pages Questions & Answers Lists of Tools & Resources

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.


WHAT IS SEARCH-ENGINE FRIENDLY?






Search engine friendly design is not about……optimizing or designing a website for search engines ONLY.

spam

technology-centered design


SEARCH-ENGINE

FRIENDLYDESIGN

Search engine friendly design is about ……optimizing or designing for people who use search engines.

technology-centered design

user-centered design


…a user-friendly website design that enables websites & content to be easily found via the crawler-based search engines, other types of search engines, & industry-related websites.

In other words, it is a website that is made primarily for users (searchers) but also accommodates search engines.

Search engine friendly design is:1

2


Importance of website design:

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

Secondary: Crawler-based search engines/technologies

Niche & industry-related sites


Importance of designing content:

You communicate important content to search engines based on how words (copy), graphic images, & multimedia files are:– Labeled– Formatted– Placed


To remember about SEO:

SEO is optimizing for people who use search engines.

You communicate important content to search engines based on how words (copy), graphic images, & multimedia files are:– Labeled– Formatted– Placed


SEO & USER EXPERIENCE (UX)


The first law of e-commerce is that if users cannot find the product, they cannot buy it either. ”- Dr. Jakob Nielsen, Usability Guru & Author http://www.nngroup.com/articles/usability-101-introduction-to-usability/

“


Findability precedes usability. In the alphabet & on the Web.You can’t use what you can't find. - Peter Morville, Information Architect Author of Search Patterns & Intertwingled

“

“


Peter Morville’s User Experience Honeycomb

findable

desirable

useful

valuable

accessible

credible

usable

http://semanticstudios.com/user_experience_design/

findable


Browse:


Search:

SearchKeyword(s)Results

(SERP)


Ask:

?


Inceptor’s Pyramid:

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.

TIP: Treat most pages on your website as a point of entry.


To remember about SEO & UX:

A great user experience includes findability. – People can’t use what they can’t find.– Make sure your teams do not overlook or dismiss this facet of

UX.

When implementing user-centered SEO, treat most pages on your website as a point of entry.


Search-engine algorithms change all of the time.Therefore, you should update your website to be search-engine friendly every time there is an algorithm change.


5 UNIVERSAL RULES OF SEARCH-ENGINE FRIENDLY DESIGN


5 Universal Rules of Search-Engine Friendly Design:1. Easy to read2. Easy to navigate3. Easy to find4. Consistency & clarity in layout, design, interaction, &

labeling5. Quick to download


1. Easy to read2. Easy to navigate3. Easy to find4. Consistency & clarity5. Quick to download

5 Universal Rules of Search-Engine Friendly Design:

IMPORTANT:

All of these rules ARE ranking factors or directly AFFECT ranking factors.


Legible Readable Understandable Scannable Text makes sense in search listings

1. Easy to read:


Techniques & Relevancy Factorshttp://searchengineland.com/bing-mobile-ranking-techniques-relevancy-factors-209418

Google Quality Guidelineshttps://support.google.com/webmasters/answer/66353

Readability is a ranking factor!


Legible Readable Understandable Scannable Text makes sense in search listings

1. Easy to read: Legibility refers to how easy it is to distinguish one letter from another in a typeface.

Readabilityrefers to how easy it is to read /comprehend words, phrases, & blocks of text.


Google’s Mobile Friendly Test:

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


Readers with limited vision Tiny screens Glare & 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, & 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 & get rid of the underline without losing the power of the anchor texts.

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, & 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 & get rid of the underline without losing the power of the anchor texts.

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, & 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 & get rid of the underline without losing the power of the anchor texts.


How about the text in this this fat footer?


Clickable/tappable Distinguishable Scannable Predictable Consistent & clear

2. Easy to navigate:


Navigation usage is higher on mobile devices:

Mobile first is NOT mobile onlyhttps://www.nngroup.com/articles/mobile-first-not-mobile-only/

https://www.nngroup.com/articles/mobile-first-not-mobile-only/

https://www.nngroup.com/articles/mobile-first-not-mobile-only/


Google’s Mobile Friendly Test:

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


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


“…but teenagers don’t like it…”


“…& adults hate it.” Jakob Nielsen, Principalhttp://www.nngroup.com/articles/top-10-ia-mistakes/


Before users arrive (information scent) After they arrive (orientation/placemaking)

3. Easy to find:


1

2


Content should be accessible within 3 clicks/taps or less from the home page.


If this rule were true:

___ ___ ______ ___ ______ ___ ______ ___ ______ ___ ___

Site Map ContentContent

___ ___ ______ ___ ______ ___ ______ ___ ______ ___ ___

Home Site Map Content


Go directly to the relevant page

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

Please see:– Testing the 3-Click Rule

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

– User Experience Myth Or Truth: The Three-Click (Or Tap) Rulehttp://marketingland.com/user-experience-myth-truth-three-click-tap-rule-104760

Content should be easy to find after arriving on site:


Before: After:

Frequently Asked Questions:


Accordions: Increase the readability of text

content.

Increase the effectiveness of click/tap signifiers.

Add location-based breadcrumb trail.

Add intro paragraph and/or content tagline.

Add the links Expand All | Collapse All.


…one thing holds true: well-designed, easy-to-use navigation is important in establishing credibility, authority, & trust. ”- James Kalbach From Designing Web Navigation

“


findable

desirable

useful

valuable

accessible

credible

usable


Design/formatting Interaction Layout/placement Labels

– Document labels– Content labels– Navigation labels

4. Consistency & clarity:


KISSKeep it simple stupid.

KICKKeep it clear kids.


Actual download time – machine speed

Perceived download time – human speed

5. Quick to download:


What Google measures:


1. Easy to read2. Easy to navigate3. Easy to find4. Consistency & clarity in layout, design, interaction, & labels5. Quick to download

5 Universal Rules of Search-Engine Friendly Design

To remember:


4 SEO PRINCIPLES


All search engines:

}All crawlers1. Index text2. Follow links3. Measure popularity4. Accommodate searcher goals & behaviors


All search engines:

}Ranking factors

1. Index text2. Follow links3. Measure popularity4. Accommodate searcher goals & behaviors


http://searchengineland.com/seotable

Periodic table of SEO factors:


Let’s simplify this:

Keywords, Content,& Labels

Accessibility & Navigation

Searcher Goals

& Behaviors

Link Development & Social Signals


KEYWORDS, CONTENT, & LABELSSEO Principles


What kind of text?

The words your target audience is typing into search queries are called keywords or query words.

Your website should have a consistent labeling system that clearly communicates “aboutness” to both humans & technology.


Types of labels: Content Navigation Document




Content heading:

People use the H1-formatted heading to:– Get a sense of the page’s main topic– Validate information scent



Moving keywords to the front of titles [headings] increases the likelihood that they get noticed. ”- Dr. Jakob Nielsen, Usability Guru & Author http://www.nngroup.com/articles/headings-pickup-lines/

“






An image’s file name is a label:

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


PRIMARY TEXT SECONDARY TEXT Title tags Visible <body> copy Text at the top of a web page In & around hypertext links Domain & file names

(accessibility & searcher goals)

For text-based documents:

Meta-tag content Alternative text Domain & file names

(descriptive)


To remember about keywords, labels, & copywriting: Make sure you place keyword phrases in important places. Remember to focus most of your efforts on primary text, not

secondary text. Create a clear & consistent labeling system − KICK! Place keyword phrases prominently on your pages. Use keywords frequently enough on your pages so that content

appears focused, but don’t overdo it.

Hint: Use the 5-Second Usability Testhttps://articles.uie.com/five_second_test/


ACCESSIBILITY, ARCHITECTURE, & NAVIGATION

SEO Principles


findable

desirable

useful

valuable

accessible

credible

usable

accessible


Accessibility: Human users, as well as technology, should have user-friendly access to

your website’s content.– URL structure– Website navigation

Websites should be accessible to people with disabilities (more than 10% of the population).


Web search engines follow links: Search engine follow links from one web document to another. How your web documents link to each other communicates (to both

humans & technology) how important you believe your content is. In other words, site navigation matters!


SEO jargon:

Internal links = Site navigation


The navigation elements of your website provide [both humans & technology] an understanding of your organization & give them a sense of where they are within the site structure. - Luke Wroblewski Product Director, GoogleAdapted from Site-Seeing: A Visual Approach to Web Usability

“

“


GlobalUtilities

Contextual

Loca

l

Supplemental

Where am I?Need help?

What’s related tothis content?

Wha

t’s n

earb

y?

Types of website navigation:

Site map


Purpose of site navigation: The purpose of site navigation is to enable efficient task

completion for both human users & technology. Answers the questions:

– Where am I? – Am I in the right place? (arrival) – Where can I go? (information scent)– How can I get there?


Includes responsive & adaptive design menus:


Menus as global & local navigation:



Too many navigation options? Users won’t read all of the options.

Too few? Errors in selection because navigation labels are less informative & specific.

Be careful with complex menus:


Adapted from Brown, D. (2011). Principles of Information Architecture. UIE Virtual Seminars presentation. Available at: https://aycl.uie.com/virtual_seminars/5_simple_principles_to_improve_your_information_architecture

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

Principle of choices:




Global navigation – fat footers: If your website largely consists of pages with short content, then a

fat footer is not necessary.

If your website largely consists of pages with long content, then a fat footer is highly recommended.


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

Reasons why this is a footer DON’T:


What we want to avoid or minimize: Orphaned or nearly orphaned pages Content silos


Orphans & silos communicate:

IMPORTANT





To identify orphans or near orphans:



Content silos: In information systems (IS), a silo is an isolated point or section in a

system where data is kept & segregated from other parts of the architecture.

Content silos are similar to a cul-de-sac, which is a dead-end street, often with a circular turnaround.


Content silos IMPEDE findability.


How to fix silos & orphans: Contextual navigation

– Some examples include alternatives, upsells, & shortcuts.– Curated navigation carries more ‘weight’ than aggregated navigation.– When used excessively, contextual navigation can create clutter & confusion.

Supplemental navigation– All websites should include a (wayfinder) site map or site index.– As a site gets larger, guides can be very useful.






Shortcuts: The goal of shortcuts is to help users find

information more easily & rapidly.




Supplemental navigation: Site map Site index Guides Site search

TIP: Well-written, formatted guides provide context & can be a digital content asset…one that is useful for link outreach.



TIP: Always communicate visited & unvisited link status in your site map & site index.


Website navigation formats: Text links Navigation buttons Image maps Menus

– Dropdown– Flyout– Expanding/collapsing

Flash Sliders Carousels Parallax


If a site navigation format is not search-engine friendly, you should avoid using it in your site design.



Types of text-based navigation: Formal navigation (global + local) Location-based breadcrumb links “Inline” or embedded text links Site map or site index

(supplemental)


For details, please read:http://marketingland.com/breadcrumb-links-good-user-experience-yes-97848

Home > Category > Subcategory > Article




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/

Inline or embedded text links provide context & scent:


Press release − before:


Press release − 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, & 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 & get rid of the underline without losing the power of the anchor texts.


To remember about accessibility & navigation: Include 5 types of website navigation on your site to ensure findability. Know when & how to use text links effectively. Avoid or minimize orphans, near orphans, & content silos. Try to make the URLs to your most popular pages as human-friendly &

technology-friendly as possible. Usability counts!


LINK DEVELOPMENT & SOCIAL SIGNALSSEO Principles


findable

desirable

useful

valuable

accessible

credible

usable

useful

valuable


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 & unique content (is content linkworthy?) How other sites are linked to your site (anchor text) Social signals Website usability

– Organization & placement of content assets– Clear labels– Placement to support task completion

Factors that can affect link development:


Reference FAQs, Q&As Coupons Articles Checklists Fact sheets Guides

Types of digital content assets: Quizzes Comparison charts White papers Tools Infographics Slideshows Videos

Audio files Spreadsheets Presentations Links & resources Humor


To remember about link development & SMO: Quality trumps quantity. Link development = directive. Social media = signal. Your website should contain user-friendly digital content assets that

are not orphaned or siloed.


SEARCHER GOALS & BEHAVIORSSEO Principles


Remember – Go, Know, Do: 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. (Quick Fact = Know Simple)

Do (Transactional) Searchers want to do or perform some web-mediated activity. (Visit-in-person)


HOME PAGES


Keyword-focused 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 appear on a home page:


5 Rules of Search-Friendly Design 4 SEO Principles Easy to read Easy to navigate Easy to find Consistent & clear in layout, design,

interaction, & labels Quick to download

In summary:

Keywords & labels Accessibility & navigation High-quality link development Accommodate searcher goals &

behaviors


Questions?

Shari Thurow, Founder & SEO DirectorOmni Marketing [email protected]


LISTS OF TOOLS & RESOURCES


113 Design Guidelines for Homepage UsabilityJakob Nielsenhttps://www.nngroup.com/articles/113-design-guidelines-homepage-usability/

Multi-Device Layout Patterns Luke Wroblewskihttp://www.lukew.com/ff/entry.asp?1514

Search Patterns Library: Design for DiscoveryPeter Morvillehttp://searchpatterns.org/library.php

Yahoo Design Pattern Libraryhttps://developer.yahoo.com/ypatterns/

Online pattern libraries:

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

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

http://searchpatterns.org/library.php

https://developer.yahoo.com/ypatterns/


Recommended design books:


(Web) design book citations:Brinck, T., Gergle, D., & Wood, S. D. (2001). Usability for the Web: Designing Web Sites That Work. San Francisco, CA: Morgan Kaufmann.

Cooper, A., Reimann, R., & Cronin, D. (2007). About Face 3: The Essentials of Interaction Design. Indianapolis, IN: Wiley Publishing, Inc.

Hinman, R. (2012). The Mobile Frontier: A Guide for Designing Mobile Experiences. Brooklyn, NY: Rosenfeld Media.

Kalbach, J. (2007). Designing Web Navigation: Optimizing the User Experience. Sebastopol, CA: O'Reilly Media, Inc.

Lidwell, W., Holden, K., & Butler, J. (2010). Universal Principles of Design, Revised & Updated: 125 Ways to Enhance Usability, Influence Perception, Increase Appeal, Make Better Design Decisions, & Teach Through Design. Gloucester, MA: Macmillan.


(Web) design book citations:Mullet, K., & Sano, D. (1994). Designing Visual Interfaces: Communication Oriented Techniques. Mountain View, CA: Prentice Hall.

Nielsen, J., & Pernice, K. (2010). Eyetracking Web Usability. Berkeley, CA: Peachpit Press.

Porter, J. (2010). Designing for the Social Web. Berkeley, CA: Peachpit Press.


Recommended search books:


Search book citations:Enge, E., et al. (2012). The Art of SEO. Sebastopol, CA: O'Reilly Media, Inc.

Hearst, M. (2009). Search User Interfaces. New York, NY: Cambridge University Press.

Morville, P., & Callender, J. (2010). Search Patterns: Design for Discovery. Indianapolis, IN: Wiley Publishing, Inc.

Pirolli, P. (2007). Information Foraging Theory: Adaptive Interaction with Information. Oxford University Press.

Rosenfeld, L. (2011). Search Analytics for Your Site: Conversations With Your Customers. Brooklyn, NY: Rosenfeld Media.

Thurow, S., & Musica, N. (2009). When Search Meets Web Usability. Berkeley, CA: Peachpit Press.


Search book citations (cont’d):

White, R. , & Roth, R. (2009). Exploratory Search: Beyond the Query-Response Paradigm (Synthesis Lectures on Information Concepts, Retrieval & Services). San Rafael, CA: Morgan & Claypool Publishers.

White, R. W. (2016). Interactions with Search Systems. Cambridge University Press.

#SMX #14D @sharithurowSEE YOU AT THE NEXT #SMX

THANK YOU!