Recently I've been playing around with different ideas on ways to enhance the usability of Drupal's admin pages. There seems to be a lot of recent discussions on this topic, particularly on the developers list. I was curious about how hard it would be to create a set of admin pages similar to Mamdo's admin pages. Not that I'm a big fan of Mambo's admin but it does have some disctict differences from Drupals, specifically, it's more graphical and it UI is distinct from the rest of the sites pages. The Mambo admin has it's own issues IMHO but again my purpose here was just to explore different alternative to enhancing Drupal's admin, not to attempt to create the "ultimate" Drupal admin.
Sooooo, I thought I would share the results with the Drupal community. Here are a couple of screen shots for what it looks like.
http://mycivicsite.com/admin_screenshot1.png
http://mycivicsite.com/admin_screenshot2.png
If anyone is interested I can provide more details about the configuration.
Comments
Of course
Of course we're interested ! :)
Is this some kind of tweaked sections.module with a theme loaded for the admin pages ?
very very high-level
current drupal HEAD (w/patch http://drupal.org/node/31326)
sections.module to segragate admin pages
a version of the CivicSpace admin theme making use of the new regions in Drupal 4.7
controlpanel.module
JSCookMenu JavaScript menu wrapped in a Drupal module (same one used by Mambo)
accesstabs.module - a module I threw together to show various admin pages within tabs on the admin front page.
Cool thing is that the horizontal menu, the graphical control panel and the quick access tabs are all driven from the Drupal menu/navigation system. Keep in mind that this is kind of a prototype so there's still a couple of things that I need to work out but it is functional and working for the most part.
Looks pretty sweet. Thanks
Looks pretty sweet. I think newbie users will be much less intimidated. Thanks for the work.
--
Get better help from Drupal's forums and read this.
Admin themes
I understand there's already a change in the admin screens with the next version of Drupal. As for interface changes inspired by mambo:
+1 for tabbed ares (core settings, organization, security, contributed modules...). If AJAX'd, it would be even better. OTOH, Mambo gets carried away with all that, with sections within sections within sections, with no cross-navigation ability except at the top level, which I find very aggravating and inconvenient.
-1 for cutesie graphics. I for one find Mambo's administration to be rather confusing, with a high amount of mystery meat navigation. Rather than graphics, I prefer simple text. If any graphics, I'd prefer just for major tab areas, and not for each and every little widget setting.
-1 for sclerotic navigation. I hate how you have to back out of things, or loop all the way around in Mambo admin. One virtue of Drupal admin is that it's simple and direct. Once you know what's where, there's no need for a bunch of clicking around to get to the right subscreen. With admin submenus default-expanded, you can go directly to any admin screen in one or maybe two clicks -- which is pretty much out of the question in Mambo admin.
+1 for more ideas about admin interface. Interface design is a fluid craft as scientific understanding of screen ergonomics increases and cultural trends change expectations. I've been distracted from the dialog on interface mock-ups for the past few months here, but I look forward to getting back into it, and seeing your suggestions for Mambo-inspired ideas.
Laura
===
pingVision • scattered sunshine
_____ ____ ___ __ _ _
Laura Scott :: design » blog » tweet
Graphics aren't so bad
+1 for the graphics. I agree that there are times when graphics can be more confusing than text (for example I changed the img_assist "add image" icon to plain text), but when combined with text as with this control panal it's perfectly clear and it looks great! I think Drupal is a lot easier to develop for than Mambo, but out-of-the-box Mambo looks a lot better.
Excellent work der!
I Agree
I too see this as the down side to Mambo's admin UI.
Mambo administration module *not* user friendly
I don't understand this idea that throwing in a bunch of pretty pictures makes things more user friendly.
In the Windows control panel, the icon view doesn't make things "simpler", it just make it *harder* to find what you're looking for because it's more difficult to parse little images than ordered text. And even with the text under the images, the images are distracting.
Apart from that the whole Mambo administration module is such a mess of contradicting ideas, completely devoid of any logic (and of course undocumented), the code itself is absolutely messy and unhelpful. I can't even begin to list the interface abominations of that festering mess that is Mambo. It may be that the new version will correct this, although since it's just a fork and not a complete rewrite it seems unlikely.
Mambo just looks user friendly. Click a couple times and it will show itself as the horror that it truly is. OTOH the current Drupal admin is plain and clear. It doesn't need gimmicks. Improvements are always welcome, but usability should stay the main goal, not cuteness or "flashyness" (not sure that's even a word but you probably know what I mean).
Pretty != Usability
Although these screenshots are really visually "appealling" and I like what I see I also want to make a note:
* Usability is, IMHO, a measure of how easily a new user can start using the application in an effective manner. It doesn't equal to a visually nice or pretty presentation.
* For a Content Management System (not so much for a Framework, I understand that), one of the major impacts in usability is how easy a new user (content editor/author) can start creating new nodes, publishing them and editing existing node.
One of the things I like, in terms of usability, in WordPress is how big is the Content Editor area. The interface doesn't "clog" the page and allows me to see a big portion of the raw content. Drupal misses that, IMHO, because the Content Editor area shares space with alot of "gadgets" (which I understand to be necessary, since there are many types of nodes).
Another thing I like in WordPress, which is completely subjective, when compared with NucleusCMS or Drupal is that it requires so few clicks to get around the administration interface. That makes me effective very quickly, and with a not so steep curve as Drupal.
As such, this big rant (I apologize for that) is to ask if you can provide a screenshot of the Content Editing page.
Very well done, in any case, since it cleans up the Admin Interface very well.
Thanks.
thanks for the feedback
Thanks for the feedback. I've been using this interface for about a week now and I find it quite easy to get to any of the admin functions through the graphical control panel but it does come at a price as it takes up a lot of screen real estate. I may try smaller icons and moving them to a top icon bar on the front page (or just removing them and using the horizontal menu bar). I may also try adding multiple tabbed sections to the front page as well.
As for the content editing area keep in mind that in my case I'm using the sections.module to separate the admin pages from the normal site (it does this by URL) The URL for editing most content would probably fall into the non-admin section of the site so it would be viewed in the normal (non-admin) template. I suppose this could be changed but you would have to find some way to distinguish when you wanted to show the admin vs the normal view.
Good enough already, aim for more feedback instead.
Hi, der,
If I were you, I wouldn't make any icon or tabbed changes as you write. For what I've seen in the screenshots, and after grasping your visual concept a bit better I now see that the Admin Interface is just to replace the Navigation->Admin section (correct me if I'm wrong). As it is, it seems very very very (can't stress this enough) wel done. Let it out into the community, for more feedback, and see where the interface evolves to.
I didn't quite follow your reasoning about section, admin-section, editing-section and normal-view. But that's because I don't know much about section.module. Does normal-view represent both the visitor-view and the editor-view on the site?
Regards.
feedback still welcome
Feedback on my original screenshots is still welcome.
You’re correct in that it’s a replacement for the Navigation->Admin section (or more precisely a “home page” for site admins). The sections module allows you to define which “paths” you want to show in which theme. So I can setup a path that says just ‘admin*’ and point it to my admin theme. For content editing, a path like ‘node/6/edit’ will only show with one theme, regardless of what permissions the user has. It might be a useful (and easy) change to make to the sections module to include some kind of user permissions in it’s filter. Again, the concept is to consolidate all admin functions in one place, under one theme and focus on making it more useable.
Suggestions
I use the control panel without the other modifications, and i like it. However, i did some changes.
First thing, i changed the css to just have div.control-panel-item {} instead of .control-panel-item and .control-panel-item div{}. You should not let objects float without giving them a fixed with, so i did that (besides doing a text-align: center and a small padding).
Second, you should use different Icon-Sets for different Icon-Sizes. It just doesnt look good to let the browser scale down the icons.
There are better looking Icon themes than the one included. For example there is the very popular Nuvola Icon Theme:
http://www.icon-king.com/goodies.php
Example Screenshot:
http://www.kde-look.org/content/pre1/5358-1.png
Or Crystal Clear:
http://www.everaldo.com/crystal.html
thanks!
Thanks for the feedback. patches welcome for the CSS changes :-) as I'm not a CSS guru.
I agee about the icons sizes. As for which icon set to include I need to make sure the are GPL before I put them in the module package. Do you know if the one's you suggested are? The other thing is that the icon styles is kind of a personal preference thing. No matter which one's I include people are going to want something different. But I could ship with multple choices (providing they are GPL of course) Care to share yours :)?
Crystal Clear and Nuvola are
Crystal Clear and Nuvola are both under the Lesser GPL, its no problem shipping them. I didnt complete mine yet, but its based on Crystal Clear.
http://scroogie.de/files/controlpanel.jpg
Im looking forward to do a Nuvola Theme when i have some spare time.
Ive seen and reactivated the input box for the image folder you apparently commented out. It works, but it would be better to have the module scan a themes folder for subdirectories and let the user choose which one to use.
LGPL vs GPL ?
My understanding is that I can only inlcude GPL content on drupal.org. I'm not completely certain about LGPL but from reading the forums it seems that the concensus is strickly GPL only.
As for where to look for the icons, this is now changed in CVS. Themes can now override icon images, just create a 'controlpanel' directory in your theme folder and place your new icons in this directory.
LGPL is the LESSER GPL,
LGPL is the LESSER GPL, meaning its still compatible to GPL but lesser restrictive. You may even use LGPL content in commercial products. The compatability of LGPL to GPL means that you can use this icons.
Maybe Critter read our
Maybe Critter read our thread, because he published a Crystal Clear set of Control Panel icons yesterday evening. You can get it here: http://drupal.org/node/34121
Your right!
You correct, you can use LGPL icons with the Control Panel. I just can't upload and distribute LGPL icons via drupal.org module respository. I can link to other sites that host them, but I can't put them in drupal's repository as everything in the repository MUST be GPLed.
I dont get the Point. I dont
I dont get the Point. I dont want to offend you, but I think you dont know the LGPL.
From Section 3:
3. You may opt to apply the terms of the ordinary GNU General Public License instead of this License to a given copy of the Library. To do this, you must alter all the notices that refer to this License, so that they refer to the ordinary GNU General Public License, version 2, instead of to this License. (If a newer version than version 2 of the ordinary GNU General Public License has appeared, then you can specify that version instead if you wish.) Do not make any other change in these notices.
Once this change is made in a given copy, it is irreversible for that copy, so the ordinary GNU General Public License applies to all subsequent copies and derivative works made from that copy.
This option is useful when you wish to copy part of the code of the Library into a program that is not a library.
So you can just put in the Icons and state that this copy is GPL'd. THATS the point, LGPL is fully compatible to the GPL.
I get your point
So including the GPL notice makes them GPL?
Exactly
Yes.
Regarding the notice: I dont know how the shipping of the GPL is handled in Drupal contributions, but in fact each derivative work of GPL products has to ship with the license notice that it is GPL. Nevertheless the most modules dont have such notices. I think a small GPL teaser in the readme.txt would suffice.
The packaging script
The packaging script automatically puts the license text into each tarball.
-sp
---------
Test site, always start with a test site.
Drupal Best Practices Guide -|- Black Mountain
-Steven Peck
---------
Test site, always start with a test site.
Drupal Best Practices Guide