unraveled

July 2006 Archive

Correction: I’m moving to Zurich

Yes, I know I said I was moving to Munich but things change quickly these days. As it turns out, I’ll be moving to Zurich for about nine months before I make the move to Munich. My company is sending me there to work on an intranet redesign project for UBS, the Swiss bank. It’s actually a good compromise for now because it’s an English-speaking project in a German-speaking city, so it gives me plenty of opportunities to get my German up to scratch.

If you want to follow along with me on my adventures in Switzerland, I’m sure I’ll be posting more on Vox, which is quickly becoming my home for more personal writing.

The Style Template schema

When you need to create detailed specifications for how a site should be constructed, you need a fairly detailed template schema. When this is the case, I use something I call the Style Template schema. It is made of three elements: templates, style templates and modules. Here’s how I define each of those elements:

A template:

A module (for example, a table showing teams and their scores):

A style template (for example, a content table style template):

So why do I use style templates? A single template can contain different combinations of modules but the different treatment of those modules is not always inherent in the template. Many would just create a new template for this purpose but I find it quite useful to know how templates relate to each other and style templates make this somewhat easier by forming a template hierarchy.

Most high-level templates (homepage, first level templates) don’t have style templates, so practically speaking, style templates can be put to the side on these occasions. Where style templates really come into play are on content pages, the pages that have to fit content of every shape and size. Consider the following two examples for a practical explanation.

Example #1. Landing page is a template. Sign up form and table are modules. The landing page template shows how typical landing pages are laid out. The landing page table style template shows how tables are presented on landing pages. Similarly, the landing page signup form style template shows how signup forms are presented on landing pages.

Example #2. Content page is a template. A-Z navigation is a module. The content page template shows how typical plain content pages are laid out. The content page glossary style template shows how the A-Z navigation is presented on glossary pages. The content page address style template shows how the A-Z navigation is presented on address pages.

As a further example, here’s a short template specification that includes four templates (T), three style templates (ST) and three modules (form, table and large image).

T1 Homepage
T2 Level one
T3 Level two
T4 Content
ST4.1 Content form style
ST4.2 Content table style
ST4.3 Content large image style

I’d love to hear your thoughts and feedback on this schema or how you work with templates and modules in your everyday IA work.

Designing Interfaces: the UI Designer’s Dictionary

I haven’t bought any interaction design books for a long time, but I recently purchased Jenifer Tidwell’s Designing Interfaces for some UI-intensive freelance work that I’ve been doing.

The book begins with an overview of user behavior as it relates to user interfaces and the rest of the book is divided by chapters which explore the different elements of the interface. My favorite is Chapter 7, “Getting Input From Users: Forms and Controls,” a much needed discussion of form design, which works equally well for software or the web.

Along with the older but classic Designing Visual Interfaces, this should be a required text for any UI designer.

Joshua Kaufman is on Vox

Thanks to the Vox Team, I finally received an invite for the Vox Preview. I’ve only played around a bit, but it seems like a blast (in that 80s kind of way). I hope to start posting soon. In the meantime, add me to your neighborhood to stay in touch.

Life Calling

Life is very busy these days and forces me to put the site on hold for several weeks while I take care of my family and figure out what’s happening with my work (more on that when I know more).

The Design Inside Yahoo! Series will resume, I just can’t say when. Apologies for the false start. Otherwise, don’t expect any activity here beyond the occasional note (not subscribed to unraveled notes?).

Until next time: take care, do good work and stay in touch.

Design Inside Yahoo!: Tom Chi

Yahoo! recently redesigned its MyWeb bookmarking service with a new look and several new features, making it easier and more powerful to use.

This is the first interview of Design Inside Yahoo! To start the series, I interviewed Tom Chi, Product Lead for Yahoo!’s MyWeb.

Joshua Kaufman: Yahoo! is all about the social web these days. How does Yahoo! MyWeb fit into this strategy?

Tom Chi: The social web is a critical piece of Yahoo’s strategy going forward. Sites like Flickr, [Yahoo!] Answers, del.icio.us, and MyWeb all have an important role to play, and there are definitely plans to make full use of them. The most significant shift over the first generation of “social network” sites (Friendster, Orkut, etc) is that these sites have a confluence of community and content where each is bettered by the presence of the other. In the case of MyWeb, the content is bookmarks, tags, and annotations, supported by and shared via a robust relationship platform. Along with Delicious it makes up the social bookmarking arm of Yahoo’s social strategy. As for how Delicious and MyWeb will play in the long term, I’m not going to go into great detail, but suffice it to say that Joshua, Stephen and I sit right next to each other, and are mapping out a pretty sweet plan.

JK: The new design of MyWeb is certainly brighter than the previous one. What were the key drivers behind the design?

TC: We had a lot of orange paint left over from a previous project… More seriously we realized that we were sitting on a ton of amazing content. For example I just did a search in MyWeb for “knitting” and found 3700+ links (“gardening” brings up 6500+). That’s not too shabby for a community that has been labeled as being ubergeek and dismissed as only caring about CSS or the latest Python framework. Given this, improving discovery and browsing of great content was the key driver for the new design. To that end, we simplified the navigation into 3 tabs, and provided a more intimate and dynamic interplay between tags and pages. We highlighted the human aspects, displaying avatars on mouseover on any username, and worked to make the tag browsing interaction lighter and more natural. Lastly, we took some steps to promote people, tags, and pages as primary system objects and Me/Contacts/World as primary scopes. I won’t bore you with the full information architecture discussion (although maybe this audience would enjoy it), but the net effect of the work is that the design feels more human scale, but lets you easily reach much more good data.

JK: “Interesting Today” is a new feature of MyWeb. How does MyWeb determine “Interestingness”?

TC: It’s a proprietary algorithm that is keyed off of both popularity and different time dynamics. It was pretty fun to develop and tune because it’s a dance between human interest and algorithmic “understanding” as it shifts hour to hour and day to day.

JK: One of the early challenges for Yahoo! was getting people to understand what MyWeb is and how it works. Are you overcoming this, and what are you doing to make MyWeb more accessible to your mainstream audience?

TC: I’m not allowed to reveal internal product stats, but I can say that after the redesign traffic has gone up quite dramatically. The problem before was the barrier to entry for new users was incredibly high. With the new design, we’ve created the possibility of a compelling logged out experience which helps to sell the value of the system before you take the steps to sign up and become a contributor. Specifically, interesting today highlights the cool content of the moment, and search gets you speedy access to all public bookmarks. Lastly tag pages (e.g. astronomy), allow users to see ongoing saves in any topic they’d like to follow. This is what we’ve been able to do so far, but it’s just the start. In the next few months we’re taking this to the next level in a variety of ways.

JK: What’s next for MyWeb?

TC: 3 words: Iced out rims. Er… I mean, I can’t exactly disclose that, but it’s sweet.

Tom Chi is Product Lead of Yahoo!’s MyWeb.

Check back next Monday for the next interview in the Design Inside Yahoo! series.

← June 2006 | Archives | August 2006 →