Introduction to Graphical User...
Transcript of Introduction to Graphical User...
![Page 1: Introduction to Graphical User Interfacescsc.columbusstate.edu/summers/NOTES/3118/Introduction.pdf · Introduction to Graphical User Interfaces Spring 2014 Instructor: Wayne Summers](https://reader033.fdocuments.net/reader033/viewer/2022051601/5ad090357f8b9ad24f8dd317/html5/thumbnails/1.jpg)
Introduction to Graphical User Interfaces
Spring 2014
Instructor:Wayne Summers
Room 453, CCT BuildingPhone: 706-507-8170
Email: [email protected]
![Page 2: Introduction to Graphical User Interfacescsc.columbusstate.edu/summers/NOTES/3118/Introduction.pdf · Introduction to Graphical User Interfaces Spring 2014 Instructor: Wayne Summers](https://reader033.fdocuments.net/reader033/viewer/2022051601/5ad090357f8b9ad24f8dd317/html5/thumbnails/2.jpg)
Today's Schedule
• Introductions
• Syllabus
• GUI Design Principles
Slide 1- 2
![Page 3: Introduction to Graphical User Interfacescsc.columbusstate.edu/summers/NOTES/3118/Introduction.pdf · Introduction to Graphical User Interfaces Spring 2014 Instructor: Wayne Summers](https://reader033.fdocuments.net/reader033/viewer/2022051601/5ad090357f8b9ad24f8dd317/html5/thumbnails/3.jpg)
Introductions –About you …
• Your name, major track
• What you do apart from studying
• Your favorite course so far – and the one you’ve found most difficult
• What you expect to gain from this class
Slide 1- 3
![Page 4: Introduction to Graphical User Interfacescsc.columbusstate.edu/summers/NOTES/3118/Introduction.pdf · Introduction to Graphical User Interfaces Spring 2014 Instructor: Wayne Summers](https://reader033.fdocuments.net/reader033/viewer/2022051601/5ad090357f8b9ad24f8dd317/html5/thumbnails/4.jpg)
Syllabus
Slide 1- 4
![Page 5: Introduction to Graphical User Interfacescsc.columbusstate.edu/summers/NOTES/3118/Introduction.pdf · Introduction to Graphical User Interfaces Spring 2014 Instructor: Wayne Summers](https://reader033.fdocuments.net/reader033/viewer/2022051601/5ad090357f8b9ad24f8dd317/html5/thumbnails/5.jpg)
What is User Interface?
Slide 1- 5
![Page 6: Introduction to Graphical User Interfacescsc.columbusstate.edu/summers/NOTES/3118/Introduction.pdf · Introduction to Graphical User Interfaces Spring 2014 Instructor: Wayne Summers](https://reader033.fdocuments.net/reader033/viewer/2022051601/5ad090357f8b9ad24f8dd317/html5/thumbnails/6.jpg)
What is User Interface?
• The user interface is the aggregate of meansby which people interact with the system—a machine, computer program or other complex tool.
• Two components:
– Input, allowing the users to manipulate a system
– Output, allowing the system to indicate the effects of the users' manipulation.
Slide 1- 6
![Page 7: Introduction to Graphical User Interfacescsc.columbusstate.edu/summers/NOTES/3118/Introduction.pdf · Introduction to Graphical User Interfaces Spring 2014 Instructor: Wayne Summers](https://reader033.fdocuments.net/reader033/viewer/2022051601/5ad090357f8b9ad24f8dd317/html5/thumbnails/7.jpg)
A Brief History of the Human-Computer Interface
Punch cards, Line printers Early computers (1950s-60s)
Keyboards, Monitors Command language based(1970s-1980s)
Mouse, trackball, touch pad, touch screens
Graphical User Interfaces (GUIs) (1990s - )
Multitouch screen, Voice,synthesized speech, gesture
“Intelligent” interfaces (2000s - )
Slide 1- 7
![Page 8: Introduction to Graphical User Interfacescsc.columbusstate.edu/summers/NOTES/3118/Introduction.pdf · Introduction to Graphical User Interfaces Spring 2014 Instructor: Wayne Summers](https://reader033.fdocuments.net/reader033/viewer/2022051601/5ad090357f8b9ad24f8dd317/html5/thumbnails/8.jpg)
Punch card, keypunch and then VDUs
Slide 1- 8
![Page 9: Introduction to Graphical User Interfacescsc.columbusstate.edu/summers/NOTES/3118/Introduction.pdf · Introduction to Graphical User Interfaces Spring 2014 Instructor: Wayne Summers](https://reader033.fdocuments.net/reader033/viewer/2022051601/5ad090357f8b9ad24f8dd317/html5/thumbnails/9.jpg)
Command Line User Interface
Slide 1- 9
![Page 10: Introduction to Graphical User Interfacescsc.columbusstate.edu/summers/NOTES/3118/Introduction.pdf · Introduction to Graphical User Interfaces Spring 2014 Instructor: Wayne Summers](https://reader033.fdocuments.net/reader033/viewer/2022051601/5ad090357f8b9ad24f8dd317/html5/thumbnails/10.jpg)
A Brief History of the Graphical User Interface in 77 seconds
• http://www.youtube.com/watch?v=TZGGUrom1Mg&feature=related
• The MS Surface
• http://www.youtube.com/watch?v=6VfpVYYQzHs
• The MS Surface – a different take
• http://www.youtube.com/watch?v=CZrr7AZ9nCY
Slide 1- 10
![Page 11: Introduction to Graphical User Interfacescsc.columbusstate.edu/summers/NOTES/3118/Introduction.pdf · Introduction to Graphical User Interfaces Spring 2014 Instructor: Wayne Summers](https://reader033.fdocuments.net/reader033/viewer/2022051601/5ad090357f8b9ad24f8dd317/html5/thumbnails/11.jpg)
Why User Interface is Important
• User needs must be satisfied in an effective and satisfying way
• User focus should be on the task, instead of the mechanism to perform the task.
• How would you describe a poorly designed user interface?
Slide 1- 11
![Page 12: Introduction to Graphical User Interfacescsc.columbusstate.edu/summers/NOTES/3118/Introduction.pdf · Introduction to Graphical User Interfaces Spring 2014 Instructor: Wayne Summers](https://reader033.fdocuments.net/reader033/viewer/2022051601/5ad090357f8b9ad24f8dd317/html5/thumbnails/12.jpg)
The Costs of Badly Designed Interfaces
Slide 1- 12
![Page 13: Introduction to Graphical User Interfacescsc.columbusstate.edu/summers/NOTES/3118/Introduction.pdf · Introduction to Graphical User Interfaces Spring 2014 Instructor: Wayne Summers](https://reader033.fdocuments.net/reader033/viewer/2022051601/5ad090357f8b9ad24f8dd317/html5/thumbnails/13.jpg)
The Costs of Badly Designed Interfaces
o Confusion leads to mistakes, loss of productivity
o Bad interfaces frustrates user, discourages use
o Financial loss for user
o Loss of market share for vendor
Slide 1- 13
![Page 14: Introduction to Graphical User Interfacescsc.columbusstate.edu/summers/NOTES/3118/Introduction.pdf · Introduction to Graphical User Interfaces Spring 2014 Instructor: Wayne Summers](https://reader033.fdocuments.net/reader033/viewer/2022051601/5ad090357f8b9ad24f8dd317/html5/thumbnails/14.jpg)
An Example of poor Design
Slide 1- 14
You can sign in to your account and then choose security options … or can you?http://slostc.org/topics/usability/poor_ui_examples.html
![Page 15: Introduction to Graphical User Interfacescsc.columbusstate.edu/summers/NOTES/3118/Introduction.pdf · Introduction to Graphical User Interfaces Spring 2014 Instructor: Wayne Summers](https://reader033.fdocuments.net/reader033/viewer/2022051601/5ad090357f8b9ad24f8dd317/html5/thumbnails/15.jpg)
Impact of Inefficient Screen Design on Processing Time (Galitz, 2007)
ADITIONAL SECONDSREQUIRED PER SCREEN IN SECONDS
ADDITIONAL PERSON-YEARS REQUIRED TO PROCESS 4.8 MILLION SCREENS PER YEAR
1 .7
5 3.6
10 7.1
20 14.2
Slide 1- 15
![Page 16: Introduction to Graphical User Interfacescsc.columbusstate.edu/summers/NOTES/3118/Introduction.pdf · Introduction to Graphical User Interfaces Spring 2014 Instructor: Wayne Summers](https://reader033.fdocuments.net/reader033/viewer/2022051601/5ad090357f8b9ad24f8dd317/html5/thumbnails/16.jpg)
Benefits of good Design
Slide 1- 16
![Page 17: Introduction to Graphical User Interfacescsc.columbusstate.edu/summers/NOTES/3118/Introduction.pdf · Introduction to Graphical User Interfaces Spring 2014 Instructor: Wayne Summers](https://reader033.fdocuments.net/reader033/viewer/2022051601/5ad090357f8b9ad24f8dd317/html5/thumbnails/17.jpg)
Benefits of good Design
Increased productivity
Lower training time
Lower customer support line costs
More satisfied customers
Rule of thumb:$1 invested in system usability returns $10 to $100 (IBM, 2001)
Slide 1- 17
![Page 18: Introduction to Graphical User Interfacescsc.columbusstate.edu/summers/NOTES/3118/Introduction.pdf · Introduction to Graphical User Interfaces Spring 2014 Instructor: Wayne Summers](https://reader033.fdocuments.net/reader033/viewer/2022051601/5ad090357f8b9ad24f8dd317/html5/thumbnails/18.jpg)
User Interface Design Guidelines
• “When developing an application, you should carefully plan the design of its user interface.
A correctly designed user interface should be simple, self-explanatory, and without distracting features” (Gaddis & Irvine, p. 801)
Slide 1- 18
![Page 19: Introduction to Graphical User Interfacescsc.columbusstate.edu/summers/NOTES/3118/Introduction.pdf · Introduction to Graphical User Interfaces Spring 2014 Instructor: Wayne Summers](https://reader033.fdocuments.net/reader033/viewer/2022051601/5ad090357f8b9ad24f8dd317/html5/thumbnails/19.jpg)
Some User Interface Design Guidelines
• Provide a menu system
• Use color wisely
– Use dark text on a light background
– Use predefined Windows colors
– Avoid bright colors
• Avoid nonstandard fonts
• Define a logical tab order
Slide 1- 19
![Page 20: Introduction to Graphical User Interfacescsc.columbusstate.edu/summers/NOTES/3118/Introduction.pdf · Introduction to Graphical User Interfaces Spring 2014 Instructor: Wayne Summers](https://reader033.fdocuments.net/reader033/viewer/2022051601/5ad090357f8b9ad24f8dd317/html5/thumbnails/20.jpg)
Some User Interface Design Guidelines
• Provide a menu system
• Use color wisely
– Use dark text on a light background
– Use predefined Windows colors
– Avoid bright colors
• Avoid nonstandard fonts
• Define a logical tab order
Slide 1- 20
![Page 21: Introduction to Graphical User Interfacescsc.columbusstate.edu/summers/NOTES/3118/Introduction.pdf · Introduction to Graphical User Interfaces Spring 2014 Instructor: Wayne Summers](https://reader033.fdocuments.net/reader033/viewer/2022051601/5ad090357f8b9ad24f8dd317/html5/thumbnails/21.jpg)
Some User Interface Design Guidelines
• Provide a menu system
• Use color wisely
– Use dark text on a light background
– Use predefined Windows colors
– Avoid bright colors
• Avoid nonstandard fonts
• Define a logical tab order
Slide 1- 21
![Page 22: Introduction to Graphical User Interfacescsc.columbusstate.edu/summers/NOTES/3118/Introduction.pdf · Introduction to Graphical User Interfaces Spring 2014 Instructor: Wayne Summers](https://reader033.fdocuments.net/reader033/viewer/2022051601/5ad090357f8b9ad24f8dd317/html5/thumbnails/22.jpg)
User Interface Design Guidelines (cont)
• Assign tool tips
• Provide keyboard access
• Group controls
• Position forms appropriately
• Provide a splash screen
Slide 1- 22