Areas of Difficulty Requiring Help or Assistance in the Ejs User Interface The following describes the basic Ejs UI behavior and areas needing help. It is necessary to understand a bit about the Ejs UI in order to comprehend some of the learning issues users experience. This file lists all the Ejs UI elements (some 120) and assigns an ID code to each as given below. The Ejs UI is organized into four major pieces: 1. Menus of fairly simple functionality (File, Run, Font, and Help) (The Help menu is not currently implemented except for an About item.) 2. Control icon list which simply provides single-click short-cuts to menu equivalents. 3. Main UI (see description below). 4. One or more separate windows which show the UI of the current simulation. Main User Interface The Main UI occupies the great bulk of the program's main window and is organized into four main Tabs (Model, Control,, and Connections). Each of these Tabs has a number of sub-tabs (STabs) as listed below. (As a convention, "Tab" (capitalized) refers to the major tab headings, and "STab" to a sub-tab.) Each STab has its own particular UI (i.e., buttons, sub-sub-tabs, working area, sliders, etc.). The differences between STab UI's is sometimes very subtle and sometimes very obvious. The four main Tabs are always visible and selectable. However, STabs (and their particular UI) are only visible when the associated Tab is selected. In particular, each STab has its own set of buttons; selecting one or another button can change the set of panels and other UI elements displayed for the STab. Ejs UI Organization - 1-7/24/00
Criticalness and Difficulty of Ejs User Interface Features Based upon our user studies, we generated the following table to characterize the difficulty of learning various Ejs UI features. The tables below lists, for each UI feature, how critical the feature is to creating a basic simulation, and how difficult we felt it was to learn to use the feature. Features are rated 1-5 for criticality (1=absolutely essential, 5=irrelevant), and 1-5 for Learning Difficulty (1=very difficult, 5=very easy). Codes: Each UI feature has been assigned a code as follows: Single numbers indicate a Tab (i.e., 1=Model, 2=Control, 3=, 4=Connections); Capital letters indicate a STab within the Tab (i.e., 1A=Variables, 2A=Initialization, etc.) Succeeding digits and lower case letters indicate buttons and other user interface elements. A name in italics indicates the name has been repeated from earlier in the table for clarity. Crit = Criticalness relative to accomplishing a basic simulation (1=critical, 5=not relevant) Diff = Difficulty to figuring out or gaining access to (1=basically impossible without outside help, 5=very easy) Wt = Weight of importance (Criticalness X Difficulty - lower numbers are bad). Other ID Crit Diff Wt Tab STab Buttons Panels UI Elements Notes 1 1 5 10 Model 1A 1 4 8 Model Variables Create a table of indep. vars & params used in Model 1A1 1 4 8 Add Table Creates new Variables Table panel 1A1a 1-10 Variables Table Panel Table for entering Model's Java variables 1A1b 2 3 8 Variable name, Type, Dim 1, Dim 2, Value, Internal checkbox 1A1c 5 3 40 Var Tbl Tabs One created for each new Variable Table 1A2 5 3 40 Rename to Allows current Variable Table to be renamed. 1A3 5 5 100 Left Select Variables Table to left of cur one 1A4 5 5 100 Right Select Variables Table to right of cur one 1A5 5 1 10 Remove Delete current Variable Table 1B 4 4 64 Model Initialization 1B1 5 4 80 Add Page Creates a panel for entering Java initialization code 1B1a 5 4 80 Code Panel Text area for Java initialization code 1B2 5 4 80 Rename to Renames current initialization code page 1B3 5 4 80 Left Select Code Page to left of cur one 1B4 5 4 80 Right Select Code Page to right of cur one 1B5 5 4 80 Remove Delete current Code Page 1C 1 5 10 Model Evolution 1C1 5 1 10 Add Code Adds page of code executed during Evolution calcs 1C1a 5 3 40 Code Panel Page of Java code 1C2 1 4 8 Add Equation Adds a table of differential equations for Evol. calcs 1C2a 1 3 4 Equation Table Panel Table of differential equations (DE's) 1C2b 1 2 1.5 Eqtn Left Side Identify differential function 1C2c 1 4 8 Eqtn Right Side Define the DE in terms of the indep var & params 1C2d 1 4 8 Indep. Var Identifies which var is the indep. var in the DE's 1C2e 1 4 8 Incr By Identifies evol. increment of the indep. var 1C2f 3 3 16 Solv Method Three radio buttons for numerical solving method 1C2g 1 3 4 Variable List Panel List of variables entered in Variables STab Ejs UI Organization - 2-7/24/00
(Selecting one applies it to current DE) 1C2h 4 2 12 Delay slider Sets initial time of independent var (???) 1C2i 4 2 12 FPS Sets number of frames per second for simulation 1C2j 4 2 12 Start On Checkbox which does??? 1C3 5 5 100 Rename to Renames cur Code Page or cur Equation Table 1C4 5 5 100 Left Selects Code Page/Eqtn Tbl to left of cur one 1C5 5 5 100 Right Selects Code Page/Eqtn Tbl to right of cur one 1C6 5 2 15 Remove Delete current Code Page or Equation Table 1D 5 1 10 Model Constraints Allows setting constraints between Model params 1D1 5 5 100 Add Page 1D1a 5 4 80 Code Panel Java code giving constraint relationships 1D2 5 5 100 Rename to 1D3 5 5 100 Left 1D4 5 5 100 Right 1D5 5 5 100 Remove 1E 5 4 80 Model Java Code Arbitrary Java code (executed when???) "1E1" 5 5 100 Add Page 1E1a 5 5 100 Code Panel Java code (???) "1E2" 5 5 100 Rename to "1E3" 5 5 100 Left "1E4" 5 5 100 Right "1E5" 5 5 100 Remove 2 1 2 1.5 Control Defines "Actions": Code which stops/starts simul., etc. 2A1 1 5 10 Add Action Creates a new Action 2A1a 1 3 4 Action List Panel List of currently defined actions 2A1b 1 2 1.5 Code Panel Java code which defines the action (Usually just calls a method, such as ejsstart();) 2A1c 1 3 4 Rename action Must click/enter on name 2A2 5 5 100 Move Up Move Action up in Action List 2A3 5 5 100 Move Down Move Action down in Action List 2A4 5 5 100 Remove Action Delete current action 3 1 1 1 Creates simulation's UI 3A1a 1 3 4 Component Tree (CT) A hierarchical list of Java AWT view components (User should be familiar with Java AWT libraries.) Clicking an item in the CT makes it the current one 3A 1 3 4 Create Creates a new component in the Component Tree 3A1 1 5 10 Do It Clicking this button actually creates a new component 3A1b 2 3 8 miscellany Note: Each component has misc. info to enter for it 3A2 3 2 6 (CreateContainers These components "hold" or "contain" other components 3A2a 3 2 6 panel Sub-panel within a window 3A2b 5 3 40 frame Creates a new window Ejs UI Organization - 3-7/24/00
(Create) 3A3 4 4 64 Menus 3A3a 4 4 64 popupmenu 3A3b 4 4 64 menuitem 3A3c 4 4 64 checkboxmenuitem (Create) 3A4 1 3 4 I/O 3A4a 3 2 6 label 3A4b 1 2 1.5 button 3A4c 4 2 12 checkbox 3A4d 4 3 32 scrollbar 3A4e 5 3 40 doublescrollbar 3A4f 3 2 6 textfield 3A4g 3 2 6 integerfield 3A4h 3 2 6 doublefield (Create) 3A5 1 3 4 Display Difficulty values include difficulty of linking 3A5a 4 1 8 world For displaying systems of moving particles or objects 3A5b 5 1 10 world3d 3D version of world 3A5c 1 1 1 sgraph 2D plotting graph 3A5d 4 3 32 list List of items 3A5e 3 3 16 textarea Free form text area 3B 1 3 4 Edit Properties Allows editing of a component's "properties" 3B1a 1 3 4 Prop List Panel List of properties for current component 3B1b 3 5 40 Property Name 3B1c 3 5 40 Class 3B1d 2 3 8 Value 3B1 1 3 4 Edit Allows editing of property values 3B2 4 4 64 Set to default Resets property values of cur component 3C 4 3 32 Initialization Java code to initialize component (if needed???) 3C1 4 5 80 Add Page 3C1a 4 5 80 Code Page Panel 3C2 5 4 80 Rename to 3C3 5 5 100 Left 3C4 5 5 100 Right 3C5 4 5 80 Remove 3D 1 2 1.5 Utilities Allows editing of a component's various settings 3D1a 4 5 80 Current Values Panel 3D1 3 3 16 Rename to 3D2 2 2 3 Reparent to 3D3 2 4 16 Move up 3D4 2 4 16 Move down 3D5 2 2 3 New position 3D6 3 2 6 New layout 3D7 3 3 16 New (h,v) 3D8 3 2 6 Clone in 3D9 1 2 1.5 Remove This button is the only way to delete a component Ejs UI Organization - 4-7/24/00
4 1 1 1 Connections 4A1a 2 3 8 Conn Component Tree (CT) A hierarchical list of Java AWT view components (User should be familiar with Java AWT libraries.) This is the same list as for the Tab 4A 1 3 4 Conn Links to Variables 4A1a 3 3 16 Property List Panel List of props and which vars they are linked to 4A1 2 3 8 <clear> Clears link for selected property 4A1b 1 2 1.5 Variable List Panel List of vars from Variable List STab 4A1c 2 4 16 Property name 4A1d 4 4 64 Class 4A1e 1 2 1.5 Linked to Select this and make selection from Var List Panel 4B 1 1 1 Conn Update 4B1 1 4 8 Add Page 4B1a 1 2 1.5 Code Panel Code to update??? 4B2 4 3 32 Rename to 4B3 5 4 80 Left 4B4 5 4 80 Right 4B5 5 3 40 Remove Ejs UI Organization - 5-7/24/00