I have to present a set of recommendations about the Taiwanese government portal site, and I’ll be using the guiding principle of less is more. When I first looked at the site, I was worried that I had gotten myself in over my head and there was no possible way to fix this thing. Then I remembered, I don’t have to actually fix, I just have to tell other people how to fix it. That still isn’t entirely easy. The site has a lot of problems: it’s way to complex, not very attractive, contains too much text and too many meaningless graphics. To really solve these problems, I have to understand how they specifically apply in this case and, very important, label them so other people can understand clearly how to proceed. If I can turn this spaghetti bowl of bad design into a series of bit-sized problems, we should be able to tackle it.
The first words that appeared in my mind when I saw the site were: out of date. Like, 1998 out of date. Things like color scheme, white space, typeface – all that artsy stuff. The only was to solve this is to redesign the site, but I’ve learned from experience that if the first thing you tell an organization is they need to redesign their site, they won’t listen to anything else you have to say. Never open with a vague solution, most intelligent people will smell a rat. Instead, I set about quantifying the problem.
Understanding the Problem
First, I turned to Webpages as Graphs, which visualizes the HTML elements on a page. From this you can get an idea of the complexity and make up of a page’s code. I then compared it with the USA.gov home page, which is a pretty good government portal that everyone around here looks up to. That’s right, thanks to President Obama’s Open Government Initiative, we Americans can be proud of our e-government. Here are the results (click to enlarge):
Taiwan Portal Visualization
US Portal Visualization
These graphs tell us two things about the Taiwanese site:
1. There are more elements.
2. It is coded with an outdated technique: tables.
To make it a little clearer, each of those dots represents an HTML element, something like <div> or <a>. The color coding tells us what type of element it is, black is the root node <html>, blue are links, violet are images, green are the <div> tags essential to CSS, and red are the dreaded table tags.
At this point, it’s important to remember that the purpose of a portal site is to act as a gateway, a one-stop-shop for citizens to access existing government service and organizations. Very plainly, this means there are going to be a lot of links (blue). This means we have to change how we measure the signal-to-noise ratio. Designers borrowed this concept from engineering sciences (Garr Reynolds expounds on it well at his blog Presentation Zen). In a regular site, links often dilute content, especially lots of menu items. But in a portal site, links are the content. Most government portal’s content, including the US, the UK, and Australia, are almost entirely links.
As for the red nodes, tables went out with the dinosaurs, there just isn’t any reason to use them. Everything we need to know about coding standards can be found over at www.w3.org.
Design and Content Flow
Now we know there are a lot of structural elements which manifest as visual junk dragging down the site. That’s easy enough to fix in a re-do by using contemporary coding techniques and good design. Except the good design part isn’t very easy. Good design is all about visual queues, does the user know where to look, do they feel it’s easy? Since apparently lots of people like the new USA.gov, I used Bubbl.us to create a mind map of the content flow, check it out:
US Portal Content Flow
It didn’t take nearly as long as I thought it would. Purple nodes are links, green are labeled sections, blue are unlabeled grouping of items that are pretty obviously grouped, and red are multimedia/interactive elements. I made those elements red because they usually draw a lot of attention. I actually really admire the flow, even when you map out the elements in a simple fashion, it’s pretty intuitive. That said, it’s a little shallow on content side. It might be better to integrate some of the content instead of linking to separate pages for everything. Take for example the topics section, why not take a play from the Australians or Brits and list a few of the most popular subtopics under each.
I was contemplating starting the content flow mind map for the Taiwanese portal site today, when I was interrupted by a sudden realization. I think I know what inspired their design:
Comparison with Yahoo Taiwan
I comment cause I can. Also cause I wanted to say my favorite past time is playing where’s waldo. . . in the sea of links. . . and javascript.