By Amit Morade
Introduction:
The Passport
Seva Website is an important platform for passport applications across
India. Almost every citizen of India would at least once visit the website.
Having such a huge user base, improving the user experience (UX) of the
Passport Seva website is crucial for enhancing efficiency and user
satisfaction. I have used Nielsen's 10
Heuristics to gain valuable insights into the usability issues of Passport
Seva website. For each issue identified, I have tried to provide a solution
that can effectively address these problems, provide severity rating to detect
problems that need more attention and that needed to be fixed immediately, and
significantly enhance the website's usability.
The
problems are categorized into different severity levels as low, medium, and
high.
The green boxes in figures indicate proposed solutions and red boxes or red arrows highlight the problems.
About
Passport Seva Website:
Passport
Seva enables simple, efficient, and transparent processes for delivery of
passport and related services in India. This project creates a countrywide
networked environment for Government staff and integrates with the State Police
for physical verification of applicant's credentials and with India Post for
delivery of passports.
What is
Heuristic Evaluation:
It is a method
used for identifying problems in
user interfaces, and to measure the usability of user interface designs. The
evaluation is performed based on a certain set of guidelines that are aimed to
make systems easy to use. I have used Nielsen’s 10
usability heuristics, a set of guidelines considering human behavior, psychology,
error handling capability to assess usability of Indian
Passport Seva Website.
 |
| Fig. 1: Nielsen 10 Usability Heuristics |
Passport Seva website usability issues:
Problem – Password policy is not directly visible to the user and user cannot view entered password.
 |
| Fig. 2: Password policy not visible, entered password cannot be viewed. |
Issue: -
The website
uses some rules to setup the password. These rules are not displayed directly on
the page, but the user must click a link that opens a dialog box displaying the
password policy. This reduces users’ efficiency, and the user must remember the
password policy and enter the password accordingly. The user is also unable to view
the entered password. Thus, while keeping the password policy in mind the user
also has to remember the new password resulting in increased cognitive load on
users memory.
Severity:
High
Heuristic
Violated:
Proposed Solution:
-
 |
| Fig. 3: Solution with password view button and password policy visible |
A more feasible and efficient solution would be to provide the password policy information next to the password field so that the password requirements remain in front of the user as the user enters the password. Providing a clickable button to toggle the visibility of the password will help to check if the user has entered the right password giving more confidence on his actions.
Problem
– Browser back button does not work to navigate between
pages.
 |
| Fig. 4: Browser back button does not work to go to previous page |
Issue:
The website
does not use browser default back button to navigate to any previously visited pages.
All modern websites make use of browser’s default back button for navigation. Also,
no message is if browser back button should not be used. For instance, to
change the district after selecting it, the user had to navigate to the “Applicant
Home” page and then redo all the process. This may irritate the user. Also,
upon selecting the “district” field value the form automatically gets submitted
and the user is directed to the next page for further information. This takes
away the control from the user. If the user mistakenly chooses the wrong
district then he won’t be able to update it and since there is no back button
to revisit the page and change the form, he will have to restart the entire process
which could be very annoying for most people.
Severity:
Medium
Heuristic
Violated: User control
and freedom and Visibility of
System Status.
Proposed Solution: -
Use browser
back button same as all the modern websites do for navigation, else provide a
physical back button (specific to the site) to navigate to previous pages. If the
website expects the user to enter the “district” details only once, then they
should have provided a message for user that “You cannot modify the below
information”. A button should be provided so that user can navigate to the next
page after he has entered the required information.
Problem - Repetitive Information resulting in cluttering and reduced efficiency.
 |
| Fig. 5: Applicant home page cluttering with small font size and repetitive information |
Issue 1:
On the home
screen, the user can see the page is divided into 2 parts, “Services” and
“Applicant Home”. All the information listed in the right section i.e., under
“Applicant Home” is also displayed in the left section under “Services”. This
way of putting up the information is confusing because when clicking on a link,
there is an implicit assumption that the link in right section will be the correct
link and not the one displayed in the other section. This issue could be a
serious problem, especially for new users resulting in frustration, and
difficulties in navigation.
Severity: Medium to High
Issue 2:
The font size is also very small, and it is difficult to read the information correctly because this view appears to be cluttered making it challenging for users to navigate and absorb information quickly. It might cause strain on the user’s eyes and might reduce user’s efficiency to find and locate information.
Severity: Medium
Heuristic Violated: Aesthetic and minimalist design and Recognition rather than recall
Proposed Solution: -
All this information could be displayed under one heading with the most visited or the most important links being positioned at the beginning of the list. This way users might feel easy to find what they need without having to decide between sections. By displaying all the information(links) under one heading, there will be more room on the page and so this information could be displayed in a better way with increased font size and spacing between individual links.
Problem: No
hint/help provided to understand the meaning of shortforms used.
 |
| Fig. 6: No help documentation provided for shortforms used |
Issue:
The website
has used some shortforms such as “PSK/POPSK/PSLK” without providing any help to
understand the meaning of these terms which may cause confusion for the user.
Use of such unfamiliar text would make it difficult for user to take further actions
and without any provided help the user will have to figure out their meaning by
themself, reducing efficiency and increasing time to complete the task. Also, the
“Click here” links are not easy to identify.
Heuristic
Violated: Help and
Documentation and Match Between
System and Real World.
Severity: Medium
Proposed Solution: -
 |
| Fig. 7: Solution with help documentation, next button and updated click here link |
A message
could be displayed somewhere below the form like “Click here to know more about
PSK/POPSK/PSLK”. This can provide immediate help on unfamiliar terms,
making the user feel confident and in control of their next actions. Users will
have more control over their interactions with the website if clear messages
are given to them.
Problem: Finding
payment amount and payment status information is difficult.
 |
| Fig. 8: Payment amount missing, success message hard to find |
Issue:
Finding the
payment success information is difficult. The font used is very small and the light
green color which is used for success message is undervalued by the red text
that is dominating the screen. Also, the information about the payment amount
is missing.
Severity: Medium
Heuristic
Violated: Visibility of
System Status and Aesthetic
and Minimalist Design
Proposed Solution: -
 |
| Fig. 9: Solution with payment amount and payment status icon |
A more intuitive way of putting the success message could improve readability. A recommendation would be the use of a green tick icon with a “payment successful” message and a field showing the amount paid that gives the payment status enhancing visibility, providing more clarity and confidence to the user about the successful completion of the payment task. The green tick icon will grab user’s attention allowing user to quickly identify success status without the need to navigate or search for information. Displaying payment amount will provide user with the needed critical information preventing any confusion about transaction status.
Conclusion: -
The Indian
Passport Seva website has some minor drawbacks in the user interface and design
with respect to the Nielsen’s heuristics mentioned above. I have tried to provide
some solutions for each of the problems discussed along with their severity.
With implementation of recommended solutions, it would result in increased user
efficiency and enhanced user experience with the website.
Acknowledgements: -
To make the grammatical corrections, enhance the overall quality of the content and address potential language-related concerns Grammarly was used.
References: -
[1] https://medium.com/@sef.gustingurah.yama/visual-design-the-face-of-your-apps-67a03427824f
[2] https://www.nngroup.com/articles/ten-usability-heuristics/
[3] https://www.passportindia.gov.in/AppOnlineProject/welcomeLink#
[4] https://app.grammarly.com/
No comments:
Post a Comment