Archives For rich internet applications

When I started as an independent consultant in 2005, I had 2 clients. Seven years later I have a successful design group built entirely on referrals. My first 2 clients, both start-ups, referred me to other start-ups who in turn referred me to more companies, eventually allowing me to build a portfolio that includes Adobe, eBay, Fidelity, Salesforce and many others.

Unfortunately we can’t help every start-up that contacts us now, but we do accept 3-4 each year. Our Sponsored Start-Up plan is geared to help start-ups launch with a great user experience. We work closely with the team on their UX strategy, from contextual research through development and launch, at a reduced rate and generous payment terms.

Obaid Khawaja, a Carnegie Melon graduate and former program manager at Microsoft, presented his plan to us in early 2011. He had the magic formula to help eBay sellers increase sales, but the existing interface wasn’t intuitive. We created a simple UX that focused on showing sellers which listing had problems, and offered tips for improvement.

The Boost BI beta was well received and brought in a number of clients including BMW and Littlewoods. And just as importantly for a start-up, it generated valuable feedback.

It turns out customers were thrilled to get insights for improving their listings. But they wanted Boost BI to go one step further and allow them to take action within the application. In V1 (under development) we’ve taken the UX to the next level. V1 makes it easy for sellers to address their most critical (revenue and volume wise) listings problems, to significantly increase their impressions and conversions.

We wish Obaid and his team at Boost BI the best, and can’t wait to see what happens next!

We’re proud to have worked with Cloudera’s team and our friends at Projekt202 to design Cloudera Manager, the industry’s first end-to-end management application for Apache Hadoop. Read more on Tech Crunch.

Congratulations Cloudera on the release and the great press so far. Here’s my favorite quote:

“We were treated to demos of Cloudera Enterprise 3.7 at Hadoop World, and it really blew us away with its functionality for total lifecycle management of Hadoop Clusters. That lifecycle management includes planning, creation of clusters, management of their health, control of access, logging/auditing and many other tools, all put together in a fantastic interface.”

-Bob Gurley, SYS-CON Media.

Our Patterns in Print

March 31, 2011 — 1 Comment

After our book release in January 2009, we posted an article on 12 Standard Screen Patterns. It went viral with hundreds of thousands of readers. Two years later, it still gets 1,000+ readers each week.

In 2010 we updated the screen patterns, including a few more and all new examples: RIA Screen Layouts. With more than 40k views on Slideshare, it seems to be pretty popular

And now they are in print too! Three books this year included our screen patterns as the way to solve common UI problems:

New article on InsideRIA today:
Top Ajax Technologies and RIA Frameworks
I posted a fairly comprehensive list of RIA frameworks and Ajax technologies rated on:

  • Completeness of their UI control set, based on the list of essential controls
  • Usability of the controls
  • Aesthetics, based on the default visual design

I also included some examples of applications built with the top frameworks and technologies:

Check out this excellent article by Janko: Ultimate guide to table UI patterns. It is full of great examples and suggestions.

After reading it, I just had to add three more scenarios:

1. Inline Editing


Quicken Online allows simple editing with a pull down for more advanced editing.



Mint.com does the same.

The Ajax framework Ext JS and Ext for GWT offers a pre-built Grid row editor component. Try out the demo. This would work well for tables that are primarily read-only but might need to be edited. This design is not for heavy data entry.


For heavy data entry, use a design like Harvest. They offer a simple grid layout that keeps a live total and provides a Save button for saving all the entries once the person is done (it also auto saves periodically).


Google Docs is an online spreadsheet application with inline editing. It also has a Save button for the whole spreadsheet, as opposed to per row updates.

Inline Editing Best Practices

  • Implement tab navigation when you create a table with inline editing.
  • Consider how to handle errors, such as highlighting rows or cells with errors in a way that is easy for a person to correct the issues. Don’t break the person’s data entry flow by locking them in a cell with an error, simply highlight the cell with the problem and provide a way for them to return to it later to fix it.
  • Offer undo and redo functionality.


Swivel is an app that acts a lot like Excel and provides cell specific error messages.

2. Super Wide Tables

I received an email last week asking me about super wide tables. The email said “I’ve come to the conclusion that breaking them up into smaller chunks is maybe the best way to go, rather than going with a horizontal scroll-bar that goes on for days.”

Based on a lot of design work Bill Scott and I did for the airline industry, I would instead propose instead applying these principles:

  • Organize the most important columns to the left.
  • Experiment with frozen/fixed columns, so if the person does need to horizontally scroll, they can keep context.
  • Only show a set number of columns in the default view (so there is no horizontal scrolling in the default view) and offer a Customize option so the person can choose to hide or show more columns. ExtJs has this built into the column dropdown; I usually add a customize button to the table toolbar with Hide/Show column functionality.
  • Offer resizing of columns.
  • Offer rearranging of columns.
  • If you have a table with some columns editable and other read-only, group editable with editable, read-only with read only.
  • Don’t abbreviate column titles, reduce spacing or padding, or drop to a smaller font to fit your table on the screen. That won’t help anyone use your app.
  • Try out fat rows like this example from Survs. Instead of having a column for title, created by, created on, last updated on, all of that information is in the second column. Good visual design can help organize the information in a more meaningful way which makes your data easier to scan.
  • Use a summary row to chunk the data if appropriate. I know this won’t make your table any narrower, but it might make it more readable.
  • Consider putting a visual summary, or roll-up, above the table so the person can make sense of the data visually before diving into a huge table of numbers.

  • Discover Spend Analyzer offer a dual purpose summary and filter above the rows of transaions. Play with the demo to try it out.

    Swivel example

3. In-column Filtering

The example included in Janko’s article has dynamic filters above the table (dynamic meaning, when you make a selection, it dynamically updates the table content- without an extra submit action).

In some web applications, like heavy productivity applications or enterprise apps, in-column filtering is a powerful option to offer. It is pretty easy to implement with Flex or Ajax. Just validate the need for this type of functionality with your customers; it could be overkill for people who just need simple filtering.

Example from Zenoss Open Source Server and Network Monitoring

Try this at Telerik RadControls. This example requires a click on the filter button in the column, and has the option for selecting a specific way to apply the filter.

Play with SmartClientRIA, where the implementation ( they blank out the whole content area while filtering) makes it seem slow.

And a Flex example, where clicking on the filter icon lets you search in that specific column, and then you can further refine by filtering other columns.

Make sure you take a look at Janko’s original article: Ultimate guide to table UI patterns, and another informative post 15 Tips for Designing Terrific Tables.

RIA Screen Layouts

February 11, 2010 — Leave a comment

Last year I posted an article on 12 Standard Screen Patterns. It has been incredibly popular so I updated it for 2010. The full article is at UX Magazine. Check out the article and take a look at the 15 standard layouts and examples from more than 80 current RIAs:

Here’s my talk from Dec 11 at the Adobe Austin Users Group. This is a beginners introduction to designing for Flex, although there are some goodies for experienced designers too.