Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Great User Experiences       Start Here An approach to information architecture for                WordPress            Co...
Great User Experiences Start Here   An approach to information architecture for WordPress1. What is Information Architectu...
What is Information Architecture?Its a lofty term, but dont be intimidated!The Information Architecture Institute says IA ...
Defining Information Architecture• There are different definitions, but  Information Architecture is generally about  crea...
What does Information Architecture            look like?
But IA is more than sitediagrams andwireframes...Its about balancing content, contextand users.
Defining an IA Strategy:           Who are your visitors?• Before categorizing information, you have to  categorize site v...
Researching and defininguser groupsCreate a rough sketch of a few of yourtypical site visitors. Broadly determinetheir goa...
Developing an IA Strategy:              Defining your goals• Primary audience                • Secondary audience• Audienc...
Defining an IA Strategy:   Creating and structuring headings• Gather your data sheets and research into site  goals, and u...
Defining an IA Strategy:      Grouping content areas logically• Group content according to how your site visitors use and ...
A Website Structure ExampleThe site navigational structure is really based around serving user goals.In this case the user...
Defining an IA Strategy:              Build a site map• Create a tree structure for your site based on user  profiles and ...
Defining an IA Strategy:Create wireframes for pages and posts• Its not just the menu structure that provides  excellent na...
Default WordPress wireframe
A Detailed WireframeThis detail might be good for a home page or another major page. Amore basic sketch would probably do ...
Mobile WireframesThe mobile experience of your site should be similar to the desktopversion, but optimized for the mobile ...
Creating IA in WordPress:   Understanding categories and tags• There are built-in taxonomies for WordPress  blogs• WordPre...
Creating IA in WordPress:               Breadcrumbs or not?• Breadcrumbs offer a trail that takes you back to where you we...
Creating IA in WordPress:   Using taxonomies to classify posts• You can create custom taxonomies (other than  "category" a...
Adding Custom TaxonomiesAdding custom taxonomies using Custom Post Type UI
Creating IA in WordPress:             Custom Post Types• Why have anything other than categories and tags?• Custom post ty...
Creating IA in WordPress:             Custom Post Types• You can create custom post types using plugins such as  Custom Po...
Adding Custom Post Types
Creating IA in WordPress:             Using custom search• Search isnt the solution to poor site architecture.• But good, ...
Creating IA in WordPress: Linking to related and relevant posts• Its a great idea to give people relevant  information and...
nRelate Plugin
Some Common Problems• Determining what taxonomies are parents and  children. For instance, CLOTHES>SHOES>SIZES  is right; ...
Q&A• Contact me: david.hamilton@kobayashi.ca                     • Twitter: @ko_davidh
Upcoming SlideShare
Loading in …5
×

Great User Experiences Start Here: An approach to information architecture for WordPress

907 views

Published on

Before you start coding there’s an important step for every website project: this is, of course, Information Architecture.

Often poorly understood and seldom given the attention it deserves, IA is, in fact the foundation of every great website. WordPress comes with a built-in Information Architecture that includes basic building blocks with which most users are familiar: pages and posts, categories and tags. But it also features custom content types (or post types), drag and drop menus, and custom taxonomies, which all help categorize information and make it easier for end-users to find.

This presentation will offer a foundation for understanding how IA can help meet site goals through practical examples of how to resolve site architecture problems.

The presentation is largely high-level, and will be understandable to attendees with only a basic knowledge of WordPress.

About David Hamilton
I’m a blogger, content strategist, and journalist. My work has appeared in Canadian publications including the National Post, and trade magazines like the Web Host Industry Review. I recently began working for Toronto digital marketing agency Kobayashi Online, where my day revolves around the creation of exciting content for organizations.

Published in: Technology, Education
  • Be the first to comment

  • Be the first to like this

Great User Experiences Start Here: An approach to information architecture for WordPress

  1. 1. Great User Experiences Start Here An approach to information architecture for WordPress Contact me: david.hamilton@kobayashi.ca Twitter: @ko_davidh
  2. 2. Great User Experiences Start Here An approach to information architecture for WordPress1. What is Information Architecture? And why is it important for user experiences?2. How to develop an IA strategy3. Plugins that make IA easier4. Some common IA problems and how to deal with them5. Q&A
  3. 3. What is Information Architecture?Its a lofty term, but dont be intimidated!The Information Architecture Institute says IA is: [T]he art and science of organizing and labeling websites, intranets, online communities and software to support usability.
  4. 4. Defining Information Architecture• There are different definitions, but Information Architecture is generally about creating the necessary structures and pathways for site visitors to access the information they want.• Great IA doesnt always draw attention to itself unless its way off. When done right, its almost transparent.
  5. 5. What does Information Architecture look like?
  6. 6. But IA is more than sitediagrams andwireframes...Its about balancing content, contextand users.
  7. 7. Defining an IA Strategy: Who are your visitors?• Before categorizing information, you have to categorize site visitors.• Come up with questions to ask real or hypothetical site visitors to create "Data Sheets" of your typical demographics.• If you have an existing site, find out what they like and what they dont like, and if anythings extraneous.• Try to understand their goals, tastes, political beliefs, accessibility requirements, and anything else theyll need from your site.
  8. 8. Researching and defininguser groupsCreate a rough sketch of a few of yourtypical site visitors. Broadly determinetheir goals, how they use your site,and what appeals to them.For instance, who are the peoplecoming to your comic book storewebsite?
  9. 9. Developing an IA Strategy: Defining your goals• Primary audience • Secondary audience• Audience: Casual comic book • Audience: Die-hard comic fans and those new to comic book fans. books • Goals: Keep regular• Goals: Provide a friendly customers engaged and welcome to your store and give them the information make them feel valued; they need to become bigger keep them updated on store fans. events and sales.• Requirements: Store location • Requirements: Let regular and hours; Up-to-date "New customers post guest blogs; Releases" section; Blog posts Allow people to sign up for geared towards a general but email-based event and sale enthusiastic audience. notices; Allow product reviews.
  10. 10. Defining an IA Strategy: Creating and structuring headings• Gather your data sheets and research into site goals, and user needs, and come up with possible content headings.• These content headings (or content areas) could be pages, sidebars, blog posts, blog post categories, product categories, FAQs, or anything else - even parts of pages.• The important thing is that the content they contain enhances the user experience.• You will refine these headings and figure out where they fit within a sites pages and within its structure.
  11. 11. Defining an IA Strategy: Grouping content areas logically• Group content according to how your site visitors use and understand them.• Taxonomy is the science of categorizing things. When we talk about taxonomies, we often think about how things are grouped. In WordPress, taxonomies are used to group related posts.• Organize taxonomies to provide more than one way to information.• Use sorting exercises to categorize content (cards, focus groups, etc.).• When it comes to using tags to organize information, come up with terms (or a controlled vocabulary) that makes sense to visitors. ie. decide when youll use the term "comic book" and "graphic novel" and "illustrated novel" - these terms all have different connotations.
  12. 12. A Website Structure ExampleThe site navigational structure is really based around serving user goals.In this case the user profiles are of different people who are part of auniversity community (Administrators, Students, Donors, Alumni, etc.).
  13. 13. Defining an IA Strategy: Build a site map• Create a tree structure for your site based on user profiles and the logical grouping of pages.• Youll likely use the tree structure to create the menu structure, which can be recreated using WordPress drag-and-drop menus.• Dont send visitors down a rabbit hole.• Strike a balance between having a reasonable number of categories without having too many sub-categories and navigation levels (sub- categories of sub-categories).
  14. 14. Defining an IA Strategy:Create wireframes for pages and posts• Its not just the menu structure that provides excellent navigation; the placement of information on pages makes relevant information accessible.• Use the Crazyegg Heatmap Tracking plugin to show where on the page people click.• You can create wireframes for key site pages, as well as for posts within certain categories, and post archives.
  15. 15. Default WordPress wireframe
  16. 16. A Detailed WireframeThis detail might be good for a home page or another major page. Amore basic sketch would probably do for other pages.
  17. 17. Mobile WireframesThe mobile experience of your site should be similar to the desktopversion, but optimized for the mobile experience.
  18. 18. Creating IA in WordPress: Understanding categories and tags• There are built-in taxonomies for WordPress blogs• WordPress creates post archives based on the categories you assign and the tags you include• Categories are hierarchical, so you can have categories and sub-categories• Tags are non-hierarchical. Posts can have multiple tags that dont necessarily interfere with what groups to which they belong.• Use controlled vocabularies to make sure tag names resonate with the audience.
  19. 19. Creating IA in WordPress: Breadcrumbs or not?• Breadcrumbs offer a trail that takes you back to where you were. Theyre good if someone finds themselves in the wrong sub-category.• They can also be used to navigate an action. They can be used to show the progression of completed steps of a multi-step workflow. An e-commerce site, for instance, can chart the path from online shopping to the checkout to the purchase completion).• Posts usually shouldnt be in two categories. Non-hierarchical tags should usually be used to link post that would be in different categories.• Breadcrumbs are good if youre already close to where you need to be - the visitors on the branch theyre on, not necessarily the branch they want to be on.• Breadcrumb NavXT Plugin helps you show breadcrumbs on pages and posts. You can decide which ones breadcrumbs will show on and customize how they display .
  20. 20. Creating IA in WordPress: Using taxonomies to classify posts• You can create custom taxonomies (other than "category" and "tag") using plugins. The Custom Post Type UI plugin is actually really great for creating taxonomies.• Find parameters that make sense. For instance, a comic book blog could organize posts based on the character discussed in the post or the artist... even the penciller and inker .
  21. 21. Adding Custom TaxonomiesAdding custom taxonomies using Custom Post Type UI
  22. 22. Creating IA in WordPress: Custom Post Types• Why have anything other than categories and tags?• Custom post types offer more flexibility• Theyre usually a type of media: a movie, a book, a review, etc. For instance, the WordCamp Montreal website uses the "session" custom post type to list presentations.• They can have parameters that are specific to the medium - like "Number of Pages" or "Genre" for a book - thanks to the use of meta boxes . (For more on meta boxes, try a plugin called Meta Box Scripts for WordPress which lets you add fields like dropdowns, checkboxes and more)• These parameters help better organize information.
  23. 23. Creating IA in WordPress: Custom Post Types• You can create custom post types using plugins such as Custom Post Type UI.• When you create a new post type, it will appear on the left- side admin navigation panel.• The URL will be : http://yoursite.com/{post-type}/{title}/• Post type archive pages work the same way as category archive pages.• Advanced: You can also create special template files by creating an archive-{post-type}.php file to change the layout of post archives.• Post types can share taxonomies (ie. you can assign a taxonomy to movies, posts, etc. and theyll be grouped under the taxonomy.)
  24. 24. Adding Custom Post Types
  25. 25. Creating IA in WordPress: Using custom search• Search isnt the solution to poor site architecture.• But good, logical search can make site navigation easier.• Altering the search results can improve the user experience.• By default, blog post search results show up by date, rather than relevancy.• Think about whether site visitors want to see all posts, pages, and custom post, or just some.• For better search, try the Google Custom Search Plugin and for more control over which pages and custom post types get searched, try the Custom Search Plugin from Best Web Soft (BWS)
  26. 26. Creating IA in WordPress: Linking to related and relevant posts• Its a great idea to give people relevant information and links whenever you can.• This helps push them towards content that they might not otherwise see. Youre helping make connections for them.• Navigational elements can be put in sidebars• You can create custom sidebars with the WordPress Custom Sidebar plugin.• Link to relevant posts using the nRelate plugin which automatically suggests similar content .
  27. 27. nRelate Plugin
  28. 28. Some Common Problems• Determining what taxonomies are parents and children. For instance, CLOTHES>SHOES>SIZES is right; CLOTHES>SIZES>SHOES is wrong. Consider the process.• Too many categories: youre probably being too specific. Consider using tags instead.• Too many sub-categories. Keep it to three levels or less. People will abandon your site quickly.
  29. 29. Q&A• Contact me: david.hamilton@kobayashi.ca • Twitter: @ko_davidh

×