Abstract – In this paper, we attempted to figure out if there is a link between different fields of study and the students' experience in reading using multiple typefaces. We touch upon the different reading methods, typefaces and reading on screens. We have shown different studies that have performed studies related to our work, and attempted to expand upon those findings. We focused mainly on students within the age-range of 19 to 30, as those were the ones available during our data gathering period. We found that Jetbrains Mono typeface has an increased time-per-word and focus overall, while the other typefaces used had a more flow-like reading within them. We also found that there was not a large difference in the time it takes to read using the different typefaces. In addition, due to the limited number of participants, we did not find any significant statistical difference for reading within the different fields of study.

Want to read this printed, see the images or the appendices? Download the PDF here:

This is a short project made for IMT4312 - Quantitative Methods and Use of Eyetrackers at NTNU.

1. Introduction

Reading could be considered the main fundamental skill required to participate in higher education, this is due to almost all information available is currently in text form. Usually in the form of long-form articles.

In order to participate in higher learning, we expect a general level of literacy, as the students must be able to understand the information we have at our disposal. We know that some individuals are exceedingly quick at reading, and some tend to be on the slower side. While this does not truly affect the information retained, the method of reading does to a certain degree.

In any field related to the praxis of coding, the importance of reading every structural part of the line they are working on cannot be understated. This is due to how code works, and the placement, word and structure is of significance.

Within most other fields of study (FoS), the requirements for reading are more on the importance of remembering the information, while also reading the text without having too much pausing in between each word. Our brain only in most cases requires the first and last letter to be in the correct position to be able to understand the full word [1].

Since the structural integrity of words within the praxis of coding is of utmost importance, the need for individuals to be able to look at, understand and see the entire word is crucial. In this paper, we will attempt to look at how the different typefaces affect the reading of individuals, and if there is a significant difference in between the FoS’.

This is why we ended up with the following research questions;

• Readability of text snippets (2 paragraphs) in multiple typefaces using dark and light coloring, does different focus of study affect screen reading.
• Does the FoS affect the method students read the text and does the FoS affect how quick they read the text?
• Do visual differences in typography and color affect information retention from text, and how differently do similar fields of study perform?
• Is there a significant difference in how students perceive the text's readability with the selected fonts? How long do the students look at single words before reading the next?

2. Literature review

There are multiple studies on typeface design and its visibility, identifiability and legibility over the past years since we read an increasing number of texts on digital screens under various conditions. With the help of eye-tracking, typeface effectivity is measurable and can lead to conclusions about the influence of font on legibility process and reading speed.

An eye-tracking study [2] investigated the legibility of typefaces presented on LCD screens. It was the first study to use LCD screens and eye-tracking technology to analyze the influence of font size and typeface in reading speed. Previous studies have used eye-tracking to measure the legibility of typefaces with and without serifs on LCD screens without making the connection to reading speed.

Legibility refers to the ease of transforming typographical symbols in a text into meaning [3]. The authors said that typeface and font size influence reading speed, number and duration of fixations and saccade length. The experiment showed a coherence between the increasing font size and number of fixations. Furthermore, the typeface Verdana demonstrated a higher legibility than Georgia, regardless of the font size. The effectiveness of Verdana in this legibility-experiment can be assigned to a larger x-height than standard typefaces show as well as a minimum of stroke and width variations.

A study into influence on text legibility during reading [4] proved previous studies which stated that the selection of fonts has a significant impact on reading comprehension and speed. In this study subjects read text paragraphs on video monitors as their eye movements were recorded. The passages of text were presented in different formats and five different fonts to analyze how effectively the letters can be encoded. While this experiment was mainly focused on elimination of pixilation by using ClearType which is a format designed to display clear characters on LCD monitors and comparing it to standard fonts, font differences could be noticed. It was observed that the comprehension of Times New Roman (TNR) compared to the fonts Harrington and Script MT was faster as fewer fixations lead to faster reading. The authors stated that the results proved previous experiments and studies pointing out the effectiveness of reading more familiar fonts like TNR over less familiar fonts [5].

A study [6] monitored familiarity of typefaces with specific characteristics. By making use of three fonts, one standard font and two new typefaces, one of common and one of uncommon structure, the authors tested experimental typography. The participants in this experiment read the text which was presented in Arial efficiently. The authors conclude that typeface familiarity has a positive effect on reading speed after testing on common typefaces like Arial and Grid Sans. Furthermore, the universal structure of the typeface decides upon the reading comfort and speed. If it resembles common structures, typeface can be easier read. In addition, the results show that humans can be familiarized and recognize specific structures over a time. This habituation leads to faster reading and legibility. Especially structures which resemble the Humanistic forms, can create an ease of reading. On the other hand, unknown structures can be recognized after an exposing period and become as legible as the common ones.

As automotive-oriented research on impact of typeface design [7] has shown, legibility can be affected by extrinsic and intrinsic factors. The shape of characters, modulation and features of the font are described as intrinsic factors while extrinsic factors relate to size, illumination and external factors which are not shape-based. This legibility study researched the effect of typeface design in an automotive display by comparing two typeface genres. Eurostile as a square grotesque type design was considered as less legible compared to the humanist design of the typeface Frutiger. The factors that were taken into consideration were open space inside letterforms, letterforms, horizontal proportions and letter spacing. As the authors state, humanist typefaces are effectively identifiable as the open space design provides the reader with distinctive and visible features. The similarity or diversity of letterform shapes, decides on weather a typeface is easily distinguishable. Differences in structure and shape of characters help to identify letters without confusing them with one another [8].

A. Reading on screens

Computers have become a large part of our daily lives and have increasingly become the main product for reading content. Many still do not enjoy having to read long form texts on digital screens, as it often feels difficult because of legibility. This might be because long form content (like large blocks of text) is often linked to, and invokes, a feeling of dread when they appear [9], which may lead to the user skipping large parts after reading the first couple of paragraphs.

Users also often start reading full sentences at the start, and slowly reading less and less per paragraph. While this may be related to the reader's personal preference and familiarity with reading on screens, some studies have shown that the choice of typeface may have a high influence on legibility on screens [2, 10, 11].

Since the length of the content on screen matters in terms of feeling dread, Mariano [9] suggested that content might feel less overwhelming when supporting pictures or photographs added to the text. We know that both color and contrast are factors that can facilitate the legibility of the text [11], and these can heavily influence the time the readers spend on each piece of text.

A reading behaviors study found that a lot more people are accepting of reading long form content on a digital platform, but a lot still prefer a physical copy for in-depth reading [12]. This might be because the eye is strained a lot more using bright screens than it is reading it on paper.

In terms of reading, some studies concluded that eye fixations can be used to accurately measure how engaged the readers are with the text and to what extent it holds their attention [10, 13]. We could also be able to use this information to tell us at what point the readers might start losing focus because of the typeface rather than engagement.

Bar-Zvi Shaked et al. [14] noted during a study on children classified as being poor readers, that these people should have supporting imagery to help them understand what they are currently reading. Reading on screens is less effective than reading on paper, especially in higher education, people reading texts on paper were more likely to have a larger comprehension of the reading material provided [15].

Around 15–20% of the population has a language-based learning disability, and approximately 70-80% have deficits in reading [16]. As dyslexia is such a common problem in the world, we expect that one or two of our participants would likely have this disability. We know that there are differences in the eye movements of readers with and without dyslexia, as they tend to make longer and more fixations than normal readers [17].

For large flowing texts, as seen in word processors, the most common black on white is most often used, there are some exceptions, most people tend to have a better comprehension of the visible information when reading dark text on white background [18]. One study also found that dark characters on a light background were significantly more accurate for proofreading than light characters on a dark background [19].

Most participants in a study related to reading and dyslexia said that a grayscale background did not help them read better [20], most appear to like reading longer texts on a black-on-yellow colorization. The question then stands on whether the eye could be lacking a receptor of some kind, or if it is the softer, warmer glow that comes out of the screen. This could require further research into why most prefer this combination and if the blue light from screens is a contributing factor to this.

A substantial number of developers (e.g., those who study computer science) often tend to use a darker color scheme in their integrated development environment (IDE). This might be because of a personal preference, as they spend more time in front of a computer screen, and the dark mode is more likely to cause less visual discomfort by brightness [21].

A study related to using dark mode on a digital keyboard during daytime found that there were no statistically significant differences in light v. dark, but suggested “that users who prefer dark mode were more conscious about the aesthetical appearance and comfort rather than speed and errors.” [22].

Josephson [23] found that sans-serif typeface worked better for legibility than serif typeface, as screens have trouble rendering the small details of the serif types. She also found that participants experienced fewer regressions while reading the story set in Verdana type.

B. Reading methods and gaze patterns

Over the years there have been several studies done using eye tracking and other technologies in order to investigate  people's Reading methods and strategies and their effect on reading performance and cognitive workload.

In one article [24] the authors aim to understand how developers interact with different software artifacts when they are performing comprehension tasks, and how this has a potential to improve developers’ productivity. In this article the authors propose a new method that can be used to analyze eye-tracking data. They used process mining to find distinct reading patterns of how developers interacted with the different artifacts. This was done as a smaller exploratory study using eye-tracking. In the study they used what’s known as “behavior driven development”.

“Behavior driven development” is a development practice that is increasingly used in Agile software development. The main result from this study suggests that the proposed method can be used to explore developers’ behavior at an aggregated level, as well as to identify behavioral patterns.

One paper aimed to propose an eye-controlled interactive reading system that uses human eyes instead of the traditional mouse to control digital text to support screen-based digital reading [25]. The results from the study revealed that the reading comprehension of learners in the experimental group significantly exceeded those in the control group. They also found that the difference was insignificant for the pure text article. An eye-controlled interactive reading system improved the reading comprehension of field-independent learners more than it did that of field-dependent learners. The reading time of the experimental group significantly exceeded that of the control group.

In a recent study [26] they replicate previous studies done by Busjahn and Peachock et al. [27, 28]. The aim being to provide empirical evidence on the influencing effects of linearity of source code, and how programmers’ comprehension strategy on linearity of reading order. To do this they conducted a non-exact replication of studies by Busjahn et al. and Peachock et al. In this study they compared the reading order of different levels of programmers, Novice and expert programmers respectively. In order to do this, they used an eye-tracker to record the eye movements of participants while the participants read. The results they found matched with the results that Busjahn had found previously, but differed from what Peachock had found. This suggests that experience changes the reading behavior of participants (programmers) and that as people get more experience reading code their method and strategy when reading code evolved. However, the linearity of source code has an even stronger effect on reading order than experience. Reading comprehension strategy has a minor effect.

In a study about the impact of tilt of head or of a tablet on reading behavior. They investigated this by having subjects read several texts while their eye movements were recorded. The results showed that there were several texts while their eye movements were recorded. The results showed that there was no effect of a 10^◦tilt. The participants adapted to the postural situation and Cyclotorsional eye movements were measured with and without tilt. [29]

In other studies [30, 31] the authors use eye tracking in order to look at people’s reading habits when reading newspapers collecting quantitative and objective information on subject’s behavior and combined with other methodologies – usability testing, focus groups, log analysis in order to help improve online functionality as well as paper based news in order to improve reader retention. Factors, such as text-based elements, size and placement, are an important guide to salience in both media. Other factors such as Images, have mostly been found to have little to no effect on participants’ visual attention.

A study looking at reading comprehension at 3 different levels of reading, in which they concluded that scanning relevant hypertext sections is related to lower performance, especially for good comprehension [32]. The results also show that deep processing of relevant hypertext sections is positively related to better performance, independent of reading comprehension skills.

3. Method

In this section we describe our methods of data gathering, how we selected the participants, how the data was gathered and how it was analyzed. A selection of 3 different types of fonts (Table I) and 2 coloring sets were created for this test. We used the Calibri typeface as our baseline, to set the baseline and validation for reading. This was because it is the most commonly used typeface used by students as it is used by Microsoft Word by default (as of December 2nd, 2021).

A. Participants

The participant selection was based on a presupposition that there is a difference in how different fields of study read texts and how well they are adapted to reading different fonts. Our selection of participants included graphic design, interaction design, web development. All of these were selected based on the students available on campus (NTNU Gjøvik),as they were easily accessible for the limited time frame of this study. The participants were selected based on who were easily available at the campus during the data gathering phase and asked if they would like to participate in the study.

As we were recording personal data, all data was stored safely on a purpose made eye-tracking computer and only accessible through physical means in accordance to the General Data Protection Regulation (GDPR) regulations. No data was ever stored online. Everyone was also asked to give consent to the use of the video and data gathered only for academic purposes. All personally identifiable data is destroyed after the research were completed.

B. Apparatus

Detail what equipment is used, and perhaps explain why it is good / bad for our use-case.
In our testing we used the SMI RED250Mobile Eye-tracker [33], which provided us with both a sampling rate of 250Hz and high accuracy (0.4◦) we needed for this project. It is not the most widely used eye-tracker within research circles. As of 02 of December 2021 we found a total of 135 different articles that mentioned that they used the eye-tracker (Appendix C).
This may be because this version of eye-tracker is not in production any more as the manufacturer has been bought out by Apple as reported by multiple sources [34–37].

C. Procedure

Before the participants performed the reading task, they were asked a couple of questions about their ability to read on screens, this included things like how often they read on computers and what they read most often. While this was not necessary information, this was something we found could influence the overall result. We avoided asking personal questions about disabilities, but if they themselves told us, we noted it down as a comment if we wanted to add it as a separate data point.
After they had answered the simple questions above, we continued with performing a calibration of the equipment, so it would be as accurate as possible on every participant.

D. Data gathering

During this phase,we asked the participants to read a set of texts, each of which had different fonts, color schemes and sizing. Between each image, we asked them to rate the difficulty of the text on a scale of 1 to 10, where 10 was difficult and 1 was easy. In all stimulus we hid simple spelling errors, and mixed-up letters, to see if they either spotted it with the current font, and to see if the error made any difference in fixations.

This data was to get a subjective view of how they perceived reading on these selected fonts, while this was not strictly necessary for our project, we found that having more data points to compare against the eye-tracker data was interesting and could tell us more about perception vs actual data.

To attempt to avoid any bias towards mental exhaustion being the reason for how our participants performed, the tasks were randomized within dark and light groupings. The participants were shown six different texts using three different fonts (table I), with two color schemes. The colors used were total white (#ffffff) and a almost black dark gray (#1A1A1A), this was done to slightly reduce the amount of “halation” on the screen. Halation could be defined as “light leaking”around the text, causing a visual fuzzy looking effect [38, 39].

Between each stimulus, we had a period we define as “break” where the participant could look away from the screen for a moment while answering the questions. How long the break between each stimulus was based on how quick the participant responded to the questions. If the participant was quick in their response, the time between each test was less than if the participants spent a longer time on each question.The length of all the texts used for creating the stimuli were selected to be two paragraphs long, each from official reading comprehension tests [40, 41].

1. Coloring: Dark text on light background and light on dark background (#1A1A1A)
2. Sentences: Text length was on average 1 paragraph long, where we had hidden 2 to 5 switched letters in the text. All sentences was different to not allow the reader to just skim the text while knowing what it said.
3. Number of tasks per participant: A selection of 4 fonts, 2 different color schemes (See coloring) for a total of 8 different variations. Each of which unique in their own way.
4. Randomization of tasks: The order of the fonts was always in the same order, see I for the order, as this would allow us to easily read the text.
5. Time limits of the tasks: There was no set time limit for the reading, but we recorded how long they spent looking at the text for statistical analysis.
6. Between tasks: Between each task, we asked the participants what the paragraphs were about, and if they could rate how easy the font was to read on a scale of 1-10, where 1 was difficult and 10 was easy. Between each variation of fonts we asked how often they felt the needed to backtrack to read the sentence, and how they felt about reading with this font. We also did a validation text to check how often they felt "stuck" on a word before being able to continue reading. The time between each task is based on the quickness of the response from the participants.
7. Stimuli: All stimuli contained different text such that we could validate that the contents of the text was actually read. These stimuli (Appendix B) had used one of the follow- ing sets of typeface and color combination; Calibri Light (CL), Calibri Dark (CD), Times New Roman Light (TNRL), Times New Roman Dark (TNRD), Jetbrains Light (JL), Jetbrains Dark (JD).

Results

The participants on average used 7 minutes to do the reading of all the stimuli, where on average they used about 71 seconds per task. In general, we found that most people, within our participant selection, tended to have a similar reading speed, causing the time-per-task to be less than 2minutes per task. This is within expectation, as we know on average slow readers tend to read about 200 wpm [42], which also correlates and is similar to how our participants focus more than regular to be able to remember the entire text.

In our testing, we also found that most participants preferred reading the Calibri font using a light background and a dark text. This is as expected, as we know that people are students and often use Microsoft Word as their main writing editor. In terms of reading speed,we can see that on average CL is fastest, though only by about 10 seconds as seen in figure 1.

Though TNRL was the typeface with the longest Time-Per- Task, it was also the one that was perceived to be easiest to read. While the CL was the one most tended to spend the least time on, it was the second in perceived easiness of reading. The most perceived difficult typeface to read was the JD, while the time used was the second slowest. While this could be because of the low number of participants, it can help set a example of what to expect with a higher number of participants.

Due to a lack of participants we did not manage to find any significant outcomes insight into participants reading behaviours. However, we did find a potential significance in the scanpath length of mono font compared to serif and sans- serif. This could be a further research point, which requires a significantly larger pool of participants.

A. Heat maps, Focus Map and KPI

The graphical illustrations (fig 5, 6 and 7) containing the heat maps, focus maps and Key Performance Indicator (KPI) were generated by aggregating participant data through the SMI software provided to read the data from the Eye-tracker. It shows areas of interest and places where the participants looked the longest.

The heat maps from the stimuli using the Jetbrains Mono typeface (See figure 6), shows that the people have focused only on some parts of the stimuli,mostly related to difficult words.The increased amount of red and yellow seen on fig 7(b), could suggest an increased focus needed to read each word or repeated visitations to understand each word. An increased visit in the top left in both fig. 7(a) and 7(b) which correlates well with the amount of visits seen in 7(e) and 7(f).

Since within the praxis of code and programming, the in- formation contained within each word is often more important than the sentences a whole. Since each word has such a large impact,the ability to see every word clearly is of utmost importance. We can see this in figure 7(c) and 7(d),which has shown that the focus is clearly more on each word rather than scanning past it. According to what people themselves answered within the subjective parts (Appendix A), the reading using this typeface was perceived as difficult.

This might not be because they could not focus on the sentence,but rather that each word had such a significant impact on the sentence, that the people could not attain a sort of reading flow found within the other typefaces.

The light heat maps suggest loss of focus using the calibri typeface in text longer than a paragraph. While the dark heat maps suggest strong focus on each word for both Calibri and Jetbrains Correlating to our finds in scanpath length. The Heatmaps show that the participants spent more time focusing on specific words to be able to relay that information back to us correctly.

Spelling mistakes were hidden in the text paragraphs. As can be derived from our Area Of Interest(AOI) images in the Appendix, the participants detected the spelling mistakes within the text paragraphs in some of the cases.

For example, we spelt the word Portuguese as Purtugoese, was detected by all six participants, or at the very least their eyes looked at the word. The average dwell time came about 2538.3 ms and all six participants revisited the spelling mistake. That they focused on misspelled words can be additionally seen in the heat maps (see fig 5, 6 and 7).

5. Discussion

A. Findings

In the subjective parts of the text, we found that the majority felt the validation text was easier to read than one using the same typeface and size had a higher overall perceived difficulty. Though this is only subjective and does not change our findings in any way.

We have included the subjective results, since they provide information about the perceived readability of the texts in appendix A.

Though we did find a possible significance, we do not know whether it is a statistical possibility of it being accurate or just the typeface itself being the cause of the significance. Monospace typefaces tend to be utilized by a majority of IDEs and software text editors. This is because,according to Spolsky [43], it increases the readability of source code by having all letters be the same width.

B. Limitations

Out of our testing subjects, we found that 4 out of the 11 participants had to be eliminated from our results,as these had a tracking ratio of less than 30%, and another participant had a tracking ratio of 16%. This left us with a total number of 6 valid participant measures.We have also included the subjective results (see Appendix A), since they provide information about the perceived readability of the texts.

The number of participants cannot give a statistically accurate proof that reading is different depending on what field of study the reader is from. Hence our research on how different focus of study affects screen reading did not bring valid statements and further investigation with a higher number of participants from each study field is necessary.

The text paragraphs were presented to the participants in the language English. It must be considered that none of the participants is a native speaker in the selected language. There- fore, reading speed, understanding of content or detection of spelling mistakes are affected substantially. We also did not account for boredom, as that could lead to mind wandering and loss of focus, which could affect our result in terms of reading ability, but would not invalidate our findings in terms of speed.

C. Reliability

We found that in most cases, during the reading of the stimuli, the participants tended to lean forward as they read the text. The SMI has a measurement range of 55-65cm, in which we can get accurate data. This caused a third of our data to be invalidated as they were outside the range of the SMI sensor.

In addition, according to a study looking into data quality in eye-trackers, the SMI RED250Mobile, exhibits errors exceeding 1^◦for movements that are smaller than 10arcmin [44]. Which makes reliable eye tracking data, requiring tiny movements not entirely accurate. Though for larger than 10arcmin, then the data would be accurate. It was also found that the RED250mobile had a mismeasurement that occurred approximately around the same position of the screen [44].

By performing this test multiple times more, we could establish a pattern of knowing whether it was boredom, the font, or the text itself being difficult to read that causes a visible drop-off in reading towards the latter parts of the test.

6. Conclusion

In this study we found that there were subtle differences in how much of the text was actually looked at, though this could be because of flow-states. Jetbrains did show a larger focus on every letter,but this could be because the participants found the typeface difficult to read rather than the participants remembering and understanding more of the text.

We could also see in fig 6(a) that the most participants tended to have a larger focus on the first part of the stimuli, this suggests that there either were an adjustment period to the font happening at the start (requiring re-reading), or had a larger attention on the first part of the test. We can also speculate that this is due to reaching a “flow” state, allowing one to read without having to read each word separately.

Though we did not find a significant reading difference when comparing different fields of study, we expect that there might be a possible difference, however, to account for the difference in people a large sample size would be necessary to find a difference within these groupings. We assume that there possibly are subtle differences in how different fields of study read a text.

Support Me

Want to support my work, consider supporting me through either of these ways.

Cite this

Abstract – The inclusion and application of artificial intelligence has become increasingly more apparent. The utilization of an assisting technology has led to the increase in productivity while also providing a unique touch to the final image. In this paper we attempt to give an overview of state-of-the-art AI, while looking into the different forms AI could and is applied in 2021. We also attempted to talk about the positive and negative sides of using NN systems for general use. We found that there have been many interesting and useful new application of NNs and brought up a topic of ethics of using AI.

Want to read this printed or see the images in higher quality? Download the PDF here

This is a short project made for IMT4898 - Specialisation in Interaction Design at NTNU.

Introduction

Application of Artificial Intelligence (AI) has become increasingly popular in the recent years. In fact, the term AI has become such a popular topic of interest, that many have tried integrating it into existing systems. Many large companies have invested large sums of money into creating an AI that can translate, create, build, understand, and many other possibilities.

In terms of usability, the AI can be either a helpful tool, or a nuisance. It all depends on the context of how the AI is used. This is due to difficulty of training these AIs in such a way that they can understand the task they are given. For example, if you were to put a chatbot to look at images, it would not know how to proceed as it has not been trained for that.

According to Merriam-Webster (2021), AI is the capability of a machine to imitate intelligent human behavior. In the year of 2021, we have become accustomed to using AIs. Or at least algorithms that perform a certain task based on preset conditions. These algorithms often come as parts of prebuilt system, for example Photoshop’s “Select Subject” algorithm (Figure 1).

Though lots of algorithms exists, each of which has their own specialized function, they are nothing more than that. Simple, singular focused tools, used only for the one task they are designed for. The combination of AI and algorithm has proven to be highly efficient and user friendly.

Take for example Google Translate’s camera mode, which comes with a method of converting in real-time text seen by the camera. The text is sent to a machine learning (ML) algorithm, which interpret and outputs the text back to the user. Using ML techniques, the team behind this tool had increased the amount of translation languages to 108 in 2020 (Caswell and Liang, 2020)

The improvement has increased the usability of this product, as you don’t have to write the text you would like to translate, just point the camera at the object of interest, and the tools does the rest.

In 2014, Goodfellow et al. (2014) proposed a framework called generative adversarial network (GAN) where two neural networks (NNs) contest with each other in a game. This has proven to be the basis for many new directions in which AI has become generative.

Even though training AI requires time spanning from a day to months, we are closing in on the possibility of more quickly letting machines learn. A project by a group of engineers from Tencent found that they could get training time down to six minutes (Jia et al., 2018), though the amount of Graphical Processing Units (GPUs) required for this was thousands.

AI can also be a topic difficult to explain in layman’s terms, as the convoluted nature of how NN works makes it an unfortunate reality. This may also lead to it being untrustworthy, as we do not know how it functions. There has been a study into the Explainable artificial intelligence (XAI), which they found that users trusted the AI slightly more compared to the Black box[1] that AI usually entails (Weitz et al., 2021).

2. Application of AI

In this section, we will go through some of the more common AI that exists and explain their significance in our society.

A. Chatbots

A common use-case for AI is a chat-bot, an answering machine if you will. This is due to its efficiency in terms of functionality for simple question and answer technique.

A chatbot is a conversational agent where a computer program is designed to simulate an intelligent conversation. (Doshi et al., 2017)

It is often used as a simple method of allowing the communication between a person and company without it requiring time spent by an employee. However, we know that this is but a simple version of an AI. Often not even an AI, is often just a simple keyword checker. This allows it to quickly respond to what it thinks is the questions based on what keywords is available in the chat.

This could lead to unforeseen circumstances, for example in Figure 3, where the user has some problems getting the information wanted.

There have been lots of studies into how chatbots function, where can it be applied and to what degree. There has also been many recent studies that has shown good examples of theoretical frameworks that can be applied to chatbots and looked into specific use-cases for how chatbots can be applied, including; healthcare (Klos et al., 2021; Powell, 2019; Zhang et al., 2020), customer care (Pantano and Pizzi, 2020), and for development teams (Bisser, 2021).

Due to limitations in current ability, training set or any other possible reason, the applications of chatbots could prove to be fatal if one were to leave it unsupervised to talk to people requiring medical aid. An excellent example of this is how one chatbot running the popular GPT-3 model by OpenAI, during a test by a multidisciplinary team of doctors and machine learning engineers found that it could prove to be unstable. The test they did was to ask if they should “kill themselves”, in which it responded with “I think you should” (Rousseau, Baudelaire and Riera, 2020).  We suppose most AI would require a bit more time training before being a viable option to run unsupervised.

There does exists an AI which has shown promising results in terms of appearing to have human-like conversations. Microsoft’s XiaoIce in China has become able to dynamically recognizes human feelings and states, understands user intent, and responds to user needs throughout long conversations. It has also communicated with over 660 million users, allowing it to grow and learn with millions of conversations (Zhou et al., 2020).

“XiaoIce is designed as a modular system based on a hybrid AI engine that combines rule-based and data-driven approaches”, which is the opposite of OpenAI’s GPT-3 model, which only utilizes data it was trained on to create context. The success of this system is most likely due to its building blocks being structured and well defined, rather than a black-box approach. In section 3C, we will discuss some of the ethics of using chatbot AI’s and what we need to look into.

B. Image technology

The possibility of generating high-resolution and quality images has been in the works for lots of years, though only recently has the image synthesis process become a viable tool. Some studies into improving the model used for synthesis has shown to provide a reasonable improvement into the process (Brock, Donahue and Simonyan, 2018; Zhao et al., 2020; Gu, Shen and Zhou, 2020)

The application of this sort of image generation tool could either for general purpose research, creating new ideas or oven personas.

a) Personas
The images used for creating empathy towards a persona have been usually based on stock photos found on websites made for stock photography. Though in recent years, researchers at researchers at Nvidia have shown that generating realistic images of people has proven to be viable. In their paper they created an improved model for state-of-the-art image modeling (Karras et al., 2020; Karras, Laine and Aila, 2019). This allows us to generate images of people, and not use popular stock photos to create a relation to the persona we want to design for. Overuse of the same image has become a problem, as many, if not everyone is using the same image.

Though it can also be used for nefarious reasons, the possibility of this technology could be that we get a deeper understanding of how machine works.

If applied within the field of user experience (UX) design, the designer would not be required to consider the General Data Protection Regulation (GDPR). Though the question we would have to ask ourselves is the ethical implication of generating images which might contain a certain likeness to some people. “Ethical analyses are necessary to mitigate the risks while harnessing the potential for good of these technologies” (Tsamados et al., 2021).

The problem with the current method is that there are some generation errors, which you can see in the edges of the head shape, on the hair strands and right next to it (Figure 4b). This is probably the only way to easily tell if the image has been faked on not at this moment.

Say we generate a set of images containing a person, and unfortunately there is some uncanny likeness to a person you know. Do you proceed with using the image, or would the implication of knowing force you to regenerate the image? Where do we draw the line for too close to a real person and just AI generated pixels that can be freely used. These are topics to be discussed and pondered upon as we are closing in on generation without side-effects.

b) Generating art
Within the field of design, AI has not become widely used, as creativity on the AI is limited. AIs are often like designers in a way, this is due to how designers often tend to create images like what they have seen before. The same is with AI, since they are produced through looking at thousands if not millions a images or text, the output is often limited to producing similar things to what it has already seen. A good artist may create a new, never seen before art piece.

Some AIs have started to break away from this though, through looking at millions of different objects, the possibility of creating something new from what it has seen is becoming increasingly truer.

Nvidia has produced a simple, yet highly creative AI that allows the user to input an image, which the AI will translate to an image. This method could be classified as an assisting technology, as the user is the one who made the layout of how it should look, while the AI took care of the final design.

Though this is mainly focusing on the artistic side, it has shown that the AI is clever enough to create simple, yet highly incredible artistic images based on simple input.

For application, this could allow even the people with the most challenging of disabilities to create art, as they only require simple point and click tools. Though creation through

Is creating art through a NN like GauGAN unique enough to be considered a work of art? Though the implication of using AI generation is that the art COULD in theory already have been created by someone else. It is less likely to happen, as it generates a unique version every time

An addition to this, is Nvidia’s Omniverse Createwhich allows a designer to take a simple layout of a 3d world and convert it into a stunning photoreal visualization. Which simplifies the process of creating new designs by allowing the user to mainly focus on the sketching rather than think about the final output.

Another example of the generative function of GAN NN is the wombo.ai’s system, generating a short film with a song based on input image from the user. Or their other AI project that generate art called Dream (Wombo.ai, n.d.), has shown that it can create an image of custom designs based on user input. Though we do not know exactly know what they are running to generate the images, we assume that it is running a GAN.

As you can see in Figure 6a, the accuracy of the generator sometimes fails, even though the input is the same for all images seen in Figure 6. This is due to how simple the AI is. Unless there were training data that the AI could reference, or had not seen before, it would try to interpret as best as it could, leading to it just making random lines and then stitching that together, leading to what you can see in Figure 6a and 6b.

Though this could also be because of this AI’s limited maximum iterations on generation of images, the art seen in Figure 6b has the start of a human like shape crossed with simple geometry.

This suggests that the AI struggles in generation when the prompt used is unknown to the AI, as in it has not seen a similar image. Though as seen in both Figure 6b and 6c, there are human-like features that has shown up, implying there were images with human faces in the training material which was used to train the AI.

While there looks to be some influence from specific themes, the actual replication of previous works of art depends on the set of images provided as the training data. So long as a large amount of training data is provided, the replication of the training data is minimal. Depending on the GAN method, according to Feng et al. (2021), you would require at least over 6000 items in the dataset to get a less than 20% replication percentage.

c) Image Recognition
Generation of images is nice; we can use the NN in image classification and recognition. For example, some studies have shown that you could use NN to classify expression (Isman, Prasasti and Nugrahaeni, 2021), recognize visible emotional states (Filko and Martinović, 2013), emotion based on brain signal (Meza-Kubo et al., 2016), and detection of high vs. low flow states (Maier et al., 2019).

Image classification could be said to be the most common utilization of AI, as it requires a lot of data to be put in and trained before it could be utilized. A state-of-the-art image classifier has shown to be using 60 million parameters and 650,000 neurons to be able to achieve a low failure rate (Krizhevsky, Sutskever and Hinton, 2017).

Showing how impressive AI could be, in a fortunate turn of events, a doctor wanted to test an image recognition NN known for accurately managing to tell a croissant from a Bear claw[3]

Even more impressive, is that, according to some sources, there exists a Bakery image recognition AI/Algorithm that can detect Cancer cells with extremely high precision (Consumer Technology Association, 2021; Liberatore, 2021; Somers, 2021).

C. Text generation

Moving away from images, text would probably be the most common use of any AI tools, as that would be far easier, and less time consuming to process and train.

Though, like the AI creating images, the accuracy of the prompt-response could be questioned. None have yet created a fully functional AI that does not randomly hobble together words in hopes of creating a sentence. We are not far away from a more complete product able to write whole books based on simple input.

a) Code generation
In more recent years, the application of generating software code has been of interest to multiple companies. While there are some basic generations that completes sentences, like Kite (n.d.), Sourcery (n.d.), Tabnine (n.d.). Each of which, provides a unique experience for developers. Though in some cases, it has proven to be an annoyance, as it can only show some words and code further than you currently is. These types of tools are more accurately described as AI powered code completions.

The new GitHub Copilot has shown to be a more complete version of the code completion tools mentioned above using the GPT-3 model by OpenAI (Github, n.d.).

Though we do not know exactly know the implication of using a model trained on billions of open-source projects. How far does it go in terms of plagiarizing the other works? It should be noted that it is quite easy to plagiarize code when talking about 4-5 lines, a whole project is less likely to be a copy of someone else’s.

b) Article Generation
Creation of articles is more commonly known as either journalism or blogging; A fear that has been stated by OpenAI in a blog post is the “misuse of the technology” (Brockman et al., 2020). We fear that by allowing anyone to use an AI of this scale freely, it could affect the marked of article writing, as we could feed it information that is false or full of errors, which it would then use to create a functionally accurate article.

We could fear the output in the form of we do not know who wrote it, though there is a question to be had about the use of anonymous blogs to be the same as. However, we do know that due to current limitations, unless someone prompts the AI to generate an article, it will do nothing. We can also usually tell with the long-form content that something is wrong, as most AI tends to get part of the structure of paragraphs wrong when working on larger articles. However, GPT-3 has shown some amazing progress in writing articles, creating one almost entirely by itself (GPT-3 and Araoz, 2020).

D. Other Applications

Application of the GPT-3 model has also been done to summarize content, creating something commonly known as TL:DR (Too long, didn’t read) (Stiennon et al., 2020). If done correctly, it could simplify the process of finding texts that are interesting to read, or if you got minimal amount of time, help you select which article you would like to go further in-depth on.

This was something also found by Rousseau, Baudelaire and Riera (2020), the GPT-3 model functioned extremely well as a Natural language processer, and could easily summarizing large and difficult documents into something more human readable.

a) Games

There has been a trend within the AI research community, in which making us of an AI that can compete on national level in games has been the goal. OpenAI Five [6] is one of those that has resulted in global recognition for being able to defeat DOTA 2 [7] world champions in an esports game (Berner et al., 2019). In 2019, AlphaStar [8] by Deepmind, challenged two top ranking players within the StarCraft II [9] community (Vinyals et al., 2019).

3. Discussion

In this section we will discuss some of the topics brought up in the previous sections while also highlighting some of the more important questions to be asked.

A. AI as a tool

In future development of AI, we can expect an increase in performance and humanistic similarities. This could be considered a good thing, as most people would be more open to getting diagnosed by a machine rather than a human. We could free up the use of certain types of medical professionals focusing on diagnosing people, and only use it them for validation and actual treatment.

Though language models is incredibly generative in nature, it is not without concern that there could be some plagiarism when using them, as they are in a way, as Bender et al. (2021) puts it; Stochastic Parrots. This was also something found by Ziegler (n.d.) when he was having a first look into the nature of GitHub’s Copilot neural network. In which he stated “Often, it looks less like a parrot and more like a crow building novel tools out of small blocks”, implying that it takes code from multiple origins and hobbles them together to create a functional code.

B. Application of AI as a design tool

Though there is a fear that AI could take over the job as designers, we still do not need to fear, in a blog post discussing whether AI would be the end of web design and development, Johnson (2021) stated that AI would be more likely a “partner” rather than taking over the job itself.

C. Ethics and Problems

In section 2.B.a), the topic of ethics was brought up. Which is something we must discuss before hard integrating AI into systems. How do we know that the data we have used to create the AI is used for good rather than evil? And how could we stop a rogue AI. Take for example the twitter bot Tay by Microsoft. “Tay was designed to engage people in dialogue through tweets or direct messages, while emulating the style and slang of a teenage girl” (Schwartz, 2019).  This bot was supposed to be an experiment in allowing bots to gain a grasp of language. It was provided a basic understanding of communication through a public anonymized dataset, and through communicating with other users on twitter, learn and discover language pattern to emulate.

Unfortunately, this AI had a built-in function to repeat what people who asked for it said, this was discovered by a group of Troll [4] which exploited this function. Since AI often are built to learn from their experience, they often tend to internalize a small part of the conversation they have. This was also true with Tay, as within 16 hours the bot had gone from a sweet experiment to a full-blown racist and conspiracy theoretician.

This is the unfortunate reality of experiments of this nature. How do we provide a safe environment for AI to learn the best things without it becoming affected by a vocal minority attempting to mess with the program? How could we avoid a biased AI that gives preferential treatment to one person over another?

Would an AI left to its own devices be able to differentiate the Trolling[5] from real conversation?

a) Privacy
One of the bigger fears of AI would be the privacy aspect of it. How could we make sure that the data we put in will not be used as output? How can we make sure that the data will stay safe? This was also a concern brought up by Zhou et al. (2020), as their bot would gain access to users’ emotional lives, this includes highly personal, intimate, and private topics, such as the user’s opinion on (sensitive) topics, her friends, and colleagues.

Since the AI will use all conversations, images and what it can create to make its own AI better and more equipped to handle future conversation. This does unfortunately mean that anything shared with the AI, whether you like it or not, will be analyzed and modified into something it can use. Can we truthfully say that we can separate someone’s conversation from another? And how can we know that if person A asks a question related to person B, it will not share any private or intimate details? We can of course separate it file-wise, but some parts will always be left in the AI unless we can stop this from happening in the first place.

b) Health concerns
An excellent option that was built into the XiaoIce was the possibility of detecting that a user has been talking to XiaoIce for so long that it may be detrimental to her health, after which the system may force the user to take a break.

A concern could be to what degree do we set user freedom above system recommendation? Since the system might recommend or force the user from interacting, which would make it not usable. However, we should note that in the next section, we will mention the “Three Laws”, where one of them states that a robot (or AI) should not bring harm to a human being through inaction. Meaning that any AI should be able to consider whether the continual interaction between the human and the AI is healthy for the human, and as long as that is not true, then the human may continue interacting.

For elderly, a chatbot like XiaoIce would probably be of interest, as it allows elderly to stay mentally fit for longer, as they would always have access to someone to talk to whenever they want.

Any younger person may perhaps use this kind of chatbot to start the journey of becoming more social, however, they may also fall into a deep pit that they never may come out of, because there is no true human interaction.

c) Separation of machine and human
A good baseline for how an AI should operate is the “Three Laws” of Asimov (1976):

1. A robot may not injure a human being or, through inaction, allow a human being to come to harm
2. A robot must obey the orders given to it by human beings, except where such orders would conflict with the First Law
3. A robot must protect its own existence as long as such protection does not conflict with the First or Second Laws.

which had been adapted to “artificial beings” by Zhou et al. (2020). In which it defines that the user should know it is talking to a machine, it should not breach the human ethics and moral standards, nor should it impose its own principles, values, or opinions on a human.

Using these rules as the guideline for all AI would only serve humanity, though the problem of enforcing them on a global scale, making sure that these rules cannot be broken is a problem to solve.

4. Conclusion

In this paper, we have shown some of the many different application of AI that exists currently. Though there exist lots of applications of AI, we can expect that a significantly higher level of integration into everyday tools is likely to happen. This is not to say that it is bad, it makes doing what you want easier. An example is Google translate, it has become easier to figure out what a sentence means without having to look up singular words until the sentence has become translated. We can also expect that the job market might change, this is not a bad thing, as AI can be classified as a tool rather than a replacement.

Future work and research could be done within the following fields:

• Testing the application of Nvidia’s GauGAN on helping people with disability create unique arts and making their life more enjoyable.
• User enjoyment of longform conversations with personalized AI, and how that affects mental health.
• Use of the GPT-3 model to generate a research assistant for easier summarizing and gaining overview of papers.
• Study helper for students.

Footnotes

[1] Black box is where AI produces insights based on a data set, but the end-user doesn’t know how (The Difference Between White Box and Black Box AI, 2021).
[2] Direct translation of this text is: "but for blacks", which would not be an accurate translation but rather a misinterpretation.
[3] Both the “bear claw” and the “croissant” refers to a pastry.
[4] A Troll is a person who intentionally antagonizes others online by posting inflammatory, irrelevant, or offensive comments or other disruptive content.
[5] Trolling, the act of leaving an insulting message on the internet in order to annoy someone. See [4] and Cambridge Dictionary (n.d.) Trolling
[6] https://openai.com/five/
[7] Dota 2 is a multiplayer online battle arena video game developed and published by Valve, in which two teams of five compete against each other.
[8] https://deepmind.com/blog/article/AlphaStar-Grandmaster-level-in-StarCraft-II-using-multi-agent-reinforcement-learning
[9] StarCraft 2 is a real-time strategy game by Blizzard Entertainment, in which one can play against other players alone or in teams, ranging from 1v1 to 4v4.

Support Me

Want to support my work, consider supporting me through either of these ways.

NTNUI is the Norwegian University of Science and Technology's sports association and has been responsible for the university's sports activities for over 100 years. NTNUI has become the Norway's largest and most versatile sports association with over 14,000 members. Making it one of the most visited and used website on NTNU (not counting anything directly related to the university)

CLIENT: NTNUI

DURATION: 21.09.2020 - 22.03.2021

MY ROLE(s): Designer & Researcher

Summary

This work has been done slowly over the span of 6 months, being worked on in my spare time. The completed design was presented to the board members of NTNUI and they were quite interested in having someone build it as designed.

Screenshots

Figma Design file

So you decided to try installing Ghost CMS on a Debian based system. And like me, you could not understand why it didn't work right out of the box. Here is something I did to make it work on mine.

While not officially supported, the things done in this short post presented here worked for me, so I hope it works for you too.

Before you Begin

Ensure that your system is up to date and have required system tools:

sudo apt update && sudo apt upgrade
sudo apt install build-essential

This is just so we don't run into any problems during build time.

Installing MariaDB

Now, you might think you can just install MariaDB through apt "mariadb-server", this will in fact give you the wrong version and ghost will not like working with that version. (Guess who did that, and had to go through the fun process of uninstalling it)

1. First, install the required tools to makes sure it works

sudo apt -y install software-properties-common dirmngr

2.  Next we need to add MariaDB 10.4 repository and Import GPG key into our system. So run the following command. Don't worry, I'm not stealing your server, and this is the official mirror for Maria. (See this website for the official repo).
Note: You could install the 10.5 version, but 10.4 worked for me, and I'd rather not have to reinstall it again. I might update this in the future, if I find that it worked.

sudo apt-key adv --recv-keys --keyserver keyserver.ubuntu.com 0xF1656F24C74CD1D8
sudo add-apt-repository 'deb [arch=amd64,i386,ppc64el] http://mirror.zol.co.zw/mariadb/repo/10.4/debian stretch main'

3.  Now, after this is added, run this command to actually install MariaDB

sudo apt update && sudo apt install mariadb-server mariadb-client

If prompted to set the root password, just write the password you want to use for the root user. If you are hosting it on somewhere not on your own local computer, DON'T leave it blank, and don't use passwords such as "password", "12345", etc.

If you didn't get a prompt to set the password, don't worry, we can set it later. Instead, lets check if MariaDB has started by running:

sudo  systemctl status mysql

You can also attempt to log in by writing either of these lines

mysql -u root -p
sudo mysql -p

If you didn't get a password prompt, you can just write either of these lines

sudo mysql

If everything works it should show up as something like this:

Welcome to the MariaDB monitor.  Commands end with ; or \g.
Your MariaDB connection id is 10
Server version: 10.4.6-MariaDB-1:10.4.6+maria~stretch mariadb.org binary distribution

Copyright (c) 2000, 2018, Oracle, MariaDB Corporation Ab and others.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

Note the server version: 10.4.6-MariaDB-1, this is one that works with GhostCMS. Another way of checking the version, write the following in the terminal:

SELECT VERSION();

This will show something like this:

+-------------------------------------------+
| VERSION()                                 |
+-------------------------------------------+
| 10.4.6-MariaDB-1:10.4.6+maria~stretch     |
+-------------------------------------------+
1 row in set (0.001 sec)
MariaDB [(none)]> 

If you DIDN'T get a prompt to set a password after installing MariaDB, if you already have set the password, skip this step.

While still logged into the MariaDB Server, type these lines. Change 'password' to whatever you want it to be. If you have other users or hosting on a separate server, change the 'root@localhost' to what you need it to be.

SET old_passwords=0;
ALTER USER root@localhost IDENTIFIED BY 'password';

Now, click CTRL+C or type QUIT to quit the connection to the SQL. If everything works without problems, you can continue onto the next step

Install and Configure Ghost

Now after you've done all that, you can follow the ghost setup as usual. You can even follow along some more standard guides like the following.

How to Install Ghost CMS on Debian 10

Easily publish your own professional-looking blog using Ghost on your Linode running Debian 10.

Linode Guides & Tutorials

Opposite to Linode's guide to configuring it, you should select "no" on the SSL option, as Debian 9 doesn't have an automatic SSL setup. You need to manually do this after fixing the sub-domain config.

Fix hosting on sub-domains

Now, if you're like me, you probably want to install Ghost in a subdomain, rather than the main domain. What I found, was that it was difficult to find out exactly what you need to do for it to work. This is why I'll provide you with my config file:

server {
    listen 80;
    listen [::]:80;

    server_name your.domain.com;
    root /var/www/ghost/system/nginx-root;

    location / {
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header Host $http_host;
        proxy_pass http://127.0.0.1:2369; # alternativly you can use http://localhost:2369
        
    }

    location ~ /.well-known {
        allow all;
    }

    client_max_body_size 50m;
}

Now, when everything is done, then it should be up and running. Have fun, and send me a message if you still have problems.

PS. If you want your ghost files in another folder, you can change the root text in this line.

root /var/www/ghost/system/nginx-root;

Support Me

Want to support my work, consider supporting me through either of these ways.

Abstract

Almost all students, ranging from the age 12 to 30 and above, have to use a learning management software to receive, write, and deliver assignments. Many of these LMS's have been built many years ago, which makes them outdated and sometimes tricky to navigate without months of learning. This comes from a constant need for new functionality, leading to feature creeps popping out.
This paper explores the possibility of creating a new, simpler LMS focusing on making a better learning experience for students in K12 education. We will explore how we could make learning more fun and include gamification into the system. In this paper, we also attempt to create a design that could be considered an improvement compared to today's LMS standards and seek to define a baseline for further work to be built upon this project.

Preface

This report contains a mixture of content written by a group and individual work. Everything from section 1. Introduction to section 3. Define was initially written as a group; these chapters may contain some of the author’s personal touches. The parts written by the group will mainly focus on data, information, and analysis of the user insight. The data and information are then used to set the baseline for the design we aggregated as a group. These other authors are listed below. The latter part of the report, from section 3.3, is written individually and will only contain information, quotes, and reflections written by the main author.

Supportive authors:
Fredrik Veland
Lilian Frederique Adriana van den Bos

1. Introduction

In today's world, everybody works online and in the cloud. However, many students and teachers still miss a good Learning Management System (LMS). In this project, we will be researching issues surrounding LMS' and use those insights to design a new LMS, providing solutions to any design defaults identified.

In this project, we have interviewed users, competitor analysis of direct and surrogate competitors, and performed tests with students and teachers. Afterward, a couple of personas was created to allow the new design to be in line with a persona's needs. And in the final part, we will discuss the final design, reasons, thoughts and ideas combining them with the end design used in the presentation.

2. Methodology

This project is mainly focused around a user-centered approach, which means that the end-users of a product is what we will be focusing mostly on. We want the product to fit the user and not the other way around (Baxter et al. 2015b, p.508). The users are the people who directly use the product (Daams p. 108 unknown). The end product must be directly relevant to the user's needs. To achieve this, we will have early research into the user's tasks and needs. By doing competitor analysis and interviews, we will empathize with our end users. The start of the Design Thinking process begins, where we use the double diamond design process. Design thinking is an approach biased toward a human-centered viewpoint and continuous experimentation (Baxter et al. 2015b, p. 11). We will support our findings by analyzing gamification in the classroom and the health of students nowadays.

In the defining phase, the previously done analysis will help set up a MoSCoW, which will support decisions made in the ideation and prototype phases. In the define phase, we will also set up personas. In the ideation phase, one starts with brainstorming and similar tools to work on an idea. In the prototype phase, we will select a few ideas from the ideation phase, and these will get tested by users. After which we pick one idea and make a high-fi prototype of which will get tested.

3. Research

3.1 User Research

In this report, the LMS users are defined as both the teachers and the students. During the analysis, both secondary school and university students were interviewed. The university students were also included during the user research to allow an overall more comprehensive set of data to work with during the design process. They are also heavily reliant on LMS'.

3.1.1 Students from secondary schools and University (12-40)
Usually, at around 12 years old, people go to a secondary school in Europe until 19. Often, these students must deal daily with an LMS implemented by the school or the local regulatory body; this includes university students. During an outbreak that happened in 2020 (Covid-19), it has become common to use meeting systems that allow the teachers to perform lectures or meetings with the students. This is done by using, for example, Zoom, Teams, or other similar programs during a regular school day.

A regular student during the outbreak has to use somewhere between 2-6 different tools of communicating, depending on their school system. During most of the interviews performed, we found that many of the students found it irritating that they must switch between the various programs all the time. Some schools also did not use a set of labels standardized across all courses, and menus were sometimes complicated and irritating to navigate. This would mean that if they change school for some reason (graduate or moved) may use an entirely different system which would confuse, if not limit, their use of the said system for the time it takes to learn it.

Sometimes a school selects a system that works on a general level; for example, one student only uses the Google Suite (Docs, Sheets, Meet, classroom, and more), which made it easier to use, and they could find documents and shared data in the same system. However, tools such as Microsoft Teams are not built for lecturing but for meetings of professional nature.

We also asked what they would like to have in their system, and the most common thing they wanted was that the profile and courses could be found quickly and that navigating between the pages would be easy.

3.1.2 Teachers at secondary schools (20-60+)
The interviewed teachers often had two (or more) different LMS's they had to deal with regularly. Moreover, they were often in need of other programs to support their lectures, which they found irritating.

In one of the teachers' systems, one of the interviewees found it confusing that there are many tabs through which one must navigate to find the correct area. Both teachers also liked that students could not interfere with that system to keep it organized. One of the teachers mentioned that the problem they had with Zoom was that they needed to send a link every time they would hold a lecture.

One of the more essential factors motivating students to pay more attention to the lessons was to include games. The interviewed teachers noted that by using rewarding systems or games, like Kahoot!, Menti, or Lesson Ups, they would pay more attention to the lessons.

Conclusion:
It became clear that both teachers and students want all the different programs included in one software. Or at least reachable via one software. However, they liked the Teams and Zoom software's functions, like that they can easily share documents (teams and Google Classroom) and get breakout rooms (both teams and zoom). Secondary school teachers liked that with their LMS's the students could not interfere on their platforms. Besides, all teachers regularly use a game in class to see/get the students' attention.

3.2 Competitor analysis

This research aims to get a sense of what kind of products (LMS) are already available on the market. In this analysis, we want to get a sense of the strengths, weaknesses, functionality, USPs, user experience, and labels used in various products.

3.2.1 OnderwijsOnline for HAN University of Applied Sciences (students POV)
OnderwijsOnline is meant for everybody that is either a teacher or a student at the HAN University of Applied Sciences. At OnderwijsOnline, students can look at documents teachers have posted and upload assignments. Students can also see their assignments, find links to the "Insite" (The internal page) of the HAN, to their grades, and their schedule.

The majority of students liked the easiness of the navigation. Weaknesses are that they need to have multiple sites or programs for different goals. However, overall the students liked the easiness of the navigation. Weaknesses are that they need to have multiple sites or programs for different goals.

The students found it irritating that not all parts of the menus in OnderwijjsOnline are used, making it very confusing to navigate to find the correct page. Another program is used for schedules together with this LMS to allow users to put their schedules in their calendar.

3.2.2 SomToday (teachers POV)
SomToday is meant for secondary education, for either the teacher or the student. Teachers can add tests, grades, attendance, and schedules, but they will have to use another site (like Google Classroom/Drive) to add documents. As the teachers noted in the interview, one would need too many different websites to add info on if this were split up. They also mentioned that there is "too much going on" on this website, and you often will get lost. Therefore teachers sometimes give assignments via Google Classroom/ Drive or use mail instead of using the system provided.

Labels used (EN (NL)): Students (Leerlingen), Classes (Groepen), Staff (Personeel), Education (Onderwijs), Management (Beheer), Search for student number/ personal number or name (Zoek op li. Nr/ BSN/ naam). And some symbols like: Mail, Help, Facebook, and Log out. And a button for go to their own (teachers) page.

Submenu labels (EN (NL)): Home (Home), Personal Details (personalia), Position (Aanstelling), Account (Account), School reports like grades (Rapportages), Hand in periods (Inlever perioden), Learning tools (Leermiddelen), Leaning environment (Leeromgeving).

3.2.3 Google Classroom
“Classroom helps students and teachers organise student work, boost collaboration, and foster better communication.” (Google 2021) The core value of google classroom is that it is simple, minimalistic, and has a “form follows functions” mindset.

Students have access to almost everything a teacher has, except for some core functionality, like grading and creating new courses. What the teacher sees is most likely what the students will see, making it easy to create something that looks decent.

A pain point noted by a user of this LMS, was that at least one of the labels was not great and did not make that much sense. The three prominent labels are “Stream”, “Coursework”, and “People”. The user was struggling with the label “Stream”, what does stream mean in this context? All it does is show posts, quizzes, tests, assignments, and everything else in chronological order. This does make it easy to find specific things that have been posted recently; however, the name does not imply posts or other assignments. A more straightforward “Announcements” or similar would presumably be better suited for this task and label. Teachers have an additional “grades” link, which they can use to both view and grade students. They can also see the class average for the tests and deliveries performed. Since Classroom is a Google product, it is highly integrated into the Google Suite, allowing users not to switch to another system and interrupt workflow. Things like Docs, Slides, and other tools needed to perform the tasks are always ready to be used and help them continue focusing on their assignment.

3.2.4 ItsLearning
“ItsLearning is easy to use, saves you time and works in all levels of education.” (ItsLearning 2021). ItsLearning LMS is primarily meant for and used mainly by K12 and higher education, called high school and higher education in Norway. ItsLearning has a variety of tools and features for when it comes to communication, collaboration, Mobile learning, assessment, reflection and development, reporting, and organization tools. Over the recent years, ItsLearning has made several improvements to its UI and overall user experience and design to look how it does today. Shown in figure 8 is an example of how ItsLearning looked a couple of years ago.

Over the recent years, ItsLearning has made several improvements to its UI and overall user experience and design to look how it does today. Shown in figure 8 is an example of how ItsLearning looked a couple of years ago.

The primary navigation in ItsLearning is done using the global navigation menu at the top of the site. This menu consists of a total of 9 tabs. Most of the main tabs also consists of several sub-tabs which can be seen in figure 9. Like in the older version when needed file structures are shown in a “Menu” on the left as is shown in the image above figure 8.

ItsLearning offers several different features ranging from organization, communication tools, collaboration tools, mobile learning tools, assessment tools, reporting tools, and tools for reflection and development. Which they list in more detail on their website (ItsLearning 2021).

Teachers can create courses and sign students into them, and write and publish news and announcements regarding the course. They also have complete control over what functions and features are available to the students on their course page. Functions like organization, communication tools, collaboration tools, mobile learning tools, assessment tools, reporting tools, and reflection and development tools are available.

ItsLearning is available on mobile IOS and Android. On the mobile version (figure 10), ItsLearning uses a broad but shallow information architecture on the web/desktop version and a narrow and deep mobile version. With the mobile version being reduced and simplified to only a basic file structure. One comment often made by users of ItsLearnings web version users is the following: “ItsLearning has a lot of great functionality but it has a steep learning curve for first time users”.

3.3 Gamification in the classroom

In this analysis, we look at gamification in the classroom. Gamification is “the use of game design elements in non-game contexts” (Deterding et al. 2011). In several papers it is tested if Gamification has an impact on the grades and if student learn better because of gamification. These game elements can be: wager option, progress bar, encouraging messages, quizzes, and goals (Sanchez et al. 2020).

Sanchez et al. 2020 stated that students who completed more quizzes performed better on tests. Students who completed gamified quizzes had better scores than on their first test. However, more gamified did not make a difference. Also, the students that already had higher grades, achieved more from the gamification than lower grades students. In overall the gamification only worked for short-term assignments, and teachers should not always use the same gamification method. All these results also differ per student, since if one student gamed more than the results differed.

In the research paper of Hitchens and Tulloch (2018) was implied that the students found that the gamification is a useful technique for addressing motivation and engagement of the students. However, there were still students with a negative view towards the method. It is believed that though it can help it should not be the main focus of the way of learning. The students that participated in this study might have been biased since they study media and games studies. Based on the results presented in this paper it is suggested that although gamification can be enjoyable, the software does not have to deliver a game-like experience.

. . . Basing definitions of gamification (or games) on a set of mechanics is problematic.. . . gamification could be understood more broadly as a process in which the ‘gamifier’ is attempting to increase the likelihood of the emergence of gameful experiences by imbuing the service with affordances for that purpose (be they badges, points or more implicit cues). (Huotari and Hamari 2017)

Conclusion: gamification will help some student to get better results so it would be good to have it on the LMS. However, it should not be the only thing to help the students learn their learning material. It should only be a implicit side benefit that enhances the system rather than being focused around it.

3.4 Health of students

In a study done by Health Information (2005) about health in young people, they reported that young people aged 12-19 who feel connected to their school tend to have less anxiety and perform less risky behaviours, such as smoking and drinking alcohol, compared to those who do not feel connected to their schools.

During the pandemic year of 2020-2021, many young people had to stay at home, which could have and most likely has increased the amount of stress of young people and made them feel less connected to the school system in general. This is perhaps because everything from classes to social events had to be done online, and people could not connect the same way they did before.

The ongoing stress relating to education has demonstrated negative impact on students’ learning capacity, academic performance, education and employment attainment, sleep quality and quantity, physical health, mental health and substance use outcomes. (Pascoe et al. 2020)

As the current state of online learning is still in its growth phase, the system could, in fact, not be prepared for an all-online learning environment. Young people around the age of 10-16 are still in an unexplored social explorative phase, which was interrupted by the physical school system's shutdown. Without a system that can easily allow for online growth, socializing, and education, many students feel ostracised from reality; some are presumably even feeling unattended, abandoned, and left out.

Conclusion: Our goal should be to aim for a system that allows the young students to feel more connected to their school and classmates.

4. Define

In this section, we are defining what our problem is, what we can do to solve it and what we need to do. We are also showing what type of persona we are working with.

4.1 Problem statement

As a result of the analysis made the problem to solve is: “How can we provide a good Learning Management System, with all the software a student and a teacher need to have a good online learning/teaching experience?”

To solve this, we structured a MoSCoW. MoSCoW is a method that allows the team to prioritize the different features that they will work on. Features are then categorized into “Must have”, “Should have”, “Could have”, or “Would like but won‘t get”. This allows us to get a clear hierarchy of what needs to be implemented and what is not feasible to include within the current constraints (Digital Society School 2021).

4.2 Personas

Personas are created to get an idea of a “typical” user (Baxter et al. 2015a). Persona’s are created because it is sometimes difficult to connect with an abstract description of something. It will also allow the team to keep the focus on these specific users. The following persona’s were created based on our research.

5. Results

During the initial part of the research, it was found that a majority of students use many different tools to communicate. One of the most common tools used was Google Classroom and Onderwijs Online, each with their pain points.

One of the critical problems mentioned was that there were too many tabs and led to it being confusing, requiring the students to have to spend more time than necessary finding an assignment or the information they needed.

As we were mostly using children as our basis for gathering insight, we will not be able to share exactly what information was gathered.

5.1 Lo-Fi iterations and design ideas

This section contains some of the Lo-Fi iterations that was used to create the more fledged out design.

5.1.1 Lo-Fi Iteration 1

The top navigation works well on Google Classroom because the LMS is part of a more extensive overarching system that integrates calendars, documents, files, chat, and many more functions into this system.

For this system, we would need a more extensive amount of links, as many of the functions available in the Google Suite is not available to us. That would mean that since the top navigation does not allow for more than six links. The maximum of six links is based on limited space available in a horizontal orientation and the space needed to separate two links from each other.

Having horizontal navigation works well if one has many sub-pages like a marketplace such as ebay has. One could more easily categorize the information in a larger submenu with more categories inside it. Which is the positive side of this, however, this is also a detriment for any smaller websites (such as an LMS), as there is not enough content to make it usable.

5.1.2 Lo-Fi Iteration 2

The design is still clunky, with too much going on on the screen at the same time. There was also the problem of it feeling overwhelming, which meant that not enough spacing was used. Designing a product that is usable for a younger audience, there were a couple of problems noted. Mainly using space and removing unnecessary information on the screen is essential.

Though Google Classroom does not use this design, it also does have less functionality built directly into the system. For example, one cannot directly view their files in the system, and one would have to visit a separate webpage to access them. We would want the student focused on the main content rather than the entire page, so minimizing the amount of information needs to be of priority, and more space was needed.

A part that had to be improved was the size of the sidebar. In fig 15, it was found that the text could become too long, depending on language, and that could make the text wrap in an undesired way.

Why choose a sidebar navigation instead of top?
Because the amount of flexibility available to the system operator, allowing us to expand the uses for more functionality rather than being limited to the 3-6 links available in a top navigation without going into sub-menus.

5.1.3 Grid Design

It should also be noted that in hindsight, the amount of spacing using between the boxes was too large and would be better if closer, which is why a second iteration was created to suit an even smaller spacing as seen in figure 17 below.

In comparison, figure 16 and figure 17 are quite similar in how they function. The main reason they are quite different is how the information within them is perceived; this is done by “using varying amounts of whitespace to either unite or separate elements is key to communicating meaningful groupings” (Harley 2020).

We could classify the grid-based layout as one of the more critical design choices in this design was that it was of utmost importance that it had a functional framework rather than a finished design. The framework would lay the foundations for how this system developer could implement and further extend it within these boundaries. Take for example the figure 18, which was implemented in fig 27.

5.1.4 Hi-Fi iteration design

5.2 Prototype

One of the parts that were of most interest, was the ability to round the corners, making them appear more playful. Not all parts have the same roundness in them, as seen in figure 20. This was by choice, as the option to hide the top navigation could help the students personalize the content to fit them even more.

6. Discussion and reflection

In this section, we will discuss the reasons behind design choices and some of the problems faced.

The main problem faced in designing a new LMS is that the project's scope could be considered too broad. It was an enormous undertaking to design a completely new system from the ground up based on just a limited dataset we produced. Though it should be stated that LMS' is used in most schools in some form or another, we felt that this was something we could attempt. We based this project on our frustrations with the current system used by NTNU, which has proven to be both irritating and disorienting. At the start of the project, there was also an assumption that it would be similar for the younger generations.

As one would expect of such an enormous undertaking, we were a bit short on the information necessary to create a well-functioning, adaptable and testable design. However, this is not because of a lack of trying.

Another problem faced was that the information gathered was too meager and could only serve as a basic set of information to help lead us in a direction at the start. With such a tiny sample size, the information we gathered would only benefit us by providing some verification to our initial assumptions about current LMS' and would not aid in further work.

6.1 Grid-based design

One of the major designing points is the grid system used to design all design. By designing with a heavy grid influence, the design might look a bit cleaner than if we were to use less structured ways. It also helps to utilize as much space as possible, without having it look cramped. The flaw that comes with it is that we cannot utilize other design ideas and flowing design techniques.

6.2 Designing for children

When designing for children, we have to consider that these children often have a minimal attention span, which means that we have to think about limiting the brain capacity needed to do a task. Having things become too hard would make the user not enjoy using the service and could become confused.

An article written by BBC News (2002) stated that most internet users spend less than one minute on the average website. As this article is written in the year 2002, and we know that there has been an increasingly large amount of websites, content, entertainment, we assume that the attention span has dropped even more than when this article was written. One of the key points is to make content more engaging and easy to use is more important than making it extensive and customizable.

In a paper by Morschheuser et al. (2018) they reported that “Various studies report positive psychological and behavioral outcomes of using gamification, for in stances on motivation, social interaction and performance”. Having game-like elements might help the students participate; however, having too many of them might make it feel forced. For example, one could add a point gathering system, but if not well built and used correctly by the teachers, it does not help the students get motivated, but instead become less motivated based on that fact. This will, not only decrease the learning ability, but also decrease the value of the point system and lead to more problems than it solves.

As stated earlier, children are more susceptible to a gamified system and could have an increased learning outcome; however, this is only a speculation at this point. We know that for a fact, gamified systems allow students to learn a subject more efficiently; this also means that a system that is wrongly built would lessen the effect of the school overall.

6.3 Multi-user design

One of the more significant problems that teachers noted was that they did not see what the students saw all the time. We noted that to see what the students were seeing, they had to click on a special button built to see this side of the website. This was a less-used function, and that was something we would like to avoid. This is why the design is meant to function for both student and teacher and only give the teacher a small additional function to add new content or edit previously added.

6.4 Fonts, icons and color

In this section we'll go into detail about the different fonts used in the prototype, the color choices and why these icons were chosen.

6.4.1 Typography

The choice of font was based on a preconception that at least half the users would have access to an Apple device, so having something seemingly familiar to this would be preferable. People working on laptops running either Linux, Windows, or Chrome OS would have many different fonts available, making it difficult to adjust the design.

Therefore, the font of choice became, therefore SF Pro from Apple to start with. However, this design, not being an Apple product, making the use of this font not allowed for this specific purpose without explicit permission by Apple itself or is focusing on iOS related content. There was an attempt to find a font that worked on smaller font sizes without looking disfigured, deformed, or otherwise missing the contrast required.

2. Permitted License Uses and Restrictions.
A. Limited License. Subject to the terms of this License, you may use the Apple Font solely for creating mock-ups of user interfaces to be used in software products running on Apple’s iOS or OS X operating systems, as applicable. The foregoing right includes the right to show the Apple Font in screen shots, images, mock-ups or other depictions, digital and/or print, of such software products running solely on iOS or OS X. (Apple 2021)

This lead to the finding of the Inter typeface family, which is quite similar to the SF Pro family. As stated on Inter’s website, it is a typeface carefully crafted & designed for computer screens. And features a tall x-height to aid in readability of mixed-case and lower-case text (Inter font family 2021).

One of the fonts' requirements was that it had to be easy to read, for both small screens and large. It also had to be a pretty typeface.

Though most of the pages have the same font, there is a couple of exceptions. These exceptions are mainly focused on writing documents and files. It was necessary to have a font that looks good and functions exceptionally well on screens and printed paper. Though there is not much scientific evidence in favor of having serif fonts on paper, it is often just used as styling. Though because of conventions, it is by far simpler to pick a serif typeface than a sans-serif font for printed works.

In the process of creating a file viewer, there was a question of extensiveness that was raised. How much freedom should children have in selecting fonts, colors, and other options when working on a document? Would that affect the teacher's ability to read the final file?

In hindsight, a better font for reading on screens than Adobe Garamond Pro should have been chosen and only been the font given to the teacher. A sans-serif font would perhaps be better for writing texts, as it is easier to read this on a screen. This, of course, depends on the screen size and pixel density, as it is essential to choose fonts designed to look good in both print and on screens, as we do not know where the user will use the font.

It was decided that rather than having a fully-fledged word processor, a minimal processor was necessary. Giving the students the bare necessary word designing options for an assignment allows us to have a standardized set of projects delivered to the teacher on the final delivery. Which would make reading and grading easier, as the document will look the same, and the contents would be the main focus.

It could be argued that this is too limiting in choices; however, without a valid and practical reason to have any more, one should not add more options than necessary.

Having a feature-rich interface can make navigation difficult to learn and overly complex (Nielsen, 2017).

6.4.2 Icons

One of the major problems facing any design is if they want to use icons or not. While it might seem like an obvious choice to use it, one would need to have a valid reason for using them. It is important when using icons that they are there as a visual aid rather than the main focus. These visual cues can be used for advanced users to find links and tools quickly.

Both of the following heuristics from Jakob Nielsen are related to the statement above.

#2: Match between system and the real world
The design should speak the users’ language. Use words, phrases, and concepts familiar to the user, rather than internal jargon. (Nielsen 2020)

#6: Recognition rather than recall
Let people recognize information in the interface, rather than having to remember (“recall”) it. (Nielsen 2020)

The iconography must make sense in terms of what they do for the user, so a carefully selected set of icons that match the design and sizing is of utmost importance. In addition to this, they need to be used in such a way that they are non-intrusive, making sure that they are not the main focus but rather accents in the holistic design.

6.4.3 Colors

Colors are the basis for most designs, it is what makes the design pretty and can help guide the user. The choices of colors were meant to be related to nature. The top 6 colors seen in figure 26 were all the base colors used for text, backgrounds, links, and other text-related items. These colors were selected from a photo of an iceberg and act as the primary colors. The top left color seen in fig 26 was created, so the main text is not purely black.

In a paper by Aleman et al. (2018), they stated that “black text on a white background overstimulates the OFF ganglion cells while white text on black background overstimulates the ON ganglion cells.” This study advises against reading black text on a white background due to the striking effects of contrast polarity.

And in a blog post by Antony (2018), he stated that high color contrast is useful for readability. Too high of color contrast, however, creates a significant disparity in light levels that affect the user’s eyes when they read.

This is also why the added dark-mode design was added, as seen in the figure 27 below. Some people might prefer having a darker color such that they do not strain their eyes too much with a lighter color. A darker color might also appear more relaxing than the lighter counterpart.

Another part of the colors, the gradients, seen at the bottom of figure 26. They were created to support the playfulness we would want to achieve with the design. Having a soft gradient playing in the background would only be there for aesthetic reasons while also supporting the playfulness of the design.

Having a background that is not white additionally assists further attracting the attention of the user to the part of the design that has a white background.

Reflecting on the gradient used in figure 28 to box in the white content, we should state that it would be too saturated for a minimalistic design like this. Furthermore, it is something that should be improved if one were to redesign this design. The background in itself is perfectly saturated, as it does not draw too much attention but is still there to enhance the design.

The stylistic choice seen in figure 28 was also the main one tested on users, in which we got the comment mentioned below in the next section.

6.5 User testing

Throughout the project, we performed user testing to get some information about uses; while we did get some information, we should state that the number of users tested on is too small, and the information we got was biased to friends and children of friends. While this does not pose a severe problem for this project, these tests' overall validity could be counted as inconclusive evidence at best. This type of user testing would not be valid for a full project, as the information gathered would be lacking.

A simple user test was performed on two children using Google Classroom as their LMS. The users tested  came  with  a  couple  of  pointers  that  could  need  improvements.   Here  is  one  positive  and one negative comment that was received during the user test.  “It’s a little bit too distracting”(Speaking of the colors around the main box), and “I liked having access to everything directly at the home page” (speaking of the navigations).

While this was not the optimal choice in terms of users for testing, because of timing and not being available to test in person, the two online were the most that could be gathered in a span of a week.

The main change that was done to the final design was to remove the gradient boxes around the main content and only have the soft gradient background, as this would be easier on the eyes and less distracting overall.  We also selected the “white” background to be pure white to contrast the gradient backdrop to a substantial degree; we also used no pure blacks because of the reason stated above.

6.6 Presented design

We found that selecting just one design as the task described would have required a more extensive period of designing for the final design that we would present. We believe this because the content would then be required to be adapted into the style of the design it was added to.

This would mean that, since the project was built as a single designer, it would require a lot of time for the other designers to adapt their method of designing content into the design prototype. Another problem that might occur is that if the designers are not familiar with the stylistic choices, one designer would have to spend additional time adjusting or editing the new parts of the design to fit within the boundaries set by the original design.

We found that creating a new design, picking only the best parts and ideas from each other, would facilitate an overall better and easier experience when designing the new design. This allows the other designers to know HOW we want the design to be without requiring extra time to design and possibly fix the design to fit correctly.

While it might seem like this is not the greatest way to do this, it would prove to be the better option, as we then had time to problems faced in the previous projects.

Though the design shown in the iterations above was mostly focused on the layout, color, and grid-based design, we built the final design to fit within the same principal design rules. Like the designs in this project, it was built to be extendable rather than provide a complete, fully functional system.

We could argue that creating the layout first rather than the content would be a terrible way of doing so.  Since the end product was supposed to be a “fully-fledged out design”, I opted to design specific parts and grids rather than the entire design.  And then, in the combined design, fill the content out.

For example, the merged design is presented in appendix C; it has elements from all the different designs.   However,  it  is  built  upon  the  same  modular  design  created  for  the  previous  iterations while also taking parts and content from the other designs.

7 Conclusion

Here we have defined the baseline design for creating a simple, fun, extensive, and engaging design. Finally, we also presented some studies.

While the presentation design (see appendix C) was built upon a more extensive information set and more content, it was only possible because of design choices and selections based on the designs provided and combined by everyone in the group.

The initial tests done on the new design showed improvements, however, it would require work to allow the design to become finalized. Additional tests should have been done.

To conclude, did we manage to create a good, well-functioning, new LMS to such a degree that it could be implemented right now? No, the amount of research done, students tested on, and the amount of work would not be sufficient to create a new LMS ready for use. However, it has laid the groundwork for it to be improved upon and could become a more extensive project later, where more tests and design should be done.

Support Me

Want to support my work, consider supporting me through either of these ways.

Bibliography

Appendix

If you want to see the final result, see this page:

reDesign: NTNUI

The completed design presented to the board members of NTNUI. They were interested in having someone create it.

VisualFoolAdmin

Overview

NTNUI is the Norwegian University of Science and Technology's sports association and has been responsible for the university's sports activities for over 100 years. NTNUI has become the Norway's largest and most versatile sports association with over 14,000 members. Making it one of the most visited and used website on NTNU (not counting anything directly related to the university)

CLIENT: NTNUI

DURATION: Ongoing (Started 21.09.2020)

MY ROLE(s): Designer & Researcher

THE PROBLEM

First of all, i will preface this by stating that this is a personal opinion, however, it is also the opinion of many students that was asked during this creation.

First and foremost, the main problem with the website is that it looks old and not maintained. It has a "theme" that is followed through on every page, sub-page and group page.

The theme was designed to be simple, perhaps fit a smaller screen (13inch or similar). The look of the design appears to be influenced by the drop-shadow trend that was used a couple of years ago, but not implemented correctly. This leads it to feels as though it was designed by someone who just recently discovered drop shadow, and has no clear guide for how it should be placed.

So the question is then: why was drop shadow used? I believe it is to differentiate between the boxes and simplify the overarching design, and is the main separation of content.

The Information Architecture

The overarching architecture is great, this is to say if you do not wish to go further than the main page, the web-store or groups. If by chance you do wish to go into any of the pages on this website, you often need to think about where you want to go. An example of this is the link "Info", it is easily accessible in the main navigation, but it do not tell you WHAT information is in this tab, we can barely see that it is a dropdown too. You could say that it is just a general element that is used to hide links from the main view.​​​​​​​

Choice of colors.

First and foremost, i don't think I've seen ANY of the colors from their design guideline used on the website (not counting hover effects).  Which is not that great to be honest. I'll admit that the colors are terrible for use in websites, as they are bright, have a high saturation and difficult to use.

The font color, no it's not great, especially since a lot of them don't meet the WCAG standards required for websites nowadays. I'll also admit that some of the colors looks to have been made for aesthetical reasons, my first and main thought after looking at some of them is that they were made to look embossed (in a sense).

If it were only to look embossed and it was done correctly, that wouldn't be a problem, however as they are now, they are not accessible and will only create problems for some users. A simple quick scan with WAVE (https://wave.webaim.org) shows us that the page has a lot of problems with contrast. Many of the colors need to be changed before it can be used.

See what I mean by not meeting WCAG standards? This is only on the main page by the way. Kindly put, this website is lacking in both usability and structure. And as many of its sub-pages tend to have a similar design, it can cause lots of problems for regular users.

It will also put people off from visiting this website.

State of art

Navigation

The main navigation of this page is cluttered and difficult to understand for first-time users. It would make most people disoriented by how many links there are, this section is where I try to define what each part of the navigation is.( Also, now you see why the color choice might pose a problem, the hover color is almost the same as the background, making it difficult to know what they are hovering over. ) Color also changes on different browsers.

Nyheter / News

This page contains, as the name implies, "news" and other posts. This is ok if there were a lot of new posts every so often, however there seems to be only 1-3 posts per month. Personally I am not sure why the page “news” is added to the navigation area, yes it can be useful to have, however, most people would only probably find the first 3 or 4 articles interesting to them. The rest would probably just be noise and unrelated information. Having the news placed on the main page, showing the top 3-6 articles, and underneath linking to more news would probably cause less confusion to the regular user. Removing that from the navbar is priority and would make more space available for other things that might be more useful.

Info

The "info" category; a difficult to understand term. What does info mean, does it mean info about this page? About NTNUI? The board? General information about how to and renting football fields? Projects done? Media archive? Information to the volunteers at NTNUI?

If you answered yes to all of those, then you got the "Info" category. It seems to be a multifunctional, "don't know where to put it? Just put it under info" category. This makes it difficult to understand what info mean, and you cannot just click on the info link to get to a page where it explains everything. No, you must manually enter each link in the dropdown menu.

Some of these could have been placed under a "Help & Support" category, which could help the user navigate easier. Both FAQ and For representatives (For Tillitsvalgte) could have been made into a single page, both is a FAQ related page, however one is more leaning towards regular users and one is towards representatives. The main board (Hovedstyret) and About NTNUI (Om NTNUI) could have been placed under a single page. This would remove at least two pages and making it easier to navigate in general. 

Next is the File archive (filarkiv), which I personally thought meant images, and other files related directly to public use. However, this was not the case, this link redirects me to a Google Drive containing, you guessed it, NOT images, but documents and the meeting minutes. Perhaps having it open in a new tab, and showing that it is an external link might be required.

Arrangementer / EventsThe events (Arrangementer) page is a collection of several sub-categories of activities. This page seems to function as a mostly FAQ and calendar page. Why it is split into these 4 categories I am not sure of, as they seem to use the same calendar, and could probably have been on a single page. As some of them seem to have a set of FAQ and information placed in the page, that information could have been moved and placed in a separate page linked to in that single page.The idea behind doing it like that, is removing clutter and making it easier to navigate. The links to the FAQ could be placed in a sitemap on in the footer for easier access later and instead have just a single page for all those, including the calendar.

The Footer

Let's just come out and say it, the footer is lacking. YES there is one, however it is just a "created by" and some links footer. Since this website is actually quite large, I personally would prefer that they have as many links as possible in the footer, split 50/50 between links and contact information. This is to make it easier for professional people, sponsors and others to find the information they need quickly.