Archives For Ajax Components

Harvest, the time tracking and invoicing tool we use, just added a new filter mechanism to their report generator. While I appreciate the additional functionality, I was most impressed with their multi-select combobox. It looks like a normal text field, but once the field has focus you can select any option and it will be added into the field, click again and you can select another option, building up any number of options. The field just gets larger (more rows are added) when you add more options than can be displayed in a single row.

It is equally easy to remove items from the field by clicking the little ‘x’ next to each option.

Does anyone know if there is a JQuery control for this? That would be awesome. A Flex control like this would be nice too, just in case there are any motivated developers reading this (wink, wink)…

Update: Rajesh Rajappan provided a link to the JQuery control: http://loopj.com/jquery-tokeninput/. It has autocomplete with multi selection.

Update again: Harvest released this control called “Chosen’, it is available here: http://harvesthq.github.com/chosen/

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.

Look for the upcoming post (Thursday, Dec 10) in InsideRIA.com about 28 Rich Data Visualization Tools. I’ve included the first three to whet your appetite.

Ajax.org

Ajax.org Platform is a pure javascript application framework for creating real-time collaborative applications that run in the browser.

AjaxOrg.png

AnyChart

AnyChart is a flexible Flash based solution that allows you to create interactive and great looking flash charts.

Axiis

Axiis is a Data Visualization Framework for Flex. It has been designed to be a concise, expressive, and modular framework that let developers and designers create compelling data visualization solutions.

Also, take a look at the nice window-in-window design on the saturnboy blog.

Presented on Nov 3, 2009 at Øredev in Malmo, Sweden.

What is the fastest way to get from a product idea to a rich internet application? By breaking down the communication barriers between designers and developers.

This talk takes a quick look at how to build a shared vocabulary and use prototyping to bypass extensive wireframes and development specs.

Take a look at 5 simple and effective prototyping tools:

  • Balsamiq Mock-ups + Nakpee
  • Any wireframes + Protoscript
  • Prototcasting (using click-throughs and screencasts to convey requirements)
  • Atlas and other development environments + visual layout editors

.

Fluency and Rosenfeld Media sponsored the first DelveUI, A 2 Day Masterclass on Designing User (Web) Interfaces last week at the NYU Poly Campus in Brooklyn.

I had an opportunity to speak about my favorite topic: design patterns and principles for rich applications. The talk is titled Designing Rich Applications- and illustrates the need for richness at four levels:

  • application structure
  • screen layout
  • selecting rich UI controls
  • interactions


I’m working on a nifty little flip book that has all of the application patterns, screen patterns, rich UI controls and interaction patterns. All the patterns are on index cards and you can carry it into design sessions- and flip through it for inspiration- or to find a certain pattern. tangible-ria-patterns

ria-flip-book1

Let me know if you think this would be useful.

This is the third article in a three part series on patterns and principles for RIA design.

      Standard Screen Patterns: 12 patterns w/100 examples
      Essential Controls: 30 controls for RIA design and development
      Common Component Patterns: 15 patterns and examples

Odds are good if you are designing a enterprise software or a productivity web application, you’ll need a number of these components. Don’t spend time and effort on (re)designing these ancillary features- try these solutions instead.

15_common_components2

01. Add Another

component_add_another_wufoo1
Wufoo (button)

component_add_another_gmail1
Gmail (link)

Requirement: Need to offer multiple input fields for the same thing, but unsure how many the user may need
Example: Add attachments, enter phone numbers, upload photos…
Description: The “add another” link or button should be in proximity to the field, and the remove option is shown an attachment is added, and only one “add another” link is shown at a time. No need to show the remove button until at least one entry is shown.

02. Add/Manage Tags

component_add_tags_highrise
Highrise (inline edit)

component_add_tags_mint
Mint (dialog)

Requirement: Need a way to add non-structured meta data to an object that can later be searched
Example: While adding recruits to a CRM system, the recruiter wants to note applicants’ interests and hobbies
Description: Place the tags in close proximity to the object being taggged. Allow for direct adding of additional tags and editing. You can take the 37signals approach and let users type in any tags they want- running the risk of duplicate, misspelled or overlapping concept tags. Or use Mint’s approach and let users select from the existing list of tags, and/or add new ones.

03. Add/Edit or Select from Existing

componenet_add_edit_select
Highrise

Requirement: Need to pick from an existing option, add a new option, or edit an existing option
Example: Recording receipts for household expenses, and there is not a category for pet/vet bills. Add a new category for “pets”, which will now show up as an option in the list
Description: Place the option for “add new…” at the bottom of the options. Open a new dialog or light weight layer to add the new option. Place edit to the right of the list box, edit can be a new screen or dialog for editing all the options.

04. Advanced Filter

component_advanced_search1
Mission 360 for The Leukemia & Lymphoma Society

Requirement: Need to refine the data set based on specified criteria
Example: In a bug tracking system, a developer needs to see all bugs assigned to him, in the last 24 hours, related to the production system, containing the term “feedback”
Description: Provide a dynamic filter field and offer an advanced filter option, where the user can specify criteria for refining the data set. Allow the criteria to be saved (usually as a ‘view’), that can be accessed again. Note* Luke W. has a great article describing multiple techniques for refining data tables.

05. Build a List (aka Accumulator)

component_build_a_list_linkedin
LinkedIn

Requirement:Need to create a list from an existing set of options
Example: Invite some of your friends from your existing list of webmail contacts, or build a list of hot prospects for a sales campaign
Description: When a user needs to select items from separate sets of search results or other large, unwieldy data sets- let them manipulate the left (search, sort, navigate or filter), and add to the right.

06. Build an Expression (aka Predicate Editor)

component_build_expression
Wufoo

build_expression
Mac OS predicate editor inspired web versions of this component

Requirement: Need to define a set of conditions that build on each other.
Example: Complex search or building a report filter, or building a mathematical function
Description: Design it so the expression can be read, left to right, top to bottom. Each line can be edited, removed, or deleted, and possibly rearranged in order.

07. Contextual Toolbar

component_group_tools_picnik
Picnik

Requirement: Need to perform an action that has multiple input parameters
Example: Analyst needs to apply a discount to all the rows in a table, clicks the ‘discount’ tool. The discount options: discount percent [10%] or flat rate discount [$0.00], are then provided.
Description: Group the actions in a toolbar, and as one is selected, disclose the input parameters. Offer a live preview if applicable.

08. Customizable Data Grid

component_configure_datagri
Flexigrid demo

Requirement: Need robust data grid from viewing, editing and manipulating data
Example: A CRM system with contacts displayed in a table/data grid
Description: Offer simple and advanced filtering, ability to directly resize columns, ability to directly rearrange columns, hide/show columns, sorting. If also providing editing, provide a toolbar that includes undo and redo actions.

09. Drag & Drop Reorder

component_drag_drop_list
Basecamp

component_drag_drop_reorder_cogmap
Cogmap

Requirement: Need to reorder a text list, visual map, or tree because the order is indicative of priority or hierarchical relationship
Example: To-do list, org chart, tree
Description: Make sure to follow the interaction principles for all the states of drag and drop management, most importantly providing a visual cue the list can be rearranged, like the drag handles in the examples. Refer to Bill’s Interesting Moments Grid for implementing the interaction properly.

10. Full Screen

component_fullscreen_picnik
Picnik

component_fullscreen_radedi1
RadEditor Demo

Requirement: Need more real estate for core functionality
Example:Editing a photo, designing a work flow, navigating a map
Description: Place the toggle in the top left corner (make sure it remains in the same spot and visible even in the full screen mode). The branding and top level navigation can be hidden in this mode. Don’t add any more elements into the full screen mode- just enlarge the workspace.

11. Graph Drill Down

component_graph_hover_wesabe
Wesabe

component_graph_hover_dundas
Dundas Charts

Requirement: Need to show a summary view and allow a quick and efficient drill down to view more details, instead of navigating deeper into the graph
Example: A specific datapoint has multiple sets of information available. The main graph could show sales volume by sales person over time, and the hover detail breaks it down by new versus existing clients
Description: Provide a visual indicator (like a dot) that hover details are available. Use a non-modal layer to display the next level of data.

12. Live Preview

component_live_preview_fidelity
Fidelity MyPlan

component_live_preview_mint1
Mint Savings Finder

Requirement: Need provide live feedback on changing criteria
Example: Graphic designer altering the hue of a photo needs to see the effect as he adjust the value
Description: Provide easy to manipulate controls, and an “apply” and “cancel” options, or “revert” feature.

13. Slide Down

component_slide_down_retail
RetailMeNot.com (inline)

component_slide_down_weightwatchers
Weight Watchers (overlay)

Requirement: Need to show more details, or input details
Example: Reading an article in a list of articles, scan the first paragraph and want to read more, or read the comments.
Description: Expand inline or overlay without leaving the page or opening a new window/dialog. Use smooth transitions and a fixed height scroll window like RetailMeNot. Provide the close link in the same spot.

14. Split a Transaction

component_split_transaction
Mint

Requirement: Need to allocate a single item across multiple categroies
Example: Dividing a transaction (ex. allocating a 50% of a donation to one recipient, and 50% to another recipient, or $2.00 as a fee, and $200.00 as cash withdraw)
Description: Split button placed unobtrusively in the transaction detail pane, could also be a tool in the table toolbar, enabled when a row is selected. Opens a dialog allowing the user to re-allocate the data as needed.

15. Switch To

switch_to1
Basecamp

switch_to_zoho
Zoho

Requirement: Need to infrequently navigate out of one module into another without returning to a control panel, dashboard or dock
Example: Working in one project, finish and need to work on another one
Description: Make the switch less visually prominent than the main navigation, but still easily accessible (top right or left, above the main menu).