UX Power Tools
Published in

UX Power Tools

Ways to Design Account Switchers & App Switchers

Christian Beck wrote an incredibly thorough article about the UX behind switching accounts in digital products, so I decided to ride the coattails of his article and write one of my own, but from a tactical, design perspective.

Account switchers have become a common (and very necessary) design pattern for designing products which may be used by one or many users across a team, agency, or organization.

Similarly, app switchers allow you to seamlessly jump between multiple products in a suite while maintaining a familiar navigation structure and information hierarchy.

This tutorial showcases different ways you can design account switchers and app switchers, and provides real-world examples where you can see these methods in practice.

Account Switchers

Dropdown — Google Suite

Google’s account switcher does well because it makes it clear which account is active, which ones are authenticated (the ones you’re logged into), and how you can add others. The grey background used for the other accounts helps offset them from the active account and the actions available in the footer.

Study the design above and notice how there are essentially 5 rectangular sections to the dropdown:

  • Current account
  • Alternate account #1
  • Alternate account #2
  • Alternate account #3
  • Actions

Each of these sections are stacked on top of each other with a white background container so it’s easy to add and remove alternate accounts.

Dropdown — Dribble

Switching accounts in Dribbble is equally as simple, but a little more hidden. They combine app settings, personal content, and accounts into a simple dropdown in the global nav.

Three unique list item symbols are used in this design:

  • Text-only
  • Icon + Text (left, right, or both)
  • Avatar + Text

I’m a strong advocate of Auto Layout feature of the Anima App plugin, so definitely go download that. It allows you to create stacks of layers that will automatically maintain consistent spacing, which comes in handy for the subsections in this dropdown.

I also use their Padding feature to maintain the padding outside of the list items. That way if I ever delete a section, the plugin will automatically resize the black container for me.

App Switchers

Dropdown — Google Suite (download it)

The Google app switcher is a well-recognized pattern for switching between apps in large suite of products. This design pattern scales well when adding new products, so unless you have dozens upon dozens of apps, you can probably make it work.

I created a basic symbol with an image, text, and background layer for the hover state. As a general rule, if you’re reusing the same design component more than three times, it’s worth your time to create a repeatable symbol.

Left Menu — Slack

Technically speaking, the Slack switcher isn’t really an app switcher so much as it’s an account switcher, but it’s a good pattern for both because every option is clearly visible at all times, and docked on the side of the UI.

Slack Design recently updated the UI so that the active account was more prominently outlined, so this active state is baked directly into the symbol. Using Sketch’s style overrides, we can create a style for the thick white border of the active account, and a slightly more transparent white border for the hover state.

I opted to use image overrides for the logos in the switcher, but if you absolutely need SVGs, then you might not be able to take advantage of symbols. In the meantime, help me convince Sketch that image overrides should support SVGs 😋

Download the Freebie

Grab the Sketch freebie to see how the switchers are built. Feel free to modify and reuse them in your own projects, or download UX Power Tools to create your own using our ready-made design system.

Originally published at https://www.uxpower.tools on July 22, 2019.

When I’m not writing about design, I’m the principle designer at Innovatemap, a digital product agency in Indianapolis, Indiana, USA.

Some other stuff:

--

--

--

A publication for designers, written by designers.

Recommended from Medium

Refinement

Get Free Sample MOKOQI Magnetic Levitating Globe with LED Light, Cool Tech Gift for Men Father…

Essential questions before making a new website

How We Went From Smiletime to pop.in

Little Little Lessons Service Innovation for N Stuff Music

Get Free Product Dish Drying Rack Over Sink Kitchen Supplies Storage Shelf Countertop Space Saver…

Oven Sink Dish Rack

How I introduced design thinking at my company

What is planet-centric design?

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jon Moore

Jon Moore

Principal Design Partner Innovatemap in Indianapolis. Creator of The Design Encyclopedia (https://www.designencyclopedia.io). Email: 1jonmoore@gmail.com

More from Medium

Checkbox or switch?

Ux laws observed on the website

What is Figma, and why we use it

A mobile phone with an image of an app for the company ‘the wave’.

Nike Run Club — Export Feature