Drupal

Drupal users might take notice of the Drupal site, which is presently showing the administration menu tree integrated with the site theme, a new feature that is to be rolled into the next release. I guess it makes sense to some people not to require administrators or moderators to view site administration in a separate interface. I'll wait to try this and install on the client site I'm working on right now. Should make some of their common administrative tasks a bit more seamlessly integrated with the site UI. I liked having the separate interface though.

Now that Keith Instone has joined the ranks of Drupal users, Drupal usability is getting a kick in the ass again. Keith has been providing usability suggestions and making great development on his own Drupal site in the past few months. The current CVS is getting some of the changes/patches slowly added. 4.3 is going to be good.

Excellent. Keith, Gunnar and I wanted a usability list for Drupal. And here it is. The volume of the drupal-development list got to be too much for me. The past year has seen an incredible amount of increase in Drupal popularity and so the number of contributing developers on the list increased as well. Now I might be able to get back into contributing to Drupal. Keith has gone in head first and is making more usability suggestions that I ever attempted to in the past.

taxonomy and topics links are severely crippled on this site at the moment. am running the current cvs. sigh.

I've posted 2 separate blogs in reaction to Matt Webb's blog about adaptive and evolutionary design here:

* ia/
* Drop

I forgot to mention that I am trying blogging from NetNewsWire Pro Beta for a while. I really enjoy using the news aggregator interface and blogging from it is very simple. It uses XML-RPC to interface with Drupal by way of the Blogger API. Apparently, however, there are unique features of Drupal which prevent me from using NetNewsWire Pro. For instance, I cannot specify "Post to front page" or assign taxonomy terms. So entries go in user blogs area without getting posted to the front, making it essential for me to make a trip to the Drupal interface after all.

The latest revision of admin.css and admin.php has been committed to CVS.

View screenshot.

View misc/admin.css | View admin.php source

Some discussion is happening on the list about left side navigation. The issue is whether we should consider moving the navigation to the right and perhaps offer left and right versions of the CSS that admins can pick. Axel has modified admin.php so that this option is selectable. I suggested a few things like polling the Drupal community to see what they wanted. This was not taken well by one individual, but other alternatives to researching user needs haven't been offered by that individual.

What I am trying to discuss is how we should make design decisions. We sort of sketched out some user types rather than doing full blown personas and I believe some consideration was taken to address the primary user (in coming up with the project description) as a person with some PHP/MySQL ability and experience using weblogs like Slashdot. This may not be a full description of a user persona, but it does describe to some degree the technical proficiency we expect of a Drupal admin. I just want to keep that in mind as we go on developing the admin UI.

NOTE: See CSS revision 1.2 for completely updated CSS and admin.php

I made some modifications to the CSS and admin.php to display a neater 2 column layout. The result should look something like this:

View admin UI screenshot

This has only been tested in Mac OS X IE 5.2 and Mozilla so far. Major modifications were done to the list style in the #menu div and the druplicon was moved back to the #main div. I also moved the CSS to an external file -- misc/admin.css. Here's the corresponding admin.css and admin.php files:

View misc/admin.css | View admin.php source

I will continue to tweak and clean the CSS as time permits.

NOTE: See CSS revision 1.2 for completely updated CSS and admin.php

I'm sorry about the poor CSS execution on this first version. I copied it from another site I do (iaslash), but it's not quite flexible enough for our Drupal Admin needs. I worked on a modification quickly a few days ago and am still looking at it. It would look something like this:

View proof of concept (screenshot) | View the source

I think a 2 column layout would be simpler for handling the
breadcrumbs, should the height of the top box get too tall. The font sizes are bumped down a bit in the navigation and the ul bullets in the left hand nav are removed to conserve space. We might want to look at how those lists are being constructed, because there are a lot of extraneous ul tags embedded that will make it hard for us to controll with CSS.

There's still a lot to do regarding the structure and labeling of components in the admin pages. I would suggest that we not forget the usability recommendations/observations made in the following posts, as some finer points have been raised there and still need to be addressed. I still plan to do a heuristic evaluation in January as time permits.

Kristjan's usability proposal

Peter's observations from a Drupal beginner

Amy's UI suggestions

Stefan's questions

I'm starting to get involved with Drupal administration redesign. Following Kristjan's usability suggestions, I proposed that I would do a heuristic evaluation of Drupal Admin to see if he missed anything and to organize/present his suggestions by usability principles. Unfortunately I haven't had time to complete that because it's a crazy time of year. I've been making small suggestions, however, and since Dries went and implemented some of Kristjan's suggestions, I made some proposals with wireframes:

Layout:
* The breadcrumbs are great. Is there any reason why we can't still see the
list of navigation options in a left column as well?
* A link to the home page is missing
* Here is a wireframe of proposed layout:
admin_layout_1-0.jpg

Doing it in CSS:
* We could use a strategy where we use CSS positioning to layout the admin
pages. We would create misc/admin.css and include it with admin.php pages.
We would surround 3 areas of code with div id's (see wireframe below for
illustration). This way, some layout can be controlled by the user with CSS.
* Here's a wireframe of proposed css strategy
admin_css_1-0.jpg