how to design websites for people who use search engines by shari thurow

#SMX #14D @sharithurow

How to Design Websites for People Who Use Search Engines

SEARCH ENGINE FRIENDLY WEB

DESIGN


§  FounderandSEODirectoratOmniMarketingInteractive.

§  AuthorofSearchEngineVisibilityandco-authorofWhenSearchMeetsWebUsability.

§  ColumnistforMarketingLandandSearchEngineLand.

§  SEOprofessionalsince1995,pioneeringsearch-enginefriendlywebsitedesign.

§ Webdesigner/developersince1995.

§ WebsiteusabilityandUXprofessionalsince2002.

§  Informationarchitect/scientistsince1989.

Introductions:


•  UserExperienceProfessionalsAssociation(UXPA)BoardMemberFormerlytheUsabilityProfessionalsAssociation

•  InformationArchitectureInstitute(IAI)BoardMemberandAdvisoryBoard

•  ASLIBJournalofInformationManagementEditorialAdvisoryBoard

•  BingAdsAccreditedProfessionalAdvisoryBoard


§ WhatisSearch-EngineFriendly?

§  SEO&UserExperience(UX)

§ UniversalRulesofSearch-EngineFriendlyDesign

§  SEOPrinciples

§ HomePages

§ Questions&Answers

§  ListsofTools&Resources

Session Goals:


Ifyoucheckoutsomeofthesamplewebpagesusedinthispresentation,theyarelikelytolookdifferent.Theprinciples&guidelinesthatthesescreenshotsillustratearerelevantlongafterasitehaschanged.


WHAT IS SEARCH-ENGINE FRIENDLY?


Search engine friendly design is not about… …optimizingordesigningawebsiteforsearchenginesONLY.

spam

technology-centered design


SEARCH-ENGINE

FRIENDLY DESIGN

Search engine friendly design is about … …optimizingordesigningforpeoplewhousesearchengines.

technology-centered design

user-centereddesign


…auser-friendlywebsitedesignthatenableswebsitesandcontenttobeeasilyfoundviathecrawler-basedsearchengines,othertypesofsearchengines,andindustry-relatedwebsites.

Inotherwords,itisawebsitethatismadeforusers

(searchers)butalsoaccommodatessearchengines.

Search engine friendly design is: 1

2


Importance of website design:

§ Primary: Endusers/sitevisitors/searchers/targetaudience

§ Secondary: Crawler-basedsearchengines/technologies Nicheandindustry-relatedsites


To remember about SEO:

§ SEOisoptimizingforpeoplewhousesearchengines.

§ Youcommunicateimportantcontenttosearchenginesbasedonhowwords(copy),graphicimages,andmultimediafilesare:– Labeled

–  Formatted– Placed


SEO & USER EXPERIENCE (UX)


UXHierarchyofNeeds@UXHowonTwitter

ElementsofUserExperiencehttp://www.jjg.net/elements/pdf/elements.pdf


Thefirstlawofe-commerceisthatifuserscannotfindthe

product,theycannotbuyiteither.”

-Dr.JakobNielsen,UsabilityGuruandAuthorhttp://www.nngroup.com/articles/usability-101-introduction-to-usability/

“


Findabilityprecedesusability.InthealphabetandontheWeb.Youcan’tusewhatyoucan'tfind.-PeterMorville,InformationArchitectAuthorofSearchPatterns&Intertwingled

“

“


PeterMorville’sUserExperienceHoneycomb

findable

desirable

useful

valuable

accessible

credible

usable

http://semanticstudios.com/user_experience_design/

findable


Browse:


Search:

Search Keyword(s) Results

(SERP)


Ask:

?


STAGE DESIGN/BUSINESSGOAL ROLEOFDESIGNER

-InterestedUser -SignUp-Acquisition-Selling

-Trial/BetaUser -PositiveFirstExperience-Teaching-Conversion

- Customer- PassionateCustomer -EngagementOverTime

-Enable&Support-Satisfaction

Adapted from Designing for Social Traction http://bokardo.com/talks/designing-for-social-traction.pdf


Inceptor’s Pyramid:

Whensearchersarriveonawebsitefromacommercialwebsearchengine,suchasGoogle,theyusuallylandonapageinthemiddleofthesite,notthehomepage.

TIP:Treatmostpagesonyourwebsiteasapointofentry.


To remember about SEO & UX:

§ Agreatuserexperienceincludesfindability.

– Peoplecan’tusewhattheycan’tfind.

– MakesureyourteamsdonotoverlookordismissthisfacetofUX.

§ Whenimplementinguser-centeredSEO,treatmostpagesonyourwebsiteasapointofentry.


Search-enginealgorithmschangeallofthetime.

Therefore,youshouldupdateyourwebsitetobesearch-enginefriendlyallofthetime.


5 UNIVERSAL RULES OF SEARCH-ENGINE FRIENDLY DESIGN


5 Universal Rules of Search-Engine Friendly Design:

1.  Easytoread

2.  Easytonavigate

3.  Easytofind

4.  Consistencyandclarityinlayout,design,interaction,andlabeling

5.  Quicktodownload


1.  Easytoread


3.  Easytofind

4.  Consistencyandclarity


5 Universal Rules of Search-Engine Friendly Design:

IMPORTANT:AlloftheserulesARErankingfactorsordirectlyAFFECTrankingfactors.


§  Legible

§ Readable

§  Scannable

§ Understandable

§  Textmakessenseinsearchlistings

1. Easy to read:


§  Techniques&RelevancyFactorshttp://searchengineland.com/bing-mobile-ranking-techniques-relevancy-factors-209418

§ GoogleQualityGuidelineshttps://support.google.com/webmasters/answer/66353

Readability is a ranking factor!


§  Legible

§ Readable

§  Scannable

§ Understandable

§  Textmakessenseinsearchlistings

1. Easy to read: Legibilityreferstohoweasyitistodistinguishoneletterfromanotherinatypeface.

Readabilityreferstohoweasyitistoread/comprehendwords,phrases,andblocksoftext.


Google’s Mobile Friendly Test:

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


§ Readerswithlimitedvision

§  Tinyscreens

§ Glareandpoorlighting

§  Low-qualitymonitors

Be aware of:


Is this text easy to read? …to scan? SearchEngineOptimizationisanimportantpartofanysearchenginemarketinginitiative.Somepeoplebelievethatsubmittingthesitetosearchenginesaloneissufficientingettingtop-10rankings.Thisisnottrue.Searchengine

submissiononlyannouncesyoursite'sexistencetothesearchengines.Togetagoodsearchengineranking,itisimportantthatyoucarryouttitletagoptimization,metatagsoptimization,andanchortextoptimizationofyour

websiteamongstotherSEOtechniques.You'llneedtooptimizethevisibletextofyoursitethroughSEOcopywriting

afterextensivekeywordphrasesearch.ItisalsoimportanttoboostyourGooglePageRankinordertogetagoodwebsiteranking.YoucanincreasePageRankofyoursitebybuildingyoursite'slinkpopularitythroughalinkbuilding

campaign.Alinkexchangecampaignwithgoodindustryrelevantsitesisthesimplestwaytogetseveralincominglinkstopromotion.Remember,searchenginepositioningisapowerfulmediaforyourwebsitepromotion.Whiletheabove

exampleseemslikeoverkill,thisisjusttoillustratehowyoucanaccommodateyourimportantkeywordphrasesby

carefullyrewordingthetextofyourwebpages.Ifyoufeelthatthestandardblue,underlinedhyperlinksappearuglyonyourwebsite,thenyoucanreformatitsHTMLmarkupcodetochangecolorofthetextandgetridoftheunderline

withoutlosingthepoweroftheanchortexts.

SearchEngineOptimizationisanimportantpartofanysearchenginemarketinginitiative.Somepeoplebelievethatsubmittingthesitetosearchenginesaloneissufficientingettingtop-10rankings.Thisisnottrue.Searchengine








SearchEngineOptimizationisanimportantpartofanysearchenginemarketinginitiative.Somepeoplebelievethatsubmittingthesitetosearchenginesaloneissufficientingettingtop-10rankings.Thisisnottrue.Searchengine









How about this fat footer?


§ Clickable/tappable

§ Distinguishable

§  Scannable

§  Predictable

§ Consistent

2. Easy to navigate:


Navigation usage is higher on mobile devices:

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


Google’s Mobile Friendly Test:

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


“Smallchildrenlikeminesweeping(passingthemousearoundthescreentoseewhat's

hidden)…


“…butteenagersdon’tlikeit…”


“…andadultshateit.”

JakobNielsen,Principal

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


§ Beforeusersarrive(informationscent)

§ Aftertheyarrive(orientation/placemaking)

3. Easy to find:


1

2


Contentshouldbeaccessiblewithin3clicksorlessfromthehomepage.


If this rule were true:

___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___

SiteMap ContentContent

___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___

Home SiteMap Content


§ Godirectlytotherelevantpage

§ Within7-8clicks,preferablyless,aslongas…

§  Pleasesee:–  Testingthe3-ClickRule

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

–  UserExperienceMythOrTruth:TheThree-Click(OrTap)Rulehttp://marketingland.com/user-experience-myth-truth-three-click-tap-rule-104760

Easy to find after arriving:


Before: After:

Frequently Asked Questions:


Accordions:


…onethingholdstrue:well-designed,easy-to-usenavigation

isimportantinestablishingcredibility,authority,andtrust.”

-JamesKalbachFromDesigningWebNavigation

“


§ Design/formatting

§  Interaction

§  Layout/placement

§  Labels

4. Consistency & clarity:


Peter Morville’s User Experience Honeycomb

findable

desirable

useful

valuable

accessible

credible

usable



§ Actualdownloadtime–machinespeed

§  Perceiveddownloadtime–humanspeed

5. Quick to download:


What Google measures:


1.  Easytoread


3.  Easytofind

4.  Consistencyandclarityinlayout,design,interaction,andlabels


5 Universal Rules of Website Design

To remember:


4 SEO PRINCIPLES


All search engines:

}Allcrawlers1.  Indextext2.  Followlinks

3.  Measurepopularity

4.  Accommodatesearchergoals&behaviors


All search engines:

}Rankingfactors1.  Indextext2.  Followlinks

3.  Measurepopularity

4.  Accommodatesearchergoals&behaviors


http://searchengineland.com/seotable

Periodic table of SEO factors:


Let’s simplify this:

Keywords,Content,&Labels

Accessibility&Navigation

SearcherGoals&Behaviors

LinkDevelopment&SocialSignals


KEYWORDS, CONTENT, & LABELS

SEO Principles


What kind of text?

§ Thewordsyourtargetaudienceistypingintosearchqueriesarecalledkeywordsorquerywords.

§ Yourwebsiteshouldhaveaconsistentlabelingsystemthatclearlycommunicates“aboutness”tobothhumansandtechnology.


Types of labels:

§ Content

§ Navigation

§ Document


Content heading:

§ PeopleusetheH1headingto:

– Getasenseofthepage’smaintopic

– Validateinformationscent


MobilefirstisNOTmobileonly.”-RalucaBudiu&KaraPernicehttps://www.nngroup.com/articles/mobile-first-not-mobile-only/

“


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

§  Titletags

§ Visible<body>copy

§  Textatthetopofawebpage

§  Inandaroundhypertextlinks

§ Domainandfilenames(accessibility&searchergoals)

For text-based documents:

§ Meta-tagcontent

§ Alternativetext

§ Domainandfilenames(descriptive)


To remember about keywords, labels, & copywriting:

§ Makesureyouplaceyourkeywordsintitles,visiblebodytext,anchortext,metatags,andalternativetext.

§ Remembertofocusmostofyoureffortsonprimarytext,notsecondarytext.

§ Createaclearandconsistentlabelingsystem.

§  Placeyourkeywordsprominentlyonyourpages.

§ Usekeywordsfrequentlyenoughonyourpagessothatcontentappearsfocused,butdon’toverdoit.Hint:Usethe5-SecondUsabilityTesthttps://articles.uie.com/five_second_test/


ACCESSIBILITY, ARCHITECTURE, & NAVIGATION

SEO Principles



findable

desirable

useful

valuable

accessible

credible

usable

accessible



Accessibility:

§ Humanusers,aswellastechnology,shouldhaveuser-friendlyaccesstoyourwebsite’scontent.

–  URLstructure

–  Websitenavigation

§ Websitesshouldbeaccessibletopeoplewithdisabilities(morethan10%ofthepopulation).


Web search engines follow links:

§  Searchenginefollowlinksfromonewebdocumenttoanother.

§ Howyourwebdocumentslinktoeachothercommunicates(tobothhumansandtechnology)howimportantyoubelieveyourcontentis.

§  Inotherwords,sitenavigationmatters!

§  Searchenginesandsearcherslookat:

–  Informationarchitecture

–  Sitenavigation(universal,global,local,contextual,supplemental)

–  Technicalarchitecture

–  URLstructure


SEO jargon:

Internal links = Site navigation


Thenavigationelementsofyourwebsiteprovide[bothhumansandtechnology]anunderstandingofyourorganizationandgivethemasenseofwheretheyarewithinthesitestructure.-LukeWroblewskiProductDirector,GoogleAdaptedfromSite-Seeing:AVisualApproachtoWebUsability

“

“


Global Utilities

Contextual

Loca

l

Supplemental

Where am I? Need help?

What’s related to this content?

Wha

t’s n

earb

y?

Site map

Types of website navigation:


Purpose of site navigation:

§  Thepurposeofsitenavigationistoenabletaskcompletion(a)effectivelyand(b)efficientlyforbothhumanusersandtechnology.

§ Answersthequestions:

–  WhereamI?(orientation/placemaking)

–  AmIintherightplace?(arrival)

–  WherecanIgo?(informationscent)

–  HowcanIgetthere?


Includes responsive & adaptive design menus:


Menus as global & local navigation:


§  Toomanynavigationoptions?Userswon’treadalloftheoptions.

§  Toofew?Errorsinselectionbecausenavigationlabelsarelessinformativeandspecific.

Be careful with complex menus:


AdaptedfromBrown,D.(2011).PrinciplesofInformationArchitecture.UIEVirtualSeminarspresentation.Availableat:https://aycl.uie.com/virtual_seminars/5_simple_principles_to_improve_your_information_architecture Schwartz,B.(2005).TheParadoxofChoice:WhyMoreisLess.NewYork:HarperCollins.

Principle of choices:


Global navigation – fat footers:

§  Ifyourwebsitelargelyconsistsofpageswithshortcontent,thenafatfooterisnotnecessary.

§  Ifyourwebsitelargelyconsistsofpageswithlongcontent,thenafatfooterishighlyrecommended.


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:


Contextual navigation:

§ Complementtheexistingnavigationsystemsbyaddingflexibilityandincreasedtimeonsite.

§ Whenusedexcessively,contextualnavigationcancreateclutterandconfusion.

§  Let’slookatsomeexamples….


Sibling Sibling

Contextual links example #1:

Cousin Cousin


Contextual links example #2:


One point of contextual linking is to avoid orphans & silos:

X Alignment One of the principles of design, alignment refers to lining up the top, bottom, sides, or middle of text or graphic elements on a page. Horizontal alignment includes: •  flush-left (also called left-justified or ragged right), •  flush-right (also called right-justified or ragged left), •  centered, and •  fully justified.


Supplemental navigation:

§  Sitemap

§  Siteindex

§ Guides

§  Sitesearch

TIP:Well-written,formattedguidesprovidecontextandcanbealink-developmentasset.


Types of website navigation formats:

§  Textlinks

§ Navigationbuttons

§  Imagemaps

§ Menus–  Dropdown

–  Flyout

–  Expanding/collapsing

§  Flash

§  Sliders

§ Carousels

§  Parallax


Ifasitenavigationschemeisnotsearch-enginefriendly,youshouldavoidusingitinyoursitedesign.


Types of text-based navigation:

§  Formalnavigation(global+local)

§  Location-basedbreadcrumblinks

§  “Inline”orembeddedtextlinks

§  Sitemaporsiteindex(supplemental)


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

Parent

Child


Spool,Jared.(2006).“WhyGoodContentMustSuck:DesigningfortheScentofInformation.”Availableat:https://www.uie.com/brainsparks/2006/09/26/webmaster-jam-presentation-online/

Inline or embedded text links provide context and scent:


Before:


After:


Don’t do this: SearchEngineOptimizationisanimportantpartofanysearchenginemarketinginitiative.Somepeoplebelievethatsubmittingthesitetosearchenginesaloneissufficientingettingtop-10rankings.Thisisnottrue.Searchengine









To remember about accessibility & navigation:

§ Alwaysuseatleasttwoformsofnavigationonyourwebsite:oneforyoursitevisitors(humans)andoneforsearchengines(technology).

§ Knowwhenandhowtousetextlinkseffectively:–  Type/format

–  Placement

–  Selection

§ Don’tassume…test.

§  TrytomaketheURLstoyourmostpopularpagesashuman-friendlyandtechnology-friendlyaspossible.

§ Usabilitycounts!


LINK DEVELOPMENT & SOCIAL SIGNALS

SEO Principles



findable

desirable

useful

valuable

accessible

credible

usable


useful

valuable


§ Numberoflinks

§ Qualityoflinks

§ Numberoftimespeopleclickonlinkstoyoursite

§ Howlongendusersvisityoursite

§ Howoftenpeoplereturntoyoursite

What is popularity?

}Linkpopularity


§ Signal=maybe

§ Directive=absolutely

§ Onegoalistogetmorefollowers/buildanaudience(qualitative)

§ IntermsofSEO,linkscanbeaby-productofgreatsocialcampaigns

Social media optimization (SMO):


§ Substantialanduniquecontent(iscontentlinkworthy?)

§ Howothersitesarelinkedtoyoursite(anchortext)

§ Socialsignals

§ Websiteusability

– Organization&placementofcontentassets

–  Clearlabels

–  Placementtosupporttaskcompletion

Factors that can affect link development:


§  Reference

§  FAQs,Q&As

§  Coupons

§  Articles

§  Checklists

§  Factsheets

§  Guides

Types of digital content assets:

§  Quizzes

§  Comparisons

§  Whitepapers

§  Tools

§  Infographics

§  Slideshows

§  Videos

§  Audiofiles

§  Spreadsheets

§  Presentations

§  Links&resources

§  Humor


To remember about link development & SMO:

§ Qualitytrumpsquantity.

§  Linkdevelopment=directive.Socialmedia=signal.

§ Yourwebsiteshouldcontainuser-friendlydigitalcontentassetsthatarenotorphanedorsiloed.

§  Learntooptimizeeachdigitalasset!

–  Labels

–  Linkprospectingandoutreach

–  Socialsharing

§  Linkdevelopmentisongoing(iterative).


SEARCHER GOALS & BEHAVIORS

SEO Principles


Remember – Go, Know, Do:

§ Go(Navigational)Searcherswanttogodirectlytoawebsite,orgotoaspecificpageonawebsite.

§ Know(Informational)Searcherswanttoknoworlearnmoreaboutatopic.

§ Do(Transactional)Searcherswanttodoorperformsomeweb-mediatedactivity.


HOME PAGES


§ Keyword-focusedtext(whenpossible)

§ Atleastonespider-friendlynavigationscheme

§  Linkstothemostimportantsectionsonyoursite

§ Visiblelinktoasitemaporsiteindex

§ Recommendedreading: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

§  Easytoread

§  Easytonavigate

§  Easytofind

§  Consistentandclearinlayout,design,interaction,&labels

§  Quicktodownload

In summary:

§  Keywords&labels

§  Accessibility&navigation

§  High-qualitylinkdevelopment

§  Accommodatesearchergoals&behaviors


Content is King. Context is the Kingdom.


Questions?

ShariThurow,FounderandSEODirectorOmniMarketingInteractive

[email protected]


LISTS OF TOOLS & RESOURCES


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

§  Multi-DeviceLayoutPatternsLukeWroblewskihttp://www.lukew.com/ff/entry.asp?1514

§  SearchPatternsLibrary:DesignforDiscoveryPeterMorvillehttp://searchpatterns.org/library.php

§  YahooDesignPatternLibraryhttps://developer.yahoo.com/ypatterns/

Online pattern libraries:


Recommended design books:


(Web) design book citations:

Brinck,T.,Gergle,D.,&Wood,S.D.(2001).UsabilityfortheWeb:DesigningWebSitesThatWork.SanFrancisco,CA:MorganKaufmann.Cooper,A.,Reimann,R.,&Cronin,D.(2007).AboutFace3:TheEssentialsofInteractionDesign.Indianapolis,IN:WileyPublishing,Inc.Hinman,R.(2012).TheMobileFrontier:AGuideforDesigningMobileExperiences. Brooklyn,NY:RosenfeldMedia.Kalbach,J.(2007).DesigningWebNavigation:OptimizingtheUserExperience.Sebastopol,CA:O'ReillyMedia,Inc.Lidwell,W.,Holden,K.,&Butler,J.(2010).UniversalPrinciplesofDesign,RevisedandUpdated:125WaystoEnhanceUsability,InfluencePerception,IncreaseAppeal,MakeBetterDesignDecisions,andTeachThroughDesign.Gloucester,MA:Macmillan.


(Web) design book citations:

Mullet,K.,&Sano,D.(1994).DesigningVisualInterfaces:CommunicationOrientedTechniques.MountainView,CA:PrenticeHall.Nielsen,J.,&Pernice,K.(2010).EyetrackingWebUsability.Berkeley,CA:PeachpitPress.Porter,J.(2010).DesigningfortheSocialWeb.Berkeley,CA:PeachpitPress.


Recommended search books:


Search book citations: Enge,E.,etal.(2012).TheArtofSEO.Sebastopol,CA:O'ReillyMedia,Inc.Hearst,M.(2009).SearchUserInterfaces.NewYork,NY:CambridgeUniversityPress.Morville,P.,&Callender,J.(2010).SearchPatterns:DesignforDiscovery.Indianapolis,IN:WileyPublishing,Inc.Pirolli,P.(2007).InformationForagingTheory:AdaptiveInteractionwithInformation.OxfordUniversityPress.Rosenfeld,L.(2011).SearchAnalyticsforYourSite:ConversationsWithYourCustomers.Brooklyn,NY:RosenfeldMedia.Thurow,S.,&Musica,N.(2009).WhenSearchMeetsWebUsability.Berkeley,CA:PeachpitPress.White,R.,&Roth,R.(2009).ExploratorySearch:BeyondtheQuery-ResponseParadigm(SynthesisLecturesonInformationConcepts,Retrieval&Services).SanRafael,CA:MorganandClaypoolPublishers.


SEE YOU AT THE NEXT #SMX

THANK YOU!