rusackas opened a new issue #8976: [SIP] Proposal to establish a new design direction, system, and process for Superset URL: https://github.com/apache/incubator-superset/issues/8976 ## [SIP] Proposal to establish a new design direction, system, and process for Superset ## Motivation In August, 2019, a project was kicked off to re-imagine the design of Superset, and create a “North Star” for the interface, flows, and visual aesthetic of Superset. The primary goal of the project—and this SIP—is to create a new visual design framework for Superset's user interface. Since its inception, Superset has rapidly grown in scope, size, audience, and complexity thanks to the work of this community. This growth has led to an accumulation of “design debt” in forms including problematic user flows, inconsistencies in interface elements, or general complexities that may be simplified/clarified by revisiting the design of Superset holistically. The intent of this undertaking was to smooth out the user experience of Superset, targeting all of the following: - Supporting most use cases and functionality currently in use by known Superset users in the design process, while reducing dead-ends and friction in these flows. Features and flows removed or deprecated are listed under "Removals and deprecations" below - Focusing on the “objects” of superset (namely Datasets, Queries, Charts, and Dashboards) and how those are structured/accessed throughout the flows of Explore and SQL Lab - Smoothing out and simplifying the general experience, making Superset easier to use for new users, and faster for more experienced ones - Creating a more consistent design and experience throughout the product, with a well defined style guide, and coherent design system Participants in this project included: - [Preset, Inc.](https://preset.io/) - a startup founded by @mistercrunch to offer Superset as a hosted service, acting as primary sponsor of this design effort - [Cartel](http://carteldesign.com/) - a digital product design firm focusing on research, strategy, and UX design for the next generation of enterprise software companies - Various members of this community, including Airbnb, Lyft, and others We hope that this new design direction will carry Superset forward for the foreseeable future, and create a unified design system upon which to build future features. Community feedback is welcomed, and when this SIP is voted in, further efforts will be undertaken to break down the design into smaller units of work. ### Process used in this effort: Efforts began with the announcement of a call for volunteers in a design interest group, via the Superset dev mailing list, and on the Superset Slack workspace. The search for members of this small group targeted individuals who were able to commit 2+ hours per week, have a history of involvement/merit with the project, have a sense of design, and understand Superset users and use cases. A "Superset Design Group" email was set up, as well as a private channel on the Superset Slack workspace, to maintain an open line of communication throughout the duration of the project A kickoff meeting of the resulting group was held on September 4th, 2019. This initiated the creation and iteration of core user stories. This was quickly followed by an effort to assess the Analytics / BI marketplace, resulting in a competitive analysis report (this research is proprietary, and cannot be shared publicly). Weekly design sync meetings took place each Thursday, allowing Cartel to get feedback on their latest design proposals from the team/community, and gather insight/direction on "big question" issues about the product's direction. After each session, prototypes were circulated, and feedback gathered via the slack and email channels. Each 1-week design sprint was comprised of ongoing work on larger concepts (e.g. the relationship between SQL Lab and Explore, or controls used to build data visualizations) as well as smaller, more specific tasks. #### Summary of key findings A product audit of Superset, user personas, and general product recommendations are available in an [Experience Brief](https://github.com/apache/incubator-superset/files/4068645/ExperienceBrief_SIP.pdf). ### Special thanks This process involved significant time and involvement from the following members of the Superset community for their participation: - Grace Guo (Airbnb / @graceguo-supercat) - Vyl Chang (Airbnb) - John Bodley (Airbnb / @john-bodley) - Sylvia Tomiyama (Airbnb) - Eli Brumbaugh (Airbnb / @elibrumbaugh) - Michelle Thomas (Airbnb / @michellethomas) - Maxime Beauchemin (Preset / @mistercrunch) - Rob DiCiuccio (Preset / @robdiciuccio) - Aaron Suddjian (Preset / @suddjian) - Tai Dupree (Preset / @nytai) - Beto Dealmeida (Lyft / @betodealmeida) - Micah Delfino (Cartel) - Jef Bekes (Cartel) ## Proposed Changes ### Notable changes to design and functionality #### Visual Design - All UI fonts are changed to [Inter UI](https://rsms.me/inter/) for increased legibility, and fixed-width numeral options for tabular data. Code fonts have been changed to [Fira Code](https://github.com/tonsky/FiraCode). Both of these fonts are open source (license information below). - New default color palettes for dataviz. These have been checked for accessibility issues. Old palettes will be supported for backward compatibility. - A full style guide is available in the prototype, with specs for a variety of UI element interaction states, layout spacings (all based on an 8 pixel grid) <table> <tr> <td colspan="2"><b>Style Guide</b> (see <a href="https://invis.io/JKVJWJANBVD"; target="_blank">abridged InVision</a>)</td> </tr> <tr> <td><a href="https://user-images.githubusercontent.com/812905/72393803-df023d80-36e8-11ea-9c8d-620b5884063a.png"; target="_blank"><img src="https://user-images.githubusercontent.com/812905/72393478-d0675680-36e7-11ea-9706-982a66a80324.png"; /></a></td> <td ><a href="https://user-images.githubusercontent.com/812905/72393803-df023d80-36e8-11ea-9c8d-620b5884063a.png"; target="_blank"><img src="https://user-images.githubusercontent.com/812905/72393486-d4937400-36e7-11ea-8c67-d7ef90fb9fb8.png"; /></a></td> </tr> </table> #### Simplified global navigation. - Links to Home (see next item), Dashboards, Charts, Explore, SQL Lab, and Data | Current | New | | ------------- | ------------- | | [](https://user-images.githubusercontent.com/812905/72392676-7a91af00-36e5-11ea-8c2e-1015711ebd47.png) | [](https://user-images.githubusercontent.com/812905/72392712-8a10f800-36e5-11ea-95a1-3d9c1b60719f.png) | #### Dashboards - New list/card view of all dashboards with ability to favorite dashboards, filter them by owner/status/dataset, search by name, sort by various metrics, or perform bulk actions. - New card view displays cards with rendered previews of the dashboard - Individual dashboards include new tools for each chart indicating data recency and filters applied - Edit a chart's display options directly from the dashboard - New tab UI with dropdown overflow menu when there are too many tabs to display - New UI modal to define/edit global filters, with bulk action support | Current | New | | ------------- | ------------- | | [](https://user-images.githubusercontent.com/812905/72408475-ee4caf80-3717-11ea-92cd-3fb8aac84c35.png) | [](https://user-images.githubusercontent.com/812905/72408483-f6a4ea80-3717-11ea-948a-f2c540a82564.png) | #### New "Home" page - Offers the ability to view Dashboards, Charts, and Queries, sorted by popularity, recency, favorites, and ownership. - Activity steam, showing who did what in a Superset instance | Current | New | | ------------- | ------------- | | [](https://user-images.githubusercontent.com/812905/72392653-6057d100-36e5-11ea-9414-816b56aa8e6a.png) | [](https://user-images.githubusercontent.com/812905/72391546-4a94dc80-36e2-11ea-8925-16833d2ba81b.png) | #### Explore - Visualization type selector, with viz plugins broken out into categories (e.g. timeseries, distribution, composition, etc) - Left panel for dataset selection and resulting display of fields - Updated query panel, with visualization controls utilizing new "pills" containing field metadata and controls (e.g. aggregation, sorting) - New Save/Save As controls, highlighting potential implications from overwriting an existing chart - Dataset preview area, including data profiling in the column headers (i.e. histograms, null value count, statistical rollups, etc) - New Chart Options drawer in the top right, focused on visual aspects of the resulting chart - New UI to edit a dataset's source, fields, metrics, and more - History timeline with icons denoting query "run" and "save" events - New Time Picker input modal, with quick selection of various time ranges and granularities | Current | New | | ------------- | ------------- | | [](https://user-images.githubusercontent.com/812905/72406976-ecccb880-3712-11ea-8757-d7cdd68d6eec.png) | [](https://user-images.githubusercontent.com/812905/72408878-05d86800-3719-11ea-947d-8fe28fd6802b.png) | #### SQL Lab - Left panel has tabs for Data (a picker for databases/tables/fields) and Saved (a selector for saved Queries) - Data preview table with headers containing data profiling information (histograms, composition, etc) - Chart area to build quick/simple data viz to preview query results and/or add viz to a dashboard. Viz options here are limited in scope/complexity. If your needs expand beyond these simplified viz options, there's an option to move over to Explore. - Explore button, allowing users to take their SQL queries into Explore for more advanced viz options with expanded controls - History panel with icons and data-rich tooltips indicating when queries were run or saved, and the details thereof - Full Query history with timeline, query preview, and option to group by session | Current | New | | ------------- | ------------- | | [](https://user-images.githubusercontent.com/812905/72412277-c6fae000-3721-11ea-84f3-f605a77750b9.png) | [](https://user-images.githubusercontent.com/812905/72412275-c6fae000-3721-11ea-93e6-b75cccf8e06a.png) | #### Data section - Contains sortable/searchable/filterable card or list views of Datasets (i.e. "physical" static/tablular datasets or "virtual" dynamic query results), Databases, Saved Queries, and Query History. Each of those tabs displays various metadata (e.g. access statistics) and actions (edit, delete, etc) for the resulting items - Viewing a Physical or Virtual Database displays its Fields, Metrics, and Usage tabs displaying various statistical and historical/analytic metadata details | Current | New (Datasets) | New (Fields) | | ------------- | ------------- | ------------- | | [](https://user-images.githubusercontent.com/812905/72407705-4d5cf500-3715-11ea-85ac-82b263932b18.png) | [](https://user-images.githubusercontent.com/812905/72407718-577ef380-3715-11ea-848d-5efbc9addc9b.png) | [](https://user-images.githubusercontent.com/812905/72407739-5f3e9800-3715-11ea-9264-ec9a37e4103f.png) | #### Charts - New list/card view of all charts with data source display, ability to favorite items, sorting (e.g. by time last updated), and filtering by ownership and status. | Current | New | | ------------- | ------------- | | [](https://user-images.githubusercontent.com/812905/72412181-94e97e00-3721-11ea-9dc3-ce456eb5bb5a.png) | [](https://user-images.githubusercontent.com/812905/72412179-94e97e00-3721-11ea-95d8-d351d6cced8d.png) | #### Global Search - Improved search and discovery of dashboards, queries, dataset titles, and possibly more - Results can be filtered by type - Default (prior to typing) list of recent or commonly accessed items | Current | New (default, no input) | New (search results) | | ------------- | ------------- | ------------- | | N/A | [](https://user-images.githubusercontent.com/812905/72401419-cc93fe00-3700-11ea-9224-daca71a8fbce.png) | [](https://user-images.githubusercontent.com/812905/72401429-d289df00-3700-11ea-9b05-05d275d479b2.png) | Design proposals, in the form of InVision prototypes, are encapsulated in the deliverables available here: - [Select screens](https://projects.invisionapp.com/share/GWVKKWFT6EB#/screens) (key features and concepts) - [Unabridged screens](https://projects.invisionapp.com/share/V5VH03AHBER#/screens) (contains some details yet to be entirely fleshed out) ### Removals and deprecations - Tabs in SQL Lab have been removed (See [related SIP](https://github.com/apache/incubator-superset/issues/8655)). ### Maintenance and improvement of design assets For maintaining the new design work (and assets stemming from it), the current proposal is to maintain the creation of a Superset team on [Abstract](https://share.goabstract.com/07731649-7586-4279-bc2d-244ce37289fe?). The latest Sketch files will be made public and open source, and managed via Abstract's version control system. PMC members from the Superset community may reach out to the PMC mailing list to submit designers or design teams to be added to the Abstract team to contribute to the design. The latest `master` version of the files will be maintained in the public InVision [prototype](https://projects.invisionapp.com/share/V5VH03AHBER#/screens), maintained by Preset (though interested parties may request comment or write access, granted on a case-by-case basis). ### User testing and validation plan Design and feature proposals submitted herein were conducted using the Superset Design Group as a focus group, making sure that functional and visual changes to the UI address the issues and use case criteria of those involved in the discussion. It is our intent, and belief, that these designs push the usability of Superset forward greatly. We anticipate that individual features and UI elements will require further input and discussion, as this "north star" for design begins to play out. Our hope is that this round of design will provide a foundation to test further iterations/variations, and those results will bear out in additional SIPs and PRs on a case-by-case basis. ### Updates to Superset documentation Documentation and Screenshots for Superset exists in a number of places, most notably on the [Apache website](https://superset.incubator.apache.org/) and on the [Github repo](https://github.com/apache/incubator-superset). A best effort should be made to update these resources with updated screenshots and/or instructions as relevant as PRs are written to move the project toward this new UI. If any changes are encountered that require large scale changes to documentation, those changed should be discussed in an additional SIP. ## New or Changed Public Interfaces TBD — Impact will be minimized on existing interfaces, but implementation of workflows and features may require changes to how APIs and metadata are structured and/or accessed. ## New dependencies The scope of third party dependencies is not entirely known at this time, but will be defined and assessed in future PRs as the work is broken down into smaller tasks. An effort will be made to make sure all licenses are compatible with Apache License v2.0. Some known licenses thus far include: - Inter UI (font) — SIL OpenFont license (needs to be labeled in ASF releases) - Fira Code (font) — SIL OpenFont license (needs to be labeled in ASF releases) ## Migration Plan and Compatibility Due to the broad scope of design and functional changes, several core sections of the codebase — both frontend and backend — will need to be modified in functionality and/or refactored. This will likely lead to a significant number of required database migrations. While breaking changes in backward compatibility will be made as minimal as possible, they may occur in subsequent PRs as this work is further scoped and ticketed, and should be tracked with semantic versioning in future releases. For frontend implementation, it should be noted that an older version of React-Bootstrap is used in existing Superset UI components. This older version is built upon Bootstrap 3, which is built with LESS (as is much of Superset, allowing shared styles/variables). Upgrading components to a newer React-Bootstrap (and thus Bootstrap 4) would require migrating the bulk of the CSS codebase over to SASS, which is not ideal. The implementation of this SIP should iterate toward deprecating the React-Bootstrap dependency, in favor of bespoke components with custom LESS styles built around this new design system. All changes, in the design and implementation of new components, should be "atomic" in nature, steering toward a more unified design/component system, targeting reusability and consistency. ## Rejected Alternatives No alternatives at this time. We've considered previous design-related SIPs in this process, and have reached this proposal with input from several active PMC members. We're open to feedback, however, so please feel free to leave constructive feedback below. This work is to be considered foundational, and will undoubtedly continue to evolve with the ongoing support of the Superset community.
---------------------------------------------------------------- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. For queries about this service, please contact Infrastructure at: [email protected] With regards, Apache Git Services --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
![https://user-images.githubusercontent.com/812905/72393803-df023d80-36e8-11ea-9c8d-620b5884063a.png"](https://user-images.githubusercontent.com/812905/72393803-df023d80-36e8-11ea-9c8d-620b5884063a.png"){kind=link}
![https://user-images.githubusercontent.com/812905/72393478-d0675680-36e7-11ea-9706-982a66a80324.png"](https://user-images.githubusercontent.com/812905/72393478-d0675680-36e7-11ea-9706-982a66a80324.png"){kind=link}
![https://user-images.githubusercontent.com/812905/72393486-d4937400-36e7-11ea-8c67-d7ef90fb9fb8.png"](https://user-images.githubusercontent.com/812905/72393486-d4937400-36e7-11ea-8c67-d7ef90fb9fb8.png"){kind=link}
