Designing for Developers

Designing for Developers Micah Laaker | Big Omaha 2009.05.08

• Director of User Experience, Yahoo! Open Strategy (Y!OS) • Work for 3rd-party Developers and Publishers • APIs, Web Services, Applications, and RSS • Hometown: Omaha COMMENTS: I’m Micah Laaker, Director of User Experience for Yahoo!’s Open Strategy, which basically means I lead a team of tremendously talented designers and prototypers on our eorts to support 3rd-party developers and publishers (a.k.a. people like you, who create interesting and innovative Web-connected products). Yahoo! oers over 40 services and APIs to the world, ranging from Data (think: content) to Services (think: Mail and Search). Last, but maybe most important of all, I’m from Omaha. You can ask anyone I work with back in the Bay Area; they hear it over and over again: I’m proud to be from Omaha, and love the creative spark here that kick-started what I’ve done to date.

Why is Yahoo! passionate about 3rd-party Developers? COMMENTS: Before I go into why *I* get excited about designing for developers, I’ll give a little backstory on why *Yahoo!* cares about providing services to 3rd-party developers. This isn’t a comprehensive list, mind you, but just some of the many reasons we’re operating in this space.

Total time spent online Marketshare COMMENTS: This circle is the sum of all usage of the Internet. Pretty impressive, eh?

Total time spent online Total time spent at Yahoo! 10% Marketshare COMMENTS: Of that usage, more than 10% of that time is spent on Yahoo.com pages and applications.

Total time spent online Total time spent at Yahoo! 10%+ Marketshare COMMENTS: Yahoo! wants to grow that share even larger. By powering 3rd-party applications, Yahoo!’s footprint for Internet users grows larger (which, in turn, provides those users a consistent account/password, identity, contacts list, etc.).

Afﬁliation Photo courtesy: http://bit.ly/R42Ux COMMENTS: Afiliation with reputable products with a high-quality user experience beneﬁts the Yahoo! brand. As others use our products and show their association with Yahoo!, the goodwill from those products carry on to Yahoo!. By having our content and services placed inline other products, we have the ability to onboard users to the Yahoo! network while still providing great value to the 3rd-party products.

Training Photo courtesy: http://www.ﬂickr.com/photos/djfoobarmatt/494611528/ COMMENTS: Yahoo!’s open technologies provide a foundation of technical knowledge that translates into some of the knowledge needed to be a Yahoo! employee. By working on our APIs, libraries, etc., 3rd-party developers become trained on the technology they’d need should they ever apply to work at Yahoo!.

Data In Photo courtesy: http://www.ﬂickr.com/photos/angelsgate/478909139/ COMMENTS: Yahoo! is, among other things, a content company. We provide content from all over the Web to our users for a myriad of subject matters. By providing hooks for developers to pump their content into our system, we can expose their content to more than 1/2 billion people (which helps us, too, by ensuring quality, relevant content).

Recognize the Web Photo courtesy: http://www.ﬂickr.com/photos/kaytethinks/475674995/ COMMENTS: By working with some Yahoo! APIs (like BOSS and SearchMonkey), 3rd-party developers provide meaningful semantic metadata about their content. This helps Yahoo! Search better understand content around the Web, which then means Yahoo! can provide even more relevant search results for even more detailed queries.

COMMENTS: Yahoo! and Micah are two dierent entities, though. While I love working at Yahoo!, my motivation for designing for developers is a bit dierent from the company stance.

Why ? COMMENTS: So, why am *I* passionate about designing for developers?

I am a nerd. COMMENTS: It’s simple: I am a nerd. (Anyone here in Omaha that grew up with me can attest to that fact.)

or, I am my own customer. (Whichever sounds more professional.) COMMENTS: But, maybe a bit more professionally: I am my own customer. Meaning: I like to use code (by me or by others) to accomplish my ideas.

1981 Photo courtesy: http://catobrothers.wordpress.com/2008/10/22/il-commodore-vic-20/ COMMENTS: It all started back in 1981 for me. My dad bought us a VIC-20 to become comfortable using computers. I’d spend days, nights, and weekends plugging in code from magazines to try out my hand at making games. Err, actually, my *dad* spent days, nights, and weekends plugging in the code. *I* usually came in at the end, played the game twice, and then wanted to try a dierent game.

Photo courtesy: http://www.old-computers.com/MUSEUM/photos/Apple_MacSE_System_s2.jpg COMMENTS: But then came along the Apple II series. Soon, I was beginning to play with a mouse, and using the machine as a drawing/painting canvas.

COMMENTS: Come 4th grade, though, I switched back to “traditional media,” meaning that I began drawing almost exclusively on paper. Here, for example, (and this just illustrates one man’s battle with OCD) are a sample of some of all the characters from the Hobbit that I drew. And when I say “all the characters,” I not only mean the characters, but also their weapons, and their clothes, and their animals, and their buildings, etc. I drew *everything* in the Hobbit.

Photos courtesy: http://en.wikipedia.org/wiki/Apple_II_series http://en.wikipedia.org/wiki/HyperCard http://en.wikipedia.org/wiki/MacPaint COMMENTS: Somewhere around high school (that’s Omaha North High, for anyone curious), I began using the Mac. This gave me access to much more serious drawing tools than those available on the Apple II. But, more importantly, it gave me access to something I’d never played with before: HyperCard, and the idea of telling stories/making experiences in a non-linear fashion.

What now? COMMENTS: All that’s well and good, but what motivates me now?

Laaker.com COMMENTS: The answer is simple: my ego. I like to produce content about myself, and that’s usually manifested in my own website: Laaker.com. (I hope you’re all checking this out the rest of today.) I began publishing my own site in 1996 as a means of sharing my portfolio. However, on the advice of a friend, I began adding personal “press releases” about mundane details of my life, which then eventually morphed into a blog. And, with these 3 phases of the site’s existence, I’ve had to learn how to code to make these ideas real.

COMMENTS: To be fair, everything I do isn’t all about me... some of it’s about things I’m interested in as well. I’ve had the good fortune of working on really cool projects for a number of big clients. I was able to work on games for the Disney Channel and a cell tower console for Sprint PCS while in Kansas City. In New York, I worked on Zagat’s online restaurant guide, Battlebot’s ﬁrst SVG (Scalable Vector Graphics) site for Adobe Systems, a hip-hop music video for MF Doom, and even a Flash-based world for my childhood hero Stan Lee’s foray into the interactive space. I followed these up with a technical how-to manual for SVG, a short ﬁlm for the ACLU on the future of privacy and personal information, and then worked at Island Def Jam Music Group’s in-house agency as the creative director for their artist and label websites.

Island Def Jam COMMENTS: While working at Def Jam, we produced and maintained more than 100 sites for the label and artists. Each of these sites had two things in common.

Sites/products need data and services. COMMENTS: They all needed both data (content) and services (functionality).

Data Services • Photos • Commerce • Music • Ads • Video • Search • Metadata • Registration • Community COMMENTS: Nearly every site we created need a mix of components from these two types.

2 lessons 1. Services are expensive to build and maintain. 2. Itʼs hard to change your usersʼ existing patterns and behaviors. COMMENTS: So it was here at Def Jam that I came to two realizations: 1. It’s very expensive to build (and continue supporting) services, like a message board, when your focus is on building data, content and sites. As soon as you’ve built a service, you’ll need to keep it competitive with others who do *nothing but* build their services as standalone products; and 2. Your users will continue using existing products they already use to support tasks you wish they’d do on your site. For instance, users will upload photos of themselves at a concert or with an artist on Flickr or Photobucket more often than they will at your site. It’s where all their friends are, and they’ve already invested time/energy in learning those interfaces.

Map COMMENTS: With this in mind, and one-too-many arguments with Kanye West over how we should handle his website’s design, I decided to move to California to work with Yahoo!. I wanted to try my hand at shaping products where users were already invested.

Media RSS into My Yahoo! COMMENTS: It started simply enough. I began working on My Yahoo! soon after they launched support for RSS feeds. I knew nothing of RSS before coming to Yahoo!, but fell in love with the idea of bulleted text links aggregated on a single start page. Unfortunately, not all content is accurately represented with bulleted text links, so I worked to create more visual representations of (and the associated controls for) multimedia content packaged in RSS feeds (such as photos, MP3s and video).

Podcasts Ratings Badge COMMENTS: This got even more interesting when I worked with the team behind Yahoo!’s ﬁrst podcast search product. They were aggregating user reviews and ratings for all the podcasts available. Podcast publishers were excited about getting so many ratings for their eorts, but wanted a means of showing the up-to-date tally on their sites (where their podcasts were hosted). As such, I designed a series of “badges” that allowed these ratings to be taken o of Yahoo! and placed on the publisher’s site... as well as the means for users to rate the podcast there.

MyBlogLog Community Widgets COMMENTS: From there, I moved to work with the MyBlogLog team on getting their “Recent Readers” widget’s account system migrated to Yahoo!’s account system (greatly increasing the number of users with accounts from hundreds of thousands to hundreds of millions).

Pipes COMMENTS: And here’s where it gets even nerdier. Yahoo! released a powerful developer product dubbed Pipes which lets anyone take content from around the web (from RSS feeds and web pages themself), apply some transformations (like subtracting certain items or reordering them), and re-publish the resulting content. And while this is very cool, there were a ﬁnite number of folks who knew how to take this new content and place it around the Web... So, we created a means of getting any “pipe” out to just about any web page or blog via “badges,” with a system that let users pick a map, photo slideshow, or text link display. Here, you can see a map visualization of all webpages that pop up with my name in it; all easy to embed in my own product by copying and pasting some quick code snippets. (And, yes, by the way, that’s me with Gary Coleman playing Time Crisis back in New York... but that’s another story for another time.)

Application Platform COMMENTS: From Pipes, I began working on one of Yahoo!’s recent eorts. Our Application Platform allows anyone to take content and experiences from their product and launch them into a Yahoo! canvas. Think of our “Apps” as your site inside of Yahoo!... i.e. meeting your users where they already are. Users can add any apps they wish to places like My Yahoo!, where millions of users start (and end) each day. Here, for example, you can see one of Watercooler’s (a great company down the road from us in Mountain View) TV-themed Apps for Arrested Development both on its own full canvas page and as a widget on My Yahoo!.

Application Platform (example) COMMENTS: Just as an example of how powerful this platform is for getting your content in front of Yahoo! users, this is an App I created with some others in our group in about 10 hours for our recent Hack Day (an event we throw quarterly to quickly try out ideas by building working prototypes within 24 hours). It takes what Apps my friends have installed, subtracts the Apps I’ve installed, and gives me back a recommendation for which Apps I should consider installing (as my friends are already active therein). 10 hours. That’s it... and most of that time was just spent on the CSS and layout. Instantly deployed and available to any Yahoo! user for installation.

Yahoo! Query Language (YQL) COMMENTS: Powering that Application I just showed you is one of our most recent and most powerful tools: Yahoo! Query Language. Using the SQL language’s vocabulary, any developer can request data from not only Yahoo!, but anywhere on the Web (via Open Tables), ﬁlter and reshape the results, and even have Javascript transform the results. You can see here, for instance, how a developer was able to create an RSS feed for Yahoo! Finance news items regarding the YHOO stock symbol... a feed for which Yahoo! provides no such feed. But, by using YQL, you can programmatically extract and enhance content from the Web using a single language, rather than learning methods for each API. Think of YQL as Esperanto for APIs, or as an homage to my Hobbit-themed illustrations, “one language to rule them all (without all the evil corruption, craziness, and side eects).”

Updates eventstream COMMENTS: Lastly, our group was able to create a solution that lets others use Yahoo! as a broadcast vehicle for their o-Yahoo! eorts. Here, you can see JS-Kit’s (who makes cool blog widgets) Comments widget which lets me “log in” as my Yahoo! identity, and then (and this is cool) have my comments shared with my friends on Yahoo!. This means all my comments from around the Web can be shared with those I want on Yahoo! (should I so desire). Thus, as a user, the Internet truly starts becoming a connected Web. And, as a developer, JS-Kit is able to focus on feature development and service dierentiation, rather than trying to convince every possible commenter to create yet-another-account.

So, what did all of that get me? COMMENTS: But wait... I said this was all about me and how my work helps Laaker.com.

What • YUI • Flickr Photos • Pipes • MyBlogLog • Updates • Buzz promotion COMMENTS: So, true to my word, here’s but a small sample of what I get for my own development eorts from our eorts.

What • YUI • Flickr Photos • Pipes • MyBlogLog • Updates • Buzz promotion COMMENTS: I get YUI (Yahoo! User Interface library), which lets me put aside CSS display wonkiness across dierent browsers. I now need to spend very little time debugging why something looks weird in a version of IE on a PC I don’t have, and instead I can focus on getting the nuances of the design right (which is something I actually care about).

What • YUI • Flickr Photos • Pipes • MyBlogLog • Updates • Buzz promotion COMMENTS: I also get photos of the things I want to share with others on my site. They’re not stored on my site, of course; rather, they’re hosted and served o of Flickr, where I stand a greater chance of others encountering my images than just via my site alone.

What • YUI • Flickr Photos • Pipes • MyBlogLog • Updates • Buzz promotion COMMENTS: Pipes powers several modules across my site, such as this one which takes what movies I’ve rented from Netﬂix, searches for the title in Amazon, grabs the Amazon link, inserts my Amazon Afiliate ID, and spits out the same list of movies but now with links that I’ll earn a commission from should someone (read: you) go click on them and buy something.

What • YUI • Flickr Photos • Pipes • MyBlogLog • Updates • Buzz promotion COMMENTS: Remember the MyBlogLog widget I showed earlier? Same thing here. I can show readers of my site who else has been visiting. My site becomes more social for others, and I get great real-time, snapshot analytics for my site.

What • YUI • Flickr Photos • Pipes • MyBlogLog • Updates • Buzz promotion COMMENTS: Every time I post a press release or blog post, Yahoo! Updates (our activity stream) is updated, which means that millions of users in Yahoo! Mail and Messenger can see a link to my story, which can drive them right back to Laaker.com.

What • YUI • Flickr Photos • Pipes • MyBlogLog • Updates • Buzz promotion COMMENTS: Lastly, I can get Digg-like functionality on my posts via Yahoo! Buzz. Readers can submit my stories into Yahoo! Buzz, which in turn has editors review the most interesting content being submitted to determine what goes on the Yahoo.com front page. (You can see where this is going: I want you to help me realize my dream of having one of my press releases linked on Yahoo.com today.)

Yahoo! offers ≥ 40 services today. COMMENTS: So that’s what *I* get out of working on developer-facing products, and you, of course, are welcome to leverage the same things. (They’re free to use.) But, can also get more than 40 dierent APIs, web services, RSS feeds, and tools. We even created this great subway map visualization of the oering to illustrate the dierent types of products and what problems they solve. (You can pick up a real version of this at our booth, as well as some great stickers and how-to 1-sheets.)

Actions • Leverage YUI developer.yahoo.com/yui • Integrate BOSS developer.yahoo.com/boss • Build an App developer.yahoo.com/yap • Use YQL developer.yahoo.com/yql • Publish to Yahoo! Updates developer.yahoo.com/updates COMMENTS: To try out the dierent products I just shared, be sure to go to developer.yahoo.com. Speciﬁcally, be sure to try each of these (YUI, BOSS, YAP, YQL, and Updates) to use our latest and greatest products. By doing so, you’ll save yourself the need to learn (the hard way) the same lessons I learned before (about recreating services and reaching users where they’re already at). Instead, *you* can dive into building cool, innovative products that solve problems you want to tackle.

In Conclusion • Learn more about the Yahoo! Open Strategy: developer.yahoo.com/yos/ • Contact: Micah Laaker laaker.com/micah micah@laaker.com

http://developer.yahoo.net	62
http://backyard.yahoo.com	58
http://developer.yahoo.com	7
http://www.linkedin.com	5
http://backyard.corp.yahoo.com	4
http://onwebdev.blogspot.com	4
http://www.hanrss.com	1
http://www.lmodules.com	1
http://www.slideshare.net	1

Designing for Developers

by Micah Laaker

Accessibility

Categories

Upload Details

Usage Rights

9 Embeds 143

Statistics

Designing for Developers Presentation Transcript