GUI Design and Development: Specification Methods, Grammars, and Evaluation Tools - Prof. , Summaries of Human-Computer Interaction Design

Download GUI Design and Development: Specification Methods, Grammars, and Evaluation Tools - Prof. and more Summaries Human-Computer Interaction Design in PDF only on Docsity!

Software ToolsSoftware Tools

Human Computer Interaction Human Computer Interaction

CIS 6930/4930 CIS 6930/

Section 4188/4186 Section 4188/

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 toIdeal: 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% toStandard 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, languages languages  (^) Device-independent programmingDevice-independent programming

GrammarsGrammars

► (^) Specify Textual Commands or Expressions that a programSpecify Textual Commands or Expressions that a program would understand would understand ► (^) Still used in spreadsheet calculatorsStill used in spreadsheet calculators ► (^) BNF example on pg. 176BNF example on pg. 176 ► (^) Multiparty GrammarsMultiparty Grammars

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

programs programs

 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-

box box

► (^) 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 possibleMenu 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.  (^) Same thing for dialog-box treesSame thing for dialog-box trees

StatechartsStatecharts

► (^) Uses nested roundtanglesUses nested roundtangles (pg. 182) (pg. 182) ► (^) Extensions have beenExtensions have been developed for developed for

 ConcurrencyConcurrency

 External eventsExternal events

 User ActionsUser Actions

 Example: Ilogix’s StatemateExample: Ilogix’s Statemate

► (^) Unified Modeling LanguageUnified Modeling Language (UML) (UML)

 Standard for visualizing andStandard for visualizing and

documenting softwaredocumenting software

systemssystems

► (^) Goal: link specification withGoal: link specification with interface-building tools interface-building tools ► (^) Why is this difficult?Why is this difficult?

 conformity, flexbilityconformity, flexbility

Interface-Building ToolsInterface-Building Tools

► (^) Previous approaches are better atPrevious approaches are better at designing designing systemssystems ,, not so much fornot so much for interfaces interfaces ► (^) Specification methods help designSpecification methods help design  Command LanguagesCommand Languages  Data-Entry SequencesData-Entry Sequences  WidgetsWidgets ► (^) What type of tools would you like to helpWhat type of tools would you like to help you build an user interface? you build an user interface?

InterfaceInterface Mockup Tools Mockup 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, wordPaper and pencil, word

processors, PPT processors, PPT

► Examples?Examples?

 (^) Macromedia Director, Flash MXMacromedia Director, Flash MX

► Levels of mock upLevels of mock up

 (^) Still imagesStill images  (^) Prototype (no help, database, etc.)Prototype (no help, database, etc.)

► Apps: Microsoft Visio, VisualApps: 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 Tools Engineering Tools ► (^) Let’s look at Table 5.1 (pg.Let’s look at Table 5.1 (pg.

► (^) 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, RapidAKA Rapid Prototyper, Rapid

Application Developer, User Application Developer, User

Interface Builder, UI Dev. Interface Builder, UI Dev.

Environment Environment

 Software Libraries, widgetsSoftware Libraries, widgets

 Comes w/ basic widgets –Comes w/ basic widgets –

scrollbars, buttons, etc. scrollbars, buttons, etc.

 Requires extensiveRequires extensive

programming programming

Choosing a LayerChoosing a Layer

► (^) Which is best?Which is best? Highest or lowest?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 time

3. 3. Building timeBuilding time

4. 4. Methodology imposed or advisedMethodology imposed or advised

 (^) Ex. Build UI first, connectivity requirementsEx. Build UI first, connectivity requirements

5. 5. Communication with other subsystemsCommunication with other subsystems

 (^) Ex. Databases, devices, webEx. Databases, devices, web

6. 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 manyUsability has been treated by many software architects as a problem in modifiability software architects as a problem in modifiability ► (^) Separated user interface from internal functionsSeparated user interface from internal functions ► (^) 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 endSome 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

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, FrontPage Apple Toolkit, FrontPage ► (^) Is it interactive?Is it interactive?  (^) Yes: Much more effectiveYes: Much more effective  (^) No: More learning,No: More learning, maintenance difficult maintenance difficult

GUI Toolkit LayerGUI Toolkit Layer

► Qt is becoming very popular (freeware)Qt is becoming very popular (freeware)

 (^) Crossplatform GUI with a visual editorCrossplatform GUI with a visual editor  (^) OOP C/C++ librariesOOP C/C++ libraries  (^) Good trade-off?Good trade-off? Software engineeringSoftware engineering skill vs. flexibility vs. creativity vs. skill vs. flexibility vs. creativity vs. features features  (^) http://http:// www.suse.co.uk/uk/private/support/onlin www.suse.co.uk/uk/private/support/onlin e_help/howto/qt e_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 differentPlatform versions still look different (font, resolutions, etc.) (font, resolutions, etc.)

► Applications to standardizeApplications to standardize

multiplatforms multiplatforms

 (^) Sun’s Swing appSun’s Swing app  (^) IBM Standard Widget ToolkitIBM Standard Widget Toolkit

Application Framework/Application Framework/ Specialized Language Specialized Language ► (^) Application FrameworksApplication Frameworks

 OOPOOP

 Started with MacApp – ’86Started with MacApp – ’

toolkit in Object Pascal toolkit in Object Pascal

 All UI have similar structureAll UI have similar structure

 Capture it and translate it intoCapture it and translate it into

classes classes

 Ex.Ex. Buttons and actionsButtons and actions

 Others: NextStep, Cocoa,Others: NextStep, Cocoa,

MFCs MFCs

► (^) Very effective for rapid UIVery effective for rapid UI building building ► (^) Requires substantialRequires substantial programming skills programming skills ► (^) Visual tools do existVisual tools do exist

SpecializedSpecialized Language Language

► Create a languageCreate a language specificallyspecifically

to create UIs to create UIs

► Ousterhout (’94)Ousterhout (’94)

 (^) Created a scripting languageCreated a scripting language (Tcl) (Tcl)  (^) Coupled with a toolkit (Tk)Coupled with a toolkit (Tk)  (^) Tcl/tk is one of the mostTcl/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 widgets useful widgets  (^) Interpreted (rapidInterpreted (rapid development) development)  (^) Cross platformCross platform  (^) Lacks visual editorLacks visual editor  (^) Good prototyper (hence used inGood prototyper (hence used in research) research)

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

Python/Tk, Visual Basic Python/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