VSIDE's WebLog

Feedback Requested: File Tabs in Orcas

Hi folks-

I've been working to redesign the file tabs for Orcas (the version of VS after Whidbey) and would love to get your feedback.  Based on feedback we've heard from Whidbey users, we're primarily seeking to solve the issues of:
1) grouping related views for
visual feedback and easy switching
2)
make the document's source control state more visually apparent. 

There are two main alternatives we're currently considering (but feel free to throw around other ideas).  They are "icon tabs" and "multi-row tabs".  See below for more details.  If you're familiar with Whidbey, you know that currently new tabs always appear on the far left, and the far right one is always dropped to free up room.  The dropdown of open files is on the right.  I'm considering changing all three aspects.  In the new model, new tabs come in on the right, the least recently used tab is dropped to free up space, and the dropdown menu of open files is on the far left.  We haven't found a better alternative to appending "*" to indicate dirty state, so that is currently unchanged.

Icon Tabs
Icon tabs involves grouping views on the same document together on a common tab.  So, the most common example of this is grouping the design and code views in WinForms and allowing the user to switch between them by clicking the icon on the tab.  Notice the source control state is represented as an icon on the left side of the tab.  The close button on the right closes the current view, not the whole tab (unless it was the last view on the tab).




EDIT-- One slight variation (let's call it Icon Tabs B), if keeping the look clean and simple is more important than being able to directly access a different view on an inactive tab, is to remove all icons from inactive tabs, regardless of whether or not they are being moused-over:



Multi-row Tabs
An alternative is to use a separate command bar to display the related views (this model would make it easier to support grouping with the related code behind files e.g. .aspx + .aspx.cs/.vb or .xaml + .xaml.cs/.vb).  For the code editor, we would try to integrate the navigation bar into the same row (see screenshot below), so there's no net loss of vertical space.  The state icon is again on the left of the tab.  We've also considered putting the close button on the active tab to make it more accessible, through that would also mean needing to reserve space on each tab so the tab sizes don't jump around all the time.




EDIT-- Due to implementation costs, it may not be feasible for the navigation bar to share space with our row of related views/files. Hypothetically, if we couldn't combine those bars, how does that affect your reaction? Note that we would consider providing a mechanism for you to switch back to Whidbey's tab model and if we did that, some profiles (e.g. C++) could decide to have our model off by default. Here's what that design might look like (let's call it Multi-row Tabs B):


So, what we would love to hear from you about which design you prefer (Icon tabs vs. Multi-row tabs) and why. 
Please rate each design on a scale of 1 to 10
(least to greatest) for the following metrics:
a)
how well it would suit your needs (where does it come up short?)
b) perceived ease of use
c) aesthetic appeal
It would be helpful to hear what you like and dislike most about each design. 

We'd also love feedback on the other issues mentioned above: location of the dropdown list and close button, where new tabs should appear, which tab should get dropped, and how to better represent dirty state.

Thanks a lot!
-Jon
Published Wednesday, August 31, 2005 2:03 AM by VSIDE

Comments

 

Lorenzo Barbieri @ UGIblogs! said:

August 31, 2005 7:53 AM
 

TAG said:

Icon:
It save one click (actualy 0.5 ;-). But this has a cost of been able to hit thouse tiny buttons. As well sometimes design mode takes too long time to load - this can allow to save time by navigating to source dirrectly.

Multi-row:
This is easy to use then editing same file.

Summary:
It will be nice to combine thouse suggestions:
I.e. show small icons for files not active, but show huge buttons for currently opened file.
It seems like a little bit bloated - but to save space - instead of file extension (.cs) you can put a C# icon to indicate this is source file tab. This will save place for additional functionality.
August 31, 2005 8:01 AM
 

Joteke's Blog said:

August 31, 2005 8:01 AM
 

Joteke's Blog said:

August 31, 2005 8:04 AM
 

Hasani said:

is it possible you can make this an option in Options->Environment->Documents or Options->Text Editor->General, and from there allow us to choose Icon, or Multi-Row. I like both, but if I had to make a choice, "Icon Tabs" b/c it's 1 less click. I like multirow because I actual tab (Where it says the document name) takes up less space than in Icon mode. That will allow me to see more open files w/o scrolling.
August 31, 2005 8:58 AM
 

Hammad said:

I think the multirow option is better one. First it is easier to use than hitting tiny buttons. Secondly it can more easily extended with more buttons and possibly options to perform common source control functions ( compare, check-in, check out )
August 31, 2005 9:14 AM
 

shaunbed said:

I think multirow looks cleaner. I would go with it.

Shaun Bedingfield
blogsb.blogspot.com
shaunbed@houston.rr.com
August 31, 2005 9:57 AM
 

tlmii said:

I think the multi-row option looks cleaner.
But perhaps having the icons still on the tabs so that you could tell which pages were open for that file without having it be the foreground tab.
I think its important to be able to see that information for non-selected tabs.
August 31, 2005 10:44 AM
 

Joteke's Blog said:

August 31, 2005 11:28 AM
 

mrf1022 said:

I like the idea of allowing users to choose between the two. I also like having configurable buttons in the multirow area for common tasks. For those who dislike the multirow setup simply because it takes up screen space maybe having the mulitrow button area collapse when the mouse isn't over it would be a solution.
August 31, 2005 12:02 PM
 

damien morton said:

Preference for the Multi-row design with integrated navigation bar. Looks good, easy to understand, and no wasted vertical space.

Critque of the Icon tabs is that they seem less intuitive to me, and require a great deal of accuracy to hit the target.

Im not averse to having this be a user-preference, but I think I would always be using the multi-row design.

August 31, 2005 12:59 PM
 

Nemo said:

I think the final screenshot looks great and would work best, except you need to have a close button on every single tab! I know this takes up more space, but I want to be able to close a tab without making it active first. This is one of the most annoying things I find using VS 2003 every day.
The first and second shots, with all those icons in the tab, is just terrible looking. Way too much clutter. It's not clear what the buttons do or mean, if they are even buttons.
August 31, 2005 1:01 PM
 

aaronbrethorst said:

I definitely like multi-row, but I think I'm a little biased towards that design ;)

Aaron
August 31, 2005 6:49 PM
 

aaron's weblog said:

Our Program Manager Intern, Jon, has a set of file tab prototypes we're considering for Orcas. He'd love...
August 31, 2005 6:50 PM
 

tzagotta said:

I would rate the icon tabs a 9 out of 10. I like that they are concise and save screen space. The popup hint is helpful for beginners to get to know the meanings of the icons. Experienced users will recognize the icons. I do not agree with the others who commented that the click target is too small. I think there is plenty of room on the tab for a reasonable click target.

I would rate the multi line tabs a 6 out of 10. I think this is kind of a waste of screen space, both vertically and horizontally (taking space away from the 2 drop downs in your example). I also think it will not transition well between different views that don't have the dropdowns, e.g., between code and design view. It will be strange that in this case the bar will get wider and narrower depending on the selected view.

Usability of both is pretty equal in my view. Same for aesthetics (except for the issue noted above). Overall I prefer the icon tab view, mainly because it doesn't consume too much screen real estate, which is still important in an IDE.
August 31, 2005 9:20 PM
 

Sara Ford's WebLog said:

Jonathan, a PM intern on my team VSCore, is requesting feedback on his Visual Studio File Tabs Design. ...
September 1, 2005 7:32 PM
 

中の技術日誌ブログ said:

Orcasのファイルタブどうさせてもらいましょう。
September 2, 2005 8:04 AM
 

HIDORI on The Web: 渋木宏明(ひどり) blog said:

元ネタは青柳さんトコ
VSIDE のファイルのタブってどんなのがいい? in Orcashttp://www.divakk.co.jp/blog/aoyagi/archive/2005/09/02/7006.aspx...
September 2, 2005 8:20 AM
 

Saurabh Nandu said:

Icons - 7/9
a) how well it would suit your needs (where does it come up short?)
It's great, but the icon's do need to be something meaningful. The current icons do not convay its its a Design File or Code File open.
b) perceived ease of use
Would like it on my Desktop with a Mouse. But on my high resolution Laptop with the touchpad, its going to be tricky to click the right icon. Demo's with laptops will start getting more funny.

Hover Menus are a VERY good idea. As someone mentioned it takes a lot of time while painting Forms in design view. And its annoying to first switch tab - lag and then switch. With Hove menus, I could switch to code view right away!
c) aesthetic appeal
Looks good, need the Close button on the tab - please. Now if only if the icons could be meaningfull..

Multi Layer Tabs - 5/9
a) how well it would suit your needs (where does it come up short?)
Screen space please! Most developers I have seen work on 1024x768 resolution. Not thats one line less of code to be seen.
b) perceived ease of use
Looks confusing to me, without clicking on the Tab, I can't find if its code view or design view.
c) aesthetic appeal
Looks neat although!

September 2, 2005 9:45 AM
 

onovotny said:

I don't like the multi-row tabs (with design/code on a different row) since it takes screen real estate away from the code window.

I like the first picture the most, with small buttons for code/view on them. The asterisk (dirty flag) could be removed to make space by using a different background color for the tab. The color could be the same as the changed lines in the code window (or something more pleasing). At a glance you could tell if there were unsaved changes since the tab would be a different color.

It would be nice if there were more options around for tabs -- like being able to double-click them to close. I'd suggest that double-clicking a tab would close both views at the same time.

There should also be more automation API's exposed around the tabs to allow further customization by add-in's.
September 7, 2005 10:40 AM
 

diegov said:

Multi-row A:

a) how well it would suit your needs: 10
b) perceived ease of use: 10
c) aesthetic appeal: 10

This is the one I find would make things better than they are now. You have to make the second row very flexible, even extensible as you could have multiple editors for the same kind of file and multiple codebehind files. I am guessing Orcas will have even more of this than Whidbey. Just think of it as a toolstrip for the file window.

No other option seems to be much better to me than what is already in whidbey, so I won't comment on others.

Regarding the close icon on every tab. It is not important to me. If you want to make it easier than today, just place the close menu item first in the context menu for the tabs.

Also, I don't really need too much custimization options for this. Just one good option, and of course, extensibility.

Just for fun, look at these feedback requests on the Delphi IDE:

http://blogs.borland.com/abauer/archive/2005/04/29/4091.aspx

http://blogs.borland.com/abauer/archive/2005/05/25/4427.aspx

http://blogs.borland.com/abauer/archive/2005/05/27/4485.aspx
September 7, 2005 9:59 PM
 

diegov said:

Regarding the dirty state icon, I think the asterisc is not bad. Maybe a scribble or a pencil icon would make it. And yes, I think keeping things clean is a good measure.
September 7, 2005 10:05 PM
 

diegov said:

... I agree, a different colour for tabs with pending changes should be considered also. Text color or background color?
September 7, 2005 10:10 PM
 

Levent Cenk Çağlar said:

May 5, 2006 7:13 AM
Anonymous comments are disabled

© 2009 Microsoft Corporation. All rights reserved. Terms of Use  |  Trademarks  |  Privacy Statement
Microsoft
Page view tracker