CTA on mobile screen that prompts another CTA

Question

I'm currently designing a mobile screen that has a floating CTA bar at the bottom of the screen (see picture below).

The issue that I have run into is that the "Inspect" CTA at the bottom of the screen allows for 2 different flows, which means the user needs to choose which one he/she wants to go into. Therefore, I am faced with a situation where I ask the user to choose between "Inspect" and "edit location" and then choose between two different types of inspections with a pop-up style card in the same location.

As you can imagine, this can get very weird in terms of design patterns.

Has anyone come across this and is there a better pattern that I can incorporate?

Answer 1

This is very simple and an established pattern in iOS, earlier we used to have a bottom aciton sheet pop up that would bring in the available options, ( imagine tapping on a button called ' upload photo' and the bottom sheet pops up with the 2 options to upload photo via ' take picture' or 'browse library' .. these bottom sheets with come with a third option that would just say 'cancel'.. with iOS 14, we see a 'menu' element does the same, which is that it shows further choices on tapping of a button. its everywhere on iOS.

So I would urge you to rather believe that poping a new menu on the tap of button is pretty intuitive and works very well. Here is the example of the notes app in iOS showing picture upload options after tapping on the camera icon..

Answer 2

I search, and find the site similar that you descibred, I think the best way is equals the image bellow, CTA 1 above de CTA 2.

But try some user research, with prototype

Answer 3

Consider a single CTA that deploys a menu or action sheet with each category, such as inspect and edit locations as a section heading with an appropriately labeled button for each subcategory, such as inspection type descriptions.