Openbravo's User Experience Lab
GUI design, ERP Usability and Visual Design

A Christmas Carol: Advanced Payables and Receivables Management Redesigns

Tuesday, November 24, 2009

In the novel A Christmas Carol by Charles Dickens, clerk Bob Cratchit famously spent his Christmas eve doing the final 'bank reconciliation' for his employer, Ebenezer Scrooge. Only when reconciliation was complete he was allowed to go home for Christmas dinner with his family. Nowadays bank reconciliation isn't such a punishment anymore thanks to accounting and ERP software but there is still a lot to improve. Too late for Bob now but for all other incumbent financial staff among you we have some good news.

We have been working on enhancing the user experience in Customer Payment (AR), Supplier Payment (AP) and Financial Account Management, including a full reconciliation process. We now want to validate our designs with you to make sure we are on the right track.

So make life better for all Bobs out there and have a look at our videos and give your feedback on the User Experience Lab forum

Happy Christmas in advance!

Rob Goris - User Experience Architect, Openbravo S.L.

The Family Grid

Thursday, August 27, 2009

A concept that combines parents & children, column filtering, aggregation and table joining, allowing the user to freely manipulate and analyze data

Data is stored in Openbravo in a header-line relationship, also known as a parent-child relationship. For example a business partner who has two bank accounts and two locations. This data model consistently separates parent and child records which makes it suitable for 1:n relationships where there are few parent records and many child records. It will be less suitable for 1:1 or 1:n relationships where n is small. The user can only work in one view at a time and needs to switch back and forth between parent and children frequently.

The next generation of Openbravo ERP aims to offer a more flexible master-detail GUI where parent & child grids or forms can be shown in the same view. This allows for much faster record creation, editing, comparing and searching. Besides that, different views can be opened on separate tabs, offering multi-tasking.

Reports in Openbravo - and most other ERPs - are produced as one-off documents. They have a pre-defined set of dimensions, layout and data grouping. This works fine in most of the cases but in some cases more flexibility is desired.

Pre-defined views make it easy for the user to create out-of-the-box reports and to work on standard tasks but they do not allow the user to freely experiment with the data. Now imagine a grid view where:

  • Parent and child information is combined

  • Both attribute values and records can be shown

  • Column values can be aggregated (e.g. sum, count, average)

  • Complex nested boolean searches across parent and multiple children can be performed on user level by just using column filters

  • Grids can be joined

  • The user can experiment with data in a flexible way. Questions such as "Give me the sum of all unpaid invoices of over 1000 Euros of customers in the Czech Republic that have an HSBC bank account" can easily be answered by manipulation of a grid

  • Most reports can be replaced by this new grid view

The concept that is presented below aims to simplify data by summarizing it, comparable to pivot tables and on the other hand aims to simplify multi-dimensional analytical queries, comparable to on-line analytical processing (OLAP). In the hands of a savvy user, this concept can be a powerful yet easy tool for do-it-yourself business intelligence. For implementation in Openbravo I can imagine that this is an additional view. Not all record types will need it.

I have to admit that I have no idea about potential performance issues. For now I think it is good first to look at whether this idea can make our users more productive, effective and better informed and then assess how to realize it.

This movie presents the idea.

Let me hear your thoughts on the UX Lab forum.

Bank Statement Reconciliation Redesign

Tuesday, August 11, 2009

Bank statement to bank reconciliation is the process for entering and reconciling bank statements with cash transactions from accounts payable and accounts receivable and cash balances in the general ledger. This sounds like a terrible thing to do on a daily basis but it doesn't have to be. We had a look at how to improve this functionality in Openbravo and came up with the following ideas:

  • Introducing an additional layer on top of grid and form views that shows an overview of the bank account, its items that need to be reconciled, some balances and shortcuts

  • Possibility to import a bank statement

  • Automatic matching of bank statement lines with Openbravo transactions. We need to figure out the exact logic here still but value, reference or keywords in the description could be used for automatic match finding. The user then only needs to verify whether the proposed match makes sense, and tick the box.

  • Searching for matches among transactions and invoices. Making a match with an invoice and reconciling means that this invoice will change to status paid.

  • Creating new transactions on the fly when they don't exist yet

  • In case of partial payments we want to be able to match a bank statement line with a part of an invoice. This results in the invoice being paid partially. I call this splitting of the invoice but perhaps this term is not ideal as the invoice remains as a whole but there are just payments made against it.

Have a look at the mockup images and do give your feedback. Thanks!

The Power of Visualization (part II)

Tuesday, July 7, 2009

In Part I of The Power of Visualization I emphasized the need to visualize and how it can help you to be more effective in your work. In this blog post we will look at the tools and methods per activity and object type.

Ideas & Insights

Key point here is that whatever tool you use, make sure it is easy and fast in producing results. Idea generation is all about quantity and divergence and not about details. Pen & paper are ideal. Buy a couple of nice fine liners and markers in different colors and teach yourself some basic sketching techniques to become more effective. Scan or photograph your drawings for reuse in presentations or sharing online. PNG is a good image format for drawings as it combines the strengths of both JPEG (gradients) and GIF (solid fills).

If the ideas yet need to surface, you may want to use visualization tools to create & structure those, together with their associations. Mind maps are commonly used. The benefit over linear lists is that mind maps visualize the ideas in a radial manner which encourages users to diverge and connect ideas. Check out Mindmeister, Bubbl, mind42 and Freemind. The first three are web based, the latter is an opensource Java client application. The image below was produced in Mindmeister.

Design & Development
In this stage you have already filtered out the ideas that won't work and want to add more detail to the few that remain. In most cases this will mean that you need to start drawing wireframes. These are skeleton-style representations of pages, tables, forms etc. that show in low fidelity what elements a page needs to contain and how the interaction works. Esthetics are of less importance here. Making things too pretty can even work against you. Having said that,I have to admit that I am violating the rules of good wireframing sometimes as I tend to add lots of detail and even graphical design in early wireframes. The reason why I do this is that I am a strong believer that you can iterate function and form in the same cycles. The drawback is that you'll need to be skilled in at least basic graphical design and proficient in a tool that allows you to do so (e.g. Photoshop or Illustrator). If this is not the case then this approach will be too elaborate and frustrating. Good looking wireframes can also be misleading for your stakeholders as you'll shift the focus to the looks rather than the functionality of your concepts. You want to discuss functionality in this stage, not looks. The image below shows an example of a typical wireframe, produced in It's great to see how the essence of the idea was preserved in later iterations.

You can also mix existing screen elements (such as a browser frame) with hand drawing.

There is a plethora of tools at your disposal for creating wireframes. Powerpoint is great and super simple. Of that same company, there is a product called Visio that I hate but need to mention as it is still the standard in wireframe land. It produces neat wireframes but you can hardly add interactivity and the GUI feels very 1999. I prefer Axure (client install) and a new kid on the block called Balsamiq (web based) that produces very smart looking wireframes (see image below) using a library of pre-sketched components. I have not used Justinmind yet but it is supposed to be a very extensive wireframing / development tool that supports business logic. I recently came across a new web based (Flash) tool called Flairbuilder and like it very much. For Mac the standard is Omnigraffle.

Data visualization is an art and profession in itself but let me point you to a few resources and tricks that you perhaps had not heard of. Books: a classic about data visualization is Edward Tufte's The Visual Display of Quantitative Information. More specific and very relevant for ERP is Information Dashboard Design. It reveals all tricks you need to design state of the art KPI-O-Meters.

Google has made it very easy to create charts via Google Docs. The cool thing is that you can use them elsewhere (blog, web page, portal). Using Google Gadgets, you can even create Hans Rosling style animated charts, of which I was raving in my last post. The Motion Chart gadget uses five dimensions in a single chart and can be fed with your own Google Doc spreadsheet. Below an example I did. It shows sales, profit and order volume per customer over time. Till now you can only use them in iGoogle (hence the screenshot) but I expect that it can soon be used more ubiquitously. Other great visualization tools online are Zoho Reports and IBM's Many Eyes.

Process modeling or visualization in its essence comprises of labeled boxes and arrows to connect them. Most presentation software does boxes and arrows so for the odd process flow chart you don't have to look further than Powerpoint or its opensource sibling's Impress.
For more advanced modeling it is recommended to use dedicated software. Four examples, from simple & cheap to complex & expensive:

Lovely Charts is an easy to use application but it's still suprisingly powerful. You can create flow charts, sitemaps and even basic wireframes. It is web-based and the basic version is free.

We used BizAgi for the modeling of the most common ERP business processes. It uses the Business Process Modeling Notation (BPMN). There is a 30-day trial and it only runs on Windows.

Intalio|Designer is is a good open source alternative to BizAgi. It is built on top of Eclipse.

On the high end of the spectrum there are the modeling tools that are part of a development suite, such as IBM Rational Software Modeler. It uses the Unified Modeling Language (UML) and it does the activity diagram, which is the most suitable UML asset for flow modeling. For most users however, software such as IBM Rational Software Modeler is too complex and too expensive.

Pretty Products & Presentation
This is the toughest one. I want you to create pretty stuff. I want you to pay attention to visual details in everything you do, from writing an email, creating a Powerpoint, to designing a customized entry screen for your client. "I am not a designer" is no excuse really for not doing it. There are plenty of tools out there that make life easy on the visual part but the real difference you make by following a set of basic rules. You can use them all the time since almost all artefacts you create at work are things that will be looked at by a spoiled audience.

  • Audience. This one is too easy but therefore not of less importance: understand your audience and design for them. A presentation for developers should look different than one for marketeers. A toddler prefers other colors than an 80 year old.

  • Images instead of words. Many great presenters use extremely simple slide material with little text and lots of imagery. Photos are used in abundance to capture attention and set the tone, text is used to emphasize what is said. In What Marketers Should Know About Design Research, Ekaterina Khramkova manages to take you through an 88 slides long presentation without ever boring you. In fact, the slides are so clear and enticing that you can easily consume it without the audio. You can do the same. Grab a catchy photo that represents the story you are telling and use some bullets to mark the most important points your are making. Be careful not to use photos that carry copyright. Deviantart and Creative Commons are sites with lots of art work that can be used freely but always check the terms. In case of doubt, just contact the artist and ask for permission. You can also create your own material of course.

  • Layout, typography & consistency. Think about the layout before you begin. Pick a limited palette of colors, pick one (or two) fonts and styles. Choose alignment, where to drop your images and when to use bold. Well, all has been said before but not all is applied by all. When you don't feel comfortable, let your in-house designer or someone in marketing look at what you are doing.

  • Uniqueness. You want people to remember your presentation or product. Surprise, provoke, be unique. Boring is the worst of sins. Pretty is better than ugly and ugly is better than boring. You should check out TED's presentations frequently anyway but this presentation by Seth Godin hits the nail on the head.

Collaboration & Community
Now you want to share all that beauty with the world. You don't want to email your visuals around because that means they will have a life span comparable to door-to-door print advertisment and will fall into oblivium. In case of a design process, you will not be able to document the chronological progress which is crucial in the story telling of how you got to the final solution and why which decisions were made. What is needed is a web-based platform where visual material can be uploaded with ease and viewed by all. Ideally viewers can collaborate by adding comments, annotations and so on. Privacy settings can also be important in case you want to share your work only with a selected group of people.

For the design work of the next generation GUI of Openbravo ERP I have been using Picasa web albums. Annotating is not possible unfortunately and commenting is quite basic but it is rock solid, fast and easy. Flickr offers a similar service. They have added a lot of features lately, including annotations. The drawback of both is that they don't do versioning. A later version of an image will be added to the collection, rather than replacing the previous version. This protects you from cheating with the historical progress tracking but at times it would be great just to be able to replace an image without having to delete the old one and losing its target URL. If you know of any site that does versioning, please let me know.

Both Thinkature and Conceptshare are more advanced visual communication tools that let you collaborate in realtime around a design concept. Jing I use for instant screenshot sharing and Screencast I use for video sharing. It beats Youtube and many other services in video quality because it doesn't resize to a lower resolution.

For webinars the open source hotties are Yugma and DimDim. I have not used it but Glance also received good reviews.

This collection of tools and methods should get you started with visualization. I have opened a thread on Forge for discussions on this topic.

The Power of Visualization (part I)

Tuesday, June 23, 2009

ERP is a domain that is associated with large amounts of data and complex processes. ERP software traditionally uses tables and forms to visualize the data and in many cases processes are not visualized at all. The reason for this is historically: Activities such as planning, purchasing, sales and financial management are mostly about numbers and the way these numbers are "visualized" has hardly changed in the last 100 years. This cash book still looks very similar to the one we use today. This does not make it any easier for people working with it, whether it be designers, developers, business partners or end users.

I believe that we can make things much easier by applying visualization in our every day activities and this does not only apply to building flashy user interfaces or creating sales forecast charts. Visualization can be used to gain insights that you would never have thought of before, it can be used to seduce customers, your boss, your peers and the opposite sex. It can be used to spur creativity, invoke discussion and generate alternatives. And the effort it takes is much lower than you´d think. Let me illustrate all this per activity and object type.

Ideas & Insights

So you have this great idea or insight, right? What are you going to do with it? Mostly, you need to get buy-in, so what do you do? Describe it in an email and hope people will understand it? We are surrounded by many smart people but most of them are busy and don´t want to use their brain cycles to understand what you want them to understand. By visualizing your idea or a problem you make it easier for your audience to grasp what you mean and because you made it less painful, they will reward you with their support (providing that the idea was good of course). Another happy side effect is that by visualizing your idea or problem, YOU will also understand it better. Those who are best in visualizing a problem, are most likely the ones to solve the problem.

Design & Development

From requirement to code is a long way and many things can go wrong. Traditionally business consultants distilled requirements, wrote use cases to capture what the system needs to do and the developer converted those in functional specifications outlining what technology architecture will be used. Nowadays most development companies also employ user experience designers who are in charge of designing the user interface. One of the most differentiating features of these people is that they tend to visualize ideas and concepts as early as possible in the design process. In fact, they start sketching the moment they enter a meeting room for the first project brief. This really helps the team to understand the (same) problem and to evaluate the different solutions before a line of code has been produced. The last months we shared all design work online with the community and solicited feedback in every step. This saves time & money, brings more and better ideas and results in better quality with lower risk. We should all be sketching more often.


The source of all data is in tables in data bases or in spread sheets. This is not going to change anytime soon but the way to present the data is much more flexible. An image (or video) says more than a thousand words so just have a look at this tremendous presentation of Hans Rosling who makes boring statistics come alive. Try to put this in a spreadsheet and make people understand it! There is a great opportunity for us to use visualization in ERP systems when we start to include business intelligence (BI) functionality. This will help us to view the data from different angles and to gain better and earlier insights than with using traditional data views. It also lets us interact with the data. A great example of effective data visualization is the NY Times interactive chart for the 2008 Olympic medal count. One of our community members shared some great ideas for data visualization and manipulation for Openbravo ERP.


Things happen over time and most of the time the path via which things happen is not linear but depends on certain conditions. This can get quite hard to understand without visualization. I was very happy when the Openbravo team started to model the most common business processes. Now we understand on the most abstract level what task flows we need to support. Everything we design and develop should be supporting those. Process visualization can be used everywhere: From a simple HR process for doing your expense report to helping a potential customer understand how the sign-up and installation will work and when the payment takes place. When I moved to Spain I had to apply for a health card (tarjeta sanitaria) but I was unable to find any process description (not even in words) which eventually made me visit 6 different administrative offices (all with very Spanish opening times) all over the city. Half way I had no idea what form was supposed to do what so I ended up dropping the whole pile of documents on the next desk in the process explaining to the staff: "I just need a health card, take the paper you need and tell me what to do next!". It took me almost a full day.

Pretty Products & Presentation

One study at the UCLA indicated that up to 93 percent of communication effectiveness is determined by nonverbal cues. That was about direct communication between people but it isn't hard to imagine that similar figures apply to other channels. The power of good looks can be used to your advantage. People like to use beautiful products, it makes them feel happy and confident. Your customers are people too, they like to use a handsome ERP system and look at beautiful presentations, pretty invoices and cool looking sales charts. Among techies, aesthetics are normally not considered to be very important, it is all about features: The iPod was a "lame product" according to a post by a Slashdot community member because it did not have wireless and less space than a competing product. S(he) Obviously did not understand that good design & simplicity can beat feature count. There is nothing shallow about liking pretty stuff and you better make things look good if you want to impress.

This was part I. In part II I will give you some tools and methods to let you do the visualizing.

Work with Us on Improving OB ERP´s Business Processes

Friday, June 12, 2009

Ease of use is more then user interface (re-) design; it is also making sure the processes implemented in the application match the user´s mental map and match the way companies do their business. For this reason we have been working on modeling the most common ERP business process flows. We would like to share the resulting diagrams with you in order to collect feedback and improve them. Each diagram documents an abstract business process, which should result in a business-process-specific discussion. It will also provide a natural place for people to discuss current issues about or suggest changes to the current Openbravo-specific implementation.

Another reason for describing the business process flows is to provide better user guidance through our documentation. Surveys told us that this is a key priority for our community and therefore for us.

Please provide feedback per diagram (thread) to validate the correctness and completeness of these flows. Also, let us know when you think that a crucial process is missing. The finalized flows will be used as input for the UX redesign.

Usability Test Results

Monday, June 8, 2009

In the last weeks mockups for the new GUI for OB ERP were tested on 12 users. Let me share the findings with you.

What was tested: three clickable mockups

Test methodology: participants were asked to execute a number of tasks, as described in the scenarios. They were asked to think out loud while doing so. All mouse movements were recorded, as well as the audio (participant talking). A web cam was used to record the user´s facial expression. The facilitator observed the participant, took notes and asked questions in case of hesitation, mistakes and other deviations from the pre-determined scenario path. Other than with the contextual inquiries (user observations) that were conducted in December 2008, I have decided not to post-process(annotations, etc.) the videos as the findings were extremely consistent across all sessions. The sessions were split in parts: 4 tests were done at first and findings were immediately processed into a modified design (biggest change was in the ribbon toolbar). The remaining 8 tests were done using both the initial design and the modified designs.

Findings: The most important findings are:

* Users have difficulty navigating the different master detail views from parents to childs, from grids to forms and back. There is definitely a learning curve but cognitive load seems to be high. I think part of it has to do with visual design but I´m concerned that this can only fix parts of the problem.

* Users have troubles finding menu items (buttons) in the ribbon toolbar. I noticed that the labels I initially used (such as "record") were not ideal, and changing them to more common labels (such as "edit") significantly improved the user´s performance. Still, it took most users a while to get used to the concept of "buttons hidden on tabs". Some users even thought the the form or grid below the toolbar was part of the tab. Here visual design and labeling play an important role but I have the feeling we should simplify, dumb it down. Plonking all buttons (icons) in one bar is perhaps the way to go. Users don´t seem to notice a difference between generic buttons and object specific process buttons but I still want to keep this clean separation, as in the earlier concepts.

* Forms work great. Users love the layout, the nifty sections and the color coding on field and section level for required fields.

* It was not always clear when records are saved and when not. Users did not seem to worry about it at first but seem to wonder what saving mechanisms are applied and demand clear feedback on the status. Auto saving is not always good: an implicit save action is requested for forms to avoid unfinished forms to be saved or even processed.

* Users double click rows in grids

* Users get confused about which tab contains what because of missing (id) labels on the tabs

* Three users had concrete examples of use cases where flicking through the headers while observing a related lines grid update is needed.

The detailed findings can be found here.

Now the next step is going back to the drawing board and solve the issues pointed out by our users. After that, another round of usability test might be necessary. As always, you are welcome to participate in all stages of the design process by posting on the UX Lab Forum.

Try a Clickable Prototype

Thursday, May 21, 2009

The design concepts for OB ERP´s new user interface are getting more mature by the day and we continue using feedback at any stage, whether it be through the forums, peer reviews or usability tests. This time I have built a clickable prototype that shows a number of tasks around expense reports. It intends to verify how well our master-detail concept (Kompressor) works in real-life scenarios.

Download the zip file, unpack and run Expense Reports Scenario.htm. I will use this for a couple of usability tests with end users but I am also really interested in your thoughts while running it.

Normally I ask users to speak out loud while performing a task but that won´t work remotely (and your colleagues/wife/husband/house mates will look funny at you) so better write down your thoughts when running the scenario and post them here. If you are a colleague of mine and want to do the usability test, just let me know and we will do the test together in the office.

Remember that we are testing our software, not you, so don´t feel stupid when you did not click the right spot at first. It just means that the design is not right yet. The user is always right!

Running the scenario more than once can be interesting too, to see if there is a learning curve.

Choose your Super Hero: Grid Splitter or Kompressor

Sunday, May 10, 2009

Guys, I am torn between two concepts for master-detail: "Grid Splitter" and "Kompressor". They sound like the villains from The Running Man, I know, but other than in the film, this time we want one of them to become an actual winner. Sorry Arnold.

Grid Splitter is the concept that shows a header (parent) grid together with a lines (child) grid in one view. Kompressor only shows one grid at a time and compresses the top grid into a single summarized row when the bottom grid is activated. This way the user is not distracted by the header grid while working on the lines, which is in fact a variant of the progressive disclosure interaction design technique we already used to hide the lines grid while working in the header grid.

You can view an abstraction of their behavior in these diagrams (1 & 3 show Grid Splitter, 2 & 4 Kompressor) but perhaps it's easier to go through a scenario for the new concept (Kompressor). Use right-arrow key on your keyboard to flick through the scenario.

Choose your favorite super hero now!

If my doubt persists, I will have to take them to the streets, for some serious usability testing. There can only be one winner.

Live Search or Query Suggestions?

Thursday, April 23, 2009

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

Tuesday, April 14, 2009

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

Friday, April 3, 2009

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.


Concepts for Openbravo ERP Redesign

Wednesday, February 11, 2009

We are continuously improving our products and raise the bar with every release. Recently we have started to look at some very fundamental parts of the User Interface of Openbravo ERP and came up with ideas for a future redesign. User feedback told us that there is a need for more powerful and flexible search functionality. We also learned that many user like to edit the grids (tables) directly in the cells and that switching between different records at the same time would be very useful. Furthermore, we are looking at offering more functionality in the context of tasks and we also believe that there is a need for more high level and summarized views on data.

Here we would like to give you a peek preview of the stuff we are working on and give you the opportunity to give your feedback. Our approach is holistic: we believe that all functionality should be working in the context of user journeys rather than just plugging in new features left and right. That's why we also want to propose a complete new Master-Detail concept in which all other functionality is embedded.

Images say more than words so check out the Demo Videos and discuss them on the User Experience Lab forum:

Please also fill out the surveys for Master Detail, Search & Filter, My Workspace and Overall Impression.

I am looking forward to a lively discussion.

Thanks, Rob