WWDC 20
Design with iOS pickers, menus and actions
iOS now includes new lightweight menus in a lot of places, same as the context menus shown below previews
They replace a lot of previous use of action sheets
Disadvantages of action sheets:
- dimming the background of the whole window is a too strong effect in most cases
- wastes space because the rows take full screen width even though labels are usually short
- they always appear at the bottom, so you often need to move your finger across whole screen if the element that launched the menu is at the top
The new menus appear next to the element they launch from, take less space and require less finger movement, the transition is shorter and lighter
Actions in the new menus can also be used for selection and navigation
Each action has a title and an optional image (SF symbol or custom)
Menu can have its own title at the top
It can also include separators between items
A menu can be presented from any button, in a toolbar or the main view
Menu is dismissed when the user taps somewhere outside, so an explicit “cancel” action isn’t needed
Example use cases for menus:
Disambiguation:
- “add” button shows a choice of what kind of item you want to add
- “insert photo” button shows a choice of where you want to load the photo from
- “done” button asks how you want to save the finished video
Navigation:
- “back” button shows a history when you press and hold it
Selection:
- “sort” button lets you choose the sorting field
Secondary actions:
- “…” button displays a list of less important actions grouped in a menu – it lets you clear up the rest of the UI which would otherwise be cluttered with buttons and switches
- however, do not hide primary actions inside a “more” menu
Destructive actions (delete a list) should be marked as such (with red color) and should show a confirmation in a different place than the first button
→ display an action sheet at the bottom of the screen: Are you sure? Delete List / Cancel
Do this also for destructive actions that aren’t launched from a menu (e.g. when clicking a “Cancel” button while composing a message) – don’t use menus for this since it would make it too easy to confirm by accident