Pane vs Modal vs ?: Across all screen sizes


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:

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

Updates:

  1. 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

Slideout pane

Popup Modal

Popup modal