Porsche Design System
You are currently viewing an earlier release of the Porsche Design System.Switch to the latest Porsche Design System documentation.
SearchNavigate to GitHub repository of Porsche Design SystemOpen sidebar
GuidelinesResourcesLegal
Forms Privacy and EU data protection guidelines We also have a responsibility to design consent flows in accordance with the EU General Data Protection Regulation (GDPR/DSGVO) and to implement them in a way that ensures consent is given voluntarily. Studies show that users are much less likely to share their data when they feel they do not have control over it or fear that disclosure could have negative consequences. Therefore, the benefits of data sharing should be transparent to the user, and the design should also communicate how risks are reduced, for example by clarifying that data will not be passed on to third parties for undefined purposes and by giving users a clear sense of control. In practice, these principles should always be aligned with the purpose statement. The stated purpose must help users understand the consequences of sharing and processing their data. A successful implementation enables users to effectively control those consequences. In the section Handle with care: Sensitive and personal data, we already outlined some guidelines for handling personal data. This section provides additional insight into the full set of privacy principles. The Privacy UX Design Guidelines Principles are: Limitation A dialog may collect only the data required for the specified purpose. Which personal data may be collected, and how much, depends on how specific or broad that purpose is. For example, if a service only needs to know whether a user is of legal age, it should ask only for confirmation of legal age, not for the user's exact age. Selection and control Users must always be able to give or refuse consent for each individual purpose. Consent must be an active opt-in for a clearly defined purpose. Users therefore need to take an explicit action, for example by selecting a checkbox or toggling a control. Preselected checkboxes do not require active consent and are therefore not generally considered valid. If data collection is based on user consent rather than another legal basis, that consent must be given explicitly before data is collected. Because users assess the sensitivity of their data differently, they should be given as much choice as possible, for example regarding how they would like to be contacted. Explanation Users should be able to understand why specific data is being collected. This can be supported with textual and visual explanations. Whenever possible, the added value should also be communicated visually. Putting data collection into context is another important strategy for making it meaningful to the user. Ideally, users should also be informed how perceived risks are already reduced or controlled through protective measures such as pseudonymization, encryption, and technical or organizational access controls. Contextualization of consent Consent should preferably be obtained "just in time", i.e. exactly when it becomes necessary, but no later than the point at which the data is collected or later processed for a different purpose than previously stated. The explanation for data collection and the request for consent should be connected in time, context, and logic, without interruption. Controllability Dialogs should be controllable so the process remains transparent to the user, for example while entering data. There should be no unnecessary dependencies between providing data and booking or using services. Instead, users should be able to agree to each processing purpose individually. They should be able to start, pause, stop, and resume processes at any time, even retroactively where applicable. Strong controllability is especially important on mobile devices, where users need sufficient guidance for orientation and navigation. This also includes accurate, friendly, and complete feedback in case of unexpected behavior or errors. Support Filling in fields or forms should be supported as much as possible. This includes responsive design, error tolerance, autocomplete, search functions (for example in dropdowns), logical sorting (such as alphabetical ordering), and the use of common formats, for example for date entries. Relationships between fields should also be considered. Minimalism and continuity Dialogs and processes should have a clear overall structure and separate topics or content areas clearly from one another. Visual and informational overload must be avoided. This helps prevent users from feeling overwhelmed and creates a sense of familiarity and security. Appreciation Correct salutations, titles, and names, where necessary, help build trust and a sense of respect. Individuality should be respected, for example by avoiding pressure to choose only man or woman in a gender field. This also includes giving users the ability to specify titles such as Prof. or Dr. where relevant. User testing These principles describe possible ways to implement consent forms so users can effectively control the consequences and risks associated with disclosing data. To ensure successful implementation, the design must be contextualized, i.e. tested empirically with users in the relevant touchpoint. This means more than technical functional testing. It must also be verified whether the specific implementation actually helps users understand the consequences and risks of data disclosure and whether they feel those risks can be effectively controlled.
Global settingsColor SchemeAll color tokens use the light-dark() CSS function. Set the theme via the CSS color-scheme property: light for light mode, dark for dark mode, or light dark to follow the user's system preference.LightDarkLight DarkDirectionThe dir global attribute in HTML changes the direction of text and other content within an element. It's most often used on the <html> tag to set the entire page's direction, which is crucial for supporting languages that are written from right to left (RTL), such as Arabic and Hebrew. For example, using <html dir="rtl"> makes the entire page display from right to left, adjusting the layout and text flow accordingly.LTR (left-to-right)RTL (right-to-left)Text ZoomTo ensure accessibility and comply with WCAG 2.2 AA standards, it is mandatory for web content to support text resizing up to at least 200% without loss of content or functionality. Using relative units like rem is a best practice for achieving this, as they allow the text to scale uniformly based on the user's browser settings.100%130%150%200%