Okay, I've been struggling to find an answer for this in the Apple HIG guidelines, so I'll ask here.

In the attached image, what is the difference between the three screen types?

  1. Full-screen modal that flies up from bottom of screen.
  2. Internal screen with back button
  3. Large detent sheet with ability to drag to dismiss.

What is best practice for each of these screen types? What type of content should go in each? I can't seem to find a consistent theme across apps.

Thanks.enter image description here

2 Answers 2

  1. Full-screen modal that flies up from bottom of screen: this might not be a modal but a page with a fancy "transition-in" animation. This is why it and 2 have similar looking UI. Also, be careful with these, I don't think the previous page is moved out of memory, which can prove fun in the future.

  2. Internal screen with back button: typical page

  3. Large detent sheet with ability to drag to dismiss: this one is useful if you want the user to do something but also to see what was behind if its of any use to them. Though I find it strange that you made it fullscreen. The apple guidelines clear advise you to use the medium height detents:

In an iPhone app, consider supporting the medium detent to allow progressive disclosure of the sheet’s content https://developer.apple.com/design/human-interface-guidelines/sheets

Generally speaking you are advised to use pages, modals can bring up fun questions.

  1. Modals like this are typically used for focused tasks or content that requires the user's full attention, blocking the main app interface until dismissed. This is typically used to doing tasks (extra tasks) at the same level of the page that triggered it, and not for a child task or a next level task. This style should not have one deeper level to it – i.e once the task is done, should go back to the page that triggered it.

  2. This pattern is common for displaying hierarchical content or multi-step workflows, allowing the user to navigate back to the previous screen, even can navigate to a child screen (eg: settings > Applications > Whatsapp).

  3. This style is designed for temporarily displaying auxiliary tasks or alternative views related to the main context, and can be swiped down or dragged to dismiss.

So yes, 2 is clearly defined and we know when to use it.

Now the questions is how do decide when to use 1 vs 3.

Its fairly easy – If the task is **critical** and need full attention, **use 1**. If the task is **auxiliary**, **use 3**.
  • Helpful, but I'm not sure it's always clear to define what's an "extra task" (example 1) versus an "auxiliary task" (example 3). And for example two, should it be used only when there is more than one level to the workflow? Commented May 30 at 11:52
  • Right, good point. I could enhance the answer probably next week when I have some more time. Thanks!
    – Kish
    Commented May 31 at 2:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.