Pane vs Modal vs ?: Across all screen sizes

Question

Pane vs Modal vs ?: Across all screen sizes

I am currently working on a web application that needs to be responsive, accessible, and provide a solid UX across all device screen sizes. We currently see our application as a "reference tool" with a large number of list views where a user may occasionally want to add/edit a single item. Most of our URL routes lead to a page that contains only a list view. Anything outside of the "flow" of "reference list, filter list, etc." we want to visually separate into a container/component that contains the new "flow".

Our UX team is currently in a heated discussion around the best way to accomplish these goals in the following contexts:

Performing Edit/Create/Update operations for a single item [form]
Sending e-mails/messages
Modifying a user's account settings
"Additional Info" screens for extended information

The two components we are considering are "Slideout Panes" and "Popup Modals" (pictured below). Considering we want a responsive, UX friendly, consistent option, I have the following questions:

Questions:

Are we missing an obvious component or two that could also satisfy these requirements?
What are the strengths/weaknesses of these components in different screen size contexts?
Which component offers the best consistent UX across all devices?

Updates:

List of expandable cards -- A responsive component the removes the need to consider the "Performing Edit/Create/Update operations for a single item [form]" context, but still leaves room for solutions for the remaining contexts.

Slideout Pane

Popup Modal

Which component offers the best consistent UX across all devices? - The idea that one solution works equally as well on the desktop as it does on a 5" mobile screen is faulty. Your user's needs and goals are different when they are sitting at a desktop from when they are on a mobile device. You need to design to those situations individually. — Nicholas Pappas, Sep 30, 2015 at 19:29
While I agree, I think there is an appropriate middle ground. If you have a component that works well on both devices, you introduce consistency, and there is less of a break/shock when transitioning from desktop to mobile screens. Similarly, if a solution is adequate for both, you reduce developer/implementation time. Saying that there is never a solution that provides good UX for both situations seems faulty. However, there are definitely situations in which relying on different components for different screens is important. — Daniel Brown, Sep 30, 2015 at 19:42
So with the slide out pane only cover 60% of a modal window? That doesn't seem like the best use of space, and as such I don't see a big difference between a modal and a slide out. — user73986, Sep 30, 2015 at 23:14

Luis Martinez · Accepted Answer · 2019-07-26 16:09:28Z

I have faced the debate, this is my conclusion thus far.

Slide Out vs Modal

In an application, it is important to make the distinction between information that requires immediate attention/action and those that do not but need to be in context.

Slide Out

Helps keep a consistent design by size/height vs a modal that could have various width and height sizes.
Do not require space all around, top, bottom, left, right vs modal does.
Helps keep better context of the primary screen vs popup that blocks the primary view.
Slide out do not require immediate attention and action by the user, thus less intrusive.

Modals

Are intrusive, block the primary screen and they should be. They should present information that requires immediate attention and action before the user can move forward.
Requires immediate attention thus why the primary screen is blocked, the user cannot do anything until the task is performed.
Modals can be initiated by the application vs slide out by the user.
That have tasks involved don't work well on mobile, it's best to take full screen and thus defeats the purpose of the overlay.

this is a great way to put it Luis. My thoughts were that you need a slideout when you need to perform advanced actions on the page such as creating a field to append to a list. But then so many platforms use modals for making the user do advanced actions — harshikerfuffle, May 7, 2020 at 16:24

Paul Dessert · Accepted Answer · 2015-09-30 18:59:18Z

2

It sounds like your team is overthinking the issue ;)

A popup on a mobile device is a bad option. Screen sizes are much too small. You'll have a hard time if your form is large. It's also extremely clunky on mobile. Leave the popup modal for errors, warnings and messages. Not user interaction.

The slide out option will allow much more screen real estate on any device. It's also easier to use on a mobile device. In your example above, you still have 60% of the screen available to you if needed.

answered Sep 30, 2015 at 18:59

Paul Dessert

1,49610 silver badges10 bronze badges

Personally, I am not a fan of "Popout Modals" for either screen size, but some of my co-workers disagree. Are there any issues you can think of to using slideout panes for both screen resolutions? Are there drawbacks to breaking away from the main page to complete these side actions?
– Daniel Brown
Sep 30, 2015 at 19:48
1

No, I don't think there are drawbacks. BUT, I might not be your target user. Have you thought about doing inline edits/additions? In some cases, this is useful, in others it's harder. It all depends on your end user.
– Paul Dessert
Sep 30, 2015 at 19:56

Add a comment |

Amitis · Accepted Answer · 2015-10-02 00:57:02Z

I am working on same case scenario web application which has 100 of slide out panel and pop up .After working on this confidently i am saying no to pup up except for message , error and ... as Paul Dessert said.(

Why? 1- as some people block the pop up and also browsers do. 2-and also pop ups have problem with mobile devices . ( different issues like stick to the top and so on ).

And also about panel : It depends what sort of panel you want to use: there is 3 kind of them :

1- Reveal 2- Overlay 3- push https://api.jquerymobile.com/panel/

We use overlay in our application and I think you use the same in the above picture, but i should say if you see the application you feel vomiting , imaging for every editing user should see something like ghost appear on screen . so if you want to use this Ui go for push or reveal.

However you can do some thing else and i would call it edit in place( i am pretty sure there is specific name for this)

When you want to see more details or add data or edit the area it could be expand however if you have a very big chunk of information you should go for slide panel or a page ( I understand your concern about going to new page but that one is solvable you can have a bread crumb oH yeh ! how on earth an application with bread crumb No worries with a sibling bread crumb not child bread crumb ... )

For mockup balsamiq mockups was used.

Stack Exchange Network

Pane vs Modal vs ?: Across all screen sizes