Home › Web Development › Drupal Tutorials › 10 Minutes to a Better Drupal User Interface

10 Minutes to a Better Drupal User Interface

Wed, 2006-03-22 19:26 — Nick Lewis

I'm not a betting man. However, I'd bet you 25 cents that your users will have a much easier time learning how to use Drupal with the interface I've designed below:

 

WHY? 

This interface is superior to the drupal defaults for a couple key reasons:

1. We can assume that if someone is using your website, they are already familiar, and comfortable with this type of navigation. Nearly every desktop program, from Firefox, to MS Word, to Photoshop, to Explorer, to the Macintosh Finder use this UI pattern. Always seek to design interfaces which your users will already be familiar with.

2. Typically, this UI pattern is used when a program has a large number of options that are overwhelming to view all at once. However, reducing the number of options would likely get in the way of the power users, so the options need to be out of the way, but quickly accessable. Sounds like a problem drupal's menus have, doesn't? Duh.

3. When folks are first learning drupal, they can easily become frustrated with the multiple clicks it takes them to get to say -- referrer logs. This solution ensures that they are always one click away from where they need to be. Small point, but freaking priceless when it comes to the user's experience, imho.  

How can I make one of these thingys too? 

Good question, hypothetical reader. Let me show you:

Step One: First, we need to define a new region for your menus in your theme's template.php file. Don't be afraid, this is easier than your brain wants to think. If you don't have a template.php file in your theme's directory. simply create a file called "template.php". Paste this stub in your template.php file. Notice the part where you've defined a new region called "top_menu".

<?phpfunction telecommunity_regions() {  return array(       'top_menu' => t('top menu'),       'left' => t('left sidebar'),       'right' => t('right sidebar'),       'content' => t('content'),       'header' => t('header'),       'footer' => t('footer')  );}?>

STEP TWO: Now, at the top of your page.tpl.php file, paste this stub, so that the menu knows where to display itself.

<?php if ($top_menu) { ?><div id="top_menu"><?php print $top_menu ; ?><br class="clear" /></div><?php } ?>

STEP THREE: Paste this CSS into your theme's style.css file.

#top_menu ul li {padding:0;margin:0;background-position:left;position:relative;}#top_menu ul li a {padding:0 1em 0 1.5em;}#top_menu {background-color:#eeeeee;}#top_menu li a {border-bottom:0.25em solid #cccccc;}#top_menu li a.active {background-color:#F5F5F5;border-bottom:0.25em solid #459cce;}#top_menu li li a {border-bottom-style:none;}

STEP 4: Download, install, and enable Jake Gordon's excellent nice menus module.

Go to admin/blocks and place nice_menu 1 into the new "top menu" region as though you were placing it in a different sidebar. Save your changes, and then configure your menus to your hearts intent.

Comments

Wed, 2007-11-14 17:14 — run (not verified)

Very good! I was searching

Very good!
I was searching about this...

my site

Sun, 2007-07-29 07:50 — linnovate (not verified)

Simplemenu

Just stating the obvious to does who know...
But it can be helpful to stumbling newbies.
The simplemenu module was probably born and inspired by this post (or not)
It lends the same functionality by simply installing and enabling the module. here it is...
http://drupal.org/project/simplemenu
With all due respet to how my "clients" precieve the site -I love this approach for myself because I don't need to refresh each sub-category (like admin -> build) etc...
Administration and development are way faster this way.
Lior

Tue, 2007-05-22 08:52 — a passing drifter (not verified)

works with 5.x?

Hello Nick,

It would be really helpful if you can let us know if this works for 5.X or if there is a way around. I saw this question in comments too but unanswered. I will be obliged if you can provide help on this.

thanks.

Mon, 2007-04-23 07:09 — loo_nix (not verified)

Does this work with 5.x ?

Hi Nick, very cool step-by-step instructions. Could you tell me if thees will work for 5.X Drupal as well ? It looks like the only downloads
I see for nice menus are for 4.x.
Thanks.

Wed, 2007-03-28 02:07 — a passing drifter (not verified)

Hi,I'm a newer,i try to

Hi,I'm a newer,i try to modify the UI according to your steps above,but i get belows.i use drupal 5.0. could you help me?

warning: Cannot modify header information - headers already sent by (output started at /usr/local/apache2/htdocs/drupal/themes/fancy/template.php:14) in /usr/local/apache2/htdocs/drupal/includes/session.inc on line 100.
warning: session_regenerate_id() [function.session-regenerate-id]: Cannot regenerate session id - headers already sent in /usr/local/apache2/htdocs/drupal/includes/session.inc on line 103.
warning: Cannot modify header information - headers already sent by (output started at /usr/local/apache2/htdocs/drupal/themes/fancy/template.php:14) in /usr/local/apache2/htdocs/drupal/includes/common.inc on line 311.

Wed, 2007-03-07 03:47 — sun@drupal.org (not verified)

Drupal Administration Menu

Hi Nick!

I just found your tutorial and I'm glad to see a similar approach here. Drupal Administration Menu does exactly what you are proposing here but without any additional customization.

I'd recommend to update this tutorial page with a note to this module, but that's certainly up to you.

Keep up the good work!

regards,
sun

Thu, 2006-11-23 15:13 — Kc (not verified)

Nicemenus rock!!

Its DHTML, SEO friendly and make's it even posible to style every single menu item differently, like having an explaining icon. This is not only a good module for making an admin menu, it's a good solution for corporate website's too!

Keep up Nick, where behind you....

webapplicaties, webbased toepassingen

Mon, 2006-11-20 02:30 — openmind (not verified)

Thank you Nick, This is a

Thank you Nick,

This is a seriously awesome way for clients and developers to admin thier sites.

Keep up the good work,

Regards,

openmind :)

Sat, 2006-10-28 21:21 — jakeg (not verified)

Glad you like my module :)

Thanks for bigging up my nice-menus module Nick.

I'm always looking for help getting rid of some of the niggling bugs the module has if anyone can lend a hand. Stuff like z-index issues and select menus coming out on top of nice menus in silly IE.

Wed, 2006-10-18 01:32 — Gerry Mascarenhas (not verified)

Top Menu under Header

Hi Nick,

Thanks for these excellent instructions. I hv just implemented it on my localhost.

I am using the Newsportal theme and nice_menu sits on top of the header. Is there any way to display it below the header like http://rosskendall.com/, what do I have to change.

Another issue; while nice_menu sits on top of the header, there is a gap between the top level and the drop down, this results in the drop down disappearing before I can point to the drop down...is this a nice_menu issue or top_menu issue?

Sun, 2006-08-06 17:22 — a passing drifter (not verified)

Arrows getting into menu name

I followed your great instructions and together with the taxonomy_menu module, this is awesome. Just one thing, in order to get the arrow not to overlap with the name, you need to change line # 191 from padding-right: 15px; to padding-left: 15px;
Wed, 2006-07-19 13:04 — a passing drifter (not verified)

why Drupal does not bulit in your solution

I wonder why your solutuion above - which is far more sensible - not built in to the CORE of Drupal and what is the reason for not doing so
Wed, 2006-07-19 17:13 — Nick Lewis

“its not as simple as

"its not as simple as that", as they say...
Tue, 2006-06-13 07:07 — Daniel (not verified)

great tutorial, but I have a question

i was trying to use nice menus on the side and did not like it, but when I saw your tutorial I thought I would give it a try. And it works great. Is there a way to not have the block theme call the top menu? or not have the title show (ie. Navigation or user id)? thank you.
Tue, 2006-06-13 16:27 — Nick Lewis

Well, yes, you could avoid

Well, yes, you could avoid having the $top_menu region all together by merely skipping that step. Not sure how good it will look. And nice menu's (I think) by default makes the block title disappear. If it idoesn't, simply find the DIV id of the menu, and write a css rule: #block-block-example-id h2 {display:none;}
Tue, 2006-06-13 17:03 — Daniel (not verified)

Thank you, Thank you

I was using the push button theme and the person that made it changed the block title to h3 so the display: none; was not working. I made the change to the block.tpl.php and now works perfect. Thank you!
Thu, 2006-06-08 16:27 — a passing drifter (not verified)

No 'top menu' region available in blocks admin page

Is this a drupal 4.7 thing? I've got drupal 4.6.6 I don't see a 'top menu' region in my blocks config page. Que paso?
Thu, 2006-05-11 15:54 — LN (not verified)

doesn't drop down

I can get the menu to appear horizontally. But, it doesn't drop down. I would like to be able to hover over the menu title and have the drop down appear. What am I doing wrong?
Mon, 2006-05-22 18:43 — Aaron Winborn (not verified)

drop down nice menus

Just go to the block configuration for the menu (perhaps /admin/block/configure/nice_menus/1), and select the appropriate list style from 'Menu Style'. In this case, drop down vertical, you would select 'down' (instead of the default 'right').
Thu, 2006-03-30 09:55 — bejam

Nice Menus and Curved Slate

Hey Nick,

I am currently playing with your most pretty and highly functionable curved-slate theme (engine). I also quite like nice menus and have been using them for a while. one thing I notice though is that nice menus and curved slate don't play very well together. Whether the menu is in the header, left, or right bars... it is positioned slightly incorrectly. As you move the mouse over an item it jumps back into the right alignment. Is this a beta2 feature... in which case any chance of us getting our dirty little paws on your latest version!??

Thu, 2006-03-23 09:57 — romany

not bad, not bad at all

Nick,

I must confess that I never liked dropdown menus, but this sure makes it a lot faster to to administer my site. I can hear some of my clients saying "wow, this is so much easier!"

Now, all I need is to adjust my attitude towards dropdown menus.

Cheers,

Roman

Wed, 2006-03-22 20:50 — merlinofchaos (not verified)

Windowing menu-style navigation.

Personally, I have always hated that type of navigation. It's true, I understand it and live with it in Windows, but on a web page it is extremely non-optimal for me.

For one, it only works well when the menus are extremely well organized.

For two, one of the reasons it actually works in Windows is that menus are, by and large, organized exactly the same way. This helps a great deal because memory works very well.

For three, these kinds of menus only exist when you hover the mouse. When moving your mouse from menu to menu, you have to stay within the bounds. This is a known issue with the Windows menus to begin with, and often very annoying.

Website navigation, however, is going to be all over the board in terms of how navigation is laid out. Memory from one system to another will not play a part.

I highly doubt that this kind of menu structure would make Drupal 'easier to learn'. It can, if you're very good, add an interesting way to organize, but by and large across the web it is a tool that is abused and poorly implemented.

You can get very similar effects from the collapsible DHTML menus I wrote about on my blog, which are, IMO, superior. The menu items won't disappear when you click open a section, which will actually reduce the number of clicks you need to get to repeated items, since once opened a menu will stay open until closed again. Open-and-put-away is much nicer than open-while-hovering.

Thu, 2006-03-23 07:32 — Harry Slaughter (not verified)

Nevermind the Naysayers

Elaborate menus are probably a very poor choice of navigation for simple websites. A series of dropdown menus and sub-menus is almost certainly going to intimidate and confuse the average websurfer. I hate it when I go to a website for the first time and have to click around for five minutes just to get my bearings.

But we're not talking about a web *site* so much as a web *application*. Drupal's admin interface is not meant to deliver web pages per se. It's meant to facilitate installation and configuration of Drupal. And in that sense, it has a lot in common with a typical desktop application and should take advantage of the lessons learned in client side app development.

Drupal Admins are going to be using the admin interface on a regular basis, so "memory" defitely plays a part here. Admins are performing tasks which can be intuitively grouped together in menus.

Almost every other CMS I've looked at employs this same design in its admin/configuration interface. It's not "all over the place" in this context, it's fairly consistent.

The current Drupal admin interface is functional, but, personally, I find it a bit clumsy. I still get lost between content filters, create content, content types, and input formats, all of which could be nicely organized in a single dropdown in an admin context.

For Drupal to succeed, we don't need to necessarily please websurfers (though we definitely want to). We need to please the folks that are choosing a platform for their website. These are the people that are going to be propogating Drupal. These are folks that may have experience with "nicer" interfaces like Mambo and will never learn the benefits of Drupal because of that first impression with the admin interface.

Wed, 2006-03-22 21:52 — Nick Lewis

well, it's easier than what we got....

I'll check out that technique you outlined. This isn't a perfect solution but its a while lot better than:

"click administer"

[wait for page load]

"click settings"

[wait for page load]

"click content types"

[wait for page load] etc..As is, drupal's menus are badly organized... and that kind of just seems to be a fact of life for the moment. I'm working on a module to build an alternative, user-centric menu structure.

Mon, 2006-07-31 15:38 — a passing drifter (not verified)

Or, change your menu to have

Or, change your menu to have "administer" and "settings" (and whatever else you need a lot) to be always expanded.
Fri, 2006-03-24 06:00 — xian (not verified)

a user-centered ui for drupal is my holy grail

oh, man, i can't wait to see what you've got up your sleeve, nick! drupal still has an admin interface only an alphageek could love.

Thu, 2006-03-23 14:24 — erik

Interesting idea, I find

Interesting idea, I find websites that replicate desktop GUI's a little jarring. Eight years ago they were cool, but there weren't as many expectations about navigation back then. When I go to a site that does this I feel like there's a desktop inside my desktop... Sort of like taking a screenshot and opening it full size.

 

Still, any technique is good if it's well implemented. 

Wed, 2006-03-22 20:16 — Nick Lewis

Doh! I forgot to mention,

Doh! I forgot to mention, the first php snippet for your template.php files needs to be named after your theme. Thus, if you are using box_grey, it would read function box_grey_regions, instead of function telecommunity_regions
Fri, 2006-03-24 11:56 — a passing drifter (not verified)

even Windows goes to the

even Windows goes to the sidebar Navigation with two levels... imo the future of navigation for Applications lies in a similar concept that we see now in outlook... on the far left there are the general areas and then on the second left there are the specific Elements... and on the right we see the content area.

If you go to typo3 they already are using this and it is extremely userfriendly. I find the Backend from drupal way outaged anyway... and you are absolutely right that in the next releases they have to come with some more usability in the system... because the system itself is great!

Mon, 2006-03-27 13:25 — a passing drifter (not verified)

pulldowns

I like this method you are explaining, but I tried using your curvedslate theme with this and it does not work.

I am putting the nice menu in the page.tpl.php under the primary links, but when I mouseover a menuitem, the popup is displayed UNDER the content, and not on top of it.

Am I doing anything wrong here?

Thanks
jacauc

Mon, 2006-03-27 21:40 — Nick Lewis

Do a search for "z-index" in

Do a search for "z-index" in the stylesheets and make sure that all z-indexes are less than 9. I went a little nutty and set some of them at 21, 25, and 1 million. [evil laugh]