1. Software Tools Fall 2002

2. Outline Introduction Introduction Specification Methods Specification Methods Interface Building Tools Interface Building Tools Toolkits and Languages Toolkits and Languages Evaluation Tools Evaluation Tools

3. Introduction Building interfaces that are usable by a wide audience is hard Building interfaces that are usable by a wide audience is hard ethnography ethnography participatory design participatory design UI architects need to simply and quickly sketch a proposed interface UI architects need to simply and quickly sketch a proposed interface for example, the W model requires frequent prototypes for example, the W model requires frequent prototypes

4. Introduction By designing and showing the UI before the application itself is built, the application will end up with a more consistent UI By designing and showing the UI before the application itself is built, the application will end up with a more consistent UI By being able to unambiguously describe a UI and its transitions, the UI can be discussed and modeled By being able to unambiguously describe a UI and its transitions, the UI can be discussed and modeled

5. Specification Methods Natural Language Specifications Natural Language Specifications Ambiguous Ambiguous Easy Easy Formal Specifications Formal Specifications Unambiguous Unambiguous Defined grammar Defined grammar Ability to prove a specification is a valid construct within the grammar Ability to prove a specification is a valid construct within the grammar

6. Specification Methods Grammars Grammars Menu Trees Menu Trees Transition Diagrams Transition Diagrams State Charts State Charts

7. BNF Backus-Naur Form Backus-Naur Form ::= terminals ::= terminals i.e., a telephone number is represented by i.e., a telephone number is represented by tel-num ::= ( ) - tel-num ::= ( ) - area-code ::= area-code ::= exchange ::= exchange ::= local-number ::= local-number ::= digit ::= 0|1|2|3|4|5|6|7|8|9 digit ::= 0|1|2|3|4|5|6|7|8|9

8. BNF Incomplete Incomplete Good to specify format, but fails to specify content, such as valid exchanges or area codes Good to specify format, but fails to specify content, such as valid exchanges or area codes A second level of software is used to validate content. A second level of software is used to validate content. Complex Complex As a BNF grammar grows, it becomes very complex and difficult to follow or change As a BNF grammar grows, it becomes very complex and difficult to follow or change

9. Unix Command Structure Variant of BNF Variant of BNF All capital letters is a non-terminal All capital letters is a non-terminal Non-terminal format is assumed Non-terminal format is assumed Brackets denote optional arguments Brackets denote optional arguments Ellipsis (…) denote “-or-more” Ellipsis (…) denote “-or-more” [OPTION]… is 0 or more (Kleene closure or *-closure) [OPTION]… is 0 or more (Kleene closure or *-closure) SOURCE… is 1 or more (+-closure) SOURCE… is 1 or more (+-closure)

10. cp From a Debian 3.0r0 machine: From a Debian 3.0r0 machine: cp [OPTION]... SOURCE DEST cp [OPTION]... SOURCE... DIRECTORY cp [OPTION]... --target directory=DIRECTORY SOURCE…

11. Other Variant Grammars make make JAVAC = /usr/bin/jikes JAVA_HOME = /usr/lib/jsdk1.3 all: thyme-core chat swab thyme-core: $(MAKE) -f thyme-core/Makefile chat: $(MAKE) -f chat/Makefile swab: $(MAKE) -f swab/Makefile

12. Other Grammars XML XML <parameters> </parameters></system>

13. Multiparty Grammars Used for showing interaction between more than one party (Shneiderman, 1982) Used for showing interaction between more than one party (Shneiderman, 1982) Non-terminals labeled by the party which generates it (i.e., U for user and C and computer) Non-terminals labeled by the party which generates it (i.e., U for user and C and computer) Effective for text-oriented command sequences which have repeated exchanges Effective for text-oriented command sequences which have repeated exchanges

14. Multiparty Grammars Example Example ::= ::= :: LOGIN :: LOGIN :: :: :: HELLO [ ] :: HELLO [ ]

15. Selection Trees Branching interaction Branching interaction Each tree node will branch to one or more possibilities. Each tree node will branch to one or more possibilities. Not necessarily a strict tree Not necessarily a strict tree Acyclic Acyclic Cyclic Cyclic Tree Tree Menu Selection Trees Menu Selection Trees Dialog Selection Trees Dialog Selection Trees

16. Transition Diagrams More complete and general than selection trees More complete and general than selection trees general enough to show the complete interaction with an application general enough to show the complete interaction with an application Directed graph Directed graph Nodes represent states Nodes represent states Links between nodes represent actions and the application’s response Links between nodes represent actions and the application’s response NFA NFA Becomes cumbersome as the represented interaction grows. Becomes cumbersome as the represented interaction grows.

17. State Charts Harel, 1988 Harel, 1988 Extension of transition diagrams where related actions are grouped into a subgraph (modularity) Extension of transition diagrams where related actions are grouped into a subgraph (modularity) Only effective where the subgraphs have single points of entry and exit Only effective where the subgraphs have single points of entry and exit For example, all bank transactions are within a group. Then within that group, there are separate groups for verification, withdrawal and deposit. For example, all bank transactions are within a group. Then within that group, there are separate groups for verification, withdrawal and deposit.

18. User-Action Notation (UAN) Chase et. al., 1994 Chase et. al., 1994 Grammars and State diagrams fail to deal with direct manipulation interfaces Grammars and State diagrams fail to deal with direct manipulation interfaces A user’s intended action depends on context A user’s intended action depends on context Context can change quickly during runtime Context can change quickly during runtime UAN is a high-level notation that focus a user’s direct manipulation task (pointing, dragging and clicking in WIMP interfaces) UAN is a high-level notation that focus a user’s direct manipulation task (pointing, dragging and clicking in WIMP interfaces)

19. UAN Syntax involves a user action, interface feedback and interface state. i.e., deleting a file: Syntax involves a user action, interface feedback and interface state. i.e., deleting a file: User ActionInterface FeedbackInterface State ~[file], Mvfile!, forall(file!): file-! selected = file ~[x,y]*outline(file) > ~ ~[trash]outline(file) > ~, trash! M^erase(file), trash!!selected = null

20. UAN ~ is the cursor. M is the mouse ~ is the cursor. M is the mouse ~[object] is cursor movement to the specified object (i.e., icon) ~[object] is cursor movement to the specified object (i.e., icon) object > ~ means move the object to the cursor object > ~ means move the object to the cursor Mv is press the mouse button Mv is press the mouse button M^ is release the mouse button M^ is release the mouse button object! is highlight the object object! is highlight the object object!! is dehighlight the object object!! is dehighlight the object

21. Specification Methods The Message grammars programatically specify the interface actions available but fail to specify interaction. grammars programatically specify the interface actions available but fail to specify interaction. Selection trees show transitions between menu items or dialogs Selection trees show transitions between menu items or dialogs Transition diagrams show transitions between states for a complete application Transition diagrams show transitions between states for a complete application State charts group related actions into groups, making the transition diagrams easier to follow State charts group related actions into groups, making the transition diagrams easier to follow UAN provides a notation to specify direct manipulation tasks UAN provides a notation to specify direct manipulation tasks

22. Interface Building Tools Writing an application requires agreement of several parties on the UI Writing an application requires agreement of several parties on the UI managers need to approve the design managers need to approve the design UI architects need to build it UI architects need to build it programmers need to be aware what they are programming to programmers need to be aware what they are programming to users are asked for opinions on the interface users are asked for opinions on the interface

23. Interface Building Tools Let an interface be prototyped rapidly Let an interface be prototyped rapidly Let an interface be built by a non- programmer Let an interface be built by a non- programmer Allow the application to be built using the prototyped interface Allow the application to be built using the prototyped interface

24. Interface Building Tools Benefits of using interface building tools Benefits of using interface building tools User-interface independence User-interface independence Separate presentation from logic Separate presentation from logic Prototype multiple user interfaces Prototype multiple user interfaces Multiple-platform support Multiple-platform support Domain expert as user-interface architect Domain expert as user-interface architect Enforce standards Enforce standards Methodology and Notation Methodology and Notation Develop design methodology Develop design methodology Talk about design Talk about design Project management Project management

25. Interface Building Tools Rapid prototyping Rapid prototyping Build and use multiple versions up front Build and use multiple versions up front Low cost test, revise, test Low cost test, revise, test Usable user interfaces for users, managers and customers to see and use early Usable user interfaces for users, managers and customers to see and use early Software support Software support Productivity Productivity Constraint and consistency checks Constraint and consistency checks Ease of maintenance Ease of maintenance Teams Teams

26. Design Tools Slide Show Slide Show paper and pen, PowerPoint, etc paper and pen, PowerPoint, etc Visual editing tools Visual editing tools HyperCard, Visual Basic, Delphi, etc HyperCard, Visual Basic, Delphi, etc Visual programming tools Visual programming tools Prograph, LEGO Mindstorms Prograph, LEGO Mindstorms

27. Interface Building Tools Interface Builder Free tool included with MacOSX for building user interfaces Free tool included with MacOSX for building user interfaces

28. Building Interfaces The Message Tools let prototype mostly functional interfaces quickly and cheaply Tools let prototype mostly functional interfaces quickly and cheaply Tools lets a domain expert build the interface Tools lets a domain expert build the interface Tools let the interface be discussed before the investment has been made in the rest of the application Tools let the interface be discussed before the investment has been made in the rest of the application Showing the interface to management, users and experts can be done early and often Showing the interface to management, users and experts can be done early and often

29. Evaluation Tools Provide automated feedback to the developer as to where the product is inconsistent Provide automated feedback to the developer as to where the product is inconsistent Warning signs Warning signs automated analysis of where a UI might be inconsistent or violating a standard automated analysis of where a UI might be inconsistent or violating a standard

30. Evaluation Tools Tullis’ Display Analysis Program Tullis’ Display Analysis Program takes alphanumeric screen designs and critiques them. takes alphanumeric screen designs and critiques them. percentage of upper-case letters percentage of upper-case letters density of text density of text layout complexity layout complexity Example of automated analysis Example of automated analysis

31. Evaluation Tools GOMS GOMS Simple Metrics Simple Metrics number of widgets per window number of widgets per window widget density widget density can yield information about how complex the interface is can yield information about how complex the interface is Style consistency Style consistency

32. Evaluation Tools Web pages Web pages Validation Validation Link checking Link checking Correctness Correctness *Unit (JUnit, NUnit, etc) *Unit (JUnit, NUnit, etc) defined testing of applications (regression testing) defined testing of applications (regression testing) Cactus Cactus defined testing of UIs (regression testing of user interfaces) defined testing of UIs (regression testing of user interfaces)

33. Evaluation Tools The Message let the developer programatically determine correctness of an interface let the developer programatically determine correctness of an interface give the developer feedback on consistency of the interface give the developer feedback on consistency of the interface allow comparison of interfaces allow comparison of interfaces

34. UI Toolkits Ease development by providing fully- fleshed out UI components Ease development by providing fully- fleshed out UI components A UI component has two major parts A UI component has two major parts The UI presentation (a button) The UI presentation (a button) The outlet (how the program is informed when the button is pressed) The outlet (how the program is informed when the button is pressed)

35. Toolkits TCL/Tk TCL/Tk Motif Motif Mac Toolbox Mac Toolbox MFC MFC Java AWT / Swing Java AWT / Swing

36. Prototyping languages Java Java Application / Applet language Application / Applet language Cross platform. Intent is that all applications act the same on all platforms Cross platform. Intent is that all applications act the same on all platforms Hypercard Hypercard Movement between Cards (screens) Movement between Cards (screens) Tcl/Tk Tcl/Tk Scripting language Scripting language

37. Toolkits and Languages The Message Toolkits provide UI widgets that can be used to develop the application Toolkits provide UI widgets that can be used to develop the application This lets the developer focus on building the application, instead of the widgets This lets the developer focus on building the application, instead of the widgets Prototyping languages allow the rapid development of prototype applications, but trade can entail trade-offs Prototyping languages allow the rapid development of prototype applications, but trade can entail trade-offs

38. Next Time GroupKit GroupKit THYME THYME