The main types of user interface buttons
Buttons are one of the most famous interactive user interface elements. They play a very important role in creating user interaction and creating a positive experience. Continuing a series of…

Continue reading →

6 main stages of website development
I was recently told in the comments that some posts do not correspond to the format of the blog, which is positioned as a useful resource specifically for web designers.…

Continue reading →

Web site design trends and trends
It was originally planned to post a translation of an English-language article on web design trends in 2017, but after studying various sources, we decided to slightly change the concept…

Continue reading →

Ways to navigate users on the site

Imagine that you are traveling by car, but due to traffic jams all the main roads are blocked, and you need to turn into an unfamiliar part of the city. For some time, traffic signs will help you move in the right direction, but suddenly they will disappear. It seems that getting lost in an unfamiliar place is a trifle.

Any site, regardless of its ultimate goal, should perform the main task – to indicate to the user the path to the information of interest to him. However, it is possible through his own fault, or perhaps through the fault of the designer, that the user is lost and does not know where to go next. How to help your visitors navigate the site. There are several effective ways.

PAGE TITLES
Each page of the site needs a unique, brief enough, but no less informative title. The title tells users what exactly can be found on a particular page. If the menu says “About Us”, then it is obvious that there will be a description of the company + information about the company’s employees, its goals and history.

Page headers perform their function much more efficiently if:

the font of the title is at least a couple of pixels larger than the main text;
a different font color or background for the font is used;
There is a noticeable space above and below the title bar.
BREAD BABIES
These are links that are designed to show how the current page relates to the main page. Often they are located directly above the page title. They look something like this: Home> Forum> Jobs> Jobs. By the way, the blog has an article with original examples of breadcrumbs for the site.

The advantages of bread crumbs in their ability to instantly indicate the location of the user, as well as help the latter to understand the structure and hierarchy of the site. The user sees how he got to the current page and how he goes back a few steps.

At the same time, “bread crumbs” show the real structure of the site, and not the path along which the user came. By the way, if you have a blog on WordPress, then I advise you to read an article about how to create breadcrumbs in WordPress using the Breadcrumb NavXT plugin.

PRIMARY AND SECONDARY NAVIGATION
Although this is obvious, it will not be superfluous to recall that the correct use of primary navigation is the most powerful tool for orienting users. It is desirable to make the navigation elements different in color and background, the names of the navigation elements should clearly correspond to the page headers. Unlike primary navigation, which defines sections of a site, secondary directs the user to specific pages. You can use the PSD files of beautiful menus for the site, which were published in a previous article.

LINKS
Links are required to clearly communicate where they lead. The user is more likely to follow the link if he knows where it leads. You should not load the page with meaningless inscriptions, such as “Click here.” Like the names of other navigation elements, link names must match the title of the landing page. You can also find some tips for linking on this blog.

PAGE STRUCTURE
An important role in navigating a site is played by the structure of its pages. When designing a page, remember that:

many users are familiar with standard site structures, so the location of the navigation elements in the places where they are expected to be seen allows you to quickly navigate. Try to avoid too “tricked out” designs.
it’s easier for the user to decide where to go next if key elements (links) are located nearby. Try to group key elements.
PROGRESS
It is advisable to show the user the steps of the procedure that he performs on the site (we are talking about procedures that require successive visits to several pages, for example, when ordering goods in an electronic store or downloading files). Make progress easily noticeable so that the user sees their current position, past and upcoming stages.

MAP OF SITE
Having a map matters for sites with lots of pages. That’s where it’s easy to get lost! The map can be accessed when the necessary information cannot be found by searching the site, so the site map should fully reflect the structure of the latter, be clear and understandable. To create a wordpress site map for a blog, you can use the dagon design sitemap generator plugin and others.

PAGE NAME (TITLE)
The page title is the text that is located in the browser title bar. Remember that the shorter the name, the clearer its meaning. Put important information first, as it is the first few words that are often most important to users. The meaning of the name should remain clear, even if the page is not visible (located in your browsing history or in your favorites list).

In general, all wishes for user navigation will have a very positive effect not only on the positive perception of the project by visitors.

Ways to navigate users on the site
Imagine that you are traveling by car, but due to traffic jams all the main roads are blocked, and you need to turn into an unfamiliar part of the city.…

...

Google Chrome and automatic user authorization
The Google Chrome browser (based on Chromium) uses WebKit engine to render pages. The first version for Windows was released back on 12/11/2008, and now it is one of the…

...

How to make a color palette for a site and not only
In Design Mania, there have already been several publications with similar topics: in a note about color matching services for websites, in addition to inspiration resources, we examined a couple…

...

Web 2.0 style design: simplicity as art
Perfection is achieved not when there is already nothing to add, but when nothing can be taken away (Antoine de Saint-Exupery. "Planet of people", 1939) Far in the fall of…

...