You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 38 Next »

GR2 - Design

Stephen Chang, Sarah Han, Samvaran Sharma

Scenario

Larry, Curly, and Moe work in an office together. One day, they have a heated argument about who is the best at table tennis. After 30 minutes of whacking one another on the head with pliers, they decide the best way to determine who is indeed the best is to create a tournament between everyone in the office. Although methods for keeping track of such events exist (such as using Google Docs, or simple pen-and-paper with email), these approaches are tedious, and typically require a large amount of work and organization - both skills that the Three Stooges lack. 

Fortunately, Moe has an idea. He has used a tournament organizer, called "BrackeTracker," in the past. He suggests to the others that this website would be the perfect way of organizing the table tennis tournament between everyone in the office, and will involve very little effort. Larry likes the idea and decides to create an account and set up the tournament on the website. 

Larry
Since he has volunteered to set up the tournament, and invite everyone in the office to participate. 
He begins by:

  • Creating an account and logging in
  • Navigating to the page that enables him to create a new tournament
  • Adds the tournament name, description, etc. to create the tournament
  • Sends out invites to others already using the site (like Moe), as well as through email
    He waits for people to join during the "join period". Once this period is over, he closes the tournament registration, and the site automatically generates the initial bracket. (Note that he is himself participating in the tournament, in addition to managing it.) 
    A few days into the tournament, however, Larry finds out he needs to make a business trip, and will be away for a few days. Before he leaves, he adds Curly as another admin on the tournament page, so that Curly can take care of any problems while he is away.

Curly
After a few hours of being unproductive at his desk, Curly receives an email from Larry's BrackeTracker account with a link to create an account and join the tournament. His tasks now include:

  • Clicking on the email link to get to the BrackeTracker site
  • Creating an account on the site
  • Accepting Larry's invitation to join the ping pong tournament within the join period
  • Waiting for the tournament to start
    Once the tournament starts, his tasks include
  • Playing his matches, and updating the scores
  • Approving score updates from his opponents for completed matches
  • Viewing the progress of the tournament and the leaderboards 
    After a few days, Larry tells him that he needs to go on a business trip, and makes him an administrator for the tournament. This doesn't involve much work, since the site is so automated. However, one day he has to deal with an office member who has neglected to play any of his games and shows no interest in participating in the tournament. Using his administrative power, he boots the player from the tournament in order to keep everything running smoothly.

Moe
Moe is the only one in the office not new to BrackeTracker, and already has an existing account, and is participating in many different tournaments concurrently. As it turns out, Larry had forgotten to include him when he sent out the invites, so Moe has to manually add the tournament to his account. His tasks are:

  • (Getting the tournament name and password from one of his co-workers)
  • Searching for the tournament by name on BrackeTracker
  • Joining the tournament by entering the password
  • Waiting for the tournament to start
  • He enjoys using BrackeTracker, because it allows him to keep track of the many different tournaments he's participating in in a simple, organized manner.

Designs

Listed below are three different design approaches to accomplish the tasks faced in the scenario.

DESIGN #1

Task

Screenshot

Story

Learnability

Efficiency

Safety

(Home Screen)

 

This is the launching point for many of the tasks one would want to accomplish. Once a user has logged in, this is their home screen. From here, at one glance, the user can determine what tournaments they are a part of, view a list of all their friends on the site, and take care of any notifications that may pop up. 

Additionally, at the bottom of each of these three columns are buttons that a user may use to a) Create a New Tournament, b) Add a Friend, and c) Send a Message to someone. 

At the top is a bar that is ever-present and includes things like the user's username, a logout button, and a settings button.

The Home screen is unique in that it displays a lot of relevant information while still remaining fairly simple and learnable for new users. The three columns have clear, bold headings, and the search boxes next to them display a strong external consistency with other search boxes common on the internet. The magnifying glass icon also demonstrates an affordance that leads a users to treat the text box as a search box. 

Furthermore, all boxes representing tournaments, people, or notifications are clickable, and change color when moused over, in addition to the pointer itself changing into a pointing hand symbol, encouraging users to click, and therefor learn by doing.

Efficiency is accomplished in two ways - using individual search boxes in each column, and by making every entity a big, clickable box. Combined, these features make navigating the interface a breeze.

The first two columns are extraordinarily safe, since there is no modification that can be done to the entities there. Searching is a simple process displays search results in the column itself, and deleting the search term resets the column to its original state.

The only column in which safety might be an issue is the Notifications column, since one is modifying the state of objects - most importantly confirming score updates. In order to combat this, a popup dialog box is used, asking the user to confirm the action. Although this sacrifices some efficiency, it adds to safety greatly. Additionally, players can contact the admin of the tournament and ask him or her to reset that game's score, just in case the incorrect score is confirmed.

Create a Tournament

 

This is where Larry would create the ping-pong tournament. By clicking on "New Tournament" on the home screen, a new competition is created, and Larry can now set it up for the whole office to use.

Larry first adds the Tournament Name and Description, via editable text boxes, and then proceeds to label the tournament type as a simple elimination tourney from a drop-down list. He can also set the sport or activity being done (in this case, ping pong) by text box. 

Once he has completed all the information for the tournament, he has to send out the invitations. At the top right are two simple ways to add people to the invite list. Larry can search through his friends on the BrackeTracker, or add people's emails to an invite list. As he sends out the invites, people will receive an invitation to join BrackeTracker if they have not created an account already, and will also be given a "password" for the tournament that they have to type in for verification. This is to ensure that random people not associated with the office cannot add themselves.

Finally, as people join, Larry will be able to see their names as either "Participants" or "Watchers" for people who want to watch the progress of the tournament without participating. Since Larry is an admin (because he made the tournament), he can see buttons that allow him to add people as admins, or boot people from the tournament. Once everyone has joined the tournament, Larry can click the "start tournament" button to lock the participants in place and close the "joining period".

This is also the page that people will see when they try to view the tournament during the "joining period" (minus the "make admin" and "boot" buttons and editable text boxes if they are not admins).

This interface is very simple and learnable, since it uses many elements that are common in other interfaces (external consistency!). For instance, the tournament name and description are both editable text boxes, and the type of tournament is a pull-down menu.

The "invite friends" section automatically selects a friend as you start typing, similar to "tagging" a person on Facebook, or writing someone's email in GMail. Sending out emails is also simple, as you just have to enter in email addresses separated by commas, again displaying a strong external consitency with almost every email app in existence.

Efficiency is a priority here, and is accomplished by sacrificing the number of options available. The entire purpose of the site is being able to create a framework for people to quickly make tournaments and keep track of the games that have been played.

Safety is not a major concern, since everything is editable; the name and description can be changed at any time by admins (although the tournament type cannot). Similarly, people may be invited and/or booted as the admin sees fit, meaning that one will likely always have the right people participating in any one tournament.

Search/Join a Tournament

 

Searching for a tournament and joining that tournament is done in the Home page, mainly. As stated before, there are two ways that one can invite someone to join a tournament - either by sending an invite inside BrackeTracker to someone's account (which will also send them an email through the email they used to register their account), or by sending an email directly. In both scenarios, the process is almost the same for adding the tournament, exemplified by Curly's actions. Curly receives an email asking him to join the tournament. Included in the email is the tournament name and a "password" for the tournament. He follows the link to BrackeTracker's home page, which asks him to create an account. Once he does so, he sees that he has a notification asking him to join the office's table tennis tournament. He clicks on the link, enters the password for the tournament in the popup box that appears, and is then sent to the "Create a Tournament" view above, which allows him to see the state of the tournament during the "joining" period (of course, because he is not yet an admin, he cannot modify any information in this page). This process is nearly identical for someone who already has an account and receives an invitation (except that the site does not prompt him to create an account) 

Moe, however, was accidentally left out from the invite list. However, he also has no problem joining. He goes to his home page and searches for the tournament name in the "Tournament" column. Since he is not part of the tournament yet, it is not already part of the list of tournaments he is participating in. Instead, a little button asking him whether he would like to "Search All Tournaments" appears. By clicking this, the search expands to all tournaments registered on BrackeTracker. He finds the table tennis tournament, but of course, he cannot join yet, since he did not receive the invitation with the password. He asks his co-worker at the desk next to him for the password and enters it, enabling him to view the same "Create a Tournament" page that Curly does.

This feature could perhaps be slightly more learnable, but overall it is an elegant solution that mirrors functions in other sites, such as searching for a friend on Facebook. One may type in the tournament name in the search box on the Home page, and if it is not in the list of tournaments already there, a button will appear asking the user if he or she wants to expand the search to all of the tournaments on the site.

This is a very efficient way of not only 1) checking to see if you've not already added the tournament, but also 2) searching for a tournament quickly, and adding it to your list of tournaments.

This feature is safe, since the only variable one is changing is their tournament participation, which can be reversed at any time by leaving a tournament.

Update a Tournament

 

Updating a tournament is a task that Larry, Curly, and Moe (as well as other members of the office) do quite often. Every time they finish a game, they go to the Home page, find the table tennis tournament in their list of Tournaments, click on it, and are transported to the "View/Manage a Tournament" screen. Here, they see a full overview of the tournament represented graphically.
As they play games, they click on the boxes that represent games in which they've played, and update the scores, and mark a winner. This gets sent to their opponent for confirmation (it will show up in their notifications feed). 
Updating a tournament is a task that Larry, Curly, and Moe (as well as other members of the office) do quite often. Every time they finish a game, they go to the Home page, find the table tennis tournament in their list of Tournaments, click on it, and are transported to the "View/Manage a Tournament" screen. Here, they see a full overview of the tournament represented graphically.

As they play games, they click on the boxes that represent games in which they've played, and update the scores, and mark a winner. This gets sent to their opponent for confirmation (it will show up in their notifications feed).

Updating a tournament is very learnable, since there is a small note under games you are involved in that explicitly notifies the user that they may edit the score.

The process is fairly efficient, since it is a very short task by nature. We chose to take out other forms of automation (such as automatically marking the winner; the user has to do that manually) in favor of making the interface robust to any sort of game, no matter the scoring regime.

The process is safe because 1) it requires the opponent to confirm the score and winner, and 2) if there is a mistake, the admin can erase the score, and the users can redo the process

Manage a Tournament

 

Managing a tournament is a fairly simple job, once a tournament is created. Larry does most of the work initially by setting up the tournament name and description, as well as type, but after that, it's almost fully automated, since players will themselves be updating and approving scores.

The main role of an  admin/manager is just to ensure the tournament is running smoothly. Larry is able to make other participants admins, as he does with Curly, and Curly in turn utilizes the other main function of admins - the ability to boot people from the game. This is usually just used when a participant is not following the rules of the game or is being inactive for a prolonged period of time. The only other thing a manager may do is reset a game's score (if, for instance, the players need to redo the game or if the wrong score was entered).

Managing a tournament is quite simple as well, since the learning of the tasks are incorporated within the UI naturally. Indeed, the admin's UI in the "view/manage tournament" page is almost the same of any other participants, except that a few more buttons are visible and usable, such as "make admin" and "boot player".

Efficiency is quite high since, again, the managerial controls are integrated in natural positions (for instance, next to people's names are buttons to "make admin" or "boot", and next to games is a button to "erase score", etc.)

Everything is quite safe, since 1) if you are performing any managerial task, a popup box appears to confirm the action before it can be executed and 2) almost every action is reversible, though not always directly (for instance, if you booth the wrong player, you can invite them again, although they will have to join again themselves)

View a Tournament

 

Viewing a tournament is a fairly simple process that is accessed by clicking the tournament's link on the Home page. As stated above, it lets you see a graphical overview of the games that have played and the matchups that have yet to be contested. If you mouse over the left part of the screen, a little window scrolls out, detailing the tournament name, details, and participants. One can click on "standings" to view stats and individual rankings.

Viewing a tournament is a very learnable task, since the screen shows up whenever you click on any tournament name on the Home screen, or elsewhere!

Efficiency is key here - and the large graphical layout of all the games is what helps the interface accomplish this goal. The mouseover sidebar is also an elegant way to save space without diminishing usability.

Since no state is being changed, this action is very safe.

DESIGN #2

Task

Screenshot

Story

Learnability

Efficiency

Safety

Create 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. 

DESIGN #3

Task

Screenshot

Story

Learnability

Efficiency

Safety

Create a Tournament

 

In order to create a tournament, Larry would first log in and then be taken to his account home screen.  At the top of the page there is a header bar which includes the “create tournament” button on the right side.  He would click on this button in order to be taken to the “create a tournament” page.  The header bar remains on the page.    
In order to create a tournament Larry must type in a name for the tournament and choose the type of tournament he wants (by checking the box, next to the different choices).  He can also specify the end date of the tournament joining period (using the standard popup calendar widget) and/or add extra information about the tournament.  Once he fills in this information he can click the “create” button which then updates the page with the following message and participation link:
  Your tournament has been created.
  Participation link. Send this link to anyone you wish to invite.
  link
Clicking on the link will take Larry to the tournament information page, where Larry can update tournament information, manage the tournament, and view the tournament. 

Pro:
This page includes familiar widgets such as the textbox, checkboxes, and popup calendar.The page is self-explanatory with brief descriptions for each component of the tournament creation i.e. name, type, join period and a “create tournament” button  

Con: 
No visible view/description of the different types of tournaments. This requires knowledge about the types of tournaments i.e. round-robin, single-elimination, etc.

Pro:
This one page includes all the information needed to create a tournament, so there is no need to go through multiple pages/steps.

Pro:
If Larry makes a mistake and wants to change the type of tournament, the join period, etc. he can click on the link and update the tournament information.

Con:
Editing information once he creates a tournament requires navigating to a different page.

Search/Join a Tournament

 

Moe already has a BrackeTracker account and since Larry forgot to include Moe in his initial invitation email to join the tournament, Moe decides to search for the office ping pong tournament.  Moe logs into his account and the uses the search box at the top of the page (located on the header bar) to find the tournament by name.  Moe is able to find the tournament name and clicks the “join” button next to the name of the tournament.

The search option has standard search box format- a textbox with a descriptive “search for tournament” button.

Pro:
Able to quickly search for tournament you want to participate in by name.
Con:Moe must know the name of the tournament you wish to join.

If Moe types in the wrong name he must re-search for the right tournament

Update a Tournament

 

As the tournament progresses Larry, Curly, and Moe must update their status and scores as they play their matches.  Each time a pair of opponents plays a ping pong game they must decide on the winner and update that information on their account. Larry and Moe just finished a match against each other and must update their match/score.  Larry and Moe both log into their accounts, choose the appropriate tournament, located on the left side menu, which opens up the tournament view on the screen.  The overall tournament bracket image appears, with their current status in the tournament highlighted.  At the top of the page appears the tournament information which includes the current opponent and the player status (player or admin/manager for the tournament).  Larry is an admin for the tournament and is currently playing in the tournament so his status reads “admin/player”.  Moe on the other hand is a tournament participant so his status reads “player.”  Next to the current opponent is the choose winner option (this is a drop-down menu with both players) and the confirm match winner button.  Once both players have confirmed the winner of the match the tournament view updates and changes the positions of the players in the bracket.

Easy to update winners for a match, this option uses a standard drop-down menu and “confirm” button, which are self-explanatory.

Both players must confirm the winner of any given match before either of them continues the tournament.

The page updates in real-time so players can see any update changes with match information, regarding winners. 

If a player accidently chooses the wrong winner for a match he/she can wait for the opponent to confirm the winner. If the confirm winner entries do not match, the system will automatically reset the confirm winner selection for both players and both players must resubmit the match winner information.

Once both players confirm the same winner of a match, only an admin/manager can change the match information.

Manage a Tournament

 

This option is only available to admin/managers of the tournament.  Since Larry is an admin/manager for the office ping pong tournament his status on his tournament page reads “player/admin” and he is able to manage the tournament which includes, editing the winner/score of match or booting inactive players by clicking on the “manage” button next to his status.  Clicking on the manage button enables editing for the entire tournament so Larry can click on player in the tournament and view his/her current status, edit the winner of any match or choose to boot player, which automatically updates the match winner.  The manager view also includes a list of all the players in the match.  Larry is also able to add other admin by changing the status of a player to "player/admin."  Any admin is able to add another admin for a tournament

There are two ways that a manager can edit the tournament status, either by editing the players list, or clicking on a node on the tournament/bracket image.  This page includes a short directions message for increased learnability (so managers know that they can click on players in the tournament image to get information on a player).

Any edits a manager makes updates in real-time and is visible to the other players.

If Larry makes a mistake he must change the mistake since there is no undo button.

View a Tournament

 

 

 

 

 

fin

  • No labels