While I knew that the mockups I sent through could go either way in how
people viewed them, I thought it was important to look at things from a
completely different perspective, just to make sure we were not missing
something obvious. The thing is that I believe the exercise did bring out
one element in my mind that I would like to discuss a bit more. Design
continuity and elements that we use on a page are an iterative process. We
find something that works and we use that again when the need arises.

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.

I agree that the titlebar is useful, and would provide a consistent
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. ;-)

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 won't mince words, I hate the title bar. I find it inelegant and working
against the purity of the design. And I really don't mean to be a
discouraging asshole, but instead of spending a couple of days mailing back
and forth to find out where I really stand, I'll carve right to the bone:

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.

On Jan 15, 2008 3:15 PM, Scott Merrill <ski...@skippy.net> wrote:

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

http://flickr.com/photo_zoom.gne?id=362526662&context=set-72157594488...

(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

On Jan 15, 4:56 pm, Owen Winkler <epit...@gmail.com> wrote:

Here's what I think about it: The bright upper border and dark lower
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?

On Jan 15, 2008 5:13 PM, Michael Bishop <miklb.onl...@gmail.com> wrote:

First of all, the functionality is different. Where the title bar is just a
streetsign, the quickiebar was meant as a customizable toolbox of sorts. It
supplements the menu bar. This is why it flows under it (and it is _under_
it, as signified by the dropshadow), and also why it's smaller.

The titlebar on the other hand swallows your attention. It rises above it,
outsizes and mimics it, taking away 'importance' from it, from no reason at
all.

On Jan 15, 4:37 pm, "Michael Heilemann" <heilem...@gmail.com> wrote:

Oh, wow. Thats setting the bar high. I still (nearly) get tears in my
eyes when I remember that I sold my Amiga 4000/30.

Christian

On Jan 15, 12:21 pm, "Michael Heilemann" <heilem...@gmail.com> wrote:

I understand your points about why you don't like the proposed title
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

This is very interesting discussion, I personally agree with Michael
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.

What is meant by "tab-pagesplitter element"? This is first time I hear
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?

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/)

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.

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.

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.

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

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.

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