General User Experience Guidelines

Introduction

If you are just starting to design your first application and have no design experience, you may need some help and guidance on how to design apps. This page provides practical information that you can use to build your apps.

Sample File

You can download a predefined sample file that contains elements that you can use in your design to create useful, usable, and user-friendly web applications. Open the sample file in Apps Studio and copy-paste the elements needed for your design.

Starting Your First Design

Before you start building your first application, it is recommended to plan your work in advance. Think of the following things first:

• What is the context of your application?
• Who are your users? What is their goal, occupation, or specialization?
• What is a typical situation or a most frequent case?
• How will you measure the success of the application?
• What are the positive effects expected from your application?

Once you created your plan, you can easily review it with your peers and make any changes. After this, you can safely go to the next steps:

1. Assess other cases by analyzing less frequent scenarios and edge cases. Write them down and prioritize.
2. Define the best media or format for achieving the best result. At this step you can already decide if you need a page, web site, or a few wizards starting from one page.
3. Research and identify your competitors to evaluate their strengths and weaknesses. Assess how to approach similar problems.
4. Create a rough prototype of your application. You can discuss the prototype with your peers to reach the best solution.
5. Test the prototype and collect feedback. It is recommended to share the prototype with potential users for better feedback and improvement.
6. Start designing the final version of your application.

Design Principles

There are many design principles that need to be followed to create usable, user-friendly applications. For the best user experience, follow at least the two principles below.

Consistency

• Use the same font and layout as much as possible.
• Be consistent in your design throughout the application pages to improve the user experience.

Simplicity

• Use only the the elements needed to get the job done.
• Try to avoid having more elements than necessary in your design.
• Make sure that everything is clear and you do not miss any important information that the user will have to search for.

Colors

Color use is very important in creating the design for your application. For the best user experience, follow the guidelines below:

• Use colors consistently across the application for elements of the same type.
• Try to avoid traffic light colors, unless necessary. You can use red for errors, yellow or orange for warnings, and green for communicating positive progress.

• Try not to rely only on colors to present the information. Always add information in textual format next to the colorful object.

Tip:

Find colors that provide maximum contrast, including enough contrast between content and the background, so that text and non-decorative images are legible for anyone with low vision or color deficiencies.

Alignment

Element alignment is an important step in creating a successful design. Make sure that your elements are consistently aligned.

You can easily align your elements horizontally or vertically from the Style tab.

Example

Below is an example of an element and the procedure to create it.

Step	Action
1	Open your already existing application or start a new one.
2	Add a new container to your design with the following properties: Layout: horizontal, top, left Size: width - 100%, height - auto or blank
3	Add a container inside the first one with the following properties: Layout: horizontal, bottom, left Size: width - 40%, height - auto or blank
4	Add a label control inside the container with the following properties: Text: Label
5	Add a second label inside the container with the following properties: Text: * Style: color - #c2320c
6	Add a new container inside the main one with the following properties: Layout: vertical, left, top Size: width - 60%, height: auto or blank
7	Add a textbox inside the container with the following properties: Hint text: Hint text
8	Add a label inside the same container under the textbox with the following properties: Text: This field is required Other properties: hidden Style: color - #c2320c

Note: Make sure that error messages are hidden and they are only visible in case there is an error.

After following the procedure above, the structure and element will look as in the images below.