Software Tools

Human Computer Interaction CIS 6930/4930 Section 4188/4186

Introduction

User-Interface Architects
Similar to Building Architects UI Jobs (even domain specific!)

Ideal: Complete design before starting to build

Multiple designers AND engineers Sit down and think about what needs to be done

Still design, even though it will change!

Standard GUIs have enabled 50% to 500% productivity gains

Desktop Computer is losing its prominence
More mobile, more distributed Software must support greater plasticity (ex. resolution) Display size, telephone access, web access, languages Device-independent programming

Specification Methods

Goal: How do we specify the GUI Natural Language

Pros: easy to understand, sketchpad, blackboard Cons: Lengthy, vague, ambiguous, difficult to prove Grammars for command languages

Formal and Semiformal languages

More difficult for GUIs usually describe sequence of actions

Backus-Naur Form BNF Transition diagrams Menu-tree structures Statecharts Graphical specifications

Grammars

Specify Textual Commands or Expressions that a program would understand Still used in spreadsheet calculators BNF example on pg. 176 Multiparty Grammars
Nonterminals that depict the actor (user/computer) for interactive programs Text-oriented sequences Voice Recognition Systems Aspects can be formally written down Verification of completeness and correctness Doesnt scale well Graphics apps still difficult to do

Pros:

Cons:

Menu-Selection and Dialog-box

Menu-Selection Tree
Creation Design Review

Create menus graphically Tools exist for: Pros:

Cons:

Consistency Totality Completeness Redundancy (examples?) Menu

Example, Ch.7.4 Same thing for dialog-box trees

trees often do not show all possible actions (incomplete) Sometimes menus are not a tree

Transition Diagram

Most commonly used Set of nodes and links Many ways to display (pg.179-180)
Text Link Frequency State Diagram

Tools to create them (IBM Rational Suite) Also doesnt scale well (spaghetti displays) Replace nodes with screenprints Ex. 350 screens of a satellite-control system were on 3 walls, 6 modules had different styles Pros:

Cons: Difficulty in evaluating

Usability Visibility Modularity Synchronization

Similar to Finite-State-Automata (plenty of research in CS on that) Can we reach every state? Is there a way out?

Statecharts

Uses nested roundtangles (pg. 182) Extensions have been developed for
Concurrency External events User Actions Example: Ilogixs Statemate

Unified Modeling Language (UML)

Goal: link specification with interface-building tools Why is this difficult?

conformity, flexbility

Standard for visualizing and documenting software systems

Interface-Building Tools
Previous

approaches are better at designing systems, not so much for interfaces Specification methods help design
Command Languages Data-Entry Sequences Widgets
What

type of tools would you like to help you build an user interface?

InterfaceBuilding Tools

Tools to do so

Pros:

Visual editing Create prototypes Get the look of the system Improve rapidly (with subsequent versions) Design is fast Group work, client review, contract work Modest technical training personnel can design interfaces Write user manuals from it

Cons:

Overall benefit: user-interface independence the decoupling of programming from design

Non-PC based, makes design tools less prevalent

Interface Mockup Tools

Develop a quick sketch of GUI Early stages Explore multiple alternatives Convey to clients Paper and pencil, word processors, PPT Examples? Levels of mock up
Macromedia Director, Flash MX
Still images Prototype (no help, database, etc.)

Apps: Microsoft Visio, Visual Studio .NET, Borlands JBuilder (screenshot) Dramatically reduce design time Win contracts Comes with supplied widgets Extensibility is varied

Software-Engineering Tools

Lets look at Table 5.1 (pg. 190) Layer 1 Windowing System

Extensive programming Most Extensibility Windows GDI

Layer 2- GUI Toolkits

AKA Rapid Prototyper, Rapid Application Developer, User Interface Builder, UI Dev. Environment Software Libraries, widgets Comes w/ basic widgets scrollbars, buttons, etc. Requires extensive programming

SoftwareEngineering Tools

Layer 3 - Specialized Languages

No support for nongraphics part Visual Programming Simple Scripting MFC, GLUI, Visual Studio, Tcl/Tk, Qt

Layer 4 Application Layer

Interface Generators User-Interface Management Systems Model-Based Building Tools Small class of applications Access, Sybase PowerDesigner

Choosing a Layer

Which is best? Highest or lowest?

1.

Ex. pre-fab houses Six evaluation criteria

Highest is typically better Less flexibility, quicker design

Part of the application built using the tool

2. 3. 4.

Learning time Building time Methodology imposed or advised

Ex. Databases, devices, web

Ex. Presentation, UI, low-level interaction, other devices

5.

Communication with other subsystems Extensibility and modularity

Ex. Build UI first, connectivity requirements

6.

Ex. Evolution, new platforms, console games

Considerations
Tool price is usually not one Good usability Quote: Usability has been treated

by many software architects as a problem in modifiability Separated user interface from internal functions Now standard practice Negatives: Postpones usability till the end!
How does this hurt?
Some

problems can not be fixed at the end Some functions need to be considered from the beginning. Ex. undo a command, progress bar

Windowing-System Layer

UI Building tools, X, MFCs, etc. are typically hard to come by for most new or few-user based systems New Platform, new tool learning (UNIX, Windows, XBOX, mobile phones) Most are at its core, basic event based display examples High-level tools abstract this lowlevel interface Creating a window w/ XLib = 237 lines, Tcl/Tk = 2. Also Windows MFC vs Glut. But what do you give up?

GUI Toolkit Layer

User-interface library Common widgets

windows, scroll bars, menus, fields, buttons, etc. Example: MFCs, Xtk, Apple Toolkit, FrontPage

Is it interactive?
Yes: Much more effective No: More learning, maintenance difficult

GUI Toolkit Layer

Qt is becoming very popular (freeware)

Suns Java

Crossplatform GUI with a visual editor OOP C/C++ libraries Good trade-off? Software engineering skill vs. flexibility vs. creativity vs. features http://www.suse.co.uk/uk/private/support/o nline_help/howto/qt/

Applications to standardize multiplatforms

Suns Swing app IBM Standard Widget Toolkit

Write once, run many platforms Java Runtime Environment JBuilder, NetBeans Platform versions still look different (font, resolutions, etc.)

GUI Toolkit Layer

Microsoft .NET

Java/J2EE, C#/.NET Standard GUIs

Integrates large programming libraries Virtual machine compiler Network support Standard GUI Toolkit Tied to windows

Think post WIMP (Windows, Icons, Menu, and a pointer)

Good for novices Improve productivity and satisfaction

Ex. Jazz and Piccolo (zoomable), SATIN Specialized toolkits to handle apps like photo managing, 3d, etc.

Application Framework/ Specialized Language

Application Frameworks
OOP Started with MacApp 86 toolkit in Object Pascal All UI have similar structure Capture it and translate it into classes Ex. Buttons and actions Others: NextStep, Cocoa, MFCs

Very effective for rapid UI building Requires substantial programming skills Visual tools do exist

Specialized Language
Create a language specifically to create UIs Ousterhout (94)

Others include: Perl/Tk, Python/Tk, Visual Basic Web page interaction

Created a scripting language (Tcl) Coupled with a toolkit (Tk) Tcl/tk is one of the most popular UI Languages in use (research) Combo: Tcl easy to use, Tk useful widgets Interpreted (rapid development) Cross platform Lacks visual editor Good prototyper (hence used in research)

wm title . "Hello" message .m -text "Hello, world!" font {{Times New Roman} 14} button .b -text "Done" -command exit pack .m .b

JavaScript
One

of the most popular scripting languages All major web browsers + HTML Cross platform Easy to learn (relatively, still requires programming) Visual editors exist

<SCRIPT LANGUAGE="JavaScript1.2"> window.myMenu = new Menu(); myMenu.addMenuItem("my menu item A"); myMenu.addMenuItem("my menu item B"); myMenu.addMenuItem("my menu item C"); myMenu.addMenuItem("my menu item D"); myMenu.disableDrag = true; myMenu.writeMenus(); </SCRIPT>

Coupling Visual Editors

Apple HyperCard is the first Visual Edit the UI (drag and drop widgets) Auto-create some code Macromedia Director + LINGO (Script language)

Other examples: Flash and Flash MX Visual Programming Tools, the scripting language can be visual.

Visual and interactive Divides UI design from app engineering with a nice interconnect

The required flexibility for large scale UI systems are still not supported by most tools

LabView function boxes linked with wires AVS Image processing

Evaluation and Critiquing Tools

How would you evaluate a UI? First order

Spelling Link checking # of displays Completeness

Still doesnt give enough info Second order

Menu tree depth Action redundancies Consistency Satisfaction Task perfromance

Third order

What tools could you develop?

Run-time logging software

Capture user activity! Think about UI design errors, games Error rates (errors per hour) Menu Item usage Help usage Web-page access (webmasters) Early example: Tulliss Display Analysis Program

Hard for GUI Learn more about how users respond to interfaces Many user studies run to evaluate effect of font, color, resolution, widgets, etc. on a performance, satisfaction, etc. Assignment: Everyone go find one and report back in next class. Email the synopsis to TA (due in 1 week)

Took text menus Reported stats: Upper case %, maximum/ minimum/ average density, complexity Gave suggestions based on known study results (ex. Lower+Upper is 13% than just Upper)

Evaluation Tools
Pros:

If done early, can save substantial development time and cost Cons: Not many people know how to do it Simple metrics:
# of widgets to a dialog box Widget density Non-widget area Aspect ratio Screen balance of UI controls

Still,

hard to detect anomalies

Evaluation Tools

List of used colors, word counts, button size checkers, margin checkers can help detect anomalies Study: Using search + browse + query slowed performance by 10% to 25% Web page analysis tools exist (ex. Bobby and HTML Tidy)
HTML checker Similar to a compilers lexical analyzer US NIST has web metrics and tools
WebSAT

(static web pages) WebCAT (tries to categorize the web pages) WebVIP (instruments web pages to collect stats)

Guidelines
Also useful WebTango

are just general guidelines

Panel of experts evaluated 5300 web pages on 141 layout criteria Results are good guidelines for any webpage
Large

pages should have columns Heading size should be proportional to text amount Animated graphical ads should be kept to a minimum (think Google!) Link text should have 2-3 words San-serif fonts for body text (Ex. Guidelines vs. Guidelines) Color should be reserved for headings Web page speed was not always a factor(!). (Ex. espn.com)

Guidelines
Case-by-case basis evaluation is still required Future is good for tools due to web format and language standardization. Checkers, visualizers exist for:

Extensible Markup Language (XML) User Interface Markup Language (UIML) XML User Interface Language (XUL)

Discuss: Hitting Shift-ENTER in PPT on a list ends a list Discuss: Ctrl-Enter while writing an email sends it in Outlook Express Discuss: Typing an address, while IE or Netscape is loading a page, gets cut off when the page finishes loading