NoteSpace
Note making application implementing the concept of direct manipulation
At a glance
NoteSpace explores a new approach to note-making. We have created a GUI-based desktop application that has a concurrent view for both the imported document and the workspace. We also propose that this approach to note-making has more benefits in terms of efficiency, focus, retention and effectiveness
Role
Visual Designer, Developer
Team Members
Aditi Page
Kartik Rode
Saheel Sawant
Swarada Sathe
Tools
Sketch
Node.js
Qualtrics Survey Software
Duration
Jan 2020 - Apr 2020
THE PROBLEM
Mental Model of the user does not align with the application
Various experiments have proven that note-making is most efficient and effective when written on paper.
The main advantage of note-making by writing on paper is that the important points register better with the user since this type of note-making uses embodied action.
This embodied action lacks when the user creates notes on an electronic medium.
The goal of a user, while making notes, is to summarize information in a concise manner by jotting down the important and crucial points. Using electronic means, this entire process involves either typing or copy-pasting, which is not natural to human psyche.
FOCUS STATEMENT
How might we modify the process of electronic note-making
to resemble physical note-making?
THE SOLUTION
We created a Minimum Viable Product of a note-making application using Node.js which uses a workspace to copy all the highlighted text in the adjacent window (PDF/text file).
NoteSpace implements the principle of direct manipulation to create an affordance of concurrent viewing of text and notes.
DEFINITION
What is direct manipulation?
The term direct manipulation was introduced in the early 80th [Shneiderman, 1983, 1982] when the interaction between a human and the computer started to move from conversational (e. g., command-line interfaces) to WIMP interfaces, and is still one of the basic paradigm of interface design today [Shneiderman and Plaisant, 2004]. Direct manipulation aims at making interaction more natural, intuitive, and predictable, resulting in easier to learn and use applications.
DISCOVERY
Since this was a research project, we decided to cover a literature review to understand our possible options and the solutions that are being invented and tested upon. It can be called academic competitor analysis.
During our research, we encountered few solutions that are already in place or a specific type of user and psychology papers documenting various survey upon the advantages of paper over screen and screen over the paper. We created a mind map that categorizes the information we collected during the literature review.
Mind Map of literature review
KEY INSIGHTS
1
Lack of embodied action for electronic note-making process.
The main advantage of note-making by writing on paper is that the important points register better with the user since this type of note-making uses embodied action. This embodied action lacks when the user creates notes on an electronic medium.
2
Goal of note-making (paper or screen) is retentivity and recollection.
The result of making notes must be to improve the retentivity of the important points, concepts and to be able to refer to those points easily for a quick recap in the future.
3
The principle of direct manipulation provides direct mapping to the physical world.
Using the principles of direct manipulation, one can design an easy to learn system for beginners, tasks can be made more versatile, retention of operational concepts becomes much easier, user experiences less anxiety and more confidence while using the system, and the user feels more in control of the system.
4
Application of direct manipulation has already been successful in many areas.
As we can see in the mind map, direct manipulation has been successfully implemented in VR and PDF reader for highlighting and underlining.
SIMILAR APPLICATIONS
Adobe Acrobat Reader
Adobe Acrobat Reader is probably the most widely used PDF reader. This software implemented direct manipulation in the features like multi-color highlighting, multi-color underlining and comments designed like post-it notes. It directly maps the annotation of physical page to screen.
Screenshot of Adobe Acrobat Reader
InkSeine (Microsoft Research)
InkSeine offers too many revolutionary functions that were initially difficult for us to understand. It applies direct manipulation in the most literal sense possible as it allows cutting of pdf into snapshots like newspaper clippings and annotates them to form a mood board. Though we could not implement any of the features of InkSeine, it provided us with inspiration for NoteSpace and the involved research study.
Screenshot of InkSeine as on the Microsoft research
website
USER NEEDS AND WIREFRAMES
Reducing cognitive load on the users
We established user needs based on the literature review and the competitor analysis and we started making progress to decide upon the design of our application and the research study to be conducted.
Principles of direct manipulation:
1. Continuous representation of the objects and actions of interest.
2. Rapid incremental reversible operations whose effect on the object of interest is immediately visible.
Users should be able to create notes without having to switch multiple times between screens and/or applications.
The cognitive load of copying a few lines of text from the document to a different text editor should be eliminated.
Mid-level prototype of NoteSpace
We mapped each user need with functionality for the Minumum Viable Product(MVP) to be developed.
User Needs
1.Leverage over handwritten notes
2.Create notes without switching between applications
3. Cognitive load to copy-paste lines should be eliminated.
Opportunities
1. Concurrent representation and auto-copying of selected text.
2. Implementation of a concurrent view of the document to be viewed and the notes file.
3. Employment of the functionality of auto-copying the selected text into the notes section
INITIAL SYSTEM
Pilot Study
Initially, we had decided to build a website for the note-making application. But after the pilot study, we came to the conclusion that the website is not feasible from the user's point of view.
We decided to focus on the auto-copying functionality since it was the novel feature of our application.
The pilot study was conducted using the mid-fidelity prototype and using 3 participants. The feedback that we got from the participants was:
-
The website is not desirable as the document has to be uploaded every time.
"I would rather use the PDF reader if I have to upload the document."
-
Login for accessing the notes and the document would result in inconsistencies.
"What if I don't have an internet connection? Also then the document in my computer would be useless"
SYSTEM DESIGN
We developed MVP of NoteSpace using the following technology stack:
HTML/CSS
JQuery
Front End
Javascript
Scripting
Node.JS
Electron Framework
Python
Back End
We also implemented a few basic functionalities that were instrumental for the research study.
Concurrent view of two sections:
-
One contains imported document
-
The workspace to make notes
Auto-copying of selected text that reflects concurrently in workspace
Use of multiple colors to highlight text
Deletion of text in the notes section using double-click
Exporting notes to PDF when user wants to save notes to their system
RESEARCH STUDY
A/B Testing
We decided to adopt the A/B Testing method as we wanted to determine the efficacy of our approach to the approach that has been popular in students.
Group A
Condition:
PDF Reader for imported document and Microsoft Word for Notes
#participants:
8 (All were fellow peers)
Method:
Team member's laptop
Task:
Reading comprehension from a GRE prep book and answer questions against it.
Group B
Condition:
Notespace
#participants:
8 (All were fellow peers)
Method:
Team member's laptop
Task:
Reading comprehension from a GRE prep book and answer questions against it.
STUDY DESIGN
Details of the participants involved in the study:
#
16
8 males, 8 females
Computer Science, Industrial Engineering, Mechanical Engineering
and Business Intelligence
22-25 years
The flow of the study was as follows:
During Test:
The participants were asked to read the given text and create notes as required. They were given 10 minutes to read the passage. From the GRE prep book, we knew that the text takes 8 minutes to read and solve, but additional 2 minutes were given to review the given notes.
Retentivity Test:
The participants were also asked to answer a set of 5 multiple-choice questions based on the text. This was to check the retentivity for both NoteSpace and the control condition.
Post- Questionnaire:
The participants of both the groups were also asked to fill out a post-session questionnaire.
Group A: System Usability Scale (SUS) Test
Group B: SUS Test and questions concerning the features of Note-Space that the users found useful, the ones which could be improved and other new functionalities that can be incorporated in the future.
Participant performing the study
Participant submitting the post-study questionnaire
ANALYSIS DETAILS
T- Test and System Usability Scale
Dependent Variables
Usability
-
Cognitive Load on the User
-
System Usability Scale
Effectiveness
-
Time to create notes
-
Number of colors used in highlighting
Retentivity
Retentivity Test
(GRE comprehension)
We decided to use the standard System Usability Scale test to determine the usability of NoteSpace as along with the comparison with the conventional method, we also wanted to know if the users feel comfortable using the concurrent view and if it is learnable.
We used T-test for quantitative analysis of the test since for A/B testing we had to compare only two sets of values for every factor and we felt that use of T-test was justified.
The results of the study revealed that the mean time required to read the file and create notes reduced by
21%
OTHER INSIGHTS
Users preferred NoteSpace over the combination of PDF Reader and Microsoft Word.
1
We compared the mean System Usability Scale(SUS) score for NoteSpace with that of the control method and we found that the mean score of Notespace was higher by almost 10.
(SUS score is out of 100. Notespace - 85.6 | Control method -76.2 )
Retentivity was not affected by the structure of NoteSpace.
2
The difference between the results for the retentivity test for Notespace and the control method were not statistically significant. This can be attributed to the subjective nature of retention capabilities for different individuals.
Users generally prefer multi-color highlighting.
3
From the responses of the post-session questionnaire, users generally prefer multiple colors to highlight text while making notes as the color-coding of text helps them to distinguish multiple aspects of the content like definitions, examples, etc.
CONCLUSION
Incorporation of concepts of direct manipulation helps in efficient and effective note-making
All the features implemented in NoteSpace imply that the system could provide a prompt visual representation of actions of interest and rapid incremental reversible operations.
The user evaluation study showed that the participants who used our system, NoteSpace, could perform better, make more efficient notes, and focus better.
The results of the evaluation study also showed that the system was fairly easy to learn and use.
IF WE HAD MORE TIME...
Extend NoteSpace to be used by professionals as well
We would like to extend the features as well cater to the specific needs of the professionals.
Features that can be implemented:
-
Make the notes section editable
-
Add sub-points in the notes made
-
Include images and equations in notes
Other applications:
-
Natural Language Processing: This system can also be used by an NLP model that summarizes or paraphrases the copied points. This can be significant progress in this field that can be supported by this system, noteSpace.
-
Researchers: This tool can be utilized by researchers while reading long research papers. They can utilize the functionalities of this tool to jot down important points of a research paper and have an easy reference in the future.
-
Presentation Slides: NoteSpace can be used to create bullets points for presentation slides from any text document. This can be done very quickly by the user even if the user skims the document for the important points. This system will save a lot of time in preparing slides for a presentation.