Fixed footer vs non-fixed footer in mobile web app

Question

On a web-app, a fixed footer creates a performance issue, as the response and sensitivity is not quite as good as native app. But we have some important controls at the footer level like adding items to the list or submitting the form. So, it is a dicey decision for us, whether to have a fixed footer or not.

Please let me know if there is a convincing study or analysis already done on the same, let me know if more information about my specific case is required.

Edit: As one of the fellow expert have suggested, I need an alternative to footer for my context where currently the footer that I have in my app has two important action buttons. Please let me know if there is any alternative possible

Answer 1

To add items: Consider a slide-in menu for it, for example: slide from the right edge of the screen to the center, and you'll get a menu on the side with relevant options. Suggest a side menu by having a fitting graphic displayed on the center right. Remember it will be displayed on top of the list, so you should not have any issues with smaller form factors; upon deciding to submit or add, you probably don't need the information displayed below.

Alternatively, the add form or button could be placed on the top and bottom of the lists (given there are more than an X-number of items in said list) for ease of access. Reasoning: you either already know you want to add something (top) or you need to view the list completely before choosing to add (bottom).

If you need to be able to add to the list at any trivial point in scrolling the list, you could make something that responds to a press event. When you hold it for N-milliseconds, the add button or form will appear at that location. You just need a one-time overlay to convey this behavior to users.

To me, having the "add" and "submit" buttons always in view makes no sense. It takes up space, and if it doesn't, it'll be hard to hit on higher resolution screens.

Answer 2

Have you tried prototyping? I know that may sound silly at this stage, but I ask for a legitimate question. In situations like you are describing there isn't going to be a piece of research that is going to answer you question as easily spending an hour or two doing some hallway testing.

If you have critical user functions that are only located in the footer, and there is a whole lot of scrolling to get to that footer, it needs to be fixed. But if those functions are only done by a small user group and there isn't much scrolling, then don't fix the footer. If you are up the air, take both solutions, do a counter-weighted user test, and see what people say.

Answer 3

In this case, I think that it really depends on how often the actions items are used. If they are not used that often, I'm not sure you need to worry about a sticky footer.

Another consideration would be the browser chrome. There is usually a footer for the browser itself. With this in mind, sticking anything to the bottom becomes problematic for two reasons:

1. The user may accidently hit a browser button when trying to interact with your app.
2. If you introduce a second sticky footer you are loosing valuable screen real estate.

With all of this mind, I like to think about when the user is going to need these buttons. For example:

Would it possible to automatically add another list item when one is needed? If there is a blank one when the form is submitted, then it can simply be ignored. Another option might be to add a '+' icon next to the last item to indicate that the user can add more.

With the submit button, I tend to lean toward a solution that puts it at the bottom of the form. So does 'submit' need to be sticky, or can we just place it below the last item in the form?

Hope that helps!

Edit: I just realized this may be helpful for you. Apple User Experience Guidelines. I realize they don't know everything, but it may be a good resource for you in this case.

Answer 4

How about dismiss the fixed footer and pass its options/actions to a fixed side panel on the right or left? It could be open through a menu button close to it.

Answer 5

I need an alternative to footer for my context where currently the footer that I have in my app has two important action buttons.

If however, you are opting for a mobile website, then the fixed controls-footer can perhaps be transposed to any side or given an auto-hide feature. In that case, I would suggest you to design your mobile website such that the need for displaying an absolutely positioned menu-bar (header, footer or any) should preferably be eliminated. Mobile users expect a dynamic experience on the small screen, and usually seek for submit/functional buttons right near the input controls.

Every non-touch screen mobile has two program buttons, also called soft keys, usually one on each side of the central navigation keypad.

In a touch-screen mobile app as well, the users often expect a similar layout.

I am not sure if you were calling these a fixed footer, but if you are facing any space constraints due to these, you may conveniently give it an auto-hide feature, or use a long tap 'Options' window, for which javascript libraries are also available like 'Hammer.js'.