Home loan Calculator for Standard Chartered Bank

HTML, CSS, JAVASCRIPT

Design

1. Visibility of system status
The design should always keep users informed about what is going on, through appropriate feedback within a reasonable amount of time.
As users complete interactions, they need clear, timely feedback from the interface. Without feedback, they will not know if the system is processing their actions.
Feedback takes many forms in a digital interface. It can be subtle, such as an icon becoming darker and bolder after we select it. Feedback can also be more obvious, such as a pop-up message that states how long the system needs to process an action.
 
 
When our cursor hovering above of Loan Amount, Interest Rate and Loan Term input box we can select the up/down arrow, the number increase/decreases. The number changes according to our actions, which provides feedback that the system is receiving our actions. The Calculate button also change darker when the mouse hovering on top of it to provide feedback to user.

2. Match between system and the real world
The design should use language that is familiar to the user. Information should be presented in a natural and logical way based on real-world conventions. This principle reminds us to avoid using technical jargon or complex sentences. Instead, we should use phrases that are clear and easy to understand. The language we use should match what our users know. For example, sound-mixing software for expert music producers will use a different vocabulary than a similar program for young students. Additionally, we want to align the design with the world around us. below are samples from the big banks in Australia for their home loan calculator.
What do you think?







 

3. User control and freedom
The design should allow users to cancel or back out of actions done by mistake. Users should be able to freely navigate through the product without getting stuck.
When we use digital products, it’s common to change our minds. For example, after adding an item to an online shopping cart, we may decide not to buy it. Furthermore, we may complete actions by mistake, such as selecting “print” when we actually want to download.
As designers, we should plan ways that users can efficiently back out of mistakes or unwanted processes. For example, we can provide user control by including “back” and “cancel” buttons and allowing actions like “undo” and “redo.”
This application give user freedom to change numbers and press calculate as many as user wants, without any time limits, no limitations to get the best monthly payment that suit to user.

4. Consistency and standards
Users should not have to wonder whether different actions, words, or situations mean the same thing. Designs should adhere to platform and industry conventions.
Following industry standards means using conventions that are standard in digital products. This is helpful to the user because they can leverage prior knowledge when they open a new interface. We want to minimize the amount of new information users must learn to interact with the product.
The naming “Calculate” button is very common to recognise with standard way of calculating that the Bank Use. “Loan Amount”, “Interest Rate”, “Loan Term”, and “Monthy Repayment” input text are all standard and east to understand by customer and consistent through out the world.

5. Error prevention
The design should help the user avoid making errors. This includes removing error-prone conditions or providing a confirmation step before users commit to the action.
When designing, we should first focus on preventing high-stakes errors. Then, we can work on minimizing any smaller issues. We can help prevent errors by including warnings, supporting actions like “undo”, adding helpful constraints, and using default settings strategically.
For example, if you’re booking a round-trip train ticket, constraints may prevent you from selecting a departure date that precedes the return date. The default number of passengers may be set to “one” to prevent you from paying for more tickets than you need.

6. Recognition rather than recall
The design should limit the need for the user to remember information that is required to use the interface. Elements, options, and actions should be visible so the user can readily recognize them.
Generally, it’s easier for us to recognize information rather than remember it. For example, if you’re learning a new language, you may be able to recognize foods listed on a menu. Without the menu, it may be challenging to recall the words for these foods.
We can reduce the memory load required to use the interface by ensuring that the user can locate and understand the various options. As an example, a user may learn about the product from an onboarding tutorial. Any information needed to use the product should be accessible outside of this tutorial — the user should not have to remember it.
In this example a user received a tooltip when hovering on main text saying”This calculator only guidance”

7. Flexibility and efficiency of use
The design should offer shortcuts so that expert users can speed up interactions or customize frequent actions. These shortcuts may be hidden from less experienced users.
Each user operates in a specific context that includes factors such as expertise, frequency of use, and desired outcomes. We want to create products that can be used efficiently in these different contexts.
We can design interfaces that allow flexibility by including shortcuts, personalization, and customizations. For example, design software like Figma provides the option to use keyboard shortcuts. If we rarely use the software, these shortcuts may be unnecessary. However, if we use the software regularly, the shortcuts can save us a lot of time and effort.
Below image is sample of customisation of a forum, If you frequently use the forum, customizing your feed can provide a more efficient experience.
You can adjust these settings by adding relevant tags to the “Watched” and “Tracked” categories. That way, you won’t miss any posts with these tags. Additionally, you can mute tags for topics that are not relevant, so they don’t take up space on your feed.



 

8. Aesthetic and minimalist design
The design should not include information that is irrelevant or rarely needed. Any extraneous details compete with the relevant and necessary details.
Using a minimalist design does not mean that the interface must use a particular artistic visual style! The focus of this heuristic is to be intentional about the details that are included on the interface. We want to make sure that everything is connected to the user’s primary needs and goals. Any unneeded information adds friction and increases the user’s cognitive load.

9. Help users recognize, diagnose, and recover from errors
Error messages should use plain language (no error codes), clearly explain the problem, and constructively suggest a solution.
In an ideal situation, users seamlessly navigate through a product without issue. While striving to design a smooth experience, we should also consider the possibility of users making errors or needing additional support.
When we design interactions, we should consider the possible errors that could be made. If the user makes an error, the interface needs to notify them and help them resolve it. The error message must clearly describe the issue and provide an achievable solution.



 

10. Help and documentation
The design should offer documentation that allows users to complete tasks or resolve problems.
In general, the more complex the design, the greater the need for documentation. Some simple products may be usable with little to no documentation. In other products, documentation may be essential to ensure that users can understand the ins and outs of the interface.
If documentation is needed, we should ensure that users can readily access and understand it. Users should be able to locate the information they need.
One way to support users is to provide multiple ways to search for documentation. For example, in NAB’s Homepage, users can type in keywords, browse articles, browse by category, or message a chatbot.

Design