10 Minutes to a Better Drupal User Interface
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".
<?php function 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) { ?>
<?php print $top_menu ; ?>
<?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.