There are no set rules for mobile app usability; however, through years of app development experience, we are sharing the accumulated experience. The information covered in this chapter is the list of things to which you can refer when creating the mobile app.

Screen Configuration

Minimize the visual elements that are not helpful so the focus can stay on the key content being provided to the user. Rather than filling the content tightly, give it plenty of space, and then clarify the visual hierarchy if there is substantial content. Group the related contents together to reduce the complexity of the screen.

• If the content does not fit on one screen, then do not design it to fit the screen, but make it look cut out to remind users that they can scroll left, right, up, or down.

• Grid borders look complex and should be avoided whenever possible, and separator lines should not be used for sub-items in the list.

• When working with a keyboard input, configure the task to be completed without closing the keyboard.

• For modal pop-ups, use full frames whenever possible.

• It is good to design information created by the user’s effort (for example, select/delete all) to be not easily deleted.

• In the case of irreversible actions, such as delete, ask the user to confirm again.

• It is not recommended to place the main action and the functions that perform the irreversible actions in the same location.

• Place UI elements like buttons such as close, OK, and cancel, in the same location to configure the user interface consistently.

Navigation

Configure the navigation bar in one column and always place it in the same location for the user the easily recognize it. Also, using icons and text together makes it look complicated, so it is better to use only one or the other.

• Make sure that the navigation and UI elements do not stand out from the content.

Color

Minimize the number of colors used in the app and do not apply colors that stand out for other than UI elements that induce user actions.

The following shows the color scheme of the example app.

Icons

Icons should be able to remind users of meaning or action. Therefore, it is recommended to use icons that are commonly used and are already familiar to users.

One example would be the Material Icons of Google. Define the icons and their meanings and provide them to the user. Material Icons are available in 18dp, 24dp, 36dp, and 48dp sizes, and you can choose and use them according to your environment.

Virtual Keyboard Key Processing

In input components such as Edit, MaskEdit, and TextArea, you can use a virtual keyboard by setting the usesoftkeyboard property to 'true'. If you want to process the keys of the virtual keyboard, then you can check the keycode value in the onkeydown event function and process it.

• By check the Enter key input of the virtual keyboard in the onkeydown event function of the Edit component, you can perform the function of the app without closing the virtual keyboard.

this.edt_query_onkeydown = function(obj:nexacro.Edit,e:nexacro.KeyEventInfo)
{
	// Enter Key Processing
	if(e.keycode == "13")
	{
		this.btn_search_onclick();
	}
};

• If there are multiple input fields, then the focus moves to the next input field when the Enter key is pressed.

Error or Helper Message

If possible, check the errors in the input field for the user input and then display them at the bottom of the field so that the user can easily identify them.

In consideration of the input content or length, place the clear button to facilitate the deleting operation if necessary.

Component Configuration in Example App

This describes the component configuration used when creating the Device API Utilization Workbook example app. Results may vary depending on the environment of the mobile device; therefore, it is not a recommendation, but rather just a reference.

• Place the first UI element of the screen on left 10px, top 20px.

• Set the distance between each component to 20px by default. However, since the area of the Static component is wide, set it to -20px.

• If there is an input component, then give the focus to the first component.

Button

• Place negative actions on the left and positive actions on the right. For example, place the OK button on the right and the Cancel button on the left.

• When the input is not completed, disable the Done or Action button to minimize the possibility of user error.

• Set the style of the button according to the importance. For example, the most important button for login is the login button, so it is not recommended to design other buttons in the same form of login.

• Do not distinguish links and buttons but represent with buttons. It is recommended to understand and design links as navigation and buttons as action execution.

Edit, MaskEdit, TextArea

• If possible, provide the clear button so that all text in the input field can be delete.

• Do not separate field names and display them in the input field to efficiently manage the space.

• Display input errors or required input items at the bottom of the component.

• Mark the items that must be entered with *, such as "field name*", and add the character string "*Required" at the bottom.

Grid

• In the case of the default Grid, since it is not easy to view on mobile, provide sufficient space between columns and rows.

• If possible, avoid using grid borders and set only horizontal borders if necessary.

Static

GroupBox

CheckBox

• Default value must be selected.

• If there are only two options from which to choose, then use one checkbox or a toggle switch.

Calendar

In the mobile environment, use the calendar of the system provided by the OS. Since this is the default operation of the Calendar component, no separate setting (popuptype property) is required.

• For popuptype, use the default (system).

• When setting the type to monthonly, the day and weekday font size must be set in the theme. (.DatePickerControl .body .dayitem, etc.)

Combo

In the mobile environment, use the extended Combo. Extended Combo is the user component that has changed the function of displaying the item list to fit the mobile environment from the default Combo component. Therefore, modules and objects must be registered during the development.

If you need to use the default Combo, then use it as follows.

• In the select menu, the default value must always be selected.

• If there are fewer than 5 options, it is better to simply expose all the options rather than the drop-down menus so that users can see and select them at a glance. Drop-down is generally used when there are 7 or more.

Radio

• Default value must be selected.

• Make the height and width of the component large enough for the number of items.

Spin

• Default value must be selected.

ListBox

The usability on mobile is not ideal, so it is good not to use it if possible. If multiple selections are required, then use a checkbox, etc.

• Default value must be selected.

• There is no need for the select or execute button in the list. Make the item able to be executed immediately when selected, and if additional actions (modify, option setting, etc.) are required, then place them on the right side of the item.

Tab

Since the usability and view on mobile are not ideal, it is good not to use it if possible. Create the Tab function using Button, Div, etc. If it is absolutely necessary to use it, then set and use it as follows.

• Create the tab to be in 1 column if possible, and if it is wider than the screen size, then make it possible to scroll left and right.

• Create the tab items to be 3 or fewer per column and make the tab button item text to be short so that the prev and next buttons are not created.

• Tab button text size is set in the theme.

.Tab .tabbuttonitem .tabbuttonitemtext
{
	font : bold 20pt "NanumGothic";
}

Menu

The usability on mobile is not ideal, so it is good not to use it if possible. If it is absolutely necessary to use it, then set and use it as follows.

• Do not create the submenu and use it in 1 column if possible.