You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@superset.apache.org by GitBox <gi...@apache.org> on 2021/11/18 11:37:26 UTC

[GitHub] [superset] kasiazjc opened a new issue #17477: [Explore] [Design] improving the experience when user creates a new chart

kasiazjc opened a new issue #17477:
URL: https://github.com/apache/superset/issues/17477


   **Context**
   When user creates a new chart, after choosing the dataset and the type of the chart they land of the page full of errors which is a bad user experience. There are some metrics that are required, but they should not immediately be shown as errors - when user lands on the page, they should be encouraged and guided to fill in the blanks - not shouted at.  
   
   ![image](https://user-images.githubusercontent.com/36897697/142393473-903a944a-d7f3-477c-9b91-e1d0f75c7ca7.png)
   
   
   **Describe the solution you'd like**
   Redesign the experience. Add empty states that guide user through the process. Proposed flow below. 
   
   ![image](https://user-images.githubusercontent.com/36897697/142407962-6dd36f80-b2f1-4ae8-88fd-d109b5f8012d.png)
   
   ![create chart](https://user-images.githubusercontent.com/36897697/142408022-a170b934-e4af-4d52-8528-b5c18ebc37f3.gif)
   
   _Requirements_
   -> disable the pills with number of rows and time in the right section of explore (data and chart) 
   -> removeerror icons
   -> add one info icon next to metrics (tooltip) - active (blue) if the metrics field is empty, grayed out when the metrics field is filled, but still can hover over the tooltip
   -> adda empty state with tips/guide
   -> highlight all of the fields that are required
   -> if user adds and removes the value - add red error (current solution)
   
   **Additional information**
   [Flow](https://www.figma.com/file/pjtuSQAGRIu1PE9dYKWaUg/Data-Insights--%3E-Explore?node-id=166%3A34721)
   [Components](https://www.figma.com/file/pjtuSQAGRIu1PE9dYKWaUg/Data-Insights--%3E-Explore?node-id=141%3A37877)
   
   cc: @junlincc 
   


-- 
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.

To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org


[GitHub] [superset] bluepython508 commented on issue #17477: [Explore] [Design] improving the experience when user creates a new chart

Posted by GitBox <gi...@apache.org>.
bluepython508 commented on issue #17477:
URL: https://github.com/apache/superset/issues/17477#issuecomment-972970839


   I have also run into this, and came up with a fairly simple solution of including documentation inline, under the error message if it is present. As a simple proof of concept, I have [this](https://github.com/bluepython508/superset/tree/inline-explore-docs).
   While I have not yet written much of the documentation required, it seems that it would at least begin to solve the problem and is simple to implement.
   ![2021-11-18-152516_1619x1007_scrot](https://user-images.githubusercontent.com/16466646/142444613-94f576b5-cc36-4e29-b48a-ff784d8f0b10.png)
   
   


-- 
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.

To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org


[GitHub] [superset] bluepython508 commented on issue #17477: [Explore] [Design] improving the experience when user creates a new chart

Posted by GitBox <gi...@apache.org>.
bluepython508 commented on issue #17477:
URL: https://github.com/apache/superset/issues/17477#issuecomment-991009242


   I think both specific guidance for some of the more common charts (pie, bar, etc) in the empty state, with a fallback that simply lists required controls or something would work reasonably well (It's fairly easy to get a list of required controls to include in a generic empty state). This is essentially what I was implementing in my inline-documentation branch. Better tooltips might reduce the needs for specific empty states for different charts, if things like metrics didn't have to be explained in the empty state section.


-- 
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.

To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org


[GitHub] [superset] kasiazjc commented on issue #17477: [Explore] [Design] improving the experience when user creates a new chart

Posted by GitBox <gi...@apache.org>.
kasiazjc commented on issue #17477:
URL: https://github.com/apache/superset/issues/17477#issuecomment-987793107


   @bluepython508 sorry for the late response, missed the notification! 
   
   Yes - I meant improving the tooltips on the controls as currently they are not really much help, are they. I will need to find the list of all of the required fields and work on the copy. 
   I proposed a generic copy when user enters the explore for the first time, but maybe listing the required controls would help - what do you think? I wanted to make the first encounter with explore more pleasant that's why I added more friendly empty state/illustration. 
   
   ![image](https://user-images.githubusercontent.com/36897697/145013332-acc2829f-3397-4e07-ad5d-9e931ec73f14.png)
   
   Thanks for working on the proof of concept and help 🙏 


-- 
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.

To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org


[GitHub] [superset] kasiazjc commented on issue #17477: [Explore] [Design] improving the experience when user creates a new chart

Posted by GitBox <gi...@apache.org>.
kasiazjc commented on issue #17477:
URL: https://github.com/apache/superset/issues/17477#issuecomment-976831338


   I think it would be a good middle ground, the empty state is universal, but the guide/description would have to be tailored to each chart. 
   We could add one tooltip with all the information next to the empty state or add the details to the tooltip next to the value to give the user the context which I think would be easier as we would have to define a few fields that are required and update the copy. I think the second solution would have less edge cases, thoughts? 


-- 
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.

To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org


[GitHub] [superset] junlincc commented on issue #17477: [Explore] [Design] improving the experience when user creates a new chart

Posted by GitBox <gi...@apache.org>.
junlincc commented on issue #17477:
URL: https://github.com/apache/superset/issues/17477#issuecomment-976803570


   maybe we can include the inline description in a tooltip on hover state, as the description can get long and overwhelm users visually? @kasiazjc 


-- 
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.

To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org


[GitHub] [superset] bluepython508 commented on issue #17477: [Explore] [Design] improving the experience when user creates a new chart

Posted by GitBox <gi...@apache.org>.
bluepython508 commented on issue #17477:
URL: https://github.com/apache/superset/issues/17477#issuecomment-975667258


   I think that the inline documentation that I mentioned *is* the "empty state with tips/guide" that you suggested. Possibly documentation isn't the clearest word I could have used, and tutorial or guide might be better.
   I agree with the problems you mentioned, and documentation would absolutely help the second. I think an inline guide would probably be a good component of a solution to the first problem.


-- 
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.

To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org


[GitHub] [superset] kasiazjc commented on issue #17477: [Explore] [Design] improving the experience when user creates a new chart

Posted by GitBox <gi...@apache.org>.
kasiazjc commented on issue #17477:
URL: https://github.com/apache/superset/issues/17477#issuecomment-975382401


   @bluepython508 thanks for the input and idea! I think we are tackling two problems here: 
   
   1. When user creates their first chart they land on the page with ~6 error messages which is not a great experience and makes them feel like something is broken → related to empty state I proposed 
   2. It is hard to understand the language, patterns and general - how to create chart/visualisation → related to the description you proposed
   
   I think that adding the empty state and highlighted fields is a good quick win as of now for the new chart/users. 
   Guiding the user through the process of creating a chart is a bigger thing and requires more research re: chart types, behaviours etc. You articulated a big problem (and thank you for that!), which we really need to address, but I think it should be a separate issue. What do you think? 
   
   


-- 
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.

To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org


[GitHub] [superset] bluepython508 commented on issue #17477: [Explore] [Design] improving the experience when user creates a new chart

Posted by GitBox <gi...@apache.org>.
bluepython508 commented on issue #17477:
URL: https://github.com/apache/superset/issues/17477#issuecomment-978002987


   Do you mean improving the tooltips on the controls, for example to clarify what is meant by "metric"? If so, I think that would help immensely.
   I've been working on a proof of concept implementation of your original suggestion, essentially displaying errors as info until there are no validation errors. It's [here](https://github.com/bluepython508/superset/tree/error-disguise).
   Before correcting validation errors:
   ![2021-11-24-152429_1618x1005_scrot](https://user-images.githubusercontent.com/16466646/143269356-76f0c473-c5a3-48d8-a4d9-90203836bae4.png)
   After correcting validation errors, then causing more:
   ![2021-11-24-152531_1620x1007_scrot](https://user-images.githubusercontent.com/16466646/143269352-5f9f444d-f59a-4c3b-8d87-6fba1dd221b9.png)
   (The changes only apply when the current loading of the page has had no state without validation errors)


-- 
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.

To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org


[GitHub] [superset] kasiazjc commented on issue #17477: [Explore] [Design] improving the experience when user creates a new chart

Posted by GitBox <gi...@apache.org>.
kasiazjc commented on issue #17477:
URL: https://github.com/apache/superset/issues/17477#issuecomment-993706126


   I think you're right and it's the best solution - generic information with the required controls listed in the empty state + improved tooltips. I can work on the copy for the tooltips and share the figma file with all of the details to check out. 


-- 
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.

To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org