Barcamp Singapore 3

Posted in all posts, events, IA, powerpoint, presentation by coleman yee on February 28, 2009

Despite my heavy schedule these few weeks, I had to attend and speak at Barcamp Singapore 3 because it was held at my previous workplace – the Teaching & Learning Centre at Ngee Ann Polytechnic. My presentation was entitled “How to bluff your way through an interview on Information Architecture”, which was really just to introduce what IA is, why it’s important and what kind of value it adds, and a little on how an information architect goes about doing their work. The slides are on slideshare – make sure that you’re viewing the Notes tab below the slides, otherwise it won’t make much sense. Slideshare: How to bluff your way through an interview on Information Architecture Brian Koh liveblogged my session, and had a very nice comment at the end:

That’s it! From the people next to me. “That’s the most educational talk i’ve heard at Barcamp.” “IA is awesome!”

All I hoped for was for more people to know about IA, because I believe it’s important – I never expected anyone to think that IA is awesome. It was also great that quite a number of people came up to me to thank me after the presentation. These were all really nice. Later on towards the evening, I decided to do another presentation, since there was a free slot. It was an old presentation I used to do on the use of Powerpoint, entitled “The Princess, the Witch, and the Powerpoint“. That one never fails to entertain. Updates: Chin Yong has a great summary of my session. He also mentioned:

The presentation style of Coleman was entertaining and educational. I give him a two thumbs up. And of course, he already given himself 2 thumbs up pointing at himself everytime he mention “Good Information Architect”

The pointing at myself part was just me trying to be funny. At sgentrepreneurs, Ian Timothy had some very generous comments:

This was, perhaps, the most educational session I ever experienced at any of such events. Coleman isn’t just knowledgeable, he is charming and a great presenter with the right amount of humor. If there was a way to attach an affiliate link to the polar bear book and for the audience to purchase the book on the spot, Coleman would have cleared a fair amount of commission that day. Yes, he was that good.

Like I said, he was very generous. Just in case you can’t find the notes on slideshare. The notes start from slide 2.

Make sure you view the notes!

Make sure you view the notes!

Just starting my IA presentation – my first slide (photo by sgentrepreneurs):

IA presentation

Me showing a content inventory during the IA presentation (photo by Claudia Lim):

During my IA presentation - showing a content inventory

IA presentation

My audience at my IA presentation (photo by Lagoona Loire):

The people at my IA presentation

 IA presentation audience

Tagged with:

Web Ribbon

Posted in all posts, IA, internet, usability, UX, web by coleman yee on April 12, 2008

In my last post, I talked about the Ribbon interface in Microsoft Office – a good solution with limited screen estate, without the usability problems of the cascading menu.

Now what if the Ribbon was used on a webpage?

My only encounter with it so far is on Singapore’s Ministry of Education homepage, which was launched only a couple of weeks back.

MOE website

It only occupies a row of space (above) before it slides and expands downwards to reveal more (below).

MOE website expanded

I liked the idea the moment I saw it. As an information architect, I’m always on a lookout for ideas to navigate lots of information, so this was something quite new to me, and most of all, it works. It works so much better than the typical drop-down menu you often see on bad websites.

It’s certainly not perfect – the space could be better utilized, rather than occupying just the left column. But I see that the web Ribbon has a lot more potential to be further explored and exploited, and I expect to see more websites using the Ribbon interface in the near future.

I asked Lucian, the designer of the site where he got the Ribbon idea from. He told me he just “expanded on the idea” of a normal drop-down menu. He had that idea in 2006, way before he encountered the Ribbon in the Office software.

Whether implemented on a desktop app or on a web page, the Ribbon is definitely a good innovation, a step in the right direction, giving designers and developers an additional tool to improve the user’s experience.


Lucian has started a blog detailing the development of the Ministry of Education website – Webdev at MOE.

The Ribbon interface

Posted in all posts, IA, interaction, usability, UX by coleman yee on April 4, 2008

I’ve been using Microsoft Office 2008 for Mac for a few months and so far I’ve been quite happy with it. (Disclosure: I was given a copy by Microsoft.) One of the major changes in the interface is the introduction of the “Ribbon“. The Ribbon interface is a non-threatening and elegant way of organizing and presenting a lot of functions in a relatively small area.

The Ribbon first appeared in Microsoft Office 2007 (for Windows), but they managed to clutter it. The one in Microsoft Office 2008 for Mac is a lot more friendly.

(Update: Nadyne Mielke has informed me that the “Ribbon” in Office 2008 for Mac is called the “Elements Gallery”. I’ll still call it the “Ribbon” as it’s a lot more vivid.)

Before activation, the Ribbon occupies a thin strip, just enough for the labels (see circled).

Ribbon collapsed

Once an item is selected (see below), the Ribbon expands downwards, resembling the usual tabbed interface.

Ribbon expanded

The key difference from the usual tabbed interface is that the Ribbon can expand and collapse. It’s a small innovation, but it makes a load of difference.

At first glance, the Ribbon looks quite simple. That’s why it’s elegant – it looks simple and it’s simple to use, but there’s actually a lot of functionality there.

1. Labels and instructions

This lets you know what to expect.

The ribbon interface

When the mouse is on an item (circled below), the label text changes accordingly.

Option described

2. Filters to narrow down your search

All items view

The default “All” gives 15 pages of items in the above case. You can always narrow down your search (below).
Filtered items

Unfortunately, when there are too many filters, it overflows into a menu (below). Not so elegant anymore, but not a big problem those overflow items aren’t accessed often.

More filters

3. Additional options

For some items, there is an additional level of options.

Additional options

The Ribbon is deceptively simple. To get to the first item in the above diagram, you need at most 3 clicks: Document Elements > Header > Item 1

This is what we’re looking at in a hierarchical view:

  • Document Elements
    • Cover Pages
    • Table of Contents
    • Header
      • Item 1
      • Item 2
      • Item 3
      • (Next page)
    • Footer
    • Bibliographies
  • Quick Tables
  • Charts
  • SmartArt Graphics
  • WordArt

I mentioned that you need at most 3 clicks to get to Item 1 in the previous image. Well, the good thing about the Ribbon is the next time you need Item 1, 2 or 3, you might need only 2, or even 1 click. Think about it.

Besides reducing the overall number of clicks, the Ribbon interface presents a number of advantages over a drop-down menu interface:

The Ribbon needs less hand-eye coordination. If your mouse strays when using the drop-down menu, you’ll have to start over.

It allows for additional options which comes as a result of the space it occupies when expanded.

The Ribbon allows for bigger icons which comes with more space again.

The Ribbon is more inviting with the bigger icons and more space.

In other words, the Ribbon provides a better user experience for most users.

Microsoft is known for feature-packed (or bloated) software, not user-friendly software. But the Ribbon has shown that they’re still capable of useful innovations every now and then.

For more information, check out Enter the Ribbon by Jenson Harris, explaining some of the thinking behind the Ribbon. Jenson is the Group Program Manager of the Microsoft Office User Experience Team.

(Update: Check out evolution at work by Nadyne Mielke who’s a  user experience researcher in the Macintosh Business Unit – the guys behind Office for Mac.)

Information Architecture, In Short

Posted in all posts, design, IA, UX, web by coleman yee on February 13, 2007

In my new role as a Design Consultant, I’m involved in the design of user experiences (UX) – what a user experiences when they are, say, visiting a website.

When people ask me what I do, one of the things I usually mention is Information Architecture (IA), which is a part of user experience (UX) design.

Blank look. During that brief moment, I can tell that most people are thinking if they should ask me to explain further or not.

Then I’d go ahead with an explanation similar to this:

When you have a large website, it’s common for the information to be badly organized, such that it’s hard to find the information you’re looking for, right?

I’d pause and wait for some glimmer of understanding to appear in their eyes, before continuing:

What the Information Architect does is to use various methods, such as user studies, surveys, et cetera, to find out what is the optimum way to organize the information on the website, so that the website becomes a lot more user-friendly.

That’s when they usually get it.

It’s been a week into this new job, and I’ve been learning a tremendous amount, and there’s still loads to learn.

Things are getting interesting.