12

The current layout

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?

5
  • What's the purpose of this app? Just to click button, when you see the car in a real life and then get statistics? Jul 25, 2011 at 14:07
  • Exactly, we have to count cars and get statistics for the intersection. The user will have to press the appropriate button each time he sees a car/truck.
    – intagli
    Jul 25, 2011 at 14:09
  • Just interested to find out what the actual design is, and how close it matches the suggestions provided.
    – Michael Lai
    Sep 1, 2013 at 23:59
  • @intagli did you update the image in your question based on the answers? i see answers referencing "all your arrows are the same colour" but i don't see a version of the image like that. May 22, 2020 at 18:00
  • @WoodrowBarlow no, the image wasn't updated. I think it is just about the lots of green and blue arrows. The actual design was pretty close to the suggestions in the thread, with lanes and tidied up arrows. It was nice to have a dedicated button for every option as users quickly need to tap the different buttons to count.
    – intagli
    May 22, 2020 at 21:30

8 Answers 8

14

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:

enter image description here

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

enter image description here

[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.

enter image description here

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:

enter image description here

7
  • Waaay too cluttered.
    – zzzzBov
    Jul 26, 2011 at 4:32
  • @Roger Wow, thank you so much for your answer - this is incredibly useful for me. You're really helping me!
    – intagli
    Jul 26, 2011 at 7:15
  • 1
    @zzzzBov what would you change to make it less cluttered?
    – intagli
    Jul 26, 2011 at 7:15
  • I added a third option above - see edited answer. Jul 26, 2011 at 7:49
  • Further edit above. No problem - this one is down to a bit of teamwork as well I think - glad we could help :-) Jul 26, 2011 at 8:28
4

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.

enter image description here

2
  • 1
    Thank you very much for your suggestions! About your second point, are buttons near the center of the screen really easier reachable? I've been thinking about this and came to the conclusion that the buttons near the edge are easier to reach with the thumb.
    – intagli
    Jul 26, 2011 at 7:46
  • 1
    @Emanuel, the buttons near the center are closer to each other, that's what matters. 90% of the time you will be switching from button to button, not from the outside to a button. And most of those will be cars, not trucks. Jul 26, 2011 at 10:06
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. Possible change to design

1
  • It will be used on a touchscreen device. However, the tablets we are using have a resistive touchscreen and I think pressing a button is easier than swiping when counting many vehicles. But separate Truck and Car buttons to swipe are a good idea, I'll look into that
    – intagli
    Jul 25, 2011 at 13:33
3

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.

1
  • Was going to answer, but this post more or less says everything I would have. Upvoted. Jul 25, 2011 at 21:38
2

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.

3
  • Sounds like a recipe for repetitive stress injury and lower accuracy data to me.
    – Pettiross
    Jul 29, 2011 at 17:46
  • 1
    If the drag is sufficiently easy (it only needs to distinguish 3 directions each so you can really be accepting here) I think this could be the best and easiest to use: click-swipe, only 8 buttons, little precision needed. I'd be interested to see a good implementation of this tested to compare it to the other suggestion.
    – Inca
    Jul 30, 2011 at 9:39
  • 1
    I honestly believe that reducing the number of options will reduce the stress injury and increase accuracy. If the user is required to quickly choose between 24 options, which are hard to distinguish, either the wrong option will be chosen regularly, or by the time the user has identified the correct option to choose, 2 other cars have already passed the intersection. Aug 1, 2011 at 6:01
1

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...

1

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.

1
  • Mee, putting the buttons in the center is a great out-of-the-box idea, that really got me excited at first! However, then I realized that this way you lose half of your data, and you don't know where the car came from, you just know where it went. So I don't think it can be used. But still I loved the approach :) Jul 30, 2011 at 8:03
0

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.

3
  • Webreaper, do you know many people who enjoy counting cars at intersections? :) My point is that this is not a leisure app or a game, it's a productivity app designed for people whose job it is to count cars. It doesn't need to be intuitive, it needs to be super-efficient. The UI has a very flat learning curve, and can be learned in about a minute. After that minute - would you prefer having to perform one or two clicks for each car? Imagine yourself doing this at a major intersection, say 3 lanes each way, in rush hour. Jul 29, 2011 at 11:19
  • Interesting that you seem to think intuitiveness and efficiency are mutually exclusive. I'd argue that because it's a productivity app it's more important that it's intuitive. I work in a financial institution and my primary job function is designing and developing platforms for trading application development - and whilst those apps have to be incredibly productive and efficient, it's also vital that they're intuitive too.
    – Webreaper
    Jun 30, 2012 at 18:44
  • In the case where one click is efficient and non-intuitive and two clicks are intuitive and inefficient, I'd say that they're mutually exclusive. In other cases - not necessarily so. Some apps may need to be and might be both intuitive and efficient, and some apps don't need both or can't have both. It depends on the app and its users. Jun 30, 2012 at 19:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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