Considerations for Developing a User Interface
Use the following best practices while developing a user interface.
Create Mockup Designs Before Creating Mashups
Before you start designing your application and creating the Mashup, it is recommended to do the following:
• Gather information from users about the features they want in the application.
• Consolidate data on the required features.
• Get information about devices that will send data to your application.
• Work with the user experience or user interface designers to develop a standard application layout. If you get the layout approved by the required stakeholders, you can then directly build the Mashup with fewer iterations.
• Determine the primary viewing device for the application, whether it will be a phone, tablet, or desktop.
• Use a responsive Mashup if you have not decided on the primary viewing device. After you select the layout type, it cannot be changed.
Use Contained Mashups to Embed Reusable User Interface
It is recommended to split your entire application into smaller reusable components. The reusable Mashups can be configured on the main Mashup page. For example, the search results page can be a reusable component. Depending on the search criteria, you can configure the Mashup accordingly.
To embed the reusable Mashup in your application Mashup, use the Contained Mashup widget. The advantages of using reusable Mashups are:
• Splitting up the Mashups enables multiple developers to work on the user interface simultaneously.
• Reusable components make it easier to develop the user interface by reducing the number of the widgets required on the application screen. With fewer widgets, you need not work with a lot of widget parameters, their bindings, and so on.
• Reusing the Mashups reduces the overall development effort.
Make the User Interface Intuitive
Strive to create intuitive interfaces to reduce the learning curve for your users. Consider the following recommendations:
• Provide a logical flow.
• Consider how your users read on their screen and design the workflows accordingly. For example, left-to-right and top-to-bottom. The layout should guide the user to perform the next action.
• Provide feedback to the user. For example:
◦ Display messages that help the user understand what information to fill in or select in the user interface.
◦ Provide the status of the action that the user performed.
◦ If your application is executing some code in the background due to which the screen may become unresponsive, alert the user with a message. This ensures that users do not perform additional actions and wait for the application to complete the process.
Reduce the Interaction Overload
Simplify your designs to make them easy to use. Consider the following recommendations:
• Follow the minimalist UI design principles.
• Group elements with similar purpose together.
• Show only those elements that require user attention and interaction.
• If you want to show additional data, use a popup or other drill-down features. Users can access the data, as required.
• Minimize the number of clicks to navigate from one application screen to another. Use tabs to organize information on the screen and to navigate between data sets.
• Use the Enter key to trigger an action after the inputs have been entered. For example, in a text box after you type some text, you should be able to press the Enter key to submit the text.
Fewer Client Server Interactions
It is recommended to avoid unnecessary interactions between servers and clients in the application.
For example, consider a case where four services are set up to:
• Get utilization records for a specific machine
• Reverse sort the records for a different display widget
• Aggregate the records by machine state
• Calculate the utilization
If you use an Infotable, you can make a single call to the server and return all four result sets of data to the Mashup. The four services are still used; however, the services are executed in a single call.
It is recommended to use GetProperties service instead of defining new services (the four services mentioned in the example) to get the data. The new services pull the data from the server, even though no data may have changed. The GetProperties service pushes data only when the data has changed. This reduces the extra calls made to the server and eliminates unnecessary server and client interactions.
See the section
Services, for more information on using
GetProperties service.