// Mote Prime - Article

Mote Prime

A personal website

















Mote Prime


Other Sites

OfQuack Podcasts


Little Book of Clam


Stop the Saatchi Bill

free debate


Mote Prime > Technology



Principles of UI Design

Before we start on the design of Skype, let us review what the job of a user interface ("UI") actually is.

Fundamentally, it's there to assist the user in getting the job done. “The job” varies from program to program. For a spreadsheet, it will be entering numerical data, calculating, and presenting the results. For a word processor, it will be preparing documents. For a web browser, navigating to websites and displaying their contents.


There are a number of common elements for all of these, and the operating system provides a number of standard "widgets" or "controls" to take care of these. Buttons, scroll bars, editable number and text fields are just a few.

Some of the behaviors of these controls are actually quite subtle. Take the simple Windows vertical scrollbar, for example. This allows you to drag the scroll indicator up and down in order to move the visible content – most people know this so well they now use it intuitively without even thinking. But even this is deceptive. Once clicked, the scroll bar “captures” the mouse, so you don't have to guide your mouse cursor exactly up and down, which would be tricky. It has a surprising amount of leeway to the left and right, and off the top and bottom too. Also, the scroll indicator resizes to show how much of your document is visible. And clicking above or below the indicator scrolls up or down by one page. The control responds to the global system preferences for color, width, font, highlighting, mouse double-click time, and so on.

When you use a system control, you don't just get a look, you get a complete suite of expected behavior. People get so used to all this, that they expect it unconsciously to be available, and if it isn't, they are often at a loss to explain exactly what is wrong.

This is why UI principles very heavily stress uniformity. For some very common operations, this crosses platform boundaries, but mostly it is per-platform. Apple has different principles to Microsoft, and Windows 7 has a different user experience to Android phones. That's fine – the act of switching platforms changes our expectations. But on a single platform, we switch applications much more frequently.

This is why all the programs on a platform should behave the same way when faced with the same problem. Have you ever noticed how Ctrl+F is the "search" keyboard shortcut in pretty much every program? If you use it a lot, you have probably internalized it to the point where you just think "search" and hit Ctrl+F without any conscious thought. And then you try to use it in Microsoft Outlook, where it is instead mapped to the "forward an email" action, throwing up a jarring dialog and completely derailing your train of thought.

One oft-cited guide to UI design is Schneiderman's Eight Golden Rules which enshrines consistency as number one:

 Consistent sequences of actions should be required in similar situations;
 and consistent color, layout, capitalization, fonts, and so on should be
 employed throughout. Exceptions, such as required confirmation of the
 delete command or no echoing of passwords, should be comprehensible
 and limited in number.

Note again that this applies to not just the look of the interface, but its operation as well. Jakob Nielsen puts it this way at Ten Usability Heuristics:

 actions mean the same thing. Follow platform conventions.

It is difficult to argue against this, especially "follow platform conventions". Most of the time, a user isn't going to be using any one program, so he will feel most comfortable if the program he is using now works the same way as the six other programs he has been using today. He will make fewer unforced errors, and he will be able to hand off the conceptual model of the way the software works to the subconscious, automatic part of his mind, leaving his conscious part to concentrate on the job in hand.

There are, of course, truly unique parts about every program which do require conscious thought. But common tasks like entering text or dragging a scroll bar should always be handled in a standard manner.


Different people have different perceptual needs. Some of these are physical; a color-blind person will falter if a UI presents status information using only color as a cue. A person with impaired motor control may require larger icons or slower double-click times. Sometimes these needs are not physically constrained, but are simply a consequence of the way something is being used.

There is, in many cases, no one right answer. Different needs may, in fact, be diametrically opposed, and a solution for one is a serious impairment for another. Therefore there must be some configurability in order to meet the diverse needs of the user. Here's Shneiderman again:

 Recognize the needs of diverse users and design for plasticity, 
 facilitating transformation of content. Novice to expert differences,
 age ranges, disabilities, and technological diversity each enrich
 the spectrum of requirements that guides design. Adding features
 for novices, such as explanations, and features for experts, such
 as shortcuts and faster pacing, can enrich the interface design
 and improve perceived system quality.

This also meets a need for self-determination. The user needs to feel in control of the machine, not the other way around. Shneiderman refers to this as the "internal locus of control":

 Experienced users strongly desire the sense that they are in charge
 of the interface and that the interface responds to their actions.
 They don’t want surprises or changes in familiar behavior, and
 they are annoyed by tedious data-entry sequences, difficulty in
 obtaining necessary information, and inability to produce their
 desired result.

Bruce Tognazzi, in First Principles of User Interaction Design puts it more succinctly:

 The computer, interface, and task environment all "belong" to
 the user, but user-autonomy doesn’t mean we abandon rules.


It's a good idea to have commonly used functions visible and easily accessible. Nielsen says:

 of the dialogue to another.

However, this is in conflict with another design goal – simplicity:

 Dialogues should not contain information which is irrelevant or rarely needed.
 of information and diminishes their relative visibility.

(In this contex, "dialog" should be read as a conversation between the user and the computer, not just a dialog box.)

So the key thing here is to use the screen real-estate wisely, put commonly-used items in plain view, and relegate rarely-used items to a deeper level of the interface. If this is done, then the relegated items must still be discoverable in the places where the user might reasonably expect to find them.

The Kicker

When you are dealing with a long-lived, successful program, the most important people to cater for are the users. For me, Tognazzi gets this sound bite exactly right:

 It doesn’t matter how fine a logical argument you can put together for how
 something should work. 
 If users expect it to work a different way, you will be facing an uphill and
 often unwinnable battle to change those expectations. 
 If your way offers no clear advantage, go with what your users expect.

I'll repeat that: If your way offers no clear advantage, go with what your users expect.

I couldn't have said it better myself. With that in mind, let's at last take a look at Skype 7.0...

The New Skype UI

On the Windows desktop, the design aesthetic of the Skype UI changed radically between 6.21 and 6.22. The earlier versions tended towards functional, leaner interfaces, using standard controls and compact presentation styles.

Version 6.22 acted as an early preview of the UI for 7.0, and was widely greeted with negative feedback. There was, of course, a certain amount of complaint just due to features being moved around, but underlying this was the observation that there were some serious deficiencies here. A few of these were addressed for 7.0, but the basic problem remains.

Skype 7.0 attempts to unify the user interface experience across multiple devices, and as such is setting itself up for failure. The difference in interaction style between different platforms is huge, and not just because of the physical limitations of each. We do very different work on a desktop computer to a phone.

The UI that has been presented appears heavily influenced by a touch-screen design. It follows a number of Windows 8 UI guidelines, and does so even on Windows 7. This fundamentally breaks the principle of consistency with the platform, and causes problems from the start.


When installed in its default configuration, the Skype home page is very much larger than the previous versions, but paradoxically displays less useful information.

The home page is large and conveys, as far as I can tell, no useful information at all. It is simply an advertisement for Skype – the product that you are using right now. Mercifully, this is one of the few pieces of the UI that can be turned off.

The contact list is headed by your own name in a large font, your own avatar in a large size, and a number of infrequently-used display options grouped vertically. The contacts are displayed double-spaced, reducing the number displayed on screen to around half that of the previous version. Widening the window does not display multiple columns of contacts. This is shown in the left panel of the following image:

Compact list view comparisons

Click here for full size version

While the double-spacing makes some sense on a touch screen, where pointing accuracy is low, on a desktop computer it is often more useful to display more contacts. My suggestion is shown in the centre panel, which restores the contact list to its previous density, and makes additional space by relegating infrequently-used options to a separate tab (right).

The amount of information displayed for each contact has also been reduced. Previous versions would show the nationality and time zone for each – this is no longer available except by clicking on each contact in turn.

All of this violates the principle of simplicity. Seldom-used operations are given undue prominence, and useful status information is hidden from the user.

In the chat dialog, colored bubbles surround each message, with messages form the same user appearing in the same bubble, unless they occur in separate minutes. This rather arbitrary division makes conversations rather unnaturally stilted, and the size of the bubbles wastes space both horizontally and vertically.

For chatting with a friend about where to go out this evening, this is not especially nasty, and may be advantageous in that setting. However, there is a large subset of the Skype user base that uses it for more serious work.

This default layout is shown on the left in this image:

Compact chat view comparisons

Click here for full size version

The spacing makes exchange of large amounts of information difficult, as the number of lines of text on screen has been reduced by about half. The so-called compact mode option (middle panel) redresses the balance a little in that it reduces the number of pixels between bubbles, and the user gains about 20% of the wasted space back again, still leaving him a lot worse off than before.

Merely respacing the items would allow for a truly compact mode (right panel) which would reclaim all the wasted space shown in red.


The color of the chat bubbles cannot be changed, and the choice of blue is unfortunate as it is a naturally dark color and reduces the contrast between text and background. Also, a good proportion of the population suffer from yellowing of the lens as they get older, which reduces the contrast further.

It's not just the bubbles, either. Much of the UI is drawn using custom controls, and these do not respond to changes in the system colors, fonts, DPI settings, or other accessibility features. The choice of different shades of blue makes it especially difficult to read for a large section of the population.

Standard features such as the use of the TAB key to switch between controls have been relegated to an “accessibility” option, and the keyboard focus is not set to the text input field when using Alt+TAB to switch between windows.


It is sometimes useful for people to exchange information with additional emphasis supplied by font effects such as italic, bold or _underline_. Windows 7 has a widget which does all this called the rich text control and it uses the same keyboard shortcuts that everyone knows – Ctrl+B for bold, Ctrl+I for italic and Ctrl+U for underline.

However, Skype instead uses a plain text control and relies on a non-standard form of Wiki-like formatting. This uses *stars* for bold and _underscores_ for italic. Again, this is fine on a smartphone where there is no Ctrl key, but breaks the cognitive model on the desktop.

Worse, it actually gets in the way of the primary purpose of the program - transmission of information. The meaning of *stars* is not standardised and is domain specific. Games players use them to indicate actions, software developers use them to indicate multiplication.

What is worse about this is that there actually is an obscure, buried option to turn this off, but it is entirely undiscoverable as it is not in the settings dialog and does not persist across sessions.

Navigation by Accident

Some features are hidden if the window is below a certain size. The chat pane switches between two modes, and the dialling keypad is hidden unless the call window is made very wide. These sizes appear to be hard-coded to specific values which are independent of font size, DPI, screen resolution or user preference.

Worse, they are unlikely to be discovered except by accident because they violate the principle of consistency. No other programs do this. If there's a major UI design element to be shown or hidden, this is usually in the view menu. Users looking there for an option and not finding it will believe that it does not exist.

Images and Files

In the old Skype, you could send a file to someone, they would get a notification and they could choose to download it. Now, all files pushed to you are automatically saved whether you want them or not.

In addition, image files (identified by their extensions, of course) are now handled differently. A thumbnail appears inline in the chat and the user can then right-click to save the original.

Images are also sent differently. Ordinary files are transferred perr-to-peer, whereas images go via a cloud server at Microsoft. This leads to inconsistencies in operation between the two and worries about security. There is no way for the user to choose how he wants the files sent, nor how to handle them, except by the clumsy mechanism of renaming the extension of an image file to something unrecognised – flufflybunnies.not_a_jpg – then transferring them and renaming them back at the receiver.

Missing Features

Some previous features have gone, breaking the user's expectations. This is even more puzzling as they are clearly technically feasible and have at some point in the past been deemed desirable enough to be implemented. Some of these include:

This last one is particularly annoying since it's easy to see a number of situations where it would be useful. Perhaps the people in the chat are from different countries and want to name their groups in their own language. Perhaps the boss wants to chat with his team, but the members of the team want a chat with the boss. It is telling that these situations do not often occur in a casual use case. Perhaps the UI designers have been focussing solely on that and not on the much wider range of uses that Skype is used for in business and around the world.

Bubble Breakage

The way that bubbles are handled produces problems. Here is a picture:

Grouping messages according to gestalt principles

Click here for full size version

This shows a sequence of seven instant messages (labelled A-G) from the same person, arranged in a column, with time going down the page.

If we advanced time linearly, then we would get the "linear time" view at the left. Here, we clearly and immediately perceive groups of related messages by their proximity. This is one of the gestalt indicators of grouping.

Of course, time-linear view is not very practical as messages would scroll off the screen during long gaps in the conversation. The 6.21 UI just presents each chat message in the same way with the same amount of space between, labelled with a time stamp. This is the second column. Here, we lose the gestalt grouping cues, so we have to infer continuity from context in the messages themselves. Not too bad, as we're used to it.

Skype 7 groups messages into bubbles, and breaks the bubbles when we change user, or when the minute rolls over. This is shown in the third column, labelled "Per-minute grouping". I recall that we actually only get timestamps per minute, so we're closer to the "Per-minute, reduced" layout. This re-introduces obvious groups of messages, so it's better than the uniform event model, right?


It's true that there are obvious groups, but they are the wrong groups. It has degraded the experience even from the dumb-as-rocks uniform event view. We still have to infer the original groups from the message content, but we also have to work against the false grouping to do so. And with the per-minute reduced-timestamp version, we don't even have the timestamps to help us.

It's like reading a series of sentences. That have been broken in the wrong place it's possible to reconstruct them. From context, of course, but it's hard your internalized, subconscious grammar. Rules are fighting you all the time.

If we instead introduce the option to separate the groups at long (user-settable) pauses, we can get a much better approximation of the original timeline, as in the "Pause-based grouping" column. In this example, breaking at gaps of 30 seconds or more makes the groups obvious, and restores the time-based grouping in the original timeline correctly.

Finally, if we want to add indicators for minute separations, we should do so in proximity to the timestamps themselves, which is shown in the final column, "Pause based, minute sep(arators)". Here, we introduce a minute separator in the timestamp column that is independent of the message grouping.

I could also have shown a reduced version of this which only displays per-minute timestamps, but I ran out of room. Since that's a reduction of information it should of course be an option.

Options, Options, Options

Many of these UI features are simple to implement. I accept that a large number of people use the 7.0 interface and either like it, or at least accept its flaws without complaint. But a vocal minority do not, as these new features actively impede what they are trying to do.

Simply allowing us to control these with options, without changing the default behavior, would be simple and quick to implement. Skype could then collect information about how many users select these options and perhaps even change the defaults in future too.

As an exercise, I looked at the chat window and tried to determine all the parameters that define its layout:

Skype layout parameters

Click here for full size version

All of these measurements are in pixels.

With the exception of the menu bar height, they are all under Skype's control and are simply parameters passed into the rendering engine. Skype has already demonstrated that it will, when pressed, allow configuration of these with the introduction of "compact mode" (which reduces the same person bubble spacing to 2 pixels, and the different person bubble spacing to 5 pixels).

If you leave the layout of the title bar as it is, then the "truly compact" mode suggested above simply assigns different values to these parameters:

All of these parameters will likely be encapsulated somewhere in the code in a "rendering parameters" object (and if not, they should be). Choosing between the two modes should therefore be as simple as loading different values into the object and invalidating the window.

One could perform the same exercise for the contact list view too, of course.

This kind of configurability would require no code changes to the layout engine, and would be portable to future versions, making it very cheap to implement.


Skype claims that it would be expensive to maintain different views. If they are just the same code with different parameter tweaks, this is an order of magnitude cheaper and easier than custome code.

And even in that case, it can't be too expensive: take a look at Windows Explorer sometime. This is a cheap, simple piece of software included in every version of Windows since version 3.1 (at least).

It offers multiple views on multiple different kinds of data, allows plugins to extend its functionality, conforms (mostly) to platform UI guidelines, and has a large number of options so that people can see what they want to see. These are even configurable on a folder-by-folder basis.

If something as basic as a bundled file manager application can maintain configurability and functionality over many versions, and get it right, why not Skype? The basic requirements are similarly stable - let people call and chat with each other.

The Bottom Line

Skype is already losing users as a result of these changes. And the people who are most annoyed are the ones who shout the loudest and point out the flaws to others. Network effects will tend to pull neutral users out of the Skype community too.


I have yet to see a single example of a UI change in Skype 7.0 that offers a clear advantage. And for Windows 7 users, they are very much not what we expect.