1. A Metro Map Metaphor for Guided Tours on the Web: the Webvise Guided Tour System Elmer S. Sandvad, Lennert Sloth, and Jørgen Lindskov Knudsen Hypergenic A/S Helsingforsgade 27 DK-8200 Århus N, Denmark www.hygergenic.com Kaj Grønbæk Department of Computer Science, University of Aarhus, Åbogade 34, DK-8200 Århus N, Denmark. kgronbak@daimi.au.dk

2. Plan Guided tours on the Web The Webvise system The Webvise Guided tour extension User interface The metro map metaphor Architecture and XML format Related systems Conclusion & Status

3. Guided tours on the Web Navigating a specific topic on the Web is difficult collected, categorized and annotated pages in portals, digests, directories, and guided tours may help Guided tours have become quite common on the Web "guided tour" gave more than 450.000 hits on Google Many of these hits represent sites that present a certain topic in a sequence of web pages and commented links Only few of the existing guided tours are made by a dedicated guided tour system. They are created manually in plain HTML with some 'next' and 'previous' links at the top or the bottom of the page. Mixed content and structure - hard to maintain

4. Need for guided tours Many application domains call for new ways to present procedures or collections of information in coherent ways. Teachers, librarians, Web journalists, portal editors, publishers, governmental administration etc. Systems explicitly supporting guided tours for the Web are: Pooh's Guided Tours Service Footsteps Walden's Paths Ariadne (Aarhus University – presented at WWW7, Brisbane)

5. Link object I medfør af § 93, stk. 2 i bekendtgørelse nr. 1053 af 18. december 1995 om levnedsmiddelhygiejne og egenkontrol m.v. og § 20, stk. 2 i bekendtgørelse nr. 931 af 6. december 1995 om materialer og genstande bestemt til at komme i berøring med levnedsmidler fastsættes: Ændringsbekendtgørelse nr. 1053 af 18. juli 1997 om..... Webvise open hypermedia system – papers at WWW8 and WWW9 Portfolios with links and notes are stored in separate XML files One or more portfolios on top of the same Web documents Create links between Web-pages, MS Word and Excel-documents, PDF documents etc. The created notes and links are shown on top of existing material (incl. third party documents ) Recently extended to support guided tours

6. The note is anchored in the page and edited in a Note editor The note marker is shown in optional color e.g. red on the page The note either appears in the page or pops up as a tooltip Links are added via the Explorer context menu User Interface: Webvise Notes & Links

7. Webvise Guided Tour Extension Editor and HTML/PNG generator

8. Guided tour editor - Map creation

9. Adding a page to a guided tour Context menu supports addition Addition may also be done by Drag & Drop

10. The route editor – editing the appearance of a single route

11. Webvise Guided Tour HTML-generator Generates browser-independent HTML and PNG files, which enables publication of guided tours to users without Webvise The guided tours are shown as a metro map where you may follow specific routes Applying a variety of graphical metaphors Metro maps explored in this work Mind maps, topic maps etc. being explored

12. A Webvise generated Metro map

13. Generated route map

14. The Metro Map Metaphor Simplified map of a complex world Familiar to many users Key characteristics of the physical metro The metro map makes it easy to find the route that leads to your destination(overview and navigation) Horizontal route map inside the metro train assure that you easily can findout where you are on the route (orientation) Organizing web pages in subject routes using the metro map methaphor can benefit from the same advantages as the physical metro. Inspired by the Chalmers Library guide (http://educate2.lib.chalmers.se/demopath.html)

15. Growing set of applications

16. Architecture of the System DDE

17. Generated code for Metro map … … <AREA HREF="http://www.hba.dk/metro/StrategiFrame.html" onMouseOver="window.status='Strategi';return true" ALT="" SHAPE=CIRCLE COORDS="358,173,11"> <AREA HREF="http://www.hba.dk/metro/SgeprofilFrame.html" onMouseOver="window.status='Søgeprofil';return true" ALT="" SHAPE=CIRCLE COORDS="330,162,11"> <AREA HREF="http://www.hba.dk/metro/MerkurFrame.html" onMouseOver="window.status='Merkur';return true" ALT="" SHAPE=CIRCLE COORDS="302,151,11"> …

18. OHIF encoding of guided tours (DTD:http://www.daimi.au.dk/~les/ohif/ohif.dtd) The Guided Tour 54272,53248,51200 4 4 A Station.... v1.0 http://www.hba.dk/metro/informationssøgning/merkur.htm baseUrl [url]http://www.hba.dk/metro/informationssøgning/merkur.htm[/url] [frameName][/frameName]...... label Merkur position 421,163...

19. Related systems(1) Pre-processing systems: Pooh's Guided Tours Service,Walden's Paths and Footsteps They compile navigation button code into the HTML code of content pages Weaknesses Increased Internet traffic Limits the browser's navigational options: Bookmarks, Home, Open Location etc. will terminate the traversing of the tour. Pre-processing is difficult, e.g. JavaScript, forms, and frames. Lacking overview of tours Only linear tours are supported.

20. Related systems(2) Applet/Helper Application systems: Ariadne and the Opasia Portal version of Ariadne are based on a Java applet that maintains the graphical representation of the guided tour Ariadne solves many of the pre-processing system problems, e.g. no need to insert code in the content pages Weaknesses of the Ariadne system as well: It is not possible to bookmark a page in a tour and return to this page within the context of the tour later. Ariadne occupies more screen space for presenting the guided tours. Webpath is a customized Internet Explorer based browser - hard to spread and maintain

21. Conclusion Webvise can be used to improve the overview and quality of an Internet/Intranet/Extranet site present an analysis of your own and others material on the web, together with your own links and notes develop teaching, training, and guiding sequences on web-based material The main advantages of the system are: a browser independent format in terms of HTML and PNG based image maps for reading the guided tours; overview maps and route maps with indication of which stations of a tour have been visited; and finally support for arbitrary web pages as stations on tours. support for a variety metaphors, the familiar metro map was a starting point

22. Status Webvise is marketed by Hypergenic under the name WebNize 1000 Guided tour support for both MSIE and Netscape Navigator browsers New metaphors for mapping topics on the Web will be explored An applet-based sister product based on the Ariadne prototype is marketed under the name WebNize 100 The two products share the same XML-based OHIF format

23. User Interface: WebNize 100 WebNize 100 ViewerInternet Explorer See http://www.hypergenic.com