Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Task

Screenshot

Story

Learnability

Efficiency

Safety

Create a Tournament

 

 

 

 

 

Search/Join a Tournament

 

 

 

 

 

Update a Tournament

 

 

 

 

 

Manage a Tournament

 

 

 

 

 

When Larry wants to create the new tournament, he clicks the button on the top of the page labelled "Create New Page", avaiable on every page of the site.  This button will bring Larry to the "Create Tournament" page.  

On this page, there are a number of fields that must and can be filled out before the tournament can be created.  The fields marked with astrisks are required.  All other fields are optional.  The Name of the tournament is the unique identifier for the tournment; this name is how users can search for the tournament.  The password is an optional password to make the tournament private.  The type of tournament can be selected from a drop-down menu.  A grapical representation will be previewed on the page.  There is also a panel on the right side of the page that will allow the user to select and/or preview all the different tournament types in case they're not familiar with all options.  The last two text boxes will allow Moe to send invites to anyone's emails and add a specialized message in the email invitation.   When Larry wants to create the new tournament, he clicks the button on the top of the page labelled "Create New Page", avaiable on every page of the site.  This button will bring Larry to the "Create Tournament" page.  
On this page, there are a number of fields that must and can be filled out before the tournament can be created.  The fields marked with astrisks are required.  All other fields are optional.  The Name of the tournament is the unique identifier for the tournment; this name is how users can search for the tournament.  The password is an optional password to make the tournament private.  The type of tournament can be selected from a drop-down menu.  A grapical representation will be previewed on the page.  There is also a panel on the right side of the page that will allow the user to select and/or preview all the different tournament types in case they're not familiar with all options.  The last two text boxes will allow Moe to send invites to anyone's emails and add a specialized message in the email invitation.

The large button on the top of the page is clearly marked so the user knows exactly where to go to create a new tournament.  As this is a central focus of the site, the button is in the same place on every page of the site.  In addition, it is large and clearly visible.  

The form itself is very self explanatory, looking similar to many other forms the user has probably encountered before.  The astrisk marking required fields is also another common feature in forms.  The scroll panel on the right also helps the user identify which type of tournament is which.  If people are not familiar with all the tournament types, there is a large preview in the form as well as smaller thumbnails.  The other text boxes are descriptive and instructive. 

The form is short with ver few steps, and everything contained on a single page.  The user knows exactly how much information is necessary to create the tournament. 

There is some limited safety.  If the user does not select or input required information, the form will give the user an error notification.  However, once the tournament is created and invitations sent, there is no way to recall the information except to create an entirely new tournament.

Search/Join a Tournament

 

When Moe wants to search for a tournament, he simply has to type the name into the search bar under the "Find a Tournament" label.  This will bring him to the "Matched Tournaments" landing page with all tournaments that match the query.  There are two views.  The first is a large page that has graphical thumbnails of each tournament (will show a bracket if the tournament has been started, or details if it has not yet been generated).  The second is the scroll panel that just has the tournament names.  The Moe can select whichever tournament is appropriate from either view.  If there is a required password, the popup will appear.  Once the correct password is input, or if it is a public tournament, it will bring Moe to that tournament's details page.  This page will show the detailed information about the tournament so the user can make an informed decision whether or not it is the correct tournament.  If it is, Moe clicks the "Join" button on the bottom of the page.

Like the "Create New Tournament" button, the "Find a Tournament" search field is located prominently at the top of each page.  It is visible and looks similar to other search boxes the user has seen before.  Additionally, there is a "Search" button right next to the input field that also tells the user how to start the search.

Joining a tournament is easy to learn, there is a large button on the bottom of the page labelled "Join"

To start the search, the search field will also respond to an "Enter" keypress.  In viewing the tournaments, there are two ways to view and select the tournaments that match the query.  The two views allow the user to use whichever view is most efficient.  The larger view will allow the user to survey details of the tournaments if he is really unclear on which tournament matches.  The scroll view with only the names allows the user to look through many tournaments very quickly.

Joining a tournment is quick, the user simply needs to click "Join" on the approriate tournament and that's it.

In terms of searching for a tournament, there is not much the user can do wrong permanently.  If the user enters a wrong search, they simply make a new search.

Joining the wrong tournament is more of an issue.  There is nothing the user can do to leave a tournament at the moment.  The manager will have boot the user before starting the tournament.

Update a Tournament

 

After a Moe completes a game, he needs to send a completed game request with the final score of the game to his opponent or approve his opponent's request.  This is done on either the overview page or a specific tournament page.  The right scroll panel has a list of all matches, completed (and awaiting approval) and scheduled (unplayed matches).  The completed matches are listed at the top.  The user can either approve the match or propose a counter score and send that back to the opponent for approval.  The matches underneath are the matches that must be completed.  The user can click on a link in the match to send a completion request.

The list of matches are clearly visible on the two main pages, the Overview and Specific Tournament pages, with their own panel.  The completed matches awaiting approval have large visible buttons to approve the match.  Sending a completion request is simple.  Once the user clicks the send completion request, the popup is minimal and descriptive.

Approval of a completed game only takes a single click.  Sending a match completion request is slightly slower, but can be done with minimal navigation through the site.  Once the match has been located from either tournament view, the user clicks the completion request button, inputs each player's score, and clicks send.

Once the user clicks either "Approve" or "Send" on the completion request page, the user cannot take back that action.

Manage a Tournament

 

As a manager of the tournament, Larry has a few responsibilities.  It might be as menial as changing the tournament description, or as necessary as amending incorrectly reported scores, booting a player from the tournament, or adding additional admins.  All these tasks can be done from the Manager's view of the tournament.  When viewing the tournament page, there is a link that is visible to only him and other managers of the tournament.  This link is on the top right corner of the main tournament view and brings Larry to the Manager's page.  This page has a three different tabs: "Tournament Details", "Player Statuses", "Amend Scores".  

The "Tournament Details" page has editable general tournament information.  The "Player Statuses" page has a list of all players and their status: "Active", "Eliminated", or "Booted".  Players who are not booted have a link at the end of their row giving the managers the option to boot them from the tournament, forfeiting them from their matches.  There is also the option to give any player admin status.  The "Amend Scores" page gives the managers to edit the scores of any of the games played so far.   

Finding the manager's link to navigate to the Manager's page is not particularly easy to learn.  While it is visible, it is not prominently featured.  Once in the Manager's page, making changes is easy to learn.  The tabs for the different pages are descriptive to the content.  And the forms are short with clearly labeled "Revert", "Apply", and "Cancel" buttons on the bottom of the page. 

Making the managerial changes are not particularly efficient.  It takes many clicks to navigate to a particular page and make the changes. 

There are a number of safety features.  If the Manager makes a lot of changes to the tournament then decides not to make the changes, he may have forgotten exactly what he changed.  In that case, he can click "Revert" to retore the page to the last saved state (when the "Apply" button has last been clicked).  If the Manager tries to click "Done" without first pressing "Apply", he his prompted to apply the changes he made before navigating away from the manager's page.  However, if changes have been made and applied to the tournament, there is no automatic way to undo them.  

View a Tournament

 

Probably the most common task for this site: viewing the current status of the tournament. This is something that every participant and manager will do over the course of the tournament.  The Overview page is the main page for the site once the user has logged on.

This Overview page has two main features.  The first are the graphical thumbnails of each tournament that the user is a part of.  It displays the name of the tournament and a small picture of the current state of the bracket.  On the right hand scroll bar, there are two tabs: "Matches" and "Standings".  The "Matches" tab has a list of all matches that are completed and awaitng approval and also a list of all scheduled matches for all tournaments.  The "Standings" tab has the top three leaders of each tournament that the user is a participant in.

The user can navigate to a specific tournament's page from either of the views.  He can click on the thumbnail, or the tournament name on the standings, or double click any of the matches.  Each of those actions will navigate to that tournament's page.

There are not many instructions on the three different ways to navigate to a particular tournament's page.  Clicking a thumbnail is the most intuitive.  When the user mouses over the thumbnail, it will provide feedback (hovering, highlighting, and/or mouse cursor change) to indicate that it is clickable.  Clicking the name of the tournament on the "Standings" tab is the next most obvious as there is a direct linking between the name of the tournament and that tournament's page.  Double clicking the match to navigate to the tournament page is the least learnable and probably requires seeing someone navigate in that manner first.

In two cases, it only takes a single click to navigate to the specific tournament's page.  Double clicking on the match takes two clicks, but is also a very quick action.

While there is not many safety prompts, there are few ways that the user can make any irrecoverable mistakes.  In the worst case the user selects the wrong tournament and must return to the overview page and select the correct tournament.

View a Tournament

 

 

 

 

 

DESIGN #3

Task

Screenshot

Story

Learnability

Efficiency

Safety

Create a Tournament

 

 

 

 

 

Search/Join a Tournament

 

 

 

 

 

Update a Tournament

 

 

 

 

 

Manage a Tournament

 

 

 

 

 

View a Tournament

 

 

 

 

 

...