End Semester - Human Computer

Interaction
COE17B022 Silambarasan
21 November 2020

In this design analysis, changes are made in the Paytm version 8.14.01. Paytm is an Indian e-commerce
payment system and financial technology company

1 Von Restorff Effect

Modification : Pay & Transfer is being the main entity under consideration
The principle states that distinctive items are more likely to be remembered than ordinary items. these

Figure 1: Pay & Transfer being the major focus highlighted

1
distinctions can be noticeably different visual, context or experience. These should create a memorable
experience for users. Emphasize important details -altering light, color, size, image, font, animation,
words and sounds.
Here ”Pay & Transfer” is being isolated from the rest of the normla icons like ”Balance”,”Recharge”,”Pay
bills” since it is the most important feature that majority of the customers search for. This encourages
the user to learn the app easily.

2 Colour theory
Modifications : The proceed and cancel buttons are given green and red colour restpectively.

Figure 2: The buttons are given green and red color

Refer figure 2 .The colours are responsible for triggering emotional connections.It is a science of how
color affects human behaviour. Both being strong colours (contrast) express completely different actions
which result of clicking the button.

2
3 Law of Common Region
Modification : Functions that are closely related are grouped together.

Figure 3: Functions similar are grouped together

In figure 3, We group elements that are in the same closed region. By adding borders around an
element (or a group of items), you separate it from surrounding elements.

In the existing layout these options are placed in same level. it is really difficult to locate the exact
option compared to the available options in the menu. Grouping them together based on similarity of
function they perform it helps in reducing the search time and efforts as well reduce the cognitive load.

Figure 4: The ”Features” section is clearly distinguished with a grey background.

4 Distinction
Modification : A clear distinction between regions of the same page is made.

3
 Refer to figure 4. Backgorund is used in a different colour without violating the existing color pallette
of the app.This distinction makes a clear divide between the ”Features” part of the app from teh rest of
the app.

5 Navigation - More top level destination

Modification : The app is equipped with a bottom bar with which teh user can navigate to multiple
major destinations of the application.

Figure 5: Bottom Navigation bar for multiple top level destinations within the application

In the existing version of the app there is reduced options of moving to other top level destinations
within the app. We provide the bottom navigation (refer figure 5) bar which achieves the required
function.

4
6 Scarcity
Modification : The bill to be paid is given with a countdown within which it needs to settled.

Figure 6: The countdown is given to the bill to be paid within 3 days

In figure 6 , the user is displayed constantly on the duration with which he needs to pay the bill.
This visual cue helps him to know the immediate outstanding bill that he/she needs to be pay.

7 Hick and Hyman Law

Modification : Reduce the number of options available.
The intial layout of the paytm application is has high number of options available. This makes it ex-
tremely difficult for the user to decide and takes time.time it takes for a person to make a decision based
on the number of choices available total collection of choices into categories, eliminating about half of the
remaining choices at each step, rather than considering each and every choice one-by-one, which requires
linear time.Figure 7 which represents reduced number options available to the user

Figure 7: Reduced number of options available for the user

5
8 Fitts’ Law
Modification : Increased the size of the clickable area with important large icons Figure 8 is the figure
represting this
We know that the amount of time required for a person to move a pointer(e.g., mouse cursor) to a target
area is a function of the distance to the target divided by the size of the target.
Higher the size of the clickable area for the user, more the user enjoys the using the application.The
longer the distance and the smaller the target’s size, the longer it takes. In the given figure the major
usage icons have really large clickable area, hence enhancing the user experience.

Figure 8: Large clickable icons

9 Jakob’s Law
Modification : Changes are made to design without violating consistency and mental model
Users spend most of their time on websites other than ours. Big part of users’ mental models of our site
will be influenced by information gleaned from other sites. Thus our design should be in a much similar
way in basic aspects and be distinguishable enough to emerge as a good user friendly design.
We have made use changes to the interface without affecting the mental model of the user.

10 Match between system and the real world

Modification : Usage of icons which the user convey better meaning.
The content or the functionality is depicted in a way that even a naive user can understand . We don’t
have any system oriented terms which makes it difficult to learn. We have real world conventions which
results in better connection with the inexperienced user. The required content is also displayed in the
natural and logical order.
The icons are selected in a way that it can be easily remembered. Easier for the short term memory.
Fig 8 is an example of the match between the real world thing

11 Design dialogues to yield closure

We don’t want the user to keep guessing whether the task is completed or not. We give a clear indication
of the status of the transaction or the changes made. We also make sure before we update critical
information with a proper closure dialog box.
Before proceeding to the final step of payment the user is asked for confirmation

6
 Figure 9: Confirmation page before yielding closure

12 Figure - Ground
Modification : The distinction is made between the different subjects and the level of transaction in
process.

In figure 9 the subject in main concern the confirmation is made as the main focus and the rest is
kept in background with the help of reducing it’s transparency, it is kept translucent to give the figure
an highlight.

13 Reduce Short Term Memory Load

The display is kept simple by giving precise content which is related to users’ interest. Multiple page
displays are consolidated. The user is not provided with excess of options than the requirement as it has
higher chances that the user will be lost. It gives enough time for the user to learn the environment.
We have enough visual cues to provide the user with sufficient information to find the intended
functionality or item.

7
14 Pareto’s Law
Modification: Enabling new featires that are used most of the times
We know that the law of the vital few, or the principle of factor sparsity states that, for many events,
roughly 80% of the effects come from 20% of the causes 80% of the occasions users use only 20% of the
features supported in a product. So the small chnages made in the initial highest used components being
displayed yields higher results.

Figure 10: Enabling payment status sharing option on whatsapp

15 Majority of the content in the center

The viewer spends more than two thirds of the time viewing the left side of the screen since the user
has been accustomed to see the the first thing and as the line progresses the concentration of the user
reduces.

16 Violation of mental model

16.1 Consistence
Modification : The things conveying different meaning at different places are changed, overall consis-
tency is maintained

8
 Figure 11: The ambigous message is icon is removed

The consistency is matained throughout the app in colour combination, functions used.

16.2 Placement of functions

Modification : Location of the ”Settings” function is changed
The user has the mental model to have the settings in the bottom end of the menu. having it in teh
middle makes the option unnoticable the settings function is being changed.

Figure 12: Settings being placed in the appropriate position

9
16.3 Display of the content
Modification - Wallet balance is displayed in the position of the existing cashback recieved
The user has been accustomed to view the wallet balance under the profile name, the cashback recieved
being displayed over there confuses the user. So that wallet balance is being displayed over.

Figure 13: Wallet balance instead of cashback recieved

17 Robustness
Modification - Visual representation of receivers details
The user is provided with the oppurtunity to view the details of the person before proceeding to the final
step of the transaction.

Figure 14: Visual representation of the transaction

10
18 Eliminating the masking of password
There is minimum requirement of masking of passwords in the current scenraio , the user can opt in to
mask the password when he wants to rather than always being masked.

Figure 15: Unmask passwords

11
19 Asimov’s second law
Modification - Inclusion of new initial screen
The user can precisely select the task which he intended to do in the very first page he lands. He needn’t
be moving all around to arrive at the task. This helps the user to save time and the application provides
the requirement of the user with ease.

Figure 16: Task specific first page

12