2009 Mar 03

32×32 is the new 16×16

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.

macos11

Read the rest of this entry »

2009 Feb 10

Burn After Building: The fire of TVCC

  2686786026868270
Before and After from New York Times

Since some blogger generalized and predicted by authority that other bloggers are going to blog about it, I’m going to blog about it, just so you know.

After the fire, everyone forgot how mesmerized yet anxious (or indifferent) they were. And since there was no massive loss or death (1 firefighter dead though), everyone joined in to the great game of denial: blaming and human flaming.

And as usual, the biggest target that won’t even know you are attacking is the easiest to hit. Therefore, everyone starts attacking the titans like bacteria attacking a human being. The titans also learnt to be immune to your voices.

Architects hate themselves, so they pick on the architect of the building. Poor Rem Koolhaas. What has all these to do with the design of the building anyway? The fire sprinkler system was not even on yet.

Chinese also hate themselves, so they pick on their leaders for all kinds of conspiracies, while at the same time the Chinese media hates themselves as well. The more controversial the more outlandish the conspiracy is, the louder and faster it travels. (Update: Though it is indeed some colossal idiots from CCTV itself firing some fireworks. I wonder if the insurance would pay.)

Bloggers hate themselves, too, so they pick on whatever bigger blog there is talking about the news. This is when I read too many comments on blogs.

The Internet hates everybody, as they dream up sad migrant workers got lit up in flames.

This is what happens when something that is jaded by nature to be destroyed. Like a supermodel killed by anorexia, nobody cares about the lady but the sensation around it.

So what the **** can you do with a totally burnt building… but not burnt enough to collapse?

Perhaps the question is too predictable. Nobody bothered to answer. I guess they can replace all those expensive titanium with simple cheap corrugated steel. Nothing is impossible to fix. Fixing the building can just as well be part of the economy stimulus plan.

2009 Feb 10

How to: Get “Recently Added” back in Windows Media Player 12 of Windows 7

Well, this is a little too many simple tutorials here. But I figured this is itching me, so this may be itching you.

  1. Click the arrow next to “Create Playlist” on the toolbar of Windows Media Player.
    WMP12 Step 1 
  2. Select “Create Auto Playlist”.
    WMP12 Step 2
  3. Fill in the details as follows.
    Edit Auto Playlist
  4. Done! You may want to sort the list by “Album” to make things easier to browse.

It’s very simple. Perhaps because how simple it is Microsoft decided to remove this from the standard feature set of WMP12 in W7.

2009 Feb 03

How to: Put Gmail Tasks on your Desktop

GTasks Desktop

Long time coming, Google finally developed a Tasks / To-Do List manager for Web 2.0. And long time coming, Google finally allowed access to Tasks not just through Gmail… but through Android phone browser, iPhone browser, or the iGoogle page.

What about desktop?!

I tried a couple things to make it work. Google has not made a gadget for the desktop, so no go (I don’t want to install yet-another desktop widget engine anyway). Amnesty Generator doesn’t work either, as GTasks required logging in.

Therefore, I used brute force. Follow these steps to put quick access to GTasks from your desktop:

  1. Create an HTML file, “gtasks.html”, and put it somewhere hidden, like C:\Program Files.
  2. Put the following HTML inside the file:

    <html>
    <head>
        <title>Gmail Tasks</title>
    </head>
    <body style="overflow: hidden;">
        <div style="position: absolute; top: -9; left: -4;">
        <script src="http://www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/tasks.xml&amp;up_ShowTips=false&amp;up_CurrentListId=&amp;synd=open&amp;w=280&amp;h=360&amp;title=&amp;lang=en&amp;country=ALL&amp;border=%23ffffff%7C3px%2C1px+solid+%23999999&amp;output=js"></script>
        </div>
    </body>
    </html>

    Basically, it is the iGoogle gadget for embedding to web pages. To change the size of the tasks list, modify the “w=280” and “h=360” values.

  3. Open the file in Google Chrome, and select “Create application shortcut…” from the Page menu.
  4. Resize the window and move it to your desired position. Chrome will remember it.
  5. Viola! Now just drag the shortcut to somewhere handy, like Quick Launch.

The result is pleasing, as Google Chrome loads even faster than other tasks apps like Jott Express. Of course, the same trick will work for other browsers, but Chrome is the fastest. I am happy, and I can finally ditch all other tasks apps now!

2009 Jan 29

Upgrading to WordPress…

I’m in the process of moving from Blogger to WordPress (finally)… The import process of WordPress 2.7 is excellent. It went smoother than butter with its “Magic Button”. The layout is now just some default themes, which I’m going to update soon with something new and awesome. :)

2009 Jan 23

Ladies and gentlemen, we are going back inside our wombs.

medium_3219066013_6a6362dcec_o

Human beings announced today that they are going back into their cocoons. From now on, they will survive forever while neglecting any changes happening in the real world. They can create their own worlds, and fail as many times as they can, as they would learn or unlearn, until the day of heat death of the universe.

Perhaps one day we will come out and all become butterflies. Or perhaps we are just engulfed by our creations.

While I oppose virtual reality as a means to escape, it would be perhaps a good thing to do while humans are put inside their cyrogenic chambers for their genetic therapies. I wondered, “what are those young butterflies dreaming inside their cocoons?” This might be it! So instead of going through birth, growth and teenage, babies will be put inside their VR capsules right away while they can experiment with ‘living’ in the virtual, be transformed into post-human, and be transported to colonize outer galaxies, all at the same time!

Oh, how I love future.

A future tampered by User Experience designs forever.

(Picture from Gizmodo.)

2009 Jan 21

Office 14 and “Scenic”: One Small Change can destroy the Ribbon

Office 12 alpha menuOffice 2007 final menuOffice 14 Alpha menu

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.

Office 14 UI Problem 1

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?

Office 14 UI Problem 2 
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.

Apples and Watermelon Apples and Oranges

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.

Explosive Office 14 Menu
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!

2009 Jan 15

Future Systems’ Jan Kaplicky dead at 71

Selfridge_Exterior2

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.

2008 Sep 12

Environmental Unfriendly Packaging

We are increasingly aware of the environment, but at the same time we are increasingly confused by various packaging! As far as I know, the environmental agencies in Hong Kong or Europe had been watchdogs for packaging techniques, but such critical eye has been missing in the United States. Just look at these products that had been sold millions and millions around the world:

imageimage
iPod nano and iPod touch (left); Windows Vista Ultimate (right)

What is so sexy about unboxing a bunch of disposable packaging?

Microsoft pushed 140 millions boxes of Windows Vista last year, while Apple had sold more than 160 million iPods. Fortunately, OEM releases of Windows are not packaged in boxes at all, while iPods have a friendlier paper package, however, most of their new products aren’t. Just imagine the amount of cases wasted, ala Chris Jordan style.

image 
Chris Jordan – Plastic Bottles, 2007

Steve Jobs and company complied fully with Greenpeace for its manufacture and materials of iPod nano, however, what about the packaging? As my colleague Andy puts it perfectly:

image

And another ultimate question: Plastic bag or paper bag?

2008 Jun 17

256 New Pixels for a GreaseMonkey Logo!

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.

Trillian Monkey

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.

New GreaseMonkey on status bar of Firefox

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.

GreaseMonkey and Friends

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!