54
1

What is Information Architecture and How Can It Help My Website?

Embed Size (px)

DESCRIPTION

This presentation discusses how Information Architecture (IA) is basically a blueprint for your website. We discuss how to develop an IA and how IA can help your website perform better by helping your users find content more easily and be more user friendly in general.

Citation preview

Page 1: What is Information Architecture and How Can It Help My Website?

1

Page 2: What is Information Architecture and How Can It Help My Website?

2

What is Information Architectureand How Can It Help My Website?

SORT 2011Jimmy Smith

PM for Seminary and Institute Websites

Page 3: What is Information Architecture and How Can It Help My Website?

3

Good Information ArchitectureLeads to…

• Increased usage of site• Greater findability– From external search engines– And internal search and navigation

• Improved conversation rates• Better overall site performance

Microsoft clipart

Page 4: What is Information Architecture and How Can It Help My Website?

4

Agenda

• What is Information Architecture (IA)?• Why is IA Important?• IA’s impact on Findability and SEO• Case Study: The Educator (si.lds.org)• Recommendations for the Road

Microsoft Clipart

What is IA? | Why IA is Important | Impact on SEO | Educator Case Study | Recommendations

Page 5: What is Information Architecture and How Can It Help My Website?

5

Information Architecture Defined

• Information architecture (IA), as it applies to the Internet, is the way in which content on a website is organized.

• The term “information architecture” is attributed to Richard Saul Wurman who called it “the creating of systemic, structural, and orderly principles to make something work–the thoughtful making of either artifact, or idea, or policy that informs because it is clear.”

What is IA? | Why IA is Important | Impact on SEO | Educator Case Study | Recommendations

Page 6: What is Information Architecture and How Can It Help My Website?

6

Information Architecture Illustrated

Website Main Topic

Topic 1

Topic 1A Topic 1B

Topic 2

Topic 2A Topic 2B

Topic 3

Topic 3A Topic 3B

What is IA? | Why IA is Important | Impact on SEO | Educator Case Study | Recommendations

Page 7: What is Information Architecture and How Can It Help My Website?

7

Think of Information Architecture as the Blueprint for your Website

Photo by Will Scullin

What is IA? | Why IA is Important | Impact on SEO | Educator Case Study | Recommendations

Page 8: What is Information Architecture and How Can It Help My Website?

8

IA = Blueprint:Everything (now/future) has a place

• Kitchen– Stove– Refrigerator– Sink

• Bedroom– Bed– Dresser

• Living Room– Couch– TV

• Bathroom– Shower– Sink– Toilet

Microsoft clipart

What is IA? | Why IA is Important | Impact on SEO | Educator Case Study | Recommendations

Page 9: What is Information Architecture and How Can It Help My Website?

9

You Wouldn’t Start ConstructionWithout a Blueprint

• “One of the biggest and most common mistakes made when building websites is when graphic designers go straight to [a] graphics program and start designing. This is like a construction company starting to construct a building without a blueprint…Bad information architecture will cripple your [website].”

• When Search Meets Web Usability, by Shari Thurow and Nick Musica, p. 137

What is IA? | Why IA is Important | Impact on SEO | Educator Case Study | Recommendations

Page 10: What is Information Architecture and How Can It Help My Website?

10

Job of the Information Architect

• To get users to the information, tool, or feature– Usually in the most direct and simple way

• IA helps users find information through…– Site navigation/menus– Information display (headlines, links, buttons, etc.)– Knowing where they are on a site – Knowing options of where they can go

• In absence of true Info Architect, who does it?– Product manager or others can take on IA role

What is IA? | Why IA is Important | Impact on SEO | Educator Case Study | Recommendations

Microsoft clipart

Page 11: What is Information Architecture and How Can It Help My Website?

11

Agenda

• What is Information Architecture (IA)?• Why is IA Important?• IA’s impact on Findability and SEO• Case Study: The Educator (si.lds.org)• Recommendations

Microsoft Clipart

What is IA? | Why IA is Important | Impact on SEO | Educator Case Study | Recommendations

Page 12: What is Information Architecture and How Can It Help My Website?

12

IA Is Vital to Usability, Findability

• Prerequisite to website success = audience finding content, features, and other info.

• IA contributes to usability through:– Findability• Organizing content so users can easily find it

– Search Engine Optimization (SEO)– Site navigation/menus• We’ll discuss in the case study

What is IA? | Why IA is Important | Impact on SEO | Educator Case Study | Recommendations

Microsoft clipart

Page 13: What is Information Architecture and How Can It Help My Website?

13

Other Benefits of IA:Clarity, Order, Accountability

• Enables clear communications• Helps get your house/website

in order– “Behold, mine house is a house

of order, saith the Lord God, and not a house of confusion.”• Doctrine and Covenants 132:8

• Provides sound footing for performance accountability

What is IA? | Why IA is Important | Impact on SEO | Educator Case Study | Recommendations

Page 14: What is Information Architecture and How Can It Help My Website?

14

Order and Accountability:Seminary Site Example

• A colleague once mentioned that the Seminary site only has about a dozen pages

• Google thinks the Seminary site has 2,620 pages• Need to work out this discrepancy for clear

communication and accountability

What is IA? | Why IA is Important | Impact on SEO | Educator Case Study | Recommendations

Page 15: What is Information Architecture and How Can It Help My Website?

15

Consequences of Poor IA

• Makes information hard to understand• Slows down users• Prevents users from achieving objectives• Reduces search engine visibility• Increases site abandonment• Reduces access to information– “do men light a candle, and put it

under a bushel” (Matt 5: 15)

What is IA? | Why IA is Important | Impact on SEO | Educator Case Study | Recommendations Microsoft clipart

Page 16: What is Information Architecture and How Can It Help My Website?

16

IA Problems Documented to Cause Half of All Usability Issues

• “Bad IA is now the greatest cause of task failures because it’s the stumbling block for getting anywhere on a site. Users try to find their way around a site, and if they’re particularly motivated, they might even try again if they fail. But if users are repeatedly led in circles or dumped into no-man’s land by weak search, they give up and leave for another site. That’s why deficiencies in your IA are costing you a lot.”

• see Jakob Nielsen, IA Task Failures Remain Costly: http://www.useit.com/alertbox/ia-failures.html

What is IA? | Why IA is Important | Impact on SEO | Educator Case Study | Recommendations

Microsoft clipart

Page 17: What is Information Architecture and How Can It Help My Website?

17

Agenda

• What is Information Architecture (IA)?• Why is IA Important?• IA’s impact on Findability and SEO• Case Study: The Educator (si.lds.org)• Recommendations

Microsoft Clipart

What is IA? | Why IA is Important | Impact on SEO | Educator Case Study | Recommendations

Page 18: What is Information Architecture and How Can It Help My Website?

18

Findability: Information Foraging Theory and Information Scent

Photo by Brenda Anderson

What is IA? | Why IA is Important | Impact on SEO | Educator Case Study | Recommendations

Page 19: What is Information Architecture and How Can It Help My Website?

19

Information Scent

• Analogy is a reference to animals seeking food• Comparison to how humans seek information online• Refers to the extent to which users can predict

what’s ahead (in a link or in an article) • In titles and links helps visitors find what they are

looking for • Users will feel duped if they don’t get sufficient

payoff from going down a path• Read more on Information Scent

– http://nowmediamarketing.com/usability/information-scent/

What is IA? | Why IA is Important | Impact on SEO | Educator Case Study | Recommendations

Page 20: What is Information Architecture and How Can It Help My Website?

20

Information Scent Says:You’re Getting Closer

• Helps visitors know that your site is fertile hunting grounds for the things they are looking for.

• Closer they get, stronger the information scent• Deception, intentional or not, leads to abandonment

What is IA? | Why IA is Important | Impact on SEO | Educator Case Study | Recommendations

Mormon

Mormon Church

Mormon Church History

Mormon Church

Meetings

Book of Mormon

Waters of Mormon

The Prophet Mormon

Mormon Beliefs

Mormon Beliefs on Sabbath

Mormon Beliefs on Marriage

Page 21: What is Information Architecture and How Can It Help My Website?

21

IA Impacts Search Engines’View of Your Site

• Search engines index (scan) your site hierarchically• Pages higher in the hierarchy are given more weight• SEs also make note of silos of info and relationships• Well architected site makes information more findable

Website Main Topic

Topic 1

Topic 1A Topic 1B

Topic 2

Topic 2A Topic 2B

Topic 3

Topic 3A Topic 3B

Most Weight

Least Weight

What is IA? | Why IA is Important | Impact on SEO | Educator Case Study | Recommendations

Page 22: What is Information Architecture and How Can It Help My Website?

22

IA Impacts Search Engines: e.g. Ranking ‘Mormon’ and Derivatives

Mormon

Mormon Church

Mormon Church History

Mormon Church

Meetings

Book of Mormon

Waters of Mormon

The Prophet Mormon

Mormon Beliefs

Mormon Beliefs on Sabbath

Mormon Beliefs on Marriage

Head Keywords

Tail Keywords

What is IA? | Why IA is Important | Impact on SEO | Educator Case Study | Recommendations

• Good IA will help you rank for…– Head (frequent, short, generic) keywords – Tail (long, specific) keyword phrases

• ~95% of search keywords

• The head and the tail compliment each other

Page 23: What is Information Architecture and How Can It Help My Website?

23

Sitemaps: Communicate Hierarchy, Weight, and What’s Available

• XML– Submit to search

engines• Vital for search engines

to understand your site

• HTML– For real users (SEs

crawls them too)• Vital for you and users

to understand your site

What is IA? | Why IA is Important | Impact on SEO | Educator Case Study | Recommendations

Page 24: What is Information Architecture and How Can It Help My Website?

24

Site Nav and Menus that Reflect IA Lead to Greater Findability

• Helps visitors know what’s available and find what they are looking for.

• Tells visitors where they are within the site• Tells visitors how to use the site by quickly

communicating features• Gives visitors a reference point– Orientation and way to others areas of site

• Site nav and menus communicate IA to SEs

What is IA? | Why IA is Important | Impact on SEO | Educator Case Study | Recommendations

Microsoft Clipart

Page 25: What is Information Architecture and How Can It Help My Website?

25

Agenda

• What is Information Architecture (IA)?• Why is IA Important?• IA’s impact on Findability and SEO• Case Study: The Educator (si.lds.org)• Recommendations

Microsoft Clipart

What is IA? | Why IA is Important | Impact on SEO | Educator Case Study | Recommendations

Page 26: What is Information Architecture and How Can It Help My Website?

26

Original Information Architecture

What is IA? | Why IA is Important | Impact on SEO | Educator Case Study | Recommendations

Page 27: What is Information Architecture and How Can It Help My Website?

27

Original IA/Menus in The Educator

What is IA? | Why IA is Important | Impact on SEO | Educator Case Study | Recommendations

Page 28: What is Information Architecture and How Can It Help My Website?

28

Decided to Conduct Usability Tests

• Concerns with old IA, but needed data

• “Testing reminds you that not everyone thinks the way you do, knows what you know, uses the Web the way you do.” (Krug p. 134)

• Usability tests not as hard as you might think– Discount Usability Tests

• http://nowmediamarketing.com/usability/discount-usability-tests/

What is IA? | Why IA is Important | Impact on SEO | Educator Case Study | Recommendations

Page 29: What is Information Architecture and How Can It Help My Website?

29

Usability Test Findings:Pattern of Poor IA/Poor Info Scent

• Check all main menu items.• Click item that seems closest fit.• Dead end. Use site search.• Search unproductive.• Rinse. Repeat.

What is IA? | Why IA is Important | Impact on SEO | Educator Case Study | Recommendations

Page 30: What is Information Architecture and How Can It Help My Website?

30

Positive Findings from Educator Usability Tests

• Good info scent, and good findability for…– “Prepare a Lesson”– “Talks for Teachers” • Found “Charted Course” talk quickly and easily

– “Potential Student Tracking”– “Attendance Report for Units”– “Newsroom”• In menu and on home page

What is IA? | Why IA is Important | Impact on SEO | Educator Case Study | Recommendations

Page 31: What is Information Architecture and How Can It Help My Website?

31

Creating a New IA

• Usability tests were compelling• Started with a card sort– We started with good old fashioned Post-it notes– Could use card sorting software

• Card sort inputs: Major tasks gleaned from– Keyword research– Popular pages (from web analytics reports)– Business priority features

Microsoft Clipart

Page 32: What is Information Architecture and How Can It Help My Website?

32

Photo by Jimmy Smith

What is IA? | Why IA is Important | Impact on SEO | Educator Case Study | Recommendations

Page 33: What is Information Architecture and How Can It Help My Website?

33

Photo by Jimmy Smith

What is IA? | Why IA is Important | Impact on SEO | Educator Case Study | Recommendations

Page 34: What is Information Architecture and How Can It Help My Website?

34

Card Sort Implications onTop Level Site Navigation

• Tried to limit lists to 5 – 7– “Seven, Plus or Minus Two” rule of thumb– cognitive psychologist George A. Miller

• Labels for the categories were key– Short (one or two words)– Enough, and accurate, information scent

1

1

1 2 3 4 5

2

1 2 3 4 5

3

1 2 3 4 5

4

1 2 3 4 5

5

1 2 3 4 5

What is IA? | Why IA is Important | Impact on SEO | Educator Case Study | Recommendations

Page 35: What is Information Architecture and How Can It Help My Website?

35

Next Step: Survey Real UsersQualtrics (lds.qualtrics.com)

What is IA? | Why IA is Important | Impact on SEO | Educator Case Study | Recommendations

Page 36: What is Information Architecture and How Can It Help My Website?

36

Survey results confirmed some decisions, caused us to rethink others

What is IA? | Why IA is Important | Impact on SEO | Educator Case Study | Recommendations

Page 37: What is Information Architecture and How Can It Help My Website?

37

What is IA? | Why IA is Important | Impact on SEO | Educator Case Study | Recommendations

New and Improved IA

Page 38: What is Information Architecture and How Can It Help My Website?

38

What is IA? | Why IA is Important | Impact on SEO | Educator Case Study | Recommendations

Page 39: What is Information Architecture and How Can It Help My Website?

39

What is IA? | Why IA is Important | Impact on SEO | Educator Case Study | Recommendations

Page 40: What is Information Architecture and How Can It Help My Website?

40

What is IA? | Why IA is Important | Impact on SEO | Educator Case Study | Recommendations

Page 41: What is Information Architecture and How Can It Help My Website?

41

What is IA? | Why IA is Important | Impact on SEO | Educator Case Study | Recommendations

Page 42: What is Information Architecture and How Can It Help My Website?

42

What is IA? | Why IA is Important | Impact on SEO | Educator Case Study | Recommendations

Page 43: What is Information Architecture and How Can It Help My Website?

43

Results of New IA on Educator

• More user friendly navigation/menus• Increased findability– Get what you need quickly and easily

• Improved home page– A place for featured content– Not a replica of the menu with long lists

• Improved site performance• Not perfect.– Still testing, measuring, improving.

What is IA? | Why IA is Important | Impact on SEO | Educator Case Study | Recommendations

Microsoft Clipart

Page 44: What is Information Architecture and How Can It Help My Website?

44

User Comments onNew IA for The Educator

• “Everything is so accessible, no layers to find what you're looking for... It is quick and easy to use and I love it!”

• “Outstanding... easy to find the material.”• “This is really a wonderful new format and makes

one alert and attentive to all that is offered by CES.”• “The newest S&I Website is so user friendly--

everything important is easily accessed…I am so happy with it!”

What is IA? | Why IA is Important | Impact on SEO | Educator Case Study | Recommendations

Microsoft Clipart

Page 45: What is Information Architecture and How Can It Help My Website?

45

User Comments onNew IA for The Educator

• “Great site! I find it easy to use and a helpful resource.”

• “This new site is amazing. It takes all the different places I use to have to go to and puts them all in one place. I now have it as my home page.”

• “I love how everything is under this site... I don't have to have a tab for CSTAR, a tab for paymentnet, a tab for PST, etc... It's all there... Thank you.”

• “The changes to the SI site make things much easier to find. Thanks.”

What is IA? | Why IA is Important | Impact on SEO | Educator Case Study | Recommendations

Microsoft Clipart

Page 46: What is Information Architecture and How Can It Help My Website?

46

Agenda

• What is Information Architecture (IA)?• Why is IA Important?• IA’s impact on Findability and SEO• Case Study: The Educator (si.lds.org)• Recommendations

Microsoft Clipart

What is IA? | Why IA is Important | Impact on SEO | Educator Case Study | Recommendations

Page 47: What is Information Architecture and How Can It Help My Website?

47

1. Every Website Should Architect Their Information

• Studies show only 25% of websites employ a information architect

• So what do the other 75% of us do?• At the Church, I recommend that the website

product manager take on the role of IA– with input from the business, IxD, Web analytics,

SEO team, and other usability specialists• Given a little training in IA principles, teams

can learn the basics and achieve great resultsWhat is IA? | Why IA is Important | Impact on SEO | Educator Case Study | Recommendations

Page 48: What is Information Architecture and How Can It Help My Website?

48

2. Base IA Decisions in Data

• Avoid Arbitrary IA decisions • Use data from Research and

Revelation– Web analytics– SEO– Usability

• Guesses, even educated guesses, have proven to be a 50/50 shot at best.

• A little data goes a long way

What is IA? | Why IA is Important | Impact on SEO | Educator Case Study | Recommendations

Microsoft Clipart

Page 49: What is Information Architecture and How Can It Help My Website?

49

3. Use Free Tools

• Qualtrics Web Surveys– Church has unlimited account

(lds.qualtrics.com)• Post-it Notes

– Not exactly free, but pretty close• OptimalSort (card sort software)

– Church has account• Omniture Test and Target

– A/B and multivariate testing• Usability test early and often

– Silverback is good and cheap

What is IA? | Why IA is Important | Impact on SEO | Educator Case Study | Recommendations

Microsoft Clipart

Page 50: What is Information Architecture and How Can It Help My Website?

50

4. Future Proof Your IA

• Try to envision future site changes and make the IA resilient• Will help site remain stable despite new content, new

features, new strategic direction, or simply growth over time• House blueprint analogy: anything you may get in the future

will need a home.• Studies show task-based IA works best for long-term longevity

– See Intranet Information Architecture by NN/g, http://www.nngroup.com/reports/intranet/ia

What is IA? | Why IA is Important | Impact on SEO | Educator Case Study | Recommendations

Microsoft Clipart

Page 51: What is Information Architecture and How Can It Help My Website?

51

5. Use Words Rich in Information Scent

• Headlines, hyperlinks, nav/menus…– Keep it short– Avoid buzz words and made up words– Understandable out of context– Predictable

• So users know what’s on the other side

– Front load keywords• “videos for classrooms” not “classroom videos”• “reimbursement policy” not "understanding the

reimbursement policy"

What is IA? | Why IA is Important | Impact on SEO | Educator Case Study | Recommendations

Page 52: What is Information Architecture and How Can It Help My Website?

52

6. IA “Before the DesignerTouches the Canvas”

• “Information architecture requires a significant amount of hours of research and discovery long before the designer touches the canvas with their interactive tools. Eliminating this step will create a website that is not targeted to any research or your audience, a site that’s not user-friendly and lacks strategy.”

• See Jeff Roberts from Moiré Marketing Blog, Information Architecture: The most important part of a website: http://www.moiremarketing.com/blog/information-architecture-most-important-part-website

Microsoft clipart

What is IA? | Why IA is Important | Impact on SEO | Educator Case Study | Recommendations

Page 53: What is Information Architecture and How Can It Help My Website?

53

7. IA should be reflected in navigation and URL structure

• Navigation reflects IA– Doesn’t necessarily have to perfectly align, but get

as close as possible• URL structure reflects IA– Mysite.com = highest level IA

• Mysite.com/level1 = main menu level of IA– Mysite.com/level1/level2 = second level of IA

• Sometimes an item is so popular, even though it is a level or two down in the IA, you may want to put it as a top level nav choice.

What is IA? | Why IA is Important | Impact on SEO | Educator Case Study | Recommendations

Page 54: What is Information Architecture and How Can It Help My Website?

54

The End

• Questions?

• Contact me, Jimmy Smith– [email protected]– 801-240-4264

• I’ll post these slides on my website– www.NowMediaMarketing.com