Menu Close

Back-to-Top Button manbetx官方网站手机版Design Guidelines

by Hoa Lorangeron August 27,2017

简介:9 万博官网manbetx下载UX guidelines for Back to Top links which help users navigate to the top of long pages.Depending on users' needs,other techniques may be more appropriate on some sites.


The popularity ofresponsive web manbetx官方网站手机版designhas led to a proliferation of single-column,long-page manbetx官方网站手机版designs both on mobile and desktop.  A consequence of these designs has been theBack to Topbutton,which is a shortcut that allows users to quickly navigate to the top of the page.

When users get at the bottom of a really long page,they often will need to get back to the top to:

  • See the navigation menu and choose a new destination
  • Access filtering and sorting features
  • Enter or edit a query in the search box

Operating systems and browsers already offer a variety of methods to do so: pressing theHomekey on a keyboard,tapping the status bar in Safari on iOS,using shortcut commands,and so on.

However,while technical audiences (like the readers of this article) might know these methods,most users don't.These techniques are too hidden and inadequate for general Web users,who usually simply scroll up using their finger or the mouse.

When the page is really long (for example,because ofinfinite scrolling),it becomes too tedious to scroll back up through screens and screens of content.Hence the role of theBack to Topbutton.

9 Guidelines forBack to Buttons

Here are the key guidelines to help you decide when to use aBack tobutton and how to manbetx官方网站手机版design it effectively.

  1. Use aBack to Topbutton for pages that arelonger than 4 screens.For relatively short page lengths,Back to Toplinks are overkill — people can simply scroll back without excessive effort.No need to clutter the interfaceif you can simply use the scrollbar or your finger to quickly navigate to the top.
  2. Place a persistentBack to Topbutton in thelower rightside of the page.This is where people expect to see it.This position is out of the way,but noticeable.When the button is placed in a different place on the screen,it is often ignored.
  3. Labelthe buttonBack to Top.This phrase is most descriptive.An icon only (.e.g.,an arrow pointing up) can be ambiguous and,depending on the graphical realization,may not convey the right meaning.
MedlinePlus.gov: The meaning of the arrow icon alone is too obscure.A text label would help overcome the ambiguity in this context.

Overstock.com: The text label,Back to Top ,presented alongside the arrow icon helps explain the button.

  1. HaveonestickyBack to Toplink per page instead of includingmultiple linksin every section of the page.(This latter pattern used to be popular on pages withanchor links.) In usability studies,we observe people ignoring these repetitive links because they are so predictable.
USA.gov: The repetitiveBack to Top links increase visual clutter,causing them to be overlooked.

  1. Keep the buttonsmallso it doesn't cover important page elements.But,if you are on a touch screen,make it big enough so people can tap it.
  2. Make the buttonstand out visuallyon the page rather than blend in.WhenBack to Topblends too much with the background content,users are less likely to notice and use it.
  3. Considerdelaying the appearanceof aBack to Topoption until after users scroll a few pages AND indicate that they want to scroll up (e.g.,move the scroll bar up,flick up on the page).Thus,the button appears only when it is most likely needed,without covering up important parts of the screen the rest of the time.
Overstock.com: TheBack to Top link only appears when the page is scrolled up.(And it's in the lower right,as we also recommend.)

  1. Make the buttonstationary.Once it appears,don't allow it to move.Moving elements cause major distractions,since the eye is automatically attracted to any movement on the screen.
  2. Let userscontrolscrolling.Never allow the page to scroll automatically,such as when new content becomes available at the top of the page.Better to provide a notification and allow users to make the decision on whether or not to scroll to see any new content.

Alternatives toBack to Top

There are alternative methods for getting people where they need to go.Going back to the top is a means to an end.If you can anticipate what users want and offer it to them,even better.Below are a few ideas:

Navigation at the bottomof the page could satisfy those who want to go back to the top to navigate to or search for something else.  This approach works best when users tend to scroll to the very bottom of long pages on your site.

Etsy.com: Rather than usingBack to Top ,this website offers links in and near the footer to support the user journey.

Sticky menusare sometimes a more elegant solution thanBack to Toplinks.If the main purpose of scrolling is to navigate to different topics or sections of the website,having the right menu options available when people need them voids the need to go back up.

Similarly,if the main purpose of scrolling up the page is to access features commonly found at the top of the page (e.g.,filter,sort,search,next page),having these features appear when people scroll up offers just-in-time assistance.

Nordstrom.com: This website keeps the refine features sticky on the side of the page,preventing the need forBack to Top for most shopping tasks.

TheHomebutton on social sitesoften brings people to the top of their homepage,which happens to be a page with a long feed and in most need of a quick method to go back to top.Most people on social sites are accustomed to clicking theHomebutton to scroll to the top of their feed.

While theHomebutton might work on social sites,don't count on it for other types of websites.On general websites,people expect theHomelinkto take them to the homepage,not the top of the same webpage.

Twitter.com: TheHome button doubles asBack to Top .

Conclusion

Many good solutions exist to help people get back to the top of webpages.在你决定之前实施Back to Toplinks,consider your use case and determine which approach works best for your audience.