The mock-up was perfect.
The app isn’t.
Spot the difference.
Designers hunt for them by eye.
Annotate screenshots. Send them back. Repeat, iteration after iteration.
MOCK-UP
IMPLEMENTATION
Button moved
Wrong font color
Icon missing
Introducing
GVT
Mock-up vs. app, checked automatically.
Read both GUIs.
GVT parses the designer’s mock-up and the running app into components.
MOCK-UP
Sketch export
Every component’s position, size and text.
uiautomator
xml + screenshot
APP
Runtime hierarchy
Captured from a device or emulator.
Match every component.
Each mock-up leaf is paired with its nearest app component by position and size.
gui comprehension · nearest neighbor, k = 1
γ = |xm−xr| + |ym−yr| + |wm−wr| + |hm−hr|
title ↔ TextView γ = 0 matched
button ↔ Button γ = 24 matched
icon 3 ↔ — γ > ⅛ screen missing
Name every violation.
Perceptual image differencing flags pairs that look different. Layout, text and resource checks say how.
gvt · design violation report
LAYOUT button vertical translation
TEXT title font color mismatch
RESOURCE icon 3 missing component
200 injected design violations · 100 app screens
98.4%classification precision
96.5%recall
22 sper screen pair
It catches what developers miss.
Ten Android developers, each with 5+ years’ experience, audited screens from the same set.
Built with Huawei · used by over 1,000 designers & developers
“We found that the tool can indeed detect something that the naked eye cannot.”
— Designer at Huawei, on GVT
Automated Reporting of GUI Design Violations for Mobile Apps
Kevin Moran · Boyang Li · Carlos Bernal-Cárdenas · Dan Jelf · Denys Poshyvanyk
ICSE 2018 · IEEE/ACM International Conference on Software Engineering