Openbravo User Experience Lab

Filter Expressions

2011-11-29T10:39:00.001+01:00

They were introduced in maintenance pack 4 last month but have not been given the attention they deserve: Filter Expressions. These are handy clauses that can be applied to grids. Examples are "greater than" (>), "between" (...) or even the more uncommon ones such as "does not end with" (!@) and many more. A boolean "or" can also be used to combine expressions, such as 0...100 or >200, which is "between 0 and 100 or greater than 200".

Once you have created a complex set of filter expressions for your grid, such as "All unpaid invoices in USD with a value higher than $1000 and more than 21 days overdue for customers with names starting with A to G", you may want to use Saving Views to avoid rework next time you want to apply the same filter set.

Here´s the complete list of filter expressions.

Openbravo Mobile - Idea Phase

2011-11-15T12:11:00.001+01:00

After the first month working on Openbravo Mobile, here´s a little update in pictures on the progress. At the bottom you will find links to a clickable mockup you can play with. Enjoy and let us know what you think.

First, we had to change our mindset from PC to mobile. My first thought was: "How is Openbravo 3 ever going to fit on a mobile device without losing the great user experience?"

Then we dedicated some weeks to analysis, sketching and playing with phones, pads and every device we could lay our hands on:

It became clear that we had to reduce the PC GUI radically and focus on the basics: Lists and contextual actions. Here´s an example of how a sales person would book an order on an iPad:

We also learned that it is important to offer actionable information. Don´t ask users to go out there and find it but bring it to them! Here´s a director reading updates about his team and commenting on an action:

We realized that mobile ERP is all about browsing, viewing, filtering and applying actions. Now let's see this in action. Here´s a clickable scenario for mobile phones. Here´s a clickable scenario for tablets.

Note that these are just mock-ups without any visual design or coding done yet. In this stage everything is still possible, so don't hesitate to tell us what you think via Google+, Facebook or an old-fashioned email to yours truly (rob.goris at you-know-which-company)

UPDATE: The second iteration for tablet and mobile can be found here and here.

Personalization

2011-10-31T09:17:00.000+01:00

Summary: Every industry, company and business process is different. That´s why it is so important that an ERP system can be customized to specific needs. But what about personalization on user level? Here´s how we do it in Openbravo 3.

Openbravo uses a model-driven approach to describe functionality in business rules (rather than code), making it easy to configure and extend. Together with modularity, open source technology and a modern web-based architecture, Openbravo 3 is easy to customize and extend at any point in time.

This is all great stuff but, as often happens with ERP implementations, the end user is often overlooked. As soon as the smart suited implementation consultants have left the building, the real users start entering their sales orders, goods shipments and payments only to realize that the windows they need to complete are not exactly how they wanted it. Maybe the first couple of fields that are shown on the form are not important to the user because the defaults are always the same. Or the order in which to fill out the form is just a bit different than how the implementation consultants had prepared it. Or the default grids show all records so every time again the same filter needs to be applied. All small things that add up and can make a difference in being highly productive or being annoyed.

So how do we solve this? Do we need to call in the guys who implemented the ERP?

The solution is much easier. Openbravo 3 now offers personalization of windows, grids and filters on user, role, client and organizational level. With form & grid personalization plus the ability to save views including filters and layout, users can fine tune their environment. Let´s see how you can use this.

Personalizing Forms
Launch the Form Builder by clicking the wrench button in the toolbar. On the left hand side you see a list of the available fields for the window. You can drag & drop these fields in the list to change the order in which they appear on the form and set their visibility (of course this is only when a field is not mandatory to fill out). Many forms have different sections and it is recommendable to move less-frequently used forms into the More Information section, so they won´t bother you at first sight. You can also move fields into the status bar area. They will then appear as read-only values on top of the form which is ideal for attributes such as totals or document status.

The preview pane on the right updates with every change, showing you how the real form is going to look like. In the little properties pane on the bottom left you can set the width and the height of the fields. You can also decide here whether the field should start on a new row and whether it will need to have the first focus.

Personalizing Grids
Grids can be personalized in the following ways:

Column visibility (right mouse click on column header)
Column order (drag & drop column headers to a new position)
Column widths (drag the borders of the column header)

These settings are stored on closing the tab. So next time you open a tab of a certain window type you will get the same grid state as how you have left it. This is convenient in many but not all cases. That´s why we now also introduce saving views.

Saving Views
Saving Views stores grid and form settings, column filters and even the entire layout of the screen, for example the position of the splitterbar between the header and lines. So imagine that you rearranged your grid and it´s perfectly adapted to your task. You even added some column filters, for example you only want to see invoices that are more than 21 days overdue for organization East Coast. Now you save all this in one go using a name. Now when you need to work on another task that needs other filters and grid or form settings, you can easily retrieve this view later.

As well as you let your people adjust their office chair you should let them adjust their ERP to their needs. With Openbravo 3 Personalization this can all be done - without the smart suited consultants. And do not worry if you happen to be one of those consultants: You can also benefit by being able to easily personalize/customize views for your customers and store them on higher aggregation levels.

Test drive personalization on demo.openbravo.com and read more about it in the user manual.RP8RFDV98YUM

Openbravo 3 for Mobile

2011-09-23T09:16:00.000+02:00

As a prelude to the roadmap 2011-12 that will be published in the next few days, let me reveal one of the many exciting things we plan to do: A touch/mobile interface for Openbravo 3.

(Credit: US PTO/Apple)

Tablets and smart phones are soon to overtake the role as the preferred device to access the internet. Although enterprise software is typically used in an office environment, this is also changing.

The advantages are clear. A mobile enterprise can benefit from a higher workforce productivity - up to 45% [1], faster decision-making and increased employee satisfaction.

Openbravo 3 has a highly sophisticated architecture where the GUI is defined in metadata. This allows us to easily optimize the GUI for smaller screens and touch interfaces.

Simplification is critical in designing for touch/mobile. Too often mobile apps or sites try to mimic their desktop siblings without looking at the specific opportunities and constraints of mobile devices. We intend not to do the same.

At this point I´m trying to get a grip on which business tasks are essential for mobile. We aim to make all functionality of Openbravo 3 accessible through mobile devices but at the same time we need to make sure that the user experience of the key flows is superb. Let´s focus on what´s important first.

Here are some examples of tasks that could be candidates:

A manager approving employee expenses while traveling
A sales rep placing an order together with the customer
A sales director checking the sales figures before a meeting with his team
A CFO checking the financial health of the company in a chart in a widget on his mobile phone
A shop owner using her tablet as both a POS and ERP
A warehouse person picking orders using his tablet
A sales rep being notified that a customer placed an order that cannot be delivered because it is out of stock

Now I´d like to know what would be the typical tasks for your business (or your customer) while away from the desk.

Throw your ideas at us in the comments, via Google+ or Facebook, thanks!

[1] bfrench:"Survey: Mobile Apps Increase Enterprise Performance and Productivity Advantages, Top Three Mobile App Strategies Gain Momentum". iPad CTO. Retrieved 8/11/2011.

Openbravo 3 in Two Minutes

2011-09-04T20:00:00.000+02:00

A super short video that shows why Openbravo 3 is so cool :-)

Quick Pick: a new design pattern for order line reuse

2011-07-11T12:15:00.000+02:00

We´re working on a redesign of the Copy Lines & Copy From Order flows. After a few iterations, here is the first draft.

The two scenarios only differ in that one has a preview area and the other does not.

Let me know if this would work for you and your customers. Leave comments below the images in the web album or on the UX Lab forum on Forge.

Lost in The Grid (No More)

2011-07-06T16:23:00.001+02:00

We noticed that with lots of filtering and scrolling in the grid, you might lose track of your selected row(s). You could scroll up and down to look them up, but this could become tedious when you have hundreds of rows. Sometimes the simplest solutions are the best. Here´s what we did.

So you got this invoice selected in the grid. It is highlighted in orange.

You now decide to filter the grid to look for all "East Coast" invoices that have status "Payment Complete = No".

Ok, cool. We´re done with that and clear the filters. Hang on, where did my selected row go? It must have scrolled outside the visible area.

To get the selected row back in the visible area, we simply click on the selected-row-counter button.

And the selected row moves back in the view port!

Lost-No-More will be available in maintenance pack 1 (Openbravo 3-MP1) due for end of next week.

Painting the Town Red

2011-07-06T14:56:00.000+02:00

Pamplona might be known for as the home of Openbravo but it is probably better known for its yearly San Fermin festival where millions of people gather to watch the famous encierro, the running of the bulls.

So if you wonder why the demo.openbravo.com login screen suddenly turned red or why we seem to be in a festive mood this week, it is probably because of San Fermin.

A special thanks to Miguel Rodriguez Font who created the bull logo.

Openbravo and Accessibility

2011-06-21T09:44:00.002+02:00

Often avoided and rarely done well, accessibility is a product quality that requires substantial effort with little business reward at first, it seems. For the end user however, physically challenged or not, the rewards of accessible technology are huge. Statistics show that accessibility affects many:

It is estimated that between 10-20% of the worlds population has a disability [1]. Not every disability affects the user´s ability to operate software but many do. Visual impairments and reduced upper limb capabilities are the most common factors affecting performance in human-computer interface usage.

Also, research indicates that two thirds of office staff suffer from repetitive strain injuries (RSI) [2] . Although RSI is a very complex and controversial topic, excessive mouse usage is suspected to exacerbate RSI.

Last but not least, with a rapidly aging population in the western world, accessibility becomes more important. Reduced eye sight and reduced dexterity are common among the elderly.

Accessibility should never be just a "tick in a requirements list". It should merely be an ongoing effort towards full accessibility. For a static web site, reaching full accessibility is feasible but for a complex application such as an ERP system, it is much harder and 100% accessibility for all possible tasks is almost impossible. For example, changing the position of the workspace widgets using drag & drop cannot be done using the keyboard only. Although it would be nice if this were possible, this task is of such low importance that it would be hard to justify a big investment in the core product to enable this. Also, since Openbravo is modular, it is hard to guarantee full accessibilty of all modules written by third parties.

The four core elements of accessiblity are keyboard operation, text size, color coding and screen reading. Openbravo 3 offers the following:

(1) All main tasks can be excecuted using a keyboard. Openbravo 3 features a new set of keyboard shortcuts. If necessary they can be adapted to local or personal preferences. In a next blog post I will zoom in on keyboard shortcuts. For now, here is the default set.

(2) Text size can be increased using the browsers zoom capability. In most browsers this is done using by keeping the CTRL key pressed down while moving the mouse scroll wheel. Below an example of how a form looks like when enlarged (click to view the full size image).

(3) Color schemes are suitable for color blind and color coding is never used as a single visual cue. Using a special filter for color blindness, we can simulate how a color blind user sees Openbravo 3. Shown below a screenshot of Openbravo 3 as seen by a Deuteranopia type of color blind who cannot distinguish well between greens and reds. In the bottom row in the grid the order quantity field is erroneous, indicated by a red fill. However, for the Deuteranopia color blind user, this color coding is not sufficient. Therefore Openbravo also provides an icon (the X on the pen button) on the left of the row together with a tooltip.

(4) Screen components are readable by a screen reader. Screen readers are applications that help visually impaired users by reading out screen text aloud. Recommended are Thunder (free/donation) and NVDA (open source).

There is another important factor to accessibility: legislation. A growing number of countries around the world have introduced legislation directly addressing the need for accessible technology. In the United States the Access Board (an independent federal US agency) issued accessibility standards for electronic and information technology under section 508 [3] of the Rehabilitation Act, as amended. Compliance with section 508 of the Rehabilitation Act applies to all Federal agencies when they develop, procure, maintain, or use technology. Federal agencies must ensure that their technology is accessible to employees and the public.

In Spain, UNE 139803 [4] is the norm entrusted to regulate web accessibility.

The majority of the guidelines are loosely based on the WCAG [5] web accessibility guidelines created by the W3C. Unfortunately, most guidelines point to the first version, written over 10 years ago, where the web mainly consisted of web sites in the sense of content being rendered in HTML using tables and frames. Today, with the advance of AJAX technology, this check list is not entirely applicable anymore. This, together with the huge effort needed to test the entire application using assistive technologies (e.g. screen readers) against all international guidelines prevents me from guaranteeing that Openbravo 3 complies by default with all. This said, I am confident that with few, if any, adaptations, Openbravo 3 will comply.

With Openbravo 3 we have contributed our part in removing the digital divide in society. I urge our business partners and wider community to keep this spirit alive in all their development and deployments. If you need any help on accessibility, feel free to contact me.

Sources:

[1] http://labspace.open.ac.uk/mod/resource/view.php?id=374021
[2] http://www.dailymail.co.uk/health/article-1024097/Two-thirds-office-staff-suffer-Repetitive-Strain-Injury.html
[3] http://www.access-board.gov/sec508/guide/1194.22.htm
[4] http://www.tawdis.net/recursos/downloads/UNE_139803.pdf
[5] http://www.w3.org/TR/2008/REC-WCAG20-20081211/

The Openbravo 3 Design Process

2011-06-02T14:03:00.003+02:00

We´re on the brink of an exciting moment in the ERP space with the publication of Openbravo 3 - Production in a few weeks time. It brings the most radical change in the product´s history.

While the development team is working day and night to make this happen, I would like to share a bit of background information on the design process, context and principles that we applied in this project.

Release Candidates rather than a Big Bang

Big changes carry big risks so at the start we chose to deliver Openbravo 3 in seven subsequent release candidates rather than one big-bang launch. Every release candidate was a working version that customers could try and in every subsequent version the number of bugs decreased and the number of features increased. Releasing this way does not only reduce risk but is also a great way to get early customer feedback, especially being Open Source.

The first release candidate gave birth to multiple tabs, then we added workspace widgets and finally a new master-detail paradigm using redesigned forms, editable grids and split views. With these pillars, our vision for a highly productive, usable and enjoyable ERP system was realized.

From now till the production release we will focus on testing and fixing bugs.

Design Imperatives

A redesign project of such scale and complexity needs to be confined within high level design imperatives. So we started out with stating what Openbravo 3 had to be:

Holistic: The solution had to make sense as a whole, not just a set of independent features
Relevant: The solution had to make sense to our users by making work more productive and more enjoyable
Open: The solution had to be created using a transparent design process involving stakeholders at all times
Supported: The solution had to be evangelized both in- and outside the company to get buy-in
Realistic: Dreaming is easy but the solution had to be built eventually with limited resources
Shipped: Because that is all that matters

Obeying these design imperatives does not guarantee success but it was clear from the outset that not obeying them would guarantee failure.

Big Design Up Front

Big Design Up Front (BDUF) means that a product´s design is completed and perfected before the actual development starts. Although this approach clashes with the agile development approach, I am a strong believer that for large and complex design projects, this is the only way to go. Apart from getting a higher quality design and better buy-in, BDUF also reduces the amount of changes further down into the development stage. For a UX designer to “change” a piece of functionality means 30 minutes sketching on paper or modifying a mockup in Photoshop. For a developer, once something is coded, changes can take up to days.

As stated above, our solution needed to be holistic, meaning that we did not want to fix a couple of hundred of bugs and plug in a dozen features hoping that this would result in a coherent and intelligent product. We needed to step back from the current product and situation and spend some time thinking about the ideal experience.

This was to become the User Experience Vision which was based on the six core capabilities that we discovered through talking to our business partners, customers and end users. The final solution had to have all of these capabilities, in order to be a success. Taking out one of them would mean breaking the holistic solution.

Multi tasking. Business processes are never linear and necessary information does not always sit in one place. We discovered that our users need to be able to work on multiple documents at a time.So we introduced tabs allowing multi-tasking, comparable to how users work with modern web browsers.
Key information delivered at your finger tips, rather than having to go out and find it. Creating reports is a tedious task. So we introduced widgets that pull essential data from the database, web pages or apps onto a workspace. We bundled a few in the product but it is easy to add or build your own.
Easy and direct searching & filtering. In the jungle of ever growing data volumes, search is more important than ever. So we looked at the essence of ERP data views, which are grids and applied column filters to them. They let you search on any attribute or combinations thereof, in real-time.
Comparing documents and viewing parent-child documents in a single view. This is the so-called Master-Detail view. Many ERPs ony let you look at either parent or child records but never together, forcing you to continuously switch back and forth while doing your work. So we decided to build a new type of component that combines parent and child data in any combination grid-grid, form-grid, grid-form or form-form. You can choose the screen layout by dragging the splitter bar and maximizing levels.
Editing in-grid. Editing data in a grid must be as easy as editing a spreadsheet. Full stop. So that´s what we build.
Fast and responsive user interactions, comparable to client applications. Although this cannot be marked purely as a capability, it is a quality attribute that is important enough to count as a requirement that must not be negotiated. It was clear that this was going to be quite a challenge because Openbravo 3 is fully web based.

Here is what we defined as the user experience vision which later was decomposed into smaller components in this document.

Saying No

The holistic vision set the framework against which all decisions were to be measured. This makes it easy for the designer to judge ideas but at the same time very hard for others to see their ideas being rejected for no other reason than that their ideas don´t contribute to the vision.

If you want to design a great user experience, which in its essence means simplicity and productivity, you need to be on your guard at all times for the influx of nonsensical features. Stuff that comes from people that say “our competitor has it” or niche users that want specific features that only 0.01% of the users would ever need. Stuff that comes from users that already worked with ERP systems “before you were even born”. That kind of stuff is what you need to repel.

Every feature you add clutters the user experience, needs to be maintained, upgraded and documented and eventually will make both the product and the company less agile. When in doubt, you need to say no (and then buy your own drinks in the pub).

Working in an Aquarium

In the design process of Openbravo 3 we took full advantage of the open source character of the project. We have gone from early user studies, through ideation into numerous concepts and even more iterations, ultimately leading to prototypes and the final product. All this was done with close involvement of our community via concept sharing, surveys, voting and forum discussions.

Other than designing behind closed doors, we have continuously been sitting in an aquarium, not being afraid of proposing crazy or sometimes even naive solutions. While we were sketching screens or flows, you were watching over our shoulders while throwing comments or ideas at us and pulling the chain when we were about to stray.

That is why we are so confident that Openbravo 3 is a product that will make our end users smile, our customers productive and our business partners successful. We have listened and delivered. No focus on short term wins, gimmicks or marketing tricks, just a product that our users will love. They are the ones that will need to work with our software many hours a day and not designing for them first would have been a cardinal sin.

Agile and Lean UX

Agile development has been around for more than a decade now and has proven its value. It has shifted the focus from processes, documentation and project plans to collaboration, flexibility and working prototypes. When executed well, this results in lower risk and higher quality products.

It is common in agile development to work on features in short cycles that always result in a working piece of code. All three stages (design, build, test) of the development process are supposed to be executed in the same cycle that sometimes does not last longer than a few weeks. This is what I believe that agile development got wrong because UX design needs to start much earlier to be able to iterate, evaluate (with users and other stakeholders) and sculpt the designs. Working one or two cycles ahead of the development pack, UX can deliver fully tested, ready-to-build designs that do no have many surprises for the user nor the developer.

While delivering design work it is really important to produce detailed storyboards, mockups and flows instead of specifications documents. In fact, in this project I have hardly produced any documentation at all because the prototypes were the ongoing specs. Depending on the complexity of the design the designer needs to choose the appropriate level of fidelity for a prototype. For Openbravo 3, this ranged from pen & paper sketches to wireframes to Photoshop mockups to HTML clickable prototypes. The goal of these design deliverables is always to communicate the behavior of the application (feature, functionality) to the stakeholders and developers.

By making the prototype the ongoing spec it is always clear what is going to be built, whether it is going to work, whether the user understands it and whether the developer is able to build it. An example of a prototype that was produced to demonstrate the new master-detail interaction behavior is this clickable mockup. It was used for usability testing on end users but also by the development team to assess technical feasibility and to build a more sophisticated prototype that proved we could do it. You can read more about this approach in the excellent article Lean UX where Jeff Gothelf discusses why designers should get out of the deliverables business and back into the experience design business.

Letting UX work ahead of the development team together with using UX prototypes as the ongoing spec, is Agile UX at its best. We did this for Openbravo 3 and I can recommend this to every development team that works with UX practitioners.

Sticking to the Vision

Paolo Juvara already mentioned in his Emotional Review of the Openbravo 3 History that the final delivery of Openbravo 3 has stayed so remarkably close to the original vision and to be honest: this surprised me as well. When we first crafted the holistic vision for the user experience of the "future Openbravo", I could only hope that the final result would get "close enough" to the original design.

In most organizations, visions get blurred on the way and ideas bounce because of technical, organizational or even political disturbances. It would not be the first time that the final outcome of an assignment has not much to do with the initial customer´s request or idea. The worst of all cases is hilariously depicted in this classic. But we managed to defy all those evil forces and delivered what we wanted which says a lot about the innovative mindset of my Openbravo colleagues.

Shipping is all that matters

Good ideas are abundant, good products are not. We have always kept our feet on the ground and aligned our strategy towards shipping, because in the end that is all that matters.

On the way, we had fierce debates, disagreements and resistance but in the end we managed to find a solution that works well for most. You can't make everyone happy so we did not even bother trying. In fact you don't want everyone to be happy as this means your product is most likely so watered down that it can't be good. It's better to make 80% of the people very happy than 99% a little bit happy. Very happy users become fans and fans are loyal.

Big Thanks
I want to end this blog post with big thanks to Paolo Juvara (our CEO) and Ismael Ciordia (our CTO) who gave me the trust and freedom to design what is best for our users. The other big thanks goes to my amazing colleagues in the development team who made it all happen and all Openbravo community members who contributed so selflessly.

And now...

Get out there to try, download, implement, sell, share and enjoy Openbravo 3

Openbravo 3 - from Vision to Reality on Prezi

Embed Timetric data-as-a-service in Openbravo 3

2011-03-25T10:10:00.002+01:00

Imagine having access to over 3,000,000 statistics from official sources such as The World Bank and the Office for National Statistics that are always up-to-date. From Amazon cloud spot prices through Spanish unemployment figures to household internet access stats in Korea: It´s all publicly available on Timetric, a UK based Data-as-a-Service provider startup. Timetric aggregates the world's economic data from the best public sources and turns it into interactive charts.

These charts can give tremendous insight and help businesses make better decisions. But data alone is not enough: In these times of data obesity picking the appropriate sources, converting the incoming data into a digestible format and viewing it in the context of your internal data is as important as the data itself. Here is where the Openbravo 3 Workspace offers a solution. Workspace widgets let the user monitor internal as well as external data together in one place.

To embed the charts into Openbravo widgets you need to choose a chart on the Timetric site and click the embed button. Adjust the settings (key, design) if needed and then paste the html code in a User Defined HTML Widget on the Openbravo Workspace. The images below depict the steps to take.

FIG.1: Pick a data source on timetric.com and click the Embed button

FIG.2: Adjust settings and copy the HTML code

FIG.3: Add a User Defined HTML Widget to your workspace

FIG.4: Paste the code in the User Defined HTML Widget. Set height accordingly.

FIG.5: The Timetric chart will now be displayed in the widget

FIG.6: Some more widgets. Notice how internal and external data meet at the Openbravo workspace.

You can create your own Timetric chart by simply uploading an Excel sheet and there is a REST-based API to allow interaction with other applications. It would be great if someone in our community were to build an Openbravo-Timetric connector. This would allow us to publish Openbravo ERP data as a chart anywhere on the web.

Sneak Peek of RC5 Productivity Boosters

2011-03-11T10:27:00.002+01:00

You probably thought we are still recovering from our Openbravo 3, RC4 fiesta? Nope, we´ve been busy adding lots of cool stuff and are about to release RC5. Apart from stabilizing, increasing performance and fixing bugs, here are a few features that make RC5 a productivity booster.

Deep linking: copy a URL of the document you are looking at to your clipboard and share it with your colleague by email or IM. Super handy when you want someone to approve or review a document or for use in training or support. Tip: let the recipient paste the URL into the Quick Launch field of an active instance and the document will open as a new Openbravo tab in the active instance. Whop!

Recent Documents: a nice spin-off of deep linking is that Openbravo can now link to documents you have modified last. Also great for training or support purposes. Whoosh!

Smoother line entry: you can now keep on going while you create order lines. Just hit the enter key when you´re done with a line and Openbravo will create a new line below automatically. This also works when you´ve tabbed through to the last cell or hit the arrow down key. The context menu (right mouse click) also lets you insert, delete and undo changes. Ka-ching!

Keyboard shortcuts: make yourself familiar with them, because it will make you faster. You can now create an entire sales order using the keyboard only. Tak-tak-tak instead of click-click-click!

Date ranges: just click on a date column filter in the grid and set the range using human-friendly values such as "n days ago till today". Yay!

The devil is in the details and you will probably not even notice the other improvements to saving, closing, creating new forms and inserting new rows. This is how it should be: The less noise a GUI creates, the better it normally is. Sshhh!

Customize forms with the Form Builder

2011-03-03T19:54:00.002+01:00

Forms in transactional documents typically contain tons of fields. Looking at for example a sales invoice in our demo environment I count 18 fields, of which 10 are required (the yellow ones). Of those required fields, only two of them do not have a default value: Business Partner and Partner Address. Now, when you select a business partner, the address is automatically filled in.

This means that in this case, only ONE field needs undivided attention. The rest only needs to be verified in case the system was configured well. Some fields do not even need to be looked at in most cases, such as organization if you only work with one of them. The same goes for currency or even document number that should be correct by default when properly configured.

To reduce the cognitive load on our users we plan to simplify the default form layout by adding different fill colours, hiding read-only fields, increase the white space and apply a more logical order. In addition to that, we also would like to hide fields that are not important. For some fields it is easy to mark them as less relevant but for others, we cannot make this decision for you. That´s why we are thinking of creating a Form Builder that lets you choose which fields to show in pole position and which ones to tuck away in a collapsed section. In fact, this is similar functionality to what you already have in the new grids where you can show & hide and resize & order columns to your liking.

With the Form Builder, users now must be able to design their own form for each window type. Administrators can also design forms for other users, either per role or client. Changes are stored in the Application Dictionary.

I have produced a quick set of mockups to give you an idea. Let me know what you think, all ideas and feedback is welcome. React via Openbravo on Facebook, UX Labs on Forge or just drop your comments below the images.

A shiny new Openbravo 3 product logo

2011-02-17T09:52:00.000+01:00

A new product deserves a new logo. We have just finished the art work and are proud to share it with you.

It will serve as an identifier and emphasizes the importance of Openbravo 3. The "3" represents agility, openness, and speed, the gradient flirting with a retro-futurism. It also leans a bit forward. That´s where we want to go, right? We have put the agile erp in lowercase text because we have "tamed" ERP. From now on, the user is in charge.

You will find the logo soon (in the next few days) on the Openbravo 3 RC4 login page, on the demo site and through marketing communication. The product logo was designed by Volpus Design.

About About

2011-02-16T12:11:00.001+01:00

Just to let you know about the new About feature for widgets on Openbravo 3. Widget authors can now write a note to their users and add a link to their web site; an easy way to drive users to your business. For business partners this can be a great incentive to publish widgets.

The top section contains widget specific information, the bottom section shows the metadata of the parent module, which is taken from our central repository in the Openbravo Forge.

Author Message and Author URL are defined in the widget header.

The About feature was developed by Asier Galdos from Almis, another great contribution from our open source community. Thanks Asier!

About will be available in Release Candidate 4, to be released in the next few days.

A Great Community Contribution: Linked Items

2011-02-07T13:52:00.000+01:00

This morning a nice surprise awaited me in our Openbravo 3 test environment: Linked Items was added overnight and it works like a charm! This feature sits in a section in the form view and contains a list of all items that are related in the database. This is ultra handy of course if you - for example - quickly want to view all purchase invoices for a certain vendor or find all shipments for a certain product. A simple click on an item in the right column in the Linked Items grid launches the item on a new tab. This feature will be part of Openbravo 3 release candidate 4 which will be available mid February.

Linked Items was developed by Valery Lezhebokov, an active member in our Open Source community. We are very grateful for his contribution and hope to see more of his work in the future.

Testing Yammer, Chatter and Teambox

2011-01-31T10:09:00.000+01:00

Every couple of weeks I take the train from Barcelona to Pamplona. It is a four hour journey and although it seems quite long, I always enjoy the ride. Being offline lets me work without distractions on the more creative kind of stuff such as designing product features or writing blog posts. Or I just relax and listen to my iPod while watching the landscape blast by through the window.

A few days ago I was on my way to Pamplona once again and - following my ritual - after exactly 2 hours I decided to go for a coffee in the train cafeteria. While I got up from my seat, I noticed my colleague Xavi sitting right behind me! What a coincidence and how silly that I did not know he was (going to be) there. Using Facebook and Twitter, I know about the whereabouts and plans of many of my friends but I don´t always know what my colleagues are up to. So Xavi and I went for a coffee and donut and spent the following two hours talking about things that he and I were doing at the moment. We realized that our work activities have a lot of dependencies and that it would be good to know more about what other teams are doing. However, this is easier said than solved. The first problem is that none of us is really keen on planning meetings just to exchange information. The second problem is that many of us are geographically dispersed. Openbravo has staff in seven countries.

Would an internal social media application help to improve cross-departmental communication?

In the next few weeks a couple of colleagues and I will test Yammer, Chatter and Teambox. Actually we started this morning already with a couple of updates and I just learned that I have to bring back a tennis racquet to Barcelona this week when I return from the Pamplona office :-)

Thinking ahead, the next step could be to place one of these apps in an Openbravo Workspace Widget so you can use it directly from within Openbravo 3. Imagine how cool it would be to place links to Openbravo documents in status updates, such as "Jorge just received payment against invoice INV/010010". You would then just click that link and the document opens on a new tab.

Share your thoughts on the UX Lab forum.

Get your widget packaged in RC4

2011-01-13T16:04:00.000+01:00

Openbravo 3.0 offers customizable widgets that you can add to your workspace. In RC1 and RC2 we gave you static content, in RC3 we let you create simple widgets by pulling content from a URL.

For RC4 we will introduce two more types of widgets: HTML and Query widgets. This is were things get really exciting. The HTML Widget allows you to embed html code and the Query Widget lets you define a HQL Query with the columns to be shown. Here are two (real) examples, taken from a test server.

It does not take a lot of imagination to get an idea of the endless possibilities these widgets have. To give our users a glimpse of things to be had, we plan to include a set of cool widgets in Release Candidate 4. These would be role based so a sales person would e.g. get a widget showing the top 10 best customers by invoice amount and a finance person would see a pending invoices widget.

Now, we would like to ask you share your widget with us. The most useful (or coolest :-)) widgets will be packaged in RC4 so the whole world can enjoy them. You can either package them as a module and publish them on the Central Repository or just share the URL, code snippet or HQL query with us so we can paste them in.

You can share your ideas on the UX Lab forum. Bring them on!

Notes

Download this document to learn how to create Query and HTML widgets. Refer to the earlier How to Create Simple Widgets for the first steps on creating a simple URL widget.
RC4 is due for mid February 2011. Until that time, you can download the Query and HTML widget as modules to install on RC3.
To facilitate working with HQL (e.g. testing your HQL before pasting it in a widget) you can download and install the handy HQL Query Tool

How to create an Openbravo Workspace Widget

2010-12-02T16:06:00.001+01:00

In my last blog post, I presented you with 24 ideas for Openbravo Workspace Widgets but I have to admit that these images were a bit of a tease, using smoke & mirrors in Photoshop. So now let´s put the money where our mouth is and build them for real with the step-by-step guide below that shows you how to create a simple widget for the Openbravo Workspace.

Before you start, make sure you are running Openbravo 3.0 - RC3 (release notes here) in Firefox and that your are logged in as a System Administrator.

You will be able to build your own widget in less than 5 minutes and share them with your team. If you also want to register and publish your widgets as a module, see Appendix II in the guide.

Share your experiences on the UX Labs forum. Here you will also find some source URLs for a number of widgets: Calendar, Motion Chart, Google Insights & Google Docs. Just copy & paste this in your widget definition. Add yours if you find some nice ones.

Creating Openbravo Workspace Widgets

View more presentations from Rob Goris.

24 Ideas for Openbravo Workspace Widgets

2010-12-01T18:19:00.004+01:00

With Release Candidate 3 (RC3) we are one step closer to delivering the promise of Openbravo 3.0. In this blog post I want to focus on the most important change in RC3: Fully functional Workspace Widgets. I will give you 24 examples of all the cool things you can do with them.

In RC1 and RC2 the MyOpenbravo tab (from now on called: Workspace) already featured a set of static "fake" widgets that served as a preview of the real thing. In RC3, we have rebuilt them as components that are defined in the Application Dictionary and can be packaged as modules. This means that from now on you can start designing, developing and deploying widgets and share them with your team, company or the world. We will get you started with a set of out-of-the-box widgets but the real interesting ones will be developed by our community. Although our audience is different and smaller in volume than that for the iPhone or Android App Stores, I can´t help believing in a similar burst of creativity for our Openbravo Workspace Widgets. Everybody to whom I explained the concept of Workspace Widgets in the last months, instantly came up with amazing ideas, whether they be productivity enhancing, insight providing, process streamlining or just fun.

Through this blog post I want to get the creative juices flowing so here´s a bunch of raw ideas for Openbravo Workspace Widgets. Leave your comments below the images.

I am very excited to learn what you will come up with. Start building widgets now or first share your ideas here.

In a few days I will explain how to create a simple widget. [ update: here it is ]

Why Hybrid Selection is the right Selection Method for Grids

2010-11-15T11:23:00.003+01:00

Openbravo 3.0 release candidate 4 introduces an entire new interaction paradigm for document manipulation. Using a multi-level master-detail page layout it will be possible to view parent and child records, in either grid or form view, simultaneously. Both forms and grids have been redesigned as well and are optimized for the full document life cycle: creating, editing, processing, searching and comparing. One of the most dramatic differences with Openbravo 2.50 is that these tasks now can be done for multiple documents at a time through the multi-tabs GUI, in-grid editing and multiple objects selection in grids. In this article, I´d like to tell you about the different methods for object selection in grids and which method works best for our grids.

Grids consist of rows and columns. Each row represents a record and each column represents an attribute of that record. A single select in a grid is simply done by clicking on a row. The row will be selected and the screen will update all related information (e.g. children) to the selection. It is common to highlight the row to give the user a visual cue of what is selected. Multiple, discontinuous rows can be selected using a CTRL- (Windows) or CMD- (Mac) click combination. Multiple, continuous rows can be selected using a SHIFT-click combination. A combination of the above is possible using these key-click combinations but this is not recommendable as it is very easy to lose the selected set by clicking or pressing wrongly by mistake. This is especially the case when the selected set is out of sight because of vertical scrolling.

This is where the use of check-boxes comes in handy. Traditionally the preferred choice for multiple selection, they became "out of fashion" in the last decade in favor of other multiple selection methods. Now they´re back and we want to use them in a way that combines different selection methods:

Object Selection: The simplest method of direct selection: The user selects one object and manipulates it directly. For example, you select a folder (icon) and drag it into the trash bin on your desktop. This was quite a revolution in 1984 when Apple introduced their first graphical user interface. Command line interfaces (the standard at that time) used an indirect way of manipulation where you first had to define the action and then point to the object, e.g. deltree c:\myfolder.

Object Selection in early Mac OS

Toggled Selection: The user selects the objects using check-boxes (or toggle buttons). This is the easiest way of discontinuous selection. After the objects have been selected, you can do something with them (delete, process, move, etc.). Selecting a row without ticking the check-box does not select it.
An example of toggled selection can be found in Windows XP in the Add or Remove Windows components dialog. Only the objects that are ticked will be added/removed, not the highlighted row.

Toggled Selection in Windows XP

Collected Selection: This concept revolves around placing and accumulating selected objects in a separate bucket. In large lists or lists that span multiple pages, this is an easy way to see which objects already have been selected. We intend to use this for the multiple objects selector that has been discussed earlier.

Multiple Objects Selector concept using Collected Selection

From a usability point of view, this method would also be appropriate in grid selection but less so from a practical (space) point of view. In the 3.0 grids, we will use a snippet of the collected selection method though, by displaying the amount of objects selected in the top left of the grid.

Selection counter

Hybrid Selection: This is a combination of Toggled Selection and Object Selection. This is what we will use for the Openbravo 3.0 grids. In most cases, the user will select one object only, view its children, edit its attributes and apply a process to it. This is object selection. In other cases, the user wants to select multiple objects in a grid via toggled selection. This is where the rows get checked.

Single row selected via Object Selection

Single row selected via Toggled Selection

Multiple rows selected via Toggled Selection

Hybrid Selection recombines the best of three worlds resulting in more efficient document manipulation and lower error rates.

UX Storytellers: My Story about Wet Cats and Openbravo

2010-11-06T20:04:00.005+01:00

A while ago I was invited to write a story related to the User Experience domain in order to publish it in a book together with stories of other user experience professionals from around the world. Although I am still alive :-) I felt flattered to write my "mémoirs" and grabbed the opportunity to share what I have learned in my career. The book ‘UX Storytellers - Connecting the Dots’ is now ready.

My story starts with wet cats and ends with reflections on the challenges and rewards of designing the user experience for ERP software at Openbravo.

The hard copy will ship in January. For now, there is a free PDF download

‘The Wet Cat’ can be found on page 542 (Scribd) or page 571 (PDF)

Business Software is Boring

2010-10-20T09:27:00.001+02:00

Last night I attended the Barcelona Design Week event. The first night kicked off with a round table discussion about design management and speakers of sexy companies such as Google, Vodafone and Lékéu shared their opinions on the importance of design for their companies.

The fourth speaker was Prashanth Padmanabhan, product manager for human capital management software at SAP. He was the last to present himself and started with an apology that his products weren´t as exciting as those of the other speakers . He went as far as saying that the software that SAP produces is so boring that actually you want to minimize the time interacting with the software!

This made me smile because I can relate to this. In general most business applications are not much fun to use. Is this because business applications are per definition boring as they are used to execute work? I don´t buy this. For the work I´m doing, I use Adobe Photoshop a lot and I truly enjoy it. A pilot probably enjoys flying a plane and I cannot imagine cooks that do not like their knives and pots.

So what makes most business software so tedious to use that it can cause mental weariness? Here are a number of factors that come into mind when you think of "boring":

Impersonal: the software does not seem to care about you and does not want to adapt to you
Arrogant: the system treats you as if it´s your fault when things go wrong
Technology driven, not human: yes, the software runs on an application server, pulls records from a database using SQL and is written in Java but guess what, I do not care!
Fear of failure: the application does not give me confidence. I´m afraid of doing the wrong thing, losing data or looking like a fool to my colleagues
Does not speak the user´s language: why do I have to talk the system´s language? Who´s in charge here? Hal? Hal?
Hard to learn: unless my boss lets me do a one week course, it will be very hard to get to know the system
Gives information you don´t need: reminds me of the Windows XP message: "You have unused icons on your desktop"
Does not answer your questions: I´m sure the answer sits somewhere in the system, I just don´t know how to get it out
Inefficient: do I really have to do all this to complete my task?
Visually not pleasing: only moms like to look at ugly babies

At Openbravo we realized this a while ago and since then we have been working hard to improve the user experience and with our upcoming 3.0 release our users can enjoy a whole bunch of usability enhancements that will make working with our software much easier and perhaps even enjoyable.

Later I had a chat with Prashanth about his remark and he explained that SAP is also aware of this and that they are going to invest heavily in the end-user´s experience, rather than designing for decision makers who buy the software.

This is all good news. If we, as software designers, point and keep our focus on the end users, everybody will benefit. Our users will enjoy their work more, they will be more productive and will have more time left for creative and interesting tasks. The companies that employ them will see less employee turnover, more happy faces, less sick days, more employee-led innovation and will become more profitable at the end of the day.

Overview of 3.0 GUI Components

2010-09-30T14:27:00.001+02:00

Release 3.0 of Openbravo will be an exciting release with major improvements in the user experience. A few weeks ago we released 3.0-RC2 that contains only a small part of the total user experience redesign we planned for 3.0-Production (due for Q1 next year).

Over the last year I have shared a lot of material (e.g. scenarios, screenshots, flows, wireframes) with you but - as a community member pointed out recently - some of you might have lost the "bigger picture". So if you want to get an idea of what else is in store, then check out this overview of the 3.0 GUI components

Shipping & Invoicing in 3.0

2010-09-02T17:50:00.001+02:00

The Openbravo flows are coming your way!

In the Enhanced Sales Order project, that we aim to ship in 3.0 Core, it is all about redesigning the existing flows for ordering, invoicing and shipping. In an earlier post I have shared the adventures of Jim, the Computer Seller & Liz, the Order Taker with you and in the meanwhile I have also published scenarios for a sales director (Dan) and a customer carer (Amy). If you haven´t read their adventures and given your feedback yet, then please still do so. You will have to work with it in the end so you better speak up now or forever hold your peace :-)

The latest scenarios look at invoicing and shipping. Using the new 3.0 GUI framework, I have tried to model flows that are as flexible as possible. So you can first take a a sales order and then create an invoice against it, or maybe just for a few lines which means partial invoicing. Or you take a whole lot of orders and generate invoices for all of those at once, perhaps merging invoices for the same customer. Sometimes you want to invoice products, rather than entire sales orders because maybe you were only able to ship one product at a certain point in time. You then would want to create partial invoices for a whole lot of sales orders that contain that specific product. The same goes for shipments. Sometimes you first want to create a shipment document and then pick sales order lines to ship but this could also be done the other way round: first select a sales order (line) and then decide to ship it.

All this is of course dependent on the invoice and delivery terms for the customer. Our current processes and configurations are not always transparent and we need a redesign here as well.

Having said all this, let me ask you for now to look at the Shipping and Invoicing scenarios. There is a lot of complexity once you start looking at all the possible configurations and flows but I want to get the basics right first. Please help me in doing so.

Quick Line Picking & Price Lists

2010-08-10T09:47:00.001+02:00

As part of the 3.0 release which includes a redesigned Sales Order Flow, we are looking at the Copy Lines and Copy From Order functionality. From now on the two together will be called Quick Line Picking. During brainstorms the following ideas/issues surfaced:

Price list must be added as a filter as sometimes you want to pick products that never have been ordered before
Consumption days concept does not make much sense and is tucked away too deeply. Extend date range filter to more human ranges such as “last week” or “last quarter”
Most frequently ordered makes sense as it is likely that popular orders will be repeated
Most recently ordered makes sense as it is likely that recent orders will be repeated
Product category makes sense as a filter ("I only want to order hardware")
Show for each product the sales/purchase order they belong to. Clicking the order will open it on a new tab so you can peek into it and see the rest of the order
Use extra dedicated filters for the most important attributes. Use column filters for the less relevant filters
Set default filters to avoid massive volumes
Save filter settings for reuse per window type and user

We also thought of combining orders and lines in one grid, perhaps grouping them in expandable sections (Family Grid style) but the drawback is that the amount of rows in an expanded state can become excessive as it is a Cartesian product where every product is shown multiple times, as it belongs to multiple sales orders. In this stage I am not convinced about the real advantage of doing so, as selecting an entire order and then removing one or two products in the sales order lines grid afterwards is hardly an effort. However, a simplified version that used a column Last Order Used (page 18 in the PDF in the Forge link below) helps the user grouping products that belong to the last order.

I plan to keep Copy Lines and Copy From Order in separate windows (in fact, they are layers in 3.0 style) but the user can easily switch between them. I believe that a user either wants to select products from price lists or recent orders OR wants to reuse and merge all order lines from entire orders OR wants to duplicate a past order, including all its header and lines data. This last option can also be done in a grid by duplicating the row. So we´ll have three flavors to reuse order lines. The proposed solution tries to satisfy all three methods.

The Price List is the most important attribute in order line picking. The Price List is now set in the header. The lines to pick should have it as a default filter, although it should also still be possible to choose products from other price lists. The Price List Version is currently not used in the header. The new proposal does have it in the header although I am not certain if this is a good idea or not, so help me out here.

Then there is a whole set of business logic we need to rethink when adding products from a non-default price list or even more than one, which can get quite complicated when products exist in more than one price list.

I have attempted to model all of the above thoughts in an extended sales order scenario, see the first PDF document via the link below. The second PDF shows some background on Price Lists. I also noticed that the price list setup is very tedious. We must tackle this as well at some point but let´s first focus on the sales order flow.

Please have a good look and let us know if this all makes sense to you. Find the proposed solution and the discussion thread on this Forge forum.

Openbravo ERP 3.0 - Release Candidate 1 is available for download

2010-07-23T13:51:00.002+02:00

Release Candidate 1 is our first step towards Openbravo ERP 3.0. It is an early release that is comparable to a pre-alpha release. It gives a sneak peek into what is coming in 3.0 but be aware that this release candidate is largely incomplete. In fact it contains only 39% of the functionality we plan for the 3.0 core delivery.

It sports tabs, quick launch menus, a new application menu and a first stab at the My Openbravo portal page. In addition to the new GUI, we also introduce:

A narrowed down scope based on the key flows
New standard roles (discuss)
Redesigned financial flows, including advanced payables and receivables management (discuss)

View some screenshots, read the release notes, download the virtual appliance, run it in our demo instance online (Openbravo/openbravo) and discuss it all on the early release forum.

Enjoy!

The Family Grid - part II

2010-07-12T14:19:00.004+02:00

Simple, real-time business intelligence by manipulating grids

Reporting is an essential part of everyday business and therefore an essential part of an ERP. Today´s businesses need relevant, up-to-date, accurate and consumable metrics that help them make the right decisions. Traditionally, reports are generated once in a while (month, quarter) and are exported to PDF for printing & annotating or Excel for further manipulation. Reports are used in presentations and meetings to look at past performance, understand the status quo and project future performance. The danger lies in the choice of dimensions and the interpretation of the data. Reports are static and generated as a one-off document with a set of dimensions, normally defined by a ready-made SQL query or via a visual query builder. Openbravo´s Sales Dimensional Reports allow the user to choose a number of filters and dimensions and even the sorting order can be set. This works well if the user knows in advance what metrics she is looking for and what data set she wants to look at. The drawback is that it does not allow analyzing the data in realtime by changing the filters and dimensions and looking at the impact on the results while doing so.

A while ago, in the Family Grid, I have presented a fairly abstract idea for basic business intelligence functionality by combining parent and child data in one grid, joining grids and filtering and aggregating columns. Now, I´d like to show you a more simplified version of this idea.

The Family Grid II scenario (download it here) lets the user view sales orders in one grid and a set of order lines for all of these in the other. Both the sales order grid and the order lines grid can be filtered on any attribute using column filters. Columns containing numerical values can be aggregated (sum, count, average, median). The grids can be joined (inner or outer join) with the click of a button which, for example, lets the user find all sales order that contain a certain product (or all sales that do not contain that certain product). Final result sets can be exported to Excel or PDF and the view (which is in fact a query rather than a report) can be saved for reuse.

It should be noted that this approach does not intend to replace traditional reporting because many SQL queries just cannot be build using the Family Grid. However, I believe that this way of manipulating grids is very powerful and can lead to insights that can be hard to discover using traditional one-way reporting. Playing with a data set in real time using parent and child grids, filters, aggregations and joins with an easy-to-use GUI lets non-expert users unlock the power of data in an ERP without having to invest in hi-end business intelligent software.

Are you as convinced as I am about the business value of this feature? Discuss it here.

By the way, we´re not happy with the name of this functionality. Family Grid does not cover it really. What about RapidGrid, GridSift, PowerGrid, Data Distiller, Metrix, EasyAnswer, RapidAnswer, IntelliGrid, "Openbravo RapidEdge Edition – the fastest way to start a competitive edge", "PerfectGrid - the fast & simple way to your information"?

New Multiple Selection Widget Proposal

2010-07-08T18:29:00.005+02:00

Check out this concept for a selector that allows for multiple object selection. It´s a hybrid between toggled selection (using checkboxes to select multiple and discontinuous objects) and collected selection. See how it works.

To Stretch or Not to Stretch

2010-07-08T16:48:00.005+02:00

In this stage we´re almost done with the HTML for the forms and grids for the 3.0 GUI. We´ve built two versions for the forms:

1. Fixed width fields. Example here

2. Relative width fields: depending on screen resolution, the fields will be stretched. Example here

Both have pros and cons. Fixed width fields are easier to scan (especially on wide screen monitors) and I suspect them to be faster in use (although the difference may be insignificant). Relative width fields allow for long value input, without the value (string of characters) being cut off. Nothing more annoying than not being able to distinguish a value because the most distinguishing characters are at the end, just outside the field.

There is even a third option: variable length input fields are pretty cool as well but I´m afraid of a creating messy forms when fields stretch individually so in case you wanted to suggest this: Don´t :-)

Also, the tab order in these demo sites follow the html by default, which is up to down. The current OB form tab order goes from the left to the right. What works best for you?

I would like to hear you opinion & experiences on both topics. Drop you reactions here.

Openbravo San Fermin: Let the Bull run through your Company

2010-07-05T11:13:00.010+02:00

Pamplona is the birthplace of our flagship product Openbravo ERP but it is probably better known for its yearly San Fermin festival where millions of people gather to watch the famous encierro, the running of the bulls. This year we wanted to share a bit of local pride with you by letting the bull run through your company as well. We´ve created a San Fermin skin that can be downloaded as a module and applied to your instance. Find the instructions here.

We´ve also painted our demo site red (http://demo.openbravo.com) , go have a look!

A special thanks to Miguel Rodriguez Font who created the bull logo, beautifully crafted using graphic characters only.

Attend a UFO on ESO

2010-06-14T13:01:00.003+02:00

In plain English this means: Hereby I invite you to participate in a series of User Feedback Opportunities (UFOs) on the Enhanced Sales Order Flow redesign project (ESO) we have started recently.

The objective of these sessions is to gather feedback on our design work. Using the input given, we can then modify, improve and tweak iteratively, leading eventually to a high quality, tested and low-risk design that will be used in Openbravo ERP 3.0.

The dates are as follows:
--------------------------------------------
Wednesday June 16th, 11.30-12.30h
(replacing Product Development meeting)

Jim, The Computer Seller
Download Scenario here
--------------------------------------------
Friday June 18nd, 11.30-12.30h

Liz, The Order Taker
Download Scenario here
--------------------------------------------
Wednesday June 23th, 11.30-12.30h

Dan, The Sales Director
Download Scenario here
--------------------------------------------
Friday June 25th, 11.30-12.30h

Amy, The Customer Carer
Download Scenario here
--------------------------------------------
It is necessary to download and review the materials prior to the sessions. For every session we will use one scenario (images + story) in a PDF document. Having this document open or printed is recommended to make it easier to refer to the images.

The sessions will be held through IRC** on irc://freenode/openbravo and the sessions will be open to all. Feel free to invite business partners, colleagues or end users with an interest in sales orders.

Hopefully I will "see" you online on one (or all!) of these dates!

Rob Goris, User Experience Architect - Openbravo

**For those of you who are not familiar with IRC chatting:

The easiest way is to use the webchat from irc.freenode.net, and you don't need to install anything.

* Go to: http://webchat.freenode.net/
* Pick a Nickname
* Channels: #openbravo

You can also install Chatzilla as an extension for Firefox:
You can install Chatzilla via:
* Tools - Add-ons - Tab Get Add-ons - Enter Chatzilla in search box
* Once installed: Tools - Chatzilla
* In Chatzilla, enter:
/attach irc.freenode.net
/join #openbravo

Sales Orders with Jim & Liz

2010-06-10T12:38:00.004+02:00

We are going to follow two of our protagonistas in real life sales order scenarios.

Jim works in a large electronics store and is selling a BigBook Pro computer to an initially unknown customer. The quote and sales order is created. The stock is checked, the delivery address is entered. The order and invoice are paid on the spot in cash.

Liz works in the financial department as an administrative assistant. She receives an email from her colleague, a sales person with a sales order attached. Liz is now going to enter this sales order in Openbravo ERP.

Both Jim and Liz spend a lot of time doing this type of activities. For them it is crucial to have an ERP that lets them create sales orders the easy, fast and smart way.

Check out the scenarios and let us know whether you think we are doing the right thing for our imaginary friends.

New Sales Order Flow

2010-05-27T10:15:00.010+02:00

We are redesigning the Sales Order flow. This will be done from scratch, starting with customer stories, user research and process modeling. Then we´ll produce mockups that will be shared with you for feedback. The redesign will use 3.0 GUI design patterns and technology.

I´d like to ask you to share ideas, requirements, suggestions and pains here.

My Openbravo: The First Version

2010-05-06T15:15:00.005+02:00

We are now looking at the first tab in the Openbravo ERP 3.0 GUI. It will contain a My Openbravo workspace. This should contain a set of portlets/widgets displaying metrics, links, applications or charts. Think of a portal similar to iGoogle, NetVibes and My Yahoo! where the user can decide what to show.

Have a look at the My Openbravo page and a version that shows how to edit.

It should work roughly as follows:

Left column is filled with links to recent documents and views. Clicking them opens a new tab and takes the user there. Recent views also have Create New links.
Below that we see two links that let you add widgets. The link Add Library Widget most likely opens a listbox with the available widgets. The link Add Feed Widget opens a dialog where the user enters a URL pointing at an RSS feed.
What´s in the widget is not really the important point now, but I have created some examples that you can find in the presentation mentioned below.
In the widget header there are two buttons: maximize and edit. Edit will pop out a little green menu that shows a number of options to move, edit and delete the widget. The first menu option Edit this widget will invoke the bigger green panel (as shown in the Invoiced widget) where attributes can be modified. In this case the user can set the time range.
Consultants should be able to create (or modify) widgets where grids are shown with a number of columns/attributes, possibly cheered up by a graph. The consultant then also determines which attributes can be set (when the user clicks edit).

As a first set, I would propose to produce at least one grid-chart widget, an RSS feed widget, alerts and saved searches.

Find a more elaborate PDF presentation and leave your feedback here.

Bed Time for the Click and Scroll Myths

2010-04-30T09:38:00.008+02:00

In site or application design, it is recommended to use best practices, rules-of-thumb and proven principles. User experience specialists validate most of their ideas and designs using those. In case they can't find any, they mostly resort to usability testing, trying to prove that something works or not.

Over the years, some of the rules-of-thumb have seeped through to the broader audience and are now widely used and abused. Some classic examples are: "Flash is Bad", "Frames Suck", "People don’t scroll!” and the most obstinate of them all must be "I should be able to find everything on a site in just three-clicks!".

The first two claims at least can be defended with reasoning and by the simple fact that Jakob Nielsen´s words are not to be disputed. The claims that user don´t scroll and that every page must be reached within three clicks are myths. There is no scientific proof or sound reasoning behind them.

In the case of scrolling, some 15 years ago many first time web users had to get used to content being spread out over a larger vertical area that needed scrolling to be viewed. Now, in 2010, it is not hard to assume that people learned how to use a mouse. Obviously, for advertising, being above the fold makes sense as more people will see your ad when landing on the page (where else are they going to look?). In the context of user tasks, users are willing to scroll, although they say they don't. Even Jakob Nielsen succumbed in 1997 and wrote that scrolling is now allowed.

My favorite myth is the Three-Click-Rule. In countless discussions with clients, management and developers I have heard this "argument" being used. I confess that I even shamelessly used it against others when it served me well. I have always kept my mouth shut when The Myth was used against me when designing e-commerce sites because it always made sort of sense to me to get that 12-piece knife set in gift wrapping as soon as possible in the basket and checked out before the customer changes her mind. And even in this case research has shown that The Myth does not hold true. User Interface Engineering (UIE) conducted an analysis showing that there wasn't any more likelihood of a user quitting their purchase process after three clicks than after 12 clicks. In the same analysis we can find that user satisfaction does not suffer with more clicks either: Fewer clicks do not make more satisfied users.

So, user frustration and success rates in task completion do not depend on the number of clicks. Nor do they rely on not having to scroll. What really matters is that users can find what they are looking for, which depends on many factors such as flow, layout, interaction and visual design. If users find what they are looking for in a logical (and therefore effortlessly reproducible & memorizable) manner, both success rates in task-completion and user satisfaction will be higher.

Most - if not all - of the research on these topics was conducted on web sites rather than applications but I suspect little difference in its applicability. In the case of business applications, such as ERP software, we need to be a little bit more careful because of the factor productivity. Productivity is output per unit which in most cases can be captured as work per time unit. This is where speed comes in. In our case, the speed of operation of the user is very important. It depends on the response time of the system and the user interface. The first is a purely technical matter; the second depends on the GUI design. I believe that the number of clicks and the amount of scrolling has little impact on the user productivity as long as the user has easy access to all information that is needed for the task at hand and all steps in the task flow are logical, predictable and reversible. Also: providing defaults, offering validation, saving preferences and supporting different modes of seeking information boosts user´s productivity.

If we look at an example of creating a sales order: Most of the time spent executing this task is spent on finding documents and entering and validating field values, either for headers or lines and in grids or forms. The time spent on clicking and scrolling is negligible compared to that. Making sure the user finds the right documents, processes, forms and fields and making sure that she performs the process steps in the right order without making mistakes is much more important.

Another great productivity enhancer is using keyboard shortcuts. Here the same applies: the amount of key presses is not very important, the underlying logic is.

There is nothing negative to be said against trying to minimize the amount of mouse clicking or scrolling, it even helps designers rethink their solutions and simplify process steps. They just should not be used as a rule or best practice. Let´s put these click and scroll myths to bed and start focusing on good design.

Photo courtesy of Thad Zajdowicz

Test Drive the new Selector

2010-02-15T15:51:00.016+01:00

Selecting an object such as a business partner or a product "on the fly" while editing a form is a frequent task. In the current ERP we support this by providing a UI Selector that lets you choose the object using filters in a popup. The solution we have used so far is very powerful but not very usable. Clearing filters is awkward and it does not support suggestions or any other assistance in speeding up the filtering process.

With the new UI Selector we believe these problems will be past tense. Using SmartClient technology we have built a UI Selector that makes use of suggestions (using live filtering) and applies column filtering in the grid.

We have created a test instance where you can play with the new selector.

Go to http://79.125.36.179/openbravo/security/Menu.html

Log in with selector/test

Navigate to Sales Management > Transactions > Sales Order. The business partner and product selector have been enabled for the sales order header and line.

You can use the following keyboard shortcuts:

Ctrl-enter opens the popup /layer
Alt-arrow-down opens the suggestion dropdown

The new selector can be defined without programming. The definition is done in the application dictionary similar to windows and tabs. Selectors can be changed at runtime by a consultant without re-starting the system or re-compiling.

We intend to initially publish this as a commercial module and later open it up to the whole community as part of Openbravo ERP 3.0.

Let us know your findings on the UX Lab.

A Christmas Carol: Advanced Payables and Receivables Management Redesigns

2009-11-24T22:37:00.007+01:00

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

2009-08-27T10:09:00.008+02:00

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

2009-08-11T18:09:00.003+02:00

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)

2009-07-07T17:44:00.011+02:00

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 OpenOffic.org. 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
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.

Processes
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 OpenOffice.org'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)

2009-06-23T14:44:00.022+02:00

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.

Data

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.

Processes

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

2009-06-12T15:54:00.007+02:00

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

2009-06-08T17:10:00.016+02:00

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

2009-05-21T09:32:00.004+02:00

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

2009-05-10T22:12:00.010+02:00

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?

2009-04-23T09:15:00.008+02:00

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

2009-04-14T15:49:00.016+02:00

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

2009-04-03T11:57:00.013+02:00

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

Concepts for Openbravo ERP Redesign

2009-02-11T11:11:00.001+01:00

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

What And How Do You Search?

2008-12-02T12:59:00.001+01:00

This question is so essential that it feels like asking you to describe how to make coffee. We have confidence in the best practices of coffee making but we would like to study your search behaviour when using ERP software. This will help us understand the problems and needs you have which will serve as input for a redesign of the search functionality.

This is the first part of a series of User Feedback Opportunities (UFOs) on Search & Filter. I do not want to throw lengthy surveys at you in this stage but wish to start an open discussion on this topic to get a high level understanding of your main search tasks. To facilitate the discussion, I have created four high level questions below with each four ideas to get you started. Later on, I will start showing you design concepts.

When replying please start commenting each idea with a rating: Very Unimportant, Unimportant, Neutral, Important, Very Important and try to vary (you shouldn't rate everything Very Important). This session wants to generate discussion so please type away: all ideas and feedback are more than welcome. Please note that many tasks become routine over time. This applies to coffee making but also to using ERP systems, so try to step away from what you currently do and focus on how you would like to do it.

A. Types of objects I search for

1. Records (such as business partners, products, invoices). And which identifier would be easiest to use in searching them?
2. Reports. And which identifier would be easiest to use in searching them?
3. Functionality in the application, such as items in the left navigation in Openbravo ERP.
4. A mixed bag of objects in- and outside my ERP system: records, reports, invoices, documents (even locally stored), the web, the CRM system, email, intranet.
5. Other, please describe

B. How I would like to search

1. Using one keyword field. When there are too many results, I would use additional filters to narrow down the result set.
2. Searching records “globally” across all tables. I would not have to go first to a Products view to search for a product but I could do it from anywhere.
3. Building complex QBE/SQL based queries to get an exact search result in one go.
4. Browsing the grid by scrolling through the records and optionally applying column filters.
5. Other, please describe

C. How often I execute recurring search tasks

1. I frequently execute the same searches again and again
2. I would like to be able to save search queries or have the system suggest queries to me that I frequently use.
3. I frequently work with the same objects (such as records) again and again
4. I would like to use certain views again for my search results, such as a grid with specific column order, visibility and filtering applied to it.
5. Other, please describe

D. What I would like to do with the search results

1. I would like to be able collect objects out of different search result sets and group them, for example by customer.
2. I would like to be able to compare objects.
3. I would like to be able to bookmark individual objects
4. I would like to be able to bookmark all objects in the search results
5. Other, please describe

Note: When we speak about “I”, we mean you or your customers. Feel free to forward this post to your customers.

Participate in this discussion now on the Openbravo UX Lab forum.

Thanks!

Welcome to the Openbravo User Experience Lab

2008-11-12T12:22:00.000+01:00

Let me introduce myself and the Openbravo UX Lab forum. My name is Rob Goris and I joined Openbravo recently in the role of User Experience Architect. This is a new position at Openbravo and this appointment is a clear sign that the company wants to move towards User Centered Design.

So what is User Experience (UX) and how can we, together, create a world class user experience for our product? UX is defined as the creation of the architecture and interaction models which impact a user's perception of a system and is an umbrella term for the following activities:

Information architecture: conceptual structure and logical organization of information; think navigation, taxonomy, findability
Interaction design: high level design of the application, flows and pages; think wireframes and design concepts
Usability engineering: usability testing, focus groups, heuristic evaluations, questionnaires, essentially everything needed to understand the users and involve them in the design process.
Visual design: the look and feel of the application that includes the page layout, composition, graphics, icons, use of colors, typography

UX can never be done in isolation and that's why we need your voice. You are the ones using our products every day to keep your businesses going and I am sure you have great feedback as to how we can improve usability. This post is an invitation for all of you to share user pain and ideas related to the GUI and usability. I am here to convert your voice into a more user-friendly product.

Occasionally, will also reach out to test new ideas or designs and will ask for your opinions. Open source software is User Feedback Heaven as there is direct access to a large community that shares the common goal of building a world class ERP software.

Welcome to the Openbravo UX Lab forum. I am looking forward to all your feedback. Make sure to speak up!

I can also be reached by email: rob dot goris at openbravo dot com.

Comic courtesy of OK/Cancel(Click to enlarge)