How to add products in this point-of-sale system?

Question

I was wondering which is the best way to choose products from a desktop Point-of-Sale (POS) application using a touch screen.

Method 1

This application has categories at right top buttons and products at right bottom buttons. When you click a product it is automatically added. I don't know how preferences are added but at other applications you click a special button to add preferences.

Method 2

The other approach is to have one panel. When you click a category you go into its products. When you click a product you get into preferences if it has them. Then you have to click the tick button to add it. In my case 55% of the ordered products do have preferences. People seem to prefer the tick button (confirmation) although I can't decide whether it is good or not. This approach gives you the benefit that you can do more with the list. You can select multiple items and aply actions to them easily. In most of the software that follows the other approach, you have to switch windows to get a selectable list. (cancels, returns, receipts, payment and selective version of them)

How can I decide which of these methods is better?

Answer 1

A couple of years ago I designed the ui for a high profile PoS system used by many of the major supermarkets and delis in the UK.

I can definitely say that method 2 has the greater benefits.

• Users do not need to be presented with options until the exact time that they are relevant. Thus selecting a category, selecting an item and (if relevant to the item selected) choosing the options associated with that item defines a clear and easy path where there is no more or less on screen than the user needs to see.

• Users can make decisions more easily when presented with less choices. It's also easier to learn positions of popular items more quickly.

• Users are happy to press more buttons if the cognitive load associated with each press is minimal.

• You must cater for users who may be temporary staff or taking on someone else's role for a short period. A complex system that takes more than a couple of minutes to understand is going to seriously hamper usage.

• Users like colour coding in order to group products or categories. Whether it mains, sides, desserts or meat, fish, vegetarian - whatever - make the choices appropriate for your scenario. Users will recall and locate a colour for a category more quickly than trying to differentiate the groups by labels alone.

• If space allows, it should not be out of the question to be able to place extremely popular items also on the top level category page for direct selection. A bit like adding shortcuts to your desktop.

• Systems with many products should also use alternative options to find a product such as using a Product Look Up Code (PLU) or good old search. A cafe/restaurant is unlikely to need this however.

• If you have several staff using the same screen, you'll need a mechanism for easily selecting a user. This may mean the first screen is user, not category, or you need a 'change user' option. Many systems use a 'key' of some kind which can be a chip, swipe card, or proximity tab that staff carry around with them.

• It should be easy to add multiples or similar items. This can take the form of changing the quantity at time of picking the item (default is 1 say), changing the quantity after selection, or even to select an item already on the list and 'add one like this' which takes you to the options screen for the product - again this is like a shortcut but uses no more screen space because its an interaction directly through your order list.

• it has to be easy to review the order list and must include selected options, and which may be sensibly grouped rather than necessarily in the order it was entered.

• depending on the level of catering for which your system is relevant, having a screen for choosing specifically options relating to a selected item can allow for additional information - for example ingredients, allergy information, traceability (typically meat origin etc), vegetarian info, garnishes etc, all of which information would typically be centralized on a back office system.

Answer 2

The decision is easy when you know your users' process. So, despite any recommendations received here, you still need to talk to the cashiers who will be using the system and observe their interactions with the current system.

In your situation, it looks like the second one is the best since its item customization workflow is the most straightforward.

---

Here's how a POS system should be designed for efficiency and smooth UX during the basic operations in a checkout transaction (add item, add more than 1 item of the same kind, customize order, and remove items from the bill):

Add item
Usually, the buyer already knows the products to be purchased (they're either in the shopping cart or in the head, in case the clerk/cashier needs to bring them). Therefore, when a product doesn't require customization (pre-packaged goods) there's no need for an explicit "add" button (that's how barcode-based systems work - scanning means adding to the total).

Multiple items of the same kind
The system may prompt for the quantity as the item is added but this introduces an extra step when only 1 item is needed. An elegant solution to this would be providing 2 ways to change quantity:

1. a new option shown on the main screen after an item has been added called "Previous item quantity" that brings up a dialog to modify the total number of items of that kind
2. the ability to tap the quantity shown in the bill section of the screen to bring up the same dialog

Customizing an order
A number of industries have a more complicated checkout process because they sell bespoke/made-to-order goods. This requires an extra step (customization) in the process. The best way to design the POS for it is to show all options on one screen grouped into their respective categories because buyers may not follow the intended customization process (you don't want cashiers switching back-and-forth between screens) with an explicit "add" button to tell the system when customization is completed.

Removing items
It shouldn't be hard to remove an item when a wrong one is added or buyers change their minds. Many POSes have elaborate "loss prevention" processes in place that require multiple screens and confirmation codes. However, the easiest solution is a cross/delete button at the end of the line in the bill section of the screen followed by a quick confirmation screen (if loss prevention so desires).

Thus, the perfect line item in the bill section should look like this (elements in brackets are interactive):

  Qty.        Item          Price    Total  
  [2]     Awesome cake      ¤2.99    ¤5.98   [X]

There's only one part of the process left that needs to be researched on case-by-case basis: what to do after an item is added. The main options here are to return to the list of categories or stay in the last category or go to another higher-level screen.

Answer 3

In Europe, McDonald's recently introduced a customer-facing touchscreen POS:

Obviously this one is much more graphical and visually compelling because it's customer-facing and yours isn't. Nevertheless, there are some takeaways from this system:

• Relying on visual display of the items in question can help improve selection speed in a grid interface. I know I want a Big Mac, so rather than look for the words "Big Mac", I just look for the burger.
• Use standard visual hiararchy to denote what part of the menu you're using. In your example, it's a little confusing to distinguish which menu relates to what. In the McDonald's UI, there is a tab bar along the top which allows you to select between things like burgers, menus, deals, etc. Once you select something there, another tab bar allows you to distinguish between beef, chicken, fish, vegetarian, etc. The rest of the screen is used to display the actual selection.
• Once you tap an item, a popup shows you options. In the case of burgers, you can choose to remove the mayo or add cheese, for instance. I imagine this is similar in a cafe/restaurant situation.
• After confirming options/preferences for a selected item, the item is visually animated towards the bottom right of the screen and into a list that represents your shopping basket. This also displays the total amount you'll be spending as well as a "check out" button.

I think this system works well and I was surprised to find that McD's hadn't messed up the fundamentals. I now use this system exclusively when eating there. :-)

I'm sure McD's employee-facing POS is not as interesting looking as this one. But there's really no reason to skimp on that kind of thing. Why not craft a great user experience for your employees as well? You'll end up dogfooding a potential customer-facing POS and as we all know by now, a great user experience can actually make a relatively average user interface feel a lot better than it really is.