Make drupal interface more usable

Hi, I'm adding the following thoughts of mine regarding UX (by request from morhpir from the chat we had on freenode)

Quotes of what i said on #drupal-support

[15:27] but i think the create content beanching needs to go
[15:27] *branching
[15:27] basically the menu a user sees should not have a create menu option
[15:28] just direct, add page, add blog , etc
[15:28] the create menu folder should only appear to admin roles

link to the theme: http://drupal.org/project/rootcandy

Well the sites I've made with drupal haven't had a chance to have moderators yet. What I meant by:

[15:28] the create menu folder should only appear to admin roles

should be:

[15:28] the create content folder should only appear to promoted roles such as admins, moderator, reviewers, etc.

subscribe

Small changes:

Attachment with the words mock1sjb the, design is based on morphirs drawing
In the attachment with the words mock2sjb is my idea of of a menu system that could be easy to use in Drupal. My knowledge of core is not very good, so I'm not sure if the separate level for breadcrumbs is workable or if a footer that falls below the content and sidebars is workable

For quick viewing (no need for inkscape):
http://www.scribd.com/doc/1037607/wireframe-mock1sjb
http://www.scribd.com/doc/1037608/wireframe-mock2sjb

Edit: http://www.scribd.com/doc/1037648/wireframe-mock2rev2sjb (added space for site logo and a tertiary menu if desired)

K, if its that usable, attached is the inkscape file.

I've changed the filename to ~drupalUI v1.2x2
I added the ~ to have the file float to the top of my documents
The next file could be named v1.2x3 if it were to have minor changes

However I think the changes maybe much more than minor so I could called it 1.21 or 1.3 depending on how much gets added to the design.

P.S I got Umbrello running in Kubuntu as vmware (virtualbox.) I'll check if that supports tabbed pages (excel style)
Have yet to check out Dia and the that other cross platform Wireframer.

P.P.S

I still think the site building menu and site configuration menu, to both have the word 'site' in them gets very confusing for a new user.
Site configuration to me looks like it should be a sub menu folder to modules (with the current module menu items going into a submenu folder called module activation)

What I mean is that there can be a Admin>Site Building>Modules> (and the next option can be)
Module Activation or Module Configuration

If Site Configuration gets folded into Modules as a Module configuration submenu, there would only be 4 icons needed (going with sotak.co.uk s theme)

[Content Management] [Site Building] [User Management] [Reports]

However (this is getting way too big for a P.P.S)

I think there oughto be 5 main admin menu items (with or without icons) for the admin as in

[All] [Content Management] [Site Building] [User Management] [Reports]

Site Building might as well be Site Management with Admin>Site Management>Modules having submenus of module activation and module management. (That makes it a 4 levels of Menus (not easy for all new themes or modules to support) unless site configuration gets called module configuration without moving it around (keeping support for existing themes and modules at the price of having 6 icons (confusing brand new users) instead of just 5)

Here's a draft with icons:
http://www.scribd.com/doc/1040608/drupalUI-v1-3draft

Edit: x2 (rev2) of version 1.3
http://www.scribd.com/doc/1040660/drupalUI-v1-3x2

Edit: Scribd's taking its time to process the files so here's the inkscape for 1.3x2

Hi there, I just wanted to throw this out there. I designed and built a little Drupal Admin theme for Drupal 5.x a couple of months ago and wanted to show it off a bit in hopes of bringing new ideas to the table.

http://nerdliness.com/article/2007/12/02/drupal-admin-theme

I created a project page for it and the theme can now be downloaded from there. It needs a new name too as it goes by: Nerdalistic.

http://drupal.org/project/nerdalistic

It has a similar header to the Root Candy theme which I just found this morning, so we are kind of on the same page here. If you have any ideas on how to improve it or have a need for my help or anything of that nature please reply to this post.

I like what I see so far from these postings. Look forward to seeing what comes from this as well.

Thanks Eternalistic,

I'll install your admin theme on one of my drupal installs (the theme doesn't have an issue queue so congrats on that) and see if I can bring its features into the wireframes.

Edit:
Attached is version 1.31 that can be viewed in inkscape

The icons may not be necessary but for new users, it makes things much easier.
@Eternalistic, your theme makes things easy to see (it made things much easier to create the attached wireframe.) However, I don't think there's any need for the primary links (the links in the blue boxes). The 'view site' link at the top left is enough to navigate to the normal part of the site. I like how clean the highest level of links are.
If the primary links of nerdalistic was replaced with hard coded links such as admin/build, admin/content (to link to content management, site building) and so on, that menu would be much more usable.

@stevejb,

Thanks for giving my theme a test run and for the feedback. I see what you mean by the "View Site" link on the top left being enough for to navigate back to the normal site and adding the "admin/" type links to that navigation. I'll go ahead and update that shortly.

subscribing

Please See post Below

Note that this thread might spawn many possible solutions and different themes. The one I'm designing now will aim to have a header oriented administer menu. I've attached an update of my admin menu wireframe, and I'm pretty sure this is the way I want it. I feel that I've found a proper, clean and easy solution for fast navigation in the admin hierarchy.

The menu is all expanded here. This is only a mockup of where the menu is located. Mind that I also found a place for the admin menu icons. (again, you can download the wireframe and bend it to your will in inkscape)

Do we have a winner? Let's hear your thoughts!

Try populating the menu levels to get a better idea to see if that menu can actually function.

I use Admin>content> for populating my newer wireframes with menu items, because admin>content has got a fair amount of menu items
Admin>Site Configuration has the most items and the theme should be prepared to handle all of them.

I'd prefer if core had variants of the same default theme activated for users and admin
as in DrupalUI could have one variation for users (DrupalUserUI)
and another variation for Admins (DrupalAdminUI) with both sharing the same color swatches.

Regarding core and who choses the themes that get packaged in core:
I am aware that Dries Buytaert has a say what goes into Drupal Core. Who else is involved in the decision for what goes into core, especially regarding the default themes or the changes that may need to be made to core code for more user friendly themes (as morphir stated in the earlier posts?)

Attached is a file with a few small changes.

Edit:
1.4 series: http://www.scribd.com/doc/1083058/DrupalAdminUI-v1-4x1content
1.3 and 1.4 can be turned into individual themes
For 1.4, I've taken a leaf out of Joomla's Admin Home Screen, lots of easy to recognize Icons. The 1.4x1content wireframe should work for site building, site configuration, users and logs. I'm working on a separate wireframe (tabbed pages for wireframes could be more handy now, so they all print into a single pdf) for the 1.4 series to handle the root /admin screen to handle menu choices such as organic groups and panels.
In the 1.4 series I've kept manage users and manage content to be next to each other (easier for moderators) and build site and configure site have been renamed (keeping the verb before the noun makes it easier to read for new users.)
I could call the 1.4 series, more moderator friendly.

From the above post

1.4 series: http://www.scribd.com/doc/1083058/DrupalAdminUI-v1-4x1content
1.3 and 1.4 can be turned into individual themes
For 1.4, I've taken a leaf out of Joomla's Admin Home Screen, lots of easy to recognize Icons. The 1.4x1content wireframe should work for site building, site configuration, users and logs. I'm working on a separate wireframe (tabbed pages for wireframes could be more handy now, so they all print into a single pdf) for the 1.4 series to handle the root /admin screen to handle menu choices such as organic groups and panels.
In the 1.4 series I've kept manage users and manage content to be next to each other (easier for moderators) and build site and configure site have been renamed (keeping the verb before the noun makes it easier to read for new users.)
I could call the 1.4 series, more moderator friendly.

http://www.scribd.com/doc/1083091/DrupalAdminUI-v1-4x1all
http://www.scribd.com/doc/1083092/DrupalAdminUI-v1-4x1allwithhover
http://www.scribd.com/doc/1083058/DrupalAdminUI-v1-4x1content

The root admin screen is now ready for the 1.4 series (http://www.scribd.com/doc/1083091/DrupalAdminUI-v1-4x1all).
1.4x1-all-with-hover (http://www.scribd.com/doc/1083092/DrupalAdminUI-v1-4x1allwithhover) could be possible with JQuery. (I'm a wireframer by profession so my Javascript and PHP skills don't have to be top notch. I'd like some feedback on wether the features of the 1.3 and 1.4 series of wireframes can be made workable and if there are additional features that could be added to them.)

As per whats on http://groups.drupal.org/node/7929

The 1.4 series of wireframes would suit the category of

Site Maintainer (editor, or sub-admin)

* authenticated user with access to manage user permissions and content, including blocks, taxonomy, menus, comments, and nodes.

About fields: http://groups.drupal.org/node/8305#comment-25362

http://www.scribd.com/doc/1141057/Drupal5Nodesx1

Edit: Replaced the previous wireframe (http://www.scribd.com/doc/1132002/drupal5nodes) with the above wireframe with better tab sizes. The screen is for Node Edit with the 'Menu Settings' option selected.
Thre are a maximum of 5 tabs per row.
Horizontal length of tabs are automatically sized according to the number of tabs in a row.
Re-titled the Preview button into 'Preview All' so it could be more easily distinguished from the Preview Changes Button.

Edit: On mouse hover, the tabs could reveal their contents as well

Subscribing.

Node Forms have been improved quite a bit since that last wire frame with horizontal tabs.

Vertical Tabs seem more useful: http://groups.drupal.org/node/8365

Seems workable,
I'll follow it on http://groups.drupal.org/node/6288 , its best to consolidate efforts on Views 2 UI on one thread.

We could continue with the New themes on the same thread we're on right now or start a dedicated one on groups.d.o/usability (it should be ok to start one there since its for a new theme.)

Why not including a nice Dropdown Menu in Admin Theme?
One could just use admin_menu and maybe adjust colors a bit.
Dropdown is by far the fastest way to navigate in Drupal backend.

Drop downs menus doesn't solve the problem of nested menus (third layer of links which I think can and should be avoided)

Before I go any further with an admin theme design/layout, I'm checking out the suggestions on http://www.peterpixel.nl/writings/introduction-to-good-usability/

Page 13-14 in the pdf also warns about the difficulties of Nested Menus.

Well, I'm using admin_menu for quite a while now and I'm very much faster with it. sure - if you got submenus, sometimes you miss. But you save one click - which is quite valuable and as drupal page loads are not that fast - quite a time saver.

I believe Sun is doing a very good job with admin menu, I think and he's quite open to suggestions. If anyone did not try it yet - go ahead, it is a quick install.

Hehe, I read Peter's PDF. Quite a puristic attitude to me, but he is mostly right, I think. Too many people neglect those rules. One thing he neglects, though, is the urge to play within people. I believe a gimmick here and there keeps you at things, even in Usability.

admin_menu is great. I prefer it to simplemenu. Is till use DHTML_menu on some sites. My only gripe about admin_menu is it's too intuitive; http://drupal.org/node/220100

I agree with eigentor and Bevan: this issue should not focus on the administrative menu. http://drupal.org/project/admin_menu already exposes that along with some other useful links and information. Instead, it should rather focus on a usable interface for administering a Drupal site. Eye-candy, and of course, usability tricks. Looking at existing modules like http://drupal.org/project/controlpanel is worth considering, too.

subscribing

subscribing

Hows that theme coming along Morphir?

Does it handle 3 levels of menus right now?

I'm building a hobby site where I have nice menus used to provide drop down menus that connect the first level of menus with the second level of menus.

How would your theme handle integrating the second level of menus with the third level?

Here's a pdf of what I plan to have and I think it could be close to what you have in mind for a 3 level theme:
http://www.scribd.com/doc/2324431/Drupal-Tertiary-Menus?ga_uploads=1

Edit:Its probably best to download the pdf to see the functional specification to the right of both pages:
http://www.scribd.com/word/download/2324431?extension=pdf

Moving issues from User experience project to Drupal core usability component.

Sorry, but this issue tried to change too much at once. In the meantime, we have an entire usability team and many, many usability tasks in issues on d.o. Please participate in those.