Stage  One

This stage involved three iterative design cycles of sLearn, each of which was evaluated by the lecturers involved in the teaching of the HCI course, following an expert heuristic evaluation. It was important to evaluate the initial designs with the lecturers and consider them as co-designers to ensure that it was what they had envisaged and that the content was appropriate to the students’ learning needs.

Below are descriptions of the iterations of stage one.

5.2.1.1 Iteration One and Evaluation

The first design was a simple application showing the concept behind this

The first, the home screen, shows a map of the area with pins on particular locations. The user would touch one of the pins to go to this location’s screen.

The location’s screen shows a closer picture of this location, two buttons to take notes and take photos, and a paragraph of given prompts (questions) from lecturers.

Figure 18: Iteration One

The main concern with this prototype is that the prompts where in a paragraph style, which would be difficult to read by the users especially when they are in a busy environment. This is not a practical design and it could cause confusion and frustration and thus, users might be put off using the application. Prompts should be easy to read, users should be able to know in an easy and quick manner which ones they have not yet read. Moreover, at the time of development, App Inventor did not allow having navigation on the map. The users will not be able to touch on the pins on the map to navigate to the location’s screen. Therefore, an alternative approach should take place.

5.2.1.2 Iteration Two and Evaluation

This iteration fixes the design problems from the first iteration regarding:

a) The navigation to locations on the home screen. Under the map, images of pins were added along with the name of that location. As soon as the app is launched, the user will receive a message telling them to press on the pins under the map in order to navigate.

b) The display of the prompts. Each prompt is now displayed by itself followed by a checkbox which the user ticks when he/she has read and acted upon this prompt.

c) A button for note taking was added. This allows the users to take notes on a screen that resembles a notepad.

Figure 19: Iteration Two

It was first considered making all prompts invisible but the first one. When the user ticks the first checkbox indicating that he/she has completed it, the second prompt appears and so on. However, when discussing this with the lecturers it was decided not to go for this method for a number of reasons:

Firstly, the control would be removed from the user. He/she would not be able to choose which prompt to start with depending on their needs. Secondly, if

he/she was not able to act upon this prompt, he/she would not be able to try and understand the others, as they are invisible. Thus, the system was not supportive and thus not usable.

5.2.1.3 Iteration Three

This iteration adds a textbox under each prompt to allow the user to type in their comments in the same screen. This allows for:

(a) Easy access to notes.

(b) Linking the note with the prompt. When the user sees the prompt when typing, it reminds him/her of what he/she is noting.

Since having added for each prompt a checkbox and textbox, this made each screen longer because each of these three contents were in a separate line.

The design had to be modified to overcome this issue, and therefore the checkbox was moved to be next to the textbox. A button to save notes was then added next to each textbox to save the note of this particular textbox.

The first version of the working prototype was finalised. It consisted of:

1. Home screen: Showing a map of the area with pins indicating specific locations that the students needed to visit. Pressing on a pin enables the user to display the screen for that particular location.

2. Location screens: These show a picture of the specific location; a navigation bar to save the notes, take extra notes, and take photos;

prompts from the lecturers with prompts on possible aspects to explore for each location; and text boxes under each prompt for students to type in their observations.

3. Extra Notes screen: This allows the user to type in and save more observations and notes.

4. Help and Profile screen. The Profile screen provides the student with a summary of the time spent on each location and number of prompts they have considered in each location.

The figure below shows screenshots of the final prototype at the end of stage one.

Figure 20 Iteration three

Once the lecturers were satisfied with the design and content of this prototype, further evaluative comments from students were elicited, both in a laboratory setting and in the environment in which the app was designed to be used. This resulted in two iterations conducted as cooperative usability evaluation studies (Rogers et al., 2011), which involved observing students use the app in situ. The main aim of these evaluations was to ensure that the interface was easy to learn and use in a real world environment.

Figure 21 Stage One Iterations Stage Two

Having developed an initial working prototype, it was possible to begin the next stage of field trials.