SlideShare uma empresa Scribd logo
1 de 60
Baixar para ler offline
Injecting a brand personality!
UX & UI
JAYAN
NARAYANAN
UX
Brand
UI
Personality is
the platform for
emotion
UI & UX
facets which
define the
Brand
UI design
trends &
disciplines
Understanding
the Platform &
Tools
What is UI
design
Design
for all
devices
Busting UI
Myths
Multi Device
Experience
Understanding
UX Design &
Process &
Workflow
What is UX
design really
means!
UX
Myths
SEO
UXD
Fight
Brand
&
Branding
Injecting
attitude
UX Design
User experience design (UXD) is the process of enhancing
customer satisfaction and loyalty by improving the usability,
ease of use, and pleasure provided in the interaction
between the customer and the product
Content
UI Design
Usability
User Interaction Design
in a broad way...
User
Experience
Design (UX)
Busting UX Myths
MYTH #1
UX=UIUser InterfaceUser Experiance
MYTH #2
You = Your user
MYTH #3
User always know what they want
MYTH #4
UXendswhenuserleavewebsite/screen
MYTH #5
UX best practices always works!
MYTH #6
UX Guru knows all!
MYTH #7
Knowbody know it!!!!!
World is changing...
User too...
Human computer interaction: surface and
gesture interfaces
2D SENSING – SURFACES
3D Depth sensing, Face and body tracking solutions
3D SENSING – GESTURES
home is changed...
SELF LEARNING APPLIANCES
life style is changing...
WEARABLE COMPUTING
Elements of UX
http://experoinc.com/user-experience-is-not-graphic-design/
THE SURFACE - Visual Design / UI
THE SKELETON - Wire-frame,
Interaction patterns, Global navigation ...
THE STRUCTURE - Information
architecture, Defining content ...
THE SCOPE - Functionality,
Usefulness, Requirements ...
THE STRATEGY - Business
requirements, Defining user Needs, Goals
and Aspirations ...
Behind the scene
ask... until you know it all
BRIEFING
create hierarchy and flow...
CONTENT ARCHITECTURE
make a plan...
WIREFRAMING
it shows all the interaction flaws
PROTOTYPING
look & feel - front-end design
USER INTERFACE DESIGN
user centered testing over gut feel
USER TESTING & FINE TUNING
finding patterns in facts & figures
ANALYTICS REPORTS
Winning a
SEO & UX fight!!
optimization
engine
search
Having a website that lacks customer is like having
no website, design and behavior of website are need
must if you want sale more, SEO is way to bring visitor
on website but they leave it if your website
not hold them
UI Design
User Interface Design (UID) is a process of visually
guiding the user through a product’s interface via
interactive elements and across all sizes/platforms.
UID is responsible for the transference of a brand’s
strengths and visual assets to a product’s interface as
to best enhance the user’s experience
merging similar functions instead of
fragmenting the UI
Over the course of time, it’s easy to unintentionally create multiple sections, elements
and features which all perform the same function. It’s basic entropy - things start falling
apart over time. Duplicate functionality labelled in various ways, as it puts a strain on your
customers. Often, the more UI fragmentation there is, the higher the learning curve which
your customers will have to deal with.
UI IDEAS #1
UI IDEAS #2
distinct clickable/selected styles
instead of blurring them
Visual styling such as color, depth, and contrast may be used as a reliable cue to help people
understand the fundamental language of navigating your interface: where am I, and where
can I go. In order to communicate this clearly to your users, the styles of your clickable
actions (links, buttons), selected elements (chosen items), and plain text should be clearly
distinct from one another and then applied consistently across an interface.
UI IDEAS #3
fewer form fields instead of
asking for too many
Human beings are inherently resistant to labor intensive tasks and this same idea also applies
to filling out form fields. Each field you ask for runs the risk of making your visitors turn
around and give up. Question if each field is really necessary and remove as many fields as
possible. If you really have numerous optional fields, then also consider moving them after
form submission on a separate page or state.
UI IDEAS #4
keeping focus instead of
drowning with links
It’s easy to create a page with lots of links going left and right in the hope of meeting as many
customer needs as possible. Be aware that any link above the primary CTA runs the risk of
taking your customers away from what you’ve been hoping them to do. Keep an eye out on the
number of links on your pages as too much links affects SEO badly. Removing extraneous links
can be a sure way to increase someone’s chances of reaching that important button.
UI IDEAS #5
benefit buttons instead of just task
based ones.
The hypothesis set here is that buttons which reinforce a benefit might lead to higher
conversions. Alternatively, the benefit can also be placed closely to where the action button
is in order to remind people why they are about to take that action. Surely, there is still room
for task based actions buttons, but those can be reserved for interface areas that require less
convincing and are more recurring in use.
UI IDEAS #6
gradual engagement instead of a
hasty sign up.
Instead of asking visitors to sign up immediately, ask them to first perform a task through which
something of value is demonstrated. Once users begin to see your product’s value and see how they
can make it their own, they will then be more open to sharing with you additional information. Gradual
engagement is really a way to postpone the sign up process as much as possible and still allow users
to use and customize your application or product.
UI IDEAS #7
consistency instead of making
people relearn.
Striving for consistency in user interface design is probably one of the most well known
principles. Having a more consistent UI or interaction is simply a great way to decrease the
amount of learning someone has to go through as they use an interface or product.
Busting UI Myths
MYTH #1
UI=Decoration
MYTH #2
everything has to be above the fold -
put maximum above 600 pixels!
MYTH #3
three clicks from the homepage -
shortcuts always works!
MYTH #4
homepage is the most important page -
users come to home directly!
MYTH #5
on a web page what ever not moving is
dead - auto movements are good!
New age design
Trends & Disciplines
MOBILE FIRST APPROACH
start the design from small screen
METRO DESIGN
revolution @ Microsoft interface
MATERIAL DESIGN
Google making own interaction standards
MINIMALISM & FLAT VS SKEUOMORPHIC
fashion circles... may be :)
NEW VISUAL TRENDS
big on typo...
CONTINUES...
big on visuals...
CONTINUES...
big on social icons...
RESPONSIVE DESIGN
design for every device - HTML 5
INTERACTIVE VIDEOS
loading techs, story telling, annotations...
RESPONSIVE INFOGRAPHICS
1 pic = 1000 words. interactive pic = much more
STORYTELLING PARALLAX
fun of discovering and exploring
UX & UI: Injecting a
Brand Persona!
The micro interactions, or moments of delight- Micro copies
Usage of colours- Create a mood board
Typography- Making a character
Interactive animations  Transitions- Intuitive  make it alive
Visual elements- Communicate the idea
The usability- Focused
The content strategy touchpoints- Notifications, social media presence
Thank you!
Jayan Narayanan
jayan.narayanan@gmail.com

Mais conteúdo relacionado

Mais procurados

Why UI & UX Design Matters? For building digital and software products
Why UI & UX Design Matters? For building digital and software productsWhy UI & UX Design Matters? For building digital and software products
Why UI & UX Design Matters? For building digital and software productsBoldare
 
User Experience Workshop
User Experience WorkshopUser Experience Workshop
User Experience WorkshopMotivate Design
 
10 Design Trends 2015 - UX & UI Trends for Mobile Solutions
10 Design Trends 2015 - UX & UI Trends for Mobile Solutions10 Design Trends 2015 - UX & UI Trends for Mobile Solutions
10 Design Trends 2015 - UX & UI Trends for Mobile SolutionsDMI
 
UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!Jayan Narayanan
 
Flat Design. Microsoft Story
Flat Design. Microsoft StoryFlat Design. Microsoft Story
Flat Design. Microsoft StoryNikita Lukianets
 
UX & UI: The differences between two abbreviations
UX & UI: The differences between two abbreviationsUX & UI: The differences between two abbreviations
UX & UI: The differences between two abbreviationsJessica Kainu
 
Why Mobile App Should Upgrade to UX/UI Design?
Why Mobile App Should Upgrade to UX/UI Design?Why Mobile App Should Upgrade to UX/UI Design?
Why Mobile App Should Upgrade to UX/UI Design?AppClues Infotech
 
Introduction to User Experience Design
Introduction to User Experience DesignIntroduction to User Experience Design
Introduction to User Experience DesignRavi Bhadauria
 
[UX Series] 1 - UX Introduction
[UX Series] 1 - UX Introduction[UX Series] 1 - UX Introduction
[UX Series] 1 - UX IntroductionPhuong Hoang Vu
 
2016 Mobile Design & UX Trends
2016 Mobile Design & UX Trends2016 Mobile Design & UX Trends
2016 Mobile Design & UX TrendsMiva
 
Bridging the gap: Brand Experience vs Product Development
Bridging the gap: Brand Experience vs Product DevelopmentBridging the gap: Brand Experience vs Product Development
Bridging the gap: Brand Experience vs Product DevelopmentLillian Ayla Ersoy
 
UI Design, Trends, Patterns and User Experience - Academy of Design
UI Design, Trends, Patterns and User Experience - Academy of DesignUI Design, Trends, Patterns and User Experience - Academy of Design
UI Design, Trends, Patterns and User Experience - Academy of DesignShiran Sanjeewa
 
LaSoft | Unique UI/UX design based on your ideas and user’s preferences
LaSoft | Unique UI/UX design based on your ideas and user’s preferencesLaSoft | Unique UI/UX design based on your ideas and user’s preferences
LaSoft | Unique UI/UX design based on your ideas and user’s preferencesIgor Vivchar
 
Design Thinking Guide for Successful Professionals- Chapter 1
Design Thinking Guide for Successful Professionals- Chapter 1Design Thinking Guide for Successful Professionals- Chapter 1
Design Thinking Guide for Successful Professionals- Chapter 1archholy
 
User Experience Explained
User Experience ExplainedUser Experience Explained
User Experience ExplainedSameer dwivedi
 
UI & UX DESIGN FOR MOBILE
UI & UX DESIGN FOR MOBILEUI & UX DESIGN FOR MOBILE
UI & UX DESIGN FOR MOBILEJoseph Ssekono
 
Article on User Experience 2004
Article on User Experience 2004Article on User Experience 2004
Article on User Experience 2004Different
 

Mais procurados (20)

Why UI & UX Design Matters? For building digital and software products
Why UI & UX Design Matters? For building digital and software productsWhy UI & UX Design Matters? For building digital and software products
Why UI & UX Design Matters? For building digital and software products
 
User Experience Workshop
User Experience WorkshopUser Experience Workshop
User Experience Workshop
 
10 Design Trends 2015 - UX & UI Trends for Mobile Solutions
10 Design Trends 2015 - UX & UI Trends for Mobile Solutions10 Design Trends 2015 - UX & UI Trends for Mobile Solutions
10 Design Trends 2015 - UX & UI Trends for Mobile Solutions
 
UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!
 
Flat Design. Microsoft Story
Flat Design. Microsoft StoryFlat Design. Microsoft Story
Flat Design. Microsoft Story
 
UX & UI: The differences between two abbreviations
UX & UI: The differences between two abbreviationsUX & UI: The differences between two abbreviations
UX & UI: The differences between two abbreviations
 
Why Mobile App Should Upgrade to UX/UI Design?
Why Mobile App Should Upgrade to UX/UI Design?Why Mobile App Should Upgrade to UX/UI Design?
Why Mobile App Should Upgrade to UX/UI Design?
 
UX design. What, how and why.
UX design. What, how and why.UX design. What, how and why.
UX design. What, how and why.
 
Design process
Design processDesign process
Design process
 
Introduction to User Experience Design
Introduction to User Experience DesignIntroduction to User Experience Design
Introduction to User Experience Design
 
[UX Series] 1 - UX Introduction
[UX Series] 1 - UX Introduction[UX Series] 1 - UX Introduction
[UX Series] 1 - UX Introduction
 
2016 Mobile Design & UX Trends
2016 Mobile Design & UX Trends2016 Mobile Design & UX Trends
2016 Mobile Design & UX Trends
 
Bridging the gap: Brand Experience vs Product Development
Bridging the gap: Brand Experience vs Product DevelopmentBridging the gap: Brand Experience vs Product Development
Bridging the gap: Brand Experience vs Product Development
 
UI Design, Trends, Patterns and User Experience - Academy of Design
UI Design, Trends, Patterns and User Experience - Academy of DesignUI Design, Trends, Patterns and User Experience - Academy of Design
UI Design, Trends, Patterns and User Experience - Academy of Design
 
LaSoft | Unique UI/UX design based on your ideas and user’s preferences
LaSoft | Unique UI/UX design based on your ideas and user’s preferencesLaSoft | Unique UI/UX design based on your ideas and user’s preferences
LaSoft | Unique UI/UX design based on your ideas and user’s preferences
 
Design Thinking Guide for Successful Professionals- Chapter 1
Design Thinking Guide for Successful Professionals- Chapter 1Design Thinking Guide for Successful Professionals- Chapter 1
Design Thinking Guide for Successful Professionals- Chapter 1
 
User Experience Explained
User Experience ExplainedUser Experience Explained
User Experience Explained
 
UX Fundamentals for Startups
UX Fundamentals for StartupsUX Fundamentals for Startups
UX Fundamentals for Startups
 
UI & UX DESIGN FOR MOBILE
UI & UX DESIGN FOR MOBILEUI & UX DESIGN FOR MOBILE
UI & UX DESIGN FOR MOBILE
 
Article on User Experience 2004
Article on User Experience 2004Article on User Experience 2004
Article on User Experience 2004
 

Semelhante a Jayannarayanan uxdesignpresentation 141110023429 conversion gate01

The Essential UIUX Designing Principles to Follow for Maintain Customer Engag...
The Essential UIUX Designing Principles to Follow for Maintain Customer Engag...The Essential UIUX Designing Principles to Follow for Maintain Customer Engag...
The Essential UIUX Designing Principles to Follow for Maintain Customer Engag...Inexture Solutions
 
Web UI Design Examples.pdf
Web UI Design Examples.pdfWeb UI Design Examples.pdf
Web UI Design Examples.pdfAyesha Siddika
 
UI vs. UX: What’s the difference?
UI vs. UX: What’s the difference?UI vs. UX: What’s the difference?
UI vs. UX: What’s the difference?DariaPersell
 
Top 10 Skills For UI/UX Designers
Top 10 Skills For UI/UX DesignersTop 10 Skills For UI/UX Designers
Top 10 Skills For UI/UX Designerstopseowebmaster
 
How Can UX Design Generate Demand
How Can UX Design Generate DemandHow Can UX Design Generate Demand
How Can UX Design Generate DemandWorxwideConsulting1
 
UI_UX Design Program.pdf
UI_UX Design Program.pdfUI_UX Design Program.pdf
UI_UX Design Program.pdftopseowebmaster
 
Understanding UI/UX Design by Aroyewun Babajide
Understanding UI/UX Design by Aroyewun BabajideUnderstanding UI/UX Design by Aroyewun Babajide
Understanding UI/UX Design by Aroyewun BabajideBabajide Aroyewun
 
What Are the Roles and Responsibility of a UX UI Designer.docx
What Are the Roles and Responsibility of a UX UI Designer.docxWhat Are the Roles and Responsibility of a UX UI Designer.docx
What Are the Roles and Responsibility of a UX UI Designer.docxWilliamJames717223
 
Xovex e book, ux & ui
Xovex e book, ux & uiXovex e book, ux & ui
Xovex e book, ux & uiShishir Gupta
 
What’s the difference between a UX and UI designer? (Part two)
What’s the difference between a UX and UI designer? (Part two)What’s the difference between a UX and UI designer? (Part two)
What’s the difference between a UX and UI designer? (Part two)iFactory Digital
 
Design Best Practices - TechAhead Corp
Design Best Practices  -  TechAhead CorpDesign Best Practices  -  TechAhead Corp
Design Best Practices - TechAhead CorpTechAhead Corp
 
Ui ux design trends that will dominate in 2021
Ui ux design trends that will dominate in 2021Ui ux design trends that will dominate in 2021
Ui ux design trends that will dominate in 2021Kelly Ston
 
UI Development Content
UI Development ContentUI Development Content
UI Development ContentMUDDUKRISHNA14
 
UI Development Content
UI Development ContentUI Development Content
UI Development ContentMUDDUKRISHNA14
 
interaction design trends 2015 _ 2016
interaction design trends 2015 _ 2016interaction design trends 2015 _ 2016
interaction design trends 2015 _ 2016Halil Eren Çelik
 
Why Does a UI Matters?
Why Does a UI Matters?Why Does a UI Matters?
Why Does a UI Matters?NotifyVisitors
 

Semelhante a Jayannarayanan uxdesignpresentation 141110023429 conversion gate01 (20)

UI.docx
UI.docxUI.docx
UI.docx
 
UI.docx
UI.docxUI.docx
UI.docx
 
The Essential UIUX Designing Principles to Follow for Maintain Customer Engag...
The Essential UIUX Designing Principles to Follow for Maintain Customer Engag...The Essential UIUX Designing Principles to Follow for Maintain Customer Engag...
The Essential UIUX Designing Principles to Follow for Maintain Customer Engag...
 
Web UI Design Examples.pdf
Web UI Design Examples.pdfWeb UI Design Examples.pdf
Web UI Design Examples.pdf
 
UI vs. UX: What’s the difference?
UI vs. UX: What’s the difference?UI vs. UX: What’s the difference?
UI vs. UX: What’s the difference?
 
Top 10 Skills For UI/UX Designers
Top 10 Skills For UI/UX DesignersTop 10 Skills For UI/UX Designers
Top 10 Skills For UI/UX Designers
 
How Can UX Design Generate Demand
How Can UX Design Generate DemandHow Can UX Design Generate Demand
How Can UX Design Generate Demand
 
UI_UX Design Program.pdf
UI_UX Design Program.pdfUI_UX Design Program.pdf
UI_UX Design Program.pdf
 
Understanding UI/UX Design by Aroyewun Babajide
Understanding UI/UX Design by Aroyewun BabajideUnderstanding UI/UX Design by Aroyewun Babajide
Understanding UI/UX Design by Aroyewun Babajide
 
The Fundamentals of UI and UX Design - Cuneiform
The Fundamentals of UI and UX Design - CuneiformThe Fundamentals of UI and UX Design - Cuneiform
The Fundamentals of UI and UX Design - Cuneiform
 
What Are the Roles and Responsibility of a UX UI Designer.docx
What Are the Roles and Responsibility of a UX UI Designer.docxWhat Are the Roles and Responsibility of a UX UI Designer.docx
What Are the Roles and Responsibility of a UX UI Designer.docx
 
Xovex e book, ux & ui
Xovex e book, ux & uiXovex e book, ux & ui
Xovex e book, ux & ui
 
What’s the difference between a UX and UI designer? (Part two)
What’s the difference between a UX and UI designer? (Part two)What’s the difference between a UX and UI designer? (Part two)
What’s the difference between a UX and UI designer? (Part two)
 
Design Best Practices - TechAhead Corp
Design Best Practices  -  TechAhead CorpDesign Best Practices  -  TechAhead Corp
Design Best Practices - TechAhead Corp
 
Ui ux design trends that will dominate in 2021
Ui ux design trends that will dominate in 2021Ui ux design trends that will dominate in 2021
Ui ux design trends that will dominate in 2021
 
UI Development Content
UI Development ContentUI Development Content
UI Development Content
 
UI Development Content
UI Development ContentUI Development Content
UI Development Content
 
interaction design trends 2015 _ 2016
interaction design trends 2015 _ 2016interaction design trends 2015 _ 2016
interaction design trends 2015 _ 2016
 
Why Does a UI Matters?
Why Does a UI Matters?Why Does a UI Matters?
Why Does a UI Matters?
 
UI content
UI contentUI content
UI content
 

Mais de Vera Kovaleva (20)

44.Title slide.pdf
44.Title slide.pdf44.Title slide.pdf
44.Title slide.pdf
 
47.Thank you.pdf
47.Thank you.pdf47.Thank you.pdf
47.Thank you.pdf
 
49.Call to action.pdf
49.Call to action.pdf49.Call to action.pdf
49.Call to action.pdf
 
48.Questions.pdf
48.Questions.pdf48.Questions.pdf
48.Questions.pdf
 
42.Coordinate System.pdf
42.Coordinate System.pdf42.Coordinate System.pdf
42.Coordinate System.pdf
 
50.Last slide.pdf
50.Last slide.pdf50.Last slide.pdf
50.Last slide.pdf
 
43.Comparison.pdf
43.Comparison.pdf43.Comparison.pdf
43.Comparison.pdf
 
45.Second slides.pdf
45.Second slides.pdf45.Second slides.pdf
45.Second slides.pdf
 
46.Section.pdf
46.Section.pdf46.Section.pdf
46.Section.pdf
 
41.Continuum.pdf
41.Continuum.pdf41.Continuum.pdf
41.Continuum.pdf
 
36.Timeline.pdf
36.Timeline.pdf36.Timeline.pdf
36.Timeline.pdf
 
39.Cloud.pdf
39.Cloud.pdf39.Cloud.pdf
39.Cloud.pdf
 
34.Scheme.pdf
34.Scheme.pdf34.Scheme.pdf
34.Scheme.pdf
 
40.Circles.pdf
40.Circles.pdf40.Circles.pdf
40.Circles.pdf
 
35.Process.pdf
35.Process.pdf35.Process.pdf
35.Process.pdf
 
38.Multiplicity.pdf
38.Multiplicity.pdf38.Multiplicity.pdf
38.Multiplicity.pdf
 
37.Arrow.pdf
37.Arrow.pdf37.Arrow.pdf
37.Arrow.pdf
 
31.Mind.pdf
31.Mind.pdf31.Mind.pdf
31.Mind.pdf
 
32.Time.pdf
32.Time.pdf32.Time.pdf
32.Time.pdf
 
33.Orbit.pdf
33.Orbit.pdf33.Orbit.pdf
33.Orbit.pdf
 

Último

ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.MaryamAhmad92
 
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...pradhanghanshyam7136
 
This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.christianmathematics
 
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...Nguyen Thanh Tu Collection
 
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptxMaritesTamaniVerdade
 
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...Pooja Bhuva
 
Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)Jisc
 
Understanding Accommodations and Modifications
Understanding  Accommodations and ModificationsUnderstanding  Accommodations and Modifications
Understanding Accommodations and ModificationsMJDuyan
 
How to setup Pycharm environment for Odoo 17.pptx
How to setup Pycharm environment for Odoo 17.pptxHow to setup Pycharm environment for Odoo 17.pptx
How to setup Pycharm environment for Odoo 17.pptxCeline George
 
Salient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functionsSalient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functionsKarakKing
 
How to Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17How to Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17Celine George
 
Interdisciplinary_Insights_Data_Collection_Methods.pptx
Interdisciplinary_Insights_Data_Collection_Methods.pptxInterdisciplinary_Insights_Data_Collection_Methods.pptx
Interdisciplinary_Insights_Data_Collection_Methods.pptxPooja Bhuva
 
REMIFENTANIL: An Ultra short acting opioid.pptx
REMIFENTANIL: An Ultra short acting opioid.pptxREMIFENTANIL: An Ultra short acting opioid.pptx
REMIFENTANIL: An Ultra short acting opioid.pptxDr. Ravikiran H M Gowda
 
Google Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptxGoogle Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptxDr. Sarita Anand
 
Spellings Wk 3 English CAPS CARES Please Practise
Spellings Wk 3 English CAPS CARES Please PractiseSpellings Wk 3 English CAPS CARES Please Practise
Spellings Wk 3 English CAPS CARES Please PractiseAnaAcapella
 
Food safety_Challenges food safety laboratories_.pdf
Food safety_Challenges food safety laboratories_.pdfFood safety_Challenges food safety laboratories_.pdf
Food safety_Challenges food safety laboratories_.pdfSherif Taha
 
Sociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning ExhibitSociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning Exhibitjbellavia9
 
SKILL OF INTRODUCING THE LESSON MICRO SKILLS.pptx
SKILL OF INTRODUCING THE LESSON MICRO SKILLS.pptxSKILL OF INTRODUCING THE LESSON MICRO SKILLS.pptx
SKILL OF INTRODUCING THE LESSON MICRO SKILLS.pptxAmanpreet Kaur
 
General Principles of Intellectual Property: Concepts of Intellectual Proper...
General Principles of Intellectual Property: Concepts of Intellectual  Proper...General Principles of Intellectual Property: Concepts of Intellectual  Proper...
General Principles of Intellectual Property: Concepts of Intellectual Proper...Poonam Aher Patil
 
Wellbeing inclusion and digital dystopias.pptx
Wellbeing inclusion and digital dystopias.pptxWellbeing inclusion and digital dystopias.pptx
Wellbeing inclusion and digital dystopias.pptxJisc
 

Último (20)

ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.
 
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
 
This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.
 
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
 
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
 
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
 
Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)
 
Understanding Accommodations and Modifications
Understanding  Accommodations and ModificationsUnderstanding  Accommodations and Modifications
Understanding Accommodations and Modifications
 
How to setup Pycharm environment for Odoo 17.pptx
How to setup Pycharm environment for Odoo 17.pptxHow to setup Pycharm environment for Odoo 17.pptx
How to setup Pycharm environment for Odoo 17.pptx
 
Salient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functionsSalient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functions
 
How to Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17How to Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17
 
Interdisciplinary_Insights_Data_Collection_Methods.pptx
Interdisciplinary_Insights_Data_Collection_Methods.pptxInterdisciplinary_Insights_Data_Collection_Methods.pptx
Interdisciplinary_Insights_Data_Collection_Methods.pptx
 
REMIFENTANIL: An Ultra short acting opioid.pptx
REMIFENTANIL: An Ultra short acting opioid.pptxREMIFENTANIL: An Ultra short acting opioid.pptx
REMIFENTANIL: An Ultra short acting opioid.pptx
 
Google Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptxGoogle Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptx
 
Spellings Wk 3 English CAPS CARES Please Practise
Spellings Wk 3 English CAPS CARES Please PractiseSpellings Wk 3 English CAPS CARES Please Practise
Spellings Wk 3 English CAPS CARES Please Practise
 
Food safety_Challenges food safety laboratories_.pdf
Food safety_Challenges food safety laboratories_.pdfFood safety_Challenges food safety laboratories_.pdf
Food safety_Challenges food safety laboratories_.pdf
 
Sociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning ExhibitSociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning Exhibit
 
SKILL OF INTRODUCING THE LESSON MICRO SKILLS.pptx
SKILL OF INTRODUCING THE LESSON MICRO SKILLS.pptxSKILL OF INTRODUCING THE LESSON MICRO SKILLS.pptx
SKILL OF INTRODUCING THE LESSON MICRO SKILLS.pptx
 
General Principles of Intellectual Property: Concepts of Intellectual Proper...
General Principles of Intellectual Property: Concepts of Intellectual  Proper...General Principles of Intellectual Property: Concepts of Intellectual  Proper...
General Principles of Intellectual Property: Concepts of Intellectual Proper...
 
Wellbeing inclusion and digital dystopias.pptx
Wellbeing inclusion and digital dystopias.pptxWellbeing inclusion and digital dystopias.pptx
Wellbeing inclusion and digital dystopias.pptx
 

Jayannarayanan uxdesignpresentation 141110023429 conversion gate01

  • 1. Injecting a brand personality! UX & UI JAYAN NARAYANAN
  • 2. UX Brand UI Personality is the platform for emotion UI & UX facets which define the Brand UI design trends & disciplines Understanding the Platform & Tools What is UI design Design for all devices Busting UI Myths Multi Device Experience Understanding UX Design & Process & Workflow What is UX design really means! UX Myths SEO UXD Fight Brand & Branding Injecting attitude
  • 4. User experience design (UXD) is the process of enhancing customer satisfaction and loyalty by improving the usability, ease of use, and pleasure provided in the interaction between the customer and the product
  • 5. Content UI Design Usability User Interaction Design in a broad way... User Experience Design (UX)
  • 8. MYTH #2 You = Your user
  • 9. MYTH #3 User always know what they want
  • 11. MYTH #5 UX best practices always works!
  • 12. MYTH #6 UX Guru knows all!
  • 15. Human computer interaction: surface and gesture interfaces 2D SENSING – SURFACES
  • 16. 3D Depth sensing, Face and body tracking solutions 3D SENSING – GESTURES
  • 17. home is changed... SELF LEARNING APPLIANCES
  • 18. life style is changing... WEARABLE COMPUTING
  • 20. http://experoinc.com/user-experience-is-not-graphic-design/ THE SURFACE - Visual Design / UI THE SKELETON - Wire-frame, Interaction patterns, Global navigation ... THE STRUCTURE - Information architecture, Defining content ... THE SCOPE - Functionality, Usefulness, Requirements ... THE STRATEGY - Business requirements, Defining user Needs, Goals and Aspirations ...
  • 22. ask... until you know it all BRIEFING
  • 23. create hierarchy and flow... CONTENT ARCHITECTURE
  • 25. it shows all the interaction flaws PROTOTYPING
  • 26. look & feel - front-end design USER INTERFACE DESIGN
  • 27. user centered testing over gut feel USER TESTING & FINE TUNING
  • 28. finding patterns in facts & figures ANALYTICS REPORTS
  • 29. Winning a SEO & UX fight!! optimization engine search
  • 30. Having a website that lacks customer is like having no website, design and behavior of website are need must if you want sale more, SEO is way to bring visitor on website but they leave it if your website not hold them
  • 32. User Interface Design (UID) is a process of visually guiding the user through a product’s interface via interactive elements and across all sizes/platforms. UID is responsible for the transference of a brand’s strengths and visual assets to a product’s interface as to best enhance the user’s experience
  • 33. merging similar functions instead of fragmenting the UI Over the course of time, it’s easy to unintentionally create multiple sections, elements and features which all perform the same function. It’s basic entropy - things start falling apart over time. Duplicate functionality labelled in various ways, as it puts a strain on your customers. Often, the more UI fragmentation there is, the higher the learning curve which your customers will have to deal with. UI IDEAS #1
  • 34. UI IDEAS #2 distinct clickable/selected styles instead of blurring them Visual styling such as color, depth, and contrast may be used as a reliable cue to help people understand the fundamental language of navigating your interface: where am I, and where can I go. In order to communicate this clearly to your users, the styles of your clickable actions (links, buttons), selected elements (chosen items), and plain text should be clearly distinct from one another and then applied consistently across an interface.
  • 35. UI IDEAS #3 fewer form fields instead of asking for too many Human beings are inherently resistant to labor intensive tasks and this same idea also applies to filling out form fields. Each field you ask for runs the risk of making your visitors turn around and give up. Question if each field is really necessary and remove as many fields as possible. If you really have numerous optional fields, then also consider moving them after form submission on a separate page or state.
  • 36. UI IDEAS #4 keeping focus instead of drowning with links It’s easy to create a page with lots of links going left and right in the hope of meeting as many customer needs as possible. Be aware that any link above the primary CTA runs the risk of taking your customers away from what you’ve been hoping them to do. Keep an eye out on the number of links on your pages as too much links affects SEO badly. Removing extraneous links can be a sure way to increase someone’s chances of reaching that important button.
  • 37. UI IDEAS #5 benefit buttons instead of just task based ones. The hypothesis set here is that buttons which reinforce a benefit might lead to higher conversions. Alternatively, the benefit can also be placed closely to where the action button is in order to remind people why they are about to take that action. Surely, there is still room for task based actions buttons, but those can be reserved for interface areas that require less convincing and are more recurring in use.
  • 38. UI IDEAS #6 gradual engagement instead of a hasty sign up. Instead of asking visitors to sign up immediately, ask them to first perform a task through which something of value is demonstrated. Once users begin to see your product’s value and see how they can make it their own, they will then be more open to sharing with you additional information. Gradual engagement is really a way to postpone the sign up process as much as possible and still allow users to use and customize your application or product.
  • 39. UI IDEAS #7 consistency instead of making people relearn. Striving for consistency in user interface design is probably one of the most well known principles. Having a more consistent UI or interaction is simply a great way to decrease the amount of learning someone has to go through as they use an interface or product.
  • 42. MYTH #2 everything has to be above the fold - put maximum above 600 pixels!
  • 43. MYTH #3 three clicks from the homepage - shortcuts always works!
  • 44. MYTH #4 homepage is the most important page - users come to home directly!
  • 45. MYTH #5 on a web page what ever not moving is dead - auto movements are good!
  • 46. New age design Trends & Disciplines
  • 47. MOBILE FIRST APPROACH start the design from small screen
  • 48. METRO DESIGN revolution @ Microsoft interface
  • 49. MATERIAL DESIGN Google making own interaction standards
  • 50. MINIMALISM & FLAT VS SKEUOMORPHIC fashion circles... may be :)
  • 51. NEW VISUAL TRENDS big on typo...
  • 54. RESPONSIVE DESIGN design for every device - HTML 5
  • 55. INTERACTIVE VIDEOS loading techs, story telling, annotations...
  • 56. RESPONSIVE INFOGRAPHICS 1 pic = 1000 words. interactive pic = much more
  • 57. STORYTELLING PARALLAX fun of discovering and exploring
  • 58. UX & UI: Injecting a Brand Persona!
  • 59. The micro interactions, or moments of delight- Micro copies Usage of colours- Create a mood board Typography- Making a character Interactive animations Transitions- Intuitive make it alive Visual elements- Communicate the idea The usability- Focused The content strategy touchpoints- Notifications, social media presence