Epic Sidebar/Foldering GUI thing
798 views
Skip to first unread message
Rainfly
Jun 19, 2010, 5:09:32 AM6/19/10
to Chromium-discuss
I'm coming into this with the knowledge that this is going to be hard
to describe without visual aids, so I've actually worked up several
mockups already (I was going to make more, but they take forever to
do, so I'll just post them as I make them, or as needed).
Alright, so I've been having two ideas I've been struggling with in my
head recently: sidebars, and "folder" tabs. It wasn't until I put them
together that the UI started to make sense, so I'll show you what I've
got.
The BIG FAT CHROMIUM BUTTON:
http://www.flickr.com/photos/51262468@N07/4713905164/
The least altered screencap I'm gonna give ya. This is exactly what my
current window looks like, plus the Chromium Button (which I sometimes
like to call the "Superbutton"). I'm in fullscreen, by the way, which
is why my top-left corner isn't rounded. It was simpler that way. So
what exactly does this button do? Well, two big things. Clicking it
toggles the sidebar. Dragging it (or dragging stuff into it)
manipulates folder tabs, which I'll explain later.
First, the sidebar:
http://www.flickr.com/photos/51262468@N07/4713266573/
Looks pretty nice, huh? Instead of crowding out your screen resources
for extended periods, the sidebar hovers over the content by design.
The idea is that you'll pop it open when you need it, put it back when
you don't, and it's no big deal to do it because the button is huge.
You can see that the button is now in the "Sidebar Open" state, which
is a bit more glow-ey. When you have an update in one of your sidebar
panels, the button will pulse between the normal image and the glowy
one, to get your attention.
Also note that the sidebar selection toolbar is the exact same as the
bookmark toolbar. The way this works is that if you already have the
bookmarks bar open, you don't have two stacked toolbars; the sidebar
toolbar *replaces* the bookmarks toolbar, complete with a nice little
animation where the background stays the same, but the contents scroll
down to reveal the sidebar selections that were apparently "there the
whole time," a text row above your bookmarks. Of course, if you don't
already have it open, it opens it for you, and closes it when you
close the sidebar, just as you'd expect.
Now, you can see in the previous image that all these tweets are just
previews, cut short by sidebar width. That's why I want to show you...
http://www.flickr.com/photos/51262468@N07/4713905464/
The DETAIL VIEW! Which was cut short by the edge of the screencap
anyway, but pretend it's there. All sidebars are basically in list
form, so the Detail View is simply a window that tacks onto the
sidebar next to a list item when you click it. In the example, I
clicked on a tweet by my good friend Navarr (which, despite the
appearance of the link, was not actually a rickroll). This opens up
the Detail View next to the tweet, which allows me to see the whole
thing unhindered, and automatically comes with a reply box (in
hindsight, I probably also should've put a retweet button in there
somewhere, but I'm not perfect). That means I can click on a tweet,
read it, and just start typing a reply, which will be sent when I hit
Enter. Clicking the same tweet in the list again will close the Detail
View, while clicking another list item will move the DV window and
change its contents simultaneously.
After chuckling at Navarr's cat, which was not actually nearly as
silly as advertised, I click the Chromium Button to close the sidebar.
Whoosh! All boxed up and ready for the next time I need it, and if I
get an email on my Gmail account, I'll know immediately from the big
pulsing button.
But look at how tiny my tabs are! I need to organize them into
different windows, probably close a few I'm not using, but since I
operate Chrome maximized only pretty much all the time (developer
tools excepted, of course), and I have plenty of other programs going,
it's a pain to switch between windows. More of a pain then it ought to
be, I say. I want a window switcher built into my tab bar - in fact, I
want to be able to drag and drop an entire WINDOW into another window,
because that would be AWESOME. And then drag that double window into
another window and nest those suckers! But how on earth would that
kind of magical tab heirarchy *work?*
http://www.flickr.com/photos/51262468@N07/4713905054/
That's how.
I'll tell you what I actually did later, but here's the details on how
folder tabs work first. The Chromium Button represents that window as
a whole. So to drag-and-drop a window into another window, you'd drag
the Chromium Button from the source window to anywhere in the tab
strip of the destination window (or the Chromium Button on the
destination window, it does the same thing). This sums up all the app
tabs onto the left, and then you have two folder tabs (visually
designated by the fact that they're separated from each other by
slashes). Both have a blue dot icon, and a selected tab inside them.
So if I drag a window with tabs A and B into a window with C and D,
the resulting window will have two folder tabs called A and C (the
first of which is selected), and two normal tabs, A and B (so the
tabstrip will go /A/c\ /A\ /b\. If I click on the B tab, the title of
the the AB Folder tab changes to "B", to reflect which tab in the
folder is active ( /B/c\ /a\ /B\). If I click on the C folder tab, my
normal tabs (A and B) are replaced with C and D, and C is selected ( /
b/C\ /C\ /d\ ). Clicking the icon of a folder will show a textbox
underneath it, allowing you to give it a more permanent name, because
otherwise, it will just be the name of whatever tab is active in that
window at the moment. This is useful for labeling windows according to
their general contents, like "Music."
That's the basics of how folder tabs work (I'll explain nesting
later). In the example in the screenshot, though, I used another
feature: window splitting. If you want to create a new folder without
the hassle of dragging the tab out, then dragging it's Chromium Button
to the source window, just drag the tab to its own Chromium button.
Dropping a tab into a Superbutton automatically treats it like a full-
fledged window, which means an easy way to make a subfolder in a
folderless window. This gives you two virtual windows in the same
display window: the new window, with just one actual tab in it, and
the original window, with the rest of them. Then you can just switch
over to the original tab and start dragging normal tabs into the new
folder tab to populate it. In the picture, I have just started this
process. I've dragged my Daily WTF tab into my Superbutton, which
makes a "Daily WTF" folder tab, and an Everything Else tab. In this
case, the Everything Else tab has automatically selected my Soundcloud
Dashboard tab, because it was on the farthest left. Hence, the two
folder tabs, named after their selected contents, with the Daily WTF
tab selected (which means that the Daily WTF folder is also selected).
In this situation, if I click the Dashboard folder tab, I'll see that
it's more crowded than ever, because even though this window's
disposed of its Daily WTF tab, it's taken on two folder tabs, which is
a net gain of +1 tab. However, once I start dragging my regular tabs
into the Daily WTF folder, both windows will quickly become much more
relaxed (and the tabs will be big enough to actually read).
Please, ask lots of questions about anything. I'm always paranoid that
I'm not being clear enough to be understood, so if there's anything
you don't "get," speak up about it. Folder tabs are especially hard to
describe adequately without showing in motion, but their mockups take
the longest to make. Hopefully I'll have some more up later, when I
have more time (and enough people have replied that I know where the
fuzzy spots in my explanation are). Happy Browsing!
to describe without visual aids, so I've actually worked up several
mockups already (I was going to make more, but they take forever to
do, so I'll just post them as I make them, or as needed).
Alright, so I've been having two ideas I've been struggling with in my
head recently: sidebars, and "folder" tabs. It wasn't until I put them
together that the UI started to make sense, so I'll show you what I've
got.
The BIG FAT CHROMIUM BUTTON:
http://www.flickr.com/photos/51262468@N07/4713905164/
The least altered screencap I'm gonna give ya. This is exactly what my
current window looks like, plus the Chromium Button (which I sometimes
like to call the "Superbutton"). I'm in fullscreen, by the way, which
is why my top-left corner isn't rounded. It was simpler that way. So
what exactly does this button do? Well, two big things. Clicking it
toggles the sidebar. Dragging it (or dragging stuff into it)
manipulates folder tabs, which I'll explain later.
First, the sidebar:
http://www.flickr.com/photos/51262468@N07/4713266573/
Looks pretty nice, huh? Instead of crowding out your screen resources
for extended periods, the sidebar hovers over the content by design.
The idea is that you'll pop it open when you need it, put it back when
you don't, and it's no big deal to do it because the button is huge.
You can see that the button is now in the "Sidebar Open" state, which
is a bit more glow-ey. When you have an update in one of your sidebar
panels, the button will pulse between the normal image and the glowy
one, to get your attention.
Also note that the sidebar selection toolbar is the exact same as the
bookmark toolbar. The way this works is that if you already have the
bookmarks bar open, you don't have two stacked toolbars; the sidebar
toolbar *replaces* the bookmarks toolbar, complete with a nice little
animation where the background stays the same, but the contents scroll
down to reveal the sidebar selections that were apparently "there the
whole time," a text row above your bookmarks. Of course, if you don't
already have it open, it opens it for you, and closes it when you
close the sidebar, just as you'd expect.
Now, you can see in the previous image that all these tweets are just
previews, cut short by sidebar width. That's why I want to show you...
http://www.flickr.com/photos/51262468@N07/4713905464/
The DETAIL VIEW! Which was cut short by the edge of the screencap
anyway, but pretend it's there. All sidebars are basically in list
form, so the Detail View is simply a window that tacks onto the
sidebar next to a list item when you click it. In the example, I
clicked on a tweet by my good friend Navarr (which, despite the
appearance of the link, was not actually a rickroll). This opens up
the Detail View next to the tweet, which allows me to see the whole
thing unhindered, and automatically comes with a reply box (in
hindsight, I probably also should've put a retweet button in there
somewhere, but I'm not perfect). That means I can click on a tweet,
read it, and just start typing a reply, which will be sent when I hit
Enter. Clicking the same tweet in the list again will close the Detail
View, while clicking another list item will move the DV window and
change its contents simultaneously.
After chuckling at Navarr's cat, which was not actually nearly as
silly as advertised, I click the Chromium Button to close the sidebar.
Whoosh! All boxed up and ready for the next time I need it, and if I
get an email on my Gmail account, I'll know immediately from the big
pulsing button.
But look at how tiny my tabs are! I need to organize them into
different windows, probably close a few I'm not using, but since I
operate Chrome maximized only pretty much all the time (developer
tools excepted, of course), and I have plenty of other programs going,
it's a pain to switch between windows. More of a pain then it ought to
be, I say. I want a window switcher built into my tab bar - in fact, I
want to be able to drag and drop an entire WINDOW into another window,
because that would be AWESOME. And then drag that double window into
another window and nest those suckers! But how on earth would that
kind of magical tab heirarchy *work?*
http://www.flickr.com/photos/51262468@N07/4713905054/
That's how.
I'll tell you what I actually did later, but here's the details on how
folder tabs work first. The Chromium Button represents that window as
a whole. So to drag-and-drop a window into another window, you'd drag
the Chromium Button from the source window to anywhere in the tab
strip of the destination window (or the Chromium Button on the
destination window, it does the same thing). This sums up all the app
tabs onto the left, and then you have two folder tabs (visually
designated by the fact that they're separated from each other by
slashes). Both have a blue dot icon, and a selected tab inside them.
So if I drag a window with tabs A and B into a window with C and D,
the resulting window will have two folder tabs called A and C (the
first of which is selected), and two normal tabs, A and B (so the
tabstrip will go /A/c\ /A\ /b\. If I click on the B tab, the title of
the the AB Folder tab changes to "B", to reflect which tab in the
folder is active ( /B/c\ /a\ /B\). If I click on the C folder tab, my
normal tabs (A and B) are replaced with C and D, and C is selected ( /
b/C\ /C\ /d\ ). Clicking the icon of a folder will show a textbox
underneath it, allowing you to give it a more permanent name, because
otherwise, it will just be the name of whatever tab is active in that
window at the moment. This is useful for labeling windows according to
their general contents, like "Music."
That's the basics of how folder tabs work (I'll explain nesting
later). In the example in the screenshot, though, I used another
feature: window splitting. If you want to create a new folder without
the hassle of dragging the tab out, then dragging it's Chromium Button
to the source window, just drag the tab to its own Chromium button.
Dropping a tab into a Superbutton automatically treats it like a full-
fledged window, which means an easy way to make a subfolder in a
folderless window. This gives you two virtual windows in the same
display window: the new window, with just one actual tab in it, and
the original window, with the rest of them. Then you can just switch
over to the original tab and start dragging normal tabs into the new
folder tab to populate it. In the picture, I have just started this
process. I've dragged my Daily WTF tab into my Superbutton, which
makes a "Daily WTF" folder tab, and an Everything Else tab. In this
case, the Everything Else tab has automatically selected my Soundcloud
Dashboard tab, because it was on the farthest left. Hence, the two
folder tabs, named after their selected contents, with the Daily WTF
tab selected (which means that the Daily WTF folder is also selected).
In this situation, if I click the Dashboard folder tab, I'll see that
it's more crowded than ever, because even though this window's
disposed of its Daily WTF tab, it's taken on two folder tabs, which is
a net gain of +1 tab. However, once I start dragging my regular tabs
into the Daily WTF folder, both windows will quickly become much more
relaxed (and the tabs will be big enough to actually read).
Please, ask lots of questions about anything. I'm always paranoid that
I'm not being clear enough to be understood, so if there's anything
you don't "get," speak up about it. Folder tabs are especially hard to
describe adequately without showing in motion, but their mockups take
the longest to make. Hopefully I'll have some more up later, when I
have more time (and enough people have replied that I know where the
fuzzy spots in my explanation are). Happy Browsing!
PhistucK
Jun 19, 2010, 5:59:30 AM6/19/10
to campad...@yahoo.com, Chromium-discuss
I am sorry for the relatively short reply in advance.
☆PhistucK
So, basically, you want it to have some of the Ribbon user interface the Office 2007+ (and Windows 7?) has. ;)
About the Folder1 photo, I did not understand what you tried to show, what sub folders, what sub window?
☆PhistucK
--
Chromium Discussion mailing list: chromium...@chromium.org
View archives, change email options, or unsubscribe:
http://groups.google.com/a/chromium.org/group/chromium-discuss
Rainfly
Jun 19, 2010, 6:19:56 AM6/19/10
to Chromium-discuss
Hey, Phi! And in reply... yeah, I guess I kinda had the Ribbon
Interface kicking around in my subconscious when I thought of it. In
fact, now that you mention it it feels pretty obvious!
So, about the Folder picture: what's going on is that there are now
two tabsets, and I can switch between them with the folder section.
See how there's that tab in the middle that's all conjoined like
Siamese twins or a bad medical experiment? That's the folder section I
was just talking about. So if you click on a folder that isn't
selected, the set of tabs after the folder section will disappear, and
be replaced by the tabs in the folder you clicked on. That way you can
stash multiple tabsets into a single window. You can have a set of
programming tabs, and a set of tabs about baby seals, and keep them in
the same window. Instead of having to mess around with the Windows
Taskbar, you can have just one window of Chrome down there, and switch
between your individual Chrome "windows" with the folder switcher
thingy.
In that specific picture, I have a few app tabs (which are constantly
available in any virtual window), the folder switcher, and a normal
tab. That's because there's only one normal tab in the currently
selected window. You'll notice they have the same name. That's because
if a window doesn't have a custom name (like "Programming"), it will
display the name of the tab inside it that's selected. My Daily WTF
tab is the selected tab in my Daily WTF Folder, which is why the
folder is named that way. The other folder starts out "Dashboard"
because that tab is the dashboard page for soundcloud.com. If I click
on the Dashboard folder, the tab on the right will disappear, and all
the tabs in the Dashboard folder will appear in its place, with the
Dashboard Tab inside it selected (so the tabs would look like / Y! \ /
M \ / W \ /Dashboard/The Daily WTF\ /Dashboard\ /Your Tracks\ /Project
Wonderful\ ...). If I select another tab in the folder, the folder
name will change to reflect it. So if, in the Dashboard folder, I
select my Project Wonderful tab, the name of the folder will change to
"Project Wonderful".
Hopefully that's a bit clearer, I'm sorry.
On Jun 19, 2:59 am, PhistucK <phist...@gmail.com> wrote:
> I am sorry for the relatively short reply in advance.
> So, basically, you want it to have some of the Ribbon user interface the
> Office 2007+ (and Windows 7?) has. ;)
> About the Folder1
> <http://www.flickr.com/photos/51262468@N07/4713905054/> photo,
> > Chromium Discussion mailing list: chromium-disc...@chromium.org
Interface kicking around in my subconscious when I thought of it. In
fact, now that you mention it it feels pretty obvious!
So, about the Folder picture: what's going on is that there are now
two tabsets, and I can switch between them with the folder section.
See how there's that tab in the middle that's all conjoined like
Siamese twins or a bad medical experiment? That's the folder section I
was just talking about. So if you click on a folder that isn't
selected, the set of tabs after the folder section will disappear, and
be replaced by the tabs in the folder you clicked on. That way you can
stash multiple tabsets into a single window. You can have a set of
programming tabs, and a set of tabs about baby seals, and keep them in
the same window. Instead of having to mess around with the Windows
Taskbar, you can have just one window of Chrome down there, and switch
between your individual Chrome "windows" with the folder switcher
thingy.
In that specific picture, I have a few app tabs (which are constantly
available in any virtual window), the folder switcher, and a normal
tab. That's because there's only one normal tab in the currently
selected window. You'll notice they have the same name. That's because
if a window doesn't have a custom name (like "Programming"), it will
display the name of the tab inside it that's selected. My Daily WTF
tab is the selected tab in my Daily WTF Folder, which is why the
folder is named that way. The other folder starts out "Dashboard"
because that tab is the dashboard page for soundcloud.com. If I click
on the Dashboard folder, the tab on the right will disappear, and all
the tabs in the Dashboard folder will appear in its place, with the
Dashboard Tab inside it selected (so the tabs would look like / Y! \ /
M \ / W \ /Dashboard/The Daily WTF\ /Dashboard\ /Your Tracks\ /Project
Wonderful\ ...). If I select another tab in the folder, the folder
name will change to reflect it. So if, in the Dashboard folder, I
select my Project Wonderful tab, the name of the folder will change to
"Project Wonderful".
Hopefully that's a bit clearer, I'm sorry.
On Jun 19, 2:59 am, PhistucK <phist...@gmail.com> wrote:
> I am sorry for the relatively short reply in advance.
> So, basically, you want it to have some of the Ribbon user interface the
> Office 2007+ (and Windows 7?) has. ;)
> About the Folder1
Reply all
Reply to author
Forward
0 new messages