Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss

Firefox 4 Vertical Tab

71 views
Skip to first unread message

caccolangrifata

unread,
Jun 21, 2010, 1:31:59 PM6/21/10
to
Looking at this[1] new firefox mockup (really nice) and thinking about
the latest device introduced (reguarding the screen) I realized this 2
mockup to show how can firefox looks with vertical tab.
Given that wide screens are becoming more available space to display a
web page is proportionately less than the width available. This
consideration led me to create these two mockups that use otherwise
unused space on the sides and allow more space to display the web
page.

here’s
http://img88.imageshack.us/img88/7558/caccolafirefox4mockupi0.png
http://img291.imageshack.us/img291/2081/caccolapanelnotificatio.png

A must have is to integrate, in some ways, tab's title near the
favicon.
Let me know what you think.

[1] http://goo.gl/ANZr

Oscar Vásquez

unread,
Jun 25, 2010, 12:24:56 PM6/25/10
to
The vertical tabs look really awesome, I think it should be available
to the user, as in most OS you can place the bars where you want, and
it will give firefox advantage in customizations against the other
browsers.

Peter Lairo

unread,
Jun 25, 2010, 12:42:39 PM6/25/10
to
On Mon. 21.06.2010 19:31, caccolangrifata wrote:
> mockup to show how can firefox looks with vertical tab.

Side-tabs has some advantages ... and some disadvantages:

- Tabs should show (part of) the pages' titles (thus making them wider).

- This would result in a huge empty space below the tabs.

+----------+------------------------------------
| Tab 1 |
+----------+
| Tab 2 |
+----------+
| page content
|
huge |
empty |
space |
|
------------------------------------------------

--
Regards,

Peter Lairo

Bugs I think are important:
https://bugzilla.mozilla.org/show_bug.cgi?id=250539
https://bugzilla.mozilla.org/show_bug.cgi?id=391057
https://bugzilla.mozilla.org/show_bug.cgi?id=436259
https://bugzilla.mozilla.org/show_bug.cgi?id=446444

Islam: http://www.jihadwatch.org/islam101/
Israel: http://www.jewishvirtuallibrary.org/jsource/myths2/
Church of the Flying Spaghetti Monster: http://www.venganza.org/
Anthropogenic Global Warming skepsis: http://tinyurl.com/AGW-Skepsis

Juan Becerra

unread,
Jun 25, 2010, 1:14:45 PM6/25/10
to caccolangrifata, dev-us...@lists.mozilla.org
There are extensions that allow you to use this configuration, for example:

https://addons.mozilla.org/en-US/firefox/addon/5890/ (tree style tab)

For people who operate with lots of tabs open at a time this is a space
saver, and the tree-style tab grouping can be very handy. Maybe that
works for you?

juanb

> _______________________________________________
> dev-usability mailing list
> dev-us...@lists.mozilla.org
> https://lists.mozilla.org/listinfo/dev-usability
>

Bryan Clark

unread,
Jun 25, 2010, 2:55:27 PM6/25/10
to Peter Lairo, dev-us...@lists.mozilla.org
I've been using tree tabs for a while in Firefox and have been trying
them in an experiment for Thunderbird so I've been doing some research
on this lately.

On 25/06/10 9:42 AM, Peter Lairo wrote:
> On Mon. 21.06.2010 19:31, caccolangrifata wrote:
>> mockup to show how can firefox looks with vertical tab.
>
> Side-tabs has some advantages ... and some disadvantages:
>
> - Tabs should show (part of) the pages' titles (thus making them wider).
>

The organization of the child / parent relationships (in tree tabs)
seems to give enough of a clue to what tab you'd want such that I find
title isn't really needed. But the child tree tabs indent which takes
away from the visible space available. With horizontal tabs you get
this effect as the number of your tabs approach the width limit; there
is a natural size and then a minimum size, more on this below.


> - This would result in a huge empty space below the tabs.
>
> +----------+------------------------------------
> | Tab 1 |
> +----------+
> | Tab 2 |
> +----------+
> | page content
> |
> huge |
> empty |
> space |
> |
> ------------------------------------------------
>

I'm especially glad you brought this up because I've been wondering
about another piece of this myself. In terms of percentages of vertical
to horizontal tabs and how they compare. I'm looking at a 1440x900
display right now with Firefox using the full screen height and width.

A default Firefox (on the Mac) uses these size requirements.

A default tab is 250x25 and a "squished" tab is 100x25 (25px is ~3% of
my total vertical space available)
With a single tab you have 1125x25 of empty space (ref: "huge empty
space" but in horizontal)
At 5 tabs it starts squishing the size of tab width to fit the available
space better.
At 13 tabs all tabs are at 100px width and it starts auto-scrolling and
hiding some tabs from view.

In vertical tab mode (with tree tabs) for my config has these size
requirements.

A tab is 190x24 (this includes the slider size) (190px is 13% of my
total horizontal space)
With a single tab I have 190x808 of empty space (ref: "huge empty space")
Tabs are never squished for vertical height
At 28 tabs a scroll bar appears to accommodate more tabs

In terms of total screen size it's 3% horizontal vs. 13% vertical.

Those numbers correspond to your above diagram. I started also looking
at numbers for the content in a page because the above seems to be
optimizing for using the available screen space when in I felt like we
should actually be optimizing for what people are reading.

Here's one example using the bcc web site (taken from today)

bbc.co.uk uses
974px width in content of 1425px total available (451px of empty
space in the content area)
2784px height of (infinite) available 803px of available visible
browser space (0px of empty space in the content area by definition)

And here's how the tab types break down this space (for my screen):

Vertical Tabs
No width loss (451 - 190 = 261px of unused space still available
yielding 1235px of viewing area for 974px of content)
No height loss (there is no vertical space required)

Horizontal Tabs
No width loss (there is no horizontal space required)
A height loss of 25px out of 803px yielding 778px for viewing 2784px
of content

In terms of this content size there's a (small) loss with horizontal
tabs while no loss with the vertical tabs. But we are talking about a
view port which is only 28% the size of the content it's viewing.

My math is likely wrong in a number of places but I think there is an
obvious height to width ratio here. Anyway, those are just some shaky
numbers to backup your claim and another set for a different view on the
issue.

Cheers,
~ Bryan

Peter Lairo

unread,
Jun 26, 2010, 4:57:58 AM6/26/10
to
On Fri. 25.06.2010 20:55, Bryan Clark wrote:
>> - This would result in a huge empty space below the tabs.
>>
> I'm looking at a 1440x900 display

It might be useful to calculate the "area" used by horizontal vs
vertical tabs:

Horizontal Tabs:


> With a single tab you have 1125x25 of empty space

1125 x 25 = 28,125 px² of empty horizontal space

Vertical Tabs:


> With a single tab I have 190x808 of empty space

190 x 808 = 153,520 px² of empty vertical space

So one vertical tab leaves a lot more empty space (153,520 px²) than on
horizontal tab (28,125 px²). That's 5.5 times more.

Also, since the vertical blank space's width to height ratio is closer
to 1 (i.e. wider, less narrow), it "seems" to take up more space too.

BTW: You make good points about web pages needing vert space more than
horiz space. But the subjective impression of all that "wasted" space
will need to be addressed.

Dan Mills

unread,
Jun 28, 2010, 7:12:43 PM6/28/10
to Peter Lairo, dev-us...@lists.mozilla.org
On Sat, Jun 26, 2010 at 1:57 AM, Peter Lairo <Pe...@lairo.com> wrote:

So one vertical tab leaves a lot more empty space (153,520 px²) than on
> horizontal tab (28,125 px²). That's 5.5 times more.
>

...

> BTW: You make good points about web pages needing vert space more than
> horiz space. But the subjective impression of all that "wasted" space will
> need to be addressed.


I'm not sure that is true. While your numbers are accurately calculated,
they seem to mean more to you than to me.

For example, if eliminating "wasted space" was the one metric to live by, we
could have an icon which when clicked would display your tabs. "wasted"
space would be as big as the icon, and yet probably not the experience we
would want (is it?).

I'm sure that is not news to anyone; it's just that I keep seeing numbers
pop up in this list (e.g., area/height of toolbars) being used to steer
design decisions, but those numbers in a vacuum mean very little to me. I'm
not arguing against quant analysis of interfaces, but I think we'd need a
more comprehensive approach for the numbers to be meaningful.

I'm not a UX guy, just my $.02,
Dan

Tiago Sá

unread,
Jun 29, 2010, 4:42:13 PM6/29/10
to
The very most important thing in the end is that horizontal space IS
more important that vertical space, for the simple fact that you can
easily scroll up and down and you can as easily do it left and right.
So there you go.

Besides, many screens that browse the web are still 1024 wide, and you
WON'T want to have much less than that. The web is narrow enough as it
is.

David McRitchie

unread,
Jul 2, 2010, 7:42:24 AM7/2/10
to
"Tiago Sá" ...

It is not a matter of horizontal vs vertical space but of useable space.
If you turn your monitor ninety degrees you've changed the whole aspect.
If a few think that is absurd, well that is what you have if you take a wide
screen monitor and split it into left and right halves. With bigger monitors
we would be able to split into three or more across, those rollable screens
of the not distant future might be curved for somewhat equal distant viewing.

Putting tabs on the left vs horizontally, I give zero points to as long as a choice.
Making tabs default on the side, I give -3 points to.

Horizontally, my tabs are readable when they are only a few, when there are a lot
they squeeze down to small favicon size or smaller (at least they used to).

0 new messages