The Task-Centered Design Process figure out who's going to use the system to do what choose representative tasks for task-centered design plagiarize rough out a design think about it create a mock-up or prototype test it with users iterate build it track it change it

How to build a good UI Software engineering principles –Object oriented programming Object hierarchies constitute modern GUIs –Event driven –Resources (separate UI from Code) –Rapid prototyping (Agile computing) User Interface Management Systems –IDE (Interactive Design Environments)

Object-Oriented Programming Important Concept for User Interface programming OBJECTS are blocks of code (on screen object are often these) Defined hierarchically, with each object being an INSTANCE of a CLASS of similar objects Objects INHERIT the behavior and characteristics defined higher in the hierarchy Object also has PRIVATE DATA that defines its own characteristics and maintains information about its current state

Object-Oriented Programming Objects communicate with each other by sending MESSAGES Object-oriented programming language, such as C++, Java Smalltalk provide excellent match to the needs of user-interface programming If you need to modify the program's behavior, the class hierarchies let you make sweeping changes consistently and easily, while the private data allows you to change the behavior of an individual object without fear of unexpected side-effects

OSF/Motif in X-Windows -- Toolboxes in the Trenches X-Windows - Server-Client system for computer networks Motif -- developed by the Open Software Foundation (OSF) as a standard graphical user interface substrate for X-Windows. Motif consists of a library of C language subroutines that define a toolbox of interface objects and techniques for combining them into a program. The toolbox allows a programmer to create programs that are event-driven, object-oriented, and adaptable through on external resource files Graphical objects in Motif are referred to as WIDGETS

WIDGETS, which are defined as an object- oriented hierarchy. A typical class in the hierarchy is labels, which has buttons as a subclass, which in turn has individual buttons as instances Widgets within a program are also arranged hierarchically A Motif program is event-driven, controlled by an event loop that is supplied as part of the toolkit. When an event occurs in a widget, the system checks the translation table, a part of the widget's resource list that tells what action to take –example resource hello-world.controls.quitButton.XmNhighlightColor:blue hello-world.main*XmNhighlightColor:blue

Concrete To Abstract GUI toolkits abstract windowing system. –Commonly used objects. –Commonly used operations. Accessible through API (Application Programming Interface). API’s available in many programming languages.

window.document.image document.form.field. Document Object Model (DOM)

Widget Hierarchy GtK IE DOM

Java Swing Class Hierarchy

Event-Driven Programs Another major concept for usability Contrast to traditional sequential: the user starts the program and the program takes control, prompting the user for input as needed. –resulting programs are often very modal: an input mode, an edit mode, a print mode, etc. The programmer has to anticipate every sequence of actions the user might want to take, and modes restrict those sequences to a manageable set.

An event-driven paradigm Events are messages the user, or the system, sends to the program. The core of every event-driven program is a simple loop, which waits for an event to take place, responds appropriately to that event In a modern UIMS environment the programmer just needs to build objects (menus, windows, code, etc.) and specify how they send or respond to messages

Event loop example while (TRUE) { // loop forever while (empty(event.queue)); // wait for an event event = pop(event.queue); // get the event event.type(event.information); // send the event } // a mouseDown event handler public boolean mouseDown(Event event, int int x, int y) { // what to do on a mouse down } // a buttonDown event handler buttonDown(button b) { // what to do on a button down }

Resources Interface-specific information such as menu titles or button positions, which are stored so they can be easily changed without affecting the underlying program functionality Some systems you might change the resources by editing values in a text file; on others you might need to use a special resource editor But typically won't require recompiling the application itself, and it won't require access to the source code During prototyping, a few simple changes to resources might dramatically improve an interface, with no ``real'' programming When the system is ready to ship, resources can be changed so the product can be used in countries with a different language

User Interface Management Software tools are essential TOOLKITS- libraries of program subroutines that create and run the many on-screen objects of a graphical user interface, such as –windows, buttons, and menus

UIMS -a toolkit and a programming environment for using it visual environment range from simple to complex saves programming time survey show 40% of commercial programmers use UIMS and spend 40% of their time programming user interfaces Toolkit users spend 60% of their time on ui code helps maintain consistency within and between applications easier to rapidly iterate

Types of UIMSs User interface toolkits. –Macintosh Toolbox, Active X, Java Swing, etc….. –Libraries of interaction techniques User-interface development systems –Integrated set of tools to create and manage interface elements –Can be: Language based e.g. state diagrams, context free grammars Graphical based e.g. Interface builders. IDE - Integrated Development Environments –web link to tool listsweb link to tool lists

Graphical User Interface Toolkits

GUI Foundations Low level graphics. Windowing systems abstraction. –Microsoft Windows. –X11 (Unix). –Macintosh.

Current Toolkits Visual Studio. (Windows umbrella) Macintosh Programmer’s Workshop. Java. Qt. GTK. Tcl/Tk. FLTK. FLEX. Adobe Flash A comprehensive online list

Potential Advantages of UIMSs Better interfaces –rapid proto-typing –easy to change –multiple interfaces –re-usable code –consistent interfaces –designer need not be a programmer Better Code –more structured and modular –better reliability because it is generated from higher level language –hardware dependence can be isolated... more portable

Problems with UIMS Difficult to use they are large require training time Too little functionality Unavailable - not portable Do not support evaluation They can impair quality not being at the right level of abstraction It is difficult to separate the interface from the application.

What to Look for in a UIMS -- and Where Action Logging Big Program Support Code Generation Extensibility of the Interface Extensibility of the Program Operating-System Specific Techniques Prototype to Final Application Capability Stand-alone Application Generation Style Guide Support Vendor Support and Longevity Visual Programming With Structure

Web development tools and trends Dreamweaver (e.g.) (spry toolkit for ajax) Ajax (microsoft page)microsoft page AJAX uses a combination of: XHTML (or HTML) and CSS, for marking up and styling information.XHTMLHTMLCSS The DOM accessed with a client-side scripting language, especially ECMAScript implementations such as JavaScript and JScript, to dynamically display and interact with the information presented.DOMclient-sidescripting language ECMAScriptimplementationsJavaScriptJScript The XMLHttpRequest object is used to exchange data asynchronously with the web server. In some Ajax frameworks and in certain situations, an IFrame object is used instead of the XMLHttpRequest object to exchange data with the web server, and in other implementations, dynamically added tags may be used.XMLHttpRequestAjax frameworksIFramescript XML is sometimes used as the format for transferring data between the server and client, although any format will work, including preformatted HTML, plain text and JSON. These files may be created dynamically by some form of server-side scripting.formatJSONserver-side scripting