Action sheet Mobile app

Lets select actions from a panel class associated with the context.

9 checks · 3 content groups

Checklist contents

Review progress

Screen and context

Compare information and presentation in context of use.

State the object of the actionUse the headings to see which items the choices apply to.Use one hand to open the menu and touch adjacent rows. Separate the delete action from the regular selection; Closing the table must return the correct previous context.Example Panels include “Share”, “Rename” and “Delete photos”; The delete button is separate, while “Cancel” just closes the table.Write the name of the specific actionKeep frequently used options easily recognizable and don't mix multiple purposes.Place frequently used options where they are easy to scan; The action name should be clear enough even if the user does not read the description above.Separation of dangerous actionsSet delete or block separately and include confirmation when needed.Separate deletion or blocking from commonly used options, keep the touch area wide enough, and confirm according to real-world consequences.Cancel without changeHas a clear closure and appropriate base touch or pull down behavior.Closing with the cancel button, touching the background, or dragging down requires the same result: keeping the data and making no selections.

Action and feedback

Try the operation, change the status and continue working.

Maintain focus and correct reading orderTells the support tool that the panel is open and returns the activation when closed.Check the panel has many optionsAllow content to scroll while preserving context and escape routes.Shorten selection before adding scrolls. If scrolling is required, make clear the content below and keep a visible exit.Hold the action when the keyboard appearsIf the panel has an input box, adjust the height and do not cover the main button.Try the panel near the bottom of the screen with the keyboard open; The input box, error, and confirmation button all need to be visible.

Complete the experience

Check for details that are easy to miss when putting the design into use.

Indicate that the sheet can expandIf the sheet supports several heights, use a recognizable drag affordance and resting positions so users can discover additional content.Try dragging up, dragging down and manipulating with support tools; The opening level must not obliterate the title or exit button.Distinguish the sheet from the screen behind itUse a backdrop or clear layering to show that the sheet is active and prevent accidental interaction with the screen underneath.When the panel is open, background content receives no focus or action; Closing the panel needs to bring the user to the correct trigger point.

Progress is saved automatically in this browser.

GUIDANCE

How to review

Check for operations that can easily be mistakenly selected

Use one hand to open the menu and touch adjacent rows. Separate the delete action from the regular selection; Closing the table must return the correct previous context.

EXAMPLES

Usage examples

Select for a photo

Panels include “Share”, “Rename” and “Delete photos”; The delete button is separate, while “Cancel” just closes the table.