UI Refresh Mockups & Discussion

[vlandham]

Working with @iamjessklein , we have developed a few mockups around suggestions for where we could take the voyager UI. Our primary goals for looking at the UI are:

• Reduce friction for new users coming to voyager
• Provide a stronger visual hierarchy around the different components used in voyager
• Provide more context around the visualizations generated in the tool and what makes voyager unique

Main View

Here is a rough mockup of what loaded data might look like in Voyager:

Again - a rough mockup. Anything that looks out of alignment or off is from me hacking on Jess's wonderful mockups.

Most of the components remain the same. The color changes help to draw the eye over to the left panel where most of the initial interaction for a user will occur.

In the top bar, we move some of the debugging tools down to the bottom section of the left panel - allowing us to emphasize just the tools that most users will want to use. There is also the concept of a user account here. I think this will be a later addition - and perhaps we will not initially have full names and such - but with a tool built around pulling in custom data sources and bookmarking, having accounts in some form (perhaps initially just github accounts) makes a lot of sense.

In the left panel, we emphasize the data loading process by making it more explicit around how to change the data you are looking at.

In the main panel, we try to be a bit more explanative in what is being shown. We want to also again highlight the hierarchy of this section by distinguishing the different sections here.

There is also a view toggle in the upper right-hand corner of the main panel - which could transition between a grid and a list based view of the visualizations. I think this could help constrain the main view for new users - which could help when browsing - but i think this will probably come later.

Data Panel

Clicking on the "Explore Other Data" link will expand this area, covering or pushing down the 'fields' section of the left panel. It would look something like this:

Here the sample data menu could be used to get another sample data. Or custom data could be uploaded.

Data Upload

This is the same as the mockup used for https://github.com/vega/vega-lite-ui/issues/77 - but now integrated with this new look

Would love to get thoughts on these changes @kanitw @domoritz @kadamwhite

[kanitw]

Here are my quick comments before I get on the plane -- I will comment more once I settled in Bangkok. Meanwhile, it would be great if you could share the mock file, just in case any of us wants to with them.

I think color change proposal is an interesting idea. In terms of implementation, It's worth thinking that how changing style in voyager affect polestar too.

Regarding moving About, Report Issue and Debug to bottom left, one thing to keep in mind is that we can to experiment with other type of "facet" in the UI. (For example, adding more constraints to the recommendation algorithm)

• "currently data" => "current data"
• I'm guessing we retain the old font size rather than making it this big since variable names can be quite long.
• We might want to add visual distinction between the two sectiosn (the exact match section and the suggestion section). At the very least, we should add some padding :)

[vlandham]

We are using Sketch to do the mockups. Here are some versions converted to pdf - but not sure if that is easily editable .

voyager.pdf

voyager2.pdf

[kanitw]

I have sketch :)

[vlandham]

Ok. GH isn't allowing me to attach it or a zip of the sketch file. I will email.

[domoritz]

These sketches look great. I agree with Ham's comments and would like to add my concern that the list of fields may become long.

[vlandham]

I'm working with Jess to further define our Learning Objectives for first time users of Voyager.
We would love your feedback on these main goals that we think are important to tackle from a UX/UI standpoint for users just coming to Voyager (and perhaps the whole Vega suite) for the first time.

Here's what we have right now:

• A user should understand the main purpose of this tool
  • It can be used to facilitate broad exploration of a particular dataset
• A user should be able to orient themselves to the layout of the tool
  • What data set they are looking at.
  • What fields (columns) are available to explore.
• A user should be able to identify that there are visualization recommendations being made.
• A user should understand the content and design of these visualizations
  • That they represent good choices for representing the types of data being displayed.
  • That the layout helps the user with chart readability in terms of the axes and grouping of data fields
• A user should explore the tinkerability of the tool.
  • Experience the changes from selecting different combinations of fields
  • Explore the various transformations available on the fields.
  • Allow a user to explore variations of visual representations of a selected set of data fields.
• Upload and explore their own data sets
• Understand that you can do other things with the visualization (share, download to png, etc) (some of these are planned and not yet full features)
• Understand Bookmarking and how it allows you to store visualizations for a deeper dive after the initial exploration.

How does that sound?

Edit: added Anushka's suggestions to the list

[anushka22]

The main goal (hypothesis) of the tool is to facilitate broad exploration of a particular dataset so that suggests a lens through which to position all the items you listed above Jim.
I'd add that the layout helps the user with chart readability in terms of the axes and grouping of data fields.
Also with the "tinkerability" point consider: allow users to explore variations of visual representations of a selected set of data fields.

[curran]

Hi all, I've been listening in on this project and it is quite exciting. The "tinkerability" ideas are really cool. These examples might be relevant to consider in your exploration of new UX ideas for Voyager:

• Magic Bar Chart The user can explore univariate summaries by interacting with widgets. The field and bar orientation can be changed, and a slider controls the bin size (which uses nice tick intervals).
• Magic Heat Map A 2D variant of the same concept.

[vlandham]

@anushka22 Thanks so much for chiming in. This focusing on the initial hypothesis of the tool is a great idea - and something we will definitely work into the initial user experience. Broad exploration is key to the capabilities and uniqueness of Voyager - and should continue to be the focus of the tool.

I also really like the additional suggestions around how the layout and recommendation system work towards our objectives. Thanks again for suggesting them - i will add them to the list.

[vlandham]

@curran Awesome examples! I especially enjoy the magic bar chart - would be a great learning tool in itself to help explain the importance of bin size when creating histograms.

I think these concepts definitely fit into what voyager could move towards - and we will keep them in mind when working on more 'tinkering' capabilities. Thanks!

[vlandham]

also @kanitw & @domoritz thanks for the great suggestions. Yes - i believe the font in the mockup is much too large and would be back to the original size in the implementation. I think for now, just de-prioritizing the debugging and other links could be enough. if additional fields are needed - then we could look at more elaborate UIs for exposing them. More visual distinction between the sections is also a good idea.

[domoritz]

Sounds good. One thing to keep in mind is that we could not add scrolling because of issues with the drag and drop. When we fix that, the vertical space is less of an issue.

[vlandham]

Around a first user experience - we are working on another mockup to show what an initial user would see when accessing voyager for the first time:

The idea here would be to help orient the user to some of the main components of the tool - while at the same time temporarily obscuring the main panel to avoid overloading them with all the graphs until they knew better what they were looking at.

If we have time, we could implement a short in-app tutorial which would be accessible via the "i want to learn more" button. If the user selects "Okay, got it", then we record that they have already seen the welcome modal and don't show it again. Additionally, this view could be used for the 'about' section.

Thoughts?

[domoritz]

Beautiful! Nit: change click on fields -> select fields

[kanitw]

This is awesome.

I guess this screen should only be shown the first time users open the app?
At least we should have a "Do not show this again" check box since getting this every time could be annoying.

[vlandham]

Definitely - i was thinking we would only show it on initial load - and then have it pop up again only if they click on the 'about' link.

[kadamwhite]

+1 to initial load only, then about link; I've seen that pattern used on other sites and it feels like a good balance between useful and unintrusive

[kanitw]

Having initial load only sounds great to me -- but About page could also be slightly different from this popup.

[domoritz]

Fixed by #195

At least enough to justify that we close this and create issues for remaining todos.