Information Architecture and Usability Introductory Lecture David Rashty.

Information Architecture and Usability

Introductory Lecture

David Rashty

User Centric Design

User Interface DomainWhat is the Lecture About ?

Information Architecture

User Interface

Testing and Evaluation

Design and Implementation

Usability

User Interface Domain - Terms

• MMI (Man Machine Interface)

• GUI (Graphical User Interface)

• CHI (Computer User Interface)

• CHI (Computer Human Interaction)

Information overload

Disinformation overload

Information overload

Over 93 percent of the information produced in 1999 was in digital format .

How much Information ?

Worldwide PC hard drive capacity shipped

How much Information ?

NewsNews

Culture Diff 1

Shopping

Shopping

Culture Diff 2

Siemens ChinaCulture Diff 3

Siemens GermanyCulture Diff 4

Siemens CanadaCulture Diff 5

Siemens Saudia ArabiaCulture Diff 6

Which design makes it easier ?

Is this usable?

Terrible designs!

Confusing designs!

This is hard to read. In fact, many people have gone stone

blind from reading horrible pages on Web sites. You

could be next! Well, that's a bit of an exaggeration.

Please, please, never do this.

This is easier to read. The colors may not be very pretty,

but they sure are easier to read than the example above.

Also avoid colors that look ugly together.

Color Problems !

Cognitive Problems !

Eye Tracking Problem !

Unusable Metaphors !

How bad can it be?

Definition

• Information Architecture is the process of organizing and presenting information in an intuitive and clear manner.

• Richard Saul Wurman – “The building of information structures that allow others to understand”

• When architects design a house they need to: – Learn about the client’s wishes; – Organize those wishes into a coherent pattern; – Design a house that will meet the occupants’ needs.

Definitions

More Definitions

• The information architect must understand what users are trying to accomplish; he must learn the users’ goals/tasks. This means including users in the design process

• The information architect must answer the question: “what will people do on the site”; not just “what content should be on the site.”

Definitions

Why is IA important?

• Wasted expense: most sites will waste between $1.5M and $2.1M on redesigns next year.

• Forfeited revenue: poorly architect retailing sites are underselling by as much as 50%.

• Lost customers: the sites we tested are driving away up to 40% of repeat traffic.

• Eroded brand: people who have a bad experience, typically tell 10 others.

Forrester Research – Why Most Web Sites Fail (Sept 98)

Definitions

The role of the Information Architect

• Clarify the mission and vision for the website;

• Determines the information structure and functionality of the website;

• Defines the navigation, labeling and searching systems;

• Defines how the website is will accommodate to future changes.

Definitions

Disciplinary background

Information Science

Computer Science

Usability Engineering

Graphic Design

Technical Writing

Management & Marketing

Definitions

Cognitive psychology

Building an Information Architecture

Information Organization & Clustering

Labeling Systems & Metaphors

Navigation Systems

Searching Systems


Information Architecture work process


• Plan

• Research

• Analyze

• Design (Functional Design)

• Evaluate (Usability)

• Implement (Visual Design and Templates)

• Evaluate (Usability)

• Document (Design Guide)

• Train

Why?

How?

Maintain

Information Architecture metrics


• Cost of finding (time, clicks, frustration, precision).

• Cost of not finding (success, recall, frustration, alternatives).

• Cost of development (time, budget, staff, frustration).

• Value of learning (related products, services, projects, people).

Information Architecture metrics

Log file analysis


Visual approach to IA


Overview of Method

• Seven step methodology for defining the needs of customers and for building an appropriate information structure:

approach > Overview

Research Whiteboard Clustering

Highlighting

Focusing Labeling Functional structure

Interaction Design

User Experience

Organize information in accordance with the users…

Building an Information Architecture > Information organization


Information Organization & Clustering

Information organization

• The most important step in planning your website is organizing your information.

• Steps to build a usable information structure:– Divide the content into logical units;

– Chunk the information into sections and subsections (clusters);

– Think about which sections are more important;

– Think about how the sections relate to one another;

– Build links between related sections.


Why is it difficult?

• Ambiguity – Language is ambiguous. Is a tomatoes a fruit, a vegetable, or a berry?

• Heterogeneity – The web is a heterogeneous media and this makes it difficult to impose a rigid information structure to websites.

• Differences in perspective – Different users approach your website differently (culture, age, language).


Download

AboutHelp

Test

Licensing

Advertising

Home Page

Shockwave

Japanese

French

German

Canada

DHTML Zone

Developers centers

Technologies

Tech support

Magic program

Beta programs

Training

Shocked site of the day

Gallery guide

Arcade

Jukebox

Flash leading edge

Director leading edge

Authorware attain

Director

Dreamweaver

Fireworks

Flash

Freehand

Generator

Pathware

About the company

Contact us

Press room

Press releasesInvestors

Jobs

EventsEducation

Search

Webmaster feedback

Advertising

F.A.Q.

Ordering options

Shockwave

Sites

Shockzone

About us

Support Software

Help

Online store


Labeling Systems & Metaphors

Labeling

• Labels are concepts that represent chunks of information.

• The About us page of a website, for instance, may include: – background information;– Relevant addresses; – Other contact information.

• Labels must be clear and intuitive to be effective.

Building an Information Architecture > Labeling

Labels are not definite

The menus in this slide are all from consulting companies. Pay attention to the differences…


Some conventions

• Main, Main page, Home, Home page;• Search, Find, Browse, Search/Browse, Site map,

Contents, Table of contents, Index;• Contact, Contact us, Feedback;• Our work, Expertise, Solutions, Company X

solutions, What we do, Process;• News, What’s new, News and events;• About; About us, About company X, Who we are,

Our Company, Company info.


Labeling problems…

• The Web site of Richard “Dick” Armey is a victim of many of the software solutions which he advocates. All of them filter his site because it contains the word “dick”.

• The Navy’s censorware blocked a user from accessing the A+ Exam site. The site was blocked because its URL, www.aplusexam.com, contained the word “sex”.


Metaphors

• When choosing a label we often make use of metaphors – a word denoting one kind of idea is used in place of another to suggest an analogy between them.

• For example:– someone that is drowning on money is not

really drowning…– food for thought is not food…– time is not really money.


Metaphors – example


Metaphors – example

• The VCR metaphor to control the printer doesn’t make sense: what does the rewind button means?



Searching Systems

Searching

• When designing a searching system for a website, the information architect have to consider the following points:– The level of searching expertise users have;– The kind of information users want;– The type/format of information being searched;– How much information is being search, i.e.,

what is granularity of the information.

Building an Information Architecture > Searching

Searching (searching stinks)

• “Using an on-site search engine actually reduced the chances of success.”

• 1998 Usability Study by User Interface Engineering• http://world.std.com/~uieweb/searchar.htm

Percent of Successful Tasks

53%

30%

0%

10%

20%

30%

40%

50%

60%

Without Search With Search


http://world.std.com/~uieweb/searchar.htm






Bookshops – simple search


What is the best option?


The Brain

• The visual element in this browser facilitates navigation and gives a sense of direction that helps the user to find the information he is looking for.


http://www.thebrain.com/

Spotfire

• A visual approach to information retrieval and presentation. The graph represents a huge amount of data that would be difficult to conceptualizein other ways.


http://www.spotfire.com/

Gartner


http://www.spotfire.com/

Usability testing

Usability laboratory

Testing methods

MethodShort descriptionUsability laboratoryA room with computer equipment, a place for

an observer to sit and a special observation area.

Web-basedOnline evaluation with live feedback from users.

Thinking aloudA test subject thinks aloud while navigating the site.

ObservationVisiting the users and observing them work.

QuestionnairesSite or email questionnaires are an effective way of measuring user satisfaction.

Testing methods

MethodShort description

InterviewsWell suited to exploratory studies where one does not know yet what one is looking for.

Focus groupsUsers are brought together to discuss new concepts and identify important issues.

Heuristic evaluationLooking at an interface and trying to come up with an opinion about pros and cons about it.

Log file analysisThe computer automatically collect statistics about the detailed use of the system.

User feedbackShows the immediate and pressing concerns, is an ongoing process and is adapts quickly.

Observation room

Usability test video (cost of finding)

המשימה: לבצע חיפוש טלפון באתר סטארט

Usability test video (cost of not finding)

המשימה: לבצע התאמה אישית לאתר סטארט

19%

5%

6%

33%11%7%

3%


Products

Tree Structure with Correlate

The design process

Tree Structure with Visio

The design process

Functional Design Span

Examples of good IA

Examples of bad IA

What happens if you don’t do it?Good Architecture Vs. Bad

Architecture

Conclusion

• The information architect should be someone who can – think as an outsider (from the user perspective); – be sensitive to the needs of users; – and pay attention to details.

• At the same time, – he is enough of an insider to have a clear picture of the

organization’s mission; – and have a strong multidisciplinary background that

allows him to ignore unimportant details.

There is a great satisfaction in building good tools for other people to use.

Freeman Dyson, Disturbing the Universe, 1979

Through even the smallest window the eye can reach the most distant horizon.

A. Bergman, Visual Realities, 1992

References – Websites

• www.argus-acia.com - Peter Morville and Louis Rosenfeld company’s website

• www.jjg.net/ia - Information Architecture resources

• www.useit.com - Jakob Nielsen website

• www.usableweb.com - Mainly about usability but contains lots of info on IA

http://www.argus-acia.com/





http://www.jjg.net/ia




http://www.useit.com/



http://www.usableweb.com/



Thank you!

Information Architecture and Usability Introductory Lecture David Rashty.

Documents

Transcript of Information Architecture and Usability Introductory Lecture David Rashty.