Skip to main content

TRG 9.01 - UX consistency / Styleguide for UI

StatusCreatedPost-History
Active22-Jul-2024Finalize TRG
Draft25-April-2024Added new styleguide criteria - initial version
Draft10-Jan-2024Transferred from Release Acceptance Criteria into TRG

Introduction​

The purpose of this guideline is to ensure that business applications with user interfaces adhere to the established UI/UX styleguide which is collected in the Portal Shared Components. It outlines all the relevant criteria that must be checked when releasing a new product version. A crosscheck with every pull request is not just optional, but it is a "MUST" criteria to ensure the quality and consistency of the user interfaces of each product/component. This step is crucial in maintaining the overall standard and enhancing as well as standardizing the user experience.

Objective​

The objective is to ensure consistency, usability, and adherence to design standards across all user interfaces within the business application.

Criteria (Basic)​

Styleguide Compliance​

  • All user interface elements must match the predefined styles. This includes fonts, colors, button styles, input fields, and layout grids.
    • Storybook
    • You can use the publicly available Portal Shared Components NPM library - React supported - to easily develop applications that are in-line with the Tractus-X style guidelines. If you are using a framework other than React, you should use the Shared Components as a base and adapt their style to match the styleguide.
  • Icons and imagery should be consistent (note that images and icons must be open source compliant and license files are needed)

Responsiveness and Compatibility​

  • The application must be fully responsive and provide a seamless experience across different devices and screen sizes.
  • The application must be tested with multiple browsers - in case any browsers are not supported, the same must be documented.

Accessibility​

  • The application must meet the minimum accessibility standards (e.g., WCAG 2.1).
  • Optional: All user interface components must be navigable and usable with keyboard-only controls.
  • Optional: Screen reader compatibility must be tested and ensured.

User Experience​

  • The application's user flow must align with the user experience outlined in the styleguide.
  • Interactive elements must provide feedback to the user, such as hover states, active states, and disabled states, as per the styleguide.
  • The application must have a user help area which is linked to the current deployed application version.
  • The application must have a loading state or spinner component that indicates when data is being fetched or processed.
  • The application must have a mechanism in place to prevent the user interface from being triggered a second time by the user while running loading processes (POST Data). This is important to avoid any unintended actions or disruptions caused by multiple triggers. By implementing this safeguard, the application can ensure a smooth and reliable user experience during loading processes.
  • The application must have a notification or alert component that displays important messages or updates to the user (success as well as errors).

Typography and Readability​

  • Text must adhere to the styleguide's typography standards, including font sizes, line heights, and font weights.
  • Text contrast must meet the minimum contrast ratios for readability.

Localization and Internationalization​

  • The application/user interface must support multiple languages, allowing users to switch between different language options.
  • Text in the user interface must be properly localized and displayed in the correct format for the target audience.

Animation and Transitions​

  • Any animations or transitions must be smooth, enhance the user experience, and conform to the styleguide's principles.

Others​