Good user interface design focuses on anticipating what users might need to do and ensuring that the interface has elements that are easy to access, understand, and use to facilitate those actions. Being consistent and predictable in your user interface design helps application users to complete tasks more efficiently.
The user interface can take into account the domain knowledge of your application's users as well as their skills, locale, and language. The appearance, branding, and interaction dynamics of your user interface can match the context and language that is natural to your users.
For access through the standard portal, reusable harnesses are used for work items. The following rule types support the presentation of work items:
The HTML text that you enter into HTML rules is known as source HTML. Source HTML contains ordinary HTML code plus JSP tags or directives — server-side instructions that are evaluated at run time to compose the final HTML it sends to the HTTP server (and ultimately to a user's browser session). Known as stream processing, this evaluation accesses the clipboard for text values to insert into the output HTML, incorporates the text of other HTML rules, provides conditional if-then-else testing, and looping through arrays.
Harness forms use the pega:include JSP tag to incorporate multiple sections, which in turn use standard styles and fragments to present properties, labels, and images. For your application, you can copy and tailor parts of these forms as necessary, while inheriting the standard parts.
A design template is a section that contains predefined layouts and regions. You can think of it as a blueprint. Use design templates to save development time, increase the reusability of UI elements, and make your application's look and feel more consistent.
For more information, see the article Designing sections by using design templates.
Use skins to specify the presentation of your content. Separating the content that is defined in sections and harnesses from its presentation ensures greater consistency and promotes reuse of elements.
You can use standard Cascading Style Sheet (CSS) helper classes to make small adjustments to cells and layouts, rather than copying and editing a format in the skin. For example, you can use a CSS helper class to center an element or to double a standard margin for an element. By using CSS helper classes, you not only save development time and ensure consistency, you also improve application loading time because you avoid creating unnecessary static content for your application.
Standard facilities are provided for those workers and managers who use applications throughout the workday. These facilities support:
These tools support your evolution of the user interface of your applications:
When a user submits an HTML form, the values that they enter in input fields are recorded as property values on the clipboard. The values that users enter may not be in the format required by the property definition, or might not pass validation tests.
The UI Kit is a framework of components (modules of HTML, CSS, and JS, such as a form input with a label and validation) and reusable formats and templates.
For more information, see UI Kit rule set.
For information about best practices for designing user interfaces, see the article Top Ten Usability Guardrails.