We cannot understate the importance of an app's user interface and experience . Over time we've seen that well-designed, responsive, performant apps do better than those that do not apply as much rigour. We've created a list of design best practices to ensure that our app partners have the tools they need to create an impressively designed site.
In this article
Navigation
Do:
- Link your logo image to your app's homepage
- Create descriptive, well-named navigation elements (sidebar or tab menu)
- Use text rather than icons for navigation elements (or text + icons)
- Prioritize the actions your customers will use most
- Group related navigation elements
- Minimize the number of clicks to complete common actions
- Relegate one-time setup and configuration actions to app settings
- Use at most one vertical navigation layer and one horizontal navigation layer
- Use breadcrumbs to assist navigation
- Prefer lazy loading over pagination
Avoid:
- Using too many, or over-long navigation elements
- Creating multiple global navigation layers (multiple sidebars, or subtabs)
Appearance
Do:
- Build a responsive website
- Support mobile widths
- Ensure your site is accessible for the visually impaired using tools such as:
- A page accessibility tester (e.g. axe DevTools)
- A contrast checker (e.g. contrastchecker.com)
- Alt text to label images
- Allow for font and colour customization (for Theme Extensions)
Avoid:
- Employing massive, information-dense dropdowns
- Cluttering your page with too much text or colours. Use whitespace to help your page breathe
Experience
Do:
- Keep it simple; often the easiest user flow is the best user flow
- Provide feedback on actions (use success and failure toasts)
- Optimize your site to load quickly
- Use clear, consistent naming conventions, capitalizations, padding, headings, etc.
- Maintain a professional and consistent voice and tone
- Add "Are you sure?" verification to irreversible actions
- Use tooltips or link to support documentation to explain complex operations
- Confirm that a user wants to leave an unsaved page when they navigate away
- Write comprehensive support documentation
- Respond to user feedback and continuously iterate on your design
Avoid:
- Adding auto-play video or audio
- Over-monetizing or over-upselling your app (do not detract from a user's experience)
- Using unnecessary confirmation steps (automatically save so that work is never lost)
- Typographic or syntax errors that make your app more difficult to understand
Further reading
- Tools like Grammarly or the AP Style Guide are handy for questions about grammar and punctuation
- The Good Docs Project has some open-source resources and templates
- Mailchimp's Style Guide offers some sold advice (though you should ignore the brand-specific instructions)