3

I'm designing an application and would like to use the floating button in a post behavior scenario in these steps:

  1. Floating button cta
  2. List of trigger ctas appear (file, photo, etc)
  3. User taps file cta
  4. Action sheet appears (select dropbox or google)
  5. ... remainder of workflow ...

Does this feel too disruptive and out of context to the original experience?

I like the animation interaction, but do not want it to complicate the experience and discourage users from reaching the final destination (their files).

3

You define the FAB’s meaning

The FAB should trigger the single most important action for the view. Whatever the user needs to complete that action, consider it approved. From Google:

A floating action button represents the primary action in an application.

Bottom sheets are all about action

Bottom sheets are a powerful tool in Material. They can provide a grid of actions, deep link to other app information, or provide extended app functionality. That makes the feature a very reasonable FAB result. According to the Material spec:

Bottom sheets are displayed only as a result of a user-initiated action [...].
Modal bottom sheets are alternatives to menus, or simple dialogs [...].
Modal bottom sheets may present actions in a list or grid as an alternative to menus or simple dialogs.

This example from the spec is very directly related to the workflow you described.

Example of a floating action sheet on mobile

Where your experience gets complicated

IMHO, the FAB-to-bottom sheet interaction isn't the concern here — your workflow needs rethinking. Try flipping the order of things and ask your app to do a little more work.

Here's how I would redesign the user's responsibility:

  1. The FAB triggers a source selector (Dropbox, Drive, etc).
  2. Based on source selection, open the appropriate file browser.
  3. On return, your app detects file type.

On step 1, offer an always / just once preference chooser so they can "set it and forget it".

0

as a matter of fact is one of the cases mentioned in Material's FAB section, , look towards the end of the page and you'll see the patterns to do something like you want. Something like the transitions on this video might be of help for you

However, be sure to follow the directives on that page, at first glimpse your idea sounds slightly off. Not bad, just needing some fine tuning

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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