New navbar patterns in the Yahoo! library

· Design, Patterns, User Experience, Yahoo!

topnav barOver the past few months I conducted an audit of the patterns in Yahoo!’s internal design pattern library, with an eye toward publishing as many of them as possible in the open library at YDN. Why? Well, for one thing, to get more eyeballs on them, to gather more feedback and keep improving the patterns. Also, since very few patterns in the library contain Yahoo!-specific information, and an alternative process is now in place for vetting requirements specific to the Yahoo! network and brand components, the design pattern collection can now more easily focus on (relatively) universal design principles for web implementations.

I completed the audit before the end of last year and expect to release new patterns in batches over the next few months. Some patterns will be mature and provide a solid foundation for site design. A few will be published as beta patterns which may undergo significant changes in subsequent updates based on feedback received. Regardless of their status, we hope you’ll get involved and review and provide feedback on the patterns provided.

The first batch of patterns to come out from the audit relates to navigation bars. There are three patterns so far in this grouping: Top Navigation, Left Navigation, and Progress Bar. One legitimate question is whether top and left nav bars are still the best or most current way to navigate a site and find content? We still find many examples of them across the web and in use at Yahoo! so for now I’ll say yes, but it’s worth thinking about.

Wherever possible I try to link patterns back to the YUI Library and, where appropriate, to other code and implementation solutions. YUI has great support for navbars and menu examples. Probably the best place to start is the menu widget.

One interesting nomenclature issue we studied was the distinction between a stepwise progress indicator (which is what the pattern is about) and a continuous progress bar (for which there’s a great YUI example). These two things are often referred to with similar names, but perform different functions. Suggestions for more appropriate terminology are welcome.

Please check out these new patterns and let us know what you think!

Reposted from Three new navigation design patterns » Yahoo! User Interface Blog (YUIBlog).

An essential guide to fostering online community

· Applications, Best Practices, Design, Development, Information Architecture, long story short, Patterns, Social Design, User Experience

[Building Social Web Application book cover]Building Social Web Applications
by Gavin Bell
O’Reilly (October, 2009)

Gavin Bell draws on his extensive experience to offer a well structured guide to adding community elements to a website or application. His book will help any professional planning a social strategy, designing a set of social features, determining the types of relationships to foster among users, and even determining how best to manage change in an existing site or online structure.

Bell covers a wide gamut of issues that a site planner will need to consider, from developing the data schema for people, relationships, and objects; to how best to expose APIs to third-party developers; to the process of rolling out a new product or feature. Anyone developing a social website or app should keep this book handy throughout the process.

Bell and I share a publisher and our titles cover some similar issues. When I first picked up Bell’s finished book I gritted my teeth with envy. As I quickly devoured the book, though, I was relieved (or, at least I convinced myself) that our books are complementary and are each useful in their own way.

If you’re looking for one book to guide you through the entire process, from conception to launch and into the life of a social web application, then this is the book for you.

(via Amazon.com: Christian Crumlish “mediajunkie’s review of Building Social Web Applications”.)

Are we doing any good?

· Design, Social Design, User Experience

image of a cathedralOne of my favorite essays published in our book is Matte Scheinker’s, called Are we building a better Internet?.

I asked Matte to write about ethics because it was a burning topic for the book and one that he and I used to kick around a bit as an oft-neglected issue in web design and development.

There are tradeoffs in customer acquisition, in growing a network, in handling privacy concerns and the related disclosures, some of which we are seeing at play right now in the controversial launch of Google Buzz, that we both felt do not always get the attention they deserve.

And yet when I speak about ethical issues and the inevitable conflicts between values and business goals and community interests and individual rights, I find that there is a hunger for seriously considering these topics. We all sense that we are “playing with people’s lives” in this work and that it matters how we do it.

Matte has a great way of easing into the trickiest questions:

Imagine for a moment what today’s design decisions will do to mold the Internet’s future. What if every product decision you made last week became a successful design meme? Would that create an Internet where you’d want your kids to play?

Sometimes we get lucky and it’s not difficult to discern the difference between right and wrong. Don’t sell user data because you’re short on beer money. Don’t keep emailing users after they unsubscribe. Don’t read user emails to find the next great stock pick. These are certainly over-simplified dilemmas, and sadly, most ethical dilemmas aren’t as clear-cut.

… but you’ll want to read the whole thing™.

(Bit by bit we are making sure all the essays are available online, either hosted on their authors’ blogs or personal websites or in some cases included in the project’s wiki, where we’re maintaining a list of essays.)

Putting the social in the mobile

· Design, Mobile, Social Design, User Experience, Yahoo!

calder mobile - satelitesMy continuing series of blog posts linking to essays published in our book, well, continues now with Billie Mandel’s Designing Social Interfaces for Mobile, in which she writes:

Contextually speaking, mobile phones are by definition social networking devices. Breaking out of the classic phone/phone book mental model and transforming that experience to include 21st century-style social networking, though – that’s where the fun challenge is for designers. Asking ourselves some mobile-specific questions can lead us as a community to create some exciting, disruptive social interfaces for mobile.

See also her essential list of do’s and don’ts.

(Bit by bit we are making sure all the essays are available online, either hosted on their authors’ blogs or personal websites or in some cases included in the project’s wiki, where we’re maintaining a list of essays.)

Talking social patterns with thriving UX communities in London and Berlin

· Design, Events, Patterns, Social Design, User Experience, Yahoo!

xian in londonA week or so ago I undertook a whirlwind visit to the UK and the Continent, giving two presentations about design patterns and social design, one in London on Tuesday, and another in Berlin on Thursday, each event sponsored by YDN (and the one in Germany co-sponsored by the local IxDA group).

The London event was in a wonderful gallery/cafe venue called Wallacespace filled with a standing-room only crowd. I was pleased to see a couple of friends from the international UX community there and the audience as a whole was wonderful, attentive, and ready with interesting, challenging questions for me when I was done.

Afterward we ate some snacks and drank some beers courtesy of YDN, before heading over to a nearby pub for more beers and conversation. This was my first time back in London in fourteen years and I was impressed by the vibrancy of the web-design community in what may be the “capital” of the Web in Europe.

The next day I headed to Berlin, where a pal picked me up at the airport and helped me get settled in my hotel in Alexanderplatz. It’s actually been 20 years since I was in Berlin! Back then, the Wall had only recently been dismantled and the east was frozen in a sort of time capsule due to economic stagnation. A lot has happened since Berlin reunited and resumed its role as the capital of Germany and arts mecca of Mitteleuropa. In fact, there was a fashion convention going on during my visit, so the airport and hotel were full of people who made me feel, in comparison, more like a geek than a designer.

East Berlin is now full of trendy gentrified neighborhoods. I had lunch at a burrito place (!) called Dolores that’s decorated with maps of the Mission in San Francisco. Clearly the internet-savvy crowd in Berlin feels a kinship with our own community in the Bay Area.

Berlin is also the home of a thriving local Interaction Design Association (IxDA) group, which helped secure the venue for my talk–(Newthinking Store) and helped promote and publicize my talk. I had a chance to meet some longtime virtual acquaintances from the IxD and IA communities in Berlin, such as Jan Jursa, of IATV and the Berlin IA Cocktail Hour.

The Berlin talk was also full, and again I was blessed with a generous and attentive crowd. More great questions. (We did the whole evening in English. Try as I might to speak slowly, I still probably spoke a bit too fast at times but just about all the German I know is noch ein Bier, bitte so it’s just as well.)

One interesting difference between the two groups is that the folks in Berlin asked me more process questions: How was the social design project organized? How did the wiki figure into the writing of the book? What’s an unbook? and so on. The questions in London tended to be more about the efficacy of design patterns in general and the application of social design patterns.

At both sessions, certain attendees had reached out to me in advance over Twitter and proposed questions that they had a chance to ask at the events. In London and again in Berlin I was asked the perennial question about whether the use of design patterns stifles innovation. My traditional answer, “No. Now shut up and do your wireframes!” got a laugh in both settings as well. (My real answer: “Not if they are applied as guidelines and with sensitivity to context.”)

One other curious difference between the two events was that the audience in London had nearly perfect gender balance, whereas the one in Berlin was, by my estimate, about 90% male. I’d like to learn more about what the differences are between the web design and development communities in the two cities that might account for that variance.

I’d like to thank YDN for sponsoring the trip, and O’Reilly Media for providing logistical support (and some copies of the book to give away as rewards for great questions). Interested folks can see my slides on Slideshare:

Yahoo! Pattern Library & Social Design PatternsView more presentations from Christian Crumlish.

Several attendees in London took great notes of my talk and published them on their blogs or personal websites, including Jeff Van Campen, Suw Charman-Anderson, Michael Mahemoff, and O’Reilly’s Craig Smith.

Image credit: Jeff Van Campen

via First we take London: The Social Pattern Detective in Europe (Yahoo! Developer Network Blog).

Resisting the baroque temptation and design is harder than it looks, at BayCHI in February

· Design, Events, Games, Social Design, User Experience

This coming February 9 is approximately my one-year anniversary as co-chair of BayCHI’s monthly program and so far I’m enjoying the responsibility a great deal, even with the occasional panic that sets in when each new cycle rolls around.

The BayCHI Program for February features Elaine Wherry from Meebo and Jeff Green from EA. Elaine will discuss What Web Application Design Can Learn from the Harpsichord and Jeff will share some painful but revealing experiences crossing over from journalism to game design in Easier Said Than Done: One Critic’s Painful Transition to Interface Design.

As an aficionado of both music and games, I’m really looking forward to the analogies and lessons these two will share. Elaine is one of the founders of Meebo and she and I have had some really interesting conversations about the history and philosophy and pragmatics of digital product design.

Jeff is something of a famous wit, dating from his days writing the back-page humor column for Computer Gaming World (later Games for Windows Magazine), his various podcast escapades, his Greenspeak blog and of course on on the twitters. He has recently transitioned to a new role at EA, as editor-in-chief (and podcaster) for the EA.com website, and he may still be licking his wounds from his “if you’re so smart” encounter with the challenging realities and tradeoffs of interface design on a deadline.

Should be a great evening!