Joakim Sjöquist,
josj1701@student.miun.se
Type of Document – Computer Engineering BA (C), Final Project Main field of study: Computer Engineering
Credits: 15 hp
Semester, year: Spring, 2020
Supervisor: Dr. Ulf Jennehag, ulf.jennehag@miun.se Examiner: Jan-Erik Jonsson, jan-erik.jonsson@miun.se Degree programme: Computer Engineering, 180 credits
Abstract
The purpose of this study was to create a testing-platform that mea- sures the impact of typographic effects on web pages. This study chose to focus on highlighted text (text with high contrast background- color) as a typographic tool. The platform is a website, consisting of three (3) pages; (1) the first gathers test user information; (2) the sec- ond (subject-section) records time read and applies an authentication function; (3) the final page provides a multiple-choice questionnaire that records time tested, test score with same authentication method as page two. To test the platform, forty-nine participants were gathered, twenty-five participants (named Group Highlight Text) performed the test with highlight effects turned on and visible in page two (2), the remaining twenty-four (named Group Regular Text) read same page with no effects toggled or visible. Both groups were tested on page three (3) with six questions. The testing-platform fulfilled all expected requirements, with some sections requiring further development. The participation test data revealed some interesting results that could be analyzed further with assistance from social science research. In con- clusion, the test platform successfully recorded viable data that could be used in many fields, but will need additional technical work before being adopted in real-world applications. Further study could be im- plemented in collaboration with researchers from the social sciences to analyze the effects of different typographic effects. Additionally, cre- ate platforms to extract, organize and visualize gathered data would be advantageous.
Keywords: typography, text-background color, typographic effects , test platform, user interface, user experience
Acknowledgements
I want to thank my Jan-Erik Johansson at Mid Sweden University, who has provided guidance and assistance when making this study.
I want to thank Per Hellström and Johan Sundberg at Dewire Consul- tants AB, who has provided assistance in terms of the website’s con- struction and API creation.
Additional help came from Anders Strömberg, student at Mid Sweden University, who offered to host the API on his personal domain.
Acknowledgements ii
Terminology vi
1 Introduction 1
1.1 Background and problem motivation . . . 1
1.2 Overall aim . . . 1
1.3 Scope . . . 2
1.4 Concrete and verifiable goals . . . 2
1.5 Outline . . . 2
2 Theory 3 2.1 Typography . . . 3
2.2 Technical . . . 3
2.2.1 JavaScript . . . 3
2.2.2 DOM . . . 3
2.2.3 React JS . . . 4
2.2.4 Node JS . . . 4
2.2.5 NodeJS Libraries . . . 4
2.2.6 Postman . . . 5
2.2.7 Netlify . . . 5
2.2.8 GitHub . . . 5
2.3 Mathematical Equations . . . 6
3 Related Work 7 4 Method 8 4.1 Typographic Effects . . . 8
4.1.1 Highlight Effect . . . 8
4.2 Testing-platform . . . 11
4.3 Measuring Impact . . . 13
4.4 Participants . . . 13
4.5 Collecting data . . . 13
5 Construction 14 5.1 Security . . . 15
5.2 Front End . . . 16
5.2.1 Highlight Effect . . . 17
5.2.2 Information Form page . . . 18
5.2.3 Text Paragraph page . . . 19
5.2.4 Test page . . . 21
5.2.5 Timestamps and timers . . . 22
5.2.6 Test Score . . . 22
5.3 Back End . . . 23
5.3.1 API and NodeJS . . . 23
5.3.2 Database . . . 24
5.4 Assembly . . . 26
5.4.1 Front End Hosting . . . 26
5.4.2 Back End Hosting . . . 27
6 Results 29 6.1 Test platform . . . 30
6.2 Results from platform testing . . . 30
6.2.1 Timing . . . 30
6.2.2 Test Score . . . 33
6.2.3 Timing and Test Score . . . 38
6.2.4 Participants . . . 44
7 Discussion 46
7.1 Cheating Prevention . . . 46
7.2 Recording Time Read and Tested . . . 46
7.3 Results from Participation . . . 46
7.3.1 Test Scores . . . 46
7.3.2 Timing . . . 47
7.4 Ethics . . . 47
7.5 Future Studies . . . 47
7.6 Conclusion . . . 48
Terminology
API Application Protocol Interface
DB Database
JS JavaScript
HLE Highlight Effect TSU Test Subject
GRP-HLE Group with highlighted text GRP-REG Group with regular text GUI Graphical User Interface MCQ Multiple Choice Questions
1 Introduction
1.1 Background and problem motivation
My partner and my closest friends both suffer from Dyslexia, a condi- tion that makes it difficult for the affected to read and write [1].
In addition to dyslexia, my partner lives with ADHD; a condition that often results in a lack of focus and attention[2]. This disadvantage of lacking attention is something I can relate to myself and has - to a de- gree - hindered my educational progress. Fortunately, there are educa- tional and streaming platforms that has served as assistance: Youtube, Coursera, and Udemy to mention a few. From a personal perspective, these platforms have had great impact, yet they are still novel (Youtube founded 2005, Udemy 2010) and many times I have found that the content on these platforms are not sufficient to thoroughly grasp and understand an academic subject; resulting in additional reading. Un- fortunately, I have found myself reluctant to reading larger paragraphs of texts, especially on the web as a result of my short attention span; a problem many others share [3].
My motivation is, therefore, to try and build upon the field of user experience, interface and education,with a focus on the web.
1.2 Overall aim
The study’s aim is to build a testing platform that can measure impact of typographic effects on web pages. In addition, the study has the ambition to advance upon the field of user experience and interface by adding a novel feature; potentially resulting in widespread adoption onto the web as a result of a successful study.
1.3 Scope
The study will focus on the amount of reading comprehension when reading paragraphs of text with assistance of a highlight effect (HLE) function.
The study will not focus on the text’s content, highlighted or not, but rather how much of the content is absorbed as a result of the HLE itself.
1.4 Concrete and verifiable goals
The study has the ambition to fulfill following requirements for the platform.
• Implement authentication methods to prevent cheating
• Record Test Score
• Record Time Tested
• Record Time Read
• Test the platform and analyze the data.
1.5 Outline
Chapter 2 describes the theory behind the study. Chapter 3, mentions related works from a similar study. Chapter 4, describes and discusses the methods used to compile the study. Chapter 5, describes the details of creating the testing platform. Chapter 6, presents the results of the testing platform as well as the results from participation. Chapter 7,
2 Theory
Before committing to the study, some fields and prior knowledge is necessary to understand the chapters fully.
2.1 Typography
Typography is the art, technique and study of type arrangement in such a way that text becomes more appealing, readable, and aesthetic for the reader.[4]
2.2 Technical
As the study is presented on the web in form of a website, a large sec- tion of this study is technical. Below are some components the reader should be familiar with in order to fully understand the study.
2.2.1 JavaScript
JavaScript [5] (JS) is a dynamic prototype based script language that focuses mainly on web applications, and runs for most parts on the client side (rather than server side). It is often used in combination with HTML-pages, and is very useful when creating websites with user interaction. Since it works with web browsers, it also communi- cates with the Document Object Model(DOM).
2.2.2 DOM
Document Object Model [6] (DOM), is a language independent frame- work which provides the ability dynamically read, update, format and
structure a web document’s content, with a tree like structure.
2.2.3 React JS
React JS [7], as the name suggests, is a JavaScript framework. React is built up mainly with components that renders to a Virtual DOM (VDOM) before rendering to the original DOM. Unlike traditional JavaScript that re-renders the entire page on each activity, React’s VDOM only updates the component or element that is subject to change - this re- sults in very fast and efficient web applications.
2.2.4 Node JS
Node JS, is a JavaScript runtime built to run server-side application with JavaScript code. [8]
2.2.5 NodeJS Libraries
Express "Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications." A package that simplifies hosting a NodeJS server and API.[9]
Mongoose "Mongoose provides a straight-forward, schema-based solution to model your application data". Eases schema-setup and re- duces boilerplate for MongoDB connections.[10]
Nodemon "Nodemon is a utility that will monitor for any changes in your source and automatically restart your server." [11]
2.2.6 Postman
Postman is a API-testing service, that lets you send any request to a server in order to test its functionality.[12]
2.2.7 Netlify
Netlify is a hosting service that offers serverless backend services for web applications [13]. Netlify’s hosting platform has the ability to syn- chronize with specific GitHub repositories, making it very useful in this project.
2.2.8 GitHub
GitHub is a web hotel that uses the version handler "Git", that makes it possible to share, store and copy "repositories" (projects) with anyone without the use of a central archive. [14]
2.3 Mathematical Equations
These are the mathematical formulas that has been used to calculate the results.
Definitions:
• Tr = Time Read by age group
• Tt = Time Tested by age group
• T = Tr + Tt, Total Time
• avg = Average score by age group
Score per Minute
SPM = avg
T (1)
Preparation Score
SPrep= avg
Tr (2)
Performance Score
SPer f = avg
Tt (3)
3 Related Work
R.H. Hall, P. Hanna
Richard H. Hall and Patrick Hanna has done an extensive study in
"The impact of web page text-background colour combinations on read- ability, retention, aesthetics and behavioural intention" [15], where they study texts with different colored backgrounds and its effect on read- ability. The study found that colours with a greater contrast ratio led to greater readability and chromatic colours (blue, green, etc) were pre- ferred over non-chromatic colours (white, black, greys) in terms of aes- thetics and intention of purchase, among other findings. These two findings in particular served as great tools in this study.
4 Method
In order to create a suitable testing-platform to measure impact of ty- pographic effects, a few definitions has to be addressed.
4.1 Typographic Effects
There are many different typographic effects that can be applied to text, including bold text, italic text, underscored text, different font, and many others.
For this study we will focus on a text-colored background (or highlight effect).
4.1.1 Highlight Effect
The HLE is most crucial in the study. It needed to be clear, intuitive and functional. The HLE’s first draft was quickly scrapped and replaced with a much more familiar look.
Motivation of appearance
The earliest version of HLE’s appearance was different from the fi- nal result. Text not highlighted appeared in a lower opacity, whilst the highlighted sections appeared with a full opacity.(See figure 1) The decision to scrap this idea came early in the study, as it was clear that this version gave the highlighted information an unfair advantage by limiting the TSU’s ability to see the whole text, rather than providing a tool of assistance; risking altering the test results based on visual abil- ity, rather than reading comprehension.
The second and final result took much inspiration from R.H. Hall P.
Hanna, who found that "Colours with greater contrast ratio generally lead to greater readability, ... preferred colours (i.e., blues and chro- matic colours) led to higher ratings of aesthetic quality and intention to purchase" (Hall, 2004) . The result was close mimic to the traditional highlight marker, with its familiar chromatic neon-green colour. This gave the HLE an element of recognition, since the color falls into the category of being " more likely to lead the viewer to see the site as more visually pleasing and stimulating"(Hall, 2004), thus making the effect highly intuitive, less likely to be misinterpreted and an evident choice for the effect’s appearance. See figure: 2.
Figure 1: First draft of the highlighted text
Figure 2: Final design of the highlighted text
4.2 Testing-platform
To make a suitable platform to test impact of a highlight effect on web pages, it is important to record suitable measurements that can later be applied in analysis.
The result is a website, consisting of three pages. The first, offers an information form that requires the user to insert their age and gender (See figure: 7). The second, is a “subject” page that consists of a five- paragraph text of a given subject, recording timestamps and activity for analysis together with authentication. (See figure: 8) Finally, a test page, that tests the participants reading comprehension, with similar functionality as the previous subject page. (See figure: 10)
Text Subject
The text subject follows the guidelines of designing readability com- prehension tests from Birmingham University. As mentioned in "De- signing a Reading Comprehension Test - University of Birmingham."
[16], choosing a primary purpose and focus of the reading comprehen- sion test is most crucial. The purpose, have been to measure reading comprehension in relation to the text as a whole, but with a main focus on sections which have been highlighted.
To minimize the risk of prior knowledge, the chosen subject is a mix of fabricated and factual events. However, all dates, names and national- ities have been exchanged, resulting in a completely fictional text but with some believable features.
The choice of what to highlight is focused on major events of the fic- tional characters life in such a way that the gist of the text is compre- hended without having to read the entire text. [17]
Test
The test consists of a six multiple-choice questions (MCQ), four of which have both answer and question highlighted in the subject sec- tion, one having only answer highlighted but not question, and one having neither answer nor question highlighted. The test is estimated to take no more than 10 minutes, and is not restricted to any time limit.
Scoring will be one point for each correct answer.
4.3 Measuring Impact
In order to measure the typographic tool’s impact, comparisons have to be made. The test-platform’s page two (subject page) has there- fore two different appearances, the first contains the typographic tool, and the second does not. See figure 8: Subject Page highlighted and 9: Subject Page regular. To test the platforms two pages, participants were gathered.
4.4 Participants
The study managed to gather 49 participants, divided into two differ- ent subgroups; the first, Group 1(GRP-HLE) 25 participants, navigated and completed the website’s tasks with the highlight effect visible and turned on.
The other, Group 2(GRP-REG) 24 participants, did the same without the highlight effect being visible or turned on.
4.5 Collecting data
The collecting of data is done through listening for activity and record- ing timestamps, implemented on the website.
5 Construction
This chapter has been divided into four subsections, each representing a field tackled in this study. The fields are: Security - which shows the authentication process for a test subject that visits the website.
Front end - which describes the effect and website’s visual appear- ance, Graphical User Interface(GUI), navigation, gathering of data and intuitiveness. Back end - views the behind-the-scenes of the website, including the Application Protocol Interface(API), Database(DB), and communication. Assembly - which covers the mounting and hosting of each component. See figure: 3 for an overview of components and their connections.
Figure 3: Overview of connections and components
5.1 Security
As with all types of tests including human participants, minimizing the risk of cheating is a subject of high importance. Measures to pre- vent cheating was therefore implemented. If the testSubject from the information-page had not been received to the Text Paragraph page or the Test Page, the participant would be instantly redirected back to the starting page. This made it impossible to return to the Text Paragraph page once located on the Test Page. Additionally, all types of page- refreshes also redirects back to Intro Page, and so removing the option of having multiple browser windows open. See figure 4 for a simple visualisation.
Figure 4: Overview of the authentication process
5.2 Front End
The Front End-section has been -in large- divided such that each of the website’s pages are discussed as a chapter.
Figure 5: Front End components
5.2.1 Highlight Effect
Figure 6: Design of the highlighted text
Implementation in ReactJS
The highlighted sections on the web page was created by making a React JS component named "hle", which takes a child (or the text to be highlighted) and returns a span element with a certain background.
’This text contains <hle>important information.</hle>’
Becomes:
’This text contains <span class="highlighted">important information.</hle>’
5.2.2 Information Form page
This page could be described as the "home"-page and it introduces the test subject (TSU) to the study with a description.
Below the description are two fields, one requiring age, the other gen- der. Once the fields are filled, a button appears that navigates to the next page.
Figure 7: Information Form Page
Creating the testSubject object
Once the user has typed in their age and selected gender, a TSU-object is created (written ’testSubject’). When the TSU clicks the "Start reading.."-button, the ’testSubject’ is sent by query parameters to the next component/page - the Text Paragraph page.
t e s t S u b j e c t : { info :{
age : n u m b e r g e n d e r : s t r i n g
} }
5.2.3 Text Paragraph page
Figure 8: Text Paragraph Page - Highlighted
Upon entry, if TSU belongs to Group HLE, he is met with a subject ti- tle and highlight is already toggled and active. The button that toggles HLE is accompanied with a label that bounces to grab attention.
Additionally, the participant is automatically met with the authentica- tion system. See 5.1 for details.
If TSU belongs to Group REG, she is met with this subject page:
Figure 9: Text Paragraph Page - Regular
Creating the read Object
This section’s object was simply named read and contains the follow- ing:
read : {
e f f e c t U s e d :{
c o u n t : number ,
t i m e _ a c t i v e _ s e c o n d s : number , t i m e _ a c t i v e _ p c t : n u m b e r
}
t i m e _ r e a d _ s e c o n d s : n u m b e r }
Communication
The Text Paragraph page handled sending information the same way as the information form-page, with parameter queries.
5.2.4 Test page
As the name suggest, TSU now receives a multiple choice question(MCQ) test, consisting of six questions. This page, just like the previous two, uses the same authentication method to make sure TSU has gone through all steps correctly. 10
Figure 10: Test Page
Test completion and API calls
Once all six questions have been answered, the "Submit"-button ap- pears. Upon activation, our second timestamp is set, calculated and added to ’test.time_tested’. Next, our testSubject object now contains all necessary components. At this stage, we make our POST call to our API and NodeJS server on /api/users, who in turn trans- lates handles the information and adds it to the Mongo Database (DB).
Once the API call has been completed, the user is notified and redi- rected to the home page.
5.2.5 Timestamps and timers
Timestamps were used extensively to measure time read and time tested. Upon arrival to the Text page, a timestamp is initiated (named time_start) and is saved in a local variable. When the TSU wants to continue to the test page, another timestamp is recorded, time_end;
finally, time_start minus time_end gives us the time spent on the page, and is added to the testSubject object as time_read. Same method is used on the test page, where the variable is named time_tested, rather than time_read.
5.2.6 Test Score
As the correct answer to each test question has been hard coded, it became a very simple task to calculate the total points on the test and on each individual question.
5.3 Back End
Figure 11: Back End components
The Back end of this project was fairly rudimentary, as it did not re- quire much complexity. The transport of data was done with a Restful State (REST) Application Protocol Interface (API), built with the help of NodeJS.
5.3.1 API and NodeJS
As the information from our Front End only consists of a single object (
’testSubject’), the API only needed to handle POST requests of such objects. The NodeJS server uses a group of ’quality-of-life’ packages to ease the creation process, see: 2.2.5
API Structure
The only request necessary to handle is the POST request from our React website.
Test subject object
We receive the test subject object and with help of Mongoose, create a UserSchema ( A User Object template ).
Once the TSU object has been passed into the schema, an ID is gener- ated, and a User object is created. Once created, it is saved to Mongo DB Atlas (Mongo DB web client); where the data can be accessed and analyzed.
5.3.2 Database
The database is Mongo Database (Mongo DB), which not only syn- chronizes well with Node JS, but also has its own servers and web client (Mongo DB Atlas) which makes it simple to navigate and mod- ify data.
NodeJS connection
When connecting to our Mongo DB server, we only have to set up a simple connection string in Node JS to the Mongo DB API in order to establish a connection. Additionally, database setup is automatically handled between NodeJS and MongoDB upon saving to the DB from Node.
Figure 12: Back End components and connection
5.4 Assembly
When each component (Front end, back end, database) is complete, there is the step of assembly. We set up the requirements for all com- ponents to work together, and we (the developer) can analyze the data received. See figure: 13
Figure 13: testSubject lifecycle
5.4.1 Front End Hosting
The hosting of the website is done with Netlify (see ref:[13]), which hosts our React JS website on its domains which synchronizes with our GitHub repository. See fig: 14
Figure 14: Front end components and connection
5.4.2 Back End Hosting
The NodeJS (API) server is hosted on on a simple web hotel, where it listens to API calls.
Figure 15: Back end components and connection
6 Results
The results have been divided into two sections: "Test Platform" and
"Results from platform testing".
6.1 Test platform
The result of the test platform is a working website that fulfill the goals from 1.4: Concrete and verifiable goals.
• Recording of Time Read
• Recording of Time Tested
• Recording of Test Score
• Recording of Individual Question Score
• Storing of Test Data
• Authentication to minimize cheating
6.2 Results from platform testing
After having 49 participants testing the platform, some sample data was gathered from the results. Following are some examples of what can be drafted from that data.
6.2.1 Timing
Time Read Time read was measured by recording the time the test subjects spent on the testing page. Below are the results from time read plotted onto a graph divided by age group. 16
Figure 16: Graph: Time Read by age group
Time Tested Time tested was measured by the same method as time read, and can be seen below. See: 17.
Figure 17: Graph: Time Tested by age group
6.2.2 Test Score
Test scores were measured by taking the average from each group. See figure: 18.
Figure 18: Average Score: Groups
Non- and semi-highlighted Questions
Question 4(Q4) , the answer was highlighted (in reading section) and question (in reading section) was not (See Figure: 19 and 20).
Figure 19: Semi Highlighted Question (1/2): Reading Section (Red color not visible on website)
Figure 19 Text:
He (Peter Stone) reached number one in the world rank- ings for the first time in June 2007 at age 21 , less than a year after turning pro. Throughout the first decade of the 21st century, Stone was the dominant force in golf.
bold textis highlighted, and is the correct answer on Q4 (fig: 20) underscore is not highlighted, and is Question 4 (fig: 20)
Figure 20: Semi Highlighted Question (2/2): Testing Section (Red color not visible on website)
Figure 20 Text:
In June 2007, what did Stone achieve for the first time?
• First PGA Tour victory.
• First place in the world rankings.
• First Grand Slam victory.
• First place in the English rankings.
bold textwas highlighted, and is the correct answer on Q4 underscore was not highlighted; and is Question 4
Question 5(Q5) , had neither question nor answer highlighted in the reading section. (See Figure: 21 and 22).
Figure 21: No Highlighted Question (1/2): Reading Section (Red and blue color not visible on website)
Figure 21 Text:
... He has been the number one player in the world for the most consecutive weeksand for the greatest total number of weeks of any golfer in history. ...
bold textwas not highlighted, and is the correct answer to Q5 (fig: 21) underscore was not highlighted, and is Question 5 (fig: 20)
Figure 22: No Highlighted Question (2/2): Testing Section (Red and blue color not visible on website)
Figure 22 Text:
Of any golfer in history, what has Stone single handily achieved?
• Ranked first in the world for most consecutive weeks.
• Youngest player to turn professional.
• First to achieve a Grand Slam career three times.
• First to win 20 World Golf Championships.
bold textis the correct answer to Q5 (fig: 21) underscore is Question 5 (fig: 22)
6.2.3 Timing and Test Score
Combining data from the timing section and test score section, led to some additional information.
Score per Minute When taking the average score from each age group divided by their total time spent on the website ( See equation 1), we get an average score per minute. See figure 23
Figure 23: Score per minute by age group
Performance Score Performance Score is the Score per Minute in relation to the time the participants spent on the testing page. Is it cal- culated by dividing average score and time tested by each age group.
See equation: 3.
Figure 24: Performance Score by age group
Preparation Score Preparation Score is the number given when an- alyzing the average score in relation to the time spent preparing (or reading). See equation 2
Figure 25: Preparation Score by age group
6.2.4 Participants
The groups ages were divided as follows:
Figure 26: Participation Age Distribution
The groups genders were divided as follows:
Figure 27: Participation Gender Distribution
Participation Discussion As seen in 27, GRP-REG has 38.8% male participation, GRP-HLE 36.7%; resulting in 75.5% of the test group consisting of men. 67.7% of the participants are between ages 21-39 and should be taken into consideration. In addition, a study of n=49 has a margin error rate of 14%.[18]
In hindsight, AG 40-49 and 50+ should have been combined into a sin- gle 40+ group, which had displayed less volatile results.
7 Discussion
Was the creation of a suitable testing-platform to measure impact of ty- pographic tools on web pages successful? Yes, but some further work should be implemented and discussed before any real world adaptions can be made.
7.1 Cheating Prevention
Security was applied and shown to be functional. However, a moti- vated test subject could find ways around the security implementa- tions. As the test subjects data is not sent until the test subject clicks on the "complete test"-button , there is no limit to how many times a test subject could do the test - this has a risk of manipulating the data.
A solution to this problem could be solved by applying cookies, and limiting test subjects to only one test.
7.2 Recording Time Read and Tested
Working with counters and timers can many times be tricky. However, the decision to modify and calculate timestamps worked as a great solution to record time read and tested.
7.3 Results from Participation
7.3.1 Test Scores
GRP-HLE scored 9.9% (or 0.4 points) better than GRP-REG overall, which is not a remarkable difference yet note-able. GRP-HLE scored
lighted and question was not, on the subject page. GRP-HLE and GRP-REG scored almost identical (2.3% better score from GRP-HLE) on question five, where neither answer nor question was highlighted on the subject page.
7.3.2 Timing
GRP-HLE spent on average 144 seconds reading, while GRP-REG spent 114 seconds. GRP-HLE finished the reading section 30 seconds slower than GRP-REG, resulting in a 26.3% decrease in reading speed. GRP- HLE had an average testing time of 62 seconds, opposed to GRP-REG’s 84 seconds - resulting in a 22 second quicker testing time from GRP- HLE than GRP-REG, or 26.2%.
7.4 Ethics
What became apparent from the results of the test participation is that there is a great question of ethics. The choice of highlighting had an alarming impact on the results of GRP-HLE’s test score as opposed to GRP-REG, and if not monitored correctly could be used for duplicity or deceit, and should be a subject for future studies.
7.5 Future Studies
This research could be extended in multiple ways. Further study could be implemented in collaboration with researchers from the social sci- ences to analyze the effects of different typographic tools; create addi- tional platforms to extract, change, organize and visualize data. The testing platform would benefit from additional security, as discussed in 7.1. Further, in relation to the test’s result, research could be done
to study if highlighted text could be helpful in situations where per- formance under pressure and performance with preparation could be useful. Additionally, studies should be done on the effect of highlight- ing choices, as mentioned in 7.4. Finally, a bug reporting system would be beneficiary.
7.6 Conclusion
In conclusion, the goal of this study was to create a testing-platform that tests typographic tools on the web. The choice of typographic tool was dictated with much help from Richard H. Hall & Patrick Hanna’s study on text-colored backgrounds with chromatic colours that pro- vided much helpful results. To measure an effect’s impact, two fac- tors needed to be introduced, a testing-platform and test subjects to test it. The platform resulted in an interactive website created with React JS, a REST-API built in NodeJS, and a database provided by MongoDB. The testing platforms’ content was constructed such that no prior knowledge of the test subject was possible; platform testing included 49 participants that read the subject section and finished the test. The results from the testing platform was divided into two parts:
the platform’s achievement in relation to expected goals, and analysis of results from the sample test. The platform managed to fulfill its re- quirements, with no knowledge of bugs or crashes. The sample test showed some interesting results and could be further analyzed with the help of researchers from the social sciences. Future studies should focus on implementation of an additional website that handles data extracted as well as have the ability to modify test questions, subject and typographic tools.
References
[1] Dyslexiforeningen. Vad är läs- och skrivsvårigheter/dyslexi? 2020.
[2] Rikförbundet Attention. ADHD. 2020.
[3] Ellie Zolfagharifard Mike Wright. “Internet is giving us shorter attention spans and worse memories, major study suggests”. In:
The Telegraph (2019).
[4] Wikipedia. Typography. 2020.
[5] Wikipedia. JavaScript. 2020.
[6] Wikipedia. Document Object Model. 2020.
[7] Wikipedia. React (web framework). 2020.
[8] Node JS. Node JS. 2020.
[9] ExpressJS. ExpressJS. 2020.
[10] MongooseJS. MongooseJS. 2020.
[11] Nodemon. Nodemon. 2020.
[12] Postman. Postman. 2020.
[13] Netlify. Netlify. 2020.
[14] GitHub. GitHub. 2020.
[15] P. Hanna R.H. Hall. “The impact of web page text-background colour combinations on readability, retention, aesthetics and be- havioural intention”. In: Taylor & Francis Group 23 (2004), pp. 183–
195.
[16] University of Birmingham. Designing a Reading Comprehension Test. 2004.
[17] Teresa Milligan. Highlighter Use Highlighting - Dunwoody College.
2020.
[18] The Survey System. Sample Size Calculator. 2020.
