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
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|