Be honest: When you have an idea for a new product, which do you design it for first; a computer or a smartphone? If you chose computer - you're missing out! More often than not, the mobile experience for a web application or site is designed and built only after the PC or Mac version is complete. It's time for a change.
On June 18th Luke Wroblewski, the internationally recognized product design leader who has designed and contributed to software used by more than 700 million people worldwide, will get on his second soapbox to make the case for designing web applications for mobile platforms before the desktop in order to take advantage of:
explosive growth
useful constraints
innovative capabilities
Luke recently presented his case of Mobile First! at EventApart. As a bonus Luke will leave us with an outline of mobile design tips such as: multiple screen sizes and densities, touch gestures, location awareness, orientation changes, tight audio/video integration, and more.
About Luke: Formerly as Chief Design Architect at Yahoo! Inc. Luke worked on forward-looking integrated customer experiences on the web, mobile, TV, and beyond. Luke is the author of two popular web design books: Web Form Design (2008) and Site-Seeing: A Visual Approach to Web Usability (2002). Luke is consistently a top-rated speaker at conferences and companies around the world, and is the founder and principal of LukeW Interface Designs which features his popular blog Functioning Form.
RSVP for LukeW's ZURBsoapbox on June 18th, 2010
Where?
ZURB HQ
55 N. 3rd Street, Suite 100a
Campbell, CA 95008
We all had an amazing time at the ZURBsoapbox with Bill Scott last Friday. We had a great turnout of folks, lots of sushi, and a passionate discussion about interaction design. A few ZURBians even won a copy of Bill Scott’s Designing Web Interfaces book! What more can you ask for?
Bill started the discussion off by mentioning that all interfaces are made up of hundreds of "interesting moments"— minute interactions which make or break the user experience. Many times people don't pay attention to the interesting moments which results in anti-patterns which make the UI confusing and hard to use. Here are a few great examples of anti-patterns Bill shared:
Intuit's TurboTax: Watch what happens as you enter your interest paid for the year on your federal tax returns. The tax amount you owe the government skyrockets and then goes down. This nearly gives the user a heart attack.
Yahoo! Photos site: Watch what happens as you drag the picture into the folder. Dancing Hampsters (as Bill calls them "idiot boxes") pop up. This interrupts and confuses the user. Golden rule of any UI is to stay out of the way and let the user complete the task.
Barnes and Noble: Interesting example of the endless scrolling of the book selector. The selector ends up being a conveyor belt instead of a carousel.
Netflix: What made the biggest difference
Bill mentioned a number of factors which contributed to Netflix's killer user experience. Some of them included:
Getting rid of the synopsis text on the search results page and putting it into a tooltip description ended up helping folks find movies with less work.
Making the box icons of the movies larger ended up improving the user experience and consumption.
Adding transparency messages such as: "We picked movie X for you because you watched movie X" helped out a great deal. This built trust which prompted engagement.
Hiring people to micro-tag each movie ended up creating very targeted tags for movies. The response from users was: "Wow! These Netfix guys really know me!" This increased the consumption a great deal.
Netflix: Tell us about a mistake you made
Netflix had a goal of increasing movie consumption by increasing the number of people who tell the site taste engine the movies they like to watch. More information about the user's taste leads to more movie recommendations based on user preference which leads to increased consumption. Simple enough?
Here is what ended up happening:
Netflix asked the new users to rate the movies they like
During the 2 week trial the new users spent most of the time inputting their rating movies instead of watching movies
As a result the retention dropped significantly since users did not perceive the value
What was the solution? Netflix simply moved this movie rating control into an area of a website where most existing users go. The new users ended up spending up most of their time watching movies instead of rating them.
It's hard to summarize 25 years of experience in a 25 minute discussion. Bill did a phenomenal job highlighting the techniques and best practices behind the Netflix UI. We'd like to thank Bill once again for such a fun and insightful talk!
Ever wonder how Netflix built such a great user experience? Ever think how you could do the same for your own product? On June 4th Bill Scott, the man who helped engineer Netflix's UI, will get on his soapbox at ZURB to help you learn how he helps his teams approach product design:
How Netflix makes decisions
Being relentless about simplicity
War stories about design-by-analytics vs. design-by-principles
Getting Design and Engineering to work together (UX vs. agile development)
Creating morale by not trying to create morale
Killing features
Most of us know that a great customer experience stems from an interface that does not distract us. A great UI lets us accomplish a goal without too much interaction. As a result, it brings the support costs down for the business and makes us customers happier and more engaged. So the question is: how do you build a UI like that? We're excited to have Bill Scott join us to share techniques for how to do exactly that.
As the Director of UI Engineering at Netflix, Bill lead a team of UI engineers to create the best experience for online movie delivery in the world. You might have read through some of Bill’s principles behind design: Make the UI Direct, Keep it Lightweight, Stay on the Page, and Provide an Invitation. These are great concepts, but like everyone else we want to know how he actually implemented these principles in a company environment? Join us to find out.
One secret to great interaction design is minding the interesting moments—those points in time where we can create nuanced engagement with the user. - Bill Scott
About Bill: For 20+ years Bill has bounced back and forth between design and engineering, creating products video games, widget libraries, war gaming, IDE tools, airline management and Web consumer sites. Bill Scott is currently the VP of Product Engineering at Meebo where he leads the UX and Engineering to continually improve the UI of one of the most popular IM aggregators in the world. Previously, as the Director of UI Engineering at Netflix Bill & his team built the Netflix experience for web, TV and most recently, the Apple iPad.
Before Netflix Bill led the engineering effort for Yahoo! Teachers, one of the first web 2.0 communities built by teachers for teachers with the help of Yahoo! The site helped teachers to gather, organize & share web resources and lesson planning. As the Design Pattern curator at Yahoo! Bill evangelized Yahoo! Design Pattern Library which quickly became one of the few primary resources to let designers and developers easily find a design pattern to suite the problem at hand.
Bill is the co-author of the O'Reilly book Designing Web Interfaces which shares six design principles for creating rich interaction design on the web. The design principles underpin 70+ patterns and best practices for creating rich internet applications.
RSVP for Bill Scott's ZURBsoapbox on June 4th
Where?
ZURB HQ
55 N. 3rd Street, Suite 100a
Campbell, CA 95008
Want to learn how to be a great interaction designer? Here is your chance to learn directly from the ZURB team. Over the past 12 years ZURB has developed a robust and flexible design process that has helped establish us as leaders in the field of interaction design. We’re excited to share our knowledge and passion through a series of workshops called ZURBthink.
If you're involved in website and application development, we're offering you the opportunity to learn directly from our founder, Bryan Zmijewski, and partner, Jeremy Britton.
ZURBthink teaches students and inspiring interaction designers about the tools and methods we use to design and build successful products, websites and web applications. Students will learn the process for opening up opportunities, balancing company goals and user needs, structuring interfaces, as well as refining and focusing efforts to close phases of the design process.
The ZURBsoapbox with Alex Faaborg of Mozilla was absolutely hopping! We had so many folks show up that we had trouble piling into the brainstorm room this time around.
Alex started off sharing how design works in a large open source community as well as the challenges which Mozilla has faced as a company. He went on to talk about the future of Firefox as he showed us mockups of FF3.5, FF4 and FF5. A long line of questions followed from the audience at the event, as well as the Twitter stream and blog comments.
Alex started off with stating Don Norman’s two approaches to UX design.
User Research: user studies, focus groups. Study your users, how they behave, which features they want, what they do on the site. Microsoft is perfect example of this - they design against their user needs.
Vision Designer: Designer who has a vision of what they want to make. They are designing for the user they envision. Apple is a perfect example of this – it’s a team of designers working in secret, not interacting with users, focusing on core principles.
Approach #1 PROS
Approach #1 CONS
Approach #2 PROS
Approach #2 CONS
Mitigate risk by acting on user feedback
If you’re not careful users can influence you in the wrong (complicated product with lot’s of features)
Has a potential for exponentially huge success (Apple is an example)
If the designers don’t know what they’re doing this could be a huge failure
So which approach does Firefox take?
Alex paused before he said: “Most of the time we take the second design approach. We focus on core principles. The difference is that we’re doing it in the open source so people can join in the community. Hence we partially lean toward the first approach as well."
How does Firefox use the best of both approaches?
Courtesy of Mozilla
“Remember that Komar & Melamid painting where they sent out a survey asking people what they most enjoyed seeing in paintings and tried to incorporate all these elements into one painting? Take a look – it came out awful didn't it!” Alex said.
The lesson here is: Don’t add all the suggestions from your users into your product unless you want a painting such as this one above.
“In open source everyone throws in what they think the design should be influenced by. Even though it’s hard to come to a decision that pleases everyone it’s important for Firefox that people remain engaged because that’s how we fuel all of our work.” Alex says.
“We considering every feature suggestion by going back to the drawing board and focusing on core principles.” Alex mentioned. If a certain feature or functionality does not make it into Firefox the company asks people to create a Firefox extension for it.
Alex mentioned that great contributors from open source community can turn into people who steer Firefox in the direction we want it to go. A good example of this was the logo design for Firefox. The browser was called “Phoenix” originally. A couple of designer showed up and said that this logo will not work and that “We have something better." The Firefox icon was created by these folks, Jon Hicks rendered it, and now we see it everyday on our browser.
What’s coming in FF4 and FF5?
All of us want to see what Mozilla has in store for Firefox 4 and Firefox 5. Alex discussed this in detail. The slides and the podcast walk you through all the changes in discussion for the future versions. Here are a few teasers for you:
Thinking of putting tabs on top finally.
Courtesy of Mozilla
Courtesy of Mozilla
Trying to change the way we think about bookmarks. “Instead of hierarchical trees and folders we’d like to give folks an ability to use all of FF interface to navigate through all the bookmarks visually. We’ll also give people an ability to sync all their data to a central location so that they can access it from any FF browser."
Courtesy of Mozilla
Lot’s of great questions we answered as we discussed future versions of Firefox. The full set of slides can be viewed here as you listen to the podcast.
Alex - Thank you once more for giving us such a great talk!
Highlights from our past ZURBsoapbox lectures are available online at ZURBlog:
The ZURBlog is where we discuss design interaction and strategy. We use design thinking to challenge businesses and designers to improve the products and services they create.
Courtesy of Mozilla
Courtesy of Mozilla
Courtesy of Mozilla
Courtesy of Mozilla
