Annoying red +

Yay ! My Android app has awakened

“One small step for man, one giant leap for Mankind”

(Not my own work lol)

One thing that is annoying me is the big red +circle bottom right, would it not be possible to move it to the top right on the black bar so it doesn’t obscure any of the Transactions?

So, on the one hand this is part of Google’s Material Design approach which they like app developers to subscribe to. You end up with a common experience across apps, which makes the user experience quite nice.

But on the other hand, the “Hero Button” as it’s called is supposed to represent the most common or obvious action that you would take on a screen, for example in an SMS app it would create a new message. And I wouldn’t necessarily say that topping up your account is the most common or obvious action that one would want to do?

Yeah, I like the button as a general concept (see Inbox, Twitter etc) but not convinced it fits here. Would rather see the top up plus be in the title bar personally.

Perhaps the FAB/hero button/whatever you want to call it would make more sense for sending money to people when that is available?

Yeah, that FAB button is a bit of a placeholder—soon it will include top up (by card) and sending money to a friend :slight_smile: Baby steps :wink:

3 Likes

There is a slight problem that with the FAB that you can never see the price on the very bottom transaction, although this is of course always the initial £100 top up so it’s not that important! However an improvement could be a FAB that autohides when you scroll?

1 Like

Yeah, we noticed that too. I’ll see what other apps do but have you seen any examples of good apps that deal with this well?

How about restricting anything from being posted on the bottom lines where the FAB button is? You might have scroll a bit further but you could see all then without obstruction ? You could always put an advert or reminder of some sort then to the left of the FAB

I feel like I have seen an FAB which autohides when you scroll down and shows again when you scroll a bit up, but I can’t find an example of this anywhere :thinking:

Check out the SeriesGuide app. It implements Material Design quite nicely although it is a little bland overall IMO.

The most recent update to the youtube app now has an auto hiding FAB

Yeah, that’s an excellent pattern. I’m pretty sure we’ll do something like that at some point.

Currently I’m a bit on the fence because our Android app is still very basic and I’d like us to build the basic functionality before starting to provide shortcuts and gestures for power-users. In other words, I think I prefer someone saying “oh, this button covers some information, I better scroll a bit more to see what’s beneath” than someone saying “oh, there’s this red button that I used for topping up but sometimes disappears and I don’t know why”.

In the case of YouTube they can get away with it because their FAB is for recording videos, something that I’m pretty sure less than a 1% of users do. Our case is slightly different so we’ll need to be more careful.

Does it make sense?

1 Like

Yeah I can see how that makes sense, although personally I am definitely used to various navigation features (e.g. tab bar etc) disappearing when I scroll!

I hear what you’re saying Hugo, but when you do get round to it (and in answer to @tristan & @tomtom’s question)… A really great implementation of the auto-hiding context/FAB button is used by Viber on Android (v.6.2.1.84). It slides out of view at the same speed you scroll down - better than the crappy YouTube one that just disappears in a puff as you scroll down, and doesn’t re-appear again unless you scroll all the way back up to the top (so it’s easy to ‘lose’ it).

They use it for often used things too, like ‘new chat’ while on the chat screen, or ‘new contact’ while on the contacts screen.

The Viber app also employs the cool trick simultaneously sliding away the top half of the navigation bar and the context/FAB button in opposite directions, as soon as you scroll down. It immediately gives more screen real estate and looks pretty slick too. In a similar vein to your transaction detail view. Oh and they slide back into view as soon as you scroll up too.

If you’re worried about people ‘losing’ the button, perhaps you could consider sliding it out of view at half the speed at which the user scrolls down?

1 Like