information architecture and usability introductory lecture david rashty
TRANSCRIPT
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
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
Building an Information Architecture
Information Architecture work process
Building an Information Architecture
• 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
Building an Information Architecture
• 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
Building an Information Architecture
Visual approach to IA
Building an Information Architecture
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 Architecture
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.
Building an Information Architecture > Information organization
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).
Building an Information Architecture > Information organization
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
Information Architecture
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…
Building an Information Architecture > Labeling
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.
Building an Information Architecture > Labeling
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”.
Building an Information Architecture > Labeling
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.
Building an Information Architecture > Labeling
Metaphors – example
Building an Information Architecture > Labeling
Metaphors – example
• The VCR metaphor to control the printer doesn’t make sense: what does the rewind button means?
Building an Information Architecture > Labeling
Information Architecture
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
Building an Information Architecture > Searching
Bookshops – simple search
Building an Information Architecture > Searching
What is the best option?
Building an Information Architecture > Searching
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.
Building an Information Architecture > Searching
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.
Building an Information Architecture > Searching
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%
Information Architecture
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
Thank you!