Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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

enter image description here

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)

enter image description here

How can I decide which of these methods is better?

share|improve this question
    
Is this customer-facing or employee-facing? –  Rahul Feb 12 '12 at 20:49
    
employee facing !And it is about cafes-restaurants –  Parhs Feb 12 '12 at 20:52

3 Answers 3

up vote 2 down vote accepted

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.

share|improve this answer
    
Method 2 is my implementation.Most of the systems dont allow selecting multiple items directly ,it is complicated to make partial payments,receipt,partial move to another table,and cancels etc.. Here is another example of a popular application i.imgur.com/HGQfS.jpg .What do you think? As for shortcuts i am not sure whether they could fit nicely but i will try! Should i have colors on button icons ?Also method 2 doesnt support editing. But nobody has made a complaint about editing.A user however wanted categories to be showned always but i see that it work fit –  Parhs Feb 13 '12 at 0:56
    
@Parhs: Roger mentioned color-coding in his response & I had told you about it in the comments. It's a must-have. Don't take users' words about what they want at the face value - observe their behavior and give them multiple prototypes to test (they might be surprised that they don't need to have the categories displayed at all times). –  dnbrv Feb 13 '12 at 1:03
    
i know but i asked for item buttons not action ones.So propably i should let the user to change the background color –  Parhs Feb 13 '12 at 1:19
    
@Parhs: Be careful with allowing such customizations as they may brake the flow. –  dnbrv Feb 13 '12 at 2:06
    
@Parhs It doesn't have to be background colour - border colour works very effectively when using borders thicker than a single pixel line. –  Roger Attrill Feb 13 '12 at 10:37

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.

share|improve this answer
    
About customizing an order item.A 55% of items need customization in my case.(based on statistics after 3 monhts).The customization options are grouped! About removing items i dont know whether an x is good idea for me as i have an x to delete selected items.if selected item has been sent to kitchen etc, then cancelation may need password.About adding an item i have the tick thing after selecting.. Should i add automatically items without preferences like mcdonalds? if so where should i put the tick and return buttons? About the quantity i have solve it with the + / - . –  Parhs Feb 12 '12 at 22:35
    
Items without preferences should be added automatically unless you ask for quantity right away (not recommended if most orders are 1 of each). You also need to differentiate between customizable & non-customizable items by either color-coding or adding some symbols to the button (e.g. ... or >>). –  dnbrv Feb 12 '12 at 23:07

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

enter image description here

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.

share|improve this answer
1  
For the Pulp Fiction fans: notice how this German screenshot lists the Quarter Pounder as "Royal with Cheese"? ;-) –  Rahul Feb 12 '12 at 21:37
    
Thats a nice finding. However there are some problems! Mcdonalds has a fixed numbers of categories so it is easy to create a tab menu. Mine isnt. Also it hard to have an image for everything. however i will study this pos and comment –  Parhs Feb 12 '12 at 22:10
    
Cashier-facing POS UIs are usually utilitarian & less graphic because cashiers rely on motor & spatial memories of the workflow more as they master the interface (they care for the details only in learning & rare situations). –  dnbrv Feb 12 '12 at 22:13
1  
Did you just say there are some takeaways from this system? - that's hilarious! –  Roger Attrill Feb 12 '12 at 22:45
    
for consumer facing its great! However i have seen some with better graphics but this is very usable! –  Parhs Feb 12 '12 at 22:59

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.