Abstraction levels in UI design

Graphic designers and programmers are two people who need to work with abstractions a lot, and because they are so used to them, they often forget that dealing with the abstract is very difficult for many people. An abstraction is something that is separated from the concrete, it only outlines or represents the concrete. That’s why many normal people don’t like science fiction, for example; the difference from normal life is too great for them. They are unable to make the link between the strange world in sci-fi and the real world.

To understand the levels of abstraction a user has to deal with, imagine a person who wants to change their profile picture on a social networking website. There are various levels of abstraction that this task can involve, and each level is going to lose a lot of users

Level 0 (No Abstraction): There is text in the middle of the screen saying “Change your profile picture”. This is clear to the user, he just reads it, then clicks it.

1 level of abstraction: The change profile picture comes when you click on the picture. The user knows he wants to do something with the picture, so he figures that ‘behind’ the picture, he can do this. So he clicks on the picture. Once he gets there, he finds the ‘change your profile picture’ text. There was only one abstraction “step” involved here.

2 levels of abstraction: The change profile picture is under “settings”. In this case, the user needs to understand that the picture can be changed in a location that is completely separate from the picture. Then he needs to realise that such changes are usually in a “settings” page. Associating settings and config with changes is learned behaviour, it’s not directly intuitive.

3 levels of abstraction: This is where there is no ‘settings’ link, but there is a standard icon that represents settings. He has seen this icon before, and he knows it usually takes him to the settings panel. We are assuming here he has seen this particular icon previously leading to settings.

4 levels of abstraction: This is where there is a stylized settings icon that represents a spanner, but which he has never seen before. For him to recognize it, he first has to realise that it’s not the particular spanner he has seen on another icon that represented settings, but all spanners in general represent setting.

5 levels of abstraction: Changing the spanner into a cog. This requires him to understand that it’s the entire category of such tools that represent settings.

Small changes like dropping the text label for design reasons can make apps difficult and frustrating for people who do not work daily with computers. For a programmer, it’s easy to understand that a cog is the same thing as a spanner on a piece of software, but for a user, these are two distinct and different things. This tiny step of abstraction for a software person is a huge conceptual gap for the layman. So we have to pay attention to the levels of abstraction that our designs involve.