SlideShare une entreprise Scribd logo

User interface design

•
•
Oleksii Leonov
Oleksii Leonov

Materials from my lecture «Introduction to User Interface Design» at SummerSchool AACIMP 2011, Kyiv, Ukraine. http://summerschool.ssa.org.ua

FormationTechnologieDivertissement et humour
1  sur  70
Télécharger pour lire hors ligne
User Interface Design
Lectures What is it all about? Most important for user Principles of good interface Interface design process Cheats and hints Practice Create UI design prototype
The Interface is the way you accomplish tasks with a product; what you do and how it responds. Jef Raskin, “Interface”
Everything we interact with has an interface
Computer interfaces
Tip: Pirates of Silicon Valley
Touch devices
Problems
Programmers 2 Programmers
Marketing
Most important for user
Safety of user and his money
Safety of user’s data (his work) Autosave Unlimited Undo Remember input data
Save user’s time Previews Reopen last session Shortcuts Default settings
Principles of good interface
Simplicity of interaction model
scrollbar
Simplicity of basic functions
Speed
Feedback
Modeless and predictability Caps Lock Num Lock Insert button Language switching
User fails proof — everybody make mistakes lazy programmers cool
Simplicity of interaction model Simplicity of basic functions Speed Feedback Modeless and predictability User fails proof
Bonus :)
Microsoft Bob Bob received the 7th place in PC World magazine's list of the 25 worst tech products of all time, a spot in Time magazine's list of the 50 Worst Inventions and number one worst product of the decade by CNET.com.
UI design process
Analyze Concept Prototype Detailed Design Product
Analyze Talk and understand task Personas Scenarios and features
Alan Cooper, “The Inmates Are Running the Asylum”
Concept Idea of user interface
Prototype
Detailed design
Product
Cheats and Hints
Grids
HOME ARTICLES BROWSE ABOUT SEARCH GO TheHOMEnal home fi ARTICLES BROWSE ABOUT SEARCH GO A page design. th WELCOME TO WELCOME TO Designery is a public square for design practitioners, Designery is a public square for design practitioners, students and fans. LEARN MORE students and fans. LEARN MORE Signed in as You have 7 new messages Signed in as You have 7 new messages Wednesday, December 22, 2010 Wednesday, December 22, 2010 Khoi Vinh Log Out Khoi Vinh Log Out Typography’s Lost Logos, the Next Wave By Chuck Tatum, Editor Typography’s Lost Logos, the Next Wave By Chuck Tatum, Editor Tatum, Weekend Lorem ipsum dol Weekend Lorem ipsum dol By Sheba Shayne By Sheba Shayne or sit amet, or sit amet, consectetur consectetur adipiscing elit. Nam tristique, odio vel facilisis hendrerit, erat nisl imperdiet orci, in mol. Ad adipiscing elit. Nam tristique, odio vel facilisis hendrerit, erat nisl imperdiet orci, in mol. Ad 12 Comments 12 Comments The Bigger They Are… The Bigger They Are… By Mary Bristol, Editor By Mary Bristol, Editor Bristol, Lorem ipsum dol Lorem ipsum dol or sit amet, or sit amet, consectetur EXPLORE PROJECTS ON DESIGNERY consectetur EXPLORE PROJECTS ON DESIGNERY Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. adipiscing elit. • Most Popular • Most Blogged adipiscing elit. • Most Popular • Most Blogged Nam tristique, odio vel facilisis hendrerit erat. Nam tristique, odio vel facilisis hendrerit erat. Nam tristique, odio • Most Recently Updated • Most Commented Nam tristique, odio • Most Recently Updated • Most Commented 17 Comments 17 Comments vel facilisis hendrerit, erat nisl • Most Discussed • Random & Interesting vel facilisis hendrerit, erat nisl • Most Discussed • Random & Interesting imperdiet orci, in mol. imperdiet orci, in mol. Will They Pay for It? 12 Comments Will They Pay for It? 12 Comments Publishers Make a Last Publishers Make a Last Stand Stand By Nick Garcos GET UPDATES VIA EMAIL By Nick Garcos GET UPDATES VIA EMAIL Lorem ipsum dolor sit amet, consectetur adipiscing elit. Youremail@address Lorem ipsum dolor sit amet, consectetur adipiscing elit. Youremail@address Youremail@address Nam tristique, odio vel facilisis hendrerit, erat nisl Trouble in Paradise Holiday Fun Nam tristique, odio vel facilisis hendrerit, erat nisl Trouble in Paradise Holiday Fun SUBSCRIBE SUBSCRIBE imperdiet orci, in mollis tortor nulla eu tortor. Ellen Lacey Gat Morgan imperdiet orci, in mollis tortor nulla eu tortor. Ellen Lacey Gat Morgan Last Updated Dec 18, 2010 Last Updated Nov 8, 2010 Last Updated Dec 18, 2010 Last Updated Nov 8, 2010 22 Comments 22 Comments TOP PEOPLE ON DESIGNERY TOP PEOPLE ON DESIGNERY Web Design Techniques of Web Design Techniques of the Damned By Mike Figlia Jerry Warriner the Damned By Mike Figlia Jerry Warriner ptg Last Updated Last Updated December 22, 2010 December 22, 2010 Lorem ipsum dolor sit amet, consec Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Nam tristique, odio vel. Ut nibh tetur adipiscing elit. Nam tristique, odio vel. Ut nibh turpis, dictum ac eleifend et, consequat in velit. Aliquam Kathy Hale Chapter IX Calculated turpis, dictum ac eleifend et, consequat in velit. Aliquam Kathy Hale Chapter IX Calculated Last Updated Gus Snider Accidentalism Last Updated Gus Snider Accidentalism faucibus congue pretium. In mollis dolor eu December 22, 2010 faucibus congue pretium. In mollis dolor eu December 22, 2010 Last Updated Dec 18, 2010 Daniel O’Keefe Last Updated Dec 18, 2010 Daniel O’Keefe 54 Comments 54 Comments Last Updated Nov 8, 2010 Last Updated Nov 8, 2010 Francis Dollarhyde Francis Dollarhyde Last Updated Last Updated December 21, 2010 December 21, 2010 Hildy Johnson Hildy Johnson Last Updated Last Updated December 21, 2010 December 21, 2010 Holding on to CSS and the Listening to Holding on to CSS and the Listening to Offset Printing Man on the Your Mom Big West BBQ Hurtling Towards Offset Printing Man on the Your Mom Big West BBQ Hurtling Towards Street Dix Handley Phyllis Dietrichson Hipsterism Street Dix Handley Phyllis Dietrichson Hipsterism Last Updated Last Updated Dec 18, 2010 Walter Neff Last Updated Last Updated Dec 18, 2010 Walter Neff December 21, 2010 December 21, 2010 Last Updated Nov 8, 2010 Last Updated Nov 8, 2010 More Articles… More People… More Projects… More Articles… More People… More Projects… © 2011 by Khoi Vinh Site Map I Advertise I Contact Us I RSS I Mobile © 2011 by Khoi Vinh Site Map I Advertise I Contact Us I RSS I Mobile User agreement and privacy policyv User agreement and privacy policyv Khoi Vinh. “Ordering Disorder. Grid Principles for Web Design”
http://960.gs
Instruments for prototyping
http://balsamiq.com
One more thing
— users don’t care about code
— interface is evil
Books
Fin

Recommandé

UX RULES: 10 ESSENTIAL PRINCIPLES
UX RULES: 10 ESSENTIAL PRINCIPLESUX RULES: 10 ESSENTIAL PRINCIPLES
UX RULES: 10 ESSENTIAL PRINCIPLESJeremy Robinson
 
UI/UX Fundamentals
UI/UX FundamentalsUI/UX Fundamentals
UI/UX FundamentalsDijup Tuladhar
 
What is a User Experience?
What is a User Experience? What is a User Experience?
What is a User Experience? Dotinum
 
UI UX in depth
UI UX in depthUI UX in depth
UI UX in depthShrestha Raaz
 
UX - User Experience Design and Principles
UX - User Experience Design and PrinciplesUX - User Experience Design and Principles
UX - User Experience Design and PrinciplesPeeyush Sahu CAPM®
 
UX Prototyping (UXiD) - Slide by Anton Chandra and Bahni Mahariasha
UX Prototyping (UXiD) - Slide by Anton Chandra and Bahni MahariashaUX Prototyping (UXiD) - Slide by Anton Chandra and Bahni Mahariasha
UX Prototyping (UXiD) - Slide by Anton Chandra and Bahni MahariashaAnton Chandra
 
UX Experience Design: Processes and Strategy
UX Experience Design: Processes and StrategyUX Experience Design: Processes and Strategy
UX Experience Design: Processes and StrategyCHI UX Indonesia
 
Introduction to User Experience Design
Introduction to User Experience DesignIntroduction to User Experience Design
Introduction to User Experience DesignRavi Bhadauria
 

Recommandé

UX RULES: 10 ESSENTIAL PRINCIPLES
UX RULES: 10 ESSENTIAL PRINCIPLESUX RULES: 10 ESSENTIAL PRINCIPLES
UX RULES: 10 ESSENTIAL PRINCIPLESJeremy Robinson
 
UI/UX Fundamentals
UI/UX FundamentalsUI/UX Fundamentals
UI/UX FundamentalsDijup Tuladhar
 
What is a User Experience?
What is a User Experience? What is a User Experience?
What is a User Experience? Dotinum
 
UI UX in depth
UI UX in depthUI UX in depth
UI UX in depthShrestha Raaz
 
UX - User Experience Design and Principles
UX - User Experience Design and PrinciplesUX - User Experience Design and Principles
UX - User Experience Design and PrinciplesPeeyush Sahu CAPM®
 
UX Prototyping (UXiD) - Slide by Anton Chandra and Bahni Mahariasha
UX Prototyping (UXiD) - Slide by Anton Chandra and Bahni MahariashaUX Prototyping (UXiD) - Slide by Anton Chandra and Bahni Mahariasha
UX Prototyping (UXiD) - Slide by Anton Chandra and Bahni MahariashaAnton Chandra
 
UX Experience Design: Processes and Strategy
UX Experience Design: Processes and StrategyUX Experience Design: Processes and Strategy
UX Experience Design: Processes and StrategyCHI UX Indonesia
 
Introduction to User Experience Design
Introduction to User Experience DesignIntroduction to User Experience Design
Introduction to User Experience DesignRavi Bhadauria
 
USER INTERFACE DESIGN PPT
USER INTERFACE DESIGN PPTUSER INTERFACE DESIGN PPT
USER INTERFACE DESIGN PPTvicci4041
 
User interface and user experience ui ux design basics
User interface and user experience ui ux design basicsUser interface and user experience ui ux design basics
User interface and user experience ui ux design basicsRavi Bhadauria
 
UI UX introduction
UI UX introductionUI UX introduction
UI UX introductionIsmail Norri
 
UX Best Practices
UX Best PracticesUX Best Practices
UX Best PracticesTheresa Neil
 
UI / UX Design Presentation
UI / UX Design PresentationUI / UX Design Presentation
UI / UX Design PresentationDignitas Digital Pvt. Ltd.
 
User interface design
User interface designUser interface design
User interface designNaveen Sagayaselvaraj
 
UX/UI Design 101
UX/UI Design 101UX/UI Design 101
UX/UI Design 101Jasmine Phan
 
UI and UX Design for Startups - Matin Maleki
UI and UX Design for Startups - Matin MalekiUI and UX Design for Startups - Matin Maleki
UI and UX Design for Startups - Matin MalekiMatin Maleki
 
UX UI - Principles and Best Practices 2014-2015
UX UI - Principles and Best Practices 2014-2015UX UI - Principles and Best Practices 2014-2015
UX UI - Principles and Best Practices 2014-2015Harsh Wardhan Dave
 
"What Are the Key Differences between UI and UX Design?"
"What Are the Key Differences between UI and UX Design?""What Are the Key Differences between UI and UX Design?"
"What Are the Key Differences between UI and UX Design?"MITAcademy1
 
The Importance of UX
The Importance of UXThe Importance of UX
The Importance of UXBart Van Hecke
 
UX/UI Design and How It Works
UX/UI Design and How It WorksUX/UI Design and How It Works
UX/UI Design and How It WorksAciron Consulting
 
Interaction design beyond human computer interaction
Interaction design beyond human computer interactionInteraction design beyond human computer interaction
Interaction design beyond human computer interactionKenny Nguyen
 
User interface-design
User interface-designUser interface-design
User interface-designDarkHorse Technologies Pvt Ltd
 
UX Lesson 6: Visual Hierarchy
UX Lesson 6: Visual HierarchyUX Lesson 6: Visual Hierarchy
UX Lesson 6: Visual HierarchyJoan Lumanauw
 
Ui vs UX design
Ui vs UX designUi vs UX design
Ui vs UX designMaksym Babych
 
UX/UI Introduction
UX/UI IntroductionUX/UI Introduction
UX/UI IntroductionShrutee Aneja
 
User Interface Design - Module 1 Introduction
User Interface Design - Module 1 IntroductionUser Interface Design - Module 1 Introduction
User Interface Design - Module 1 IntroductionbrindaN
 
Simple Steps to UX/UI Web Design
Simple Steps to UX/UI Web DesignSimple Steps to UX/UI Web Design
Simple Steps to UX/UI Web DesignKoombea
 
Wireframing Basics - UX and the Design Process by Amber Vasquez
Wireframing Basics - UX and the Design Process by Amber VasquezWireframing Basics - UX and the Design Process by Amber Vasquez
Wireframing Basics - UX and the Design Process by Amber VasquezMightybytes
 
Earth Day Presentation wow hello nice great
Earth Day Presentation wow hello nice greatEarth Day Presentation wow hello nice great
Earth Day Presentation wow hello nice greatYousafMalik24
 
Science 7 Quarter 4 Module 2: Natural Resources.pptx
Science 7 Quarter 4 Module 2: Natural Resources.pptxScience 7 Quarter 4 Module 2: Natural Resources.pptx
Science 7 Quarter 4 Module 2: Natural Resources.pptxMaryGraceBautista27
 

Contenu connexe

Tendances

USER INTERFACE DESIGN PPT
USER INTERFACE DESIGN PPTUSER INTERFACE DESIGN PPT
USER INTERFACE DESIGN PPTvicci4041
 
User interface and user experience ui ux design basics
User interface and user experience ui ux design basicsUser interface and user experience ui ux design basics
User interface and user experience ui ux design basicsRavi Bhadauria
 
UI UX introduction
UI UX introductionUI UX introduction
UI UX introductionIsmail Norri
 
UI and UX Design for Startups - Matin Maleki
UI and UX Design for Startups - Matin MalekiUI and UX Design for Startups - Matin Maleki
UI and UX Design for Startups - Matin MalekiMatin Maleki
 
UX UI - Principles and Best Practices 2014-2015
UX UI - Principles and Best Practices 2014-2015UX UI - Principles and Best Practices 2014-2015
UX UI - Principles and Best Practices 2014-2015Harsh Wardhan Dave
 
"What Are the Key Differences between UI and UX Design?"
"What Are the Key Differences between UI and UX Design?""What Are the Key Differences between UI and UX Design?"
"What Are the Key Differences between UI and UX Design?"MITAcademy1
 
UX/UI Design and How It Works
UX/UI Design and How It WorksUX/UI Design and How It Works
UX/UI Design and How It WorksAciron Consulting
 
Interaction design beyond human computer interaction
Interaction design beyond human computer interactionInteraction design beyond human computer interaction
Interaction design beyond human computer interactionKenny Nguyen
 
UX Lesson 6: Visual Hierarchy
UX Lesson 6: Visual HierarchyUX Lesson 6: Visual Hierarchy
UX Lesson 6: Visual HierarchyJoan Lumanauw
 
User Interface Design - Module 1 Introduction
User Interface Design - Module 1 IntroductionUser Interface Design - Module 1 Introduction
User Interface Design - Module 1 IntroductionbrindaN
 
Simple Steps to UX/UI Web Design
Simple Steps to UX/UI Web DesignSimple Steps to UX/UI Web Design
Simple Steps to UX/UI Web DesignKoombea
 
Wireframing Basics - UX and the Design Process by Amber Vasquez
Wireframing Basics - UX and the Design Process by Amber VasquezWireframing Basics - UX and the Design Process by Amber Vasquez
Wireframing Basics - UX and the Design Process by Amber VasquezMightybytes
 

Tendances (20)

USER INTERFACE DESIGN PPT
USER INTERFACE DESIGN PPTUSER INTERFACE DESIGN PPT
USER INTERFACE DESIGN PPT
 
User interface and user experience ui ux design basics
User interface and user experience ui ux design basicsUser interface and user experience ui ux design basics
User interface and user experience ui ux design basics
 
UI UX introduction
UI UX introductionUI UX introduction
UI UX introduction
 
UX Best Practices
UX Best PracticesUX Best Practices
UX Best Practices
 
UI / UX Design Presentation
UI / UX Design PresentationUI / UX Design Presentation
UI / UX Design Presentation
 
User interface design
User interface designUser interface design
User interface design
 
UX/UI Design 101
UX/UI Design 101UX/UI Design 101
UX/UI Design 101
 
UI and UX Design for Startups - Matin Maleki
UI and UX Design for Startups - Matin MalekiUI and UX Design for Startups - Matin Maleki
UI and UX Design for Startups - Matin Maleki
 
UX UI - Principles and Best Practices 2014-2015
UX UI - Principles and Best Practices 2014-2015UX UI - Principles and Best Practices 2014-2015
UX UI - Principles and Best Practices 2014-2015
 
"What Are the Key Differences between UI and UX Design?"
"What Are the Key Differences between UI and UX Design?""What Are the Key Differences between UI and UX Design?"
"What Are the Key Differences between UI and UX Design?"
 
The Importance of UX
The Importance of UXThe Importance of UX
The Importance of UX
 
UX/UI Design and How It Works
UX/UI Design and How It WorksUX/UI Design and How It Works
UX/UI Design and How It Works
 
Interaction design beyond human computer interaction
Interaction design beyond human computer interactionInteraction design beyond human computer interaction
Interaction design beyond human computer interaction
 
User interface-design
User interface-designUser interface-design
User interface-design
 
UX Lesson 6: Visual Hierarchy
UX Lesson 6: Visual HierarchyUX Lesson 6: Visual Hierarchy
UX Lesson 6: Visual Hierarchy
 
Ui vs UX design
Ui vs UX designUi vs UX design
Ui vs UX design
 
UX/UI Introduction
UX/UI IntroductionUX/UI Introduction
UX/UI Introduction
 
User Interface Design - Module 1 Introduction
User Interface Design - Module 1 IntroductionUser Interface Design - Module 1 Introduction
User Interface Design - Module 1 Introduction
 
Simple Steps to UX/UI Web Design
Simple Steps to UX/UI Web DesignSimple Steps to UX/UI Web Design
Simple Steps to UX/UI Web Design
 
Wireframing Basics - UX and the Design Process by Amber Vasquez
Wireframing Basics - UX and the Design Process by Amber VasquezWireframing Basics - UX and the Design Process by Amber Vasquez
Wireframing Basics - UX and the Design Process by Amber Vasquez
 

Dernier

Earth Day Presentation wow hello nice great
Earth Day Presentation wow hello nice greatEarth Day Presentation wow hello nice great
Earth Day Presentation wow hello nice greatYousafMalik24
 
Science 7 Quarter 4 Module 2: Natural Resources.pptx
Science 7 Quarter 4 Module 2: Natural Resources.pptxScience 7 Quarter 4 Module 2: Natural Resources.pptx
Science 7 Quarter 4 Module 2: Natural Resources.pptxMaryGraceBautista27
 
Barangay Council for the Protection of Children (BCPC) Orientation.pptx
Barangay Council for the Protection of Children (BCPC) Orientation.pptxBarangay Council for the Protection of Children (BCPC) Orientation.pptx
Barangay Council for the Protection of Children (BCPC) Orientation.pptxCarlos105
 
ENGLISH6-Q4-W3.pptxqurter our high choom
ENGLISH6-Q4-W3.pptxqurter our high choomENGLISH6-Q4-W3.pptxqurter our high choom
ENGLISH6-Q4-W3.pptxqurter our high choomnelietumpap1
 
AUDIENCE THEORY -CULTIVATION THEORY - GERBNER.pptx
AUDIENCE THEORY -CULTIVATION THEORY - GERBNER.pptxAUDIENCE THEORY -CULTIVATION THEORY - GERBNER.pptx
AUDIENCE THEORY -CULTIVATION THEORY - GERBNER.pptxiammrhaywood
 
INTRODUCTION TO CATHOLIC CHRISTOLOGY.pptx
INTRODUCTION TO CATHOLIC CHRISTOLOGY.pptxINTRODUCTION TO CATHOLIC CHRISTOLOGY.pptx
INTRODUCTION TO CATHOLIC CHRISTOLOGY.pptxHumphrey A Beña
 
Culture Uniformity or Diversity IN SOCIOLOGY.pptx
Culture Uniformity or Diversity IN SOCIOLOGY.pptxCulture Uniformity or Diversity IN SOCIOLOGY.pptx
Culture Uniformity or Diversity IN SOCIOLOGY.pptxPoojaSen20
 
How to do quick user assign in kanban in Odoo 17 ERP
How to do quick user assign in kanban in Odoo 17 ERPHow to do quick user assign in kanban in Odoo 17 ERP
How to do quick user assign in kanban in Odoo 17 ERPCeline George
 
Karra SKD Conference Presentation Revised.pptx
Karra SKD Conference Presentation Revised.pptxKarra SKD Conference Presentation Revised.pptx
Karra SKD Conference Presentation Revised.pptxAshokKarra1
 
ENGLISH 7_Q4_LESSON 2_ Employing a Variety of Strategies for Effective Interp...
ENGLISH 7_Q4_LESSON 2_ Employing a Variety of Strategies for Effective Interp...ENGLISH 7_Q4_LESSON 2_ Employing a Variety of Strategies for Effective Interp...
ENGLISH 7_Q4_LESSON 2_ Employing a Variety of Strategies for Effective Interp...JhezDiaz1
 
How to Add Barcode on PDF Report in Odoo 17
How to Add Barcode on PDF Report in Odoo 17How to Add Barcode on PDF Report in Odoo 17
How to Add Barcode on PDF Report in Odoo 17Celine George
 
USPS® Forced Meter Migration - How to Know if Your Postage Meter Will Soon be...
USPS® Forced Meter Migration - How to Know if Your Postage Meter Will Soon be...USPS® Forced Meter Migration - How to Know if Your Postage Meter Will Soon be...
USPS® Forced Meter Migration - How to Know if Your Postage Meter Will Soon be...Postal Advocate Inc.
 
Like-prefer-love -hate+verb+ing & silent letters & citizenship text.pdf
Like-prefer-love -hate+verb+ing & silent letters & citizenship text.pdfLike-prefer-love -hate+verb+ing & silent letters & citizenship text.pdf
Like-prefer-love -hate+verb+ing & silent letters & citizenship text.pdfMr Bounab Samir
 
Procuring digital preservation CAN be quick and painless with our new dynamic...
Procuring digital preservation CAN be quick and painless with our new dynamic...Procuring digital preservation CAN be quick and painless with our new dynamic...
Procuring digital preservation CAN be quick and painless with our new dynamic...Jisc
 
Judging the Relevance and worth of ideas part 2.pptx
Judging the Relevance and worth of ideas part 2.pptxJudging the Relevance and worth of ideas part 2.pptx
Judging the Relevance and worth of ideas part 2.pptxSherlyMaeNeri
 
4.18.24 Movement Legacies, Reflection, and Review.pptx
4.18.24 Movement Legacies, Reflection, and Review.pptx4.18.24 Movement Legacies, Reflection, and Review.pptx
4.18.24 Movement Legacies, Reflection, and Review.pptxmary850239
 
GRADE 4 - SUMMATIVE TEST QUARTER 4 ALL SUBJECTS
GRADE 4 - SUMMATIVE TEST QUARTER 4 ALL SUBJECTSGRADE 4 - SUMMATIVE TEST QUARTER 4 ALL SUBJECTS
GRADE 4 - SUMMATIVE TEST QUARTER 4 ALL SUBJECTSJoshuaGantuangco2
 

Dernier (20)

Earth Day Presentation wow hello nice great
Earth Day Presentation wow hello nice greatEarth Day Presentation wow hello nice great
Earth Day Presentation wow hello nice great
 
Science 7 Quarter 4 Module 2: Natural Resources.pptx
Science 7 Quarter 4 Module 2: Natural Resources.pptxScience 7 Quarter 4 Module 2: Natural Resources.pptx
Science 7 Quarter 4 Module 2: Natural Resources.pptx
 
Barangay Council for the Protection of Children (BCPC) Orientation.pptx
Barangay Council for the Protection of Children (BCPC) Orientation.pptxBarangay Council for the Protection of Children (BCPC) Orientation.pptx
Barangay Council for the Protection of Children (BCPC) Orientation.pptx
 
LEFT_ON_C'N_ PRELIMS_EL_DORADO_2024.pptx
LEFT_ON_C'N_ PRELIMS_EL_DORADO_2024.pptxLEFT_ON_C'N_ PRELIMS_EL_DORADO_2024.pptx
LEFT_ON_C'N_ PRELIMS_EL_DORADO_2024.pptx
 
ENGLISH6-Q4-W3.pptxqurter our high choom
ENGLISH6-Q4-W3.pptxqurter our high choomENGLISH6-Q4-W3.pptxqurter our high choom
ENGLISH6-Q4-W3.pptxqurter our high choom
 
AUDIENCE THEORY -CULTIVATION THEORY - GERBNER.pptx
AUDIENCE THEORY -CULTIVATION THEORY - GERBNER.pptxAUDIENCE THEORY -CULTIVATION THEORY - GERBNER.pptx
AUDIENCE THEORY -CULTIVATION THEORY - GERBNER.pptx
 
INTRODUCTION TO CATHOLIC CHRISTOLOGY.pptx
INTRODUCTION TO CATHOLIC CHRISTOLOGY.pptxINTRODUCTION TO CATHOLIC CHRISTOLOGY.pptx
INTRODUCTION TO CATHOLIC CHRISTOLOGY.pptx
 
Culture Uniformity or Diversity IN SOCIOLOGY.pptx
Culture Uniformity or Diversity IN SOCIOLOGY.pptxCulture Uniformity or Diversity IN SOCIOLOGY.pptx
Culture Uniformity or Diversity IN SOCIOLOGY.pptx
 
How to do quick user assign in kanban in Odoo 17 ERP
How to do quick user assign in kanban in Odoo 17 ERPHow to do quick user assign in kanban in Odoo 17 ERP
How to do quick user assign in kanban in Odoo 17 ERP
 
Karra SKD Conference Presentation Revised.pptx
Karra SKD Conference Presentation Revised.pptxKarra SKD Conference Presentation Revised.pptx
Karra SKD Conference Presentation Revised.pptx
 
ENGLISH 7_Q4_LESSON 2_ Employing a Variety of Strategies for Effective Interp...
ENGLISH 7_Q4_LESSON 2_ Employing a Variety of Strategies for Effective Interp...ENGLISH 7_Q4_LESSON 2_ Employing a Variety of Strategies for Effective Interp...
ENGLISH 7_Q4_LESSON 2_ Employing a Variety of Strategies for Effective Interp...
 
How to Add Barcode on PDF Report in Odoo 17
How to Add Barcode on PDF Report in Odoo 17How to Add Barcode on PDF Report in Odoo 17
How to Add Barcode on PDF Report in Odoo 17
 
Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝
Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝
Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝
 
USPS® Forced Meter Migration - How to Know if Your Postage Meter Will Soon be...
USPS® Forced Meter Migration - How to Know if Your Postage Meter Will Soon be...USPS® Forced Meter Migration - How to Know if Your Postage Meter Will Soon be...
USPS® Forced Meter Migration - How to Know if Your Postage Meter Will Soon be...
 
Like-prefer-love -hate+verb+ing & silent letters & citizenship text.pdf
Like-prefer-love -hate+verb+ing & silent letters & citizenship text.pdfLike-prefer-love -hate+verb+ing & silent letters & citizenship text.pdf
Like-prefer-love -hate+verb+ing & silent letters & citizenship text.pdf
 
Procuring digital preservation CAN be quick and painless with our new dynamic...
Procuring digital preservation CAN be quick and painless with our new dynamic...Procuring digital preservation CAN be quick and painless with our new dynamic...
Procuring digital preservation CAN be quick and painless with our new dynamic...
 
FINALS_OF_LEFT_ON_C'N_EL_DORADO_2024.pptx
FINALS_OF_LEFT_ON_C'N_EL_DORADO_2024.pptxFINALS_OF_LEFT_ON_C'N_EL_DORADO_2024.pptx
FINALS_OF_LEFT_ON_C'N_EL_DORADO_2024.pptx
 
Judging the Relevance and worth of ideas part 2.pptx
Judging the Relevance and worth of ideas part 2.pptxJudging the Relevance and worth of ideas part 2.pptx
Judging the Relevance and worth of ideas part 2.pptx
 
4.18.24 Movement Legacies, Reflection, and Review.pptx
4.18.24 Movement Legacies, Reflection, and Review.pptx4.18.24 Movement Legacies, Reflection, and Review.pptx
4.18.24 Movement Legacies, Reflection, and Review.pptx
 
GRADE 4 - SUMMATIVE TEST QUARTER 4 ALL SUBJECTS
GRADE 4 - SUMMATIVE TEST QUARTER 4 ALL SUBJECTSGRADE 4 - SUMMATIVE TEST QUARTER 4 ALL SUBJECTS
GRADE 4 - SUMMATIVE TEST QUARTER 4 ALL SUBJECTS
 

User interface design

  • 2. Lectures What is it all about? Most important for user Principles of good interface Interface design process Cheats and hints Practice Create UI design prototype
  • 3. The Interface is the way you accomplish tasks with a product; what you do and how it responds. Jef Raskin, “Interface”
  • 4. Everything we interact with has an interface
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 11.
  • 12.
  • 17.
  • 18.
  • 20.
  • 21.
  • 22.
  • 23.
  • 25. Safety of user and his money
  • 26. Safety of user’s data (his work) Autosave Unlimited Undo Remember input data
  • 27. Save user’s time Previews Reopen last session Shortcuts Default settings
  • 30.
  • 32. Simplicity of basic functions
  • 33. Speed
  • 35. Modeless and predictability Caps Lock Num Lock Insert button Language switching
  • 36.
  • 37. User fails proof — everybody make mistakes lazy programmers cool
  • 38. Simplicity of interaction model Simplicity of basic functions Speed Feedback Modeless and predictability User fails proof
  • 40. Microsoft Bob Bob received the 7th place in PC World magazine's list of the 25 worst tech products of all time, a spot in Time magazine's list of the 50 Worst Inventions and number one worst product of the decade by CNET.com.
  • 43. Analyze Talk and understand task Personas Scenarios and features
  • 44. Alan Cooper, “The Inmates Are Running the Asylum”
  • 45.
  • 46.
  • 47. Concept Idea of user interface
  • 49.
  • 50.
  • 54. Grids
  • 55.
  • 56. HOME ARTICLES BROWSE ABOUT SEARCH GO TheHOMEnal home fi ARTICLES BROWSE ABOUT SEARCH GO A page design. th WELCOME TO WELCOME TO Designery is a public square for design practitioners, Designery is a public square for design practitioners, students and fans. LEARN MORE students and fans. LEARN MORE Signed in as You have 7 new messages Signed in as You have 7 new messages Wednesday, December 22, 2010 Wednesday, December 22, 2010 Khoi Vinh Log Out Khoi Vinh Log Out Typography’s Lost Logos, the Next Wave By Chuck Tatum, Editor Typography’s Lost Logos, the Next Wave By Chuck Tatum, Editor Tatum, Weekend Lorem ipsum dol Weekend Lorem ipsum dol By Sheba Shayne By Sheba Shayne or sit amet, or sit amet, consectetur consectetur adipiscing elit. Nam tristique, odio vel facilisis hendrerit, erat nisl imperdiet orci, in mol. Ad adipiscing elit. Nam tristique, odio vel facilisis hendrerit, erat nisl imperdiet orci, in mol. Ad 12 Comments 12 Comments The Bigger They Are… The Bigger They Are… By Mary Bristol, Editor By Mary Bristol, Editor Bristol, Lorem ipsum dol Lorem ipsum dol or sit amet, or sit amet, consectetur EXPLORE PROJECTS ON DESIGNERY consectetur EXPLORE PROJECTS ON DESIGNERY Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. adipiscing elit. • Most Popular • Most Blogged adipiscing elit. • Most Popular • Most Blogged Nam tristique, odio vel facilisis hendrerit erat. Nam tristique, odio vel facilisis hendrerit erat. Nam tristique, odio • Most Recently Updated • Most Commented Nam tristique, odio • Most Recently Updated • Most Commented 17 Comments 17 Comments vel facilisis hendrerit, erat nisl • Most Discussed • Random & Interesting vel facilisis hendrerit, erat nisl • Most Discussed • Random & Interesting imperdiet orci, in mol. imperdiet orci, in mol. Will They Pay for It? 12 Comments Will They Pay for It? 12 Comments Publishers Make a Last Publishers Make a Last Stand Stand By Nick Garcos GET UPDATES VIA EMAIL By Nick Garcos GET UPDATES VIA EMAIL Lorem ipsum dolor sit amet, consectetur adipiscing elit. Youremail@address Lorem ipsum dolor sit amet, consectetur adipiscing elit. Youremail@address Youremail@address Nam tristique, odio vel facilisis hendrerit, erat nisl Trouble in Paradise Holiday Fun Nam tristique, odio vel facilisis hendrerit, erat nisl Trouble in Paradise Holiday Fun SUBSCRIBE SUBSCRIBE imperdiet orci, in mollis tortor nulla eu tortor. Ellen Lacey Gat Morgan imperdiet orci, in mollis tortor nulla eu tortor. Ellen Lacey Gat Morgan Last Updated Dec 18, 2010 Last Updated Nov 8, 2010 Last Updated Dec 18, 2010 Last Updated Nov 8, 2010 22 Comments 22 Comments TOP PEOPLE ON DESIGNERY TOP PEOPLE ON DESIGNERY Web Design Techniques of Web Design Techniques of the Damned By Mike Figlia Jerry Warriner the Damned By Mike Figlia Jerry Warriner ptg Last Updated Last Updated December 22, 2010 December 22, 2010 Lorem ipsum dolor sit amet, consec Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Nam tristique, odio vel. Ut nibh tetur adipiscing elit. Nam tristique, odio vel. Ut nibh turpis, dictum ac eleifend et, consequat in velit. Aliquam Kathy Hale Chapter IX Calculated turpis, dictum ac eleifend et, consequat in velit. Aliquam Kathy Hale Chapter IX Calculated Last Updated Gus Snider Accidentalism Last Updated Gus Snider Accidentalism faucibus congue pretium. In mollis dolor eu December 22, 2010 faucibus congue pretium. In mollis dolor eu December 22, 2010 Last Updated Dec 18, 2010 Daniel O’Keefe Last Updated Dec 18, 2010 Daniel O’Keefe 54 Comments 54 Comments Last Updated Nov 8, 2010 Last Updated Nov 8, 2010 Francis Dollarhyde Francis Dollarhyde Last Updated Last Updated December 21, 2010 December 21, 2010 Hildy Johnson Hildy Johnson Last Updated Last Updated December 21, 2010 December 21, 2010 Holding on to CSS and the Listening to Holding on to CSS and the Listening to Offset Printing Man on the Your Mom Big West BBQ Hurtling Towards Offset Printing Man on the Your Mom Big West BBQ Hurtling Towards Street Dix Handley Phyllis Dietrichson Hipsterism Street Dix Handley Phyllis Dietrichson Hipsterism Last Updated Last Updated Dec 18, 2010 Walter Neff Last Updated Last Updated Dec 18, 2010 Walter Neff December 21, 2010 December 21, 2010 Last Updated Nov 8, 2010 Last Updated Nov 8, 2010 More Articles… More People… More Projects… More Articles… More People… More Projects… © 2011 by Khoi Vinh Site Map I Advertise I Contact Us I RSS I Mobile © 2011 by Khoi Vinh Site Map I Advertise I Contact Us I RSS I Mobile User agreement and privacy policyv User agreement and privacy policyv Khoi Vinh. “Ordering Disorder. Grid Principles for Web Design”
  • 60.
  • 61.
  • 62.
  • 64. — users don’t care about code
  • 66. Books
  • 67.
  • 68.
  • 69.
  • 70. Fin