Areas of Difficulty Requiring Help or Assistance in the Ejs User Interface

Transcription

1 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

2 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 Model 1A Model Variables Create a table of indep. vars & params used in Model 1A Add Table Creates new Variables Table panel 1A1a 1-10 Variables Table Panel Table for entering Model's Java variables 1A1b Variable name, Type, Dim 1, Dim 2, Value, Internal checkbox 1A1c Var Tbl Tabs One created for each new Variable Table 1A Rename to Allows current Variable Table to be renamed. 1A Left Select Variables Table to left of cur one 1A Right Select Variables Table to right of cur one 1A Remove Delete current Variable Table 1B Model Initialization 1B Add Page Creates a panel for entering Java initialization code 1B1a Code Panel Text area for Java initialization code 1B Rename to Renames current initialization code page 1B Left Select Code Page to left of cur one 1B Right Select Code Page to right of cur one 1B Remove Delete current Code Page 1C Model Evolution 1C Add Code Adds page of code executed during Evolution calcs 1C1a Code Panel Page of Java code 1C Add Equation Adds a table of differential equations for Evol. calcs 1C2a Equation Table Panel Table of differential equations (DE's) 1C2b Eqtn Left Side Identify differential function 1C2c Eqtn Right Side Define the DE in terms of the indep var & params 1C2d Indep. Var Identifies which var is the indep. var in the DE's 1C2e Incr By Identifies evol. increment of the indep. var 1C2f Solv Method Three radio buttons for numerical solving method 1C2g Variable List Panel List of variables entered in Variables STab Ejs UI Organization - 2-7/24/00

3 (Selecting one applies it to current DE) 1C2h Delay slider Sets initial time of independent var (???) 1C2i FPS Sets number of frames per second for simulation 1C2j Start On Checkbox which does??? 1C Rename to Renames cur Code Page or cur Equation Table 1C Left Selects Code Page/Eqtn Tbl to left of cur one 1C Right Selects Code Page/Eqtn Tbl to right of cur one 1C Remove Delete current Code Page or Equation Table 1D Model Constraints Allows setting constraints between Model params 1D Add Page 1D1a Code Panel Java code giving constraint relationships 1D Rename to 1D Left 1D Right 1D Remove 1E Model Java Code Arbitrary Java code (executed when???) "1E1" Add Page 1E1a Code Panel Java code (???) "1E2" Rename to "1E3" Left "1E4" Right "1E5" Remove Control Defines "Actions": Code which stops/starts simul., etc. 2A Add Action Creates a new Action 2A1a Action List Panel List of currently defined actions 2A1b Code Panel Java code which defines the action (Usually just calls a method, such as ejsstart();) 2A1c Rename action Must click/enter on name 2A Move Up Move Action up in Action List 2A Move Down Move Action down in Action List 2A Remove Action Delete current action Creates simulation's UI 3A1a 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 Create Creates a new component in the Component Tree 3A Do It Clicking this button actually creates a new component 3A1b miscellany Note: Each component has misc. info to enter for it 3A (CreateContainers These components "hold" or "contain" other components 3A2a panel Sub-panel within a window 3A2b frame Creates a new window Ejs UI Organization - 3-7/24/00

4 (Create) 3A Menus 3A3a popupmenu 3A3b menuitem 3A3c checkboxmenuitem (Create) 3A I/O 3A4a label 3A4b button 3A4c checkbox 3A4d scrollbar 3A4e doublescrollbar 3A4f textfield 3A4g integerfield 3A4h doublefield (Create) 3A Display Difficulty values include difficulty of linking 3A5a world For displaying systems of moving particles or objects 3A5b world3d 3D version of world 3A5c sgraph 2D plotting graph 3A5d list List of items 3A5e textarea Free form text area 3B Edit Properties Allows editing of a component's "properties" 3B1a Prop List Panel List of properties for current component 3B1b Property Name 3B1c Class 3B1d Value 3B Edit Allows editing of property values 3B Set to default Resets property values of cur component 3C Initialization Java code to initialize component (if needed???) 3C Add Page 3C1a Code Page Panel 3C Rename to 3C Left 3C Right 3C Remove 3D Utilities Allows editing of a component's various settings 3D1a Current Values Panel 3D Rename to 3D Reparent to 3D Move up 3D Move down 3D New position 3D New layout 3D New (h,v) 3D Clone in 3D Remove This button is the only way to delete a component Ejs UI Organization - 4-7/24/00

5 Connections 4A1a 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 Conn Links to Variables 4A1a Property List Panel List of props and which vars they are linked to 4A <clear> Clears link for selected property 4A1b Variable List Panel List of vars from Variable List STab 4A1c Property name 4A1d Class 4A1e Linked to Select this and make selection from Var List Panel 4B Conn Update 4B Add Page 4B1a Code Panel Code to update??? 4B Rename to 4B Left 4B Right 4B Remove Ejs UI Organization - 5-7/24/00