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.

1. Great User Experiences
Start Here
An approach to information architecture for
WordPress
Contact me: david.hamilton@kobayashi.ca
Twitter: @ko_davidh

2. Great User Experiences Start Here
An approach to information architecture for WordPress
1. What is Information Architecture? And why is
it important for user experiences?
2. How to develop an IA strategy
3. Plugins that make IA easier
4. Some common IA problems and how to deal
with them
5. Q&A

3. What is Information Architecture?
It's a lofty term, but don't 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. 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 doesn't always draw attention to
itself unless it's way off. When done right, it's
almost transparent.

5. What does Information Architecture
look like?

6. But IA is more than site
diagrams and
wireframes...
It's about balancing content, context
and users.

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 don't like, and if anything's
extraneous.
• Try to understand their goals, tastes, political
beliefs, accessibility requirements, and anything
else they'll need from your site.

8. Researching and defining
user groups
Create a rough sketch of a few of your
typical site visitors. Broadly determine
their goals, how they use your site,
and what appeals to them.
For instance, who are the people
coming to your comic book store
website?

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. 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 site's pages and within its structure.

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 you'll use the term "comic book" and "graphic novel"
and "illustrated novel" - these terms all have different connotations.

12. A Website Structure Example
The site navigational structure is really based around serving user goals.
In this case the user profiles are of different people who are part of a
university community (Administrators, Students, Donors, Alumni, etc.).

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.
• You'll likely use the tree structure to create the
menu structure, which can be recreated
using WordPress' drag-and-drop menus.
• Don't 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. Defining an IA Strategy:
Create wireframes for pages and posts
• It's 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. Default WordPress wireframe

16. A Detailed Wireframe
This detail might be good for a home page or another major page. A
more basic sketch would probably do for other pages.

17. Mobile Wireframes
The mobile experience of your site should be similar to the desktop
version, but optimized for the mobile experience.

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 don't necessarily interfere with what
groups to which they belong.
• Use controlled vocabularies to make sure tag
names resonate with the audience.

19. Creating IA in WordPress:
Breadcrumbs or not?
• Breadcrumbs offer a trail that takes you back to where you were. They're
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 shouldn't be in two categories. Non-hierarchical tags should
usually be used to link post that would be in different categories.
• Breadcrumbs are good if you're already close to where you need to be -
the visitor's on the branch they're 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. 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. Adding Custom Taxonomies
Adding custom taxonomies using Custom Post Type UI

22. Creating IA in WordPress:
Custom Post Types
• Why have anything other than categories and tags?
• Custom post types offer more flexibility
• They're 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. 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 they'll be grouped
under the taxonomy.)

24. Adding Custom Post Types

25. Creating IA in WordPress:
Using custom search
• Search isn't 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. Creating IA in WordPress:
Linking to related and relevant posts
• It's 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. You're 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. nRelate Plugin

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: you're 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. Q&A
• Contact me: david.hamilton@kobayashi.ca
• Twitter: @ko_davidh