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 have an app that displays two values (weight and # of reps) a user can change these values by pressing a - or + button on the left and right of the values. However when a right handed user reaches over to press the - it covers up the value.

I tried moving the value to the left and having the buttons directly to the right, something like this:

135   [+]    8   [+]
lbs   [-]   reps [-]

But that doesn't look as simple, there just seems to be a lot more going on.

Any suggestions on what I can do to fix this while maintaining a clean look? screenshot

share|improve this question
1  
The contrast of the white text above the yellow background is really low, especially for a mobile phone which may be read in daylight. Either make all the text black, or leave the text white and make the entire background darker. –  Danny Varod Oct 29 '13 at 17:13
    
Have you tried moving the (-) and (+) buttons to the sides and reshaping as [-) and (+]? –  Danny Varod Oct 29 '13 at 17:15
    
@DannyVarod The image really saturates the colors, on an actual device the white text contrasts much much better. I'm not sure what you mean by moving the buttons to the sides, just further out on the same axis? wouldn't the left side be harder to reach for a right handed person? –  ndomin Oct 29 '13 at 17:27
    
yes, that is what I meant. If you use your thumb to click you'll end up with aches. I don't think it is a health practice to encourage users to do that. –  Danny Varod Oct 29 '13 at 17:49
add comment

2 Answers

The iOS Vueling app fix the usability issue (thumb covers the value) putting the counter on the left side of the view and the +/- buttons on the right side. When the user pressing the button -, with this configuration, the counter's never covered.

The second example is a Windows Phone app. In his layout you can view 3 vertical stepper (in WP stepper is not a standard controls). His visual design is much beauty than the first example, but if you use the thumb these stepper maybe suffer of the same usability issue (depends on thumb dimensions), not if you use the index finger.

Vueling example Windows Phone example

share|improve this answer
1  
if you tap + on the JetAirways-Screen, the values are also hidden - exactly what the questioner doesn't want. The other one works. –  L. Möller Nov 7 '13 at 15:37
1  
Can you describe these a bit more, detail how they solve the issues the OP has raised? Otherwise it's not really much more than a couple of screenshots you've found that may (or may not) be relevant (which incidentally doesn't help if people are searching this site for answers as images aren't searchable). –  JonW Nov 7 '13 at 15:42
    
Yes, the first example is better. But the Windows Phone layout works quite good if users use the index finger ;) –  Paolo Montevecchi Nov 7 '13 at 15:45
add comment

Why not use the standard iOS stepper?

135 lbs     [-][+]     
8 lbs       [-][+]
share|improve this answer
add comment

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.