23 Dec 2019 by Karol Kielecki

Increase Your Efficiency with Dashboard Navigator

Make your e-commerce day more productive and get your work done quickly and efficiently with Saleor's Dashboard Navigator. Literally, forget the old ways of navigating - just get to the right place with Cmd+K!

There are two important goals guiding our work on Saleor: Developer Experience (DX) and Design (UX). Saleor’s team is here to raise the bar when it comes to providing front-end freedom, as well as delivering the best e-commerce dashboard out there. We’re kicking off a small series related to our design choices as we believe that all of those small nuggets, that currently live in both our Figma files and are already available in our code, deserve more attention. We would love to hear some feedback from you!

We’d like to present to you one of the UX features we’ve introduced recently - Dashboard Navigator (available in the master branch of our dashboard repository). We took inspiration from a developer’s best friend: Quick Open, a feature of VSCode, to let you easily navigate through Saleor like a boss. Instead of trying to remind yourself what’s the path to a customer or catalog, simply open it with Navigator!

“Navigator allows quick access around the Dashboard. We have found this pattern particularly pleasing for our community and developers. A good UX gives you a competitive advantage and the ability to get the job done well. This feature helps you to save your precious time and put your effort into more useful things. It’s hard to imagine living without it these days.”

– Paweł Gryglak, Product Designer at Saleor.

text

A short cheat sheet on how to use it:

  1. Login to your Dashboard
  2. Click Ctrl/Cmd + K
  3. Type the phrase or word that you are looking for. If you can’t find it, you can also type one of the following characters which refer to a specific category:
    • ‘>’ refers to Search Command
    • ‘#’ refers to Search Orders
    • ‘@’ refers to Search Customers
    • ‘$’ refers to Search in Catalog
    • ‘?’ refers to Display Help

You can expect some future feature leaks from Figma, as well as some already accepted and delivered ideas worth highlighting. Let us know what you think about Navigator! Let’s talk on #design of our Spectrum or feel free to reach us at: Gitter, Github, Twitter.

A big thank you 🙏 to all contributors, stargazers, and supporters of Saleor! And enjoy navigating through the Dashboard!

— Share