User Interface Design
In the earlier chapters, we learned about the design and rules perspective. So far, we have implemented the data model of our example application and the business rules. In this chapter, we will learn to design the UI elements for our example application. But first, we must understand the types of data.
Does category, product, customer and orders data have the same characteristics? What are the categories of data?
Data can be categorized as reference data, master data and transaction data.
- Reference data is any kind of data that is used solely to categorize
other data found in a database. In our example application, category is the reference data as it is used solely to categorize the product data.
- Master data represents things that interact when the transaction occurs. In our example application, product and customer data are examples of master data. Product and customer participate in the order process (transaction).
- Ordering process is the transaction and orders created by the customers are the transactional data. It is also referred to as the transactional activity data to differentiate it from the transactional audit data that is used to track the progress of individual transactions.
How will the type of data impact UI form design?Form Design perspective allows you to design your user interface wire-frame that links directly to the data model and workflow state.
This design constraint mandates that data model be completed first so that form field elements such as display fields, input text fields etc can be added to the forms. Similarly, workflows must be established using the process design perspective and actions must be configured for each activity using the action design perspective, so that form elements such as buttons can be added to the forms and the permissions can be defined at granular field level for the forms depending on the workflow states.
- Form design for reference data is simple and straight forward as no workflows and processes are associated with reference data. For example, the UI design requirements for category data are simple: a form to add/edit data, a queue to list data.
What are the different steps involved in form design?
- Form design for master/transaction data can only be implemented after process design and action design are completed. For example, the UI form design for customer orders can be implemented only after process and action design are completed.
- Creating a new form and designing the page layout - This can be done once the data model is created.
- Adding the form elements such as display fields, input fields etc - This can be done only after the data modeling is completed and data model is implemented.
- Adding validations for form field elements - This can be done once the form field elements are added.
- Adding buttons to the forms - This can be done only after the process and action design are completed. However, for reference data, which has no workflows, the default submit action can be used and form design can be implemented.
- Specifying permissions - This can be done only after process design is completed so that permissions can be defined at granular field level for the forms depending on the workflow activities.
- Creating and applying styles to the forms.
In the following sections, we will explore the form design perspective and learn how to perform each of the steps mentioned above by reviewing the form design implementation of the template application. We will then create the various forms required for our example application.