As our clients are moving to more rapid development processes, like Agile’s Scrum, their design teams are looking for ways to infuse their UX work into the process. My recent research shows that Lean UX is one way to get there and it’s getting lots of traction through out the UX community.

In this week’s UIEtips, I discuss what’s been happening to our design processes and why I think Lean UX has real potential to change the way we approach our work. I’m sure you’ll enjoy it.

Read the article: Is There Any Meat on This Lean UX Thing?

As an extra bonus, coming up on Wednesday, December 7, we’ve invited Jeff Gothelf to talk about how he’s using it to get his company, The Ladders, out of the deliverables business. If you’re working in Agile or another fast-moving environment and want to know core essential techniques for good design, you won’t want to miss this virtual seminar. Read the details.

What’s your take on Lean UX? Is it something you’ve been working with? How has it helped you? Share your thoughts below.

Pam Rodriguez and Luke Wroblewski did a nice job of posting their notes. Thanks guys!

• Steve Portigal on Design Fieldwork: Uncovering Innovation from the Outside In – Pam’s notes, Luke’s notes.
• Kate Brigham on PatientsLikeMe: Adventures with Data Visualizations – Pam’s Notes, Luke’s Notes.
• Luke Wroblewski on Designing Mobile Web Experiences – Pam’s Notes.
• Mike Lee on AARP: Designing a Strategy for Organizational Transformations – Pam’s Notes, Luke’s Notes.
• My presentation on The Essential Principles behind Great Design Principles – Pam’s Notes.

As you can see from the #UIEWAMT Twitter stream, everybody had a great time and we all learned a ton.

There’s one more stop on the 2011 tour – Minneapolis on June 27-28. Use the promo code BLOG and get $100 off the registration price.

See you there!

UIE Web App Masters Tour:
Get $100 off the Minneapolis Masters Tour with the promotion code BLOG.
Minneapolis

In this week’s UIEtips, I share an excerpt of the interview with you. I think this interview with Derek is still fascinating today and worth the read. This is just a taste of what we talked about.

Read the article Accessibility with Derek Featherstone.

Our next UIE Virtual Seminar just so happens to feature Derek Featherstone on Ajax and Accessibility. Derek will share a bundle of tips and advice on how to use Ajax and keep your web site accessible. Find out more about this must-attend webinar.

Little design details are the same. If they are implemented well, the users won’t pay them any heed. If they are implemented poorly—causing delays and confusion&mdash then the users will complain.

The big difference is that when there’s a problem with the little details, most users don’t know how to express what’s happening. It’s unlikely they’ll ask for a piece of code or even for the interaction to match some clever web 2.0 site, even though that’s the right solution. They’ll just know something is not quite right and it will reduce the quality of their experience.

One of those little details is when to refresh the page. Years ago, there was no design choice here. The user pressed a button and the page redrew itself. Today’s technology, however, can change that, with Ajax and JavaScript giving us the power to modify a portion of the page, keeping the rest of the user’s frame intact.

In today’s UIEtips, I revisit an article from September 2008 on how to decide when page refresh is the right thing to do. How do you know when you should put in the extra effort and cost to eliminate it, and when should you put your resources into something else? I think you’ll enjoy it.

Read the article: To Refresh, or Not to Refresh

Eliminating page refresh is often done with Ajax and JavaScript—two subjects that our next UIE Virtual Seminar expert, Derek Featherstone, knows all about. Derek will help you navigate the minefield and maximize the effectiveness of using Ajax in your design. Get more details on his Derek Featherstone’s virtual seminar.

Have you come up with a strategy to eliminate page refreshes in your design? Did you decide that page refreshes were the better way to go for your users? We’d love to hear your experiences below.

Subscribe to our podcast via

There are more than 16 different events and 96 interesting moments in a common drag and drop interaction. Your designs must leverage these moments to enhance the user interaction to deliver the right feedback and avoid distraction and confusion.

Bill Scott’s Designing for Interesting Moments was one of the highlights of the first stop on UIE’s Web App Masters tour, in San Diego. We wanted everyone to benefit from his research into web interactions, so we’re bringing you this audio and visual sample.

View Bill Scott’s Designing for Interesting Moments Sample

Since we couldn’t embed all the visuals here, we’ve built a special showcase. You can listen to Bill describe the components of his first principle of Designing for Interesting Moments, “Input where there’s output”, and view his example videos and screen shots. Bill’s presentation is visually rich. You can listen to the audio alone, but we recommend you view the visuals with the audio.

In this excerpt from the talk, Bill touches on patterns that work and anti-patterns to avoid.

Patterns

• In-line editing
• Multi-in-line editing
• Symmetry

Anti-patterns

• Non-symmetry
• Tiny-targets
• Artificial Visual Constructs

Until May 7th, you can register for any of the Tour cities for $795 when you use the promotion code TOURBLOG. Learn more about the tour at www.UIETour.com

This is just one principle from Bill Scott’s Designing for Interesting Moments You should join us to see all six principles at the UIE Web App Masters Tour. You won’t regret it.

Subscribe to our podcast via

Bill Scott

If you’re using advanced, or “rich” interactions in your web applications, then it’s likely you have Bill Scott and Theresa Neil’s Designing Web Interfaces on your desk, if not your bedstand. Published in 2009, it is perhaps the definitive tome on rich interactive design patterns for the web. Bill has dedicated a significant portion of his career to dissecting such interactions, creating the Rico JavaScript library, curating the Yahoo! Pattern Library and now overseeing UI engineering at Netflix—one of the first companies you think of when you think of Ajax-y web interfaces.

It’s hard for us to picture talking about web apps without talking about Bill and his research into design patterns. His new book is full of examples where he slows down time to explore each micro-stage of an interaction. Our Jared Spool got together with Bill to discuss his ideas about the nuances of Interesting Moments.

Jared and Bill discussed,

• Bill’s experience of aggregating successful interactions in the Rico JavaScript and Yahoo Patterns Libraries
• How his challenges at work lead to him writing Designing Web Interfaces
• How his interface research lead to better ways to capture interactions for documents and prototypes.
• Dancing Hamsters
• …and more

Bill speaks about both patterns—successful interaction models for common interactions—and anti-patterns. By showing what not to do, anti-patterns often provide insight on the right way to do something.

A good example [of an anti-pattern is from] the old Yahoo Photos site[…] dragging several photos into an album, there’s no indication that the photos actually dropped into the album folder, and there’s no feedback that says, “Oh, there was three, but now there’s six items in the folder.”

The designers had dropped in two extra “idiot boxes”, which is a great anti-pattern. The first idiot box says, “Do you really want me to drop these items into the folder that you so carefully managed to use your mouse dexterity to get to?” Not quite that message, but that’s gist of it.

Then there’s another pop-up that says, “Hey! Guess what? We did what we said we would do. We actually put those items in the folder.” It’s sort of, as Alan Cooper calls it, “stopping the proceedings with idiocy.” The missed moments were just those little, subtle feedbacks that could have been done, instead of the hammer approach, by having those boxes pop up and interrupt the user.

The take away for our work is that this interaction was backwards. It gave no indication that you were doing something successfully while you were doing it, and then penalized your time after completion with dialog boxes to confirm your success: “You did it!” After dismissing the dialog, you were left with an interface that didn’t reflect any of your changes.

By adding clues that the move was happening during the action, and then reflecting the changes with interface cues afterwards, we can make the experience smoother while avoiding “idiot boxes” altogether. (This interaction is detailed in chapter 5, “Overlays” of Designing Web Interfaces)

There are many more pearls of Bill’s wisdom available in the podcast, please tune in!

Don’t miss Bill’s full presentation, “Designing for Interesting Moments“, at our Web App Masters Tour. He’ll be with us in San Diego, Minneapolis, Philadelphia and Seattle.

Let us hear your questions about interesting moments in the comments below…

The answer to these questions, and many more, are in a series of podcast interviews I did with web app experts. Twitter has been abuzz over these interviews and we want to make sure you get to hear what all the tweets are about.(By the way, if you want be notified about each new podcast, or any UIE news, follow us on Twitter @uie.)

Coincidentally, all these experts presented at UIE’s Web App Summit in late April. We offer a special CD with presentations from these experts. At the end of the post, there are details on this CD offer.

In part 1 of a 2 part series, I focus on the following experts:

• Derek Featherstone on how Ajax techniques can improve accessibility
• Nathan Curtis on using patterns and component libraries and the efficiencies you gain from them
• Luke Wroblewski on frequently asked questions with web form design
• Molly Holzchlag on web standards for web apps, specifically with HTML5 and CSS3
• Richard Rutter and James Box on why they use rough interactive prototyping over traditional deliverables 

Sounds intriquing? Here are this week’s 5 podcasts. 

Ajax Aids Accessibility with Derek Featherstone

Does Ajax aid accessibility? Yes, if you do it right, using Ajax techniques can improve accessibility. Surprised? You shouldn’t be. Ajax is like most techniques and technologies on the web — they are what you make of them.

In this podcast, Derek Featherstone, principal of Further Ahead, tells us that we first need to know how to think about Ajax as a design tool. Today’s toolkits (such as jQuery) can really help designers build functional prototypes to demonstrate their interaction concepts to developers, who will then integrate theirideas into the production system. Taking advantage of the many available libraries gives you a sandbox for trying out interactions without having to know the best practices for implementing the code.

More detail on Derek’s interview.

Achieving Pattern and Component Reuse with Nathan Curtis

Dealing with real-life web app production isn’t as glamorous as some aspects of design in the digital realm, but it is full of challenges and can honestly make or break a project. There are ways of truly optimizing certain aspects of the production so that you can create a product with consistent quality at a faster pace. To find out how, I turned to Nathan Curtis, principal and co-founder of EightShapes.

Hear how design pattern libraries and component libraries are defined. And how having these libraries can save you tremendous production time.

Using these repositories prevents each team from inventing their own wheels and engineering them from scratch. Nathan than compares pattern and component libraries to style guides, which were the first step toward this idea — one that is too often broken, over restrictive, and simply ignored. 

More detail on Nathan’s interview.

Web Form Design with Luke Wroblewski

How many pages should my complex form be? Are Dynamic Forms a good idea? When I get questions like these and others on web form design,I turn to to Luke Wroblewski, author of Web Form Design: Filling inthe Blanks and Senior Principal of Product Ideation & Design for Yahoo. Luke also has his own shop, LukeW Interface Designs.

In this podcast, you’ll hear the answers to the approve questions. Luke explains why there is no easy answer on the number of pages for complex forms and how the content should shape the form. And he’ll talke about how to use Dynamic Form correctly. In addition to answering some other questions, Luke also points out why he’s particularly interested in the concept of parti.

More detail on Luke’s interview. 

Web Standards for Web Apps with Molly Holzschlag

There are a number of new standards that have come out recently, HTML5 being perhaps the most notable for web applications, because it was brought forth with applications in mind. New features, like canvas, are designed to improve dynamic interactions between the presentation layer and the behavior layer. JavaScript’s usage has really matured and is almost indispensable with developers.

In this podcast, I reach out to my long time friend, Molly Holzschlag to discuss the impact these and other advancements are having on web application design and development, along with the tremendous benefits building with standards (or even a subset of them) brings to the lifecycle of a product.

Molly is the unsinkable author of a metric ton of web development books, is a noted teacher, and an in-demand consultant in the field. There’s likely no one better to ask about web standards than Molly.

More detail on Molly’s interview.

Roughing it with Interactive Prototypes with Richard Rutter and James Box

Without planning, web apps have no where to go. Planning documents for web app projects are often overlooked, despite their importance in the success of the product. As a designer, no matter how great your research is, or how amazing your programmers are, if your planning documents do not develop well, your project will fail.

James Box and Richard Rutter of Clearleft have been working on ways to plan highly interactive web apps that make the process more efficient.

Instead of using traditional deliverables, they show clients what they call ‘design tools.’ The advantage to these is that they stress design as a process, rather than set in stone. This method aids the flow of dialog between the designers and the client.

More details on Richard and James interview.

Information about Part 2

I think you’ll find great nuggets of information from all of these podcasts. Early next week, I’ll finish this series of podcasts with:

• Steve Mulder and Riccardo LaRosa on Web 2.0 Strategy & Design
• Dan Brown on Documenting Design 
• Robert Hoekman on Interaction Design with Frameworks 
• Brian Kalma on Company Culture Meets Customer Experience

CD Offer

If you enjoy listening to these podcasts you’ll want to check out the Web App Summit proceedings CD where you can hear the audio presentations from the Summit. For only $185, your CD will include 14 audio recordings and 22 presentation decks. Get more information on pricing and ordering the CD.  

Enjoy the podcasts.

Subscribe to our podcast via

Without planning, web apps have no where to go. Planning documents for web app projects are often overlooked, despite their importance in the success of the product. As a designer, no matter how great your research is, or how amazing your programmers are, if your planning documents do not develop well, your project will fail.

One of the great user experience success stories in the U.K. is the Brighton-based agency Clearleft. They’ve developed successful, sophisticated methods of planning for their projects. I was able to get a hold of two of their talented crew to discuss those methods in this episode of the SpoolCast.

James Box (UX) and Richard Rutter (Co-founder and Production Director) have been working on ways to plan highly interactive web apps that make the process more efficient. And that’s exactly what we spoke about during the podcast.

James and Richard first told me that they hold back from traditional deliverables, and show clients what they call ‘design tools.’ Some clients prefer tidy deliverables, but many clients like these rougher documents. The advantage to these is that they stress design as a process, rather than set in stone. Sometimes overly polished documents can make a solution appear complete, without the client being able to change its course.

This method aids the flow of dialog between the designers and the client. Rough prototypes help your client stay focused on the core issues you’re demonstrating, like interactions, while avoiding getting caught up on visual elements that aren’t important at this very moment. As an example, when possible, they leave color out altogether.

A key element to the success of their design tools is that prototypes are interactive. They make many prototypes with HTML and enough jQuery to demonstrate the interaction. They don’t feel this process takes any longer than using relatively static tools like Visio or OmniGraffle, and offers more utility. They’re always looking for ways to improve the process with reusable pattern and code libraries.

There were more quality nuggets in the conversation too, so please tune in for more on peer reviewing, prioritizing usability testing and real code production.

James and Richard will be joining us in California this April for our Web App Summit, where they will be conducting a full-day workshop on “Wireframing and Prototyping for Highly Interactive Web Apps.” If you enjoyed this conversation, please join us to learn how their techniques can help in your organization.

Have you moved to interactive prototyping for expressing complex situations? Let us know in the comments.

Subscribe to our podcast via

Yes, if you do it right, using Ajax techniques can improve accessibility. Surprised? You shouldn’t be. Ajax is like most techniques and technologies on the web—they are what you make of them.

I had a chance to talk with Derek Featherstone, a world renown expert on web accessibility and principal of Further Ahead, a consulting firm out of Ottawa, Ontario that helps their clients get the most out of their web site designs.

In the podcast, Derek tells us that we first need to know how to think about Ajax as a design tool. Today’s toolkits (such as jQuery) can really help designers build functional prototypes to demonstrate their interaction concepts to developers, who will then integrate their ideas into the production system. Taking advantage of the many available libraries gives you a sandbox for trying out interactions without having to know the best practices for implementing the code.

Derek also discussed common misconceptions about Ajax. He said that, while implementing Ajax that aids accessibility has its challenges, it’s within the technical reach of most developers.

I was glad when he reminded me that many interactions that improve experiences for people with special needs also improve the experience of average users. Techniques like managing large data sets on one page through Ajax-powered content updates can also help users with special needs by maintaining context which is normally degraded by full-page refreshes.

As always, I found Derek’s insights fascinating and I bet you will too.

[In case you hadn't heard, this year we asked Derek to build a brand-new, full-day seminar just for UIE's Web App Summit. His session, Designing Great Interactive Experiences for Everyone: Implementing Ajax and Accessibility will unleash a torrent of information about integrating Ajax best practices into your design workflow.

For people who are new to Ajax, he'll define the technologies and techniques involved, and describe what they're really good for and what they are not. For those who are using Ajax currently, Derek will delve into where to get your biggest wins with these interactions and what the best practices are for enhancing accessibility with Ajax. It's going to be a great session from one of our best-rated presenters. You won't want to miss it.]

We love to talk to Steve Mulder (from Molecular) and Riccardo La Rosa (from Isobar) about building out a Web 2.0 strategy and incorporating elements, such as social features and highly-interactive elements to the design.

Steve and Riccardo work with mainstream organizations, which may not be as familiar as, say, a Silicon Valley startup with what the state-of-the-art is for these types of features. In this interview, they told me about the solutions they worked on with Reebok (a sports apparel company) and HumanaOne (a direct-to-consumer health insurance company). We talked about the challenges they faced on these projects and what they needed to do to overcome them.

During the podcast, we discussed how to determine what features to build, how to tell if the features are working as expected, and how results changed over time. We talked about how starting small and iterating is most successful, but not an easy sell in many situations. You’ll want to listen to hear how they overcame this challenge and other Web 2.0 adventures they had.

Enjoy the podcast? Well, you can join Steve and Riccardo for their UIE Web App Summit full-day workshop, Web 2.0 Strategy and Design, and learn how to apply the elements of social media, openness, rich interfaces, and emerging digital interactions to your designs.

Over at Semantic Foundry, designer extraordinaire, Will Evans, has a wonderful essay explaining how he uses wireframing as both a problem setting and a problem solving approach.

I pick my primary audience and the one activity which allows them to solve one goal quickly, effortlessly, elegantly. In this case, the primary audience wants to easily find the best cruise, at the right time, for the right price. I don’t even look at the requirements document or competitive analysis until after I have sketched a couple of ideas either on paper or using Omnigraffle, which explores the primary goal. I’m not looking for solutions at this point because the first round of wireframes provide a space to engage in a dialogue with other designers, stakeholders, and the wireframes themselves.

It’s a great description of how Will tackles a design and he’s provided his work products for you to download.

Read Will’s essay: Shades of Gray: Wireframes as Thinking Device