7

I'm designing an interface for an Android app that would allow the user to control the pitch, tempo, volume, etc. of some music playing in the background.

Here's what I've sketched so far:
settings for pitch, tempo, and volume, each with +/- buttons on each side

I avoided using sliders in an attempt to make the UI less cluttered. However, I still want users to be able to change the values of parameters by sliding horizontally across any of them (in addition to being able to click on a +/- button).

E.g., to increase the Volume, you would place a finger on 34% and slide towards the right.

Is there a way to ensure that the user knows about this 'hidden' affordance? Or has anyone seen something similar implemented on an existing application (iOS or Android)?

Improve this question
4
  • What happens if someone were to long-press either the + or - buttons? Will there be multiple increments? If you want slider style control you can't do that, as it's a conflict of what holding the finger in one place might mean. Fresh users might nonetheless do a long press of control button, and that's your opportunity to reveal the sliding affordance. The only confusing part is that the slider-thumb won't usually be where the user is pressing, and so could be confusing. It would likely have to look different from a normal slider (i.e. a bar with a nub on it).
    – Erics
    Jan 7, 2012 at 10:54
  • What are the ranges of values and number of increments in each of the settings? I'm guessing the full 100% for volume, in 1% steps. Pitch - how many octaves?
    – Erics
    Jan 7, 2012 at 16:54
  • @Erics, I hadn't thought about the conflict between holding a +/- button and sliding your finger - that's something I'm definitely going to keep in mind. About the ranges: Volume [0-100%] +/- 1%. Pitch would be two octaves, but I also need to be able to tune at the level of 'cents'. Tempo [60 - 500 bpm], not sure about the granularity. Maybe 1 or 5 bpm.
    – Gautam
    Jan 7, 2012 at 23:18
  • So .. sliders with 100, 240, and 440 or 88 data points each. Simple sliders on a limited space won't give you the fine control, especially with the pitch (it doesn't matter so much if you're off by 1-2% in volume, but being off-pitch will really grate).
    – Erics
    Jan 8, 2012 at 4:08

6 Answers 6

Reset to default
15

Instead of a slider, how about a roller, only this time oriented horizontally?

horizontal rollers for selecting pitch, tempo, and volume

You can also get rid of the + and - buttons and you've got both fine and coarse control of the three values, little clutter, and a visual interface that would be obvious how to operate.

Also, as @JOG notes, "the user in some cases will not be able to see the value in the middle, as their finger might be in the way" ... the roller design is superior to the slider design in that the user can control the value by interacting at any horizontal position.

Improve this answer
3
  • 2
    That could work as long as there's enough space. The app then will have an old-school analog feel to it.
    – dnbrv
    Jan 7, 2012 at 14:57
  • Yeah, I like that idea too - here's another great example of it - android-dateslider
    – Gautam
    Jan 7, 2012 at 15:04
  • 1
    Oh, don't tempt me to sepia-tone the image or apply a brass-shine effect to it.
    – Erics
    Jan 7, 2012 at 15:06
5

That's a really cool interaction but it's not standard. Sliding across a row is the deletion gesture for Android notifications. You have to educate your users about this control by either letting them stumble across it by accident or creating a first-use experience to show all the cool tricks. See Invitations section in Mobile Design Pattern Gallery for inspiration.

Also, the most natural way for this gesture to work is to allow sliding across the entire row with no designated starting point. In other words, any left-to-right/right-to-left motion across one row should mean decrease/increase respectively as long as there's certain pressure and direction to avoid accidental changes.

Improve this answer
3
  • 1
    Thanks for the link! I really liked the idea of using a transparent intro screen to show users how to use the app. And yes, you are right, the swipe gesture could be started anywhere across the entire row.
    – Gautam
    Jan 7, 2012 at 4:18
  • id vote for that too, and dont forget to add "dont show this tip again" checkbox... PS also make it graphical, I (as a user) always dismiss written tips, ALWAYS miss them, i gues im always in a hurry to start using the app, so if u just show it, like a finger swiping left and write, and numbers above it increasing and decreasing, id pick it much faster
    – Ayyash
    Jan 7, 2012 at 11:30
  • 1
    For the record, I think @EricS's solution is better but it depends on the overall visual execution of the app. In other words, simply slapping rolling dials for one control when other controls don't have the same analog feel will destroy the experience.
    – dnbrv
    Jan 8, 2012 at 0:11
2

I agree with the others. For any uncommon interaction, you need to educate the user. Here's an example from Google Voice for iOS on what is rapidly becoming an expected iOS interaction for refreshing a list of results:

enter image description here

In this example, the "Tip: Pull to refresh" disappears once the user does it once. Maybe you could do something like this with the text "Tip: drag on items to change their values".

But, be careful to not have this swiping interaction hide the numeric value.

Improve this answer
0
1

Im gonna give you a boring answer and that is that with the - and the + sign and the digits I think ui still would be cluttered.

  • Why not use a slider that display the digits as a tooltip when you press it? Or to save more space use a knob?

    What you are trying to implement is not standard and even if you show an introscreen people will dismiss it. Plus people really like uis they have seen and interacted with before because they dont need to think to much and learn how to use just your designpattern.

Improve this answer
0

Here are some thoughts:

  • @dnbrv is right, you need to educate your users.
  • If the sliding is for precision, please note that the user in some cases will not be able to see the value in the middle, as their finger might be in the way.
  • If you chose the centerpiece as the starting point or not, you could let that be the first place to start sliding from.
  • You could let the centerpiece move slightly as +/- buttons are being pressed. That way users learn that the centerpiece moving right and pressing + is the same thing.
  • Another way to educate them is when opening the page, you could animate the encouraged behavior. Say, opening a page, the volume starts at 50% and moves left until it reaches 37%. The same way the pitch starts at C and moves right until it reaches C#. The whole animation does not have to longer than a second or two.
Improve this answer
0

Use a 'rough' graphic pattern on part of the thing which slides.

The affordance is that, as with a real object, the thing will grip and slide with your finger if you slide over it.

(Windows has always used this in the far bottom right corner of a window to show that it can be resized)

Improve this answer

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.