1. ECT 250: Survey of e-commerce technology Frames Information architecture

2. 2 Topics 1.What are frames? Good or evil? 2.Definition of information architecture a)Organizational systems b)Navigation systems c)Labeling systems d)Searching issues 3.Early warning about the midterm

3. 3 Frames allow more than one Web page to be displayed within the browser window at a time. When frames are used, the page opened in the browser is a special page containing instructions about how the browser window is to be divided into separate regions and which page should be initially displayed into each region. This special page is called the frames page or frameset. Frames

4. 4 When frames are used, clicking on a link in one frame can: Change the contents of that frame Change the contents of a different frame Display a page without using the frames page An application of frames is for a table of contents or a navigation bar. Frames allow the contents or navigation bar to be visible at all times. Navigating with frames

5. 5 Sites that use frames: DePaul CTI: www.cs.depaul.eduwww.cs.depaul.edu Macromedia: www.macromedia.comwww.macromedia.com National Discount Brokers: www.ndb.comwww.ndb.com XSL Tutorial: http://www.zvon.org/xxl/XSLTutorial/Books/Book1/index.html Some sites that do not use frames: Amazon: www.amazon.comwww.amazon.com Gap: www.gap.comwww.gap.com NY Times: www.nytimes.comwww.nytimes.com Examples

6. 6 There is a significant controversy about whether the use of frames is a good or bad thing. What are some of the issues surrounding frames? For a longer discussion of some of the issues see: Are frames bad? http://www.gooddocuments.com/techniques/areframesbad.htm Web design: frames – good or bad? http://dionaea.com/web/frames.html Frames: good or evil?

7. 7 Search engines do not deal well with frames Printing becomes more difficult Saving pages is more complicated Creating browser bookmarks may not work Frames can require large resolution Why use frames at all? Some problems with frames

8. 8 Navigation can be easier Easier updating of pages Many of the problems given on the previous page are technology issues. Once a solution is found, frames may become more attractive. Example: MS IE 5.0 supports frames better than previous versions. Benefits of frames

9. 9 Use frames only when the benefits outweigh the disadvantages. Tables or shared borders can be used instead of frames to place a navigation bar, table of contents, or other item on the edge of the page. Frames have become much less popular at large web sites. Conclusions about frames

10. 10 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

11. 11 Topics 1.What are frames? Good or evil? 2.Definition of information architecture a)Organizational systems b)Navigation systems c)Labeling systems d)Searching issues 3.Early warning about the midterm

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

13. 13 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

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

15. 15 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

16. 16 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 Ambiguous organization schemes

17. 17 Use with caution! If you must have hybrid schemes, separate them clearly or you will create confusion. Hybrid organization schemes Bad Library Listing Adult Arts & Humanities Community Center Get a Library Card Learn About Our Library Science Social Science Teen Youth 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

18. 18 The structure of information defines the ways in which users can navigate. Example: Street structure in NYC vs. ParisParis The main organizational structures are: Hierarchy Hypertext Database Each structure has its strengths and weaknesses. Organization structures

19. 19 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. Hierarchical structure

20. 20 Types of hierarchies Broad and shallowNarrow and deep http://facweb.cs.depaul.edu/asettle/

21. 21 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. Designing hierarchies

22. 22 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 Hypertext structure

23. 23 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 BaconThe Oracle of Bacon Database structure

24. 24 Topics 1.What are frames? Good or evil? 2.Definition of information architecture a)Organizational systems b)Navigation systems c)Labeling systems d)Searching issues 3.Early warning about the midterm

25. 25 A good navigation system: Helps exploration/orientation The page must indicate its location within the site. http://www.cs.depaul.edu/ 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 http://www.amazon.com Navigation systems

26. 26 Most browsers offer built-in navigational features: URL : direct access to any page Back/forward : bidirectional 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. Built-in navigational features

27. 27 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: www.cs.depaul.eduwww.cs.depaul.edu Providing flexibility: Multiple means of navigation are important. At the very least, provide a link back to the main page for a site/subsite. Purposes of navigation systems

28. 28 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 portal page.portal 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 systems

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

30. 30 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 …) Building a navigation system

31. 31 Topics 1.What are frames? Good or evil? 2.Definition of information architecture a)Organizational systems b)Navigation systems c)Labeling systems d)Searching issues 3.Early warning about the midterm

32. 32 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

33. 33 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

34. 34 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

35. 35 Indexing labels are crucial to the site. Either found in the Meta tag or in the title. Used by search engines. Should be descriptive and representative of the site’s purpose. Example: http://www.clearinghouse.nethttp://www.clearinghouse.net Indexing labels

36. 36 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: – http://www.amazon.com http://www.amazon.com – http://facweb.cs.depaul.edu/asettle/ect250/section501/hw/assign4.htm http://facweb.cs.depaul.edu/asettle/ect250/section501/hw/assign4.htm Link labels

37. 37 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: http://www.amazon.com http://www.chicagotribune.com Heading labels

38. 38 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 Iconic labels

39. 39 Topics 1.What are frames? Good or evil? 2.Definition of information architecture a)Organizational systems b)Navigation systems c)Labeling systems d)Searching issues 3.Early warning about the midterm

40. 40 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. How users search

41. 41 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?

42. 42 The midterm is scheduled for Wednesday, February 7th from 1:30 – 3:00 pm here. There are no makeup exams! The exam will cover everything up to and including the lecture on Mon., Feb. 5th. A study guide will be available by Fri., Feb. 2nd. We will discuss the exam in more detail next lecture. The midterm