More and more organizations are following a Lean model for creating products. This model has been popularized by LeanUX and the Lean Startup movements which emphasize build-test-learn in rapid iteration.

In this talk I get into the tension between focusing too much on reuse and components and not enough on experience & experimentation. I also talk about the powerful technology stack available in the open source world that fits so well in the lean movement — I call this the Lean Tech Stack. I gave this presentation today at the Open Web Camp 2012.

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.

I posted this on my personal blog and according to slideshare it is the top tweeted presentation from their site today (9/20/09). Been meaning to post it here for those who don’t follow my blog. The material contains some new examples but tracks with the book’s six principles.

I recently gave this talk at Microsoft for their UX team, at the Ruby Meetup Group at the CMU campus in the bay area and most recently at the Ajax Experience in Boston. Next time I will be giving this talk is in December at the Rich Web Experience (first week of December) in Orlando, Florida.

Smashing Magazine did an excellent roundup of pattern & screenshot gallery resources.

Check out their article 40+ Helpful Resources On User Interface Design Patterns.

One missing as of this writing is The Design of Sites book site. If you don’t have the book The Design of Sites I recommend it.

By Theresa Neil

Since the book focuses on rich interactions, I want to spend some time on Adobe Flex/AIR.

These tips are based on the best Flex resources I have found, and how you can use them to craft a great user experience. This is part 5 of 6:

* Play With It: 10 Explorers & Galleries
* Learn From the Best: 10 Great Flex Apps
* Learn From the Rest: 10 Great RIAs
* Stock Your Toolbox: 40+ Custom Flex Controls
* Review Usability Best Practices
* Avoid Common Mistakes: 10 Anti-Patterns

Review Usability Best Practices

Don’t forget the usability basics. Jakob Nielsen’s Ten Usability Heuristics are as relevant now as they were in 1999. I stress this because I looked at the Flex showcase recently, and it looks like many of the applications are not built with these best practices in mind.

1. Visibility of system status (Feedback)

The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.

1.0 BaseCamp by 37signals
The upload button is enabled, until clicked. Then it is replaced with a progress indicator until the file has finished uploading

1.1 Picnik
Progress message and indicator shows while the application loads

1.2 Tick
A feedback message is displayed when an action is performed

1.3 Windows Live Account
Password strength is shown as the password is entered

2. Match between system and the real world (METAPHOR)

The system should speak the users’ language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.

2.0 iTunes
Organized as a library that contains your media library: music, movies, shows, audibooks. Beneath the Library is the Store where you can buy more media to put in your Library.

2.1 Mindomo
The branches and hierarchy of a mind map can be easily reorganized visually in a non-linear manner. An outline would never work, but this matches the paradigm exactly.

3. User control and freedom (NAVIGATION)

Users often choose system functions by mistake and will need a clearly marked “emergency exit” to leave the unwanted state without having to go through an extended dialogue. Supports undo and redo and a clear way to navigate.

3.0 CollabFinder
Search is easy to open, enter info, execute or cancel.

3.1 Wufoo
Clearly marks where the person is and where they can go by showing the selection in each menu

3.2 Pages (Apple’s Word Processing Product)
Cell editing shows row and column ids, and the cells used in the equation. The equation can be saved or canceled.

3.3 Balsamiq
Undo and Redo buttons are available in the toolbar, and can also be accessed with the standard keyboard shortcuts

4. Consistency and standards (CONSISTENCY)

Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.

4.0 Gmail
When Gmail was designed, they based the organizational folders on the same ones used in client email applications: Inbox, Drafts, Sent Mail.

4.1 Microsoft Office
Word, Excel, and PowerPoint all use the same style toolbar with the same primary menu options: Home, Insert, Page Layout… Consistency results in efficiency and perceived intuitiveness.

5. Error prevention (PREVENTION)

Even better than good error messages is a careful design, which prevents a problem from occurring in the first place.

5.0 Yammer
Disables the update button after it is clicked, so the person cannot update the post twice by accident

5.1 Example from “Web form Design:Filling in the Blanks” by Luke W.
Make the primary action prominent with a larger click area. Cancel and secondary actions are just shown as links

5.2 Google Auto Recommend
The auto recommend feature cuts down on mis-spellings

5.2 Wikpedia
Auto focus on input prevents a common source of frustration, typing only to realize nothing is displayed because the field did not have focus

6. Recognition rather than recall (MEMORY)

Minimize the user’s memory load. Make objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.

6.0 Quanta IDE
Type ahead for coding in a development environment

6.1 Keynote
Previews the fonts you can pick from, instead of just the font name

7. Flexibility and efficiency of use (EFFICIENCY)

Accelerators — unseen by the novice user — may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.

7.0 OmniFocus
List of keyboard shortcuts and accelerators

7.1 Numbers- Apple’s Spreadsheet product
Previews common function results on the left when a column is selected, more efficient that clicking on an action in the toolbar

8. Aesthetic and minimalist design (DESIGN)

Dialogues should not contain information, which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility. Visual layout should respect the principles of contrast, repetition, alignment, and proximity.

8.0 Kontain
Kontain’ search menu exemplifies the four principles of visual design:
Contrast: bold text is used for the two labels in the search
Repetition: the orange, blue, and green text match the media types
Alignment : strong left alignment of text, right aligned drop down
Proximity: a light rule is used to separate tags from the other options

8.1 Harvest
Sufficient padding and spacing keep this timesheet from being a visual nightmare. Header and footer rows, as well as the summary column use subtly different colors to indicate they are distinct from the content

9. Help users recognize, diagnose, and recover from errors (RECOVERY)

Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.

9.0 Digg
Provides immediate feedback with specific instructions

9.1 Humorous ‘ Page Not Found’ Error
Uses a funny image and copy, but provides viable alternatives (article listings and blog link) and a course of action (report it)

10. Help and documentation (Help)

Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user’s task, list concrete steps to be carried out, and not be too large.

10.0 Picnik
Contextual help (this is an example of help in the ‘Collages’ module) tips in Picnik are clear and easy to navigate

10.1 GoodBarry
Embedded videos can be used to showcase features as well as get people started using the product

10.2 Zenoss
Help tips are displayed on hover, answering the most likely questions about a field or instructions

10.3 BaseCamp by 37signals
Help opens a new browser window/tab with a full set of help resources: search, FAQ, video tutorials, customer forums

By Theresa Neil

Since the book focuses on rich interactions, I want to spend some time on Adobe Flex/AIR.

These tips are based on the best Flex resources I have found, and how you can use them to craft a great user experience. This is part 2 of 6:

• Play With It: 10 Explorers & Galleries
• Learn From the Best: 10 Great Flex Apps
• Learn From the Rest: 10 Great RIAs
• Stock Your Toolbox: The Essential Controls
• Review Best Practices for Designing a RIA
• Avoid Common Mistakes: 10 Anti-Patterns

Learn from the Best: 10 Great Flex Apps

Take a look at some of the best Flex applications on the market. How did I decide these are the best? I reviewed numerous applications, basing the evaluations on Jakob Nielsen’s 10 Principles for User Interface Design:

Feedback — Metaphor — Navigation — Consistency — Prevention — Recognition — Efficiency — Design — Recovery — Help

I realize these guidelines are a bit old (from 1990!)- but all applications should meet these guidelines at a minimum. The applications listed below also embody our 6 Principles for Rich Interaction:

Make it Direct — Keep it Lightweight — Stay on the Page — Provide an Invitation — Use Transitions — React Immediately

01. Picnik

Free version available

02. Balsamiq

Trial version available

03. Sprout Builder

Demo version available.

04. Campaign Monitor by eyeblaster

Commercial application- no demo available. Awarded Top 10 User Interfaces of 2008 by Jakob Nielsen. Report available for purchase.

05. ConceptShare

Free account available.

06. Weight Watchers eTools

Commercial application- no demo available.

07. Small Worlds

Free account available

08. Buzzword

Free account available

09. Whitestone Cheese

Publicly available at www.whitestonecheese.co.nz

10. Kuler

Publicly available at kuler.adobe.com

11. SumoPaint

Free account available

Close Contenders

These apps were really close, but missed a couple of key principles, or are still maturing.

Klok

Free personal download available

Nice time tracking product in AIR- nailed the metaphor, but haven’t Made it Direct enough (yet). I instinctively want to click in my calendar to start logging my time against a certain project. Instead I have to navigate to Project View, then into Time Entries. And spinners for entering start and stop times are inefficient.

I must say I love the Weekly Time Sheet though, and the fact I can drag it to my desktop! I think this product will mature very nicely.

Tour Tracker

Up for a limited time at Amgen Tour of California.

Looks amazing. The metaphor is perfect- big map showing the course and stages- but lost points on some basic principles. Specifically Feedback- I click and click to “watch a rider” on the home page, nothing happens, so I keep clicking. And Design- a black background might demo well, but white and blue tex, all caps, sure is hard on the eyes.

Google Finance Dashboard

Publicly available at BrightPoint Consulting

This is a really nice dashboard showing what can be done with Flex & Degrafa. I can’t wait to see how they finish it out. Also check out Tom Gonzale’s blog for more amazing data visualizations with Flex and Degrafa.

htmlText Editor 2008

Publicly available at www.theflexguy.com

This is a neat little one screen application that absolutely Stays in the Page and Makes it Direct. However, the Filter Tags feature is non-standard in more than one way: “If you remove tags and see that they really were needed, you can just uncheck the box and press Filter tags again.” I know the space is limited but Undo and Redo buttons would make more sense.

Agile Agenda

Free trial download available

Project management tool in AIR. Missed the Keep it Direct, and Stay in the Page principles. Too many dialogs where simple inline editing would have sufficed. Need better icons, or text with the icons. Usability aside, the product’s functionality seems to be quite robust and well worth the price.

Comment with your favorite Flex applications

I realize I have only skimmed the surface here, please comment with a link to the best Flex UIs you know of.

By Theresa Neil

Since the book focuses on rich interactions, I wanted to spend some time on Adobe Flex/AIR.

After designing several large enterprise applications for diverse clients and industries, I’ve noticed some barriers to crafting a great experience in Flex. I think these barriers arise from the relative newness of the technology (and RIAs in general), the initial focus on development over design, and the confidence that Flex can provide a great UX out of the box. But it takes a bit more to make a Flex app really shine. Fortunately, the Flex community is chock-full of talented and motivated developers who contribute amazing resources.

These tips are based on the best Flex resources I have found, and how you can use them to craft a great Flex UX. This is part 1 of 6:

• Play With It: 10 Explorers
• Learn From the Best: 10 Great Flex Apps
• Learn From the Rest: 10 Great RIAs
• Stock Your Toolbox: Essential Resources
• Review Best Practices for Designing a RIA
• Avoid Common Mistakes: 10 Anti-Patterns

Play With It: 10 Explorers

I can’t think of a better way to get your feet wet than to play with these explorers.

01. Tour de Flex

02. Component Explorer

03. Style Explorer

04. Regular Expression Explorer

By Ryan Swanson

05. Charts Explorer

By Ely Greenfield

06. Efflex Effects Explorer

By Stephen Downs

07. Filter Explorer

08. Primitive Objects Explorer

09. Data Visualization Explorer

10. Button Skin Explorer

Comment with your favorite Flex explorer

I realize I have only skimmed the surface here, please comment with a link to your favorite explorer or gallery for Flex 3.

Lou Rosenfeld interviewed me on the topic “Bringing Design to Life: What Every Designer Should Know About Interface Engineering”. This is a really interesting subject and gets to the heart of how to get engineering and design teams to work together better.

The interview gives you some of the points I will cover in my upcoming webinar on the same topic (Feb. 26th, 10AM PST/1PM EST).

Also there is a short video presentation (about 7 minutes) that provides a sneak peek into the webinar presentation.

Use code RMWBNR for a 20% discount off your ticket purchase.

I just uploaded around 390 screencasts to the Flickr Designing Web Interfaces photostream. These are movie captures of various sites illustrating patterns from each chapter. This makes a nice supplement to the hundreds of figures that are already on the site.

The screencasts are in the DWI: Screencasts collection and organized into Sets that represent each chapter of the book. For example if you are looking for examples for Chapter 13, Lookup Patterns then the Set Chapter 13 (SC) – Lookup Patterns contains 70 screencasts illustrating various lookup patterns.

I presented Designing Web Interfaces on the O’Reilly Webcast today. Almost 1400 people signed up and the actual attendance hit 862. We set the record for an O’Reilly webcast And we had overwhelmingly positive responses to the talk. If you liked the talk & the material then I think you will enjoy the book.

If you did not hear the webcast, check out the slideshare presentation below. It will give you the best flavor for what our book is about (keep in mind much more is in the book with lots more details and guidelines).

The audio will be available in a week or so. Look for a post here when I get the audio to share.

**UPDATE. The actual video & audio of the screencast can be seen on YouTube. Watch it in high resolution.