Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
skip to main content
research-article

Wireframe-based UI Design Search through Image Autoencoder

Published: 16 June 2020 Publication History

Abstract

UI design is an integral part of software development. For many developers who do not have much UI design experience, exposing them to a large database of real-application UI designs can help them quickly build up a realistic understanding of the design space for a software feature and get design inspirations from existing applications. However, existing keyword-based, image-similarity-based, and component-matching-based methods cannot reliably find relevant high-fidelity UI designs in a large database alike to the UI wireframe that the developers sketch, in face of the great variations in UI designs. In this article, we propose a deep-learning-based UI design search engine to fill in the gap. The key innovation of our search engine is to train a wireframe image autoencoder using a large database of real-application UI designs, without the need for labeling relevant UI designs. We implement our approach for Android UI design search, and conduct extensive experiments with artificially created relevant UI designs and human evaluation of UI design search results. Our experiments confirm the superior performance of our search engine over existing image-similarity or component-matching-based methods and demonstrate the usefulness of our search engine in real-world UI design tasks.

References

[1]
2015. Appcelerator/IDC 2015 Mobile Trends Report: Data Access Is the New Mobile Problem. Retrieved April 25, 2018 from https://www.appcelerator.com/resource-center/research/2015-mobile-trends-report/.
[2]
2017. Essential Free UI Kits for Mobile App Designers. Retrieved April 25, 2018 from https://1stwebdesigner.com/ui-kits-for-mobile/.
[3]
2018. 30+ Great UI Kits for iOS Engineers. Retrieved April 25, 2018 from https://medium.com/flawless-app-stories/30-great-ui-kits-for-ios-engineers-41b2732896b9.
[4]
2018. Designing the UI of Google Translate. Retrieved from https://medium.com/google-design/a-fish-in-your-ear-134deed70268.
[5]
2018. Develop for Android—Material Design. Retrieved from https://material.io/develop/android/.
[6]
2018. Dribbble—Discover the World’s Top Designers 8 Creative Professionals. Retrieved from https://dribbble.com/.
[7]
2018. A Fish in Your Ear. Retrieved from https://medium.com/google-design/a-fish-in-your-ear-134deed70268.
[8]
2018. Five Free UI Kits for Adobe XD Created by Top UX Designers. Retrieved April 25, 2018 from https://theblog.adobe.com/five-top-ux-designers-five-ui-kits-adobe-xd-now-available-free/.
[9]
2018. Free Mobile UI Kits. Retrieved April 25, 2018 from https://psddd.co/category/mobile-ui-kits/.
[10]
2018. Human Interface Guidelines--Design--Apple Developer. Retrieved from https://developer.apple.com/design/human-interface-guidelines/.
[11]
2018. UI Movement - The best UI design inspiration, every day. Retrieved from https://uimovement.com/.
[12]
2018. Why Is Good UI Design So Hard for Some Developers? Retrieved from https://stackoverflow.com/questions/514083/why-is-good-ui-design-so-hard-for-some-developers.
[13]
2019. Android Documentation—User Interface 8 Navigation. Retrieved from https://developer.android.com/guide/topics/ui.
[14]
2020. Adobe Xd. Retrieved from https://www.adobe.com/uk/products/xd.html?red=av.
[15]
2020. Balsamiq Mockups. Retrieved from https://balsamiq.com/products/.
[16]
2020. Fluid UI. Retrieved from https://www.fluidui.com/.
[17]
Zhou, Alan C. Bovik, Hamid R. Sheikh, Eero P. Simoncelli, et al. 2004. Image quality assessment: From error visibility to structural similarity. IEEE Trans. Image Process. 13, 4 (2004), 600--612.
[18]
Lingfeng Bao, Zhenchang Xing, Xinyu Wang, and Bo Zhou. 2015. Tracking and analyzing cross-cutting activities in developers’ daily work (N). In Proceedings of the 2015 30th IEEE/ACM International Conference on Automated Software Engineering (ASE’15). IEEE, 277--282.
[19]
Farnaz Behrang, Steven P. Reiss, and Alessandro Orso. 2018. GUIfetch: Supporting app design and development through GUI search. In Proceedings of the 5th International Conference on Mobile Software Engineering and Systems. ACM, 236--246.
[20]
Tony Beltramelli. 2018. pix2code: Generating code from a graphical user interface screenshot. In Proceedings of the ACM SIGCHI Symposium on Engineering Interactive Computing Systems. ACM, 3.
[21]
James O. Berger. 2013. Statistical Decision Theory and Bayesian Analysis. Springer Science 8 Business Media.
[22]
Carlos Bernal-Cárdenas, Kevin Moran, Michele Tufano, Zichang Liu, Linyong Nan, Zhehan Shi, and Denys Poshyvanyk. 2019. Guigle: A GUI search engine for android apps. In Proceedings of the 41st International Conference on Software Engineering: Companion Proceedings (Montreal, Quebec, Canada) (ICSE'19). IEEE Press, 71--74. https://doi.org/10.1109/ICSE-Companion.2019.00041
[23]
Léon Bottou. 2010. Large-scale machine learning with stochastic gradient descent. In Proceedings of COMPSTAT’2010. Springer, 177--186.
[24]
Matthew Brown and David G. Lowe. 2007. Automatic panoramic image stitching using invariant features. International Journal of Computer Vision 74, 1 (2007), 59--73.
[25]
Chunyang Chen, Xi Chen, Jiamou Sun, Zhenchang Xing, and Guoqiang Li. 2018. Data-driven proactive policy assurance of post quality in community q8a sites. In Proceedings of the ACM on Human-Computer Interaction. 1--22.
[26]
Chunyang Chen, Sidong Feng, Zhenchang Xing, Linda Liu, Shengdong Zhao, and Jinshui Wang. 2019. Gallery DC: Design search and knowledge discovery through auto-created GUI component gallery. In Proceedings of the ACM on Human-Computer Interaction. 1--22.
[27]
Chunyang Chen, Ting Su, Guozhu Meng, Zhenchang Xing, and Yang Liu. 2018. From UI design image to GUI skeleton: A neural machine translator to bootstrap mobile GUI implementation. In Proceedings of the 40th International Conference on Software Engineering. ACM, 665--676.
[28]
Chunyang Chen, Zhenchang Xing, Yang Liu, and Kent Long Xiong Ong. 2019. Mining likely analogical apis across third-party libraries via large-scale unsupervised api semantics embedding. IEEE Trans. Softw. Eng. (2019). https://doi.org/10.1109/TSE.2019.2896123
[29]
Guibin Chen, Chunyang Chen, Zhenchang Xing, and Bowen Xu. 2016. Learning a dual-language vector space for domain-specific cross-lingual question retrieval. In Proceedings of the 2016 31st IEEE/ACM International Conference on Automated Software Engineering (ASE’16). IEEE, 744--755.
[30]
Jieshan Chen, Chunyang Chen, Zhenchang Xing, Xiwei Xu, Liming Zhu, Guoqiang Li, and Jinshui Wang. 2020. Unblind your apps: Predicting natural-language labels for mobile GUI components by deep learning. In Proceedings of the 42nd International Conference on Software Engineering (ICSE’20). ACM, New York, NY.
[31]
Sen Chen, Lingling Fan, Chunyang Chen, Ting Su, Wenhe Li, Yang Liu, and Lihua Xu. 2019. Storydroid: Automated generation of storyboard for Android apps. In Proceedings of the 2019 IEEE/ACM 41st International Conference on Software Engineering (ICSE’19). IEEE, 596--607.
[32]
Sen Chen, Lingling Fan, Chunyang Chen, Minhui Xue, Yang Liu, and Lihua Xu. 2019. GUI-squatting attack: Automated generation of Android phishing apps. IEEE Trans. Depend. Sec. Comput. (2019). https://doi.org/10.1109/TDSC.2019.2956035
[33]
Jacob Cohen. 1960. A coefficient of agreement for nominal scales. Educ. Psychol. Meas. 20, 1 (1960), 37--46.
[34]
Ekin D. Cubuk, Barret Zoph, Dandelion Mane, Vijay Vasudevan, and Quoc V. Le. 2019. Autoaugment: Learning augmentation strategies from data. In Proceedings of the IEEE Conference on Computer Vision and Pattern Recognition. 113--123.
[35]
Biplab Deka, Zifeng Huang, Chad Franzen, Joshua Hibschman, Daniel Afergan, Yang Li, Jeffrey Nichols, and Ranjitha Kumar. 2017. Rico: A mobile app dataset for building data-driven design applications. In Proceedings of the 30th Annual ACM Symposium on User Interface Software and Technology. ACM, 845--854.
[36]
Carl Doersch. 2016. Tutorial on variational autoencoders. arXiv preprint arXiv:1606.05908 (2016).
[37]
Bardia Doosti, Tao Dong, Biplab Deka, and Jeffrey Nichols. 2018. A computational method for evaluating UI patterns. arXiv preprint arXiv:1807.04191 (2018).
[38]
Joseph L. Fleiss. 1971. Measuring nominal scale agreement among many raters. Psychol. Bull. 76, 5 (1971), 378.
[39]
Ross Girshick. 2015. Fast r-cnn. In Proceedings of the IEEE International Conference on Computer Vision. 1440--1448.
[40]
James Hafner, Harpreet S. Sawhney, William Equitz, Myron Flickner, and Wayne Niblack. 1995. Efficient color histogram indexing for quadratic form distance functions. IEEE Trans. Pattern Anal. Mach. Intell. 17, 7 (1995), 729--736.
[41]
Ju Han and Kai-Kuang Ma. 2002. Fuzzy color histogram and its use in color image retrieval. IEEE Trans. Image Process. 11, 8 (2002), 944--952.
[42]
Jason Hong. 2011. Matters of design. ACM 54, 2 (Feb. 2011), 10--11. https://doi.org/10.1145/1897816.1897820
[43]
Thought Leadership White Paper. IBM Software. 2012. Native, web or hybrid mobile-app development. Retrieved from http://cdn.computerworld.com.au/whitepaper/371126/native-web-or-hybrid-mobile-app-development/download/?type=other8arg=08location=featured_list.
[44]
Sergey Ioffe and Christian Szegedy. 2015. Batch normalization: Accelerating deep network training by reducing internal covariate shift. arXiv preprint arXiv:1502.03167 (2015).
[45]
Anil K. Jain and Aditya Vailaya. 1996. Image retrieval using color and shape. Pattern Recogn. 29, 8 (1996), 1233--1244.
[46]
Bernard J. Jansen. 1998. The graphical user interface. ACM SIGCHI Bull. 30, 2 (1998), 22--26.
[47]
Richard M. Karp, Umesh V. Vazirani, and Vijay V. Vazirani. 1990. An optimal algorithm for on-line bipartite matching. In Proceedings of the 22nd Annual ACM Symposium on Theory of Computing. ACM, 352--358.
[48]
Yan Ke, Rahul Sukthankar, Larry Huston, Yan Ke, and Rahul Sukthankar. 2004. Efficient near-duplicate detection and sub-image retrieval. In Proceedings of the ACM Multimedia Conference, Vol. 4. Citeseer, 5.
[49]
Robert Keys. 1981. Cubic convolution interpolation for digital image processing. IEEE Trans. Acoust. Speech Sign. Process. 29, 6 (1981), 1153--1160.
[50]
Alex Krizhevsky, Ilya Sutskever, and Geoffrey E. Hinton. 2012. Imagenet classification with deep convolutional neural networks. In Advances in Neural Information Processing Systems. 1097--1105.
[51]
Ranjitha Kumar, Arvind Satyanarayan, Cesar Torres, Maxine Lim, Salman Ahmad, Scott R. Klemmer, and Jerry O. Talton. 2013. Webzeitgeist: Design mining the web. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems. ACM, 3083--3092.
[52]
Yann LeCun, Yoshua Bengio, and Geoffrey Hinton. 2015. Deep learning. Nature 521, 7553 (2015), 436--444.
[53]
Jing Li, Zhenchang Xing, and Aixin Sun. 2019. LinkLive: Discovering Web learning resources for developers from Q8A discussions. World Wide Web 22, 4 (2019), 1699--1725.
[54]
David G. Lowe. 1999. Object recognition from local scale-invariant features. In Proceedings of the 7th IEEE International Conference on Computer Vision 1999, Vol. 2. IEEE, 1150--1157.
[55]
Collin McMillan, Mark Grechanik, Denys Poshyvanyk, Qing Xie, and Chen Fu. 2011. Portfolio: Finding relevant functions and their usage. In Proceedings of the 33rd International Conference on Software Engineering. ACM, 111--120.
[56]
Aliaksei Miniukovich and Antonella De Angeli. 2016. Pick me!: Getting noticed on Google play. In Proceedings of the 2016 CHI Conference on Human Factors in Computing Systems. ACM, 4622--4633.
[57]
Kevin Moran, Carlos Bernal-Cárdenas, Michael Curcio, Richard Bonett, and Denys Poshyvanyk. 2020. Machine learning-based prototyping of graphical user interfaces for mobile apps. IEEE Transactions on Software Engineering 46, 2 (2020), 196--221.
[58]
Kevin Moran, Boyang Li, Carlos Bernal-Cárdenas, Dan Jelf, and Denys Poshyvanyk. 2018. Automated reporting of GUI design violations for mobile apps. In Proceedings of the 40th International Conference on Software Engineering (Gothenburg, Sweden) (ICSE'18). Association for Computing Machinery, New York, NY, USA, 165--175. https://doi.org/10.1145/3180155.3180246
[59]
Kevin Moran, Cody Watson, John Hoskins, George Purnell, and Denys Poshyvanyk. 2018. Detecting and summarizing GUI changes in evolving mobile apps. In Proceedings of the 33rd ACM/IEEE International Conference on Automated Software Engineering (Montpellier, France) (ASE'18). Association for Computing Machinery, New York, NY, USA, 543--553. https://doi.org/10.1145/3238147.3238203
[60]
Naila Murray and Florent Perronnin. 2014. Generalized max pooling. In Proceedings of the IEEE Conference on Computer Vision and Pattern Recognition. 2473--2480.
[61]
Tuan Anh Nguyen and Christoph Csallner. 2015. Reverse engineering mobile application user interfaces with remaui (t). In Proceedings of the 30th IEEE/ACM International Conference on Automated Software Engineering (ASE’15). IEEE, 248--259.
[62]
Santanu Paul and Atul Prakash. 1994. A framework for source code search using program patterns. IEEE Trans. Softw. Eng. 20, 6 (1994), 463--475.
[63]
Xin Peng, Zhenchang Xing, Xi Tan, Yijun Yu, and Wenyun Zhao. 2011. Iterative context-aware feature location (NIER track). In Proceedings of the 33rd International Conference on Software Engineering. ACM, 900--903.
[64]
Luis Perez and Jason Wang. 2017. The effectiveness of data augmentation in image classification using deep learning. arXiv preprint arXiv:1712.04621 (2017).
[65]
Nikita Prabhu and R. Venkatesh Babu. 2015. Attribute-graph: A graph based approach to image ranking. In Proceedings of the IEEE International Conference on Computer Vision. 1071--1079.
[66]
Steven P. Reiss, Yun Miao, and Qi Xin. 2018. Seeking the user interface. Autom. Softw. Eng. 25, 1 (2018), 157--193.
[67]
Daniel Ritchie, Ankita Arvind Kejriwal, and Scott R. Klemmer. 2011. d. tour: Style-based exploration of design example galleries. In Proceedings of the 24th Annual ACM Symposium on User Interface Software and Technology. ACM, 165--174.
[68]
Ferdian Thung, David Lo, and Julia Lawall. 2013. Automated library recommendation. In Proceedings of the 2013 20th Working Conference on Reverse Engineering (WCRE’13). IEEE, 182--191.
[69]
Pascal Vincent, Hugo Larochelle, Isabelle Lajoie, Yoshua Bengio, and Pierre-Antoine Manzagol. 2010. Stacked denoising autoencoders: Learning useful representations in a deep network with a local denoising criterion. J. Mach. Learn. Res. 11 (Dec. 2010), 3371--3408.
[70]
Jinshui Wang, Xin Peng, Zhenchang Xing, and Wenyun Zhao. 2013. Improving feature location practice with multi-faceted interactive exploration. In Proceedings of the 2013 International Conference on Software Engineering. IEEE Press, 762--771.
[71]
Terry Winograd. 1995. From programming environments to environments for designing. Commun. ACM 38, 6 (1995), 65--74.
[72]
Claes Wohlin, Per Runeson, Martin Höst, Magnus C Ohlsson, Björn Regnell, and Anders Wesslén. 2012. Experimentation in Software Engineering. Springer Science 8 Business Media.
[73]
Zhong Wu, Qifa Ke, Michael Isard, and Jian Sun. 2009. Bundling features for large scale partial-duplicate web image search. In Proceedings of the IEEE Conference on Computer Vision and Pattern Recognition (CVPR’09). IEEE, 25--32.
[74]
Bowen Xu, Zhenchang Xing, Xin Xia, and David Lo. 2017. AnswerBot: Automated generation of answer summary to developersź technical questions. In Proceedings of the 32nd IEEE/ACM International Conference on Automated Software Engineering. IEEE Press, 706--716.
[75]
Bowen Xu, Zhenchang Xing, Xin Xia, David Lo, and Shanping Li. 2018. Domain-specific cross-language relevant question retrieval. Empir. Softw. Eng. 23, 2 (2018), 1084--1122.
[76]
Matthew D. Zeiler and Rob Fergus. 2014. Visualizing and understanding convolutional networks. In Proceedings of the European Conference on Computer Vision. Springer, 818--833.
[77]
Dehai Zhao, Zhenchang Xing, Chunyang Chen, Xiwei Xu, Liming Zhu, Guoqiang Li, and Jinshui Wang. 2020. Seenomaly: Vision-based linting of GUI animation effects against design-don’t guidelines. In Proceedings of the 42nd International Conference on Software Engineering (ICSE’20). ACM, New York, NY.
[78]
Shuyu Zheng, Ziniu Hu, and Yun Ma. 2019. FaceOff: Assisting the manifestation design of web graphical user interface. In Proceedings of the Twelfth ACM International Conference on Web Search and Data Mining (Melbourne VIC, Australia) (WSDM'19). Association for Computing Machinery, New York, NY, USA, 774--777. https://doi.org/10.1145/3289600.3290610

Cited By

View all
  • (2024)UISGPT: Automated Mobile UI Design Smell Detection with Large Language ModelsElectronics10.3390/electronics1316312713:16(3127)Online publication date: 7-Aug-2024
  • (2024)Semi-supervised Crowdsourced Test Report Clustering via Screenshot-Text Binding RulesProceedings of the ACM on Software Engineering10.1145/36607761:FSE(1540-1563)Online publication date: 12-Jul-2024
  • (2024)On Improving Management of Duplicate Video-Based Bug ReportsProceedings of the 2024 IEEE/ACM 46th International Conference on Software Engineering: Companion Proceedings10.1145/3639478.3639786(201-203)Online publication date: 14-Apr-2024
  • Show More Cited By

Recommendations

Comments

Information & Contributors

Information

Published In

cover image ACM Transactions on Software Engineering and Methodology
ACM Transactions on Software Engineering and Methodology  Volume 29, Issue 3
July 2020
292 pages
ISSN:1049-331X
EISSN:1557-7392
DOI:10.1145/3403667
  • Editor:
  • Mauro Pezzè
Issue’s Table of Contents
Permission to make digital or hard copies of all or part of this work for personal or classroom use is granted without fee provided that copies are not made or distributed for profit or commercial advantage and that copies bear this notice and the full citation on the first page. Copyrights for components of this work owned by others than ACM must be honored. Abstracting with credit is permitted. To copy otherwise, or republish, to post on servers or to redistribute to lists, requires prior specific permission and/or a fee. Request permissions from [email protected]

Publisher

Association for Computing Machinery

New York, NY, United States

Publication History

Published: 16 June 2020
Online AM: 07 May 2020
Accepted: 01 March 2020
Revised: 01 March 2020
Received: 01 July 2019
Published in TOSEM Volume 29, Issue 3

Permissions

Request permissions for this article.

Check for updates

Author Tags

  1. Android
  2. UI search
  3. auto-encoder
  4. deep learning

Qualifiers

  • Research-article
  • Research
  • Refereed

Funding Sources

  • ARC Discovery Project scheme
  • Laureate Fellowship
  • Australian Research Council?s Discovery Early Career Researcher Award (DECRA) funding scheme

Contributors

Other Metrics

Bibliometrics & Citations

Bibliometrics

Article Metrics

  • Downloads (Last 12 months)422
  • Downloads (Last 6 weeks)31
Reflects downloads up to 30 Aug 2024

Other Metrics

Citations

Cited By

View all
  • (2024)UISGPT: Automated Mobile UI Design Smell Detection with Large Language ModelsElectronics10.3390/electronics1316312713:16(3127)Online publication date: 7-Aug-2024
  • (2024)Semi-supervised Crowdsourced Test Report Clustering via Screenshot-Text Binding RulesProceedings of the ACM on Software Engineering10.1145/36607761:FSE(1540-1563)Online publication date: 12-Jul-2024
  • (2024)On Improving Management of Duplicate Video-Based Bug ReportsProceedings of the 2024 IEEE/ACM 46th International Conference on Software Engineering: Companion Proceedings10.1145/3639478.3639786(201-203)Online publication date: 14-Apr-2024
  • (2024)Semantic GUI Scene Learning and Video Alignment for Detecting Duplicate Video-based Bug ReportsProceedings of the IEEE/ACM 46th International Conference on Software Engineering10.1145/3597503.3639163(1-13)Online publication date: 20-May-2024
  • (2024)Practical, Automated Scenario-Based Mobile App TestingIEEE Transactions on Software Engineering10.1109/TSE.2024.341467250:7(1949-1966)Online publication date: 1-Jul-2024
  • (2024)Mapping Natural Language Intents to User Interfaces through Vision-Language Models2024 IEEE 18th International Conference on Semantic Computing (ICSC)10.1109/ICSC59802.2024.00045(237-244)Online publication date: 5-Feb-2024
  • (2024)Understanding mobile GUI: From pixel-words to screen-sentencesNeurocomputing10.1016/j.neucom.2024.128200601(128200)Online publication date: Oct-2024
  • (2024)UI semantic component group detection: Grouping UI elements with similar semantics in mobile graphical user interfaceDisplays10.1016/j.displa.2024.10267983(102679)Online publication date: Jul-2024
  • (2023)AG3: Automated Game GUI Text Glitch Detection Based on Computer VisionProceedings of the 31st ACM Joint European Software Engineering Conference and Symposium on the Foundations of Software Engineering10.1145/3611643.3613867(1879-1890)Online publication date: 30-Nov-2023
  • (2023)Understanding Design Collaboration Between Designers and Artificial Intelligence: A Systematic Literature ReviewProceedings of the ACM on Human-Computer Interaction10.1145/36102177:CSCW2(1-35)Online publication date: 4-Oct-2023
  • Show More Cited By

View Options

Get Access

Login options

Full Access

View options

PDF

View or Download as a PDF file.

PDF

eReader

View online with eReader.

eReader

HTML Format

View this article in HTML Format.

HTML Format

Media

Figures

Other

Tables

Share

Share

Share this Publication link

Share on social media