Usability – Amount Ordering Control (Part 1)
I have been giving some thoughts to a nagging problem that I have encountered recently. The problem can be described so as follows: “The user should be able to order an item in a certain amount. The item must be selected from a list of available items. The amount can only be selected as a multiple of a base value. A warning message will be displayed when the selected amount exceeds a given warning level. An error message will be displayed when the user selects an amount which is greater than a defined maximum. Thereafter the user can confirm the order by selecting ‘Order'” The items being ordered are small regularly shaped, coloured pieces of plastic. Additionally, there are other constraints such that the user will only see the warning message once “Order” has been selected, the number of items to select will not be greater than 5-6, and that amounts that are greater than the maximum amount will be immediately indicated and the “Order” option be disabled. This is pretty simple to develop from the look of it.
The first design (and possibly the final one as well) could be as follows:
However, there seems to be some usability problems in my opinion. Firstly, the user is only informed of warning levels upon ordering but has immediate feedback when the maximum has been exceeded. Warning levels and maximum levels should be communicated consistently, that means either both immediately or both once “Order” has been selected. A further problem could arise with the selection of the wished item. As the items are coloured and the number of possibilities are small a combo box would suffice. However, users are more likely to select the correct item quicker based on the colour and shape than from an item in a combo box. If the requirement was more complex such that a large number of items could appear then a list or flow-panel can be employed. The major point here is that the user sees as many of the possibly selectable items as space allows. Utilising the size of image and text can lead to more being shown.
Analysing the data involved we see that there are minimum, maximum, increment and warning values associated with the items. Here we could indicate the increment to the user rather than having to guess it by entering values until the error message disappears. The minimum, warning and maximum values can also be displayed. As these values are quasi-static labels would be appropriate.
As above the user should be able to enter the wanted amount. The user should be presented with a visual indication of what can be selected. As only one item can be select at any one time the selection can be based on a set of styled radio buttons which would include a graphic representing the actual item. What is left is only bringing the warning and error levels together in a consistent form. Using colours that we normally associate with traffic lights we can indicate that the entered amount lies in the correct ranges. Additionally, a slider can be used to allow the user move to a wished point or, more importantly, that the entered value falls in a certain area. Here a colour banding above the slider would be an appropriate choice.
The final design looks similar to that shown below:
The next part of this design exercise will focus on how construct such a control for Silverlight and/or WPF.
That’s all folks…