Heuristic evaluation and cognitive walkthrough of the indian airforce website
evaluation process
KICKOFF & PREPARATION
EXPERTS HEURISTIC EVALUATION
COGNITIVE WALKTHROUGH
ANALYSIS AND INSIGHTS
PAGE REVAMP
heuristic evaluation
Visibility of system status
Consistency and standards
Error prevention
Recognition rather than recall
Match between system and the real world
User control and freedom
The design should always keep users informed about what is going on, through appropriate feedback within a reasonable amount of time.
Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform and industry conventions.
Good error messages are important, but the best designs carefully prevent problems from occurring in the first place. Either eliminate error-prone conditions, or check for them and present users with a confirmation option before they commit to the action.
Minimize the user's memory load by making elements, actions, and options visible. The user should not have to remember information from one part of the interface to another. Information required to use the design should be visible or easily retrievable when needed.
The design should speak the users' language. Use words, phrases, and concepts familiar to the user, rather than internal jargon. Follow real-world conventions, making information appear in a natural and logical order.
Users often perform actions by mistake. They need a clearly marked "emergency exit" to leave the unwanted action without having to go through an extended process.
Flexibility and efficiency of use
Help users recognize, diagnose, and recover from errors
Help and documentation
Aesthetic and minimalist design
Shortcuts — hidden from novice users — may speed up the interaction for the expert user so that the design can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.
Error messages should be expressed in plain language (no error codes), precisely indicate the problem, and constructively suggest a solution.
It’s best if the system doesn’t need any additional explanation. However, it may be necessary to provide documentation to help users understand how to complete their tasks.
Interfaces should not contain information that is irrelevant or rarely needed. Every extra unit of information in an interface competes with the relevant units of information and diminishes their relative visibility.
expert evaluation
In order to conduct expert evaluation, I developed an evaluation sheet. It was requested that experts identify the issue and assess its severity on a severity scale. They may even note any recommendations they may have for the issue
Heuristic Evaluation Sheet
Evaluator :
Don’t agree that this is a usability problem
Cosmetic problem
Minor usability problem
Major usability problem; important to fix
Usability Catastrophe; imperative to fix
Task 1 : Explore the “homepage” of Indian AirForce Website
0
1
2
3
4
Match between system and the real world
Severity
Issues
Recommendations
The design should speak the users' language. Use words, phrases, and concepts familiar to the user, rather than internal jargon. Follow real-world conventions, making information appear in a natural and logical order.
1
2
3
4
Visibility of system status
Severity
Issues
Recommendations
The design should always keep users informed about what is going on, through appropriate feedback within a reasonable amount of time.
0
1
2
3
4
User control and freedom
Severity
Issues
Recommendations
Users often perform actions by mistake. They need a clearly marked "emergency exit" to leave the unwanted action without having to go through an extended process.
0
1
2
3
4
Consistency and standards
Severity
Issues
Recommendations
Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform and industry conventions.
0
1
2
3
4
Error prevention
Severity
Issues
Recommendations
Good error messages are important, but the best designs carefully prevent problems from occurring in the first place. Either eliminate error-prone conditions, or check for them and present users with a confirmation option before they commit to the action.
0
1
2
3
4
Recognition rather than recall
Severity
Issues
Recommendations
Minimize the user's memory load by making elements, actions, and options visible. The user should not have to remember information from one part of the interface to another. Information required to use the design (e.g. field labels or menu items) should be visible or easily retrievable when needed.
0
1
2
3
4
Notes :
Notes :
Flexibility and efficiency of use
Severity
Issues
Recommendations
Shortcuts — hidden from novice users — may speed up the interaction for the expert user so that the design can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.
0
1
2
3
4
Aesthetic and minimalist design
Severity
Issues
Recommendations
Interfaces should not contain information that is irrelevant or rarely needed. Every extra unit of information in an interface competes with the relevant units of information and diminishes their relative visibility.
0
1
2
3
4
Help users recognize, diagnose, and recover from errors
Severity
Issues
Recommendations
Error messages should be expressed in plain language (no error codes), precisely indicate the problem, and constructively suggest a solution.
0
1
2
3
4
Notes :
Help and documentation
Severity
Issues
Recommendations
It’s best if the system doesn’t need any additional explanation. However, it may be necessary to provide documentation to help users understand how to complete their tasks.
0
1
2
3
4
Recommendations
Task 2 : Open the “Tamil Nadu flash floods page”, in what ways do you believe this page could be more effectively depicted?
TASK 1
TASK 2
TASK 3
Three tasks were given for Expert Evaluation, for which an evaluation sheet was generated
Explore the “homepage” of Indian Airforce Website and evaluate it according to Jakob Nielsen's Heuristic Evaluation
Open the “Tamil Nadu flash floods” page, in what ways do you believe this page could be more effectively depicted?
Explore the “join the IAF” page and consider ways it could be enhanced
I conducted a thorough analysis of the website, with an 80% emphasis on this analysis and a 20% relying on the expert evaluation.
Based on this evaluation, an average was taken - “severity average”
Don’t agree that this is a usability problem
Cosmetic problem
Minor usability problem
Major usability problem; important to fix
Usability Catastrophe; imperative to fix
0
1
2
3
4
SEVERITY CHART
SEVERITY AVERAGE
0
1
2
3
4
task 1
VISIBILITY OF SYSTEM STATUS
Explore the “homepage” of Indian Airforce Website and evaluate it according to Jakob Nielsen's Heuristic Evaluation
SEVERITY AVERAGE
0
1
2
3
4
EXPERT 1
EXPERT 2
ISSUE
ISSUE
RECOMMENDATIONS
No call to action for closing the advt is not visible
The name of the website is not prominently recognizable
Hold the logo and navigation in place always
0
0
1
1
2
2
3
3
4
4
EVALUATOR
ISSUE
The top navigation bar hides as we scroll down
0
1
2
3
4
MATCH BETWEEN SYSTEM AND REAL WORLD
SEVERITY AVERAGE
0
1
2
3
4
EXPERT 1
ISSUE
Lot of Acronyms in main menu
0
1
2
3
4
EVALUATOR
ISSUE
Icon can be used in search bar
0
1
2
3
4
USER CONTROL AND FREEDOM
SEVERITY AVERAGE
0
1
2
3
4
EVALUATOR
ISSUE
The top navigation bar is unclear; certain buttons scroll within the same page, while others lead to different pages.
0
1
2
3
4
lead to different page
CONSISTENCY AND STANDARDS
SEVERITY AVERAGE
0
1
2
3
4
EXPERT 1
ISSUE
Horizontal scroll is an inconsistent way to show hidden information
0
1
2
3
4
EXPERT 2
ISSUE
RECOMMENDATIONS
Bad usage of fonts, layouts, grids
Make the visual design consistent
0
1
2
3
4
EVALUATOR
ISSUE
Buttons are inconsistent in size, grid system, too many fonts used
0
1
2
3
4
ERROR PREVENTION
SEVERITY AVERAGE
0
1
2
3
4
EXPERT 1
EVALUATOR
ISSUE
ISSUE
Horizontal scroll is introduced at all sections
No way to cancel the advt
0
0
1
1
2
2
3
3
4
4
RECOGNITION RATHER THAN RECALL
SEVERITY AVERAGE
0
1
2
3
4
EXPERT 1
EVALUATOR
ISSUE
ISSUE
Horizontal scroll is introduced at all sections
This website might work for general browsing, but for intentional browsing labelling, information scent, is bad
0
1
2
3
4
0
1
2
3
4
AESTHETIC AND MINIMALIST DESIGN
SEVERITY AVERAGE
0
1
2
3
4
EXPERT 1
EXPERT 2
ISSUE
ISSUE
Too busy with many typographic styles. Too much movement
Fonts & Images can be used in much more effective way
0
0
1
1
2
2
3
3
4
4
EVALUATOR
ISSUE
Too busy with many typographic styles, pictures. Too much movement
0
1
2
3
4
HELP AND DOCUMENTATION
SEVERITY AVERAGE
0
1
2
3
4
EXPERT 1
EVALUATOR
ISSUE
ISSUE
Some of the section labels are confusing. Eg: “A Cut Above” - not evident what this section contains
The FAQ section is confusing, the information is hidden
0
1
2
3
4
0
1
2
3
4
task 2
EXPERT 1 SUGGESTIONS
EXPERT 2 SUGGESTIONS
EVALUATOR SUGGESTION
Introduce images, video content, better headline, text body width made more readable
Use images, quotes from people rescued, videos of rescue operation
Rewrite text for scannability, break paragraphs, highlight key points
Interactive game to gain information and keep it engaging for users
Open the “Tamil Nadu flash floods” page, in what ways do you believe this page could be more effectively depicted?
task 3
EXPERT 1 SUGGESTIONS
EXPERT 2 SUGGESTIONS
CTA for applying should be hierarchically better positioned
Unappealing “FAQ” section
Needs more “FAQ” questions
CTA is hidden
FAQ should be interactive
The banners and font used are not effective
Explore the “join the IAF” page and consider ways it could be enhanced
cognitive walkthrough
TASK
An expert user was invited to perform cognitive walkthrough. He was first briefed the task and his role during the testing.
Cognitive Walkthrough is a technique used to evaluate the learnability of a system from the perspective of a new user. It relies on the expertise of a set of reviewers who, in a highly structured manner, walk through a task and assess the interface from a new user’s point of view.
Search for “Indian Airforce” website and as a user apply to join the force
evaluation
SEARCH
APPLY
Will users try to achieve the right result?
Will users notice that the correct action is available?
Will users associate the correct action with the result they’re trying to achieve?
After the action is performed, will users see that progress is made toward the goal?
Yes, the user was able to easily search the website
Yes, the user was easily able to identify the “join us” CTA button
NO, once the user pressed on join us button it again directed him to another CTA button
SUGGESTION, keep one CTA button, too many steps is frustrating
SUGGESTION, if there are various segments to apply, categorize them
SUGGESTION, pdf and the form can be separately and clearly depicted
NO, the user was expecting a form to fill in, but instead he landed to a info pdf page
NO, even in the pdf there was no information about where to apply
Yes, all action buttons are positioned within the body of the page
Yes, the information is clearly depicted
Yes, the page changes and lands on to the homepage
insights from heuristics and walkthrough
The navigation model needs to be revised
Websites should follow a grid system and be consistent with the fonts
Applicants need step-by-step instructions on how to apply
Provide a clear explanation of all career options
Top navigation bar should always be visible
Revisions need to be made to the horizontal prototype
redesign home page
BEFORE
AFTER
CAPS - Centre for power studies, it is a course
MEHAR BABA II - This is a competition forum for all members of the Air Force
AFFWA - page does not open
AKAM - Events organized within the Air Force
IAF Doctrine - Doctrine in the Indian Air Force
All of these content either lead to a different page all together or to a pdf. The content isn't organised
The Indian Air Force logo seemed to be hidden behind the top nav bar
Size of the font is too big for the page. Centre alignment in the top nav bar is not balanced
NAVIGATION MODEL
LOGO
FONT
Hamburger menu is introduced and top nav bar is prioritized for important task
Indian Air Force logo is at visibility
Font consistency is maintained throughout the website
NAVIGATION MODEL
Hamburger menu consists of all the secondary information
There is a single section for all the courses
User can now easily
BEFORE
AFTER
A user will only be able to determine the content of the card when he or she hovers over it
No CTA for reading more about it
PROTOTYPE
Three simple cards - defining the card and a CTA to read more about it
The user does not need to hover over to know card content
BEFORE
AFTER
Unnecessary background gradient
Different fonts used
Content font - too big in size
Card is too big
Buttons are not consistent with the rest of the page
Chief name is lost below
AESTHETICS
Page and card is clean
Correct hierarchy in content
BEFORE
AFTER
An entire segment of space being wasted for big size font and an image card
Buttons are not consistent
AESTHETICS
A picture carousel
CTA to view all kinds of pictures and videos, other than this a segment in hamburger menu is dedicated for gallery
BEFORE
AFTER
There are more links in the footer which is part of explore more option
FOOTER
Clean footer with all the required content - contact info, join us and courses button
redesign disaster management
BEFORE
AFTER
Providing a plain text account of the entire rescue mission may leave the user uninterested after seeing the amount of words being used, or in the middle of reading the account, the user may become lost
By gamifying the content, I was able to engage users and allow them to learn what had occurred
Click on “link” to view the animation
Fin.
PROTOTYPE LINK
Check out my other projects
Focused on Research, User stories and Persona
VIEW PROJECT
A storyboard for an XR simulation showing life of a person with partial vision impairment
One stop solution to design and decorate your dream space.
Focused on Research, Competitive analysis and Information architecture
VIEW PROJECT
Enhancing the management experience for hydroponic farmers.
Focused on Research, User stories and Information architecture
VIEW PROJECT
aashritha mohan
Crafted with love and chaos!!
I trust to see you again!
Back to Top
BEFORE
AFTER
An entire segment of space being wasted for big size font and cards where as these are additional links in the website to explore
Image and card content have no relation
AESTHETICS
All the required links are tagged below, click to view it completely