Around the block

It’s been a little less than 3 weeks since we launched, and feedback regarding the new site design has slowly died down as people settled in.

We’ve had some very committed web developers out there who gave great pointers on what they liked and what they thought could be improved:

We had a few of their suggestions implemented almost immediately.

  1. Choonkeat’s suggestion to use an icon of a lock, rather than the words (login required) beside intranet links in the dropdown menu under “Teachers”.
  2. Choonkeat’s request for rss/atom (implemented in Media Centre).
  3. Vinay’s suggestion for custom 404 error pages.
  4. Vinay’s suggestion to make the masthead narrower (we made the skip navigation link a little less visually obtrusive)
  5. Vinay’s observation that feedback forms administered via iframe could lose the submit buttons on larger text sizes (we went back and set the height of the iframe in ems so it would scale)

No Javascript, no navigation

The most glaring bug at this point is the sliding navigation we used which doesn’t degrade gracefully when javascript is turned off. If you have any ideas, please do leave a comment. We could definitely use some good ones.

The sliding navigation

The implementation of the navigation has a whole didn’t sit too well with the tech-savvy. Yuhui is absolutely correct when he points to the fact that the links being flushed left after dropdown meant users needed to move their mouse quite a distance. Quite a number of people commented that a fast trigger-happy index finger could drive the script crazy and break the navigation. Sliding down takes time, which sacrifices efficiency for flashiness.

All of these are great comments, and we’re definitely looking into ways we could improve the interactivity. We originally had the menu appear instantaneously when users click on the “Students” or “Teachers” link, and the feedback we had from some users back in beta was that they were disoriented. So we thought a little animation would guide them from pre-click state to post-click state.

Jekyll and Hyde Information Structure

Yuhui and Divya both commented that there was some disconnect in the breadcrumbs and the top navigation. When you clicked on something like “Student Admissions“, the breadcrumb would say “Home > Education System > Student Admissions” when in fact you came from clicking the “Parents” navigation.

When we first constructed the information structure, we created intuitive silos to store information. Silos like “Education System” and “Careers” were set up to store information which existed in any one silo at a time. However we also understood that our users were segregated into a few main roles, which you see on the top navigation. These different roles often need the same information. For example, both Parents and Students were probably interested in “Student Admissions”.

So rather than have crumbtrails denoting the users point of entry, we set the crumbtrails to introduce the formal information structure in a macro to micro sort of filter.


The greatest reward we received from revamping the entire site in-house was the freedom and degree of control we now have over the site. We can now react to feedback given by our users almost instantaneously. The previous iteration of the site was locked down in a gargantuan content-management system in a format readable only by the vendor. This made changes extremely hard to implement and we often had to shrug our shoulders when we couldn’t find workarounds.

So if you have any feedback regarding what could be improved, or even if you’d like to tell us that you really liked what we did, do feel free to drop a comment here.


6 responses to “Around the block

  1. For navigation, a css based drop-down navigation wouldn’t do any bad πŸ™‚

    I do agree that the information architecture of the site looks a little flawed. But i cant comment on it without really studying the content and audience deeply.

    The feedback form has a few bugs,esp when i deliberately submit the form with errors, the resulting form has no submit button, unless you use tab key to navigate.

    One more thing i would like to point out is the color inconsistency, Homepage uses 3 shades of red #9C080D(masthead gradient), #CF0110(logo) #9D080D(footer) when you just need one or two.

    I do appreciate moe listening to our suggestions though πŸ™‚

  2. Hi Vinay, it’s probably emotional more than pragmatic, but dropdowns are so gahmen. I also like the open space that opens up for illustrations, rather than photos. It’s like a cheeky pair of socks under a formal suit.

    The colour inconsistency – the MOE logo is a specific red that’s a little bright for the background bars, but I could merge the top and footer.

  3. Yup, i think i am getting overly critical about the navigation and colors lol ;).

    I love the illustrations πŸ˜€

  4. Hi! I’m the writer of that last post on (and also the same teacher who emailed you about redesigning my school’s site).

    I’m actually struggling with the idea of what to do with non-JavaScript equipped browsers as well, since the navigation I’m designing also requires JS, and pure CSS menus just aren’t an option.

    I’m almost leaning towards not delivering CSS to users who disable JS, but that seems a little overbearing. At least they’ll be able to navigate, though.

    I didn’t particularly comment on the design or anything (having been too bowled over by the fact that anyone even bothered to make a standards-compliant site for the government) but the couple of minor quibbles I do have are with the sliding main menu animations:

    a) I find that the uneven heights that show up when switching between menu items makes the navigation that much more uncertain for the user (well, this user). Kinda goes against the idea that the navigation should be stable and reliable, at least metaphorically. Maybe it’s just me.

    b) The easing seems a bit off, but I can’t describe exactly why. Sorry 😦

    That said, keep up the great work! Will you still need a teacher / web development enthusiast in a year when my posting is due? πŸ™‚

  5. Hi yjsoon!

    Statistically, very few browsers have javascript disabled, but good design spurs us to unravel as many dead ends as possible. The noscript tag might help provide an alternative for some, but in the case of MOE’s site, it’ll be quite a hefty chunk of html, so I’m hoping someone can come up with a better solution.

    The uneven heights in the navigation occur because the number of elements is flexible. We didn’t want to restrict how many links could go there, but I can see how it bugs you. πŸ™‚

    Truth be told, the animation for the sliding navigation was hacked up a few days before launch. I still can’t get scriptaculous to give me a nice slideup and slidedown like the side menus on My scripting is extremely rudimentary to say the least.

    Choonkeat was kind enough to put one together for me by way of jQuery, but I didn’t want the extra overhead of having 2 javascript frameworks.

    We’d be privileged to have you on board, but I can’t predict whether the size of our team (currently stands at 2) will increase.

  6. Pingback: Non-javascript Navigation « Webdev at MOE

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s