In a form , telephone number entry is restricted to a dial-pad ( i . e . numbers only )
When users need to enter a telephone number , only display the dial-pad , to limit their input to numbers and not characters . This will reduce their choices and mistakes , and accelerate completion . Considerations include : display the number format that they need to input by default with an input mask - and not by gradual reveal - to assist them ; don ’ t accept characters entered ( mask them out ).
Mrs | Sir | Lord ). Segmented controls display all options by default , enabling the user to compare and quickly select . Be consistent and avoid mixing images and text in a single segmented control tab , or across the set of controls . ( See image 42 )
In a form or basket , user can edit item quantity using a stepper control ( e . g . in basket or checkout )
When users need to increase or decrease the quantity of an item in a basket , use the +/ - stepper control ( which consists of two segmented control tabs ). A stepper enables the user to make small adjustments to a quantity , and is especially relevant for items categories or high priced items that are unlikely to be increased or decreased by more than one or two . Avoid dropdown menus . ( See image 41 )
In a form or basket , user can select from a set of options - that are related but mutually exclusive - using a segmented control ( e . g . for selecting gender or title )
When users need to select from a set of 5-or-fewer options - that are related but mutually exclusive - provide a segmented control , e . g . when selecting their gender ( M | F ) or their title ( Mr | Miss | image 41 image 42
46