Posted on 28th November 2023

Creative user interface design requires critical thinking (and carets!)

The trouble with some of the design articles and books I've been reading lately is they start out by encouraging the reader to think more broadly than their own personal mental models, but quickly jump to specific examples. This can lead to people copying a design pattern or principle without considering the impact of making that choice. To create effective designs we also need to be thinking critically about the concepts and approaches presented by others.

How specific examples can encourage specific ways of thinking

Take for example a highly respected book about design published 7 years ago that I'm going to paraphrase: It starts by getting us to eschew the idea of user interfaces as being composed of pages. This coincides with a big shift in the way people started thinking about and using the web. The web became more interactive and to design for this we are told we need to try a different approach. There are different names for it but for the sake of this article we'll refer to it as the 'componentisation' of the web.

Basically the book encourages us to lean into this trend and think of user interfaces as being composed of components that have a specific purpose or represent a particular modular 'thing' that can be reused elsewhere. These components can be broken down into different elements until you get to a point where they can't be broken down anymore. We are presented with examples of such components that you can't break down further, such as; a label, an input field and a button. I understand the point being made, but I'd argue these are not the most fine grained components that exist. Additionally specifically choosing these components seems to (perhaps inadvertently) box-in a reader's thinking to focusing again on web pages - not helped by the fact that this section is accompanied by mention of specific HTML elements.

What do I mean by this? Well here's a text field:

Pretty basic, right? So what more could be done to break it down... Well for a start the text here is a placeholder which I would argue is a special type of label and a sub-component of the field. But going further and applying the mindset about interaction that we're encouraged to: there is a lot more to a text field than what meets the eye. On some platforms, you can hover over the text field and it will become highlighted. On most platforms you can give focus to the text field and that will present you with a 'caret' indicating text can be input and also showing where the text will be placed. These are examples of 'interactions' of the input component, but the caret is also a sub-component of it. And that can have its own particular design too:

The reason I deliberately have represented the above in an image and not HTML & CSS is that there is currently no browser support for this. While there are 'css hacks' to achieve it, my whole point is if we really are talking about building design systems that are independent of platform and implementation details, we shouldn't be constrained by these things.

The importance of critical thinking in design

The book in question goes on to discuss how all these components can be built up into 'pages' when applied in a concrete implementation. Pages being the very thing we are told not to think about... To be fair the author does go on to explain terminology is less important and it is the underlying principle that is of value. It just seems odd to tell the reader not to think in a certain way, then present a bunch of things that would potentially encourage them to do so.

As an aside: As I mentioned in my analysis of search engine design I do think there is value in recognising that sometimes a page is just a page. When it comes to UIs I've always preferred the more general terms 'screen' or 'view'. But actually a web page can still just represent a static page of information, even in 2023!

The book I refer to is still a valuable read and as I have mentioned this is not the only design resource that follows a similar pattern. I've read another book recently which seemed to jump very quickly from describing the value of user research to the usage of very specific technologies to build wireframes, prototypes and even whole design systems. On the flip side that was also a useful resource overall and sometimes you do need specific examples to relate the concepts described to, otherwise a book or article risks being overly abstract and it can be hard to follow.

I'm sure I might write seemingly contradictory analyses or talk about specifics and skip a lot of details myself from time to time. But what this does emphasise is the value of critical thinking when learning, reading and writing about design. This is particularly important for building truly creative user interfaces.