Usability Team

Hi Steffen,

is the admin panel only the grey floating window above the design? Maybe I could do a little design refactoring on thursday evening when I am in Stuttgart at the code sprint? Basically it's good, but it could be a little bit more "T3 4.4+"

cheers
lars

Just a few questions:
- is this the final design?
- where can I drag the panel? do we need a "visual spot" for that
- do we need an hierachy in the accordion? Is the first panel in the same level like the third or secound one?
- can you submit an expanded panel?

hey lars!

i would like to create a design too, if its ok for you?! :-)
Greetz Martin

hi martin,

yep, absolutely! feel free =)

some answers to question:
Update is the same as before, after you change somne settings you always have to do update, same as before
Drag is done by title bar, before it was the complete one, which made it impossible to select text for copy.

So please take that into account, the change is the visible style, the drag handling, and rest only cleanup of code, no structure or functional change!

Uiii ... ok there need to be done some work.

- There are still old parts included.
- Grid is missing in sub-levels.
- Alternating colors are missing
- (+) and (-) should be arrows like in the backend tree

Lets see what the designs will change :)
Cool, that we have some real Team-Action here.

hehe - feels like a chat :)

I think we should seperate design and usability here. Let's focus on design for this issue and make suggestions on usability for a later issue, as it's hard to do that all at once. At least the coding part is done from Dmitry and i don't know if he is willing to do a complete new admin panel ;)

For me it would be nice to add this tiny JS to the Admin panel.
http://www.sprymedia.co.uk/article/Grid .. so a Designer has
a value out of the Admin panel, too. :)

Hy,

i looks very nice but it would fit more to TYPO3 v5 than v4.
I'd suggest to do a meeting next week and put the feedback
on the agenda there. But I'm really proud that you produced
that UI!! :)

Greez Jens

Fists, regarding the last screenshot: there is no such thing as "TYPO Script". It is "TypoScript". Do not make branding incorrectly! That's a definite blocking -1. Next, arrows on the right change the way people already work with admin panel. Not that it bad but can cause inconvenience. By the way, did you see somewhere collapsing triangles that work this way? I didn't. So I am not sure about this solution. Typically such triangles are on the right because that makes less mouse movement (better UX). They will be on the right for Hebrew or Arabic but not for Western.

Secondly, TS rendering was not forgotten, it is produced by a different piece of code, so it is outside of the admin panel. This was not my task to fix ;)

• refresh the look of the admin panel
• visually separate the panel from the rest of the site
• make sure it validates
• fix dragging issues

My task did not include any other changes. The result is donated to the community, so it is up to you if you want to use it or not :) I do not plan any further work on this. However if you use this part of the work, you should mention me and Snowflake as those, who made main efforts to rework the admin panel. That would be fair :)

Thanks and keep up the good work! :)

ALso I disagree with Jens. We should get that to v4 because this is what custmers ask and companies want.

Don't try put all good stuff to v5 only. We still want good looking v4. Basically we already have our own versions with that look ;) We want the community to enjoy it too.

Hy Dimitry,

Thanks for your Feedback.

Try be more friendly, please.
I fear it's just a language/communication issue and not mean to be on purpose.

• As this is his voluntary work, start with something NICE.
• He aim, just like you, for the best result - Give him a chance to reach it.

• No round corners
• Less shadow
• Less gradients
• ...

In detail:
For an "outsider" it is very hard to get an strange interface like that one, keep this in mind, please.
I will try my best to support Martin (he is a working colleague of mine here at dkd) so this shouldn't
be impossible to help him :)
Things like TypoScript are just inconstant and doesn't seem to be easy to understand for the outside.
So for me it's natural that he will aim in the first more to a wrong direction, you as Senior should be
more aware of this. >> TYPO3 is not Typo3 ... but TYPOscript is wrong .. how to explain that? :)

So ... that we don't end up here in a endless discussion. Mail me if you have a problem with this,
but please don't reply to my post here :) Give us the chance for some iterations here - and than
your feedback is very welcome! :)

Greez Jens

Martin,

For me there are still some questions:

Admin panel is for those who implement TYPO3. It is an essential tool for development, deployment and debugging. So if you do not understand parts of it, do not try to improve them, please. You may accidentally complicate usage of the panel for those, who actually use it daily.

Also if you change a lot, that is going to create problems for users. You mentiuoned Apple. Compare how they make change to Microsoft's way of making changes. Microsoft changes their interface completely with each new version. Every user hates this. Apple changes OS X very little from release to release. My change was made to follow the same principle: do not change much, just give it a fresh look. Let user work with new colors but keep what they are used to work with. This way it is very easy for them to adapt to new changes. In future versions we can improve functionality.

1. What are the Icons in the EditPanel for?

They perform the same function as in the Backend. Are you familiar with TYPO3 Backend? Did you try to hove over icons in the admin panel? They show tooltips.

2. Is the horrible chart in the Typoscript necessary? And what is this for? It looks kinda freaky to me :-)

Yes, it is necessary. It is very good for diagnosing problems with caching or content rendering.

3. Do we need an "Update" Btn? As an apple user you don' t have to confirm settings. I would rather prefer that!

Not everybody is Apple user. I am proud to use Apple computewrs but not everybody around uses them. Remember, when you change that, you cause inconvenience for existing users. Majority of them is on Windows/Linux and such behavior is unusual to them. Also it is not consistent with Backend behavior. So button is necessary.

There is another reason to keep the button: imagine that you want to change many settings at once. If the page reloads on each check, it will be a nightmare :( This is why the "Update" button is there. It is an important part of the workflow.

Jens, I am not trying to be unfriendly :) You can see smilies everywhere in my post. It is really hard communicate in English, who has different native languages. Most of posts sound offensive because people translate them "internally" to their language.

Having said that I must tell that I welcome Martin's ideas and I am happy that more people work on UI. But I feel I must say something to prevent a possible damage to admin panel, which is a very important tool. I understand that damage is not intentional but I think Martin, as a person new to TYPO3, should only concentrate on visuals, not on anything significant. That's the job for those, who actually use these tools.

Standard disclaimer: this and previous posts are friendly and made with best intentions.

TYPO3 is not Typo3 ... but TYPOscript is wrong .. how to explain that?

"Historical reasons" :)

Please, continue doing great job on UI :) Thanks for all your efforts and excuse me of anything here sounded unfriendly :)

Hi Martin,

first thanks for your great work of contributing to the TYPO3 v4 Design!
As Jens mentioned above I have the same feelings according to the overall styling. It does fit more to the v5 track than v4. As Jens said to me one year ago the v4 design has to stay "danish" ;)
And the best to go with this is not to reinvent the wheel for every single/special piece or functionality within the backend, but to use what's already there. Ideally a new developer would some day only grab certain classes to build a completely new part for the interface.

So pls don't use (too much)

• Gradients
• Outlines (!)
• Round Corners
• Drop-Shadows
• Contrasted colors (like big parts of black)
• Arial as a font

Rather grab parts of the backend from a screenshot and rescale/move them to reach the goal. Take the table/column-headers with the suddle grayish-gradient and so on.. =)

I think we should spread some of the existing PSDs within the HCI-team, so that not everybody has to rebuild everything from scratch?

cheers
lars

@Lars: Could you upload your PSD to the "Internal Documents" here in our Forge Project?
So only we (as group member) could access/download those files.

Here >> http://forge.typo3.org/projects/hci/documents (link works only for team members)

Nice to see such a heavy exchange around that admin panel! :) I would love to have that work continued - i.e. finished - and technically the first step done by Dmitry is already amazing.

I would assign Jeff Segars to continue the work started by Dmitry, as he is currently available and willing to help. To be able to plan this task, I would need to know when we can expect to see some design suggestions after the healthy discussion you had?

Cheers,
Ernesto

To get progress i would suggest the following:

1) get Dmitry's patch in as first step
2) change the style of the missing part in second step
3) Come with suggestions for improve on top, so Design/CSS team can finish the task without changing inline code of core

Hi Martin,

the screens really look nice!
The current problem is the lack of manpower, so i'm not sure if we get this done. So we need a volunteer who has the knowhow and time to do this task.

Hi Martin,

although I really like the design, it looks IMHO not conistent to the workspace preview selector, which is described in #10642.
What do you think of adjusting the colors?

Hey guys,
As Ernesto mentioned, I do have some availability to work on this task and integrate the design ideas into the core. Steffen G. mentioned some color changes....other than that, do we agree that it is ready to go?

Thanks,
jeff

Hey guys,
Didn't seem to be able to catch anyone online for the meeting Thursday. Can we try again early next week?

Hey Jeff!

thanks for your work so far! :-)
Do you need more input from me (like templ-inages)?
Just drop a line, so i can help you.

Greetz Martin.

Hey Martin,
Thanks for the offer! If you have a PSD available or individual images for the various arrows in the accordion that would be great.

Thanks!
Jeff