Download - HCI Software Tools
05 - Software Tools
COMP 388/441 HCI: 05 - Software Tools
Lecture 05 - Overview
UIs should be: reliable, standard, safe, inexpensive, effectivewidely acceptable and be build on a predictable schedule
Software tools help to achieve this! UI Architect needs:
Simple and quick methods of sketching UIs Precise methods for working out details with the client, for
coordinating with team-members and for telling the developers whatto do
3 sets of tools are available: UI specification methods Software tools to support design and software engineering Evaluation and critiquing tools
Trends: Desktop ↓ Web, Mobile, Universal Usability and Customization ↑ ⇒ UI building tools need to be adapted for these changes
Specification Methods
COMP 388/441 HCI: 05 - Software Tools
Specification MethodsGrammars
Test if a string adheres to a specified set of rules Use (examples):
Specification of textual commands or expressions that a programshould understand
Verification of validity of user input (e.g., via forms) Example of such grammar: BNF
Problem: incomplete, need supplement through ad-hoc techniques tospecify semantics
Example of a grammar for UI purposes: “Multiparty Grammar” ≈Extension of BNF that labels non-terminals with the party of aninteraction that produces the string
Pros: formal, hence can be verified by computer programs(completeness and correctness)
Cons: difficult to follow, complicated, less suitable for 2-Diminteraction styles (e.g., forms, DM, etc.)
COMP 388/441 HCI: 05 - Software Tools
Specification MethodsMenu-selection and dialog-box trees
Show the stakeholders of a project a complete and detailedcoverage of the system
Show high-level relationships and low-level details Help in discovering inconsistencies, check for completeness,
redundancies and ambiguity Due to the intention of avoiding clutter such trees are
incomplete, are restricted to a “static view” and do not showthe entire structure of possible user actions
Problem: (A) In some aspects of UI design a precisespecification of every possible action is required or (B) Incases of non-menu systems there might be a need toexpress the set of possible states and allowed transitions
Solution: Use Transition Diagrams
COMP 388/441 HCI: 05 - Software Tools
Specification MethodsTransition Diagrams
Typical TD ≈ Set of nodes (system states), links betweennodes (transitions), labels
Many specialized TDs are available with specific notationsfor specific application domains (e.g., word-processing, e-commerce)
Pros: can be effective for following flow or action andkeeping track of the current state and options of theUI/System, can also be verified (e.g., reachability, dead-ends, etc.)
Cons: Too complex with growing system complexity (toomany states and possible transitions), confusing when manynodes need a link to “help”, “back”, “quit”, etc., in their basicform poor representation of concurrency and synchronization
Alternative: State-Charts
COMP 388/441 HCI: 05 - Software Tools
Specification MethodsState Charts
Grouping feature (nesting) allows for factoring repeatedtransitions out
Offer extensions for concurrency, synchronization,external interrupt events and user actions
Offer extensions with dataflow and constraintspecifications
May be extended with embedded screen prints to showthe visual state of a graphical widget
BSP: UML state-chart diagram
COMP 388/441 HCI: 05 - Software Tools
Interface-Building Tools
COMP 388/441 HCI: 05 - Software Tools
Interface-Building ToolsBenefits of high-level software tools in the context of HCI
1. User interface independence(A) Separate interface design from internals, (B) enable multipleuser interface strategies and multiple platform support, (C)establish role of UI architect, (D) enforce standards
2. Methodology and Notation(A) Develop design procedures, (B) find ways to talk aboutdesign, (C) create project management
3. Rapid Prototyping(A) Try out new ideas very early, (B) test, revise, test, revise,...,(C) engage end-users, managers and customers
4. Software Support(A) Increase productivity, (B) offer constraint and consistencychecks, (C) facilitate team approach, (D) ease maintenance
COMP 388/441 HCI: 05 - Software Tools
Interface-Building ToolsInterface Mockup Tools
COMP 388/441 HCI: 05 - Software Tools
Main purpose: Create quick sketches during earlydesign to explore multiple alternatives, facilitatecommunication
Very important also in the pre-contract phase Examples: Slideshows, Macromedia Director, Flash,
Dreamweaver, MS Visio, JBuilder, VB, etc. Depending on the approach/tool: Either show simple
slides of screens or provide complete prototypes whereusers can select, navigate, click, scroll, etc.
Note: Prototypes are naturally limited
Interface-Building ToolsSoftware-engineering tools
COMP 388/441 HCI: 05 - Software Tools
Main Purpose: Build the final product In earlier days, general purpose languages (e.g., Java,
C++) were used to build UIs from scratch Today, this is supported through software tools, APIs
and Frameworks, etc. A classification of UI building tools:
Layer 1: Windowing Toolkit Layer 2: GUI Toolkit Layer 3: Application Framework/Specialized Languages Layer 4: Application Level
General Trend: Lack of modifiability led to building architectures that separate
the UI from the application logic (e.g., MVC-Pattern), alsosupports cross platform development
Interface-Building ToolsWindowing-system layer
COMP 388/441 HCI: 05 - Software Tools
≈ no widgets available, need to “draw” manually, noevent support encapsulated in objects
Low-level work required Especially useful/important for new platforms or if
resources are expensive/limited Build the basis for higher-level layers Pros: Performance, very flexible Cons: Requires extensive programming, long learning
time, offers little support for interactive tools, novisualization tools
Interface-Building ToolsGUI-toolkit layer
COMP 388/441 HCI: 05 - Software Tools
≈ provides software libraries and widgets (e.g., frames,dialog boxes, scrollbars) including event encapsulationas building blocks
Pros: Abstraction, shorter development times, greatflexibility, often based on general-purpose languages(makes it easier to combine UI with application logic)
Cons: Possibly high learning times, building andmaintenance time is still high, no support forconsistency, experienced programmer needed
Example for Toolkits: ILOG Views, Gtk, Qt, Java (AWT,Swing, SWT), .Net GUI toolkit)
Interface-Building ToolsApplication framework and specialized language layer
COMP 388/441 HCI: 05 - Software Tools
Application Framework ≈ Software architecture specifically designed for building GUIs Idea: Many UI-based programs have a similar structure, capture
structure, translate it to classes, objects and methods, which can thenbe extended/reused
Commonly uses widgets from the GUI Toolkit layer Based on convenient visual programming, simple scripting languages,
or general purpose languages Less support for non-graphical part of the application Example: Cocoa, MFC, Macromedia Director
Specialized Languages ≈ Languages specifically designed for building UIs Can also be used for rapid prototyping Example: Tcl, java script in combination with HTML
Interface-Building ToolsApplication layer
COMP 388/441 HCI: 05 - Software Tools
≈ Interface Generators, also called: Model-BasedSystems or UI Management Systems
Visual tools, that allow for most parts of an applicationto be built with one tool and without coding
Only available for a small class of applications (e.g., DBfront-ends) or research prototypes
Interface-Building ToolsSelecting the right tool
COMP 388/441 HCI: 05 - Software Tools
Obviously higher-level tools are more efficient,however, they are the most restricting as well
Finding the right tool is a tradeoff between 6 criteria: Which part of the application do you need to build using the
tool? How long can learning time be / or are experts available? How long can the building time be? Do you accept a methodology being imposed or rather
advised? Is communication with other subsystems required? Do you need to consider extensibility and modularity?
Evaluation and CritiquingTools
COMP 388/441 HCI: 05 - Software Tools
Evaluation and Critiquing Tools
COMP 388/441 HCI: 05 - Software Tools
Build-Time Tools Example: From simple spell checks to more sophisticated tools
that provide metrics reporting number of displays, widgets etc.or even more advanced: check depth of menu-trees,redundancies, inconsistencies in labels etc.
Tulli’s display analysis program Today, also available for graphical UIs
Runtime Logging Software Capture user pattern of activity Example: reports on error-frequencies, menu selections, dialog
box appearances, help invocations, or capture performancedata
The End
Questions?
COMP 388/441 HCI: 05 - Software Tools