Drupal has an option I haven't seen in any other CMS: You can set a theme for the admin section to your liking. As nice as it is, it raises serious UX problems especially for new users, if admin and frontend theme is the same (see UX study Baltimore: Where is my site?)  There has been talk and action to cure this in a simple way: get a default administration theme into core.

Having learnt that core issues require determination and endurance, I'd like to make a fresh start (apart from an existing issue about that:(http://drupal.org/node/79023) by introducing some possible guidelines and candidates.

Guidelines

So what is this all about? Apart from seperating Front- and Backend optically, why should we want a seperate Admin theme and which requirements should it meet?

1. Clever use of Space

One thing that bugs me about Admin and settings pages in Drupal is the waste of space. Everything is rendered in a vertical manner, a lot of space is wasted because often only a third of the horizontal space is used. On the right see a typical example from the comment settings: the descriptions could easily also flow inside the red-lined area.

Though I understand the reason for this: Modules can easily insert new settings into this because everything is vertical, I hope one day we will see the use of all that horizontal space. For the time being, how to improve the use of space without having to change the forms? Well: Paddings should be small, Fontsizes can also be set to 11px for many things.

This is one main reason I never use Garland for admin section: The fonts are way too big and a lot of unnecessary paddings (that are fine for frontend) are there.

Here is an example from a theme I've done myself: The simple trick to set the font size in the blocks table to 11px makes the table much smaller and nicer, still it is very readable.

2. Optical Hierarchy

There is lots and lots of elements in Admin section. So how can you emphasize more important things and diminish less important? Not too hard to say. Use Font coloring: text can have many shades of grey, and can use color (at least the major color, which would be blue in Garland), text can be smaller and bigger. Headings can be big headings and smaller headings. Very importand messages can get an Icon, which is easy to understand for its symbolic character. See the examples from pixture for the icons. These make a lot of sense for messages which are normally very important.

3. Candidates

These first guidelines imply that a lot of work has to go into detail in an admin theme: font sizing, how to present tables and tabs. Other than a front end theme, the primary focus is not on looking nice. Well sure it should look nice. But furthermore, it must be rational and have a very good Information hierarchy, readability and so on. So far I know three themes that present themselves as Candidates, of which one is not ported for D6 and maybe never will, but is still useful as an example. These candidates so far are RootCandy, Pixture and Aquasoft (which is not ported to D6).

Realizing that this gets too long for a single blog post, it will be a series ;) So in the next issue we will have more guidelines and a look at the candidates and the skills they get onto the dancefloor.

Kommentare

L
Luciano Hoffmann

I approve, very good

5. Dezember 2008 - 13:19
I approve, very good iniciative! It whould be great to see an admin theme in core.
J
Jeff

PR

5. Dezember 2008 - 13:23
Nice post and a worthy conversation. I just wanted to point out that the theme you refer to as Pixture is in fact "Pixture Reloaded", which is a fork (sanctioned by the original author of Pixture). The original is built with tables whereas PR is pure CSS, and only PR has the fancy icons (Lullacons).
T
Thomas Moseler

pixture reloaded

5. Dezember 2008 - 13:53
Yah, I always mix that up. Maybe Jim Burnz and Hide will come to terms do drop the table version... Oh, fancy Icons are not in the original? Shame...

Another thing is that if

6. December 2008 - 1:44
Another thing is that if there's a really wide table in the main content area (ex. Permissions), the body element should expand to include the whole thing. Don't try and use an overflow technique that either completely hides the content, or causes a scrollbar to appear outside of the viewport.

Serious canidates?

6. December 2008 - 21:04

I must say, I dont entirely agree with this. It makes sense to just add an admin theme, to go for the mental model of users. But, isnt a small visual change enough?

Using color, smaller text sizes, shading ect? I am not sure what this is all about, but I have no idea how that could fix the admin theme other then adding more visual clutter.

Having looked at all the admin theme's, I dont concider any of them core worthy. Maybe your experience from clients is diffrent, but I dont see how an admin theme could happen for D7 nor if it should.

T
Thomas Moseler

Thorough approach

6. December 2008 - 21:50

Well, see the "candidates" in quotation marks. I just use them because they were the best I could find up to now and following the guidelines I try to depict.

I have been actively using aquasoft for quite some time and at the moment pixture reloaded and am quite happy with it. Would be interested what other themes people have used successfully as admin themes, this could bring light to preferences people have concerning what it should be like.

Sure: to really pull this off we must aim higher. But from the experience with long-standing discussions it is better to have a starting point to improve on. And as that, I believe the mentioned examples do their job quite well.

Maybe I can bring some light with the coming up issues of this series... (the post is not meant as a standalone statement)

My main objective is to find criteria that can help build a featureset that must be met by a coreworthy admin theme. It is a bit puristic to just call that "visual clutter" ;).

Look at the wordpress node edit form and how far they get by introducing about five or six optical "layers" that can be zoomed into (I mean different points of attention made with color, size, shape, weight and so on.) You can instintively always find the submit button and all kinds of things. That's what I mean by "information hierarchy".

But you are right: we gotta work hard. The world was not won in one day.