INOM EXAMENSARBETE ELEKTROTEKNIK,AVANCERAD NIVÅ, 30 HP
, STOCKHOLM SVERIGE 2016
Adaptation of an online course from desktop to mobile browsers
TEODORO ORLOW WEY
KTHSKOLAN FÖR INFORMATIONS- OCH KOMMUNIKATIONSTEKNIK
Adaptation of an online course fromdesktop to mobile browsers
TEODORO ORLOW WEY
Master’s Thesis at KTHSupervisors: Prof. Anders Västberg, KTH Royal Institute of Technology,
David Tikka, CleverLearning ABExaminer: Prof. Fredrik Kilander, KTH Royal Institute of Technology
TRITA-ICT-EX-2016:197
Abstract
This project investigates approaches for adapting desktop e-learningweb pages to mobile devices using principles of Responsive Web Design.It gives a brief introduction on usability and responsiveness and howthese concepts are important when developing online courses to be ac-cessed by users in different devices. It explains an online course struc-ture, its chapters and lessons, and how it is generated from a XMLspecification to HTML. After that, 3 different course web pages fordesktop are optimized to be used in mobile browsers. The implemen-tation section explains how the pages behave in smaller screens. In theconclusion, it is shown how some of the web pages design are not idealfor the mobile user and how to improve them in the future.
iii
Sammanfattning
Det här projektet undersöker metoder för att anpassa webbplat-ser inom fältet e-learning till mobila enheter med hjälp av responsivwebbdesign. Det ger en kort överblick över användbarhet, responsivitetoch varför dessa koncept är viktiga under utvecklingen av plattformso-beroende kurser. Det ger ett exempel på en kursstruktur, dess kapitel,lektioner och förklarar hur dessa genereras från XML till HTML. Sedanvisas hur 3 olika kurssidor optimeras för mobila skärmar. Sektionen Im-plementering förklarar hur sidorna beter sig på mindre skärmar. Sam-manfattningen visar att några av sidorna inte är ideala för användningi små skärmstorlekar och hur de kan förbättras i framtiden.
v
Acknowledgements
First of all, I must thank my parents, Natalia and Carlos, for all the loveand support they gave me during this journey. Without you this wouldn’t bepossible, I will be eternally grateful for all the help I received and will neverforget how patient and caring you were. I’d like to thank everyone in myfamily, located so distant from Sweden but very close to my heart.
Thanks to Maria for the love and support given to me during this part ofmy life. To all my friends: Thanks for the great time shared with me duringthese two amazing years in Sweden. You were a very important part of my lifehere and will certainly be part of my memories forever. Furthermore, thanksto the CleverLearning team: David, Henrik and Peter. I appreciated all thegood times and working experience.
Finally, I have to thank KTH and all the tutors that helped me fulfillthis goal: May-Britt Eklund Larsson, who helped me even before I arrivedin Sweden and was always very kind; The KTH professors and assistants, fornot only teaching me but also encouraging me to be a better engineer andrecognizing my views and opinions. Thank you prof. Anders Västberg andprof. Fredrik Kilander for the thesis guidance. I’m very proud of being partof KTH alumni.
Stockholm, 2016
Teodoro Orlow Wey
vii
Contents
Abstract iii
Sammanfattning v
Acknowledgements vii
Contents ix
List of Figures xii
List of Tables xiii
1 Introduction 151.1 Problem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161.2 Problem Statement . . . . . . . . . . . . . . . . . . . . . . . . 161.3 Purpose . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161.4 Goal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161.5 Methods and Methodologies . . . . . . . . . . . . . . . . . . . 17
1.5.1 Methods . . . . . . . . . . . . . . . . . . . . . . . . . . 171.5.2 Methodology . . . . . . . . . . . . . . . . . . . . . . . 17
1.6 Literature Study . . . . . . . . . . . . . . . . . . . . . . . . . 191.7 Benefits, Ethics and Sustainability . . . . . . . . . . . . . . . 211.8 Delimitations . . . . . . . . . . . . . . . . . . . . . . . . . . . 211.9 Thesis Organization . . . . . . . . . . . . . . . . . . . . . . . . 22
2 Background 232.1 Responsive Web Design . . . . . . . . . . . . . . . . . . . . . . 232.2 User Interface . . . . . . . . . . . . . . . . . . . . . . . . . . . 242.3 Mobile Learning . . . . . . . . . . . . . . . . . . . . . . . . . . 252.4 Mobile Web Browsing . . . . . . . . . . . . . . . . . . . . . . . 292.5 Front-end Technologies . . . . . . . . . . . . . . . . . . . . . . 30
2.5.1 XML . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
ix
2.5.2 HTML/CSS . . . . . . . . . . . . . . . . . . . . . . . . 302.5.3 JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . 312.5.4 jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . 312.5.5 AngularJS . . . . . . . . . . . . . . . . . . . . . . . . . 31
3 Design and Implementation 333.1 Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 333.2 Techniques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 333.3 Architecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . 343.4 Page Implementation . . . . . . . . . . . . . . . . . . . . . . . 36
3.4.1 Introduction page . . . . . . . . . . . . . . . . . . . . . 373.4.2 Hotspot page in portrait mode . . . . . . . . . . . . . . 413.4.3 Hotspot page in landscape mode . . . . . . . . . . . . 493.4.4 Drag and Drop page . . . . . . . . . . . . . . . . . . . 50
4 Conclusion 574.1 Discussion of the implementation . . . . . . . . . . . . . . . . 574.2 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 594.3 Future Work . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
References 61
x
Abbreviations
ACM Association for Computing MachineryADL Advanced Distributed LearningCSS Cascading Style SheetsDTD Document Type DefinitionsHCI Human Computer InteractionHTML Hyper Text Markup LanguageLMS Learning Management SystemMVC Model-View-ControllerOOP Object-oriented programmingRWD Responsive Web DesignSCORM Sharable Content Object Reference ModelSGML Standard Generalized Markup LanguageXML EXtensible Markup Language
xi
List of Figures
2.1 Smartphone touchscreen displays in different positions. (Source:Handbook of Mobile Teaching and Learning, 2015) [23] . . . . . . 25
2.2 Devices used for learning by percentage of total mobile devices.(Source: ADL Mobile Learning Survey Report, 2013) [24] . . . . . 26
2.3 The Two-Way Data Binding relation diagram in AngularJS. (Source:AngularJS: Developer Guide) [39] . . . . . . . . . . . . . . . . . . 32
3.1 Course page architecture . . . . . . . . . . . . . . . . . . . . . . . 363.2 Non-responsive Introduction page in a desktop screen . . . . . . . 383.3 Non-responsive Introduction page in a mobile device screen . . . . 393.4 Responsive Introduction page from the bookstore course loaded in
iPhone 6 Plus. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 403.5 Non-responsive Hotspot page in a desktop screen . . . . . . . . . 413.6 Non-responsive Hotspot page in a mobile device screen . . . . . . 423.7 Hotspot page with responsive background image element and no
responsive buttons in a iPhone 6 Plus screen. The button appear-ing in the screen (a purple circle with a white ‘plus’ sign) is in theincorrect position. . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
3.8 The responsive Hotspot page in a iPhone 6 Plus browser, in portraitmode. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
3.9 A responsive Hotspot page in a different chapter of the same course.This is a web page accessed from an iPhone 6 Plus browser, inportrait mode. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
3.10 A responsive Hotspot page in a different chapter of the same course.This is a web page accessed from an desktop browser. . . . . . . 48
3.11 A responsive Hotspot page accessed from an iPad browser, in land-scape mode. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
3.12 Non-responsive Drag and Drop page in a desktop screen . . . . . 503.13 A tentative design for a responsive Drag and Drop page in a mobile
screen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
xii
3.14 The original Drag and Drop page before (left) and after (right).The image on the right shows the implementation of the mockupdesign. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
3.15 A question type page: An alternative design for a responsive Dragand Drop page in a mobile screen. . . . . . . . . . . . . . . . . . . 55
4.1 The Hotspot page with responsive buttons in a decreased desktopbrowser. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
List of Tables
2.1 List of mobile device affordances. (Source: Handbook of MobileTeaching and Learning, 2015) [23] . . . . . . . . . . . . . . . . . . 27
xiii
Chapter 1
Introduction
Good usability and interactive interfaces have pushed developers to begin us-ing responsive web design techniques, increasing the usefulness of the websitesaccessed from mobile systems while maintaining the desktop website content[1]. These special conditions are crucial when building e-learning web pages,and are investigated throughout this project.
When designing an adapted version of a desktop website to be accessed onmobile systems, the layout characteristics of the web pages have to be changed.The coordinate system between both platforms is different, problems appearand need to be fixed to conform to the new environment.
The smaller screen layout issue has been explored by different web devel-opment companies and designers in the last few years [2][3][4]. One of thetechniques that address this problem is Responsive Web Design.
Responsive Web Design (RWD) is a set of principles that has been proposedas way to make websites usable to the different devices that access them. Theusability of interactive sites with learning content can be improved so thatthe features of regular desktop are displayed in the smaller screens withoutcompromising the delivery of the courses.
The aim of the degree project was to investigate the usability issues of themobile page of online courses. The courses developed by the company Clev-erLearning AB are expected to have the appropriate responsiveness regardingthe screen size of the user device. The following front-end technologies wereinvolved in the investigation of the project: XML (EXtensible Markup Lan-guage) [5], HTML (Hyper Text Markup Language) [6], CSS (Cascading StyleSheets) [7], JavaScript [8], the jQuery library [9] and AngularJS framework[10] tools.
15
CHAPTER 1. INTRODUCTION
1.1 Problem
It is important to adapt the web pages when transitioning a website fromdesktop to mobile. The screen size and the lack of cursor are the main con-straints in mobile web pages. The consequence is that interactive pages don’tfunction well on mobile screens. The size of the buttons decrease in an inap-propriate way. The icons that are draggable in a desktop screen are not easilymanipulated in a smartphone screen. This results in situations like scrollingthe page on the small mobile screen and zooming, which becomes impracticalfor the learner.
1.2 Problem Statement
The courses developed by CleverLearning don’t have a page designed specifi-cally to be used in mobile devices. The present thesis examined the challengesfaced by web developers when designing an e-learning web page for multipledevices and proposes to answer the question: What are the alternative waysof displaying a web page on mobile devices, so that it improves the usabilityand learning experience?
1.3 Purpose
The system developed by the company works with a static web page that loadsin the following type of devices: desktop, smartphone and tablet. Instead ofhaving a particular page to display, there must be different pages for eachdevice. This is a demand from the clients, because they use the courses fortraining purposes and wish to reach the users that are geographically dispersedmore efficiently. Thus, they need training courses better adapted to mobiledevices.
1.4 GoalThe goal of the thesis project is to show techniques in the field of web de-velopment to build websites according to the principles of Responsive WebDesign in the context of a multi-device market. The evolution of browsers,
16
1.5. METHODS AND METHODOLOGIES
smartphones and Internet connectivity allow for users to access websites with-out having to download mobile native applications. This versatility should beexplored, and adapting usable and interactive online courses to be loaded inmobile browsers can be useful for learning purposes.
1.5 Methods and Methodologies
1.5.1 Methods
The project applied a qualitative method of research. Since the project focusedon web design techniques and how it affects peoples experiences (usability), itused interpretative and critical assumptions to analyze the results [11].
The research methods used are descriptive (it investigates and explains thecharacteristics of using responsive pages in mobile systems), conceptual and,most importantly, analytical.
The analytical method involves critical thinking and decision making to-wards design, which is the purpose of the degree project. The conceptualmethod is also used in the project because it is based on previous literatureconcepts [11].
Regarding the research methodology, the action research strategy is themost suitable for this project because it focuses on solving a practical problemand observing the results. This process was iterated until the best possibledesign for the system was reached [11].
1.5.2 Methodology
The project consisted of the tasks explained below. These tasks are not se-quential, they include different aspects of what is necessary to complete theproject work.
Literature survey
During the beginning of the project work, the focus was on finding material tounderstand the project subject. Books, papers and articles on the subject weregathered from databases. Initially, 2 databases were used: KTH electronic
17
CHAPTER 1. INTRODUCTION
library [12] and KTH Primo [13]. They were used to find material by searchingwith keywords like: ’Web Development’, ’Responsive Design’, ’User Interface’and ’Mobile Browsing’.
After the references were found, they were saved in a digital directorynamed "References". Inside this directory 2 folders were created: "Books" and"Articles". These folders included the references books and research articles,divided by the following topics related to the thesis work, listed below:
• Drag and Drop
• E-Learning
• Mobile Browsing
• Responsive Design
• User Interface
• XML
This step was fundamental to organize the work by gathering what could beimportant in the writing of the present thesis. As the references were collected,broader search was performed using popular search engines like Google to seeif other work and ideas were found. Other databases that were used were theACM (Association for Computing Machinery) and Wiley libraries.
After reading the Abstract and References sections of the selected papers,they were read and highlighted in the most important sections. These high-lights were reviewed and included in the thesis if they were considered relevantfor the thesis.
Company’s software
Understanding of the source code which the company uses to develop theclients projects was needed before any implementation was made. After learn-ing the tools used in the company’s software, a test environment separate fromthe production branch of the code was used for the development of the mobileinterface.
Development and evaluation
The project development was agreed in a series of meeting with David Tikka,the supervisor of the thesis project and owner of CleverLearning AB. Duringthe first interview in the company, it was decided that the main technologies to
18
1.6. LITERATURE STUDY
be used in the thesis project were decided JavaScript [8], AngularJS [10] andjQuery [9]. The following weeks were devoted to understand these technologiesto apply them in the company’s projects.
After two months of training and study of the technologies, the design ofsimple mobile web pages started. CleverLearning has a development teamin India, which gave full support during the progress of the development. Ifneeded, the team in India was reached by call or email to help understandingthe problems faced or to fix some technical issue. The two web pages to beworked on and improved as a goal for the thesis were the Hotspot page and theDrag and Drop page (please refer to Chapter 3 - Design and Implementationfor more information). When each of them were finished, an evaluation wasconducted by David Tikka.
For the evaluation, a walk-through of the web pages was conducted, usingthe company environment consisting of a web server. It showed the pagelive on a mobile device running as a fully functional online course. Davidwould point the problems he found in the working design according to thecompany goals, and if the work was satisfactory the project moved to thenext page implementation. Then, a conclusion was written about the keyproblems faced in the implementation and suggestions to improve the pagesof the application.
Report and presentation
This was the final task for the degree project. After finishing the implementa-tion, a report and a presentation were prepared according to the guidelines ofKTH, the ICT School and the department of Communication Systems (CoS),followed by a public oral seminar.
1.6 Literature StudyTo understand what had been researched and implemented previously in thefield of this thesis project, a search for background work was made. For thedescription of the process, please refer to the “Literature Survey” in Section1.5.2. The present section is going to discuss this selected background work.
The paper titled “From elearning to mlearning: the effectiveness of mo-bile course delivery”, by U.S. Navy researcher Jason Haag, was an importantsource of material for the present thesis. It’s a study on why to build versionsof e-learning courses for mobile devices. In his paper he explained how themandatory courses taught in the military needed the be co nverted to be sup-
19
CHAPTER 1. INTRODUCTION
ported by “a wide range of mobile device platforms” [14]. The approach heused applied server-side detection to deliver the mobile version.
Haag’s paper that motivated the thesis work was the preliminary surveyabout mobile-friendly course versions. He asked the participants whether theirorganizations offered it, and 8% said the mobile-friendly versions were avail-able [14]. It was interesting to have this perspective on the usage of mobiledevices to deliver e-learning courses, because the survey shows how it is impor-tant to work towards an improvement. The section “Benefits of Mobile CourseDelivery” of the paper explains that survey participants “believe that mobilecourse delivery provides many benefits” [14]. They refer to time management,touch screen interactivity and convenience as good features of mobile devicesin e-learning.
Some problems were found in the mobile courses according to the surveyparticipants. Interfaces problems were faced by the users, such as designglitches related to the rotation to landscape orientation, issues with touchscreen buttons and nonfunctional videos [14]. All of them were faced duringthe thesis work.
The first reference about Responsive Web Design that was found in theliterature survey was called “Responsive design for transaction banking - aresponsible approach” [15]. It was saved and labeled as important since itdiscusses an “app that is ported to a tablet and smartphone context from adesktop based web app”. Its main focus is on building native applications tosolve the issue of developing different experiences for each kind of screen anddevice. Thus it was not about to building web pages like the thesis project butmobile apps, so the approach it described was left out of the implementationof the thesis.
Another article about Responsive Web Design that was found is “One sitefits all: responsive web design”, by Nancy R. Glassman and Phil Shen. Itexplains the design practices for creating responsive web pages. It was oneof the first articles read during the making of the thesis work. It was usefulbecause it describes the design process briefly and clearly. The section “Thenuts and bolts of responsive web design” explains how to use web technologies(HTML5, CSS3 and Javascript) to define flexible images and media queriesfor the responsive design implementation [16]. These design details are usedin the implementation and are referred to in the Section 3.2 (Techniques) ofthe thesis.
Some articles were not as important for the thesis as those previously citedin this section. They were found and and saved as part of the literature surveysince they had some keywords related to the thesis project. For example, thearticles “Requirements of Mobile Device’s User Interface in Social Networking”[17] and “The Importance of Mobile Interface Icons on User Interaction” [18]
20
1.7. BENEFITS, ETHICS AND SUSTAINABILITY
were read since they refer to user interface issues in mobile devices, but werenot included in the discussion of the thesis. They reflect on poor mobileinterface and but the discussion on them was too superficial for the purposeof the project.
During the making of the project Google Developers website was a sourceof good practices for mobile web design. The Google Web Fundamentalspage is a reference for this thesis work [4]. It recommends basic settings andconfigurations in the HTML and CSS code to turn a regular web page into aresponsive web page.
1.7 Benefits, Ethics and Sustainability
The content of this thesis project was web development and involved designingan interface so that users can have access to mobile applications with improvedusability. The project main focus was on the benefits of good design in an e-learning environment. The improvement of the CleverLearning online coursesmeant better usability for the learner, which also benefited the customers whochose to use the company’s projects for teaching purposes. By developing thissoftware project, the company contributes by bringing digital solutions to thelearning market. With the technology used to create the product and themeans to access the content using mobile devices, CleverLearning provides analternative to, for example, physical books and lectures, making the learningexperience simpler.
1.8 Delimitations
The aim of the thesis was not to implement solutions based on surveys oropinion polls. A survey to collect users feedback on the web pages implementedwas not performed in this project, since it was not included neither in theproject, due to time limitations, nor the company plans.
The scope of the work was within web development for mobile devices andResponsive Web Design. It strictly followed the CleverLearning specificationsand technologies, together with chosen web design principles that were consid-ered important tools to improve usability and responsiveness of web pages. Inother words, there was a model to be followed for implementing of the project,
21
CHAPTER 1. INTRODUCTION
which was a system that can identify the device used and adapt the layoutand content presentation of online based courses.
There was a commitment to maintain the company’s proprietary code outof the discussion of the thesis. In the Design and Implementation part, thecode parts owned by CleverLearning that are confidential are not presentedand the explanation is reduced to a high level view of the system.
1.9 Thesis Organization
The present thesis consists of four parts, namely “Introduction”, “Background”,“Design and Implementation” and “Conclusion”.
The first part, “Introduction”, is divided in five sections (including thisone). It starts with the “Problem Statement”, which describes the problemarea relevant for the study, the reasons for examining this particular problemand the statement that explains what will need to be resolved. “Methods andMethodologies” explains the methods and methodologies of research used toinvestigate the problem. The next sections “Benefits, Ethics and Sustainabil-ity” and “Delimitations” state the outcomes of the thesis results in the areastudied and the limits of the project research.
The second part is the “Background” chapter. It gives a brief review ofthe areas of study and technologies in the context of the research.
Next part is “Design and Implementation”. It presents the details of theproject practical work, specifically the technologies used, code explanationand the results achieved during the process.
Finally there is the “Conclusion” part. It discusses the project outcome inthe “Summary” section and the possible improvements in “Future Work”.
22
Chapter 2
Background
2.1 Responsive Web Design
The main focus of the project was on how to build responsive pages that main-tain usability both on desktop and mobile, making the necessary adjustmentsin the layout to fit the screen size of different devices, such as smartphonesand tablets.
When adapting a mobile page from a implemented desktop version, thesteps to change the latter depend on what type of page the designer or de-veloper is working on. The information that is displayed to the user is veryimportant, because is not always a case of creating a new layout, but on howthe different pages would be perceived by a mobile user. A good discussionabout was found in the paper “Perceived Usability, Attractiveness and Intu-itiveness of Responsive Mobile Tourism Websites: A User Experience Study”[1], by Groth and Haslwanter. Their study explains the different user experi-ences when trying two touristic websites on desktop and mobile.
The paper explored three main characteristics of a touristic website: usabil-ity, attractiveness, intuitiveness [1]. This thesis project, although not focusedon user experience in this kind of market (touristic information websites), ex-plored the latter three characteristics on Responsive Web Design, with moreemphasis on the usability. Its goal is to find the most convenient way ofadapting a website to the smaller screen, both mobile or tablet, without com-promising the content of. In the paper called “Being Responsive” [19], theauthor Robert Fox discussed if it is good or bad to a business to have differentwebsites versions, and what focus the developer should pursue when doing awebsite. A relevant point is made in the following sentence from Fox:
“...in many ways, success is measured by the visceral impact that a
23
CHAPTER 2. BACKGROUND
web site can produce on the information consumer. Responsive de-sign, however, makes an important assumption about the functionof the internet as a vehicle for information discovery and retrieval.The focus is on transparency rather than glitz, and this is impor-tant because in reality, there are limited contexts in which peopleexpect graphical richness when using the internet, such as in en-tertainment contexts, marketing sites, and cultural expositions.”[19]
The focus, according to Fox, should be on the information that the pagecontains, on how it should be visualized without enhancements on the designor “glitz”, as he called it. This was the approach taken in the implementationof the project. The web pages that were worked on CleverLearning for thisthesis didn’t actually need to be reinvented, they only had to be adapted formobile screens so that the content could be more visible for smaller screens.
2.2 User Interface
The usability of a mobile page was a big concern in this project since thegoal was to convert a page from the desktop screen to a new, redesigned pagethat can conform to the limitations of a smaller screen size, expose all theinformation present in the original version, and still maintain the buttons andlinks that make the page interactive. For example, since smartphones don’thave cursors or pointers, the page had to be clickable using the touchscreenfeature, but with the condition that they are big and well spaced, and thatthe user could actually interact properly with the content. [20]
On the paper “Usability of web interfaces on mobile devices”, Wessels,Purvis and Rahman explained good practices which were used to implementthe web pages during the thesis work like, for example, the similarity betweenthe desktop and mobile interfaces [21]. In CleverLearning, one of the pageshad buttons that, when pressed, displayed a pop up window with information.One of the concerns was how to maintain these buttons and overall interfaceas similar as possible to the regular desktop version.
Bringing educational websites to mobile devices that feature touchscreeninterfaces allow more interaction between the student and the course content.The experience that HCI (Human Computer Interaction) provides is usefulbecause it is appealing for the learner [22]. Many features of the new deviceswere considered during the design decisions of this thesis. For example, instant
24
2.3. MOBILE LEARNING
feedback, quizzes, and other sorts of interactive pages were included in the webpages worked in CleverLearning. Also, many tablets and smartphones have allthe enhancements needed to build an interactive user interface. Touchscreencapabilities, different screen sizes, holding positions influence how a studentcan interact with a course page.
CRADLED HELD FINGER TWO HANDS LANDSCAPE
ONE HAND LOW TWO HANDS PORTRAIT ONE HAND HIGH
Figure 2.1. Smartphone touchscreen displays in different positions. (Source:Handbook of Mobile Teaching and Learning, 2015) [23]
2.3 Mobile Learning
Mobile learning (or mLearning) deals with the future technologies that aregoing to support the learning experience of mobile users. It is described as:
“Leveraging ubiquitous mobile technology for the adoption or aug-mentation of knowledge, behaviors, or skills through education,
25
CHAPTER 2. BACKGROUND
training, or performance support while the mobility of the learnermay be independent of time, location, and space.”[24]
Many government institutions are maintaining study groups and standard-izing mLearning, like the Advanced Distributed Learning (ADL) [25], an ini-tiative created in 1997 by the The Department of Defense (DoD) Office of theUnder Secretary of Defense for Personnel and Readiness (OUSD P&R). For ex-ample, ADL created the Sharable Content Object Reference Model (SCORM),which is responsible for the standardization and specification of e-learningmanagement systems [26]. CleverLearning follows the SCORM specificationsfor designing the company’s online courses.
Tablet
Smartphone
Non-p
honedev
ice
Basic
mobile phone
E-reader
0
10
20
30
40
50
60
Usage
(in%)
Figure 2.2. Devices used for learning by percentage of total mobile devices.(Source: ADL Mobile Learning Survey Report, 2013) [24]
Studies by Malone and Lepper [27] and Ciampa [22] show how several
26
2.3. MOBILE LEARNING
aspects of mlearning (challenge, control, competition, cooperation, curiosity,and recognition) have good impact on the learning experience.
The educational material for mLearning must be ready for the constantevolution of the users’ devices. As explained in Section 2.2, the manufactur-ers of the mobile devices have created interfaces that are intuitive. Duringthe develpment of the thesis project, the main mobile devices explored weresmartphones and tablets. These 2 devices were considered the most relevantfor the research because they gather the majority of users. Figure 2.2 showsa survey made by ADL with 831 participants. It shows that these devicesare the most often used by the participants, with tablets as the main device(61%), followed by smartphones (29%) [24].
According to Haag and Berking [23], the design of mLearning projectsmust take into account the affordances that enable the learners to performactions on mobile devices. These devices have a list of capabilities (Table 2.1)that provide the educational designers with possibilities to create mLearningprojects appropriate for the mobile environment [23].
Table 2.1. List of mobile device affordances. (Source: Handbook of MobileTeaching and Learning, 2015) [23]
Affordance for Mobile Learning Device CapabilitiesAccessing: On-demand access to informa-tion, courses, performance support or refresherknowledge.Examples: Search knowledge bases, jobaids, reference, dictionary, Wikipedia, courses,voice search, social media.
touch screeninternet browserconnectivitymicrophone
Augmenting: Overlaying still imagery, audio,or video over real world objects or setting insupport of or during a contextual learning ac-tivity.Examples: Augmented reality, scavenger hunt,museum tours, language learning.
cameraGPSinternetconnectivity
Capturing (audio): Documenting or record-ing auditory content in support of or duringa learning activity.
microphonespeakersdigital storage
Capturing (imagery or video): Documentingor recording visual content relevant to learningactivity.
cameramicrophonedigital storage
27
CHAPTER 2. BACKGROUND
Table 2.1. (Continued)
Communicating (messaging): One-way, two-way or group messaging as part of an informalor formal learning activity.Examples: Group collaboration, instructor/s-tudent discussion and chat.
SMSMMSchat appsmicrophone
Communicating (voice): Two-way, or groupdiscussion as part of an informal or formallearning activity.Examples: Group conference, meeting, focusgroup.
voice callvoicemailspeakermicrophone
Contextualizing: Notifications and linked in-teractions sent by transmitters or tags at-tached to objects using proximity or locationsensors to provide a context-aware or location-aware content in support of or as part of alearning activity.Examples: iBeacons, QR Codes, scavengerhunt, mobile tours, games, and interactive sto-ries.
BluetoothGPSNFCRFIDWi-Ficamera
eReading: Accessing and reading documentson multiple devices anytime, anywhere in sup-port of or as part of a learning activity.
text zoomtext highlightingnotes
Media Playing: Accessing media anytime,anywhere in support of or as part of a learningactivity.Examples: YouTube, Khan Academy, Webi-nars.
imagevideoaudiointernetconnectivity
Notifying / Reminding: Event triggers, in-stant reminders, and alerts that illicit imme-diate responses or deeper engagement with alearning activity.Examples: Spaced repetition/learning, flashcards, language learning.
connectivitytouch screenpush notificationservicecalendar
Table 2.1 describes Accessing, eReading and Media Playing, the requiredaffordances that the web pages in the thesis project required. They involvetouch screen, Internet browsing and connectivity, text notes, image and video
28
2.4. MOBILE WEB BROWSING
files. These are the capabilities related to the architecture (Chapter 3) thatCleverLearning built. They are explained below:
Accessing
The courses built by CleverLearning offer web-based training as a solution forcompanies that require their employees or clients to learn about an specifictopic. Since the companies demand support for online browsing, the coursesmust be available on the Internet.
eReading
The support to access the courses in devices such as smartphones and tabletsis one of the concerns of the thesis project. Another one is how the content isexposed. Displaying text and information on the web pages in a appropriatesize and in a coherent way with the course is an important quality that allowthe learner to have the same experience as in desktop browsers.
Media Playing
The same principle for eReading is applied for information in the form ofimages and videos. In Chapter 3, the implementation of the Hotspot pageshows how the responsive image is an important quality when accessing thecourse on the mobile screen.
2.4 Mobile Web Browsing
The implementation of the mobile web page of the project required the studyof the characteristics of the smartphones and tablets, among others, and howto browse the page that was going to be tailored for these platforms. Thereare many technical details to be investigated in this topic, such as the screenvertical or panoramic orientation, the use of a physical or screen keyboard,etc., and they all relate to the usability discussion of the previous section.Studies have shown that, when browsing websites on mobile phones, users cancomplete specific tasks faster with mobile tailored versions as opposed to anon-tailored mobile version [28].
29
CHAPTER 2. BACKGROUND
2.5 Front-end Technologies
This section explains the related technologies and skills that were needed dur-ing the modeling and designing of the thesis work. It refers to the engineeringand technical knowledge required to implement the web pages for the thesisproject. The following is a brief definition of XML, HTML, CSS and theJavaScript tools.
2.5.1 XML
XML (EXtensible Markup Language) is a markup language that extends theHTML by allowing custom tags that describe data. It is based on the Stan-dard Generalized Markup Language (SGML), a set of syntax rules for generalmarkup languages created by the ISO in 1986 [29].
The tags are defined to store and transport data that is displayed by HTML[30] [31]. The XML and HTML syntax are very similar. Both have elements,tags and attributes, but XML adds information in the tags names, providinghow a document should be presented by the HTML. The HTML syntax thenextracts all the information out of the XML and translates it to a presentationlayout that is compatible to the web standards. The instructions for the XMLgrammar are defined by Document Type Definitions (DTDs) [32].
2.5.2 HTML/CSS
HTML and CSS are the main technologies used for web development today.They are responsible for the majority of web pages built, surpassing others likeAdobe Flash [33] as the standard front end development technologies. HTML(HyperText Markup Language) is the markup language responsible for theDOM of each page. It defines the structure of the website. CSS (CascadingStyle Sheets) is a set of style rules that creates the visual details of the page. Itis responsible for the content design like colors, fonts, image sizes. It also addsinteraction to the user. That interaction is obtained by writing programmingscripts for each page in a language called JavaScript.
30
2.5. FRONT-END TECHNOLOGIES
2.5.3 JavaScript
JavaScript is a language that manages the interactions of a web page. Itworks together with HTML and CSS to make the website live by definingfunctions for elements in the page. Buttons, images, videos, inputs are man-aged by JavaScript. In JavaScript, it is possible to implement classes thatinherit from other classes. The concept of multiple inheritance is commonfor code reuse and extensibility in classical OOP (Object-oriented program-ming) languages like Java and C++ when creating classes and objects. Thisrepresents a “is-a” relationship between the objects in a hierarchy of classes.But another approach to object orientation that JavaScript supports is namedobject composition. This represents a “has-a” relationship.
Stampit [34] is a library of functions written in JavaScript that substitutesthis use of class inheritance common to OOP and implements a “has-a” rela-tionship. The Stampit function library was introduced by Eric Elliott as anexample of how to use factory functions to create objects with reusable be-haviours, creating a class-free program. Factory functions are a way to createnew objects in JavaScript. Stamps are composable factory functions. [34]
2.5.4 jQuery
jQuery is a client-side JavaScript library that is based on simple syntax tocreate complex interactions in the web page. It is used for: HTML and CSSmanipulation, event handling, creating visual effects [35]. It is the most usedJavaScript library today, with 70.6% of all the websites making use of it (96.2%of the websites that use JavaScript) [36].
2.5.5 AngularJS
AngularJS is a client-side JavaScript framework that creates a structure basedon Model-View-Controller (MVC) [37] architecture. It extends the HTML byintroducing new markups, synchronizing JavaScript files, separating the ap-plication logic from the view and binding the data the user sends and receivesto the web page. In this manner, AngularJS decentralizes the implementationand updates between JavaScript and the HTML [38].
31
CHAPTER 2. BACKGROUND
Understanding AngularJS Two-Way Data Binding
The AngularJS framework introduces a software architectural pattern for webapplications isolating the application logic from the user interface (commonlyknown as view), improving code readability (separating the program into dis-tinct files) and reusability. The specific architecture of AngularJS is dividedin the following components:
• Controller: Controls the flow of data in the application. Containsproperties and functions to be used in the application.
• Model: The component responsible for managing the application data.
• Template: The HTML code which is compiled in the browser, creatinga live View page.
• View: The page that is loaded in the browser, based on HTML Tem-plate.
This type of relationship is fundamental to the AngularJS Two-Way DataBinding feature [39]. Two-Way Data Binding is a form of automatic updatebetween Model and View: The data predefined in the Model is loaded into theView (the web page) when the Template is compiled. If there is any changeon the data in the Model, the View reflects this change, and vice-versa (Figure2.3). This feature makes the loading and testing of the web applications faster,since the server-side application does not need to update the entire page, onlywhat is changed in the Model or View.
Template
View
Model
Controller
Compile
View updates ModelModel updates View
Control Logic
Figure 2.3. The Two-Way Data Binding relation diagram in AngularJS.(Source: AngularJS: Developer Guide) [39]
32
Chapter 3
Design and Implementation
3.1 Overview
The design and implementation part of the project focuses on the buildingprocess of a functional web page that works in multiple devices. It addressesthe usability issues of the Introduction page, the Hotspot page and the Drag-and-Drop page of the CleverLearning e-learning system. Using principles ofResponsive Web Design, the page is explained with emphasis on how to adapta page in order to make it flexible and usable for learners that log in theCleverLearning courses. This explanation focus on the XML and the HTMLcodes and the JavaScript solutions created to describe the new web pages.The details that are property of the CleverLearning system are put out of thediscussion, as noted in Section 1.5 (Delimitations).
At CleverLearning, all courses are produced over a specific Learning Man-agement System (LMS). During the thesis work, all the HTML page typescontained in the LMS were provided in the form of a template and all themodified implementation is kept in a different location from the productioncode been used by the clients.
3.2 Techniques
During the making if this project, various concepts and techniques were usedto implement the web pages. Besides using the languages and technologiesalready mentioned in Chapter 2 (Background), the following were importantfeatures taken into account in this implementation:
33
CHAPTER 3. DESIGN AND IMPLEMENTATION
• Make the HTML elements responsive: A front-end framework isneeded for the project web page to be responsive. It simplifies andstandardizes the site structure giving it a template and applying thesame layout settings.
• Media queries: A media query consists of the media type attribute[40]. It checks the device that is being used, and loads the specificrules depending on device. Since CSS3, the media queries can makesconditional statements for making different adjustments in the contentwidth or ratio, for example, as shown below:
@media screen and (max-device-width: 480px) {/* Add the CSS rules and styles here */
}
• Fluid grids: For the responsive page to work on different devices, afluid grid must be used by assigning relative units to the CSS rules [41].Instead of the absolute units, the relative % symbol should be used.
• Flexible images: The images of the the web page are important ele-ments that must be flexible. When a browser size is decreased by theuser, or a page is loaded on smaller screen devices, the image can remainlarger than the browser window or the actual device being used. A sim-plifed CSS usage of flexible images or other elements is the following:
img, object, video {max-width: 100%;
}
3.3 Architecture
The LMS consists of an e-learning based system of courses, containing thestandards and conventions to build a course. The CleverLearning coursescontain a number of chapters and a number of web pages in each chapter.
34
3.3. ARCHITECTURE
Each course has a linear structure of page types, with content based on theclient’s desire. For example, a bookstore that maintains an e-learning courseto train its employees may have multiple choice question pages, knowledge testpages; an organization with an e-learning course for its members can displayinformation videos on a page and have a quiz page after that.
A course contains between 3 to 7 chapters, or more if needed. It couldalso be possible that a client company has a course that only consists of onechapter.
Here’s the main contents of a course:
• A limited number of web pages within each chapter, in most cases 3 to20 pages.
• A user interface that consists of:
– The course title;– The customer’s logotype;– The page content;– Forward and backward navigation buttons;– Links to popup windows, such as help and dictionary;– A progress bar that shows the user’s progress within each chapter;
The CleverLearning LMS is responsible for the user progress and results.The foundation of this proprietary LMS system is a XML page that is used tocreate and publish the courses. The XML contains the information needed togenerate the website in HTML. Each page type has an HTML template thatis used as basis for the clients courses and their needs, and this template isgenerated from the main XML file.
The LMS specification defines that each course must have it’s structurewritten in a main XML document as a standard for all projects. From thisfile it is possible to retrieve all the information about the page type, the text,the questions, and other media contained inside of it (images, video, sound).
For the course pages to work, the code is separated in files that are used torender the pages design and functionalities. The files are written in JavaScriptand use the AngularJS framework to make the Two-Way Data Binding (asexplained in Section 2.5.5) with the server or course database, as well asinteractions between the user input and the page. Below are flies necessaryfor each page type files:
35
CHAPTER 3. DESIGN AND IMPLEMENTATION
XML Document Course Generator Course page in HTML
Figure 3.1. Course page architecture
• pagetype.js (AngularJS Module file) - This file defines and initializes theAngularJS application. It’s a container that holds the information onother parts of the application. [42]
• pagetype.ctrl.js (AngularJS Controller) - The Controller that managesthe data is defined in this file. [43]
• pagetype.drct.js (AngularJS Directive) - The directive contains the struc-ture to create or change the HTML elements in the page. [44]
The HTML template that process the XML above and create the page fordesktop and mobile is:
• pagetype.tpl.html (template of the HTML page for desktop)
The main XML file contains the pages defined for the course to be build.The structure of the XML file is based on CleverLearning naming conventions.With the information contained in the XML document is possible to generatethe course HTML pages to the desktop and mobile browsers. Each page typeis written in HTML and loaded using the AngularJS framework to build webapplications.
3.4 Page Implementation
For the implementation of the project web page, a series of principles weretaken to reach the purpose of the thesis project, along with CleverLearning
36
3.4. PAGE IMPLEMENTATION
own needs. The list of guidelines for the project implementation are listedbelow. They are enumerated below as steps so that it is clear which techniqueswere used in each of the pages to be implemented. Each of these pages aredescribed in Sections 3.5.1 to 3.5.4. Please note not all of the steps below aretaken into account in every page. They are not mandatory in every page, butare enumerated because they were necessary in different page scenarios.
• Step 1: Make the web page ready to be responsive.Using frameworks, meta tags and media queries setup the page to makeit responsive to the device screen.
• Step 2: Flexible layout.The elements and layout should be flexible and not fixed. This is ob-tained by using CSS rules.
• Step 3: Images and text must maintain legibility.The change between different screen sizes make the element text andimage details decrease, which make the information difficult for learnerto understand. This has to be fixed by correcting the size of the elements
• Step 4: Easy to build.The pages should be easy for the developer who is building the coursepage, since it’s being done manually.
3.4.1 Introduction pageIn this section an non-responsive page that has an introduction video for thecourse is explained. The standard structure of the page is explained as follows:
In the top right corner there is a menu button to navigate through thelessons. Once it is clicked, the list of lessons shows up on the screen. Thebottom of the page contains the progress bar. It shows the current statusof the learner in the course. The learner can also navigate by pushing thebackward or forward arrows located at the bar. Finally, inside is the actualpage type with its content, depending on the page type. Figure 3.2 displaysthe first page of the sample online course of the project, an instructive courseabout a bookstore . It displays a video with introductory information aboutthe course and the book company that it was built for. The implementationin the current and next sections omit the details about the company andother design choices that are not important for the project to achieve its goal,therefore the images are sketches and not the final product.
37
CHAPTER 3. DESIGN AND IMPLEMENTATION
Figure 3.2. Non-responsive Introduction page in a desktop screen
The page has only one element inside it, the video element, with the com-mands (play, pause, full screen, subtitles). If the page is loaded in a smallerdevice, the video doesn’t resize and remains bigger than the physical screen.This results in poor usability, and the learners won’t be able to watch thevideo in their device in the first page of the course, showing only a section ofthe video element, as seen in Figure 3.3.
Viewport meta element
The first measure to be taken is to apply Step 1. Setting the Viewport of thepage. The Viewport is the area of the page that is visible by the user andvaries according to the size of the screen. It was introduced by Apple in theirMobile Safari browser in 2007 [45]. To tell the browser that the page shouldbe rendered to the width of the device, the Viewport <meta> tag that has tobe inserted in the <head> section of the HTML pages:
<meta name="viewport" content="width=device-width, initial-scale=1">
The content attribute sets two properties:
• width=device-width sets the content width to the width of the device
38
3.4. PAGE IMPLEMENTATION
Figure 3.3. Non-responsive Introduction page in a mobile device screen
screen in terms of Device-Independent Pixels (DIP). [4]
• initial-scale=1.0 sets a 1:1 scale relation between the CSS pixels andDevice-Independent Pixels (DIP). [4]
CSS flexible width
Following Step 1, the implementation of Step 2 is explained below. The fol-lowing change was made in CSS. First, add the properties width: 100\% andheight: 100\% to the class named video. This makes the video element<div class="video"> flexible to the size of the screen.
The CSS rule for this class has to be changed to:
39
CHAPTER 3. DESIGN AND IMPLEMENTATION
.video {width: 100%;height: 100%;
}
The flexible layout resulted in a page with the entire video and the actionbuttons displayed inside the screen, visible without having to scroll the pagehorizontally. Figure 3.4 is a screenshot of the same page in a iPhone 6 Plus,but with the responsive design.
Figure 3.4. Responsive Introduction page from the bookstore course loadedin iPhone 6 Plus.
40
3.4. PAGE IMPLEMENTATION
3.4.2 Hotspot page in portrait mode
This section describes the adaptation of the Hotspot page type of the book-store project that conforms to a mobile device screen. The Hotspot page is aninteractive page that allows the user to click different buttons located on thescreen, launching popup pages to get information about a particular topic inthe course lesson.
Figure 3.5. Non-responsive Hotspot page in a desktop screen
In Figure 3.5 it can be seen that the size of the screen has a lot of space toinsert information without compromising the user experience. The Hotspotpage contains different elements:
• the background image, shown in Figure 3.5 as the circles with drawingsor pictures.
• the interactive buttons, which the learner has to push to see furtherinformation.
• the page title.
The background image and the buttons modifications are explained in thispage implementation. They follow Step 1 and Step 2.
When the page is loaded on a mobile device, the page visualization isaffected because it is designed as a static desktop version. The screen is
41
CHAPTER 3. DESIGN AND IMPLEMENTATION
smaller and the page displayed is not resized to fit the screen and must bescrolled horizontally to show the information.
To be able to show the content in the mobile screen without having tozoom or scroll the page horizontally from left to right with the fingers. Aflexible layout (Step 2) has to be implemented to resize the layout to fit thescreen.
Figure 3.6. Non-responsive Hotspot page in a mobile device screen
Figure 3.6 shows the Hotspot page when accessed via a mobile device.The page remains unchanged, and the information contained on the page isnot completely shown. Depending on the device, the user has to double-tap,pinch-to-zoom or scroll the screen in different parts to be able to see the restof the content.
Viewport meta element
According to Step 1, the first measure to be taken is setting the Viewport ofthe page, as in the Introduction page (Section 3.5.1):
42
3.4. PAGE IMPLEMENTATION
<meta name="viewport" content="width=device-width, initial-scale=1">
The content attribute sets two properties:
• width=device-width sets the content width to the width of the devicescreen in terms of Device-Independent Pixels (DIP). [4]
• initial-scale=1.0 sets a 1:1 scale relation between the CSS pixels andDevice-Independent Pixels (DIP). [4]
CSS flexible width
The following changes were made in HTML and CSS as part of Step 2. First,add the property width: 100\% to the <img> tag with the background im-age id named hotspot-background-image, and disable the position property.This makes the image in the background flexible to the size of the screen. The<img> element containing the background image is the following:
<img id=“hotspot-background-image”>
The CSS rules for this id have to be changed to:
#hotspot-background-image {left: 0px;top: 30px;position: relative;width: 100%;
}
This implementation makes the background image resize with the browserwindow size. However the buttons are not yet responsive and maintain thesame static position as if the page is loaded on a desktop. For example, in aiPhone 6 Plus (Figure 3.7), none of them appear except for one button, placedincorrectly:
43
CHAPTER 3. DESIGN AND IMPLEMENTATION
Figure 3.7. Hotspot page with responsive background image element and noresponsive buttons in a iPhone 6 Plus screen. The button appearing in thescreen (a purple circle with a white ‘plus’ sign) is in the incorrect position.
Javascript code for responsive Hotspot buttons
The position of each button in the Hotspot page was implemented in the An-gularJS directive source code. The directive tells the page elements how tobehave. Therefore the solution is to change the jQuery methods that are ap-plied to each button. This made the buttons flow together with layout (Step2).
The first task was modify the JavaScript implementation in the AngularJSdirective file, so that the page changes automatically, without having to man-ually change the XML. In this Hotspot page there are 10 interactive buttons.Each one is a different element in the page and displays a different popupscreen when clicked. To make these buttons responsive, their position had tobe defined using a jQuery method for each button. Below is the code sectionof the Hotspot directive that changes button number 1 in the page:
44
3.4. PAGE IMPLEMENTATION
$(hotspotButtons).each(function (index, value) {if(value.target === "button_number"){
$(button).css({’top’: value.x + ’%’,’left’: value.y + ’%’,’position’: ’absolute’,’cursor’: ’pointer’
});}
}
Here, target represents a button that is parsed from the XML and storedin the hotspotButtons variable. The top and left properties are set tobe responsive by adding the value together with a % to the x and y valuescontained in the XML of the page. The values are extracted from the XML,collected by the controller and sent to the directive. This implementationmade the button position change with the browser window, so when the visiblearea gets decreased, the buttons automatically move to be in the exact positionrelative to the background image. This was applied to each button inside thepage using the same jQuery methods (.each() and .css()), making sure theposition of the buttons match the right position on top of the backgroundimage.
All the buttons remained functional, since there was no modification inthe implementation for the pressing and popping of the popup window ofeach button. The popup window is small enough and ready for the differentscreen sizes and didn’t show any differences between the old the new versionsof the Hotspot page. The final result for this page can be seen in Figure 3.8.
45
CHAPTER 3. DESIGN AND IMPLEMENTATION
Figure 3.8. The responsive Hotspot page in a iPhone 6 Plus browser, inportrait mode.
46
3.4. PAGE IMPLEMENTATION
Another page with less buttons is shown in the Figure 3.9 below, alsoloaded in an iPhone 6 Plus in portrait mode. Here, the 4 buttons are carefullyplaced to be exactly in the same place as when loaded in the desktop screen(Figure 3.10). The changes made the buttons responsive but the content ofthe page remained he same as in the original project created in the XMLstructure.
Figure 3.9. A responsive Hotspot page in a different chapter of the samecourse. This is a web page accessed from an iPhone 6 Plus browser, in portraitmode.
47
CHAPTER 3. DESIGN AND IMPLEMENTATION
Figure 3.10. A responsive Hotspot page in a different chapter of the samecourse. This is a web page accessed from an desktop browser.
48
3.4. PAGE IMPLEMENTATION
3.4.3 Hotspot page in landscape mode
This page implementation follows Step 1 and Step 2, the same from Section3.5.2. Figure 3.11 shows another Hotspot page from the same course. Italso contains Hotspot buttons distributed along the background image, but isloaded in an iPad and shows an example of the device positioned in landscapemode. The background image is spread through the screen of the device,showing the content and the Hotspot buttons spaced through a large area.The big difference from the portrait mode from Figures 3.8 and 3.9 is the sizeof the Hotspot Buttons in relation to the background image.
Figure 3.11. A responsive Hotspot page accessed from an iPad browser, inlandscape mode.
49
CHAPTER 3. DESIGN AND IMPLEMENTATION
3.4.4 Drag and Drop page
The Drag and Drop page type is another page from the CleverLearning systemthat was investigated for the thesis project to be optimized for mobile devices.This type of page consists of an exercise where the learner has to drag objectsto a specific target. The page works properly when the course is loaded ona desktop, but like the Hotspot page explained in sections 3.5.2 and 3.5.3, isnot ideal for mobile devices for the same issue of non-responsive design.
The page accessed in the desktop browser is shown in the Figure 3.12below:
Figure 3.12. Non-responsive Drag and Drop page in a desktop screen
This page type presented a big challenge since it had the following list ofrequirements:
1. An arbitrary number of drag objects.
2. An arbitrary number of drop targets.
3. A background image that covers the whole content area.
4. A body text that is displayed above the background image.
50
3.4. PAGE IMPLEMENTATION
5. The drag objects and drop targets are images.
6. It should be possible to position the drag objects and drop targets onabsolute coordinates within the content area.
7. There should be a button for submitting.
8. There should be a setting for whether or not all drag objects must bedragged.
9. There should be a setting for how the drag objects should land on thetargets.
10. When submitted the answer should be evaluated, and the following feed-back should be given:
• Feedback if not all drag objects are placed, if necessary.• Feedback if all drag objects are placed right.• Feedback if some or all of the drag objects are placed wrong.
Requirements 1, 2 and 4 were the most important from the mobile designperspective, because they occupied most of the area inside the page. Thedraggable icons and the dropping targets in the Drag and Drop page are theinteractive items of the page type. Therefore the implementation should bethought of optimizing the interface towards these elements. The first idea wasto take responsive approach from Step 1.
Responsive approach
The first approach was to make the buttons responsive to the mobile screenas part of Step 1. An interface that was thought of was one where the objectsget reduced according to the device and still be draggable by a finger. In thereference page “Size Tap Targets Appropriately” [46] of Google Developerswebsite about Responsive Web Design, the recommendation is that the de-veloper must make important tap targets large enough, so that they are easyto press. The objects were made so that the minimum height was set to 48CSS pixels. Following this guideline, a drawing of the mobile interface wasmade as an idea to how the web page should look on small smartphones andpresented to CleverLearning to be evaluated. Figure 3.13 shows the resultingdrawing.
51
CHAPTER 3. DESIGN AND IMPLEMENTATION
Figure 3.13. A tentative design for a responsive Drag and Drop page in amobile screen
This design approach focused on the usability of the page from the learner’sperspective without replacing the original idea of the Drag and Drop page thatis enumerated in the requirements list above. From Figure 3.13 is seen thatthere is a small space left for a submit button (Requirement No.7). In Figure3.14 we can see how the original Drag and Drop page would look like whenloaded in a smartphone browser before the changes compared to the page
52
3.4. PAGE IMPLEMENTATION
loaded after the implementation of the mockup design.
Figure 3.14. The original Drag and Drop page before (left) and after (right).The image on the right shows the implementation of the mockup design.
It can be seen from the above image that the drop targets are not fullyshown in the leftmost image. but the constraints set by the mobile deviceappear when the number of objects increase. Suppose the there are 10 ormore draggable objects and its respective drop targets. Since the mobilescreen is too small for that quantity of interactive objects, the learner willhave to scroll down the page so that it finds the rest of the objects (if theyremain with the same size of 48 CSS pixels minimum height). This will leadto problems because the simultaneous scrolling and dragging of the objects isnot allowed. The touch screen functionality of the device cannot differentiatebetween the two.
The following is a simple scenario where this problem is encountered: Adraggable object is held down with the finger in the screen. If the object’starget is not displayed in the screen, the user needs to scroll the web pageuntil it finds it. The learner has to release the finger that is currently holdingdown the object. The learner then uses the same finger to scroll the page.
53
CHAPTER 3. DESIGN AND IMPLEMENTATION
This kind of scenario exemplifies the difficulties faced when adapting theDrag and Drop page for small screens in this project. It can become non-intuitive for the learner. If many draggable objects are included in the coursepage, the drop targets can be pushed down to the bottom of the page. Figure3.14 shows how 3 objects can be enough to crowd the screen of a small screendevice. They will only be visible as soon as the learner scrolls the page. Theobjects size cannot be decreased. This violates the legibility determined byStep 3.
Alternative page type approach
The learner can become unaware of the need to scroll down the page to revealthe drop targets that are part of the question in the page. This design had tobe changed and the idea was refused by CleverLearning.
The next approach taken was to redefine the page for mobile devices asa different page type. To adapt the original Drag and Drop page for mobilescreens was not practical, so a question type page was created, so that themobile version included question that referred to the draggable objects and itsdrop targets. So if the Drag and Drop page contained three objects, the mobileversion of this page would contain three statements (that referred to the textfrom the drop targets) and each of those a set of three answers (referring tothe draggable objects). One of the answers is the correct one. Based on thesame Drag and drop page from Figure 3.12, the design of the new questiontype page is shown on Figure 3.15.
This design was an appropriate alternative because the users don’t needto drag objects. They can simply scroll down if there are more questions inthe questionnaire. The change in the implementation maintains the legibilityrequired by Step 3. The idea was that course only loads the Drag and Droppage type in desktop. If the course is accessed in a mobile tablet or smart-phone, the page loads as a Question page type. This however creates anothercode implementation for a single course page. The HTML has to be dividedin two: one for Drag and Drop page type and another for Question page type.
The duplication of code and data explained above is undesirable for com-panies such as CleverLearning. The maintenance of the code can becomea problem, making the courses harder to build, violating Step 4. Since noimprovement was made if this design was implemented, this page was not re-designed. It was decided that so this page need further improvements, so no
54
3.4. PAGE IMPLEMENTATION
Figure 3.15. A question type page: An alternative design for a responsiveDrag and Drop page in a mobile screen.
work was made after the alternative Question page idea.
55
Chapter 4
Conclusion
4.1 Discussion of the implementation
The code that was introduced in Section 3.5.2 shows how the page is pro-grammed to show all the buttons in a mobile screen without having to scrollor zoom in order to display information. The background image, the buttonsand the popup screens are responsive to the screen size, so the users can in-teract with the page more easily whether they have a desktop, a smartphoneor a tablet. Figure 4.1 shows the page loaded with the changes and how itlooks when the browser window has the width decreased.
During the testing for the Hotspot page, the responsive buttons were orig-inally implemented to be decreased in size so that they follow the size ofthe background image, making the design elements proportional. The resultsshowed that the buttons’ size decreased in a way that is hard for the learnerto press when using a smartphone. Their small size made it complicated forthe touch screen in the device - which is already small - to sense the user’sfinger. This resulted in worse user experience.
Following the guidelines from Google Developers page [46], the page but-tons were made so that the positions became responsive to the browser windowsize, but their sizes remained unchanged. That way the learner could interactby easily pressing them as in the previous version. The other concern re-garding is that the buttons should be proportional to the background image.Figure 3.5 shows that although the buttons are not precisely on top of theirrespective spots, this design detail don’t affect the overall design or usabilityof the page. The discussion of maintaining a distance between each Hotspot
57
CHAPTER 4. CONCLUSION
Figure 4.1. The Hotspot page with responsive buttons in a decreased desktopbrowser.
button and their sizes had a positive impact that made this drawback of thebuttons’ proportions irrelevant.
The image displayed by the Hotspot page was part of the fixed designand made flexible by applying the relative width rule to it’s CSS attribute(width: 100%). This was an easy adjustment for the Hotspot page, whichhas only one big background picture present in its design. Different websitesthat share this simple design also apply the same rule. Reidsma, for example,studied this design issue in libraries websites [47][48]. Comparing the samepage loaded in a smartphone and on desktop, some differences were visible,mainly the space covered by the background image, which occupies less than50% of the iPhone 6 Plus screen, compared to the desktop. The figures alsoshow how the buttons maintained the same size in multiple devices, not dis-turbing learner usability of the page.
There are other Hotspot pages in this and other projects that were alsoadapted to have a responsive mobile interface. Since the changes were notmeant to be made in the XML file, every other page has the same imple-mentation for the position of the buttons as the Hotspot page explained inSections 3.4.2 and 3.4.3. The only difference was in the position of the buttonsin the other pages, and that depended on the XML description for the course.This XML definition is part of the production process of CleverLearning, and
58
4.2. SUMMARY
because the company’s objective is to create the course data in XML before-hand during the project early stage, the developer can have less dependencyon how the content was made and focus on parsing the data contained in theXML file and make the content behaviour change according to the page typethat is used to load in the course web page.
4.2 Summary
This thesis project investigated how to implement better online courses byapplying techniques of web development and design to achieve a responsiveweb page that fit multiple devices without making the learner struggle withbad usability. From the beginning of the project, the goal was to study andanalyze the current status of the pages technical implementation. A lot oftime was devoted to familiarizing with the tools to create new interactive webpages, having meetings with the developers about the architecture used by thecompany and self-study of JavaScript applications, AngularJS and jQuery, andresponsive web design principles applied in HTML and CSS.
After this first phase, a literature study was started to gather informationon the areas of E-learning, mobile web browsing, Responsive Web Design, userinterface. They were organized in a separate folders, divided between papers,articles and books. After this was completed, the project implementationstarted by investigating the Hotspot page type from a course that has beendesigned in CleverLearning, and working on the responsiveness of the page.The debugging and testing were performed and the results were shown toDavid, the thesis supervisor. After the Hotspot page, the next objective wasto adapt the Drag and Drop page for mobile. This page type was analyzedfor a longer portion of the thesis project schedule. Two pages were designed,evaluated and refused. Since the results were not achieved for the design ofthe Drag and Drop page, and the schedule was delayed by the work, it wasput as future work to be done after the conclusion of the thesis project.
The final phase of the project involved writing the thesis based on theproject investigation and the information about good practices for buildinglearning courses found on the literature study, along with evaluation by thesupervisor and examiner of the thesis in KTH.
59
CHAPTER 4. CONCLUSION
4.3 Future WorkThis thesis project represented a sample of the work to be done to improve theusability of the web pages developed for e-learning courses. One future taskis simplifying the XML specification for the courses to be generated. Otherpages must be optimized for the mobile devices, but require improvements inthe XML structure first. One of these page type is the Drag and Drop page.
The Drag and Drop page type has to be optimized to desktop and mobiledevices. This type of page consists in exercises where the learner has to dragobjects to a drop target. The page works properly when the course is loadedon a desktop, but as with the Hotspot page, is not applicable in mobile devicesfor the same issue of static design.
Finding a solution to this issue by applying a new design that can generatepages with different behaviour for desktop and mobile devices and when scalingdown the window will have great impact in the resulting course look and feel,making the learning experience easier when accessing the courses in differentplatforms.
60
References
[1] Aleksander Groth and Daniel Haslwanter. “Perceived Usability, Attrac-tiveness and Intuitiveness of Responsive Mobile Tourism Websites: AUser Experience Study”. In: Information and Communication Technolo-gies in Tourism 2015. Springer, 2015, pp. 593–606.
[2] Ethan Marcotte. Responsive Web Design. 2011. url: http://alistapart.com/article/responsive-web-design.
[3] Ethan Marcotte. Responsive Web Design. Vol. 2nd ed. A Book Apart,2014. isbn: 1937557189.
[4] Pete LePage. Responsive web design basics. url: https://developers.google.com/web/fundamentals/design-and-ui/responsive/.
[5] World Wide Web Consortium. Extensible Markup Language (XML).url: https://www.w3.org/XML/.
[6] MDN Mozilla Developer Network. HTML. url: https://developer.mozilla.org/en-US/docs/Web/HTML.
[7] MDN Mozilla Developer Network. CSS. url: https://developer.mozilla.org/en-US/docs/Web/CSS.
[8] MDNMozilla Developer Network. JavaScript. url: https://developer.mozilla.org/en-US/docs/Web/JavaScript.
[9] The jQuery Foundation. jQuery. url: http://jquery.com/.[10] Google. AngularJS. url: https://angularjs.org/.[11] Anne Håkansson. “Portal of research methods and methodologies for re-
search projects and degree projects”. In: Proceedings of the InternationalConference on Frontiers in Education: Computer Science and ComputerEngineering (FECS). The Steering Committee of The World Congressin Computer Science, Computer Engineering and Applied Computing(WorldComp). 2013.
[12] KTH Royal Institute of Technology.KTH Biblioteket. 2011. url: https://www.kth.se/kthb.
61
REFERENCES
[13] KTH Royal Institute of Technology. KTH Primo. 2011. url: http://kth-primo.hosted.exlibrisgroup.com/primo_library/libweb/action/search.do?vid=46KTH_VU1&prefLang=sv_SE.
[14] Jason Haag. “From elearning to mlearning: the effectiveness of mobilecourse delivery”. In: I/ITSEC 2011 conference. 2011.
[15] Sumit Pandey. “Responsive design for transaction banking-a responsi-ble approach”. In: Proceedings of the 11th Asia Pacific Conference onComputer Human Interaction. ACM. 2013, pp. 291–295.
[16] Nancy R Glassman and Phil Shen. “One site fits all: responsive webdesign”. In: Journal of Electronic Resources in Medical Libraries 11.2(2014), pp. 78–90.
[17] Ashok Sehgal. “Requirements of Mobile Device’s User Interface in SocialNetworking”. In: International Journal of advancement in Engineeringtechnology, Management and Applied Science 2.7 (2015). issn: 2349-3224.
[18] Chrysoula Gatsou, Anastasios Politis, and Dimitrios Zevgolis. “The Im-portance of Mobile Interface Icons on User Interaction”. In: IJCSA 9.3(2012), pp. 92–107.
[19] Robert Fox. “Being responsive”. In: OCLC Systems & Services: Inter-national digital library perspectives 28.3 (Aug. 2012), pp. 119–125. issn:1065-075X. doi: 10.1108/10650751211262100.
[20] World Wide Web Consortium. Quality Assurance Tips for Webmasters.url: https://www.w3.org/QA/Tips/.
[21] Andrew Wessels, Mike Purvis, and Syed Shawon Rahman. “Usability ofweb interfaces on mobile devices”. In: 2011 Eighth International Confer-ence on Information Technology: New Generations. IEEE. 2011, pp. 1066–1067.
[22] K. Ciampa. “Learning in a mobile age: an investigation of student moti-vation”. In: Journal of Computer Assisted Learning 30.1 (2014), pp. 82–96. issn: 1365-2729. doi: 10.1111/jcal.12036. url: http://dx.doi.org/10.1111/jcal.12036.
[23] Jason Haag and Peter Berking. “Handbook of Mobile Teaching andLearning”. In: ed. by (Aimee) Yu Zhang. Berlin, Heidelberg: SpringerBerlin Heidelberg, 2015. Chap. Design Considerations for Mobile Learn-ing, pp. 41–60. isbn: 978-3-642-54146-9. doi: 10.1007/978-3-642-54146-9_61. url: http://dx.doi.org/10.1007/978-3-642-54146-9_61.
62
REFERENCES
[24] Peter Berking, Marcus Birtwhistle, and Shane Gallagher. “Mobile learn-ing survey report”. In: Advanced Distributed Learning (ADL) MoTIFproject (2013).
[25] ADL Initiative. Advanced Distributed Learning Initiative. 2015. url:https://www.adlnet.gov/.
[26] ADL Initiative. SCORM Overview. 2015. url: https://www.adlnet.gov/adl-research/scorm/.
[27] Thomas W Malone and Mark R Lepper. “Making learning fun: A tax-onomy of intrinsic motivations for learning”. In: Aptitude, learning, andinstruction 3.1987 (1987), pp. 223–253.
[28] Grischa Schmiedl, Markus Seidl, and Klaus Temper. “Mobile Phone WebBrowsing: A Study on Usage and Usability of the Mobile Web”. In: Pro-ceedings of the 11th International Conference on Human-Computer In-teraction with Mobile Devices and Services. MobileHCI ’09. Bonn, Ger-many: ACM, 2009, 70:1–70:2. isbn: 978-1-60558-281-8. doi: 10.1145/1613858.1613942. url: http://doi.acm.org/10.1145/1613858.1613942.
[29] Jennifer Niederst Robbins. Web Design in a Nutshell : A Desktop QuickReference. Vol. 3rd ed. O’Reilly, 2006. isbn: 9781565925151. url: http://search.ebscohost.com.focus.lib.kth.se/login.aspx?direct=true&db=nlebk&AN=24645&site=ehost-live.
[30] W3Schools. XML Introduction. url: http://www.w3schools.com/xml/xml_whatis.asp.
[31] Jan Egil Refsnes. Introduction to XML. url: http://www.xmlfiles.com/xml/xml_intro.asp.
[32] World Wide Web Consortium. Guide to the W3C XML Specification("XMLspec") DTD, Version 2.1. url: https://www.w3.org/XML/1998/06/xmlspec-report-v21.htm.
[33] Adobe Systems Incorporated. Flash Developer Center. url: http://www.adobe.com/devnet/flash.html.
[34] Eric Elliott. “Prototypal Inheritance with Stamps”. In: ProgrammingJavaScript Applications Robust Web Architecture with Node, HTML5,and Modern JS Libraries. O’Reilly, 2014, pp. 64–69. isbn: 9781119209430.
[35] W3Schools. jQuery Introduction. url: http://www.w3schools.com/jquery/jquery_intro.asp.
63
REFERENCES
[36] W3Techs.com. Usage of JavaScript libraries for websites. Retrieved onAugust 02, 2016. url: https://w3techs.com/technologies/overview/javascript_library/all.
[37] Matt Milner. AngularJS: MVC implementation. 2015. url: https://www . pluralsight . com / blog / software - development / tutorial -angularjs-mvc-implementation.
[38] Google. What is Angular? url: https://docs.angularjs.org/guide/introduction.
[39] Google. AngularJS Developer Guide: Data Binding. 2016. url: https://docs.angularjs.org/guide/databinding.
[40] World Wide Web Consortium. Media Queries: W3C Recommendation19 June 2012. 2012. url: https://www.w3.org/TR/css3-mediaqueries/.
[41] Ethan Marcotte. Fluid Grids. 2009. url: http://alistapart.com/article/fluidgrids.
[42] Google. AngularJS: Developer Guide: Modules. url: https://docs.angularjs.org/guide/module.
[43] Google. AngularJS: Developer Guide: Controllers. url: https://docs.angularjs.org/guide/controller.
[44] Google. AngularJS: Developer Guide: Directives. url: https://docs.angularjs.org/guide/directive.
[45] Apple Inc. Safari Developer Library: Safari HTML Reference. 2014. url:https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html#//apple_ref/doc/uid/TP40008193-SW6.
[46] Google Developers. Size Tap Targets Appropriately. url: https : / /developers.google.com/speed/docs/insights/SizeTapTargetsAppropriately.
[47] Matthew Reidsma. “Responsive Web Design for Libraries: Beyond theMobile Web”. In:Mobile Library Services: Best Practices (2013), pp. 79–94.
[48] Matthew Reidsma. Your Library Website Stinks and it’s Your Fault.2012. url: https://matthew.reidsrow.com/articles/16.
64
TRITA -ICT-EX-2016:197
www.kth.se
