Live Search or Query Suggestions?

In the proposed concepts for a new GUI we showed a keyword suggestions feature, similar to what many other applications and sites use nowadays. You type the first couple of characters and a little flyout menu starts suggesting keywords.

Until now I assumed that these keywords suggestions should be based on a mix of popularity, recency and bookmarks. I even asked you if you liked those. This is what you said:

Query suggestions based on bookmarks
Very unimportant 0.00%
Unimportant 12.50%
Neutral 37.50%
Important 37.50%
Very important 12.50%

Query suggestions based on recent searches
Very unimportant 0.00%
Unimportant 4.35%
Neutral 34.78%
Important 52.17%
Very important 8.70%

Query suggestions based on frequency / popularity
Very unimportant 0.00%
Unimportant 8.70%
Neutral 30.43%
Important 52.17%
Very important 8.70%

[Full survey result details here...]

Compared to your appreciation for other features, you weren´t that excited about it apparently. Now maybe I know why. During the World Conference Last weekend a business partner showed us a customized screen using a sort of search suggestion based on live search. So while typing it actually searches in real time. Pretty impressive. I thought this would be too slow. Perhaps with 1 million records it would be. But look at this demo of a dhtmlx-grid (Select Loading from big Datasets > 50,000 records in grid from the tree menu on the left and tick the Enable Autosearch checkbox)...and start typing away. This rocks!

Having seen this, I can´t suppress my enthusiasm for live search suggestions but we need to make sure this is what you want. Compared to search QUERY suggestions. The latter is used in consumer applications, such as iTunes or Google Suggest. Music stores use them all the time, as what the masses want, is probably what you want (typing "b" in iTunes will inevitably show Britney Spears and Beyoncé, whether you like them or not).

So what will it be, dear user? Query suggestions or Live Search? Share your thoughts on the UX Lab. Tightly related is the discussion about Endless Scrolling versus Pagination. Give us your 2 cents here as well please.

Cheers, Rob

It's Time for Form Design

We've been blatantly ignoring them in the first redesign excercise but now it's time to give them the attention they deserve: Forms

The current form (we are talking about the view you get when you edit a record) is far from ideal. The main points that need to be addressed are:

• Awkward field length variations
• Color coding only for mandatory fields: this is not accessible
• Label wrapping for long labels
• Grouping / clustering possibilities only limited
• No hide/show possibilties on user level (directly via the GUI)

A lot of research has been done already on form design, although most of it focuses on web form design, e.g. for a registration form but most of the heuristics are applicable for application forms as well.

Two column design: Although in most cases not recommended, I think we should keep this layout, as OB ERP has a lot of fields and a lot of horizontal space. Using a one column layout would be a waste of real estate.

Jakob Nielsen did a bit of research on forms versus apps and although outdated, it still offers some great takeaways:

• In-context help: Having this information on the main screen is preferable because users dislike going off to separate help screens
• Eliminating irrelevant steps: Users never need to see questions and options that don't apply to them.
• Customizability: (this example is really spot-on!) For example, an expense reporting application might require users to enter driving distances to get reimbursement for personal automobile use. If an employee often travels the same routes (say, to the airport or an important customer site), the application could provide one-click access to frequently used distances and list them by name (say, "office to JFK").

Luke Wroblewski wrote a great article on form layout. The most important conclusions here are:

• Vertical alignment of labels is best when the time to complete a form needs to be minimized and the data being collected is mostly familiar to users.
• Bold labels are preferred to give them visual weight and not have them compete with field values over the user's attention.

Enough for the first stab. I've modeled the first concepts which can be found on the UX Lab Web Album (images 35 and beyond). The concept with top aligned labels is quite unusual for application forms as it takes up a bit more vertical space due to the top labels. However, the two-column layout and collapsible sections offset that. Gray labels in collapsed sections are clickable: this opens the section and moves focus straight into the field. The first section contains help/guidance. I'd say that the user can choose to save the view and reuse the settings for all other forms of the same kind. This way you can hide sections that you don't use all the time and reach a super fast data entry, also using the keyboard. Next to the section label, we could place a "check" or "x" sign, indicating whether all mandatory fields in the sections are satisfied or not.

Special attention to:

How to emphasize mandatory fields: using *, using icons, using field coloring. In that same set you can also find a concept with and without seperating horizontal lines.

Process guidance using in-form bubbles that are triggered on completion of certain fields. The same thing but now using the top status bar. I really like the last idea, imagine how easy this can be for novice users! Of course you should be able to switch it off. Same hint could also be placed on the form itself, using the "introduction" section.

A naughty look at possible things to come for mobile: the resolution used in the concepts do actually fit on a 800x480 px smart phone.

Concepts with labels to the left of the fields, similar to the current OB form design, should not be ruled out. In fact, right aligned labels are commonly used for these kind of forms. Left-aligned labels are a good alternative as they support quick vertical scanning but risk higher completion time when the distance between field and label gets too big.

This should keep us busy for a while. Let me know your reactions via the UX Lab Forum so we can take it to the next level. Examples of Great Form Design out there and personal experiences with e.g. rapid order entry will also be highly appreciated.

You Have Spoken: Design Concepts Survey Results

Less than two months ago we presented design concepts for a new user interface for Openbravo ERP and asked you to give feedback by filling out the surveys or by discussing the design work on the User Experience Lab forum. And so you did! No less than 127 surveys were completed and many users participated in lively discussions on the forum.

The forum discussions continue and I'm getting more and more excited to see what beautiful things are happening there. With your help I was able to lift the design concepts to the next level. What about the new Virtual Child idea: a more elegant solution for Linked Items, while offering a new home for meta data, notes and attachments? You guys loved the Column Search for the grids, but couldn't care less about First-Letter-Search. Good to know. About the proposed Advanced Search: You liked its power, but many users pointed out that it just takes up too much space. So, after some discussion on the forum, here's a more simplified version. We also worked a bit more on the Task Paths idea and introduced the Label Context Bubble. Now let's hear your feedback so we can sculpt it even further.

Back to the survey results. If you are into stats and charts: check the results for Overall, Master Detail, Search and MyWorkspace . Cutting a long story short: You liked our concepts very much. Over 96% of you think the new stuff is "better" or "much better" than the current Openbravo ERP GUI. The other 4% voted “neutral” and no negative votes were given.

Really encouraging were the comments you gave, spread out across all four surveys. Lots of "Bravos" and "We want it!" and most of them are about the concept as a "holistic solution". This is especially helpful as we intended to design a complete new GUI framework that needs to serve as the basis for future functionality. All the different functional areas need to work together as a whole. You gave us the impression that we are heading in the right direction here.

The concepts shown to you were all about the GUI of our product but obviously there are many more features that deserve their place on the road map. For the GUI related features we now have a good idea of what is important and what not. For the bigger list of features, please visit the Uservoice Openbravo page where you can vote for features.

Now the next step is to use all the feedback that you have given – or will give soon – in the next round of design iterations. We will keep on doing this till the moment we are going to build it. The UX Lab is the place to go. I will post new design work as we go and you can throw stones or flowers at it. At the moment I'm publishing all the latest design mockups in a Picasa web album. These images are really snapshots in time of ongoing design work so the latest greatest are the last ones in the sequence.

What we're doing here is called Collaborative Design. I will blog about this phenomenon soon into more detail.

Rob