5

I'm struggling to show affordance for my calculator element. The user of this app is taking phone payments for bills. They've clicked on an icon from the main screen that allows them to split out the bill payment into different "buckets" or categories (principle, interest, escrow, etc.). From this modal window, they have the option to enable the calculator widget in the event that they have to manually perform some calculations. The calculator slides out (to the right) once the user clicks the button.

My questions:

  1. how do I display the right kind of affordance on the calculator that informs the user that they can move the calculator anywhere on their screen? Is a "move" icon (as shown in the wireframe) sufficient for this?
  2. while the calculator is open, I'll need to restrict the user's ability to close the modal window (in case they click somewhere and accidentally close both calculator and modal). Any suggestions on ways of indicating that they can't close the modal window while the calculator is open?

My wireframe:

Open calculator function from a modal window

Thanks in advance.

------- FOLLOW UP --------

Based on the great suggestions I received, I wanted to share my final product. I modified the calculator to function like a slide out drawer.

Calc collapsed

Collapsed Calulator View

Calc Expanded

Expanded Calulator View

Improve this question

1 Answer 1

Reset to default
6

A lot of the challenge you're dealing with stems from the complexity of communicating and managing the relationship between the two windows (form and calculator).

Ultimately, it looks like the calculator is there to assist with the form, so you may want to consider removing the "two windows" part of the problem altogether. Just have the calculator slide out as a fixed sidebar to the form:

slideout

This removes the need to drag around separate windows, enforces a grid layout which is simplifies layout and can help calm the user, and visually connects the two windows in a way that solves your modal priority problem so it's clear how to dismiss the calculator and what relationship that has with the form.

btw, i thought your question was well articulated.

Improve this answer
4
  • 1
    I think this is a great solution. To add to this and address your other question about closing the window... Are you sure you'd want to prevent the user from closing the modal while the calculator is open? It seems to me that it would be natural for the user to click the calculator, use it to break out the amounts, and then click "Apply splits". If they close the window, they likely mean to close it as I don't think your interface has other buttons nearby the "x". It might be annoying if you're forcing them to close the calculator before they can close the modal window.
    – Lauren Dankiewicz
    Commented Feb 27, 2015 at 22:55
  • Totally agree. The close button should close both... I just omitted it out of pure laziness :-)
    – tohster
    Commented Feb 27, 2015 at 22:59
  • Thank you so much for your response @tohster! It makes perfect sense to avoid the peripheral "draggability" issue and attach the calc to the modal window in a "drawer"-type element. Once attached, I agree, that it makes sense to close both when either they close the window or apply their splits. This helps a lot.
    – JWMC
    Commented Feb 27, 2015 at 23:11
  • Also agree @LaurenDankiewicz - either closing the window or applying the splits should also close the calc function. Thanks for jumping in with that recco, I would have likely overlooked that. Appreciate your time!
    – JWMC
    Commented Feb 27, 2015 at 23:12

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.