User interface and text copy
Once you’ve mastered the installation process, it’s time to see how your application will look and the impression it makes on the end user. Do you like seeing quality in the products you use? Do you love how they look? Absolutely. Let’s see how we can design your app with the user’s experience in mind.
Table of Contents
- Be friendly and clear in your app texts
- Design your native app as a part of Ecwid Control Panel
- Have a
mobile-readyinterface for your native application
user-friendlyways to connect to another service
- Add required app settings only
Be friendly and clear in your app texts
The language you use in your app will make a certain impression on your users. When the copy is clear and simple, it’s easier for new users to get started and increases conversion.
When creating copy for any part of your app, first try to understand the user’s situation and the action you want them to take. Be clear and friendly with the words you use. Your copy should be oriented towards ordinary people, who are inexperienced with computers and apps.
Here are some comparisons between different tone and copy styles:
|Direct customers to this URL after they press the Buy now button||Specify the custom URL where you need customers to be directed after they click the Buy now button in your storefront|
|Receive this report on Mondays||Schedule the system to send you this sales report on each Monday at 2 PM|
|Invalid login or password entered||Authentication error encountered|
|Simple, short and easy to read||Too long, unnecessarily complex, technical|
Design your native app as a part of Ecwid Control Panel
When an app is added to Ecwid Control Panel, users expect it to look like a part of it, because it’s displayed in the same environment. Achieve a consistent and smooth user experience by using the same design elements in the same way as Ecwid does.
The Ecwid CSS Framework provides HTML code snippets of Ecwid Control Panel elements to create a great design for your application: typography, icons, checkbox toggles, dropdowns and more. For your convenience, you can get a head start with a Sample Native App source code. We suggest using these several pages as a leading example of user interface to achieve the best look for your native application: Mail Notifications, Design, Taxes, Shipping & Pickup .
Here is an example of how the app interface can be designed:
|The app page looks like a part of the Ecwid Control Panel||Design elements are quite different than the ones from the Ecwid Control Panel|
mobile-ready interface for your native application
The Ecwid Control Panel as well as your application can be opened in different areas (popup/tab) and on different devices (desktop/mobile). Make an effort to provide accessibility to more users on their preferred device with a responsive app interface.
When creating your application from scratch, try the mobile first design approach: you should start with a mobile screen size first and work your way up to desktop instead of the other way around. Mobile first ensures your app works and looks great for both desktop and mobile users. If this approach is not possible or feasible for you, create a responsive version of a desktop app interface which works well for different screen width using CSS breakpoints.
Here is an example of the Order Editor feature working in a popup and a native application not optimized for smaller screen sizes:
|The app interface works well in a popup and mobile||The app crumbles on mobile, making it almost unusable|
user-friendly ways to connect to another service
Your application may connect to another service via its API platform and that is great. However, you often see services asking users to copy/paste the authentication keys for that other service. Keep in mind that the user’s goal is the actual connection with another service, which is why we should make it easy for them.
Find out if you can get access in a background from the service your users want to connect with. If it allows for simple user authorization in your app — use it. Clicking a button to confirm is ten times easier than making a user search for and copy information into your app settings. The same goes for situations when you connect Ecwid to your platform — make sure to use the Complete OAuth Flow provided by the Ecwid API Platform.
Different approaches to connecting with other services:
|App launches ||The app requests API token from another service|
Add required app settings only
A new user is usually hesitant to use a new app — everything is new and there is no certainty on how it all works. Therefore, you should only show settings that are essential for initial setup in order to streamline onboarding. The less settings displayed, the easier for you to manage, and for new users to understand. Ideally, the app should work without the user needing to set anything up.
Only show the settings your app absolutely needs to start working. When you are in the development stage, you can have doubts that a specific setting will be used a lot. In that case — remove that setting right away. If you have to add new settings later, make an effort to show essential settings first and hide advanced ones behind an additional action, like a button click.
Essential vs overly customizable settings list:
|App settings are simple, clean, easy to follow||App has million of different settings, hard to navigate for a new user|