SlideShare a Scribd company logo
1 of 59
Download to read offline
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

Entreprises AI-Driven : repenser les organisations et les modèles à l'ère de ...
Entreprises AI-Driven : repenser les organisations et les modèles à l'ère de ...Entreprises AI-Driven : repenser les organisations et les modèles à l'ère de ...
Entreprises AI-Driven : repenser les organisations et les modèles à l'ère de ...
Alain Goudey
 
The ultimate guide to prototyping
The ultimate guide to prototypingThe ultimate guide to prototyping
The ultimate guide to prototyping
Marcelo Graciolli
 

What's hot (20)

Fundamentals of UX Design
Fundamentals of UX DesignFundamentals of UX Design
Fundamentals of UX Design
 
What is UX?
What is UX?What is UX?
What is UX?
 
Ux & Service design intro
Ux & Service design introUx & Service design intro
Ux & Service design intro
 
Entreprises AI-Driven : repenser les organisations et les modèles à l'ère de ...
Entreprises AI-Driven : repenser les organisations et les modèles à l'ère de ...Entreprises AI-Driven : repenser les organisations et les modèles à l'ère de ...
Entreprises AI-Driven : repenser les organisations et les modèles à l'ère de ...
 
Easy UX Process Steps Must follow by every UX Designer
Easy UX Process Steps Must follow by every UX Designer Easy UX Process Steps Must follow by every UX Designer
Easy UX Process Steps Must follow by every UX Designer
 
UI UX introduction
UI UX introductionUI UX introduction
UI UX introduction
 
Building a Mature Design System
Building a Mature Design SystemBuilding a Mature Design System
Building a Mature Design System
 
Ux team organization
Ux team organizationUx team organization
Ux team organization
 
UX workshop
UX workshopUX workshop
UX workshop
 
UX Experience Design: Processes and Strategy
UX Experience Design: Processes and StrategyUX Experience Design: Processes and Strategy
UX Experience Design: Processes and Strategy
 
UI / UX Design Processes
UI / UX Design ProcessesUI / UX Design Processes
UI / UX Design Processes
 
What is User Centered Design?
What is User Centered Design?What is User Centered Design?
What is User Centered Design?
 
Create User Flow & Wireframing for an Application
Create User Flow & Wireframing for an ApplicationCreate User Flow & Wireframing for an Application
Create User Flow & Wireframing for an Application
 
Ux design process
Ux design processUx design process
Ux design process
 
User Centered Design 101
User Centered Design 101User Centered Design 101
User Centered Design 101
 
UI vs UX workshop
UI vs UX workshopUI vs UX workshop
UI vs UX workshop
 
The ultimate guide to prototyping
The ultimate guide to prototypingThe ultimate guide to prototyping
The ultimate guide to prototyping
 
What is UX?
What is UX?What is UX?
What is UX?
 
User Interface Design Basic
User Interface Design BasicUser Interface Design Basic
User Interface Design Basic
 
Fundamental principles of Usability and User Centred Design
Fundamental principles of Usability and User Centred DesignFundamental principles of Usability and User Centred Design
Fundamental principles of Usability and User Centred Design
 

Viewers also liked

Customer perception of product quality
Customer perception of product qualityCustomer perception of product quality
Customer perception of product quality
Kobi 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 Quality
Ashok Muthusamy
 
Software quality
Software qualitySoftware quality
Software quality
jagadeesan
 
Factors affecting perception asha
Factors affecting perception ashaFactors affecting perception asha
Factors affecting perception asha
Jithin Kottikkal
 

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

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

Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
instagramfab782445
 
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
eeanqy
 
Anupama Kundoo Cost Effective detailed ppt with plans and elevations with det...
Anupama Kundoo Cost Effective detailed ppt with plans and elevations with det...Anupama Kundoo Cost Effective detailed ppt with plans and elevations with det...
Anupama Kundoo Cost Effective detailed ppt with plans and elevations with det...
sriharipichandi
 
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
nirzagarg
 
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
nirzagarg
 
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
gajnagarg
 
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
HyderabadDolls
 
Minimalist Orange Portfolio by Slidesgo.pptx
Minimalist Orange Portfolio by Slidesgo.pptxMinimalist Orange Portfolio by Slidesgo.pptx
Minimalist Orange Portfolio by Slidesgo.pptx
balqisyamutia
 
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
eqaqen
 
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
awasv46j
 
Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...
Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...
Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...
gajnagarg
 
poliovirus-190801072449. pptx
poliovirus-190801072449.            pptxpoliovirus-190801072449.            pptx
poliovirus-190801072449. pptx
ssuser0ad194
 
How to Build a Simple Shopify Website
How to Build a Simple Shopify WebsiteHow to Build a Simple Shopify Website
How to Build a Simple Shopify Website
mark11275
 
Simple Conference Style Presentation by Slidesgo.pptx
Simple Conference Style Presentation by Slidesgo.pptxSimple Conference Style Presentation by Slidesgo.pptx
Simple Conference Style Presentation by Slidesgo.pptx
balqisyamutia
 

Recently uploaded (20)

BLOCK CHAIN PROJECT block chain project
BLOCK CHAIN  PROJECT block chain projectBLOCK CHAIN  PROJECT block chain project
BLOCK CHAIN PROJECT block chain project
 
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
 
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
 
Anupama Kundoo Cost Effective detailed ppt with plans and elevations with det...
Anupama Kundoo Cost Effective detailed ppt with plans and elevations with det...Anupama Kundoo Cost Effective detailed ppt with plans and elevations with det...
Anupama Kundoo Cost Effective detailed ppt with plans and elevations with det...
 
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
 
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
 
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
 
Furniture & Joinery Details_Designs.pptx
Furniture & Joinery Details_Designs.pptxFurniture & Joinery Details_Designs.pptx
Furniture & Joinery Details_Designs.pptx
 
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
 
Minimalist Orange Portfolio by Slidesgo.pptx
Minimalist Orange Portfolio by Slidesgo.pptxMinimalist Orange Portfolio by Slidesgo.pptx
Minimalist Orange Portfolio by Slidesgo.pptx
 
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
 
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
 
Lecture 01 Introduction To Multimedia.pptx
Lecture 01 Introduction To Multimedia.pptxLecture 01 Introduction To Multimedia.pptx
Lecture 01 Introduction To Multimedia.pptx
 
Raebareli Girl Whatsapp Number 📞 8617370543 | Girls Number for Friendship
Raebareli Girl Whatsapp Number 📞 8617370543 | Girls Number for FriendshipRaebareli Girl Whatsapp Number 📞 8617370543 | Girls Number for Friendship
Raebareli Girl Whatsapp Number 📞 8617370543 | Girls Number for Friendship
 
Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...
Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...
Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...
 
Eye-Catching Web Design Crafting User Interfaces .docx
Eye-Catching Web Design Crafting User Interfaces .docxEye-Catching Web Design Crafting User Interfaces .docx
Eye-Catching Web Design Crafting User Interfaces .docx
 
poliovirus-190801072449. pptx
poliovirus-190801072449.            pptxpoliovirus-190801072449.            pptx
poliovirus-190801072449. pptx
 
How to Build a Simple Shopify Website
How to Build a Simple Shopify WebsiteHow to Build a Simple Shopify Website
How to Build a Simple Shopify Website
 
Simple Conference Style Presentation by Slidesgo.pptx
Simple Conference Style Presentation by Slidesgo.pptxSimple Conference Style Presentation by Slidesgo.pptx
Simple Conference Style Presentation by Slidesgo.pptx
 
How to Create a Productive Workspace Trends and Tips.pdf
How to Create a Productive Workspace Trends and Tips.pdfHow to Create a Productive Workspace Trends and Tips.pdf
How to Create a Productive Workspace Trends and Tips.pdf
 

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