1

The Problem

I need to display in my app two values, one adjacent to the other.

The two values at the moment are displayed like this:

20 / [16]

What do they mean?

Well, the first value is the current value, and the second one is the new value that will be active in not more than 30 min.

Apparently, this is not easy for my customers to understand, and I am trying to figure out if there's a better way to show it.

Something to bear in mind is that I'm quite limited in space.

This is an app that works on both mobile and desktop, and the smallest mobile device I support has a resolution of 320px.

at the moment, with my current design, this is approximately how much space I have to play with:

enter image description here

so it's quite clear that I don't really have a lot of space to play with.

Solution Ideas

Some ideas I had were:

  1. Current: X/ Next: Y
  2. X / Pending: Y
  3. X / Spinner Y
  4. X (if tapped show a popup with a description)

The point one it's quite hard as space is already quite limited.

The point 2 might work, but again I am quite concerned with space

The point 3 will be good spacewise, but I don't know how clear it will be

The point 4 is not consistent with the rest of the app, as unfortunately there's nowhere else on that page something clickable that shows popups.

I am quite stuck here and I hope for some good suggestion from you guys.

Improve this question
4
  • Is the value set according to time? For the 4 choices that you have given the 1st one seems better to me, but I miss the context in this question. Maybe something like =>Current: X/ Next in (timer): Y
    – Dimitra Miha
    Mar 2, 2017 at 10:42
  • Hi, no not really. It's not used to display time. Basically it means that next time it refreshes (in 30 min) the value (X) will then change to (Y)
    – Nick
    Mar 2, 2017 at 10:48
  • Is it important for the user to know when the value is going to be changed?
    – Dimitra Miha
    Mar 2, 2017 at 10:50
  • Nope. It's a variable time. It means that next time I can successfully communicate with the device, the value will change to Y (which should be in 30 minutes, but it's not guarantee)
    – Nick
    Mar 2, 2017 at 10:51

2 Answers 2

Reset to default
2

I think these things can help:

  • indicator for a process/change like an arrow
    (understanding the relationship of the 2 numbers)
  • editable gui element, like your 3. suggestion
    (number is not fixed, so the user knows it's not a current but future value)
  • color
    (clear difference between the numbers)
    • but not signal colors like orange/red, since these convey danger

Possible visualizations:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Improve this answer
0

I have edited my answer. Not quite sure this is going to help or not, However is it possible to have a small label on the bottom of each value other than having it before or after as showed in below?

enter image description here

Improve this answer
1
  • It won't be easy to see, specially on small screen devices. Thanks for taklng the time to answer, anyway
    – Nick
    Mar 6, 2017 at 11:02

Your Answer

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

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