Openbravo Mobile Web Preview (Web POS example)

We've just released an 11 minute long video showing off our Web POS (Point of Sale). Enjoy!

Ya tenéis disponible un vídeo de 11 minutos que os muestra el nuevo TPV (Terminal Punto de Venta) en entorno Web. ¡No te lo pierdas!

ENGLISH

CASTELLANO

Web POS Graphical 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.

Openbravo Web POS

The last month we have been working in stealth mode on the Web Point of Sale (POS) project so you may not be aware of what this is all about. Good things need to be shared and stealth is stupid, so let me give you an update on the latest exciting developments for retail.

What is Openbravo Web POS?

• Openbravo Web POS is intended for multi-store retail businesses. The solution will be modular, providing a full list of advanced functionality to cover all requirements needed from the point of sale, store management, to the central head quarters.
• Openbravo Web POS will have an agile, flow oriented, best of breed web user interface oriented to tablets and touch screen systems. The solution aims to provide a highly satisfying staff and customer experience but also needs to be easy to customize and personalize by business partners and end users.
• Openbravo Web POS is an enterprise level solution that is fully integrated with the ERP using one logical data model. It is also highly scalable and offers web services to expose the enterprise model to the outside world.
• Openbravo Web POS is an addition to the existing POS client. The choice of deployment options will be left to the business partners and customers.

What have we done so far?

• The architecture has been decided. Read details here.
• The main flows and functionality have been designed. Here´s a SlideShare presentation showing the latest iteration.
• Interactive mockups were built for both desktop and iPad. Download HTML Mockup (unpack zip and run in browser). Download iPad Mockup (you need an app called Presentation Link to run the iPad version).
• Usability tests were conducted on 12 users using the interactive mockup mentioned above.
• Based on the findings, we improved weaknesses of earlier versions along the way, resulting in the 8th iteration, which is considered mature. This means that we are now very confident this is going to work for our users.
• The visual design phase has started. Here's where colors, typography, layout and style are defined. Most POS software is butt ugly and this needs to change. I will share some art work in the next few days.

We're very excited about the Openbravo Web POS. Mind you, this is not your average POS system. This is a retail solution that combines a great web-based user experience with a solid enterprise architecture.

Creating Interactive Mock-ups on iPad

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.

Filter Expressions

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

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

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