MacKuba

Kuba Suder's blog on Mac & iOS development

Design with iOS pickers, menus and actions

Categories: UIKit, WWDC 20 0 comments Watch the video

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



Leave a comment

*

*
This will only be used to display your Gravatar image.

*

What property can you use on iOS to get a unique device ID that the user can reset in Settings?

*