Here are the proposed designs for the new version of the administration interface. This follows on from tims orignal concept - http://www.silverstripe.com/google-summer-of-code-forum/flat/2536

As you can see in the top version, the user has clicked Insert Image and a 3rd column has faded/slided in with options etc etc.

The top nav has been made smaller, icons gone so to make more room for future addons. This emphasis is also with the tabs in the content area. Instead of having nested tabs we have reduced it to 1 row. This helps save valuable space and provides better usability then the current model. With all the minor space saving adjustments we have made the main content area about 40% larger. Plus the site tree also can be minimised with increases the content area aswell. If you close both bars you can possibly have a content editor 100% of the screen. Handy!

Feedback is most welcome!

wow, that's great - looks so much more like a professional web-app now!

some minor points (note: I've mailed some of the following comments on earlier versions to tim before):

design:
- editor-buttons get a bit too much highlight with bevel, high contrast *and* gradient - when quickly glancing at the interface, they are the first focus point
- the orange highlight is pretty strong, especially when its not only a hover-style but permanent (does the "image"-button stay orange when the sidebar is pulled out?)
- the inactive tabs should be less "sticking out" (no gradient at all? lighter blue?)
- hovered tabs look a bit too "aqua", with the different hue of blue it doesn't fully match the other layout
- how about making the fontsize in the sitetree 1px smaller? i'm not sure how sam/tim/etc feel about this, but it seems awkwardly large compared to e.g. the form-labels. perhaps making them 90% grey would do the trick as well...

usabilty:
- page actions (save, publish, ...) are easy to miss with all the editor-icons on the top, i think leaving them on the bottom is a better web-UI-paradigm (like "sending a form"-buttons), and makes them easier to find
- why is "upload image" another accordion-drawer rather than a button?
- "move" in "site tree" is a modifier rather than a action (toggle on/off), so it conveys the wrong metaphor together with "create" and "delete"
- "create" should have "..." because it invokes a further sub-action (choosing pagetype)
- what happens when you click the downards-pointing button near the search-field?

first off, great work, things are looking very polished

i agree with ingo's comments/suggestions with the possible exception of one, if the image upload 'accordians' into an upload form, i think it will look nice that way

Thanks guys for the feedback. Glad you like it ingo! I hear from tim you have volunteered to do the coding for it :D hehe

- editor-buttons get a bit too much highlight with bevel, high contrast *and* gradient - when quickly glancing at the interface,

Yeah they are my next task to work on. I used that style as it was a icon set :P. But yes it doesn't fit the design. I just chucked them as a place holder as you know how long all those icons take to create!! and I didnt want to create a set then have this design change only for the icons not to match.

- the orange highlight is pretty strong, especially when its not only a hover-style but permanent (does the "image"-button stay orange when the sidebar is pulled out?)

no it is purely a hover effect but I get what you mean. I might try using the same hover style as the top navigation. The sort of gray/blue.

- the inactive tabs should be less "sticking out" (no gradient at all? lighter blue?)

I did have a play around with that but the tabs ended up appearing quite lost. I used the same blue as the ribbon and they just didnt seem to stand out as much. I might try a lighter gray. That might work..

- page actions (save, publish, ...) are easy to miss with all the editor-icons on the top, i think leaving them on the bottom is a better web-UI-paradigm (like "sending a form"-buttons), and makes them easier to find

The only reason we moved them back up to top right is to save space, They take up alot of room so we were trying to make the best use of the room. Having the buttons down there you lose 40px of height off the content by the time you add padding/margins. The right space in the footer bar is really tempting to put them but that might not work to well ether.

what happens when you click the downards-pointing button near the search-field

Tims idea is that you will have search or filter search options similar to Outlook 2007.

I like the concept, and Ingo's points are good.

However, I think the save and publish buttons should be at the bottom right. Up the top it's too hard, and they don't work as 'actions' in that toolbar context (since the other buttons up there just open different panels, and such). Why don't we put them underneath the Content editor, as Elijah's done with the GSoC version of SS? Generally we were moving away from putting them at the top right, since usability was flawed when they were up there. People often look to the bottom to find a place to save their work, since it's more of a 'web thing' with forms.

One other question is where do the error messages go? (as well as good ones, like the fading in dialog box saying 'Page has been saved')? I don't see them in the design, or any space for them to go anywhere. :-)

Is there also a way for the site tree to be filtered or sorted? Were we looking into doing something like this? If so, I'd like to see it somewhere in the design. EDIT: just noticed that the idea was the downward pointing arrow dropped down some extra site tree configuration.

Lastly, what is the font you're using overall? I generally agree the site tree font size is a bit too large for the rest of the elements on screen.

Apart from that the concept is awesome, it's far more professional than the current design. I can't wait to see this operational! Go for it Ingo! ;-)

Sean

what is the font you're using overall

To fit in with the 'Office feel' I have used Calibri the default vista font. It shouldnt be a problem with people with Microsoft Vista, I think its included in a patch for XP a while back, and its included with all Microsoft products. So it covers a decent chunk of the population over the next year or 2 when Vista becomes main stream. Then we will just use verdana as the backup.

One other question is where do the error messages go? (as well as good ones, like the fading in dialog box saying 'Page has been saved')? I don't see them in the design, or any space for them to go anywhere. :-)

Meh just overlay it over the middle of the page, actually since we going for the windows feel how bout we make the error screen the famous windows Blue Screen of death haha people will be able to recognize it straight away! :P Nah it will be something we will think about. Its just something I missed.. tons of other things Ive missed like a logout button, a help button.... etc etc

I'd recommend the error message appearing just above the tabs 'Content' etc.

Maybe when needed, it moves the tabs down slightly to reveal the message? Then the tabs move back up once the message has expired (faded out completely)?

Help and logout buttons could probably appear in the bottom strip somewhere.

One other thing, I think those tabs (Content etc) could be less stylized. Rectangle blocks are used for the main navigation, then curved 'tabs' here. I would say use one style (blocked or rounded for both menus, instead of different ones for each). At the very least I would reduce the blue, and potentially space them out a bit more, they look a bit crammed up.

Sean

Dude.....Nice GFX
I really like the ribbon design fits really well with vista and the emerging web look.
Good Work.