107 CHAPTER 7 USER INTERFACE MODEL 7.1 INTRODUCTION The User interface design is a very important component in the proposed framework. The content needs to be presented in a uniform and structured way. The interface of operation needs to be designed in tandem with the interaction models. The contributions of this work are the definition of a standard template of operation for the search and information retrieval process, the use of hyperlinked cues for ease of navigation. The screens for the operations in the search for information from the web through mobile devices have been codified in a uniform manner. This is important as five context modes have been proposed. The user must be able to navigate through the system to access the search results efficiently. The User interface system must not add its own overheads to the processing, and must be capable of being implemented by overcoming the limitations in terms of the limited interaction capabilities of the mobile devices. Relevant to the search process is the access to information. Once the user has identified the result that is needed, the system must have facilities to reproduce the content in the mobile devices. While the focus of the system is purely in terms of information retrieval, the ability to display the resultant content is paramount to the users. The hyperlinked cues will help the user identify and process the information easily.
108 7.2 CONTENT ADAPTATION The overall view of the module is given below in Figure 7.1. The aim is to adapt the contents of the web pages after processing, based on the various context modes, and then display the same to the user. Figure 7.1 User Interface Design Overall model The approach used is such that each context mode is considered a separate event, and all the activities in that event are mapped thoroughly. For example, the Fast context mode will involve only three steps; Step 1.The User selects the fast context mode Step 2.The User enters the query Step 3.The search results are displayed to the user.
109 While the Personal context mode consists of the following steps; Step 1.The User selects the personal context mode Step 2.The user enters the query Step 3. User selects the content from the ontology for refining the query Step 4.The content from ontology is shown to the user. Step 5.Each word is marked with a hyperlinked number. Instead of selecting from the list using multiple keys, the user has to select the content pane, and merely enter the number of the suggestions the user wishes to take. Step 6.The user now has a choice of expanding the result further, or searching the web Step 7.The user browses the web for information Step 8.The search results are displayed to the user. In the process of displaying the search results to the user, each hyperlink displayed is marked with a number. Thus, the user does not need to browse the content for expanding the hyperlinks and can instead use the search pane. For each context mode, the complete set of interactions has been mapped exhaustively and coded. The Uniform interface template is needed for the easy navigation of the results and web pages and ease of use.the design of the uniform interface template is discussed next. 7.3 UNIFORM INTERFACE TEMPLATE This work proposes a uniform user interface model designed for Mobile devices. The generic layout of the mobile devices is partitioned using a custom template. There are two templates used one for the web pages as shown in Figure 7.2 and the other for the search process as shown in
110 Figure 7.3. The core aspect here is that the screen size is divided into three regions; Search/web address pane Content pane Hyperlink pane The search/web address pane enables the user to enter the query or web address. The search pane allows the entry of the query. The query suggestions by the users, and query modifications are all supported here. Figure 7.2 Search page template
111 Search bar Result pane http://edition.cnn.com Libyan conflict These omens do not look good for Britain's future cooperation with the new Libyan crisis is experienced very badly by the people all around Hyperlink bar 1 MENU BACK Figure 7.3 Content page template The content pane allows the content of the result (of query expansion or search process or web page selected after search) to be displayed. The content pane supports the scrolling operation to view contents that are larger than the size of the screen. The hyperlink pane allows the content elements to be selected directly without the use of the tabbed or scrolled-select browsing. The hyperlink pane aims to overcome the limitations of the mobile device through partitioning of the display. While this pane in turn consumes space, the tradeoff in terms of the added features is worth the effort. The basic aspect of the content is the parsing of the web content and organization into specific chunks of information. The work exploits the patterned structure in the snippets. A sample stream of data is shown below in Figure 7.4.
112 "titlenoformatting":"what is Java? - A Word Definition From the Webopedia Computer...", "content":"this page describes the term \u003cb\u003ejava\u003c/b\u003e and lists other pages on the Web where you can find additional information."},{"gsearchresultclass":"gwebsearch","unescaped Url":"http://java.sun.com/docs/books/jls/","url":"http://java.sun.co m/docs/books/jls/","visibleurl":"java.sun.com","cacheurl":"http:// www.google.com/search?q\u003dcache:cff4fogthwgj:java.sun. com","title":"the \u003cb\u003ejava\u003c/b\u003e Language Specification", Figure 7.4 Sample data stream It is clear that the meta-tags have to be parsed, syntactically ordered and then semantically arranged. Finally the resultant has to be transformed into mobile device supported forms. For the conversion from the content in the web to the Uniform interface model, certain adaptation steps are used. These are described in the next section. 7.4 ADAPTATION MODELS FOR MOBILE DEVICES modules. The Adaptation model for mobile devices consists of the following Structure Analysis Segment Detection Adaptation The content structure must be analyzed first. To give an idea of the complexity of this module, the overall size of a typical response including the header is 5375 (5000-5500 characters for all queries) for a query. The sizes of the URL, Link, and Snippet are
113 i. Link 247 Characters (200-300 characters for all queries) ii. Snippet- 1115 (1000-1500 characters for all queries) iii. URL- 300 400 characters approximately The total number of character per line on a mobile screen is 40 (Fixed).The number of lines that can be displayed on a mobile screen is 9. Thus, a search result will typically need 3-4 mobile device screens to display the entire content retrieved. This creates the need for chunked output at the mobile phone level. The sample structure of a web page is shown below in Figure 7.5. Dummy->{Dummy*,general white space*} Element Object -> {Element+, Object*, Block*,Dummy*} {Element*, Object+, Block*,Dummy*} Text Element -> Text node Embedded Element -> <img> <applet> <embed> <iframe <object> <embed>[noembed] <script>[noscript] Functional Object -> <a> <label> <select> <form> <marquee> <button> <fieldset> <img usemap=""> <mapname=""> <div delay+><div style=overflow+> <div style=overflow-x+> <div style=overflow-y+> Presentation Object <b> <i> <u> <q> <nobr> <s> <strike> <tt> <sub> <sup> <big> <small> <fo nt> <em> <strong>,acronym> <abbr> <bdo> <blink> <ins> <del> Semantic object Header <h1>-<h6> List <ol> <ul> <menu> <dir> <dl> <li> Section <p> <center> <textarea> <address> <cite> <blockquote> <code> <dfn> < kbd> <samp> <var> <pre> Content Block When <table> is not an object, each,td> or <th> in the table is a block, and <table> is also one block. The <div> is a block when it is not one object. Body <body>, {Element+, object*,block*,dummy*} Table (<table>:<caption>+) (<table>:<th>+) (<table>: <thead>+,<tbody>+,<tfoot>+) (<table>: <thead>+,<tbody>+) (<table>: <tbody>+,<tfoot>+) (<table>:<thead>+,<tfoot>+) (each <td> or <th> in the <table> has only an element or one object.) Wrapper {block+,dummy+} Visible wrapper Invisible wrapper Container Visible container {Element+,Object*,block*,dummy*} {object+,block*,dummy*} Invisible container Figure 7.5 Web page Structure The overall process is shown in Figure 7.6.
114 Figure 7.6 Overall process User Interface Design The first step Code page transformation, is the detection of code page transformation. The need is for the large web page to be retrieved and parsed. The contents: either the search page from the web or the web-address from the URL is retrieved and organized into a stream. The output of this step will result in a stream akin to Figure 7.4 and shown in Figure 7.7. Figure 7.7 Code page transformation output
115 Figure 7.8 Web page transformation The next step, in Content structure identification, will enable the organization of the web pages into interesting fragments. It requires efficient traversal of the web pages. Thus, a compact data structure for representing the dynamic web pages is critical to efficient and accurate fragment detection. This is shown in Figure 7.8. The content structure identification steps are shown below in Figures 7.9 and 7.10. The process involves marking the boundaries between the snippets, and identifying the displayable elements.
116 Figure 7.9 Content structure Identity Search Figure 7.10 Content structure Identity Content The next step is to smoothen the structure tree into a semantic element, based on the semantic knowledge inbuilt in the system. Nodes are
117 merged or reassigned, based on the semantic knowledge of the content (Figures 7.11 and 7.12). For this, the user defined procedures or content addressable systems (XML) are searched, and the re-alignment made. The basic work is to add links to the content, so that the web page is accessible from the content pane. The content is reframed and reordered. The need of this step lies in organizing the content in an efficient manner for processing by the meta-page transformation system. Figure 7.11 Semantic element identification Search Figure 7.12 Semantic element identification - Content
118 Once the semantic elements are identified, the Web-page to metapage transformation process is started. In this, based on the semantic tree, the Meta web page is assembled. The meta-web page is the modified form of the content that is to be displayed in the mobile phone. An interactive screen adapting technique (Figure 7.13) is implemented in this application. Varying screen sizes, a major hurdle for the web on mobile phones is handled for user comfort. When the application starts (Figure 7.13), the user is prompted with the diagnosis screen (Figure 7.14). This diagnosis screen initially shows a 3 line content to the user, and asks the user acknowledge yes or no, based on his visibility. When a user clicks no, the application increases the line by 2, and prompts the user for an acknowledgment (Figure 7.14). This is continued until the user accepts the display content size. Once the user accepts it, the value is remembered, and the next time when the application is started, the value is used back. The user also has a provision to change the content size by the Diagnosis option in the menu. Figure 7.13 Application Launch Sample Screen
119 Figure 7.14 Screen Size Diagnosis The final stage is the adaptation stage. This step detects and groups the contents of the web pages into mobile phone amenable formats. All the grouped contents by the above methods are now listed horizontally and sequentially. The layout positions are adjusted based on the screen size and user preferences, to display all the detected relevant content. The logic followed here is that, the content element is grouped as content blocks. For example, snippet 1 is a content block. Snippet 2 is a content block and so on. The display will focus on the proper display of the content blocks fully. So, snippet 1 will be displayed fully. If snippet 2 fits the screen, it will be displayed fully and so on. If snippet 1 and 2 cannot fit in fully, then snippet 1 alone will be displayed and when the user presses the down arrow, snippet 2 will be displayed. In the case of content, the same process is adopted, and the content is displayed till the end of the lines. The overall operation is shown below in Figure 7.15 (snippet) and 7.16 (content).
Figure 7.15 User Interface Design Search Process 120
Figure 7.16 User Interface Design Content display 121
122 7.5 CONCLUSION This chapter has proposed a Uniform template and interaction model of operation. The defining aspect of the work is the use of content templates for the effective operation and standardization of the interaction. The test bed used to evaluate the framework and the results obtained, are discussed in the next chapter.