Vol. 43 No. 12 Dec. 22 Web Web 1 Web 1 Web inlinelink inlinelink Web Dynamic HTML inlinelink Web Realization of Inline Expansion Functions on a Conventional Web Browser MOTOKI MIURA, BUNTAROU SHIZUKI and JIRO TANAKA Conventional web browsing is performed by displaying a web page inside one window. Following of a link in conventional web browsing replaces the previous document entirely, and the readers tend to lose the context. We have designed a system inlinelink, which applies an inline expansion method to web browsing. The inline expansion means to insert the linked document after the link anchor. inlinelink provides navigation mechanisms such as automatic animated scrolling, zooming and index-jumping in order to reduce the scrolling tasks while handling the longer inlined documents. We have adopted Dynamic HTML to implement the inline expansion functions. Casual users can try them on conventional web browsers. The results of our experiment prove the advantage of inlinelink in click counts and the length of mouse movement. 1. Web 2. inlinelink Web Web inlinelink 1) inlinelink Web Web 1982 Peter Brown Guide 2) Replacement-button Replacement-button Web Institute of Information Sciences and Electronics University of Tsukuba 376 2.1 Guide Guide inlinelink Guide Replacement-button Web
Vol. 43 No. 12 Web 377 HTML Web inlinelink Web Open Anchor Close Anchor 1 inlinelink 1 Open Anchor 1 Web Open Anchor Close Anchor Close Anchor 1 2.2 Guide inlinelink 2.4 Guide Web inlinelink 3) 2.5 2.3 Web inlinelink Web Web ( 1 ) Web ( 2 ) 1 1 (1) (2) 2 2.5.1 2 inlinelink
378 Dec. 22 Close Anchor Open Anchor Close Anchor Fig. 1 1 inlinelink An example behavior of link anchors in inlinelink (1) (2) (3) 2 expand shrink 2.5.2 inlinelink 3 ( 1 ) ( 2 ) ( 3 ) 2 Fig. 2 Partial insertion anchors for adjustment Partial Insertion Area Partial Insertion Area Open Anchor
Vol. 43 No. 12 Web 379 inlinelink 3 3. inlinelink 3 Model (DOM) 6) Fig. 3 Zooming out and Index List functions: Index List appears near the mouse cursor. Dynamic HTML inlinelink Guide 4) inlinelink 3.1 inlinelink 2 ( 1 ) ( 2 ) Close Anchor 1 3.1.1 In- line Frame Inline Frame Inline Frame HTML4. Transitional DTD 7) iframe Jazz 5) 3 <iframe src=uri></iframe> Web inlinelink Dynamic HTML HTML World Wide Web Consortium (W3C) Document Object Web URI (Uniform Resource Identi- fier) Inline Frame
371 Dec. 22 Inline Frame [original anchor] <a href="http://www.google.com/"> 3.1.2 [open anchor] <span id="_google"> 2 <a href="javascript:insert_page( _google, http://www.google.com/ );"> (1) google span ID (2) </a></span> (Open Anchor) 2 4 [original anchor] [open anchor] Open Anchor http://www.google.com/ );"> google! </a> JScript insert page() 3 <div id="_google-div"> (1) Open Anchor span <!-- the contents will be replaced as target page source --> div </div> <a href="javascript:remove_page( _google, Close Anchor 4 http://www.google.com/ );"> [open anchor] [close anchors and inlined (close) </a> document] (2) </span> Inline Frame URI (src ) Inline Frame (3) Inline Fig. 4 Rewriting of an HTML anchor tag 4 Frame div 3.2.1 inlinelink Close Anchor inlinelink JScript remove page() ID div span [close anchors and inlined document] [open anchor] (Open Anchor) 3.2 (1) (1) Web inlinelink (2) JavaScript (2) inlinelink (Open Anchor) 2 Open Anchor inlinelink Open Anchor inlinelink 2 google </a> [close anchors and inlined document] <span id="_google"> <a href="javascript:remove_page( _google, inlinelink 3.2.2 3.2.1
Vol. 43 No. 12 Web 3711 5 inlinelink Converter: URI 2 inlineservlet Fig. 5 inlinelink Converter: inlineservlet converts anchors of the requested URI page inlinelink Java (Servlet) (inlineservlet) URI Java 1 1 Table 1 Order of tasks in experiment 1 HTMLParser (A) (B) URI inlineservlet (1) 1-8 [1st] normal inline (2) 9-15 [1st] inline normal inlineservlet (3) 1-8 [2nd] inline normal (4) 9-15 [2nd] normal inline inlineservlet 4.2 2 (Glossary) HTML inlineservlet 5 URI [convert] URI ISO inlinelink IEC URI 2 inlineservlet XGA 4.1 1 (Dired) Emacs Directory Editor (Dired) 16 15 Dired 15 inlinelink XGA 63 18 15 2 (A) (B) 1 (1) (4) 1 Internet Explorer 5.5 [normal] [inline] 4. GNUjdoc Emacs Web texi2html texinfo HTML Directory Editor 3 http://openlab.ring.gr.jp/gnujdoc/cvsweb/cvsweb.cgi/gnujdoc/emacs- 2.6/
3712 Dec. 22 inlinelink 1 & 6 [Glossary] 12 6 3 1 Internet Explorer 6. [normal] [inline] 2 [inline(adjust)] [inline] [inline(adjust)] 6 7 8 2 5% t 4.3 3 (TBL) Tim Berners-Lee Web Style Guide for online hypertext 28 [Dired] [Glossary] inlinelink [in- 23 line] [inline(adjust)] [TBL] in- [inline] linelink 1 [TBL] 5 2 12 6 3 [normal] [inline] [inline(adjust)] Open Anchor 1 2 3 [Dired] 2 Open Anchor Close [inline] [inline(adjust)] Anchor [Dired] [Glossary] [Glossary] 4.4 [TBL] [Dired] 5 1 [Glossary] 2 3 [TBL] 1 2 [normal] http://www.kanzaki.com/docs/style/ & (t) + [inline(adjust)] [Glossary] [Dired] inlinelink
Vol. 43 No. 12 Web 3713 4 Click Counts (time) 25 Mouse Move (inch) 25 Working Time (sec) 35 3 2 2 25 2 15 1st 2nd 15 1 1st 2nd 15 1 1st 2nd 1 5 5 5 normal inline (n=15) normal inline (n=15) normal inline (n=15) Fig. 6 6 1 (Dired) Result of experiment 1 (Dired) 7 Click Counts (time) 4 Mouse Move (inch) 3 Working Time (sec) 6 35 25 5 4 3 2 1 3 25 2 15 1 5 2 15 1 5 normal inline inline (n=12) (adjust) (n=12) normal inline inline (adjust) 7 2 (Glossary) Fig. 7 Result of experiment 2 (Glossary) normal inline inline (n=12) (adjust) 2 Table 2 t Result of t-test mouse mouse wheel wheel mouse 5% click move time up down drag Dired normal-inline +2.78 +2.24 (+1.4) 1.7 Glossary normal-inline +4.52 +3.47 (+1.65) -2.4-4.37 +3.5 1.8 Glossary normal-adjust +4.62 +3.31 (+1.15) (-1.6) (-1.72) +2.96 1.8 Glossary inline-adjust (+.32) (+.71) (-.46) (+.53) +2.12 (-.89) 1.8 TBL normal-inline (+.93) +2.12 (+1.12) (-.36) (+.62) (+1.74) 1.8 TBL normal-adjust (-.26) (+1.26) (+.4) -2.52 (+.3) +2.38 1.8 TBL inline-adjust (-1.38) (-1.66) (-1.41) -2.6 (-.45) (+1.3) 1.8 [Glossary] [Glossary] [TBL] [Glossary] [normal] [Glossary] [inline(adjust)] [TBL] [normal] [TBL] [inline] inlinelink [normal]
3714 Dec. 22 Click Counts (time) Mouse Move (inch) Working Time (sec) 6 3 4 5 25 35 3 4 2 25 3 15 2 2 1 15 1 1 5 5 normal inline inline (n=12) (adjust) (n=12) normal inline inline (adjust) (n=12) normal inline inline (adjust) 8 3 (TBL) Fig. 8 Result of experiment 3 (TBL) 1 1 Tauscher Web 8) Web 4% 3% Back 2 inlinelink 5. 5.1 Web inlinelink 2.5.2
Vol. 43 No. 12 Web 3715 5.2 inlinelink 2.5.2 inlinelink inlinelink inlinelink Fluid Link 11),12) (gloss) [Previous][Next][Top] Fluid Link 3.2.1 inlinelink inlinelink Fluid Link Web (Open Anchor) 1 6.2 Elastic Windows 13),14) Web Web Microsoft Web CSS (Cascading Style Sheet) 1 2 inlinelink Zero-Click 15) inlinelink 6. Web 2 1 SmallBrowse 16) Web PBE (Programming by 1 Web Example) PDA 6.1 inlinelink Visual Link Preview SmallBrowse Visual Link Preview 9) TipHelp HyperScout Linktool 1) inlinelink SmallBrowse inlinelink
3716 Dec. 22 1) Miura, M., Shizuki, B. and Tanaka, J.: inlinelink: Inline Expansion Link Methods in Hypertext Browsing, Proceedings of 2nd International Conference on Internet Computing (IC 21), Vol. II, pp. 653 659 (21). 2) Brown, P. J.: Turning Ideas into Products: The Guide System, Hypertext 87 Proceedings, pp. 33 4 (1987). 3) Nielsen, J.: Multimedia and Hypertext: The Internet and Beyond, AP Professional, chapter9, pp. 247 278 (1995). 4) Nielsen, J. and k, U. L.: Two field studies of hypermedia usability, Hypertext: state of the art (McAleese, R. and Green, C.(eds.)), Intellect Ltd., chapter 7, pp. 64 72 (199). 5) Bederson, B. B., Meyer, J. and Good, L.: Jazz: An Extensible Zoomable User Interface Graphics Toolkit in Java, Proceedings of the 13th annual ACM Symposium on User Interface Software and Technology (UIST2), pp. 171 18 (2). 6) : Document Object Model (DOM) Level 2 Specification, (Web Page) (2). http:// www.w3.org/tr/dom-level-2/cover.html. 7) (W3C), W. W. W. C.: HTML 4.1 Specification, (Web Page) (1999). http://www.w3.org/tr/ html41/. 8) Tauscher, L. and Greenberg, S.: How People Revisit Web Pages: Empirical Findings and Implications for the Design of History Systems, Interna- 7. tional Journal of Human-Computer Studies, Vol. 47, No. 1, pp. 97 138 (1997). Web 9) Kopetzky, T. and Mühlhäuser, M.: Visual Preview for Link Traversal on the WWW, Proceedings of inlinelink inlinelink the 8th International World Wide Web Conference (WWW8) / Computer Networks 31 (11-16), pp.1525 inlinelink 1532 (1999). Web 1) Weinreich, H. W. R. and Lamersdorf, W.: Concepts inlinelink for Improved Visualization of Web Link Attributes, Proceedings of the 9th International World Wide Web Web Web Conference (WWW9) / Computer Networks 33 (1-6), pp. 43 416 (2). 11) Zellweger, P. T., Chang, B.-W. and Mackinlay, inlinelink URI J.: Fluid Links for Informed and Incremental Link http://www.iplab.is.tsukuba.ac.jp/ miuramo/inlinelink/ Transitions, Proceedings of HyperText 98, pp. 5 57 (1998). 12) Zellweger, P. T., Regli, S. H., Mackinlay, J. D. 8. and Chang, B.-W.: The Impact of Fluid Documents on Reading and Browsing: An Observational Study, Proceedings of the CHI 2 conference on Human factors in computing systems (CHI ), pp. 249 256 (2). 13) Kandogan, E. and Shneiderman, B.: Elastic Windows: A Hierarchical Multi-Window World-Wide Web Browser, Proceedings of the 1th annual ACM Symposium on User Interface Software and Technology (UIST 97), pp. 169 177 (1997). 14) Kandogan, E. and Shneiderman, B.: Elastic Windows: Evaluation of Multi-Window Operations, conference proceedings on Human factors in computing systems (CHI 97), pp. 25 257 (1997). 15),, : Web Zero-Click, IX,, pp. 131 136 (21). 16) Sugiura, A.: Web Browsing by Example, Your Wish is My Command Programming by Example (Lieberman, H.(ed.)), Morgan Kaufmann Publishers, chapter 4, pp. 61 85 (21). ( 22 4 15 ) ( 22 1 7 )
Vol. 43 No. 12 Web 3717 1974 1997 21 1984 Ph.D. in Computer Science 1993 (TARA) Web 21 (TARA ) ACM 1971 1994 2 ACM IEEE Computer Society 1951 1975 1977 ACM IEEE Computer Society