View Patterns

When monitoring and managing subscribe resources in a user panel, a customer uses typical operations and respective views with the following typical layouts.

Main Service View

An application integrator usually presents the main application service resources on the main service view that is shown first when a customer navigates to the application UI in the user panel. An application can provide its service for the whole company (Customer-Centric Service) or a service to be assigned personally to users (User-Centric Service).

Some applications can provide complex services, for example, a mail service bound to customer domains as the main service (Customer-Centric Service) and a sub-service assigned to users, for example, mailboxes (User-Centric Service).

Customer-Centric Service

In a simple case, when an application provides resources of the same type without any collateral resources, a customer needs to see the list of provisioned resources with a few parameters and a few actions, such as create and remove:

../../../../../_images/main-service.png

In a more complex case, an application allows a customer to provision main resources with auxiliary resources as allowed by the subscription:

../../../../../_images/main-service-complex.png

In any case, the customer needs to know the following typical information about the service (optionally, along with the subscription tile):

  • Name, for example, domain name or host name

  • Resource state, for example, running or stopped, active or unavailable, and so on

  • Resource configuration, for example, IP address and limits on the resource usage

  • Current resource usage

  • Available actions

If the list is empty, a short introductory instruction must be present on the page, for example, “Unfortunately, the service is unavailable for you. Please refer for details to your service provider”.

In a table, list items can be searched and sorted or ranked by some parameters. Usually, one of the fields in the table, for example, name, is a direct link to the resource configuration editor.

When designing the page, also take into account Resource List patterns.

User-Centric Service

When an application provides a service to be assigned personally to a user, there are two main service views:

  • In UX1, the main service view allows a customer to monitor the list of users who consume the service with respective resource usage.

  • In UX1, the main service view allows a service user to monitor and manage the assigned service.

Example of a simple main service view in UX1:

../../../../../_images/main-service-users.png

Example of a more complex main service view in UX1:

../../../../../_images/main-service-users-complex.png

A user may meet with the service activation wizard that helps the user to set the initial values and then activate the assigned service:

../../../../../_images/main-service-mycp.png

Resource Profile

Typically, an application UI contains a view that allows a user to manage a single resource in the following cases:

  • First, assign resource properties, when creating a resource (usually a view in a wizard)

  • View resource details in a final step of resource creation wizard or after a resource is created

  • Edit resource properties when assigning a service to a user

  • Edit the existing resource configuration

../../../../../_images/vps-create-1.png

A form contains a set of parameters and their values, as well as actions to modify them. A resource profile can be available in two modes: View mode and Edit mode.

  • In the View mode, a user can check the existing configuration and perform general operations using action buttons. The form may contain several sections. The parameters in each section must be logically grouped. Each section has a header and a set of action buttons located above the section they refer to. If there is an action that can be applied to the whole resource, the action button must be located in the upper-most section.

  • The Edit mode, in addition to what is available in the View mode, allows a user to input or change the resource configuration by entering or changing the values in input fields, checking boxes, selecting radio buttons, and so on.

The UI Style Guidelines documents assist you in the selection of widgets suitable in a view layout.