For the first attached mockup titled “Minor Changes”, the reasoning behind my changes is as follows:
For the second and third images, the reasoning behind my changes is as follows:
- I replaced the logo with an obvious placeholder logo in order to make it clearer to merchants that their logo would go at the top instead of Century’s logo. The logo size was also reduced to utilize screen real estate slightly better.
- To save the user time, I added visual cues for which types of cards are accepted and show how the form would detect the card type automatically once the first few digits have been entered. This eliminates the extra step of choosing a card type, helping the form to have only the most necessary questions. This is based on Nielsen’s Heuristic #7: Flexibility and efficiency of use. I show how it looks once the first few digits of a card have been entered; the card type being used is illuminated and the other card icons go gray. This is based on Nielsen’s Heuristic #1: Visibility of system status.
- I slightly changed the order of input fields in order to group all fields together that require directly looking at the card in hand for user ease and convenience.
- I eliminated the extra line “Terms and Conditions” at the bottom of the form by making “terms and conditions” in the statement “I’ve read and agree to the terms and conditions” a link to the CBS terms, in order to avoid an unnecessary competing link above the payment action button.
- I removed the lengthy “Customer IP” number in hopes that this is not pertinent information, in order to only display the most necessary information.
- I changed “Pay Now” to “Pay $59.00 Now” to reiterate the payment amount that is about to be charged for further reassurance and error prevention, and less recall for the user, based on Nielsen’s Heuristic #5: Error prevention and Heuristic #6: Recognition rather than recall.
For the second and third images, the reasoning behind my changes is as follows:
- According to eye-tracking and heatmap studies conducted by the NN Group, users typically first read in a horizontal movement, then a second shorter horizontal movement, then finally read the contents left side in a vertical movement, in an F-shaped pattern.
- So for “Redesign Option 1”, I placed the “Pay by Credit Card” and “Pay by Card” selections on the upper left, the area that typically gets the first and most fixations by users, and the “Invoice Summary” on the right on the same horizontal line because that is typically the next area of fixation. Then I made the vertical movement for viewing the CC input fields as short as possible for speed and convenience, eliminating the scroll previously required to get to the bottom.
- For “Redesign Option 2”, I placed the important Invoice information so it would be the first information to be seen (read from left to right) followed by CC input fields for the vertical reading that typically follows.
- I changed the “MMYY” field to two dropdown menus, one for “MM” and one for “YY” (like Amazon and Apple’s Itunes Account) because studies show users avoid manual entry when possible and in this format, the users are constrained to only valid inputs, adding extra error prevention.
- To save the user time, I added visual cues for which types of cards are accepted and show how the form would detect the card type automatically once the first few digits have been entered. This eliminates the extra step of choosing a card type, helping the form to have only the most necessary questions. This is based on Nielsen’s Heuristic #7: Flexibility and efficiency of use. I show how it looks once the first few digits of a card have been entered; the card type being used is illuminated and the other card icons go gray. This is based on Nielsen’s Heuristic #1: Visibility of system status.
- I replaced the logo with an obvious placeholder logo in order to make it clearer to merchants that their logo would go at the top instead of Century’s logo. The logo size was also reduced to utilize screen real estate slightly better.
- I eliminated the extra line “Terms and Conditions” at the bottom of the form by making “terms and conditions” in the statement “I’ve read and agree to the terms and conditions” a link to the CBS terms, in order to avoid an unnecessary competing link above the payment action button.
- I removed the lengthy “Customer IP” number in hopes that this is not pertinent information, in order to only display the most necessary information.
- I changed “Pay Now” to “Pay $59.00 Now” to reiterate the payment amount that is about to be charged for further reassurance and error prevention, and less recall for the user, based on Nielsen’s Heuristic #5: Error prevention and Heuristic #6: Recognition rather than recall.