Software ToolsSoftware Tools

Human Computer InteractionHuman Computer Interaction

CIS 6930/4930CIS 6930/4930

Section 4188/4186Section 4188/4186

IntroductionIntroduction► User-Interface ArchitectsUser-Interface Architects

Similar to Building ArchitectsSimilar to Building Architects UI Jobs (even domain specific!)UI Jobs (even domain specific!)

► Ideal: Complete design before starting to Ideal: Complete design before starting to buildbuild

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

Still design, even though it will change!Still design, even though it will change!► Standard GUIs have enabled 50% to Standard GUIs have enabled 50% to

500% productivity gains500% productivity gains► Desktop Computer is losing its prominenceDesktop Computer is losing its prominence

More mobile, more distributedMore mobile, more distributed Software must support greater plasticity (ex. Software must support greater plasticity (ex.

resolution)resolution) Display size, telephone access, web access, Display size, telephone access, web access,

languageslanguages Device-independent programmingDevice-independent programming

Specification MethodsSpecification Methods► Goal:Goal: How do we specify the How do we specify the

GUIGUI► Natural LanguageNatural Language

Pros: easy to understand, Pros: easy to understand, sketchpad, blackboardsketchpad, blackboard

Cons: Lengthy, vague, Cons: Lengthy, vague, ambiguous, difficult to proveambiguous, difficult to prove

► Formal and Semiformal Formal and Semiformal languageslanguages Grammars for command Grammars for command

languageslanguages► Backus-Naur Form – BNFBackus-Naur Form – BNF

More difficult for GUIs – More difficult for GUIs – usually describe sequence of usually describe sequence of actionsactions► Transition diagramsTransition diagrams► Menu-tree structuresMenu-tree structures► StatechartsStatecharts► Graphical specificationsGraphical specifications

GrammarsGrammars► Specify Textual Commands or Expressions that a program Specify Textual Commands or Expressions that a program

would understandwould understand► Still used in spreadsheet calculatorsStill used in spreadsheet calculators► BNF example on pg. 176BNF example on pg. 176► Multiparty Grammars Multiparty Grammars

Nonterminals that depict the actor (user/computer) for interactive Nonterminals that depict the actor (user/computer) for interactive programsprograms

Text-oriented sequencesText-oriented sequences Voice Recognition SystemsVoice Recognition Systems

► Pros:Pros: Aspects can be formally written downAspects can be formally written down Verification of completeness and correctnessVerification of completeness and correctness

► Cons:Cons: Doesn’t scale wellDoesn’t scale well Graphics apps still difficult to doGraphics apps still difficult to do

Menu-Selection and Dialog-Menu-Selection and Dialog-boxbox

► Menu-Selection TreeMenu-Selection Tree Create menus graphicallyCreate menus graphically Tools exist for:Tools exist for:

► CreationCreation► DesignDesign

Pros:Pros:► ReviewReview► ConsistencyConsistency► TotalityTotality► CompletenessCompleteness► Redundancy (examples?)Redundancy (examples?)

Cons:Cons:► Menu trees often do not show all possible Menu trees often do not show all possible

actions (incomplete)actions (incomplete)► Sometimes menus are not a treeSometimes menus are not a tree

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

Transition DiagramTransition Diagram► Most commonly usedMost commonly used► Set of nodes and linksSet of nodes and links► Many ways to display (pg.179-180)Many ways to display (pg.179-180)

TextText Link FrequencyLink Frequency State DiagramState Diagram

► Tools to create them (IBM Rational Suite)Tools to create them (IBM Rational Suite)► Also doesn’t scale well (spaghetti Also doesn’t scale well (spaghetti

displays)displays)► Replace nodes with Replace nodes with screenprintsscreenprints► Ex. 350 screens of a satellite-control Ex. 350 screens of a satellite-control

system were on 3 walls, 6 modules had system were on 3 walls, 6 modules had different stylesdifferent styles

► Pros:Pros: Similar to Finite-State-Automata (plenty of Similar to Finite-State-Automata (plenty of

research in CS on that)research in CS on that) Can we reach every state?Can we reach every state? Is there a way out?Is there a way out?

► Cons: Difficulty in evaluatingCons: Difficulty in evaluating UsabilityUsability VisibilityVisibility ModularityModularity SynchronizationSynchronization

StatechartsStatecharts► Uses nested roundtangles Uses nested roundtangles

(pg. 182)(pg. 182)► Extensions have been Extensions have been

developed fordeveloped for ConcurrencyConcurrency External eventsExternal events User ActionsUser Actions Example: Ilogix’s StatemateExample: Ilogix’s Statemate

► Unified Modeling Language Unified Modeling Language (UML)(UML) Standard for visualizing and Standard for visualizing and

documenting software documenting software systemssystems

► Goal: link specification with Goal: link specification with interface-building toolsinterface-building tools

► Why is this difficult?Why is this difficult? conformity, flexbilityconformity, flexbility

Interface-Building ToolsInterface-Building Tools

►Previous approaches are better at Previous approaches are better at designing designing systemssystems, , not so much for not so much for interfacesinterfaces

►Specification methods help designSpecification methods help design Command LanguagesCommand Languages Data-Entry SequencesData-Entry Sequences WidgetsWidgets

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

Interface-Interface-Building Building

ToolsTools

► Tools to do soTools to do so Visual editingVisual editing Create prototypesCreate prototypes Get the ‘look’ of the systemGet the ‘look’ of the system

► Pros:Pros: Improve rapidly (with subsequent versions)Improve rapidly (with subsequent versions) Design is fastDesign is fast Group work, client review, contract workGroup work, client review, contract work Modest technical training personnel can design interfacesModest technical training personnel can design interfaces Write user manuals from itWrite user manuals from it

► Cons:Cons: Non-PC based, makes design tools less prevalentNon-PC based, makes design tools less prevalent

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

Interface Interface Mockup ToolsMockup Tools

► Develop a quick sketch of GUIDevelop a quick sketch of GUI► Early stagesEarly stages► Explore multiple alternativesExplore multiple alternatives► Convey to clientsConvey to clients► Paper and pencil, word Paper and pencil, word

processors, PPTprocessors, PPT► Examples?Examples?

Macromedia Director, Flash MXMacromedia Director, Flash MX► Levels of mock upLevels of mock up

Still imagesStill images Prototype (no help, database, Prototype (no help, database,

etc.)etc.)► Apps: Microsoft Visio, Visual Apps: Microsoft Visio, Visual

Studio .NET, Borland’s JBuilder Studio .NET, Borland’s JBuilder (screenshot)(screenshot)

► Dramatically reduce design timeDramatically reduce design time► Win contractsWin contracts► Comes with supplied widgetsComes with supplied widgets► Extensibility is variedExtensibility is varied

Software-Software-Engineering ToolsEngineering Tools

► Let’s look at Table 5.1 (pg. Let’s look at Table 5.1 (pg. 190)190)

► Layer 1 – Windowing SystemLayer 1 – Windowing System Extensive programmingExtensive programming Most ExtensibilityMost Extensibility Windows GDIWindows GDI

► Layer 2- GUI ToolkitsLayer 2- GUI Toolkits AKA Rapid Prototyper, Rapid AKA Rapid Prototyper, Rapid

Application Developer, User Application Developer, User Interface Builder, UI Dev. Interface Builder, UI Dev. EnvironmentEnvironment

Software Libraries, widgetsSoftware Libraries, widgets Comes w/ basic widgets – Comes w/ basic widgets –

scrollbars, buttons, etc.scrollbars, buttons, etc. Requires extensive Requires extensive

programmingprogramming

Software-Software-Engineering ToolsEngineering Tools► Layer 3 - Specialized Layer 3 - Specialized

LanguagesLanguages No support for nongraphics No support for nongraphics

partpart Visual ProgrammingVisual Programming Simple ScriptingSimple Scripting MFC, GLUI, Visual Studio, MFC, GLUI, Visual Studio,

Tcl/Tk, QtTcl/Tk, Qt► Layer 4 – Application LayerLayer 4 – Application Layer

Interface GeneratorsInterface Generators User-Interface Management User-Interface Management

SystemsSystems Model-Based Building ToolsModel-Based Building Tools Small class of applicationsSmall class of applications Access, Sybase Access, Sybase

PowerDesignerPowerDesigner

Choosing a LayerChoosing a Layer► Which is best? Highest or lowest?Which is best? Highest or lowest?

Highest is typically betterHighest is typically better Less flexibility, quicker designLess flexibility, quicker design

► Ex. pre-fab housesEx. pre-fab houses► Six evaluation criteriaSix evaluation criteria

1.1. Part of the application built using the toolPart of the application built using the tool Ex. Presentation, UI, low-level interaction, other devicesEx. Presentation, UI, low-level interaction, other devices

2.2. Learning timeLearning time3.3. Building timeBuilding time4.4. Methodology imposed or advisedMethodology imposed or advised

Ex. Build UI first, connectivity requirementsEx. Build UI first, connectivity requirements5.5. Communication with other subsystemsCommunication with other subsystems

Ex. Databases, devices, webEx. Databases, devices, web6.6. Extensibility and modularityExtensibility and modularity

Ex. Evolution, new platforms, console gamesEx. Evolution, new platforms, console games

ConsiderationsConsiderations

► Tool price is usually not oneTool price is usually not one►Good usabilityGood usability►Quote:Quote: Usability has been treated by many Usability has been treated by many

software architects as a problem in software architects as a problem in modifiabilitymodifiability

► Separated user interface from internal Separated user interface from internal functionsfunctions

► Now standard practiceNow standard practice► Negatives: Postpones usability till the end!Negatives: Postpones usability till the end!

How does this hurt?How does this hurt?►Some problems can not be fixed at the end Some problems can not be fixed at the end ►Some functions need to be considered from the beginning. Some functions need to be considered from the beginning.

Ex. undo a command, progress bar Ex. undo a command, progress bar

Windowing-System LayerWindowing-System Layer

► UI Building tools, X, MFCs, etc. UI Building tools, X, MFCs, etc. are typically hard to come by are typically hard to come by for most new or few-user for most new or few-user based systemsbased systems

► New Platform, new tool New Platform, new tool learning (UNIX, Windows, learning (UNIX, Windows, XBOX, mobile phones)XBOX, mobile phones)

► Most are at its core, basic Most are at its core, basic event based display examplesevent based display examples

► High-level tools abstract this High-level tools abstract this low-level interfacelow-level interface

► Creating a window w/ XLib = Creating a window w/ XLib = 237 lines, Tcl/Tk = 2. Also 237 lines, Tcl/Tk = 2. Also Windows MFC vs Glut. Windows MFC vs Glut.

► But what do you give up?But what do you give up?

GUI Toolkit LayerGUI Toolkit Layer

► User-interface libraryUser-interface library► Common widgetsCommon widgets

windows, scroll bars, windows, scroll bars, menus, fields, buttons, menus, fields, buttons, etc.etc.

Example: MFCs, Xtk, Example: MFCs, Xtk, Apple Toolkit, FrontPageApple Toolkit, FrontPage

► Is it interactive?Is it interactive? Yes: Much more effectiveYes: Much more effective No: More learning, No: More learning,

maintenance difficultmaintenance difficult

GUI Toolkit LayerGUI Toolkit Layer► Qt is becoming very popular Qt is becoming very popular

(freeware)(freeware) Crossplatform GUI with a visual editorCrossplatform GUI with a visual editor OOP C/C++ librariesOOP C/C++ libraries Good trade-off? Software engineering Good trade-off? Software engineering

skill vs. flexibility vs. creativity vs. skill vs. flexibility vs. creativity vs. featuresfeatures

http://http://www.suse.co.uk/uk/private/support/onliwww.suse.co.uk/uk/private/support/online_help/howto/qtne_help/howto/qt//

► Sun’s JavaSun’s Java Write once, run many platformsWrite once, run many platforms Java Runtime EnvironmentJava Runtime Environment JBuilder, NetBeansJBuilder, NetBeans Platform versions still look different Platform versions still look different

(font, resolutions, etc.)(font, resolutions, etc.)► Applications to standardize Applications to standardize

multiplatformsmultiplatforms Sun’s Swing appSun’s Swing app IBM Standard Widget ToolkitIBM Standard Widget Toolkit

GUI Toolkit LayerGUI Toolkit Layer► Microsoft .NETMicrosoft .NET

Integrates large Integrates large programming librariesprogramming libraries

Virtual machine compilerVirtual machine compiler Network supportNetwork support Standard GUI ToolkitStandard GUI Toolkit Tied to windowsTied to windows

► Java/J2EE, C#/.NETJava/J2EE, C#/.NET► Standard GUIsStandard GUIs

Good for novicesGood for novices Improve productivity and Improve productivity and

satisfactionsatisfaction► Think post WIMP (Windows, Think post WIMP (Windows,

Icons, Menu, and a pointer)Icons, Menu, and a pointer) Ex. Jazz and Piccolo Ex. Jazz and Piccolo

(zoomable), SATIN(zoomable), SATIN Specialized toolkits to Specialized toolkits to

handle apps like photo handle apps like photo managing, 3d, etc.managing, 3d, etc.

Application Framework/Application Framework/Specialized LanguageSpecialized Language

► Application FrameworksApplication Frameworks OOPOOP Started with MacApp – ’86 Started with MacApp – ’86

toolkit in Object Pascaltoolkit in Object Pascal All UI have similar structureAll UI have similar structure Capture it and translate it Capture it and translate it

into classesinto classes Ex. Buttons and actionsEx. Buttons and actions Others: NextStep, Cocoa, Others: NextStep, Cocoa,

MFCsMFCs► Very effective for rapid UI Very effective for rapid UI

buildingbuilding► Requires substantial Requires substantial

programming skillsprogramming skills► Visual tools do existVisual tools do exist

Specialized Specialized LanguageLanguage

► Create a language Create a language specificallyspecifically to create UIsto create UIs

► Ousterhout (’94)Ousterhout (’94) Created a scripting language Created a scripting language

(Tcl)(Tcl) Coupled with a toolkit (Tk)Coupled with a toolkit (Tk) Tcl/tk is one of the most Tcl/tk is one of the most

popular UI Languages in use popular UI Languages in use (research)(research)

Combo: Combo: Tcl – easy to use, Tk – Tcl – easy to use, Tk – useful widgetsuseful widgets

Interpreted (rapid Interpreted (rapid development)development)

Cross platformCross platform Lacks visual editorLacks visual editor Good prototyper (hence used in Good prototyper (hence used in

research)research)► Others include: Perl/Tk, Others include: Perl/Tk,

Python/Tk, Visual BasicPython/Tk, Visual Basic► Web page interactionWeb page interaction

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

JavaScriptJavaScript

►One of the most One of the most popular scripting popular scripting languageslanguages

► All major web All major web browsers + HTMLbrowsers + HTML

► Cross platformCross platform► Easy to learn Easy to learn

(relatively, still (relatively, still requires requires programming)programming)

► Visual editors existVisual 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 Coupling Visual EditorsEditors

► Apple HyperCard is the firstApple HyperCard is the first► Visual Edit the UI (drag and drop Visual Edit the UI (drag and drop

widgets)widgets)► Auto-create some codeAuto-create some code► Macromedia Director + LINGO Macromedia Director + LINGO

(Script language)(Script language) Visual and interactiveVisual and interactive Divides UI design from app Divides UI design from app

engineering with a nice engineering with a nice interconnectinterconnect

► Other examples: Flash and Flash Other examples: Flash and Flash MXMX

► Visual Programming ToolsVisual Programming Tools, the , the scripting language can be visual. scripting language can be visual. LabView – function boxes linked LabView – function boxes linked

with wireswith wires AVS – Image processingAVS – Image processing

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

Evaluation and Evaluation and Critiquing ToolsCritiquing Tools

► How would you evaluate a UI?How would you evaluate a UI?

► First orderFirst order SpellingSpelling Link checkingLink checking # of displays# of displays CompletenessCompleteness

► Still doesn’t give enough infoStill doesn’t give enough info► Second orderSecond order

Menu tree depthMenu tree depth Action redundanciesAction redundancies ConsistencyConsistency

► Third orderThird order SatisfactionSatisfaction Task perfromanceTask perfromance

► What tools could you What tools could you develop?develop?

Run-time logging softwareRun-time logging software► Capture user activity!Capture user activity!► Think about UI design errors, gamesThink about UI design errors, games► Error rates (errors per hour)Error rates (errors per hour)► Menu Item usageMenu Item usage► Help usageHelp usage► Web-page access (webmasters)Web-page access (webmasters)► Early example: Tullis’s Display Analysis ProgramEarly example: Tullis’s Display Analysis Program

Took text menusTook text menus Reported stats: Upper case %, maximum/ minimum/ average density, Reported stats: Upper case %, maximum/ minimum/ average density,

complexitycomplexity Gave suggestions based on known study results (ex. Lower+Upper is 13% Gave suggestions based on known study results (ex. Lower+Upper is 13%

than just Upper)than just Upper)► Hard for GUIHard for GUI► Learn more about how users Learn more about how users respond respond to interfacesto interfaces► Many user studies run to evaluate effect of font, color, resolution, Many user studies run to evaluate effect of font, color, resolution,

widgets, etc. on a performance, satisfaction, etc.widgets, etc. on a performance, satisfaction, etc.► Assignment: Everyone go find one and report back in next class. Assignment: Everyone go find one and report back in next class.

Email the synopsis to TA (due in 1 week)Email the synopsis to TA (due in 1 week)

Evaluation ToolsEvaluation Tools

► Pros: If done early, can save substantial Pros: If done early, can save substantial development time and costdevelopment time and cost

► Cons: Not many people know how to do itCons: Not many people know how to do it► Simple metrics:Simple metrics:

# of widgets to a dialog box# of widgets to a dialog box Widget densityWidget density Non-widget areaNon-widget area Aspect ratioAspect ratio Screen balance of UI controlsScreen balance of UI controls

► Still, hard to detect anomaliesStill, hard to detect anomalies

Evaluation ToolsEvaluation Tools

► List of used colors, word counts, button size List of used colors, word counts, button size checkers, margin checkers can help detect checkers, margin checkers can help detect anomaliesanomalies

► Study: Study: Using search + browse + query slowed Using search + browse + query slowed performance by 10% to 25%performance by 10% to 25%

► Web page analysis tools exist (ex. Bobby and HTML Web page analysis tools exist (ex. Bobby and HTML Tidy)Tidy) HTML checkerHTML checker Similar to a compiler’s lexical analyzerSimilar to a compiler’s lexical analyzer US NIST has web metrics and tools US NIST has web metrics and tools

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

GuidelinesGuidelines

► Also useful are just general guidelinesAlso useful are just general guidelines►WebTangoWebTango

Panel of experts evaluated 5300 web pages on Panel of experts evaluated 5300 web pages on 141 layout criteria141 layout criteria

Results are good guidelines for any webpageResults are good guidelines for any webpage►Large pages should have columnsLarge pages should have columns►Heading size should be proportional to text amountHeading size should be proportional to text amount►Animated graphical ads should be kept to a minimum Animated graphical ads should be kept to a minimum

(think Google!)(think Google!)►Link text should have 2-3 wordsLink text should have 2-3 words►San-serif fonts for body text (Ex. Guidelines vs. San-serif fonts for body text (Ex. Guidelines vs. GuidelinesGuidelines))►Color should be reserved for headingsColor should be reserved for headings►Web page speed was not always a factor(!). (Ex. Web page speed was not always a factor(!). (Ex.

espn.com)espn.com)

GuidelinesGuidelines

► Case-by-case basis evaluation is still requiredCase-by-case basis evaluation is still required► Future is good for tools due to web format and language Future is good for tools due to web format and language

standardization. Checkers, visualizers exist for:standardization. Checkers, visualizers exist for: Extensible Markup Language (XML)Extensible Markup Language (XML) User Interface Markup Language (UIML)User Interface Markup Language (UIML) XML User Interface Language (XUL)XML User Interface Language (XUL)

► Discuss: Discuss: Hitting Shift-ENTER in PPT on a list ends a listHitting Shift-ENTER in PPT on a list ends a list► Discuss: Discuss: Ctrl-Enter while writing an email sends it in Ctrl-Enter while writing an email sends it in

Outlook ExpressOutlook Express► Discuss: Discuss: Typing an address, while IE or Netscape is Typing an address, while IE or Netscape is

loading a page, gets cut off when the page finishes loading a page, gets cut off when the page finishes loadingloading