1. 1CS 480: Graphical User Interfaces. Dario Salvucci, Drexel University. Lecture 1: Introduction to GUIs

2. CS 480: Graphical User Interfaces. Dario Salvucci, Drexel University.1 Welcome! About me – Michael Czajkowski – Email: mczajkow@mcs.drexel.edu – Office Hours: Appointment Only, on Thursdays About this course – Syllabus, timeline, & resources on-line at http://www.mcs.drexel.edu/~mczajkow/Courses/cs338-f02/ Shared Resources with Dr. Salvucci

3. CS 480: Graphical User Interfaces. Dario Salvucci, Drexel University.1 Who / what / where / when / why / how Prerequisites Lectures Readings Assignments, Project Exams Grading Communication Policies Questions?

4. CS 480: Graphical User Interfaces. Dario Salvucci, Drexel University.1 What’s a GUI? GUI = Graphical User Interface For many programs in CS coursework… For GUIs we’ll be building… args files stdout, files Program user manual input program graphical interface

5. CS 480: Graphical User Interfaces. Dario Salvucci, Drexel University.1 Where are GUIs? Everywhere! – Windows / Mac applications – Linux desktops / window managers – Web pages of every kind – ATM machines, cell phones, watches, military applications...

6. CS 480: Graphical User Interfaces. Dario Salvucci, Drexel University.1 Why have GUIs? Can present a lot of information in small area but still maintain readability Can present different types of information (e.g., pictures, animations) Can store “functions” on-screen without forcing user to remember them Can provide “direct-manipulation” interfaces with various input

7. CS 480: Graphical User Interfaces. Dario Salvucci, Drexel University.1 Challenges of a GUI Limitations of the display – space / area – resolution Limitations of the user – visual attention – visual processes (e.g., reading a word) – motor processes (e.g., mouse movement) – cognitive processes (e.g., memory)

8. CS 480: Graphical User Interfaces. Dario Salvucci, Drexel University.1 How do we design GUIs? Psychology of HCI User-centered design – goals: what is the user trying to accomplish? – needs: what does the user need to do this? – user constraints: what can/can’t the user do? – task constraints: what can/can’t be done? – Design with the User's Mind in Mind – and lots of other things to consider Design is not the focus of this course, BUT We always need to keep the user in mind !!!

9. CS 480: Graphical User Interfaces. Dario Salvucci, Drexel University.1 Problems in user understanding Difference of evaluation – Users need to take what they see and encode it with respect to their goals. – possible problems: ergonomic factors (e.g., font) lack of structure and/or consistency lack of information Difference of execution – Users have to decide how to execute their goals. – possible problems: lack of procedural knowledge about interface inadequate feedback

10. CS 480: Graphical User Interfaces. Dario Salvucci, Drexel University.1 When GUIs go bad Choose-your-own-example One very good example: user goal(s)? task demands? user limitations? user expectations?

11. CS 480: Graphical User Interfaces. Dario Salvucci, Drexel University.1 When GUIs get better A much better interface, IMHO (though for a different purpose) flexible redundant contextual problems?

12. CS 480: Graphical User Interfaces. Dario Salvucci, Drexel University.1 Cash Register example Meetingmaker example Serious Problem: Productivity Paradox What's going on here? Listen to your surroundings When The User was Forgotten

13. CS 480: Graphical User Interfaces. Dario Salvucci, Drexel University.1 What makes a good GUI? Mac OS X launcher — what do you think?

14. CS 480: Graphical User Interfaces. Dario Salvucci, Drexel University.1 Avoiding GUI pitfalls Jakob Nielsen's “Top Ten Mistakes in Web Design” Is good design really this easy? Q: How can we do better? A: Keep the user's mind in mind! 1. Using Frames 2. Gratuitous Use of Bleeding-Edge Technology 3. Scrolling Text, Marquees, and Constantly Running Animations 4. Complex URLs 5. Orphan Pages 6. Long Scrolling Pages 7. Lack of Navigation Support 8. Non-Standard Link Colors 9. Outdated Information 10. Overly Long Download Times

15. CS 480: Graphical User Interfaces. Dario Salvucci, Drexel University.1 Knowing your users Thanks to Scott MacKenzie @ York U for the this slide!! User Population Assembler code 0.01% Program (any language) 1% C++ code 0.1% Linux 15% Usability MS Windows 70% Television 98%

16. CS 480: Graphical User Interfaces. Dario Salvucci, Drexel University.1 When GUIs “go good” Shorter training time  lower costs Fewer errors  less hassle, lower costs Less maintenance  less hassle, lower costs High transfer  lower future costs In other words: Good design saves time. Good design saves money. Whole businesses based on this philosophy.

17. CS 480: Graphical User Interfaces. Dario Salvucci, Drexel University.1 How do we build GUIs? Ah, the real focus of this course. :-) Good, clean implementations facilitate good, clean user interfaces. – efficient code leads to faster response – well structured code leads to simple interfaces (and simple is good! -- easy to learn, remember) – robust code doesn’t crash Good GUI: Have both good design and good implementation.

18. CS 480: Graphical User Interfaces. Dario Salvucci, Drexel University.1 Design & implementation What are the implementation costs for these two interfaces?

19. CS 480: Graphical User Interfaces. Dario Salvucci, Drexel University.1 Implementation: OOP principles Modularity: Most important principle when applied to building GUIs. “Components” Useage of inheritance principles You will be graded on how modular your code is! Its important. :) Event-Based Systems

20. CS 480: Graphical User Interfaces. Dario Salvucci, Drexel University.1 Human-computer interaction is a discipline concerned with the design, implementation, and evaluation of interactive systems for human use and with the study of the major phenomena surrounding them. The HCI lifecycle is an iterative cycle that involves designing and evaluating with “users” as much as possible. Design Prototype Evaluate Thanks to Scott MacKenzie @ York U for the next few slides!! Human-computer interaction

21. CS 480: Graphical User Interfaces. Dario Salvucci, Drexel University.1 Multidisciplinary nature of HCI Human side: – cognitive psychology – ergonomics and human factors – sociology and anthropology – linguistics – communication theory – social and organizational psychology – graphic and industrial design

22. CS 480: Graphical User Interfaces. Dario Salvucci, Drexel University.1 Multidisciplinary nature of HCI Machine side: – computer science – engineering – computer graphics – operating systems – programming languages – software engineering – development environments – artificial intelligence

23. CS 480: Graphical User Interfaces. Dario Salvucci, Drexel University.1 Why are good GUIs hard to build? 50% of design, implementation, maintenance, code size, etc. Multiprocessing: UIs are inherently concurrent! – multiple inputs, redraws – synchronization, deadlock prevention Flexible: Must deal with many different kinds of users. No one human is exactly like another! Real-time requirements Must be robust (users do lots of odd things!)

24. CS 480: Graphical User Interfaces. Dario Salvucci, Drexel University.1 Why are good GUIs hard to build? (2) API & UI logic complexity Reactive instead of proactive: the user dictates what the system should do Hard to modularize (OOP interface design) Exhaustive testing of UIs is hard – how to ensure robustness? Evaluation with users is time consuming And more...

25. CS 480: Graphical User Interfaces. Dario Salvucci, Drexel University.1 Course overview Our task for this course: Learn how to build great GUIs with a user- centered design! How we’ll do this: Implement GUIs in Java & Swing What is Java? What is Swing?