Human Computer Interaction

Design Project

Group No 23

M. Prujit COE19B029
C. Sairaj COE19B030
Y. V Akhil COE19B031
P. Srivastav COE19B033
N. Praneeth COE19B039

Topic: Microsoft Teams

Microsoft Teams is a universal communication and
collaboration platform that combines persistent
workplace chat, video meetings, file storage, and
application integration.
Logo of Microsoft Teams
Colour is one of the most important thing while
designing an Interface.

1) Colour directly influences people’s mind.

● We have used purple colour throughout the

interface including the logo. Purple resembles
Imaginative, creative, nostalgic, royalty
important for businesses related to
consumables.
2) Psychology of shapes

● The logo of the app resembles people Logo of Microsoft Teams

connecting with each other which can be
easily remembered.
● The logo is designed using round shapes
which can relate to positive message, unity
etc. as well as sharp edges which can relate
to strength, stability and efficiency
Fitts Law
● The law states that the amount of time for a person to
move to a target area
○ We have decreased the distance between the
targets and made the icons look larger so that
the user can easily click them.
○ We have also maintained enough space
between the targets so that the user will be
comfortable while clicking them
○ This also prevents the user to click other options
instead of their target options.

Visceral reactions
Balance between positive and negative space are
maintained here
The principles followed in the pages shown in the above slide are

Learnability
● First time user can go through a small tour covering all the features within the app so that they
can avoid facing issues or difficulty while using the app.
● New users can learn things quickly and according to the law of Power law of practice, the time
to complete a task decreases linearly with the number of practice trails taken. If a topic in new,
we can learn 50% of the information quickly.
● Principles in learnability such as Familiarity, Generalizability and consistency are used in this
application.
Asimov’s first law

Asimov's First Law states that a computer may not injure a

human being or, through inaction, allow a human being to
come to harm.This law is one of three fundamental laws of
robotics proposed by science fiction author Isaac Asimov,
which are intended to serve as a ethical guidelines for the
design and behavior of robots.

Teams gives users a feedback on their privacy policy by

showing them a screen as shown in the image.
Golden rules of consistency and standards are used here, by using
familiar icons and colors

Golden rule of permit easy reversal of actions is used by the back

button indication on top of the page.

Penalty of negative space is left out in the app in order to showcase the
simplicity of the page

Only a few options are shown at a time to the user on this page in order
to reduce the complexity of the page.

The color purple is used to reflect creative and nostalgic feelings to the
user

The page here is using a form fill in interface which is easy for the user to
see the options available. This is also helpful in reducing the complexity
and error prevention.

The responsiveness feature of robustness is used here.

HCI principles state that important information and controls should be
visible to the user. In Microsoft Teams, this could be implemented by
ensuring that the user's main tasks, such as creating and managing
teams, are easily accessible from the main navigation bar.

Skeuomorphism: The design concept of making items represented

resemble their real world counterparts.

Golden Rule of enabling users to use shortcuts such as navigating to

different pages by the options present at the bottom of the page

The unity principles of principles of design is used here, the pages

contents are in harmony and are arranged in proper order

Gestalt’s law of figure and ground is used to differentiate between the

figure and surroundings

The page is symmetrically designed following Gestalt’s law of

symmetry
The page gives the user informative feedback. Here when
the user searches for something that is not found we show a
screen that says “No results found” that gives the user an
informative feedback.

Here Pareto’s law also known as 80 / 20 rule is used here

Golden rule of permit easy reversal of actions is used by

showcasing the back button present on the top of the page.
The user can navigate to previous page or state at any
given time.

Support internal locus of control, golden rule has been used

here, allowing the user to be the initiator of actions and
giving full control of events occurring to the user.

Plenty of negative space is left out in the app in order to

showcase the simplicity of the page.
Aesthetic and minimalist design has been used here by
keeping the number of action to proceed to the minimal

The unity principle of principles of design is used here. The

pages contents are in harmony and arranged in proper
order

All the available contents are following a grid type structure

or are structured in a way that they are supporting each
other which satisfies the balance principle of principles of
design.

Scrolling and attention principle are used. The design

focuses on vertical scroll than horizontal scroll.

The page is symmetrical in design following the gestalt’s law

of symmetry.
Hierarchy

• This law states that there should be difference

between elements in the design.
• Colour and size are most important and common
elements to create hierarchy.
• In this application, Content can be clearly
distinguished between important information and its
related information.

Here the user can select the theme which changes the
appearance of the whole application which increase the
the customizability which enhances the flexibility of the
application.
The user might receive helpful comments from the page. For instance,
the website shows a notice that reads "No results found" to let the user
know when a search query yields no results.

Design dialogue to yield closure

We should not keep the user waiting. User should know
what their actions have led them to. In this case, if the user submits the
assignment, user will get a successful message like shown in the
image.
Offer Informative feedback:
The user should know what they are at and what is happening at all times.
For example no Internet connection message is displayed in the interface
instead of code error and “something went wrong” message instead of
machine code error.
Law of common region:
In this app elements are grouped together for
example the assignments screen has all the
assignments and it’s details.

Law of proximity:
When elements are placed close together they
are perceived as a group. Here each
assignment are placed close to each other.
Thank You