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

Try a Clickable Prototype

Thursday, May 21, 2009

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

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

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

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

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

Choose your Super Hero: Grid Splitter or Kompressor

Sunday, May 10, 2009

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

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

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

Choose your favorite super hero now!

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