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

Responsive Design For Mobile Retail

Wednesday, March 13, 2013

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.


Shankar Balachandran said...

Great post. I have a doubt regarding this point.
"Fourth, there is the need to use an up-to-date browser that is either Chrome, Safari or the Android stock browser"

What about IE for mobiles? Does it work in windows phones too?

Rob Goris said...

Shankar, Internet Explorer is not supported because it does not use the Web SQL specification needed for offline capabilities. On Windows 8 you should use Chrome. Unfortunately Windows Phone only uses IE. Read more about the browsers specs here: