RESPONSIVE DESIGN GAMIFICATION

THOUGHT PROCESS
USER EXPERIENCE
DESIGN HYGIENE USER RESEARCH
SURVEY
COLORS
DEVELOPMENT
LAYOUTS
TOUCH WEBPAGE
PROCESSLOAD
USER
USER ANALYSIS
CROSS CONSISTANCY EMOTION WINDOWS by

PLATFORM INTERACTION
ANDROID iOS

PIXELS ICONSDEVICES IMAGERY PHOTOGRAPHY DIMENTIONS

NAVIGATION
SEARCH
FONT PRESENTATION IMPACT LOGOS
TCS Internal
INTERFACE | Last updated on 22/03/2017 A Microsoft @ Hi Tech initiative
REDLINES
Feedback | Contact Us | Terms of Use
RESPONSIVE DESIGN
User Agreement

Terms
of use
GAMIFICATION
THOUGHT PROCESS
USER EXPERIENCE
DESIGN HYGIENE USER RESEARCH
SURVEY
COLORS
DEVELOPMENT CONFIDENTIALITY
LAYOUTS
TOUCH
STATEMENT AND TERMS OF
USE
WEBPAGE
PROCESSLOAD
USER
This document contains information that is proprietary to TATA Consultancy Services, and is to be used
USER ANALYSIS only as a learning/reference material for TCS associates. This material shall not be disclosed outside,

CROSS CONSISTANCY EMOTION

transmittedWINDOWS
or duplicated, used in whole or in part for any purpose other than its intended purpose. Any
use or disclosure in whole or in part of this information, without express written permission of TATA

PLATFORM INTERACTION
ANDROID iOS

ICONS
Consultancy Services is prohibited. Any other company and product names are used for identification

DEVICES
purposes only and may be trademarks of their respective owners.

PIXELS IMAGERY PHOTOGRAPHY DIMENTIONS

NAVIGATION
SEARCH REDLINES
Your feedback will help us improve our learning content

FONT PRESENTATION IMPACT LOGOS

TCS Internal
INTERFACE Feedback | Contact Us | Terms of Use
RESPONSIVE
CONTENTS DESIGN GAMIFICATION
THOUGHT PROCESS
USER EXPERIENCE
DESIGN HYGIENE USER RESEARCH
SURVEY
COLORS
DEVELOPMENT
LAYOUTS
TOUCH WEBPAGE
PROCESSLOAD
USER USER
ANALYSIS
GETTING STARTED GENERAL AWARENESS FOR DEVELOPERS FOR PMs and BRMs

CROSS CONSISTANCY EMOTION

Benefits of
WINDOWS VIMM Model Responsive Web Design Corporate Presentation Guidelines

PLATFORM INTERACTION
User Experience ANDROID iOS

ICONSDEVICES
UX vs. UI UX Resources for Developers Data Visualization
Basics of Design Principles
UX vs. Usability UX Resources for better PPTs

PIXELS
Basics of UX
Typical UX Process

IMAGERY PHOTOGRAPHY DIMENTIONS

Latest Trends

NAVIGATION
UX Resources and

SEARCH Tutorials
Accessibility REDLINES
FONT PRESENTATION IMPACT LOGOS
TCS Internal
INTERFACE
Best Practices to better
Mobile UX
Feedback | Contact Us | Terms of Use
RESPONSIVE DESIGN
GETTING STARTED

BENEFITS
Of User Experience
GAMIFICATION
THOUGHT PROCESS
USER EXPERIENCE
DESIGN HYGIENE USER RESEARCH
SURVEY
COLORS
DEVELOPMENT
LAYOUTS
TOUCH User Experience (UX) is about understanding the user’s perception and actions throughout any
interactive experience that the user undertakes.
WEBPAGE
PROCESS It is about designing and developing an experience that easily identifies with your users, and

USER
LOAD
guides them through an interaction created for them. UX can be improved by anticipating
USER ANALYSIS user’s actions and understanding their goals, expectations and need, which results in enhanced

CROSS CONSISTANCY EMOTION

WINDOWS
engagement with the product, service, or system.

PLATFORM INTERACTION
ANDROID iOS

ICONSDEVICES
Definition of User Experience:
Simply explained

PIXELS User Experience (UX) defines a person's attitude and emotions

IMAGERY PHOTOGRAPHY
about using a particular product, service, or system. DIMENTIONS
NAVIGATION
SEARCH
FONT PRESENTATION IMPACT LOGOS
TCS Internal
INTERFACE
REDLINES
Feedback | Contact Us | Terms of Use
RESPONSIVE DESIGN
GETTING STARTED

BENEFITS
Of User Experience
GAMIFICATION
THOUGHT PROCESS
USER EXPERIENCE
DESIGN HYGIENE
SURVEY
USER RESEARCH

COLORS
DEVELOPMENT
The core values of UX are to understand, anticipate, and guide consumers so that they evoke a positive action and strong
LAYOUTS
TOUCH response. This should align with your product’s business goals and objectives.

The multiple business benefits of user experience are: WEBPAGE

PROCESSLOAD
USER
USER ANALYSIS
CROSS CONSISTANCY EMOTION
WINDOWS

PLATFORM INTERACTION
ANDROID iOS

PIXELS ICONSDEVICES
Improved
Productivity/Performance
Increased
Profits/Sales/Revenues
Improved
Brand Credibility
IMAGERY PHOTOGRAPHY DIMENTIONS
Decreased
Support/Training Costs
Improved
Customer Experience

NAVIGATION
SEARCH
FONT PRESENTATION IMPACT LOGOS
TCS Internal
INTERFACE
REDLINES
Feedback | Contact Us | Terms of Use
RESPONSIVE DESIGN
GETTING STARTED

BASICS Of Design Principles

GAMIFICATION
THOUGHT PROCESS
USER EXPERIENCE
DESIGN HYGIENE USER RESEARCH
SURVEY
COLORS
DEVELOPMENT
LAYOUTS
TOUCH WEBPAGE
PROCESSLOAD “
“ USER
USER ANALYSIS
Design is not just what it looks like and feels like. Design is how it works.
-
CROSS CONSISTANCY EMOTION
WINDOWS Steve Jobs

PLATFORM INTERACTION
ANDROID iOSThe basic principles of design are:

PIXELS ICONSDEVICES IMAGERY PHOTOGRAPHY DIMENTIONS

NAVIGATION
SEARCH
FONT PRESENTATION IMPACT LOGOS
TCS Internal
INTERFACE
Consistency Colors REDLINES
Layout and
Structure

Feedback | Contact Us | Terms of Use

RESPONSIVE DESIGN
CONSISTENCY
GAMIFICATION
Basics of Design Principles
THOUGHT PROCESS
USER EXPERIENCE
DESIGN HYGIENE USER RESEARCH
SURVEY
COLORS
DEVELOPMENT
LAYOUTS
TOUCH
It is very important to ensure that your
user interface works consistently.
I don’t know why
my secretary I can never find WEBPAGE
You can do so by putting elements such

PROCESSLOAD rearranges my desk the stapler. as buttons, icons, boxes and so on in

USER
every morning…
consistent places.
USER ANALYSIS Use the same text and wording in labels
and messages, and use a consistent color

CROSS CONSISTANCY EMOTION

WINDOWS scheme throughout all your pages/design.

PLATFORM INTERACTION
ANDROID iOS

ICONSDEVICES
Consistency enables users to build an
accurate mental model of the way your

PIXELS
product or design works, which leads to
reduced training and support costs.
IMAGERY PHOTOGRAPHY DIMENTIONS
NAVIGATION
SEARCH
FONT PRESENTATION IMPACT LOGOS
TCS Internal
INTERFACE
REDLINES
Feedback | Contact Us | Terms of Use
RESPONSIVE DESIGN
CONSISTENCY
GAMIFICATION
Basics of Design Principles
THOUGHT PROCESS
USER EXPERIENCE
DESIGN HYGIENE USER RESEARCH
SURVEY
COLORS
DEVELOPMENT
LAYOUTS
TOUCH
It is perceived, that people see what they expect
& want to see.
I don’t know why
my secretary I can never find WEBPAGE
PROCESS rearranges my desk the stapler.
All commonly found elements such as logos, home

USER
LOAD
every morning…
button, search box, navigation, breadcrumbs, and
USER ANALYSIS so on, should be placed at similar positions.
This consistency should be maintained throughout

CROSS CONSISTANCY EMOTION

WINDOWS the site for better user experience.

PLATFORM INTERACTION
ANDROID iOS

PIXELS ICONSDEVICES IMAGERY PHOTOGRAPHY DIMENTIONS

NAVIGATION
SEARCH
FONT PRESENTATION IMPACT LOGOS
TCS Internal
INTERFACE
REDLINES
Feedback | Contact Us | Terms of Use
RESPONSIVE DESIGN
COLORS
GAMIFICATION
Basics of Design Principles
THOUGHT PROCESS
USER EXPERIENCE
DESIGN HYGIENE USER RESEARCH
SURVEY
COLORS
DEVELOPMENT
LAYOUTS
TOUCH WEBPAGE
PROCESSLOAD
USER
USER ANALYSIS
CROSS CONSISTANCY EMOTION
WINDOWS

PLATFORM INTERACTION
ANDROID iOS

PIXELS ICONSDEVICES
Use color to expedite visual search Use color to improve object recognition

IMAGERY PHOTOGRAPHY DIMENTIONS

NAVIGATION
SEARCH
FONT PRESENTATION IMPACT LOGOS
TCS Internal
INTERFACE
REDLINES
Feedback | Contact Us | Terms of Use
RESPONSIVE DESIGN
COLORS
GAMIFICATION
Basics of Design Principles
THOUGHT PROCESS
USER EXPERIENCE
DESIGN HYGIENE USER RESEARCH
SURVEY
COLORS
DEVELOPMENT
LAYOUTS
TOUCH WEBPAGE
PROCESSLOAD
USER
USER ANALYSIS
CROSS CONSISTANCY EMOTION
WINDOWS

PLATFORM INTERACTION
ANDROID iOS

PIXELS ICONS DEVICES

Use color to enhance meaning and branding

IMAGERY PHOTOGRAPHY DIMENTIONS

Use color to convey structure

SEARCH
NAVIGATION
INTERFACE
REDLINES
FONT PRESENTATION IMPACT LOGOS
TCS Internal Feedback | Contact Us | Terms of Use
RESPONSIVE DESIGN
COLORS
GAMIFICATION
Basics of Design Principles
THOUGHT PROCESS
USER EXPERIENCE
DESIGN HYGIENE USER RESEARCH
SURVEY
COLORS
DEVELOPMENT
LAYOUTS
TOUCH WEBPAGE
PROCESSLOAD
USER
USER ANALYSIS
CROSS CONSISTANCY EMOTION
WINDOWS

PLATFORM INTERACTION
ANDROID iOS

PIXELS ICONS DEVICES

Use color to establish identity

IMAGERY PHOTOGRAPHY DIMENTIONS

Use color to show associations

SEARCH
NAVIGATION
INTERFACE
REDLINES
FONT PRESENTATION IMPACT LOGOS
TCS Internal Feedback | Contact Us | Terms of Use
RESPONSIVE DESIGN
COLORS
GAMIFICATION
Basics of Design Principles
THOUGHT PROCESS
USER EXPERIENCE
DESIGN HYGIENE USER RESEARCH
SURVEY
COLORS
DEVELOPMENT
LAYOUTS
TOUCH WEBPAGE
PROCESSLOAD
USER
USER ANALYSIS
CROSS CONSISTANCY EMOTION
WINDOWS

PLATFORM INTERACTION
ANDROID iOS

PIXELS ICONSDEVICES IMAGERY

Warm
PHOTOGRAPHY
Cold
DIMENTIONS
NAVIGATION
SEARCH
FONT PRESENTATION IMPACT LOGOS
TCS Internal
INTERFACE
Use colour as per their nature REDLINES
Feedback | Contact Us | Terms of Use
RESPONSIVE DESIGN
LAYOUT & STRUCTURE
GAMIFICATION
Basics of Design Principles
THOUGHT PROCESS
USER EXPERIENCE
DESIGN HYGIENE USER RESEARCH
SURVEY
COLORS
DEVELOPMENT
LAYOUTS
TOUCH 1) The user interface should be clearly defined and
organized. All the controls and icons should be
easily identifiable. WEBPAGE
PROCESSLOAD
USER
2) Correlation is an important aspect. Put all related
things and segments together.
USER ANALYSIS
3) The layout and structure should be purposeful,

CROSS CONSISTANCY EMOTION

WINDOWS
useful and meaningful. It should be designed keeping

PLATFORM INTERACTION
ANDROID
in mind structures and models thatiOSare easily apparent

ICONSDEVICES
and recognizable to users.

PIXELS
4) One should always Sketch first and Design later.

IMAGERY PHOTOGRAPHY DIMENTIONS

NAVIGATION
SEARCH
FONT PRESENTATION IMPACT LOGOS
TCS Internal
INTERFACE
REDLINES
Feedback | Contact Us | Terms of Use
RESPONSIVE DESIGN
GETTING STARTED

BASICS Of User Experience

GAMIFICATION
THOUGHT PROCESS
USER EXPERIENCE
DESIGN HYGIENE USER RESEARCH
SURVEY
COLORS
DEVELOPMENT
LAYOUTS
TOUCH The main focus of User experience (UX) is to have a deep understanding of users’
WEBPAGE
need, value, abilities and disabilities such as blindness, deafness etc. It also puts
PROCESS
USER
LOAD on the business goals and objectives of the application or product.
emphasis
USER ANALYSIS
In the next sections, we shall learn more about the correlation between Technology,

CROSS CONSISTANCY EMOTION

WINDOWS
Business and Design and how UX influences these three aspects..

PLATFORM INTERACTION
ANDROID iOS

PIXELS ICONSDEVICES IMAGERY PHOTOGRAPHY DIMENTIONS

NAVIGATION
SEARCH
FONT PRESENTATION IMPACT LOGOS
TCS Internal
INTERFACE
REDLINES
Feedback | Contact Us | Terms of Use
RESPONSIVE DESIGN
GETTING STARTED

BASICS Of User Experience

GAMIFICATION
THOUGHT PROCESS
USER EXPERIENCE
DESIGN HYGIENE USER RESEARCH
UX influences the correlationship between Technology, Business and Design in
numerous ways as follows:
SURVEY
COLORS
DEVELOPMENT
LAYOUTS
TOUCH
Technology Keywords
Functionality, Programming, Code, Engineering, Foundation, Objective, Backend,
Technology Performance, Feasibility, Realistic, Complex and Establishes.
WEBPAGE
PROCESS Business Keywords

USER
LOAD BI, Data, Mission & Vision, Goals, Customers, Users, Paradigm, Pragmatic, Analytics,

USER ANALYSIS Demographic, Stakeholders, Budget and Determines.

CROSSUX CONSISTANCY EMOTION

WINDOWS Design Keywords
UI, UX, IA, Colors, Fonts, Branding, Layout, Visualization, Wireframes, Aesthetics,

PLATFORM INTERACTION
ANDROID iOS Creativity, Abstract, Subjective, Experimental, Front End, Visual, Explains and Clarifies.

ICONSDEVICES
Business Design

PIXELS
UX influence brings in: Efficiency, Logic, Relevance, Concreteness, and Goals.

IMAGERY PHOTOGRAPHY DIMENTIONS

UX influence brings in: Effectiveness, Interaction, Usability, Elegance,

NAVIGATION
Simplicity and Product Centricity.
SEARCH REDLINES
UX influence brings in: Brand Equity, Company Image, Style, Marketing,

FONT PRESENTATION IMPACT LOGOS

Advertising, Consistency, Trust, Communication and the Key Message.

TCS Internal
INTERFACE Feedback | Contact Us | Terms of Use
RESPONSIVE
BASICS DESIGN
GETTING STARTED
Of User Experience
GAMIFICATION
THOUGHT PROCESS
The content and information

USER EXPERIENCE
should be original and fulfil
DESIGN HYGIENE a need. USER RESEARCH
SURVEY
COLORS
Image, identity, brand

DEVELOPMENT Must be easy to use.

and other design
elements should be used

LAYOUTS
TOUCH
Useful to make the product
desirable.

What are the factors

that influence good UX? Desirable WEBPAGE
PROCESSLOAD
Usable

USER
Users must find value in
USER ANALYSIS
what you are providing
UX needs to be
accessible to people
with disabilities.

CROSS CONSISTANCY EMOTION

them. The influencingWINDOWS Basics of

PLATFORM INTERACTION
factors to achieve a ANDROID
valuable iOS UX

ICONSDEVICES
Valuable Accessible
UX are:

PIXELS The product or application must be

purposeful and deliver value to the
IMAGERY PHOTOGRAPHY CredibleDIMENTIONS
customer. User experience must help in

NAVIGATION
Findable
advancing that promise and guarantee

SEARCH satisfactory customer experience.

REDLINES
User must trust and believe
in your product and services.

FONT PRESENTATION IMPACT LOGOS

TCS Internal
INTERFACE
Content must be easy to
find and comprehend. Feedback | Contact Us | Terms of Use
RESPONSIVE DESIGN
GETTING STARTED

BASICS Of User Experience

GAMIFICATION
THOUGHT PROCESS
USER EXPERIENCE
DESIGN HYGIENE USER RESEARCH
SURVEY
COLORS
DEVELOPMENT
Commonly used terms in UX and their meanings
LAYOUTS
TOUCH User Research
WEBPAGE
Helps to understand user behaviors, needs, and motivations through various observation techniques, user task

PROCESSLOAD analysis, and other feedback gaining methods.

USER
USER ANALYSIS
Usability Evaluation
Focuses on how well users can learn and use a product to achieve their goals. It also refers to how satisfied

CROSS CONSISTANCY EMOTION

WINDOWS
users are with that process. There are multiple methods to help evaluate for example, Expert evaluations,

PLATFORM INTERACTION
ANDROID
Usability iOS
testing, and Eye tracking.

PIXELS ICONSDEVICES
Information Architecture (IA)
Focuses on how the information is organized, structured, and presented to users.
It is very critical for good user experience.
IMAGERY PHOTOGRAPHY DIMENTIONS
NAVIGATION
SEARCH
User Interface Design
REDLINES
Focuses on anticipating what users might need to do and ensures that the interface has elements that facilitate

FONT PRESENTATION IMPACT LOGOS

the actions and task of the user.

TCS Internal
INTERFACE Feedback | Contact Us | Terms of Use
RESPONSIVE DESIGN
GETTING STARTED

BASICS Of User Experience

GAMIFICATION
THOUGHT PROCESS
USER EXPERIENCE
DESIGN HYGIENE USER RESEARCH
SURVEY
COLORS
DEVELOPMENT
Commonly used terms in UX and their meanings
LAYOUTS
TOUCH Interaction Design (IxD) WEBPAGE
PROCESSLOAD Facilitates in creating engaging interactive interfaces that help users to interact with the interface.

USER
USER ANALYSIS
Visual Design

CROSS CONSISTANCY EMOTION

Caters WINDOWS
to the look and feel aspect of the design/product and ensures an aesthetically pleasing interface that is
in line with the products’ brand goals and guidelines.

PLATFORM INTERACTION
ANDROID iOS

PIXELS ICONSDEVICES
Accessibility
Focuses on how a disabled individual accesses or benefits from a site, system, or application.

IMAGERY PHOTOGRAPHY DIMENTIONS

NAVIGATION
SEARCH REDLINES
Wireframe
Is a page schematic/line drawing or a visual guide that represents the skeletal framework of a website.

FONT PRESENTATION IMPACT LOGOS

TCS Internal
INTERFACE Feedback | Contact Us | Terms of Use
RESPONSIVE DESIGN
GETTING STARTED

BASICS Of User Experience

GAMIFICATION
THOUGHT PROCESS
USER EXPERIENCE
DESIGN HYGIENE USER RESEARCH
SURVEY
COLORS
DEVELOPMENT
Commonly used terms in UX and their meanings
LAYOUTS
TOUCH RITE Method
WEBPAGE
Rapid Iterative Testing and Evaluation, typically referred to as RITE testing, is an iterative usability

PROCESSLOAD testing method.

USER
USER ANALYSIS
A/B Testing

CONSISTANCY EMOTION
Also known as split testing or bucket testing, this is a method of comparing two versions of a product/page
CROSS WINDOWS
or app against each other to determine which one performs better.

PLATFORM INTERACTION
ANDROID iOS

PIXELS ICONSDEVICES
Eye Tracking
This is a process of measuring either the point of gaze that is where one is looking or the motion of an
eye relative to the head. It uses a device that helps measure eye positions and eye movement.

IMAGERY PHOTOGRAPHY DIMENTIONS

NAVIGATION
Prototype
SEARCH REDLINES
This is an early sample or release of a product built to test a concept or process flow or to act as a thing
to be replicated or learned from.

FONT PRESENTATION IMPACT LOGOS

TCS Internal
INTERFACE Feedback | Contact Us | Terms of Use
RESPONSIVE DESIGN
GETTING STARTED

BASICS Of User Experience

GAMIFICATION
THOUGHT PROCESS
USER EXPERIENCE
DESIGN HYGIENE USER RESEARCH
SURVEY
COLORS
DEVELOPMENT
Commonly used terms in UX and their meanings
LAYOUTS
TOUCH Usability
Refers to the quality of a user's experience when interacting with products or systems. WEBPAGE
PROCESSLOAD The word usability also refers to various methods for improving ease-of-use during the design process.

USER
USER ANALYSIS
Usability Testing
CROSS CONSISTANCY EMOTION
WINDOWS
Usability testing is a technique used to evaluate a product by testing it on users. This can be seen as an

PLATFORM INTERACTION
ANDROID
great usability practice, iOS
since it gives direct and immediate input on how real users are using the system.

PIXELS ICONSDEVICES
Color Contrast Ratio
The contrast ratio is a property of the display system. It defines the luminance of the brightest color (white)
IMAGERY PHOTOGRAPHY DIMENTIONS
to that of the darkest color (black) that the system is capable of producing. A high contrast ratio is a desired

NAVIGATION
aspect of any display. For instance, a web page with poor contrast ratio’s is not good for users with eye/vision
SEARCH disabilities as it becomes difficult to read and see.
REDLINES
FONT PRESENTATION IMPACT LOGOS
TCS Internal
INTERFACE Feedback | Contact Us | Terms of Use
RESPONSIVE DESIGN
GENERAL AWARENESS

VIMM Model
GAMIFICATION
THOUGHT PROCESS
USER EXPERIENCE
DESIGN HYGIENE USER RESEARCH
SURVEY
COLORS
DEVELOPMENT
LAYOUTS
TOUCH WEBPAGE
PROCESSIfproduct,
USER
users
LOAD are thinking too much or working too hard to make sense of your
USER ANALYSIS there may be four areas that may need load correction. The goal of
VIMM model is to help REDUCE LOAD in the following areas:
CROSS CONSISTANCY EMOTION
WINDOWS

PLATFORM INTERACTION
ANDROID iOS

PIXELS ICONSDEVICES IMAGERY PHOTOGRAPHY DIMENTIONS

NAVIGATION
SEARCH
FONT PRESENTATION IMPACT LOGOS
TCS Internal
INTERFACE
Visual Load Intellectual Load Memory Load
REDLINES
Motor Load

Feedback | Contact Us | Terms of Use

RESPONSIVE DESIGN
GENERAL AWARENESS – VIMM Model
GAMIFICATION
THOUGHT PROCESS
VIMM Model

USER EXPERIENCE
DESIGN HYGIENE
If users ‘can’t find things’ it is probably due to visual clutter
USER RESEARCH
SURVEY
COLORS
DEVELOPMENT
LAYOUTS
TOUCH WEBPAGE
PROCESSLOAD
USER
USER ANALYSIS
CROSS CONSISTANCY EMOTION
WINDOWS of content
Visual Load ANDROIDLots Haphazard Screen flows that don’t Bad alignment

PLATFORM INTERACTION
iOS
on the page layout match task flows of texts

PIXELS ICONSDEVICES
Hint: Make it easier by: IMAGERY PHOTOGRAPHY DIMENTIONS
NAVIGATION
SEARCH
Designing a grid to

FONT PRESENTATION IMPACT LOGOS

ensure alignment.

TCS Internal
INTERFACE
Eliminating unnecessary
elements to avoid clutter
Carefully aligning &
formatting text & images REDLINES
Using ‘pleasing to the eye’
color combinations

Feedback | Contact Us | Terms of Use

RESPONSIVE DESIGN
GENERAL AWARENESS – VIMM Model
GAMIFICATION
THOUGHT PROCESS
VIMM Model

USER EXPERIENCE
DESIGN HYGIENE
If users are ‘trying to figure things’ out, it’s due to the following:
USER RESEARCH
SURVEY
COLORS
DEVELOPMENT
LAYOUTS
TOUCH WEBPAGE
PROCESSLOAD
USER
USER ANALYSIS
CROSS CONSISTANCY EMOTION
WINDOWS Confusing
Intellectual Load
Complex Unclear instructions &

PLATFORM INTERACTION
ANDROID iOS names
navigation workflow processes poor content writing

PIXELS ICONSDEVICES IMAGERY PHOTOGRAPHY DIMENTIONS

Hint: Make it easier for users by:

NAVIGATION
SEARCH
Providing previews

FONT PRESENTATION IMPACT LOGOS

TCS Internal
INTERFACE
Using everyday language
& avoiding abbreviations
Ensuring all controls are
functioning consistently REDLINES
Providing good
response & feedback

Feedback | Contact Us | Terms of Use

RESPONSIVE DESIGN
GENERAL AWARENESS – VIMM Model
GAMIFICATION
THOUGHT PROCESS
VIMM Model

USER EXPERIENCE
DESIGN HYGIENE
If users are ‘forced to remember’ things because of:
USER RESEARCH
SURVEY
COLORS
DEVELOPMENT
LAYOUTS
TOUCH WEBPAGE
PROCESSLOAD
USER
USER ANALYSIS
CROSS CONSISTANCY EMOTION
WINDOWS Multiple
Memory LoadANDROID Hiding important links & Complicated

PLATFORM INTERACTION
iOS& passwords
usernames functions in menus & tabs workflows & task.

PIXELS ICONSDEVICES IMAGERY PHOTOGRAPHY DIMENTIONS

Hint: Allow users to rely on recognition rather than recall.

NAVIGATION
SEARCH
Provide clear navigation

FONT PRESENTATION IMPACT LOGOS

TCS Internal
INTERFACE
Ensure menus & tabs are
easily visible
Give sensible defaults
REDLINES
Feedback | Contact Us | Terms of Use
RESPONSIVE DESIGN
GENERAL AWARENESS – VIMM Model
GAMIFICATION
THOUGHT PROCESS
VIMM Model

USER EXPERIENCE
DESIGN HYGIENE
If users are ‘required to perform’ too many physical movements:
USER RESEARCH
SURVEY
COLORS
DEVELOPMENT
LAYOUTS
TOUCH WEBPAGE
PROCESSLOAD
USER
USER ANALYSIS
CROSS CONSISTANCY EMOTION
WINDOWS
Motor Load ANDROID iOSOver Constant Excessive scrolling Small ha

PLATFORM INTERACTION
clicking & typing device switching (especially horizontally) to hit targ

PIXELS ICONSDEVICES
Hint: Make it easier by: IMAGERY PHOTOGRAPHY DIMENTIONS
NAVIGATION
SEARCH
Simplifying task flows

FONT PRESENTATION IMPACT LOGOS

TCS Internal
INTERFACE
Providing shorter
distances & larger targets
Optimizing for devices
REDLINES
Using common
keyboard shortcuts

Feedback | Contact Us | Terms of Use

RESPONSIVE
UX DESIGN
GENERAL AWARENESS
Vs UI
GAMIFICATION
THOUGHT PROCESS
USER EXPERIENCE
DESIGN HYGIENE USER RESEARCH
SURVEY
COLORS
DEVELOPMENT
LAYOUTS
TOUCH WEBPAGE
PROCESSTheLOAD
USER
difference between UX and UI is simple. The User Interface (UI) is what users use
USER ANALYSIS
to interact with your product, and the User Experience (UX) is how the users feel while

CROSS CONSISTANCY EMOTION

WINDOWS
they are doing so.

PLATFORM INTERACTION
ANDROID iOS

PIXELS ICONSDEVICES IMAGERY PHOTOGRAPHY DIMENTIONS

NAVIGATION
SEARCH
FONT PRESENTATION IMPACT LOGOS
TCS Internal
INTERFACE
REDLINES
Feedback | Contact Us | Terms of Use
RESPONSIVE
UX DESIGN
GENERAL AWARENESS
Vs UI
GAMIFICATION
THOUGHT PROCESS
USER EXPERIENCE
DESIGN HYGIENE WHAT UX ACTUALLY INVOLVES? USER RESEARCH
SURVEY
COLORS
• Field Research
DEVELOPMENT • User Tests

LAYOUTS
TOUCH
• Artefacts
• Statistics

UX UI
• Personas
WEBPAGE
PROCESSLOAD
• Product Design

USER
• Requirement Gathering
• Interaction Design
USER ANALYSIS • Information Architecture

CONSISTANCY EMOTION
UX Design refers to the term User Experience Design,

CROSS WINDOWS • Usability

while UI Design stands for User Interface Design.

PLATFORM INTERACTION
ANDROID iOS • Prototyping

ICONSDEVICES
A UI without UX is like a photographer taking an out • Wire Framing
of focus picture without proper framing and thought, • Graphic Arts
while UX without UI is like taking a picture with a WHAT UX IS CONSIDERED?

PIXELS
• Interface Layout
defective camera altogether. • Visual Design
A great product experience starts with
IMAGERY PHOTOGRAPHY DIMENTIONS
great UX followed by UI.
• Copywriting

NAVIGATION
• Presentation

SEARCH Both are essential for the product’s success. • Development Support
REDLINES
FONT PRESENTATION IMPACT LOGOS
TCS Internal
INTERFACE Feedback | Contact Us | Terms of Use
RESPONSIVE
UX DESIGN
GENERAL AWARENESS
Vs UI
GAMIFICATION
THOUGHT PROCESS
USER EXPERIENCE
DESIGN HYGIENE USER RESEARCH
SURVEY
COLORS
DEVELOPMENT
LAYOUTS
TOUCH What an User Experience
person would say?
What an User Interface
person would say?
“
What a Visual Designer
would say?
WEBPAGE
“ “ “
“ “
PROCESS
We should show users the 'Thank You' page The login and search box should be The kerning is off and the button

USER
once they have signed up.LOAD moved to the top right corner. should be 3 pixel to the left.

USER ANALYSIS
CROSS CONSISTANCY EMOTION
WINDOWS

PLATFORM INTERACTION
ANDROID iOS

PIXELS
“
ICONS
“
DEVICES
What an lnteraction Designer
would say?
“
“
What an UX Researcher
would say?

IMAGERY PHOTOGRAPHY DIMENTIONS

The menu should ease-in from the left in From our research, studies show...
“
What an UI Developer
would say?
“
I'm using a 960px 12-column grid

NAVIGATION
750ms. system.

SEARCH REDLINES
FONT PRESENTATION IMPACT LOGOS
TCS Internal
INTERFACE Feedback | Contact Us | Terms of Use
RESPONSIVE
UX DESIGN
GENERAL AWARENESS
Vs Usability
GAMIFICATION
THOUGHT PROCESS
USER EXPERIENCE
DESIGN HYGIENE USER RESEARCH
SURVEY
COLORS
DEVELOPMENT
LAYOUTS
TOUCH WEBPAGE
PROCESSLOAD
USER
USER ANALYSIS
Simply put, Usability is just one of the many aspects that influence

CROSS CONSISTANCY EMOTION

WINDOWS
User Experience.

PLATFORM INTERACTION
ANDROID iOS

PIXELS ICONSDEVICES IMAGERY PHOTOGRAPHY DIMENTIONS

NAVIGATION
SEARCH
FONT PRESENTATION IMPACT LOGOS
TCS Internal
INTERFACE
REDLINES
Feedback | Contact Us | Terms of Use
RESPONSIVE
UX DESIGN
GENERAL AWARENESS
Vs Usability
GAMIFICATION
THOUGHT PROCESS
USER EXPERIENCE
DESIGN HYGIENE USER RESEARCH
SURVEY
COLORS
DEVELOPMENT
LAYOUTS
TOUCH WEBPAGE
PROCESS
USER ANALYSIS USER
USERLOAD
EXPERIENCE USABILITY
“
“ WINDOWS
“
CROSS ANDROID iOS CONSISTANCY EMOTION
Is how a person feels when they interact with
your website, product, application or business.
“ Is about interactions that are task based.
It’s the ability to do any task intuitively and easily.

PLATFORM INTERACTION
ICONS
It’s the emotional connect while doing any task.

PIXELS •
•
DEVICES User Experience is about

Making any task meaningful and worthwhile

IMAGERY PHOTOGRAPHY DIMENTIONS
Creating an emotional connect
•
•
Usability is about

Making any task intuitive and self explanatory

Minimizing any roadblocks and steps

NAVIGATION
SEARCH
• Understanding what users feel about your • Understanding what users do and making the
product
REDLINES
task easy for them to do.

FONT PRESENTATION IMPACT LOGOS

TCS Internal
INTERFACE Feedback | Contact Us | Terms of Use
RESPONSIVE DESIGN
GENERAL AWARENESS

TYPICAL UX Process
GAMIFICATION
THOUGHT PROCESS
USER EXPERIENCE
DESIGN HYGIENE USER RESEARCH
SURVEY
COLORS
DEVELOPMENT
LAYOUTS
TOUCH
What does a UX process look like? The answer to this question, as with many
questions, is: It depends. The UX process one follows will depend on a number of factors
WEBPAGE
such as: the project, the client, the budget, the deadlines, and so on.
PROCESSA LOAD
USER
typical UX process can be categories into four different phases. Discover, Design,
USER ANALYSIS
Develop, and Launch. Each phase can have key activities and corresponding

CONSISTANCY EMOTION
deliverable as demonstrated in the next slide.
CROSS WINDOWS

PLATFORM INTERACTION
ANDROID iOS

PIXELS ICONSDEVICES IMAGERY PHOTOGRAPHY DIMENTIONS

NAVIGATION
SEARCH
FONT PRESENTATION IMPACT LOGOS
TCS Internal
INTERFACE
REDLINES
Feedback | Contact Us | Terms of Use
GENERAL AWARENESS

TYPICAL UX Process

Discover Design Develop Launch

Heuristic Reviews Card Sorting Visual Specifications VOC / Surveys

Co-Discovery Workshops Design Jam @ Studio Prototype Development Longitudinal Studies

Ethnographic Research Iterative Design Localization A/B Testing

Activities
Stakeholder Interviews Usability Testing Accessibility Compliance Eye Tracking Studies

Heuristic Review Report Information Architecture Visual Assets VOC Findings

Creative Brief Wireframes Eye Tracking Report Diary Study Report

User Journey Maps Clickable Prototype Visual Design Bug Report A/B Testing Analysis

Deliverables Personas RITE Reports Accessibility Report Eye Tracking Report

Storyboards Visual Design Mood Boards

Usability Test Report

RESPONSIVE DESIGN
GENERAL AWARENESS

LATEST Trends
GAMIFICATION
THOUGHT PROCESS
USER EXPERIENCE
DESIGN HYGIENE USER RESEARCH
SURVEY
COLORS
DEVELOPMENT
LAYOUTS
TOUCH WEBPAGE
PROCESS
USER
LOADthe GIFs of the ‘90s, or the more up-to-date focus on flat design or smart
Remember
USER ANALYSIS
micro interactions? Let’s examine five Design trends that are getting popular.

CROSS CONSISTANCY EMOTION

WINDOWS

PLATFORM INTERACTION
ANDROID iOS

PIXELS ICONSDEVICES IMAGERY PHOTOGRAPHY DIMENTIONS

NAVIGATION
SEARCH
FONT PRESENTATION IMPACT LOGOS
TCS Internal
INTERFACE
REDLINES
Feedback | Contact Us | Terms of Use
RESPONSIVE DESIGN
GENERAL AWARENESS

LATEST Trends
GAMIFICATION
THOUGHT PROCESS
USER EXPERIENCE
DESIGN HYGIENE USER RESEARCH
SURVEY
COLORS
DEVELOPMENT
LAYOUTS
TOUCH WEBPAGE
PROCESS Meaningful Motion
USER
LOAD
USER ANALYSIS
Motion plays a major role in creating enhanced user experience. Motion guides the users’

CROSS CONSISTANCY EMOTION

WINDOWS
attention to enhance functionality and interaction. It boosts engagement and is

PLATFORM INTERACTION
instantly noticeable. iOS
ANDROID It’s important to keep in mind that some motions are cool to look at,

ICONS
but distracts users from doing important tasks. It’s important to have only meaningful motions that

PIXELS DEVICES
help users focus on performing tasks seamlessly. It should act as a catalyst rather than a distraction.

For example:
(https://dribbble.com/shots/1647461-Material-Calculator)
IMAGERY PHOTOGRAPHY DIMENTIONS
NAVIGATION
SEARCH
FONT PRESENTATION IMPACT LOGOS
TCS Internal
INTERFACE
REDLINES
Feedback | Contact Us | Terms of Use
RESPONSIVE DESIGN
GENERAL AWARENESS

LATEST Trends
GAMIFICATION
THOUGHT PROCESS
USER EXPERIENCE
DESIGN HYGIENE USER RESEARCH
SURVEY
COLORS
DEVELOPMENT
LAYOUTS
TOUCH WEBPAGE
PROCESS Modular Layouts

USER
LOAD
USERModular
ANALYSIS
layouts break up text and content into segmented sections and classify them in manageable chunks.

CROSS CONSISTANCY EMOTION

WINDOWS
Instead of using long blocks of text that are cumbersome, graphic designers have found that making the information

PLATFORM INTERACTION
modular makes people wantiOS
ANDROID to interface with it more. Not only do modular layouts represent an effective

ICONS
engagement and management tool, but also look professional when designed well.

DEVICES
Expect more modular layouts in the coming years, apart from possible influences from the other trends on this list.

PIXELS
For example:
(https://www.thisishatch.co.uk/)
IMAGERY PHOTOGRAPHY DIMENTIONS
NAVIGATION
SEARCH
FONT PRESENTATION IMPACT LOGOS
TCS Internal
INTERFACE
REDLINES
Feedback | Contact Us | Terms of Use
RESPONSIVE DESIGN
GENERAL AWARENESS

LATEST Trends
GAMIFICATION
THOUGHT PROCESS
USER EXPERIENCE
DESIGN HYGIENE USER RESEARCH
SURVEY
COLORS
DEVELOPMENT
LAYOUTS
TOUCH WEBPAGE
PROCESS Micro Interactions

USER
LOAD
USER ANALYSIS
Micro interactions is a part of our daily activities. From turning off the alarm on your mobile phone in the morning

CROSS CONSISTANCY EMOTION

to liking WINDOWS
that cute puppy picture on Facebook, all such actions are done without a second thought.

PLATFORM INTERACTION
It’s most likelyANDROID
that you startediOS
your day with a micro-interaction. By doing so you engage with a user interface

ICONS
in a single moment. More and more of micro interactions are baked into apps and devices that we use frequently.

DEVICES
Micro-interactions tend to do, or help you do several different things that do not require much thought or action
and helps the user in prompt interactions and providing feedback.

PIXELS For example:

IMAGERY PHOTOGRAPHY DIMENTIONS
(http://slack.com/)

NAVIGATION
SEARCH
FONT PRESENTATION IMPACT LOGOS
TCS Internal
INTERFACE
REDLINES
Feedback | Contact Us | Terms of Use
RESPONSIVE DESIGN
GENERAL AWARENESS

LATEST Trends
GAMIFICATION
THOUGHT PROCESS
USER EXPERIENCE
DESIGN HYGIENE USER RESEARCH
SURVEY
COLORS
DEVELOPMENT
LAYOUTS
TOUCH WEBPAGE
PROCESS A rich alternative to flat design: Material Design
USER
LOAD
USERGoogle
ANALYSIS
has launched a new style language called Material Design. It uses effects that accentuates the concept

CROSS CONSISTANCY EMOTION

WINDOWS
of movement and depth thus creating designs that appear to be more realistic to the user.

PLATFORM INTERACTION
With its minimalistic
ANDROID look, Material
iOSDesign has a lot in common with an already established trend - Flat Design.

ICONS
Material Design however makes use of depth and shadow to give tiles, buttons, and other elements dimension.

PIXELS DEVICES For example:

(https://angular.io/)

IMAGERY PHOTOGRAPHY DIMENTIONS

NAVIGATION
SEARCH
FONT PRESENTATION IMPACT LOGOS
TCS Internal
INTERFACE
REDLINES
Feedback | Contact Us | Terms of Use
RESPONSIVE DESIGN
GENERAL AWARENESS

LATEST Trends
GAMIFICATION
THOUGHT PROCESS
USER EXPERIENCE
DESIGN HYGIENE USER RESEARCH
SURVEY
COLORS
DEVELOPMENT
LAYOUTS
TOUCH WEBPAGE
PROCESS Illustrations

USER
LOAD
USER ANALYSIS
Using illustrated images are great for adding a human touch to graphic design. Recently, the usage of

CROSS CONSISTANCY EMOTION

Illustrations andWINDOWS
its execution has been kept simple to further enhance the minimalistic approach to design trend.

PLATFORM INTERACTION
Illustrations can be used in a huge
ANDROID iOS range of situations. They are becoming very popular as a way of explaining

ICONS
and illustrating complex problems, instructions and workflows. Coming years will likely find itself littered with this trend.

DEVICES
It will gain prominence for its unique, simplistic, independent and expressive style.

PIXELS
For example:
(https://paytm.com/)
IMAGERY PHOTOGRAPHY DIMENTIONS
NAVIGATION
SEARCH
FONT PRESENTATION IMPACT LOGOS
TCS Internal
INTERFACE
REDLINES
Feedback | Contact Us | Terms of Use
RESPONSIVE
UX DESIGN
GENERAL AWARENESS
Resources & Tutorials
GAMIFICATION
THOUGHT PROCESS
USER EXPERIENCE
DESIGN HYGIENE USER RESEARCH
SURVEY
COLORS
DEVELOPMENT
LAYOUTS
TOUCH WEBPAGE
PROCESSLOAD
USER
USER ANALYSIS
Get quick access to User Experience Resources and Tutorials.

CROSS CONSISTANCY EMOTION

WINDOWS
(Disclaimer: TCS is not responsible for any costs incurred to use/access the third-party resources and tutorials listed.)

PLATFORM INTERACTION
ANDROID iOS

PIXELS ICONSDEVICES IMAGERY PHOTOGRAPHY DIMENTIONS

NAVIGATION
SEARCH
FONT PRESENTATION IMPACT LOGOS
TCS Internal
INTERFACE
REDLINES
Feedback | Contact Us | Terms of Use
RESPONSIVE
UX DESIGN
GENERAL AWARENESS
Resources & Tutorials
GAMIFICATION
THOUGHT PROCESS
USER EXPERIENCE
DESIGN HYGIENE USER RESEARCH
SURVEY
COLORS
DEVELOPMENT Free

LAYOUTS
User 1001 Vector
Icon Website

TOUCH
Experience Free Vector Stock
Finder Template Art
(UX) Fonts

WEBPAGE
RESOURCES

PROCESSLOAD
USER
USER ANALYSIS UX
Checklist
IXD
Checklist
UX
Infographic
Checklist
iStock
Photos
Mobile
UX
Checklist
Freepik

CROSS CONSISTANCY EMOTION

WINDOWS s

PLATFORM INTERACTION
RESOURCES
ANDROID iOS

PIXELS ICONSDEVICES UX Design

Tutorials
GestaltP
sych-
ology
Interaction
Design
Course

IMAGERY PHOTOGRAPHY DIMENTIONS

HFI
Lynda
Training
Ultimate
Guide to
UX (Paid
Resource)

NAVIGATION
TUTORIALS

SEARCH REDLINES
FONT PRESENTATION IMPACT LOGOS
TCS Internal
INTERFACE Feedback | Contact Us | Terms of Use
RESPONSIVE DESIGN
GENERAL AWARENESS

ACCESSIBILITY DESIGN HYGIENE

GAMIFICATION
THOUGHT PROCESS
USER EXPERIENCE USER RESEARCH
SURVEY
COLORS
DEVELOPMENT
LAYOUTS
TOUCH Accessibility is the degree to measure the availability of a product, device, service,
or an environment to maximum possible users. WEBPAGE
PROCESS“The
USER
LOAD
power of the web is in its universality. Access by everyone regardless of
USER ANALYSIS
disability is an essential aspect.” - Tim Berners-Lee, W3C Director and inventor of the

CROSS CONSISTANCY EMOTION

WINDOWS
World Wide Web

PLATFORM INTERACTION
ANDROID iOS

PIXELS ICONSDEVICES
References & Sources
Web Accessibility
IMAGERY PHOTOGRAPHY DIMENTIONS
NAVIGATION
SEARCH
FONT PRESENTATION IMPACT LOGOS
TCS Internal
INTERFACE
REDLINES
Feedback | Contact Us | Terms of Use
RESPONSIVE DESIGN
GENERAL AWARENESS

ACCESSIBILITY DESIGN HYGIENE

GAMIFICATION
THOUGHT PROCESS
USER EXPERIENCE USER RESEARCH
SURVEY
COLORS
DEVELOPMENT
LAYOUTS
TOUCH WEBPAGE
PROCESS The Web is designed to work for everyone,

USER
LOAD
irrespective of software, hardware, language,
USER ANALYSIS culture, location, physical or mental ability.
CROSS CONSISTANCY EMOTION
WINDOWS
When we say it meets physical or mental ability

PLATFORM INTERACTION
ANDROID iOS

ICONS
goal, it means the web is accessible to people

PIXELS DEVICES with a diverse range of hearing, movement, eye

sight and cognitive ability.
IMAGERY PHOTOGRAPHY DIMENTIONS
NAVIGATION
SEARCH
FONT PRESENTATION IMPACT LOGOS
TCS Internal
INTERFACE
REDLINES
Feedback | Contact Us | Terms of Use
RESPONSIVE DESIGN
GENERAL AWARENESS

ACCESSIBILITY DESIGN HYGIENE

GAMIFICATION
THOUGHT PROCESS
USER EXPERIENCE USER RESEARCH
SURVEY
COLORS
DEVELOPMENT
Examples to enhancing accessibility:
LAYOUTS
TOUCH Site is coded with semantically meaningful HTML, with textual equivalents for images and links named meaningfully to
make it easier for blind users using text-to-speech software and/or text-to-braille hardware.
WEBPAGE
PROCESSLOAD
Text and images are made larger and/or are enlargeable to make the content readable and understandable for users with

USER
poor eye sight.

USERLinks
ANALYSIS
are underlined (or otherwise differentiated) as well as colored to make the color blind users notice the
links prominently.

CROSS CONSISTANCY EMOTION

WINDOWS
Clickable links and areas are made larger to help users who lack control over a mouse with precision.

PLATFORM INTERACTION
ANDROID iOS

ICONS
Pages are coded to make navigation possible by means of the keyboard alone, or a single switch access device to help

DEVICES
users who cannot use a mouse or a standard keyboard.

PIXELS
Videos are closed captioned and a sign language version is made available to help deaf and hard-of-hearing users
understand these videos.

IMAGERY PHOTOGRAPHY DIMENTIONS

Flashing effects are avoided or made optional to reduce the risks of affecting users prone to seizures.

NAVIGATION
SEARCH
TCS Internal
INTERFACE
REDLINES
Content is written in plain language and illustrated with instructional diagrams and animations to help users with
dyslexia and learning difficulties understand the content.

FONT PRESENTATION IMPACT LOGOS Feedback | Contact Us | Terms of Use

RESPONSIVE DESIGN
GENERAL AWARENESS

Accessibility Resources & Tutorials

GAMIFICATION
THOUGHT PROCESS
USER EXPERIENCEDESIGN HYGIENE USER RESEARCH
SURVEY
COLORS
DEVELOPMENT
LAYOUTS
TOUCH WEBPAGE
PROCESSLOAD
USER
USER ANALYSIS
Get quick access to Accessibility Resources.

CROSS CONSISTANCY EMOTION

WINDOWS
(Disclaimer: TCS is not responsible for any costs incurred to use/access the third-party resources and tutorials listed.)

PLATFORM INTERACTION
ANDROID iOS

PIXELS ICONSDEVICES IMAGERY PHOTOGRAPHY DIMENTIONS

NAVIGATION
SEARCH
FONT PRESENTATION IMPACT LOGOS
TCS Internal
INTERFACE
REDLINES
Feedback | Contact Us | Terms of Use
RESPONSIVE DESIGN
GENERAL AWARENESS

Accessibility Resources & Tutorials

GAMIFICATION
THOUGHT PROCESS
USER EXPERIENCEDESIGN HYGIENE USER RESEARCH
SURVEY
COLORS
DEVELOPMENT
LAYOUTS
TOUCH 10 Free 5 Free
Web Web The Web
Accessibility

WEBPAGE
Power Contrast Accessibility accessibility
Accessibility at Microsoft
Mapper Checker Evaluation Basics
Validator

PROCESS
Tool

USER
RESOURCES
LOAD
USER ANALYSIS
CROSS CONSISTANCY EMOTION
WINDOWS

PLATFORM INTERACTION
ANDROID iOS

ICONSDEVICES
Photose-
Color Color- -nsitive
Contrast blind Web Epilepsy
Analyser Page Filter Analysis

PIXELS
Tool
RESOURCES

IMAGERY PHOTOGRAPHY DIMENTIONS

NAVIGATION
SEARCH
FONT PRESENTATION IMPACT LOGOS
TCS Internal
INTERFACE
REDLINES
Feedback | Contact Us | Terms of Use
RESPONSIVE DESIGN
GENERAL AWARENESS

Best Practices to better Mobile UX

GAMIFICATION
THOUGHT PROCESS
USER EXPERIENCE DESIGN HYGIENE USER RESEARCH
SURVEY
COLORS
DEVELOPMENT
LAYOUTS
TOUCH WEBPAGE
PROCESSToLOAD
USER
make a better, intuitive, and user friendly mobile experience, let us take
USER ANALYSIS
a closer look at some of the best practices to keep in mind while designing

CROSS CONSISTANCY EMOTION

WINDOWS
mobile devices.

PLATFORM INTERACTION
ANDROID iOS

PIXELS ICONSDEVICES IMAGERY PHOTOGRAPHY DIMENTIONS

NAVIGATION
SEARCH
FONT PRESENTATION IMPACT LOGOS
TCS Internal
INTERFACE
REDLINES
Feedback | Contact Us | Terms of Use
RESPONSIVE DESIGN
GENERAL AWARENESS

Best Practices to better Mobile UX

GAMIFICATION
THOUGHT PROCESS
USER EXPERIENCE DESIGN HYGIENE
SURVEY
USER RESEARCH

COLORS
DEVELOPMENT
Some of the basic best practices to design a more intuitive, user friendly Mobile experience are:
LAYOUTS
TOUCH Design for touch
WEBPAGE
Mobile usage is usually on the go, hence is absolutely essential that content is focused and interaction

PROCESSLOAD is as intuitive as possible.

USER
USER ANALYSIS
Simple navigation and menus
Navigation should be easily accessible and multiple sub menus layers should be avoided as users prefer easy

CROSS CONSISTANCY EMOTION

WINDOWS
navigation to find information.

PLATFORM INTERACTION
ANDROID iOS

ICONSDEVICES
Create fluid layouts
Mobile devices come in various dimensions. Keeping layout flexible and fluid ensures proper display on

PIXELS
different screen sizes.

IMAGERY PHOTOGRAPHY DIMENTIONS

NAVIGATION
Space between touch points
SEARCH REDLINES
Ensures forms, buttons and other elements requiring touch input or gesture are large enough to avoid
overlap with adjacent elements.

FONT PRESENTATION IMPACT LOGOS

TCS Internal
INTERFACE Feedback | Contact Us | Terms of Use
RESPONSIVE DESIGN
GENERAL AWARENESS

Best Practices to better Mobile UX

GAMIFICATION
THOUGHT PROCESS
USER EXPERIENCE DESIGN HYGIENE USER RESEARCH
SURVEY
COLORS
DEVELOPMENT
Some of the basic best practices to design a more intuitive, user friendly Mobile experience are:
LAYOUTS
TOUCH Keep forms minimal
WEBPAGE
Mobile screens lack satisfying typing experience. Hence ensure that forms should be minimalistic and

PROCESSLOAD elements such as labelling should be placed such that it does not interfere with the input fields.

USER
USER ANALYSIS
Drop images wherever possible
Performance is key, especially in a Wi-Fi environment, where size and speed need to be optimized to ensure a

CROSS CONSISTANCY EMOTION

WINDOWS
quick and smooth experience. Anything hamperings its performance should be avoided.

PLATFORM INTERACTION
ANDROID iOS

PIXELS ICONSDEVICES
Use mobile features to enhance experience
One should leverage the device’s features to enhance the web experience.

IMAGERY PHOTOGRAPHY DIMENTIONS

NAVIGATION
SEARCH
FONT PRESENTATION IMPACT LOGOS
TCS Internal
INTERFACE
REDLINES
Feedback | Contact Us | Terms of Use
RESPONSIVE DESIGN
GENERAL AWARENESS

Best Practices to better Mobile UX Resources

GAMIFICATION
THOUGHT PROCESS
USER EXPERIENCE DESIGN HYGIENE USER RESEARCH
SURVEY
COLORS
DEVELOPMENT
LAYOUTS
TOUCH WEBPAGE
PROCESSLOAD
USER
USER ANALYSIS
Get quick access to Best Practices for better mobile UX Resources.

CROSS CONSISTANCY EMOTION

WINDOWS
(Disclaimer: TCS is not responsible for any costs incurred to use/access the third-party resources and tutorials listed.)

PLATFORM INTERACTION
ANDROID iOS

PIXELS ICONSDEVICES IMAGERY PHOTOGRAPHY DIMENTIONS

NAVIGATION
SEARCH
FONT PRESENTATION IMPACT LOGOS
TCS Internal
INTERFACE
REDLINES
Feedback | Contact Us | Terms of Use
RESPONSIVE DESIGN
GENERAL AWARENESS

Best Practices to better Mobile UX Resources

GAMIFICATION
THOUGHT PROCESS
USER EXPERIENCE DESIGN HYGIENE USER RESEARCH
SURVEY
COLORS
DEVELOPMENT
LAYOUTS
TOUCH WEBPAGE
PROCESSLOAD
USER
USER ANALYSIS Perfect
Website
Layout
Mobile
Design
Multiscreen
Site
Design
Cross
Platform
Mobile
Progressive
web apps
How to
Design for
Mobile

CROSS CONSISTANCY EMOTION

App UX
WINDOWS RESOURCES

PLATFORM INTERACTION
ANDROID iOS

PIXELS ICONSDEVICES IMAGERY PHOTOGRAPHY DIMENTIONS

NAVIGATION
SEARCH
FONT PRESENTATION IMPACT LOGOS
TCS Internal
INTERFACE
REDLINES
Feedback | Contact Us | Terms of Use
RESPONSIVE
RWD
DESIGN
FOR DEVELOPERS
Responsive Web Design
GAMIFICATION
THOUGHT PROCESS
USER EXPERIENCE
DESIGN HYGIENE USER RESEARCH
SURVEY
COLORS
DEVELOPMENT
LAYOUTS
TOUCH WEBPAGE
PROCESSResponsive
USER
LOAD
Web Design (RWD) is a concept that enables your web page or
USER ANALYSIS
application look presentable on all devices (desktops, tablets, and phones). Let us

CROSS CONSISTANCY EMOTION

WINDOWS
understand the basics of RWD and its best practices in this section.

PLATFORM INTERACTION
ANDROID iOS

PIXELS ICONSDEVICES IMAGERY PHOTOGRAPHY DIMENTIONS

NAVIGATION
SEARCH
FONT PRESENTATION IMPACT LOGOS
TCS Internal
INTERFACE
REDLINES
Feedback | Contact Us | Terms of Use
RESPONSIVE DESIGN
FOR DEVELOPERS

RWD
Responsive Web Design
GAMIFICATION
THOUGHT PROCESS
USER EXPERIENCE
DESIGN HYGIENE USER RESEARCH
SURVEY
COLORS
DEVELOPMENT
LAYOUTS
TOUCH What is Responsive Web Design?
WEBPAGE
RWD is a concept and approach to design,
PROCESSLOAD
USER
which aims at designing sites and applications
to provide an optimal viewing and interaction
USER ANALYSIS experience. It focuses on easy reading and
navigation with minimum resizing, panning,

CROSS CONSISTANCY EMOTION

WINDOWS and scrolling, across a wide range of devices

PLATFORM INTERACTION
ANDROID iOS (from desktop computer monitors to mobile

ICONSDEVICES
phones). CSS and HTML is used to resize, hide,
shrink, enlarge, or even reorganize the content

PIXELS
to make sure it is visually appealing on any
screen/device.
IMAGERY PHOTOGRAPHY DIMENTIONS
NAVIGATION
SEARCH
FONT PRESENTATION IMPACT LOGOS
TCS Internal
INTERFACE
REDLINES
Feedback | Contact Us | Terms of Use
RESPONSIVE DESIGN
FOR DEVELOPERS

RWD
Responsive Web Design
GAMIFICATION
THOUGHT PROCESS
USER EXPERIENCE
DESIGN HYGIENE USER RESEARCH
SURVEY
COLORS
DEVELOPMENT
Following are some RWD Best Practices:
LAYOUTS
TOUCH
Take A Mobile First Approach
The browsing experience should be the same for all users across the board. Responsive design principles
WEBPAGE
ensures this, by assuring the website/application is device adaptive. Taking a mobile first approach ensures

PROCESSLOAD seamless browsing experience.

USER
USER ANALYSIS
Make Clickable Areas 44px X 44px

CROSS CONSISTANCY EMOTION

WINDOWS
Research shows that the optimum dimensions for a clickable area on a mobile device is 44px x 44px

PLATFORM INTERACTION
ANDROID
which are iOShuman finger to target accurately. This can be achieved by adding
ideal for average

ICONSDEVICES
appropriate padding around a link to expand its clickable area, and applying adequate spacing between
on-page elements.

PIXELS IMAGERY PHOTOGRAPHY DIMENTIONS

NAVIGATION
SEARCH
FONT PRESENTATION IMPACT LOGOS
TCS Internal
INTERFACE
REDLINES
Feedback | Contact Us | Terms of Use
RESPONSIVE
RWD
DESIGN
FOR DEVELOPERS
Responsive Web Design
GAMIFICATION
THOUGHT PROCESS
USER EXPERIENCE
DESIGN HYGIENE USER RESEARCH
SURVEY
COLORS
DEVELOPMENT
Pay Attention to all your breakpoints
LAYOUTS
TOUCH
Every resolution can be defined in an assortment of breakpoints. There are several major dimensions which
needs to be focused on compared to others.
WEBPAGE
PROCESS The various breakpoints are:

USER
LOAD
<480px: Ideal for older and smaller smartphone screen sizes.

USER ANALYSIS <768px: Ideal for larger smartphones and smaller tablets.
>768px: Ideal for larger tablet and desktop screens.

CROSS CONSISTANCY EMOTION

WINDOWS

PLATFORM INTERACTION
ANDROID
These can also be used iOS
for:

ICONSDEVICES
<320px: Ideal for older, smaller, and lower resolution phones.
>1024px: Ideal for wide desktop screens.

PIXELS These are the key breakpoints to focus on.

IMAGERY PHOTOGRAPHY DIMENTIONS

NAVIGATION
SEARCH
FONT PRESENTATION IMPACT LOGOS
TCS Internal
INTERFACE
REDLINES
Feedback | Contact Us | Terms of Use
RESPONSIVE DESIGN
FOR DEVELOPERS

RWD
Responsive Web Design
GAMIFICATION
THOUGHT PROCESS
USER EXPERIENCE
DESIGN HYGIENE USER RESEARCH
SURVEY
COLORS
DEVELOPMENT
Make the Images Flexible and Workable
LAYOUTS
TOUCH
With a simple design, you can make your images flexible to a certain degree. The easiest way to accomplish
this is by using adaptive sizing and then resizing their width.
WEBPAGE
PROCESSLOAD Use Web Fonts for Icons

USER
USER ANALYSIS
Web Font icon collections which are easily available on web, allows designers to display website icons as
scalable vector graphics, instead of traditional method of using image sprites. The advantage of using Web
Font icons is that the icon will scale based on screen size it’s being viewed on without any pixelation.

CROSS CONSISTANCY EMOTION

WINDOWS

PLATFORM INTERACTION
ANDROID iOS

ICONSDEVICES
Test your Responsive Design on multiple devices.
It is essential to test your responsive site on as many devices possible. There are various mobile emulators
available, but nothing can compare to actually viewing your site on a mobile device and experiencing how

PIXELS your website responds.

By testing on actual devices you may notice usability and technical issues that wouldn’t have been
IMAGERY PHOTOGRAPHY DIMENTIONS
spotted on an emulator, which is greater than 1024px.

NAVIGATION
SEARCH
FONT PRESENTATION IMPACT LOGOS
TCS Internal
INTERFACE
REDLINES
Feedback | Contact Us | Terms of Use
RESPONSIVE DESIGN
FOR DEVELOPERS

RWD
Responsive Web Design
GAMIFICATION
THOUGHT PROCESS
USER EXPERIENCE
DESIGN HYGIENE USER RESEARCH
SURVEY
COLORS
DEVELOPMENT
The Fold No Longer Exists
LAYOUTS
TOUCH
Devices now come in multiple dimensions, shapes, and sizes.
It is not necessary to accumulate everything at the header of the page. Let the pages breathe and expand with
long, flowing content blocks with generous spacing. WEBPAGE
PROCESS People naturally scroll, so by giving them more content below the “fold” you are actually inviting them

USER
LOADwith your content.
to be more engaged

USER ANALYSIS
CROSS CONSISTANCY EMOTION
Hide content on smaller screens
WINDOWS
You can further simplify the layout by hiding content visible on larger screens, either by hiding it completely

PLATFORM INTERACTION
ANDROID iOS

ICONS
or using tabs and accordions to show/hide content. Show content that is extremely important for the user.

DEVICES
 

PIXELS Show more content on wider screens

The advantage of a wider screen is that it allows you to push more content in the view area of the screen
IMAGERY PHOTOGRAPHY DIMENTIONS
which is visible to the user straight away, before scrolling. This layout helps to accommodate more number

NAVIGATION
SEARCH REDLINES
of columns.

FONT PRESENTATION IMPACT LOGOS

TCS Internal
INTERFACE Feedback | Contact Us | Terms of Use
RESPONSIVE DESIGN
FOR DEVELOPERS

RWD
References
GAMIFICATION
THOUGHT PROCESS
USER EXPERIENCE
DESIGN HYGIENE USER RESEARCH
SURVEY
COLORS
DEVELOPMENT
LAYOUTS
TOUCH WEBPAGE
PROCESSLOAD
USER
https://developers.google.com/web/fundamentals/design-and-ui/responsive/?hl=en

USER ANALYSIS http://johnpolacek.github.io/scrolldeck.js/decks/responsive/

CROSS CONSISTANCY EMOTION

WINDOWS

PLATFORM INTERACTION
ANDROID iOS
https://developer.mozilla.org/en-US/docs/Archive/Responsive_Web_design

PIXELS ICONSDEVICES http://learn.shayhowe.com/advanced-html-css/responsive-web-design/

http://www.creativebloq.com/rwd/responsive-web-design-tutorials-71410085
IMAGERY PHOTOGRAPHY DIMENTIONS
NAVIGATION
SEARCH REDLINES
http://ugurus.com/responsive-design/

FONT PRESENTATION IMPACT LOGOS

TCS Internal
INTERFACE Feedback | Contact Us | Terms of Use
RESPONSIVE
UX
DESIGN
FOR DEVELOPERS
Resources for Developers
GAMIFICATION
THOUGHT PROCESS
USER EXPERIENCE
DESIGN HYGIENE USER RESEARCH
SURVEY
COLORS
DEVELOPMENT
LAYOUTS
TOUCH WEBPAGE
PROCESSLOAD
USER
USER ANALYSIS
Get quick access to User Experience Resources and Tutorials.

CROSS CONSISTANCY EMOTION

WINDOWS
(Disclaimer: TCS is not responsible for any costs incurred to use/access the third-party resources and tutorials listed.)

PLATFORM INTERACTION
ANDROID iOS

PIXELS ICONSDEVICES IMAGERY PHOTOGRAPHY DIMENTIONS

NAVIGATION
SEARCH
FONT PRESENTATION IMPACT LOGOS
TCS Internal
INTERFACE
REDLINES
Feedback | Contact Us | Terms of Use
RESPONSIVE
UX
DESIGN
FOR DEVELOPERS
Resources for Developers
GAMIFICATION
THOUGHT PROCESS
USER EXPERIENCE
DESIGN HYGIENE USER RESEARCH
SURVEY
COLORS
DEVELOPMENT
LAYOUTS
TOUCH UX
UX
Resources 15 UX/UI 12 Best
5
Resources Web
WEBPAGE
PROCESSLOAD
Design for Tools for Online for Fundam
& Android Designers Android entals

USER
Resources
Dev Developer Developer

RESOURCES

USER ANALYSIS
CROSS CONSISTANCY EMOTION
WINDOWS

PLATFORM INTERACTION
ANDROID iOS
Design Download UX Data Parallax Training

ICONS
Resources for

DEVICES
Design Visual- Best on
from Android Blogs ization Practices Android
Google Developer

PIXELS
RESOURCES

IMAGERY PHOTOGRAPHY DIMENTIONS

NAVIGATION
SEARCH
FONT PRESENTATION IMPACT LOGOS
TCS Internal
INTERFACE
REDLINES
Feedback | Contact Us | Terms of Use
RESPONSIVE DESIGN
FOR PMs, BRMs

CORPORATE
Presentation Dos & Don'ts
GAMIFICATION
THOUGHT PROCESS
USER EXPERIENCE
DESIGN HYGIENE USER RESEARCH
SURVEY
COLORS
DEVELOPMENT
LAYOUTS
TOUCH WEBPAGE
PROCESSThisLOAD
USER
USER ANALYSIS
section provides effective ways to make your presentations more
engaging structurally and visually.

CROSS CONSISTANCY EMOTION

WINDOWS
Remember, ‘Content is King, but it needs to look like one as well.’

PLATFORM INTERACTION
ANDROID iOS

PIXELS ICONSDEVICES IMAGERY PHOTOGRAPHY DIMENTIONS

NAVIGATION
SEARCH
FONT PRESENTATION IMPACT LOGOS
TCS Internal
INTERFACE
REDLINES
Feedback | Contact Us | Terms of Use
RESPONSIVE DESIGN
FOR PMs, BRMs

CORPORATE
Presentation Dos & Don'ts
GAMIFICATION
THOUGHT PROCESS
USER EXPERIENCE
DESIGN HYGIENE USER RESEARCH
SURVEY
COLORS
DEVELOPMENT
We will touch upon five core areas that will help enhance your presentation:
LAYOUTS
TOUCH WEBPAGE
PROCESSLOAD
USER
USER ANALYSIS
CROSS CONSISTANCY EMOTION
WINDOWS

PLATFORM INTERACTION
ANDROID iOS

PIXELS ICONSDEVICES
Font Usage Graphical & Design
Elements
Color Usage

IMAGERY PHOTOGRAPHY DIMENTIONS

How to use
Charts & Graphs
General
Presentations Tips

NAVIGATION
SEARCH
FONT PRESENTATION IMPACT LOGOS
TCS Internal
INTERFACE
REDLINES
Feedback | Contact Us | Terms of Use
RESPONSIVE
CORPORATE DESIGN
FOR PMs, BRMs
Presentation Dos & Don'ts
GAMIFICATION
Corporate Presentation Dos & Don’ts
THOUGHT PROCESS
USER EXPERIENCE
DESIGN HYGIENE USER RESEARCH
SURVEY
COLORS
DEVELOPMENT
Font Usage
LAYOUTS
TOUCH Always use Sans-Serif fonts such as Arial or Helvetica. Avoid using Serif fonts such as
Times New Roman or Palatino which are difficult to read after projection, from a distance. WEBPAGE
PROCESSLOAD
USER
Use font size that is 24 point or more.

USERAlways
ANALYSIS
use 2-3 font sizes to differentiate between headlines, subheadings, and body. Copy and keep it

CROSS CONSISTANCY EMOTION

WINDOWS
consistent through-out the deck.

PLATFORM INTERACTION
Use bold andANDROID
large font size toiOS
highlight key messages, numbers, and points.

PIXELS ICONSDEVICES
Avoid using Italicized font as they are difficult to read quickly and from a distance.
Avoid long sentences, abbreviations, and acronyms.
Always use the 6x6 rule for bullet points, which is one thought per line with no more than 6 words per line
IMAGERY PHOTOGRAPHY DIMENTIONS
NAVIGATION
and 6 lines per slide.
SEARCH Avoid using all caps except for titles. REDLINES
FONT PRESENTATION IMPACT LOGOS
TCS Internal
INTERFACE Feedback | Contact Us | Terms of Use
RESPONSIVE
CORPORATE DESIGN
FOR PMs, BRMs
Presentation Dos & Don'ts
GAMIFICATION
Corporate Presentation Dos & Don’ts
THOUGHT PROCESS
USER EXPERIENCE
DESIGN HYGIENE USER RESEARCH
SURVEY
COLORS
DEVELOPMENT
Graphical and Design Elements
LAYOUTS
TOUCH Always standardize colors, positions and styles.
Keep the background consistent and less clumsy for legibility purposes. WEBPAGE
PROCESSLOAD
USER
Limit the number of transitions per slide to avoid distraction.

USERStandardize
ANALYSIS the style for bullets to ensure consistency.

CROSS CONSISTANCY EMOTION

WINDOWS
Keep similar graphical style for all elements such as icons, imagery, and so on.

PLATFORM INTERACTION
ANDROID
Use one or two iOS
focused images instead of using several small images to avoid visual clutter.

PIXELS ICONSDEVICES
Leave empty/white space around the text and images to enhance cleanliness.
Maintain the same style of graphical imagery throughout. (Such as, Cartoon or Images)
Avoid flashy images and noisy animation effects to avoid unnecessary distraction.
IMAGERY PHOTOGRAPHY DIMENTIONS
NAVIGATION
Always have a Table of Content page and Separator page. This gives the viewers
SEARCH an overview of your presentation as well as some breathing space between topics. REDLINES
FONT PRESENTATION IMPACT LOGOS
TCS Internal
INTERFACE Feedback | Contact Us | Terms of Use
RESPONSIVE
CORPORATE DESIGN
FOR PMs, BRMs
Presentation Dos & Don'ts
GAMIFICATION
Corporate Presentation Dos & Don’ts
THOUGHT PROCESS
USER EXPERIENCE
DESIGN HYGIENE USER RESEARCH
SURVEY
COLORS
DEVELOPMENT
Color Usage
LAYOUTS
TOUCH Limit the number of colors, to avoid disturbance to the eye.
Avoid using more than four colors on one chart/graph. WEBPAGE
PROCESSLOAD
USER
Avoid using vibrant colors as it is difficult to read when projected.

USERAlways
ANALYSIS
use colors in synergy, so that all common elements are represented in the same color shade.

CROSS CONSISTANCY EMOTION

Check all colors as it appears differently on the monitor as compared to when projected.
WINDOWS

PLATFORM INTERACTION
Use colors in ANDROID iOScolors of the organization you are representing.
sync with the brand

PIXELS ICONSDEVICES
Ensure that the contrast ratio is proper and legible between text color and background.

IMAGERY PHOTOGRAPHY DIMENTIONS

NAVIGATION
SEARCH
FONT PRESENTATION IMPACT LOGOS
TCS Internal
INTERFACE
REDLINES
Feedback | Contact Us | Terms of Use
RESPONSIVE
CORPORATE DESIGN
FOR PMs, BRMs
Presentation Dos & Don'ts
GAMIFICATION
Corporate Presentation Dos & Don’ts
THOUGHT PROCESS
USER EXPERIENCE
DESIGN HYGIENE USER RESEARCH
SURVEY
COLORS
DEVELOPMENT
How to use Charts and Graphs
LAYOUTS
TOUCH Presenters are usually guilty of presenting excessive data. So, ask yourself “How much detail do I need?”
Always use appropriate charts to display your data such as: WEBPAGE
PROCESSLOAD
USER
- Pie Charts: These are used to show percentages. Limit to 4-6 slices and contrast the most important

USER ANALYSIS
slice either by color or by exploding the slice from the rest of the pie.

CROSS CONSISTANCY EMOTION

WINDOWS
- Vertical Bar Charts: These are used to show changes in quantity over time. Limit the bars maximum to 4-8.

PLATFORM INTERACTION
ANDROID
- Horizontal Bar iOS
Charts: These are used to compare quantities. For example, when comparing sales figures

PIXELS ICONSDEVICES
among four regions.
- Line Charts: These are used to demonstrate trends. For example, line charts can demonstrate increase in sales
over a period of years.
IMAGERY PHOTOGRAPHY DIMENTIONS
NAVIGATION
Always use bar graphs and pie charts instead of tables of data, whenever possible. If in case you are using tables
SEARCH REDLINES
of data, ensure that the figures are large enough to be easily read from a distance on projection.

FONT PRESENTATION IMPACT LOGOS

TCS Internal
INTERFACE Feedback | Contact Us | Terms of Use
RESPONSIVE
CORPORATE DESIGN
FOR PMs, BRMs
Presentation Dos & Don'ts
GAMIFICATION
Corporate Presentation Dos & Don’ts
THOUGHT PROCESS
USER EXPERIENCE
DESIGN HYGIENE USER RESEARCH
SURVEY
COLORS
DEVELOPMENT
General tips to make your presentation visually appealing
LAYOUTS
TOUCH Avoid using stock templates as they are over used and can be boring. Create your own.
Do not use too many bullet points. Try to tell one story on one slide to make it more compelling. WEBPAGE
PROCESSLOAD
USER
In case you are using background images, ensure that the color and text on it are legible.

USERHighlight
ANALYSIS important points/numbers in different colors to enhance emphasis.

CROSS CONSISTANCY EMOTION

Use visuals toWINDOWS
enhance the emotional appeal of your slide.

PLATFORM INTERACTION
Minimise the ANDROID iOSas it may be disrupting.
usage of transitions

PIXELS ICONSDEVICES
The presentation needs to look uniform in totality with respect to font, content and visual usage.

IMAGERY PHOTOGRAPHY DIMENTIONS

NAVIGATION
SEARCH
FONT PRESENTATION IMPACT LOGOS
TCS Internal
INTERFACE
REDLINES
Feedback | Contact Us | Terms of Use
RESPONSIVE DESIGN
FOR PMs, BRMs

DATA
Visualization
GAMIFICATION
THOUGHT PROCESS
USER EXPERIENCE
DESIGN HYGIENE USER RESEARCH
SURVEY
COLORS
DEVELOPMENT
LAYOUTS
TOUCH WEBPAGE
Data visualization is the presentation of data in a pictorial or graphical format. It
PROCESS
USER
LOAD
enables decision makers to see analytics presented visually, so they can easily grasp
USER ANALYSIS difficult concepts or identify new patterns.

CROSS CONSISTANCY EMOTION

WINDOWS
As the saying goes, ‘A picture is worth a thousand words’.

PLATFORM INTERACTION
ANDROID iOS

PIXELS ICONSDEVICES IMAGERY PHOTOGRAPHY DIMENTIONS

NAVIGATION
SEARCH
FONT PRESENTATION IMPACT LOGOS
TCS Internal
INTERFACE
REDLINES
Feedback | Contact Us | Terms of Use
RESPONSIVE DESIGN
FOR PMs, BRMs

DATA
Visualization
GAMIFICATION
THOUGHT PROCESS
USER EXPERIENCE
DESIGN HYGIENE USER RESEARCH
SURVEY
COLORS
DEVELOPMENT
70%
LAYOUTS
TOUCH WEBPAGE
PROCESS
Studies LOAD
show that the of human sensory receptors
USER ANALYSIS USER
brain processes images are dedicated to vision,

60000
CROSS while the otherEMOTION
CONSISTANCY
WINDOWS
4 senses share
INTERACTION
ANDROID iOS
PLATFORM
ICONS DEVICES
the remaining

30% DIMENTIONS
times faster than text
PIXELSIMAGERY PHOTOGRAPHY
NAVIGATION
SEARCH
FONT PRESENTATION IMPACT LOGOS
TCS Internal
INTERFACE
REDLINES
Feedback | Contact Us | Terms of Use
RESPONSIVE
DATA DESIGN
FOR PMs, BRMs
Visualization
GAMIFICATION
THOUGHT PROCESS
USER EXPERIENCE
DESIGN HYGIENE USER RESEARCH
SURVEY
COLORS
DEVELOPMENT
Let us illustrate the Benefits of Data Visualization:
LAYOUTS
TOUCHHere is a simple table of sales – a year’s worth divided in two regions.
2015 Sales (thousands of USD) WEBPAGE
PROCESSLOAD
USER
USER ANALYSIS Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec Total

CROSSLocal
CONSISTANCY EMOTION
1,883WINDOWS
2,243 2,493 2,183 2,674 2,738 2,182 2,534 2,937 2,739 2,983 3,493 31,082

PLATFORM INTERACTION
ANDROID iOS493

ICONS
National 474 536 573 544 579 393 339 598 583 602 690 6,404

Total

PIXELS DEVICES 2,357 2,779 3,066 2,676 3,218

Advantages of data visualization in form of table:
3,317

IMAGERY PHOTOGRAPHY DIMENTIONS

• Expresses sales values accurately.
2,575 2,873 3,535 3,322 3,585 4,183 37,486

NAVIGATION
• Provides an easy way to look up values for a particular region corresponding to a month.
SEARCH
Disadvantage:
REDLINES
FONT PRESENTATION IMPACT LOGOS
• If we're looking for trends, patterns, or exceptions among these values, or we need to compare whole
sets of values rather than just two at a time, this table fails.
TCS Internal
INTERFACE Feedback | Contact Us | Terms of Use
RESPONSIVE
DATA DESIGN
FOR PMs, BRMs
Visualization
GAMIFICATION
THOUGHT PROCESS
USER EXPERIENCE
DESIGN HYGIENE USER RESEARCH
SURVEY
COLORS
DEVELOPMENT
The same table in the form of a graph: Several facts and insight gets revealed now:
LAYOUTS
TOUCH 2015 Sales
WEBPAGE
Local sales were always higher than national

PROCESSLOAD
USER
sales.

USER ANALYSIS Both sales trended upward, over the year as a

CROSS CONSISTANCY EMOTION

WINDOWS whole.

PLATFORM INTERACTION
ANDROID iOS National sales, decreased sharply in July.

PIXELS ICONSDEVICES IMAGERY PHOTOGRAPHY

Both sales exhibited a similar pattern - always
reaching the peak in the last month of the
quarter and then falling in the first month of
DIMENTIONS
NAVIGATION
the next quarter.
SEARCH REDLINES
FONT PRESENTATION IMPACT LOGOS
TCS Internal
INTERFACE Feedback | Contact Us | Terms of Use
RESPONSIVE
DATA DESIGN
FOR PMs, BRMs
Visualization
GAMIFICATION
THOUGHT PROCESS
USER EXPERIENCE
DESIGN HYGIENE USER RESEARCH
SURVEY
COLORS
DEVELOPMENT
The foundation principles of visualization are:
LAYOUTS
TOUCH Simplicity Similarity & Contrast Continuity Closure
WEBPAGE
Proximity

PROCESSLOAD
USER
USER ANALYSIS
CROSS CONSISTANCY EMOTION
WINDOWS

PLATFORM INTERACTION
ANDROID iOS

PIXELS ICONSDEVICES IMAGERY PHOTOGRAPHY DIMENTIONS

NAVIGATION
The three main qualities of visualization are, that it should be:
SEARCH REDLINES
FONT PRESENTATION IMPACT LOGOS
Intuitive Informative Influencing

TCS Internal
INTERFACE Feedback | Contact Us | Terms of Use
RESPONSIVE DESIGN
FOR PMs, BRMs

DATA
Visualization
GAMIFICATION
THOUGHT PROCESS
USER EXPERIENCE
DESIGN HYGIENE USER RESEARCH
SURVEY
COLORS
DEVELOPMENT
LAYOUTS
TOUCH
What’s the best chart
for your Data? WEBPAGE
PROCESSLOAD
USER
Depends on what you
want to convey through
USER ANALYSIS
the visual.

CROSS CONSISTANCY EMOTION

WINDOWS

PLATFORM INTERACTION
Comparison ANDROID iOS

ICONSDEVICES
Distribution
Composition

PIXELS
Relationship
IMAGERY PHOTOGRAPHY DIMENTIONS
NAVIGATION
SEARCH
FONT PRESENTATION IMPACT LOGOS
TCS Internal
INTERFACE
REDLINES
Feedback | Contact Us | Terms of Use
RESPONSIVE
UX
DESIGN
FOR PMs, BRMs
Resources for better PPTs
GAMIFICATION
THOUGHT PROCESS
USER EXPERIENCE
DESIGN HYGIENE USER RESEARCH
SURVEY
COLORS
DEVELOPMENT
LAYOUTS
TOUCH WEBPAGE
PROCESSGetLOAD
USER
USER ANALYSIS
quick access to User Experience resources that will improve
your presentation deck.
CROSS CONSISTANCY EMOTION
WINDOWS
(Disclaimer: TCS is not responsible for any costs incurred to use/access the third-party resources and tutorials listed.)

PLATFORM INTERACTION
ANDROID iOS

PIXELS ICONSDEVICES IMAGERY PHOTOGRAPHY DIMENTIONS

NAVIGATION
SEARCH
FONT PRESENTATION IMPACT LOGOS
TCS Internal
INTERFACE
REDLINES
Feedback | Contact Us | Terms of Use
RESPONSIVE
UX
DESIGN
FOR PMs, BRMs
Resources for better PPTs
GAMIFICATION
THOUGHT PROCESS
USER EXPERIENCE
DESIGN HYGIENE USER RESEARCH
SURVEY
COLORS
DEVELOPMENT
LAYOUTS
TOUCH PPT Improve
UX
10 Best
Data
Icons
Great
Data WEBPAGE
PROCESSLOAD
You Visualiza Shutter- Visualizat
Won’t Presenta- stock Finder

USER
-tion -ion
Hate tion
Projects Examples
RESOURCES

USER ANALYSIS
CROSS CONSISTANCY EMOTION
WINDOWS

PLATFORM INTERACTION
ANDROID iOS Slide

ICONS
What is Free Source
Carnival Urban

DEVICES
a Pitch PPT for
Free Fonts
Deck Template Slides
Template

PIXELS
RESOURCES

IMAGERY PHOTOGRAPHY DIMENTIONS

NAVIGATION
SEARCH
FONT PRESENTATION IMPACT LOGOS
TCS Internal
INTERFACE
REDLINES
Feedback | Contact Us | Terms of Use
RESPONSIVE DESIGN GAMIFICATION
THOUGHT PROCESS
USER EXPERIENCE
DESIGN HYGIENE USER RESEARCH
SURVEY
COLORS
DEVELOPMENT
LAYOUTS
TOUCH Thank ‘U’WEBPAGE
PROCESSLOAD
USER
USER ANALYSIS
Your feedback will help us improve our learning content

CROSS CONSISTANCY EMOTION

WINDOWS

PLATFORM INTERACTION
Concept & Design
ANDROID iOS

PIXELS ICONSDEVICES IMAGERY PHOTOGRAPHY DIMENTIONS

by

NAVIGATION
SEARCH
FONT PRESENTATION IMPACT LOGOS
TCS Internal
INTERFACE A Microsoft @ Hi Tech initiative
REDLINES
Feedback | Contact Us | Terms of Use