1. 1CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. Lecture 1: User Oriented Design

2. CS 338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 Hello! About me – Michael Czajkowski, Adjunct Professor, CS Department – Email: mczajkow@mcs.drexel.edu – Office: Korman 233 – Office hours: Wednesday 5-6pm, or by appointment. About this course – Course web site: http://www.cs.drexel.edu/~mczajkow/Courses/cs338-f03

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

4. CS 338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 What’s a Graphical User Interface? In the narrow sense... – a graphical information channel between a user and computer system/application e.g., most Windows & Mac applications – any interface with buttons, menus, etc (“widgets”) In the broader sense... – ATMs, cell phones, navigation devices, etc. – GUIs don’t have to have standard widgets! – GUIs don’t have to be on your desktop! This course focuses on the first group, but we’ll keep the second group in mind

5. CS 338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 This course's objectives This is a GUI Design Course. – In order to pass this class you must understand not only how to program a GUI, you must also know how to design one. GUI Programming: – All of the GUI programming done for this class will be done in the Java programming language, using the Swing library. GUI Design: – This is the heart of the course. It is much more important than the programming aspect. How do you design an interface to be usable?

6. CS 338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 GUI Design? Who cares! I want to program GUI Design is not easy! It is a complicated thourough process involving many people at many levels of an organization. Its not just for programmers! GUI Design involves cognitive psychology, graphic arts, human factors engineering, communication, and then programming! All of this is for one purpose: “If achieving the user's goals is the basis of our design process, the user will be satisfied and happy. If the user is happy, he will gladly pay us money, and we will succeed at business.” - Alan Cooper

7. CS 338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 Who is Alan Cooper? Alan Cooper is the author of our course textbook, “About Face 2.0: The Essentials of Interaction Design” Alan Cooper's track record: – Created first serious business software for PCs. – Father of Visual Basic – Owns a multi-million dollar usability engineering consulting firm, www.cooper.com – Inventor of the “Goal-Directed” process of design. This is the design methodology we will be following! – Author of many design books including, “The Inmates are Running the Asylum

8. CS 338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 Usability Today Some problems with GUIs today: – software is “rude” e.g., inappropriate or derogatory error messages – software makes unwarranted assumptions e.g., assumes user knows underlying mechanisms, such as saving to a hard drive – software is obscure “Use passive mode on FTP proxy?” – software exhibits inappropriate behavior open Word document, print it, close it — “Save?”

9. CS 338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 To set the stage... Why do we have these problems? – we have a conflict of interest for whom exactly are we developing the system? – we lack a process how can we think like engineers to evaluate user needs and develop appropriate, usable systems? one simple, common, but not-so-good process:

10. CS 338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 Bad GUIs can ruin a company! GUI Applications must: – 'Be more advanced than our competitor!' (technology) Too much of this: Novel. No Desirability. – 'Be more desirable than our competitor!' (desirable) Too much of this: Apple. No Viability. – 'Sustain our company's bottom line!' (viable) Too much of this: Micro$oft. No Desirability. In the end: The objective is a product that is desirable, viable, and buildable! If you get all three just right, you will always win!

11. CS 338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 When Usability Fails When GUIs Fail: – Software does not enhance productivity. – A Productivity Paradox exists. – People can not use their computers effectively. – People get angry at their computer. – Computers fail to understand what the human wants from them. – Failures in communication lead to failures in understanding, which can have negative results. – You hear many many stories about bad computers. Lets take a good close look

12. CS 338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 Bad GUIs

13. CS 338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 Bad GUIs

14. CS 338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 Bad GUIs

15. CS 338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 Bad GUIs

16. CS 338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 Bad GUIs

17. CS 338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 Bad GUIs

18. CS 338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 Bad GUIs

19. CS 338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 Bad GUIs

20. CS 338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 Bad GUIs

21. CS 338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 Bad GUIs

22. CS 338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 Bad GUIs

23. CS 338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 Bad GUIs

24. CS 338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 Bad GUIs

25. CS 338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 Bad GUIs

26. CS 338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 Bad GUIs

27. CS 338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 Bad GUIs

28. CS 338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 Bad GUIs

29. CS 338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 Upset Users

30. CS 338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 Upset Users

31. CS 338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 Bad Software can have Fatal Results

32. CS 338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 Whose Fault, and what can we do? Programmers made the GUIs, is it their fault? What about their managers? What about the people at marketing? Whose suppose to do all of this work, so that GUIs don't turn out bad? Thats what GUI Design is for. It includes everybody, not just the programmer. How are we going to Design a usable GUI?

33. CS 338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 Goal Oriented Design: High Level Users have goals in using our GUIs User-centered design involves... – 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? – and lots of other things to consider

34. CS 338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 Goal Oriented Design: Low Level Users embody all aspects of being human Being human means having limitations: – visual attention(e.g., noticing animation) – visual processes(e.g., reading a word) – motor processes(e.g., mouse movement) – cognitive processes(e.g., memory)

35. CS 338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 Goal Oriented Design Cooper’s 5-component process: Each of these is covered in future lectures, in great detail. Research users & the domain Modeling users & use contexts Requirements user, business, & technical needs Framework structure & flow Refinement of behavior, form, context

36. CS 338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 Human-computer interaction 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. The HCI academic world is huge, thousands of people perform research and achieve accomplishments that serve the purpose of better computer interaction. A good research link: www.hcibib.org

37. CS 338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 Building user interfaces Much of this process is smart, good ol’ software engineering – applicable to the GUI parts of the system – applicable to non-GUI parts of the system This course focuses on the implementation of the GUI parts BUT... We always keep in mind the other aspects of the process, particularly design Use your knowledge of Software Design and engineering here, it applies! Swing code: very tedious, long, and ugly!

38. CS 338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 Mental & implementation models Implementation models describe how we, as programmers, think about the system – there are many levels to these models – e.g., when you write “x++”, we increment x – but what happens in the processor? cache?... Mental models describe how the user thinks about the system – not the same as the implementation model! – e.g., saving changes (Word file vs. file system) – e.g., TV and movie projection – e.g., household electricity

39. CS 338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 Represented models Represented models fall between implementation and mental models Implementation Model Mental Model Represented Models

40. CS 338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 Designing for the mental model Computer Science people build systems. Not surprisingly, then, most systems conform to implementation models. Book example: Windows file system – drag file within drive (e.g., C  C drive)  file moves to new location – drag file to another drive (e.g., C  D drive)  file is copied to new location – why? implementation of file system – this puts the burden of understanding low-level file system details on the user!!!

41. CS 338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 Designing for the mental model Another example: Word references – link number to other part of the document – mental model: this stays linked – implementation model: link gets broken, but software doesn’t correct — makes you do it!

42. CS 338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 New technology & mental models Sometimes, new technology warrants breaking old mental models — carefully! Example: the good ol’ calendar

43. CS 338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 Design & implementation: Summary 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 implementation doesn’t make up for bad design, and good design doesn’t help a bad implementation. Implementation & design go hand-in-hand!

44. CS 338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 We want to make Good GUIs When GUIs work well... – 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 – Good Design earns happy customers!