Wednesday, March 16, 2011

Scalable web interfaces, how to set them up ?

In a recent post by JP there was an interesting discussion about web interfaces, scalability and graceful degradation based on the type of device used.

By default this scalability is automatic and determined by the user agent and other features of the internet browser used to watch the pages.
But automatic recognition could easily choose a 'wrong' target (e.g. it can consider a tablet, that may be able to show a complete interface, as a smartphone just because it runs on Android).

Usually many websites give the possibility to choose between a mobile versus standard interface. Is it enough?

In a comment on the above post, thinking about the possibility of a choice of the user interface scaling level, I asked: is there a standard UI to choose the user interface details within a site?

1. Precise tuning

In addition to the classic choice of viewing mobile / standard, we can think of an interface used for tuning the level of detail of an application.

The target is for sure the videogame.


Well, we do not want this kind of stuff.

Surely there are games that provide a good 'user experience' even when you go to adjust the screen resolution and 3D rendering.


Is it better ?

Pages to separate the arguments, a list of options, no pop-up controls but quite readable choices that can be selected via left / right buttons.

Note the button 'Reset to Defaults', which allows the user to return to a normal situation after having messed up with all the settings.

Here is a very similar example.


The principles are the same. List of options, limited choices, easy to understand.

These interfaces allow a fairly precise tuning of the level of detail of a graphics application. But in some cases it is too much. A power user may find bread for their teeth, but the casual user is not able to make certain choices, and is lost.

Is it there a simpler alternative, although less precise?

2. Scaling the detail level

It is possible to simply leave the user the ability to scale the level of detail.

That is what the 'resource and file explorers' of all modern OSs do. It is just possible to determine the level of 'zoom' which shows the file.


This type of interface is certainly not detailed nor precise, but it is easy to understand.

In our case, the slider should move between 'light' (text-only mobile version) to 'Detailed' (full site).


Defect. A slider based on a single axis dedicated to the 'level of detail' does not allow us to change some other parameters like the type of input (touch, mouse or remote control).

3. Choose from a preset

In order to keep the choice of the device simple, yet quite different, why not think about to choice a 'preset' of settings dedicated to the most common client devices ?

The user can choose between 'laptop', 'smartphone', 'tablet' and 'TV / media center'. He may not only scale the level of graphic detail, but also choose the type of input. If possible, without going into an advanced setup.

The interface can be represented by simple icons. Each icon represents a set of settings dedicated to the specific device, and it might be changed later.


The ideal solution ?

Probably the best solution is a mixture of the above options:
  • Detailed setup (more control, more difficult).
  • Detail slider (less control, much easier).
  • Presets (less control, much easier).
It is not impossible to think of a combination of the 'difficult' interface with one of the two 'easier' solutions.

The real question is: is it worth investing in an advanced detail configuration ? Or the application must always choose automatically ?

What do you think is the best user experience ?

[this post is a lazy translation of the original one, in italian language]