: What makes this POS design look dated? I'm trying to understand what makes this POS screen design look dated. Is it the 3D buttons, the colours, the layout, the font? And what would you do

@Correia448

Buttons should be organized by function, hierarchical and buttons should be consistent with layout methodology.

In layman's terms:

1) Place most used buttons in a place where all can easily find them;

2) Inner buttons should be "controlled" by outer shell (window within a window, within window);

3) If you have an enter button (or any other button for that matter, keep it in the same place even though screens may change.

Many POS system have tried to optimize functional design but one POS I think is a a bit ahead of the game is Rezku POS.

Vote Up Vote Down

@Si6392903

All these are great answers, but if you want some reference material, a shining example of what a good, modern POS system looks like, check out the Square app on iPad.
itunes.apple.com/us/app/square-register-point-sale/id335393788?mt=8
The biggest thing I think you could do to improve the existing one (and why it looks so dated) is that modern UI tends to like lots of white space - and also to make the white space white. A lot of designs these days use reverse type (white text on black background or white text on any dark color) very sparingly. Like this site: developer.wordpress.com/calypso/

Vote Up Vote Down

@Annie732

Because it looks nothing like the way "tiles" are designed for Mobile devices, Android, or Windows OS specifically comes to mind, it also is entirely unApple like - which causes a conflict because they command so much of what is visually in vogue. Pretty much everything about it is "wrong" so I'll skip specifics.

Vote Up Vote Down

@Cugini998

First, I would ask what is the purpose?

Does it require the operator to quickly find the key and make the order quicker without any mis-entry? or does it have to attract and encourage users to use the GUI for the machine?

In this case, the piece's purpose clearly indicate that it is for efficient, and fast transaction entry. Therefore, we can go simpler more organized way that form, color and hierarchy needs to dictate the logical order over design trend and fanciness.

The problem with current GUI, is:

Color: Too harsh colors, that will create stress over time and will affect the effectiveness of the users decision. White background with other high contrast colors, definitely create eye strain, and hard to quickly find the necessary information that user needs to gather.

Font: Too small for finding and making decision, this also affected by the harsh color and contrast between the text. This could highly affect first time users to get used to the system, longer and produce more mis-entry.

Order and grouping: Do we have to have the name "POS System" up there in large font size? Is it beneficial? NOPE! Users of this system and the elements on the screen clearly tells it so. Does the grouping makes sense? Not really, lot can be grouped, so users can find it logically. Does some of the word choice, make sense? NOPE! "SEND"? send what? "Set Menus"? do you set menus everyday? NOPE! forth. Hierarchy and word choice needs to be looked over carefully.

Some people posted with GUI with images and fancy stuff, as from the purpose of the equipment itself, it clearly tells it doesn't have to be fancy, but needs to be highly functional and thoughtful.

Vote Up Vote Down

@Correia448

I'm not a design professional either, but since I have to consider this kind of thing when building mobile apps....


Ditch the old-school win32 3d effect. It's literally out-of-touch in an era where everyone expects things to look touch-screen friendly. What you want to use is large flat regions for each action area (button) with either no spacing between related groups of buttons or shadows under the buttons. Look into Android's Material Design. It's useful even for non-mobile apps.
Use borders (not colors) to group related items if those items have spacing between them. If there's no spacing between them, then stick to using colors so that the entire related area looks like it has one solid background color.
Choose colors that are softer (think pastel colors) and part of a complimentary color scheme. Be sure to have light and dark versions of each color in your palette. I hope you're not still dealing with a system that can only display from the old CGA/VGA 16 color palette.
UI elements should be consistently colored according to the color scheme. For instance: buttons providing UI input can be considered different from buttons that change pages or trigger primary functionality, but there should generally be 1 color used for each of these types of buttons as opposed to 1 color for all buttons in a given functional area. This helps the user get a better idea of what each UI element is going to do.
Prefer using spacing between action areas to separate them and flat, soft borders between action items. Action items in an area should have regular size (imagine each action item to be 1 or more adjacent cells in a grid).
When using a title area in the window:

a. All action items in that area should fit within the title area.

b. All action items in that area should be global to the application (i.e. login, settings, etc.).

c. The title are should not be overlapped by anything else other than a logo.


I hope this helps.

Vote Up Vote Down

@Caterina889

Almost all elements seem to be buttons. But when I read the labels, it seems that some buttons are action buttons, while others are for navigation.

In a modern UI, you'd distinguish the two. A row of tabs serves as an effective navigation aid, both to show where you currently are and how to get somewhere else. Have a tab Pizza's for all the pizza options, and a tab Pasta for all the pasta's.

Perhaps the purple FOOD button already acts as such a tab, and DRINKS is another such tab. They definitely shouldn't be on the right - English is read from top to bottom, left to right, and your workflow should copy this.

A row of tabs works reasonably well, but here you may have a deeper hierarchy. In that case, it may be wise to show the current UI state as a path: Food > Starters >, one line on the top of the starters page. Make the first entry of the "Starters" menu a "< Back to Food" button; this allows you to hide quite a few controls.

Vote Up Vote Down

@Kimberly620

Other answers focus on how to improve the design, but since you asked why the design looks dated:

Font too small. The very left looks less dated than the rest, why's that? On the left, the font size matches the vertical space available for the text, while in all other buttons the font is far too small. Let's also throw in the all upper case, Arial, and the 3 fixed text lines on each button (every button other than Pay seems to be formatted to receive text on vertical top, center and bottom, leading to awkwardness if there are only 2 lines of actual text).

Unattractive colors. The screen looks like it uses 9 almost random colors, all of which are part of the original 64 EGA colors. Many modern GUIs use more subtle color differences, unless there's a big difference between the buttons. Some modern GUIs also use color gradients in the buttons.

No images.

2 Color 3D effect. The 3D buttons which use a 2 pixel wide border with uniform white on the upper left and uniform grey on the lower right, plus a one pixel all black border around them are indeed out of fashion.

Too simple. By only using buttons, there's a missed opportunity to intuitively indicate we're currently looking at the Food section. A modern Gui would use other clues to indicate the Magenta and yellow parts belong together, such as a filled rectangle behind the yellow buttons which extends to the background behind the food button:



Finally, the POS System header bothers me, but I think that's just bad design, and hasn't got anything to do with it being dated.

Before changing anything, make sure the current display out supports more than EGA (16 color palette, chosen from a 64 color table), and if you want to use images make sure the resolution of the display allows the user to recognize what's shown in the images. Sometimes the devices used in the field are quite a bit older than one would imagine. Also, when changing colors keep in mind color blindness.

Vote Up Vote Down

@Murray976

Considering this is a POS system, I'd say the functionality is there. The buttons are big, relatively easy to read, and they are organised in groups, which would facilitate me finding what I'm looking for.

Having said that, I see good structuring decisions, but not many design decisions. This is what I would look into:


Fonts: Everything in your app is using Arial uppercase, but not every element is the same. There is a hierarchy, and you could use font styles or families to represent that. For example, the bottom rows could use mixed case, because they are not really part of the main options. You chose to make "Pay" bigger, which is great, but it's the only button with a different font size. Why change the font, and not for example the color? Not saying you should, I mean thinking in this way can make you discover new ways of separating elements. For example: Have you considered using dividers?
Spacing: You are not using the same spacing (margins) for many of the elements. Look into grid systems, you would benefit terribly from using one. A balanced layout will make the design look more ordered and polished. You also have some strange spacing issues (IMO) with the text inside the buttons. Button with 1 line is centered, 2 lines has an immense space between the rows, and 3 lines looks ok, because there's equal spacing everywhere. Wouldn't it make more sense to always have the same space between text lines, instead of trying to pull the text as close to the borders as possible?
Color: The grouping works for making it clear different buttons do different things, but I don't see a reason behind the palette. Try to think in the direction of: Can I use color to further push my message? Can I use color to facilitate the task of finding buttons? You are already doing that by giving the "Send" a different tone. This is a great decision. But then I see your selected color is different depending if it's on the right column or the central one. why?. Thenn think, where else could you use color in a similar way? Take a look at Google Material, they might inspire you to try new combos.
Shadows and effects: The 3D effect is very useful in this context, and I think you could push it even further. Here's an example of 3D POS.Also, have you considered using icons? They can make for a nice visual aid.


I think the app looks dated because it doesn't really follow any trend, apart from blocks of color with some drop shadows, which was the norm when design software and coding languages didn't allow for much creativity in that respect. Now, you can do almost anything. Your design looks dated because it's not taking advantage of those design tricks and choices that got popular in the last years.

I'd recommend you take a look at other similar apps, check what they are doing right or wrong, see how yours can nurture from some of those ideas. You have a great skeleton already, it just needs some flesh. A grid and perhaps playing with some complementary colors would do great things for your app.

Vote Up Vote Down

@Nimeshi706

At first glance, I can't quickly tell what is what (and I have experience with restaurant POS systems). To me, the items in grey at the right of the UI don't seem to belong together. The yellow items in the center of the screen seem to actually be 3 sections, but this isn't clear?

From the examples I have shown below (and I'm not saying anything of their quality, they are a random selection from a quick search) You can see the use of Icons, Images and large blocks of color. These are useful tools for identifying actions and distinguishing seperate areas of function or a hierarchy of information.

I havn't got time for a more detailed answer but what I will say is take a look at examples of current UI (User Interface) design. For example a quick search for 'POS UI Design' will give you images such as:

Vote Up Vote Down

@Sims5801359

Design aside, is it functional, and do the people operating it understand how to use it? There is an element of don't fix what is not broken if that is the case.

Yes, it looks dated, but many till systems I have used are guilty of the same simple look. Rounded buttons and colours chosen with accessibility in mind could spruce it up, but my gut feeling is that this is purely a functional piece and to try and "jazz it up" could add confusion to employees.

The 3D effect is actually useful in this case as it quickly tells the user that this is a clickable button, and I imagine in the restaurant trade time is of great importance.

Vote Up Vote Down