1

I'm a newbie to UX (and this site). I am developing a mobile-first website that will show a lot of contents/products like this

Do I have to put a "back to top" button on top of the sticky filter button? Or do you have any idea how should I place it? My ideas so far are to put them side by side (there will be two sticky rectangular button - filter and back to top OR I will make two floating circle button for them in the right bottom).

I wonder why many popular mobile apps don't include the "back to top" button eventhough they have a lot of contents and load them automatically.

Improve this question

2 Answers 2

Reset to default
0

Generally back to the top shouldn't be an issue on mobile apps as the content really shouldn't be that lengthy, with scrolling momentum, returning to the top often takes one swipe of the thumb.

If your content is quite lengthy I would suggest you should revisit your content layout and how you display the information.

If you simply want a back to the top button and your users need and want one, then there is nothing to stop you splitting the buttons at the bottom of the screen, the issue here is, once a user is "back to the top" what do you do with that button?

You could hide it and expand the filter across the bottom of the frame, but this is changing elements and is generally frowned upon.

Improve this answer
1
  • .....after you said that my ideas sound ridiculous :') My website will have many data but the contents itself mostly fixed in height (just like product lists on online shops). I think I wont use the back to top bottom and will try to find another way to scroll back to top. Thank you very much! :)
    – Dolorosa
    Commented Jan 6, 2017 at 11:16
1

The primary need for the "Back to top" option is to minimize a user's physical efforts for returning to navigation.

I observed some recordings of how users interact with a huge content on a mobile, and noticed, they tried to swap to the top of the page, but very soon abandoned the site. So you instinct on having "Back to top" functionality is right.

To achieve the goal, you can use sticky navigation UI pattern. It can be implemented as:

  • Scrolling header with navigation
  • Fixed header with navigation
  • Fixed tool bar on the bottom of the screen
  • Tabs on the top of the screen

Useful resources:

• Sticky navigation is 22% quicker: Sticky Menus Are Quicker To Navigate

• Fixed header wins scrolling one: Fixed Headers on Mobile: A/B Tested

• A real case of switching to bottom navigation: Bye, Bye Burger!

Improve this answer
1
  • Thank you very much, Sir! Also thanks for the references :)
    – Dolorosa
    Commented Jan 6, 2017 at 15:21

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.