Titlebar
khaled Abou Alfa
So for example it all started with drop down menus grouped into 3 areas, Admin/Create/Manage. As a concept it works for us and is unique in the blogging solutions.
Mike sent through our first killer item with the tab-pagesplitter element, which again is of great use and great value and is an element that we can use throughout the admin panel when it comes about.
The same with the glass effect on the installer.
One of the good things that came out of this exercise for me is one of the element that I truly believe in which is the is the titlebar which sits below the menubar. I'll try and explain the rationale behind this. Throughout the admin panel you have different pages that look similar although they are used for different purposes. As an example there is the difference between the Create Post and the Create Page pages. Another example is the comment moderation pages. They look similar but do different things.
Now it was talked about on IRC that the user could look at the URL to distinguish between these user pages, but thinking about this, this argument kind of falls down when you take into consideration the create page and the manage comments pages urls and we're really trying to cater to a really large userbase of really varying skills in online software. So IMO we need some form of titlebar on the page somewhere to tell the end user where in the admin panel he's actually at. We're currently using this in the admin panel, however it does still require a great deal more fleshing out.
One could argue that we place the title bar only on pages that we feel definitely require it, which will no doubt lead a slew of discussions as to which pages require this element to be there. My view on this is that we can do better than that. By having a standard location found directly underneath the menubar we're standardising this element across the admin panel.
The additional benefit is that we can utilise this bar for a standard location for the help icon and a location for the search field and it's using this area in an efficient manner, since these elements would have to be included somehow on the page.
We've looked at the placement of this bar as text and then seperate elements underneath the menubar, but my feeling is that would make the create page look odd. Using this titlebar is a method to keep things in the area of use as clean and uncluttered as is intended and has been designed, while providing a way to link it to the rest of the admin panel.
With respect to it's size, we can reduce this slightly, but alas it's still a hell of alot smaller than if you added the the title, subtitle and search forms on top of each other, and I think you'll find that it's still smaller in size (combined with the menubar) than most online applications I've looked at as well.
Christian Mohn (h0bbel)
place for search fields/help/etc. I also agree that looking at the URL
should not be a requirement to understand where you are in the
application. I have no comment on sizes etc, I'll leave that to people
who has a clue.
I do have a problem with your mockup for the plugin page though. I
really don't want to see Habari turn into a web version of the iTunes
interface. ;-)
Scott Merrill
> element that I truly believe in which is the is the titlebar which sits
> below the menubar. I'll try and explain the rationale behind this.
> Throughout the admin panel you have different pages that look similar
> although they are used for different purposes. As an example there is the
> difference between the Create Post and the Create Page pages. Another
> example is the comment moderation pages. They look similar but do different
> things.
One of my initial complaints with a different blog package was how
much space was wasted on the various screens. There were doodads and
sliders all over the post composition screen. So I was very excited
to see Habari develop a streamlined post composition screen that
focuses on the core task of composing a post, and then stays out of
your way.
Looking at the recent mockups, I find myself railing against the title
bar as wasted space.
Have you considered placing the title text in the empty portion of the
menu bar -- between the menu drop-downs on the left and the link to
the site on the right?
Or, maybe shuffle the menu bar arrangement, so that the page title is
on the right, in place of the link to the site? (I admit I liked the
little Home icon we used to use!)
I don't want things to feel overly scruntched up, but I also don't
want us building an admin interface with huge tracts of poorly
utilized space.
Owen Winkler
>> One of the good things that came out of this exercise for me is one of the
>> element that I truly believe in which is the is the titlebar which sits
>> below the menubar. I'll try and explain the rationale behind this.
>> Throughout the admin panel you have different pages that look similar
>> although they are used for different purposes. As an example there is the
>> difference between the Create Post and the Create Page pages. Another
>> example is the comment moderation pages. They look similar but do different
>> things.
>
> One of my initial complaints with a different blog package was how
> much space was wasted on the various screens. There were doodads and
> sliders all over the post composition screen. So I was very excited
> to see Habari develop a streamlined post composition screen that
> focuses on the core task of composing a post, and then stays out of
> your way.
>
> Looking at the recent mockups, I find myself railing against the title
> bar as wasted space.
What interests me about this is that, aside from the publishing page,
all of the admin pages I can think of have the title on them somewhere
already. And Khaled makes a great case for it on the authoring page:
Page vs Entry, where the page looks almost identical, and the only way
you would be able to tell you're in the wrong place is by the page title.
With this title bar, instead of a giant h1 taking up space in the page
content, the page title moves into a discrete area that is easily
identifiable, takes up *less* space than the h1, and "adds space" for
the search box and the subheading.
To give an absolute comparison, the page title and subhead on my Options
page is 64 pixels tall. Khaled's title bar is only 41 and it contains a
search box and help button, too.
Anyway, that was a curiosity to me. Like I've said elsewhere, I kind of
like the bar.
Owen
Michael Heilemann
I look at this latest batch of mockups, and I see everything I've seen so many times in other, mostly uninspired interfaces. It's all inside the box. I'm just so not on the same page with it. It's like the anti-thesis of what Habari should be in my humble opinion. I might be wrong. Everyone else might love it. But to me it feels like a step backwards.
There it is.
And I only say this, because I _really_ care. I _really_ want Habari to not only exceed the 'competition', but to actually obliterate it. It should be sexy and daring and provocative, not to mention _so_ elegant that you'll _want_ to post new entries, simply to use the damn interface!
It should be the high watermark everyone else tries to outdo for years to come.
People should feel for Habari what they feel for the Amiga.
And I don't know why, but I care about Habari a great deal more than I ought to. So I'm willing to fight for what I believe in. And in cases like this, that'll no doubt have us butting heads.
Clarity might bruise egos, but it will also get us places faster. I don't mean any disrespect; and I hope you all understand that.
Owen Winkler
> I won't mince words, I hate the title bar. I find it inelegant and
> working against the purity of the design.
I need a clear description of what that is so I can compare it against
future mockups. Or even better, so that mockups can be produced to
match it.
> I look at this latest batch of mockups, and I see everything I've seen
> so many times in other, mostly uninspired interfaces. It's all inside
> the box. I'm just so not on the same page with it. It's like the
> anti-thesis of what Habari should be in my humble opinion. I might be
> wrong. Everyone else might love it. But to me it feels like a step
> backwards.
I'm not crazy about the "inside the box" designs either. Especially
agreeing with what everyone has said about the iTunes-looking plugin page.
I think Khaled even realized this to some degree after posting, but I
think this was a kind of purging of ideas for him, and at the very least
it's great to know what folks *don't* like.
Still, I haven't heard an alternate approach for presenting the page
title in a standard way across admin pages (not just one way on one
page, but the entire admin), and in the absence of an alternate approach
and/or a good reason why pages shouldn't display titles, this one is the
"best".
Also, I like it. :)
Owen
Michael Bishop
intended as some sort of customizable/personalized nav bar, but, I'd
be curious Michael how you've come to move away from its aesthetic fit
into the admin design.
http://flickr.com/photo_zoom.gne?id=362526662&context=set-72157594488415272&size=o
(the lighter gray bar below the nav is the only element I'm
referencing)
I personally liked it, and think it could be a middle ground between
what Khaled's proposed, and what would work with the current design.
~miklb
Michael Heilemann
> Michael Heilemann wrote:
> > I won't mince words, I hate the title bar. I find it inelegant and
> > working against the purity of the design.
>
> I need a clear description of what that is so I can compare it against
> future mockups. Or even better, so that mockups can be produced to
> match it.
border create a 3D effect, which to my sense-of-depth doesn't make any
sense, sitting just below the menu bar (which _isn't_ 3D). Because the
menu bar is fixed to the page, this causes some confusion in the idea
that the main menu bar is z-index-wise the topmost element on any page
in the admin, yet here is an element which because of its proximity to
the menu bar, feels like it is 'taller' than it.
I also personally prefer to keep 3D-ism restrained to interactive
items, such as buttons, tabs and the like, as it is a splendid way of
communicating 'interaction'.
The title bar is also bigger than the menu bar, which causes the two
of them to cancel each other out when I casually scan the page, and
the net effect is that more often than not, my eye ends up resting on
the title bar, rather than the more important menu bar.
The mixture of dark and bright text also makes the eye skip back and
forth, and in the current configuration my eye ends up resting on the
sub-title...
And finally, I'm not sure the create page is fit for a title. There's
something so clean and pure about it as it is; I'm not sure a title
adds anything.
How would I solve it? We could do this: http://flickr.com/photos/heilemann/2183367609/,
or something more subtle, like this: http://flickr.com/photos/heilemann/2195596378/
or this: http://flickr.com/photos/heilemann/2195604990/ (both
literally done in 2 minutes. I'm waiting for the Stevenote :D), .
Does that make sense?
Michael Heilemann
Regarding the Title Bar, I know the this concept was originally
intended as some sort of customizable/personalized nav bar, but, I'd
be curious Michael how you've come to move away from its aesthetic fit
into the admin design.
Christian Mohn (h0bbel)
On Jan 15, 4:37 pm, "Michael Heilemann" <heilem...@gmail.com> wrote:
> People should feel for Habari what they feel for the Amiga.
eyes when I remember that I sold my Amiga 4000/30.
Christian
Michael Bishop
On Jan 15, 12:21 pm, "Michael Heilemann" <heilem...@gmail.com> wrote:
bar, and I understand the original intention of the element. What I
was trying to do was find a middle ground. There have been several
mentions of liking the idea of a title bar, and I was simply proposing
using that element, which I think flows better with the admin bar (as
you've just outlined) as a substitute.
I guess seeking compromise is a bad idea...
~miklb
Kahi
and his argument about 3D look, z-index and so on, therefore I would
prefer titles in style of plugins-page mockup (http://flickr.com/
photo_zoom.gne?id=2183367609&size=o).
But there are a few things I don't understand, could somebody provide
me the explanations? Thank you...
1.
> Mike sent through our first killer item with the tab-pagesplitter element,
> which again is of great use and great value and is an element that we can
> use throughout the admin panel when it comes about.
about it...
2.
more than once in context of title bar there was spoken about "search
box" and about "help". What is the sense of these two items inside the
administration?
Owen Winkler
>
> I also personally prefer to keep 3D-ism restrained to interactive
> items, such as buttons, tabs and the like, as it is a splendid way of
> communicating 'interaction'.
Ok, I agree with the idea of using 3d to imply interaction (and this is
the type of rule that I'm seeking for my comments regarding a unifying
design). But the position of the title is the salient point here; that
the page title could sit at the top of the page rather than in the
content as on your plugin page mockup.
(http://flickr.com/photos/heilemann/2183367609/)
> The title bar is also bigger than the menu bar, which causes the two
> of them to cancel each other out when I casually scan the page, and
> the net effect is that more often than not, my eye ends up resting on
> the title bar, rather than the more important menu bar.
I'm not sure why it's more important for the eye to find the menu bar
when it's rendered the same in the same position on every page, and also
floats at the top as the page scrolls. The menu is not the centerpiece
of the page, nor even an activity specific to the page itself, therefore
it shouldn't attract attention.
I would think that it would be more advantageous to find the title bar,
which describes what the page does. The menu should remain something
that is "unseen" until you're looking for it. The focus on the page
title does not detract from your ability to find the menu.
> The mixture of dark and bright text also makes the eye skip back and
> forth, and in the current configuration my eye ends up resting on the
> sub-title...
This could be fixed by changing those colors. The background of the bar
could even be subdued to minimize drawing the eye away from other page
elements.
> And finally, I'm not sure the create page is fit for a title. There's
> something so clean and pure about it as it is; I'm not sure a title
> adds anything.
As Khaled pointed out, a title on this page indicates the type of
content you are creating; whether you are creating a static page or a
blog entry. There is no other indicator of this on the page.
> How would I solve it? We could do this: http://flickr.com/photos/heilemann/2183367609/,
> or something more subtle, like this: http://flickr.com/photos/heilemann/2195596378/
> or this: http://flickr.com/photos/heilemann/2195604990/ (both
> literally done in 2 minutes. I'm waiting for the Stevenote :D), .
>
> Does that make sense?
In the first example (the plugins page), the title is placed in a very
prominent place in large type at the top of the content area. If any
title on any page is over-bold, this is it. There is also no common
place for page help.
In the second example, the title isn't actually taking any less vertical
space, it's just minimized into a narrow, stylized box under the menu.
It's also missing a subtitle or some minimal instruction beyond the
title of the page, which could be helpful to clarify a page that creates
content from one that manages existing content. Also, it seems that the
page title would actually move around in this version, which I find
disturbing.
I think the third example confuses the page title in with the menu.
Others have suggested this as a potential solution, and now having seen
it, I think it's not a good one.
If the basis that the title bar isn't a good idea is solely that it
detracts from the menu, I'm unconvinced of this as a good reason to omit
the title bar altogether. The attempts to restyle it indicate that it
could be presented more cleanly without omitting it as a concept.
Owen
Owen Winkler
> 1.
> khaled Abou Alfa wrote:
>> Mike sent through our first killer item with the tab-pagesplitter element,
>> which again is of great use and great value and is an element that we can
>> use throughout the admin panel when it comes about.
>
> What is meant by "tab-pagesplitter element"? This is first time I hear
> about it...
In the Habari admin interface, there is a UI element that shows one or
more "tabs". They look more like buttons that are melted together. If
you look on the publish page under the composition area, you'll see two
of these tabs.
When you click on one of the tabs, the page "splits open" to reveal
elements inside. This is the pagesplitter.
> 2.
> more than once in context of title bar there was spoken about "search
> box" and about "help". What is the sense of these two items inside the
> administration?
I think the more obvious of the two is the "help" option. The help link
should provide useful information for operating the page that you are
on. Whether this help is offered by adding elements to the page (like
in Habari's installer) or opening a relevant manual section in a new
window is yet to be decided.
The search field use is a little less obvious. It would be used to
limit the number of options displayed on a page to only those you were
interested in.
For example, on the plugins page, if you typed "comment" in the search
box, you would only see the plugins that had the word "comment"
somewhere in their name or description. This would help locate the
thing on the page you were most interested in, and would be particularly
useful on the Options page, where the option you're looking for might
not be visible until you expanded a section.
Hope that helps.
Owen