Modern sites are made on the principle of social networks: almost endless scrolling down, many screens. A consequence of this design is the need to insert an "Up" button. The proper placement allows for better usability. The task of UX designers and programmers is to make sure that the button does not interfere with the user, but there are no problems with finding it.
Top Button Functions
Imagine a user scrolling through the suggested information to the bottom of the page. He is reading an article, or maybe he decided to make a purchase in an online store. But to perform an action, you need to go to another subcategory.
Of course, all browsers have a function of instant scrolling to the top of the page, but not everyone knows about it. Building a website for "advanced users" only is not a good idea. The Home button will help visitors:
return to navigation items, go to another subsection;
filter your request by other criteria - by price, manufacturer, by tags;
ask a request.
Regular users use the mouse wheel or finger to scroll if the web page is open on a mobile device. It is inconvenient to return upstairs mechanically. The "Top" button is intended to solve the usability problem, but you also need to place it wisely.
Best Ideas For The Back To Top Button
It is important for any web designer to combine the aesthetic function and the comfortable work of the site. Sometimes this leads to bad UX decisions because the functionality is lost in the pursuit of beauty.
"Up" is needed where the site is more than four screens. Oddly enough, the fashion for the "convenient" element of usability has spawned many small pages where the instant return is completely unnecessary.
Intuitively, the user expects the Up to be placed in the bottom right of the page. Move somewhere else - confuse visitors. It should not interfere with reading or viewing products.
Use lettering. An arrow pointing in the right direction on the screen is good, but not always clear. Especially if the site is designed creatively and "Up" also becomes part of the design. The signature eliminates user confusion and bewilderment.
There should only be one anchor referenced by the return button. The site visitor, by clicking "Up", always returns to a specific place - to the very beginning of the page.
Avoid unnecessary internal linking with anchors. A single button that returns to the top of the site can replace all other unnecessary links.
Sometimes it becomes necessary to direct the user not only to the beginning but to certain elements on the screen - for example, to the subscription form or to the Call to Action element (buy, order, get at a discount). Such design elements can be implemented in different ways, but the Back to Top button should never deceive the user.
How The "Up" Button Should Look Like
Regardless of the style of the web page, there are guidelines for this design element. Usability guidelines have been tested with millions of users and are therefore considered universal.
The size. Small but noticeable. The "Up" button is a pure service element, a modest "helper" for the user. Let it remain, so it is unacceptable to overlap the semantic elements of the site.
Visual difference. Some web designers use contrasting colours. The point is that the user does not have to look for a key; otherwise, the person will simply close the page with an annoyed “let me out of here”.
Immobility. Don't force your site visitor to chase the back to top button. Let her stand still, always ready to help.
No automatic scrolling. Web users don't like it when someone else decides for them. As part of the scrolling function, the Back To Top button should remain just a feature, not the responsibility of the visitor.
The popular design element has alternatives. Some web designers offer to duplicate the navigation at the bottom of the page - this is especially important for online stores because the user has already viewed the existing product, does not want to see it again, but wants to see the next selection.
Another option is to fix the entire site menu. In contrast to the "Up" button, it is recommended to place it on the left, and it can "follow" the user. The principle remains similar - not to be intrusive, not to get in the way until the website visitor decides to use the services himself.
Some designers put the link “Home” or “Home” instead of “Up”. This can be a good solution for an article resource; the visitor will be able to quickly find texts on a different topic.
There are many options for placing "Up" or analogues of this button. Before finally deciding on this design element, it is advisable to do preliminary testing and understand what people who come to the resource need.
A good blog design is not just about implementing best web design practices; it involves much more than that. Unlike static websites, a blog incorporates much closer social media integrations to directly facilitate interaction with visitors. This makes the design task a little more difficult. Contrast Each blog is made up of different sections that […]
Modern sites are made on the principle of social networks: almost endless scrolling down, many screens. A consequence of this design is the need to insert an "Up" button. The proper placement allows for better usability. The task of UX designers and programmers is to make sure that the button does not interfere with the […]
Common mistakes when designing a portfolio: Lack of a clear structure Portfolio design and layout depend on the ability to communicate with users. If you can't connect with the hiring manager by properly presenting your job, how will you interact with users after hiring? Structure your portfolio information by chunking and visualizing harmoniously. Highlight important […]
For fast consistency between designers, without sacrificing quality, a common language of components and free access to the library are needed. Most have noticed the problem of how the elements of the system are lost depending on the movement of the tools. Designers need access to the same tools as designers. Previously, they used complex […]
The whole process of promoting simple projects, I would divide into 3 stages: Compilation of the semantic core Optimizing content Link building Basically, this is all that is needed for a successful promotion. Now let's talk about each step in more detail. Compilation of the semantic core The semantic core is a set of search […]
When photographing, especially with a non-professional camera, photographs require significant improvements in colour. Colour correction of photos in Photoshop will allow you to correct these imperfections or change the colour scheme in accordance with the wishes of the photographer. Let me remind you that this is not an "instruction manual" and not a call to […]
What if you like a font but don't know its name? Everything is very simple if you have its graphic outline at hand. There are a large number of online services that search for a font by image, and admittedly, quite good. In this article, we will look at some of them, and try to […]
If you look at some designers' resumes, and then in their portfolios, and then again on the resume, you get the impression that they don't really understand the difference between UI and UX. In fact, this is a common problem not only among designers but also among employers, ranging from small studios to large corporations. […]
Good design is a good idea in an attractive shape. In some works of designers, the form suffers, in some - the idea, and in some - both. This is often due to the substitution of computer-generated effects for the actual design, and the inability to come up with a quality idea. A thought process […]
Many mistakes wander from layout to layout, from one designer to another. They are like a disease that needs to be treated urgently. But no one does it, because some absolutely do not care, while others do not have enough experience. How to heal the problem To get rid of trivial problems and improve your […]