Linköpings universitet SE–581 83 Linköping
Linköping University | Department of Computer and Information Science
Master’s thesis, 30 ECTS | Datateknik
2021 | LIU-IDA/LITH-EX-A--2021/065--SE
Enriching the user experience
of e-learning platforms using
re-sponsive design: a case study
Berika användarupplevelsen av e-lärande platformar med
re-sponsiv design: en fallstudie
Björn Möller Ehrnlund
Supervisor : Aseel Berglund Examiner : Mikael Asplund
Upphovsrätt
Detta dokument hålls tillgängligt på Internet - eller dess framtida ersättare - under 25 år från publicer-ingsdatum under förutsättning att inga extraordinära omständigheter uppstår.
Tillgång till dokumentet innebär tillstånd för var och en att läsa, ladda ner, skriva ut enstaka ko-pior för enskilt bruk och att använda det oförändrat för ickekommersiell forskning och för undervis-ning. Överföring av upphovsrätten vid en senare tidpunkt kan inte upphäva detta tillstånd. All annan användning av dokumentet kräver upphovsmannens medgivande. För att garantera äktheten, säker-heten och tillgängligsäker-heten finns lösningar av teknisk och administrativ art.
Upphovsmannens ideella rätt innefattar rätt att bli nämnd som upphovsman i den omfattning som god sed kräver vid användning av dokumentet på ovan beskrivna sätt samt skydd mot att dokumentet ändras eller presenteras i sådan form eller i sådant sammanhang som är kränkande för upphovsman-nens litterära eller konstnärliga anseende eller egenart.
För ytterligare information om Linköping University Electronic Press se förlagets hemsida http://www.ep.liu.se/.
Copyright
The publishers will keep this document online on the Internet - or its possible replacement - for a period of 25 years starting from the date of publication barring exceptional circumstances.
The online availability of the document implies permanent permission for anyone to read, to down-load, or to print out single copies for his/hers own use and to use it unchanged for non-commercial research and educational purpose. Subsequent transfers of copyright cannot revoke this permission. All other uses of the document are conditional upon the consent of the copyright owner. The publisher has taken technical and administrative measures to assure authenticity, security and accessibility.
According to intellectual property law the author has the right to be mentioned when his/her work is accessed as described above and to be protected against infringement.
For additional information about the Linköping University Electronic Press and its procedures for publication and for assurance of document integrity, please refer to its www home page: http://www.ep.liu.se/.
Abstract
The use of online applications has grown rapidly during the last years, where 91% of the Swedish population uses internet on a daily basis, both on computers and mobile de-vices. Naturally, this has come to affect multiple sectors, including the educational one. The usage of online applications as tools for education, can further benefit its availability as its material is available independent of both time and location. This study aims to anal-yse how e-learning platforms should be designed for high responsivity, to be available for multiple device types, and connection qualities.
The work is conducted as a case study, where an e-learning platform is developed to be used for courses held at Linköping University. To evaluate the platform, user tests were conducted on six students, along with performance measurements, to analyse the platform both on a subjective and technical level.
The results show that consistency plays a significant part of the responsivity of e-learning platforms, both internally and in relation to similar applications. In a consistent design, users can reuse their developed habits, both from other applications, and across devices, making users more effective, and lower the learning curve of the platform.
To mitigate loading times of heavier assets such as images, results indicates that lazy loading may benefit the user experience if further developed along with loading indica-tions.
Acknowledgments
I would like to thank Aseel Berglund and Mikael Asplund for giving me the opportunity to conduct this study, and for their feedback during the project. In addition, I would like to thank Emma Algotsson for a good teamwork, who were always there to discuss ideas, and Filip Strömbäck, for all the support for integrating the authentication services of LIU.
Contents
Abstract iii
Acknowledgments iv
Contents v
List of Figures vii
List of Tables ix 1 Introduction 1 1.1 Motivation . . . 1 1.2 Aim . . . 2 1.3 Research question . . . 2 1.4 Delimitations . . . 2 2 Background 3 2.1 TDDD99: Professionalism for Engineers . . . 3
2.1.1 Lisam . . . 4
2.1.2 Webreg . . . 5
2.1.3 Prototype of desired solution . . . 6
2.2 Applied technologies . . . 7 2.2.1 Angular . . . 7 2.2.2 Flask . . . 7 2.2.3 SQLite . . . 7 2.2.4 SAML . . . 8 3 Theory 9 3.1 E-learning . . . 9 3.2 Responsiveness . . . 11
3.2.1 Responsive user interfaces . . . 11
3.2.2 Tolerable waiting time (TWT) . . . 12
3.2.3 Web effectivization strategies . . . 13
3.3 Usability . . . 14 4 Method 16 4.1 Implementation . . . 16 4.1.1 Design process . . . 16 4.1.2 Development . . . 18 4.2 Evaluation . . . 19
4.2.1 Responsive usability evaluation . . . 19
5 Results 22
5.1 Implemented platform . . . 22
5.1.1 Home . . . 22
5.1.2 Authentication . . . 22
5.1.3 Personal menus . . . 23
5.1.4 Course page structure . . . 25
5.1.5 Course content . . . 27 5.2 Usability evaluation . . . 35 5.2.1 Scenario tests . . . 35 5.2.2 Image tests . . . 38 5.3 Performance evaluation . . . 39 6 Discussion 40 6.1 Results . . . 40 6.1.1 Effectiveness . . . 40 6.1.2 Efficiency . . . 41 6.1.3 Satisfaction . . . 42 6.2 Method . . . 43
6.3 The work in a wider context . . . 44
7 Conclusion 45
List of Figures
2.1 The structure of the course TDDD99. . . 4
2.2 Example of course room in Lisam. . . 4
2.3 Example of the signup view for students in Webreg. . . 5
2.4 Example of a student’s grades view in Webreg. . . 5
2.5 The course navigation page of the initial prototype. . . 6
2.6 An example of a course page in the initial prototype. . . 6
2.7 A high level illustration of the communication structure of SAML. . . 8
4.1 An architectural overview of the platform. . . 18
4.2 One of the full resolution images used in the image tests. . . 20
4.3 The image used as placeholder for the image shown in Figure 4.2. . . 20
4.4 Overview of the built-in networking tool of Google Chrome . . . 21
4.5 The network throttle options of the networking tool . . . 21
5.1 Relative scales of the devices used for the tests. . . 23
5.2 The "home" page of the application viewed on a computer. . . 23
5.3 The "home" page of the application viewed on a smartphone. . . 24
5.4 The layout of course items for courses taken by the current user. . . 24
5.5 The toolbar layout when displayed for authenticated users.. . . 24
5.6 The layout of the notifications menu. . . 25
5.7 The layout of the profile mini menu. . . 25
5.8 The course view when displayed on a computer. . . 26
5.9 The course view when displayed on a smartphone. . . 26
5.10 The activity menu being expanded on a smartphone. . . 26
5.11 Example of expandable course material which is minimized. . . 27
5.12 Example of expandable course material which is opened. . . 27
5.13 The selection layout of the quiz view, viewed on a mobile device. . . 28
5.14 Example use of images as options in the quiz view. . . 28
5.15 The selection layout of the quiz view, viewed on a computer. . . 29
5.16 Feedback presented when selecting a correct answer. . . 29
5.17 Feedback presented when selecting an incorrect answer. . . 29
5.18 The general layout of writing assignments. . . 30
5.19 The tabular menu used for writing assignments on mobile devices. . . 30
5.20 The submission view of a writing assignment. . . 30
5.21 Submission and save buttons, when submission is disabled. . . 30
5.22 Submission and save buttons, when submission is enabled. . . 31
5.23 The grades presentation of a writing assignment. . . 31
5.24 The icons replacing the table headers in the result view. . . 32
5.25 The events presentation view of a writing assignment. . . 32
5.26 The results overview layout of a course. . . 33
5.27 The tab titles of the results overview when displayed on a small device . . . 33
5.28 The course module results layout. . . 34 5.29 Example of expanded activity result within the overview of course module results. 34
5.30 The schedule view of a course, when viewed on a computer. . . 35
5.31 The schedule view of a course, when viewed on a mobile device. . . 35
5.32 Average task execution times of the test cases. . . 36
5.33 Averaged SUS answers for desktop and mobile respectively. . . 36
5.34 Average task execution times of the image tests. . . 38
5.35 Average grades of respective variant used for the image tests. . . 38
List of Tables
3.1 Statements included in SUS forms. . . 15
4.1 Task descriptions for the scenario-based user tests. . . 19
4.2 File sizes of the images used for the image loading tests. . . 21
5.1 Comments from users regarding the scenario-based user tests . . . 37
1
Introduction
Traditionally, educational contexts have involved both students and teachers, who have been placed in classrooms. There, information has been conveyed via blackboards and books, and assignments have been written on paper by the students, which has been physically handed to teachers. This structure has been practiced by students from first class of elementary school up to further education at high schools and universities. Even though it is a well-used struc-ture, it comes with its problems. Partially, it requires students and teachers to be available at all times, and may lead to a lot of passive learning, not stimulating the students as much as would be necessary for them to be motivated. To solve such problems, technical solutions on computers and mobile devices have started integrating into educational systems, often referred to as e-learning.
E-learning can be used to convey information in form of videos, audio, text, and more, and is available anywhere for the students when using compatible devices. By using such solutions, students and teachers do not even need to be at the same location in order for teachers to convey information to the students.
In 2019, nearly 98% of Sweden’s households had access to the internet, and 91% of its population used internet on a daily basis, according to studies by the Swedish internet foun-dation [1]. With such trends, the integration of internet platforms comes naturally, and is thus accessible to nearly all of the students, without need of new hardware. Its usage comes in various forms, such as standalone courses, mobile learning, games, and even virtual class-rooms [2].
1.1
Motivation
As mentioned, e-learning may come with benefits, but does not guarantee an improved expe-rience for the involved participants. As stated by Horton [2]: "At its best, e-learning is as good as the best classroom learning. And at its worst, it is as bad as the worst classroom learning. The difference is design.". Thus, it is important to further analyse how to design and develop platforms to be used in educational purposes, and what effects it has on its users. As most users both have computers and smartphones nowadays, it is important to place this topic in a responsive aspect.
For e-learning to further benefit the accessibility of teaching, it must be compatible with the devices used by its users. As most users does not use applications on one specific device,
1.2. Aim
but multiple, it is important to design for responsivity. For instance, students may use their home computer for writing larger assignments, while they want to make smaller changes or view results on their mobile devices on the go. When using the term ‘Responsiveness’ in this report, it represents two main aspects of a system; its adaptability of the layout of the platform, and its ability to deliver instant feedback during different circumstances.
Users develop behaviours during their use of applications and reuse them intuitively. As these may differ on mobile and computer devices, it is important to design and implement in manners benefiting such patterns, both for small and large screens.
Not only does e-learning applications need to adapt to screen sizes, they must also adapt to the connection quality of the devices used. Even though most households are equipped with stable and fast internet connections, students may want, or even need, to use platforms on the go. Thus, one cannot assume that the used device has a good connection to the internet and must therefore find a balance between benefiting the user experience and minimizing data to be downloaded.
By making e-learning platforms more available, easy to use, and more motivating, they can aid students of all ages to learn more and make it more entertaining while doing so.
1.2
Aim
This work aims to analyse the effects of e-learning platforms in means of responsivity. For results to be relevant to real-life contexts, a prototype platform is implemented for a course at Linköping University. The platform is primarily developed to suit the needs of the course TDDD99 Professionalism for Engineers1, held at the Linköping University, but also to be generic to suit the needs of other courses.
To analyse modern techniques, the web-based frameworks and libraries Angular, Flask, and SQLite is used, which were pre-requested by the client of the project.
1.3
Research question
To further scope and isolate the underlying problem of this work, a main research question is selected:
• How should a web-based platform for e-learning be implemented using modern web techniques in order to achieve high usability on both mobile and desktop devices? To answer the research question, the ISO standardized aspects of usability, which are pre-sented in section 3.3 are used to analyse results regarding both user experience and perfor-mance to get a clear picture of the final effects of the platform.
1.4
Delimitations
The developed platform is only evaluated on students taking further education. Therefore, its results may not be applicable to students at other stages of education. Also, the prototype only included the user interface (UI) for the students’ page, as it is their experience that is the main focus of this study. When testing and evaluating the user experience, content was manually added to the database via scripts.
2
Background
To provide an overview of the context in which this study was conducted, this chapter in-cludes information regarding the course of interest, and the technologies used to implement the platform.
2.1
TDDD99: Professionalism for Engineers
In 2013, the course TDDD99: Professionalism for Engineers was started at Linköping University, as an initiative for students to further develop their soft skills. [3]
The course is held for students taking the programs Master of Science in Computer Sci-ence and Software Engineering and Master of SciSci-ence in Computer SciSci-ence and Engineering, and stretches over the first three years, where students from all years takes it together. The course is divided into four main areas, each containing three parts covering specific soft skills, see Figure 2.1, where the general structure of the course is presented. Each main area is divided into multiple specific aspects of soft skills, so that all students study the same type of soft skills, regardless of their progression in the course.
Each part involves a series of tasks that students perform. First, students are given online material related to the topic. The material includes articles, papers and instructive videos. After reading and/or watching the given material, students perform practical tasks to prac-tice the studied skill, where external tools which are presented on the course web page may be used.
In order for students to reflect on their experiences from performing the task, they first write a reflective report, which is submitted via the tool Lisam. After submitting the re-port, students gather in dialog seminars, organized into groups of 8-11 students, where they present their reports and discuss their experiences from the tasks.
At the end of each part of the course, mentors of groups submit students’ results via WebReg, a service hosted by Linköping University. [4, 5, 3]
The course administrator Aseel Berglund, who is also the client of the product developed for this thesis, has experienced difficulties in the communication of the course. As commu-nication is carried out via three platforms, it creates an indirect dialog between the mentors and the students.
2.1. TDDD99: Professionalism for Engineers
Figure 2.1: The structure of the course TDDD99. [4]
2.1.1
Lisam
Sharepoint is a cloud-based platform for companies and organisations to create, store and share resources. Today, Linköping University uses the platform as main communication platform for their teaching.1 The Sharepoint instance used at Linköping University is called Lisam. It includes course rooms, storage of files, e-mail communication, and online versions of the Microsoft Office tools.
The feature most interesting for this thesis, is the course rooms of Lisam. See Figure 2.2 for an overview of its layout. The course rooms are mainly used to share documents and for course administrators to inform students about news regarding the course.2
Figure 2.2: Example usage of the course room for the course TDDD89, Scientific Method, held at Linköping University, in Lisam.
In 2019, Berger and Kunwaryanto performed a study3regarding the user experience of Lisam, as a part of their bachelors’ thesis at Linköping University. The survey targeted
stu-1Lisam och Studentportalen. https://www.student.liu.se/studentstod/itsupport/
lisam-och-studentportalen?l=sv.
2.1. TDDD99: Professionalism for Engineers
dents from the university, and included questions regarding used features, and experienced complications of the application. The study showed a significant variance between the usages of the included features, where some were shown to not be used by any of the participants. Regarding complications, students gave answers such as incoherency, complex navigation, inconsistent use by administrators and poor design for mobile devices.
2.1.2
Webreg
Webreg is a platform used by The Department of Computer and Information Science (IDA). Students use the tool to register to groups for labs and seminars, see Figure 2.3.
Figure 2.3: Example of the signup view for students in Webreg.
When finishing assignments, assistants and teachers submit students results via the plat-form, which becomes visible on course views available for the students, see Figure 2.4.4
Figure 2.4: Example of a student’s grades view in Webreg.
3H. Bergner and A. Kunwaryanto. “Gör om, gör rätt: Att designa en användbar app fören befintlig
utbild-ningsplattform”. In: (2019). http://urn.kb.se/resolve?urn=urn:nbn:se:liu:diva-160529
2.1. TDDD99: Professionalism for Engineers
2.1.3
Prototype of desired solution
In the beginning of the project, Berglund had developed a design prototype of the web in-terface. The prototype contained structure for the course page and the course overviews page, see figures 2.5 and 2.6 respectively, and was used as a ground for the overall theme and look of the platform. In general, Berglund desired a "modern" look with bright colors, simple navigational elements and progression elements, such as badges for completed goals and progress bars.
Figure 2.5: The course navigation page of the initial prototype.
2.2. Applied technologies
2.2
Applied technologies
To provide a general base to understand the technical implementation of the study, this sec-tion includes the main technologies used for the implementasec-tion of the platform.
2.2.1
Angular
Angular is a web development framework5. The framework produces single-page
applica-tions, instead of traditional static sites. Single-page applications are web-based applications that are loaded once (per usage), and which loads its content dynamically.
The framework relies on HTML, CSS and Typescript, which is a typed extension of Javascript. In Angular, code is separated into modules, which contains underlying compo-nents and services.
Components are pieces of code that defines the views presented to users. They are imple-mented using HTML and Typescript, for view and logic respectively. For the application to be interactive, data binding is used, which maps user input to application logic, and projects the application data into the HTML view.
When implementing non-component specific logic, services are used. Services are in-jected to components via dependency injection and can thus be used by multiple components simultaneously. For instance, user input validation, and data retrieval should be delegated to services, to keep components simple.
To communicate between services and components in Angular, the observer pattern is used.6The observer pattern is a design pattern used to loosely couple objects in one-to-many relationships, and involves two key components, subject and observer.
Subjects are used to notify state updates. When components depend on a state, they use observers that listen to notifications from subjects. Subjects can have any number of observables, all of which are updated when the subject is updated. [6, p. 273-282]
2.2.2
Flask
Flask7is a minimalistic python framework for developing REST APIs, where developers are free to decide how to structure their projects, and how to store data.
Endpoints are defined via decorators8, which are components of the decorator design pat-tern. The decorator pattern is used to dynamically add functionality to methods and func-tions during run-time.
In this context, the decorator is a member function of the flask server object. By calling the decorator function and wrapping it around the function to be used for the endpoint, it is automatically registered as a listener which is called every time a client sends a request that matches the URL of the endpoint.
2.2.3
SQLite
SQLite is a serverless relational database management system (DBMS).9Serverless means that all changes in the database is directly written to the main memory, which in this case is stored in a single file.10
5Introduction to Angular concepts. https://angular.io/guide/architecture.
6Observables in Angular. https://angular.io/guide/observables-in-angular.
7Flask foreword. https://flask.palletsprojects.com/en/1.1.x/foreword/.
8Flask quickstart. https://flask.palletsprojects.com/en/1.1.x/quickstart/
a-minimal-application.
10What Is SQLite? https://sqlite.org/index.html. 10About SQLite. https://sqlite.org/about.html.
2.2. Applied technologies
To communicate with SQL DBMS from Python, the library SQLAlchemy can be used. When using SQLAlchemy, tables are represented by Python classes, which are used to create and execute SQL-queries, generated by member functions of the library.11
2.2.4
SAML
SAML is an XML framework for authenticating entities across multiple services, thus en-abling the single sign-on (SSO) pattern. The framework includes two main components: an identity provider and one or multiple service providers, which are presented in Figure 2.7.
Figure 2.7: A high level illustration of the communication structure of SAML.
The identity provider is responsible for the authentication of entities, typically end users. Entities to be authenticated are referred to as SAML requesters.
When authenticated by the identity provider, the SAML requester receives a temporary identification token, which is registered for a period of time, specified by the specific SAML implementation.
Service providers are the applications to be used by the SAML-requester. When request-ing resources, the SAML requester appends its token to the headers of the request, which is then verified by the service provider to retrieve its corresponding identity. [7]
3
Theory
In this chapter, the underlying theory used to analyse results is presented. Theories include e-learning, responsiveness, and usability.
3.1
E-learning
As interest and usage of information technology (IT) develops, it brings new ways of com-municating and conveying knowledge. As mentioned, the practice of E-learning can be per-formed in various degrees. It can be used as a complement to traditional material and lec-tures, and as tools for each element of the learning process. By using new channels for con-veying information such as audio and video resources, it can stimulate more senses of the students, creating a more immersive experience. [8]
E-learning also enables more flexibility, as it releases the demands for physical access to classrooms. As the material is available online, it gives students the opportunity to plan their own time. [9]
When developing a product, it is important to design it in a way that suits the needs and preferences of its users. In the context of web applications, it is possible to significantly benefit the users´ trust in the applications by only manipulating its visual interfaces. [10, p. 16-17]
In order to design an interface for good user experience (UX), it is important to understand the habits and behaviours of its users. Anderson et al. [10], stated the possibility to mitigate issues regarding performance and loading times at the UX design level.
Tidwell [11], stated the most general principles to follow when designing user interfaces (UIs):
• Safe exploration: For users to be encouraged to explore and learn to use an interface efficiently, it is important for them to feel safe when doing so. Thus, it should be easy to navigate between content, but also to undo performed navigations, without losing work. [11, p. 9-10]
• Instant gratification: When performing tasks, people want to get results from their actions as soon as possible, as reward for their work. Therefore, Tidwell suggests mak-ing the first performed action of an interface as easy as possible, to acquire an interest from the user. This presumes that the first task is predictable, which is not always the case. [11, p. 10]
3.1. E-learning
• Satisficing: As users want to be as efficient as possible, they do not read the label of each element narrowly, they quickly scan the layout and find the best fit for their task. In order to support that behaviour, it is important to separate content correctly. Labels should be easy to identify and categorize. This can be achieved by giving them correct size, space and contrast. [11, p. 11-12]
• Changes in midstream: Often when using applications, people get tired or interrupted. In such situations, it is necessary not to lock the user to the session. Users shall be able to incrementally complete tasks and be able to save their progress, to later be able to continue. [11, p. 12]
• Deferred choices: When starting to use a new tool, users want to actually use it as soon as possible. When for example creating a new profile on a platform, users shall only be required to fill in necessary information and leave additional data such as profile images for later use. [11, p. 12-13]
• Incremental construction: Similarly to Deferred choices, users often want to perform tasks in individual order. Therefore, users shall not be locked by a predefined order when performing tasks, to maximize throughput. [11, p. 14]
• Habituation: As people learn from experiences, they develop habits. This also applies to their use of digital applications. In order not to work against developed habits, it is important to keep consistency in UIs.
In 1997, Mahajan et al. performed a study regarding consistency in UIs, showing that users’ efficiency can drop from 10 to 20 percent due to inconsistent UI design. [12] Key properties to keep consistent are location, colour and labelling of elements. This does not only apply internally of an application but should also be concise in relation to other similar applications. [11, p. 14-15]
• Microbreaks: When feeling unstimulated, people wants something to stimulate them, or to make time seem faster. When doing so they take so called "Microbreaks". One example of this behaviour is to use mobile devices when waiting in lines. In order to support such behavior, an application should be fast and easy to start. The user shall not have to give redundant input in order to configure the application at each start, and the application should load necessary data quickly. [11, p. 16]
In the context of e-learning, it is also important to design platforms to amplify the moti-vation of users, to further engage and make their learning more effektive. One method for amplifying motivation is gamification [13], which is the principle of applying game-inspired elements to other contexts. To apply gamification, it is important to understand the under-lying elements that constructs a game. Kapp [14] describes the general structure of games using eight main components.
Firstly, a game needs a context, which is referred to as the system [14, p. 7], and defines the overall environment of the game, and the connections between its underlying components, for example how scores are affected by actions and how rules connect to actions. For the context to be useful, it must be played by someone. Players [14, p. 7] are persons that interact with the game who may play alone or with more players. In the context of E-learning, players refer to students using the platform.
For players to connect with games, all games are more or less abstractions of real-life con-texts. The abstract [14, p. 7-8] defines the game space where players interact. Within the abstract, players are motivated to interact, via challenges [14, p. 8], which are concretized via goals. Challenges shall not be too challenging, nor too simple, in order not to bore or frus-trate players. To guide players, Rules [14, p. 8] defines what actions that can be performed, and when. Rules also defines the meaning of the states within the game. In connection to
3.2. Responsiveness
challenges, rules should clearly define the states for winning and defeat, to avoid confusion of the players.
To further highlight the meaning of the rules, players shall be provided with feedback [14, p. 8] for their actions, which should both be instant, and clear. By providing feedback in such manners, players can use them to classify its corresponding action as either good, or bad, for accomplishing desired goals. For feedback to be useful, and the challenges to be motivating, the game should result in quantifiable outcome [14, p. 8]. Players can then compare their results with previous ones, and with the results of others, to get a sense of progression.
Emotions[14, p. 8] play a significant role in games, and can be used to further benefit the motivation of players. When winning, feedback should provide the feeling of joy, while it should provide a more bitter feeling when loosing, which creates an urge for players to improve, to more often get the positive feeling of winning.
3.2
Responsiveness
In order for E-learning to benefit the flexibility of students, it must be able to adapt to their used devices. If not developed for the hardware used, platforms will perform poorly, hid-ing content and thus heavily restrict its flexibility, instead of benefithid-ing it. [15] In this sec-tion, underlying theory regarding responsiveness is presented, in means of UI adapsec-tion, and broadband adaption.
3.2.1
Responsive user interfaces
As the use of mobile devices increases [1, 16], it is important to design interfaces in a way supporting the constraints put by their varying screen sizes. Developing multiple applica-tions in order to fulfill such requirements creates a lot of additional work and redundancy, thus it is important to develop for responsive design. Interfaces with responsive design adapts to screen properties such as orientation, size and aspect ratio. [17]
Gardner [18] portrays UI responsiveness with three main elements: fluid layout, flexible media, and media queries, which are presented below.
• Fluid layout: As screen properties varies among the user devices, it is not possible to design using limits in terms of pixel amounts, which is the traditional way. Content would either be too large for small screens, or too small for large screens.
One approach to solve this problem is fluid layout. Instead of pixel amounts, element sizes are described as percentages of their parent elements. A popular approach of this method is to use grid systems. There, children are placed in rows and columns, which have own proportions in relation to the parent container.
• Flexible media: As mentioned, in many cases, fluid layout works as a good approach to proportionally scale child elements, but it is not a silver bullet. For example, when displaying an image within a container, scaling the parent container would mean that the image could either get upscaled or downscaled significantly, providing a negative user experience. Instead, Flexible media can be used. In the previous example, by adding maximum and minimum limits, and allow the child to scale accordingly to the parent’s size would prevent from over- and under-scaled content.
• Media queries: Another approach to solve the remaining problematics of using fluid layout is Media queries. Instead of applying static styles, styles can be applied condi-tionally, based on screen properties. Using this approach, the layout can be tailored for specific screen size intervals.
In a study performed by Brown et al. [19], results showed that responsive design can bene-fit the execution times of learning applications by 20 percent, compared to statically designed
3.2. Responsiveness
web sites. Results also showed that responsive design was more crucial for the usability of interactive content, than for passive content.
Peng et al. [15] also mentions the importance of interaction space for different device types. On computers, the interface is operated with a precise cursor, while it is operated with finger touches on mobile devices. Thus, mobile devices require larger and more simpli-fied interaction areas. In the meantime, Groth et al. [20] states that too many abstractions can have negative effects on the user experience, as they may confuse and mislead the user.
3.2.2
Tolerable waiting time (TWT)
When analysing the experienced responsiveness of a service, in means of time perception, it is important to understand the limits of the users´ patience. Nielsen [21, ch. 5] stated three main time limits for keeping the interest of users of web services. The first limit is 0.1 second and is the limit for users to have a feeling of instantaneousness. Secondly comes 1 second, which is the limit for not interrupting the users "flow of thought". Lastly a limit of 10 seconds, where users will lose their focus of the interaction dialogue with the web site.
In 2003, Nah conducted a study [22] on the tolerable waiting time (TWT) of web users. The study was conducted in four different scenarios, where participants were divided evenly, and instructed to use an explicitly designed web page in order to find the names of 10 web acceleration tools.
The page included links leading users to information relevant to the task, where seven were fully functioning, and three leading to a never-ending loading page. The only way for users to leave the loading pages were to press a stop button, leading them back to the links page. In two of the scenarios, the layout included a feedback animation, displaying for the user that the system was loading, without progress indication. Two scenarios also included access to images from other web pages to watch while waiting.
During experiments, the users’ tolerable waiting time were measured by the time it took for them to press the cancel button. Results showed that the availability of images did not have any significant impact of the TWT of the users. Despite that, the inclusion of a loading animation had significant benefit on the TWT of the users, increasing the average from 13 seconds to 38 seconds. Nah also concluded that the TWT of the users fell when encountering the second and third broken links, as a result of human deduction.
The Scalar timing theory
Time is a term hard to define and is a subjective measure. When analysing the perception of time, it is important to understand the underlying mechanics that creates its sense. One model of time perception is the Scalar timing theory [23], which originally was developed for the study of timing of animals, but which later has also been applied on humans.
The theory models the perception of time as a clock system, including a core property, "the scalar property", meaning that the deviation of time estimation relies on the time to be estimated applied to a linear function. The system is modelled with 5 main components: pacemaker, mode switch, accumulator, memory and comparator.
The pacemaker gives impulses to the mode switch, and depending on the attention of the subject, the mode switch forwards the impulses to the accumulator. When receiving impulses at the accumulator, it increases a counter and forwards it to the memory and comparator.
The comparator uses the accumulated value stored in the memory and performs a sub-jective decision whether the time interval was short or long. Thus, if a subject does not pay attention, the estimated time will be lower, and if the pacemaker gives impulses with a rapid rate, the estimated time will be longer. Applied to humans, this means that if one would have a more rapid heart rate, the perceived time would be longer, and the opposite if it would not pay attention.
3.2. Responsiveness
Relaxation and tolerable waiting time
Gorn et al. conducted a study [24] regarding the impact of colours on the experienced re-sponsiveness of a system. The team conducted the tests with the underlying hypothesis that relaxation make persons more willing to wait.
The test included 49 students who were instructed to use a platform which could be used to navigate between real estates, in which delays were inserted, seeming like loading normal screens for the users. During delays, each student was shown a random background colour on the screen, chosen from the following set: {blue, red, yellow}.
After the test session, each user gave a subjective review by giving the system a grade on a scale from 1 (slow) to 9 (fast). Results indicated that blue backgrounds made users more patient than red, with mean scores of 5.78 and 4.83 respectively.
3.2.3
Web effectivization strategies
As mentioned, responsivity in means time perception depends heavily on the performance of the application to be used. Thus it is necessary to investigate on what techniques there are to effectivize the retrieval and rendering of information. In this section, such methods are presented.
Graphical effectivization
Gehrke et al. conducted an extensive literature study [25] to find the most important issues in the design and implementation of websites. The team analysed prior executed surveys, papers and 40 websites. In addition, recommendations on how to properly design websites were collected from the analysed papers. In total they identified 100 issues which were clas-sified into the following categories: “page loading speed”, “business content”, “navigation efficiency”, “security “and “marketing/customer focus”. Each category was graded in means of importance based on the number of citations of each paper related to respective categories. As stated by Gehrke et al., loading speed relies mostly on the non-textual content of web pages, such as images and animations. Thus, the use of such assets becomes most interesting in this context. One presented solution to this problem, is to add a "text-only" choice. Thus, users with poor internet connection can simply choose not to download graphical content and save their connection for more data-compact content. In a study performed by Bhutto et al. [9], this approach was combined with a ping system. Pings were sent continually during usage, generating bandwidth data which could be used to estimate connection quality. Thus, the option to disable bandwidth heavy assets, could automatically be suggested to users with poor internet connection. The main goal of the study was to investigate if and how e-learning platforms could be developed for responsiveness. The study presented solutions both in means of graphical and technical adaptions. The platform was then analysed subjectively, in combination with technical tests with two network throttles.
Another presented solution is to compress the size of images, using thumbnails. Thumb-nails are smaller versions of images that are presented as previews for the users. For exam-ple, for list rendering with multiple items, loading time could benefit significantly from using thumbnails, instead of native images.
Woodruff et al. [26] conducted a study where they investigated thumbnails effectiveness of conveying information. In the study, 18 experienced web users were instructed to find information via overviewing navigational elements in one out of three forms. One where in-formation was presented in thumbnails including text, one where inin-formation was presented by thumbnails without text and one where information was completely text based. When ex-ecuting the tests, the execution time of each participant was measured. Results showed that navigation times when using effective thumbnails could decrease by 30 percent, compared to plain text descriptions. Most effective were thumbnails with added keywords to the graphics.
3.3. Usability
Progressive rendering
Gehrke et al. also stated the importance of prioritizing what content to load first when open-ing a web page. The term ’progressive renderopen-ing’ means that web sites successively loads and renders its data throughout its use, instead of performing all such tasks at once.
One effective method for progressive rendering, is to load images using lazy loading, as presented by Wickham [27, p. 47]. This is applicable for multiple scenarios. The most effective scenario is when downloading multiple images to be displayed in lists. In order to evenly distribute loading, images can be downloaded immediately before being displayed to the user, instead of downloading them all at once.
Web caching
When visiting web applications, there are static assets that need to be downloaded. Static as-sets include script files, styling files, fonts and graphics. When a user re-visits an application, it would be redundant to download all those assets again, if they have not changed since the last time they were fetched. Thus, caching becomes important. Caching [28] is the process of storing retrieved data into local memory, for faster access on reuse.
When developing for web applications, browsers have an open API for storing data into cache memory. There, stored data is associated to a unique key for access to it. As browsers have a maximum storage limit for applications, it is important to prioritize to cache data which is retrieved often, for maximal effectiveness. [29, p. 343-344]
3.3
Usability
When designing and implementing user interfaces, the main goal is to make tasks as simple as possible for users, thus making applications more usable. [19] When evaluating the usabil-ity of an application, there are three main ISO standardized aspects to which can be applied: effectiveness, efficiency, and satisfaction. [30].
Effectiveness covers a user’s ability to complete tasks included by the interface. The most intuitive metric for this aspect is the binary tasks completion rate [31], where the number of completed tasks is measured in relation to the total amount of tasks. The efficiency aspect involves the amount of resources used in order to achieve desired goals, where the metric most relevant for this work is time spent per task [31]. As effectiveness and efficiency relies on physical measures, they can be analysed directly with measures retrieved from the execution of scenario-based user test cases. [32] A scenario-based user test cases involves a series of tasks to be performed by the test subjects, which are described as hypothetical situations which are designed to represent important real life situations which could occur when using the product.
When designing instructions for test case scenarios, there should be a fine balance be-tween being detailed and brief at the same time. If users are provided very detailed instruc-tions, they will complete the tasks very efficiently. If they are provided very brief instrucinstruc-tions, it will allow the users to solve problems in the most natural way of their perspective of the product. Therefore, instructions must both describe the scenario clearly, while still enabling for cognitive activity.
As the name suggests, user tests should be targeted to real people who could potentially make use of the final product. If providing the tests to developers or other stakeholders of a project, they can be misled by own interests and experiences, thus generating irrelevant results.
The last aspect, satisfaction, is a subjective aspect, as it targets the overall experience and responses of the user. To retrieve measurable results regarding satisfaction, the survey-based method System Usability Scale (SUS) [33] can be used. The method is intended to be used
3.3. Usability
immediately after scenario-based user tests, and includes 10 statements, which are listed in Table 3.1.
Table 3.1: Statements included in SUS forms. Index Statement
1 I think that I would like to use this product frequently. 2 I found the product unnecessarily complex.
3 I thought the product was easy to use.
4 I think that I would need the support of a technical person to be able to use this product. 5 I found the various functions in the product were well integrated.
6 I thought there was too much inconsistency in this product.
7 I imagine that most people would learn to use this product very quickly. 8 I found the product very awkward to use.
9 I felt very confident using the product.
10 I needed to learn a lot of things before I could get going with this product.
Each statement is followed by a numeric grade scale, from one to five, representing the statements conformance to the experiences of the user. The limits of the scale are labelled "Strongly disagree" and "Strongly agree" respectively. When found irrelevant, subjects are instructed to mark "3" on the scale, to not affect the final results.
When summarizing the results from the forms, the following formula is used:
A=Sum of the gradings for the odd-numbered statements - 5 B=25 - Sum of the gradings for the even-numbered statements
Score= (A+B)˚2.5
The formula can give scores from 0 up to 100, were 100 is most positive. According to quantitative studies performed by Bangor et al. [33], a SUS score of 70 and above can be viewed upon as a positive result.
4
Method
In this chapter, the methodology used to retrieve results regarding the responsivity of the application is presented.
As mentioned, the project was performed as a case study where a platform was devel-oped to be used for courses at Linköping University, which was later evaluated in means of usability on different devices, and performance on different connection qualities. One could also have selected to analyse existing platforms and studies, but which would have isolated the results to the design decisions of those. If doing so, the underlying reasons behind ele-ments might have been missed, thus concealing important factors of results. Instead, a light pre-study was performed to understand the elements of multiple applications, which could be combined in one platform, to all be evaluated at once.
The work was divided into two main parts; Implementation, and Evaluation, which are presented in the following sections.
4.1
Implementation
In total, there were three project members developing the platform together. In the following subsections, the activities of designing and implementing the platform are described.
4.1.1
Design process
To get a better understanding of what gamification and design elements that works well in practice, similar online e-learning applications were used and analysed. When analysing the applications, two of the team members analysed the same views simultaneously and discussed their emotions and reactions towards its underlying design elements.
To design and implement the platform of this project, the initial prototype presented in section 2.1.3 was used as a starting point. To better understand the most important features, a requirements specification was created, which are listed below. The requirements were general and used to track the progression of the project.
• The overall theme should provide a "modern" feeling.
4.1. Implementation
• Information should be simpler to take in than in prior used platforms.
– Minimize the amount of irrelevant presented functionalities.
– Present less information in parallel.
• There should be a general view for course overviews with similar functionality as the one presented in the prototype
– Both non-taken courses and taken courses with included overviewing elements for progression.
• The user shall be able to view its notifications regarding course events and see the total amount of unread notifications.
• The user shall authenticate using the existing authentication services of LIU for simplic-ity and recognizabilsimplic-ity.
• Course pages shall follow the structure of the one presented in the prototype.
– An activity menu shall be available, including course activities and the user’s pro-gression.
– There should be a navigation menu to navigate forward and backward to view the material similar to the structure of a book.
– Course messages from course administrators should all be presented in one view.
– Passive material should be able to be presented in mixed forms: text, images, videos and pdfs in clearly separated sections.
– The user shall be able to test its knowledge and get progression feedback in quizzes.
– There shall be writing assignments, where sections can be marked as mandatory, include lower- and upper-word limits and where the user can view current and earlier results and submissions.
– Seminars should have a similar structure as writing assignments, with a general description and a grades section.
– There should be a general view for all grades of the user in the course.
– The existing calendar service used by LIU shall be integrated for the user to see calendars for its courses.
The design of the platform was created incrementally in parallel to the development, one view at the time. Each view which was designed both for computer screens and mobile screens simultaneously, to make the design responsive. To review design choices, daily meet-ings were held with Berglund, where views were presented and discussed.
When designing the views, the strategies presented below were used in general through-out the process. Concrete applications of the strategies are presented in the results chapter.
• The light blue theme was integrated to highlighted elements to induce a calm to the user.
• Green, yellow and red were used as feedback colours to create game-inspired feelings. • Progression elements were made as available as possible to provide continuous
feed-back throughout the use.
• For menus with general functionalities, icons were identified and used for all devices, to save screen space, and ease satisficing.
4.1. Implementation
• Views were structured as device independent as possible, to not change the structure too much for different devices.
– Text fields, images and videos were scaled relative to parent elements with upper width limits, for material to be available for screens with wide aspect ratio.
– Coupled information was presented in tables which scaled accordingly.
– Vertical lists were used to be independent of aspect ratio.
– Expandable elements were implemented to increase overviewability. • Mobile devices and computers were categorized by a screen width limit.
– On mobile devices, static titles which exceeded the screen space was also replaced by icons.
* Dynamic titles were instead shortened.
– For overviewing elements, "grid" layouts were used with dynamic number of columns for more elements to be viewed in parallel on computers without com-pressing them.
– Menus were presented isolated from other views on mobile devices to increase interaction space and readability.
* interactive elements required more screen space as fingers takes larger screen area than mouse cursors.
4.1.2
Development
Similarly to the design process, the technical implementation of the platform was also per-formed incrementally. The process can be categorized by the main components of the plat-form: frontend, backend, and data storage. As the names suggests, the frontend development included logic and layout implementation for the client view, backend included tation related to the server logic, and the data storage included specification and implemen-tation of the data structure to be stored in the database of the application. As mentioned, the components were implemented in Angular, Flask, and SQLite respectively, which external communication structure is presented in Figure 4.1.
Figure 4.1: An architectural overview of the platform.
When implementing the views, the first task was to implement the layout and logic of the frontend, with mocked data. After finishing a mocked version of the frontend, the re-quired data structure of the view was identified. The data structure was then added to an ER-diagram, which represented the entire structure of the database, and added to the database tables. In some cases, the view did not add any new required data structure in which the last steps were skipped.
Finally, with the required data structure available, the server logic was implemented and made public by endpoints, which were then connected to the client.
4.2. Evaluation
To authenticate users, the existing SAML implementation of LIU was used. When sub-mitting correct credentials, users were redirected back to the platform, along with a token generated by the SAML provider, which was used to verify the user. When verified, the user was given a new token generated by the Flask server, to reduce overhead of requesting LIUs SAML provider multiple times.
4.2
Evaluation
To evaluate the application, it was tested both using user tests and physical measurements, in order to get measurable data for responsiveness both in means of subjective, and physical environment adaption. The tests are described in the following subsections. As mentioned in the intro, results were then analysed in relation to the ISO standardized aspects of usability; effectiveness, efficiency and satisfaction, to connect the results together, and to analyse the final effects of design and implementation decisions.
4.2.1
Responsive usability evaluation
To analyse the perceived responsivity of the application, scenario tests were conducted in mobile, and computer environments. Each user tested both variants of the application, where half of them began with the mobile variant, and the others with the computer variant. In total, user tests were conducted on six users, with ages varying from 23 to 25, taking technical educations at Linköping University. The genders of the users were mixed, with 2 females and 4 males. The main criteria for the users were that they had taken the course TDDD99, which was the course of interest for this study, to eliminate learning curves regarding the structure of the course.
When testing the application, users were given tasks sequentially, which were the same for both variants, and are listed in Table 4.1.
Table 4.1: Task descriptions for the scenario-based user tests. Index Task description
1 Sign in.
2 You have a new course information message, find it.
3 Find the general course description for the course "TDDD94". 4 Mark the activity as done.
5 Navigate to the activity "Testa dina kunskaper".
6 Find what happens if you select and confirm an incorrect answer. 7 Complete the activity.
8 What aspects can you improve on, based on the results of the activity? 9 Find the introductory course material for the module "Social kompetens". 10 Mark the activity as done.
11 How much of the course is completed?
12 What tips are there for the interviews included in the assignment for "Social kompetens"? 13 What are the descriptions for the writing assignment for "Social kompetens"?
14 What is your grade on the written assignment?
15 Follow the instructions in the comment of the results and hand in the assignment again. 16 You have a grade on another activity, find it.
17 What is your grade on the module "Social kompetens"? 18 When is the next seminar scheduled?
19 Sign out.
During task execution, factors such as time spent, completion, navigation behaviour and misunderstandings were noted.
4.2. Evaluation
When finishing the tests on respective platform, users were given the SUS form, in order to evaluate their experiences of using the platform. To get an overview of the answers, the numerical scores were averaged, and comments similar to each other were categorized. To better understand SUS answers, the users were also asked if there were specific elements which they experienced positive, or less positive.
After the scenario-based user tests, the users also performed a smaller test regarding the loading of images during use with poor internet connection. In this test, a course activity including seven images were presented, in which the subjects were instructed to read aloud the numbers which were included in the images, see Figure 4.2 for example. To simulate a poor internet connection, the network was throttled to the "Fast 3G" option of Chrome dev tools, representing 1500 kb/s. For detailed file size information of the images, see Table 4.2.
Figure 4.2: One of the full resolution images used in the image tests.
Figure 4.3: The image used as placeholder for the image shown in Figure 4.2.
The images were presented using two different loading strategies. One where the images were loaded using lazy loading, meaning that images were loaded first when visible on the screen, along with a low-resolution placeholder, see Figure 4.3. And the other where the image were loaded with the standard built-in loading mechanics of the web browser. The variants were labelled "A" and "B" respectively and were conducted in the same manner of order as the scenario based tests.
After usage of each variant, users were instructed to grade their experience of speed on a nine-grade scale, where 1 were labeled "very slow" and 9 were labeled "very fast".
4.2.2
Performance evaluation
In order to generate quantifiable measures regarding the technical performance of the ap-plication, the web browser Google Chrome was used. Google Chrome1includes a number of built-in development tools where users can locally manipulate the view of visited web
4.2. Evaluation
Table 4.2: File sizes of the images used for the image loading tests. Image Full resolution file size (KB) Placeholder file size (KB)
1 1013 43 2 3775 46 3 931 37 4 739 44 5 653 46 6 891 46 7 631 38
sites, view JavaScript logs, and monitor performance factors such as memory, network, and rendering, where the feature most relevant to this work is the network monitoring tool.2
The tool can be used to control and monitor the network requests sent by applications, which is presented in figures 4.4 and 4.5. Measurements includes total size and loading times of requested resources.
Figure 4.4: Overview of the built-in networking tool of Google Chrome
In order to simulate environments with poor internet connection, it is possible to throttle the network speed when debugging the application. The default options are ’Fast 3G’ and ’Slow 3G’, but custom options can be added manually, see 4.5.
Figure 4.5: The network throttle options of the networking tool
The most significant features of the application were tested using the network monitoring tool where each view was opened and logged using the tools timeline. The tests were all conducted four times, and averaged, to eliminate impacts of other network traffics.
To simulate new and re-visiting users, relevant tests were conducted both with and with-out the built-in cache of chrome. Also, to simulate environments with varying internet con-nection, each test was conducted with, and without ’Fast 3G’ throttling respectively.
2The browser built by Google. https://www.google.com/chrome/index.html.
5
Results
In this chapter, results regarding the tests and the final prototype are presented, both on technical and subjective levels.
5.1
Implemented platform
To give a clear view of what context tests were conducted in, this section covers the views pre-sented to users, and how they differ on computers and mobile devices. To further highlight dimension differences, the platforms relative scale is shown for the mobile and computer de-vices used for the tests, in Figure 5.1. As can be seen, mobile dede-vices are significantly smaller, and can present less information simultaneously. Computers on the other hand, has more screen space to present information on, sometimes even more than necessary.
5.1.1
Home
When opening the platform, the user is presented with a list of courses, which is presented in figures 5.2 and 5.3, for computer and mobile screens respectively. The course overviews involves general information such as course code, title and examiner.
As may have been noticed in the starting page of the application, a light blue theme was chosen, to induce a sense of calm to the user, based on the conclusions of Gorn et al. [24]
To accomplish a responsive structure, a grid layout is used in combination with media queries. The number of columns is restrained to three for larger screens and one for smaller devices respectively. Screen widths exceeding 768.9 pixels are categorized as ’large’, and others as ’small’. This limit is used for all device dependent elements of the platform.
5.1.2
Authentication
In the top right corner of the layout presented in figures 5.2 and 5.3, a sign in button is lo-cated. When pressing it, the user is redirected to the authentication view of LIU’s web ser-vices. When submitting valid credentials, the user is then redirected back to the platform, and shown its active courses.
The layout of the active courses page is similar to the page with all courses, but with addi-tional personal information of each course. The addiaddi-tional information includes progression
5.1. Implemented platform
Figure 5.1: Relative scales of the devices used for the tests.
Figure 5.2: The "home" page of the application viewed on a computer.
and registration status and is shown in Figure 5.4. Progression bars are marked with the primary blue colour of the theme, to further benefit the satisficing behaviour.
5.1.3
Personal menus
When signed in, there are also more functionality in the toolbar, located at the top of the view. Partially, as mentioned, the user can then navigate to their active courses, see notifications, and open a minimalistic profile menu, see Figure 5.5. Each functionality is represented by a unique icon to save screen space, which is marked black when inactive, and blue when active.
5.1. Implemented platform
Figure 5.3: The "home" page of the application viewed on a smartphone.
Figure 5.4: The layout of course items for courses taken by the current user.
Figure 5.5: The toolbar layout when dis-played for authenticated users..
To highlight the number of notifications, a secondary colour, red, was chosen in order for it to not blend in with the blue color.
The placement and display of the menus are both handled in the same manner; on com-puters, they are smaller boxes shown in the top right corner, while they are placed over the entire screen (below the toolbar section) for mobile devices. This was chosen to add simplicity for mobile devices, and to add availability for computers.
As mentioned, the notifications menu contains notifications relevant to the user, including information such as course, event details, and date. To further separate items, the text for the course code is marked and enlarged in combination with separation lines between the items. Notifications regarding course messages are summarized into one list item per course, to avoid unnecessary redundancy and confusion, as can be seen in the last item of the list shown in Figure 5.6.
5.1. Implemented platform
Figure 5.6: The layout of the notifications menu.
Figure 5.7: The layout of the profile mini menu.
In Figure 5.7, the profile menu is shown. Due to limitations in means of time of the project, it only includes the feature to sign out, which is considered most relevant for this study. Thus, the understandability of the profile icon can still be evaluated.
5.1.4
Course page structure
The course page is the main feature of the platform. Its layout can be categorized into three main sections: ’content’, ’overview menu’, and ’navigation’, which are labeled ’1’, ’2’, and ’3’ in Figure 5.8.
In the ’content’ section, the main content such as news, calendar, informative material and assignments are shown.
In the bottom of the page, the ’navigation’ section is placed. Here, the user can navigate forward and backward in the list of activities of the course, to ease navigation when the content of multiple activities were relevant. This is done by pressing either of the left and right buttons respectively. In the center of the section there is a button labeled ’Markera klar’, which the user can use to mark activities as done, to get a clearer overview of its progression. When marking activities done, the overview menu is updated, which can be seen in figures 5.8 and 5.10. The buttons are marked with a more light blue color to notify the user when they are disabled, without changing the structure of the section.
In the activity menu, the user can navigate to its course news, results, calendar, and all activities included in the course. In the top of the menu, the static navigation items are placed, which are the same for all courses, see Figure 5.10. Below, a progression-bar is placed, displaying the users progression in the course, which is updated every time any activity is marked as done to provide a goal with clear feedback to the user. Its percent is based on the completed activity amount, divided by the total amount of activities in the course.
The main section of the menu is the list of available activities. The list is grouped by course modules, where modules can be expanded and minimized. To give a clear overview of the activities, completed activities were marked green, and the active one blue. When finishing all activities related to a module, it was also marked green, along with a gold-filled award icon. These functionalities were added with the purpose to induce a feeling of joy to the user.
5.1. Implemented platform
Figure 5.8: The course view when displayed on a computer.
Figure 5.9: The course view when displayed
on a smartphone. Figure 5.10: The activity menu being ex-panded on a smartphone.
As may have been noted when viewing figures 5.8, 5.9, and 5.10, the behaviour and style differs for the overview menu when displayed on computer and mobile screens. To add availability, the overview menu is statically placed to the right when displayed on computers, with compact items. This both adds more space for the ’content’ section and enables for more activity items to be displayed simultaneously. When displayed on mobile devices, the menu is hidden by default, and toggled via a menu button, which can be seen in figures 5.9 and 5.10. The menu is then moved from the right to the left when shown, and vice versa when hidden.
5.1. Implemented platform
Here, icons were given larger interaction space and separated by lines, to add simplicity both in means of readability and usability.
5.1.5
Course content
As mentioned, the course content section contains the views responsible for providing data and interaction for the activities included in a course. The section is limited to a maximium of 800 pixels to support screens with wide aspect ratio. As its content is heavier in means of data, its content is dynamically loaded first when opened. For example, the content for the activity ’Om kursen’, which can be seen in the side menu, is first loaded when the user navigates to that activity. Thus, the waiting time is split throughout the session, and less unnecessary data is fetched from the server.
All fetched course data is cached per session, in order for the user not to wait unneces-sarily when showing the same information multiple times. The cached course data is then cleared when the user either navigate to another course or close the platform.
News
The news view was implemented to gather and present the course messages published by the course administrator as a list to the student, see Figure 5.9. To provide both flexibility to the course administrator, and a responsive experience to the student, the "innerHTML" function-ality of Angular is used. This enables course administrators to provide HTML elements to be displayed within the items. This is used throughout the course page for the more complex informative sections.
Informative activities
To provide the user with content regarding theoretical aspects and instructions regard-ing practical assignments, course content referred to as ’informative activities’ were im-plemented. Here, course administrators can place mixed content with text, images, video sources and PDF files. The material can be separated into specific sections, including a title, a descriptive text along with a generic material, of the prior mentioned types. Each section can also be marked as ’expandable’, making it possible to expand and minimize them, to add readability and simplicity, see figures 5.11 and 5.12. When minimized, only the title of the section is displayed. When expanded, the title is displayed in combination with the content of the section, which is surrounded with borders, to separate it from other content.
Figure 5.11: Example of expandable course
material which is minimized. Figure 5.12: Example of expandable course material which is opened.
