- Getting Started
- Before You Begin
- How To
- Designing your App
- Events and Rules
- Rule: If-Then-Else
- Rule: Open a Page
- Rule: Open URL
- Rule: Close Pop-Over/Bottom Sheet
- Rule: Show Message
- Rule: Show/Hide Spinner
- Rule: Set Values
- Rule: Start Process
- Rule: Upload File to Storage Bucket
- Rule: Get File From Storage Bucket
- Rule: Reset Values
- Rule: Create/Update Entity Record
- Rule: Delete Entity Record
- Rule: Add to Queue
- Function: And, Or, Not
- Function: Concat
- Function: Contains
- Function: Count
- Function: EndsWith
- Function: If
- Function: IsBlank
- Function: Guid
- Function: Length
- Function: List
- Function: StartsWith
- Function: Sum
- Function: Sort
- Function: Now
- Function: Today
- Function: Time
- Function: Year
- Function: Month
- Function: Day
- Function: Hour
- Function: Minute
- Function: New
- Function: Lookup
- Function: Filter
- Leveraging RPA in your App
- Leveraging Entities in Your App
- Leveraging Queues in Your App
- Application Lifecycle Management (ALM)
- Basic Troubleshooting Guide
General User Experience Guidelines
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.
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.
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:
- Assess other cases by analyzing less frequent scenarios and edge cases. Write them down and prioritize.
- 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.
- Research and identify your competitors to evaluate their strengths and weaknesses. Assess how to approach similar problems.
- Create a rough prototype of your application. You can discuss the prototype with your peers to reach the best solution.
- Test the prototype and collect feedback. It is recommended to share the prototype with potential users for better feedback and improvement.
- Start designing the final version of your application.
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.
- Use the same font and layout as much as possible.
- Be consistent in your design throughout the application pages to improve the user experience.
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.
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.
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.
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 |
After following the procedure above, the structure and element will look as in the images below.
