Personal Data and 'Shoulder Surfing' ... and CSS?

Managing a theatre - even a small one - has lots of facets, and obligations, and one of those often overlooked is privacy and data protection.

There's a lot to this topic of course, but since a few people have commented on it recently I wanted to share one of the really simple things we do.

The layout of our box office means that it's quite easy for people to glance over your shoulder, also our Front of House volunteers have access to it on iPads etc to allow them to assist with ticketing issues ("I lost my ticket", "my dog ate my email", "I don't think I got an email" etc)

Obviously, our Box Office software stores the email address and telephone number of anyone who's booked a ticket, essential to be able to contact, well, anyone who's booked a ticket.

One of the simple little things we added was obfuscation of email addresses and telephone numbers, they appear blurred until hovered over which reveals the details should it be necessary to contact the customer.

This is a really simple CSS trick.

Simple apply the class .pii to any object that contains personal data and then add this to your CSS file;

.pii {
   text-shadow: 0 0 10px #071c68;
   color: transparent;
}

.pii:hover {
   text-shadow: none;
   color: #071c68;
}

Obviously we have role based access control as well, so only those who need it have access to this information in the first place, but that includes anyone who might have to contact a customer about their booking, or investigate why a ticket has not been received (wrong email usually) and this is a simple way to make that information available, but ensure that a casual onlooker can't see it.

Somtimes it's the simplest things that people notice.