Openbravo for Retail can now be used on smart phones. This article explains its responsive behaviour and ends with a recommended device strategy.


Although computer devices so far only come with rectangular shaped displays, the wide variety of screen sizes nowadays makes designing software that runs well on different devices a much harder task than a few years ago. Apart from different screen sizes, developers also have to deal with different resolutions, aspect ratios and different operating systems. As for the last factor, fortunately Openbravo for Retail runs in a web browser which makes it platform-independent. This leaves us with the factors screen size, resolution and ratio to worry about.

Screen Sizes, Resolutions and Ratios

Smart phones are getting bigger, tablets are getting smaller and more laptops have touch screens. It is clear that there is a lot of overlap in device categories when only looked at from a specifications point of view. Here is a rough categorization:

1. Traditional desktop and laptop computers that are operated using a keyboard and a point & click device such as a mouse or trackpad. Screen sizes vary between 11” (e.g. a Macbook Air or Netbook) and a 24” external monitor. Resolutions vary roughly between 1024x640 and 1920x1200 pixels with aspect ratios from a more traditional 16:12 up to a widescreen 16:9 ratio. 
2. Tablets with touch screens that are operated by fingers or a stylus. These typically measure between 7” and 11”. With the introduction of Windows 8 it is expected to see much larger "tablets" because most Windows 8 laptops will also have a touch screen in addition to a keyboard. However, I believe that every device with a screen larger than 11” is best treated as a traditional computer since it will rarely be used on the go because of its sheer size. Tablets are operated using both hands but can also be placed in a stand and used with one hand or even an external keyboard. 
3. Smart phones with touch screens that are operated by fingers or a stylus. These typically measure between 3” and 5” with hybrids (“phablets”) up to 6” of display size. Aspect ratios vary between 16/9 (e.g. iPhone 5) and 16/12 (e.g. LG VU II). Mobile phones can be held in one hand while being operated by the other. With a smaller display size or bigger hands, one-hand operation is common. 

To add to the complexity, tablets and mobile phones screens can be used in either portrait or landscape mode.

One, Two and Three Columns 

The best way to deal with such a vast array of screen sizes, resolutions, ratios, orientations and operation modes is to design for mobile first and to apply responsive design. Responsive design is a term that is used for web technology that adapts the rendering of pages depending on the screen space, browser and device used. These are identified by the Javascript framework and the best possible viewing and usage experience is subsequently offered. In practice that means that more components are shown when more space is available or these components are shown in a different, optimized way. Note that in our case this does not imply that you would have less functionality on smaller screens, it is merely a matter of not showing everything at once.

For Openbravo for Retail this works as follows:

Large widescreen monitors will benefit from a three column layout. Besides the ticket and scan/browse/search/edit columns, users will also see an additional workspace column on the left hand side. Note that the third column has not been developed yet but is part of our roadmap for this year.


Medium sized monitors and tablets in landscape mode will be using a two column layout. This is what Openbravo for Retail is currently using.

Smart phones and tablets in portrait mode will work with a single column and depending on the task at hand, the user can switch between the columns by swiping horizontally or tapping a pagination button.


You may wonder why we have put in pagination buttons when you can swipe horizontally. We could have used the precious screen space for something else, right? The answer stems from our design philosophy which assumes that it is unknown which kind of input device people are using. A typical retail point-of-sale setup will use a touch screen but many stores also need a keyboard and mouse to look up products that require keying in long product codes or keywords. It could also be the case that a retailer simply does not want to replace his current monitors with touch screens. Simply stated: Openbravo for Retail and Openbravo Mobile does not want to impose a device or input method.

Device Strategy 

With such a large amount of factors choosing the best device for your context is not easy but with responsive design you will be able to run Openbravo for Retail on most devices if you take into consideration a few guidelines.

First, there is a minimum screen size. This has nothing to do with pixels but has everything to do with basic usability. If things get too small, you simply cannot read text anymore and controls will be hard to target. The minimum screen size for smart phones for Openbravo for Retail is 3.5”.

Second, there is a minimum resolution. The more pixels available, the more information can be shown. The minimum resolution for smart phones for Openbravo for Retail is 480 x 800 pixels.

Third, there is a minimum amount of memory and processing power that the mobile device needs to have to run Openbravo for Retail comfortably. Because everything runs inside a browser, theoretically the browser determines the need for system resources. As a rough baseline, make sure to have 512 MB RAM memory on board and a 1 GHZ processor.

Fourth, there is the need to use an up-to-date browser that is either Chrome, Safari or the Android stock browser.

Complying with the above, the remaining factors for choosing the right device will depend on your users and usage context. Sure, Openbravo for Retail now adapts itself to your device but picking the appropriate device for your users is as important as ever. We strongly recommend to spend some time investigating how Openbravo for Retail is going to be used. Is the device going to be used for client-side selling or as the main POS terminal? Does the device need to fit in a pocket or will it be attached to the wrist? What are the lighting conditions the device is going to be used in? I cannot stress enough the importance of doing contextual research. Observe and interview your users and try different devices before deploying any.

Have you seen the power of Openbravo Mobile already? As you may have read in a previous post, we have been looking for the best HTML5 framework for Openbravo Mobile. After several months of researching, prototyping and testing we have decided that Enyo is our best option.

What’s Enyo?

Enyo is an object-oriented JavaScript application framework emphasizing modularity and encapsulation.

Back in January, HP announced the new version of Enyo, the framework powering webOS applications, but this time, a cross-browser solution optimized for mobile devices and released under the Apache license.

Since this initial announcement we have been tracking the evolution of the framework on every release. In February I posted a very simple example on how to consume Openbravo JSON REST WebServices, using Enyo (core).

In July the first non beta version was a released, by then we knew that Enyo was a real option for us.

Our experience with Enyo

We’ve been working with Enyo for several of months now and we are really pleased and enjoying the experience.

After investing time in prototypes and getting to know Enyo, our first real work was the code refactor using Enyo abstractions (Kind, Component, Control, Event) in Openbravo Web POS.

The experience and result of this process gave us enough knowledge and confidence to decide and go for it:

Enyo is the right framework for Openbravo Mobile, as it provides the building blocks for developing a modular, extensible, thin, and fast mobile applications

In Openbravo Mobile we’ll use the full suit of Enyo, core, onyx and layout. Here you have some examples of the output of this great framework.

The Data Model

We’ll also use Backbone.js Models and Collections for representing the entities declared in the Application Dictionary and Enyo will provide the UI widgets for manipulating those collections and models.

In the back-end we’ll use the same modular architecture in Openbravo 3.

The Roadmap

The main goal of Openbravo Mobile is to deliver the framework for developing mobile applications by the end of Q4-2012, with a few milestones in between:

• Basic infrastructure (Login + Workspace): Be able to login using a mobile device, and open a window
• Standard Windows: Support for windows declared in the Application Dictionary
• Processes and Reports: Support for launching reports and processes from a mobile device
• Support for Manual Windows: Support for View Implementations (aka Manual Windows)
• Fine-tune Functional Flows: Revisit the flows and usability in a mobile device (Q1-2013)

I hope this gives you an overview on what has being going on in Openbravo Mobile, the Roadmap and milestones of this project. To know more about Enyo visit http://enyojs.com

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 continued working on the core mobile experience. Based on earlier interaction design, we are now in the last stage of completing the Openbravo Mobile platform.

This video shows the power of Openbravo Mobile. It features a lightweight HTML5 GUI that uses Enyo, the state-of-the-art open source development framework. This is an important step towards delivering our mobile vision where all standard windows in Openbravo 3 can be accessed through any mobile device with a web browser. This means full functionality, including record addition and modification, process execution, reporting, notes and attachments.

The featured video demonstrates Openbravo Mobile in different business contexts. Elena´s outdoor store is selling a lot of winter gear due to the cold weather that is coming up. Rob, the sales director, notices this trend while looking at Openbravo Mobile widgets on his phone and directly requests the purchase manager to order additional stock. A few minutes later he receives a notification that the order was placed and he approves, again using his mobile phone. The next morning, the goods are received in the store and Miguel, the warehouse employee, uses Openbravo Mobile on a tablet to register the incoming goods. The circle is closed and business continues.

Openbravo Mobile works seamlessly together with the standard Openbravo 3 browser experience against the same centralized database--further enhancing productivity and accessibility, making your business truly agile.

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 experience. Based on earlier interaction design, we hereby present the first working prototype of Openbravo Mobile. It features a lightweight HTML5 GUI that uses Enyo, the state-of-the-art open source development framework. This is an important step towards delivering our mobile vision where all standard windows in Openbravo 3 can be accessed through mobile devices. This includes modification, process execution, reporting, notes and attachments.

The featured video demonstrates the power of Openbravo for Mobile through a simple but common scenario where a travelling manager needs to approve an expense report for an employee. The manager receives an email notification on his mobile phone that takes him to the web-based Openbravo Mobile. With a few taps he views and approves the expense report and the payment is executed.

The video also shows the tremendous speed with which lines can be entered in an Openbravo 3 grid using keyboard shortcuts. Creating the expense report takes only one minute. On the mobile device, using Google account association, logging in and approving the expenses takes even less time.

Openbravo Mobile works seamlessly together with the standard Openbravo 3 browser experience against the same centralized database--further enhancing productivity and accessibility, making your business truly agile.

My colleague Antonio explained in his post the performance of the server side component in the Openbravo solution for Retail. Now let’s take a look on the client side part, What happens when you’re selling and your network goes down? How much time can you work in offline mode?

Imagine you have a store in Pamplona’s city center, and during San Fermín festival you sell all the required clothing for the festival: White shirt and pants, the red handkerchief and belts, bota bags, etc.

Now imagine you’re on July 5th, the day before the Chupinazo, your store is crowded by foreigners trying to buy the outfit and equipment for the festival; you have a lot of them in the queue waiting to pay. Everything is going so well, you’re selling a lot, but suddenly your network goes down, your internet connection is lost, you’re in panic!!, you start asking yourself: “Am I able to keep selling without internet connection?” … Of course! You’re using Openbravo Web POS.

Remember what Antonio mentioned:

The POS terminals can work in two different modes: online mode, and offline mode. When they are online, and a sales order is created, the terminal sends this order to the Openbravo instance … If the terminal is offline, however, the order cannot be immediately sent. In this case, the order is stored in a database inside the POS terminal. Once the terminal returns to online mode, the POS terminal sends a batch which contains all stored orders to the Openbravo instance.

This is a nice feature but: How many order can I process in offline mode? How much time do I have before my POS terminal gets full?

The answer is: It depends on the processing rate (orders per minute) and the average order size (lines per order) of your store.

Let’s take the best scenario for your Pamplona store on July 5th as example. Let’s imagine that you’re are able to process 4 orders with 10 lines each every 60 seconds. That is, with a single POS terminal, you’re selling to 4 different customers every minute, without stopping a second. (This is almost physically impossible, but during Sanfermines you never know).

Some numbers (the geeky stuff)

An order with 10 lines is 3 KB of data in the POS terminal cache. If you are serving 4 customers each minute with a single POS terminal; you’re generating 720 KB per hour (nice speed). Notice that this is an ideal situation: 4 customers with 10 different products every minute without stopping.

At this frenetic rate, in a 12 hour shift without internet connection, and just before the party starts, you have stored 8.44 MB of data in your POS terminal offline cache.

While you were selling at the rate of 4 orders per minute, your colleague have called the Internet provider and reported the network problem. 12 hours later and just before closing the day, the internet connection has been restored and the terminal has sent all the 2880 orders that you have produced during the offline period.

The best thing is that you have provided all the required equipment to almost three thousand foreigners eager for party.

Don’t worry, the only limit is the physical space in your mobile device

If you are using an Android device like a Samsung Galaxy Tab 10.1 or a fully fledged Windows 7 tablet like the Asus Eee Slate EP121, your database will silently grow, allowing you to keep selling in offline mode.

At the rate of 4 orders per minute, it will take you more than 2 years to fill 10GB on your Samsung Galaxy Tab, or more than 4 years to fill 25GB on your Asus Eee Slate EP121, and remember, selling without stopping a second!!

The iPad limits

Unfortunately the previous statement is not true for the Safari browser on iOS. The Apple guys have set a 50MB limit for offline storage, but this quota is more than enough space for the normal operation of Openbravo Web POS with a very high order processing rate.

Openbravo Web POS supports enormously high processing rate

Under normal operation (online mode) every order is sent to the server immediately just after closing it. Openbravo Web POS allows you to work in offline mode but this is a fall back mode.

There are several benefits of immediately sending the orders to the server:

1. Updated warehouse stock
2. Generate a Sales Invoice when you specify it
3. Any other retail related process you have implemented in your Openbravo instance

Working in offline mode shouldn’t be your normal operation mode, but even in some unusual situations where you have 1-2 days or even a week without network connection, Openbravo Web POS will support your operation without any issue.

What about Master Data?

When you login into an Openbravo Web POS terminal the required master data it is also stored in the offline cache. By master data I mean: Products (with images), Prices, Business Partners, Tax Rates, etc.

Caching master data will take space from your offline cache, but it is required to be able to have a fully working offline mode. In another post I’ll give you more detailed description of how much the master data takes in the database, but to give you a rough estimation: caching 1000 products with images and prices is about 22 MB of data. Remember the only device that enforces the 50MB quota is the iPad, on Android and Windows devices, the database will grow silently.

Conclusions

• Openbravo Web POS supports high activity rate even without connection to the server
• The number of orders you can process in offline mode depends on your selling rate (number of orders per minute) and the order size (average number of lines per order)
• If you have a constant selling rate of 4 orders per minute (very unlikely), in 12 hours of offline mode you have produced 2880 orders and only filled the 17% of the initial database size
• The only limit is your device storage space on Android and Windows devices. The database will grow silently if you reach the initial 50MB size. It will take you more than 2 years in the Samsung Galaxy Tab and more than 4 in the Windows 7 device
• On the iPad you have a fixed quota of 50MB but you’ll have to remain selling for 3 days in offline mode (at constant rate of 4 orders per minute) to fill the database
• If you think you’ll have huge amount of master data (products, business partners, etc) and long offline periods, you must use an Android or Windows device
• Offline mode is an exceptional fall back mode, it shouldn’t be your normal operation mode. In online mode, every closed order is sent to the server immediately. The server will process that order and update stock and execute any other retail related process

I hope this post can clarify the most common question we often get about offline operation of Openbravo Web POS. As mentioned before, I’ll write another post more technical on master data cache.

.

Openbravo Web POS is well on its way and in a few weeks time our partners and retail customers will be able to start using it for their businesses. We at Openbravo produce software and unlike Google or Microsoft we don´t plan to stray into designing hardware. We are proud to be hardware-agnostic in the sense that we believe our software should run on anything with a browser. With Google´s new Nexus 7 tablet however, it is hard for me to hide excitement about a piece of hardware and especially its usage in combination with Web POS. I can totally imagine using the Nexus 7 for client-side selling in stores. Here´s why it looks like an ideal candidate. 



The Size
With a 7 inch diagonal screen size and 340 grams weight, it seems like a tablet you want to keep with you at all times while talking to customers in your store. You could tuck it in a pocket or shove it in a waist-pouch similar to what some waiting staff wear in restaurants. The resolution of 1280x800px is ample (Openbravo Web POS has a 1024x768px minimum requirement) and its display size is probably just large enough to allow for low-volume product browsing and selling. Pythagoras helped me out with a^2 = b^2 + c^2 to model a quick mockup in real-life dimensions to assess the usability by printing a Web POS mockup on paper. Whereas a Galaxy Note would not be usable without stylus and an iPad is just too big to carry around, the Nexus 7 seems to have the perfect size.

The Specs
This tablet is designed for media consumption and gaming and the tech specs show this. A quad-core Tegra 3 processor should make it fast and smooth and Google claims eight hours of active use on a battery charge which is enough for a full day of selling.

The Jelly Bean
Android 4.1, aka Jelly Bean, is great for its browser experience. It runs Chrome which allows for smooth switching between active browser tabs and full integration with Google services. You would be running Openbravo most of the time while interacting with customers but little sidesteps to the back-office, product comparisons or even the competitor´s site will be easy. Also, staff can access other non-Openbravo internal business applications without having to find a back-office desktop computer. Having a quick meeting with other store staff via Google+ Hangouts also sounds very useful. Another nice feature is speech-to-text so you can find products by talking to the tablet, even in offline mode.

The Price
The Nexus 7 is cheap: 199 USD. This is a lot cheaper than the iPad (starting price 499 USD) and cheaper than most Android tablets in the market, apart from some cheap makes with low specs. The additional cost of adding a few more Nexus 7 tablets to extra staff on the shopfloor on busier days are peanuts compared to losing customers because of long waits for check-out lines or bad customer experiences. Mind you, your sales staff just needs a tablet and point their browser to the Openbravo Web POS instance in the cloud (or your server on-site). No installs, no maintenance, no risk, highly scalable. You could even let them bring their own tablets.

The Catch
There is none. Well, there is maybe one. I have to be frank with you: I did not try Openbravo Web POS on the Nexus 7 hands-on yet. Based in Barcelona Spain, I have to wait for one of my US colleagues to bring one over. I will keep you posted on our hardware experiences.

UPDATE 03/09/2012
I finally got my hands on the Nexus 7 and it is indeed a wonderful device. However, there is one big BUT that I did not anticipate, which is the lack of a full-screen browser view mode for Chrome on Android. The standard browser that is used in Android 4.0 (and lower) has a full-screen mode but with Jelly Bean (Android 4.1) Chrome is the standard and only browser. This said, it is expected that full screen browsing is coming soon to Chrome for Android. Until then, I do not recommend the Nexus 7 for Openbravo Web POS yet. It works fine technically but the tabs, address and navigation toolbars take away too much of the available screen space, which is far from ideal. I apologize for the confusion I may have caused with my original post. Find recommended and tested tablets in the retail documentation.

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.

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.