07. Dialog

Provide a dialog pop-up, which requires a user action, at the bottom. If any action is not allowed (e.g. when ‘Loading...’ process gets displayed and any other action such as cancel is not allowed), then place the dialog pop-up in the middle of the screen. Display a dropdown menu on the spot where it is being touched.
If a user deletes information that is considered very low in importance, then remove it immediately without displaying a confirmation pop-up (e.g., If there is no loss in content or it can be easily recreated (restored)).
When the user launches a feature, don’t provide a pop-up that shows a simple description about the feature or feedback (e.g., a pop-up confirming that the user has read all messages).
Depending on the importance of the pop-up’s content, decide whether you should provide it only once at the beginning or always.
An important pop-up should be provided at all times. Avoid using pop-ups that are displayed only once at the beginning (except for legal information).

Title + description + button

Chooser activity

Date/Time picker

Contextual menu

Provide a contextual menu pop-up for related options when the user taps and holds an item in list/grid view. It’s recommended that you provide it as a dropdown menu without a title.

Color picker

Provide two types of color pickers. Use a color bar-type picker to allow the user to choose a color while looking at the image they are currently working on. The user should also be able to choose a color through an advanced color picker in case they want a wider range of colors.

Example of device application

Phone

1Min width 100%

2Min width 60%

Tablet

1Min width 60%

2Min width 37.5%