6.871 Expert System: WDS - Web Design Assistant System Timur Tokmouline May 11, 2005 1 Introduction Today, despite the emergence of WYSIWYG software, web design is a difficult and a neces-sary component of our lives, and the hardest part of web design is, arguably, getting started.1 The web has become an integral part of our daily lives: we do research, communicate with friends, read news - all online. As a result, publishing material on the web has become a necessity. In general web design of usable web pages is hard since it requires laying out the material in such an order that a visitor would be able to see the most important por-tions right away. There are, in general, no answers as to what a good layout is. There are many qualitative suggestions. However, translating those qualitative suggestions into concrete actions on the portions of the website, to the best of my knowledge, has not yet been accomplished. The current array of WYSIWYG tools available to the consumers to ease the pain of web development is quite primitive since the consumer must tell the WYSIWYG editor exactly what to do. As such, the WYSIWYG tools, like Microsoft Frontpage, do not let the user get any closer to starting on a good web page design. The real hard task, figuring out a suggestion for a decent starting point, still remains a hard and unsolved problem. In this paper, we present a Web Design Assistant System, or WDS, that employs the Generate-Test-Debug approach [1] to randomly create and then iteratively improve web page layout of user-supplied content. WDS aims to facilitate web page design process by producing a reasonable starting point for web design, given content description from the user of the system. WDS evaluates the quality of a layout by simulating a visitor inspection on the layout. The results are reported to the debugger, which uses knowledge about web layout improvement to create a new layout, where more important items are more readily accessible to a typical user. From inspection of program output thus far, it seems that WDS 1WYSIWYG is an abbreviation for ”what you see is what you get” style editors, such as Microsoft Word or Microsoft Frontpage. 16.871 Final Project Timur Tokmouline 2 does in fact generate a reasonable starting point for web design in that the resulting web page layout is not optimal but does place important items in places likely to be noticed by typical visitor. 2 The Task: Generating a Starting Point for Web De-sign The task at hand is to generate a reasonable starting point for web design of a single web page. The user should be able to take the program output and improve that starting point into a usable web site. The program’s output is not expected to be a pe rfect, production-ready webpage. Instead, the program output should make the most important features accessible to a visitor, who has a limited time to invest in detailed website reading. We make several important assumptions about the user of our program: • The user knows what the content is. The user knows w hat material will eventually placed on the web in form of a web site. • The user knows how to decompose the content into a sequence of paragraphs and images. • The user knows which portions of the content are more important than others. The user is not expected to know this exactly. In fact, we ask the user to take the best guess on ranking the different portions of the content. 3 An E xample: Layout for a simple scientific abstract In this section, we give a detailed description of inputs accepted and corresponding outputs produced by the system. We do so by discussing an example that involves layout of a simple scientific abstract. 3.1 Getting Started The assumed starting point is that the user has figured out the content to be placed on the web site and has decomposed this content into paragraphs of text and properly sized images. An example of the starting point is shown in Figure 1. 3.2 User Input: Describing the content As shown in Figure 2, the user is asked to describe the items that make up the content one by one. We assume, for simplicity, that the web page has at most a total of 16 content items6.871 Final Project Timur Tokmouline 3 Figure 1: Step 1: The user has figured out the content and has decomposed the content into paragraphs and images. on it. For each particular item, the user e nters the type of item, the item content, and the rank of this particular item. The type of content is either text or image. The item content depends significantly on the item type. • For a paragraph of text, the content is just the paragraph entered on a single line, as shown in Figure 2. • For an image, the content is a description of the dimensions followed by the picture source, as shown in Figure 3. In describing image data, we enter first the width in pixels, then height in pixels, and then the file source of the image. As demonstrated in Figure 2, the user then enters the rank for each image and text items. The rank is assumed to be an integer between 1 and 16. We do not expect the rank to perfectly reflect the ordering of items in importance - the rank is a subjective metric. 2 When the user has completed entering the information about the items, the user enters -1 for item type. At that point in time, the content description step is complete. 3.3 User Input: Characterizing a Typical Web Page Visitor It is hard to predict the audience of the web page, since the web design assistant program has no knowledge in the domain of the content. As shown in Figure 4, the user is therefore 2We