Modeling Mobile Interface Tappability Using Crowdsourcing and Deep Learning
Tapping is an immensely important gesture in mobile touchscreen interfaces, yet people still frequently are required to learn which elements are tappable through trial and error. Predicting human behavior for this everyday gesture can help mobile app designers understand an important aspect of the usability of their apps without having to run a user study. In this paper, we present an approach for modeling tappability of mobile interfaces at scale. We conducted large-scale data collection of interface tappability over a rich set of mobile apps using crowdsourcing and computationally investigated a variety of signifiers that people use to distinguish tappable versus not-tappable elements. Based on the dataset, we developed and trained a deep neural network that predicts how likely a user will perceive an interface element as tappable versus not tappable. Using the trained tappability model, we developed TapShoe, a tool that automatically diagnoses mismatches between the tappability of each element as perceived by a human user---predicted by our model, and the intended or actual tappable state of the element specified by the developer or designer. Our model achieved reasonable accuracy: mean precision 90.2% and recall 87.0%, in matching human perception on identifying tappable UI elements. The tappability model and TapShoe were well received by designers via an informal evaluation with 7 professional interaction designers.
Research Questions / Practical Problems
Question signals indexed for this paper.
- 75%
Rewire: Interface Design Assistance from Examples
CHI '18· Prototyping & User Testing
- 75%
Poirot: A Web Inspector for Designers
CHI '19· Prototyping & User Testing
- 75%
Steering Performance with Error-accepting Delays
CHI '19· Prototyping & User Testing +1
- 75%
Demystifying Tacit Knowledge in Graphic Design: Characteristics, Instances, Approaches, and Guidelines
CHI '24· Prototyping & User Testing
- 67%
Exploring The Future of Data-Driven Product Design
CHI '20· Knowledge Worker Tools & Workflows +2
- 60%
Charrette: Supporting In-Person Discussions around Iterations in User Interface Design
CHI '18· Creative Collaboration & Feedback Systems +1
- 60%
Swire: Sketch-based User Interface Retrieval
CHI '19· Immersion & Presence Research +1
- 60%
ForceRay: Extending Thumb Reach via Force Input Stabilizes Device Grip for Mobile Touch Input
CHI '19· Force Feedback & Pseudo-Haptic Weight +1
- 60%
Modeling Fully and Partially Constrained Lasso Movements in a Grid of Icons
CHI '19· Prototyping & User Testing +1
- 60%
The Designer's Body as Resource in Design: Exploring Combinations of Point-of-view and Tense
CHI '20· Haptic Wearables +1
Based on Jaccard similarity of research subtopics & professions (≥60%)