16

Floating Action Buttons - invented by the Google Material Design Team - are rather popular on Android. Apple's closest equivalent are perhaps an action icon at top-right or the bottom Tool Bar pattern - which won't play nicely with a persistent Tab Bar.

I'm working on an iOS app that has a very strong, prominent 'hallmark action' that needs to stand out and be accessible from the app's main screen. Should I use a Floating Action Button in iOS?

Improve this question

3 Answers 3

Reset to default
14

Edit (2022): Material Design has been a strong voice in application design for many years now, and many iOS users will have seen the FAB pattern. FABs are not a core experience to iOS and can still confuse users who don't regularly use your app.

TL;DR: I consider the Floating Action Button (FAB) to be the most polarizing element of Material Design, and generally wouldn't recommend a floating action button for use in an iOS application.

The principle is still sound: provide a strong call-to-action element (CTA) to guide your users. Apple tends to favor the top-right interaction, but I consider the play/shuffle button in Spotify to be a good example of a non-toolbar interaction (see below). It helps that it has high discoverability (easily understood wording rather than abstract icons). Other apps (Instagram, Tumblr) use the central icon of the Tab Bar to focus the user on a primary action (which might be relevant for your use).

The FAB is probably the least generic component in the language and tends to make all implementations look like they were made by Google (which works great on Android). It's an abstract concept with low discoverability, which works fine for Android since it's part of the OS. You're taught to use it as part of the onboarding for the device.

If your target audience is iOS, where it isn't commonly understood, then you're increasing the complexity for new users. Ultimately there is nothing stopping you from using a FAB, but you should probably expect users to not know what it is, or how to use it on sight.

Spotify Shuffle button

Strong shuffle CTA, with clear statement of what will happen when selected.

Instagram post button on Tab Bar

Example of how Instagram moved away from a strong CTA (probably to focus on the feed over posting...)

Improve this answer
2
  • It's an abstract concept with low discoverability Can you explain this? A FAB doesn't need to be discovered, it's always there and it always does one defined obvious action.
    – RedShift
    Commented Oct 12, 2022 at 6:43
  • It's been a while since I've had to think about this. And I wouldn't say that FABs are as unfamiliar in iOS as they were in 2016. That said, I still think you have to learn what they do by committing to do the action before you know what it does. This isn't always a great experience (it might put cautious users off or push them into user journeys they're not ready for). Essentially still the same advice: use them intentionally and thoughtfully.
    – Benjamin S. Leveritt
    Commented Oct 17, 2022 at 11:57
18

New in iOS 11 you can find the Floating Action Button within the Notes App. If Apple uses them, you could definitely use them too.

FAB in iOS 11 Notes

Improve this answer
11
  • 2
    Hi and welcome to UX.SE cornr! Unfortunately, this does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post - you can always comment on your own posts, and once you have sufficient reputation you will be able to comment on any post.
    – Benny Skogberg
    Commented Oct 5, 2017 at 12:29
  • 21
    Why is it not providing an answer to the question? If Apple uses FAB it is at least an Example for "you could use a FAB"
    – cornr
    Commented Oct 6, 2017 at 11:33
  • You’re not explaining why...
    – Benny Skogberg
    Commented Oct 6, 2017 at 12:21
  • Well I am grateful for it!
    – Lisa Tweedie
    Commented Feb 19, 2018 at 15:40
  • 2
    By the way, I for one dislike the new floating (+) button in iOS Notes app. It's always in my way.
    – 5260452
    Commented Feb 24, 2018 at 19:09
10

If you compare GMAIL user interface itself on the Apple and Android mobiles, the UI is a bit different (user pics and checkboxes - on the left-hand side, etc.).

For the IOS, the GMAIL takes a different design pattern for FAB or button compared to the Android Design, but it still stands out. You may want to consider this design for your app. Frankly speaking, I am not sure why GMAIL avoided FAB on the IOS.

I got an Apple mobile 6S with me and I have compared with another android mobile to cross check and confirm the UI, which is exactly same as the screenshots provided below.

enter image description here

Source of the images: https://www.google.com/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=&url=http%3A%2F%2Fpttrns.com%2Fapplications%2F370&psig=AFQjCNFIfKmNmucdvJpli_i9xgtqO1zpgg&ust=1476535412516119

http://www.lifehack.org/articles/technology/finally-20-productivity-apps-that-will-ensure-efficiency.html

Improve this answer
3

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.