wiki:GuiPrototype
Last modified 17/03/05 16:31:31

WCKER GUI Prototype

A detailed representation of the different GUI elements present thoughout a WCKER wizard, although the precise colours, dimensions and icons are not to be considered authoritative.

Please refer to WizardPackage for details of the wizard format.


  1. New Reload window:

 http://waterbuck.conted.ox.ac.uk/cgi-bin/trac.cgi/file/repo1/trunk/prototypes/gui-mockup/reload/01_new-reload.png?format=raw

The user goes to the menu option Tools > "Course wizard"


  1. Choose Wizard dialogue:

 http://waterbuck.conted.ox.ac.uk/cgi-bin/trac.cgi/file/repo1/trunk/prototypes/gui-mockup/reload/02_choose-wizard.png?format=raw

We should include the wizard version number after it's title.

User chooses a new wizard to start, or an existing wizard course to continue.

By default, the "Start a new wizard" radio button should be checked.

When a radio button is checked, that section should be enabled, with the other section disabled.

The "Select" button is disabled by default, and enabled under the following conditions:

  • A new wizard is selected.
  • An entry is made in the existing wizard course textbox by browsing for and choosing a file.
  • An entry is typed into the existing wizard textbox.

The select button is disabled when neither new or existing wizards are selected.

The cancel button cancels the wizard (ie takes you back to step 1).


  1. Introduction step of the TALL short course wizard:

 http://waterbuck.conted.ox.ac.uk/cgi-bin/trac.cgi/file/repo1/trunk/prototypes/gui-mockup/reload/03_introduction.png?format=raw

The wizard window should be maximised by default, to take up all available space in the Reload window.

Now we have started a wizard (and are creating a course) the save icon (and menu options "File > Save" "File > Save As") should be enabled.

Saving the wizard course at any stage will involve saving to a directory for that specific course, and will include: the manifest in progress, and a wizard-info file (containing details of progress through the wizard).

Selecting save should:

  1. Prompt the user for a save directory.
  2. Suggest a save directory name (based upon the course title)
  3. Save the files described above.
  4. Return the user to where they were before selecting save.

Progress indicator on the left illustrating progress through each major step of the wizard.

Basically a big text box - we'll start with just plain text, but HTML formatting might be an option for the future...

The introductory text is provided in the .wsi file

It would be good to display all metadata here as well - maybe an "About" button at the bottom left corner of the wizard, producing a popup?

Buttons:

  • Previous step: Does what it says on the label. Disabled on the first step.
  • Next step: Does what it says on the label. Disabled on the last step.
  • Finish: Moves the wizard to the last step "Export content package". Disabled on the last step.
  • Cancel: Prompts the user to (optionally) save the wizard course in progress, then closes the wizard. Leaves Reload running.

  1. Basic course details step:

 http://waterbuck.conted.ox.ac.uk/cgi-bin/trac.cgi/file/repo1/trunk/prototypes/gui-mockup/reload/04_basic-course-details.png?format=raw

Progress indicator adds a tick to completed steps. Or maybe not - what would happen to the ticks if the user goes back a few steps? Do the ticks dissappear?

Basic course details - do we really need this? (We repeat it in the next step)

Help pane, containing the contents of the .wsi "guidence" elements for the current wizard step, plus the questions on display. The border between the help pane and the middle pane is moveable - ie the help and middle panes are resizable.

Might be useful: When an input gets focus, the related help item could be highlighted in some way...


  1. Customise course step - course level:

 http://waterbuck.conted.ox.ac.uk/cgi-bin/trac.cgi/file/repo1/trunk/prototypes/gui-mockup/reload/05_customise-course.png?format=raw

Edits to the text fields should be immediately updated on the Course structure tree view.

The edit course structure icons are enabled/disabled depending on what type of the hierarchy item is selected.

Icon (from left to right)Meaning/tooltip
FirstAdd Unit (If only one type of container item may be legally inserted at the current selection, it is inserted. If there are more than one type of container item which may be legally inserted a selection list should popup, allowing the user to choose which type of item to add. The initial version of WCKER may not include this functionality)
SecondDelete Unit
ThirdAdd Page
FourthDelete Page
FifthMove selected up
SixthMove selected down

Additional buttons:

  • Previous item: Changes selected hierarchy item back one. Disabled on the first item.
  • Next item: Changes selected hierarchy item forward one. Disabled on the last item.

Prev/next traversal of the Course structure hierarchy should use a depth first linearisation.

NB separate add/delete buttons are provided for both containers and pages to make the interface more intuitive.


  1. Customise course step - unit level:

 http://waterbuck.conted.ox.ac.uk/cgi-bin/trac.cgi/file/repo1/trunk/prototypes/gui-mockup/reload/06_customise-course_b.png?format=raw

The move up/down arrows will move the selected item one place in the hierarchy, within the limitations of the "structure" element in the .wsi file (e.g. a Course cannot contain Pages directly - only within Units).


  1. Customise course step - page level:

 http://waterbuck.conted.ox.ac.uk/cgi-bin/trac.cgi/file/repo1/trunk/prototypes/gui-mockup/reload/07_customise-course_c.png?format=raw


  1. Export course skeleton:

 http://waterbuck.conted.ox.ac.uk/cgi-bin/trac.cgi/file/repo1/trunk/prototypes/gui-mockup/reload/08_export-course-skeleton.png?format=raw

This view does not explicity show the order of units - it only implies it through left-to-right, top-down reading direction. Should we explicitly state the order?

Will this view accomodate different hierachy designs? (e.g. multiple nesting levels)

Should we go for a traditional graph (nodes and lines) instead?

We could have a details box below the course summary, which would show additional info on any selected course item.

Exporting the course will follow the same process as saving (described in part 3, above), with the addition of generating a directory and HTML template file hierarchy from the course structure.


  1. Export course skeleton - exported:

 http://waterbuck.conted.ox.ac.uk/cgi-bin/trac.cgi/file/repo1/trunk/prototypes/gui-mockup/reload/08_export-course-skeleton.png_b?format=raw

After succesfully exporting a course skelton the wizard will display an export confirmation screen.


  1. Continue existing wizard:

 http://waterbuck.conted.ox.ac.uk/cgi-bin/trac.cgi/file/repo1/trunk/prototypes/gui-mockup/reload/09_continue-existing-wizard.png?format=raw

In continuing an existing wizard course, the user would browse to/type in the location of the wizard course, and the WCKER would load in the wizard-info file generated when the course was saved/exported.


  1. Import completed course skeleton - select file:

 http://waterbuck.conted.ox.ac.uk/cgi-bin/trac.cgi/file/repo1/trunk/prototypes/gui-mockup/reload/10_import-completed-course-skeleton_a.png?format=raw


10.b Import completed course skeleton - report:

 http://waterbuck.conted.ox.ac.uk/cgi-bin/trac.cgi/file/repo1/trunk/prototypes/gui-mockup/reload/10_import-completed-course-skeleton_b.png?format=raw

The import page displays the course structure, and (perhaps) an import report. We may want to ask the user questions about orphaned files here - to be decided.


  1. Export content package:

 http://waterbuck.conted.ox.ac.uk/cgi-bin/trac.cgi/file/repo1/trunk/prototypes/gui-mockup/reload/11_export-content-package.png?format=raw

Needs fleshing out - although at the moment I can't think that it needs much...


Attachments

  • tree-edit-spec.txt Download (6.8 KB) - added by balchd 12 years ago. WCKER tree editing behaviour spec. v0.2 2005-03-17