ABSTRACT

SAVE, MAITREYA. People Oriented EMail: A social approach to Email Interfaces. (Under the direction
of Benjamin Watson.)

Email has lost much of its original function: connecting people. Today, people use it as a "to-do"
list, a database, and even a form of legal documentation. For these and other reasons, email has
become a source of stress; an isolator rather than an affiliator. In this thesis, We argue that restoring
and strengthening email’s socially connective role requires its interface to emphasize familiarity,
become more visual, and focus on human relationships. We discuss each of these claims, describe
POEM (People Oriented EMail), our prototype inspired by these claims, and sketch our plans to
evaluate it.
© Copyright 2020 by Maitreya Save

All Rights Reserved

People Oriented EMail: A social approach to Email Interfaces

by
Maitreya Save

A thesis submitted to the Graduate Faculty of

North Carolina State University
in partial fulfillment of the
requirements for the Degree of
Master of Science

Computer Science

Raleigh, North Carolina

2020

APPROVED BY:

Chris Parnin Patrick FitzGerald

Benjamin Watson
Chair of Advisory Committee
 DEDICATION

This work is dedicated to my family and all those people who have supported me and been there for
me during these past 2 years.

ii
 ACKNOWLEDGEMENTS

I would like to thank my advisor Dr. Benjamin Watson for his guidance in this dissertation. His
motivation and knowledge helped me a lot and broadened my perspective not only as a Software
Developer, but as a User Experience Engineer as well!
I would also like to thank the members of the Visual Experience Lab, who helped me test my
prototype and helped me solve all my silly doubts.
Last but not the least, I would like to thank my friends and family for their support without
which this work would not have been possible.

iii
 TABLE OF CONTENTS

LIST OF TABLES . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . vi

LIST OF FIGURES . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . vii

Chapter 1 INTRODUCTION . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
1.1 History of email . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
1.2 Motivation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.3 Problem Statement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.4 Technology and Social Isolation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.5 Email and Isolation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.6 Why Email Isolates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.7 Email Should Associate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.8 The Importance of Email in Daily Life . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

Chapter 2 RELATED WORK . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

2.1 Related to the History of Email . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
2.2 Related to the State of Email . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
2.3 Related to Email Visualization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
2.4 Related to Problems with Email . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
2.5 Related to Attempts at Improving Email . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

Chapter 3 CONCEPT OF EMAIL VISUALIZATION . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

3.1 Initial Concept . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
3.2 Why this idea is important . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
3.3 Our approach . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
3.3.1 Attempt at making a Chrome Extension . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

Chapter 4 THE PROTOTYPE - POEM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

4.1 Background . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
4.1.1 Why a web application? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
4.2 Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
4.2.1 Why this layout? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
4.2.2 Why the faces? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
4.2.3 Interacting with POEM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
4.2.4 What we wish we could have done? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
4.3 Technical Details . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
4.4 POEM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
4.5 Pros and cons of the prototype . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

Chapter 5 USER STUDY . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

5.1 Setup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

Chapter 6 ANALYSIS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
6.1 Metric . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

Chapter 7 CONCLUSION . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

iv
 7.1 Overall Purpose of POEM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
7.2 Information gained from the analysis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
7.3 What was good, what could be improved? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
7.4 Future Work . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

BIBLIOGRAPHY . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29

APPENDIX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
Appendix A Appendix - A . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
A.1 A First Section . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

v
 LIST OF TABLES

Table A.1 A table in the appendix. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33

vi
 LIST OF FIGURES

Figure 1.1 An image of the ELM interface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

Figure 1.2 An image of the Gmail interface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

Figure 4.1 Sign-in page of POEM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

Figure 4.2 Loading screen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Figure 4.3 Initial Plot . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Figure 4.4 Hover over Initials . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Figure 4.5 Select and Hover over Image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Figure 4.6 List of messages of a selected person . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Figure 4.7 A selected email message . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
Figure 4.8 Plot with Importance Category: Sent Email Size . . . . . . . . . . . . . . . . . . . . . 21
Figure 4.9 Plot with Importance Category: Response Latency . . . . . . . . . . . . . . . . . . . 22
Figure 4.10 Plot with Importance Category: Significance . . . . . . . . . . . . . . . . . . . . . . . 23
Figure 4.11 Plot with Importance Category: Urgency . . . . . . . . . . . . . . . . . . . . . . . . . . 24

vii
 CHAPTER

INTRODUCTION

1.1 History of email

We live in the Golden Age of Science and Technology. Technology has indeed been evolving rapidly.
As per Moore’s Law, the number of transistors on a microchip doubles about every two years. This
essentially means that the processing power of computers is increasing at an exponential rate.
Computers have been around for more than 50 years now and they have moved from being as
large as an entire room to as small as a pocket watch. These advances in the processing power of
computers has also led to a lot of Software advances!
Electronic mail or as we commonly call it Email is a bi-product of these technological advance-
ments as well. Email was first invented in 1971 [Tom09] and has evolved quite a lot in the post
50 years. Earlier email had a basic User Interface (UI) and was used only for basic message pass-
ing across computers. In the early nineties, email started gaining attention as a reliable source of
communication and by the start of the new millennium it was recognized as a formal (and legal)
method of communication as well. The website https://email.uplers.com/infographics/
evolution-of-emails/ shows an interesting info-graphic [Ema] which explains the history of
email in brief. Nowadays, we can even send animations and videos over email as well! But, not all
changes that come with technology are desirable.

1
1.2 Motivation

Email has lost much of its original function: connecting people. Today, people use it as a "to-do"
list, a database, and even a form of legal documentation. Email is not something that most people
are excited to use. It involves a certain amount of stress [Mar16]. We seek to create an interface
that reduces stress and restores social connection by emphasizing the familiarity, social, visual and
human aspects of email.

1.3 Problem Statement

In this research, we wish to demonstrate a prototype which has a more social and people-friendly
interface than the existing email interfaces. We wish to help the user with sorting and deciding
which emails they should respond to. We plan to do this by introducing 5 different importance
measures that rearrange emails in a manner which helps the user gain information from them. This
way, instead of going through trivial emails, the user can focus more on building their relationship
with a correspondent that they consider important.

1.4 Technology and Social Isolation

Technology is advancing rapidly, and not all of the changes it brings are desirable. Many are con-
cerned with the role that technology plays in social isolation, particularly (ironically enough) by
the technology that is designed to connect us. Previous research [Ham09] found that technology’s
impact is complex, with both positive and negative impacts on human relationships. However more
recently, evidence for the negative impact of technology on social connectivity has grown [Sch18].

1.5 Email and Isolation

Most people check email at least once a day, with a significant proportion checking email constantly
[Ros15]. At its invention in 1971 [Tom09] daily emails could be counted on one hand. Today the
average user receives nearly 50 per workday [Gil15], causing a great deal of stress [Mar16], since
each email represents a “thing to do”. New algorithms help, blocking most (about 75%) of that email
[Gil15] as spam, but surprisingly, there has been little change in email’s visual interface since its
introduction.
Google’s Gmail was introduced over forty years after Tomlinson invented email, but its interface
differs little from early textual interfaces. Fig. 1.1 is an image of the ELM email client interface released

2
Figure 1.1 An image of the ELM interface

Figure 1.2 An image of the Gmail interface

3
in 1986 [Tom09], while Fig. 1.2 shows the current Gmail interface. In design terms, not much has
changed: the primary element is a textual list of messages (possibly grouped into “threads”), with
the most recent messages first. If the user likes, this list can be separated into a few categories (e.g.
social, promotions). Since each message brings stress, this damages email’s socially connective
mission: users treat messages as “things to do” rather than opportunities to connect with people.
This thesis is a long overdue exploration of alternative interfaces that promote social connection
rather than isolation.

1.6 Why Email Isolates

We argue that current email clients isolate because they emphasize:

• the unfamiliar over the familiar: At a visceral level, we fear what we don’t know. By placing
the most recent and unfamiliar emails at the top of the list, today’s email clients elicit a stress
response [Mar16]. In addition, these clients visually suggest that those we don’t know should
be responded to before those we know. Both design decisions harm social connectivity.

• the textual over the visual: Human relationships are both visual and verbal, with visual signals
more quickly and easily processed [Pel77]. By emphasizing text over visuals, current email
clients reduce social connectivity [Coh09].

• requests over relationships: Each item in the email list emphasizes a requested action, rather
than a person to connect with. The majority of each item’s display is dedicated to the request,
rather than the requester. Moreover, when multiple emails or threads arrive from a single
person, they are listed separately, rather than being visually grouped by the friend or colleague
making each request.

1.7 Email Should Associate

To promote social connectivity, we are exploring alternative email interfaces that emphasize:

• the familiar over the unfamiliar: even new emails (and requests) can arrive from familiar
sources. By emphasizing messages from friends and colleagues, email clients can reduce
stress, and promote social connection.

• the visual over the textual: the faces of friends and colleagues immediately bring an array
of emotions and memories, enriching and giving context to the human communication

4
 contained in email text. By making interfaces more visual, and in particular by featuring the
faces of correspondents, email clients can encourage human relationships.

• relationships over requests: the basic unit of interaction in an email interface should be the
person sending the message, rather than their messages. Email clients should help users
manage relationships, not requests.

1.8 The Importance of Email in Daily Life

Email has become a part of almost every person’s daily life. People use email for various purposes
such as communicating with others, storing files and validating documents. One of the main reasons
why email is an important mode of communication is because it is fast. You could send an email to
someone on the other side of the planet and it would reach them within minutes. Apart from this,
people have also been using email as a reliable storage tool. Though this might not have been the
original purpose of email, it is indeed a useful one.
According to a survey by Gill et al, the top 3 tasks that users use email for are - Exchanging
Documents, Sending Information to Groups, and Storing Files. They also made a note that com-
munication between individuals—the original intent of e-mail—isn’t even listed in the top five
activities [Gil15]. This basically implies that the social aspect of email is almost not present anymore.
And if we are right about our hypothesis, then it is high time that the email interface needs to
be changed. We genuinely believe that enhancing this tool further to make it more pleasant and
comfortable for the user in a social context could have real impact.

5
 CHAPTER

RELATED WORK

There has a been a lot of research related to the history of email, the state of email, email visualization,
problems with email, and ways to improve email. We wish to discuss some of them which we found to
be important and enlightening. We have divided these papers based on the 4 categories mentioned
above.

2.1 Related to the History of Email

After its invention in 1971 [Tom09], there has been a considerable amount of research done on
email. Earlier email interface were basic in nature. For example, as seen in Fig. 1.1, the ELM interface
simply provides basic textual information to the user [cite ELM ref ]. Earlier email clients like AOL
also faced a lot of security issues and breaches [110]. One of the major research areas with respect to
email is network traffic monitoring and spam detection. Spam detection research has shown that
more than 70% of incoming emails are marked as spam [Cla07]. Nowadays email clients like Gmail
help us in replying to emails with technologies such as Smart Reply and Suggestive Text [Kan16].

6
2.2 Related to the State of Email

In recent times, significant research is happening on email usage and user engagement with email.
Regarding user engagement, people tend to use emails either for personal or professional purposes.
Professional email inboxes can have a wide variety of emails in them [Gil15]. Research on email
usage has mainly been influenced by email’s accessibility on mobile [Ros15]. Some people tend to
use email more often because it is easily accessible for them on their mobile devices, while others
barely check email on their mobile devices [Ros15]. Email has advanced rather slowly compared
to other social-media apps, but it is still evolving and might soon catch up with them [Gil15]. With
advancements in Data Science and Artificial Intelligence, researches have been using corpora of
emails for training of various machine learning networks and neural networks [Kli04].

2.3 Related to Email Visualization

To understand research related to Email Visualization, we first have to look at some research related
to Visualizations. To create visualizations, we need data, preferably a lot of data. Thudt et al. have
demonstrated creating Mementos using user’s personal data which create beautiful visualizations
for the user [Thu15]. These mementos serve the purpose of bringing in an emotion response to the
user with the help of content that might be of importance to them. Another form of visualization
may involve visualizing large conversations in the form of a stream of rectangles [Wat03]. This makes
it easier to have a broader look at the conversation and the user can then select a specific part of the
conversation to view more details. Some research on email visualization includes representing email
threads (response and reply) with a specific correspondent or multiple correspondents [Ven03]. This
helps in structuring a conversation and makes it easier for the user to interpret the conversation.
Using various data mining algorithms, researchers have come up with different ways of creating
a summary for emails as well. Carenini et al came up with a method to summarize emails using
Clue words [Car07]. Clue words are calculated based on frequency and basically help the user
to understand the context of emails using only a few words. There is some research to identify
inter-personal relationships as well. In their research paper Visualizing Email Content: Portraying
Relationships from Conversational Histories, Viegas et al. talk about how each conversations can
have a different level of importance [Vié06]. They introduce Themail which basically represents
email conversations with the help of keywords. These keywords are plotted like a stack (each keyword
on top of the other) vertically and plotted based on month on the horizontal axis. Such visualizations
are informative, simple, and help the user gain a better understanding of their email inbox.

7
2.4 Related to Problems with Email

To begin with,

2.5 Related to Attempts at Improving Email

Prior attempts at improving email interfaces are limited, and have emphasized visuals, especially
those depicting saved emails. Frau et al. [Fra05] visualized archived emails with temporal scatter-
plots supporting zooming views. This gave us an insight into how users perceive their data. Creating
plots and representing data in the form of shapes is indeed convenient for the user to process than
plain text. Kerr [Ker] visualized email conversations with threaded arcs to form bipartite graphs.
Graph nodes represented correspondents, with more important people emphasized with color. This
research was important because it gives a sense of priority to certain people over others - which
we want to implement in our prototype as well. In another unique research, Mandic and Kerne
[Man04] visualize email archives using temporal plots, with glyphs representing correspondents
varying according to a level of intimacy derived from user ratings and textual analysis. This concept
of user ratings helped us come up with the concept of an importance measure for emails.

8
 CHAPTER

CONCEPT OF EMAIL VISUALIZATION

3.1 Initial Concept

While discussing about the initial design choices for this prototype, we went through a bunch of
different research papers which shed light on various methods of email visualization and stress (and
other shortcomings) caused due to emails. Therefore, we wanted to make sure that this prototype
would be stress-free and visually satisfying to the user while also being informative.
During the earlier stages, we had thought of a design where there would be different clusters
of users (unique email addresses) where each user could interact with other users in its cluster as
well as with other clusters. The users in a given cluster would be considered to be more closely
related to each other than to those in other clusters. But, a major constraint for this would be that
we would need all users to use the prototype in order to be displayed in the visualization - which is
not favorable for testing the prototype on a small group of people.
So, instead of going ahead with the clusters design, we decided to make this a visualization about
the inbox contents for a single user. This way, the user gets visual information about their inbox and
can decided which emails are more important based on their own preferences or interactions with
that person.

9
3.2 Why this idea is important

While there has been a lot of improvements for email in terms of storage, system design, and network
design, there is little progress in its User interface and User experience. There is considerable research
related to email visualizations, but most of the email visualization research focuses on deriving
information from archives of emails [quote a paper here] and it gives detailed feedback about the
same. The user may learn a lot about their archived data but this does not give much social or
personal information.
Technology should always be used for making human lives better, that is why we need to focus
on making the email experience more pleasant and more social for the user. As mentioned earlier,
[refer paper related to stress] most people look at email as a way to keep track of their tasks, like
a to-do list. This can become overwhelming for some people. And since most of us do check our
emails on a daily basis, this feeling of being overwhelmed by email piles up and can make a person
stressed out because of email. We have attempted at designing and implementing a prototype which
will not only be visually pleasing for the user.

3.3 Our approach

Since we are attempting at making a user interface for email which is more people-oriented than
task-oriented, we decided to call out prototype People-Oriented EMail (POEM). POEM essential
visualizes all the emails present in the user’s Inbox by sorting them based on which person (unique
email address) has sent or received that email. For prototyping purpose, we decided to use Gmail
API (GAPI) because Gmail is very popular and GAPI also provides OAuth-2 authentication on client
so that the user’s private information is safe with them.
When a user logs into their Gmail account using POEM, they are first prompted with an au-
thentication window provided by GAPI’s OAuth-2, which ensures the user that their data is safe.
Once the user proceeds, they will see a 2-D plot containing circles of various sizes and colors. These
circles basically represent a unique person (email address) with whom the user has interacted -
sent or received 1 or more emails. These circles are arranged vertically based on time (most recent
on top) and horizontally based on importance (more important to the left). While the vertically
axis is fixed on to time, the user can change the importance category based on their preference.
Importance Categories include Total Email Size, Sent Email Size, Response Latency, Significance,
and Urgency. Based on the user’s selection of an Importance Category, the circles would rearrange
themselves in the plot to reflect that type of importance. Clicking on an individual circle would
display a list of all the emails (conversation) that have been exchanged with that person below the

10
2-D plot. The user can click on an individual email from this list to view the entire email in a new
pop-up window. For prototyping purpose, we are limiting the user’s interactions to only reading
emails and not replying to them.

3.3.1 Attempt at making a Chrome Extension

At an earlier stage we thought of making a chrome extension that would display over the existing
Gmail inbox. This way, the user could compare this visualization directly with the existing Gmail
inbox User Interface. Due to a bunch of technical difficulties like having separate client and server
logic and asynchronous fetching of email messages by the Google Email API (gapi), we were not
able to implement the Chrome extension version of this prototype.

11
 CHAPTER

THE PROTOTYPE - POEM

4.1 Background

Since we had already attempted to develop a Chrome extension, we were familiar with GAPI using
JavaScript. So, we decided to use this knowledge and go ahead with making a standalone application
to showcase this new interface using JavaScript. Earlier, we tried to create our own email client by
creating a server which would store and load emails locally for better performance. But, we realized
that this might cause the user’s privacy to be compromised if any form of data remains on the server.
So, we decided to use Google’s Gmail API (GAPI) which provides OAuth-2 mode of authentication so
that user’s data is protected properly.

4.1.1 Why a web application?

There are multiple reasons why we chose to make a web application instead of any other native
platform applications. Some of the important reasons include ease of accessibility for the user,
better privacy because of only client-side code, no overhead (or need) of data storage, and platform
independence. Users can easily access a web page from all of their smart devices like mobile phones,
tablets, desktops, and laptops. A web application was indeed the most broadest and convenient
method for prototyping this interface.

12
4.2 Design

While designing the prototype, we had to face multiple design questions and had decide on design
choices accordingly. One of the major design decisions that we had to make was where to display
the visualization. We decided that it is best to keep at the top because that would be the first thing
that the user would see after they sign-in into their account. The visualization is basically a 2-D plot
with Time on its vertical axis and Importance on its horizontal axis. This plot contains circles which
represent all the people (unique email addresses) that the user has interacted with in the last 1000
emails. The size of the circle represents number of email messages exchanged - a legend for this
displayed to the left of the plot for the user’s understanding.
The circles are assigned a color at random. To randomize the color assignment, we used Stratified
Sampling on the Chroma (Hue + Saturation) of the color spectrum. We divided this into 16 squares
(4 steps for Hue and 4 steps for Saturation). In order to assign a color, first a square is selected at
random from these 16 boxes. This box essentially defines the maximum and minimum values for
Hue and Saturation. Then, a random value for Hue and Saturation is picked using these maximum
and minimum values. Using Stratified Sampling gives assurance that the colors will be spread out
almost equally making the plot look visually pleasing. When the user selects a circle, that circle gets
highlighted with a pulsating red-colored border. This serves as an indicator for the user as to which
person’s emails are being displayed at the bottom. The email address of this person is also displayed
at the bottom. Another design choice that we made was to have shadows for people to whom the
user has to reply. This basically indicates that its the user’s turn to respond and is a subtle indicator
of urgency. If a particular person has a public profile image setup, then that image is displayed on
the circle. If there is no image, then a text containing the initials of that person is displayed on top
of the color assigned to that circle. Hovering on a circle will reveal that person’s name and email
address and will also show an enlarged image (or text) if an image is present in the circle.
A list of email messages is displayed below the plot to show the conversation that the user has
had with that particular person. These messages are separated by a small white space if they belong
to different conversation threads. The color of the messages sent by the user to the person is Grey.
The color of the messages sent by the person to the user is the color that was assigned to that person
(circle) in the plot. Basic details such as time and subject line of the email are displayed on each
message in this list of messages. The user can click a single message to open the entire email body
in a new pop-up window.
The user has an option to change the Importance Category using a drop-down menu present
right below the Importance label. The user has 5 options to chose from:

13
 1. Total Email Size

2. Sent Email Size

3. Response Latency

4. Significance

5. Urgency

Depending on what the user selects, the circles rearrange themselves accordingly to display that
type of importance. This helps the user in deciding which people should they respond to first.

4.2.1 Why this layout?

We chose the layout to be a 2-D plot because it is enough to convey relevant information and is not
stressful for the eyes. The 2-D plot has 2 axes, the vertical axis representing time and the horizontal
axis representing importance respectively. Following the existing email pattern of displaying the
most recent emails at the top, we decided that the same would be useful and convenient for the user.
So, the circles that are closer to the top are the ones whose latest emails are more recent. Similarly,
for importance, circles with more importance value (based on the Importance Category selected)
are closer to the left on the horizontal axis. Emails are not displayed until a circle is selected. Once
the user selects a circle, then the emails corresponding to that person are displayed below the plot.
This way, only the emails related to that selected person are visible to the user at any given time.
This layout is concise, yet informative and easy to use.

4.2.2 Why the faces?

Faces bring in the familiarity aspect! A study by [cite research paper] shows that humans are better
at remembering faces than written text. Also, another study [cite] shows that looking at faces helps
in decreasing stress levels. It is also easier for the user to search for their friends in the cluster of
emails by identifying their faces.

4.2.3 Interacting with POEM

In section 4.4, we describe in detail how to use the POEM prototype and give you a walk-through of
all its features. For now, we will be discussing basic interactions that the user can have with POEM.
Once the user signs-in into the application using GAPI’s OAuth-2, they will be brought to a
loading screen. Once the loading screen finishes loading all the emails, the 2-D plot visualization

14
will show up. On the plot, the user will see a vertical axis representing Time with more recent emails
being closer to the top and a horizontal axis representing Importance with more important emails
being closer to the left. The user can select an importance category from the drop-down menu
which is present below the importance label. The user will see circles of different size and colors,
some with pictures in them and some with text in them. These circles represent individual persons
based on the unique email address that the user is interacting with. There is a legend to the left of
the plot which shows the relation between the size of a circle and the number of emails exchanged
between the user and the person represented by that circle. These circles will shift horizontally
according to the importance category that the user has selected. If a circle has a shadow around it, it
means it is the user’s turn to reply to that person. The user can now, select any circle from the plot to
get a list of email messages that the user has exchanged with that person. The messages sent by the
user will be colored in grey and the messages received by that person will be in a random color that
is assigned to that specific person. The user can then select any of these messages to read the entire
body of the message in a new pop-up window. The user can then sign-out using the sign-out button
present in the top left part of the web page.

4.2.4 What we wish we could have done?

There were a couple of things that we wished to try out, but could not due to technical or time
constraints. These can be considered as a part of future research. Below is a list of things that we
wished we could have achieved given more time and technical expertise:

• Replace the time axis with another importance measure to have a multi-importance plot.

• Create a chrome extension instead of a web application so that the user can directly use it on
their existing Gmail Inbox.

• Add a ’Reply’ button so that the user can reply to messages.

• Continuously and asynchronously fetch new emails as and when they are received and update
the visualization accordingly. This way, the user does not have to refresh and wait all over
again for all the email messages to load.

• Add more labels like Sent and Drafts to give the user a complete email client experience.

• Optional: Allow users to define their own Importance Category and let them customize their
visualizations.

15
4.3 Technical Details

As far as technical details are considered, everything is coded on the client-side using JavaScript.
The only non-client code would be the calls from the GAPI library which are used to fetch each
individual email message. We have used JavaScript’s Konva library for the front-end part of the
prototype. Konva being a light-weighted library which directly interacts with the HTML canvas in
order to draw its objects is really helpful for implementing basic shapes and animations. Some part
of the front-end like the sign-in buttons and the drop-down menu for the Importance Categories
are implemented with HTML and CSS-3 with some basic JavaScript to handle the back-end logic for
them.
Regarding the back-end structure of POEM, after the user signs-in, 1000 email messages (or if
the user has less than 1000 then all their email messages) are fetched using an asynchronous call
from the GAPI. We need a bunch of cumulative and global values to compute and draw the 2-D
plot on the front-end. In order to get these values, we had to add a await call to the asynchronous
GAPI calls so that the computation can begin only after all the required email messages are fetched.
Once all the email messages are fetched, they are stored in a list, and then are sorted based on
their email addresses. We have defined a Person class for storing all the information related to that
particular person (unique email address). We have also defined a map which takes key as email
address and value as an object of Person class. This way, we can keep track of any person based on
their email address. Then, other characteristics such as email size, number of threads, latency, etc
are computed and stored in the instance of that person. These values are then used in the front-end
to display different features like size, color, shadow size of the circle. All the values related to the
Importance Categories are also calculated and stored in the respective person’s object in order to
move the circle to that x co-ordinate as and when needed.

4.4 POEM

Step 0: Signing in

In this section, we will give you a detailed walk-through of our prototype - POEM. To begin, let us
start with the sign-in page. Fig. 4.1 is how the sign-in page looks like to the user. As you can see, there
is a single Authorize button which is enabled so that user can sign-in. The Importance Category
drop-down is disabled as of now because no emails have been loaded yet.
Once the user clicks on the Authorize button, they will be prompted by GAPI to sign-in and
allow GAPI to access their email details with OAuth-2. After this is done, the user’s name is updated

16
Figure 4.1 Sign-in page of POEM

in the top left corner to indicate that they have successfully signed-in and the loading process begins.
The Authorize button also changes into a Sign Out button, so that the user can sign out whenever
they want to. While the program is loading email messages (1000 or the complete inbox, whichever
is lesser) a progress circle is shown to user as seen in Fig. 4.2. This can take anywhere between a
few seconds to about 5 minutes depending on the size of the user’s inbox. This wait time is needed
because we need to calculate some global values which requires all the messages to be loaded. And
since GAPI fetches messages asynchronously, we had to use an await keyword on each fetch to
forcefully make it synchronized so that we could calculate the required global values.

Figure 4.2 Loading screen

17
Step 1: Basic Layout

Once the program has loaded all the email messages, the initial plot is created based on the first
Importance Category: Total Email Size. As mentioned earlier, the vertical axis denotes Time with
top representing more recent emails and bottom representing emails from the past. The bottom
label on the time axis also gives an estimate of how old the emails are. The time labels are not
displayed before the loading completes because this estimated value is one of the global values that
needs to be calculated. The user cannot change the criteria on the time axis. The user may change
the Importance Category on the importance axis. Since the default importance category is Total
Email Size, the circles in the plot get arranged based on the cumulative email size as seen in Fig. 4.3.
The cumulative email size is calculated by summing up the email size of all the email messages
that have been exchanged between a given person (circle) and the user. The circles are sorted in
descending order for this Importance category as a larger cumulative email size is considered to be
more important. The size of the circles represents the number of email messages exchanged by that
person and the user. This is different from the cumulative email size in the sense that it is just the
count of the emails, the amount of content does not matter here. There is a legend to the left of the
Time label which indicates 3 different sizes of the circle.

Figure 4.3 Initial Plot

18
Step 2: Interaction

There are multiple ways in which the user can interact with POEM. To begin with, hovering over any
circle would show a small cloud above it with an enlarged image of what is inside the circle and that
person’s email address. The contents of the circle can be an image (if the user has a public profile
image) or simply the initials of the person with a colored background. The image of the person is
fetched from gravatar using the equation:

I ma g e U r l = h t t p s : //w w w.g r a v a t a r.c o m /a v a t a r /”+m d 5(E m a i l Ad d r e s s )+”?d = 404

Gravatar has a repository of GMail’s public images. It simply uses a MD-5 hash function on the
email address to fetch the avatar of that user. Failing to fetch an image from this URL, it falls back to
logic of assigning the user’s initials to the circle. (Note: For prototyping purpose, we have added 30
random images which we use for now if Gravatar fails. After these 30 images are used up, the logic
falls back to assigning initials). The initials are calculated from that user’s Gmail profile which in
simple terms is just the first letter of the first 2 words of that user. Example: If a user has the name
Thor Stark Odinson, then that user’s initials would be TS. Whereas if a user has the name Thor
Odinson, then their initials would be TO. Fig. 4.4 shows how the cloud would look when hovered
over a circle with initials in it and Fig. 4.5 shows how it would look when hovered over a circle with
an image in it. A circle might also have a shadow around it. The shadow indicates that it is the user’s
turn to reply to this person.

Figure 4.4 Hover over Initials

The next thing that the user can probably do is to click on any circle. If the circle is behind
another circle, clicking it would bring it to the top, so that is clearly visible to the user. Clicking a
circle will also add a red ring around the circle as seen in Fig. 4.5. The red ring serves the purpose of

19
Figure 4.5 Select and Hover over Image

indicating which circle is selected and acts like an identifier for the user. The label just below the
plot is updated with that person’s email address. Also, below this label a list of email messages is
displayed which is a brief of the conversation that this person has shared with the user. The messages
sent by the user are colored in grey and the messages sent by the selected person are in the color
(randomly assigned) of the circle that represents that person. This color might not be visible on the
circle if there is an image overriding it on the circle. There is a small white gap between messages if
they belong to different threads. Basic details such as a snippet of the subject line and time stamp
of that message are displayed on each of these messages. Fig. 4.6 shows a list of messages of the
selected user.

Figure 4.6 List of messages of a selected person

The user can then select any message from this list to view the entire body and other details of
that message in a new pop-up window. Fig. 4.7 is how a selected email message would look like in
the new window. The user can then close this window and select another email to view its contents

20
or perform any other interaction with the application.

Figure 4.7 A selected email message

One of the main features that the user can interact with is the Importance Category drop-down
menu. This drop-down is present right below the Importance label and its default value is set to
Total Email Size. As mentioned earlier, this importance measure basically prioritizes the cumulative
size of all emails that the user and the selected person have exchanged. Fig. 4.3 shows how the circles
are distributed when Total Email Size is the Importance Category.

Figure 4.8 Plot with Importance Category: Sent Email Size

21
 The next category which the user can select is Sent Email Size. The calculation for this impor-
tance measure is similar to the previous one - it is the cumulative sum of the email sizes that were
sent by the user to the selected person. Fig. 4.8 shows how the plot looks when Sent Email Size is
selected as the importance measure. This measure is significant because it conveys the amount of
effort the user has put into this person. For both Total Email Size and Sent Email Size the maximum
and minimum values are calculated using global variables and then individual values are calculated
by normalizing their values with respect to the canvas size with the help of these maximum and
minimum values.

Figure 4.9 Plot with Importance Category: Response Latency

The third importance measure which the user can select is Response Latency. Here the impor-
tance measure is based on the average latency of the user with this person. Latency is calculated
using the formula:

L a t e n c y = Ab s (U s e r R e p l y T i m e − P e r s o n R e p l y T i m e )

Here, Abs stands for the absolute value of a number. We keep a count of the number of latencies
(whenever there is a response and reply) and use this count to calculate the average latency of a given
person. This measure basically shows how quickly the user responds to a given person over a period
of time. We can see from Fig. 4.9 that it helps in sorting out most of the subscription or reminder type
of emails which are similar to spam - emails that the user will probably not be interested in replying
to. In order to normalize the special case where there have been 0 latencies (user has never replied),

22
we simply assign them to the minimum valued coordinates to avoid a divide by 0 exception.

Figure 4.10 Plot with Importance Category: Significance

The fourth importance category that we have introduced is Significance. The significance for a
person is calculated using the formula:

Si g n i f i c a n c e = E f f o r t + B a l a n c e

Where Effort and Balance terms are calculated as:

E f f o r t = L o g 2(N u mS e n t E m a i l s + 1)

B a l a n c e = L o g 2(N u m E m a i l s +1)∗L o g 2((N u mS e n t E m a i l s +1)/(N u m R e c e i v e d E ma i l s +1))

Here Log2 denotes Log of a number to the base 2, NumSentEmails indicates the number of
emails sent by the user to this person, NumEmails indicates the total number of emails exchanged
between the user and the person (NumSentEmails + NumReceivedEmails), and NumReceivedE-
mails indicates the number of emails received by the user from this person. We can see from Fig. 4.10
that this importance measure spreads all the circles almost evenly. The +1 in the formula helps in
avoiding the mathematical exceptions that might be thrown by Log(0). Normalization is done based
on the minimum and maximum values calculated using global variables during loading time. This

23
measure helps the user in properly sorting and finding any specific person more conveniently.

Figure 4.11 Plot with Importance Category: Urgency

The final category that the user can select is the Urgency category. In this category, we have
calculated the urgency for a person as:

U r g e n c y = L a t e s t L a t e n c y /Av e r a g e L a t e n c y

Here, LatestLatency is the most recent latency calculated for the person and AverageLatency is
the average latency that we computed earlier for the person. Again, these values are normalized
using global maximum and minimum variables but special cases need to be considered to avoid a
divide-by-zero exception. As seen in Fig. 4.11 this might not be a very effective importance measure
as it categorizes all the persons to whom the user has never replied as really important. This might
not always be desirable by the user as it may contain a lot of spam or subscription type email
addresses.

Step 3: Observation

By trying out the different interactions from the previous step, the user can observe the movement
of the circles along the horizontal axis. Depending on the user’s personal choice, they may choose
an importance measure that they seem appropriate and decide on whom should they reply to. This
step concludes the walk-through of POEM.

24
4.5 Pros and cons of the prototype

As with any prototype, there will be both advantages and disadvantages of it. According to us,
following are the advantages of using POEM:

• It is visually pleasing.

• Email clutter is reduced.

• Users can sort emails based on different types of importance.

• Shadow around the circle helps in identifying which emails the user still has not replied to.

• Size of the circle helps in understanding how much conversation the user has had with a given
person.

Similarly, we think following are the current/potential disadvantages of POEM:

• It takes a lot of time to load.

• There is no way to reply to an email.

• Emails are not fetched in real-time. Application needs to be refreshed.

After seeing these list of pros and cons, we think that given more time, most of the problems
cause by the cons can be solved. And since there are already more advantages of using POEM, we
strongly believe that in the future this would definitely be a useful tool.

25
 CHAPTER

USER STUDY

5.1 Setup

text

26
 CHAPTER

ANALYSIS

6.1 Metric

Metrics derived from the user study

27
 CHAPTER

CONCLUSION

7.1 Overall Purpose of POEM

text

7.2 Information gained from the analysis

text

7.3 What was good, what could be improved?

text

7.4 Future Work

text

28
 BIBLIOGRAPHY

[110] AOL Has Highest Email Breach Rate, Gmail The Lowest: Study.

[Car07] Carenini, G. et al. “Summarizing email conversations with clue words”. Proceedings of
the 16th international conference on World Wide Web. 2007, pp. 91–100.

[Cla07] Clayton, R. “Email traffic: a quantitative snapshot.” CEAS. 2007.

[Coh09] Cohen, M. A. et al. “Auditory recognition memory is inferior to visual recognition mem-
ory”. Proceedings of the National Academy of Sciences 106.14 (2009), pp. 6008–6010.

[Fra05] Frau, S. et al. “Dynamic Coordinated Email Visualization”. 13th International Conference
on Computer Graphics, Visualization and Computer Vision. Ed. by Skala, V. (Jan 31 - Feb
4). 2005, pp. 187–193.

[Gil15] Gill, B. E-Mail: Not Dead, Evolving. 2015.

[Ham09] Hampton, K. N. et al. “Social isolation and new technology”. Pew Internet & American
Life Project 4 (2009).

[Kan16] Kannan, A. et al. “Smart reply: Automated response suggestion for email”. Proceedings
of the 22nd ACM SIGKDD International Conference on Knowledge Discovery and Data
Mining. 2016, pp. 955–964.

[Ker] Kerr, B. “Thread Arcs: an email thread visualization”. IEEE Symposium on Information
Visualization 2003 (IEEE Cat. No.03TH8714) ().

[Kli04] Klimt, B. & Yang, Y. “The Enron Corpus: A New Dataset for Email Classification Research”.
Machine Learning: ECML 2004. Ed. by Boulicaut, J.-F. et al. Berlin, Heidelberg: Springer
Berlin Heidelberg, 2004, pp. 217–226.

[Man04] Mandic, M. & Kerne, A. “Famailiar & intimacy-based email visualization”. IEEE Sympo-
sium on Information Visualization. IEEE. 2004, p14–p14.

[Mar16] Mark, G. et al. “Email Duration, Batching and Self-interruption”. Proceedings of the 2016
CHI Conference on Human Factors in Computing Systems (2016).

[Pel77] Pellegrino, J. W. et al. “Picture-word differences in decision latency: An analysis of single

and dual memory models”. Memory & Cognition 5.4 (1977), pp. 383–396.

[Ros15] Rosoff, M. People either check email all the time, or barely at all. 2015.

[Sch18] Schawbel, D. Back to human: How great leaders create connection in the age of isolation.
Hachette UK, 2018.

29
[Ema] The Past, Present and Future of Emails: Evolution of Emails.

[Thu15] Thudt, A. et al. “Visual mementos: Reflecting memories with personal data”. IEEE trans-
actions on visualization and computer graphics 22.1 (2015), pp. 369–378.

[Tom09] Tomlinson, R. “The first network email”. Site de Ray Tomlinson (2009).

[Ven03] Venolia, G. D. & Neustaedter, C. “Understanding sequence and reply relationships within
email conversations: a mixed-model visualization”. Proceedings of the SIGCHI confer-
ence on Human factors in computing systems. 2003, pp. 361–368.

[Vié06] Viégas, F. B. et al. “Visualizing email content: portraying relationships from conversa-
tional histories”. Proceedings of the SIGCHI conference on Human Factors in computing
systems. 2006, pp. 979–988.

[Wat03] Wattenberg, M. & Millen, D. “Conversation thumbnails for large-scale discussions”.

CHI’03 extended abstracts on Human factors in computing systems. 2003, pp. 742–743.

30
APPENDIX

31
 APPENDIX

APPENDIX - A

A.1 A First Section

Sed commodo posuere pede. Mauris ut est. Ut quis purus. Sed ac odio. Sed vehicula hendrerit
sem. Duis non odio. Morbi ut dui. Sed accumsan risus eget odio. In hac habitasse platea dictumst.
Pellentesque non elit. Fusce sed justo eu urna porta tincidunt. Mauris felis odio, sollicitudin sed,
volutpat a, ornare ac, erat. Morbi quis dolor. Donec pellentesque, erat ac sagittis semper, nunc dui
lobortis purus, quis congue purus metus ultricies tellus. Proin et quam. Class aptent taciti sociosqu
ad litora torquent per conubia nostra, per inceptos hymenaeos. Praesent sapien turpis, fermentum
vel, eleifend faucibus, vehicula eu, lacus.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Donec odio elit, dictum in, hendrerit sit amet, egestas sed, leo. Praesent feugiat sapien aliquet
odio. Integer vitae justo. Aliquam vestibulum fringilla lorem. Sed neque lectus, consectetuer at,
consectetuer sed, eleifend ac, lectus. Nulla facilisi. Pellentesque eget lectus. Proin eu metus. Sed
porttitor. In hac habitasse platea dictumst. Suspendisse eu lectus. Ut mi mi, lacinia sit amet, placerat
et, mollis vitae, dui. Sed ante tellus, tristique ut, iaculis eu, malesuada ac, dui. Mauris nibh leo,
facilisis non, adipiscing quis, ultrices a, dui.
Morbi luctus, wisi viverra faucibus pretium, nibh est placerat odio, nec commodo wisi enim

32
Table A.1 A table in the appendix.

System Author
TEX Donald Knuth
LATEX Leslie Lamport

eget quam. Quisque libero justo, consectetuer a, feugiat vitae, porttitor eu, libero. Suspendisse sed
mauris vitae elit sollicitudin malesuada. Maecenas ultricies eros sit amet ante. Ut venenatis velit.
Maecenas sed mi eget dui varius euismod. Phasellus aliquet volutpat odio. Vestibulum ante ipsum
primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque sit amet pede ac sem
eleifend consectetuer. Nullam elementum, urna vel imperdiet sodales, elit ipsum pharetra ligula,
ac pretium ante justo a nulla. Curabitur tristique arcu eu metus. Vestibulum lectus. Proin mauris.
Proin eu nunc eu urna hendrerit faucibus. Aliquam auctor, pede consequat laoreet varius, eros tellus
scelerisque quam, pellentesque hendrerit ipsum dolor sed augue. Nulla nec lacus.
Suspendisse vitae elit. Aliquam arcu neque, ornare in, ullamcorper quis, commodo eu, libero.
Fusce sagittis erat at erat tristique mollis. Maecenas sapien libero, molestie et, lobortis in, sodales
eget, dui. Morbi ultrices rutrum lorem. Nam elementum ullamcorper leo. Morbi dui. Aliquam sagittis.
Nunc placerat. Pellentesque tristique sodales est. Maecenas imperdiet lacinia velit. Cras non urna.
Morbi eros pede, suscipit ac, varius vel, egestas non, eros. Praesent malesuada, diam id pretium
elementum, eros sem dictum tortor, vel consectetuer odio sem sed wisi.

33