UX Considerations: Form, Payment & Registration Processes Designs
A hotel booking app design
User Experience Design (UXD or UX) is the process of enhancing user satisfaction by improving the usability, usefulness, and desirability. This article will explain UX considerations when designing a user centric hotel booking app.
Form design
Affordance is taken into condiseration when design the booking form. An action-based title, “Find your hotel” is shown on the first screen.
Users are given two options when selecting the location: (1) they can insert the location text using a keyboard or (2) they can click on the “search” button to search for the location in a new screen. The new search location screen has a “<” button to allow reversal of action (i.e. to go back to the main screen if users accidentally press the “search” button.
“Number of Guests” is a numeric field. When user press on the input field, the mobile OS native numeric keyboard will be shown.
When users press the search button, they will be redirected to a list of hotels available. This screen will be skipped in this article as the screen is a product listing page.
After they select the desirable hotel, they will be prompted to provide the arrival and departure dates. They can provide the information by pressing on the dates on a calendar. The unavailable dates will be greyed out on the calendar.
A progress bar with percentage is used here to keep users informed of the status of registration process.
Two of the basic details fields, ‘Title’ and ‘Language’ provide dropdown lists as they have limited options. When users try to insert their names by pressing the field, a keyboard will be shown and the form will be moved up to display the entire form on the screen.
‘Phone number’, ‘Email address’ and ‘Address’ are grouped as contact details and displayed on a seperate screen. When users are inserting their email addresses, all uppercase inputs will be converted to lowercase in real time.
Payment Process Design
Continuing from the booking form, users are now redirected to a payment screen. The process bar will still be shown in this process.
Users are given a list of different payment methods. Utilising the power of familiarity, the logos associated with the payment methods are shown below the names.
Inline validation is provided when users inserting the payment details. Users will also be informed of the type of the card after they insert the card number.
Depending on the status of the payment, ‘Success payment’ or ‘Fail payment’ screens will slide up. The payment amount is shown on both screens. The ‘Success payment’ screen has a count down timer to automatically close the screen after 5 seconds. ‘Close this page’ button is also provided for users who want to close the page immediately. ‘Try again’ and ‘Cancel payment’ buttons are provided on the ‘Fail payment’ screen.
Registration Process Design
The ‘Sign Up’ and ‘Log In’ buttons are located at the top of the form. This gives the users a clear understanding of the context of the form and helps users to avoid taking the wrong action. Users can also easily switch to another tab without spending too much effort in finding the buttons.
The entire registration process are divided into 2 steps: ‘Sign Up’ and ‘Upload a photo’. It gives users a visual cue as to what step number they’re on and how many more there are to go.
Similar to the payment process design, the fields in the registration form also have inline validation to provide real-time feedback to user. When an existing username is inserted into the field, an error message, “Username exists. Choose a different username. e.g. xxxxx, xxxx or xxxxx”, will be shown below the username field. Suggestions are provided to the users to reduce cognitive load. Suggestions to insert the password is given when the password inserted doesn't meet the secruity requirements. In addition, an error message will be shown if the “password” and “confirm password” differ.
Password unmasking feature is provided in the design. When users press the “open eye” button, the password will be shown and the “open eye” button will be replaced by “close eye” button.
An alternative option to register is also provided. The registration process can be simplified if the user choose to sign up using an existing Google account. Users are also informed that they will automatically agree to the app’s terms when they complete the registration process.
“Less is more”. Uploading a profile photo is made optional as it isn’t a critical infomation during registration. Users can press “Skip” button to navigate to the next step.
The design meets Shneiderman’s Principles: strive for consistency, cater to universal usability, offer informative feedback, design dialogs to yield closure, prevent errors, permit easy reversal of actions, keep users in control and reduce short-term memory load.
