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


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


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


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


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


Interface-Building 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


Interface-Building ToolsInterface Mockup 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


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


≈ 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


≈ 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


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


≈ 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


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


Evaluation and Critiquing 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?


Documents

HCI Software Tools