I have a web page which relates to a specific record and has a fair amount of interactive content.

I have additional interactive content which is only associated with the same above record/page but serves totally different needs, is not needed as often, and includes too much content to add to the above page.

I currently have an "Extra Stuff" button on the main page which opens a module popup for the extra stuff. The module also has its own module which is usually frowned upon. While not really designed for mobile devices, I think the extra stuff module should go away, and be replaced with a separate page or some other strategy.

What would be a good replacement for a modal? If I replace it with a separate page, how do I communicate to the user that it is only associated with the main page's record?

  • any reason why you couldn't use an accordion to hide the extra info, which is collapsed by default? semantic-ui.com/modules/accordion.html – Midas Mar 29 '16 at 13:50
  • @Midas The only reason "might" be that the content serves a very much different need, and I wish to focus the user on the task at hand. You think an accordion is the way to go? – user1032531 Mar 29 '16 at 13:56
  • 1
    In answer to your q "What would be a good replacement for a modal?", then an accordion is one option which avoids separate pages and implies that it is only associated with the main page record. – Midas Mar 29 '16 at 14:14
  • @Midas I agree. – user1032531 Mar 29 '16 at 14:44

As an alternative to a popup or modal, you could use an accordion pattern to add more content on the page - but collapsed by default.

This meets the requirement to allow the user to associate the information to the parent content, whilst only slightly increasing the amount of content on screen shown on load.

Example of accordion (first panel expanded).

enter image description here

| improve this answer | |

In this case, you could present the 'extra stuff' on a new page, but include breadcrumb navigation to show the user that they are 'within' a record already.

A “breadcrumb” (or “breadcrumb trail”) is a type of secondary navigation scheme that reveals the user's location in a website or Web application - Smashing Magazine

The breadcrumb reminds the user of their location, allowing them to build an effective mental model of the data.

It may also be wise to alert the user that any changes they make on the 'extra stuff' page only apply to the original record they came from. You could imply this in the copy, or as a tooltip associated with any save or commit messages.

| improve this answer | |
  • Thanks Joe. Let me think it over. And do you definitely agree that complicated modals which even have their own modal popups are bad design? – user1032531 Mar 29 '16 at 13:19
  • Yes, I'd agree that modal views should not have an additional modal view. Modal views are usually used to display a limited amount of information that needs the users direct focus or attention, so displaying large amounts of data inside is not great.. – Joe Mar 29 '16 at 13:23

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.