What UI really is (and how UX confuses matters)

People mix the terms UI and UX together. UX is tricky because it doesn’t refer to any one thing. Interface design, visual styling, code performance, uptime, and feature set all contribute to the user’s “experience.” Books on UX further complicate matters by including research methods and development methodologies. All of this makes the field confusing for people who want to understand the fundamentals.

That’s why I avoid teaching the term ’UX.’ It means too many things to too many different people. Instead I focus on individual skills. Once you understand the individual skills, you can assemble them into a composite system without blurring them together. For software design, the core skill among all user-facing concerns is user interface design.

You can define UI very precisely. An interface is a place where two things meet: the human and the computer. The computer has functions it can perform. The human needs inputs and outputs to take advantage of those functions. The interface is the arrangement of inputs and outputs that enable people to apply the computer’s functions to create outcomes they want.

Here’s a minimal example. A computer can calculate the square root of any number, like 167391. I can’t do that in my head or even on paper. In order to apply the computer’s square root function, I need inputs and outputs. The input could be an alert box with a text field and submit button. The output could be another alert box that displays the answer with a text label.

That interface offers one function. Things get more interesting when you offer multiple functions. Take an ATM machine as an example. First imagine an ATM that only dispenses cash and doesn’t show balances, take deposits or do anything else. The design task is just like the square root calculator — input and output. Now imagine you want to upgrade that ATM to offer both withdrawals and deposits. The new interface needs to provide a way to choose which of the two functions you want. That’s what “navigation” is.

Those are the ingredients: functions, inputs, outputs, and navigation. You arrange the inputs and outputs on screens and connect them with navigation. The interface works when people can perform the function they need — when they get the square root answer, the $60 cash or the bump in their bank account.

This description is tangible. You can actually point to the inputs, outputs, functions, and wiring between them and say “this is the interface.” Then you can evaluate the experience of using that interface and identify activities you could perform to improve it.

You could apply visual styling to make it more aesthetically pleasing. You could research your users to find out how adequately the interface fits their needs and habits. You can do so many things.

But for software makers, I recommend starting with a strong understanding of UI by itself. The fundamentals can take you very far.