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.
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
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
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.
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
> 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