Creating a successful app involves incorporating several user experience (UX) and user interface (UI) best practices to ensure a seamless and satisfying user experience. To help, we’ve compiled a best practice guide.
If your app requires it then you should simplify the sign-up/login process by enabling auto-login or pre-filling information to streamline user onboarding.
例を挙げよう：
- Social media login: Allow users to sign up or log in using their existing social media accounts such as Facebook, Google, or Apple.
- Avoid long forms and unnecessary fields.
- Provide clear instructions for each field. Use placeholders and tooltips for additional guidance.
Once the user installs your app, try to provide a seamless onboarding experience with instructions on how to start using the app.
Examples of best practice for onboarding:
- On arrival: A welcome screen with clear instructions on how to get started.
- Tutorials: A step-by-step tutorial highlighting key features and functionalities.
- Contextual tooltips: Use concise tooltips to explain specific features when users encounter them for the first time.
- Welcome emails: A welcome email makes a great first impression, guides users, and boosts engagement and retention. Here are 20 inspiring examples.
Guide users effortlessly through the app, so they don’t get lost or need support.
例を挙げよう：
- Tooltips and Hints: Tooltips provide additional information about specific features or sections.
- Notifications: Provide real-time feedback through notifications or messages to inform users of successful actions, errors, or required next steps.
- Easy access to support: Make it easy for users to contact support if they encounter issues and Include a help section or FAQ within the app where users can find answers to common questions.
Provide clear instructions and requirements to prevent errors. If you handle errors, use clear and constructive messages to offer feedback on user actions, whether they are successful or encounter errors. Do not use browser native errors.
例を挙げよう：
- Error message: "Please enter a valid email address."
- Success message: "Your message has been successfully sent!"
- Warning message: "Are you sure you want to delete this file? This action cannot be undone."
Pro-tip: These elements come out of the box in the Wix Design System for dashboard pages and Blocks for site widgets’ settings panels.
The app should use uniform UI elements, navigation patterns, icons, and color schemes to establish trust and familiarity.
例を挙げよう：
- Spacing and alignment: Uniform spacing and alignment of elements to create a clean and organized layout.
- Buttons: To create a unified look, apply the same button styles, such as color, size, and shape, throughout the application.
- Navigation: Use the same navigation bar layout across all pages so users can easily navigate the app.
Intuitive design makes interfaces easy to use by leveraging familiar patterns and logical organization. It allows users to navigate and perform tasks effortlessly without learning or instructions. “Don’t reinvent the wheel.”
例を挙げよう：
- Menus: Most apps use the Wix business manager sidebar for navigation.
- More actions button: A 3-dot icon button usually represents a button that opens more actions.
- Clickable icons: The “?” icon will usually lead to a tooltip with more explanation. Learn more about using icons.
- Feedback: Users expect some feedback after performing a task (Success message, loader, “Completed” status).
- Table: The table top usually has a checkbox to select all items or specific filters.
Pro-tip: These elements come out of the box in the Wix Design System for dashboard pages and Blocks for site widgets’ settings panels.
Keep the user interface clutter-free to help users focus on the essential tasks without feeling overwhelmed.
例を挙げよう：
- Button hierarchy: Decide what the main action in each area is, and organize buttons to prioritize their importance (Primary, Secondary, and Contextual).
- Content sorting: Clearly divide content using dividers and colors.
- Column layout: Follow our guidelines for columns.
Pro-tip: These elements come out of the box in the Wix Design System for dashboard pages and Blocks for site widgets’ settings panels.
Maintain a consistent color scheme throughout the app, assigning specific colors for actions like "Submit" buttons. Use colors to convey meaning, such as red for error and green for success.
Ensure there is sufficient contrast between text and background to make reading easy. You can use this checker to help.
例を挙げよう：
- Main action color: This should be the most prominent color on the page. Use it wisely and scarcely.
- Error or fail color: The convention is using red color.
- Hover colors for actions: Hover colors let the user know this item is clickable.
More resources:
Pro-tip: These elements come out of the box in the Wix Design System for dashboard pages and Blocks for site widgets’ settings panels.
Maintain consistent typography with a clear font hierarchy and appropriate font sizes for improved readability.
例を挙げよう：
- Titles: Use larger font sizes for headings and titles.
- Regular text: Use smaller font sizes for body text.
- The smallest font size should typically be 12px.
Learn more about heading and text components.
Provide easily accessible help articles or a support center to assist users with issues. Your app should also include clear documentation and instructions specific to Wix.
例を挙げよう：
- Dedicated FAQ section in your app or help center.
- Reply to user reviews regularly in your app page on the Wix App Market.
- Provide a clear link to support via email on your app.
Use plain and easy-to-understand language to ensure everyone can comprehend the content, avoiding jargon that may not be known to everyone whenever possible. Content should be brief and to the point.
Common practices for content:
- Break up the content into short sentences. Include one idea per sentence, and try to use sentences of 25 words or less.
- Start with the most important piece of info.
- Replace overly technical words with simpler ones (Authenticate → Log in, Terminate → End).
Design your app to be responsive, adapting seamlessly to different screen sizes and devices for optimal usability. Ensure the app functions well on mobile devices, which behave differently than the desktop.
Examples of mobile adjustments:
- The mobile layout will usually be a 1 column layout due to space constraints.
- Mobile buttons need to be relatively big so that users can click them using their fingers. The highest accuracy was found with buttons between 42 and 72 pixels.
- You may also want to have icon buttons on mobile screens.
By integrating these best practices into your app development process, you can create a good app that meets users' needs and provides an excellent user experience.
More resources: