TYPO3 Core

Looks fine to me. +1

The original Design never had the (user name) info in there.

• Real Name @ Workspace [Logout]
  • Klick on user show a context Menu
  • In there we could show geek values,
    like the technical username.

See (TYPO3 v4.1 .. hehe):

Jens Hoffmann wrote:

Looks fine to me. +1

Perfect!

What about putting the username not into the title-attribute but a real fold-out?
(inspired by preview.typo3.org)

Furthermore the modules from USER TOOLS could be moved into the new fold-out. These tools are used less frequently.

Shall we move the username to the right?

Shall the logout button be moved to the fly-out menu or shall there still be a logout button in the toolbar right of the user's name?

What do you think?

SU case

Sure, only focus on username - nothing else:

Current user - realname availiable

Current user - no realname

SU user - realname availiable

SU user - no realname

Patch set 2 for branch master has been pushed to the review server.
It is available at http://review.typo3.org/7209

There still needs to be a usability team decision upon the "SU" case ("Switch User").

I like the last suggestion from Felix, but:

In my (humble) opinion the two letters "SU" have no meaning to most users I deal with (even admins), only for the Unix affixionados.

So my suggestion is to just get rid of those letters and instead move the information about the "switched user" status to the tooltip, and only show the Username in "red" denoting that "somethings different":

Jens, what do you think?

Sorry, I meant this:

Always show "username (Real Name)" in the tooltip if the information about the real name is available, else show only the respective "username".

In general I like the Idea of improving the Header. :)
Big thanks to Felix for all the work on this topic!

Space¶

I like the idea of more hight for the menu, looks quite
valuable to me. And the clear/visuell Separation is a
nice help, too. We should go for that.

Logout¶

The idea of putting the logout into the user context
menu is nice to clear up the top menu. As most users
just close the browser and auto-timeout there sessions.

Arrangement¶

But, we should the arrange the object in the top menu
(by default, maybe this is configurable) by usage of a
average-user, not a power-user like we all here are!
A average-user will search a lot more than to review
his user-settings. So for the top right should stay, the
search as most used thing.

It looks ok (at your Screenshot) to have the search on
the left, but with a normal view with a tree below and
the filters visible, it will messes up the thing a lot. :(

So I would still suggest to go for: (From Left to Right)

• TYPO3 Logo
• (Dynamic space)
• Custom Widgets (By Extensions)
• System Widgets
• | .. separater
• User (& Settings or Switch etc.)
• Search Field

Switch User¶

Maybe we need to come up with a complete new solution.
It should explain in more detail what's going on. I think we
need to show more Informations about it.

• Real user (the one who really logged in - and we will switch back to).
• Switched user (with which role (or group) .. admin/editor ..)

Show Name¶

To me it would be fine to go for a more friendly way of communication:

" Hello Felix "
And only on rollover or in the context menu, it shows tech details, eg:

• Username: feKopp
• Realname: Felix Kopp
• Role/Group: admin

Greez Jens

What do you think about this visualization with the discussed order of items and |-separator images?
+ What do you think about the separator-layout itself?

I like the previous idea very much and will contribute the separator-patch.

Please also consider these articles about - might be interesting:

• "Horizontal attention" (2010)
  http://www.useit.com/alertbox/horizontal-attention.html

• "Left is best" (2006, sorry)
  http://www.usability.gov/articles/newsletter/pubs/040106news.html

• Following this presumption the search as the most relevant item should move further to the left.
• Also the logout and user information might be on the very right.

Use "F-Shape" layout

Complete and easy overall summary:
http://sixrevisions.com/usabilityaccessibility/10-usability-tips-based-on-research-studies/ (2010)
-> Just look at the heat maps, if you don't want to dive into the lala.

Merged in 8aeb14a2131dd9d5e29c98e010e435a45732e892

I must say that this separator looks very ugly for me in kind of every browser:

Chrome (same in FF):

IE8:

Was it really meant this way? In the screen shots here, there's some space below the separator.

To address concernes raised yesterday, I took the liberty to re-sketch few alternatives to improve the usability of the toolbar even more.

Please find these versions attached.
I personally think that there are two values that might be tuned - (a) spacing between toolbar separator and the (b) length of the separator line itself.

(a) The spacing between the separator and the aligned items on the left and the right side must be equal - but must also depend on the 'active' state. This is especially necessary of the fly out menus. There are answers to the spacing - less or or space. Let us argue:

Generally more space is vertically necessary. Every separator extends the tools bar. On small screens with full toolbars (extra items by extra extensions) smaller spacing might be the better way. On the other hand a larger spacing might - highlight the separator itself even more and/or increase readability due to the larger space.

I decided for the smaller version because the separators themselves are really discreet and do not need to be highlighted by empty space - thanks to the dark coloring. The extra space might not be needed.

(b) The vertical length of the separator lines could begin with the text/icons and stop at the bottom of the text/items. Or start and the viewport/screen and end aligned with the bottom of the text/icons. Or start with the text and end with the end of the toolbar column.

I think that ending with the toolbar make most sense because: The module and tree navigation also have separators / highlight elements that start with the text and end the section.

I am happy to invest more time and change the layout of the separator lines to get a almost perfect solution.
What do you think?

I would like to add a clear grid below.
Currently it seems a bit random to me.

• Red Squares: are 12px*12px big
• Separators: are 30px hight

What do you thing?

Hi Jens, the Grid is not random. The Spacings between the lins and the content are equal but you did not consider that the content does not begin with the icon but with the white background, when and fly out is opened. Please see my earlier comment and attachment: