Michelle from Sydney, just started her new job at Awesome corp. She is a junior developer and gets her first assignment – improve the profile pages of the company mobile app.

Eager to get started, she plans it all out and starts googling for some nice mobile UI controls. Looking at and trying a couple of things, Mobiscroll seems like a good fit. After doing the necessary research and legwork, she goes to her boss.

“Hey, Mike, do you have a second? I think I have found the perfect solution to our mobile UI. Let me show it to you.”

The demo goes well, and Mike asks how much would this cost. Michelle says X dollars, which sounds fair so they decide to get a couple of licenses.

The next day Mike picks out his credit card to purchase and all of a sudden realizes that the prices were in USD not AUD. He does the purchase either way, and calls up Michelle…

“Hi, just letting you know I’ve purchased the licenses we were talking about yesterday, you can go ahead and download it. Btw. It was a little confusing… I thought the prices were in australian dollars”.

So what’s the problem here? The expectation of the user was australian dollars instead of us dollars. The user’s brain defaults to something and when they realize it’s something else, anxiety takes over. It’s like you walk on a hallway and then someone jumps in front of you. Of course this is not the “same scary”, but you get the picture.

Mike did purchase and Michelle didn’t do anything wrong, however there were two bumps on the way. First it wasn’t obvious to Michelle that the prices were all in USD and Mike who was paying for it all of a sudden realized it’s a different currency.

These are small things, but important. So having a small print about this might not be enough in some cases.

Even the smallest things like these can add friction, which eventually adds up and could throw the user overboard.

The guys from Etsy wrote a great piece about how they format currency across multiple languages and localization. They go in depth and share the tools they use for serving millions of customers worldwide.

Keeping it simple

Keep the depth to a minimum. Let’s take a filtering example. You are looking for a new car and have a maximum in mind that you want to spend. On your first couple of visits you might not add a money filter, or you might remove it just to see if there is something available for a couple of hundreds more, but eventually you want to filter by price. You could do it with two dropdowns, but again… too much interaction needed. Or you could do it with a slider. You can even have a range slider with the two ends. This way the user can slide it to the desired value.

What UI to pick? Depending on what the user is doing you have a couple of options.

Filtering

Whenever the user needs to filter, we are almost always talking about a price range. In some cases a fix value might work, but users usually want to put in a range. Think of refining a search on Amazon or looking for an Airbnb.
The slider should be your goto. This is easy to grasp, and the selection is visible to the user. The fact that the slider highlights the two ends and distance between them it makes it obvious that we are talking about a range.

You can also use a scroller control to pick a range. It depends on how gradual you want to be, so if you can live with bigger steps between the values from the wheel, the scroller is perfect for this job.

Single and multiple currency

Whether you need to accept multiple currencies or you are working with a single currency the scroller is a good fit. Recognizable UI on mobile, similar to a select, just a little more targeted.

Hybrid solution

There are cases where you can improve the UX by having two solutions. Most of the times the users might want to just adjust the default value with a couple of clicks. The stepper comes in handy, but some users want to have more control over the selection, so give them the opportunity with a numpad. This is a classic case of supporting an interaction like data entry via an input, plus providing that little extra polish in form of a stepper.

When looking for the best solution, the answer is almost always “it depends”. And it really does depend on the situation. So this is where the customer interviews come in. The goal of conducting customer interviews is to learn about the intention of the user, and find out what they would like to accomplish. It is not to figure out if control A is better than control B. That is something you will have to decide on your own, it doesn’t help to ask the user if they think A is better than B. Your ultimate goal is to help the user be more successful so you will need to figure out the best UI for that. Pick what is best for the user at that moment.

Working with money can be tricky, make it obvious what the currency is and do your best to help the user get the job done as fast as possible.

If you are looking for quick, no-hassle solutions that can be literally implemented in minutes, check out the products we provide at Mobiscroll.