Human-computer interaction Lecture 1b: 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 530: Developing User Interfaces. Dario Salvucci, Drexel University. 1 CS 530: Developing User Interfaces. Dario Salvucci, Drexel University. 2 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 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 CS 530: Developing User Interfaces. Dario Salvucci, Drexel University. 3 CS 530: Developing User Interfaces. Dario Salvucci, Drexel University. 4 Page 1
Represented models Represented models fall between implementation and mental models Implementation Model Represented Models Mental Model 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 530: Developing User Interfaces. Dario Salvucci, Drexel University. 5 CS 530: Developing 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 530: Developing User Interfaces. Dario Salvucci, Drexel University. 7 CS 530: Developing 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 530: Developing User Interfaces. Dario Salvucci, Drexel University. 9 CS 530: Developing 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 530: Developing User Interfaces. Dario Salvucci, Drexel University. 11 CS 530: Developing 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 530: Developing User Interfaces. Dario Salvucci, Drexel University. 13 CS 530: Developing 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 530: Developing User Interfaces. Dario Salvucci, Drexel University. 15 CS 530: Developing 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 530: Developing User Interfaces. Dario Salvucci, Drexel University. 17 CS 530: Developing 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 530: Developing User Interfaces. Dario Salvucci, Drexel University. 19 CS 530: Developing User Interfaces. Dario Salvucci, Drexel University. 20 Page 5
Implementation basics Our task for this course: Learn how to build great GUIs! with a user-centered design. How we ll do this: Implement GUIs in & Swing What is? What is Swing? History of 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 (?) CS 530: Developing User Interfaces. Dario Salvucci, Drexel University. 21 CS 530: Developing User Interfaces. Dario Salvucci, Drexel University. 22 and GUIs Platform independence for GUI applications has been notoriously hard 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 and GUIs Current 2: integrated JFC & Swing Swing GUI component toolkit, including all widgets no native windowing code, to improve on AWT JFC ( 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 530: Developing User Interfaces. Dario Salvucci, Drexel University. 23 CS 530: Developing User Interfaces. Dario Salvucci, Drexel University. 24 Page 6
Advantages of for our course program compilation/execution Short(er) learning time Portability across platforms (with caveats) Breadth of built-in components Extensibility to Web applications And yes, it s cool! The typical C program: C program (*.c) compiler Windows MacOS machine code machine code Linux machine code CS 530: Developing User Interfaces. Dario Salvucci, Drexel University. 25 CS 530: Developing User Interfaces. Dario Salvucci, Drexel University. 26 program compilation/execution The typical program: End result of a program Application Windows interpreter program (*.java) compiler bytecode (*.class) interpreter program (*.java) compiler bytecode (*.class) MacOS interpreter program (*.java) OR compiler machine executable Linux Applet interpreter = Virtual Machine (VM) interpreter program (*.java) compiler bytecode (*.class) Internet browser CS 530: Developing User Interfaces. Dario Salvucci, Drexel University. 27 CS 530: Developing User Interfaces. Dario Salvucci, Drexel University. 28 Page 7
Question Why do we compile *.java program files to *.class bytecode files and interpret the *.class files? Why not just interpret *.java files directly? They re platform-independent, aren t they? Same question, different context: Why do web servers transmit *.class files, not *.java files? overview Many things resemble C++ basic types (e.g., int, double, char) variables, declarations control structures (e.g., if-then, for, while, switch, ) classes and inheritance (well, the basics anyway) We ll very quickly review the essentials, emphasizing the differences from C/C++ CS 530: Developing User Interfaces. Dario Salvucci, Drexel University. 29 CS 530: Developing User Interfaces. Dario Salvucci, Drexel University. 30 overview What is this program s output? int sum=0; for (int i=0 ; i<=10 ; i++) sum += i; System.out.println ( Result: + String.valueOf (sum)); Basic data types & literals Many types you already recognize (mostly) char int, long, short float, double boolean Literals are straightforward too null, true, false, A, Hi CS 530: Developing User Interfaces. Dario Salvucci, Drexel University. 31 CS 530: Developing User Interfaces. Dario Salvucci, Drexel University. 32 Page 8
Basic operators Again, you recognize these: arithmetic: +,, *, /, % relational: ==,!=, >, <, >=, <= logical: &,,!, &&, and more: ++, --, etc. what s the difference between & and &&? Strings Concatenation operator: + hi +s, s+=s2 Comparison methods equals(), startswith(), Utility functions replace(), trim(), touppercase(), tolowercase() Good to know: String.valueOf (<<basic type>>) converts argument to string CS 530: Developing User Interfaces. Dario Salvucci, Drexel University. 33 CS 530: Developing User Interfaces. Dario Salvucci, Drexel University. 34 Arrays Declaration / creation int[] a = new int[3]; Accessor a[1] Run-time bounds checking! (How can do that?!?) Classes and inheritance What is this program s output? public class Animal return "Animal"; public class Platypus extends Animal Platypus x = new Platypus (); System.out.println (x.foo()); CS 530: Developing User Interfaces. Dario Salvucci, Drexel University. 35 CS 530: Developing User Interfaces. Dario Salvucci, Drexel University. 36 Page 9
Function overriding What is this program s output? Function overriding (2) How about this program? public class Animal return "Animal"; Animal x = new Animal (); System.out.println (x.foo()); public class Animal return "Animal"; Platypus x = new Platypus (); System.out.println (x.foo()); public class Platypus extends Animal return "Platypus"; public class Platypus extends Animal return "Platypus"; CS 530: Developing User Interfaces. Dario Salvucci, Drexel University. 37 CS 530: Developing User Interfaces. Dario Salvucci, Drexel University. 38 Function overriding (3) How about this program? Interfaces An interface with a single method: public class Animal return "Animal"; public class Platypus extends Animal return "Platypus"; Animal x = new Platypus (); System.out.println (x.foo()); 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? CS 530: Developing User Interfaces. Dario Salvucci, Drexel University. 39 CS 530: Developing User Interfaces. Dario Salvucci, Drexel University. 40 Page 10
Exercise: Animals Write classes/interfaces as follows: Classes Animal : boolean isalive() Fish Giraffe Dog Collie Interfaces Swimmer: String swimmethod() Runner: String runmethod() Make sure to extend appropriate classes and implement appropriate interfaces Variable declaration Class vs. instance variables public class Animal public int numberofclaws; public static int numberofmammals; instance variable class variable CS 530: Developing User Interfaces. Dario Salvucci, Drexel University. 41 CS 530: Developing User Interfaces. Dario Salvucci, Drexel University. 42 Question... This program won t work. Why not? public class Test public int instint = 1; public static int classint = 2; int result = instint + classint; System.out.println (String.valueOf (result)); 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 (); try <SomeIOMethod> (); catch (IOException e) <handle the error> CS 530: Developing User Interfaces. Dario Salvucci, Drexel University. 43 CS 530: Developing User Interfaces. Dario Salvucci, Drexel University. 44 Page 11
Garbage collection Time to take out the trash! (unused objects, that is) public class Animal public class Platypus extends Animal public class Cheetah extends Animal Advantages of for our course Short(er) learning time Portability across platforms (with caveats) Breadth of built-in components Extensibility to Web applications public class Program1 Animal a = new Platypus (); a = new Cheetah (); Where is the platypus? PS: Why is automatic garbage collection especially important for? CS 530: Developing User Interfaces. Dario Salvucci, Drexel University. 45 CS 530: Developing User Interfaces. Dario Salvucci, Drexel University. 46 Page 12