Computer Science Faculty A Research Perspective

1
Specification and Design of User Interface
Software
Presentation to CS577a University of Southern
California Dr. Barry Boehm
Steven M. Jacobs September 25, 2002
2
Biography
Steven M. Jacobs is with TRW Systems in Carson,
California. He managed a team of programmers
building e-commerce, web portals and web-based
solutions for a variety of government and
commercial customers. He is an Adjunct
Assistant Professor of Computer Science at USC
where he developed their graduate course in user
interface design. Mr. Jacobs has chaired
workshops and a panel session at ACM SIGCHI "CHI"
conferences. He is a member of the Editorial
Board of ACM Interactions magazine. He recently
participated in a Software Process Improvement
Network (SPIN) panel entitled Human Computer
Interface Design Teams Integration of Human
Factors and Software Practitioners.
3
Shape of Things to Come

Practical Lessons Learned
Theoretical Advances
Products, Tools, and Standards
Input/Output and Supporting Technologies
4
www.hcibib.org

5
www.usableweb.com

6
useit.com

7
Terminology

• Some call it Human Machine Interface, or
• - Computer Human Interaction (CHI)
• - Human Computer Interaction (HCI)
• - Man Machine Interface (MMI)
• - User System Interface (USI)
• - User Interface (UI)
• - Graphical User Interface (GUI)
• - Soldier Machine Interface (SMI)
• - Human Computer Communication (HCC)
• - Operator Interface (OI)
• - There are others

8
Definition of Human Computer Interaction
All aspects of system design that affect system
use Sid Smith

9
My Definition of Human Computer Interaction

• The development of a human beings interaction
  with a computer system (e.g. the World Wide Web)
• - Multi-disciplinary
• systems analysts
• information architects
• web designers and developers
• webmasters
• usability and human factors specialists
• graphic artists
• applied behavioral psychologists
• etc.
• - Throughout all phases of the product life-cycle
• As web designers factor in increasing new
  technology to web sites, we run the risk that the
  distraction, delays or complexity will overwhelm
  the users who use them.

10
User Interface Engineering

• Results of trends shaping the UI practice the
  software explosion, the telecommunications
  explosion, the WWW and the usability explosion.
  The challenge is to integrate UI engineering into
  the development process
• User Interface Development Phase Software
  Engineering
• User and task analysis Requirements
  Anal. Application design
• Human vs. machine Requirements Alloc. Hardware
  vs. software
• Dialogue design Preliminary design Architectural
  design
• Screen design Detailed design Logical design
• Implementation Implementation Implementation
• Usability test Implementation test Unit
  Integration Test
• Contextual observa. Systems test Systems test
• Human performance Optimization Machine
  performance

11
Traditional GUI Design
Task Analysis Standards Guidelines Experience Psyc
hology and Human Factors
Evaluation
Design
Implementation
Formal Models
Usage Data
Evaluation
12
An Overview of User Interface Development
Problems of User Interface Development Diversit
y of Users Diversity of Applications Changin
g Technology An Iterative Lifecycle Design I
mplementation Evaluation Meshed with the
Software Development Lifecycle
13
User Interface Design
Input Task Analysis Psychology and Human
Factors Principles, Guidelines, Standards,
Rules Input and Output Technology Dialogue
Types Enhanced/Adaptive Interaction Prototyp
ing Evaluation of Existing Systems Output De
sign Specification
14
User Interface Implementation
Fundamental Concepts Independence and
Reusability Ease of Use Topics Interaction
Dialogue Types Interaction Libraries Dialogu
e Control Structure Models User Interface
Management Systems User Guidance
15
User Interface Evaluation
Types of Evaluation Empirical
Evaluation Theoretical/Predictive Evaluation
Models Empirical Evaluation Measurement of
Success (Validity Reliability) - Operational
Definitions - Scales of Measurement
16
User Interface Evaluation (Contd)
Collecting Data (Experimental Design and
Sampling) - Expert Commentary, Peer/Customer
Review - Video/Audio Protocols - Survey
Questionnaires - Program Instrumentation Anal
yzing User Interface Data - Descriptive/Inferent
ial Statistics and Graphs - Evaluating
Empirical Results
17
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
18
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
19
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
20
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
21
Interactive Systems Lifecycle (Continued)
3. Design syntax and support facilities - Compar
e 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.
22
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
23
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
24
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
25
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.
26
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
27
Spiral Model of the Software Process (B. Boehm)
28
Star Life Cycle Model (R. Hartson and D. Hix)

• An iterative, evaluation-centered life cycle for
  human computer interaction development

Task/ Functional/ User Analyses
Deployment
Requirements/ Specifications
Evaluation
Software Production
Conceptual/ Formal Detailed Design
Rapid Prototyping
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
Non-web interface design

31
Non-web interface design

32
Web Site Example

33
Web Design

• There are millions and it is growing. Some are
  visited often, some to a small audience
• Purpose can be
• - ego/communication
• - education/information
• - entertainment
• - e-commerce/e-business
• - others?
• Regarding connectivity, there are the
  Internet, intranets, Virtual Private
  Networks, web portals, links for
  information, associated links, etc.
• There are documented design processes

34
Web vs. GUI Design

• In traditional GUI
• You control each pixel. Web design makes you
  give up control to meet client/server
  hardware/software needs.
• You know for what system you are designing. For
  web design, your result could appear on WebTV!
• The designer can control where the user goes and
  when. In web navigation, the user has more
  control of their navigation, and may only stay
  for a few moments!
• You are part of an enclosed experience.
  Obviously not the same for Web design!

35
Web vs. GUI Design(concluded)

• In traditional GUI
• There is consistency as how your design will
  look on the target machine. In web design, the
  system you build may and will look different
  depending on the platform, browser, etc.
• Application standards match the vendor standard.
  Web standards and style guides are an emerging
  discipline.

36
Top 10 Mistakes in Web Design (from Jakob Neilsen)

• Using frames
• Gratuitous Use of Bleeding-Edge Technology
• Scrolling Text, Marquees and Constantly
  Running Animations
• Complex URLs
• Orphan Pages
• Long Scrolling Pages
• Lack of Navigation Support
• Non-standard link colors
• Outdated Information
• Overly Long Download times

37
Southwest Airlines web page (before)

38
Southwest Airlines web page (after)

39
Graphical User Interface Development

• Types
• GUI/screen builders and scripting languages
• Data base interface
• Information visualization tools
• Human operator performance monitoring and
  analysis tools
• Graphics (2D vs. 3D, virtual reality, etc.)
• Tool suites related to Java
• Mobile HCI
• Trends
• Unix and PC tools vendors supporting multiple
  platforms
• Sometimes bundled with other products, e.g.
  Visual Basic with Access
• Different models event-driven, O-O,
  client-server, web-based
• Style guides for Windows, Mac, Java Look and
  Feel,
• Latest trend portal builders

40
Examples of GUI Development Tools

• Driven by consortia X/Open, Common Desktop
  Environment (CDE)
• Motif - most popular graphical toolkit for the X
  Window System http//motifdeveloper.com/
• PC-based VB/Visual C, Sybases PowerBuilder,
  Apples HyperCard, Netscape tools
• Others HP Interface Architech, ActivAda
  (Thomson),
• TeleUse/Aonix (previously Alsys) - full
  capability UI builder http//www.aonix.com/conten
  t/products/teleuse/teleuse.html
• Examples cited by key user organizations ACM
  Interactions Issue April 2001
• Adobe Photoshop for designing and image editing,
  Illustrator for vector based design and editing,
  Macromedia Fireworks for static layouts,
  Macromedia Flash for interactive wireframes,
  Visio, Whack Pack, Dreamweaver, Macromedia
  Director for prototyping, whiteboard rooms,
  Iconfactory IconBuilder Pro for icon production,
  Cold Fusion, Power Point, Visual Basic, HTML,
  Javascript

41
Technology for the Web

• Communications and the web
• Ureach.com listen to phonemail and email both
  by phone
• Pagetalk.com plays messages on web
• MrWakeup.com, iping.com
• Eletter.com, onebox.com for mailings
• Plug ins Shockwave.Flash, Quicktime, real
  audio/video
• Client Side computing JavaScript, VBScript,
  ActiveX
• Server side computing Active Server Pages
  (ASP), Cold Fusion, CommonGateway Interface
  (CGI), Perl/C
• HTML generators Netscape Composer, Adobe
  GoLive, Macromedia DreamWeaver, MS FrontPate 2000
• Adobe PageMill
• Microsoft Commercial Internet System (MCIS)
• Web-enabled devices and information appliances

42
Web Tools(http//webdevelopersjournal.com/softwar
e/webtools.html)

• From Web Development Journal
• The New and Cool, e.g., Photoshop, Dreamweaver,
  
• HTML Editors, e.g., Frontpage, Homesite,
• Graphics Utilities, e.g., Canoma, Freehand,
  Image Optimizer,
• FrontPage Plugins, e.g., J-Bots Plus 2000, Meta
  Tag Maker, El Scripto Lite
• Web Design Tools, e.g., Topstyle, WebSpeed
  Optimizer,
• Site Management Tools, i.e., ftp clients, site
  traffic analysis,
• Multimedia Goodies, for Mac, Unix, MP3 Search
  Clients,
• Note Some of the links on this page are to
  trial or shareware software, and some are beta.
  Most of these programs can be downloaded free,
  but after a specified period of time you must
  register and send the makers their due rewards.
  Some of the programs are free to download but,
  sadly, expire after a month or so. But this is a
  good way to try out software and see if you
  really like it.

43
Costing Issues for UI Design

• Cost modeling techniques and methodologies such
  as COCOMO permit adjusting of productivity rates
  per type of application, skill of programmer,
  tool usage, etc. Remember that many UI builders
  are really producing tool-generated code,
  whereby you manipulate objects or use high-level
  (e.g. scripting) languages to produce screens for
  systems.
• See USC course in cost estimation. Visit the USC
  Center for Software Engineering web site.
• GUIs can be easier to count according to
  www.softwaremetrics.com
• Function points can be used for UI estimation.
  Function point counting is a method of software
  size estimation (Reference International
  Function Point User Group web page,
  www.ifpug.org)
• Use case analysis (object oriented systems) can
  show the interaction between pieces of the system
  (Reference Jacobson at www.rational.com)
• US Air Force Study for Metrics for Visual
  Software Development
• appearing in Crosstalk magazine, November 1998.

44
Costing Issues for UI Design (concluded)

• Traditional cost estimation methods may not
  apply smaller teams, rapid development, short
  timeline, develop solution as quickly as possible
  following a more ad hoc process
• Estimates harder since you often use templates
  and web objects (html, applets, building blocks,
  etc.), not as much past experience captured,
  inputs from developers may be optimistic
• One method uses a proposed metric of web objects
  computing the size of a job by taking each of the
  many elements that make up the web application
  into account. These include building blocks,
  COTS components, function points, multimedia
  components, object or application points,
  query language lines, reusable components and
  visual language scripts or macros.
• The process the applies a high-medium-low
  weighting and applies these variables into the
  COCOMO cost modeling system to predict results.
• Web Development Estimating Quick-to-Market
  Software,
• paper by Don Reifer, http//www.reifer.com/downloa
  d.htm

45
CSCI 588Course Outline

• Course Introduction
• Usability
• - Designing For Web Usability
• - Human Factors related to the web
• - Information Architecture
• - Navigation
• - User Performance
• - Standards

46
CSCI 588 Course Outline (continued)

• Visual Design
• - Page Design
• - Content Design
• - Typography
• - Color
• - Icons
• - Guidelines
• - Visualization

47
CSCI 588 Course Outline (concluded)

• Site Design
• Intranets vs. Internet
• Multimedia and Animation
• Accessibility
• Internationalization
• Management issues
• Business Strategies
• Metrics
• Tools
• Evolution and technology change management
• Summary
• References

48
Key References

• Designing the User Interface Strategies for
  Effective Human-Computer Interaction, 3rd
  edition, by Ben Shneiderman
• Designing Web Usability by Jakob Nielsen
• The Visual Display of Quantitative Information,
  by Edward Tufte
• The Non-Designers Web Book (and the
  Non-Designers Design Book) by Robin Williams et
  al
• Designing Visual Interfaces by Kevin Mullet et
  al
• Web Site Usability A Designers Guide, Jared
  Spool et al
• GUI Bloopers by Jeff Johnson
• Creating Killer Web sites, 2nd edition, by David
  Siegel
• The Icon Book Visual Symbols for Computer
  Systems and Documentation, by William Horton
• useit.com, usableweb.com

49
Other Relevant References

• Web Style Guide Basic Design Principles for
  Creating Web Sites, by Patrick Lynch et al
• ACM Interactions Journal
• Designing Multimedia Web Sites by Stella
  Gassaway
• Web Design in a Nutshell by Jennifer Niederst
• WWW Marketing by Jim Sterne
• Design of Everyday Things by Don Norman
• Designing information-abundant web sites
  issues and recommendations, Ben Shneiderman,
• http//www.cs.umd.edu/hcil/members/bshneiderman/ij
  hcs/main.html
• Java Look and Feel Design Guidelines, 2nd
  Edition
• http//java.sun.com/products/jlf2/book/HIGTitle.al
  t.html
• http//www.hcibib.org
• http//www-scf.usc.edu/csci588/links.html

50
(No Transcript)