Content Complexity vs Navigational Complexity

The dream job of any designer is one that gives the flexibility to design a product exactly the way the designer wants it. The best-case scenario is where the designer’s vision matches what the users want. Users may not want pretty user interfaces and this is where designers need to learn to tame the designer ego.

Designers, on the whole, deal with a whole lot of constraints other than just ego. Even beautiful products such as the Macbook is constrained by cost and availability of materials.

In MOE, the main constraint to designing great online communication lies in the heart of defining what good communication is. For the most part, users I’ve had the privilege of polling would like information presented clearly and plainly. We have tried our best to do that whenever possible. They want unambiguous instructions to facilitate their decision making process.

From MOE’s point of view, clear communications means a slightly different thing. Information and instructions should address the myriad of possible user scenarios down to the smallest minority cases. A lot of the time, this is the reason behind extremely long and convoluted instructions which end up doing a poor job of communicating to anyone with less patience than Mother Teresa herself.

Our mistake here is in believing that the addressing of all scenarios ought to be contained within the copy. The correct application should be to put the burden of sorting out user scenarios on navigation. So rather than reading 30 paragraphs of instructions trying to find out which paragraphs apply to you, the website ought to allow you to navigate to a webpage containing information pertaining to your specific needs; and on that page instructions should be written in simple, easy-to-understand language.

The balance of navigational and content complexity is something we’ll always have to grapple with.

It takes a village…

“…to raise a child”. The adage is used ever so often here at MOE, but it is something all parents would attest to be true. One of the most comforting things I’ve discovered about parenting is that I’m not in the trenches alone. When I blogged 3 years ago about how hard it was to take care of newborn Anne I received quite a number of emails and comments, telling me of their own experiences with their newborns. The encouragement saw us through those long hard nights.

Here at MOE we would like to provide parents as much support as we can give, and it is becoming evident that one of the things we could do is to help in the building of a parenting community. We started taking small steps with Schoolbag last year.

Schoolbag is primarily a place for parents to find out about what’s going on in schools these days, but we’d like to take it a little further in creating a more vibrant interactive online environment. We’ve asked around a bit and some parents have asked if we could have discussion forums.

Would you use a Schoolbag.sg discussion forum? Is there anything else you might like in terms of online support?

Lessons from Teachersday.sg

There was a little apprehension when we first proposed the concept that all messages to teachers be in exactly six words. Some of us were afraid that the additional obstacle would prevent the younger students from writing in. They were valid concerns.

The concerns proved unfounded. Primary school students made up the majority of posters by far. This is consistent with Teachersday.sg 2006 when we had a free text box for messages. Primary school students are generally more expressive of their gratitude. Sure, many of their 6 word messages weren’t witty or poetic and many contained typographical and spelling errors, but the spirit of celebrating the work of our teachers was there.

Lesson number 1: Don’t underestimate your users.

The teachersday.sg form was created from scratch. We worked with web developer Deepak Jois who cooked it up in Ruby on Rails. After a month online and spam-free, we received our first boatload of nonsense input that contained hyperlinks. The spam bots had arrived. It didn’t affect us as there is a moderation queue all messages go through, but we are now more aware of the reach of spammers.

Over lunch in San Francisco last month, I spoke with Tantek Çelik about how the adoption of microformats made online information more easily harvested by spammers. His argument was that the spam industry already had all the tools to identify online content. I was skeptical at first, but now I’m pretty convinced that the spam industry is extremely savvy and active in seeking out places to insert spam and harvest information.

Lesson number 2: They are out there. We need to be a little more watchful about our online input mechanisms.

It’s been a fruitful project for us. From the feedback we’ve gathered, it’s worked out for students and teachers as well.

Ticks Revisited

In a previous post I covered how we tackled the insertion of ticks (otherwise known as checks). Using conditional comments to feed a character entity to modern browsers while feeding a wingding character to IE6 was workable, but terribly unwieldy.

We forgot one very basic point: The tick is a graphic symbol and not a piece of content in itself.

Most other sites we tried to refer to simply dropped a graphic in the table cell. Using the appropriate alt text, it is somewhat accessible. Adobe has a great implementation which we have decided to emulate.

Inserting “Yes” into the applicable table cells makes it extremely semantic. Throwing in a class “yes” allows us to remove the text and replace it with a graphic via CSS.

<td class="yes">Yes</td>

The CSS:

td.yes {

text-indent:-9999px;

background:url(where/your/graphic/is) no-repeat center;

}

Why 6 Words

When we first started working on Teachersday.sg, we put ourselves on a shoestring budget. We weren’t planning on using any formal form of advertisement. We needed something that was “viral” in nature. Sorta like the cute photos of bunnies everyone forwards around via email. The print ads and radio spots were unplanned, but something we’re grateful to the guys in the other division for.

Somewhere between brainstorming and procrastinating I came across an article by Wired entitled “very short stories. The concept stuck.

I know you’re probably reading this because you’re upset that your note of thanks has been constrained to a mere 6 words. I have no doubt a longer account would have been easier to write, but we didn’t want this year’s Teachers’ Day website to be like the rest of the other years’.

So we’re counting on you to showcase your creativity, ingenuity and wit. You can leave a note that’s as simple as “Thank you for teaching me well”, or really put on your thinking cap to craft a message worthy of Hemingway.

Six words. We issued the challenge.

Meet it. We know you can.

Saying thanks need not be verbose.

Just speak it from your heart.

Inserting tick marks (or checks if you’re American)

The HTML entity for a tick (or check, but we’ll call it a tick since we’re using British English) is &10003; which generates &10003; for those of you using a browser outside of the immensely popular, but oh-so-last-millennium Internet Explorer 6. IE6 renders a placeholder box as it does not recognise the entity.

What it does recognise is that the letter “P” in Wingdings 2, which also gives us a nice tick: P for your IE6 users. Modern browsers like Firefox 3 will probably not render wingdings, even if installed on the computer.

So we have conundrum, and it seems the only way is to produce forked code, using conditional comments.

Doogal Bell has a good blog post on inserting tick marks, but I feel his use of the input field to generate a tick isn’t particularly semantic, so I’m sticking with Wingdings for the IE6 crowd.

So ultimately we have:

<![if !IE]>✓<![endif]>
<!--[if gt IE 6]>✓<![endif]-->
<!--[if lt IE 7]><div style="font:bold 1.2em 'wingdings 2'; text-align: center;">P</div><![endif]-->

If you’re not using an IE browser, feed the proper HTML entity &10003;. If you’re using an IE version greater than IE6, also feed the proper HTML entity. If you’re using an IE version less than 7, feed a div with inline CSS specifying Wingdings 2 as the default font, bold for a little extra weight and aligned centre. Yes I know the inline CSS is as evil as font tags, but if I’m going to be specifying the wingdings font, I may as well format it right.

Note to self: I should apply the same text formatting on the HTML entities, but in the system css files, targeting content inside table cells.

Inserting Paragraph Numbering

One of the idiosyncrasies of the public sector is that paragraphs in documents such as press releases are numbered. Rather than code entire press releases in ordered lists when paragraph tags are a better choice semantically, I opted to use javascript to insert paragraph numbers.

Fellow blogger Divya Manian;
was kind enough to contribute a slice of javascript for this purpose, given that my own javascript skills are non-existent.

// contributed by Divya Manian (http://nimbupani.com/)

function insertParaNumbers () {
var paradiv = document.getElementById('media-body');
var paras = paradiv.getElementsByTagName('p');
j = paras.length;

for(var i = 0; i < j ; i++ )
{
lineno = i+1;
insertvalue = "<span class='lineno'>"+lineno+"</span>";
paras[i].innerHTML = insertvalue+paras[i].innerHTML;
}
}

window.onload = insertParaNumbers

Problem is, paragraphs within #media-body that fall under lists (ordered or unordered) do not need the insertion of paragraph numbers. How would you exclude these paragraphs from the loop?

I tried to use Prototype’s childElements to define paradiv as only children and not grandchildren of #media-body. Didn’t manage to get it to work.

Capitalising the Necessary

It’s probably quite ubiquitous, but quite a number of government webpages use ALL CAPS to denote something important. Like someone’s name, or the title to a press release.

I recently had to recode a list of more than 300 names, which was given to me in capital letters. I could get someone else to retype those names line by line, but I couldn’t even bear the thought of giving this job to a sentient being of any sort.

Never thought I’d be saying this, but thank goodness Microsoft Word does these nitty gritty things like changing the format of all text. So I hit the shortcut key, do some major search and replacing to htmlise the content. Tadah, I have the page.

Rats, didn’t take into account the fact that some of the more illustrious names on the list have acronyms behind them, denoting qualifications or summat. Gotta be careful when using a sledgehammer I guess.

Logo Replacement

There are so many image replacement techniques out there I’ve lost count. Some using negative margins, super-small fonts or display:none, the reports are that some of them aren’t accessible.

But why replace images at all? Isn’t the alt attribute meant to replace images with text, rather than a contortion of CSS techniques?

For the MOE Website we used negative margins to do the image replacement for the MOE crest on the top left. However, under it is a black-and-white version of the crest. This is used in the printer styles, and will also be printed by browsers that aren’t CSS-enabled. The black-and-white crest has alt text to make it accessible should images be turned off.

I’m sure there are many ways to skin this particular cat.

Favicon Creation

Chami.com has a nifty online tool to create favicons, but the background of your favicons will be white. For proper transparent favicons, download the favicon (.ico) photoshop plugin from telegraphics.