On the Development of a Web-Based M- Learning System for Dual Screen Handheld Game Consoles

This paper presents our experience on the design and development of an M-Learning web-based system for the Nintendo DSi game console. The paper starts by addressing the difficulties that emerged from the lack of resources on design guidelines for dual screen devices also the absence of adequate techniques and methods to support the design decisions. Then it explains how we overcome these challenges by adopting a design decision suitable for the screen requirements of the Nintendo DSi console. Finally, we present the components of our M-Learning system and the results of a preliminary usability evaluation.


I. INTRODUCTION
Designing interactive Web-Based Mobile Learning (Mlearning) systems is a highly demanding task that depends on the capabilities of the target handheld device. Given the different abilities and sizes of handheld devices (e.g. Pocket PCs, Mobile Phones and Game consoles), design guidelines and techniques were proposed to help designers on developing applications and websites that adapt to their specifications. One example of such guidelines is the Mobile Web Best Practices (MWBP) from W3C [1], which includes considerations for: multiple screen sizes and densities, performance optimization, touch targets, gestures, actions and device capabilities.
However, with the recent proliferation of ubiquitous handheld game consoles that comes with dual screens (i.e. two adjacent screens) and unique interaction modalities, a set of additional challenges are introduced in the design process. As an example, the Nintendo DS series of handheld game consoles, which comes with dual screen and touch screen features using stylus and finger, has introduced a new challenge for web-based applications developers. This challenge has originated from the interface constraints inherited in the Nintendo DS consoles, which incorporates both touch and dual screen capabilities. Therefore, in this paper we report our experience in designing, developing and evaluating a web-based M-Learning system designed for the Nintendo DSi game console. While designing the system, we applied touch and small screen interface design recommendations previously reported in the literature, besides we used our ad hoc design techniques to utilize the dual screen feature in the DSi console.
II. MOTIVATION Handheld game consoles are widely used by the young generation for entertainment purposes. Little has been reported in their educational use. Given their manageable prices, wide spread, ease to use and varied interaction modalities have made them candidate technologies to be utilized for improving the educational process.
In fact, the pedagogical expectations of using such a technology in the classroom, will greatly impact students' learning and kick start a new learning experience. Therefore, our system objectives can be summarized as follows:  Improve and enhance the communication between teachers and students in the classroom.  Utilize the technology (i.e. Nintendo DSi) to improve the educational process.  Provide a cheap alternative technology with powerful capabilities to help perform Rich-Interactions in the classroom.  Abandon the traditional method of classroom interaction.

III. HANDHELD GAME CONSOLES
A. Overview A handheld game console is "a lightweight, portable electronic device with a built-in screen, games controls and speakers" [2]. Most new handheld game consoles come with a built-in web browser that can connect to the Internet using Wi-Fi connection and interact with the user using stylus or touch. Sony PSP and Nintendo DS are among the dominant game consoles in the market, with Nintendo DS becoming the fastest-selling handheld gaming device.
The Nintendo DS, in particular, has the most interactive features that are not found in other portable game consoles, such as dual screen, touch screen, stylus, built-in wireless connection and built-in microphone. The Nintendo DS has three types of consoles: Nintendo DS, Nintendo DS Lite and Nintendo DSi. In addition to the previous features, two built-in cameras have been added to the DSi model.
Handheld game consoles are designed to a very limited and specific range of usage and applications, most of the applications designed for these game consoles are entertainment-oriented with a few relevant to education and learning. However, in recent years many research were conducted to explore the potential of these consoles in teaching and learning e.g. [3]. Other potential applications envisioned for the dual screen handheld consoles are: reading eBooks, displaying and interacting with large maps, and using it as an assistive technology as reported by [4].

B. Application Design
Handheld game consoles usually have their own proprietary software (called software development kits) used to develop applications working on their environment. However, designing web pages developed for desktop computers cannot be displayed the same on handheld consoles. This is because the screens of handheld consoles are typically smaller than their desktop counterparts, besides they have less processing power and memory specifications. Thus, designing web pages that adapt to handheld consoles with small screens size and touch capabilities is different compared to laptop/desktop computers that operate using basic pointing devices.
Overall, we have not found any guidelines proposed specifically for user interface design targeted to handheld consoles; on the other hand, user interface design guidelines for mobile device have been widely adopted to cope with their limitation [5]. In particular, small-screen research has been limited to web page design considerations for mobile devices [6]. Also, we have not found specific guidelines for designing web pages usable and viewable by web browsers in game consoles, especially for those which operate with dual screens. Based on the limited resources, we opted to benefit from user interface design guidelines for mobile devices in designing interfaces for handheld game consoles.
So, to display web content properly on mobile devices, some basic design principles need to be followed, among them [5]: 1. Develop applications that provide direct, simple access to focused valuable contents; 2. Trim the page-to-page navigation down to a minimum; 3. Adapt for vertical scrolling or reducing the amount of vertical scrolling by simplifying the text to be displayed; and 4. Reduce the number of users' keystrokes In the educational domain, Churchill and Hedberg [7] provided a set of design recommendations for displaying learning objects in small-screen handheld devices. Some of these recommendations include: design for one step interaction, minimize scrolling, design for short contact time and design to match the task. Similarly, other guidelines have been suggested by [8] to create highly efficacious, user friendly and usable mobile interfaces. These guidelines are based on user analysis, interaction and mobile learning interface design. The aim of the guidelines is to use them as benchmark for interface designers when designing usable mobile learning portals.

IV. OUR PRACTICE
In this section, we describe our experience of developing the Nintendo DSi Interactive Classroom System (NDiC). NDiC is a Web-Based M-Learning system designed to create an interactive classroom, and promote understanding among all students using game console devices. The system consists of two components: an authoring tool and a classroom management system.
Before shedding the light on the system components we first need to explain the underpinning design approach used to design the interactive assessment sheets that will be displayed on the web browser of the Nintendo DSi game console. Afterwards, we will present the implementation of the system with a preliminary usability evaluation.

A. The Nintendo DSi Web Browser
The Nintendo DSi encompasses two LCD screens, each have 256 x 192 screen resolution with 3.25-inch wide, to show different information. The top screen is for display only while the bottom one is a touch screen that supports both stylus-operated and finger-operated interactions. Stylus operated touch screens support interactions of type: click, drag, drawings, gestures and handwriting.
The Nintendo DSi uses Opera web browser that is developed specifically for it. Opera is designed to utilize the capabilities of the DSi console such as dual screens and touch interactions. It also uses a virtual keyboard for texting purposes.
There are two ways of viewing web pages in the Opera web browser, the default setting is the Overview Mode, which shows on the top screen a zoomed out overview of the page the user is currently browsing. The user can switch between showing the zoomed out overview on the top screen or the bottom screen. However, in the Column Mode, all page content are compressed into a single column that shows in both screens, which makes reading long texts easier. Moreover, file formats supported in the Opera web browser are: HTML, XML, JPG, PNG, GIF, CSS and JS.
Given the previous features of the Opera browser, yet, it has many limitations [9] [10] such as: 1. It does not support plug-ins e.g. Adobe Flash.
2. It does not support font styles. 3. It does not store any cookies when power goes off. 4. Using some Cascading Style Sheets (CSS) properties slows the browser.

B. The Design Approach
Design recommendations from the literature were taken into consideration in our current system design. In fact, we break down the recommendations into three design perspectives, namely: (1) the touch aspect that requires interaction with a stylus and/or finger (2) the small screen size and (3) the dual screen.
For the touch interaction, the Nintendo DSi supports touch using finger or via a stylus, however a recent study by McKnight and Cassidy [11] revealed that finger is not a preferred method for interaction compared to stylus. This is because children fine motor skills are not sufficiently developed to enable them to point their finger accurately on small targets. Besides using stylus increases the pointing accuracy of children when smaller buttons are used [11]. Based on the findings of McKnight and Cassidy and on the fact that web controls (such as radio buttons and checkboxes) appear small when displayed on the Nintendo DSi Opera browser, we decided to design the interaction to accommodate the stylus operations.
For the small screen size, we need to create web pages with simple and organized designs that limit horizontal scrolling [12]. This can be done by splitting web pages into smaller, logically related units that can fit onto a handheld device's screen. We also need to choose legible fonts, icons and controls [6]. Basically, the controls size can be small since the stylus has high pointing accuracy compared to the finger. However, to display large images on the web page, their sizes must be reduced to fit the screen size of the DSi screen and also saved in a format supported by the Opera web browser.
As for the dual screen design recommendations, we did not find any clear guidelines in this respect; so we overcome this shortcoming by developing our own approach based on cycles of trails-and-errors. Our approach suggests that static elements of the user interface are placed on the top display and elements that require interaction are placed on the bottom display, forming a web page that is executed across both screens. So, when designing the web page, the important information (in our case the assessment question) is displayed at a fixed location on the screen, i.e. in the top of the page so that it occupies the top screen, while the answer area is displayed in the bottom screen. The distance between the question area and the answer area is fixed based on the Nintendo DS screen size.
Finally, we used open source web standards to design and build our web application. The elements of a web page must leverage the capabilities supported in the browser, so we used HTML for structuring the content, CSS for styling the content, and JavaScript for the interaction.
With these design considerations in mind, we next introduced our Web-Based M-Learning System that used the above guidelines for authoring interactive web pages that can be displayed legibly on the Nintendo DSi screen.

C. The System Architcture
The major modules of the NDiC M-Learning system are:  The authoring tool: used by the instructor to author assessment sheets in the form of web pages.  Classroom Management system: used by the instructor to publish assessment sheets, track students' progress and manage users' accounts. Figure 1 shows the user interface of the authoring tool. This tool allows the instructors to author interactive assessment sheets that have one or more types of questions: MCQ, Hot Map (where an image is decomposed into a set of clickable regions using radio buttons), Fill in the blank and True/False. The instructor has the ability to also save the assessment sheet for later alteration.

D. The Authoring Tool
Once an assessment sheet is finalized, the instructor can save it for the web using two methods: 1. Active tracking, which tracks students' answers immediately. This allows the instructor to view students' progress while answering the assessment question(s) and show whether they are doing well or not. 2. Passive tracking, where the instructor chooses to disable the students' tracking feature. This can be done when the teacher wants the students to solve the questions as an exercise. The embedded JavaScript in the web page will automatically check the answers for the students and provide them with the appropriate feedback.
The authoring tool was developed using Visual Basic 2005.

E. Classroom Management System
The classroom management system is a web-based (NDiC URL: http://www.ndicproject.com) application used to handle the administrative details of the classroom and publish assessment sheets to the students. The classroom management system consists of two major subsystems: classroom subsystem and management subsystem.
The classroom subsystem helps the instructor to upload assessment sheets to the server so that the students can access them, retrieve statistics regarding students' answers and create polls. The system also has a tracking module to track students' progress. The tracking module aids the instructor on tracking students' progress in real-time while they are solving the assessment sheet. It can also show different statistics about the students progress (when sheet tracking is set to active). The instructor can also create polls and receive the students' responses immediately.
The management subsystem (Figure 2) is for the system administrator to manage instructors and students' information such as adding, editing, or deleting. Also, the administrator can manage classrooms information. The classroom management system was developed using PHP for server-side scripting and MySQL for database running on Apache web server. V. SYSTEM DEMO In order to use the NDiC system, a student must point his/her DSi browser to the login page of the NDiC web application. Once the student is logged in, the system records the student attendance.
In the student's log in page a list of assessment sheets are displayed which are ready to be selected. Once the student selects an assessment sheet the assessment questions are displayed to the student one by one, as shown in Figure 4.
Using our system 255 students can be supported at most in a single class with the presented demo system. Also unlimited number of classes can be created and supported.
If the active mode was setup for the assessment sheet, the tracking module in the web application will track the logged in students and monitor their progress while solving the assessment sheet, as shown in Figure 3.
VI. PRELIMINARY SYSTEM EVALUATION Evaluation of applications designed for the use by handheld devices is a challenging task as reported by [13]. Different evaluation techniques from the domain of Human-Computer Interaction (HCI) can be considered under certain context; however, usability evaluation is considered a first step for evaluating any interactive system.
Using usability evaluation, we evaluated the NDiC system by a group of elementary school students and teachers in a small-size math/geography class. The teachers used the system to author and publish assessment sheets, and the students used the system to solve these sheets.
We then used the System Usability Scale (SUS) questionnaire, a well-known usability instrument, to measure the usability and user satisfaction of the NDiC system. Question items included in the SUS survey has a fivescale Likert scale ranged from strongly disagree (1) to strongly agree (5). The items are: 1. I think that I would like to use this system frequently. 2. I found the system unnecessarily complex. 3. I thought the system was easy to use. 4. I think that I would need the support of a technical person to be able to use this system. 5. I found the various functions in this system were well integrated. 6. I thought there was too much inconsistency in this system. 7. I would imagine that most people would learn to use this system very quickly. 8. I found the system very cumbersome to use. 9. I felt very confident using the system. 10. I needed to learn a lot of things before I could get going with this system. The questionnaire was distributed among the students (age 9-13) and instructors. The students were asked to rate their agreement to the statements from strongly disagree (1) to strongly agree (5). In summary, the mean ratings of students' satisfaction were high; in general it was 93%.
On the other hand, the mean ratings of instructors' satisfaction were moderate, it scored 76%. The items affected by the instructors' ratings were items 7, 8 and 9. By further asking the instructors about their reasons of the selected Figure 3. View of the tracking system showing students' who is currently solving 'sheet 1' assessment sheet, the names with green backgrounds and illuminated light bulbs mean logged in students. ratings, they reported that the system does not support Arabic language which is their native language and their English is not so good, which actually hindered the system use. Also the instructors reported that they lack some technical skills, which implies requiring some training to use the system.
VII. CONCLUSION AND LESSONS LEARNED With the wide spread of game consoles among the young generation, provided by their outstanding capabilities, a shift toward developing M-Learning systems that utilizes the capabilities of these consoles has increased.
In this paper we showed how we designed a low cost web-based interactive classroom system that uses a wellknow game console for aiding student interaction in the classroom. Our designed system took into consideration the capabilities of the game console and the design recommendation reported in the literature. A preliminary evaluation of the system that was carried by a number of students and instructors revealed encouraging results.
A future expansion of this project will include publishing assessment sheets that consider different screen resolutions e.g. the new Nintendo DSi XL.
Key lessons learned when designing web pages with interactive controls for the display on handheld devices with dual screen can be summarized as follows: 1. Use web controls that benefit from the stylus supported functionality. 2. Place interactive elements at the bottom screen and leave the top screen for display only. 3. Take care of the aspect ratio of the dual screen size, to avoid the horizontal and vertical scrolling effects. 4. Avoid overriding the default font settings (size and family) that are set by the handheld browser. 5. Limit the number of characters displayed in one page to around 250. 6. Avoid using controls with more than 4 options (e.g. drop-down list, radio buttons).
Finally, we hope that what have been reported in this paper can be considered as a starting step for developing a framework for designing web-based learning applications designated for dual screen handheld game consoles.