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:
- 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
