Nav: Sketches

Here’s an 8-up exercise I did to try and come up with a number of different concepts:

Nav: Constraints

The following are a list of constraints and best practices that we’ll want to be mindful of when we choose to redesign the WP navigation:

  • Accessible – Navigation should be easy for any user to use despite their ability or particular device. This includes navigation vis keyboard, voice navigation, screen readers, and other assistive devices.
  • Responsive – Any solution we come up with should scale to mobile devices and smaller screens.
  • Obvious, Easy, Possible – Jason Fried shared this concept way back in 2011. It’s something that has stuck with me ever since. Making something obvious comes at a cost. Attempting to make everything obvious is a recipe for overwhelming navigation. We should aim to streamline our navigation where possible.
  • Concise, descriptive labels – Each label should be as short as possible, yet still descriptive and understandable at a glance.
  • Contextual – When possible, we should attempt to adapt what is shown within navigation based on what the use case of the user.
  • Extensible – Developers should be able to easily modify navigation.
  • Text descriptions + icons – We should attempt to preserve text descriptions next to icons whenever possible.
  • At-a-glance location awareness – A user should be able to easily see at a glance which portion of the app they’re in.
  • Minimize drop-downs – Where possible, we should attempt to reduce pop out menus.
  • Obvious clickable areas – It should be obvious at a glance which navigation items are clickable.
  • Consistent layout & organization – Navigation should not change as you navigate WP admin. It should remain consistent.
  • Consider breadcrumbs and search – Both search and breadcrumbs can supplement navigation to provide a better user experience.
  • Limit levels – The more levels deep we take things the more complicated any navigation will get.

Let me know in the comments if you can think of anything else that should be considered.

Nav: Inspiration

I spent some time cruising around looking at various apps for inspiration:

Nav: Existing IA

I took some time to get the existing IA down in spreadsheet format. I took a look at:

  • WP core
  • WP.com
  • Contact Form 7
  • Yoast SEO
  • WooCommerce
  • Jetpack

Here’s a screenshot:

Nav: Kicking Things Off

I always find myself thinking of ways that we might continue to refine WordPress and make it better.

I’ve decided to start blogging about some of these ideas. The approach I’ll take is to start working on a concept and walk you through my entire design process as I work through the best way to approach a given design.

I’ll start by exploring some concepts for WP Navigation.

Please feel free to follow and weigh in along the way! 🤘🙌