User Interface

1
User Interface Software Engineering Presentatio
n to CS577a University of Southern California Dr.
Barry Boehm By Steven M. Jacobs steve.jacobs_at_ngc.
com Part 2 of 2

2
Waterfall Model

• Waterfall of
• Systems Feasibility
• Plans and Requirements
• Product Design
• Detailed Design
• Code
• Integration
• Implementation
• Operations and Maintenance

3
Spiral Model of the Software Process (B. Boehm)
4
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
5
UI Design Methodologies
Iterative design Process for UI development
6
Usage Centered Design
Usage Centered Engineering for Web Applications
by Larry Constantine and Lucy Lockwood, IEEE
Software March/April 2002
7
(No Transcript)
8
User Interface Life Cycle Models Summary

• There is no right answerno perfect model
• Most are evaluation centered and iterative
• When to stop and when to start is not clear
• Difference require tailoring for your
  application

9
Non-web interface design

10
Non-web interface design

11
Non-web interface design

12
Mobile UI design

13
TouchTable 3
TouchTable example http//seattlepi.nwsource.com/a
udio/bishop/tabletop.wmv
Also see http//mblog.lib.umich.edu/rdivecha/arc
hives/2006/02/the_world_of_sm.html
14
Web UI Design
15
Another homepage screen from years past

16
And more recently

17
Southwest Airlines web page (before)

18
Southwest Airlines web page (after)

19
Southwest Airlines web page (today)

20
Home Page Usability (Neilsen)
Breakdown of Screen Real Estate
Detailed comments, plus review of Window Title
and Tag Line for each home page Homepage
Usability 50 Websites Deconstructed, by Jakob
Nielsen and Marie Tahir
21
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!

22
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.

23
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

24
www.webdevelopersjournal.com


25
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.
• 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

26
Costing Issues for UI Design (concluded)

• Traditional cost estimation methods my 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 then 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

27
CSCI 588Course Outline

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

28
CSCI 588 Course Outline (continued)

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

29
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

30
Key References

• Designing the User Interface Strategies for
  Effective Human-Computer Interaction, 4th edition
  by Ben Shneiderman and Katherine Plaisant
• Designing Web Usability Homepage Usability, by
  Jakob Nielsen
• The Visual Display of Quantitative Information,
  by Edward Tufte
• The Non-Designers Web Book 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
• Web Bloopers 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, hcibib.org

31
Other Relevant References

• Web Style Guide Basic Design Principles for
  Creating Web Sites, by Patrick Lynch et al
• ACM Interactions Journal
• Web Design in a Nutshell by Jennifer Niederst
• 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-scf.usc.edu/csci588/

32
(No Transcript)