WaypostEye a Software Tool for Navigation Improvement Support of Adaptive Websitesepa.oszk.hu/02400/02461/00053/pdf/EPA02461_acta... · 2014. 12. 16. · Acta Polytechnica Hungarica

Acta Polytechnica Hungarica Vol. 11, No. 7, 2014

– 61 –

WaypostEye – a Software Tool for Navigation

Improvement Support of Adaptive Websites

Željko Eremić1, Dragica Radosav

2

1 Technical College of Applied Sciences, Djordja Stratimirovića bb, 23000

Zrenjanin, Serbia, [email protected]

2 University of Novi Sad, Technical faculty "Mihajlo Pupin", Djure Djakovića bb,

23000 Zrenjanin, Serbia, [email protected]

Abstract: One frequently used method for navigation improvement of web sites is to

establish a link between resources such as web pages or files, when it is fully justified.

Adaptive web sites may change their display and structure based on a previously recorded

user's behavior. The software tool that is described in this paper provides the designer with

a graphical presentation of established link proposals between resources. In this way, it

supports the designer's decisions referring to establishing new links between resources.

Therefore, it makes a contribution to the improvement of the navigational structure of such

web sites. This software establishes decision support information and Web designers are

able to make business decisions in a relatively easy and visual way.

Keywords: adaptive website; waypost; website design

1 Introduction

When designing a website, an important aspect is to check the resource

connections (web pages, files) within a site. The navigation structure in the web

site is often not in keeping with the wishes and expectations of visitors. It often

appears that a user must visit a number of web pages in order to get to the desired

content. Well placed links on the pages can make a significant contribution to

faster and easier access to the desired content. "Providing a link (i.e., shortcut)

between these potential wayposts could assist users by reducing the number of

clicks they have to make while browsing, pointing them in the right direction

towards a specific target document." [1].

Adaptive web sites can customize their look and structure to meet the aspirations

of user for fast and comfortable navigation. Users’ behavior (navigation),

previously recorded in log files, is used for the detection of the users’ objective.

By the appropriate processing of these data, it is possible to obtain the estimates of

Ž. Eremić et al. WaypostEye – the Software Tool for Navigation Improvement Support of Adaptive Websites

– 62 –

the resources that need to be connected using the hyperlinks. Each proposed

hyperlink is evaluated on the basis of contributions to the navigation

improvement. Based on the list of suggested links, the connections can be made

between the resources, either automatically or manually added by the designer.

If the resources, which are located in the existing navigation, can be connected by

adding links, these links can significantly accelerate the navigation through the

website. This paper aims to present a software tool called WaypostEye which can

graphically represent the distances between directly related web pages. In this way,

the decision support is provided in the re-designing process of adaptive website

navigation. Although the software tool is ready for use, its main function is to

present the ideas on which it is based.

2 Previous Studies

Adaptive web sites are defined in [12] as "web sites that improve themselves by

learning from user access patterns". In the previously mentioned article it is

described the improvement in webmaster’ understanding the interaction among

visitors and the web site. Adaptive web sites often use information about previous

user’s behavior which is stored in log files. That information is in the standard

form which is suitable for computer processing. General details referring to the

log files are given in [11].

Shortcutting is a common way to improve the navigation on the web site. The

article [1] considers using waypost documents as a relevant factor in process of

improving classic shortcutting. Two illustrations of identifying waypost

documents are given in [8].

Interaction events could be recorded for various digital objects (e.g. web pages).

Those recordings could be used for better understanding of digital objects. Article

[9] introduces history-enriched digital objects, describes a few prototypes and

discusses privacy issues. The limited set of information stored in log files could be

combined with the use of history-enriched digital objects, which has no such

limitation. One approach comes from The Footprints project [14], which allows

users to create history-rich digital objects in digital environment. Framework and

software tools for visualization of navigational structure are developed to support

the theory which claims that activities of past users could help new users in

navigation through the space of information.

Displaying web site’s navigational structure, for its improvement purposes, can be

a challenging task. Fisheye technique implemented in hyperbolic browser,

presented in [10], can visualize large hierarchies. The method for getting list of

proposed shortcuts, based on recordings in log files, is explained in details within

[5]. Its output is one of inputs in WaypostEye software tool.


– 63 –

There are many areas where improved web site’s navigation can bring benefits,

and one of them is education. One approach to reduce omitting relevant

documents and avoid user’s withdraw from the web site is given in [6]. This

approach reduces the number of clicks, avoiding visits to non-interesting

documents (web pages) by offering links to potentially interesting documents.

While log files enable a better navigation from past information, there are

possibilities to get help in navigation at the moment of browsing. One possibility

is given in [7], where one user can ask another for help in a navigation process.

That possibility is the combination of adaptive web site and Ajax. History-

enriched digital objects in combination with Ajax and database could be used for

storing information about the knowledge sharing among users in real time, as

described in [4]. Those objects in combination with log files could be great help

for designing the efficient navigation of adaptive web site. Article [4] gives a

conceptual and physical model, for the database required for recording knowledge

in real time.

A parallel could be drawn with an interesting idea of Flexible Graphical User

Interface presented in [2]. Proposed intuitive interface significantly reduces the

task execution time and the number of interactions in the communication between

a man and a machine.

3 WaypostEye

WaypostEye is a software tool that, graphically and appropriately, presents the

optimal navigation proposal to the website designer. It uses the data from the input

files and the results can be displayed in a number of ways.

The software tool (Figure 1) that is presented in this paper uses two files as the

input where each file contains the correct type of information in the prescribed

format:

Structure File - Navigational structure file which contains the information

about the existing relationships between resources (web pages or files).

The first element of the pair is a resource which has a hyperlink to the

second element of the pair.

Shortcuts File - The file that contains the proposed links between

documents based on the previous analyses of user's behavior. The first

element of the pair is a resource with a proposed hyperlink to the second

element of the pair.


– 64 –

WaypostEye Processor

Various graphs and text

outputs (e.g. Piccolo2D...)

Structure

File

Shortcuts

File

WaypostEye

Figure 1

Input files and components of WaypostEye tool

"WaypostEye Processor" is a part of WaypostEye tool which stands between the

input data (files) and the particular display of processing results. This part accepts

the input data and provides a list of resources possible to perform the analysis of

the current ones and recommended connections to other resources. When the user

selects the appropriate resource, the graphical illustration of existing connections

of this resource to other resources is given, as well as a proposal for the

establishment of new hyperlinks.

The results can be graphically and textually presented. In this paper the results are

presented using a graph based on a free and open source solution [13], but the list

of possible outputs can be easily expanded.

The tool will be presented using the example of a simple web site which contains

numerous resources. Each of the resources, as it is shown in the example, is

associated with one or more resources, but there is no resource that is connected to

all other resources. For the sake of simplicity, the simple rule has been established

in this example - if resource A has a link to resource B, then resource B has the

link to the resource A. Furthermore, four proposals for establishing connections

between the unrelated pairs of resources have been also given. The navigation

structure of the observed example and connection proposals are given in Figure 2.


– 65 –

Figure 2

The example of a navigational structure, the connections are represented by solid lines, and suggested

links (shortcuts) in dotted lines. Resources are represented by the title and the name of its file.


– 66 –

4 Input Data

The first file (the navigation structure file) contains two kinds of information

related to the existing navigation structure:

Arranged pairs of resources that, are currently directly related.

Title – Path pairs which connect the resource name with the path to the

resource.

A console application which requests entering a web location has been created for

the purpose of this research work (in the example, the experimental web site is

located at localhost:54954/site43/). The application also requests entering the

name of the file in which the analysis results of the existing navigation structure

will be put. Figure 3 shows an example of console applications, and Figure 4

shows the parts of the file "structure.xml" containing the analysis results of

console applications. The same result could be obtained by the expression in the

command line "Crawler.exe localhost:54954/site43/ structure".

The previously mentioned xml file contains, in its first part, the arranged pairs of

resources. By analyzing the HTML code, it was clear that there was a connection

between those pairs of resources. The resource with a tag Source contains a link to

a resource with a tag Destination. It should be emphasized that, if there is a

connection from resource A to resource B, it does not necessarily mean that a link

from B to the resource A exists. The connections between the name of the

resource and its path are in the second part of the file.

The second file contains output data (in XML format) from the software described

in [5]. This file, which example is shown in Figure 5, contains pairs of resources

for which establishing connections is recommended.

5 Experiment

The experiment demanded adequate software support. The development

environment used was Visual Studio 2008. The test site with the appropriate web

pages was made with ASP.NET technology. Web pages were given appropriate

headings (Title attribute), and they were associated with other Web pages in

accordance with Figure 2. By using the C# programming language, a console

application "Crawler" was made. It was used to analyze the structure of the

existing website and store the results in an XML file. The software called

"WaypostEye" was also made using C#.


– 67 –

Figure 3

The console application that performs analysis of the site (localhost:54954/site43/) and stores the

analysis results in the file (structure.xml)

Running the software takes us to the main window (Figure 6). The previously

mentioned two input files need to be loaded. Afterwards, the list of resources of

observed site is obtained in the lower part of the window. Appropriate

transformations are done in WaypostEye software and finally, the output data are

obtained. These data can be presented in different textual and graphical ways.

Only graphical output based on the use of Piccolo2D [13], is supported at this

stage of software development (version 1.0).

At this point, a resource needs to be selected from the lower section, in order to

obtain the display of the existing connections for the resource, as well as, the

connections of resources which should be associated with the observed document

based on the content of the shortcut file. The result is the graph, in Figure 7. The

documents are presented by their names inscribed in the rectangles of different

colors. This document is inscribed into a black rectangle. The documents,

associated with this selected document, are presented by a light gray rectangle and

they are circularly arranged in relation to this document.

The paths towards the documents, which should be connected to the current

document, are also presented on the graph. If there are multiple paths between

documents, the shortest one is selected using Dijkstra's algorithm, described in [3].

In the given example, the selected "Document-7" should be connected to the

"Document-2" (currently connected via the "Document-5"), and "Document-10"

(currently connected via the "Document-12").


– 68 –

Figure 4

The parts of the file "structure.xml" obtained by an analysis. In the first (upper) part there are links

between resources, and in the second (lower) part are connections between the name of the resource

and its path

Picolo2D graph [13], allows changing the zoom of the whole graph, moving all

the elements of the graph or each of the elements by using a mouse. If you double-

click on any graph documents, it becomes a central element of the new graph

(Figure 9), and acts as if the document has been selected in the lower section of

the form in Figure 6.

6 Directions of Further Development

Previously mentioned software tool represents a convenient way for a website

designer to take advantage of the results of the complex analysis of the previous

user’s behavior, and also to have a possibility to accept or reject a number of the

results.

Figure 5

Recommended links between currently unrelated documents


– 69 –

Figure 6

The main window of WaypostEye software

Figure 7

Graph which refers to selected document

Figure 8

The graph which is related to the selected document, where by using a mouse, the resources are

arranged in such a way to be more ordered


– 70 –

Figure 9

The graph which is related to the selected document "Document-1", where by using a mouse, the

resources are arranged in such a way to be more ordered

In this way, the designer is in a position to make better business decisions in an

easier way. There are several directions in which the tool could be developed in

the future. The presentation of the results could be extended to various graphic

and textual outputs so that the designer could choose the way of presentation that

suits him best. If users are given a possibility to leave their comments during the

navigation, these comments could appear in the graphs, giving the designer a

possibility to read the users’ comments and to take some suggestions on board.

Conclusions

One of the tasks in the process of designing a website is to create an efficient and

intuitive navigation structure. Web site users often find it difficult to find a

resource that they need, or the path to the resource requiring a long series of visits

to various other web sites. Adaptive web sites create the possibility of the dynamic

addition of links between the resources that are not connected and when there is a

justification for these connections. The software, such as the one described in [5],

enables us to obtain the connection proposals which should be established

between resources based on the user’s behavior previously recorded in log files.

Such connections are not often obvious, and a serious analysis is required in order

to obtain them. Current navigational structure is relatively easily obtained by

HTML code analysis, which is performed by custom software.


– 71 –

WaypostEye is a software tool that uses two types of input from the website:

Arranged pairs of connections for the current navigational structure, with

the connection between the resource name and the path is recorded.

Arranged pairs of connections which should be established between

formerly unrelated documents.

This software tool provides, at its output, the resource nodes that are directly

linked to the selected document, as well as the documents (including the inter-

documents of shortest path by Dijkstra algorithm, described in [3]), to which the

selected document should be directly linked. In this version, the tool offers only

one possible solution, based on the Piccolo2D [13] solution, but in the future it

would be possible to easily add a variety of outputs, either graphical or textual,

based on the output data obtained by this tool. The usage of this tool gives

adaptive web site designers the possibility to consider the proposals for the new

connections which are offered to them. A quick and straightforward business

decision can be also made based on this graphical output.

References

[1] Bathumalai G.: Self Adapting Websites: Mining User Access Logs, The

Robert Gordon University, Jun, 2008

[2] Dániel B., Korondi P., Sziebig G., Thomessen T.: Evaluation of Flexible

Graphical User Interface for Intuitive Human Robot Interactions, Acta

Polytechnica Hungarica, Vol. 11, No. 1, 2014, pp. 135-151

[3] Dijkstra E. W.: A Note on Two Problems in Connexion with Graphs,

Numerische Mathematik, Vol. 1, No. 1, 1959, pp. 269-271

[4] Eremić Ž.: History-enriched Digital Objects as a Factor of Improvement of

Adaptive Educational Web Site Navigation, Journal of Information

Technology and Applications, Banja Luka, 2012, pp. 39-43

[5] Eremić Ž.: Navigation Improvement of Adaptive Web Sites by Using Log

Files, PhD thesis, Technical faculty "Mihajlo Pupin", University of Novi

Sad, Zrenjanin, 2012

[6] Eremić Ž., Radosav D.: Adaptive Web Sites in the Function of Information

Access Improvement in Education, Information technology and

development of education – ITRO 2011, Zrenjanin, pp. 343-347, 2011

[7] Eremić Ž., Radosav D.: Collaborative User Support as a Contribution to

Navigation Improvement of Adaptive Websites for Distance Learning,

Information Technology and Development of Education – ITRO 2012,

Zrenjanin, 2012, pp. 265-269

[8] Eremić Ž., Radosav D., Markoski B.: Mining User Access Logs to

Optimize Navigational Structure of Adaptive Web Sites, Proceedings of the

CINTI 2010: 11th

IEEE International Symposium on Computational

Intelligence and Informatics, Budapest, 2010, pp. 271-275


– 72 –

[9] Hill W., Hollan, J.: History-enriched Digital Objects, Proceedings of

Computers, Freedom: and Privacy (CFP’93), 1993, pp. 139-145

[10] Lamping J., Rao R., Pirolli P.: A Focus+Context Technique Based on

Hyperbolic Geometry for Visualizing Large Hierarchies, Proceedings of

CHI’95 Conference on Human Factors in Computing Systems, ACM Press,

1995, pp. 401-408

[11] Pamnani R., Chawan P.: Web Usage Mining: A Research Area in Web

Mining, Paper presented at the International Conference on Recent Trends

in Computer Engineering ISCET 2010, Punjab, India, 2010, pp. 73-77

[12] Perkowitz M., Etzioni O.: Adaptive Sites: Automatically Learning from

User Access Patterns, In Proc. 6th

Int. World Wide Web Conf, Santa Clara,

California, April 1997

[13] Piccolo2D, http://www.piccolo2d.org (Accessed on February 18th

2013)

[14] Wexelblat A., Maes, P.: Footprints: History-Rich Tools for Information

Foraging, Proceedings of the SIGCHI conference on Human factors in

computing systems: the CHI is the limit, 1999, pp. 270-277

Documents

WaypostEye a Software Tool for Navigation Improvement Support of Adaptive Websitesepa.oszk.hu/02400/02461/00053/pdf/EPA02461_acta... · 2014. 12. 16. · Acta Polytechnica Hungarica