I am trying to represent a variable that is set by a user that effects the cost of an item. The same variable would show on each applicable item block. Block may or may not be stacked as in the image (the grey box could be in between the green box). Is there a better way to represent this variable item amount?

Options blocks

  • At what point in this task flow does the user select the variable?
    – coffeecola
    Oct 29, 2014 at 18:07
  • When the user comes to this page it is set to a default number. There is a link and button that presents an overlay to adjust as needed, when they save the value the page is refreshed with newly calculated values.
    – CJ Teuben
    Oct 29, 2014 at 18:24
  • What are the issues you have with the way you've already represented it?
    – dennislees
    Oct 29, 2014 at 21:23
  • When there are multiple green boxes up to 6 client feels the representation is too redundant and causes visual noise.
    – CJ Teuben
    Oct 29, 2014 at 21:26
  • Can the variable adjustment happen as "step 2" after they've chosen a plan? It seems like a lot to take in at once.
    – nightning
    Oct 29, 2014 at 22:05

2 Answers 2


How about indicating with an asterisk or an icon of similar meaning like (!) or (?) next to the cost, to show that it is being affected by a separate/global entity. This would be similar to a page note, for which a reader can look up additional information if they choose. Or use an icon that has some meaning associated with the variable.

Upon hovering over or clicking on the icon and/or the cost, you could either show the variable underneath, or display a global contextual info box that houses the variable and any related info. You could let the user change the variable from this global box, thereby updating all the visible costs in real time.


Seems like the issue is the use of the boxes/buttons to represent data points that could just be text, and as text would take up less space and be less prone to creating the visual noise you talked about.

I've given it the label "Metadata" but it could be something less technical, and I've made each item a simple link, but you could utilize other selection methods as you required.

There's a feature similar to this in an app I'm working on and I call it a "Stat Drawer" (because it slides out, and has stats) The idea is the same: Create an area in the UI that can handle a variety of textual information (and a small amount of interaction).

enter image description here

  • The boxes around the data are for visual spacing and are like this currently for live website (cannot change unfortunately). They don't show as white on the site but are used to represent potential amount of needed spacing. In each box is an amount followed by text for what amount is represented
    – CJ Teuben
    Oct 30, 2014 at 3:35
  • So what about the UI can you actually change? It will be helpful if you define any constraints you have. Are you essentially asking how the existing elements can best be rearranged?
    – dennislees
    Oct 30, 2014 at 3:49
  • I can do anything with that variable. Doesn't have to constrain to the block style of the previous two.
    – CJ Teuben
    Oct 30, 2014 at 4:06

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.