Rob Goris
Author Archive

Rob Goris

Image_Placeholder_Openbravo_Tech_750x375_v02
guidelinesinteraction designprototyping

Openbravo’s modular architecture makes simple development of extension modules possible. Modularity allows people to develop extensions and to distribute them independently, as well as to leverage distribution channels.  The number of availab…

Read More
Image_Placeholder_Openbravo_Tech_750x375_v02
User Interface

Openbravo’s modular architecture makes simple development of extension modules possible. Modularity allows people to develop extensions and to distribute them independently, as well as to leverage distribution channels.  The number of availab…

Read More
Image_Placeholder_Openbravo_Tech_750x375_v02
Mobility

After announcing our plans for a mobile solution of Openbravo 3 last year, we decided to first launch the Openbravo for Retail solution with Web POS as the primary mobile interface. Having delivered, we now continue working on the core mobile Openbravo…

Read More
Image_Placeholder_Openbravo_Tech_750x375_v02
visual design

With the technology and interaction design well on their way, we´re now about to close the graphical design phase for Openbravo Web POS. It’s going to look like no other Point of Sale you have seen before and sets a new design direction for Openbravo Mobile and Retail. Here’s the design rationale.

Minimalist & direct: Openbravo Web POS features a minimalist design inspired by De Stijl and the Metro design language, that prefers content over GUI chrome. It uses straight and rectangular forms and is strongly typography based. The user is encouraged to interact directly with labels. For example, to add an item from the product catalogue, you just click the label (1). To reduce the amount, you just click the amount (2). There is no need for additional buttons and a minimum amount of taps is needed.

Light & flexible: Elements float on top of a background, emphasizing the lightness and flexibility of a web based application where the presentation layer is separated from business logic and data.

Optimized for modern touch screens: The new design makes use of modern touch screen capabilities that are offered by consumer devices such as the iPad but also increasingly by more industrial terminals. Products are browsed by swiping lists rather than using tedious next/previous or scroller bars. These are only rendered in case of older touch screens or mouse/keyboard operated keyboards.

Happy to be personalized & customized: Openbravo Web POS runs on anything with a browser – which means it must look good on all platforms and devices. It should also blend in with the retailer’s shop and brand. The open architecture and use of standard web technology (HTML5) allows for easy adaptation for specific environments and even without coding, personalization should be easy. Colors and backgrounds can be matched with the company’s corporate identity and adjusted to temporary themes.

Playful and proud to be seen: Most POS GUIs are dull looking, which is a missed opportunity because the exposure of these systems to staff and clients is high compared to other back end systems. POS systems take central stage in most restaurants and bars and retailers more and more let their customers co-interact with the system. Openbravo Web POS wants to be an appealing, fun and professional piece of software that staff and customers love to use and show. Nifty little design details such as the folded corner, animations, illustrations and intelligent messaging add to the experience. The exposure of the POS GUI to staff and customers is also an opportunity to communicate with them, through the GUI itself (e.g. branded themes), the message area (for staff) or the customer display (for customers).

Here’s the full set.

Read More
Image_Placeholder_Openbravo_Tech_750x375_v02
User Interface

With the technology and interaction design well on their way, we´re now about to close the graphical design phase for Openbravo Web POS. It’s going to look like no other Point of Sale you have seen before and sets a new design direction for Openbravo Mobile and Retail. Here’s the design rationale.

Minimalist & direct: Openbravo Web POS features a minimalist design inspired by De Stijl and the Metro design language, that prefers content over GUI chrome. It uses straight and rectangular forms and is strongly typography based. The user is encouraged to interact directly with labels. For example, to add an item from the product catalogue, you just click the label (1). To reduce the amount, you just click the amount (2). There is no need for additional buttons and a minimum amount of taps is needed.

Light & flexible: Elements float on top of a background, emphasizing the lightness and flexibility of a web based application where the presentation layer is separated from business logic and data.

Optimized for modern touch screens: The new design makes use of modern touch screen capabilities that are offered by consumer devices such as the iPad but also increasingly by more industrial terminals. Products are browsed by swiping lists rather than using tedious next/previous or scroller bars. These are only rendered in case of older touch screens or mouse/keyboard operated keyboards.

Happy to be personalized & customized: Openbravo Web POS runs on anything with a browser – which means it must look good on all platforms and devices. It should also blend in with the retailer’s shop and brand. The open architecture and use of standard web technology (HTML5) allows for easy adaptation for specific environments and even without coding, personalization should be easy. Colors and backgrounds can be matched with the company’s corporate identity and adjusted to temporary themes.

Playful and proud to be seen: Most POS GUIs are dull looking, which is a missed opportunity because the exposure of these systems to staff and clients is high compared to other back end systems. POS systems take central stage in most restaurants and bars and retailers more and more let their customers co-interact with the system. Openbravo Web POS wants to be an appealing, fun and professional piece of software that staff and customers love to use and show. Nifty little design details such as the folded corner, animations, illustrations and intelligent messaging add to the experience. The exposure of the POS GUI to staff and customers is also an opportunity to communicate with them, through the GUI itself (e.g. branded themes), the message area (for staff) or the customer display (for customers).

Here’s the full set.

Read More
Image_Placeholder_Openbravo_Tech_750x375_v02
interaction designmethodologyprototypinguser research

A week ago I started to search for a mock-up tool for tablets. What I wanted to do is to use a set of ready-made page designs and add interactivity to make it come alive. This is business as usual for desktop: I have been doing this for years in tools as simple as Powerpoint or in Dreamweaver by just dropping image maps (linked hotspots) on top of bitmap images. It turned out to be quite hard to find similar tools for tablet and mobile.
The whole point of an interactive mock-up is that it gives the user the impression that they are dealing with a fully functional application. Interactive mock-ups are used to test a much more detailed version of your application design than you would do using wireframes. The difference between mock-ups and wireframes is in the level of maturity. Wireframes are used to communicate the functional flows, the specifications and the layout of an application with very low fidelity. Most designers intentionally draw wireframes in black and white using sketchy lines to make sure their audience understands that everything is still rough. Mock-ups are the next iteration of wireframes. They add more look & feel, interactions, color and graphical elements. Ultimately there is the prototype which is a first real implementation of the design intent. It is developed by engineers and it aims to prove that the technology can do what the designers had in mind.  Here´s an image showing the different stages:
The different stages in application design
Application design comes to life in the mock-up stage and the user – or client – may even think the application was built already. Let me just give you a tip as a side note: Always make sure to communicate that in this stage not a single line of code was written yet and that everything is just smoke & mirrors.
There are plenty of wireframe tools on the market for PC/Mac but also web based applications that do a good job. Here´s an overview of a few years ago that is still valid as things have not changed that much. Good quality wireframe apps for tablets are thinner on the ground and it really gets hard to find a good interactive mock-up builder. Deceptively, most wireframe apps for iPad promise easy image importing but fail on the delivery. Images either have a maximum size, a maximum amount (e.g. ProtoTap) or just can´t deal with full-size rendering in high quality  (e.g. iMockups). Also, when you need to use your mockup for usability testing, you don’t want disturbing toolbars that come with the app, as they distract the user who can’t distinguish between the controls of your app and the mock-up app. Most mockup tools just don’t seem to be designed by designers.

In theory, you could create interactive mockups in HTML (images + hotspots) the same way for tablet as you would do for desktop. The problem however, lies in the playback. The iPad does not allow users to run local html files in the browser, an annoyance of iOS. Android is more flexible but here we run into the second problem: Images are not scaled optimally in the browser which results in nasty slider bars appearing.
So after wasting too many euros on useless – for my purpose – wireframe apps in the App Store (it´s a shame that you can´t return an app if it doesn’t do what it says on the tin), I finally found a decent interactive mockup builder app in the business category; a place where I did not expect it. Don´t get fooled by the boring name but mind you: Presentation Link  is quite an exciting find for interaction designers that need to test their work on users. Presentation Link lets you import your images (or PDF presentation) from Dropbox or iTunes. You can then add transparent hotspots on top of these images that turn dead pixels into interactive components. Just draw a rectangle on top of (an image of) a screen element and tell it which slide should appear next when tapping it. By adding enough images that represent different scenarios, you can get very close to the behavior of the final application. Here´s a little demo of Presentation Link:

 
How to create a simple interactive mockup

Presentation Link might actually disappoint tablet users that are looking for a fully fledged presentation maker à la Powerpoint or Keynote but this was obviously not the intention of Zuhanden GMBH, the authors of this tool. Knowing that slick presentations and interaction designs are much better produced on desk/laptop computers, Presentation Link just imports external beauty, links it together in a non-linear way and presents high quality, snappy clickable mockups that can be used for usability testing and demonstrations.
Read More
Image_Placeholder_Openbravo_Tech_750x375_v02
Mobility

A week ago I started to search for a mock-up tool for tablets. What I wanted to do is to use a set of ready-made page designs and add interactivity to make it come alive. This is business as usual for desktop: I have been doing this for years in tools as simple as Powerpoint or in Dreamweaver by just dropping image maps (linked hotspots) on top of bitmap images. It turned out to be quite hard to find similar tools for tablet and mobile.
The whole point of an interactive mock-up is that it gives the user the impression that they are dealing with a fully functional application. Interactive mock-ups are used to test a much more detailed version of your application design than you would do using wireframes. The difference between mock-ups and wireframes is in the level of maturity. Wireframes are used to communicate the functional flows, the specifications and the layout of an application with very low fidelity. Most designers intentionally draw wireframes in black and white using sketchy lines to make sure their audience understands that everything is still rough. Mock-ups are the next iteration of wireframes. They add more look & feel, interactions, color and graphical elements. Ultimately there is the prototype which is a first real implementation of the design intent. It is developed by engineers and it aims to prove that the technology can do what the designers had in mind.  Here´s an image showing the different stages:
The different stages in application design
Application design comes to life in the mock-up stage and the user – or client – may even think the application was built already. Let me just give you a tip as a side note: Always make sure to communicate that in this stage not a single line of code was written yet and that everything is just smoke & mirrors.
There are plenty of wireframe tools on the market for PC/Mac but also web based applications that do a good job. Here´s an overview of a few years ago that is still valid as things have not changed that much. Good quality wireframe apps for tablets are thinner on the ground and it really gets hard to find a good interactive mock-up builder. Deceptively, most wireframe apps for iPad promise easy image importing but fail on the delivery. Images either have a maximum size, a maximum amount (e.g. ProtoTap) or just can´t deal with full-size rendering in high quality  (e.g. iMockups). Also, when you need to use your mockup for usability testing, you don’t want disturbing toolbars that come with the app, as they distract the user who can’t distinguish between the controls of your app and the mock-up app. Most mockup tools just don’t seem to be designed by designers.

In theory, you could create interactive mockups in HTML (images + hotspots) the same way for tablet as you would do for desktop. The problem however, lies in the playback. The iPad does not allow users to run local html files in the browser, an annoyance of iOS. Android is more flexible but here we run into the second problem: Images are not scaled optimally in the browser which results in nasty slider bars appearing.

So after wasting too many euros on useless – for my purpose – wireframe apps in the App Store (it´s a shame that you can´t return an app if it doesn’t do what it says on the tin), I finally found a decent interactive mockup builder app in the business category; a place where I did not expect it. Don´t get fooled by the boring name but mind you: Presentation Link  is quite an exciting find for interaction designers that need to test their work on users. Presentation Link lets you import your images (or PDF presentation) from Dropbox or iTunes. You can then add transparent hotspots on top of these images that turn dead pixels into interactive components. Just draw a rectangle on top of (an image of) a screen element and tell it which slide should appear next when tapping it. By adding enough images that represent different scenarios, you can get very close to the behavior of the final application. Here´s a little demo of Presentation Link:

 
How to create a simple interactive mockup

Presentation Link might actually disappoint tablet users that are looking for a fully fledged presentation maker à la Powerpoint or Keynote but this was obviously not the intention of Zuhanden GMBH, the authors of this tool. Knowing that slick presentations and interaction designs are much better produced on desk/laptop computers, Presentation Link just imports external beauty, links it together in a non-linear way and presents high quality, snappy clickable mockups that can be used for usability testing and demonstrations.
Read More
Image_Placeholder_Openbravo_Tech_750x375_v02
User Interface

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

Read More
Image_Placeholder_Openbravo_Tech_750x375_v02

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.

Read More
Image_Placeholder_Openbravo_Tech_750x375_v02
featuresform designinteraction design

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

Read More