blog

The web's continued move to become a more beautiful and engaging place has been bolstered by big, immersive, scrolling pages on desktop version websites. Part of this trend includes adapting and rightfully discarding some website design conventions. However, there remain a few simple UX best practices that can continue to aid us in creating a beautiful and immersive desktop web experience without losing sight of the user's full experience of actually using the site.

Today's beautiful desktop designs are using a larger canvas, consolidating pages, and taking full advantage of user scroll.

Today more than ever, the web leaves an impact with elegant typography, interactive elements, a focus on content, bold use of white space, and the use of more space in general. User scrolling allows effective single page websites as well as sites that use page sections to replace pages. Infinite scroll is being used as a navigation tool to automatically move the user from section to section and page to page. Menus are being simplified consciously and as a result of page sections taking the place of pages. The number of pages websites have are being cut back.

This all makes sense in the context of a converging mobile and desktop landscape, as responsive design allows the display of a single site across separate devices. It's intuitive and quick to scroll down a page on a mobile device to scan for the desired section of content rather than locating a link to that content and waiting for a new page to load. On a desktop, this scrolling landscape opens up a huge design canvas with the possibility of a more immersive user experience with parallax elements or the sheer use of space.

Desktop websites are being visually streamlined using mobile style menus.

Similar to application chrome, sticky mastheads or navigation bars work equally well on a desktop as they do on a mobile device. And desktop design is thus beginning to draw inspiration from mobile, for example slide-out / collapsable menus on the desktop view size. In many cases designers are effectively using these developments to move towards curating the user experience. 

If the user still matters, than so does user choice and user contextual awareness.

In the push forward, we should be mindful of some of our tried and tested best practices for desktop users, particularly on content rich sites. I'm talking about the boring old-fashioned stuff, like bread crumbs, good URL structure, indication of place in navigation, and clearly denoted page or section titles. These guidelines are obvious, but they often seem to get conscientiously disregarded, or simply overlooked. If the user still matters, than so does user choice and user contextual awareness.

Following are four simple UX best practices that can provide user context and place in navigation within a modern scrolling website. 

1) Include breadcrumbs with deep site navigation or in targeted browsing situations
The decision whether to implement some type of breadcrumb might simply come down to site goals, such as whether the user is expected to engage in targeted browsing (like trying to find something on an eccomerce site), or if they are expected to navigate a particularly deep site structure. If they are, bread crumbs are important on interior pages and particularly pages that don't indicate to the user place in site in the navigation.

2) Maintain user friendly URLs
By keeping a clean URL structure, desktop users should be able to essentially read their place in the site navigation in much the same way they could with a bread crumb. This can be taken a step further by utilizing dynamically updating deeplinking: as the user scrolls down a page that uses page sections to replace separate pages of content, the user can see that their URL updates as they arrive at each page section.

3) Indicate a user's place in the site navigation
Simply highlighting in the navigation where the user is on the site can provide a lot of context to the user. Place in navigation is an important contextual provider and can arguably act as a simplified bread crumb trail for sites with shallow navigation. If a menu is simplified and avoids a sub-navigation, relying instead on page sections or in-page menus, or if the menu is collapsed to mirror a mobile experience, the user loses their indication of place in navigation.

4) Include page and section titles across all pages
If a user has followed a link on the site to a new page, give them a positive confirmation of their move with page title. If the user is coming in to a page through an exterior link, orient them with a page title. Section titles speed scanning of the page. If the site is using page sections to replace separate pages, section titles take on an extra importance: both a link in the site's secondary navigation, or a deeplink bringing the user in from offsite, will land the user on a section of content in a page. At this point the user should receive a positive confirmation and general orientation, and a section title serves to accomplish both.

Our growing arsenal of navigation and structural choices for desktop layout afford a lot of neat options for implementing these things. Indicating place in navigation with sticky navigation goes a long way to providing context to the user, as their place, in the main level navigation at least, is always visible. If this is extended to second level navigation through the use of a secondary menu or other visual indications (such as a highlighted point in a set representing sections) then the user can both understand their place in site and quickly move to other site sections without having to scroll to find a menu or scroll to locate the desired section.

Sticky main navigation with sticky sub-navigation clearly states place in site and allows quick navigation.

Sticky main navigation with graphically denoted sub-navigation illustrates place in site.

Additionally, movement through sections can effectively be illustrated as the user will see the navigation highlight dynamically updating. Sticky page titles and sticky section titles can also act to clearly denote place in site or on a page. And with the large canvas of a desktop user there is no reason why they can't be creatively incorporated more often into an area on the page already designated for a sticky masthead or navigation.

Sticky mastheads can accommodate a dynamic title trail that effectively acts as a bread crumb.

If your team feels you are providing user choice and context though means other than these, fantastic, as there are many ways to achive these goals. There might be a some sites where the development and design team purposely work towards fully curating the user's experience, but for the majority of the sites we build, the user ultimately still is, and should be, in the reigns.