How can I distinguish two different types of buttons, without using labels everywhere?

Question

I'm developing an application to count traffic at intersections. There will be two different types of buttons:

• one to count trucks ("lkw" is the german abbreviation for a truck)
• one to count cars ("pkw" is the german abbreviation for a car)

As you see, I'm currently showing the user labels on every group of buttons. Problem is, those buttons can be hidden, so I'd have to hide the labels accordingly and I just don't like to have 8 labels just to convey the message.

How can I design a button that

• represents the direction the car will go
• and represents whether it's a car or a truck?

I've been thinking about replacing the green (truck) arrows with a truck-symbol, but then it's truck symbols everywhere!

Do you have any suggestions?

Answer 1

The critical factor here is that the task is repetitive, so it needs to be as simple and quick as possible, with bigger target areas. I think it's a good idea to keep with lots of buttons. One vehicle, one action - nice and simple.

Move the buttons a bit further apart to avoid accidentally hitting the wrong one and make them bigger so there's less room for error and try to make the button area look less congested and squeezed in.

I think the design of the buttons themselves adds to the noise. At the moment all your arrows are the same colour. I feel it would be better to have the arrows themselves coloured to better associate vehicle and direction. I'd also try and remove the grid like block pattern of the buttons, as the pattern is too distracting from the content. Perhaps move the buttons with the 'straight on' arrows forward a bit and make the buttons circular rather than square as there's too many straight edges at the moment.

Something like the following:

Matt's 'Lanes' idea is also a nice touch, tidying things up nicely:

[EDIT] Having gone through the multiple changes with the arrows, the round buttons and the lanes, then realigning the buttons horizontally at the top and vertically at the sides doesn't look so bad now - see below. I've also very slightly colourized the button backgrounds.

I agree with Vitaly that the button backgrounds still are a bit much - but I wouldn't remove them completely. I'd experiment with what looks good for your touch screen device but make them offer a clear target boundary area, whilst being minimal enough not to be invasive in their own right. Eg:

Answer 2

Roger's mockup is great, but I'd still change a few things.

1. The design of the arrows does make it too cluttered. I'd lose the background. The target size should be the same as in Roger's mockup, but the visual size doesn't need to be that big. The background does help to convey the message that they're clickable, but if you make the arrow itself appear more 3D, it would do the job as well (didn't do it in the mockup).

2. This is important - on the road there's many times as much cars as there are trucks. So most of the time the user will be switching between the car buttons. Hence, the car buttons should be closer to each other and to the middle (the inside layer), and the truck buttons should be those closer to the edges of the screen.

Answer 3

My suggestion would be to have a green truck and a blue car in each intersection. Upon hovering over each icon with the mouse they could expand out into the arrows. This would make it so that there is only one set of arrows on the screen at any given time and simplify the layout.

Alternately, if this is for a touchscreen devise, you could have the user click on the truck or car button and swipe it in the appropriate direction (with visual hints at the options once a button was touched).

EDIT: So since this is for touchscreens that you don't want any gestures to happen on, just clicking, what if there were paths which would divide the intersection into the possible directions, and then you could put car/truck symbols in the correct paths when appropriate.

Answer 4

Your design in terms of ux is great and easy to use now, even kid will understand what to do. Just don't overcomplicate it with touch gestures and real-world arrows.

I think replacing "lkw" and "pkv" labels with car and truck icons, or with "car" and "truck" words is the best way here to deal the problem. Just put them correctly — on left side for top and bottom arrow groups and on top side for left and right arrows group.

Answer 5

How about not using buttons at all? I think you must not use buttons at all. Instead, use objects: car and truck.

1. In every street you place 1 truck and 1 car, facing the intersection. So you will have 4 trucks and 4 cars in total.

2. As an image, you use an image from a car and a truck seen from above! This way the user can derive the direction from the car just by looking at the picture.

3. The user needs to drag the truck or car into the street where the car or truck goes. (Otionally you could do 2 more things while dragging:

   • all the other cars and trucks disappear as soon as you press the mouse button
   • 3 arrows appear (left, right, straight) into each street.
   • if you let go the mouse button, you display an animation where the car or truck moves further into that street. As soon as it leaves the screen a +1 appears (to give the user feedback that he's doing the correct thing, very important!

If you don't like dragging and dropping, fine: tap a car once, all the others disappears and 3 arrows appear. Tap the car again to cancel. Instead, tap one of the 3 arrow to select the direction. The truck drives into that street, of the screen and +1 appears in that street. Sounds like fun already!

I think this is the most natural thing to do. Compare it to playing with toy cars. You select a car or truck, and you drag/select it where it needs to go.

Imagine you would be making an iphone game. You would not use buttons at all, you would just drag the object where it needs to go.

At least that's what I think.

Answer 6

Emanuel,

24 buttons are definitely not necessary.

For starters, make the interaction modal and cut the number of buttons in half (only three on each side). This means having a "toggle" that switches you between the car mode and a truck mode. So pressing any of the buttons while in the car mode means the cars has passed by and pressing it while in the truck more means that the truck has gone by. If you can assume that in a vast majority of cases cars will be going by, then after each arrow press (even in the truck mode), you could default back to the card mode. Many UX designer prefer modeless interaction (and for good reasons) but sometime two different modes of operation is exactly what you need.

Of course, it would have to be super clear when you are in a car mode vs. truck mode to prevent erroneous input.

That's just for starters. You could for example simplify the visual clutter even more by splitting input into two actions. First step: choose whether the car|truck had gone straight, turned left, or turned right. Second step: select which direction it came from. Then you could only have 3-4 buttons per action. Just an example... It might or might not be the best solution for your particular case.

As always, everything depends on who will be using the app. Children vs. adults. Novices vs. people familiar with technology, etc...

Answer 7

Just another thought, instead of focusing on "intuitiveness", I would focus on "efficiency"

Intuitiveness is for new users, while the person using it will be using the application for hours and just imagine that scenario. By ten minutes they should be able to learn the system. And for the next several hours, if I were the user, I would prefer this to make my job easier.

An example of efficiency could be having 2 buttons in the center. One for car. One for truck. Each will be circular with arrows up, down, right, left. (The reason that we don't need 8 arrows for each button is that if you think about it, all cars will, at some point, come to the center. Then, the only 4 actions from the center are up, down, right, left) The idea is similar to rockband game except the buttons in rockband is not in circular. In this case, when a car comes, the user can press accordingly in the direction.

Also, too many arrows so close together could lead to mistakes after using for a long period of time.

Answer 8

Having so many buttons is totally confusing.

My answer would be to simplify the actions rather than presenting all the options at once and cluttering the interface. Since it’s an interactive interface, why not make it a two-tap system for each vehicle?

So state 1 would have a simple, unambigous (and label-free) car + truck icon on each of the four entries into the junction. On tapping the entry point and vehicle type, you then switch the display to four arrows, which of which points out of the intersection. Tapping the exit location stores the direction of travel, and reverts the display to the original car/truck icon state.

That way you have a maximum of 8 buttons on screen at any one time – which makes it totally intuitive.