15 insightful thoughts

  1. I’m actually working on a similar one, though it isn’t nearly as polished as this example (yet). There is a lot you can do in CSS3 (transitions!) to capture the Metro “experience.”

  2. Its depressing that the teaser site for Hotmail looks better than the actual Hotmail.

    I hope Microsoft move quicker to get Windows Live “Metro fied” ASAP

  3. Bluescreened my machine first time I went to the site (moved mouse over icons left to right, clicked on third icon, BSoD). Unable to reproduce so far after reboot.

  4. Simple. Clean. Concise; is what Metro is truly about and that website gets it.

    The problem is despite Microsoft moving entirely to a Metro style, not ever part of the company understands what that means. Take the Microsoft.com webpage; it is a terrible example of Metro.

    When Metro is done correctly you are given the cleanest and most concise way to portray content. When Metro is done poorly though, you have a mess of mix matched elements that only mimic Metro’s “look”. Using a certain font, flat colors, and circle icons is not Metro. The Microsoft.com site is so mangled and over complicated that it actually makes finding what you’re looking for harder rather than simpler. Instead of giving a clear direction to what you are looking for, it forces you to search and move across the entire page to determine if you can even find whatever you came there for.

    To me it seems like the developer of the Microsoft home page was told to use Metro so they slapped together some boxes and pasted up those arrow icons and patted themselves on the back for meeting the “requirements”. In reality they aren’t using Metro at all. A much better example would be the MSDN site. I don’t know if it’s the same developers who made both sites or not, but with MSDN they are far closer to being Metro then the Microsoft home page is.

    I always cringe when I see these bad examples of Metro, because the ignorant people out there hear “Metro” and think “Oh it’s just a bunch of boxes, how boring.” while never actually seeing it in person. These bad examples just further spread a bad Metro false stereotype, which when you actually see Metro and use it you know how lively and exciting it is, even when it consists of nothing but text. That sounds odd to think that a page of nothing but text could be lively, but use the email app in Windows Phone 7 and you’ll realize how it’s the best email app on any platform.

    Now I understand why people attempting to do Metro can have such horrible results and it comes down to basically not understanding the point of Metro and/or not knowing how to execute it properly. The biggest issue is the “concise” part. “Simple” is a much easier concept to implement, but if you don’t remain “concise” as well then you end up having a very simple object with little or lost meaning. Apple is a notorious example of this. If you wanted to make the simplest keyboard possible, you could easily make it a single button. Obviously you would have succeeded at being simple, something Apple prides itself on, but by being overly simple you have loss all the accuracy by making that single button basically worthless. While a humorous exaggeration, this is the Apple method, and you can see they follow this across all their products and devices. To be simple yet retain the accuracy and meaning of whatever content you have, you have a far harder task then “simply” reducing elements until there is nothing left.

    Whenever I think about this I am reminded of Woodrow Wilson who said, “If I am to speak ten minutes, I need a week for preparation; if fifteen minutes, three days; if half an hour, two days; if an hour, I am ready now.” As you try and be more and more concise it becomes harder and harder to do that accurately. With a UI as you try to simplify yet remain concise the task becomes harder and harder while you attempt to remove unnecessary elements without losing the original meaning of the content at hand. If you use the Apple method you can quickly and easily remove elements but what you are left with has lost content, accuracy, and meaning. On the opposite spectrum you could try to do what the developer of the Microsoft.com did and just throw everything on there, so you don’t lose that content, paint it a Metro color and call it a day, but the mess you’re left with isn’t simple and clean, and while it may be accurate I wouldn’t dare call it concise. In order to strike the correct balance with Metro you have to work far harder to boil down to the true basic elements of your content, so that what you have left has that clear direction to lead the end user. I’d argue that getting Metro correct is harder for the developer to create properly but far more rewarding for its purpose.

    I have to say that Long over many, even at Microsoft, truly understands Metro. You can see it with MetroTwit and even his simple Speedo Plus app on Windows Phone how wonderful Metro is when someone does it right. Especially with MetroTwit, it is such a joy to use (as is Windows Phone 7) that you wish you could use for every UI in your life as it just feels so much better than everything else. That is both incredibly exciting and nerve racking for me, as Microsoft is moving entirely to Metro across all of its products. It’s exciting for obvious reasons, but I am cautioned when I see when parts of Microsoft abuse Metro incorrectly. Windows 8 will be the big decider as it will have the greatest impact on the largest amount of users. From what I see so far I see glimmers of hope that they are doing it right, and I just hope that there are people like Long on those teams who truly understand what they are doing. I don’t know if Long would ever be interested in working for Microsoft, but I think they would have a very vaulable assest if they hired him.

    I hope to see more good things from Microsoft along the lines of Metro and I truly believe that it will change the way that we think of everyday computing.

  5. If only Windows Phone tiles have color gradient. Sometimes it depress me for just looking at the Windows Phone and realized how monochrome it is.

  6. This is far from pure HTML5, JS and CSS. All the animations are JQuery and almost all the visuals, including text and gradients… are .png’s…

    Waiting desperately for IE10…

  7. Another implementation of tile-like elements can be found at http://www.iconexperience.com . They use JQuery to blend from Meto to good old Windows 7 icon style when you move your mouse over one of the tiles. Pure Metro lovers will hate it, but it could be an interesting idea to close the gap between Metro and Aero.

  8. Pingback: Document Moved

Leave a Reply