1 Computer Graphics Assistant Professor Dr. Sana’a Wafa Al-Sayegh 2 nd Semester ITGD3107 University of Palestine

2 Chapter 8 Part-1 Graphical User Interfaces and Interactive Input Methods ITGD3107 Computer Graphics

3 Graphical User Interfaces and Interactive Input Methods Why Interface Matters A Few Questions Interface styles Purpose of UI Design Brief History of UI Characteristics of UI Design UI Design is Difficult Language Model for Command Line and UI’s Design Methodology

4 Why Interface Matters… Not just applicable to computer interfaces!

5 A Few Questions What are some interfaces you like and dislike? What are the identifying characteristics of current interface paradigms? How do technical considerations affect interface considerations and vice-versa? How could “intelligent” interfaces help or get in the way of users? Is it possible to accommodate users of all levels with a single interface? What is your ideal interface? –general use (operating system / work environment) –specific applications

6 An Extreme “Microsoft Word” at its worst (Microsoft)

7 Interface styles Some of Interface styles –text input –direct manipulation –point & click, drag & drop –adaptability –“intelligent” interfaces, agents –social interface –general purpose and specific task design A successful interface designer must know her users and their priorities, the computing environment, and the task domain

8 Purpose of UI Design The user interface is the key to productivity Provide usable, functional, safe, efficient systems for people Concentrate on user-centered design: –design for your user, not your hardware UI now much more important than features High Level goals of UI Make easy things easy; make hard things possible Optimize human factors –Make your interface comfortable, as well as attractive Maximize speed of learning Maximize speed and ease of use Minimize error rate Enhance the User Experience! Consistency with user’s expectation Note: These goals cannot all be fully accommodated in the same interface. We must determine which goals are most important for the user and the purpose of the application.

9 Brief History of UI Major Events and Innovations 1963, Ivan Sutherland published the landmark graphics system Sketchpad, which had lots of physical buttons, keys, panning, and zooming. 1968, Engelbart demonstrated the hypermedia document system at the Fall Joint Computer Conference. Featured tiled windows, mouse, keyboard, command line interface 1970, The mouse is used 1973, The first personal workstation. Based on bit-mapped (raster) display, commercial mouse, Ethernet, and client-server architecture. Had world’s first WYSIWYG editor, Smalltalk and GUI’s including window managers and browsers

10 Brief History of UI Major events and innovations In 1981, Xerox introduced the Star Information System that had overlapping windows 1984, Apple released the Mac as the first commercial graphics desktop microcomputer, featuring 1) messy desktop with overlapping windows, 2) pull-down menus, 3) icons & toolbars, 4) drag-and-drop file manipulation 1985, Microsoft Windows, considered a Mac imitation with minimal improvements

11 Characteristics of UI Design The nature of the beast Collaborative Iterative Multi-disciplinary Players in the UI design game Hardware engineers –devices for graphics, video, audio, force feedback… Human Factors engineers Graphic designers Perceptual psychologists Cognitive scientists Software engineers UI designers

12 UI Design is Difficult In many modern programs, the user interface code constitutes the bulk of program, i.e., 70-80% For the most part, the user interface is the key to the success or failure of a program Computer speed increases by Moore’s law, humans do not Creating a good UI is often harder than software engineering because UI design requires much more than software engineering skills Some people believe UI design is unimportant because they misunderstand the design process/methodology Nowadays, software companies can be very picky about choosing who designs their user interfaces because the user interface defines the product

13 Goal: increase bandwidth to the brain Computer vs. Human Performance

14 Language Model for Command Line and UI’s User(s)  computer ≠ computer  user(s) – two different but related languages Non- interfaces may have multiple channels operating in parallel (e.g., voice recognition). This is called multimodal interaction Can think of dialogue in grammatical terms we know from programming Lexical Level, lexemes/tokens Syntactical Level, syntax rules Semantic Level, meaning of a statement Conceptual level Functional/semantic level Sequencing/syntactical level Binding/lexical level Look and Feel Meaning Form A user interface is not static – it is a time-dependent dialogue between user and machine, i.e. a communication protocol

15 Language Model for Command Line and UI’s Meaning of an interface, its semantics Conceptual level: –cognitive uses, models, and metaphors; application objects and operations Functional level: –each function’s semantics: including pre-post- and error- conditions Form of an interface, its “look and feel” Interaction sequencing level: –ordering and interlacing of inputs and outputs, syntax Binding level: –how input and output units of form are actually created from hardware primitives, lexemes

16 Language Model for Command Line and UI’s Key points Defining lexemes is usually easy for small interface, especially Virtual Reality (VR) –creating a user interface for a large application is essentially complexity management –in VR applications we must also deal with the problems of parallelism and time coherence Command syntax and semantics tend to be more complicated than lexemes Often helpful to have a machine to represent a sequencing of lexemes to make a complete command. This design model may seem excessively rigid, but a good UI design is a formal process resulting in a good architecture.

17 Design Methodology The overall steps Analyze Formalize Synthesize Evaluate Implement Test Note: steps are not all distinct or sequential (even less so than in software design) For each step in design Consider multiple alternatives Choose the one which best matches –user characteristics –design objectives –functional requirements Rapid prototype early and often

18 Design Methodology Analyze Requirements definition User(s) definition –novice, casual user, power user… Working environment –office, home, school… Formalize Define design goals Synthesize Conceptual design Semantic design Dialogue design Syntactic design Lexical design Graphic and other design modalities Documentation design

19 Design Methodology Evaluate Design review Implement Prototyping Implementation Software debugging Test User interface debugging Usability testing Again, steps are NOT all distinct or sequential

20 Design Methodology Process model “Waterfall” model, a step-by-step approach, a pipeline; for user interface design, this model is less linear than software engineering waterfall model and more complex because of human element Model is not a hierarchy: has feedback loops Implement Test Evaluate Synthesize Formalize Analyze