Transcript No Slide Title

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 objectoriented 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.
Document Object Model (DOM)
window.document.image
document.form.field.
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 lists
Graphical User Interface Toolkits
GUI Foundations
• Low level graphics.
• Windowing systems abstraction.
– Microsoft Windows.
– X11 (Unix).
– Macintosh.
Current Toolkits
A comprehensive online list
• 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
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.