IEEE INDICON 2015 1570186227

1  
2  
3  
4  
A Web Browser Responsive to the User Interest
5  
6  
Level
7  
8  
9   Ankit Kumar, Joy Bose, Divya Bansal
10   Web Solutions
11   Samsung R&D Institute India- Bangalore
12   Bangalore, India
13   {ankit2.kumar, joy.bose}@samsung.com, [email protected]
14  
15  
16   Abstract— In this paper we present the design of a web Currently without using EEG or such sensors, the web
17   browser that is responsive to the user's interest level. The user's developer has no way of knowing which section, area or kind
18   interest level is measured via a wearable Neurosky EEG sensor of content of the web page is interesting to the user, or which
19   that gives a value of the user's attention level in real time. The web pages browsed by one or more users are better at
current scroll position is used to identify which part of the sustaining the user’s interest.
20  
webpage the user is reading currently. Combining the scroll
21   position and the user's real time attention level, we identify which
22   parts of the webpage, or which website in a list of currently open
23   websites, the user is most interested in. We then make the web
24   browser responsive to the attention level by adding the current
25   webpage to the favorites if the attention level exceeds a threshold,
26   removing a current webpage from the favorites if the attention
27   level goes below a second threshold, generate on-the-fly an
automatic index of the portions of the webpage that the user is
28   more interested in from among the currently open tabs and so on.
29   Having a responsive web browser that responds to the user's level
30   of interest or disinterest can increase the user engagement or
31   satisfaction while browsing. It can also be used to display
32   targeted ads within the interesting portions of the webpage or
33   design better web pages by giving the user interest feedback to
34   the web developer. We describe the methodology and web Fig. 1. Architecture of the proposed system that captures the attention level
browser architecture, some tests of the approach on different from the EEG sensor along with the percentage of the web page
35   browsed, and writes it to a database on the device.
websites and user interfaces for making the web browser more
36   responsive.
37   Fortunately, in recent times, commercial grade EEG
38   Keywords— EEG; mobile web browser; responsive web design sensors such as those developed by NeuroSky [3] and Emotiv
39   [4] are available that are cheap, relatively accurate and have
40   I. INTRODUCTION ready API support. The wearable EEG kits can relay the user’s
41   There has been recent interest in determining the interest current attention or concentration level and communicate this
42   of the user while reading a webpage or interacting with data via Bluetooth in real time with a smart device such as a
43   computing devices [1-2]. This information can be useful for Smartphone. Using such kits, one can determine the
marketers interested in knowing where to place advertisements concentration or interest level of the user when they are
44  
within a webpage, as well as web developers interested in reading a specific section of the web page. Using this, one can
45  
increasing user engagement with their website. Such work has make the web browser responsive to the user’s interest level in
46   real time.
47   involved using fMRI and EEG sensors to note the brain
activity when the user is interacting with the device. In this paper we present the design of a web browser that is
48  
49   Web browsers currently are not responsive to the user’s responsive to the user’s interest level, using wearable EEG
50   level of interest when reading a webpage. The webpage is a sensors to determine the attention of the user and map it to the
51   one way system where the reader is the passive consumer of section that the user is reading on the current webpage,
the content provided by the web developer. It would be useful captured via the scroll position. Fig. 1 shows the high level
52  
to have a system where the browser can gauge the user interest architecture of the system. Our implementation is integrated
53   mainly with the mobile web browser architecture; although an
54   in real time and respond to it, such as by modifying the
rendering of the web page or by automatically saving the equivalent method can be used with desktop browsers also.
55  
favorite sections or web pages based on the user’s interest The rest of the paper is organized as follows: in section 2
56   level.
57   we look at related work in the area. Section 3 introduces our
60   proposed solution using EEG to capture the current attention
61  
62  
63   978-1-4673-6540-6/15/$31.00 ©2015 IEEE
64  
65  

1
level. Section 4 gives the browser architecture, including the and map the interest level of the user with the area of
elements to capture the currently browsed section of the the webpage currently being browsed.
webpage and map it to the current attention level captured by
the EEG sensor. Section 5 proposes some user interfaces to The advantage of using such a JavaScript based
make the web browser more responsive. Section 6 covers the approach is that it can be used with any web browser
results of some experiments we performed to measure the with little or no modifications needed. However the
user’s attention level for different sections of the same web disadvantage is that it could lead to longer delays.
page and with different web pages. Section 7 concludes the • Another way is to modify the code in the web browser
paper and suggests some avenues for future work in this area. and integrate the tracking of the currently browsed
section of the web page and the EEG inputs directly
II. RELATED WORK into the browser.
There are a number of studies done to gauge the user’s
interest level while browsing a website. Some follow the The advantage is that it would be much faster.
user’s scroll position and eye gaze [12-13] to determine the In this paper we went for the approach of integrating our
time spent on different sections of the page to gauge the user’s proposed solution into the web browser code.
interest. However the time spent alone is not that reliable an
indicator of actual interest when reading the webpage, since
the user might be distracted while thinking of something else
or not understand some section of the website due to which the
time spent is longer. The EEG sensor provides the attention
level of the user and hence is more suitable.
Other measures to rank webpages or content of webpages
according to the user’s interest include having a manual
ranking for the media content or the web page content. But
here too, the manual ranking of the webpage content is prone
to manipulation and there is no direct link between the user’s
actual level of interest and the content.
EEG sensors have been used to determine the user’s
concentration or attention level in a number of different
contexts [6-9]. Approaches to track the user behavior while
reading web pages include eye gaze tracking [10] and Fig. 2. Architecture of the web browser showing various EEG related
scripting [11]. However, as discussed, such approaches do not components
necessarily cover the user’s interest while reading the page. In
this sense our proposed solution, which directly measures the A. Components of the system
attention level, is more useful. Our setup consists of the following
A number of web developers [13-14] speak of the design
• An EEG sensor (such as NeuroSky MindWave) that
principles for responsive web design for different kinds of
communicates the data to the mobile device using
devices. However they do not consider the user interest level,
Bluetooth or similar communication mechanism.
rather they concentrate on modifying the design as per device
parameters such as the display size. Adding the user interest • A tool (such as EEG Analyzer) to record the attention
level as a parameter to modify the web design would be an level in real time along with the timestamp.
important improvement in the design of web pages.
• A database to store the data. This can reside either on
In the following sections we provide the basics of our the device or on a central cloud server.
system to determine the sections of the webpage that the user
is more interested in. After that we suggest some user • A background process or script or code integrated in
interfaces to make the browser more responsive. the browser to map the attention level of the user with
the part of the website they are currently viewing,
III. PROPOSED APPROACH using the timestamp as the key. This too can reside
As mentioned earlier, in our system we track the user’s either on the device or on a central cloud server.
current attention level using a wearable EEG sensor, and track B. Modified web browser architecture
the currently browsed section of the website. These items are
The modified elements of the web browser code are as
then mapped and fed into a database which resides on the
follows:
device. Alternatively the database could reside on a
centralized cloud server. • Application level changes to insert a content script to
There are two ways to achieve this. perform the tracking

• One way could be by using JavaScript to write a • A script to receive inputs from the EEG sensor of the
browser extension using JavaScript to capture the data current attention level

2
 • A database on the device to store these mappings Average scroll percentage = ((2* Scroll offset + view port
height) / content height) * 100
Fig. 2 shows the high level architecture of the web
browser. • These values are used to calculate average percentage
of the page scrolled by the user while browsing.
• This calculated scroll percentage is saved along with
the current timestamp in the database in the mobile
device storage.
• On the basis of the timestamp, we map the scrolling
percentage of the page with the attention level
(a) obtained using EEG sensor. For this purpose, a custom
script is used that runs in the background.
In our system, we track the currently browsed section and
map it to the user’s interest level. For the tracking we used the
current percentage of the web page browsed. This gives a
range, such as 0%-12%, 12%-24% etc. We take the midpoint
value of the range (e.g. 18% for the range 12-24%) as our
(b) working point, and consider an area within a few hundred
pixels of the midpoint value as the user’s current viewing area.
This gives us a number value between 0-100 which represents
the percentage of the webpage that is currently at the center of
the user’s viewing area.
As mentioned, we are using a NeuroSky Mindwave EEG
(c) sensor. The attention level value which we get from the EEG
Fig. 3. Plot of the (a) attention level (b) meditation level (c) blink level of a sensor is also a value between 0-100.
user on the NeuroSky kit while reading a Google News article on a
mobile web browser. Fig. 3 shows the typical attention, meditation and blink
levels received from the Neurosky sensor when reading a
news article on a mobile web browser. Fig. 4 shows the logic
on the mobile device while receiving EEG inputs from the
Neurosky sensor.
By synchronizing the timestamps of the NeuroSky EEG
sensor and the script in the web browser, we can plot the
attention value together with the percentage of the current
page scrolled, at a given time. Fig. 5 illustrates the merging of
the two tables using the timestamp as the key.
In this setup, we are making a few assumptions. One is that
all the web pages are being viewed at standard resolution. We
are assuming that the default zoom factor is generally not
altered by the user. Also we assume that zooming of the web
pages if any will not alter the relative ratio of the webpage
Fig. 4. Flowchart illustrating the logic on the mobile device in response to being browsed.
inputs received from the EEG sensor

C. Calculating the scroll percentage of the web page

The algorithm used to calculate the scroll percentage has
the following steps:
• The user browses a web page in the web browser
• An API is called with value arguments i.e. scroll
offsets, content dimensions, viewport dimensions,
page scale factors etc. These values are used to get the
initial and end scrolling percentage of the browsed
page.
• The equation to calculate the average scroll
percentage is as follows:

3
Fig. 5. Illustration of the mapping of the attention level and page browsed Thus, using our wearable EEG based system, we can
percentage readings, using the timestamp as the key. This action is determine which part of the web page the user is really
performed by a background script running on the mobile device.
interested in. After collecting this data, we then proceed to
In the following section, we present the results of a few have user interfaces to make the web browser more responsive
experiments with different WebPages using the setup. to the user’s current interest level. We describe some of these
interfaces in the following section.
IV. EXPERIMENTAL RESULTS
In this section we present the results of a few experiments
performed to get the concentration level of the user while
reading different WebPages, or different sections of the same
webpage.
We used the default browser of a Samsung Galaxy 5
device, and modified the browser code to integrate the EEG
recording system. We used the EEG Analyzer tool [12] to
record the EEG attention data.
A. Measuring the concentration level for multiple users and (a)
different sections of the same webpage
We performed a test by noting the attention level of a
single user while reading different sections of the same
webpage.
For our test we took the English homepage of Wikipedia
(en.wikipedia.org) on a mobile browser, which is one of the
top 10 browsed English websites according to Alexa.
We recorded the attention or concentration level of the
user when browsing the webpage for 30 seconds, and
simultaneously we recorded the part of the page that was
being browsed, as a percentage of the whole page. We asked (b)
the user not to scroll back but only scroll to the end of the
page from the top in one direction. Fig. 6. (a) Plot of the attention level of a user Vs page scroll position (using
time as the key), while reading the Wikipedia homepage on a mobile
We saved this data in the mobile device (i.e. the web browser. The attention is highest near the middle of the page and
Smartphone to which the Neurosky kit sends EEG data via none towards the end. (b) Same plot for another user, this user has
Bluetooth), mapped the two pieces of data by using the highest attention near the middle of the page around 40% level and the
level of attention gradually tapers.
timestamp as key, and then plotted it. The frequency of
recording data for the browser tracker was 1 Hz i.e. recording
once every second. The Neurosky EEG sensor processed EEG
data (not raw EEG, whose recording frequency is 512 Hz) was
also generated at 1 Hz intervals.
The attention plot for a couple of users, when browsing the
Wikipedia homepage, is provided in Fig. 6. We can see that
both the users concentrated more around the middle of the
page; however the second user’s attention tapered gradually
towards the end while the first user made a jump in the scroll
position.
(a)
B. Concentration level for different webpages for the same
user
We then repeated the same experiment for the Indiatimes
and Yahoo homepages as well, for the same user. The results
are plotted in Fig. 7.
We can see that the Indiatimes page had highest attention
levels towards the beginning, while the Yahoo page did not.
This could be partly because of their differing layouts, with
the Indiatimes page being more of a collection of articles from
the top, while in the Yahoo page the articles come further
down.
(b)

4
Fig. 7. Plot of the attention level of a user Vs page scroll position (using time The main issues, and ways to fix them, are as follows:
as the key), while reading the (a) indiatimes homepage and (b) yahoo
homepage on a mobile web browser. 1 Hz is the recording frequency. • Timestamps of the EEG sensor readings and the
The attention level is a value between 0-100 on the X axis, Vs the browser usage tracker do not seem to match. This
percentage of page being browsed, tracked by scrollbar position, on the
issue can partly be fixed by taking readings at exactly
X axis.
one second intervals and starting both the recordings
V. INTERFACES IN THE WEB BROWSER TO MAKE IT RESPONSIVE at the same time. Another way is to synchronize the
system time with the mobile network provided time by
In this section we discuss some possible ways in which the using the SIM cards.
user’s interest level can be used to make the web browser
responsive. Here we concentrate on ways to modify the user • Concentration values from the Neurosky EEG kit also
interface of the web browser in a mobile device. come slightly delayed. Because of this delay it is
difficult to exactly match the part of the webpage
In the following subsections we present some of these being browsed with the concentration level. Here too,
modifications. beginning the readings at the same time for the EEG
A. Dynamically adding and removing items from favorites sensor as well as the web browser scrolling can help to
in the web browser standardize this data.
If the user’s attention level while reading a webpage is • The EEG analyzer needs to be in the foreground to
consistently over a threshold, the system automatically adds make the recording, so we had to use a second device
the webpage to the favorites. Similarly, if the interest is for the EEG analyzer, and the first device for the web
consistently below a threshold, it can remove the page from browser.
the favorites.
• The EEG sensor readings can sometimes fluctuate
B. Creating a dynamic index of the sections within a web wildly. This can be partly offset by taking a number of
page that the user is interested in reading readings for each person for the same webpage.
Another way to make the web browser responsive would Besides, one can combine the EEG values with other
be to create a dynamic index of the sections within the web sensors such as camera for eye tracking, to get a more
page where the user’s attention level is high. This index can be accurate value.
saved within the device or in an external cloud server, and VII. CONCLUSION AND FUTURE WORK
exported to multiple devices owned by the user. So the user
would be able to get back directly to the interesting sections In this paper we present a method to track the attention
they had previously read. level of users while reading a webpage and map it to sections
within a page. Using this, the web browser can be made
C. Highlighting the sections of the webpage where the user’s responsive to the interest level by various suggested interfaces.
interest is high
Presently we have only performed our analysis and
The web browser can be modified to store and remember experiments on mobile web browsers. In future we can extend
the webpage sections the user is interested in. This can be used this for desktop browsers as well. Also we can extend this
to highlight the sections of more interest, such as by using a principle for other applications than the web browsers, such as
bigger font size, while rendering the same web page the next e-book readers.
time it is loaded.
D. Modifying the rendering of the web page in real time to References
project the sections where the user is more likely to be [1] Anthony King. Neuromarketing: the battle for our brains is big business.
interested The Irish Times. June 4 2015. [Online]. Available:
irishtimes.com/news/science/neuromarketing-the-battle-for-our-brains-
The rendering engine on the browser can dynamically is-big-business-1.2111403
change the rendering based on the user’s interest level. This [2] Susan Krashinsky. This is your brain on advertising. The Globe and
could constitute removing the sections where the interest level Mail. March 5 2015. [Online]. Available: theglobeandmail.com/report-
is low or promoting the sections where the interest is high to on-business/industry-news/marketing/neuromarketing-takes-aim-at-the-
the top of the page. Other sections within the same or different minds-response-to-advertising/article23321379/
web pages of the same categories can similarly be highlighted. [3] NeuroSky store: Mindwave [Online]. Available:
These changes can be made in real time. store.neurosky.com/products/mindwave-1
[4] Emotiv EPOC headset [Online]. Available: emotiv.com/epoc.php
By using the above and similar other modifications to the [5] G. Rebolledo-Mendez, I. Dunwell, E.A. Martinez-Miron et al. Assessing
web browser design, one can get it to be more responsive to NeuroSky's usability to detect attention levels in an assessment exercise.
the user’s interest level, thus increasing the engagement of the Human-Computer Interaction. New Trends Lecture Notes in Computer
user while browsing the web. Science Volume 5610, 2009, pp 149-158
[6] D. Nie, X.W. Wang, L.C. Shi, B.L. Lu. EEG-based Emotion
VI. ISSUES WITH THE SYSTEM Recognition during Watching Movies. In Proc. 5th International IEEE
EMBS Conference on Neural Engineering, Cancun, Mexico, 2011
In this section we discuss a few issues with our system to [7] K.H. Lee. Evaluation of Attention and Relaxation Levels of Archers in
track the user’s interest level while performing the browsing Shooting Process using Brain Wave Signal Analysis Algorithms. Sci
activity. Sensitivity 2009 ; Vol 12: pages 341-350.

5
[8] Yuan-Pin Lin et al. EEG-Based Emotion Recognition in Music Proc. WWW '06 Proceedings of the 15th international conference on
Listening. IEEE Trans. BTomedical Engineering. Vol. 57, No. 7, July World Wide Web.
2010 [12] NeuroSky store: EEG Analyzer Tool [Online]. Available:
[9] Sheikholeslami C1, Yuan H, He EJ, Bai X, Yang L, He B. A High http://store.neurosky.com/products/eeg-analyzer
Resolution EEG Study of Dynamic Brain Activity during Video Game [13] Katrien De Graeve. HTML5-Responsive Web Design. MSDN
Play. In Proc. IEEE Eng Med Biol Soc. (EMBS) 2007. Magazine. November 2011. [Online]. Available:
[10] D. Beymer, D. M. Russell. WebGazeAnalyzer: a system for capturing msdn.microsoft.com/en-us/magazine/hh653584.aspx\
and analyzing web reading behavior using eye gaze. Proc. CHI EA '05 [14] Pete Le Page. Responsive Web Design Basics. Google Developers
CHI '05 Extended Abstracts on Human Factors in Computing Systems. Documentation. April 30 2014. [Online]. Available:
[11] R. Atterer, M. Wnuk, A. Schmidt. Knowing the user's every move: user developers.google.com/web/fundamentals/layouts/rwd-
activity tracking for website usability evaluation and implicit interaction. fundamentals/index?hl=en