Seamless interfaces and emoji injection

🔒

One recent trend in UI design is to build seamless interfaces. The underlying idea is pretty reasonable, get rid of useless clutter to get cleaner, more readable interfaces. This typically means removing a lot of lines, boxes, shadows and other highlights. In short, cut out the structure, leave the content.

Like any good idea, taken to extremes, the result is horrible, instead of a UI that is clear if a bit clunky, you end up with the UI equivalent of modern art, vaguely elegant, but very difficult to understand. The other problem is that by removing the boundaries between pieces of information, you remove the context they are valid in, which opens up a lot of way to confuse the users.

Name Secure
Good Guy yes
Bad Guy no

Consider this table to display that trust status of users in a system. The data is presented in a very structured way, nearly a database dump, really, with a little bit of decoration.

Good Guy 🔒
Bad Guy

The same information made seamless would look like this, boxes and column headers removed, the information distilled to simple icon (here we can even use an emoji character). The interface is much more compact, and easier to localise to boot, better in each and every way.

Good Guy 🔒
Bad Guy 🔒

Problems arise if the users can change their names: bad guy can now try to put out of context information into his name, for instance here he can inject an emoji character into his name. Bad guy’s lock icon is part of his name (Unicode character x1F512), because there are no boundaries, no context it is difficult to figure out which information came from where.

Name Secure
Good Guy yes
Bad Guy 🔒 no

Such an attack is less efficient in an old style UI, because the context shows us what information is what explicitly, instead of making that information implicit. We end up with the usual tradeoff: implicit informations is more natural, more fluid, but also more error prone and more difficult to check.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.