GUI
 

Getting started


When the user starts the application the user is first presented with a welcome screen which contains information about the application. The screen also contains menu options for creating or joining a session or getting help with the application. When the user clicks on the either the ``create session'' button or the ``join session'' button he/she is presented with a login screen. If the user pressed the ``create session'' button he/she is prompted to enter a username, a session name, the sessions password and the question at issue for the session. The user is then forwarded to a new session with that question at issue and owner privilegies.

If the user pressed the ``join session'' button the user is presented with a screen which is simillar to the ``create session'' screen with the exception that the screen does not have a field for question at issue. When the user has typed in the session name and password of the session he/she wants to join the user is forwarded to that session.

 

 The welcome screen

The create session screen

 

The Session Screen

When a user has entered his/her appropriate login information the user is directed to his/her wanted session and the session screen is presented. The session is initially in the "define question at issue" phase. Several of the session screens GUI options are initially disabled. They become available as the phases are incremented.

The session screen

 

Here follows descriptions of the session screens different GUI items:

  1. The question at Issue - The question at issue for the session. The question at issue is specified by the user who created the session. It can be edited by any user while the session is in the "define question at issue" phase.
  2. Phase - The phase that the session currently is in. A helpmessage for the phase can be displayed by clicking on the phase text. The different phases that exsists are: Define question at issue, Brainstorming, First-level Grouping, Second-level Grouping, Grading and Results.
  3. The whiteboard - Container for all post-its, it holds individual suggestions as well as groups. It also holds a pair of post-it piles (one for suggestions and one for groups) placed at the upmost leftmost corner of the whiteboard and labels with the users name at the bottom of the whiteboard (placed from left to right).
  4. The post-it piles - The post-it piles are used to place new post-its (suggestions or groups) on the whiteboard. The user places a new post-its on the whiteboard by holding down the mouse cursor on one of the piles and dragging in a post-it on the whiteboard.
  5. Labels with usernames - At the bottom of the whiteboard are the names of all users that are currently logged in on the session. The user names are there to let the user know which other users are active in the session. On the labels are colored circles which shows the users status. If the circle is red it means that user is not yet done with the phase and if the circle is green it means that the user is ready to move on to the next phase. The user clicks on the circle on his/her own label to change his/her status. The owner can not change the sessions phase until all users has indicated that they are ready to move on to the next phase. The userlabels are also used by the owner of the session to allow certain users access to certain subchats.
  6. The chat input - An input field where users may enter text that is then displayed in the currently active chat window. Valid input is any text.
  7. The chat window - A text field that displays all messages sent in the chat in chronological order. The textfield also displays notices when a user connects to or leaves the session. The messages have timestamps attached to them and also contains the name of the user who sent the message. A user will see all messages sent by all users from the time that he/she joined the sesson. There are tabs in the window which are used to navigate between the main chat and the sessions subchats. A new subchat is added to the session each time a new group is created. The owner can later decide which users should be allowed access to the subchat. That is done by first selecting the chat in the subchat window and then clicking on the name of the user to add from the usernames at the bottom of the whiteboard.
  8. The chat buttons - There are two buttons beneath the chat input field: A button "Next Phase" that switches the sessions phase. It is only available for the owner of the session. A button "Logout" which logs out the user from the session. And one to the right of the inputfield: A button "Submit" which is used to send a message written in the textfield. Messages can also be sent by pressing "enter" while having the textfield selected.
  9. A suggestion - A suggestion consists of the text of the suggestion and a button for removing the suggestion. The suggestion also has buttons for grading the suggestion but they are only available when the session has gotten to the grading phase. The buttons are by default not visible. The buttons are made visible when a user holds his/her mouse over the suggestion. Any user can change a suggestions text.
  10. The "remove" button - A button that is used to remove the post-it from the session. It is like the grade buttons only visible when the mouse corsor is over the post-it but unlike the grade buttons it is available in all of the sessions phases.
  11. A group - A group consists of the header for the group (the group's title) and the post-its added to the group. There are two different kinds of groups, first-level and second level groups. First- level groups are red and contain suggestions. Second-level groups are green and contain other groups. To enable the user to look at one of the added suggestions in a first-level group the user has to move the mouse over the part of the suggestion that is sticking out from beneath the group. When the user does that the suggestion is shown on top of the group and the user can pull it out of the group. When the user moves away the mouse pointer again the post-it is moved down the group to the place it was orignally placed.
    A user can view the groups in a second-level group similary but only the groups post-it are made visible and not the groups suggestions. To view a groups suggestions it has to be taken out of the second-level group.
  12. The grading buttons - Buttons that are used to grade the suggestion. The grading buttons are only visible in the ``grading'' phase. There exsits buttons for both efficiency and feasibility. It is written on the buttons how many points the user has given the suggestion in the respective categories( efficiency and feasibility). When an user clicks on one of the buttons the suggestions grade for that category is incremented by one point. The user can increment the score of the suggestion as long as the user has points left to give in the category that the user want to increment and as long as the user has not given more points to the suggestion in the category than is allowed. If the user clicks the button when he/she can not increment the grade anymore the users grade in that category for the suggestion is flipped back to 0 and the user gets back all points he/she has given this far.

The session screen in the grading phase

When the participants of the session has gotten to the "grading phase" the post-its on the whiteboard are rearanged and the grading buttons are made available. The users can then grade the suggestions by pressing the grading buttons which increment the grade in the respective categories. When all users have graded the suggestions can the owner switch phase and display the result of the evaluation.

The whiteboard in the ``grading'' phase

The session screen in the result phase

When the participants of the session has gotten to the result phase the post-its on the whiteboard are removed and a table is shown instead. The table contains the result of the users evaluation of the post-its in the session. It shows the total grade of the postIts in the two different areas(effecienty and feasiblity). It also shows how much score the different suggestions have gotten. The suggestions can be sorted after how high grades the suggestions have in one of the categories. This is done by clicking on the name of the category.

The result table


Back to Prototype User Manual

Back to project workbook