Functionality

2.5.1 Authentication

When first loading the webpage user is presented with the authentication form, shown in Figure 5. The form requires the user to enter a valid e-mail address and a password.

Figure 5: Authentication form

The same information given in the registration process should be entered. When user is done inserting the required login information the button “Sign in” can be clicked after which the server authenticates the user. If authentication is successful the user will be redirected to the main functionality page of the application.

28 2.5.2 Registration

User can reach the registration screen, shown in Figure 6, by pressing the “Sign up” button located below the authentication form.

Figure 6: Registration form

For registration, user is required to choose and enter a valid username, which only contains letters, numbers and underscores and is no less than 4 characters long. Other characters are not allowed. The next field is email address after which comes the password field. The password must be at least 6 characters long and contain at least one number, one uppercase letter and one lowercase letter, to make the password more secure. User must enter the password twice. Both entries must match to make sure that the user did not misspell his password. For next, the user must enter his date of birth, which can be chosen from 3 dropdown lists: month, day and year.

The last step in the registration is gender. Gender can be chosen by activating a button in front of the appropriate option. User is alerted if any of the information is not correct and user can then make the required corrections.

2.5.3 Application functionality

In the application page user is presented with a circular white area in which are the images. In the area images are placed circularly around an inner circle which we call the arena, which can also be seen in Figure 7. Images are generated by the algorithm and are taken from the database.

Users can interact with the images by dragging them around and into the arena. Dragging is

29

triggered, when user hovers the mouse cursor over an image, presses down the left mouse button and moves the mouse around the screen while holding down the button. If user releases the mouse button the image is dropped. Hovering the mouse cursor over an image triggers another event which shows user a larger preview of the image. If user starts to drag the image, the preview disappears to give user better overview on where to drop the object.

Figure 7: Arena surrounded by images

Images can only be dropped into the arena. The image returns to its previous location if the drag event is finished anywhere else than the arena. If the image is dropped into the arena it drops to the selected place.

User must drag all the images into the arena and place them based on their perceived similarity.

Users’ task is to compare the images based on their similarities and place the images more similar to each other close together and images that are less similar should be placed farther apart. User is strongly advised to use the whole arena. “Done” button can be clicked, after the user has finished comparing all the images. If the user clicks “Done” the data is processed and the information about the arrangement in the completed trial will be sent to the database and a new set of images will be generated for the user according to the algorithm described in Code and algorithmSection 2.3.2. After the information about the arrangement reaches the database

30

we estimate the RDM for the user according to the algorithm in Section 2.3.1, after the algorithm completes, the RDM is also sent to the database.

The help button is located in the upper right corner of the surroundings of the arena. Pressing that displays instructions, displayed in Figure 8. In it the user is explained what the task is and based on what criteria the images should be arranged.

Figure 8: Instruction screen

User can end his session by pressing the “Log out” button located in the upper right corner of the page. After doing that the user will be redirected to the authentication page and the session will be terminated.

31 2.5.4 Accessing the resulting RDM

Above the authentication form there is a link, shown in Figure 9, to the RDM that is generated based on currently collected data. To access the RDM you do not have to register to the webpage.

It is made easy for anyone to use the collected data for themselves as they see fit.

Figure 9: Link to the current RDM

User is redirected to another page after clicking the link. On that page the user is presented with the entire RDM upper triangle in the form of arrays. Each array there corresponds to a row of the representational dissimilarity matrix upper triangle. Values in the final RDM are arithmetic averages for each pair that we have collected data about, over all the user specific representational dissimilarity matrices.

2.6 Technologies and languages