introduction to information architecture week 3

55
Introduction to Information Architecture Week 3

Upload: primrose-burns

Post on 31-Dec-2015

219 views

Category:

Documents


1 download

TRANSCRIPT

Introduction to Information Architecture

Week 3

What Is Involved?

• What is actually involved in creating a web site?– HTML pages (decent HTML editing package)– The content needs to come from somewhere– Graphic design expertise– A server that is connected to the Internet– A Project Manager

Are You All set?

• Now you are all set to design your web site right?

What is missing from this picture is a definition of what the site will actually be, and how it will work.

Information Architecture: a Definition

“Information architecture involves the design of organization, labeling, navigation, and searching systems to help people find and manage information more successfully.”

Information Architect

• Specifies how users will find information in the site by defining its organization, navigation, labeling and searching systems

• Determines what content and functionality the site will contain.

• Clarifies the mission and vision for the site, balancing the needs of the client and the needs of its audiences.

• Maps out the site

Monster.comSearch for an Information Architect Delta

Information Architecture

• Well-planned IA greatly benefit both consumers and producers. – Accessing a site for the first time, consumers

can quickly understand it effortlessly– Producers of web sites and intranets benefit

because they know where and how to place new content without disrupting the existing content and site structure.

Who should be the Information Architect?

• Someone who can think as an outsider• Be sensitive to the needs of the site’s users• Enough of an insider to understand the sites

sponsoring organization– Its mission– Goals– Content– Audiences– Inner workings

Organizing Information

• The beginning of all understanding is classification.

» Hayden White

Organizing Information

• We organize information so that people can find the right answers to their questions. Our aim is to apply organization and labeling systems that make sense to users.– Why are many large web sites so difficult to

navigate?– Why CAN’T people who design these sites

make it easy to find information.

Organizational Challenges

• People have struggled with the difficulties of Information Organization for centuries.

• The field of librarianship has been largely devoted to the task of organizing and providing access to information.

• “We are all becoming librarians”• Not long ago the responsibility for labeling,organizing

and providing access to information fell in the labs of librarians.

• The internet is forcing the responsibility for organizing information on more of us each day.

Language of Librarians

• We unknowingly adopt the language of librarians.– How should we label that content?– Is there an existing classification system?– Who is going to catalog all that information?

Information Organization

• Some of the reasons why organizing information in useful ways is so difficult– Ambiguity

• Classification systems are built upon the foundation of language, and language is often ambiguous.

• 15 definitions of the word “Pitch”

– Heterogeneity• An object or collection of objects composed of unrelated or

unlike parts. – Old fashioned library cards are often homogeneous. It organizes

and provides access to books. It doesn’t provide access to chapters in books or collection of books.

Heterogeneity• Most web sites are highly heterogeneous.

– A web site can present articles and journals and journal databases side by side.Links might lead to pages, sections of pages, or to other web sites.

– Web sites typically provide access to documents in multiple formats. You might find financial news, product descriptions, employee home pages, image archives and software files.

• Dynamic news content shares space with static HR information• Textual information shares space with video, audio and

interactive applications– The web site is a great multimedia melting pot, where you are

challenge to reconcile the cataloging of the broad and the detailed across many mediums.

Differences In Perspectives

• Differences in perspectives– Have you ever tried to find a file on a coworkers desktop

computer? • In some cases immediately or• You may have searched for hours.

– The ways people organize and name files and directories on their computers can be illogical

– When questioned their organization system makes perfect sense.• The fact is that labeling and organization systems are intensely

affected by their creators perspectives.• To design usable organization systems, we need to escape from our

own mental models of content labeling and organization.• One size does not fit all.

Internal Politics

• Politics exist in every organization.• Individuals and departments constantly position

for power and respect• The choice of organization and labeling systems

can have a big impact on how users of the site perceive the company, its departments and its products

• As an IA you must be sensitive to your organization’s political environment.

Organizing Web sites and Intranets

• An organization structure defines the types of relationships between content items and groups.

• Organization is closely related to navigation labeling and indexing

• The hierarchical organization structures of web sites often play the part of primary navigation system

• The labels of categories play a significant role in defining the contents of those categories

• Manual indexing is ultimately a tool for organizing content items into groups at a very detailed level.

Organization Structure

• The structure of information defines the primary ways in which users can navigate.

• Major organization structure that apply to web site and intranet architectures is the hierarchy.

The Hierarchy

• A top down approach• Well designed hierarchy is the foundation

of almost all IA’s– Simple– Familiar

• Family trees are hierarchical• Organization charts are usually hierarchical• A good way of start the IA process

Designing Hierarchies

• Rules of thumb– Categories should be mutually exclusive

• Do tomatoes belong to Fruit, vegetable or berry category?

– Balance between Breadth and Depth• Breadth, number of options in each level

– Users are faced with too many options

• Depth, number of levels in the hierarchy– Users have to click-through inordinate number of levels

Narrow and DeepN arrow an d D eep

6 c lic ks from A to B

P ag e1

P ag eB

P ag e2

P ag e A

Users are faced with six clicks to reach the deepest contentIf users are forced to click more than four or five levels, they may simply give up and leave your web site.

Broad and Shallow

•Users must choose from ten options to reach a limited amount of content•Try to follow the seven +- two rule•Web sites with more than ten options on the main menu can overwhelmusers

Hierarchy

• For new web sites and intranets that are expected to grow you should lean towards a broad and shallow rather than narrow and deep hierarchy.

• This approach allows for the addition of content without major restructuring.

Labeling Systems

• Labeling is a form of representation• We use labels to represent larger chunks of

information in our web sites– E.g. Contact us is a label that represents a

chunk of information, including a contact name, an address, telephone, fax, email information and maybe more.

• The goal of a label is to communicate information efficiently

Labeling

• “The words you use can make or break your business deals”

Feeding Informavores

• Selecting Relevant resources

• Plan visual style and layout carefully

• Know your customer

• An informavore is a being that survives on information.– Perhaps your readers don't require

your information to physically survive, but if you can give them what they are looking for, your Web site will survive.

– Creating Better links • http://html.about.com/library/weekly/aa072098.htm

Introducing Information Scent

• What is information Scent– How do you get from here to there in an

information space?– Visual and verbal cues guide the way– Looking for a movie DVD on a web site?

• Choose the global navigation link labeled “Films” before the links labeled “Music” and Software

• Humans are informavores

• We look for through information spaces, looking for the best information, with parallels to how animal hunt.

• Poor information scent could provide the justification for moving on.

Web Information Scent

• Scent applies to any information space• Our focus is on the web• Both browsing and search• With browsing good labeling is vitally

important in getting users to the desired destinations

• With search the goal is to get the user to the right neighborhood on the website.

Understanding Information Scent

• Each label on a website has relationship with the links to which it leads.

• Think of the top-level label as carrying a residue of the lower level labels. This residue is the scent we follow.

• Careers carries a strong distinct residue for the “Open positions” and “Employee Benefits” sub-navigation links.

The Danger of Unclear Scent

• Where do I go to buy the software?Products or Store?

• Scent should be strong and distinct, leading users both towards any away from certain sections of a website

Three Indicators of Poor Scent

• Indecision (Which path to take? More than one looks like a possibility.)

• Frustration (None of these look good!)

• Confusion (What does this word even mean?)

Why it Matters to get Scent right

• Saved time

• Saved patience

• Increased productivity

• Increased satisfaction

• Increased usability

Developing Good Scent

• When designing/redesigning a website, aim for a broad, shallow structure

• Why breadth over depth?– Top level labels must provide scent for all

levels further down– Degree of labeling ambiguity corresponds to

degree of scent ambiguity.

• www.acm.org/chi2001

• www.acm.org/chi2002

• Expanded breadth (11 to 14 links)• Better Scent

– Call for participation—Submissions volunteering

– Introduction&Overview• FAQ, ConferenceOverview

– Presenters• For Presenters

Indicating Scope

• Scope refers to the nature and extent of content in a specific part of a website.

• Scope helps establish context for top-level labels, clarifying their scent.– Scope can be represented through

• Textual description– http://ustransplant.org/statistics.html

• List of subnavigation links

Scope Links

Scope and Graphical Rollovers

Facet Based Browsing

• Rather than trying to capture the whole scent in one label, another option is to allow browsing by facet.

• A facet is an aspect or dimension of an object or piece of information.

• Each facet is a scent trail that can lead to the object or information.

Facet Based Browsing

Stress Test Criteria

• Looking at the subpage, identify the following items– The name of the web site– The title of the page– The section of the website you are in – The path from the home page to your location– Other pages at the same level – Pages further down from your location

Labeling Systems Not Labeling

• Labels like organization and navigation systems are systems on their own right.

• Labeling systems require planning to succeed.

1. Unplanned Labeling System

• Faculty Skunk-works

• Office for Instructional technology

• K12 PDN projects web page

• Digital Libraries project

• Office of technology management

• Extension services

• The new media center

• Project 2001

• Institute for ITEnglish composition board

• Technology Dissemination office

2. Planned Labeling System

• Arts and humanities

• Business&Employment

• Communication

• Computers&ITEducation

• Engineering

• Environment

• Government & Law

• Health & Medicine

• Places&People

• Recreation

• Science & Mathematics

– Subject areas

Conceptual Design

• Based upon information gathered during the research phase, you must now create order out of chaos

• How should the information be organized and labeled at the highest levels of the hierarchy.

• White boards and flip charts, high level architecture blueprints and scenarios are key tools at this stage.

Site Mapping• Road map of site

• Demonstrates surf path taken by visitor

• Client/contractor collaboration

• Purpose is to communicate

• Many different formats, graphic tools to create them

• Include site map on site??

Site Map• Site map is a visual presentation of your functional specification

document. • You will present which page links to which page. Look at the

second ppt file that I sent to you. • I want you to create your site map similar to the site map that I

sent to you. • Make sure that you understand what a A2-1, A2-2 and A2-3

represents. – These are the sub pages of A2.

• If you want to link A2-1 to A2-2, what would you do?– Just draw a line and connect them– Important part is, that connection should be stated in the functional

specification document.

Sample Site Maps

Architectural blueprints are visual representations of the site structure. They are diagrams showing how elements of the site are grouped and how they link or relate to one another.

Sample Site Maps

Sample Site Maps

Wire-Frames

• Look at the sample wire frames document which is posted on the course web page.That document is a real life example of a wire frame. You will see that there is not much of a design issues but navigation.

• Also, study the wire frame which is on the page 12 of Evaluating Information Architecture.pdf document, (posted.)

• Than go to the argus-acia.com and see the real web site. Does it look familiar?

Version Control

• How do we solve the versioning problem

• Date the documents. – FunctionalRequirements_03March2001– FunctionalRequirements_08April2002– You will need to save the file in a certain

folder.

Audi.com

• Please check AUDI.com

• Do you like the right hand Navigation?