Software Tools

1
Software Tools

• Fall 2002

2
Outline

• Introduction
• Specification Methods
• Interface Building Tools
• Toolkits and Languages
• Evaluation Tools

3
Introduction

• Building interfaces that are usable by a wide
  audience is hard
• ethnography
• participatory design
• UI architects need to simply and quickly sketch a
  proposed interface
• 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 being able to unambiguously describe a UI and
  its transitions, the UI can be discussed and
  modeled

5
Specification Methods

• Natural Language Specifications
• Ambiguous
• Easy
• Formal Specifications
• Unambiguous
• Defined grammar
• Ability to prove a specification is a valid
  construct within the grammar

6
Specification Methods

• Grammars
• Menu Trees
• Transition Diagrams
• State Charts

7
BNF

• Backus-Naur Form
• ltnon-terminalgt ltnon-terminalsgt terminals
• i.e., a telephone number is represented by
• tel-num (ltarea-codegt) ltexchangegt-ltlocal-number
  gt
• area-code ltdigitgtltdigitgtltdigitgt
• exchange ltdigitgtltdigitgtltdigitgt
• local-number ltdigitgtltdigitgtltdigitgtltdigitgt
• digit 0123456789

8
BNF

• Incomplete
• 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.
• Complex
• As a BNF grammar grows, it becomes very complex
  and difficult to follow or change

9
Unix Command Structure

• Variant of BNF
• All capital letters is a non-terminal
• Non-terminal format is assumed
• Brackets denote optional arguments
• Ellipsis () denote -or-more
• OPTION is 0 or more (Kleene closure or
  -closure)
• SOURCE is 1 or more (-closure)

10
cp

• From a Debian 3.0r0 machine
• cp OPTION... SOURCE DEST
• cp OPTION... SOURCE... DIRECTORY
• cp OPTION... --target directoryDIRECTORY
  SOURCE

11
Other Variant Grammars

• 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
• lt?xml version1.0?gt
• ltsystem spec-file-version2.0gt
• ltinit classsome.init.InitComponent/gt
• ltparametersgt
• ltparameter nametcc.init.classid
  valuesome.room.RoomComponent/gt
• lt/parametersgt
• lt/systemgt

13
Multiparty Grammars

• 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)
• Effective for text-oriented command sequences
  which have repeated exchanges

14
Multiparty Grammars

• Example
• ltSessiongt ltU Openinggt ltC Respondinggt
• ltU Openinggt LOGIN ltU Namegt
• ltU Namegt ltU stringgt
• ltC Respondinggt HELLO ltU Namegt

15
Selection Trees

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

16
Transition Diagrams

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

17
State Charts

• Harel, 1988
• 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
• 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
• Grammars and State diagrams fail to deal with
  direct manipulation interfaces
• A users intended action depends on context
• Context can change quickly during runtime
• UAN is a high-level notation that focus a users
  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

20
UAN

• is the cursor. M is the mouse
• object is cursor movement to the specified
  object (i.e., icon)
• object gt means move the object to the cursor
• Mv is press the mouse button
• M is release the mouse button
• object! is highlight the object
• object!! is dehighlight the object

21
Specification MethodsThe Message

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

22
Interface Building Tools

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

23
Interface Building Tools

• Let an interface be prototyped rapidly
• Let an interface be built by a non-programmer
• Allow the application to be built using the
  prototyped interface

24
Interface Building Tools

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

25
Interface Building Tools

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

26
Design Tools

• Slide Show
• paper and pen, PowerPoint, etc
• Visual editing tools
• HyperCard, Visual Basic, Delphi, etc
• Visual programming tools
• Prograph, LEGO Mindstorms

27
Interface Building ToolsInterface Builder

• Free tool included with MacOSX for building user
  interfaces

28
Building InterfacesThe Message

• Tools let prototype mostly functional interfaces
  quickly and cheaply
• 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
• 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
• Warning signs
• automated analysis of where a UI might be
  inconsistent or violating a standard

30
Evaluation Tools

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

31
Evaluation Tools

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

32
Evaluation Tools

• Web pages
• Validation
• Link checking
• Correctness
• Unit (JUnit, NUnit, etc)
• defined testing of applications (regression
  testing)
• Cactus
• defined testing of UIs (regression testing of
  user interfaces)

33
Evaluation ToolsThe Message

• let the developer programatically determine
  correctness of an interface
• give the developer feedback on consistency of the
  interface
• allow comparison of interfaces

34
UI Toolkits

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

35
Toolkits

• TCL/Tk
• Motif
• Mac Toolbox
• MFC
• Java AWT / Swing

36
Prototyping languages

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

37
Toolkits and LanguagesThe Message

• 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
• Prototyping languages allow the rapid development
  of prototype applications, but trade can entail
  trade-offs

38
Next Time

• GroupKit
• THYME