Phase I: Design Session with Students

Two parallel design sessions were conducted. Each of them was run with three students, and lasted for about two hours and a half. The two coordinators supported these sessions, without interfering, unless they considered it necessary to bring the students back on track. One coordinator was a human computer interaction (HCI) expert, whose role was that of ensuring that students consider issues related to the

usability of the system. The other coordinator was an e-learning system expert, whose task was to be preventing the students from loosing track of the system design goals. Furthermore, the coordinators were also in charge of guiding and facilitating the students to go through the session, and providing support without interfering in the process of decision-making.

For facilitating the work, students in a group sat together. In front of the students there was a table with pens and a php board for the students to record their ideas on, and eventually draw their joined initial user interface of the prototype. The two design sessions were recorded by a video camera, so the coordinators could focus on guiding the case study and solve current issues, instead of taking notes for further research.

The whole process in this phase was grouped according to the three stages described in section 3.2. Before the start of the three design stages, the coordinators explained the study’s objectives and the system design goals to the students.

3.4.1

Stage 1: Needs Collecting

During this stage, the students were asked to extract a set of needs that were currently not met, according to their previous e-learning experiences. The expectation was that these needs could be addressed by using a social personalised adaptive e-learning system. The students contributed to the needs collection by brainstorming and discussing ideas. Initially, the students considered the main

56

features that they expected to be provided by such an e-learning system, as well as briefly discussed problems that they encountered when using such systems previously. All the students had opportunities to present their own ideas. Taking suggestions in turn was supported. Additionally, while one student was presenting, the others were encouraged to ask questions and provide suggestions and comments. Afterwards, the students summarised all the ideas into an initial need list, and then continually elaborated, categorised and evaluated these needs. As a result of this process, ninety-seven ‘raw’ needs were proposed and ordered into a requirement list, according to their perceived importance.

3.4.2

Stage 2: Task Sequencing

In this stage, personas and scenarios were used, as a lightweight method to capture the system requirements. Personas contain the users’ background information and specific relation to using the system [38]. The students created two personas, in order to outline the real characteristics of the system’s end-users, as below.

Anna is a freshman student, studying a course of ‘Web Programming’, which introduces fundamental knowledge of HTML, CSS and JavaScript. She does not have much programming knowledge before joining this course, but she likes asking expert students for help.

Brian is a sophomore student, studying a course of ‘Java Programming Language’. He participated in the course of ‘Web Programming’ last year, and achieved higher scores than most of the other students in the

final examination. He prefers to analyse examples, and then design his own program to check whether he has learnt the constructs from the examples. He likes to share and discuss with other students.

Personas were used as the base for creating scenarios, with settings and a sequence of actions and events [31]. Some scenarios created by the students are listed below.

Anna is doing a piece of coursework by using the developing tools provided by the e-learning system. She is asked to design a webpage, which contains a news timeline. Each news item has a title, a time when the news is published, and several tags about the news. She developed one news item, and then ‘copy/paste’-ed the code to create another nine news items in the news timeline. Later, she decided to change the colour of the tags, so she had to ‘copy/paste’ again. She is wondering if there is an easier way of doing so. She finds Brain is on the ‘expert Web coder’ list provided by the e-learning system, so she decides to ask him.

Brain is following the ‘Java Programming Language’ course by using the e-learning system. He submitted a quiz just now, and got the feedback on the result immediately. One of the questions that he answered incorrectly was ‘if a class can extend two or more classes’. Next to the quiz result was a link to a webpage containing the topic about ‘the multiple inheritance of Java’. Brain clicked on the link and then the webpage showed. He read the content and some comments made by other students,

58

properties and methods of more than one other class. Finally, he had an idea, which was to implement more than one interface.

Brain is now debugging his Java program by using the programming tool provided by the system, in order to try the idea of implementing more than one interface. He receives a message from Anna, asking for help. He saves his work, and asks what Anna needs. After Anna describes her ‘copy/paste’ problem, Brain shares a note he took before, which describes how to control HTML element styles using CSS properties.

To conclude, in this second stage, personas and scenarios were used to describe the interaction between the persona and the potential application, to fulfil the proposed needs, and enable rapid communication about usage possibilities, which should satisfy the needs proposed in Stage 1: Needs Collecting.

3.4.3

Stage 3: Prototype Designing

This stage was a refinement process, asking the students to convert the needs collected in Stage 1: Needs Collecting, and the task sequences designed in Stage 2: Task Sequencing, to concrete requirements, so as to design a low-tech prototype application. Firstly, as previously mentioned, the students finalised the task sequences and visualised the scenarios on large shared white paper. They created the necessary notes to present the basic ideas of the interaction process and user interface. For instance, the students drew a dropdown list that could be used as a menu to switch between different views of the concept structure. Secondly, the

students re-evaluated each component of the initially co-designed user interface, and proposed new components and/or re-organised existing components, to make sure each task sequence could be completed smoothly. Finally, a stereotypical end- user role-play was conducted to evaluate the usability of the designed prototype.