On completion of this lesson the student will understand that consistency of design enhances the learnability of a system, thus leading to a more pleasant experience, which in turn enhances usability
Consistency involves different parts of the UI having the same look and feel. This is achieved by applying the same design standard to the various parts of the interface. This ensures that users will understand the various elements of the design and know where to look for features (Nielsen J. , 1999) (Tidwell, 2010, p. 78).
Consistency also enhances learnability since learning one part of the system minimises the problems of learning the rest (Budiu, 2016). This contributes to how pleasant the system is to use.
In this lesson we will look at how applying the same design standard to the forms for editing and deleting records enhances the learnability of those forms.
Regarding consistency, at first glance Fig 1 looks almost identical to the form we used in the page 'Form Layout'. The colour schemes are exactly the same as well as the top to bottom information scent. The command buttons are to be found in the same position and perform almost the same functions as their equivalents in 'Form Layout'. Also, the shortcut keys for the control labels and the command buttons are the same. This visual similarity between the two forms, as well as the identical shortcut keys is what the users would expect, having previously worked on the previous form (Budiu, 2016).
The differences between them are due to the different functionality of the two. In this form we will be editing existing records instead of adding new ones.
To edit a record, we must first supply the Employee Number. This is entered into the search box at the top. The magnifying glass icon to the right is the general standard symbol for ‘Find’ in both desktop and web applications (Budiu, 2016), and clicking on it should activate the search for the appropriate employee.
We also notice that there are fewer data controls on the form, mainly that Commencement date and IRD number are missing. These two data items should not change during the employee’s term of employment, and therefore including them would either be a distraction for the user, or they may even be accidentally modified. For this reason, they are excluded from the form. This is consistent with the policy of giving users only the exact information that they need (Developers, 2013).
Once we modify the required data, we click on the button Save Record. If the data was saved correctly, we get the message box shown in Fig 6 2. Here the user is given quick and detailed information about the changes to the system (Harley, 2018), (Johnson J. , 2008, p. 206)
This form again shows consistency with its predecessors due to its colour scheme, its top-to-bottom information scent and the position of its command buttons. It is the sparsest of all of our forms. Only two of the controls can be interacted with, while the other two are there for reference purposes.
Visually it is the form that most clearly shows the top-to-bottom information scent. The Employee Number textbox at the top clearly draws the user’s attention, and once a number is entered and searched for the current data appears in the Finishing Date textbox. The Name and IRD Number in between, are clearly disabled and simply provide more detailed on the employee so that we can be more certain that we are removing the correct record.
Multiple feedback is provided for the user. Before committing the deletion of the record, the user is given a chance to cancel the deletion as shown in Fig 4.
Also, once the deletion has been confirmed, the user is given feedback that the deletion has actually occurred.
Main Menu - Consistency throughout the entire system
In our examples in this course we concentrated exclusively on an organisations's employees. Naturally any organisation, as well as employees, would also have customers, ordering, stock control and reports. The heuristics that we have applied to the Employees data processing should also be applied to the other aspects of the organisation.
The main menu of the system shown above has the same colour scheme as the forms we have looked at so far, thus providing the users with a familiar environment throughout the entire system.
Consistency in design standards across multiple forms means that similar features in each form are to be found in exactly the same place, such as the command buttons and the overall colour scheme in our example forms. Similar features in similar positions allow users to become familiar with the system more quickly thus enhancing learnability – in turn enhancing usability.
What is one key advantage of consistency in user interface design?
Increases creative potential
Reduces system performance
Enhances learnability
Complicates navigation
Which principle states that visual similarity across forms makes the system easier to learn?
Visibility of system status
Consistency and standards
User control and freedom
Error prevention
Why are certain fields, such as IRD numbers, omitted from the editing form?
To simplify the form layout
To save on storage space
To ensure user engagement
To prevent unnecessary modifications
What standard symbol represents “Find” in desktop and web applications?
Search bar
Magnifying glass icon
Dropdown menu
Arrow icon
Which heuristic ensures users know what features to expect in consistent designs?
Simplicity heuristic
Familiarity heuristic
Consistency heuristic
Efficiency heuristic
What message does the user see after successfully saving an edited record?
A progress bar
A confirmation pop-up
A notification banner
An error message
Why are disabled fields, such as Name and IRD Number, included in the deletion form?
To make the form visually appealing
To confirm the correct record is being deleted
To allow accidental modifications
To test user attentiveness
What feature gives users a chance to cancel an action before completing it?
Command buttons
Feedback loop
Confirmation dialog box
Shortcut keys
How is top-to-bottom information flow maintained in the forms?
By displaying icons at the bottom
By arranging elements in a vertical sequence
By using a horizontal layout
By changing colors for each element
What is emphasized in the system’s main menu to ensure familiarity?
Different color schemes for each page
Consistent color scheme and layout
Use of animation transitions
A unique style for each section
Fill in the blanks
Consistency in design standards across multiple forms means that similar features in each form are to be found in exactly the same place, such as the command buttons and the overall ____________ in our example forms.
Similar features in similar positions allow users to become familiar with the system more quickly thus enhancing ____________ – in turn enhancing usability.
Regarding consistency, at first glance Fig 1 looks almost identical to the form we used in the page 'Form Layout'. The colour schemes are exactly the same as well as the top to bottom information ____________. The command buttons are to be found in the same position and perform almost the same functions as their equivalents in 'Form Layout'. Also, the shortcut keys for the control labels and the command buttons are the same. This visual similarity between the two forms, as well as the identical shortcut keys is what the users would expect, having previously worked on the previous form.
Once we modify the required data, we click on the button Save Record. If the data was saved correctly, we get the message box shown in Fig 6 2. Here the user is given quick and detailed information about the changes to the system.
Also, once the deletion has been confirmed, the user is given feedback that the deletion has actually occurred.
The main menu of the system shown above has the same colour scheme as the forms we have looked at so far, thus providing the users with a ____________ environment throughout the entire system.
Multiple feedback is provided for the user. Before committing the deletion of the record, the user is given a chance to ____________ the deletion as shown in Fig 4.
Visually it is the form that most clearly shows the top-to-bottom information scent. The Employee Number textbox at the top clearly draws the user’s attention, and once a number is entered and searched for the current data appears in the Finishing Date textbox. The Name and IRD Number in between are clearly ____________ and simply provide more detailed on the employee so that we can be more certain that we are removing the correct record.