Human-computer interaction Lecture 2: Design & Implementation 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 Design involves designing and Prototype evaluating with users as much as possible. Evaluate CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 1 CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 2 Users and limitations Before getting to implementation, let s look just one more time at users and their limitations <clips> 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 CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 3 CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 4 Page 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., movie/film projection e.g., household electricity 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 CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 5 CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 6 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! New technology & mental models Sometimes, new technology warrants breaking old mental models carefully! Example: the good ol calendar Significant change must be significantly better. CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 7 CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 8 Page 2
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! Design & implementation tradeoffs Example: Mac OS X launcher design issues? implementation issues? CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 9 CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 10 Design & implementation Example: Two web-based input interfaces design issues? implementation issues? 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. CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 11 CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 12 Page 3
Why are good GUIs hard to build? Multiprocessing: UIs are inherently concurrent! multiple inputs, redraws synchronization, deadlock prevention Must deal with abort, undo, redo anytime (this requires lots of state info to be kept) Real-time requirements Must be robust (users do lots of odd things!) Why are good GUIs hard to build? 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... Thanks to Scott MacKenzie @ York U for the next few slides!! CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 13 CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 14 Research Question of the Day We ll spend lots of time worrying about the user interface part of an application. What s the big deal? How important is this when implementing an application? Specifically, how much programming in a typical system is devoted to the interface? Research Question of the Day Myers & Rosson (1992) conducted this survey They analyzed 74 systems of various flavors Myers, B.A., & Rosson, M. B. (1992). Survey on user interface programming. In Human Factors in Computing Systems: Proceedings of SIGCHI 92 (pp. 195-202). New York: ACM Press. CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 15 CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 16 Page 4
Research Question of the Day Result: User interface required... 44.8% of design time 50.1% of implementation time 37.0% of maintenance time Research Question of the Day Interesting point: although UI = 50% of code on average, this varied greatly per system... CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 17 CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 18 Research Question of the Day Other interesting points prototypes & evaluation 46% built running prototypes 17% used paper-based designs use of graphics 70% 2D graphics, 14% 3D graphics use of programming languages 69% used C others used many (>10) other languages 58% used multiple languages in the same system! How do we implement GUIs? For many programs in CS coursework user For typical GUI applications user args files program input (mouse, keys, etc.) output (text, images, etc.) stdout, files program This leads to a very different style of design and implementation! user CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 19 CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 20 Page 5
History of Java Has its beginnings as a way to create interaction / animation on the Web Its big selling point: Portability works everywhere (citing Sun) interpreted Other selling points (citing Sun again) simple (?) object-oriented robust high performance (?) Java Classes & Inheritance What is this program s output? public class Animal return "Animal"; public class Platypus extends Animal return "Platypus"; public static void main (String[] args) Animal x = new Animal (); System.out.println (x.foo()); CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 21 CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 22 Java Classes & Inheritance How about this program? Java Classes & Inheritance How about this program? public class Animal return "Animal"; public static void main (String[] args) Platypus x = new Platypus (); System.out.println (x.foo()); public class Animal return "Animal"; public static void main (String[] args) Animal x = new Platypus (); System.out.println (x.foo()); public class Platypus extends Animal return "Platypus"; public class Platypus extends Animal return "Platypus"; CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 23 CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 24 Page 6
Java Interfaces An interface with a single method: public interface ActionListener void actionperformed (ActionEvent e); We implement the interface as follows: public class MyClassThatListens implements ActionListener public void actionperformed (ActionEvent e) Q: How is an interface different from a class? Java Exceptions If a called method throws an exception, the caller needs to catch the exception public class <SomeIOClass> public void <SomeIOMethod> <if error> throw new IOException (); public static void main (String[] args) try <SomeIOMethod> (); catch (IOException e) <handle the error> CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 25 CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 26 Java and GUIs Platform independence for GUI applications has been notoriously hard Java s first foray: AWT (Abstract Window Toolkit) provided common code for widgets components such as windows, buttons, menus, good first start, but platform independence wasn t quite there AWT relied on windowing code on native machine so in practice, somewhat flaky Java and GUIs Current Java 2: integrated JFC & Swing Swing GUI component toolkit, including all widgets no native windowing code, to improve on AWT JFC (Java Foundation Classes) includes Swing components includes other software such as pluggable look and feel accessibility support for disabled AWT still there, but we can mostly ignore it CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 27 CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 28 Page 7
Advantages of Java for our course Short(er) learning time Portability across platforms (with caveats) Breadth of built-in components Extensibility to Web applications And more generally Basic concepts of GUIs are the same no matter what language you re using CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 29 Page 8