Mind Your Mouse Cursor For Quality User Interface

by 10 Best Design

One of many careful balancing acts that web designers must maintain within their projects is how forcefully they should keep a given website's navigation interface within reach of the viewer's mouse cursor while the viewer scrolls down a potentially long page. If a website's navigation interface is a sidebar relegated either to the left or to the right of the content area, the syntax can dynamically compel the sidebar to stay in place while the content shifts. For a website that has its navigation bar lining the top of each page, a similar logic can be used to keep the bar locked at the top of the window screen so that a viewer deep within a page's content does not have to return to the bar's distant location to follow an internal link.

Websites come across as more "constrained" in their layout if a given web page's header and navigation elements stay in one static position at its top and take space away from the area on the viewer's screen that is reserved for the rest of the page's scrolling contents. A more creative web designer can consider several other methods of keeping a navigation bar within reach of the user, however. For example, once the user starts scrolling through the content, a compressed version of the navigation bar can be made to appear at the top of the screen so that the window space allotted to the content is not overly compromised.

A variation of this idea calls for the compressed bar to appear only when the user is scrolling back up through the content. Implementing this concept must be done cautiously because the bar that appears must not be thick enough that it feels like it is covering a significant portion of the content the user may well be trying to look at. If the bar's appearance would scale down the window beneath itself, the bar must not be so thick that the user's experience is jarred by a significant shift of the content's position whenever the user starts moving the scroll bar back up. For more information click here https://v.redd.it/lw4z4ej6wd931.