SlideShare a Scribd company 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

1 of 70
Download to read offline
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

Recommended

UX/UI Design 101
UX/UI Design 101UX/UI Design 101
UX/UI Design 101
Jasmine Phan
 
Ui vs UX design
Ui vs UX designUi vs UX design
Ui vs UX design
Maksym Babych
 
UX and UI
UX and UIUX and UI
UX and UI
smartData Enterprises Pvt Ltd
 
Principles of User Interface Design
Principles of User Interface DesignPrinciples of User Interface Design
Principles of User Interface Design
KANKIPATI KISHORE
 
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
 
UI UX in depth
UI UX in depthUI UX in depth
UI UX in depth
Shrestha Raaz
 
UI vs UX workshop
UI vs UX workshopUI vs UX workshop
UI vs UX workshop
Inova LLC
 
User interface design: definitions, processes and principles
User interface design: definitions, processes and principlesUser interface design: definitions, processes and principles
User interface design: definitions, processes and principlesDavid Little
 

Recommended

UX/UI Design 101
UX/UI Design 101UX/UI Design 101
UX/UI Design 101
Jasmine Phan
 
Ui vs UX design
Ui vs UX designUi vs UX design
Ui vs UX design
Maksym Babych
 
UX and UI
UX and UIUX and UI
UX and UI
smartData Enterprises Pvt Ltd
 
Principles of User Interface Design
Principles of User Interface DesignPrinciples of User Interface Design
Principles of User Interface Design
KANKIPATI KISHORE
 
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
 
UI UX in depth
UI UX in depthUI UX in depth
UI UX in depth
Shrestha Raaz
 
UI vs UX workshop
UI vs UX workshopUI vs UX workshop
UI vs UX workshop
Inova LLC
 
User interface design: definitions, processes and principles
User interface design: definitions, processes and principlesUser interface design: definitions, processes and principles
User interface design: definitions, processes and principlesDavid Little
 
UX Experience Design: Processes and Strategy
UX Experience Design: Processes and StrategyUX Experience Design: Processes and Strategy
UX Experience Design: Processes and Strategy
CHI UX Indonesia
 
UI / UX Design Processes
UI / UX Design ProcessesUI / UX Design Processes
UI / UX Design Processes
Muhammad Hijazi
 
UX/UI Introduction
UX/UI IntroductionUX/UI Introduction
UX/UI Introduction
Shrutee Aneja
 
UI/UX Fundamentals
UI/UX FundamentalsUI/UX Fundamentals
UI/UX Fundamentals
Dijup Tuladhar
 
UI/UX presentation by Roshan Karunarathna
UI/UX presentation by Roshan KarunarathnaUI/UX presentation by Roshan Karunarathna
UI/UX presentation by Roshan Karunarathna
Roshan Karunarathna
 
Ui design
Ui designUi design
Ui design
Ajantha Vijayasekharan
 
UI & UX Design for Startups
UI & UX Design for StartupsUI & UX Design for Startups
UI & UX Design for Startups
Richard Fang
 
UX RULES: 10 ESSENTIAL PRINCIPLES
UX RULES: 10 ESSENTIAL PRINCIPLESUX RULES: 10 ESSENTIAL PRINCIPLES
UX RULES: 10 ESSENTIAL PRINCIPLES
Jeremy Robinson
 
Fundamentals of User Interface Design
Fundamentals of User Interface DesignFundamentals of User Interface Design
Fundamentals of User Interface Design
Merlin Rebrović
 
UX/UI design
UX/UI designUX/UI design
UX/UI design
deorwine infotech
 
UX Best Practices
UX Best PracticesUX Best Practices
UX Best Practices
Theresa Neil
 
UX is Not Equal to UI Design
UX is Not Equal to UI Design UX is Not Equal to UI Design
UX is Not Equal to UI Design
Rifat Talukder
 
UX Lesson 5: Information Architecture
UX Lesson 5: Information ArchitectureUX Lesson 5: Information Architecture
UX Lesson 5: Information Architecture
Joan Lumanauw
 
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
Koombea
 
What is UX?
What is UX?What is UX?
What is UX?
David Carr
 
UI/UX Design
UI/UX DesignUI/UX Design
UI/UX Designsumit singh
 
UI vs UX: Comparison Between User Interface and User Experience
UI vs UX: Comparison Between User Interface and User ExperienceUI vs UX: Comparison Between User Interface and User Experience
UI vs UX: Comparison Between User Interface and User Experience
Cloud Analogy
 
UX is not UI!
UX is not UI!UX is not UI!
UX is not UI!
Nicolas Demange
 
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
Mightybytes
 
What’s the difference between a UX and UI designer? (Part two)
What’s the difference between a UX and UI designer? (Part two)What’s the difference between a UX and UI designer? (Part two)
What’s the difference between a UX and UI designer? (Part two)
iFactory Digital
 
Phrasal Verbs.XXXXXXXXXXXXXXXXXXXXXXXXXX
Phrasal Verbs.XXXXXXXXXXXXXXXXXXXXXXXXXXPhrasal Verbs.XXXXXXXXXXXXXXXXXXXXXXXXXX
Phrasal Verbs.XXXXXXXXXXXXXXXXXXXXXXXXXX
MIRIAMSALINAS13
 
GIÁO ÁN DẠY THÊM (KẾ HOẠCH BÀI BUỔI 2) - TIẾNG ANH 8 GLOBAL SUCCESS (2 CỘT) N...
GIÁO ÁN DẠY THÊM (KẾ HOẠCH BÀI BUỔI 2) - TIẾNG ANH 8 GLOBAL SUCCESS (2 CỘT) N...GIÁO ÁN DẠY THÊM (KẾ HOẠCH BÀI BUỔI 2) - TIẾNG ANH 8 GLOBAL SUCCESS (2 CỘT) N...
GIÁO ÁN DẠY THÊM (KẾ HOẠCH BÀI BUỔI 2) - TIẾNG ANH 8 GLOBAL SUCCESS (2 CỘT) N...
Nguyen Thanh Tu Collection
 

More Related Content

What's hot

UX Experience Design: Processes and Strategy
UX Experience Design: Processes and StrategyUX Experience Design: Processes and Strategy
UX Experience Design: Processes and Strategy
CHI UX Indonesia
 
UI / UX Design Processes
UI / UX Design ProcessesUI / UX Design Processes
UI / UX Design Processes
Muhammad Hijazi
 
UX/UI Introduction
UX/UI IntroductionUX/UI Introduction
UX/UI Introduction
Shrutee Aneja
 
UI/UX Fundamentals
UI/UX FundamentalsUI/UX Fundamentals
UI/UX Fundamentals
Dijup Tuladhar
 
UI/UX presentation by Roshan Karunarathna
UI/UX presentation by Roshan KarunarathnaUI/UX presentation by Roshan Karunarathna
UI/UX presentation by Roshan Karunarathna
Roshan Karunarathna
 
Ui design
Ui designUi design
Ui design
Ajantha Vijayasekharan
 
UI & UX Design for Startups
UI & UX Design for StartupsUI & UX Design for Startups
UI & UX Design for Startups
Richard Fang
 
UX RULES: 10 ESSENTIAL PRINCIPLES
UX RULES: 10 ESSENTIAL PRINCIPLESUX RULES: 10 ESSENTIAL PRINCIPLES
UX RULES: 10 ESSENTIAL PRINCIPLES
Jeremy Robinson
 
Fundamentals of User Interface Design
Fundamentals of User Interface DesignFundamentals of User Interface Design
Fundamentals of User Interface Design
Merlin Rebrović
 
UX/UI design
UX/UI designUX/UI design
UX/UI design
deorwine infotech
 
UX Best Practices
UX Best PracticesUX Best Practices
UX Best Practices
Theresa Neil
 
UX is Not Equal to UI Design
UX is Not Equal to UI Design UX is Not Equal to UI Design
UX is Not Equal to UI Design
Rifat Talukder
 
UX Lesson 5: Information Architecture
UX Lesson 5: Information ArchitectureUX Lesson 5: Information Architecture
UX Lesson 5: Information Architecture
Joan Lumanauw
 
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
Koombea
 
What is UX?
What is UX?What is UX?
What is UX?
David Carr
 
UI vs UX: Comparison Between User Interface and User Experience
UI vs UX: Comparison Between User Interface and User ExperienceUI vs UX: Comparison Between User Interface and User Experience
UI vs UX: Comparison Between User Interface and User Experience
Cloud Analogy
 
UX is not UI!
UX is not UI!UX is not UI!
UX is not UI!
Nicolas Demange
 
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
Mightybytes
 
What’s the difference between a UX and UI designer? (Part two)
What’s the difference between a UX and UI designer? (Part two)What’s the difference between a UX and UI designer? (Part two)
What’s the difference between a UX and UI designer? (Part two)
iFactory Digital
 

What's hot (20)

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
 
UX/UI Introduction
UX/UI IntroductionUX/UI Introduction
UX/UI Introduction
 
UI/UX Fundamentals
UI/UX FundamentalsUI/UX Fundamentals
UI/UX Fundamentals
 
UI/UX presentation by Roshan Karunarathna
UI/UX presentation by Roshan KarunarathnaUI/UX presentation by Roshan Karunarathna
UI/UX presentation by Roshan Karunarathna
 
Ui design
Ui designUi design
Ui design
 
UI & UX Design for Startups
UI & UX Design for StartupsUI & UX Design for Startups
UI & UX Design for Startups
 
UX RULES: 10 ESSENTIAL PRINCIPLES
UX RULES: 10 ESSENTIAL PRINCIPLESUX RULES: 10 ESSENTIAL PRINCIPLES
UX RULES: 10 ESSENTIAL PRINCIPLES
 
Fundamentals of User Interface Design
Fundamentals of User Interface DesignFundamentals of User Interface Design
Fundamentals of User Interface Design
 
UX/UI design
UX/UI designUX/UI design
UX/UI design
 
UX Best Practices
UX Best PracticesUX Best Practices
UX Best Practices
 
UX is Not Equal to UI Design
UX is Not Equal to UI Design UX is Not Equal to UI Design
UX is Not Equal to UI Design
 
UX Lesson 5: Information Architecture
UX Lesson 5: Information ArchitectureUX Lesson 5: Information Architecture
UX Lesson 5: Information Architecture
 
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
 
What is UX?
What is UX?What is UX?
What is UX?
 
UI/UX Design
UI/UX DesignUI/UX Design
UI/UX Design
 
UI vs UX: Comparison Between User Interface and User Experience
UI vs UX: Comparison Between User Interface and User ExperienceUI vs UX: Comparison Between User Interface and User Experience
UI vs UX: Comparison Between User Interface and User Experience
 
UX is not UI!
UX is not UI!UX is not UI!
UX is not UI!
 
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
 
What’s the difference between a UX and UI designer? (Part two)
What’s the difference between a UX and UI designer? (Part two)What’s the difference between a UX and UI designer? (Part two)
What’s the difference between a UX and UI designer? (Part two)
 

Recently uploaded

Phrasal Verbs.XXXXXXXXXXXXXXXXXXXXXXXXXX
Phrasal Verbs.XXXXXXXXXXXXXXXXXXXXXXXXXXPhrasal Verbs.XXXXXXXXXXXXXXXXXXXXXXXXXX
Phrasal Verbs.XXXXXXXXXXXXXXXXXXXXXXXXXX
MIRIAMSALINAS13
 
GIÁO ÁN DẠY THÊM (KẾ HOẠCH BÀI BUỔI 2) - TIẾNG ANH 8 GLOBAL SUCCESS (2 CỘT) N...
GIÁO ÁN DẠY THÊM (KẾ HOẠCH BÀI BUỔI 2) - TIẾNG ANH 8 GLOBAL SUCCESS (2 CỘT) N...GIÁO ÁN DẠY THÊM (KẾ HOẠCH BÀI BUỔI 2) - TIẾNG ANH 8 GLOBAL SUCCESS (2 CỘT) N...
GIÁO ÁN DẠY THÊM (KẾ HOẠCH BÀI BUỔI 2) - TIẾNG ANH 8 GLOBAL SUCCESS (2 CỘT) N...
Nguyen Thanh Tu Collection
 
Unit 2- Research Aptitude (UGC NET Paper I).pdf
Unit 2- Research Aptitude (UGC NET Paper I).pdfUnit 2- Research Aptitude (UGC NET Paper I).pdf
Unit 2- Research Aptitude (UGC NET Paper I).pdf
Thiyagu K
 
MARUTI SUZUKI- A Successful Joint Venture in India.pptx
MARUTI SUZUKI- A Successful Joint Venture in India.pptxMARUTI SUZUKI- A Successful Joint Venture in India.pptx
MARUTI SUZUKI- A Successful Joint Venture in India.pptx
bennyroshan06
 
CLASS 11 CBSE B.St Project AIDS TO TRADE - INSURANCE
CLASS 11 CBSE B.St Project AIDS TO TRADE - INSURANCECLASS 11 CBSE B.St Project AIDS TO TRADE - INSURANCE
CLASS 11 CBSE B.St Project AIDS TO TRADE - INSURANCE
BhavyaRajput3
 
Model Attribute Check Company Auto Property
Model Attribute Check Company Auto PropertyModel Attribute Check Company Auto Property
Model Attribute Check Company Auto Property
Celine George
 
1.4 modern child centered education - mahatma gandhi-2.pptx
1.4 modern child centered education - mahatma gandhi-2.pptx1.4 modern child centered education - mahatma gandhi-2.pptx
1.4 modern child centered education - mahatma gandhi-2.pptx
JosvitaDsouza2
 
The approach at University of Liverpool.pptx
The approach at University of Liverpool.pptxThe approach at University of Liverpool.pptx
The approach at University of Liverpool.pptx
Jisc
 
Home assignment II on Spectroscopy 2024 Answers.pdf
Home assignment II on Spectroscopy 2024 Answers.pdfHome assignment II on Spectroscopy 2024 Answers.pdf
Home assignment II on Spectroscopy 2024 Answers.pdf
Tamralipta Mahavidyalaya
 
The French Revolution Class 9 Study Material pdf free download
The French Revolution Class 9 Study Material pdf free downloadThe French Revolution Class 9 Study Material pdf free download
The French Revolution Class 9 Study Material pdf free download
Vivekanand Anglo Vedic Academy
 
Template Jadual Bertugas Kelas (Boleh Edit)
Template Jadual Bertugas Kelas (Boleh Edit)Template Jadual Bertugas Kelas (Boleh Edit)
Template Jadual Bertugas Kelas (Boleh Edit)
rosedainty
 
ESC Beyond Borders _From EU to You_ InfoPack general.pdf
ESC Beyond Borders _From EU to You_ InfoPack general.pdfESC Beyond Borders _From EU to You_ InfoPack general.pdf
ESC Beyond Borders _From EU to You_ InfoPack general.pdf
Fundacja Rozwoju Społeczeństwa Przedsiębiorczego
 
Language Across the Curriculm LAC B.Ed.
Language Across the Curriculm LAC B.Ed.Language Across the Curriculm LAC B.Ed.
Language Across the Curriculm LAC B.Ed.
Atul Kumar Singh
 
Digital Tools and AI for Teaching Learning and Research
Digital Tools and AI for Teaching Learning and ResearchDigital Tools and AI for Teaching Learning and Research
Digital Tools and AI for Teaching Learning and Research
Vikramjit Singh
 
Supporting (UKRI) OA monographs at Salford.pptx
Supporting (UKRI) OA monographs at Salford.pptxSupporting (UKRI) OA monographs at Salford.pptx
Supporting (UKRI) OA monographs at Salford.pptx
Jisc
 
Sectors of the Indian Economy - Class 10 Study Notes pdf
Sectors of the Indian Economy - Class 10 Study Notes pdfSectors of the Indian Economy - Class 10 Study Notes pdf
Sectors of the Indian Economy - Class 10 Study Notes pdf
Vivekanand Anglo Vedic Academy
 
Instructions for Submissions thorugh G- Classroom.pptx
Instructions for Submissions thorugh G- Classroom.pptxInstructions for Submissions thorugh G- Classroom.pptx
Instructions for Submissions thorugh G- Classroom.pptx
Jheel Barad
 
Students, digital devices and success - Andreas Schleicher - 27 May 2024..pptx
Students, digital devices and success - Andreas Schleicher - 27 May 2024..pptxStudents, digital devices and success - Andreas Schleicher - 27 May 2024..pptx
Students, digital devices and success - Andreas Schleicher - 27 May 2024..pptx
EduSkills OECD
 
Polish students' mobility in the Czech Republic
Polish students' mobility in the Czech RepublicPolish students' mobility in the Czech Republic
Polish students' mobility in the Czech Republic
Anna Sz.
 
Sha'Carri Richardson Presentation 202345
Sha'Carri Richardson Presentation 202345Sha'Carri Richardson Presentation 202345
Sha'Carri Richardson Presentation 202345
beazzy04
 

Recently uploaded (20)

Phrasal Verbs.XXXXXXXXXXXXXXXXXXXXXXXXXX
Phrasal Verbs.XXXXXXXXXXXXXXXXXXXXXXXXXXPhrasal Verbs.XXXXXXXXXXXXXXXXXXXXXXXXXX
Phrasal Verbs.XXXXXXXXXXXXXXXXXXXXXXXXXX
 
GIÁO ÁN DẠY THÊM (KẾ HOẠCH BÀI BUỔI 2) - TIẾNG ANH 8 GLOBAL SUCCESS (2 CỘT) N...
GIÁO ÁN DẠY THÊM (KẾ HOẠCH BÀI BUỔI 2) - TIẾNG ANH 8 GLOBAL SUCCESS (2 CỘT) N...GIÁO ÁN DẠY THÊM (KẾ HOẠCH BÀI BUỔI 2) - TIẾNG ANH 8 GLOBAL SUCCESS (2 CỘT) N...
GIÁO ÁN DẠY THÊM (KẾ HOẠCH BÀI BUỔI 2) - TIẾNG ANH 8 GLOBAL SUCCESS (2 CỘT) N...
 
Unit 2- Research Aptitude (UGC NET Paper I).pdf
Unit 2- Research Aptitude (UGC NET Paper I).pdfUnit 2- Research Aptitude (UGC NET Paper I).pdf
Unit 2- Research Aptitude (UGC NET Paper I).pdf
 
MARUTI SUZUKI- A Successful Joint Venture in India.pptx
MARUTI SUZUKI- A Successful Joint Venture in India.pptxMARUTI SUZUKI- A Successful Joint Venture in India.pptx
MARUTI SUZUKI- A Successful Joint Venture in India.pptx
 
CLASS 11 CBSE B.St Project AIDS TO TRADE - INSURANCE
CLASS 11 CBSE B.St Project AIDS TO TRADE - INSURANCECLASS 11 CBSE B.St Project AIDS TO TRADE - INSURANCE
CLASS 11 CBSE B.St Project AIDS TO TRADE - INSURANCE
 
Model Attribute Check Company Auto Property
Model Attribute Check Company Auto PropertyModel Attribute Check Company Auto Property
Model Attribute Check Company Auto Property
 
1.4 modern child centered education - mahatma gandhi-2.pptx
1.4 modern child centered education - mahatma gandhi-2.pptx1.4 modern child centered education - mahatma gandhi-2.pptx
1.4 modern child centered education - mahatma gandhi-2.pptx
 
The approach at University of Liverpool.pptx
The approach at University of Liverpool.pptxThe approach at University of Liverpool.pptx
The approach at University of Liverpool.pptx
 
Home assignment II on Spectroscopy 2024 Answers.pdf
Home assignment II on Spectroscopy 2024 Answers.pdfHome assignment II on Spectroscopy 2024 Answers.pdf
Home assignment II on Spectroscopy 2024 Answers.pdf
 
The French Revolution Class 9 Study Material pdf free download
The French Revolution Class 9 Study Material pdf free downloadThe French Revolution Class 9 Study Material pdf free download
The French Revolution Class 9 Study Material pdf free download
 
Template Jadual Bertugas Kelas (Boleh Edit)
Template Jadual Bertugas Kelas (Boleh Edit)Template Jadual Bertugas Kelas (Boleh Edit)
Template Jadual Bertugas Kelas (Boleh Edit)
 
ESC Beyond Borders _From EU to You_ InfoPack general.pdf
ESC Beyond Borders _From EU to You_ InfoPack general.pdfESC Beyond Borders _From EU to You_ InfoPack general.pdf
ESC Beyond Borders _From EU to You_ InfoPack general.pdf
 
Language Across the Curriculm LAC B.Ed.
Language Across the Curriculm LAC B.Ed.Language Across the Curriculm LAC B.Ed.
Language Across the Curriculm LAC B.Ed.
 
Digital Tools and AI for Teaching Learning and Research
Digital Tools and AI for Teaching Learning and ResearchDigital Tools and AI for Teaching Learning and Research
Digital Tools and AI for Teaching Learning and Research
 
Supporting (UKRI) OA monographs at Salford.pptx
Supporting (UKRI) OA monographs at Salford.pptxSupporting (UKRI) OA monographs at Salford.pptx
Supporting (UKRI) OA monographs at Salford.pptx
 
Sectors of the Indian Economy - Class 10 Study Notes pdf
Sectors of the Indian Economy - Class 10 Study Notes pdfSectors of the Indian Economy - Class 10 Study Notes pdf
Sectors of the Indian Economy - Class 10 Study Notes pdf
 
Instructions for Submissions thorugh G- Classroom.pptx
Instructions for Submissions thorugh G- Classroom.pptxInstructions for Submissions thorugh G- Classroom.pptx
Instructions for Submissions thorugh G- Classroom.pptx
 
Students, digital devices and success - Andreas Schleicher - 27 May 2024..pptx
Students, digital devices and success - Andreas Schleicher - 27 May 2024..pptxStudents, digital devices and success - Andreas Schleicher - 27 May 2024..pptx
Students, digital devices and success - Andreas Schleicher - 27 May 2024..pptx
 
Polish students' mobility in the Czech Republic
Polish students' mobility in the Czech RepublicPolish students' mobility in the Czech Republic
Polish students' mobility in the Czech Republic
 
Sha'Carri Richardson Presentation 202345
Sha'Carri Richardson Presentation 202345Sha'Carri Richardson Presentation 202345
Sha'Carri Richardson Presentation 202345
 

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