Vscode: UX meeting agenda 14 September, 2016

[bgashler1]

• Refactoring extensibility feedback
• Consolidated horizontal panel
• Feedback on concepts for social ad campaign

@Microsoft/vscode team please let me know anything else that should be discussed or if you need an invite for this Wednesday.

[bgashler1]

@pjmeyer fyi if there's time I would like to show some of our concepts to Zurich. No need to attend, but you're more than welcome if you want to.

[bgashler1]

@egamma in our last meeting @isidorn passed on feedback that you didn't like having toggles for each panel in the status bar in addition to errors/warnings (and Chris concurs with you on that). If you would like to share any additional feedback on the horizontal panel in this meeting, feel free to join or pass it on again. Otherwise, we're suggesting to go with something like the following to validate with customers in the product for the next iteration.

For reference here are the 2 other concepts that we'll be shelving for now

[bpasero]

Re https://github.com/Microsoft/vscode/issues/12277#issuecomment-248081245:
I am not 100% convinced with the design of what we see in the screenshot but like the direction of starting with that first. Overall my feeling is we need to tweak the design of side-by-side panels and also need to decide if/how to show activity notifications.

[jrieken]

Also re https://github.com/Microsoft/vscode/issues/12277#issuecomment-248081245

For me it feels like we are introducing a new/alternative design for tabs and tab-notifications but I don't understand why that is necessary.

[bpasero]

@jrieken the motivation for such a change is to make panels more discoverable. Today they are very hidden and you need to know keybindings or go via menu. Viewlets on the other hand have the activity bar to the left and notifications there. We think about something similar for panels and having this inside a panel seems like the lowest UX impact to begin with.

[jrieken]

I understand that but I wonder why we don't start experimenting with obvious which in our current ui model is the activity bar. Have a column of buttons at the bottom that change the bottom panels. That seems the most natural in terms of avoiding to introduce new principles and patterns.

[bpasero]

While I get the idea of reusing UX if possible, I get major pimples seeing the bar filled with icons at the bottom that relate to panels 😦

[jrieken]

hehe - the icons don't have to show when the panel isn't showing. In that case an indication - like a drag handle to pull up the panel - should be enough.

[bpasero]

Yeah, though I think for that to work well, the panel would have to fit the full width of the workbench so that you can make the connection from the activity bar to the panel.

[jrieken]

Yeah - I assumed that to begin with.

[dbaeumer]

I am not a fan of having the panel go all the way horizontal. I get major pimples imagining this :-). For me panel show textual output and therefore should be vertically aligned with the editor.

[octref]

@bgashler1 What happens in this design when one toggles open a viewlet?

[bgashler1]

NOTES

Horizontal Panel

We don't want to introduce a whole new paradigm for tabbing as in the design posted previously. Additionally, we don't want to introduce editor-style tabs here, because it would falsely convey that the panel is essentially an editor group and that tabs can be moved to and from it.

We will instead leverage what we already have for view switching: the Activity Bar. Everyone in the meeting signed off on trying to add toggles to each panel within a subsection of the Activity Bar. We will top-align it with a separator from the other activity bar menu. To avoid cluttering the Activity Bar with 4 additional icons, we will use an expander to reveal the 4 other icons. The state of the expander should be preserved across sessions, to reduce the number of interactions required and to be thoughtful to user preference. By default we should leave it closed for new windows so it will be lightweight and only there when you want it.

Notifications should include whether a task is running or whether there is new output (maybe not numbers though). Since a large number of users use the current Errors/Warnings notifications in the status bar, we will leave those there as well.

First we will float this design on GitHub for user feedback. Then, we will push it to the Insiders build in about mid October (after end game) and get feedback.

We can leverage what we've already done with the Azure editor.

Questions to address later:

• Should the panel be configurable to be full width vs document width or just one of those all the time?
• Are users happy with the top-alignment of the expander in the Activity Bar, or should we bottom align it?
• Should we use notification numbers or just dot indicators for each Horizontal Panel toggle?

[bgashler1]

@octref if we end up doing a full-width panel, then it would push the content up. This means we would need to improve how the Debugger viewlet resizes vertically (since it's accordion menu's layout is not preserved when stretching it back, e.g. after we close the panel).

[bgashler1]

New Horizontal Panel Experience - Demo

This is a work in progress version of what the new panel will look like.

Not pictured (still being implemented/designed)

• The dropdown arrow will flip when the panel is open
• The icons are not final yet

Please feel free to comment.

See #12533 for panel for more up to date info

[roblourens]

Should the activity bar scroll if the window is too short for all the icons? Currently you can resize the window to cut off the icons but I don't see any way to scroll.

I'm trying to eyeball the minimum height of the window to see all the icons and it's about half the height of my screen.

[bgashler1]

Overflow behavior is clearly the next thing we need to address. Scrolling is one way to handle it, but I don't think it's the best solution. We should explore multiple options.

[octref]

@bgashler1

It is not immediately clear to me which panel/viewlet is active. I'd suggest making the active viewlet having a different background. That's an existing problem with the current viewlet, and with the panel being further away it would be harder for user to link it to the activity bar.

An idea: how about making the chevron upside-down and put it in the bottom of activity bar?
When user clicks it the activity bar icons and the panel animates out together.

[octref]

@bgashler1

Saw that in insider and made a quick edit in Sketch.

This looks more natural to me, as chevron moves up/down together with the panel.

[isidorn]

I actually like how this version has a more natural use of the chevron.
The downside and why we choose the current approach is that your approach is not discoverable enough (experience from WAWS times). However since when the panel opens we automatically expand 5 icons so I think poeple will figure this out. Using this approach we would also remove the ugly horizontal line. It is also visually more appealing since it is not a bunch of icons one after the other.

The only downside I see are novice users who have no clue about panels and never open them and do not look on the bottom of the activity bar.

Due to the above I give this +1

[orta]

The bottom aligned version of this is nice 👍 - feels much more tied to the panels/terminals than when they were separated at the top

[bpasero]

Also like it.