Posted by Preet Jassi on Fri, May 22, 2009
The majority of my day is spent trying to figure out the best way to organize the content on a page. For Beanbills, the answer to that question is generally some sort of tabular layout as the content is often tabular data.
The inherent problem with tabular data is that it is extremely difficult integrate the actions that are being performed into the presentation of the data. One solution to this problem is to separate the data from the actions that are being performed on the data. A common example of this a toolbar.
A repercussion of separating data from content can be mass confusion. Simply put, people do not know what buttons to press to achieve their goals on a specific page. Additionally, users who do not understand many of the paradigms known by the technologically savvy are just as confused as a cat running after a laser pointer. Such confusion is not exclusive to situations where data is separated from actions, but is usually a result of increasing complexity of rich web applications. The adopted solution is generally FAQs, documentation, training videos, etc.. However, how many users will actually search in documentation to figure out how to use a page? People want answers, and they want them right away.
Enter The New Beanbills
When I was implementing our uploader, I adopted a similar visual style as Flickr’s uploader (because they were using YUI’s uploader as well). Flickr has a floating container to the right of the uploader (similar to how the Yahoo! Photos 3.0 uploader was designed) which is used for ads. I needed some text to fill that spot so I put a couple of tips about how to user the uploader.
Tips, now what?
The tips were a random thing, but they proved to be very powerful and visually appealing. There was just enough information to help the user out if they were stuck. But the upload page really didn’t have any actions integrated with the tips. This had to wait until the redesign of the scans page.
The scans page is a fairly complicated page. The user has the ability to organize their scans within a group by dragging and dropping; however, the user can also submit records for processing. Clearly, there is a lot of stuff going on. Initially, I just copied the style of the uploader and created a bunch of tips but I needed to perform some actions on the content. I decided to place the action links below the tips that explain what to do on the page so that the user can read the short blurb, and then see what buttons to press immediately. This was the first merger of tips and actions and the separation of content and actions. Furthermore, organizing your scans is completely different from submitting a group for capture. After I played around with radio buttons, tabs and other hacks, I finally decided to use the actual tips to place the users in the “organize” mode and the “submit” mode. The solution was surprisingly elegant and intuitive.
Putting it all together
Rich web applications are extremely complicated and often features are not used as they are not made salient. Even if your design is mediocre, you can really assist the user experience by providing small tips about how to accomplish common user goals on that specific page. This is also extremely useful when your pages require a certain workflow in order to progress smoothly.
Instead of randomly placing buttons or icons in various places on a page, if you place action elements under a tip with an appropriate heading, the user can refer to the tip if they are confused. Additionally, this allows for the user to develop conceptual modularity. Plus, it just looks good :).
In conclusion, do not be cryptic: let the user know how to do what they want to do. Additionally, leverage conceptual modularity and place action elements close to a tip that explains what to do!