Specification and Design of

User Interface Software

Presentation to
CS577a
University of Southern California
Dr. Barry Boehm

Steven M. Jacobs
September 20, 2000

1
Biography
Steven M. Jacobs
M.S.C.S. from UCLA, B.A. in Math from Monmouth University (N.J.)
Steven M. Jacobs is an Engineering Center Manager at TRW Systems &
Information Technology Group in Carson, California. Prior to this role, he
was Director of Software Development at Beckman Instruments, developing
computerized clinical systems. Prior to joining Beckman, Mr. Jacobs
managed the Human Machine Interface (HMI) Systems Department at TRW
in Redondo Beach, California. He managed a group of engineers developing
user interface and applications software for various government
applications. Mr. Jacobs has chaired two workshops and a panel session
at ACM SIGCHI “CHI” conferences. He has been a lecturer at both the USC
Department of Computer Science and UCLA Extension developing courses
in user interface design. He is a member of the Editorial Board of ACM
Interactions magazine. He has authored over 20 publications on software
engineering and user interface related topics.

Steven M. Jacobs
TRW M/S DH6/2774
1800 Glenn Curtiss Street
Carson, CA 90746
Voice: (310) 764.3400 2
steve.jacobs@trw.com
User Interface Software Development

Practical
Theoretical
Lessons
Advances
Learned

Products,
Tools, and
Standards

3
Terminology

• You Can Call It Human Machine Interface (HMI)

• Or:
- MMI (Man Machine Interface)
- CHI (Computer Human Interaction)
- HCI (Human Computer Interaction)
- USI (User System Interface)
- UI (User Interface)
- SMI (Soldier Machine Interface)
- HCC (Human Computer Communication)
- OI (Operator Interface)

4
Definition of Human
Machine Interface

“All aspects of system design

that affect system use”
S. Smith

5
My Definition of
Human Machine Interface

The Development of a Human Being’s Interaction with a Computer System

• Multi-Disciplinary
- Systems Engineering
- System Architecture
- HMI Software Design and Development
- Human Factors Engineering
- Cognitive Science
- Artificial Intelligence
- Others, e.g. Expert HMI
• Multi-Phase (All Phases of the software life-cycle)
- Proposal
- Requirement
- Design
- Code
- Integrate and Test
- Install and Train
- Operate and Maintain
6
Problem Statement
• The role of the human in HMI is shifting from doing a
specific task to monitoring, analysis, decision support
and directing

As designers strive to build

more powerful hardware and
software systems, the risk is
that the complexity will
overwhelm the humans who
use them.
IEEE Spectrum

7
Problems with User Interfaces
• User Interface accounts for a large portion of life-
cycle costs
- application algorithms - 40%
- dialogue management - 40%
- presentation - 20%
• UI development is extremely labor intensive
• UI’s require frequent and extensive modifications
due to not understanding all interactions until
the system is completely developed
• Modifications to UI are difficult to make when the
UI and the application are tightly interwoven
• Difficult to take advantage of new I/O
technologies if they do not match the current
model
8
Motivation for Increased Interest
in Human Computer Interaction
• Use of computers in life critical systems
- Intensive care/operating room
- Reactor/air traffic control/utilities
- Police/fire dispatching
• Need for high volume commercial systems
- Banking/insurance/reservations/credit card
- Inventory control/sales/billing
• Use by a diverse population with limited training
- Office automation and word processing
- Home/personal/educational computing
• Opportunity to enhance human intellect
- Programmer/artist workstation
- Decision support/expert systems
- Information retrieval
- Simulations
9
 Reducing UI Problems
• Separate concern of user interface specification and
execution from rest of system concerns
- separate the algorithmic portion of a system from
the interactive portion
- allow for independent development of the
application and UI
• Provide an integrated set of tools which support
incremental specification and execution of the
interface
• Use a good UI design process

10
An Overview of User
Interface Development
Problems of User Interface Development
• Diversity of Users
• Diversity of Applications
• Changing Technology
An Iterative Lifecycle
• Design
• Implementation
• Evaluation
Meshed with the Software Development Lifecycle

11
User Interface Development Process
Task Analysis
Standards
Guidelines
Evaluation
Experience
Psychology and Human Factors

Design

Formal Models Implementation

Evaluation Usage Data

12
User Interface Design

Input
• Task Analysis
• Psychology and Human Factors
• Principles, Guidelines, Standards, Rules
• Input and Output Technology
• Dialogue Types
• Enhanced/Adaptive Interaction
• Prototyping
• Evaluation of Existing Systems
Output
• Design Specification

13
User Interface Implementation

Fundamental Concepts
• Independence and Reusability
• Ease of Use
Topics
• Interaction Dialogue Types
• Interaction Libraries
• Dialogue Control Structure Models
• User Interface Management Systems
• User Guidance

14
User Interface Evaluation

Types of Evaluation
• Empirical Evaluation
• Theoretical/Predictive Evaluation Models
Empirical Evaluation
• Measurement of Success (Validity & Reliability)
- Operational Definitions
- Scales of Measurement

15
 User Interface Evaluation (Cont’d)

• Collecting Data (Experimental Design and Sampling)

- Expert Commentary, Peer/Customer Review
- Video/Audio Protocols
- Survey Questionnaires
- Program Instrumentation

• Analyzing User Interface Data

- Descriptive/Inferential Statistics and Graphs
- Evaluating Empirical Results

16
Key User Interface Concepts

• Mental/Conceptual Models
• Efficient Access to Resources
• Need for Evaluation
• Iterative Design Cycle
• Design/Implementation Tradeoffs
• Levels of User Knowledge/Experience
• Application/Device Independent Tools
• Consistency

17
Interactive Systems Lifecycle (Shneiderman)

1. Collect Information
2. Define Requirements and Semantics
3. Design Syntax and Support Facilities
4. Specify Physical Devices
5. Develop Software
6. Integrate System and Disseminate to Users
7. Nurture the User Community
8. Prepare Evolutionary Plan
Participatory Design and Evolutionary
Refinement Based on User Feedback

18
Interactive Systems Lifecycle
1. Collect Information
- Organize the design team
- Obtain management and customer participation
- Conduct interviews with users
- Submit written questionnaires to users
- Perform detailed task and task frequency analysis
- Read professional and academic literature
- Speak with designers and users of similar systems
- Estimate development, training, usage, & maintenance costs
- Prepare a schedule with observable milestones and reviews
- Design the testing strategy
19
 Interactive Systems Lifecycle (Continued)

2. Define requirements and semantics

- Define high-level goals and middle-level requirements
- Consider task flow sequencing alternatives
- Organize tasks into transaction units
- Create task objects and actions
- Create computer objects and actions
- Determine reliability and availability needs
- Specify security, privacy, and integrity constraints
- Create guidelines document
- Obtain management and customer agreement on goals,
requirements, and semantic design

20
Interactive Systems Lifecycle (Continued)

3. Design syntax and support facilities

- Compare alternative display formats
- Create syntax for operations
- Design informative feedback for each operation
- Develop error diagnostics
- Specify system response times and display rates
- Plan user aids, help facilities, and tutorials
- Write user and reference manuals
- Review, evaluate, and revise design specifications
- Carry out paper-and-pencil pilot tests or field studies with
an online mock-up or prototype.

21
Interactive Systems Lifecycle (Continued)

4. Specify physical devices

- Choose hard- or softcopy devices
- Specify keyboard layout
- Select audio, graphics, or peripheral devices
- Establish requirements for communications lines
- Consider work environment noise, lighting, table space, etc.
- Carry out further pilot tests and revise design

22
Interactive Systems Lifecycle (Continued)

5. Develop software
- Use dialog management tools where available
- Produce top-down modular design
- Emphasize modifiability and maintainability
- Ensure reliability and security’
- Enable user and system performance monitoring
- Provide adequate system documentation
- Conduct thorough software test with realistic usage load

23
Interactive Systems Lifecycle (Continued)

6. Integrate system and disseminate to users

- Assure user involvement at every stage
- Conduct acceptance tests and fine tune the system
- Field test printed manuals, online help, and tutorials
- Implement a training subsystem or simulator
- Provide adequate training and consultation for users
- Follow phased approach to dissemination and provide time
and resources to make modest revisions in response to user
feedback

24
Interactive Systems Lifecycle (Continued)

7. Nurture the user community

- Provide on-site or telephone consultants
- Offer on-line consultant
- Develop on line suggestion box
- Perform interviews with users
- Make user news and bulletin board available on-line
- Publish newsletter for users
- Organize group meetings
- Respond to user suggestions for improvements
- Conduct subjective and objective evaluations of the current
system and proposed improvements.
- Monitor usage frequencies and patterns
- Track user error frequencies.
25
Interactive Systems Lifecycle (Concluded)

8. Prepare evolutionary plan

- Design for easy repair and refinement
- Measure user performance regularly
- Improve error handling
- Carry out experiments to assess suggested changes
- Sample feedback from users by questionnaires and
interviews
- Schedule revisions regularly and inform users in advance

26
Spiral Model of the Software Process (B. Boehm)

27
Star Life Cycle Model (R. Hartson and D. Hix)

• An iterative, evaluation-centered life cycle for human

computer interaction development

Task/
Functional/
User Analyses

Requirements/
Deployment
Specifications
Evaluation

Software Conceptual/
Production Formal Detailed
Design
Rapid
Prototyping

28
User Interface Engineering
• UI engineering is the result of trends shaping the UI practice: the software
explosion, the communications explosion, the media explosion, the usability
explosion. The challenge is to integrate user interface engineering process
within the development process:
User Interface Development Phase Software Engineering
User & task analysis Requirements Analysis Application Design
Human vs. machine Requirements Allocation Hardware vs. Software
Dialogue design Preliminary Design Architectural Design
Screen design Detailed Design Logical Design
Coding Implementation Coding
Usability Lab Implementation Testing Unit & Integration Testing
Contextual Observance System Testing System Testing
Human Performance Optimization Machine Performance

29
User Interface Life Cycle Models
• There are a number of user interface engineering life-cycle models
• No right answer/no perfect model
• Whether you follow Shneiderman model, user interface engineering, user
interface development as part of the Spiral Model, etc., there is no right
answer how to integrate the user interface development into the software
development life-cycle
• Most user interface development methodologies are evaluation
centered and iterative
• When to stop and when to start is unclear
• Differences require tailoring for your application

30
Internet User Interfaces
• Web site design is only part of the Internet picture (Intranet
technologies)
• There are many separate courses and books on web site design, e.g.
“Designing Large Scale Web Sites”, by D. Sano,
“Creating Killer Web Sites”, by David Siegel,
“Web Weaving”, by C. Steadman, et al.
• There are web site bulletin board forums for people to compare.
e.g. http://www.highfive.com
http://www.killersites.com
• One forum evaluates site design by degree of difficulty, execution and
esthetics. Determining website usability, examining style and design
maturity, etc. is growing., e.g. http://useableweb.com
• Some have usability tested and spent significant effort creating a web
site style. They developed a web site style guide and enforce it, e.g. as
Sun did:
http://www.sun.com/sun-on-net/uidesign

• There are many other style guides, e.g.

http://www.cs.cmu.edu/~tilt/cgh/
http://www.w3.org/hypertext/WWW/Style/
31
Internet User Interfaces (Cont’d)

• Need to understand supporting graphics and rendering

technologies
• Need to understand multimedia impact on UI
• Need to usability test web site design as you do any UI
• Web site design is more than composing good HTML, although
that is important. An HTML Author’s Board site has good
HTML style suggestions.
• There is lots of material on good HTML, Java (de facto Internet
standard) writing, etc.
• Interactions paper on Heuristic Evaluation of a WWW prototype
by J. Nielsen of Sun.
• Growing corporate interest in intranets and related technology

32
Internet User Interfaces (Cont’d)
Here are some web site guidelines:
• Site tourists: you cannot control the user
• Loyal visitors: you almost want to say “Please bookmark me”
• Avoid frames
• People will not “hang around” if they see the site is not maintained
current. Web users are impatient.
• Reduce scrolling, especially at the home page
• Avoid animation unless it has a purpose, like showing how a games is
played.
• Do not design it for VPs or to match the organization. The
“information architecture” should mirror the user tasks. There should
be a strong, consistent web design within a company’s web pages.
• A site needs to make clear what it is supposed to do and how it is
organized.
• Always have “search” on web page.
• Don’t match other media, e.g. brochures, TV ad, and push that onto
the web page. Do the web first.
33
Internet User Interfaces (Cont’d)

• Link wisely, not everything. Also, don’t just say “click here”
without a highlight or reference.
• Tell people where you are. Provide navigation buttons and/or
site maps.
• On-line survey & forms need smooth interaction, “clear” button,
easy to back up and correct, pull down choices, etc.
• Strong metaphor can be “over cute”, e.g. graphic of SW Airlines
reservation desk on web page
• Spend a moment on URL design

Reference: Jakob Nielsen, Sun Microsystems,

http://www.useit.com

34
Multimedia UI Guidance
• Multimedia is non-linear, not best for all UI situations
• It, too, requires a disciplined approach, using storyboarding &
prototyping of still images, full motion, voice I/O; integration with
pointing devices (data glove, eye tracker, mouse, etc.)
• Benefits:
• A document with video, audio, text and graphics to enhance
interest and attention, e.g. encyclopedia
• Used with other applications, e.g. “you are here” kiosk at the
shopping mall, electronic scoreboards, GroupWare (collaborative
computing, also called computer supported cooperative work)
• Not for:
• Traditional novels, motion pictures, etc. where the emphasis or
tempo of what is presented is disrupted
• Concise documents
• Equipment availability issue
• Critical instructions, e.g. paper documentation describing 35
how to fix your multimedia computer
Graphical User Interface Development
Trends and Tools
• PC tools
– Bundled with other products, e.g. Visual Basic with Access
– Data base interface (open data base connectivity)
– Event-driven, object-oriented, client-server, web-based
– Examples: VB/Visual C++, Powersoft’s Power Builder, Apple’s
HyperCard, Netscape tools
• X-Windows & Unix workstation tools
– Driven by consortia: X/Open, MOTIF, Common Desktop Environment
(CDE)
– Examples: HP UIM/X, Aonix (Alsys/Thompson/ Telesoft) TeleUse user
interface management systems and tools such as Builder Xcessory

36
Graphical User Interface Development
Trends and Tools (concluded)
• Multiple platforms
– Java and tool suites related to Java
– Many of the tools vendors are porting their tools to various
platforms
• Miscellaneous GUI tools
– Tcl/Tk, GUI/screen builders and scripting languages
– Information visualization tools
– Human operator performance monitoring and analysis tools
– Graphics (2D vs. 3D, VRML, etc.)
– Brad Myers from Carnegie Mellon has an excellent on-line list of
GUI tools:
http://www.cs.cmu.edu/afs/cs/user/bam/www/toolnames.html

37
 CHI ‘98
Annual Conference for the
ACM Special Interest Group
on
Computer Human Interaction

38
Why CHI?
•CHI is “not just any” computer conference
- They have a conscience
- They are a multi-disciplinary community:
* computer scientists
* software engineers
* webmasters
* applied behavioral psychologists
* human factors people
* graphics designers
* usability engineers
* systems engineers
* educators/trainers
* application domain experts needing help building a good
HCI, e.g., health professionals
- Very international
39
How CHI ‘98 was Structured
• Parallel Tracks of
- Tutorials
- Workshops
- Papers/panels
- Poster presentations
- Exhibits
- Demonstrations
- Special interest groups
- Proceedings
- Video
• Opening/closing plenary (all hands) sessions
40
CHI Conscience

• From the opening and closing plenaries

- CHI community has a responsibility to make
computers more “usable”
- It is our responsibility as computing
professionals to not alienate (with bad UI
design) end users.
- Rather, we should empower them and make
the computer a tool and assistant for their
work
• Develop usable, user-tailored systems that
improve quality of life

41
CHI Conscience (concluded)
Examples
• Front-ends to large databases (e.g., Library of
Congress Web Page) that aid (speed) the
researcher in finding what they are looking for
• Medical information systems that aid the health
professional and administrative support
functions to improve patient care
• Providing computer access for the physically
challenged with the use of new I/O technologies
• Purple Moon (video software for 8-12 year old
girls)
• Persuasion session (role UI plays in
“influencing”)
42
• CHI kids (CHI ‘98 is family friendly)
Tutorials
• Web design and Usability
* Jakob Nielsen, Sun’s Chief Engineer of UI
* Web design not equal to UI design
* Provided examples of web pages that work and
don’t work
* Intranets
* Navigation schemes
• Information Visualization
- Ben Shneiderman, U. of Maryland’s HCI research
laboratory
* Provided methods and examples for graphically
depicting information architectures (databases)
and provided visual, data mining technologies to
structure screens to help searches
43
Tutorials (concluded)
• Use of Java in UI design
- Three Java professionals (users) not from
Sun or related vendor
- They founded a Java Competency Center in
Europe to focus and share Java experience
as the language evolves
- Provided frank, honest assessment of the
state of Java development
- Provided examples of things that could be
done with Java

44
Exhibits

• Publishers
• Related societies, e.g., Computer Support
Cooperative Work (GroupWare), Intelligent UI
(IUI ‘99 was in Redondo Beach)
• Usability consultants who perform usability
studies or train your team how to do so.
Usability is the scientific experimentation by a
system developer to measure the ease of use of
an end-user performing their tasks. It is also
used to “road test” a product and obtain
market feedback.

45
Conference Thrusts

• Internet/web usage/design (technical and

social issues)
• Medical systems
• Entertainment business
• 2D and 3D, graphics applications
• “Baby face” UI (smaller than Palm Pilot)
• Virtual reality
• Collaborative work
• I/O technologies and applications
• Education
• History (e.g., inventor of “mouse”)
46
Conclusion

• There is a lot of stuff “out there” (e.g., on the

web) to help us build our systems better
• Check out Interactions Magazine from ACM
• See me for questions related to HCI

47
URL’s
Jakob Neilsen’s web site (Sun Microsystems)
http://www.useit.com
Keith Instone’s web site
http://www.usableweb.com
On-line HCI bibliography project (Gary Perlman - Ohio State)
http://www.hcibib.org/
Brad Myers’ HCI links (Carnegie Mellon University)
http://pecan.srv.cs.cmu.edu/afs/cs/user/hcii/www
/links.html
Ben Shneiderman’s Human Computer Interaction Lab
(U. of Maryland)
http://www.cs.umd.edu/projects/hcil/
CSCI 588 Web Page
http://www-scf.usc.edu/~csci588
48