1) Genetic Algorithm

Genetic algorithm, which was first introduced by John Holland [10], is used to solve optimization and search problems by emulating principles of biological evolution. It represents a solution to a problem as a chromosome; then, it creates the initial population of solutions and uses genetic operators such as selection, crossover, and mutation to create offspring. The solutions are gradually improved by a selection scheme which selects the survivors by their fitness values.

2) Interactive Genetic Algorithm

Interactive genetic algorithm and genetic algorithm are similar, except an evaluation process. The interactive genetic algorithm requires users to give fitness to each individual instead of using a fitness function. The fitness here is a measure of how well each potential solution solves the problem at hand. The interactive genetic algorithm is applied to many application domains where the fitness function is difficult or impossible to design a computational fitness function [2, 11].


A. An Overview

The web application creates an initial population of 10 web page templates which are the base population for creating the next population of web page templates. Then, it displays 10 web page templates to users. If the web page templates satisfy users, the process of the web application is finished; otherwise, users have to rate each section of every web page template for generating the next population. And then, the web application calculates a total score of every web page template and selects 2 web page templates which are not the same from the base population.

A higher score template has more probability to be selected than a lower score template. After the 2 web page templates are selected, the web application generates a random value to decide which genetic operator is selected for producing an offspring. In this paper, we define a crossover rate as 0.7. If the random value is smaller than 0.7, a crossover operator is selected; otherwise, a mutation operator is selected. The web application continues producing many offspring until it reaches the size of the population which has 10 web page templates and displays the new offspring to users. The process continues doing many times and users are required to rate until requirements of users are met.

B. Genetic Encoding

In this paper, each web page template is encoded as a chromosome which is divided into 2 parts, a layout part and a style part. The layout part consists of layout, container, header, navigation top, sidebar left, content, sidebar right, navigation bottom, and footer gene; the style part consists of body, header1, header2, header3, paragraph, list, image, anchor, and color scheme gene. Fig. 3 below shows the structure of the chromosome. All gene encodings are described in Table I and web page layouts are shown in Fig. 4.

C. Genetic Operators

1) Selection

We employ a tournament selection of size 2 for the selection process. It randomly selects 2 chromosomes which are not the same from a population and compares their total score which is calculated by summing all genes’ score. A chromosome which has the highest total score is selected to be a parent for generating a next generation. Fig. 5 shows the process of the selection operator.

2) Crossover

The crossover operator requires 2 parents from a population to produce an offspring. First, it uses the selection operator to select 2 parents from the population and assigns all genes of a chromosome which has a higher total score to a child. It calculates a different value between the 2 parents as a percentage and generates a random percentage for comparing. If the random percentage is smaller than the difference percentage, the gene which has a high score is assigned to a child; otherwise, the gene which has a low score is assigned to the child. Fig. 6 shows the process of the crossover operator.

3) Mutation

The mutation operator requires 1 parent from a population to produce an offspring. First, it uses the selection operator to select 1 parent from the population. Then, it generates a random percentage and changes each attribute for all genes of the parent’s chromosome if the random percentage is higher than 0.5.Fig. 7 shows the process of mutation operator.