ITC 504 Interface Usability Proof Reading Services

ITC 504 Interface Usability Proof Reading Services

This is the assessment 4 of ITC 504 Interface Usability

Create Final design of Toll Road Application

In this report, I design final prototype for toll road application after evaluation. In this report, I resolve all the issues and completely fulfil all the requirement of the usability principle of the heuristic model.  Now, discuss all the design of toll prototype with all improvements:

Home Screen

Purpose:This screen presents all the useful functionality that is fulfilling requirements of usability principle. With this user registered them in the application by clicking on the sign-up button.  Users whose are already registered in this application, they can log in to the application, and use other functionality easily such as Pay toll, chat, and calculator.

Benefits:The benefit of this screen in the application is that it is designed to secure the application with login and sign up button. With this screen, user is easily log in and signup on this screen.

How it helps user: When user clicks on login button, the login form is open and if the user is registered in this application, then he/ she able to calculate the toll road amount without login.

avigation of home screen and hierarchy of home screen:

Navigation of home page

When the user clicks on Login button; the login form is displayed.

When user clicks on toll amount calculator, the toll amount calculator is displayed.

When the user clicks on sign up button, the sign-up form is displayed successfully.

When user clicks on pay toll functionality, the menu page is displayed.

When user clicks on the chat box, the confirmation page is open. If the user selects yes option, the chat box displayed and if he selectsno then home screen displayed again.

When the user clicks on vertical ellipse vertical menu: The menu is displayed with all option. When user clicks on about us option the about us page is displayed. If the user selects a setting option, the setting page is displayed.

Menu screen of toll road application:

Purpose:The purpose of the screen is to display all the menu options on the screen.  When the user clicks on menu option that page is open. This page is open to login in the application.  The menu screen is completely fulfilled usability principle.

Benefits:The user able to see all the menu option easily.

How it works: After login and sign up the menu screen is displayed.

Hierarchy diagram of menu screen

Navigation in Menu page

When user click on add vehicle option

Working on all functionality when user click on functionality

Login screen

Purpose:The purpose of the login screen is to provide authentication in the application to secure the user information. The unauthorized user cannot access the application without login.

Benefits:User information will be secure with that screen. The screen has two fields: username and password.

How it works: When the user clicks on login button, it is displayed.  To login in the application user enters password and username and click on login button; the menu page is displayed. If the user forgot the password, click on forgot option the reset password screen is displayed.

Hierarchy diagram

Navigation in login form

In this navigation screenshot, all the functionality shows. When user clicks the login button, the menu page displayed. If the user wants to cancel, click on cancel button. After clicking on the cancel button, the home page displayed again. If the user forgot the password, click on forgot option then forgot screen is displayed.

Sign up screen

Purpose:  The signup screen is designed for user registration on the screen. With this screen, the new user can register them in the application before access or log in the application.

Benefits: With this screen, the unknown user cannot access the application. User can store his information in the application.

How it works:When user clicks on sign up option from the home page, the sign-up page is displayed. For sign up for the application, user must fill all the given information and then click on sign up button. After clicking on the sign-up button, the menu page is displayed.

Hierarchy diagram

Apply E-tag screen

Purpose:This screen is designed to fill all the details easily for apply e-tag. It provides a form where user fills toll number, tag, registration number, balance and address & date. This information is saved in the database, now, is not required to fill the form again if the vehicle is same.

Benefits:This page provides information with a form and easily applied for e-tag without any problem or issues.

How it works:When user clicks on apply e-tag feature from the menu page this page is displayed. After filling the entire information user must click on submit button.

Hierarchy diagram

Navigation in Apply e-tag

When user clicks on submit button, the screen asks for confirmation. When user clicks on yes the apply e-tag successfully done and if user select on no button, the apply e-tag screen displayed again.

Cancel E-tag Screen

Purpose: This screen is designed to cancel the e-tag by filling registration number, date and password and then click on cancel button.

Benefits:Without any confusion, the user can cancel E-tag and this functionality fulfils the requirement of user control, help and documentation principle of Heuristic model.

How it works:After fill, all the information clicks on the cancel button, the e-tag going cancelled. If the user did not fill complete information it must show an error.  The error feature follows the usability principles.

Hierarchy diagram

Navigation in cancel e-tag

Chat Screen

Purpose: This screen is designed to create chat to solve the problems and issues. The chat option is designed on all screens that fulfil visibility principle of the heuristic model.

Benefits:The user easily communicates by start chatting.

How it works:To start to chat click on chat option and confirm the chat. After confirmation, the chat is started.

Hierarchy diagram

Navigation in Chat Screen

About US screen

Purpose:this about us screen is designed to tell about toll road application in details. This toll road about us screen contains help option, search option, and menu option.

Benefits:with this page, the user easily understands the application and its working.

How it works:This page is displayed after click on about option from the menu which is available on all screens. After clicking on the ok button the menu screen is open.

Setting Screen

Purpose:The purpose of the setting screen is to provide a setting option to adjust toll road application according to the users. It contains various options such as volume, font style, add vehicle, notification, version, data usage and chat app cache.

Benefits: With this screen, the user gets all setting option easily without any confusion. The setting screen is designed to fulfil usability principles.

How it works:The setting screen is displayed, when user clicks on setting option from the menu list. This screen is accessed to login in the application.

Help Screen

Purpose:The help screen is design designed to fulfil all the requirements of the help and documentation principle and help, user control principle of the Heuristic model.

Benefits:With the help screen, the user can resolve their queries without any extra effort or any confusion.

How it works:The help option is available on all screens of the toll road application. When user clicks on this search from any screen of toll road application, the help and search screen displayed.

Cashback screen

Purpose:This cash back screen is designed for users to take cash back if they did not apply E-tag in the toll road application. With this screen the usability principles (visibility of system status, the match between system and the real world, user control and freedom and consistency and standard principle).

Benefits:With this screen, user easily takes cash back without any confusion and any loss. This screen provides an easy way for cash back.

How it works:First user, login in the application, then click on cash back option from the menu page. After selecting the cash back option, the cash back screen is displayed where the user fills their registration number, data, and toll road and then click on submit button.

Hierarchy diagram

Navigation in Cashback screen

Trip history Screen

Purpose:The trip history screen is designed to provide user trip history and information is sent by email. The purpose of this screen is to complete the requirement of the usability principle.

Benefits:with this user is able to check their trip history.

How it works:when user clicks on trip history option from the menu screen, the trip history page is open. To know, trip history, the user must insert date, registration number and then click on email report option. After clicking on email option, it asks a confirmation and if user confirms then the report is mailed to the user.

Toll Notice screen

Purpose:The toll notice screen is designed to provide toll notice to user by inserting the trip date and registration number.  

Benefits:With this screen, the user easily gets toll notice.

How it works:To know the toll notice user insert their registration number and date. After inserting entire information, the user clicks on the ok button. When the user clicks on the ok button, the home page is an open again.

Hierarchy diagram

Navigation in Toll Notice screen

Add vehicle Page

Purpose:The add vehicle screen is designed to add the user vehicle in the toll road application by filling all given details. With this page help and documentation principle, visibility principle and other principle are completely followed.   

Benefits:With this screen user easily add their vehicle and screen is easily accessed by the user. 

How it works:It is the important functionality of the toll road application. When the user selects the add vehicle option from the menu screen, the add vehicle screen is opened. After adding the vehicle user click on submit button.

Hierarchy diagram

Term and condition screen

Purpose:The main purpose of this screen is provide the term and condition to the user. With this condition, the user easily accesses the application and do not use in wrong way.

Benefits:With this screen, the overall static suggestion principle of heuristic model completely fulfilled and another principle also followed.

How it works

To know term and condition, the user can click on term and condition option form the menu and home page.

Facebook page

Purpose:This application is user-friendly and follows all the principle of the heuristic model. So, if the user wants to add his account to a social site like Facebook then he or she is able to connect the toll road application with Facebook.

Benefits:If the user wants to connect the toll road application, then he got all new updates and information on Facebook without a login the toll road application again and again. With the user control, visibility and match between real-world principles completely followed.

How it works

To connect the toll road application with Facebook click on Facebook option at the time of signup from the signup page.  When user will click on the Facebook option, the Facebook login page is displayed.

Twitter Page

Purpose:This application is user-friendly and follows all the principle of the heuristic model. So, if the user wants to add his account to a social site like Twitter then he or she is able to connect the toll road application with Twitter.

Benefits:If the user wants to connect the toll road application, then he got all new updates and information on Twitter without a login the toll road application again and again. With the user control, visibility and match between real-world principles completely followed.

How it works

To connect the toll road application with Twitter click on Facebook option at the time of signup from the signup page.  When user will click on the Twitter option, the Twitter login page is displayed.

Payment history 

Purpose:The main purpose of the payment history page is to provide all the payment history information to the users. Another purpose is to follow the principle of the Heuristic model.

Benefits:With this screen, the user will know all the details of the payment history via email.

How it works:To know the payment history, the user will insert date and registration number and then click on the email report. After click on the email report, the payment history is mailed to the user.

Hierarchy diagram

Navigation in Payment history 

Interface Components

To complete the visibility of system status principle, we designed back button on all screen, and provide status on all screens of the toll road application. When the user fills any form and clicks on submit button the application asks for confirmation. This application also completes the requirement of the match between system and the real world by designing search option, plain text, text fields, date picker, drop down box and buttons. With a button, the user confusion will be resolved. The user control and freedom principle are fulfilled by design the chat option on every page, back button, and search option. To fulfil the requirement of consistency and standard principle, the application contains breadcrumbs on every page, menu items, search button, and chat option. The error prevention principle is followed by design, the error message when user fill incorrect information and recognition rather than recall principle is followed by design, the application familiar with logos, icons, and functions. To complete the flexibility principle, design the back button to go on the last screen and designed notifications when the user submits the forms. The aesthetic and minimalist design principle is followed by design the background image with appropriate colour, labels, buttons, breadcrumbs, and appropriate font size and colour. Help users recognize, diagnose, and recover from errors, Help, and Documentation and Overall strategic suggestions principles of the heuristic model are followed by design the help and search option on every page, provide help documentation on the form text field, provide font and image with appropriate colour, designed submit button, and error message when user fill incorrect information, back button, etc.

All the feedbacks are completely resolved in this final design of the toll road application by giving an error message and give proper colour background image. 

Team individual participation to make decision for complete the Toll Road Application design