7

I have an application that's quite complicated -- and unfortunately there's a TON of data that needs to be displayed...and not enough room. I have a 2x3 grid with "objects". These objects contain high-level data. If the user wishes to see more detail, they must click "more information" and a modal displays that shows them information and the ability to edit the composition of the elements contained inside.

I chose the modal for two reasons -- -First, the user would want to view all of this information (and boy, is there a LOT) on one page. They should be able to view all data at the same time (thus, accordion menus are not an option, however scrolling tables are forgivable).
-Second, I did not have enough real estate and i think double scrolls (there are several tables of data that need to be displayed - and almost all of these tables have a lot of rows) are a terrible idea.

That being said, the modal allows the user to edit the elements in the table. However, in order to edit these elements, they must go to another tool (this will not change - it is a hard requirement since the tool is extremely complex and requires its own screen - there's just no way around this).
Is there an elegant way (or perhaps even an example?) of how to re-direct a user from a modal to another tool/page completely? Am i smoking crack thinking that this could quite possibly? Any feedback is helpful.

1
  • EDIT THIS DATA button -> send to other page? It's not so much the re-direct that's the issue it's the frustration a user will encounter having to go back and forth between the two.
    – DA01
    Dec 26, 2013 at 18:57

4 Answers 4

2

Having a lot of data, you should use some solution, which allows to reduce information overload and focus user on a current task. This could be implemented as separate page, tabs, modal windoows, etc.

Some additional information about the task, users and context will help to choose better solution. Still, I insist, modal window is acceptible solution if it is self-containing and presents separate task.

@DmitriZaitsev wrote the modals break the application flow. This is true only for the modals which have no relation to the current task, e.g. advertizing or obtrusive feedback forms. It's not your case.

An example of using modals and re-direction is eBay:

Hub page with lot of items
enter image description here

.

Modal window which contains redirection link
enter image description here

Possible issue with modal is double scrolling on a page.

5
  • this is exactly what i wanted to see! in your opinion, do you think the modal is a bad idea? THe modal will not have a scroll as it's meant to be a "one sheeter". I figure, the modal wasn't a terrible idea since it's displaying more information about an object selected (as seen in your example).
    – yeahumok
    Dec 25, 2013 at 17:09
  • 1
    Modal is not bad if it contains the whole interaction. So a user should not switch back to initial view and re-enter the modal while he performs some task. Ebay example is convincing enough. Dec 25, 2013 at 18:52
  • I can see this little X in the upper right corner. Does it assume this is the only way to get rid of the modal? Instead of simply clicking away. Dec 26, 2013 at 2:27
  • @DmitriZaitsev Close button rather big and distinctive. Modal closes also with ESC and clicking outside. Dec 26, 2013 at 7:44
  • Clicking outside is what I mean! Sadly doesn't work in most cases. Seems like developers are mislead by the Close button and think that is enough. Dec 26, 2013 at 8:52
3

Modal windows to show more data is a bad idea. You lock the view from other elements in the page, which will make data consumption difficult for you users.

Accessing more information from three different boxes in your design require six click, and the overview is lost. Open A, Close A, Open B, Close B, Open C and Close C. You also add massive cognitive load on your users which is what we try to avoid in UX.

Please consider using show more/show less links instead. Your overview will still be present and users find all data they need with three clicks only. Show more A, Show more B (A will still be expanded) and Show more C (A & B will still be expanded)

enter image description here

2
  • cognition load i think won't be too terrible in this case. for my issue, the user needs to focus on one object at a time, digest all the information necessary and make decisions to edit the composition or to act on the object itself. it's never a case where the user would need to take a complete landscape of all objects and then perform actions. that's why i thought modals wouldn't be too disruptive. additionally, i do not have the real estate in my window to do the "show more". I tried this and sadly, it results in double scrolls which i think is a bad idea.
    – yeahumok
    Dec 25, 2013 at 17:08
  • i should also add that these objects are arranged in a grid. therefore the "show more" might not work here since i'm limited with grid real estate. however, would you know of an example where if the user presses "show more", the screen auto-scrolls, buts the object in focus at the top and displays the additional data? that might be an idea if it's a real ux pattern!
    – yeahumok
    Dec 25, 2013 at 17:12
1

Just my opinion, but I find modal pop-ups annoying as they break the application flow. The standard function of "More Information" link is to place it inline (see e.g. Tripadvisor or Trivago). This is what user expects, which is why having a pop-up can be irritating.

Some sites sadly make it worse by making pop-ups block the flow, unless the user click the tiny hard-to-find icon to get rid of the window. At least, they should allow the user to click away instead.

Redirecting to another window can also break the flow if that's not what the user intended.

From what I understand in your question, you may be trying to achieve too much - too much data, too many actions, too complex. Maybe it is possible to reduce at least to begin with at the cost of increasing usability?

1
  • ah, i wish i could limit what the functionality needed in this app was -- but sadly, these decisions are hard and cannot be changed. that's why i'm trying to create a better ux around what the app needs to accomplish.
    – yeahumok
    Dec 25, 2013 at 17:10
0

If data editing always takes place in a separate tool, you could place a direct link to this tool in your high-level view (see picture below). This way the user doesn't have to make a detour through the modal dialog. If necessary, you can keep the modal dialog in order to show the details in a read-only mode.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

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.