Steppers

Steppers provide users with a visual guide to how far they are into a certain process on the site. These are particularly useful in forms. Below are some examples of the different states of each stepper.

There are five different variations of the stepper used in the site. Four of these are used whilist ‘browsing/selecting/configuring’ and the final one is used in the checkout. These steppers are shown below.

 

Stepper Variation 1 - Postpay item

Download the PSD template
 

Stepper Variation 2 - Combo Cap

Download the PSD template
 

Stepper Variation 3 - Prepaid

Download the PSD template
 

Stepper Variation 4 - Broadband

Download the PSD template
 

Stepper Variation 5 - Checkout

Download the PSD template
 

Stepper Variation 6 - Prepaid Broadband

Download the PSD template
 
Return to top
 

Header Graphics

Below is an example of a common header graphic used to separate sections of a form (eg. Order Form).


Download the PSD template
 
Return to top
 

Expandable Sections

Below is an example of an expandable/collapsable header bar graphic used to separate sections of a form (eg. Order Form Confirmation).

1. Normal / Unexpanded State

2. Expanded State


Download the PSD template
 
Return to top
 

Field Highlighting/Errors

Within such pages as the Order Form, text fields have rollover and active states to help the user undertand why certain details are needed. These states are shown below.

1. Normal State

2. Rollover / Active State (with messaging)

3. Error / Validating Message


 
Return to top
 

Button Styles

There is one style of button used throughout all form fields. There are three colour variations which are explained below.

1. In-form buttons (orange) - used within the main body of pages. These are normally used when needing to validate a field without leaving the current page.

2. Confirmation buttons (green) - normally used at the end of a form and is the button that is used to ‘continue’ or ‘confirm’ the users details.

3. Edit/Modify buttons (grey) - normally used for minor changes to details previously entered. These are greyed out to show that they do not need to be clicked in order to continue the process, but are still available should the user need to edit those details.


Download the PSD template
 
Return to top
 

Progress Bars

In order to confirm someone’s identification users must complete at least 100 points of ID. The progress bar indicates this (example below).


Download the PSD template
 
Return to top
 

Login Keypad

When registered users log in to the 3 Shop a secure keypad is used to enter the Account PIN.


Download the PSD template
 
Return to top
Layout A Layout B Layout C