Evaluation

At the end of the fourth iteration the prototype was once again evaluated and no error could be found. All usability goals seemed to be intact since last evaluation. This made it ready for testing with children.

Design and Art

This chapter will present details of the design and the art which were not mentioned in the overall presentations of the design in Section 5.3. Design decisions, the story script and how it came to be, as well as decisions made in relation to the art, and the process of the making of the art, will all be explained. At the end, art and design considerations done in relation to the chosen age group will be presented.

6.1

Design Decisions

Design decisions according to design principles, both general and for children, will be explained in this section.

6.1.1 Design Principles

The design principles (see Section 2.3.3) was always kept in mind when designing. Design choices of the finished design will now be presented and justified.

According to visibility, buttons which show the way further in the story were pulsating. Feedback were simply given by reactions. When the user clicked on the cells, they stared talking. When the user went further in the story, the narrator started talking etc. Regarding constraints this was considered in relation to the access to the next and previous buttons. Having the buttons there constantly could be distracting, and make the user go further without having explored all the scrolling functionality at each page. The initial idea was to make them visible when the audio track had finished playing. As

this would be cumbersome if the user wanted to navigate freely back and forth in the story, the buttons rather appeared when reaching the bottom of the page. Constancy was used all the way. Every page in the story had the same layout, with the same buttons. The home-button was always on the top of the page on the left hand side, and the previous(left side) and next (right side) buttons were always at each side of the page, when the scrollbar had reached its end (See Figure 6.1).

Figure 6.1: A screen capture of the prototype, showing the navigation buttons

The navigation buttons, all had the same style and colors. Only the story content was varying. The style of the final art was also consistent and holistic. To strengthen affordance the buttons that should be clicked were pulsating discreetly, making them draw attention, but not too much. The buttons all got darker when hovered over, indicating that it was a button and not just an image. At the top of the first page an arrow-icon pointing down appeared, moving fast down and slower up again to guide the user to scroll down.

6.1.2 Design Principles for Children

The design principles for children were also considered. Regarding visual design, the buttons as shown in Figure 6.2 all used icons instead of text. The icons were all recog- nizable object that children probably are known with. They were distinguished from the background by having a darker color. All the buttons were made big enough for children to click on them. As children from the age of four have good pointing accuracy on icons with size of 64 pixels (Hourcade et al., 2004a, referenced in Hourcade, 2008) no button were made smaller than this. This was done to support the youngest users. The smallest button was the one navigating to the previous page. The button for the next page was

much bigger, 150 pixels, as this was the one the user probably mostly would want to click. This was also the one which was pulsating. The home button was 100 pixels. The only text used in the application was text for the title of each story. Visual complexity was also avoided. The most complex feature was the scrolling-technique.

Figure 6.2: The navigation buttons

According to interaction styles, this was made as easy as possible, without being boring. Reversibility was supported in the way that the user always had the possibility to go back to the previous page inside each of the stories. Actions were rapid, as there were no time-consuming tasks in the application. Whenever the user clicked on a button, or a clickable icon, a reaction would come immediately. Incremental actions have been utilized in the sense that each story consisted of four rather similar stages (the different pages). Menus and text-based interaction were not used.

Before the development started there were uncertainties to which pointing device the application should be designed for. The touchscreen was the most preferred one due to its concrete nature (Hourcade, 2008). Because of programming prerequisites and time available, however, it was decided to make a web application used with the input device, mouse, and not an android or IOS application. The idea was to make a web application which could be further developed to be used at different devices. Making the design appropriate for touchscreens was therefore kept in mind all through the design process. As mouse was the chosen pointing device, making the icons big enough for children to click on them was critical, as explained earlier in this section. This was also kept in mind for the clickable images in the story. As studies show that five-year old children mostly use the left button when using a mouse (Hourcade et al., 2004b, referenced in Hourcade, 2008), restricting the functionality of the right mouse button in any way was not seen as a necessity. Dragging techniques was not considered since they were not used.

Even though studies done by Mann et al. (2002, referenced in Hourcade, 2008) did not find sound more beneficial than text, this application used sound instead of text to make it available for children who can not yet read.