Data redaction is a practice used to represent truncated or hidden sensitive data such as personal information.
To achieve redaction on the UI, midline horizontal ellipsis characters [• • •] are used.
How to use it
Simply copy the ellipses from below ⬇️ and replace any text in your design with ellipses.
• • • • • • • • • •
Best Practices
- The number of midline ellipses [• • •] does not have to match the number of characters in the string, choose a length that best represents the original information and make sure it does not alter the original container size
- When possible, use the font properties from the original text to keep line heights and containers undisturbed.
- Insert a regular space between the ellipses to ensure it is perceivable.
Redacting certain information based on user permissions
Dos and Donts
Inform the User
Use tooltips or info messages to inform the user about the reason why the information is redacted.
In case the space is limited, use a tooltip to inform the user about the redaction.
Don’t just leave it to the user to figure out why data is hidden.
Try to use an info message to communicate why the data is redacted in case there is enough space.
Don’t just leave it to the user to figure out why data is hidden.
Actions and Redacted Information
Hide actions that are directly related to redacted data.
Hide actions that are directly related to redacted information.
Don’t make actions related to sensitive information available so that the information is fully protected and confusion can be avoided.
Character Implementation
See the information below to implement the midline dot character.
How many dots per character?
To accurately mimic the length of the text that was redacted by using midline dots, a good practice is to define the number of midline dots as follows:
Original text no. of characters * .75
This calculation will accurately mimic the original text length only if there is a single space between the dots.
UNICODE
U+000B7
HEX CODE
·
HTML CODE
·
HTML ENTITY
·
CSS CODE
\00B7
// html example
<span>·</span>
// css example
span {
content: "\00B7";
}
Please always include a single space between the dots when implementing the characters for better readability.