MacKuba

Kuba Suder's blog on Mac & iOS development

What's new in watchOS design

Categories: WWDC 20, WatchKit 0 comments Watch the video

Watch apps should be:

  • lightweight – limit the amount of functionality that you make available in the Watch app
  • actionable
  • discoverable – make important actions easy to find

All actions that were previously hidden inside Force Touch menus have now been moved into the main views of their apps (e.g. Activity settings, Weather modes, Mail’s new message)

Where to put such secondary actions now?

Sorting (example from Activity): a button at the top / first table cell that opens a modal with a sorting mode selection

View switcher (example from Stocks): a button at the top that opens a modal which lets you choose if you want to see points/percentages/market cap

→ in SwiftUI – Picker()

Swipe actions (World Clock): a delete button when you swipe a row, an add button at the bottom

→ SwiftUI: .onDelete()

Actions in a full screen view like Maps or Camera: a “more” button in the corner that opens a modal with a list of actions or options

→ SF symbol “ellipsis”

If there’s only one action, just make a button with an icon of that action (Photos app)

→ white circle at 85% opacity, 1pt black outer glow at 50% opacity

“More” button inside table cells – Workouts app

→ don’t put primary actions inside “More” menus!

Action buttons at the bottom of a scroll view – Calendar app:

  • on an invite page, buttons to accept/decline an event or to email the sender
  • on your own event, a button at the bottom to delete the event
  • for destructive actions, make the label text red and add a confirmation dialog

New “toolbar” button (Messages) – a button that appears at the top only when you scroll up, but is initially hidden

→ SwiftUI: .toolbar()

Switching between folders or groups (Mail, Home) – hierarchical navigation where you start inside a default folder, but can move up to root level