Isopleth
Isopleth embeds scaffolds to expose hidden functional relationships, surface related slices of code, and support learners manipulating the code representations.
Isopleth
Sensemaking in Pro Code
Ply
[Secondary Author] Ply is a CSS tool that implements visual relevance testing to identify properties that have visual effects on the page. Ply hides visually irrelevant code and surfaces unintuitive relationships between visual properties.
Ply: A Visual Web Inspector for Learning from Professional Webpages [UIST 2018] PDF
Ply
Decode visual relevance from the rendered DOM
Readily Available Learning Experiences
Readily Available Learning Experiences on the open web surface hidden design patterns, code constructs, and relationships in professional websites to help inexperienced developers learn pro concepts. Committee includes Haoqi Zhang (Advisor), Rob Miller (MIT), Eleanor O'Rourke, Darren Gergle.
Dissertation
RALE: Learn From the Web
Rico UI Mining
[Secondary Author] A system that combines crowdsourcing and automation to scalably mine design and interaction data from Android apps at runtime.
YouTube: Coming Soon
YouTube: UIST 2017 Talk (Biplab Deka)
GitHub: CrowdSTF, my contribution to this paper.
Rico: A Mobile App Dataset for Building Data-Driven Design Applications [UIST 2017] PDF
Rico: UI Mining
UI Crowdsourcing and Interaction Mining
Telescope: UI Discovery
Under the hood, Web UI complexity easily overwhelms the curious. Telescope instruments website source code to bring fine-tunable views of how website interactions were created in JavaScript and HTML.
Telescope: Fine-Tuned Discovery of Interactive Web UI Feature Implementation [UIST 2016] PDF
Telescope UI Discovery
Interaction Streaming and Fine-Tuned Source Code Exploration
Unravel: Source Tracing
Professional websites with complex UI features provide real-world examples for developers to learn from. Unravel extends the Chrome Developer Tools to quickly track and visualize HTML changes, JavaScript method calls, and JavaScript libraries.
Unravel Source Tracing
Feature Recording, Source Tracing, and Library Detection
Crowd Camp: The Dancing Professor
During CrowdCamp at HCOMP 2014, we developed a project called “The Dancing Professor” that earned its name from the motions professors make when trying to explain visual ideas with physical body movements instead of making an illustration. While participating in online courses, students are often confused by ideas presented in a video lecture. How can we aid learning and improve the illustration of concepts and ideas for online courses? With an augmented web-learning interface, students can give and receive help at certain time intervals throughout a lecture.
Read more over at the Crowd Research Blog.
The Dancing Professor
What do those motions mean?
Stack Exchange Expertise
What does the reputation distribution look like within stack exchange communities? How does answer frequency correlate with reputation earned? How often are accepted solutions the best solutions? What are underdog answers? What are the batting averages of the top contributors of Stack Overflow? What tags are most likely to earn top reputation points? How can an interface augment reputation earned for the better?
Explore my discussion on Meta.StackOverflow and see related interactive plots on my plotly page.
Stack Exchange Expertise
It's all about rep
The Peanut Gallery
A simple dashboard is provided for a presenter to see a real-time aggregate of thoughts and emotions submitted by audience members. With the ability to vote as an audience member, presenters can see popular and trending ideas and questions in their audience. Numerical and charted views update with responses, indicating whether the audience is feeling lost, content, angry, or a combination of emotional states.
The architecture of Peanut Gallery relies on live event propagation over WebSockets, NodeJS routing, and real-time in memory map-reduce.
The Peanut Gallery
Sense your audience in real-time