Crafting the Shopify admin
The Shopify admin is where merchants set up their store and manage their
business. It’s usable for iOS, Android, and the Web.
Polaris was inspired by the admin, but it takes more than Polaris components and style guidelines to create successful features and flows. Here you’ll find practical ideas to help you create a better admin for merchants.
Start with the problem, not the UI
Take some time to explore the problem space. Consider research, technical limitations, merchant workflows, stress cases, existing patterns, and content. Don’t start by focusing on the details of the user interface (UI).
Talk to merchants. Solve the right problems by seeing the world through their eyes.
If you have researchers on your team, use their expertise. They’ll help you understand the whole problem and uncover biases and assumptions. If not, try some quantitative and qualitative research methods, like surveys and interviews.
Hone in on the real-world tasks merchants need to complete. At the same time, think inclusively (beyond the “average” merchant) and identify potential stress cases that could apply to the task.
Conduct an audit of the current Shopify admin and of similar products. Look for patterns, inconsistencies, and opportunities for improvement.
Create ordered lists and groupings of the content merchants need to see for each task in the flow.
See if plain language terms can be used in place of industry jargon.
Sketch your ideas in low fidelity, using real content.
Represent merchants’ reality
Model the experience around how merchants think about and complete tasks in real life.
Use the same words and concepts as merchants.
Stay focused on the merchant problem. Test ideas with merchants. Don’t get attached to solutions.
Aim for one admin across many devices
Information and functionality should be the same across devices and operating systems.
Avoid launching features on one platform but not others.
All content should be available on every platform, but not every screen needs to have the same content.
Consider all devices, including all screen sizes and common operating systems. It can be helpful to start with the platform that has the most constraints.
Remember that embedded Shopify apps are supported on iOS and Android. They render in web views.
Tailor the admin for everyone
Welcome merchants with as wide a range of devices, backgrounds, locations, languages, and abilities as possible.
Adapt the UI to Android, iOS, and the Web so merchants can think about what they want to achieve, not how the interface works.
Support multiple languages and cultural norms. Learn more about internationalization
Design for touch, keyboard, and mouse input. Design for people with a range of vision, motor, and cognitive abilities. Learn more about accessibility.
Use plain language and write for a grade 7 reading level.
Help merchants make better decisions
The Shopify admin should teach everyone—first time users and experts—how to become better at their work.
Focus on the critical, actionable content for each screen by understanding the specific tasks merchants need to complete. Draw merchants’ attention to the information they need to make smarter choices about their business.
Help merchants avoid errors
The best error message is no error message. When crafting interactions:
Always use an explicit save action in forms to avoid accidental changes. Explicit saving is where merchants have to save their own changes. Many settings in the admin affect merchants’ storefronts, money, or operations, so don’t auto-save changes, even ones with low risk. Merchants should expect a consistent editing experience.
Always warn about destructive actions. Use a confirmation modal to make sure actions that delete data are intentional.
Provide smart defaults.
Disable inactive controls. If an action or option becomes unavailable during interaction, disable it rather than handling an error when it’s clicked.
Accept input in a variety of formats.
Provide concise in-context help to avoid validation errors and to explain difficult concepts. This is commonly done using the help text on Polaris’ form components, but this pattern applies broadly and can have other implementations.
Provide immediate UI feedback
Tell merchants what’s happening as soon as they interact with the UI.
Acknowledge interactions immediately. Follow the guidelines for interaction states when crafting new interactive components.
Confirm successful actions using the toast component (coming soon).
Validate input interactively, such as validating text fields as merchants type.
Use banners for important and temporary feedback, like errors and warnings.
Polaris: use it, extend it, improve it
Polaris was inspired by the admin, and the admin should align with Polaris. At the same time, Polaris is a guide, not the destination. It should evolve and be challenged.
When you face a user interface design problem:
- Review the guides, components, and patterns that are related to your problem.
- If they don’t solve your problem, try designing something fresh. Use the design and content guidelines to keep it feeling like Polaris.
- Compare solutions. Pick the solution that’s best for merchants and build it in your app.
- If you’re still unsure, reach out on GitHub.
- If your chosen solution fills a clear gap in the system and could be reusable, propose to add it to Polaris.