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 examplewhile (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 handlerpublic boolean mouseDown(Event event, int int x, int y) { // what to do on a mouse down}

// a buttonDown event handlerbuttonDown(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 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. http://java.sun.com

Qt. http://www.trolltech.com

GTK. http://www.gtk.org

Tcl/Tk. http://www.scriptics.com

FLTK. http://www.fltk.org 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)• AJAX uses a combination of:• XHTML (or HTML) and CSS, for marking up and styling information. • 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.

• 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 <script> tags may be used.

• 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.