great user experiences start here: an approach to information architecture for wordpress
TRANSCRIPT
Great User Experiences
Start Here
An approach to information architecture for
WordPress
Contact me: [email protected]: @ko_davidh
Great User Experiences Start HereAn 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
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.
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.
What does Information Architecture look like?
But IA is more than site diagrams and wireframes...
It's about balancing content, context and users.
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.
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?
Developing an IA Strategy:Defining your goals
• Primary audience• Audience: Casual comic book
fans and those new to comic books
• Goals: Provide a friendly welcome to your store and give them the information they need to become bigger fans.
• Requirements: Store location and hours; Up-to-date "New Releases" section; Blog posts geared towards a general but enthusiastic audience.
• Secondary audience• Audience: Die-hard comic
book fans.• Goals: Keep regular
customers engaged and make them feel valued; keep them updated on store events and sales.
• Requirements: Let regular customers post guest blogs; Allow people to sign up for email-based event and sale notices; Allow product reviews.
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.
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.
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.).
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).
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.
Default WordPress wireframe
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.
Mobile Wireframes
The mobile experience of your site should be similar to the desktop version, but optimized for the mobile experience.
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.
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 .
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 .
Adding Custom Taxonomies
Adding custom taxonomies using Custom Post Type UI
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.
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.)
Adding Custom Post Types
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)
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 .
nRelate Plugin
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.
