ECT 250: Survey of e-commerce technology An introduction to information architecture.
-
date post
21-Dec-2015 -
Category
Documents
-
view
216 -
download
0
Transcript of ECT 250: Survey of e-commerce technology An introduction to information architecture.
![Page 1: ECT 250: Survey of e-commerce technology An introduction to information architecture.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649d5e5503460f94a3e1c2/html5/thumbnails/1.jpg)
ECT 250: Survey of e-commerce technology
An introduction to information architecture
![Page 2: ECT 250: Survey of e-commerce technology An introduction to information architecture.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649d5e5503460f94a3e1c2/html5/thumbnails/2.jpg)
2
Topics Information architecture
• Organization systems Schemes Structures
• Navigation systems• Labeling systems• Searching issues
Discussion of the midterm
![Page 3: ECT 250: Survey of e-commerce technology An introduction to information architecture.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649d5e5503460f94a3e1c2/html5/thumbnails/3.jpg)
3
Organization systems are composed of:
1. Schemes: Defines the shared characteristicsof content items and influences the groupingof those items.
2. Structures: Defines the types of relationshipsbetween content items and groups.
Organization system
![Page 4: ECT 250: Survey of e-commerce technology An introduction to information architecture.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649d5e5503460f94a3e1c2/html5/thumbnails/4.jpg)
4
Yellow Pages• Scheme: Topics
How were the topics chosen?• Structure: Alphabetical
Grocery store• Scheme: Food categories, food tasks• Structure: Complex, unclear
Where would you find marshmallows?What about soy sauce?
Examples
![Page 5: ECT 250: Survey of e-commerce technology An introduction to information architecture.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649d5e5503460f94a3e1c2/html5/thumbnails/5.jpg)
5
The three major types:1. Exact2. Ambiguous3. Hybrid
Each has its benefits, drawbacks, and uses.
Organization schemes
![Page 6: ECT 250: Survey of e-commerce technology An introduction to information architecture.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649d5e5503460f94a3e1c2/html5/thumbnails/6.jpg)
6
Divide information into well-defined, mutually exclusive sections.Features:
• Easy to define and maintain• Supports known-item searching• Requires user to have detailed information
Some types: • Alphabetical• Chronological• Geographical
Exact organization schemes
![Page 7: ECT 250: Survey of e-commerce technology An introduction to information architecture.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649d5e5503460f94a3e1c2/html5/thumbnails/7.jpg)
7
Divide information into categories that defy exact definition.Features:
• Difficult to define• Supports browsing by users with no immediate
goal or with vague informationSome types:
• Topical• Task-oriented• Audience-specific• Metaphor-driven
Ambiguous organization schemes
![Page 8: ECT 250: Survey of e-commerce technology An introduction to information architecture.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649d5e5503460f94a3e1c2/html5/thumbnails/8.jpg)
8
Use with caution! If you must have hybrid schemes,separate them clearly or you will create confusion.
Hybrid organization schemes
Bad Library Listing
AdultArts & HumanitiesCommunity CenterGet a Library CardLearn About Our LibraryScienceSocial ScienceTeenYouth
Better Library Listing
Age GroupAdultTeenYouth
TopicsArts & HumanitiesScienceSocial Science
OtherCommunity Center
Services:Get a Library Card
Learn About Our Library
![Page 9: ECT 250: Survey of e-commerce technology An introduction to information architecture.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649d5e5503460f94a3e1c2/html5/thumbnails/9.jpg)
9
The structure of information defines the ways in which users can navigate.Example: Street structure in NYC vs. Paris
The main organizational structures are:• Hierarchy• Hypertext• Database
Each structure has its strengths and weaknesses.
Organization structures
![Page 10: ECT 250: Survey of e-commerce technology An introduction to information architecture.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649d5e5503460f94a3e1c2/html5/thumbnails/10.jpg)
10
A well-designed hierarchy forms good foundationfor many web sites.• The mutually exclusive subdivisions and parent-
child relationships of hierarchies are simple.• Users are familiar with hierarchies so that they
are quickly and easily understood.• Users can use a hierarchy to develop a mental
model of the site’s structure and their locationwithin the site.
• Takes a top-down approach to design.
Hierarchical structure
![Page 11: ECT 250: Survey of e-commerce technology An introduction to information architecture.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649d5e5503460f94a3e1c2/html5/thumbnails/11.jpg)
11
Types of hierarchies
Broad and shallowNarrow and deep
http://facweb.cs.depaul.edu/asettle/
![Page 12: ECT 250: Survey of e-commerce technology An introduction to information architecture.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649d5e5503460f94a3e1c2/html5/thumbnails/12.jpg)
12
• Be aware of, but not bound by, the idea thathierarchical categories should be mutuallyexclusive.
• Consider the balance between breadth anddepth in the hierarchy.– Breadth: Be sensitive to the cognitive limits
of your user. More than ten options on themain menu can overwhelm users.
– Depth: If users are forced to click throughmore than four or five levels, they maygive up and leave.
Designing hierarchies
![Page 13: ECT 250: Survey of e-commerce technology An introduction to information architecture.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649d5e5503460f94a3e1c2/html5/thumbnails/13.jpg)
13
In hypertext systems, content chunks are connectedvia links in a loose web of relationships.Features:• Great flexibility• Substantial potential for complexity and confusion• Rarely useful as the primary structure• Often used to complement structures based on the
other two models.• Example: Microsoft Help
Hypertext structure
![Page 14: ECT 250: Survey of e-commerce technology An introduction to information architecture.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649d5e5503460f94a3e1c2/html5/thumbnails/14.jpg)
14
A database is a collection of records, each of whichhas a number of associated fields.Features:• Allows field-specific searching• Permits repackaging of information into different
formats for different audiences• Records must follow rigid rules• Best for listings, catalogues, directories, and other
subsites with structured, homogeneous data.• Example: The Oracle of Bacon
Database structure
![Page 15: ECT 250: Survey of e-commerce technology An introduction to information architecture.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649d5e5503460f94a3e1c2/html5/thumbnails/15.jpg)
15
Topics Information architecture
• Organization systems Schemes Structures
• Navigation systems• Labeling systems• Searching issues
Discussion of the midterm
![Page 16: ECT 250: Survey of e-commerce technology An introduction to information architecture.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649d5e5503460f94a3e1c2/html5/thumbnails/16.jpg)
16
A good navigation system:• Helps exploration/orientation
The page must indicate its location within the site. DePaul CTI LLBean
• Leads users to what they seekCare must be given to clear directions/options.
• Informs about the available products/services/tasksDoing this requires anticipating the users’ needs Amazon
Navigation systems
![Page 17: ECT 250: Survey of e-commerce technology An introduction to information architecture.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649d5e5503460f94a3e1c2/html5/thumbnails/17.jpg)
17
Most browsers offer built-in navigational features:• URL : direct access to any page• Back/forward : bi-directional backtracking• History : random access to pages visited• Bookmarks : save the location of pages visited• Color coding of links : helps users understand where they
have been and retrace their steps through a site• Mouseover effects : may indicate site structure
These effects should be modified cautiously, if atall. Standards exist for a reason.
Built-in navigational features
![Page 18: ECT 250: Survey of e-commerce technology An introduction to information architecture.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649d5e5503460f94a3e1c2/html5/thumbnails/18.jpg)
18
Navigational systems can aid users by:• Providing context: Users must have a good idea of
where the page fits into the overall site.– Company logo– Page title– Subsite/task indicators– Properly named links out of the site
Example: DePaul CTI• Providing flexibility: Multiple means of navigation
are important. At the very least, provide a linkback to the main page for a site/subsite.
Purposes of navigation systems
![Page 19: ECT 250: Survey of e-commerce technology An introduction to information architecture.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649d5e5503460f94a3e1c2/html5/thumbnails/19.jpg)
19
• Hierarchical: Usually the primary system, itfollows the information hierarchy closely.
• Global: Used for quick access to distant (oftenunrelated) sections of the site. May includea opening page.
• Local: Used in conjunction with a global systemwhen a site has more than one purpose oraudience.
• Embedded links: Never used alone or for vitalpages. Studies have shown that users are morelikely to miss them.
Types of navigation systems
![Page 20: ECT 250: Survey of e-commerce technology An introduction to information architecture.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649d5e5503460f94a3e1c2/html5/thumbnails/20.jpg)
20
• Integrated: Integrated within the page and thuscontext-related.– Navigation bars (graphic or text)– Pull-down menus– Frames
• Remote: Complement other navigation systems– Table of contents– Index– Site map
Types of navigation elements
![Page 21: ECT 250: Survey of e-commerce technology An introduction to information architecture.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649d5e5503460f94a3e1c2/html5/thumbnails/21.jpg)
21
• Use the information hierarchy as the primarynavigation system.
• The major categories in the hierarchy becomethe global navigation system.
• The local navigation will depend on the choicesmade in the global system.
• The site’s size and goal will determine whatother navigation systems are required.
• Above all, test your navigation on users!(And pay attention to the results …)
Building a navigation system
![Page 22: ECT 250: Survey of e-commerce technology An introduction to information architecture.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649d5e5503460f94a3e1c2/html5/thumbnails/22.jpg)
22
Topics Information architecture
• Organization systems Schemes Structures
• Navigation systems• Labeling systems• Searching issues
Discussion of the midterm
![Page 23: ECT 250: Survey of e-commerce technology An introduction to information architecture.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649d5e5503460f94a3e1c2/html5/thumbnails/23.jpg)
23
• Labels represent chunks of information.• They can be either headings or links.• They are closely tied to navigation.• For this reason they must be:
– meaningful– representative– consistent
What’s in a label?
“He never will know if the Gick or the Goor fits into the Skrux or the Snux or the Snoor.” Dr. Seuss
“A rose by any other name smells just as
sweet.”Shakespeare
![Page 24: ECT 250: Survey of e-commerce technology An introduction to information architecture.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649d5e5503460f94a3e1c2/html5/thumbnails/24.jpg)
24
We are concerned with labeling systems not individual labels.
Labeling systems
Unplanned List
• Faculty Skunkworks
• Office for Instructional Technology
• K12 PDN Projects Web Page
• Digital Library Project
• Office Technology Management
• Extension Services
• The New Media Center
• Project 1999
• Institute for Information Technology
• English Composition Board
• Technology Dissemination Office
Better (far from perfect) List
Offices
• English Composition Board• Office for Instructional Technology• Office Technology Management• Technology Dissemination Office• Institute for Information Technology• The New Media Center
Projects
• Project 1999• K12 PDN Projects Web Page• Digital Library Project
?????
• Extension Services • Faculty Skunkworks
![Page 25: ECT 250: Survey of e-commerce technology An introduction to information architecture.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649d5e5503460f94a3e1c2/html5/thumbnails/25.jpg)
25
Navigation labels are created during the design of the navigation system. You need to review them for clarity and consistency.
When possible, use what standards exist:• Main, Main page, Home, Home page• Search, Find, Browse, Site map, etc.• Contact Us, Contact webmaster, Feedback• Help, Frequently Asked Questions, FAQ• News, What’s New• About, About Us, Who We Are
Navigation labels
![Page 26: ECT 250: Survey of e-commerce technology An introduction to information architecture.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649d5e5503460f94a3e1c2/html5/thumbnails/26.jpg)
26
• Indexing labels are crucial to the site.• Usually found in the Meta tag.• Used by search engines.• Should be descriptive and representative of
the site’s purpose.• Example: http://www.clearinghouse.net
Indexing labels
![Page 27: ECT 250: Survey of e-commerce technology An introduction to information architecture.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649d5e5503460f94a3e1c2/html5/thumbnails/27.jpg)
27
• Link labels appear within the text of pages.• The context provides meaning to the link.• Be cautious that the linked item makes sense
relative to the link’s context.
Examples:– Amazon– Assignment 4
Link labels
![Page 28: ECT 250: Survey of e-commerce technology An introduction to information architecture.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649d5e5503460f94a3e1c2/html5/thumbnails/28.jpg)
28
Heading labels:• Condense into 1-3 words the meaning of entire
paragraphs or pages of information.• The user relies on these labels to determine if
a section should be read or not.• They must be consistent both in granularity and
visual form.Examples:
• Amazon• Chicago Tribune
Heading labels
![Page 29: ECT 250: Survey of e-commerce technology An introduction to information architecture.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649d5e5503460f94a3e1c2/html5/thumbnails/29.jpg)
29
Iconic labels are graphically appealing but poorcommunicators.
• There is no fixed iconic language• Few concepts have standard icons
Using icons forces the user to learn your system.How many users will be motivated to do that?Guidelines:
• Use a few icons• Stick to simple graphics• Use icons consistently throughout the site
Iconic labels
![Page 30: ECT 250: Survey of e-commerce technology An introduction to information architecture.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649d5e5503460f94a3e1c2/html5/thumbnails/30.jpg)
30
Topics Information architecture
• Organization systems Schemes Structures
• Navigation systems• Labeling systems• Searching issues
Discussion of the midterm
![Page 31: ECT 250: Survey of e-commerce technology An introduction to information architecture.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649d5e5503460f94a3e1c2/html5/thumbnails/31.jpg)
31
What kinds of searches do people do?• Known-item searching• Existence searching• Exploratory searching• Comprehensive searching
Many of these searches also involve browsing.For this reason searching and browsing mustbe integrated.
How users search
![Page 32: ECT 250: Survey of e-commerce technology An introduction to information architecture.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649d5e5503460f94a3e1c2/html5/thumbnails/32.jpg)
32
When NOT to make your site searchable:• It contains only a few, well-labeled documents.• Its purpose is to be a patch for a badly designed
browsing system.• There is no time to maintain the search engine.
When to make your site searchable:• The site is substantial.• The site contains dynamic content, making an
index difficult or impossible to maintain.
To search or not to search?
![Page 33: ECT 250: Survey of e-commerce technology An introduction to information architecture.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649d5e5503460f94a3e1c2/html5/thumbnails/33.jpg)
33
The elements of information architecture, namely
• organization systems • navigation systems• labeling systems• searching methods
hold a Web site together and aid its development.
Information architecture
![Page 34: ECT 250: Survey of e-commerce technology An introduction to information architecture.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649d5e5503460f94a3e1c2/html5/thumbnails/34.jpg)
34
Before building a web site, you must define it.1. What is the site’s purpose?2. What will be the content?3. What functionality will it offer?4. Define the site’s
• Organization• Navigation• Labeling• Search systems
5. How will this system change and grow?
A first step
![Page 35: ECT 250: Survey of e-commerce technology An introduction to information architecture.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649d5e5503460f94a3e1c2/html5/thumbnails/35.jpg)
35
• Marketing: Defines the purpose and audience• Information architecture: Designs the organization,
navigation, labeling, and searching systems.• Graphic design: Finds the graphic “identity” of the
site.• Editorial: Proofreading, editing, content, etc.• Technical: Programming, Web administration,
production, etc.• Management: Keeps all of the above in line, on time,
and in budget.
Skills needed for web design
![Page 36: ECT 250: Survey of e-commerce technology An introduction to information architecture.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649d5e5503460f94a3e1c2/html5/thumbnails/36.jpg)
36
The Web forces us to deal with classification:• How should we label this content?• What classification system should we use?• Who will catalogue all this information?
Classification issues caused by the WWW:• Differing perspectives• Ambiguity• Politics
Organizational challenges
![Page 37: ECT 250: Survey of e-commerce technology An introduction to information architecture.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649d5e5503460f94a3e1c2/html5/thumbnails/37.jpg)
37
When labeling items in your site, how can you besure that a visitor will understand your system?
What differentiates these three groups?1. lamp, stapler, wall2. table, ballpoint pen, chair3. telephone, paper
It helps to know your audience, but you should notassume that your classification system will makesense to others.
Different perspectives
![Page 38: ECT 250: Survey of e-commerce technology An introduction to information architecture.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649d5e5503460f94a3e1c2/html5/thumbnails/38.jpg)
38
Ambiguity and politics Ambiguity
The Web uses words for classification andwords can be ambiguous.
Politics• Words can convey unintended or controversial
meaning in certain contexts.Example: A bachelors in electronic commercetechnology vs. a bachelors in e-commerce
• Internal battles over control of Web sites
![Page 39: ECT 250: Survey of e-commerce technology An introduction to information architecture.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649d5e5503460f94a3e1c2/html5/thumbnails/39.jpg)
39
• Poor organization• Poor graphic design and layout• Gratuitous bells and whistles • Lack of attention to details• Under construction• Inappropriate tone• Designer-centeredness
Classic Web problems
![Page 40: ECT 250: Survey of e-commerce technology An introduction to information architecture.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649d5e5503460f94a3e1c2/html5/thumbnails/40.jpg)
40
You suspect the information is there but it is hard (or impossible) to find.• DePaul University
Phone number of Jeffrey Carlson, an Associate Dean in LA&S?
Inconsistencies in navigational headers and footers,labeling, or page background and design.• Atlanta.com• Berkshire Record Outlet• CTI Intranet
Poor organization
![Page 41: ECT 250: Survey of e-commerce technology An introduction to information architecture.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649d5e5503460f94a3e1c2/html5/thumbnails/41.jpg)
41
Too much or too little effort with graphics is a bad thing.• Amazon• Amber Settle’s home page• Metra• MSN/NBC
Clarity may be sacrificed for the sake of design• Kleber
Poor graphic design
![Page 42: ECT 250: Survey of e-commerce technology An introduction to information architecture.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649d5e5503460f94a3e1c2/html5/thumbnails/42.jpg)
42
“It looks cool” is not enough reason to bombard your visitor.
• Arneeon• Jim Jacobson’s personal page
Gratuitous bells and whistles
![Page 43: ECT 250: Survey of e-commerce technology An introduction to information architecture.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649d5e5503460f94a3e1c2/html5/thumbnails/43.jpg)
43
Crashing scripts, sloppy presentation, errors, typosout of date content, etc.
• CTI Intranet (Make an advising appointment)• Diamond Multimedia Europa (News releases)
Lack of attention to detail
![Page 44: ECT 250: Survey of e-commerce technology An introduction to information architecture.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649d5e5503460f94a3e1c2/html5/thumbnails/44.jpg)
44
Under construction: Why let people look before you are done with your work?• Agama Path Foundation• DePaul faculty member
Inappropriate tone: A site concerned more withjargon or technological prowess than withusability.
Designer-centeredness: Company sites that are outlets for the webmaster’s self-expression including items such as “my favorite links”.
Others
![Page 45: ECT 250: Survey of e-commerce technology An introduction to information architecture.](https://reader035.fdocuments.in/reader035/viewer/2022062516/56649d5e5503460f94a3e1c2/html5/thumbnails/45.jpg)
45
Rules of thumb for good Web sites:1. Keep the purpose of the site clear and focused.2. Make it easy for the user to find what they need.3. Proper use of color and graphics can help the
flow of information much as formatting in adocument helps to organize its content.
4. Make your site adaptable to different users.5. Be consistent in your design.
Rules of thumb