3

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 '14 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 '14 at 18:24
  • What are the issues you have with the way you've already represented it? – dennislees Oct 29 '14 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 '14 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 '14 at 22:05
1

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.

0

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 '14 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 '14 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 '14 at 4:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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