Graphical User Interface Chapter One Part 2
Transcript of Graphical User Interface Chapter One Part 2
![Page 1: Graphical User Interface Chapter One Part 2](https://reader031.fdocuments.net/reader031/viewer/2022020700/61f5625199518a1357630909/html5/thumbnails/1.jpg)
Graphical User Interface
Chapter One – Part 2Human Computer Interaction &
Graphical User InterfaceEditor
Dr Taha Hussein RassemFaculty of Computer Systems and Software
Engineering [email protected]
![Page 2: Graphical User Interface Chapter One Part 2](https://reader031.fdocuments.net/reader031/viewer/2022020700/61f5625199518a1357630909/html5/thumbnails/2.jpg)
Chapter Description
• Aims• To define the GUI and HCI concepts
• To explore the Background of GUI
• To explore and learn the Philosophy of GUI
• Expected Outcomes
– Understand the difference between the GUI and HCI.
– Able to understand the background and philosophy of GUI.
• References
1. Wilbert O. Galitz, The Essential Guide to User Interface Design: An Introduction to GUI Design Principles and Techniques, John Wiley & Sons Inc, 2007.
2. Jenifer Tidwell, Designing Interfaces, O'Reilly, 2011
3. Jeff Johnson, Designing with the Mind in Mind: Simple Guide to Understanding User Interface Design Rules , Morgan Kaufman Publisher, 2010
![Page 3: Graphical User Interface Chapter One Part 2](https://reader031.fdocuments.net/reader031/viewer/2022020700/61f5625199518a1357630909/html5/thumbnails/3.jpg)
User Interface Concepts
What I want as user
![Page 4: Graphical User Interface Chapter One Part 2](https://reader031.fdocuments.net/reader031/viewer/2022020700/61f5625199518a1357630909/html5/thumbnails/4.jpg)
Conceptual design process
![Page 5: Graphical User Interface Chapter One Part 2](https://reader031.fdocuments.net/reader031/viewer/2022020700/61f5625199518a1357630909/html5/thumbnails/5.jpg)
Conceptual design…
![Page 6: Graphical User Interface Chapter One Part 2](https://reader031.fdocuments.net/reader031/viewer/2022020700/61f5625199518a1357630909/html5/thumbnails/6.jpg)
Implicit conceptual design
○ Implicit rules:
○ Malfunction, No one expects to press a “On” button, but the result is “Off”.
![Page 7: Graphical User Interface Chapter One Part 2](https://reader031.fdocuments.net/reader031/viewer/2022020700/61f5625199518a1357630909/html5/thumbnails/7.jpg)
Explicit conceptual design
![Page 8: Graphical User Interface Chapter One Part 2](https://reader031.fdocuments.net/reader031/viewer/2022020700/61f5625199518a1357630909/html5/thumbnails/8.jpg)
User Interface Generation
○ Find out more on this issue on Internet.
○ Share your findings with your classmates
![Page 9: Graphical User Interface Chapter One Part 2](https://reader031.fdocuments.net/reader031/viewer/2022020700/61f5625199518a1357630909/html5/thumbnails/9.jpg)
Background of GUI
![Page 10: Graphical User Interface Chapter One Part 2](https://reader031.fdocuments.net/reader031/viewer/2022020700/61f5625199518a1357630909/html5/thumbnails/10.jpg)
EXAMPLE : Mozilla FirefoxThe design parts can be grouped and itemized by functions.
![Page 11: Graphical User Interface Chapter One Part 2](https://reader031.fdocuments.net/reader031/viewer/2022020700/61f5625199518a1357630909/html5/thumbnails/11.jpg)
Philosophy of GUI ???
▶ Find out more on this issue on Internet.
▶ Share your findings with your classmates
![Page 12: Graphical User Interface Chapter One Part 2](https://reader031.fdocuments.net/reader031/viewer/2022020700/61f5625199518a1357630909/html5/thumbnails/12.jpg)
Philosophy of GUI
Consistent
Helpful
RobustUser-
friendly
Powerful
![Page 13: Graphical User Interface Chapter One Part 2](https://reader031.fdocuments.net/reader031/viewer/2022020700/61f5625199518a1357630909/html5/thumbnails/13.jpg)
Another GUI Principles
Aesthetically pleasing
Clarity
Compatibility
Comprehensibility
Configurability Consistency
Control
Directness
Efficiency
Familiarity Flexibility
Forgiveness
Predictability
Recovery
Responsiveness Simplicity
Transparency
Trade-offs
![Page 14: Graphical User Interface Chapter One Part 2](https://reader031.fdocuments.net/reader031/viewer/2022020700/61f5625199518a1357630909/html5/thumbnails/14.jpg)
Further readings:
○ http://en.wikipedia.org/wiki/Human-Computer_Interaction
○ http://sigchi.org/cdg/cdg2.html
○ http://www.interfaceconcepts.com/concept.htm
○ http://www.deitel.com/books/vcppnethtp1/vcpphtp1_12.pdf
○ http://www.isii.com/
○ http://en.wikibooks.org/wiki/GUI_Design_Principles