Applying information architecture to university web sites Kent State University April 26, 2007 Keith Instone  keith<curren...
Hi, I am Keith <ul><li>IBM > ibm.com > User experience > Information Architecture lead </li></ul><ul><li>Computer science ...
 
Overview <ul><li>About information architecture </li></ul><ul><ul><li>Stories from ibm.com </li></ul></ul><ul><ul><li>Appl...
What is information architecture? (from IA Institute) <ul><li>The structural design of shared information environments. </...
Elements of User Experience  jjg.net/elements
The best starting point re: IA for the web <ul><li>Intro: Defining IA, Practicing IA, User needs and behaviors </li></ul><...
Kent State IAKM <ul><li>Information Architecture </li></ul><ul><ul><li>Broad: information space design </li></ul></ul><ul>...
 
Why practicing information architecture (for any large organization) is hard Company Division /  Department /  Unit Compan...
Strategic and Tactical IA Big IA Strategic IA Helping the university get its act together What to do Little IA Tactical/De...
IBM stories    University examples (examples to explain concepts & foster discussion, not be critiques) <ul><li>Audience ...
#1 Audience views
 
Mixture of Specific-to and Relevant-for content for E&U Relevant-for Relevant-for Specific-to Specific-to Relevant-for Spe...
Mixture of Specific-to and Relevant-for links for E&U
University audiences: Relevant-for vs. Specific-to
Kent Audiences (Quick links) Current students Future students Faculty & staff Parents & visitors
Kent Audiences (Left nav links) Current students Future students Faculty & staff Parents & visitors
Housing: A common destination for several audiences (audience sub-sections) Faculty & staff Resources Housing top page  Fa...
Audience views: Discussion points <ul><li>Specific-to vs. Relevant-for </li></ul><ul><ul><li>What proportion do you have? ...
#2 Does anybody care about your org chart? (Or, how does it feel to air your dirty laundry in public on the web?)
 
 
IBM “all-services” org chart  Global Services  Systems  Software  Engineering services Centers  Business consulting Applic...
IBM “all-services” (regardless of org chart) Global Services  Systems  Software  Unified user experience (all IBM services...
 
 
 
 
 
 
Org chart: Discussion points <ul><li>What techniques do you use to fight org-chart-itis within universities? </li></ul><ul...
#3 What is possible when you centralize?  (Faceted finding)
Faceted browsing <ul><li>Interaction style where users filter a set of items by progressively selecting from only valid va...
Part of a trend: Filtering instead of Hierarchies <ul><li>Old days: Click-click-click on categories and finally get to the...
The pieces of the faceted browse flow Top page Middle pages Destination page
Pieces of the user interface Results Facet history Facet selection # Results
 
Faceted finding: Discussion points <ul><li>Any examples of existing university applications? </li></ul><ul><li>What user g...
#4 Kinda interesting so far, Keith, but we really need help with our  navigation ! <ul><li>Designing all pages as an entry...
“Stress test” questions (ca. 1997, more popular now with SEO) <ul><li>What is this page about? </li></ul><ul><li>What site...
 
 
 
Navigation Framework Global Local Content Contextual & Personalized Contextual & Personalized Global Breadcrumb Local
Global & Local Navigation <ul><li>Site identification, branding </li></ul><ul><li>Major sections </li></ul><ul><li>Utiliti...
 
 
Contextual & Personalized Navigation <ul><li>Specific to this page </li></ul><ul><li>Cuts across hierarchy (local navigati...
 
About the 3 Types of Breadcrumbs <ul><li>The term “breadcrumb” is used for several different concepts – causing confusion ...
Yahoo Directory: Everyone’s first exposure to breadcrumbs?
Yahoo Directory: @ means Transport Yahoo! uses the  @  for a  transport  link – it does not go deeper in the site hierarch...
 
 
Navigation concepts: Discussion points <ul><li>What template do you use to encourage people to design each page as an entr...
Final thoughts? <ul><li>Which IBM stories were most relevant to you? </li></ul><ul><li>What are the  other  important IA i...
All I really need to know I learned in  IA class … <ul><li>Share </li></ul><ul><li>Put things back where you found them </...
Thanks for your attention! <ul><li>Other stuff about IA, UX, navigation, breadcrumbs, faceted browsing: </li></ul><ul><li>...
Upcoming SlideShare
Loading in …5
×

My presentation at Kent State IAKM

3,089 views

Published on

An update to "Applying information architecture to university web sites" for Kent State, April 26, 2007.

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
3,089
On SlideShare
0
From Embeds
0
Number of Embeds
70
Actions
Shares
0
Downloads
61
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • My presentation at Kent State IAKM

    1. 1. Applying information architecture to university web sites Kent State University April 26, 2007 Keith Instone keith<current year>@instone.org © 2007 Keith Instone Blog item for this presentation: http://instone.org/ksu07
    2. 2. Hi, I am Keith <ul><li>IBM > ibm.com > User experience > Information Architecture lead </li></ul><ul><li>Computer science > Human-computer interaction > Hypertext > Web usability > Information architecture </li></ul><ul><li>Argus associates (Polar bear) – AEFA, Egreetings, E&Y, RipShot (?), Weather.com, … </li></ul><ul><li>User experience network </li></ul><ul><li>Telecommute to work from Toledo </li></ul><ul><li>BGSU Computer science researcher, ca. 1988-1998 (including working on bgsu.edu in the very early days of the web) </li></ul>
    3. 4. Overview <ul><li>About information architecture </li></ul><ul><ul><li>Stories from ibm.com </li></ul></ul><ul><ul><li>Applied to university web sites (esp. kent.edu) </li></ul></ul><ul><li>Theme: Site organization  User experience  Perception of the university </li></ul><ul><li>Practical: Navigation </li></ul><ul><li>Warning: a lot of “geeky IA stuff” </li></ul><ul><ul><li>Or, “deep and profound IA concepts”? </li></ul></ul><ul><li>Separate presentations on user experience, methods and deliverables </li></ul><ul><ul><li>But I welcome questions to connect to them </li></ul></ul>
    4. 5. What is information architecture? (from IA Institute) <ul><li>The structural design of shared information environments. </li></ul><ul><li>The art and science of organizing and labeling web sites, intranets, online communities and software to support usability and findability. </li></ul><ul><li>An emerging community of practice focused on bringing principles of design and architecture to the digital landscape. </li></ul><ul><li>Also: Information architect role – when you focus on organizing information within a set of broader activities (my definition) </li></ul>
    5. 6. Elements of User Experience jjg.net/elements
    6. 7. The best starting point re: IA for the web <ul><li>Intro: Defining IA, Practicing IA, User needs and behaviors </li></ul><ul><li>Principles: Organization, Labeling, Navigation, Search, Thesauri/CV/Metadata </li></ul><ul><li>Methodology: Research, Strategy, Design </li></ul><ul><li>Practice: Education, Ethics, IA Team, Tools/Software </li></ul><ul><li>Organizational IA: ROI, Business strategy, Enterprise IA </li></ul><ul><li>Case Studies: MSWeb, evolt </li></ul>
    7. 8. Kent State IAKM <ul><li>Information Architecture </li></ul><ul><ul><li>Broad: information space design </li></ul></ul><ul><ul><li>Narrow: web design and navigation (my focus today) </li></ul></ul><ul><li>Information Use </li></ul><ul><ul><li>Broad: user experience </li></ul></ul><ul><ul><li>Narrow: usability and evaluation </li></ul></ul><ul><li>Knowledge Management </li></ul><ul><ul><li>Sharing information  knowledge </li></ul></ul>
    8. 10. Why practicing information architecture (for any large organization) is hard Company Division / Department / Unit Company Division / Department / Unit Company Division / Department / Unit How customers need to do business with the company How students/parents/people need to interact with the university
    9. 11. Strategic and Tactical IA Big IA Strategic IA Helping the university get its act together What to do Little IA Tactical/Design IA Helping the university execute on its plan How to do it Magic moment: The issues are well-thought out, fully funded, the right teams are in place, the politics are over, …
    10. 12. IBM stories  University examples (examples to explain concepts & foster discussion, not be critiques) <ul><li>Audience views </li></ul><ul><ul><li>IBM story, university samples, discussion/Q&A </li></ul></ul><ul><li>Org chart-itis </li></ul><ul><ul><li>IBM story, university samples, discussion/Q&A </li></ul></ul><ul><li>Faceted finding </li></ul><ul><ul><li>IBM story, university samples, discussion/Q&A </li></ul></ul><ul><li>Navigation concepts </li></ul><ul><ul><li>IBM story, university samples, discussion/Q&A </li></ul></ul>
    11. 13. #1 Audience views
    12. 15. Mixture of Specific-to and Relevant-for content for E&U Relevant-for Relevant-for Specific-to Specific-to Relevant-for Specific-to
    13. 16. Mixture of Specific-to and Relevant-for links for E&U
    14. 17. University audiences: Relevant-for vs. Specific-to
    15. 18. Kent Audiences (Quick links) Current students Future students Faculty & staff Parents & visitors
    16. 19. Kent Audiences (Left nav links) Current students Future students Faculty & staff Parents & visitors
    17. 20. Housing: A common destination for several audiences (audience sub-sections) Faculty & staff Resources Housing top page Faculty & staff Housing Current students Resources Undergrad Housing Housing Housing Faculty & staff entry point
    18. 21. Audience views: Discussion points <ul><li>Specific-to vs. Relevant-for </li></ul><ul><ul><li>What proportion do you have? </li></ul></ul><ul><ul><li>How do you decide what is Relevant-for? </li></ul></ul><ul><ul><li>How do you help users know which to expect? </li></ul></ul><ul><li>Audiences </li></ul><ul><ul><li>How do you architect sub-sites for audiences? </li></ul></ul><ul><ul><li>How do audiences relate to the major categories (academics, athletics, admissions, …)? </li></ul></ul><ul><li>What is the impact on the user experience? </li></ul><ul><ul><li>And thus on the perception of the university? </li></ul></ul><ul><ul><li>Audience as page of links vs. a space for the audience </li></ul></ul><ul><li>Keep top of mind: Is this relevant-for this audience or specific-to it? Does it matter? </li></ul>
    19. 22. #2 Does anybody care about your org chart? (Or, how does it feel to air your dirty laundry in public on the web?)
    20. 25. IBM “all-services” org chart Global Services Systems Software Engineering services Centers Business consulting Application services IM services Lotus services Rational services Tivoli services WebSphere services Lab services Deep computing IT services Training & Education
    21. 26. IBM “all-services” (regardless of org chart) Global Services Systems Software Unified user experience (all IBM services) Engineering services Centers Business consulting Application services IM services Lotus services Rational services Tivoli services WebSphere services Lab services Deep computing IT services Training & Education Input content into shared environment Deliver integrated experience
    22. 33. Org chart: Discussion points <ul><li>What techniques do you use to fight org-chart-itis within universities? </li></ul><ul><ul><li>What is the impact on the user experience / perception of the university? Maybe “herding cats” is the “brand” you want to convey? (^: </li></ul></ul><ul><ul><li>When do you centralize the content and when do you link? When is it worth it to centralize and publish out? </li></ul></ul><ul><li>Any examples where the org chart was overcome for a quality user experience? </li></ul><ul><li>Any tips for at least getting each group to appear to be part of the same university? </li></ul><ul><li>Keep top of mind: Are we just exposing our org chart? How can we do better? How can we move / publish / syndicate the content into architectures that match what our users need? </li></ul>
    23. 34. #3 What is possible when you centralize? (Faceted finding)
    24. 35. Faceted browsing <ul><li>Interaction style where users filter a set of items by progressively selecting from only valid values of a faceted classification system </li></ul><ul><li>Facet values selected in any order the user wishes </li></ul><ul><li>Null results are never achieved </li></ul><ul><li>Leverages faceted classification schemes </li></ul><ul><li>“ Slow and steady wins the race” interaction (click-page-click-page) </li></ul><ul><li>Model: drill-down choices “naturally” reflect depth so far </li></ul><ul><li>Faceted finding = faceted search + faceted browse + faceted query </li></ul>
    25. 36. Part of a trend: Filtering instead of Hierarchies <ul><li>Old days: Click-click-click on categories and finally get to the goodies at the leaf nodes </li></ul><ul><li>Trend: One click, get a sample of results (“1-10 of 149”), select a category to get fewer results </li></ul>
    26. 37. The pieces of the faceted browse flow Top page Middle pages Destination page
    27. 38. Pieces of the user interface Results Facet history Facet selection # Results
    28. 40. Faceted finding: Discussion points <ul><li>Any examples of existing university applications? </li></ul><ul><li>What user goals does this appear to be promising for universities? </li></ul><ul><li>Any other favorite examples (non-university)? </li></ul><ul><li>Keep in mind: Is this worth centralizing? Do users need many ways to find the same information? Do they need to learn along the way? </li></ul>
    29. 41. #4 Kinda interesting so far, Keith, but we really need help with our navigation ! <ul><li>Designing all pages as an entry point </li></ul><ul><li>Navigation framework: global, local, contextual, personalized </li></ul>
    30. 42. “Stress test” questions (ca. 1997, more popular now with SEO) <ul><li>What is this page about? </li></ul><ul><li>What site is this? </li></ul><ul><li>What are the major sections of this site? Which one is this page under? </li></ul><ul><li>What is “up” 1 level from here? </li></ul><ul><li>How do I get to the home page of this site? </li></ul><ul><li>How might you get to this page from the site home page? </li></ul><ul><li>What does each group of links represent? </li></ul><ul><li>More details, sub-pages of this one </li></ul><ul><li>Nearby pages, within same section as this page </li></ul><ul><li>Pages on same site, but not as near (in other sections) </li></ul><ul><li>Off-site pages </li></ul>
    31. 46. Navigation Framework Global Local Content Contextual & Personalized Contextual & Personalized Global Breadcrumb Local
    32. 47. Global & Local Navigation <ul><li>Site identification, branding </li></ul><ul><li>Major sections </li></ul><ul><li>Utilities </li></ul><ul><li>Almost every page </li></ul><ul><li>Can (should?) change for sub-sites </li></ul><ul><li>Where-am-I indicators </li></ul><ul><li>Specific to this section of the site </li></ul><ul><li>Varies from section to section, but consistent (hopefully) </li></ul><ul><li>Parental, sibling, child relationships </li></ul><ul><li>Where-am-I indicators </li></ul>
    33. 50. Contextual & Personalized Navigation <ul><li>Specific to this page </li></ul><ul><li>Cuts across hierarchy (local navigation covers the stuff in the same bucket) </li></ul><ul><li>Hand-crafted and/or automated </li></ul><ul><li>Embedded in the content and/or given its own space on the screen </li></ul><ul><li>Like contextual but based on WHO you are </li></ul><ul><li>“ Recommendations” </li></ul><ul><li>Who do you think I am? </li></ul><ul><li>Why is this here? </li></ul><ul><li>What am I missing? </li></ul>
    34. 52. About the 3 Types of Breadcrumbs <ul><li>The term “breadcrumb” is used for several different concepts – causing confusion during design discussions </li></ul><ul><li>Location Breadcrumb – “You are here”, static </li></ul><ul><li>Path Breadcrumb – how you got here, dynamic </li></ul><ul><li>Attribute Breadcrumb – meta-information </li></ul>
    35. 53. Yahoo Directory: Everyone’s first exposure to breadcrumbs?
    36. 54. Yahoo Directory: @ means Transport Yahoo! uses the @ for a transport link – it does not go deeper in the site hierarchy (local) but instead leads to a completely new breadcrumb (contextual)
    37. 57. Navigation concepts: Discussion points <ul><li>What template do you use to encourage people to design each page as an entry point? </li></ul><ul><li>How have you balanced global and local navigation? </li></ul><ul><li>Do you have any personalized navigation? </li></ul><ul><li>Are breadcrumbs effective for your sites? </li></ul><ul><li>Keep in mind: Do you have a navigation framework that you can apply? How consistent does it need to be applied? When do you have sub-sites? </li></ul>
    38. 58. Final thoughts? <ul><li>Which IBM stories were most relevant to you? </li></ul><ul><li>What are the other important IA issues at Kent State? (I may have an IBM story that is similar) </li></ul><ul><li>What are your take-aways from this talk? (if any!) </li></ul><ul><li>… </li></ul>
    39. 59. All I really need to know I learned in IA class … <ul><li>Share </li></ul><ul><li>Put things back where you found them </li></ul><ul><li>Flush </li></ul><ul><li>Take a nap </li></ul><ul><li>Hold hands, watch out for traffic, stick together </li></ul>
    40. 60. Thanks for your attention! <ul><li>Other stuff about IA, UX, navigation, breadcrumbs, faceted browsing: </li></ul><ul><li>http://instone.org/ </li></ul>

    ×