Software Tools

Human Computer Interaction

 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
• Formal and Semiformal languages
– Grammars for command languages
• Backus-Naur Form – BNF
– More difficult for GUIs – usually
describe sequence of actions
• 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
• Pros:
– Aspects can be formally written down
– Verification of completeness and correctness
• Cons:
– Doesn’t scale well
– Graphics apps still difficult to do
 Menu-Selection and Dialog-box
• Menu-Selection Tree
– Create menus graphically
– Tools exist for:
• Creation
• Design
– Pros:
• Review
• Consistency
• Totality
• Completeness
• Redundancy (examples?)
– Cons:
• Menu trees often do not show all possible actions
(incomplete)
• Sometimes menus are not a tree
– Example, Ch.7.4
– Same thing for dialog-box trees
 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 doesn’t 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:
– Similar to Finite-State-Automata (plenty of research
in CS on that)
– Can we reach every state?
– Is there a way out?
• Cons: Difficulty in evaluating
– Usability
– Visibility
– Modularity
– Synchronization
 Statecharts
• Uses nested roundtangles (pg. 182)
• Extensions have been developed
for
– Concurrency
– External events
– User Actions
– Example: Ilogix’s Statemate
• Unified Modeling Language (UML)
– Standard for visualizing and
documenting software systems
• Goal: link specification with
interface-building tools
• Why is this difficult?
– conformity, flexbility
 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?
 Interface-
Building Tools

• Tools to do so
– Visual editing
– Create prototypes
– Get the ‘look’ of the system
• Pros:
– 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:
– Non-PC based, makes design tools less prevalent
• Overall benefit: user-interface independence – the decoupling of programming
from design
 Interface Mockup
Tools
• Develop a quick sketch of GUI
• Early stages
• Explore multiple alternatives
• Convey to clients
• Paper and pencil, word processors, PPT
• Examples?
– Macromedia Director, Flash MX
• Levels of mock up
– Still images
– Prototype (no help, database, etc.)
• Apps: Microsoft Visio, Visual
Studio .NET, Borland’s JBuilder
(screenshot)
• Dramatically reduce design time
• Win contracts
• Comes with supplied widgets
• Extensibility is varied
 Software-Engineering
Tools
• Let’s 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
 Software-Engineering
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?
– Highest is typically better
– Less flexibility, quicker design
• Ex. pre-fab houses
• Six evaluation criteria
1. Part of the application built using the tool
 Ex. Presentation, UI, low-level interaction, other devices
2. Learning time
3. Building time
4. Methodology imposed or advised
 Ex. Build UI first, connectivity requirements
5. Communication with other subsystems
 Ex. Databases, devices, web
6. Extensibility and modularity
 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 low-level
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)
– 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/onlin
e_help/howto/qt/
• Sun’s Java
– Write once, run many platforms
– Java Runtime Environment
– JBuilder, NetBeans
– Platform versions still look different (font,
resolutions, etc.)
• Applications to standardize multiplatforms
– Sun’s Swing app
– IBM Standard Widget Toolkit
 GUI Toolkit Layer
• Microsoft .NET
– Integrates large programming
libraries
– Virtual machine compiler
– Network support
– Standard GUI Toolkit
– Tied to windows
• Java/J2EE, C#/.NET
• Standard GUIs
– Good for novices
– Improve productivity and
satisfaction
• Think post WIMP (Windows, Icons,
Menu, and a pointer)
– 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)
– 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 wm title . "Hello"
– Interpreted (rapid development) message .m -text "Hello,
– Cross platform world!" -font {{Times New
– Lacks visual editor Roman} 14}
– Good prototyper (hence used in button .b -text "Done" -
research)
• Others include: Perl/Tk, Python/Tk, command exit
Visual Basic pack .m .b
• Web page interaction
 JavaScript
• One of the most popular
scripting languages
• All major web browsers +
HTML
• Cross platform
• Easy to learn (relatively,
still requires <SCRIPT
programming) LANGUAGE="JavaScript1.2">
window.myMenu = new Menu();
• Visual editors exist myMenu.addMenuItem("my menu
item A");
myMenu.addMenuItem("my menu
item B");
myMenu.addMenuItem("my menu
item C");
myMenu.addMenuItem("my menu
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)
– Visual and interactive
– Divides UI design from app engineering
with a nice interconnect
• Other examples: Flash and Flash MX
• Visual Programming Tools, the
scripting language can be visual.
– LabView – function boxes linked with
wires
– AVS – Image processing
• The required flexibility for large scale
UI systems are still not supported by
most tools
Evaluation and Critiquing
Tools
• How would you evaluate a UI?

• First order
– Spelling
– Link checking
– # of displays
– Completeness
• Still doesn’t give enough info
• Second order
– Menu tree depth
– Action redundancies
– Consistency
• Third order
– Satisfaction
– Task perfromance
• 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: Tullis’s Display Analysis Program
– 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)
• 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)
 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 compiler’s 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)