When using a popup or a new page?

Question

I have following situation at work (older Forms application):

we have an order entry form, which consists of 3 main tabs: the order header, a confirmation tab and the order detail (lines). I have made a simple mockup to explain the situation:

^{download bmml source – Wireframes created with Balsamiq Mockups}

The order lines have a grid (which can be directly edited) and has several tabs to display more information (less/not critical for the order line). Our orderlines have another sublevel, Delivery lines. Delivery lines are delivery details for one line, for example: 100 pieces ordered, will be delivered on two dates: 60 pieces this week, 40 for on another moment.

The representation of these delivery lines contain an overview of the current orderline, and the delivery info itself (again a grid with details underneath it). I am running out of space showing al this info into tabs (our application has no fluent ui).

How would I show this information:

• the popup needed is almost as big as the form itself, because the orderline info is being repeated (lightbox technique not possible, so popup does not realy stand out.
• We could show a new page above all tabs, but it seems weird because it feels like navigating out of the order. I constantly ask myself if we shouldn't do the same for order lines when using this

Do you think of other solutions to try?

Answer 1

If I understand correctly, each line in the Grid has another set of Data, but there is no space for more tabs.

If that is the case, ou could do something like this:

Sorry for no paint skills.

If possible with the technology you are using, you could expand the selected gridline and have arrows for controls.

Generally, i think popups suck and are the worse. Lightboxes, in my opinios suck as well.

If its a lot of Info, and you couldnt possibly fit it below each line, you could have another page, "off the screen" which you slide in, while pushing the rest of the page in the other direction. Again, if possible with your application.

Answer 2

Instead of tabs try to form your own a process consisting of various steps, just like in webshops for example:

1. cart
2. shipping details
3. review order
4. confirm
5. done

Invent your own steps, number them, display on the top, and it will be easy to use! Something like this one:

Answer 3

While you could do a wizard type of solution it really lends itself to a process that's linear and one where the user can't proceed to the next step unless the last one is completed. of course this isn't always the case but then it can get confusing for the user to jump to say step 5 then back to 3 for something.

From what you've shown the smaller bits of the form are not complicated. You could do this in one longer form with sections that are closed. Think of specific accordions in areas where more clarification is needed. If more info is needed a hidden draw then slides down thus giving the user a way to enter the info.

You need to think broader and more creatively. Tabs are done. They're easy and thus programmers love them. Think about the experience that your users are getting outside of your app. Expectations are being set that at least need to be met when a user lands on your app. Look at interactions, designs etc outside of your world and how could you enhance what your bringing to the table by possibly leveraging something you had seen. Take a risk a little, but make it calculated.

Answer 4

Have the first column be Header, Confirmation and Lines and then depending on which one they click on you show one of three user controls. The second column is just a thin grid control with one column. Devexpress has an advanced banded grid view that would allow you to put more detail than just the Article code into the second column for the user to see. The only issue I could see is that because this is an entry screen the user would want to verify that they have the correct quantities and all the lines on the order and this style maybe takes away from that. Just trying to give you a different idea that maybe you could customize to your needs.

This look also makes it easier to use on a tablet.

I'm not allowed to post an image yet but you can see it here at screencast: http://screencast.com/t/CP3cGzmza