I love NYC Subway signage so much I even based part of my architecture thesis project on it. The signage system is not one man’s effort, but a collaboration of designers and workers (and committee members) over time.

I was at the lecture last night, on “Unimark International and the New York Subway System”, which talked about the signage system and how it came along.

Read the rest of this entry »

Today’s blog blitz came as a surprise to me as I have not even completed the Harlequin Project yet, but it’s all over the news already. I do see the appeal of working with dual screens, and the potential UIs that can be productive and futuristic, though I didn’t realize the urge is this great.  As a UX designer, I’m still trying to sort this out.

Microsoft nailed the idea with Courier, and I hope they do come out with something soon, or people like me or other companies will start ‘borrowing’ it for their own.

As a record for myself, here’s a list of blogs that mentioned the project:

• Engadget: Modder creates dual-screen Courier from Dell Mini 9, calls it Harlequin, Joker unavailable for comment – I will definitely look for Joker in my next update. Again, thanks Mr. Tim Robbins for the post!
• Gizmodo: DIY Courier Is Both Sad and Ingenious (10000 views, great! And thanks to commenters defending for Giz’s unnecessary harshness. Also on Reddit.) – Giz, I’m very happy and Ima let you finish, but Engadget is
• Liliputing: DIY Courier tablet consists of Dell Mini 9 + 2 touchscreens
• Thanks to Netbooked for unearthing the news, and Slashgear for spreading it!
• Also on: New Netbook Reviews, Slashgear, GottabeMobile, EEEPC – Blog, Ubergizmo, Mobile Computer Magazine (UK), Netbook Choice, Gadget Venue and Génération Tactile (France).

I had been working hard on the House of Yes Christmas Spectacular for the past few weeks, so I haven’t worked much on the tablet, except I took apart everything even more. It’s time to go back to the lab more!

Thanks a lot again, Internet!

On another note, I just won a Woot! Bag of Crap.

Massimo Vignelli seems to have an unusually high optimism for the Modern age, as he thinks that change is inevitable every 10 years. Nevertheless, this is an interesting analysis showing the progressions or cycles in styles in design (or mostly graphic design). Since Vignelli had already filled in 60’s to 80’s, so let’s fill in 90’s and 2000’s!

Read the rest of this entry »

This concept was done a while ago, but I was too lazy to blog about it. It’s a little too late since voting has already ended… but anyway, since you are reading this page, you wouldn’t mind seeing something new, right?

I had been designing user interfaces for various software for a long time. Most of my work is realized in Trillian Astra, of course. Though I had already reserved all my ideas related to chat and social messaging to Trillian, there are still plenty of stray ideas left on the cutting table. I figured it will be nice to contribute some to the future of the web, like this particular contest from Mozilla Labs Concept Series. The challenge of the Summer contest is to design a replacement for tabs in a web browser.

The concept here I had designed is called “Browspace”. The general idea is to create usable tabs by employing web page rendering technologies we had discovered in developing mobile browsers into the desktop.

Read the rest of this entry »

My current (temporary) table is composed of two sawhorses and an Ikea PRONOMEN countertop, 8 feet long and 3 feet deep.

In response to the question on Unplgged:

Survey: Is Bigger Always Better?

It has to do with how often you want to return things back to their original place.

There is a sweet spot where it is neither too redundant to clean all the time, nor too much a burden to clean a lot of things at once, and that largely depends on your work. A writer who only uses a computer may still need a whole table of reference materials to map the brain, while an apparel designer will need a large table to lay all the fabric as well.

While I’m in a flow, returning tools, books or paper back to their drawers and shelves interrupts the workflow, thus counterproductive.

When I’m done with a project, I’ll return (and sometimes clean) the materials back to their position and state. Everything starts with a clean slate again.

But if I forget to do this step, that is where clutter begins: objects lost their original position and were placed arbitrarily on the desk. The key is to always find where these objects should belong… which unfortunately always ended up in the Miscellaneous box.

I find that there is nothing wrong to be embarrassed about a table with many many open files. It shows that I’m working, and not a neat freak that spends half my work time cleaning. I find people with clean tables all the time are a little OCD!

32×32 is slowly becoming the new 16×16.

16×16 was born

First of all, let’s go down the memory lane.

“Icons” were one of the most important part of GUIs (Graphical User Interface), and surely one that sets it apart from CLI (Command Line Interface). In the very beginning, there was only 32×32. The earliest graphical operating systems, e.g. Mac System 1.0, spotted only 32×32 icons.

Read the rest of this entry »

In chronological order from left to right: Office 12 alpha, Office 2007 (12 final), Office 14 alpha

The story of the Ribbon

It has been a long time since Jensen Harris had first posted his design processes for Office 2007. I enjoyed reading it a lot, as he explained every step in detail, from how the design had evolved to how feedbacks were made into use. He had not updated his blog ever since, and then the next version of Office quietly kicks into development.

One of his major contributions was the “Ribbon”, as a way to consolidate all toolbars and to prevent a degrading experience due to accumulating toolbars and moving buttons around unknowingly. Basically, menus and toolbars are melt into one new paradigm, where buttons are not sized, hidden and positioned the same simply for organization and consistency, but also grouped, sized and visualized by importance and the power of suggestion through visual effects.

The Ribbon has ever since become the talking point of most reviewers and users, and soon Office 2007 becomes the example of how an old software can be revolutionized through UI. It has become so successful that the Windows division decided to bring the Ribbon interface over to its apps, for example, Paint, WordPad and Windows Live Movie Maker. (As a note, the default UI of Trillian Astra is also influenced by the Ribbon, but that’s another blog post.)

Throwing a Fitt!

However, the problem comes when Windows 7 begins adopting the Ribbon. As if Mr. Harris had retired from user interface design, the experience begins to disintegrate through its newer iterations, perhaps through decisions of other designers (who think they know best).

Though the changes are subtle, they are also disturbing and they show the lack of understanding of some very basic concepts:

1. Lack of visual distinctions

Let’s begin with the small visual details. While replacing boxes with separators considerably cleaned the interface up, the original boxes are not that suffocating to justify its removal. Instead, without the boxes, it is much harder to tell what functions belong together.

Top: Clean, distinctive grouping of functions (Office 2007)
Bottom: A clusterfsck of vertical noises (Office 14 Alpha)

Besides, not only the separators cannot do the job of the boxes, they contribute even more visual noises than the boxes. In attempt to make the separations clear, the designers put a darker line for the separators than the boxes. The result is that the lines have gotten so dark it is now fighting with the icons.

2. Where is the title bar again?

 
Top: I’m editing "Document" (WordPad in Windows Vista)
Middle: So I’m editing… uh… "Document" (WordPad in Windows 7)
Bottom: Wait, what am I editing? (Word 2007)

Strangely enough, the title bar in Office 2007 is centered, while the title bar in Windows 7 is aligned left. And Office 14? Centered. The title bar is important because there is no other way a user can tell what document they are editing. When one glances at the usual position, i.e. top left, one will find that the title is not there, but instead, jumping around the center, depending on how many contextual tabs you had opened.

3. Realignment of the Orb

Besides the minute changes above, the biggest offender is that they moved Office menu button. While the Office orb is not the most elegant solution, moving the menu button down with the tabs is worse. The reason?

Yes, Fitts’s Law. Of course.

In the original Office 2007 design, the Office menu occupied the whole top-left corner. Comparing the new design, it had two obvious benefits:

1. The orb is twice bigger. Therefore, when the window is floating, it is twice easier to click. And besides the physical benefit, a bigger button is distinctive. It is like putting a watermelon between apples, versus putting an orange between apples. While you can still point out that there is an orange upon closer look, a watermelon is a lot more obvious.

2. The orb is infinitely bigger when the window is maximized. Though not visually represented, it was coded so that you can simply push the cursor to the top left of the screen to click the button.

The functions included in the menu justified the placement of the orb. It was a very good design for it reduced a previously menu-ridden Office into just one menu – an impressive feat indeed.

To add salt to injury, its replacement in Office 14 alpha is nowhere as good. Back in the topleft corner is the useless window menu, which consists of ‘move’, ‘minimize’ and other boring functions that are much better performed by the mouse.

And worse, the Office orb is squeezed to look like… a tab. WHY? A menu looks NOTHING like the rest of the tabs in the ribbon. This is very bad design because it breaks user expectations, especially when users are nowhere familiar with the Ribbon yet. While users just learned that "all tabs switched the whole top toolbar away", now they would think that "some tabs switched the whole top toolbar away; but some tabs would blow me away with a full screen menu". That’s BAD.

Above: That explosive Office 14 menu I was talking about. It’s so big the Windows Start Menu looks like a midget.

Nevertheless, they picked the right applications to convert to the Ribbon interface. I can see that the ‘editing’ software, i.e. WordPad, Word, Paint, Movie Maker, etc., will pick up the Ribbon, while the ‘viewing’ software like Photo Gallery or Media Player will be left in the bland icon-less, text-only toolbar-ed interface.

It’s ironic how the Ribbon effectively prevented users from degrading the experience over time, but it cannot prevent other designers or programmers from disintegrating it from its very own self! I guess corporations are amnesiac by their nature. What’s the point of patenting and protecting the design, when they are the first people to wreck it?

Please come back, Mr Jensen Harris!

From Archinect:

Jan Kaplický, leading architect behind Future Systems, has passed away at the age of 71, hours after his wife gave birth to their daughter. [ČeskéNoviny.cz]

This is sad news indeed.

Even though I don’t particularly like their blobby designs, Future Systems had designed and executed some of the most interesting building ‘skins’ and forms of our time. Shown above is the Selfridges Building in Birmingham.

To my ignorance, he is older than I imagined. His work is much more youthful than his age. Though we had entered the age of more environmentally conservative buildings, I hope his work will survive the test of time despite the sea change. And given the current economic climate, we will see less and less radical buildings like these for quite a while.

And the best of luck to his daughter. It’s quite a fairy tale indeed when she grew up to understand her father through his buildings, like Khan’s son… Oh well. Maybe I’m romantizing this too much.

Sorry for the lack of updates last month. I had been sick for a month in May due to some deadly allergies, as well as breathing the construction dust from my new apartment (and as well as various turbulent personal matters). That means I have quite a big list of blogs I have to catch up writing!

For most geeks, today is the Firefox Download Day. However, what’s more exciting to me is the release of GreaseMonkey 0.8 last week. Besides a great slew of fixes and new functions, it also revealed a new logo I updated for the GreaseMonkey dev crew a while ago.

The story began with a emoticon pack I did for Trillian back in 2001. As Trillian became popular, quite a few people had fallen in love with its emoticons, due to its vast selection and simplistic design. The emoticons were later ported to Trillian fan sites in GIF format, and of course, later leaked to the whole Internet (something you can never stop).

Eventually, the main developer of GreaseMonkey Aaron Boodman searched on Google for a monkey image, and some monkey.gif came up. Perhaps the square-eyed Trillian monkey were cute/decent/handsome enough, it begged for adoption and ended up in the early builds of GreaseMonkey.

It went full circle when I downloaded my copy of Firefox 1.5 and a friend pointed out the use of the monkey. I’m rather surprised and pleased that the emoticons had found an unlikely home, as it would be usually kidnapped by some Trillian instant messenger clones! I wrote an email to Aaron, and got a reply a while after.

The new logo is a visual update of the old happy and smug monkey… :] I attempted to keep the essence of the smile and updated it with better drawing techniques. 16×16 is a particularly difficult size, as I cannot include too many visual information – It has to be simple, clean and crisp.

The large version references the Firefox logo and Aaron’s comment on how he thought the original monkey is Donkey Kong. I expanded on these ideas and make a full logo out of it, so it looks like the ones from Firefox or Thunderbird. While Firefox ‘ruled’ the web by encircling the globe, and Thunderbird delivered a email on its beak, GreaseMonkey changed the web by swinging around and greasing up the Internet’s series of tubes (no pun intended!).

So that was the short story. I hope you like it, and like the logo as well! (If you don’t, I’m sure some Stylish scripts can fix it for you… hahaha) Either way, enjoy and go download it now!

New York subway have finally made its step forward to the 1990’s with a new set of trains, and I’m very pleased with them. It features a few good designs that are unique to the New York subway system. Here is my brief photo encounter:

As there are way too many stations in the New York subway, it is impossible to fit the whole subway map on the display. As a result, only stations on a single line are displayed. The use of a completely electronic display allows trains to be coordinated to run on other lines for peak hours. There is also a LCD monitor on the far left to allow display of various subway promotions.

This is a nice flushed detail for accommodating the altering roof heights. The black plexiglass blends in with the LCD display very well. Commuters are amazed by this detail as they ride to the Hipster Capital.

There are external speakers on every train. This is necessary for New York subway because it is almost impossible for MTA to install a speaker system on its 500+ platforms. Putting speakers on the train ensures that stations are announced properly instead of the train operator speaking gibberish.