2014 Capstone Project - Project Proposal. Mail+ Explore, Reflect, Reminisce on Your Archive. Zening Qu, Jessie Liyin Xue, Yeaseul Kim

Transcription

1 2014 Capstone Project - Project Proposal Mail+ Explore, Reflect, Reminisce on Your Archive Qu, Jessie Liyin Xue, Yeaseul Kim Human Centered Design & Engineering University of Washington Mail+ is a visualization tool that can be embedded in the standard interface that encourages users to (1) explore their archived accumulated over years, (2) reflect on their usage patterns and network of contacts, (3) reminisce over significant life events (e.g. success, failure, joy, grief).

2 Project Vision services are passive life-logging systems. They silently capture the users life experiences in situ and no additional action is required from the users end to record an event (Sudheendra et al. 2011). An archive may contain birthday wishes to friends and families, photos and documents shared with co-workers, job applications, offer letters, discussions about work, receipts and important information that needs to be backed up, and various mailing list messages and forum news feeds. Besides the rich content, archives also record rich metadata that tells much about a user s social contact and her interaction patterns. In a sense, conversations represent a social network that the user never consciously constructed. It naturally emerged in the communication. With the ever decreasing cost to store s in cloud servers, many webmail providers (e.g. Google) promised their users that they would never have to delete their s due to storage limit. Nowadays it is not uncommon to see the archives that cover years, even decades. All these facts make archives a valuable resource to explore, reflect, and reminisce upon. Unfortunately, while service providers routinely mine archives for targeting advertisements, there are much fewer tools for users to make sense of their own data (Sudheendra et al. 2011). A typical service interface today consists of a list view of all s in reverse chronological order. While this interface is very effective in presenting the latest incoming messages, it hides the major body of the archive. There are few stimuli that encourage exploration, reflection and reminiscence, and it is hard to navigate through a large archive. On the other hand, there are some analysis and reflection tools offered as standalone applications. These tools help users monitor their social networks (e.g. the Immersion project, see Appendix), message reply patterns (Bernard 2003, Perer 2006), topics (Fernanda 2006, Sudheendra et al. 2011), sentiments (Sudheendra et al. 2011) and how these changes over time. Although these standalone applications provide powerful data mining and visualization techniques, they are not integrated into the typical interface. As a result, these tools only reach a small portion of users. We see a gap between the typical list-based interface and the various standalone visualization applications (see Appendix). We want to investigate how data visualization tools embedded in a typical interface can improve user experience. We envision that these embedded tools can augment users browsing and navigation experiences, provide context for thread conversations, stimulate reflection and reminiscence on one s personal and professional life, and depict the social and technological local environment that a user is living in. To sum up, in this project our team is going to answer the question How can data visualization tools embedded in a typical (list-based) interface encourage user exploration, reflection, and reminiscence and how can it improve browsing experience?. We will answer this question by taking a user-centered approach to design, prototype, evaluate and implement these embedded visualization tools.

3 User-Centered Approach Milestone 1. [week 2] Literature Review + Competitive Analysis The project begins with a literature review and competitive analysis of existing visualization tools. Our preliminary research (Sudheendra et al. 2011, Appendix) shows that four memory cues are very important for encouraging user exploration in their archives: (1) topic terms and keywords, (2) social groups, (3) sentiment of conversations, (4) image attachments. Most standalone visualization tools leverage one or more of these memory cues and some of them claimed that these cues were so engaging that participants in their user studies spent hours to explore the archive. We will investigate further in the literature to inspire our initial design. Milestone 2. [week 4] Design + User Feedback Based on insights from the previous milestone we will brainstorm about visualization solutions that are suitable for integrating into the typical interface. Each team member will come up with at least one unique solution that may eventually be incorporated into the final design. We will create paper prototypes of our brainstorming ideas and gather user feedback (4 to 6 users, interviews) at an early stage in the design process. The purpose of this step is to investigate (1) whether there is value in embedding visualizations in the interface, (2) whether our design interfere with users current usage of s. Based on user feedback and lessons we learned, we will come up with our final design for this project. We will define the visualization techniques we want to use, functions we want to implement, page layout, navigation flow and visual design. Milestone 3. [week 9] Implementation + Evaluation A core part of the project is implementation. We plan to implement an interactive web prototype built on top of Gmail. We will scrape our personal archives from Google using Gmail API. These archives will drive the visualizations in our prototype. The programing techniques we intend to use are HTML/CSS, Javascript and D3. After implementation we will recruit users to evaluate our tool. Depending on the purpose of the visualization we may evaluate whether it is easier for users to navigate to older s, whether the new interface encourages exploration, whether users generate questions and hypotheses during the exploration process, whether users think the overall experience is engaging/disturbing. Milestone 4. [week 10] Presentation + Final Deliverables We will gather materials we ve created during the UCD process. Our final deliverables include: (1) literature review/competitive analysis report, (2) initial design sketches, (3) initial design paper prototype, (4) user study report, (5) final design booklet/prototype, (6) interactive prototype, (7) evaluation report, (8) poster.

4 Task Breakdown Task Due Week2 4/7 Team Member Yeaseul Jessie: : Task/Milestone Milestone 1. Literature review / competitive analysis MUSE: Reviving Memories Using Archives; Visualization and Analysis of Networks; IBM Research Report THREAD ARCS: An Thread Visualization Understanding Sequence and Reply Relationships within Conversations: A Mixed-Model Visualization MUSE: Reviving Memories Using Archives; Contrasting Portraits of Practices: Visual approaches to reflection and analysis Beyond Threads: Identifying Discussions in Archives Adam Perer*, Ben Shneiderman Using Rhythms of Relationships to Understand Archives MUSE: Reviving Memories Using Archives Analysis and Visualization of Communication Using Graph Template Language Visualizing Content: Portraying Relationships from Conversational Histories Digital Artifacts for Remembering and Storytelling: PostHistory and Social Network Fragments Milestone 2. Initial prototype + User Feedback 4/12 Yeaseul Jessie Meet and Brainstorm 3-5 potential visualization layouts based from lit review, in particular, the MUSE paper 4/18 Jessie Implement the 3-5 layout into Adobe Illustrator in grey scale as low fidelity wireframes, save as pdf for further user review Week4 4/21 Yeaseul Bring low fidelity wireframes to 3-5 participants for initial user feedback. Milestone 3. Implementation + Evaluation 4/23 Yeaseul Create collaborating folders with HTML/CSS/Javascript and images all ready 4/28 Start application in local machine and code basic Gmail interface in HTML/CSS to set up framework to work in 4/28 Yeaseul Synthesize user feedback from previous interviews and create word doc for a list of key

5 Jessie 5/5 Yeaseul Jessie 5/10 Yeaseul Jessie elements/features to implement in the final prototype. Meet and draw the final prototype with specific requirements, including page layout, navigation, flow, visual, and types of visualization. Read d3 documents and learn its syntax for visualization 5/10 Provide help to Yeaseul and Jessie on d3 5/17 Yeaseul Build Visualization #1 in D3 javascript (i.e.timeframe) 5/17 Jessie Build Visualization #2 in D3 javascript (i.e. keyword/attachment) 5/17 Build Visualization #3 in D3 javascript (i.e. keyword/attachment) 5/20 Clean up final website, test all features functionality, consistency 5/24 Yeaseul Recruit 3-5 participants to collect feedback based on usability, visual, and comments 5/24 Jessie Recruit 3-5 participants to collect feedback based on usability, visual, and comments 5/24 Recruit 3-5 participants to collect feedback based on usability, visual, and comments Week 9 5/26 Made changes to Mail+ based on user feedback collected from previous week Milestone 4. Final Deliverable + Poster 5/29 Jessie Yeaseul Complete poster content in draft google shared PPT 5/30 Jessie Create poster in InDesign based on PPT + send to print 6/1 Yeaseul Print + pick up poster 6/1 Turn in final Mail+ application Week 10 6/2 Jessie Yeaseul Final Poster Session

6 Resources Data : - Sample threads are needed. We can script ours own archives using Gmail API / Greasemonkey or use the Enron data set. Database: - Building database to store and retrieve data - Accessing to publication database [ACM digital library etc] Incentives: - For participants in the evaluation process Softwares: - D3 library /Sublime Text 2 / Gmail API / Adobe Suite Communicating / Collaborating / Documenting: - GitHub / Google Drive

7 References Fu, X., Hong, S. H., Nikolov, N. S., Shen, X., Wu, Y., & Xu, K. (2007, February). Visualization and analysis of networks. In Visualization, APVIS' th International Asia-Pacific Symposium on (pp. 1-8). IEEE. Hangal, Sudheendra, Monica S. Lam, and Jeffrey Heer. "Muse: Reviving memories using archives." Proceedings of the 24th annual ACM symposium on User interface software and technology. ACM, Kachare, Atul, S. A. S. Analysis and Visualization of Communication Using Graph Template Language. Kerr, Bernard. "Thread arcs: An thread visualization." Information Visualization, INFOVIS IEEE Symposium on. IEEE, Perer, A., Shneiderman, B., & Oard, D. W. (2006). Using rhythms of relationships to understand archives. Journal of the American Society for Information Science and Technology, 57(14), Perer, Adam, and Ben Shneiderman. Beyond threads: Identifying discussions in archives. MARYLAND UNIV COLLEGE PARK HUMAN COMPUTER INTERACTION LAB, Perer, A., & Smith, M. A. (2006, May). Contrasting portraits of practices: visual approaches to reflection and analysis. In Proceedings of the working conference on Advanced visual interfaces (pp ). ACM. Venolia, G. D., & Neustaedter, C. (2003, April). Understanding sequence and reply relationships within conversations: a mixed-model visualization. InProceedings of the SIGCHI conference on Human factors in computing systems (pp ). ACM. Viégas, F. B., & Smith, M. (2004, January). Newsgroup crowds and authorlines: Visualizing the activity of individuals in conversational cyberspaces. In System Sciences, Proceedings of the 37th Annual Hawaii International Conference on (pp. 10-pp). IEEE. Viégas, F. B., Boyd, D., Nguyen, D. H., Potter, J., & Donath, J. (2004, January). Digital artifacts for remembering and storytelling: Posthistory and social network fragments. In System Sciences, Proceedings of the 37th Annual Hawaii International Conference on (pp. 10-pp). IEEE. Viégas, F. B., Golder, S., & Donath, J. (2006, April). Visualizing content: portraying relationships from conversational histories. In Proceedings of the SIGCHI conference on Human Factors in computing systems (pp ). ACM.

8 Appendix - Preliminary Competitive Analysis 1. Immersion: a people centric view of your life 2. Viz: Visualization Research at the University of Maryland hierarchical clustering on temporal patterns to identify relationships

9 correspondent tree map 2D scatter plot: number of s received from a correspondent vs number of s sent to a correspondent authorline

10 3. Anymails Visualization of my inbox carohorn.de 4. Th visualization Fernanda Viégas this one visualized keywords More from the same author: mountain: calendar and correspondent:

11 5. THREAD ARCS: An Thread Visualization IBM Research visualization of a single thread. each dot is a message in that thread. each arc denotes that the later message is a reply to the earlier message.

12 6. ARUP Visualization OOM Creative 7. My Map Christopher Baker

13 8. Analysis and Visualization of Communication using Graph Template Language How does topics change over time: 9. Enron data set: An example visualization: viz/ 10. From peer reviews: IBM s Mail Next, business oriented, their inbox is not list any more, quite interesting. experience/ibms mail next original in the social businessenterprise ibmconnect php Graph your inbox, Chrome extension, it s like having google analytics for your inbox your inbox analytics for gmail/