Realism and Abstraction in User Interface Design

User inter­face design­ers (and par­tic­u­larly icon design­ers) could learn a lot from com­ics and the the­ory behind them.

Tak­ing his cue from Scott McCloud’s excel­lent Under­stand­ing Com­ics, Lukas Math­is looks at how for optim­um recog­ni­tion and in order to aid under­stand­ing, user inter­face ele­ments must find the sweet spot between uni­ver­sal­ity and real­ism. Like when draw­ing cer­tain com­ics, it’s about find­ing the optim­um comprim­ise between too little detail and too much.

People are con­fused by sym­bols if they have too many or too few details. They will recog­nize UI ele­ments which are some­where in the middle.

The trick is to fig­ure out which details help users identi­fy the UI ele­ment, and which details dis­tract from its inten­ded mean­ing. Some details help users fig­ure out what they’re look­ing at and how they can inter­act with it; oth­er details dis­tract from the idea you’re try­ing to con­vey. They turn your inter­face ele­ment from a concept into a spe­cif­ic thing. Thus, if an inter­face ele­ment is too dis­tinct from its real-life coun­ter­part, it becomes too hard to recog­nize. On the oth­er hand, if it is too real­ist­ic, people are unable to fig­ure out that you’re try­ing to com­mu­nic­ate an idea, and what idea that might be.