Looks Good Works Well

My PayPal Update: PayPal Rocks.

2012-01-28T12:12:00.000-08:00

The last three months have been a blur. The last blog I posted was right before joining PayPal. So I thought it would be good to give an update on my honest impressions about PayPal.

Here are my take-aways.

#1 PayPal is positioned like no other company to change the way people use money.
I am really excited to be part of changing something that is so fundamental to the way the world works. I sensed that PayPal was at an inflection point. And now seeing the products we are working on has convinced me we can do this and we welcome the competition. At Netflix we changed the way people view movies. At PayPal we change the way people use money :-) I am totally stoked about our business future.

#2 The wisdom is in the crowds!
I interviewed over 100 different people in the organization in my first 6-8 weeks. My theory was the "smarts" was already in the organization. My interviews confirmed this. In many ways my job is collecting the intelligence, distilling it, and connecting the right people and information together and ensuring that we remove friction, indecision and instead multiply the ability of our makers to make.

#3. Innovation is blooming all around the organization
I think this surprises colleagues of mine when I tell them that innovation is alive & well at PayPal. At PayPal's quarterly Leader's day they have a great tradition of every new leader (director & above) standing up and telling about where they came from, what's unique about them and what they will be doing. At the November meeting it took us over an hour to get through all the new people. I would estimate that 15-25% of the leaders were new. Either through acquisition or new hire. All this new blood brings in change with it. Couple the sparks from the new blood with the kindling of the wisdom in the crowds (to mix a few metaphors) and you have a roaring fire. I can assure you the PayPal you see on the site today and on merchant sites around the world will not be the same paypal you see in the future.

And the competition from our friends at Google, Square and many others is awesome. Thank God for good competitors. This is energizing and refines a company and makes it lean.

In fact I am in the middle of hiring for my head of UIE Innovation. This is a kick-butt role that partners directly with UED & Product in a lean & mean & collaborative manner to burn through as many ideas as possible and marry technology & innovation.

#4 The Technology Platform is being Re-Invented
Prior technology choices on the front-end have hindered productivity. Using XML/XSLT is a HORRIBLE choice. It is a curse that thankfully is being rooted out. We are migrating all of the products to a simpler architecture that supports true client side development. I am happy to report that my team and the infrastructure team are building strong alliances and we have a shared vision that is about making UI development as nimble as possible. We are building towards a rapid experimentation platform.

#5 My Leadership Team Rocks
Ok, so you might say "well you would say this because some of your leaders will read your blog." Regardless, it is true. I have never been as challenged by my leaders to be bold, make quick decisions, lead, allow no excuses to paralyze us as I have been here at PayPal.

I can't speak for the past at PayPal. And we certainly are not where we need to be yet. But I can assure you that we are unified on empowering an army of change agents. And we have the right vision, the right story that defines where we will be.

We are Hiring
How about it? Want to join me in this grand adventure? I am on the lookout for talented user interface engineers. I need strong developers. Strong computer science skills. JavaScript rock stars. HTML5/CSS3 aficionados. If you have the chops contact me at billwscott over on gmail.

Shared Understanding Resource: Head First HTML5

2011-11-20T15:21:00.001-08:00

I am constantly talking about creating a "shared understanding" between design and engineering. And I love it when I find a book or resource that creates more bridges across these two worlds.

Eric Freeman & Elisabeth Robson have done the community a great favor with the addition of Head First HTML5 Programming. If you are a designer or product manager or backend engineer (though as the latter you will have to get past the less serious tone you may be accustomed to) then this book is for you.

As with all of the books in the Head First series they aren't meant for mid to advanced level developers. Where they shine is as a first introduction to a set of technologies. In this case they do an delightful job of introducing the HTML5 family of technologies.

The first thing to understand is what they mean by "HTML5". They aren't restricting the discussion to just HTML5 markup and the technologies that are strictly part of the current HTML5 spec. Instead they take a looser, more popular perspective on what HTML5 is. I actually like this approach. I like it because it is just too confusing to constantly explain to the public what is in and what is out of the spec at any given time. And I really need an easy way to talk about this collection of technologies. So using the term "HTML5" in this sense becomes more expressive. I don't even mind when CSS3 gets lumped into the bucket. I know call me a heretic.

Ok, back to the review...

The book ends up covering a lot more than I expected: markup (of course), JavaScript, DOM manipulation, geo-location (complete with a google maps/geo-location integration), AJAX, Canvas, Video, web storage and web workers. There is also some discussion of CSS3 and styling and selection.

Overall, I really liked the examples and was pleasantly surprised at how real world they were. Another great touch was the Bullet Points section which summarized each chapter in a single page.

Its really hard to write a book for the complete newbie yet remain technically accurate. The authors have done this and more. Let the shared understanding grow. Highly recommended.

Full Disclosure: I received a free copy for review. However, if I didn't like it I wouldn't have bothered to write anything. The review above would have been the same even if I had bought it.

Excited About My New Role - Sr. Director, Web Development @ PayPal

2011-10-19T21:16:00.000-07:00

Elsewhere I have updated my bio to reflect my new job as head of web development for PayPal (which starts on 10/24). The 'elsewheres' being on my twitter profile, facebook profile, blogger profile, linkedin profile, etc. I also tweeted it and updated my status that I had taken this new role. However, those formats are shorter so I thought I would discuss what I am up to and why I am making this change.

As many of you know, I returned to Netflix after a short stint away and have just wrapped up being back a year. Altogether I spent about 4 years at Netflix and had some wonderful experiences and especially wonderful folks that I got to work with (in particular I am partial to those who worked for me).

The first stint at Netflix was a strategic role in which I had the opportunity to define & build the UI engineering organization there as well as guide the architecture and build the talent. I also helped build out the UX design team and especially worked closely with that team. The second stint had some of the same elements as I focused on the ECommerce side and we built out a UI architecture using Mustache (the java version -- thanks Sam Pullara!). And as a team we rewrote the whole code base back to front, internationalized and localized it in just 7-8 months and launched in 43 more countries. In addition, we were able to simplify the device UI code base to handle multiple devices, resolutions and input handling. Even with those good things it was one of the more exhausting experiences I have had in my career. And once the dust settle I quickly realized the role was becoming way too tactical and too focused on one aspect of a single product.

So I popped my head up and decided I would start looking for an opportunity (thinking I would make the move in 6 months or so). But within just a few days this awesome opportunity at PayPal showed up.

Why PayPal?
PayPal continues to be the world leader in online payment. And with the formation of x.commerce the position of PayPal as the payment provider and more importantly the payment identity for online transactions around the globe, I could see the huge upside to the business. Couple this with what is to come in offline payments (POS, mobile, tablet, etc.) and the huge resources of eBay as the parent company and I was sold on PayPal as the company.

Why this role?
While PayPal has all this goodness, they felt strongly that one thing they needed was a strong Web UI leader who could help define a nimble, open source based UI architecture, who could help bring design & engineering together, who could help simplify the process of getting design to life and who could attract top UI talent to the organization. That is a tall order. But as we talked about this role and my background we felt it was the right match. And just 2 weeks after the initial conversations I accepted the role as Sr. Director of Web Development.

Looking back at my career the most successful & enjoyable times for me have been when I am in the role of influencer or change agent. Back at Sabre I was able to found the common web & desktop UI engineering teams as well as the UX design team and influence many of the core products. At Yahoo! as evangelist I was able to influence dozens of their sites and evangelize great engineering & design internally & externally. And as I mentioned, the same for my time at Netflix. So this seems the most logical next step for me.

I will have a lot to learn as I join PayPal. There are many people there I look forward to learning from. I certainly don't have all the answers, but I do have the confidence that I will be able to join forces with other smart people there and at the right time know what is the next best step to take. It's a little like improv. I can tell you a lot of stuff I might try, but until I get there and get a deeper understanding of the needs & the assets I won't know what will make the most sense to try.

It takes a Team
If you work at PayPal, be sure to reach out to me and let me know who you are. I need others like you in order to make the right impact. Or if you don't work there but would like to join me somehow in this opportunity please reach out also. And while I don't know yet what my open positions will be, don't hesitate to reach out in an exploratory manner.

Contact Me
You can always find me at billwscott on all social networks and on gmail. Look forward to talking with as each of you that reach out to me.

Join Me in Boston for User Interface 16!

2011-10-06T11:22:00.000-07:00

I am excited to be part of UI Engineering's upcoming User Interface 16 Conference in Boston. The full event is November 7-9th and will be held at the beautiful Renaissance Boston Waterfront Hotel.

I will be giving a full day workshop Monday, November 7, on "Designing Rich Interactive Experiences." You can check out & signup for my workshop here.

Additionally on Tuesday, November 8, I will be presenting a talk on "Designing for Mice & Men" which focuses on experiences across mobile, tablet, TV & Web.

There are a host of other great speakers as well: Kevin Hoffman, Luke Wroblewski, Jared Spool, Hagan, Brandon Schauer, Kim Goodwin, Steve Portigal, Stephanie (Sullivan) Rewis and Greg Rewis.

Join us in Boston for an awesome lineup of topics & speakers.

Looking for a User Interface Engineer for our Account UI team

2011-08-22T13:45:00.000-07:00

How about it? Want to work at Netflix? If you have strong user interface engineering skills coupled with solid computer science skills then my latest opening may be just the fit for you.

The ECommerce Team at Netflix is responsible for all member account & profile experiences (including help). It's time to grow the team so I am looking for a talented, passionate engineer who will take on the following responsibilities:

In concert with design and product management, deliver multiple simultaneous experiences in an A/B test environment
Develop the full stack from data marshaling in Java, to JSP, Mustache, HTML5, CSS and JavaScript to create these experiences
Work in close concert with backend web development team, be able to understand the impact on the whole product, and suggest and plan the best solution with backend to UI in mind
Take full ownership of a feature set from first discussion to bringing it live on the site
Turn requirements into simple, elegant, optimal solutions that balance the needs of the health of the technology stack but always guided by our business needs

If you are interested or know someone interested, please email at bscott -- over at netflix dot com.

Full description here (or apply here):

Senior User Interface Engineer - ECommerce

Check out the new Netflix Tech Blog

2010-12-02T09:46:00.000-08:00

Lots of interesting technical stuff happening to get movies to your living room, mobile devices & browser. You can read about the technical side at techblog.netflix.com.

New - Social Systems Engineering Team at Netflix

2010-11-15T09:31:00.000-08:00

Michael Hart is now leading a new Social Systems Engineering Team here at Netflix. He has a couple of immediate openings. Here is a partial from the job description:

Netflix is the leading online movie and TV service, reaching almost 17 million households in the US and Canada and growing over 50% in the last year. Many of the other fastest growing companies today have achieved that growth in part by leveraging Facebook's social graph. As a founding member of the new Social Systems engineering team at Netflix, you'll be challenged with helping us leverage the social graph to propel Netflix's growth even higher.

I am really excited to see what Michael and his team will accomplish with this new dimension of the Netflix experience. Wouldn't it be a blast to be a part of this team? If you are interested apply for the job here.

Back at Netflix and Hiring

2010-11-02T22:57:00.000-07:00

I am back at Netflix!

I am hiring (naturally). I am specifically looking for some talented user interface engineers to join my team. My team builds the experience for acquiring new members. We are at a critical phase as we expand internationally while supporting a wide range of devices. You can check out the job posting here.

I can't think of a better recommendation for Netflix than the fact that I have returned :-D

Why would I return? First a little about why I left.

In my previous position at Netflix the team had gotten large (15+) and was on a growth path to be 25 or 30. I no longer could be involved in the details as my group spanned every part of the Netflix business. It was a fantastic position -- really a dream job. But at the end of the day I needed to be more a part of the solution.

So I left Netflix and became the VP of Engineering & UX at Meebo. Meebo is really a stellar place. But after just a couple of months I realized I had moved in the wrong direction. And it became clear to me that all of the positions opening to me where at a level that mostly dealt with the organizational challenges with some limited high level strategy. So while Meebo was really a great place to work I knew that I had to figure out what level I wanted to work at.

After that I started consulting. During that phase I learned a lot about myself and how I want to spend my time. Consulting was especially rewarding as I had some amazing clients (PayPal, Adobe, Rypple and BagCheck to name a few). I got to do product strategy consulting, UX design (lots of wireframing) and JavaScript development. The most rewarding part was being hands on solving problems. And of course working with Theresa Neil (my co-author) was a blast.

During that time I was presented with a lot of really great opportunities by companies I respect deeply. After I started considering full time employment again I realized that I was happiest at Netflix. And coincidentally I had been giving recommendations to Netflix on people that I could recommend for a new role there. Then it dawned on me, why not offer myself for that role? And that is what I did.

My new role is much more focused than my previous role. I am the Director of ECommerce UI Engineering. Instead of leading all of the user interface engineers at Netflix, I am leading a smaller (but growing team) that is focused on solving specific problems on the marketing/customer acquisition/account side of the house. The cool thing is the solutions our team fields directly impact the growth of Netflix & the dollars that come in the door. Plus I am able to get much more involved in the day to day work of the product.

The bottom line: My recommendation couldn't be stronger for coming to Netflix. I believed in it so much that I decided to return. It's an amazing brand and we are poised for more amazing growth.

So want to join me? Check out the job description. Is that you or anyone you know? If so don't hesitate to apply or ping me at bscott _at_ netflix _dot_ com.

Snap, Annotate & Share Workflow Tools

2010-09-28T13:48:00.000-07:00

Commonly I just want to grab a screenshot or wireframe and annotate it and share it with others for commenting on.

If you are snapping, annotating & sharing something that has a public URL then BounceApp by the Zurb guys is pretty cool. Notable App takes it further, but there are no free plans at the moment and it is limited to snapshots of public URLs. But for that space it is the quickest snap, annotate & share tool I have seen.

But what I have been using of late is two tools to accomplish flow. Little Snapper and Tiny Grab. I like Little Snapper because I don't mess with filenames. And it has a simple interface like iPhoto. And I like TinyGrab because you can drag any image to it and it uploads it to the cloud and creates a tiny url link on your clipboard.

Here is my workflow.

Snap an area with little snapper. No filenames needed. Image displays in Little Snapper (which looks a lot like iPhoto).
In Little Snapper I edit the snapshot.
I use the annotation tools to mark up the snapshot.
Then I drag the annotated image to either the TinyGrab app in the dock or the TinyGrab tool in the upper right area of the system menu.

TinyGrab then uploads it to their servers and creates a tiny URL. It copies that URL to my clipboard.

Then all I have to do is just paste that URL into email, etc.

Then to take it one more step. In gmail, go to Settings: Lab and turn on Insert Images. This provides an image button in the email editor. You can then pick from URL and paste in the URL that was on the clipboard.

This allows me to quickly grab a snapshot, annotate it and share it without messing with file names, etc. Here is a quick video of the annotate & share part of the workflow:

You can also use HipChat or CampFire in this process if you need to also do a lot of collaboration back and forth on an annotated snapshot.

I am curious. What do you use to snap, annotate & share (and collaborate)?

Update. @balsamiq reminded me of Skitch. I hadn't tried Skitch in a couple of years. Looks very promising. All in one tool. I didn't like the way it stored your snaps (as history). Also I wish it just copied a short URL to my clipboard like Tiny Grab. Don't want to go to the website and pick one of 6 different ways to share just for the most common case.

Togetherville Hiring Interaction Designer

2010-08-10T21:35:00.000-07:00

I love the folks at Togetherville. They are the "facebook for kids". Mandeep Dhillon and the team are passionate about a safe, fun environment for kids to engage with one another.

Here's a great opportunity! How about joining their team as an interaction designer? If you want to be part of changing the social landscape for the web, here is a place you can do it (and have fun in the process).

Don't believe me? Earlier in the year when Togetherville needed to rethink a lot of the social interaction I suggested Tangible-UX as a great partner. They got involved and it has been one of their favorite projects.

Check out the posting over on the Togetherville blog.

Zurb's 110 Interesting Moments for BounceApp.com

2010-06-27T16:24:00.000-07:00

In our book and often in our talks we discuss a technique for thinking through and documenting detailed interactions in a user experience. Just arrange the interesting moments in a grid. List the "actors" (user interface elements) vertically and the events horizontally. The cells in the grid become the interesting moments.

With the classic example from the of drag and drop there are at least 96 interesting moments (6 actors X 16 events = 96 interesting moments).

About a month back I gave a talk at Zurb, a northern California design firm, in which I discussed this technique. On Friday I was pleasantly surprised to see they had already taken the idea and used it in a new product they announced last week -- BounceApp -- which was featured on TechCrunch.

Check out their article on 110 Interactions for Editing Annotations on Bounceapp.com.

Nice application of the grid.

Workshop in HD Video: Designing Web Interfaces

2010-05-14T03:20:00.000-07:00

A couple of months back Theresa Neil & I filmed a combined workshop on the material from Designing Web Interfaces plus Theresa's material on application patterns, screen patterns and ui controls.

This is a beautifully recorded workshop by O'Reilly Media filmed at the Images in Motion Studio in Sonoma. The workshop is over 4 hours long and broken down into 11 smaller, digestible segments. A full camera crew, HD video and lots of great post production conspire to create a video series I am proud of.

Here is a sample of the material posted on youtube.

To appreciate in all of its HD glory visit our video site on O'Reilly Media. The full 4 hours is only $79. You can get it and show it to your whole team.

Inline Form Validation

2010-04-09T12:17:00.000-07:00

At the last Web App Masters Tour Luke Wroblewski gave a great talk on Forms in Action (quick plug -- you can hear him again in Minneapolis, Philadelphia or Seattle as the tour continues in those cities as well as myself and others!)
Luke brought out that on the good side more forms have added interactivity to form field validation. Error prevention is an important design principle. An ounce of error prevention is worth a pound of error handling design and code.

But on the bad side some forms are actually hurting the experience by either being too aggressive or trying to be too clever in input assistance.

I stumbled across two examples to add to Luke's collection. Both come from a very useful tool Its Deductible. I highly recommend the tool for what it does as it encourages me to donate more items and allows me to accurately take them off my taxes each year. Big fan. But two not so good experiences in their forms.

Not Clearing Error Message

Its Deductible Error Message on Login Screen

I entered the wrong account name and got a message bubble warning me about it. Good things about it:

The bubble is clearly worded.
Red color got my attention.
Is nicely placed

However, the screenshot above is after I started typing a new login name. Even after I tabbed into the password field the error message stayed up. What's bad about this? I got immediate feedback that something went wrong. But got no credit for trying to fix it. Once I started typing the new login name the bubble should have disappeared.

Draconian Date Input Handling

How many times have I entered a date in a web form? So I just need to know are you expecting month/day/year format and whether I should type the slashes or not. However watch the video and see how poorly I entered the date!

Its Deductible Date Input Handling
Don't even think about entering slashes or not giving 2 digits for the month, 2 digits for the day and 4 for the year. Anything except typing 02092009 will fail.

Here is what went wrong.

You have to enter 2 digits for the month, 2 digits for the day and four digits for the year. Why? Next bullet point...
You can't enter 'slashes'. If you do you get two slashes! And when you submit it won't like that.

It is obvious there was some effort put into assisting me in entering a date correctly. But unfortunately it took me about 45 seconds to figure out their algorithm and enter the date in exactly the way they wanted me too.

BTW, You can use SCOTT for a 10% discount on the talks in Minneapolis.

Designing with Lenses - Slides - CHIFOO 4/7/2010

2010-04-08T05:37:00.000-07:00

Had a great time last night presenting at CHIFOO in Portland. Lovely facility at the White Stag Block, University of Oregon. Thanks Leo Frishberg for the wonderful hospitality. This was the first time I have given a talk on design lenses so was curious how it would be received. I was really happy with the positive feedback.

Here are the slides from last night.

Designing With Lenses - CHIFOO

View more presentations from Bill Scott.

The biggest takeaways for me were:

The idea of lenses is a great way to mentally frame design principles
There is a strong interest in us curating these principles
There is still some tinkering on how broad the lenses should be (lumping vs. splitting). The analogy of a camera lens was used by Ann Marcus. Narrow the lens and get the details but lose more of the context. Widen and you get less detail but a broader application.
That lenses can serve (as patterns do) to inform not just designers but all involved in product design as a common vocabulary and repository for examples.

Let me know what you think.

You can follow the lens project on the @uxlenses twitter feed. Or visit the designingwithlenses.com site directly.

Speaking at CHIFOO on Design Lenses

2010-04-06T10:25:00.000-07:00

Looking forward to a quick jaunt up to Portland tomorrow and back home again Thursday morning. This is my week between Netflix and Meebo and it has actually shaped up to be quite busy. But I am excited to be giving a new talk on Lenses.

Since the CHIFOO site seems to be down at the moment, here are the details of the talk:

Designing with Lenses: Lessons from Other Design Crafts.

In any field of design, designers can enhance their craft by studying the work of others. Through the careful exercise of breaking down real-world solutions into their underlying principles and patterns, previous lessons can be applied to new sets of problems we encounter. Designing for web interfaces is no different. By necessity we are constantly searching for inspiration and practical guidance in solving the problems we face as designers each day. A powerful approach is to capture these lessons into "design lenses". A design lens allows you to view the user experience through the eyes of a single design principle. Lenses were originally created for game design but are just as powerful for user experience design.

In this talk, I will introduce the idea of design lenses and discuss several lens inspired from fields of study as diverse as theater, magic, game design, storytelling, Shaker furniture, motion graphics, and comics for inspiration in designing rich, interactive interfaces. By teasing out some of the key takeaways from each of these disciplines, a fresh light can be shed on our own corner of the design universe.

Join us at 7pm at the University of Oregon's White Stag Block.

UX Booth Article on Design Lenses

2010-04-06T10:06:00.000-07:00

A design lens allows you to view your user experience design from the perspective of a single design principle. Lenses were originally created for game design but are just as powerful for user experience design.

I recently started documenting lenses that I find useful on a new site Designing with Lenses. Though it only has 3 lenses to start with, more lenses are coming in the months ahead.

To get the whole scoop, go read the introductory article Designing with Lenses over on UX Booth.

This article is part of a series of posts written by the speakers of UX Lx, The premier UX conference in Lisbon, Portugal; happening on May 12th–14th. There's a great lineup of speakers and Portugal is absolutely beautiful, so head over to the conference site. You can enter UXBOOTH2010 for a 10% discount.

To get updates on new lenses follow my uxlenses twitter feed here.

I will also be talking on this subject at CHIFOO in Portland tomorrow night (April 7 at 7pm). Join me if you can!

Animation Rules! Notes from Talk - Chet Haase & Romain Guy

2010-04-02T12:33:00.000-07:00

I met Chet at the 360|Flex conference. We were on a panel together and talked about the UX of animation. Chet works on the Flex SDK especially focused on the animation/transition parts of the toolkit. Romain works on the UI toolkit for Android (including animation)

He & Romain spent some time last year studying the excellent book The Illusion of Life about Disney Animation by a couple of the masters of animation. The book discusses 12 rules of animation. They extracted a few principles from the book that apply directly to animating user experiences and shared them in the talk Animation Rules! they gave last year at Devoxx in Belgium.

They also mention Timing for Animation, another book I have on my shelf.

Some of the takeaways from the rules of animation:

Squash & Stretch. Lifelike objects deform in reaction to gravity & collision
Anticipation. Short actions just before the main one. Give hints to the user about what will or may happen.
Staging. Clearly communicate to the audience what is happening (poses, camera views, lighting, focus). Emphasize the important elements. Avoid too much noise.
Follow through, overlapping action. Realistic body physics. We are not rigid bodies.
Using Slow in & out.
Using Arcs in motion.
Secondary actions. Actions which emphasize or complement the main.
Timing. Careful timing of actions for realism, impact & effect.
Exaggeration. Making actions more lively, more obvious, more entertaining.
Solid drawing. Drawing has to be solid before you can animate well.
Appeal. Believable, appealing characters that the audience can enjoy.

Chet & Romain's Proposed Rules for GUI Animation:

Timed: Fast, realistic & appropriate
Designed: Use animations for good, not evil
Smooth: Don't make your users hate animations
Transitioning: Bring the users along
Realistic: Motion, timing, interactions.
Anticipatory: Hint what may happen
Simple: Help the user, don't confuse them.

This is just a summary. So make sure you watch the talk at Chet's blog.

WAM Tour in San Diego - Come Join Me!

2010-03-16T10:23:00.000-07:00

I am excited to be part of the Web App Masters Tour that kicks off in San Diego next week, then heads eastward to Minneapolis in April and then on to Philadelphia in June and finally bounces back west to Seattle in July.

Next week I will be in the illustrious company of some real luminaries: Jared Spool, Stephen P. Anderson, Hagan Rivers, Christian Crumlish, Ken Kellogg, Luke Wroblewski and Doug Bowman.

If you can make it next week (3/23-3/24) I have a special discount offer: from now until 3/18 you can get $300 off the conference by using the promo code SCOTT at the tour site.

I am Hiring Again (Yes Again!). UI Engineers for TV & Web Site Experience

2010-03-08T16:40:00.000-08:00

As of today 3/8/10 I am actively looking for two more user interface engineers to join my team. (I filled the previous posting with 2 engineers!)

Since late last year we have expanded the number of user interface engineers working on new, upcoming TV experiences. What is especially exciting about this area is the chance to utilize the latest technologies (HTML5, CSS Animations, and other Webkit goodness). We call this the "10 ft UI team" in reference to how far away from the TV the average person sits. Compared to the 2 ft experience with our desktops. In particular I am looking for an Sr. User Interface Engineer that gets jazzed about creating a fully cinematic, rich, fast experience in a 100% JavaScript client app that will be used by millions of Netflix members in their living rooms! How can you not get excited about that?

In addition, I am also searching for a user interface engineer for our main web site experience. Over the next year our main site experience will continue to change (most likely in some significant ways). With our site moving to the cloud, expanding into the international marketplace and our experience moving to multiple devices there are a number of challenges ahead. For this role you need to really understand cross-browser issues, know how to wield JavaScript and tame CSS to field numerous member experiences in our A/B testing framework. This is a senior role (as are all of the roles on my team). You will need to understand the principles of good, simple, clean design. As we continue to refactor the underlying infrastructure you will also need to be able to get your hands dirty in the Java/JSP layer as well. This means you can't just be an "HTML hack". No, you need to have a solid set of computer science skills. The perfect profile is usually someone who has at some point worked in enterprise web applications but more recently been developing public consumer web sites with an interesting mix of UI challenges they have had to solve. However, don't let that persona keep you from pinging me. I love to be surprised.

Netflix is a great place to work. We pay well. We work hard. We play hard. And we do have work/life balance! Check out our culture as explained by our CEO, Reed Hastings:

I will post the official job description in the next day or so.

Feel free to contact me at my email: bscott (netflix)

Microsoft Courier Interesting Moments & Design Patterns

2010-03-05T23:36:00.000-08:00

I culled numerous screenshots from the video posted on Engadget in their article: Microsoft's Courier Digital Journal and have organized these into 17 sets on my Designing Web Interfaces flickr site. Each corresponds to an interaction pattern with individual keyframes to call out the interesting moments.

The 17 patterns

Toss object onto another object. Opens a contact on a map.
Hand swipe to change view. Finger flips pages, hand flips apps/views.
Pinch closed to go to overview. Pinch closed to go from single view to multi-view.
Tap button. Just as in iphone/ipad.
Draw bound box to make handwritten notes into object. Interesting. Box a to do list. Then it is an object. Can toss contact on it to send the list to them.
Pinch and spread. Open up a stack.
Toss to add to page. Same as tossing object onto another object above, just a convention to add elements to a blank page by tossing them there.
Flip over objects and make notes on back. Writing on the back is a cool idea.
Hand swipe up to go back to other views (apps).
Pull down Tool Area as Shade. Nice effect of the tool surface area pulled out further in the center. Looks like a fabric curtain shade being pulled down.
Toss to save page objects.
Tap Pen for Radial/Pie Menu. The pie menu!
Hand Swipe to widen a view (1 page to 2 page). Interesting. A view/app is open on the right. Pulling it over to the left pane opens it fully. You pull with full hand swipe.
Pull up page corner for configuration. This reveals a color/pattern swatch (stack of pages). Nice animations.
Pull open folding tool palette. Like a folding room divider, it unfolds with tools.
Send page (folds like origami and then sent flying). Take a page. Say send it. The page folds up into something similar to a postcard. Write the address (with the pen) on it and send it.
Drag to Pocket. In the middle between the two panes you can drag items to the "pocket", flip pages, etc. and then drag them out. Reminiscent of trays in picasso, yahoo photos or just the clipboard.. Nice simple implementation.

What Stands Out to Me

2 individual panes. Perfect for book reading. Perfect for master/detail pattern (which is being exploited in the ipad as well).
Pen, finger & hand gestures. Little wider input vocabulary as you advance in skills.
Even more physicality than iPad (or at least it appears so if the video is really a true representation). When objects are selected, they move upward to a higher plane and float above the other elements. Using the z-index is a clever way to represent selection. When the elements break free of "flatland" they wiggle/wave like a flag as they move into position. The page that gets mailed, transforms itself into a postcard through a series of origami style folding.
The pocket is really clever. Store stuff in the binder/gutter and move around then pull it out.
The language of object on object meaning is also richer than the iPad (will the normal consumer understand this?)
The use of the pie menu with the pen is a good idea. Pie menus have been shown to be efficient and seem natural in this interface.
Returning to the pen. Being able to use the pen for finer pixel level manipulation is good (again, this is not as simple as just the finger, but provides more capabilities). Also being able to input with the pen (hopefully they nail this) should be faster than the keyboard for short spurts (don't have to leave the surface to begin writing).
Gobbling while surfing. I am not sure if my former colleague Karon Weber has been involved in this project (she works on touch based interfaces at Microsoft with Bill Buxton). We did the Yahoo! Teachers project together and she & Samantha Tripodi designed the gobbler which I built. The premise was easily grabbing content from around the web and dropping it into "wells/objects". In the Courier this is made simpler by tossing into the right pane (the receptacle for the drop). The tossing seems pretty effortless and the landing target is huge (can you say Fitts law?)

Of course, all of this may just be vaporware, but regardless I found it useful to analyze the interactions as they illustrate where interfaces will be heading as we break away from the world of pure WIMP (Windows, Icons, Menus, Pointers).

iPad Interesting Moments

2010-02-08T00:33:00.000-08:00

To familiarize myself with the iPad UX interactions I studied the Steve Job's video as well as Luke Wroblewski's post on the various multi-touch patterns introduced by the iPad.

I find it helpful to take these interactions and "slow them down" as a series of keyframe screenshots. Doing so gives you a chance to appreciate the care that went into designing each of these interactions.

You can find the fruit of my labor thus far at my Designing Web Interfaces flickr site. I will add more in the days ahead.

A quick observation. There is a longer delay than I expected when initiating a swipe (like a page flip) or activating an edit (like editing in email). In the case of the swipe there does have to be some movement first to discern the swipe event. In the case of the edit activation it seems the delay makes the interaction feel right (a tap is the tap down and pull up just like the mouse click is a mouse down + mouse up... the up part is sloppier with the finger). Also see the delay of items being selected for delete.

Another observation that I am unsure about may just be an artifact of capturing snapshots from the video. There appears to be blurring of images at various stages in the swiping transitions which would indicate faster motion. You can see this effect in flipping photos and zooming the map. Again without having access to an iPad this may just be some artifacts of the capture process... but this would be a good way to make a transition feel faster (speeding up gets blurred as well as moving fast; slowing down gets clearer as well as actually slowing down). [Update: Martin Polley pointed me to an article by Keith Lang on Blur the New Black that could be helpful in understanding this. [Update to the update: I am fairly convinced this is an artifact of the video capture process. However, blurring is a good way to smooth animation.]

The use of real world style transitions (flipping bookcase over, flipping pages, spreading stacks, rotating orientation, collecting selected elements into stacks) work extremely well with a multi-touch interface. I am using my physical body not a mechanical mouse so the response should feel more real world. This is also what Apple mentions in their UX guidelines.

Here is the quote from Apple's iPad Human Interface Guidelines:

Whenever possible, add a realistic, physical dimension to your application. The more true to life your application looks and behaves, the easier it is for people to understand how it works and the more they enjoy using it.

As you work on adding realistic touches to your application, don’t feel you must strive for scrupulous accuracy. Often, an amplified or enhanced portrayal of something can seem more real, and convey more meaning, than a faithful likeness. As you design objects and scenes, think of them as opportunities to communicate with your users and to express the essence of your application.

Use animation to further enhance realism in your application. In general, it’s more important to strive for accuracy in movement than in appearance. People sometimes feel disoriented when they see movement that appears to defy physical laws. As much as possible, make sure your virtual views and controls mimic the behavior of the physical objects and controls they resemble. Convincing animation heightens people’s impression of your application as a tangible, physical realm in which they want to spend time.

Thoughts?

YANNI - Yet Another Ninja Needed Immediately!

2010-01-04T09:39:00.000-08:00

UPDATE! I have hired 2 Engineers! So this role is filled. However, I have another opportunity... read it here.

~~Another new opportunity at Netflix as of today (1/4/2010)!~~

But if you are interested please contact me at the email shown on the t-shirt. You can find more out about this position at the Netflix Jobs site.

Several notes about this position:

Will focus on the acquisition/non member side of the web site.
Exciting new opportunity as we move to our first international offering.
Not a User Experience Designer role, but a Web User Interface Engineering Ninja. Expert level in DHTML and general Computer Science skills required.
Not a remote position and not relocating internationally (but will relocate the right candidate within the US).
Part of the User Interface Engineering Team and as such reports to me.

(BTW, the shirt above was created and produced by Zazzle. Check them out at Zazzle.com)

Theresa's List of Essential Books for User Interface Designers

2009-12-17T07:58:00.000-08:00

Nice list from my co-author and cohort in design. Now I need to get my list together. But over half are on my list as well.

Netflix needs another Javascript Ninja

2009-12-07T10:24:00.000-08:00

Ok, so this role does not report to me but reports into our excellent Customer Service Engineering organization. The engineering effort is for an internal application suite and not for the main web site. The role actually touches a lot more technologies than the main web site does and is a worthy feat for any ninja to take on. This is really a great opportunity!

Last year I was fortunate to snag Greg Murray (former Sun Ajax Evangelist/Architect) who has been happily working in this role. I now have a new challenge for Greg and need another ninja like him to take his current role. If you know Greg then you will understand the caliber of person I am looking for :-)

Here is the description that the hiring manager sent me.

Here are some of the qualifications we would like for becoming a Netflix customer service UI ninja,
Is passionate about designing and engineering great interfaces
Has solid experience designing & building enterprise web applications in a Web 2.0 manner
Has strong proficiency in server-side UI technologies (Java, Struts / GWT / Tapestry / JSP / JSF )
Has a solid background in simple software architecture and design as well as can communicate their solutions to the rest of the engineering team
Has experience working with distributed web services
Experienced with scaling / performance tuning of highly interactive web applications (understands both client and server ramifications)
Your job profile will probably include a good deal of experience with building user interfaces for advanced, non-consumer oriented sites.

You will be part of the Customer Services Engineering Team. You will be responsible for the presentation layers of all current and new customer service tools. Since much of the work is green field you will have the opportunity to help design the user experience as well as build the web applications. In addition, the Netflix UI framework that the site runs on is shared with these applications. As such you will help flesh out this framework as we go forward.

So what technologies would you be using?
HTML 5
CSSS including BluePrint CSS
JavaScript (custom components mixed with some libraries like jQuery)
Java
JSON
Nice to have experience with:
experience with a Perforce or related version control system (Git / SVN / CVS)
proficient in Photoshop
proficient in Eclipse / IntelliJ

Know anyone? Are you that person? If so contact me at bscott _AT_ netflix _DOT_ com and I will connect you with the hiring manager.

Upcoming Talk at Rich Web Experience

2009-12-01T14:08:00.001-08:00

Speaking tomorrow at the Rich Web Experience in Orlando, Fl. I fly out tonight at midnight. Arrive at 10am, speak at 4pm. I promise to get some sleep on the plane so that I will be fresh for the talk! Fly out on Thurs evening. So if you see me there and I look a little spaced out -- you know why :-)

Talking on Designing for Interesting Moments. Hope to see you there.