Fight Bad Web Design

Anyone who’s ever been in the web design industry knows this: there is a war between what clients want, and what users need. If you’ve built a website for someone else, it’s a familiar dilemma: there’s this disconnect between the person footing the bill and the audience they hope to attract or the customers they serve.

There’s a facial expression common to all web designers. Clenched teeth and furrowed brow – the result of intense concentration as we silently hope, wish and pray that the client gets it: that helping their customers in return helps them. Too many hours have been wasted changing colour-schemes because clients liked the cover of a book they were currently reading.

So there it is, the user’s need for efficiency versus the extravagant indulgence of the owner. We often end up with webpages garnished with unnecessary graphics splattered about by committee, navigational devices that are more cute than functional, websites that perpetuate the narrow worldview that everyone has broadband, big screens, perfect vision and hand-eye coordination.

We’ve been trying really, really hard to change that. Really. But truth be told, it’s been 4 years and we’re no closer to helping the Singapore government achieve the epiphany that is needed.

So we’re going to ask you to participate in the irony of ironies – to vote for the MOE website at Singapore Government Web Awards. Yes we know that the voting site is everything we’ve railed against, but it only stresses how immediate and great the need for us to shift the government’s mindset towards good design.

We’re not saying that the MOE website is the best site there is or there ever will be. But when we crafted it we wanted to send a message, primarily to the rest of the government: that good web design stems from a profound sense of empathy for those that use the site, and manifests itself in bold strokes clothed in intricacy – the result of countless hours of poring over tiny details – all culminating towards solving the problem, answering the question and serving the user.

So help us send this message. Vote. Much as we’d like to send you directly to the MOE voting page, we can’t, because of bad web design.

It really needs to stop here.

Learning Points from Teachersday.sg 2009

Thought I had better write this down or I’ll never get to it. I leave for the States in a few hours.

The use of existing online services was the marked difference in our online efforts for Teachers’ Day this year, namely using Flickr to create a slideshow of photos or videos submitted by contributors and using Twitter as the means to send dedications to the teachers.

Complexity

The overheads that come with using existing services are substantial – most of our participants would likely have to create a new account and learn how to use the interface. All we actually need, from the user’s perspective, is a means to upload photos, and a means to type in a message. Riding on Flickr and Twitter served some of our needs on the backend: the slideshow would be dynamically generated once we approved the photos and messages would be constrained to a reasonable length (a constrain we wanted) and the creation of the Twitter account would ensure some level of spam control as users would need a valid password to acquire a Twitter account.

The problem of complexity is especially pronounced in our use of Flickr as an image uploading tool. Flickr is an online service with a vast amount of functionality, and we were using its “Send to group” function to enable users to submit photos for the Teachers’ Day website. This function is an advanced feature within Flickr that even longtime users ignore. After approximately a month, we received only a handful of submissions from a grand total of two users.

We were also surprised to learn that users need a minimum of 5 photos in their accounts before their photos could be generated on the slideshow (shown in the group).

Twitter’s beauty is in its simplicity. We were originally concerned that Primary school children, which traditionally sent in the bulk of Teachers’ Day messages, would not be able to navigate it. We had intentionally shifted this year’s focus on a more retrospective note, hoping to see greater participation from adults. We were pleasantly surprised that many Primary School students started sending messages. Rulang Primary, I believe, created a school account @rulang to help their students send messages, bypassing the need to create individual accounts. Mr Kwan Tuck Soon (@mrkwantucksoon), a teacher at Rulang, even created a screencast giving students instructions on how to send messages. I was personally pretty ecstatic to see empowered users.๐Ÿ™‚

Control

One of the first considerations when embarking on using user-generated content is that of editorial moderation. In my experience, this is the aspect least likely to be overlooked by the public sector. It was a calculated move on our part to pull a live Twitter feed off the hashtag #tday09 without any moderation primarily because we felt it would take a considerable amount of malice to slime teachers on Teachers’ Day. To be perfectly honest, there was a healthy amount of fear on my part that the conversation could spiral downwards.

We had planned a few levels of control that we would implement should that happen.

1. The use of filters. We had to invoke the use of language filters to exclude specified words to the live feed. A user had used the #tday09 hashtag with a uncouth colloquialism for “go home”. It wasn’t malicious by any means, just careless.

2. If things really got hairy we would only display favourited tweets. The brilliant suggestion to use favourites as a means of moderation came from @choonkeat who had picked it up at a recent barcamp.

The other factor was that when we used these services, we were subjecting ourselves to their reliability. This became an issue as Twitter showed sporadic quirks, such as us being unable to favourite a tweet, or deletions taking a long time to effect themselves.

Response to Feedback

A lot of the feedback was positive, though there were some reactions to the display of above-mentioned uncouth colloquialism. It was revealing that the initial reaction on the twitterverse was akin to students egging on a fight.๐Ÿ™‚ There was a bit of talk about us clamping down on the user who had posted the tweet. It was revealing because it showed what the public thought of the government: heavy-handed and authoritative. Perhaps so for more sensitive topics, but I’d like to perpetuate this fact:

The government is made up of people serving other people. We are as diverse as the human traffic on Orchard Road.

My first reaction was to remove the offending tweet via filters, but we found that the user had already deleted it after discovering his tweet had appeared on our website. It was still showing due to Twitter’s caching of search results and the lag between deletion and removal of tweets. By this time there were a number of tweets signaling the anticipation of punishment as the user was a student in one of the schools. I hurriedly sent a direct message ensuring that no action would be taken, and that we knew that no malice was intended.

If you were wondering, at that time I added a filter to remove mentions of the person’s twitter nick. It wasn’t to remove all his tweets (besides, the filter doesn’t do that). It was because in my own carelessness in asking him to remove the hashtag, I had mentioned the hashtag, thereby adding my own unintended tweet on the Teachers’ Day homepage. The filter was to remove my own tweet.

The other piece of feedback comes from Daphne who helped us poll teachers’ awareness about the website. She was astounded that none of the teachers she had asked knew about the Teachers’ Day website.

I conceded that publicity could have been better managed, but I do not agree that the entire effort is implementation gone awry. Publicity was two-pronged: 1 for the public so that they’ll send dedications, 2 for teachers so they’ll know if dedications were sent to them. Posters were widely circulated and put up, electronic billboards in Suntec City and Ion Orchard were used. There was a hard deadline for the submission of dedication messages (Teachers’ Day), but teachers could, and still can, search the dedications.

Conclusion

It was a learning experience for us, and we have absolutely no regrets doing it. The cost of setting up the site was extremely minimal – I designed and coded it outside of office hours, no thanks to the office network that crawls like a dialup modem on LSD.

I appreciate all the feedback received, good or bad. On a personal level I don’t deal well with criticism, but I’m learning to roll with the punches and glean what I can, hopefully producing better products the next time round.

Using Social Media Platforms for Teachers’ Day 2009

Many things have changed since our last Teachers’ Day website. Social media has taken off in a big way. If Facebook was the vehicle that brought social media to the mainstream, Twitter is the shiny new Ferrari F70 of the online space.

Celebrities are using it to speak to their fans without the intervention of their agents, sportsmen and sportswomen update followers on their latest training regimen and even U.S. President Barack Obama uses it to garner support and understanding of his policies.

So rather than keep this year’s messages from students past and present to ourselves on the Teachers’ Day website, we wanted to use Twitter as a means to send messages the whole world could read and possibly even participate with us.

Feel free to drop a comment if you think something could be improved – it’s a pretty novel idea for us, so I’m sure we have a lot to learn!

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: