Effective user interface design in software systems is a complex task that takes place without adequate modeling tools. By combining state transition diagrams and the storyboard technique of filmmakers, State Transition Storyboards were developed to provide a detailed modeling technique for the Goldstone Solar System Radar Data Acquisition System human-machine interface. Illustrations are included with a description of the modeling technique

Howard, S. D.

English

NASA Technical Reports Server

N87-" 28789
TDA ProgressReport42-90 April-June 19_;
ORIGINAL PAGE IS
OF POOR QUALITY
State Transition Storyboards: A Tool for Designing the
Goldstone Solar System Radar Data Acquisition
System User Interface Software
S. D. Howard
Communications Systems ResearchSection
Effective user interface design in software systems is a complex task that often takes
place without adequate modeling tools. By combining state transition diagrams and the
storyboard technique of filmmakers, State Transition Storyboards were developed to
provide a detailed modeling technique for the Goldstone Solar System Radar Data
Acquisition System human-machine interface. Illustrations are included with a descrip-
tion of the modeling technique.
I. Introduction
User interface design presents a unique set of problems to
software engineering. After functional specifications have
determined which parameters are to be available to the opera-
tor, human-machine interface design becomes basically a prob-
lem of presentation: having the right information, in the right
place, at the right time. The presentation is a communication,
usually complex, carefully sequenced, and often highly visual
in nature.
This would seem to imply that the user interface should be
the easiest part of a software system design to present, to com-
municate, to previsualize, and to specify. But this has not been
the case. The design of the interface is often left either to
last minute improvisation or to full prototyping. The proto-
typing strategy uses the interface itself as a model. In proto-
typing, there is no abstraction; instead, there are cycles
modifications to the full product.
These approaches fail to consider two techniques tt
have been very useful in software development-step-by-st
problem decomposition and the development of an exterl
graphical representation that abstracts important aspects
the system. Stepwise refinement and top-down design [2]
examples of problem decomposition and data flow diagra:
[3] are examples of graphical abstractions.
External representations are valuable because they m',
design reviews (walk-throughs) possible. Members of
design team can then examine and comment on the desig
adding new ideas and directing attention to oversights bef
specifications are written and the design is committed to co
94
https://ntrs.nasa.gov/search.jsp?R=19870019356 2020-03-20T10:14:16+00:00Z
ORIGINAL PAGE IS
OF POOR QUALITY
In most instances, a diagram is more easily modified than a
software prototype. The model also forms a record of the
evolution of the design as problem decomposition proceeds
from a high-level sketch to a final detailed specification.
Problem decomposition in the user interface has a differ-
ent character than successive refinement in structured pro-
gramming. For example, if the user interface is indeed another
type of human communication, the problem will decompose
into the familiar phases of communicating ideas: every inter-
face would be expected to comprise an introduction or orien-
tation, a central functional unit with no more than seven
major phases [4], and a conclusion or orderly exit. The orien-
tation might decompose into an introduction screen and a set
of "help" screens. Then the general content of each screen can
be sketched and later refined to specify string lengths and
locations.
State Transition Storyboards.were created to provide the
Goidstone Solar System Radar (GSSR) Data Acquisition
software design team with a modeling tool for developing and
,,_ .u,+.a,,-,,,+a,..,,.l,,+_ ,.L_lI,_c. The <._h_;_,oe++-y,-g h ....... _';"° ;"+_¢"" +_11,.,tue com-
prises two ideas. The Yourdon methodology [3] recommends
thinking of the user interface as a finite state machine; state
transition diagrams describe transitions triggered by user
actions. Software designer Paul Heekel [5] describes the crea-
tion of a user interface as a communications craft and recom-
mends the storyboarding technique of filmmaking for describ-
ing the appearance of theuser interface in a sequential manner.
Combining these ideas allows a graphical abstraction of the
interface presentation as it responds to the operator.
II. Description
State Transition Storyboards are directed graphs composed
of nodes, edges, and edge labels. The shape and content of a
node abstracts the screen presentation. Edges indicate the
allowable transitions that may take place from that state to
other states. Edge labels carry two types of information:
(1) the action that causes a transition is summarized above a
horizontal line and (2) the steps that effect the transition can
be listed below the line. These diagrams are visual in nature,
like much of the user interface itself. Figure 1 is given as an
illustration.
Transitions can return immediately to the same state. For
example, pressing an arrow key on a terminal keyboard might
cause a "control G" (bell) and a return to the same screen
state. Symbols or icons can be used to represent states that are
accessed by many transitions and are therefore graphically
difficult to connect. As an example, "help" or information
screens are usually accessible from many states. A small
labeled screen adjacent to a normal node is used in the man-
ner of an "off-page connector" to indicate that transitions
can occur between these states. Figure 2 illustrates these
situations.
IIh Summary
State Transition Storyboards allow a software designer
to sketch and revise interface design ideas quickly to the
level of specificity required by the design at that moment.
Then, given any state as a precondition and a user action or
system update, the postcondition can be determined immedi-
ately. Information contained in these diagrams can be easily
converted to state transition tables in software for accurate
final prototyping. The GSSR Data Acquisition software team
is currently exploring extensions to this idea. A draft version
of the Goldstone Solar System Radar Data Acquisition System
User Interface plans, using the State Transition Storyboard
technique, is given in Fig. 3. (The GSSR Data Acquisition
System is described in TDA Progress Report 42-77 [1 ] .)
95
References
[1] L.J. Deutsch, R. F. Jurgens, and S. S. Brokl, "Goldstone R/D High Speed Data
Acquisition System," TDA Progress Report 42-77, vol. January-March 1984, pp.
87-96, Jet Propulsion Laboratory, Pasadena, California, May 15, 1984.
[2] S. Alagic and M. A. Arbib, The Design of Well-Structured and Correct Programs.
New York, New York : Springer-Verlag, 1978.
[3] P.T. Ward and S.J. Mellor, Structured Development for Real-Time Systems.
New York, New York: Yourdon Press, 1985.
[4] G.A. Miller, "The Magical Number Seven Plus or Minus Two: Some Limits on Our
Capacity for Processing Information," Psychological Review, vol. 63, no. 2, pp.
81-97, 1956.
[5] P. Heckel, The Elements of Friendly Software Design. New York, New York:
Warner Books, Inc., 1984.
96
STATE 1
DESCRIPTION
ACTION 1
ACTION 2 PROCEDURE i
PROCEDURE PROCEDURE j
PROCEDURE
_E2 ]RIPTION
Fig. 1. Basic diagram elements:
edges, nodes, and edge labels
_.:_u),_;_L PAGE IS
OF POOR QUAUTY
"CR'
'?" I
QI
L..l-''SELECTMONITORPHASE 1
PRESS '1"
REMOVE
'SELECT 1'
DISPLAY
'INST. 1'
MONITOR SCREEN
INSTRUMENT 1
PRESS 'CR'
REMOVE
'INST. 1'
DISPLAY
'SELECT 2'
PRESS "2'
REMOVE
'SELECT 1'
DISPLAY
'1NST. 2'
!
< TIME >
MONITOR SCREEN
INSTRUMENT 2
NEXT SEC.
UPDATE
TIME
LABEL
PRESS 'CF
REMOVE
'INST..n
DISPLAY
'SELECT 2'
SELECT
,_. _ p_O_;_OR
'CR'
PRESS '3'
REMOVE
'SELECT 1'
DISPLAY
'INST. 3'
MONITOR SCREEN
INSTRUMENT3
PRESS 'CR'
REMOVE
"INST. 3'
DISPLAY
'SELECT 2'
Fig. 2. Special diagramming situations
97
HSDAS >
'RUNG$$R'
ACTIVATE IMAGE
DISPLAY INTRODUCTION
GOLDSTONE ... RADAR
DATA ... SYSTEM
WELCOME ...
PRESS 'CR' TO CONTINUE •
< CONTROL KEY LIST>
I
I R-R-E-M_E 'CONFIRM' I I DTs-P_Y 'CONFIRM'
I REOUESTORI t REOUESTOR
II I I _O_DSTONE...RADARI
HOWTO USETHE SYSTEM | I DATA... SYSTEM I
I I WELCOME... I
iiPRESS'CR'TOCONT,NUE"II I I I<CONFIRM1
!
'C' KEY I 'RETURN' KEY "RETURN' KEY
.... I
| I GOLDSTONE ... RADAR
I I <SUMMAF!>I I DATA ... SYSTEM
I HOW I_ '7'_ I
I"S_AS> .
I
I TOUSEI- I CONFIGURETOOBSERvE
t
'RETURN' I
• I- MERCURY I
I 'x--c°METS I I o
I < CONTROL KEY LIST> I t--
! I _ CONF,RM,I
I1 .c.,EX,T,
©
Fig. 3. Goldstone Solar System Radar Data Acquisition System User Interface (draft)
98
ORIGINAL PAGE IS
OF POOR QUALITY
<>
I HOW TOUSE
I HOW TOUSE
I HOW TOUSE
RETURNTOLASTS :E__][NOWTOi_ D,SPLAYANDACT,VATECONTROLPANE,
I °SE I-
i CONEIGURETO BSERVE
I
L VENUS
I VEN3SlL:... I
IIIVEN,3S2L.... III.
II VEN3S4L: ""1 CONFIRM: Jl I
Q
,o, 1],o ,
SC'R'OLL MENU DOWN SCROLL MENU DOWNJ  FTOOL;TI  BOTTOMOF T
Ic°_'°U_ETOO_S_V_I
- Ili--MARS
-[ iv__
ml v,-2 i • I
/ _C--"_'_ROLKEY LIST>
J I . CONF,RM,
I_×'T J
< RETURN TO LAST STATE > < 'SELECT' >
DISPLAY BLANK SCREEN IN TOP 1/2
J REVERSE VIDEO SELECTED MENU ITEM
I- DISPLAY AND ACTIVATE SUB-MENU
I ?°."?'_URETO BSERVEI
• I v:,,,u_ I[I'VEN   L....4 IVEN3S2L: ...
< CONTROL KEY LIST >
i. MOVE_E_UTN'ILMO_MENUU_I
• CONFIGURETOOBSERVE [I
• VENUS
IIIvEN3S".... I .
,iIVEN3SOL.... I
I < CONTROL KEY LIST >
I ICONF'RM,IJL EXIT
< SELECT >
I
i I CONFIRM,EXIT !
Fig. 3 (contd)
99
I USI
_< CONFIRMED >
REMOVE ALL CONFIG. MENU SCREENS
DISPLAY STATUS WINDOW
DISPLAY COMMAND WINDOW
DISPLAY MENU LINE
NEW STATUSINFO.
DISPLAY STATUS LINE
SCROLL WHEN READY
SYSTEM STAT. TIME
BUILDING ..,READY.
STOP
INITIALIZE
< CONTROL KEY LIST
HOW TO IiUSE
I ,
'READY' STATUS
COMMAND WINDOW ACTIVE
I
"1[-;c_Y_ISYSTEMRUNN,NG---T'ME]L
I INITIALIZE
/ < CONTROL KEY LIST >I '
t CONFIRM, I' EXIT
I
__1I CONFIRM,ExIT I
Q
Fig. 3 (contd)
100
ORIGINAl- PAGE IS
OF POOR QUALITY
()
HOW TO
USE
< CONFIRMED >
i ]HOW TOUSE iI .
1t
I co_PIRM,IEXIT J
SCROLL UP MENU
Q
SCROLL DOWN MENU
SYSTEM TIME < CONFIRMED >
READY DISPLAY NEW STATUS
REMOVE CONFIRM
SCREEN "
VEN3SL CONFIG.
STOP J
CONFIRM.
• INIT EXIT
< CONTROL KEY LIST>
| .1 1 i , i '< COMMAND >I _'CONFI RM' DISPLAY PROCESSES I mse_CON IRM< CANCEL > < CANCEL >
RI:MCIVF '_('3NFIRM' RFMNVF PRcir'I:(_F¢: . ^. _,_,
I ......1 ..... I ....i ........... . I.........
I H°WT°i IUSE II1 1
sYSTEMT,MEIIsYSTEMT,ME1
_o_-STOP_D-I co_,o_P.OC.S_SI
I DISPLAY
,,'1 1I
SYSTEM TIME I
I
<CONFIG><COMMANDS> I
I CONFIRM,I
I EXIT I
(>
MOVE CURSOR UP
MENU
-3
SYSTEM
• DISPLAY
RECORD
CODER
PAUSEtCON_'RM:"ll
i
HOW TO L
USE l-
L_
t!
CONFIRM. IEXIT
MOVE CURSOR DOWN
MENU
I_x°,",_'_l_'_ I 1
TIME I
-(
J
Fig. 3 (contd)
b
101
HOW TO ]USE
< SELECT PROCESS >
STATUS TIME
_ CONFIRM,i EXIT
L
VENUS CODER
• FREQUENCY
OPT. 1
OPT. 2
I HOW TOUSE
I
J
I
HOW TO I
USE I
I HOW TO IUSE J
SCROLL UP MENU S"CROLL DOWN MENU
I
VENUS CODER
• FREQUENCY
OPT. 1
OPT. 2
 CANCEL II SELEOTOPT'ON '
• ] STATUS TIME 1
CANCL1IDONE
I I
.t_T_U_ _M_!
v_o_COD_._O
_._MnI_ONF,.MI].
: i CONFIRM,EXITJ
I
< CONFIRMED >
NEW STATUS
L
C_
< NOT CONFIRMED >
CONFIRM, ]EXIT
NOCHANGEIN
STATUS
Fig. 3 (contd)
102


State transition storyboards: A tool for designing the Goldstone solar system radar data acquisition system user interface software

Abstract

Similar works

Full text

Available Versions

NASA Technical Reports Server