How to develop usable application - ulab.cz · Final report 1.Test goal 2.Summary 3.Results 3.1...
Transcript of How to develop usable application - ulab.cz · Final report 1.Test goal 2.Summary 3.Results 3.1...
![Page 1: How to develop usable application - ulab.cz · Final report 1.Test goal 2.Summary 3.Results 3.1 Issue 1 Problem description Solution proposal 3.2 Issue 2 Conclusion. How to develop](https://reader035.fdocuments.in/reader035/viewer/2022081405/5f0c31567e708231d4343298/html5/thumbnails/1.jpg)
How to develop usable applicationHow to develop usable application
Zdeněk MíkovecZdeněk Mí[email protected]@fel.cvut.cz
Dept. of Computer Science and EngineeringDept. of Computer Science and EngineeringCTU in PragueCTU in Prague
http://usability.felk.cvut.czhttp://usability.felk.cvut.cz
![Page 2: How to develop usable application - ulab.cz · Final report 1.Test goal 2.Summary 3.Results 3.1 Issue 1 Problem description Solution proposal 3.2 Issue 2 Conclusion. How to develop](https://reader035.fdocuments.in/reader035/viewer/2022081405/5f0c31567e708231d4343298/html5/thumbnails/2.jpg)
How to develop usable applicationsJanuary 2005
(2)
What it is usability of an applicationWhat it is usability of an application??
how efficientlyhow efficiently, , easy and secure the user uses the easy and secure the user uses the applicationapplication
3/4 3/4 of an application represents user interfaceof an application represents user interface
![Page 3: How to develop usable application - ulab.cz · Final report 1.Test goal 2.Summary 3.Results 3.1 Issue 1 Problem description Solution proposal 3.2 Issue 2 Conclusion. How to develop](https://reader035.fdocuments.in/reader035/viewer/2022081405/5f0c31567e708231d4343298/html5/thumbnails/3.jpg)
How to develop usable applicationsJanuary 2005
(3)
What it is usability of What it is usability of the system?the system?
Socialacceptability
Practicalacceptability
Cost
Compatibility
Reliability
Etc.
Sys
tem
acc
epta
bilit
y
Usefulness
Utility
Usability Easy to learnEfficient to use
Easy to remember
Few errors
Subjectivelypleasing
Source: Jacob Nielsen, Usability Engineering
![Page 4: How to develop usable application - ulab.cz · Final report 1.Test goal 2.Summary 3.Results 3.1 Issue 1 Problem description Solution proposal 3.2 Issue 2 Conclusion. How to develop](https://reader035.fdocuments.in/reader035/viewer/2022081405/5f0c31567e708231d4343298/html5/thumbnails/4.jpg)
How to develop usable applicationsJanuary 2005
(4)
Bad application design exampleBad application design example
![Page 5: How to develop usable application - ulab.cz · Final report 1.Test goal 2.Summary 3.Results 3.1 Issue 1 Problem description Solution proposal 3.2 Issue 2 Conclusion. How to develop](https://reader035.fdocuments.in/reader035/viewer/2022081405/5f0c31567e708231d4343298/html5/thumbnails/5.jpg)
How to develop usable applicationsJanuary 2005
(5)
Bad application design exampleBad application design example
![Page 6: How to develop usable application - ulab.cz · Final report 1.Test goal 2.Summary 3.Results 3.1 Issue 1 Problem description Solution proposal 3.2 Issue 2 Conclusion. How to develop](https://reader035.fdocuments.in/reader035/viewer/2022081405/5f0c31567e708231d4343298/html5/thumbnails/6.jpg)
How to develop usable applicationsJanuary 2005
(6)
Bad application design exampleBad application design example
![Page 7: How to develop usable application - ulab.cz · Final report 1.Test goal 2.Summary 3.Results 3.1 Issue 1 Problem description Solution proposal 3.2 Issue 2 Conclusion. How to develop](https://reader035.fdocuments.in/reader035/viewer/2022081405/5f0c31567e708231d4343298/html5/thumbnails/7.jpg)
How to develop usable applicationsJanuary 2005
(7)
What is the problem and how to solve itWhat is the problem and how to solve it??
ProblemProblem: : design without involvement of the userdesign without involvement of the user
SolutionSolution: : allow the user to participate in the designallow the user to participate in the design
Advantages of usability testingAdvantages of usability testing– real user involved into the development processreal user involved into the development process– helps finding the optimal user interfacehelps finding the optimal user interface– discovers errors in early stage of the development discovers errors in early stage of the development
processprocess
![Page 8: How to develop usable application - ulab.cz · Final report 1.Test goal 2.Summary 3.Results 3.1 Issue 1 Problem description Solution proposal 3.2 Issue 2 Conclusion. How to develop](https://reader035.fdocuments.in/reader035/viewer/2022081405/5f0c31567e708231d4343298/html5/thumbnails/8.jpg)
How to develop usable applicationsJanuary 2005
(8)
Usability Lab Usability Lab – – usability testingusability testingObserver room
(UI designers, programmers, test organizers)Participants room(test participant, moderator)
![Page 9: How to develop usable application - ulab.cz · Final report 1.Test goal 2.Summary 3.Results 3.1 Issue 1 Problem description Solution proposal 3.2 Issue 2 Conclusion. How to develop](https://reader035.fdocuments.in/reader035/viewer/2022081405/5f0c31567e708231d4343298/html5/thumbnails/9.jpg)
How to develop usable applicationsJanuary 2005
(9)
Usability Lab Usability Lab – – usability testingusability testingObserver room
(UI designers, programmers, test organizers)Participants room(test participant, moderator)
TasksTask 1: xx xxx xx x xxx xx xxx.
![Page 10: How to develop usable application - ulab.cz · Final report 1.Test goal 2.Summary 3.Results 3.1 Issue 1 Problem description Solution proposal 3.2 Issue 2 Conclusion. How to develop](https://reader035.fdocuments.in/reader035/viewer/2022081405/5f0c31567e708231d4343298/html5/thumbnails/10.jpg)
How to develop usable applicationsJanuary 2005
(10)
Usability Lab Usability Lab – – usability testingusability testingObserver room
(UI designers, programmers, test organizers)Participants room(test participant, moderator)
I am trying to create new
projectTasks
Task 1: xx xxx xx x xxx xx xxx.
LogTask 1: xx xxx xx x xxx xx xxx.
Test Session LogTask 1:12:01 start12:07 end
Task 2:12:09 start12:10 creates new project
![Page 11: How to develop usable application - ulab.cz · Final report 1.Test goal 2.Summary 3.Results 3.1 Issue 1 Problem description Solution proposal 3.2 Issue 2 Conclusion. How to develop](https://reader035.fdocuments.in/reader035/viewer/2022081405/5f0c31567e708231d4343298/html5/thumbnails/11.jpg)
How to develop usable applicationsJanuary 2005
(11)
Usability Lab Usability Lab – – usability testingusability testingObserver room
(UI designers, programmers, test organizers)Participants room(test participant, moderator)
I am trying to create new
projectTasks
Task 1: xx xxx xx x xxx xx xxx.
ZápisÚ
loha 1: xx xxx xx x xxx xx xxx.
I expected item "New Project" in menu
"File".
I can't find appropriate menu item
Test Session LogTask 1:12:01 start12:07 end
Task 2:12:09 start12:10 creates new project12:12 can not find appropriatemenu item
12:13 expects "New Project" in menu "File"
![Page 12: How to develop usable application - ulab.cz · Final report 1.Test goal 2.Summary 3.Results 3.1 Issue 1 Problem description Solution proposal 3.2 Issue 2 Conclusion. How to develop](https://reader035.fdocuments.in/reader035/viewer/2022081405/5f0c31567e708231d4343298/html5/thumbnails/12.jpg)
How to develop usable applicationsJanuary 2005
(12)
Usability Lab Usability Lab – – usability testingusability testingObserver room
(UI designers, programmers, test organizers)Participants room(test participant, moderator)
ZápisÚ
loha 1: xx xxx xx x xxx xx xxx.
Report
1. Goal xx
xxx xx x xxx xx xxx.
Final report1. Test goal2. Summary3. Results
3.1 Issue 1Problem descriptionSolution proposal
3.2 Issue 24. Conclusion
![Page 13: How to develop usable application - ulab.cz · Final report 1.Test goal 2.Summary 3.Results 3.1 Issue 1 Problem description Solution proposal 3.2 Issue 2 Conclusion. How to develop](https://reader035.fdocuments.in/reader035/viewer/2022081405/5f0c31567e708231d4343298/html5/thumbnails/13.jpg)
How to develop usable applicationsJanuary 2005
(13)
Usability Test I: Mobile vector editorUsability Test I: Mobile vector editor
Inspector
Construction site
Mummy Server
construction plans
Adaptation
![Page 14: How to develop usable application - ulab.cz · Final report 1.Test goal 2.Summary 3.Results 3.1 Issue 1 Problem description Solution proposal 3.2 Issue 2 Conclusion. How to develop](https://reader035.fdocuments.in/reader035/viewer/2022081405/5f0c31567e708231d4343298/html5/thumbnails/14.jpg)
How to develop usable applicationsJanuary 2005
(14)
Navigation techniquesNavigation techniques scroll bars vs. grasp handscroll bars vs. grasp hand non-real time repainting -> feedback problemnon-real time repainting -> feedback problem
panning toolbar
scroll bars
panning toolbar
![Page 15: How to develop usable application - ulab.cz · Final report 1.Test goal 2.Summary 3.Results 3.1 Issue 1 Problem description Solution proposal 3.2 Issue 2 Conclusion. How to develop](https://reader035.fdocuments.in/reader035/viewer/2022081405/5f0c31567e708231d4343298/html5/thumbnails/15.jpg)
How to develop usable applicationsJanuary 2005
(15)
Usability test II: CarDialerUsability test II: CarDialer
![Page 16: How to develop usable application - ulab.cz · Final report 1.Test goal 2.Summary 3.Results 3.1 Issue 1 Problem description Solution proposal 3.2 Issue 2 Conclusion. How to develop](https://reader035.fdocuments.in/reader035/viewer/2022081405/5f0c31567e708231d4343298/html5/thumbnails/16.jpg)
How to develop usable applicationsJanuary 2005
(16)
CarDialerCarDialer
![Page 17: How to develop usable application - ulab.cz · Final report 1.Test goal 2.Summary 3.Results 3.1 Issue 1 Problem description Solution proposal 3.2 Issue 2 Conclusion. How to develop](https://reader035.fdocuments.in/reader035/viewer/2022081405/5f0c31567e708231d4343298/html5/thumbnails/17.jpg)
How to develop usable applicationsJanuary 2005
(17)
CarDialer – Test setupCarDialer – Test setup
![Page 18: How to develop usable application - ulab.cz · Final report 1.Test goal 2.Summary 3.Results 3.1 Issue 1 Problem description Solution proposal 3.2 Issue 2 Conclusion. How to develop](https://reader035.fdocuments.in/reader035/viewer/2022081405/5f0c31567e708231d4343298/html5/thumbnails/18.jpg)
How to develop usable applicationsJanuary 2005
(18)
TestingTesting
CarDialer – "cancel, go back"CarDialer – "cancel, go back"
inputnumber
save?
"go back"
start
"cancel"–+"???"
"add"
![Page 19: How to develop usable application - ulab.cz · Final report 1.Test goal 2.Summary 3.Results 3.1 Issue 1 Problem description Solution proposal 3.2 Issue 2 Conclusion. How to develop](https://reader035.fdocuments.in/reader035/viewer/2022081405/5f0c31567e708231d4343298/html5/thumbnails/19.jpg)
How to develop usable applicationsJanuary 2005
(19)
Courses where usability testing is involvedCourses where usability testing is involved Software engineeringSoftware engineering
– a real life project a real life project development and deliverydevelopment and delivery
PDA (Design of mobile PDA (Design of mobile applications)applications)
HCI coursesHCI courses– HCI developmentHCI development– Mockup testMockup test– Usability testUsability test
![Page 20: How to develop usable application - ulab.cz · Final report 1.Test goal 2.Summary 3.Results 3.1 Issue 1 Problem description Solution proposal 3.2 Issue 2 Conclusion. How to develop](https://reader035.fdocuments.in/reader035/viewer/2022081405/5f0c31567e708231d4343298/html5/thumbnails/20.jpg)
How to develop usable applicationsJanuary 2005
(20)
Benefits of usability testing for HCI researchBenefits of usability testing for HCI research
research of user behavior while communicating research of user behavior while communicating with computerwith computer
design of novel user interfacesdesign of novel user interfaces design of new methods of interaction in special design of new methods of interaction in special
environmentsenvironments– mobile environmentmobile environment– users with special needsusers with special needs– multimodal communicationmultimodal communication
![Page 21: How to develop usable application - ulab.cz · Final report 1.Test goal 2.Summary 3.Results 3.1 Issue 1 Problem description Solution proposal 3.2 Issue 2 Conclusion. How to develop](https://reader035.fdocuments.in/reader035/viewer/2022081405/5f0c31567e708231d4343298/html5/thumbnails/21.jpg)
How to develop usable applicationsJanuary 2005
(21)
Usability tests saves moneyUsability tests saves money
as sooner you find an error as cheaper it isas sooner you find an error as cheaper it is
each dollar invested into better usability saveseach dollar invested into better usability saves10-10-100100 USD USD
PARADOX: PARADOX: efficient method efficient method !! rare usagerare usage
![Page 22: How to develop usable application - ulab.cz · Final report 1.Test goal 2.Summary 3.Results 3.1 Issue 1 Problem description Solution proposal 3.2 Issue 2 Conclusion. How to develop](https://reader035.fdocuments.in/reader035/viewer/2022081405/5f0c31567e708231d4343298/html5/thumbnails/22.jpg)
Thank YouThank YouZdeněk MíkovecZdeněk Míkovec
[email protected]@fel.cvut.czDept. of Computer Science and EngineeringDept. of Computer Science and Engineering
CTU in PragueCTU in Praguehttp://usability.felk.cvut.czhttp://usability.felk.cvut.cz