Streamlining Visual UI Design: Mining UI Design Patterns for Top App Bars

# README

## Introduction

Welcome to the repository for the dataset used in the study "Streamlining Visual UI Design: Mining UI Design Patterns for Top App Bars". This dataset consists of approximately 4,228 Top App Bar (TAB) images and corresponding layout codes. The dataset is constructed from the RICO repository, which is a large open repository containing data from over 9.3k free mobile applications across 27 application categories on Google Play.

## Dataset Description

### Overview

The dataset includes:

1. **Screenshots**: Images of Top App Bars (TABs) from various mobile applications.

2. **Layout Codes**: Corresponding view hierarchy for each screenshot, represented as a tree structure.

### RICO Repository

The RICO repository provides the foundational data for this dataset. Each entry in the RICO repository includes a screenshot paired with its corresponding view hierarchy, which represents the UI layout code structure during rendering. The view hierarchy is depicted as a tree, with each node encapsulating various attributes of UI elements, such as:

- Resource ID

- Implementation class

- Inheritance relationship

- Bounding box

- State attributes like visibility and clickability

### Purpose

This dataset is designed to support research and development in UI design, particularly focusing on the Top App Bar (TAB). It aims to assist novice UI designers by providing them with examples of well-structured TABs, helping them understand successful design practices and avoid common pitfalls.

## Usage

### Clustering and Retrieval

The dataset can be used in conjunction with the sequence representation learning technique proposed in our study. This technique clusters TABs based on their structure, allowing novice designers to input their pre-conceptualized structures and retrieve design examples from the clusters. This method enhances design efficiency and aids in understanding successful design practices.

### Data Format

Each entry in the dataset is structured as follows:

- `rico-id.png`: Image file of the TAB.

- `rico-id.json`: JSON file containing the view hierarchy and attributes of the TAB.

### Example

```

/bars.zip

    103.png

    103.json

    ...

    1160.png

    1160.json

    ...

```

## Citation

If you use this dataset in your research, please cite our paper:

```

Under review

```

### RICO Repository Citation

Please also cite the RICO repository as follows:

```

@inproceedings{Deka2017,

title={RICO: A Mobile App Dataset for Building Data-Driven Design Applications},

author={Deka, Barista and Huang, Zhilei and Franzen, Carl and Hibschman, Jay and Afergan, Daniel and Li, Yang and Nichols, Jeffrey and Kumar, Ranjitha},

booktitle={Proceedings of the 29th Annual Symposium on User Interface Software and Technology},

pages={845--854},

year={2017},

organization={ACM}

}

```