Tag Archives: scott-mccloud

Realism and Abstraction in User Interface Design

User interface designers (and particularly icon designers) could learn a lot from comics and the theory behind them.

Taking his cue from Scott McCloud’s excellent Understanding Comics, Lukas Mathis looks at how for optimum recognition and in order to aid understanding, user interface elements must find the sweet spot between universality and realism. Like when drawing certain comics, it’s about finding the optimum comprimise between too little detail and too much.

People are confused by symbols if they have too many or too few details. They will recognize UI elements which are somewhere in the middle.

The trick is to figure out which details help users identify the UI element, and which details distract from its intended meaning. Some details help users figure out what they’re looking at and how they can interact with it; other details distract from the idea you’re trying to convey. They turn your interface element from a concept into a specific thing. Thus, if an interface element is too distinct from its real-life counterpart, it becomes too hard to recognize. On the other hand, if it is too realistic, people are unable to figure out that you’re trying to communicate an idea, and what idea that might be.