ECT 250: Survey of e-commerce technology An introduction to information architecture

Topics Information architecture Organization systems Schemes Structures Navigation systems Labeling systems Searching issues Discussion of the midterm

Organization system Organization systems are composed of: Schemes: Defines the shared characteristics of content items and influences the grouping of those items. Structures: Defines the types of relationships between content items and groups.

Examples 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?

Organization schemes The three major types: Exact Ambiguous Hybrid Each has its benefits, drawbacks, and uses.

Exact organization schemes 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

Ambiguous organization schemes Divide information into categories that defy exact definition. Features: Difficult to define Supports browsing by users with no immediate goal or with vague information Some types: Topical Task-oriented Audience-specific Metaphor-driven

Hybrid organization schemes Use with caution! If you must have hybrid schemes, separate them clearly or you will create confusion. Better Library Listing Age Group Adult Teen Youth Topics Arts & Humanities Science Social Science Other Community Center Services: Get a Library Card Learn About Our Library Bad Library Listing Adult Arts & Humanities Community Center Get a Library Card Learn About Our Library Science Social Science Teen Youth

Organization structures 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.

Hierarchical structure A well-designed hierarchy forms good foundation for 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 location within the site. Takes a top-down approach to design.

Types of hierarchies http://facweb.cs.depaul.edu/asettle/ Narrow and deep Broad and shallow http://facweb.cs.depaul.edu/asettle/

Designing hierarchies Be aware of, but not bound by, the idea that hierarchical categories should be mutually exclusive. Consider the balance between breadth and depth in the hierarchy. Breadth: Be sensitive to the cognitive limits of your user. More than ten options on the main menu can overwhelm users. Depth: If users are forced to click through more than four or five levels, they may give up and leave.

Hypertext structure In hypertext systems, content chunks are connected via 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

Database structure A database is a collection of records, each of which has 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

Topics Information architecture Organization systems Schemes Structures Navigation systems Labeling systems Searching issues Discussion of the midterm

Navigation systems A good navigation system: Helps exploration/orientation The page must indicate its location within the site. DePaul CTI LLBean Leads users to what they seek Care must be given to clear directions/options. Informs about the available products/services/tasks Doing this requires anticipating the users’ needs Amazon

Built-in navigational features 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 at all. Standards exist for a reason.

Purposes of navigation systems 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 link back to the main page for a site/subsite.

Types of navigation systems Hierarchical: Usually the primary system, it follows the information hierarchy closely. Global: Used for quick access to distant (often unrelated) sections of the site. May include a opening page. Local: Used in conjunction with a global system when a site has more than one purpose or audience. Embedded links: Never used alone or for vital pages. Studies have shown that users are more likely to miss them.

Types of navigation elements Integrated: Integrated within the page and thus context-related. Navigation bars (graphic or text) Pull-down menus Frames Remote: Complement other navigation systems Table of contents Index Site map

Building a navigation system Use the information hierarchy as the primary navigation system. The major categories in the hierarchy become the global navigation system. The local navigation will depend on the choices made in the global system. The site’s size and goal will determine what other navigation systems are required. Above all, test your navigation on users! (And pay attention to the results …)

Topics Information architecture Organization systems Schemes Structures Navigation systems Labeling systems Searching issues Discussion of the midterm

What’s in a label? Labels represent chunks of information. “A rose by any other name smells just as sweet.” Shakespeare “He never will know if the Gick or the Goor fits into the Skrux or the Snux or the Snoor.” Dr. Seuss 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

Better (far from perfect) List Labeling systems We are concerned with labeling systems not individual labels. 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 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

Navigation labels 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

Indexing labels 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

Link labels 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

Heading labels 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

Iconic labels Iconic labels are graphically appealing but poor communicators. 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

Topics Information architecture Organization systems Schemes Structures Navigation systems Labeling systems Searching issues Discussion of the midterm

How users search 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 must be integrated.

To search or not to search? 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.

Information architecture The elements of information architecture, namely organization systems navigation systems labeling systems searching methods hold a Web site together and aid its development.

A first step Before building a web site, you must define it. What is the site’s purpose? What will be the content? What functionality will it offer? Define the site’s Organization Navigation Labeling Search systems How will this system change and grow?

Skills needed for web design 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.

Organizational challenges 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

Different perspectives When labeling items in your site, how can you be sure that a visitor will understand your system? What differentiates these three groups? lamp, stapler, wall table, ballpoint pen, chair telephone, paper It helps to know your audience, but you should not assume that your classification system will make sense to others.

Ambiguity and politics The Web uses words for classification and words can be ambiguous. Politics Words can convey unintended or controversial meaning in certain contexts. Example: A bachelors in electronic commerce technology vs. a bachelors in e-commerce Internal battles over control of Web sites

Classic Web problems Poor organization Poor graphic design and layout Gratuitous bells and whistles Lack of attention to details Under construction Inappropriate tone Designer-centeredness

Poor organization 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 graphic design 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

Gratuitous bells and whistles “It looks cool” is not enough reason to bombard your visitor. Arneeon Jim Jacobson’s personal page

Lack of attention to detail Crashing scripts, sloppy presentation, errors, typos out of date content, etc. CTI Intranet (Make an advising appointment) Diamond Multimedia Europa (News releases)

Others 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 with jargon or technological prowess than with usability. Designer-centeredness: Company sites that are outlets for the webmaster’s self-expression including items such as “my favorite links”.

Rules of thumb Rules of thumb for good Web sites: Keep the purpose of the site clear and focused. Make it easy for the user to find what they need. Proper use of color and graphics can help the flow of information much as formatting in a document helps to organize its content. Make your site adaptable to different users. Be consistent in your design.