1. COSC 3461 User Interfaces Instructor (Section A): Maurice Masliah http://www.cs.yorku.ca/course_archive/2001-02/S/3461/

2. 3461A What will COSC 3461 cover? 1.How to design a user interface 2.How to realize user interfaces (programming in Java Swing in homework assignments)

3. 3461A Thanks For slides and other course materials to: –Wolfgang Stuerzlinger (York, original course professor) –Scott MacKenzie (York) –James Landay (Berkeley) –Bowden Wise (RPI) –Sarah Douglas (UOregon) –Richard Paige (York) for revisions

4. 3461A The Simple View of the User Interface The User Interface is the junction between the User and the Computer.

5. 3461A The More Complex View A well designed user interface is much more than a layer slapped between the user and the computer. A well design user interface incorporates an understanding of –the user –the task and task flow –the environment

6. 3461A User Issues involved in designing a user interface for even a simple task can be complex – there are lots of ways to design an interface to do the same task

7. 3461A Usable for Whom? User Population MS Windows 70% Assembler code 0.01% program (any language) 1% C++ code 0.1% Linux 15% Usability Television 98%

8. 3461A Possible Usability Issues?

9. 3461A How it appears to a child

10. 3461A Bug’s Life Example Consider who the users are Breaks user’s expectations (have to launch the program to uninstall it) I find myself having to reinstall this program every other week.

11. 3461A Good or Bad?

12. 3461A Good or Bad? How do you cancel?

13. 3461A What is the User Interface (UI)? Different actors perceive it very differently! Developer View –Application functionality is separate from UI –UI often seen as an add-on User View –Usually doesn’t see distinction between the UI and the entire application –If the UI is well designed and usable, then entire application may appear usable Credo: The interface IS the computer!

14. 3461A What is the UI? (continued) UI includes all aspects of the system that influence the interaction with its users The UI includes: –conceptual model (how UI objects correspond to objects in the real world) –a metaphor, to help the user (e.g., desktop) –controls and their behaviour –means for navigation within and flow between screens –integration among different applications –visual design of the screens

15. 3461A Technology Trends Trends in technology have increased the need for improved UIs and UI design practices: –Network/distributed systems allow access in remote locations, or across an enterprise. –Greater memory and faster processing are available at ever decreasing costs. –More people have access to computing power –People are “on the move” (mobile computing) Technology now exists for improved UIs and UI designs.

16. 3461A New Technology is NOT Enough! New interface technology alone does not produce usable interfaces! –Graphical user interfaces (GUIs) are not intrinsically more usable than traditional character- based user interfaces (CUIs) –GUIs can be less usable if they are poorly designed Usable user interfaces require good design and a great deal of effort in their manufacture

17. 3461A User Interfaces: Code/Cost/Effort Different Statistics –UI is 47% - 60% of the total code –GUI is minimally 29% of the software development project budget –GUI may take as much 40% of the development effort

18. 3461A 80% percent of software life cycle costs occur after the product is released, in the maintenance phase –Of that work, 80% is due to unmet or unseen user requirements –Only 20% of this is due to bugs or reliability problems (Source: Karat, C. Usability engineering in dollars and cents. IEEE Software, May 1993, p 89.) An Interesting Stat

19. 3461A High Quality UIs are in Demand A good UI is vital for a quality software product. –UIs that do not work well make it impossible for users to access the functionality they require; i.e., users become less productive Human capital is more expensive Therefore need UIs and systems that are: –Learnable, Efficient, Memorable –Not error prone –Satisfactory for the user

20. 3461A Example for Bad UI Power Point: Word: Last entry in list First entry in list

21. 3461A Example for Bad UI (2) 789 456 123 0 13672 ++++ ---- 1 4 7 2 An accidental key press and the dose can be out by a factor of ten!

22. 3461A Bad UIs Lead to Major Problems A $3 million application for an insurance company to be used by independent agents to support them in selling their company’s products. However, agents refused to use the application because the system was “un-learnable” and “unusable” In a customer service organization, training on the system took 6 months, but employees typically had a tenure of only 18 months in that department. Extensive and expensive functionality in a Human Resources system was not used at all because users forgot how to access it a mere week after training

23. 3461A Good Designs => Usable Systems Work the way the user thinks they should (intuitive) –Allows the user to focus on task at hand and not worry about the underlying technology and interaction technology Easier to use than previous technology More efficient than, e.g., manual systems Minimize user errors Promote user satisfaction (users should feel that they are accomplishing more with the system than without the system)

24. 3461A Benefits of Good UI Design Reduced errors on the part of the user Lower support costs Lower initial training costs Less productivity costs for system introduction User efforts focused on the task to be done Reduced rework to meet user requirements High transfer skills across applications Fuller utilization of application functionality

25. 3461A Buxton’s Observation Computer Processing Power Human Processing Power time

26. 3461A 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 major phenomena surrounding them. Design Prototype Evaluate The HCI lifecycle is an iterative cycle that involves designing and evaluating with “users” as much as possible.

27. 3461A 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

28. 3461A Multidisciplinary nature of HCI Machine side: –computer science –engineering –computer graphics –operating systems –programming languages –software engineering –development environments –artificial intelligence

29. 3461A Why are Good UIs hard to build? 50% of design, implementation, maintenance, code size,... 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!)

30. 3461A Why are Good UIs hard to build? (2) API & UI logic complexity Reactive instead of proactive: the user dictates what the system should do Hard to modularize (OO user interface design) Exhaustive testing of UIs is hard – how to ensure robustness? Evaluation with users is time consuming...

31. 3461A Where do we go from here? Implementation of User interfaces –Widgets, UIMS –Event-driven programming –Model-View Controller Human-Computer Interaction (HCI) –User interface design –Evaluation of user interfaces (usability and heuristic analysis)

32. 3461A UI Implementation Mechanics –Event Driven Programming –Model-View-Controller Concept Graphical User Interfaces (GUI’s) –Window Systems, Toolkits, Frameworks –GUI Builders Character User Interfaces (CUI’s) –Command Line and Natural Language Interfaces

33. 3461A UI Implementation (2) UI Prototyping Interaction Devices (Input & Output Devices) –User Interfaces for Virtual Environments

34. 3461A Design of UIs Designing with users: focus on how users work. –User-centered design (COSC 4341) –Participatory design (COSC 4341) Designing without users –Task-centered design (COSC 4341) –UI design notations (COSC 4341) –Usability heuristics –Guidelines

35. 3461A Evaluation of User Interfaces Evaluation with user testing Evaluation with usability inspection methods –heuristic evaluation –cognitive walk-through

36. 3461A Let’s look at some code http://java.sun.com/ DemoLargestConsole.java DemoLargestGUI.java DemoHelloWorld.java DemoHelloWorld2.java DemoSwing.java

37. 3461A Thank you!