Archive for the ‘Navigation’ Category

The perfect menu tree

Saturday, May 30th, 2009

I came across a brilliant collapsable menu tree, for the left-hand persistent navigation. It’s called TreeAndMenu and here is a screenshot of what it looks like on another wiki:

treeandmenu

When you click on the ‘+’ next to a folder, it expands to show you the pages included. On WikiStudent, I’m going to have categories as folders, and pages within those categories beneath them.

I’ve installed this extension already, but still need to take care of the styling, and make the items expandable / collapsable. A quick preview of what it looks like at the moment:

treeandmenu2

So, in the above example, “PLS” will have a folder icon, and expanding it will reveal the page “PLS102Y”, which you click on to get to the page. Nice, don’t you think?

Navigation has its limitations

Wednesday, May 27th, 2009

I’m amazed at the number of types of management modules apparently on offer at Unisa. From the search box logs again, students are looking for info on:

financial management
purchasing management
strategic management
operations management
safety management
business management
sports management
human resource management

This makes it very tempting to have a menu item called “Management”, with all the above management courses listed as sub-menus.

But I’m not going to do this because it would overcrowd the site. Navigation items already in place are:

  1. A menu (with course codes)
  2. A tag cloud (with subject names)
  3. A search box
  4. A mini-feed (New!)

So someone doing e.g. Business Management can get to their module page with:

  • 2 clicks via the menu (MNB –> MNB101D)
  • 2 clicks via the tag cloud (Management –> MNB101D)
  • 1 click via the mini feed
  • 0 clicks via the search box, by just typing in MNB101D and hitting Enter!

Hopefully if you’re looking for “Business Management” you’ll either know more or less what the course code is (MNB is good enough) or you’ll understand that it falls under “Management”. I really can’t have every possible search term visible in the navigation items. I hope my architecture makes sense. Will find out next month during the usability testing!

These breadcrumbs are brilliant!!

Saturday, May 16th, 2009

Yesterday I mentioned implementing breadcrumbs on WS, but wasn’t wildly enthusiastic. Now I am! Here are two reasons:

  1. I implemented my breadcrumb extension of choice and it works wonderfully.
  2. I realised that this is not just a ‘nice to have’ optional extra, but a really necessary navigational tool.

Before I elaborate on the above, here’s a pic of what the breadcrumb trail will look like on the page for Commercial Law, CLA201V:

CLA201-V
One thing that had slipped my mind (and it’s what many other website designers easily forget) is that not everybody will arrive on your site through the front door (i.e. the home page). So many of us spend so much time making the home page enticing, meanwhile people googling for e.g. CLA201V will not land on the home page, but on the CLA201V page, so it must be clear when you arrive where you are in the hierarchy of the site. Someone looking at the breadcrumb trail above will (hopefully) think “Oh good, there are more Law pages” and go there too. They will also be able to click on the “Unisa Modules” link, which will display ALL Unisa modules, and ALL categories, nicely sorted in alphabetical order. I think this is brilliant!

It means I have to change stuff around a bit though. I had created a “Unisa Modules” namespace, but after doing this breadcrumb thing I realised that it would be better to create a “Unisa Modules” category. All the other categories previously mentioned (E.g. Law, Accounting…) will be sub-categories of the “Unisa Modules” one. Luckily I hadn’t wasted too much time by re-naming every single module page when I decided to go the namespace route.

Oh, and for anyone who’s interested in the technicalities behind making the above breadcrumb trail, here’s how it’s done:

  1. Navigate to MediaWiki:Breadcrumbs
  2. Insert the following line : * Law @ ”’You are here:”’ [[Main Page]] > [[:Category:Unisa Modules|Unisa Modules]] > [[:Category:Law|Law]] >

This will create breadcrumbs for all law pages. I will need to repeat the above for each of the other 20 or so categories. (But I won’t do it now in case I come up with an even better way of doing breadcrumbs. Not likely though!)

Breadcrumb navigation

Friday, May 15th, 2009

You might not know what website “breadcrumbs” are, but you’ll definitely recognise them. These are the navigation links you sometimes see at the top of Web pages that indicate where you are in the site, and look something like this:

Home > Unisa modules> Information Systems> INF1059

The words normally appear as links, so clicking them takes you higher up the hierarchy.
My user-friendly book says:

Like “You are here” indicators, Breadcrumbs show you where you are. (Sometimes they even include the words “You are here”.) They’re called Breadcrumbs because they’re reminiscent of the trail of crumbs Hansel dropped in the woods so he and Gretel could find their way back home.

My Google-friendly book says:

The breadcrumb trail is of immense value for usability and SEO value, so it is amazing how many sites neglect to use them.

So, I’ve done some research on MediaWiki Breadcrumb extensions, and have found two sorts:

  1. The kind that show you the last few pages you visited, such as the Kimon extension.
  2. The kind that make use of category names to indicate where you are in the hierarchy, such as BreadCrumbs2 (which is the one I’ll probably go for) and CategoryBreadcrumb

The only snag with these Breadcrumb extensions is that they’re all in an ‘experimental’ usage state, which means they’re not guaranteed to be stable and work 100%. I’ll have to try them all out on the weekend and see for myself.

I think this feature will be ‘nice to have’, but I don’t want to waste too much time on it right now because there are going to be so many other effective ways to navigate (the search box, the left-hand menu, the category tag cloud, the ’special pages’ list…)

“There’s no place like home”

Sunday, May 10th, 2009

It’s been a while since I dipped into my brilliant website usability book, Don’t make me think. Here’s a quote from page 66:

One of the most crucial items in the persistent navigation is a button or link that takes me to the site’s Home page.

Having a Home button in sight at all times offers reassurance that no matter how lost I may bet, I can always start over, like pressing a Reset button or using a “Get out of Jail free” card.

There’s an emerging convention that the Site ID doubles as a button that can take you to the site’s Home page. It’s a useful idea that every site should implement, but a surprising number of users still aren’t aware of it.

To summarise what Steve Krug says about navigating home:

All pages of your website should have

  1. A link to the home page, that says something like “Home”.
  2. A clickable logo, that takes you to the home page.

Luckily for me, MediaWiki has this built-in, so I don’t need to go to any extra trouble to achieve this. (On the top left of all pages is a link to the “Main Page”, and the logo in the top left corner also takes you home when clicked).

Out of curiosity, I went to Unisa’s website to see how user-friendly their home page navigation was. Here’s what I found:

On unisa.ac.za, clicking the logo takes you home if you’re on a site other than the home page, but there is no visible “home” link (for people who don’t know that logos should be clickable).

On my.unisa.ac.za, the logo is a static image and clicking it does nothing. There is however a “Welcome” link on the top left of each page to take you home.

So there’s the additional problem of inconsistency between the two sites.

I know how confusing inconsistency can be, and that is one of the reasons why I’m going to be scrapping this blog after WikiStudent goes live. I don’t want anyone to think this is the real site - it is just a blog about the site - but someone who lands here instead of on the wiki might not understand this at a first glance. (Sounds incredible, but believe me!)