The Family Grid

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

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)

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)

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

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

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

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.