Enhancing the user experience in our Web Applications Chris Cariglia

Optimizing the user experience Outline Opportunities for richness Anti-patterns Web App Summit 2008 Progressive enhancements

• Organized by User Interface Engineering (UIE) Web App Summit 2008 • 3-day event reviewing the best practices in today’s top web sites • Reviewing what makes a great web application Web App Summit 2008

Optimizing the user experience

• Web Applications (Web Apps) are where Business Rules meet the User Experience Optimize the user experience • The more rules in place, the more difficult a user’s experience can be • Need the right rule at the right time at the right place Optimizing the user experience

The Kano model Excitement Generators Performance Payoff Basic Expectations Quality & Capability User Satisfaction Optimizing the user experience

The Kano model Basic Expectations Quality & Capability User Satisfaction Optimizing the user experience

• Has to work properly Basic expectations for Web Apps • Need to smooth out any “rough edges” • Transactions are processed at the time of submit • Business rules shouldn’t deteriorate the process Optimizing the user experience

The Kano model Performance Payoff Basic Expectations Quality & Capability User Satisfaction Optimizing the user experience

• Real person support Performance payoffs for Web Apps • On-line “helping hand” Optimizing the user experience

Performance payoffs for Web Apps Optimizing the user experience

The Kano model Excitement Generators Performance Payoff Basic Expectations Quality & Capability User Satisfaction Optimizing the user experience

• Going above and beyond Excitement Generators for Web Apps Optimizing the user experience

Excitement Generators for Web Apps Findtape.com Optimizing the user experience

Excitement Generators for Web Apps Optimizing the user experience

The Kano model Excitement Generators Performance Payoff Basic Expectations Quality & Capability User Satisfaction Optimizing the user experience Time

It’s about the experience, not the application Optimizing the User Experience - Summary Don’t let the business rules take away from the experience Try to use the experience to help define the rules… Focus on where delight can be introduced – how to go above and beyond The collision of business and design Optimizing the user experience

It’s about the experience, not the application

Don’t let the business rules take away from the experience

Try to use the experience to help define the rules…

Focus on where delight can be introduced – how to go above and beyond

The collision of business and design

Opportunities for richness

What are common activities that could be easier? Searching (e.g., auto-suggest) Avoiding errors (asynchronous validation - registration) Transactions Opportunities for richness Where do users want more flexibility or power? Selection tools “ Configurators” Dashboards Opportunities for richness

What are common activities that could be easier?

Searching (e.g., auto-suggest)

Avoiding errors (asynchronous validation - registration)

Transactions

Where do users want more flexibility or power?

Selection tools

“ Configurators”

Dashboards

Finding Stuff: the early years Opportunities for richness

Finding Stuff: adolescence Opportunities for richness

wine.molecular.com Finding Stuff: Today Google Finance Opportunities for richness

wine.molecular.com

Google Finance

Giving the user more control Opportunities for richness Backpack by 37 Signals Sign-up Create List

Backpack by 37 Signals

Sign-up Create List

Define the problem and review what technology can be used in the solution Opportunities for richness - Summary Customers don’t care what technology was used as long as the process works Provide instant validation and feedback to the user Optimize the user experience

Define the problem and review what technology can be used in the solution

Customers don’t care what technology was used as long as the process works

Provide instant validation and feedback to the user

Anti-patterns

What are anti-patterns? “ Anti-patterns, also called pitfalls, are classes of commonly-reinvented bad solutions to problems. They are studied as a category so they can be avoided in the future, and so instances of them may be recognized when investigating nonworking systems.” - Wikipedia, Anti-Pattern. The traps of bad design: anti-patterns Interaction design anti-patterns Like the software anti-pattern counterparts, the following anti-patterns are common pitfalls to avoid. Anti-Patterns

What are anti-patterns?

“ Anti-patterns, also called pitfalls, are classes of commonly-reinvented bad solutions to problems. They are studied as a category so they can be avoided in the future, and so instances of them may be recognized when investigating nonworking systems.” - Wikipedia, Anti-Pattern.

Interaction design anti-patterns

Like the software anti-pattern counterparts, the following anti-patterns are common pitfalls to avoid.

Requiring the user to go down a level or two, perform an operation, come back to the top and then have to go back down again. Name comes from hopping up and down through the site. Pogo stick navigation Anti-Patterns

Pogo stick navigation Anti-Patterns

Pogo stick navigation Anti-Patterns

Pogo stick navigation Anti-Patterns Netflix

Netflix

Draw flow arrows between pages to catch the zig-zag bouncing from page to page To avoid pogo effect: Use in-context tools to bring actions into the current page Use hover details to reveal information in context (with a slight delay) Use overlays for encapsulating an alternate navigation path to allow temporary exploration without losing the original context of navigation Pogo stick – a review Anti-Patterns

Draw flow arrows between pages to catch the zig-zag bouncing from page to page

To avoid pogo effect:

Use in-context tools to bring actions into the current page

Use hover details to reveal information in context (with a slight delay)

Use overlays for encapsulating an alternate navigation path to allow temporary exploration without losing the original context of navigation

Making key interaction points too small increases the likelihood that users will be frustrated with the interface. Tiny targets Anti-Patterns Fitt’s law: The time to acquire a target is a function of the distance to and size of the target.

Tiny targets Anti-Patterns 10 x 10 pixels can be hard to get to if there are several on the screen.

Activation targets and important commands need to be large enough, visually distinct and in proximity to operation. Strategies for Tiny Targets Anti-Patterns Use in-context tools to support proximity. Use “Call to Action” style buttons for most important operations.

Activation targets and important commands need to be large enough, visually distinct and in proximity to operation.

Use in-context tools to support proximity.

Use “Call to Action” style buttons for most important operations.

The practice of throwing up unnecessary windows or boxes explaining the obvious. Windows aplenty Anti-Patterns

Anti-Patterns - Summary big ball of mud. meandering way. borg idiom. tiny targets . mystery meat. buried treasure. hover and cover. pogo stick navigation . novel notions. against the flow. metaphor mismatch. jabberwocky. double duty. linkitus. blind type. windows aplenty . animation gone wild. misguided misdirections. unmarked hazards. missed moments. missing scene. one at a time. non-symmetrical actions. Anti-Patterns

Progressive enhancements

Short release schedules Progressive enhancements All changes are based on data Small changes - often Progressive Enhancements

Short release schedules

All changes are based on data

Small changes - often

Use quick paper mock-ups Validation Use the “painted door” test Sanity check the data Progressive Enhancements Prod tests will yield the most accurate results than any test

Use quick paper mock-ups

Use the “painted door” test

Sanity check the data

Prod tests will yield the most accurate results than any test

Flush-out usability issues early Prototyping Something that can potentially be used in prod More expensive than validation Progressive Enhancements

Flush-out usability issues early

Something that can potentially be used in prod

More expensive than validation

Qualitative User testing User growth sessions Quantitative Progressive Enhancements

Qualitative

User growth sessions

Quantitative

Ideas come from anywhere an everywhere Culture Cultivate experimentation Plays a huge role in the end experience Progressive Enhancements The HIPPO isn't always right Understanding the user is a good thing

Ideas come from anywhere an everywhere

Cultivate experimentation

Plays a huge role in the end experience

The HIPPO isn't always right

Understanding the user is a good thing

Conclusion

Increasing customer transactions Online retailers can win customers by maximizing usability rather than lowering prices ( consumer watchdog site “Which?” – March 20, 2008 )

Online retailers can win customers by maximizing usability rather than lowering prices ( consumer watchdog site “Which?” – March 20, 2008 )

Define the problem and review what technology can be used in the solution Conclusion Decisions need to be based on data, not just a hunch It’s not about the application but the experience The industry changes quickly – expect it!

Define the problem and review what technology can be used in the solution

Decisions need to be based on data, not just a hunch

It’s not about the application but the experience

The industry changes quickly – expect it!