There's a lot to getting your navigations right in terms of #UX, #accessibility & #uidesign

Check out my very first thread! (This will be in video format tomorrow on my youtube channel 'DesignCourse')

1. Differentiate between the logo and navigation.

👉 This helps avoid confusion and allows the user to clearly identify where the navigation exists on the navbar.
2. Design an Active State

👉 This gives a visual indicator to the user that they're on a particular page. You can achieve an active state through making the link bold, changing the background color, and/or adding an icon or border.
3. Include a 'home' link & link the logo to the home page.

👉 From @NNgroup , "To minimize homepage-navigation confusion, offer both clickable logos and actual Home links." src:…
4. Differentiate between primary and secondary navigations.

👉 Establishing a typographic visual hierarchy for a primary and secondary navigation will help users quickly discern between the two navs.
5. Differentiate between regular nav items and dropdown nav items.
6. Provide hover states

👉 Hover states indicate to the user which link they're about to click. You can change the background, link color, underlining the link, and/or adding an icon/border.
7. Ensure acceptable contrast ratios

👉 Aim to satisfy at least a 4.5:1 contrast ratio based on the text color and the background. There are many tools for checking contrast! "Stark Contrast" plugin for Adobe XD/Figma, as well as the built accessibility tools in Chrome/Firefox.
8. Only use hamburger menus when needed

👉 A hamburger menu requires extra work from the user to access your nav items. If you have the space, use it!
9. Stick to known patterns for logo and nav placement

👉 By far, the most common pattern for logo and navigation placement is a right aligned navigation with the branding on the left.
10. Make sure nav items are accessible with focus states

👉 By default, browsers add an outline when navigation items are tabbed. If frontend developers set 'outline: none;', ensure you design an alternative focused state to notify users which nav items are focused with keyboard
11. Make sure nav items are easy to tap

👉 Avoid making nav items too small, too close (or too far) apart.

If you enjoyed this, enter your email to be notified when is launched in a few months. It's going to be juicy!

• • •

Missing some Tweet in this thread? You can try to force a refresh

Keep Current with Gary Simon

Gary Simon Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!


Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

Did Thread Reader help you today?

Support us! We are indie developers!

This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal Become our Patreon

Thank you for your support!

Follow Us on Twitter!