Posted 10 months ago

Navigate like a boss

View Profile

There are several types of navigations available  and knowing how to use them is key to ensure your users don't feel lost or give up! Below is a few examples of great ways to improve your navigation and not leave it feeling unloved or neglected . 

Stripe's navigation is amazing both on desktop and mobile, because it doesn't lose design and keeps the user interested. And when in mobile view we aren't presented with the classic list view but instead this rich popup card displaying everything in front of you nicely.

*desktop view

*Mobile view

Disqus break's the navigation up with logo/links on the left & login/register on the right side. Even though this isn't something new it does allow you to navigate quickly and when in mobile view the navigation then becomes awesome.

*desktop view

*Mobile view

The Disqus mobile navigation transforms keeping login/register at the top within quick reach and further links in the classic hamburger menu on the left of the view. The view above shows how the logged in user can access features without navigating through several pages to get to it.

Navigation plays a massive part in any website and can really make or break your site, so its important to get it right on all devices and ensure users can flow through your website with ease.

*UX London keeps all the links within a single click action  from desktop all the way down to mobile.

When planning any website its important to put yourself in the mind of the user and follow the same routes you want them to follow and make sure it works as intendedMapping out your site can make a world of difference and save you future work re-arranging pages , links or even content. Sketch lets you create endless art-board's which you can drag around and test different ways and there is even a cool plugin User flows that lets you connected art boards with arrows. We want our user's experience to be fluid and fast! it takes seconds for a user to go from wanting your product or service to just closing your website and going elsewhere.

*Page navigation for an online store

The diagram above shows a users journey from the initial landing page all the way to paying for the item. We have taken away distractions so the user can focus on their goal to buy the item, they aren't worrying about creating an account yet until they have what they need after that process of buying has been done then the user is more likely to engage with creating accounts or logging in so they can pay for the item.

So next time you start a new project remember Navigations are just as important as that cool jumbo heading with nice effects you have spent hours refining!

Must be logged in to comment
Navigate like a boss / Welcome to Signl