SlideShare a Scribd company logo
Uday M. Shankar
   BANGALORE

 27 JULY 2011
LinkedIn – Twitter – G+ – Facebook – Skype

      g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com   2
U S E R
                                                                                                     INTERFACE
                                                                                                     DESIGN
g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com   3
USER INTERFACE DESIGN
                                                                                                     USER




                                                                                  TASK                      CONTEXT




    g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com                    4
USER BEHAVIOR
                                                                                                 f(U,E)
                                                                                                     Lewin’s equation




                                                                                    Behavior is a function of the User &
                                                                                                        the Environment
                                                                                                                        5




g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com
IT DOES
                                                                                                     REALLY
g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com   6
                                                                                                     MATTER
CASE IN POINT




g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com   7
BAD TOUCH




g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com
                                                                                                 T
                                                                                                 8
GOOD
                                                                                                     DESIGN
g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com   9
GROUND RULES

R T
g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com   10
CLEAR


g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com   11
CLEAR




T                                                                              R
g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com   12
MINIMAL


g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com   13
MINIMAL




                                       T
source:	
  h*p://www.slideshare.net/aweyenberg/realis8c-­‐user-­‐interface-­‐design	
  
                                                                                                                                     R
                                                      g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com   14
RESPONSIVE


g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com   15
RESPONSIVE




                                     R
g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com   16
FORGIVING


g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com   17
FORGIVING




                                     R
g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com   18
FAMILIAR


g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com   19
FAMILIAR




                                                                            R
source:	
  h*p://www.slideshare.net/aweyenberg/realis8c-­‐user-­‐interface-­‐design	
  
                                   g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com   20
DIFFERENT


g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com   21
DIFFERENT




                                     R
g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com   22
CONSISTENT


g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com   23
CONSISTENT




                                     T
g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com   24
LEVERAGE HARDWARE
     PROPERLY


 g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com   25
LEVERAGE HARDWARE PROPERLY
                                                                                            R

source:	
  h*p://www.slideshare.net/aweyenberg/realis8c-­‐user-­‐interface-­‐design	
  




                                                                                          T
                                                g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com   26
WELL INTEGRATED


 g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com   27
B A D
                                                                                                      DESIGN
g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com   28
BROWSER WARS ARE BACK


    g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com   29
BROWSER WARS ARE BACK




 g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com   30
ONE SIZE FITS ALL


 g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com   31
EVERYTHING ON THE WEB


    g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com   32
HTML5 <> FLASH


 g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com   33
OVERDOING REALISM


  g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com   34
UGLY
                                                                                                      DESIGN
g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com   35
“EVERYONE LIKES IT”


   g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com   36
“DRAG-N-DROP IS SO COOL”


     g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com   37
“MUST CONFIRM EVERYTHING”



     g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com   38
“CUSTOM COMPONENTS? COOL!”



     g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com   39
“LET’S HARDCODE STUFF”


    g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com   40
“GRAPHIC DESIGN = UI DESIGN”



      g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com   41
“IT’S JUST AN ENTERPRISE APP”



      g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com   42
“MORE IS GOOD”


g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com   43
DESIGN
g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com   44
HOW COMPLEX CAN YOU MAKE IT?




                                                                                 T
    g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com   45
METAPHORS SOMETIMES BACKFIRE




source:	
  h*p://www.slideshare.net/aweyenberg/realis8c-­‐user-­‐interface-­‐design	
                              T
                                      g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com   46
GRADIENT OVERLOAD




                                                                             T
g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com   47
NICE & WELL DESIGNED




                                                                             R
g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com   48
WHY?




                                                                             T
g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com   49
CLEAN, CRISP, CONSISTENT




                                                                              R
 g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com   50
DEATH BY COLORS




                                                                             T
g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com   51
SOMETIMES ‘DIFFERENT’ MAKES SENSE




                                                                                      R
      g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com   52
WHY CAN’T THEY BE BETTER?




                                                                               T
  g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com   53
WHITESPACE MAKES A DIFFERENCE




                                                                                    R
    g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com   54
DON’T OVER-DO REALITY



source:	
  h*p://www.slideshare.net/aweyenberg/realis8c-­‐user-­‐interface-­‐design	
  




                                                                                                                             T
                                                g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com   55
MAKE IT DELIGHTFUL




g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com
                                                                                                 R
                                                                                                 56
MAKE IT JUST WORK




g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com
                                                                                                 R
                                                                                                 57
MAKE IT JUST WORK




g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com
                                                                                                 R
                                                                                                 58
acrossthinlines.com | facebook.com/across.thin.lines | twitter.com/acrossthinlines

More Related Content

What's hot

Empathy Maps
Empathy MapsEmpathy Maps
Empathy Maps
DCU_MPIUA
 
UX Fundamentals for Startups
UX Fundamentals for StartupsUX Fundamentals for Startups
UX Fundamentals for Startups
Growth Hacking Asia
 
UI Design Patterns for the Web, Part 1
UI Design Patterns for the Web, Part 1UI Design Patterns for the Web, Part 1
UI Design Patterns for the Web, Part 1
Lewis Lin 🦊
 
For us by us: market creation through community engagement
For us by us: market creation through community engagementFor us by us: market creation through community engagement
For us by us: market creation through community engagement
Roberta Tassi
 
Design System & Atomic Design
Design System & Atomic DesignDesign System & Atomic Design
Design System & Atomic Design
eggcellent
 
What is a User Experience?
What is a User Experience? What is a User Experience?
What is a User Experience?
Dotinum
 
UX & UI Design - Differentiate through design
UX & UI Design - Differentiate through designUX & UI Design - Differentiate through design
UX & UI Design - Differentiate through design
DMI
 
What is UX?
What is UX?What is UX?
What is UX?
David Carr
 
Design System as a Product
Design System as a ProductDesign System as a Product
Design System as a Product
Thoughtworks
 
10 user centered design
10 user centered design10 user centered design
10 user centered design
Lilia Sfaxi
 
UI UX introduction
UI UX introductionUI UX introduction
UI UX introduction
Ismail Norri
 
Ux design process
Ux design processUx design process
Ux design process
Junying Chang
 
UX/UI design
UX/UI designUX/UI design
UX/UI design
deorwine infotech
 
A Practical Guide To Mixed Methodologies For UX Research
A Practical Guide To Mixed Methodologies For UX ResearchA Practical Guide To Mixed Methodologies For UX Research
A Practical Guide To Mixed Methodologies For UX Research
UXDXConf
 
Gamification design in UX design
Gamification design in UX designGamification design in UX design
Gamification design in UX design
Alireza Ranjbar SHourabi
 
Design thinking
Design thinkingDesign thinking
Design thinking
webkeyz
 
UX/UI design process - Studio CreativeMe
UX/UI design process - Studio CreativeMeUX/UI design process - Studio CreativeMe
UX/UI design process - Studio CreativeMe
Madhuri Garg
 
Design Thinking With Persona
Design Thinking With PersonaDesign Thinking With Persona
Design Thinking With Persona
Franki Chamaki
 
A UI and UX training presentation
A UI and UX training presentationA UI and UX training presentation
A UI and UX training presentation
aayush_jain_87
 
Pushing DesignOps’ Influence into New Global Markets - P. Bertini & A. Mengon...
Pushing DesignOps’ Influence into New Global Markets - P. Bertini & A. Mengon...Pushing DesignOps’ Influence into New Global Markets - P. Bertini & A. Mengon...
Pushing DesignOps’ Influence into New Global Markets - P. Bertini & A. Mengon...
Patrizia Bertini
 

What's hot (20)

Empathy Maps
Empathy MapsEmpathy Maps
Empathy Maps
 
UX Fundamentals for Startups
UX Fundamentals for StartupsUX Fundamentals for Startups
UX Fundamentals for Startups
 
UI Design Patterns for the Web, Part 1
UI Design Patterns for the Web, Part 1UI Design Patterns for the Web, Part 1
UI Design Patterns for the Web, Part 1
 
For us by us: market creation through community engagement
For us by us: market creation through community engagementFor us by us: market creation through community engagement
For us by us: market creation through community engagement
 
Design System & Atomic Design
Design System & Atomic DesignDesign System & Atomic Design
Design System & Atomic Design
 
What is a User Experience?
What is a User Experience? What is a User Experience?
What is a User Experience?
 
UX & UI Design - Differentiate through design
UX & UI Design - Differentiate through designUX & UI Design - Differentiate through design
UX & UI Design - Differentiate through design
 
What is UX?
What is UX?What is UX?
What is UX?
 
Design System as a Product
Design System as a ProductDesign System as a Product
Design System as a Product
 
10 user centered design
10 user centered design10 user centered design
10 user centered design
 
UI UX introduction
UI UX introductionUI UX introduction
UI UX introduction
 
Ux design process
Ux design processUx design process
Ux design process
 
UX/UI design
UX/UI designUX/UI design
UX/UI design
 
A Practical Guide To Mixed Methodologies For UX Research
A Practical Guide To Mixed Methodologies For UX ResearchA Practical Guide To Mixed Methodologies For UX Research
A Practical Guide To Mixed Methodologies For UX Research
 
Gamification design in UX design
Gamification design in UX designGamification design in UX design
Gamification design in UX design
 
Design thinking
Design thinkingDesign thinking
Design thinking
 
UX/UI design process - Studio CreativeMe
UX/UI design process - Studio CreativeMeUX/UI design process - Studio CreativeMe
UX/UI design process - Studio CreativeMe
 
Design Thinking With Persona
Design Thinking With PersonaDesign Thinking With Persona
Design Thinking With Persona
 
A UI and UX training presentation
A UI and UX training presentationA UI and UX training presentation
A UI and UX training presentation
 
Pushing DesignOps’ Influence into New Global Markets - P. Bertini & A. Mengon...
Pushing DesignOps’ Influence into New Global Markets - P. Bertini & A. Mengon...Pushing DesignOps’ Influence into New Global Markets - P. Bertini & A. Mengon...
Pushing DesignOps’ Influence into New Global Markets - P. Bertini & A. Mengon...
 

Viewers also liked

110 world Flags
110 world Flags110 world Flags
110 world Flags
Government
 
Executive briefing 18.3.2015
Executive briefing 18.3.2015Executive briefing 18.3.2015
Executive briefing 18.3.2015
DANANG WID
 
Addressing the hard problems of automotive Linux: networking and IPC
Addressing the hard problems of automotive Linux: networking and IPCAddressing the hard problems of automotive Linux: networking and IPC
Addressing the hard problems of automotive Linux: networking and IPC
Alison Chaiken
 
Customer perception of product quality
Customer perception of product qualityCustomer perception of product quality
Customer perception of product qualityKobi Vider
 
Customer Focus and Customer's Perception of Quality
Customer Focus and Customer's Perception of QualityCustomer Focus and Customer's Perception of Quality
Customer Focus and Customer's Perception of QualityAshok Muthusamy
 
Quality by Design : Quality Target Product Profile & Critical Quality Attrib...
Quality by Design : Quality Target Product  Profile & Critical Quality Attrib...Quality by Design : Quality Target Product  Profile & Critical Quality Attrib...
Quality by Design : Quality Target Product Profile & Critical Quality Attrib...
GMP EDUCATION : Not for Profit Organization
 
Factors affecting consumer perception
Factors affecting consumer perceptionFactors affecting consumer perception
Factors affecting consumer perception
saurav rawat
 
Product Quality
Product QualityProduct Quality
Product Quality
Sajith91
 
Quality circle 2
Quality circle 2Quality circle 2
Quality circle 2
Nazar Mohammed
 
Software quality
Software qualitySoftware quality
Software qualityjagadeesan
 
Factors affecting perception asha
Factors affecting perception ashaFactors affecting perception asha
Factors affecting perception ashaJithin Kottikkal
 
Quality by Design
Quality by DesignQuality by Design

Viewers also liked (12)

110 world Flags
110 world Flags110 world Flags
110 world Flags
 
Executive briefing 18.3.2015
Executive briefing 18.3.2015Executive briefing 18.3.2015
Executive briefing 18.3.2015
 
Addressing the hard problems of automotive Linux: networking and IPC
Addressing the hard problems of automotive Linux: networking and IPCAddressing the hard problems of automotive Linux: networking and IPC
Addressing the hard problems of automotive Linux: networking and IPC
 
Customer perception of product quality
Customer perception of product qualityCustomer perception of product quality
Customer perception of product quality
 
Customer Focus and Customer's Perception of Quality
Customer Focus and Customer's Perception of QualityCustomer Focus and Customer's Perception of Quality
Customer Focus and Customer's Perception of Quality
 
Quality by Design : Quality Target Product Profile & Critical Quality Attrib...
Quality by Design : Quality Target Product  Profile & Critical Quality Attrib...Quality by Design : Quality Target Product  Profile & Critical Quality Attrib...
Quality by Design : Quality Target Product Profile & Critical Quality Attrib...
 
Factors affecting consumer perception
Factors affecting consumer perceptionFactors affecting consumer perception
Factors affecting consumer perception
 
Product Quality
Product QualityProduct Quality
Product Quality
 
Quality circle 2
Quality circle 2Quality circle 2
Quality circle 2
 
Software quality
Software qualitySoftware quality
Software quality
 
Factors affecting perception asha
Factors affecting perception ashaFactors affecting perception asha
Factors affecting perception asha
 
Quality by Design
Quality by DesignQuality by Design
Quality by Design
 

More from Uday Shankar

Crafting delightful experiences
Crafting delightful experiencesCrafting delightful experiences
Crafting delightful experiences
Uday Shankar
 
Design - What differentiates the useful from usable & delightful
Design - What differentiates the useful from usable & delightfulDesign - What differentiates the useful from usable & delightful
Design - What differentiates the useful from usable & delightful
Uday Shankar
 
Ninja Prototyping with Templating Frameworks
Ninja Prototyping with Templating FrameworksNinja Prototyping with Templating Frameworks
Ninja Prototyping with Templating Frameworks
Uday Shankar
 
Prototyping
PrototypingPrototyping
Prototyping
Uday Shankar
 
What Drives The World
What Drives The WorldWhat Drives The World
What Drives The World
Uday Shankar
 
Demystifying User Experience
Demystifying User ExperienceDemystifying User Experience
Demystifying User Experience
Uday Shankar
 
Touch & Multi Touch - A UX Perspective
Touch & Multi Touch - A UX PerspectiveTouch & Multi Touch - A UX Perspective
Touch & Multi Touch - A UX Perspective
Uday Shankar
 
Mobile Applications, Emerging Markets & Tourism
Mobile Applications, Emerging Markets & TourismMobile Applications, Emerging Markets & Tourism
Mobile Applications, Emerging Markets & Tourism
Uday Shankar
 
Khuljaa Sim Sim
Khuljaa Sim SimKhuljaa Sim Sim
Khuljaa Sim Sim
Uday Shankar
 
Prototyping SMS/Voice Services
Prototyping SMS/Voice ServicesPrototyping SMS/Voice Services
Prototyping SMS/Voice Services
Uday Shankar
 
UI Engineering - Rebooted
UI Engineering - RebootedUI Engineering - Rebooted
UI Engineering - Rebooted
Uday Shankar
 
Science of prototyping
Science of prototypingScience of prototyping
Science of prototyping
Uday Shankar
 
Usability & Prototyping
Usability & PrototypingUsability & Prototyping
Usability & Prototyping
Uday Shankar
 
Rapid Prototyping
Rapid PrototypingRapid Prototyping
Rapid Prototyping
Uday Shankar
 
User Experioence - delivering great ux through great ui
User Experioence - delivering great ux through great uiUser Experioence - delivering great ux through great ui
User Experioence - delivering great ux through great ui
Uday Shankar
 
Effective UI Development using Adobe Flex
Effective UI Development using Adobe FlexEffective UI Development using Adobe Flex
Effective UI Development using Adobe Flex
Uday Shankar
 

More from Uday Shankar (17)

Crafting delightful experiences
Crafting delightful experiencesCrafting delightful experiences
Crafting delightful experiences
 
Design - What differentiates the useful from usable & delightful
Design - What differentiates the useful from usable & delightfulDesign - What differentiates the useful from usable & delightful
Design - What differentiates the useful from usable & delightful
 
Ninja Prototyping with Templating Frameworks
Ninja Prototyping with Templating FrameworksNinja Prototyping with Templating Frameworks
Ninja Prototyping with Templating Frameworks
 
Prototyping
PrototypingPrototyping
Prototyping
 
What Drives The World
What Drives The WorldWhat Drives The World
What Drives The World
 
Demystifying User Experience
Demystifying User ExperienceDemystifying User Experience
Demystifying User Experience
 
Touch & Multi Touch - A UX Perspective
Touch & Multi Touch - A UX PerspectiveTouch & Multi Touch - A UX Perspective
Touch & Multi Touch - A UX Perspective
 
Mobile Applications, Emerging Markets & Tourism
Mobile Applications, Emerging Markets & TourismMobile Applications, Emerging Markets & Tourism
Mobile Applications, Emerging Markets & Tourism
 
Khuljaa Sim Sim
Khuljaa Sim SimKhuljaa Sim Sim
Khuljaa Sim Sim
 
Prototyping SMS/Voice Services
Prototyping SMS/Voice ServicesPrototyping SMS/Voice Services
Prototyping SMS/Voice Services
 
UI Engineering - Rebooted
UI Engineering - RebootedUI Engineering - Rebooted
UI Engineering - Rebooted
 
Science of prototyping
Science of prototypingScience of prototyping
Science of prototyping
 
Usability & Prototyping
Usability & PrototypingUsability & Prototyping
Usability & Prototyping
 
Rapid Prototyping
Rapid PrototypingRapid Prototyping
Rapid Prototyping
 
User Experioence - delivering great ux through great ui
User Experioence - delivering great ux through great uiUser Experioence - delivering great ux through great ui
User Experioence - delivering great ux through great ui
 
Effective UI Development using Adobe Flex
Effective UI Development using Adobe FlexEffective UI Development using Adobe Flex
Effective UI Development using Adobe Flex
 
Adobe® Flex™
Adobe® Flex™Adobe® Flex™
Adobe® Flex™
 

Recently uploaded

Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
cy0krjxt
 
Book Formatting: Quality Control Checks for Designers
Book Formatting: Quality Control Checks for DesignersBook Formatting: Quality Control Checks for Designers
Book Formatting: Quality Control Checks for Designers
Confidence Ago
 
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
asuzyq
 
projectreportnew-170307082323 nnnnnn(1).pdf
projectreportnew-170307082323 nnnnnn(1).pdfprojectreportnew-170307082323 nnnnnn(1).pdf
projectreportnew-170307082323 nnnnnn(1).pdf
farazahmadas6
 
Expert Accessory Dwelling Unit (ADU) Drafting Services
Expert Accessory Dwelling Unit (ADU) Drafting ServicesExpert Accessory Dwelling Unit (ADU) Drafting Services
Expert Accessory Dwelling Unit (ADU) Drafting Services
ResDraft
 
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
7sd8fier
 
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
jyz59f4j
 
一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理
一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理
一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理
708pb191
 
Transforming Brand Perception and Boosting Profitability
Transforming Brand Perception and Boosting ProfitabilityTransforming Brand Perception and Boosting Profitability
Transforming Brand Perception and Boosting Profitability
aaryangarg12
 
PORTFOLIO FABIANA VILLANI ARCHITECTURE.pdf
PORTFOLIO FABIANA VILLANI ARCHITECTURE.pdfPORTFOLIO FABIANA VILLANI ARCHITECTURE.pdf
PORTFOLIO FABIANA VILLANI ARCHITECTURE.pdf
fabianavillanib
 
Borys Sutkowski portfolio interior design
Borys Sutkowski portfolio interior designBorys Sutkowski portfolio interior design
Borys Sutkowski portfolio interior design
boryssutkowski
 
Let's Summon Demons Shirt Let's Summon Demons Shirt
Let's Summon Demons Shirt Let's Summon Demons ShirtLet's Summon Demons Shirt Let's Summon Demons Shirt
Let's Summon Demons Shirt Let's Summon Demons Shirt
TeeFusion
 
一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理
一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理
一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理
h7j5io0
 
Can AI do good? at 'offtheCanvas' India HCI prelude
Can AI do good? at 'offtheCanvas' India HCI preludeCan AI do good? at 'offtheCanvas' India HCI prelude
Can AI do good? at 'offtheCanvas' India HCI prelude
Alan Dix
 
20 slides of research movie and artists .pdf
20 slides of research movie and artists .pdf20 slides of research movie and artists .pdf
20 slides of research movie and artists .pdf
ameli25062005
 
一比一原版(毕业证)长崎大学毕业证成绩单如何办理
一比一原版(毕业证)长崎大学毕业证成绩单如何办理一比一原版(毕业证)长崎大学毕业证成绩单如何办理
一比一原版(毕业证)长崎大学毕业证成绩单如何办理
taqyed
 
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...
Mansi Shah
 
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
7sd8fier
 
Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...
Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...
Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...
ameli25062005
 
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
9a93xvy
 

Recently uploaded (20)

Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
 
Book Formatting: Quality Control Checks for Designers
Book Formatting: Quality Control Checks for DesignersBook Formatting: Quality Control Checks for Designers
Book Formatting: Quality Control Checks for Designers
 
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
 
projectreportnew-170307082323 nnnnnn(1).pdf
projectreportnew-170307082323 nnnnnn(1).pdfprojectreportnew-170307082323 nnnnnn(1).pdf
projectreportnew-170307082323 nnnnnn(1).pdf
 
Expert Accessory Dwelling Unit (ADU) Drafting Services
Expert Accessory Dwelling Unit (ADU) Drafting ServicesExpert Accessory Dwelling Unit (ADU) Drafting Services
Expert Accessory Dwelling Unit (ADU) Drafting Services
 
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
 
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
 
一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理
一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理
一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理
 
Transforming Brand Perception and Boosting Profitability
Transforming Brand Perception and Boosting ProfitabilityTransforming Brand Perception and Boosting Profitability
Transforming Brand Perception and Boosting Profitability
 
PORTFOLIO FABIANA VILLANI ARCHITECTURE.pdf
PORTFOLIO FABIANA VILLANI ARCHITECTURE.pdfPORTFOLIO FABIANA VILLANI ARCHITECTURE.pdf
PORTFOLIO FABIANA VILLANI ARCHITECTURE.pdf
 
Borys Sutkowski portfolio interior design
Borys Sutkowski portfolio interior designBorys Sutkowski portfolio interior design
Borys Sutkowski portfolio interior design
 
Let's Summon Demons Shirt Let's Summon Demons Shirt
Let's Summon Demons Shirt Let's Summon Demons ShirtLet's Summon Demons Shirt Let's Summon Demons Shirt
Let's Summon Demons Shirt Let's Summon Demons Shirt
 
一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理
一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理
一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理
 
Can AI do good? at 'offtheCanvas' India HCI prelude
Can AI do good? at 'offtheCanvas' India HCI preludeCan AI do good? at 'offtheCanvas' India HCI prelude
Can AI do good? at 'offtheCanvas' India HCI prelude
 
20 slides of research movie and artists .pdf
20 slides of research movie and artists .pdf20 slides of research movie and artists .pdf
20 slides of research movie and artists .pdf
 
一比一原版(毕业证)长崎大学毕业证成绩单如何办理
一比一原版(毕业证)长崎大学毕业证成绩单如何办理一比一原版(毕业证)长崎大学毕业证成绩单如何办理
一比一原版(毕业证)长崎大学毕业证成绩单如何办理
 
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...
 
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
 
Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...
Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...
Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...
 
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
 

The Good, Bad & Ugly of UI Design

  • 1. Uday M. Shankar BANGALORE 27 JULY 2011
  • 2. LinkedIn – Twitter – G+ – Facebook – Skype g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 2
  • 3. U S E R INTERFACE DESIGN g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 3
  • 4. USER INTERFACE DESIGN USER TASK CONTEXT g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 4
  • 5. USER BEHAVIOR f(U,E) Lewin’s equation Behavior is a function of the User & the Environment 5 g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com
  • 6. IT DOES REALLY g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 6 MATTER
  • 7. CASE IN POINT g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 7
  • 8. BAD TOUCH g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com T 8
  • 9. GOOD DESIGN g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 9
  • 10. GROUND RULES R T g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 10
  • 11. CLEAR g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 11
  • 12. CLEAR T R g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 12
  • 13. MINIMAL g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 13
  • 14. MINIMAL T source:  h*p://www.slideshare.net/aweyenberg/realis8c-­‐user-­‐interface-­‐design   R g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 14
  • 15. RESPONSIVE g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 15
  • 16. RESPONSIVE R g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 16
  • 17. FORGIVING g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 17
  • 18. FORGIVING R g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 18
  • 19. FAMILIAR g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 19
  • 20. FAMILIAR R source:  h*p://www.slideshare.net/aweyenberg/realis8c-­‐user-­‐interface-­‐design   g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 20
  • 21. DIFFERENT g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 21
  • 22. DIFFERENT R g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 22
  • 23. CONSISTENT g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 23
  • 24. CONSISTENT T g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 24
  • 25. LEVERAGE HARDWARE PROPERLY g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 25
  • 26. LEVERAGE HARDWARE PROPERLY R source:  h*p://www.slideshare.net/aweyenberg/realis8c-­‐user-­‐interface-­‐design   T g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 26
  • 27. WELL INTEGRATED g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 27
  • 28. B A D DESIGN g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 28
  • 29. BROWSER WARS ARE BACK g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 29
  • 30. BROWSER WARS ARE BACK g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 30
  • 31. ONE SIZE FITS ALL g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 31
  • 32. EVERYTHING ON THE WEB g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 32
  • 33. HTML5 <> FLASH g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 33
  • 34. OVERDOING REALISM g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 34
  • 35. UGLY DESIGN g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 35
  • 36. “EVERYONE LIKES IT” g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 36
  • 37. “DRAG-N-DROP IS SO COOL” g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 37
  • 38. “MUST CONFIRM EVERYTHING” g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 38
  • 39. “CUSTOM COMPONENTS? COOL!” g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 39
  • 40. “LET’S HARDCODE STUFF” g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 40
  • 41. “GRAPHIC DESIGN = UI DESIGN” g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 41
  • 42. “IT’S JUST AN ENTERPRISE APP” g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 42
  • 43. “MORE IS GOOD” g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 43
  • 44. DESIGN g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 44
  • 45. HOW COMPLEX CAN YOU MAKE IT? T g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 45
  • 46. METAPHORS SOMETIMES BACKFIRE source:  h*p://www.slideshare.net/aweyenberg/realis8c-­‐user-­‐interface-­‐design   T g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 46
  • 47. GRADIENT OVERLOAD T g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 47
  • 48. NICE & WELL DESIGNED R g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 48
  • 49. WHY? T g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 49
  • 50. CLEAN, CRISP, CONSISTENT R g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 50
  • 51. DEATH BY COLORS T g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 51
  • 52. SOMETIMES ‘DIFFERENT’ MAKES SENSE R g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 52
  • 53. WHY CAN’T THEY BE BETTER? T g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 53
  • 54. WHITESPACE MAKES A DIFFERENCE R g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 54
  • 55. DON’T OVER-DO REALITY source:  h*p://www.slideshare.net/aweyenberg/realis8c-­‐user-­‐interface-­‐design   T g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 55
  • 56. MAKE IT DELIGHTFUL g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com R 56
  • 57. MAKE IT JUST WORK g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com R 57
  • 58. MAKE IT JUST WORK g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com R 58