UI vs UX

The distinction between User Interface and User Experience design is something which changes with time to a certain degree, and there is also a degree of overlap between the two. A rough explanation of the difference is that UI design is concerned with what the user interface looks like, whereas UX design is concerned with how the user interacts with the user interface.

An analogy used by at least one explanation I could find on the web describes it in terms of a house. User Experience design is concerned with where the doors and windows are, where the kitchen goes, and perhaps whether one has a gas cooker in the kitchen or not. User Interface design is concerned with the interior decorating, issues such as what colour to paint the walls and whether the sofa should be red with a fabric cover, or black leather.

I shall give two examples where the user experience is largely the same, yet the user interface appearance is different.

Example 1: Vim

Vim is a text editor with a long pedigree. It began as an attempt to write a better version of the vi text editor, which was originally created for Unix by Bill Joy. It is a very idiosyncratic editor, largely designed around editing text and program code, with an aim of minimising keystrokes. It largely trades this off against an initially unintuitive interface and a significant learning curve. That said to those who have learned it, it retains a significant following, and many programming environments such as Visual Studio Code (and indeed Visual Studio) have extensions which implement a similar keystroke-driven editing experience as Vim. Now I shall contrast three examples: the command line vim, which may be running under Linux, or under Windows in an environment such as Cygwin; the gvim version for graphical user interfaces, and Visual Studio Code with the vim extension installed and enabled.

This is what these different interfaces look like:

I shall begin with some example editing tasks (which are artificial in nature, purely for the sake of this example).

Find all lines containing the word world, and on those lines, and only those lines, replace all instances of the word save by the words take over. To do this, one presses escape to ensure the editor is in command mode, then types :g/world/s/save/take over/g

. The : indicates a command, the first g specifies that we want to select lines matching the following regular expression, and in that case the expression is just the word world, and on those lines selected, the s specifies that we want to search and replace, the word save is the pattern to search for, and the text take over is what to replace matched text by, finally the final g means to replace all instances on the matched lines, otherwise the command will replace only the first instance.

This is complicated and unintuitive, but I would challenge you to find another editor (without a vim mode) which can do this search and replace task with anything near the efficiency of keystrokes that this permits.

Now if one is using either the command line vim, or the graphical gvim, or the vim mode in VS Code, the command above does exactly the same thing. (What is nice with the VS Code extension is that one can switch in and out of vim mode at will, getting the best of both worlds.) So far as the effect upon the text being edited, the result of this :g/world/s/save/take over/g command is the same. But the interfaces look significantly different, and in the case of the command line vim, the user could be located in the UK while the editor is running (via SSH) on a server in Germany. Thus the user interface looks different, but the user experience is largely the same.

Example 2: Minesweeper

Minesweeper is a game that was introduced with Windows 3.1. It is a simple game in which one begins with a covered grid and where one needs to deduce which squares contain mines, and to reveal all other squares. (A nice feature is that it is impossible for a player to hit a mine on their first attempt.)

The look and feel of this game was updated with Windows 7, and there are many other implementations around. They look different at an aesthetic level, but the logic of the game is the same, and the user experience of playing it is the same. It is like playing chess with a different-looking set of chess pieces. Below are screenshots of the original version, of the version included with later versions of Windows, and a simple browser based implementation I wrote a while back.

Minesweeper on Windows 3.1

Minesweeper on Windows 7

A simple Javascript/HTML implementation of Minesweeper (See here for the code.)