IA-Optimized Title for Information Architecture Document

INFORMATION ARCHITECTURE

Monday, July 16, 2012

INFORMATION ARCHITECTURE
The structure or organization of your website.
Shows how different pages relate to one another.
Involves content analysis, page organization, labels, cues,
search techniques and navigation.
Can help people find their way through the information, &
ignore what isn’t relevant.


IA IS ORGANIZATION
All about creating groups that make sense to the people who
use them.
Supermarkets don’t organize Swiss cheese with Swiss
chocolate, Belgian chocolate with Belgian beer.


IA ON THE WEB
In supermarkets it’s done with layout, sign age and visual
guides.
On websites we use navigation bars button and links.


IA IS ALL ABOUT:
1. Organizing content or objects
2. Describing them clearly
3. Providing ways for people to get to them


WHERE DO YOU FIND IA?
1. Wherever you need to organize information or objects
2. Websites, intranets
3. File system at work or home, movies, music, or even groceries
on a shelf!


WHAT YOU NEED TO UNDERSTAND
...in order to develop a successful IA


PEOPLE
What they need do to, how they think & what they already
know.


CONTENT
What you have, what you should have & what you need.


CONTEXT
The business or personal goals for the site, who else will be
involved & what your constraints are.


PEOPLE

CONTENT CONTEXT


IA STARTS WITH
Defining the project & its goals
Researching end users
Reviewing all content
Understanding technological & design constraints


IA WILL DESCRIBE
Overall structure of the site
Groups & sub groups (to be used in navigation – includes what
they will be called)
Metadata: what you’ll use to describe products


WINESHOP
HOME | PRODUCTS | SERVICES | ABOUT US | C O N TA C T

PRODUCTS Home > Products > Wine > Usability Chardonnay 2010

Wine
Lorem ipsum dolor sit amet, consectetur
Food adipiscing elit. Praesent sodales, sapien ut Sed vitae libero et nunc
consequat adipiscing. Ut sit
Glasses porta blandit, metus dui imperdiet ipsum, id amet libero magna. In ac
eleifend est nulla eu orci. Mauris lectus eros, aliquam est. Morbi ac lorem
Kitchenware rutrum at lobortis ut, eleifend eget eros. Nulla massa, et tincidunt erat.

at felis eget neque aliquam convallis. Aliquam
elit risus, facilisis eu congue et, adipiscing Buy Now
Usability vitae eros. Pellentesque eleifend pellentesque
Chardonnay felis. Vivamus eleifend tortor in enim
2010 consequat tristique. Donec sit amet metus
sem. Integer quis massa nunc. Integer nec
purus vehicula urna aliquam elementum.


WINESHOP


Wine


THIS IS IA.

NAVIGATION
Dependent on the IA
Done after IA is drafted
Includes:
Navigation bars
Related links
In page navigation (hyperlinks)
Aids like A-Z indexes & site maps


WINESHOP


Wine


THIS IS
NAVIGATION.

DEVELOPING AN ARCHITECTURE


REVIEW:
Results of your requirements & task analyses
Earlier versions of site
Competitors’ sites


THIS DEVELOPS LIST OF:
Content pieces
Candidate labels
Organization schemes


EVALUATE CONTENT FOR:
Quality
Completeness
Add & design that’s needed
Create content inventory


content inventory


CREATE & EVALUATE STRUCTURE:
Brainstorm content categories & site structures
Decide which content belongs together on a page
User test & refine


MAP THE PAGES:
Create a sitemap starting with highest priorities
Add short cuts & redundant links
Add necessary support tools, such as Help, Site Map, Search


DEVELOP NAVIGATION BAR:
Refine layout & orienting of information i.e., headers, page titles
Establish final labels & graphics
Remember users’ mental models
Do user testing


IMPLEMENT:
Build the site & update specs as needed
Test the site
Train maintenance staff


ORGANIZATION SCHEMES


ALPHABETICAL
Primary scheme for dictionaries, encyclopedias
Non-fiction indices
Phone books
On the web: directories
Last name
Products
Departments
Services


CHRONOLOGICAL
Press Releases
Blog Posts
News


GEOGRAPHICAL
Weather
Store Locators
News sites


TOPICAL
Provides topical access to content

Pinterest


TASK ORIENTED
Organized into process, function or tasks


ORGANIZATIONAL STRUCTURES


ORGANIZATIONAL STRUCTURES
How the information is structured.
How one relates to it.


HIERARCHY
Relationship between items:
> parent & child; broader & narrower


DATABASE
A planned structure – all information fits into that structure
Pieces may have no relationship to each other


This has nothing to do with...


this!


But they share the same pieces that make up the listing:
• title • payment methods
• description • date added

• tags • photograph

• materials • category

• location


METADATA
“data about data”or,
“information about information”
all of the information that describes or relates to a piece of
content. this is what the database is all about.


THREE KINDS OF METADATA:
Intrinsic: What the object actually is
Administrative: How it is used
Descriptive: Description of the item


EXAMPLES OF METADATA:
Blog post (intrinsic)
Author (administrative)
Date posted (administrative)
URL (administrative)
Status: published (administrative)
Title (descriptive)
Category (descriptive)
Tags (descriptive)


HYPERTEXT:
Almost an anti-structure pattern
Pieces are connected according to the relationship between them
No database
No hierarchy


LINEAR
Just as it sounds –one thing follows another
Not common on the web
Don’t use unless users need to read things in order to avoid
frustration


COMBINED PATTERNS
Simple hierarchy + simple database
Good for small, medium & large sites
Create hierarchical sections for basic content
Power of a database to assemble detailed information within
a section


CATALOGUE
Second most common
Basically a database pattern
Bottom level is content!


TYPES OF CATALOGUE PAGES
Gallery pages: these provide direct access to the content
pages. Hardest working pages.
Department pages: provide access to the galleries.
Store pages: provide access to the department pages.
Jared Spool


HUB AND SPOKE
Users move down one level into something more detailed
Return to starting point (the hub)
Then to another detailed page
Back to hub and so on


SUB-SITES
LARGE sites
Government
Universities
Large intranets
Site is a series of sub-sites
Held together by homepage or top level pages


LABELS


LABELS
The words you use in navigation.
Words that describe chunks of content.


THE BEST LABELS...


CALL THINGS
...by the correct name


ARE CONSISTENT


USE TERMINOLOGY
...that your audience uses


ARE AS CLEAR AS POSSIBLE
Avoid “mystery meat” navigation

FlatPak Harry Ford BlueBell


WHERE TO GET IDEAS FOR LABELS


CONTENT
Look at the words used in your content.


USER RESEARCH
Your research will contain hundreds of words that describe
how your audience phrase ideas and concepts.


CARD SORTING
Have people provide a label describing what the group of
cards is about.


WHAT EVERYONE ELSE DOES
Look around at competitors!


WORKSHOP # 1
CARD SORTING EXERCISE
Divide into three groups. Write one word per card.
Skin care Hair care Finance tips
Does cutting salt Is fruit juice really For vegetarians
increase heart your friend. Could your water
attacks? Workout plans bottle be making
Recipes Meal plans you fat?
Disease risks Breakfast foods, the Workouts
Lowering stress good the bad and Ask the experts
Nutrition the ugly.. Weight loss
Life style Living green


WORKSHOP # 1
CARD SORTING EXERCISE
Create categories for the words, then group and find
appropriate labels.


WORKSHOP # 2
CREATE A HIERARCHICAL SITE
MAP FOR SITE YOU DID IN CARD
SORTING EXERCISE.


NAVIGATION


NAVIGATION
Refers to the methods we design that let people move
around information.
More than a single bar at the top of a page.


NAVIGATION CAN ALSO...
Let people browse to the content or functionality they need
Show the context of the information
Show what is related and relevant
Help people find information they didn’t know about


NAVIGATION INCLUDES:
Navigation bars
Hyperlinks
Buttons
Other clickable things


TYPES OF NAVIGATION:
Global
Local
Supplementary
Utility
Contextual


GLOBAL
Defined as links to a site’s top-level categories
Found on every page of the site


LOCAL
Picks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around & accomplish tasks


SUPPLEMENTARY
Supplements main navigation
Sitemaps, site tour videos, search bars, site index


UTILITY
Things users need on a regular basis
About, Contact, Privacy


CONTEXTUAL
Embedded in the content of the page
Hyperlinks


TYPES OF NAVIGATION 02:
Navigation bars
Horizontal or vertical bar
Shows the categories – usually 1-2 levels


USE HORIZONTAL NAVIGATION IF:
you have a small number of top-level items that can fit across
the screen
you aren’t likely to be adding new top-level items
your labels are short enough to fit into the horizontal space
you aren’t likely to translate the site into a language that uses
long, compound words (which take up more space)
you want to maximize the amount of page available for content


USE HORIZONTAL NAVIGATION IF:
you have more top level groups than would easily fit across
a screen
you may add or change groups over time
some groups may have long labels
you may want to translate the website

Showcase


USE VERTICAL NAVIGATION IF:
you have more top level groups than would easily fit across a
screen
you may add or change groups over time
some groups may have long labels
you may want to translate the site

Showcase


INVERTED L
Horizontal & Vertical


TABS
Variation of horizontal navigation
Always has 2nd level that need to be connected


DROP DOWN
Allows user to see second level navigation


WORKSHOP # 3
CREATE NAVIGATION FOR SITE
YOU DID IN CARD SORTING
EXERCISE.
Landing page
A secondary page


SKETCHING


USER FLOWS
Simple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios

Storyboard Donald Graham


THUMBNAIL SKETCHES
Simple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens


WIREFRAMES
First step in design process
Design drawings without visual treatment
Simple lines, few colors
Purpose is to show what will be on a page
No graphic design
No interaction


CREATING WIREFRAMES
Easy to draw
Straight lines and text
Plenty of drawing packages available:
Visio
Illustrator
Keynote

MockFlow Balsamiq OmniGroup


WHO USES WIREFRAMES?
Project team – to discuss different ideas & approaches
Content authors – how will their content fit? What pages do
they have?
Managers – are business needs met? (Where’s my stuff?!)
Developers – shows how things need to work, how to
implement


WHAT TO INCLUDE


ABSOLUTE ESSENTIALS
Logo placement
Navigation
Content
Hierarchies


EXPLANATIONS
Annotations
Background information
Important things to pay attention to


EXPLANATIONS
Better visual approaches so people can easily understand
what you’re communicating.


EXTRAS: TOOLS & TEMPLATES


EIGHTSHAPES UNIFY
This is an InDesign-based documentation system. It
contains templates, common page layouts and symbol
libraries to get you started.

Download


KONIGI WIREFRAME STENCILS
For OmniGraffle, this contains a broad set of components to
use in wireframes.

Download


NICK FINCK’S STENCILS
This is similar to the Konigi stencil set, but for Microsoft
Visio:

Download


BALSAMIQ
This prototyping tool is currently the most popular,
allowing you to create simple sketchy prototypes online.

Visit Site


AXURE
Very established software for creating clickable prototypes:

Download


MICROSOFT SKETCHFLOW
At the far end of the prototyping spectrum is Sketchflow,
which lets you create everything from quick sketch-style-
prototypes through to quite complex interactive prototypes
with re-usable code.

Download


WORKSHOP # 4
CREATE WIREFRAMES FOR SITE
YOU DID IN CARD SORTING
EXERCISE.
One wireframe for landing page
One wireframe for a secondary page


PROTOTYPES


PAPER PROTOTYPES
Hand drawn images of a site
Usually rough, but great for early testing
Can make changes while testing
Not good for heavy interaction
Can get new ideas for links from user

Paper Prototyping

INTERACTIVE PROTOTYPES
Usually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver, Powerpoint


COMPETITION AS PROTOTYPE
See what works and what doesn’t
Quick route to get results


PERSONAS


WHAT IS A PERSONA?
Hypothetical “stand-ins” for actual users.
Not real people but represent real people.
Created from user research - not a set demographics.
Represent a segment of your users.
Helps build consensus.


PERSONAS DESCRIBE:
Who this person is
How they use the site
What interests they have
What behaviors they have


PERSONAS ELEMENTS:
Goals
Attitudes
Behaviors & Tasks
Frustrations & Pain Points
Name, photo, demographic info, skill level, environment
Narrative (scenario)


RESEARCH INVOLVES:
Key stakeholders
Web analytics
Customer support
Customer


THEY REPRESENT YOUR USERS
Websites should be designed to meet the goals & needs of
personas.


USE CASES


WHAT IS A USE CASE?
Description of a user type in a scenario.
Gives a context for designing features.
Develops scope for the site.


A USE CASE
Should mirror your site strategy and business goals.
Can be like a story or scenario:


SCENARIO
Emma visits Craig's List homepage, and selects “Chicago” as
her location. She does not have anything in particular that
she is looking to buy right now. She then browses available
categories in the “for sale” area and finds a “toys” category.

She sees a posting for a “Groovy Kitchen,” which she thinks
would be great for her daughter. She contacts the seller to
arrange further details.


BENEFITS INCLUDE:
Understanding the user helps design for them.
Clarifying assumptions - scenarios help the team formalize
assumptions.
Fully exploring the design - scenarios serve to explore all the
important aspects of the design.
Provides context - for understanding the features
Helping other project tasks - scenarios represent the important
tasks.


WORKSHOP #5
Please break into three groups.
Create 2 personas. Segment people based on behaviors,
go.als and needs
(2 people can be in different demographic group but have
same underlying goals and behaviors)

Name, age, interests Internet/Computing profile
Personal characteristics Computing/technical likes and dislikes
Goals and motivations Quotes
Photos Work/Home computing environment
Job/profession Frequency of computer use

...and anything else you think is important.


WORKSHOP #6
Create 3 possible scenarios for each persona that the user
might execute on the site you were assigned.


IA-Optimized Title for Information Architecture Document

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a IA-Optimized Title for Information Architecture Document

Semelhante a IA-Optimized Title for Information Architecture Document (20)

Mais de studiokandm

Mais de studiokandm (7)

Último

Último (20)

IA-Optimized Title for Information Architecture Document