Software Tools Fall 2002. Outline Introduction Introduction Specification Methods Specification Methods Interface Building Tools Interface Building Tools

Software ToolsSoftware Tools

Fall 2002Fall 2002

OutlineOutline

IntroductionIntroduction Specification MethodsSpecification Methods Interface Building ToolsInterface Building Tools Toolkits and LanguagesToolkits and Languages Evaluation ToolsEvaluation Tools

IntroductionIntroduction

Building interfaces that are usable Building interfaces that are usable by a wide audience is hardby a wide audience is hard ethnographyethnography participatory designparticipatory design

UI architects need to simply and UI architects need to simply and quickly sketch a proposed interfacequickly sketch a proposed interface for example, the W model requires for example, the W model requires

frequent prototypesfrequent prototypes

IntroductionIntroduction

By designing and showing the UI By designing and showing the UI before the application itself is built, before the application itself is built, the application will end up with a the application will end up with a more consistent UImore consistent UI

By being able to unambiguously By being able to unambiguously describe a UI and its transitions, the describe a UI and its transitions, the UI can be discussed and modeledUI can be discussed and modeled

Specification MethodsSpecification Methods

Natural Language SpecificationsNatural Language Specifications AmbiguousAmbiguous EasyEasy

Formal SpecificationsFormal Specifications UnambiguousUnambiguous Defined grammarDefined grammar Ability to prove a specification is a valid Ability to prove a specification is a valid

construct within the grammarconstruct within the grammar

Specification MethodsSpecification Methods

GrammarsGrammars Menu TreesMenu Trees Transition DiagramsTransition Diagrams State ChartsState Charts

BNFBNF

Backus-Naur FormBackus-Naur Form <non-terminal> ::= <non-terminals> <non-terminal> ::= <non-terminals>

terminalsterminals i.e., a telephone number is represented by i.e., a telephone number is represented by

tel-num ::= (<area-code>) <exchange>-<local-tel-num ::= (<area-code>) <exchange>-<local-number>number>

area-code ::= <digit><digit><digit>area-code ::= <digit><digit><digit> exchange ::= <digit><digit><digit>exchange ::= <digit><digit><digit> local-number ::= <digit><digit><digit><digit>local-number ::= <digit><digit><digit><digit> digit ::= 0|1|2|3|4|5|6|7|8|9digit ::= 0|1|2|3|4|5|6|7|8|9

BNFBNF

IncompleteIncomplete Good to specify format, but fails to Good to specify format, but fails to

specify content, such as valid exchanges specify content, such as valid exchanges or area codesor area codes

A second level of software is used to A second level of software is used to validate content.validate content.

ComplexComplex As a BNF grammar grows, it becomes As a BNF grammar grows, it becomes

very complex and difficult to follow or very complex and difficult to follow or changechange

Unix Command StructureUnix Command Structure

Variant of BNFVariant of BNF All capital letters is a non-terminalAll capital letters is a non-terminal Non-terminal format is assumedNon-terminal format is assumed Brackets denote optional argumentsBrackets denote optional arguments Ellipsis (…) denote “-or-more”Ellipsis (…) denote “-or-more”

[OPTION]… is 0 or more (Kleene closure or *-[OPTION]… is 0 or more (Kleene closure or *-closure)closure)

SOURCE… is 1 or more (+-closure)SOURCE… is 1 or more (+-closure)

cpcp

From a Debian 3.0r0 machine:From a Debian 3.0r0 machine:cp [OPTION]... SOURCE DESTcp [OPTION]... SOURCE DEST

cp [OPTION]... SOURCE... DIRECTORYcp [OPTION]... SOURCE... DIRECTORY

cp [OPTION]... --target directory=DIRECTORY cp [OPTION]... --target directory=DIRECTORY SOURCE…SOURCE…

Other Variant GrammarsOther Variant Grammars makemake

JAVAC = /usr/bin/jikesJAVAC = /usr/bin/jikesJAVA_HOME = /usr/lib/jsdk1.3JAVA_HOME = /usr/lib/jsdk1.3

all: thyme-core chat swaball: thyme-core chat swabthyme-core:thyme-core:

$(MAKE) -f thyme-core/Makefile$(MAKE) -f thyme-core/Makefilechat:chat:

$(MAKE) -f chat/Makefile$(MAKE) -f chat/Makefileswab:swab:

$(MAKE) -f swab/Makefile$(MAKE) -f swab/Makefile

Other GrammarsOther Grammars

XMLXML<?xml version=“1.0”?><?xml version=“1.0”?>

<system spec-file-version=“2.0”><system spec-file-version=“2.0”>

<init class=“some.init.InitComponent”/><init class=“some.init.InitComponent”/>

<parameters><parameters>

<parameter name=“tcc.init.classid” <parameter name=“tcc.init.classid”

value=“some.room.RoomComponent”/>value=“some.room.RoomComponent”/>

</parameters></parameters>

</system></system>

Multiparty GrammarsMultiparty Grammars

Used for showing interaction between Used for showing interaction between more than one party (Shneiderman, more than one party (Shneiderman, 1982)1982)

Non-terminals labeled by the party Non-terminals labeled by the party which generates it (i.e., U for user which generates it (i.e., U for user and C and computer)and C and computer)

Effective for text-oriented command Effective for text-oriented command sequences which have repeated sequences which have repeated exchangesexchanges

Multiparty GrammarsMultiparty Grammars

ExampleExample<Session> ::= <U: Opening> <C: <Session> ::= <U: Opening> <C:

Responding>Responding>

<U: Opening> :: LOGIN <U: Name><U: Opening> :: LOGIN <U: Name>

<U: Name> :: <U: string><U: Name> :: <U: string>

<C: Responding> :: HELLO [<U: <C: Responding> :: HELLO [<U: Name>]Name>]

Selection TreesSelection Trees

Branching interactionBranching interaction Each tree node will branch to one or more Each tree node will branch to one or more

possibilities.possibilities. Not necessarily a strict treeNot necessarily a strict tree

AcyclicAcyclic CyclicCyclic TreeTree

Menu Selection TreesMenu Selection Trees Dialog Selection TreesDialog Selection Trees

Transition DiagramsTransition Diagrams

More complete and general than selection More complete and general than selection treestrees general enough to show the complete interaction general enough to show the complete interaction

with an applicationwith an application Directed graphDirected graph

Nodes represent statesNodes represent states Links between nodes represent actions and the Links between nodes represent actions and the

application’s responseapplication’s response NFANFA

Becomes cumbersome as the represented Becomes cumbersome as the represented interaction grows.interaction grows.

State ChartsState Charts Harel, 1988Harel, 1988 Extension of transition diagrams where Extension of transition diagrams where

related actions are grouped into a related actions are grouped into a subgraph (modularity)subgraph (modularity)

Only effective where the subgraphs have Only effective where the subgraphs have single points of entry and exit single points of entry and exit

For example, all bank transactions are For example, all bank transactions are within a group. Then within that group, within a group. Then within that group, there are separate groups for verification, there are separate groups for verification, withdrawal and deposit.withdrawal and deposit.

User-Action Notation User-Action Notation (UAN)(UAN)

Chase et. al., 1994Chase et. al., 1994 Grammars and State diagrams fail to deal Grammars and State diagrams fail to deal

with direct manipulation interfaceswith direct manipulation interfaces A user’s intended action depends on contextA user’s intended action depends on context Context can change quickly during runtimeContext can change quickly during runtime

UAN is a high-level notation that focus a UAN is a high-level notation that focus a user’s direct manipulation task (pointing, user’s direct manipulation task (pointing, dragging and clicking in WIMP interfaces)dragging and clicking in WIMP interfaces)

UANUAN

Syntax involves a user action, Syntax involves a user action, interface feedback and interface interface feedback and interface state. i.e., deleting a file:state. i.e., deleting a file:

User Action Interface Feedback Interface State

~[file], Mv file!, forall(file!): file-!

selected = file

~[x,y]* outline(file) > ~

~[trash] outline(file) > ~, trash!

M^ erase(file), trash!! selected = null

UANUAN

~ is the cursor. M is the mouse~ is the cursor. M is the mouse ~[object] is cursor movement to the ~[object] is cursor movement to the

specified object (i.e., icon)specified object (i.e., icon) object > ~ means move the object to the object > ~ means move the object to the

cursorcursor Mv is press the mouse buttonMv is press the mouse button M^ is release the mouse buttonM^ is release the mouse button object! is highlight the objectobject! is highlight the object object!! is dehighlight the objectobject!! is dehighlight the object

Specification MethodsSpecification MethodsThe MessageThe Message

grammars programatically specify the grammars programatically specify the interface actions available but fail to specify interface actions available but fail to specify interaction.interaction.

Selection trees show transitions between Selection trees show transitions between menu items or dialogsmenu items or dialogs

Transition diagrams show transitions between Transition diagrams show transitions between states for a complete applicationstates for a complete application

State charts group related actions into State charts group related actions into groups, making the transition diagrams easier groups, making the transition diagrams easier to followto follow

UAN provides a notation to specify direct UAN provides a notation to specify direct manipulation tasksmanipulation tasks

Interface Building ToolsInterface Building Tools

Writing an application requires Writing an application requires agreement of several parties on the agreement of several parties on the UIUI managers need to approve the designmanagers need to approve the design UI architects need to build itUI architects need to build it programmers need to be aware what programmers need to be aware what

they are programming tothey are programming to users are asked for opinions on the users are asked for opinions on the

interfaceinterface


Let an interface be prototyped Let an interface be prototyped rapidlyrapidly

Let an interface be built by a non-Let an interface be built by a non-programmerprogrammer

Allow the application to be built Allow the application to be built using the prototyped interfaceusing the prototyped interface


Benefits of using interface building toolsBenefits of using interface building tools User-interface independenceUser-interface independence

Separate presentation from logicSeparate presentation from logic Prototype multiple user interfacesPrototype multiple user interfaces Multiple-platform supportMultiple-platform support Domain expert as user-interface architectDomain expert as user-interface architect Enforce standardsEnforce standards

Methodology and NotationMethodology and Notation Develop design methodologyDevelop design methodology Talk about designTalk about design Project managementProject management


Rapid prototypingRapid prototyping Build and use multiple versions up frontBuild and use multiple versions up front Low cost test, revise, testLow cost test, revise, test Usable user interfaces for users, managers Usable user interfaces for users, managers

and customers to see and use earlyand customers to see and use early Software supportSoftware support

ProductivityProductivity Constraint and consistency checksConstraint and consistency checks Ease of maintenanceEase of maintenance TeamsTeams

Design ToolsDesign Tools

Slide ShowSlide Show paper and pen, PowerPoint, etcpaper and pen, PowerPoint, etc

Visual editing toolsVisual editing tools HyperCard, Visual Basic, Delphi, etcHyperCard, Visual Basic, Delphi, etc

Visual programming toolsVisual programming tools Prograph, LEGO MindstormsPrograph, LEGO Mindstorms

Interface Building ToolsInterface Building ToolsInterface BuilderInterface Builder

Free tool included with MacOSX for Free tool included with MacOSX for building user interfacesbuilding user interfaces

Building InterfacesBuilding InterfacesThe MessageThe Message

Tools let prototype mostly functional Tools let prototype mostly functional interfaces quickly and cheaplyinterfaces quickly and cheaply

Tools lets a domain expert build the Tools lets a domain expert build the interface interface

Tools let the interface be discussed before Tools let the interface be discussed before the investment has been made in the rest the investment has been made in the rest of the applicationof the application

Showing the interface to management, Showing the interface to management, users and experts can be done early and users and experts can be done early and oftenoften

Evaluation ToolsEvaluation Tools

Provide automated feedback to the Provide automated feedback to the developer as to where the product is developer as to where the product is inconsistentinconsistent

Warning signsWarning signs automated analysis of where a UI automated analysis of where a UI

might be inconsistent or violating a might be inconsistent or violating a standard standard


Tullis’ Display Analysis ProgramTullis’ Display Analysis Program takes alphanumeric screen designs and takes alphanumeric screen designs and

critiques them.critiques them. percentage of upper-case letterspercentage of upper-case letters density of textdensity of text layout complexitylayout complexity

Example of automated analysisExample of automated analysis


GOMSGOMS Simple MetricsSimple Metrics

number of widgets per windownumber of widgets per window widget densitywidget density can yield information about how can yield information about how

complex the interface iscomplex the interface is Style consistencyStyle consistency


Web pagesWeb pages ValidationValidation Link checkingLink checking CorrectnessCorrectness

*Unit (JUnit, NUnit, etc)*Unit (JUnit, NUnit, etc) defined testing of applications (regression defined testing of applications (regression

testing)testing) CactusCactus

defined testing of UIs (regression testing of defined testing of UIs (regression testing of user interfaces)user interfaces)

Evaluation ToolsEvaluation ToolsThe MessageThe Message

let the developer programatically let the developer programatically determine correctness of an determine correctness of an interfaceinterface

give the developer feedback on give the developer feedback on consistency of the interfaceconsistency of the interface

allow comparison of interfacesallow comparison of interfaces

UI ToolkitsUI Toolkits

Ease development by providing fully-Ease development by providing fully-fleshed out UI componentsfleshed out UI components

A UI component has two major partsA UI component has two major parts The UI presentation (a button)The UI presentation (a button) The outlet (how the program is The outlet (how the program is

informed when the button is pressed)informed when the button is pressed)

ToolkitsToolkits

TCL/TkTCL/Tk MotifMotif Mac ToolboxMac Toolbox MFCMFC Java AWT / SwingJava AWT / Swing

Prototyping languagesPrototyping languages

JavaJava Application / Applet languageApplication / Applet language Cross platform. Intent is that all Cross platform. Intent is that all

applications act the same on all applications act the same on all platformsplatforms

HypercardHypercard Movement between Cards (screens)Movement between Cards (screens)

Tcl/TkTcl/Tk Scripting languageScripting language

Toolkits and LanguagesToolkits and LanguagesThe MessageThe Message

Toolkits provide UI widgets that can Toolkits provide UI widgets that can be used to develop the applicationbe used to develop the application

This lets the developer focus on This lets the developer focus on building the application, instead of building the application, instead of the widgetsthe widgets

Prototyping languages allow the Prototyping languages allow the rapid development of prototype rapid development of prototype applications, but trade can entail applications, but trade can entail trade-offstrade-offs

Next TimeNext Time

GroupKitGroupKit THYMETHYME

Documents

Software Tools Fall 2002. Outline Introduction Introduction Specification Methods Specification Methods Interface Building Tools Interface Building Tools