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

Compare with Current View Page History

« Previous Version 47 Next »

Design

Describe the final design of your interface. Illustrate with screenshots. Point out important design decisions and discuss the design alternatives that you considered. Particularly, discuss design decisions that were motivated by the three evaluations you did (paper prototyping, heuristic evaluation, and user testing).

Title

Paper Prototype

Web Version

Comments/Description

Home



 

Create Tournament



 

Join Tournament



 

Search for Tournaments



 

Tournament Page



 

asdf

Implementation

As a web application, our project was implemented with HTML, CSS, Javascript and JQuery (and JQuery UI) on the front end.  For the back end, we used the Python framework, Flask.  While all the pages are written with HTML and formatted with CSS, most of it is generated on the server side with Flask and Jinja2 templating.  Through the use of Flask and Jinja templating, we were easily able to make each page within our site inherit a set of properties, notably the header bar that included the BrackeTracker logo and icons.  Similarly, all the tournament (active, create, and join) pages were generated on the server side with the relevant tournament information.  Any of the changes on the page that were made after being loaded were dynamically updated with Javascript and Jquery, while simultaneously sending the updated information to the server in order to persist the data.  For instance, booting a player would use Javascript to bump the user down on the member-list sidebar then make an AJAX call to the server telling the server of that change.  We persisted the data on the server, with the Python Shelve module instead of implementing a full database.  For the small scale of the project, Python Shelve worked better than a database would have.  With only a single user, the amount of stored data would be minimal.  Python Shelve allowed us to store Python objects in a mock database.  These Python objects stored the states of each Tournaments (information such as name, description, members, etc) and the Notifications on the home page.  

One of the design choices we made during the implementation was to only implement one type of interactive.  We decided that this would be sufficient because the different tournaments are similar enough in concept that fully implementing the interface for a single tournament type would illustrate how to interact with the other tournaments types as well.  While this design does not allow the user to explore every possible scenario that a fully implemented site would offer, it does allow the user to experience one course of action (for that given task) fully.  

Another design choice was that we did not implement user accounts.  While this does limit the amount of social interaction user would have on this site, it does not prevent the user's experience for the main tasks.  While many of the possible tasks in the site are social, these are not the primary focus of the site's interface.  Our implementation has a single user, and supplies enough scenarios to give that single user the experience of the three defined user types (i.e., tournament administrator, player, and administrator+player). 

Evaluation

User testing was done with volunteers from the general MIT student population, who had either run a tournament before or participated in tournaments before.  Users were given a short briefing and scenario tasks to perform as described below.  There was no demo included and users had no prior exposure to the website and Bracketracker as a whole.

User Testing Description:

  • Briefing
    • Competing against friends is fun, but putting together a formal tournament is often a tedious task. Organization through methods such as email and Google Docs, or even paper and pencil are time-intensive and have low degrees of automation. BrackeTracker is a site that aims to fix this issue by streamlining the creation, upkeep, and management of these competitions. On our site, you will be able to create tournaments, invite your friends to them, visualize the progress of tournament members, and keep track of match outcomes, head-to-head records, and more. Through use of our site, we hope to help take the hassle out of tournament organization so you can spend more time playing and less time worrying! 
  • Scenario Tasks

    Create a Tournament  

    Search for/Join a Tournament  

    Update a Tournament  

    Manage a Tournament  

    View a Tournament  

    Create a round robin tournament with your friends Moe and Curly  

    Join the "Office Ping Pong" Tournament  

    You have completed your match against Moe. Update the score in the tournament  

    Make Curly an Admin for the tournament and then boot Dave from the tournament  

    Check the status of the "Office Ping Pong" tournament  

  • Observations of Usability Problems & Possible Solutions

User

Usability Problems/Points of Confusion

Possible Design Changes

User 1

  • Create a Tournament
    • Problem locating "Create Tournament" button at the bottom of the page.  Thought it should/would be at the top of the page next to the Tournaments label.  (Monitor was fairly large resulting in little content at the bottom of the page, so eyes were not drawn to tournament button).
    • When inviting members, user expected that pressing "Enter" on the keyboard would result in adding another member.  However, the names had to be comma delimited
  • Join a Tournament
    • No problems
  • Update a Tournament
    • Thought that check boxes on the side panel had to be marked to update the players' score, resulting in slight confusion when there was no visible change. Quickly recovered as soon as he hovered over the round-robin matches matrix.  No problems with the score input. 
  • Manage a Tournament (make admin/boot player)
    • No problems
  • View a Tournament
    • No problems
  • Create a Tournament
    • Re-locate "Create Tournament" button closer to the top of the page.
    • Provide clearer instructions for inviting multiple users, such as 
      • indicating with instructions that names should be comma delimited
      • having the site automatically split user input with line breaks 
      • require manually adding a new input field for each invited member
  • Join a Tournament
    • no changes
  • Update a Tournament
    • Although there was some initial confusion, everything seemed to make sense after a minute, implying that it would be easy to use/remember for the next time.
  • Manage a Tournament
    • No changes
  • View a Tournament
    • No changes

User 2

  • Create a Tournament
    • same issues as User 1
  • Join a Tournament
    • No problems
  • Update a Tournament
    • same issues as User 1
  • Manage a Tournament (make admin/boot player)
    • No problems
  • View a Tournament
    • No problems
  • Other
    • Was not immediately clear that the tournaments displayed on home page were users' own tournaments. (Missed reading the "Your tournaments" label due to relatively small text size).
  • Create a Tournament
    • Re-locate "Create Tournament" button closer to the top of the page.
    • indicate with instructions that names must be comma delimited
  • Join a Tournament
    • no changes
  • Update a Tournament
    • Although there was some initial confusion, everything seemed to make sense after a minute, implying that it would be easy to use/remember for the next time.
  • Manage a Tournament
    • no change
  • View a Tournament
    • no change
  • Other
    • re-format "Your tournaments" label to make more visible.

User 3

  • Create a Tournament
    • Confusion when inviting participants to the tournament.  Thought that both the username and email boxes had to be filled out.
    • Also felt that the Invite Member and Create buttons should be larger/more noticeable.
  • Join a Tournament
    • No problems
  • Update a Tournament
    • Initial confusion regarding ability to indicate a winner with a lower score, but realized after a few seconds that it made sense (eg. golf scores). 
  • Manage a Tournament (make admin/boot player)
    • Expected some kind of feedback on the spreadsheet itself, not just the sidebar
  • View a Tournament
    • No problems
  • Other
    • Overall just wanted more feedback for the actions performed.
  • Create a Tournament
    • Make it clear that you only need to fill out either usernames or emails box
  • Join a Tournament
    • no changes
  • Update a Tournament
    • Although there was some initial confusion, everything seemed to make sense after a minute, implying that it would be easy to use/remember for the next time.
  • Manage a Tournament
    • add more visual feedback on the player grid
  • View a Tournament
    • no changes

User 4

  • Create a Tournament
    • Also commented on the ambiguity of usernames/emails. 
    • Thought the space on the side of the screen was largely wasted (no need for a full page for people's names, etc)

  • Join a Tournament
    • No problems
    • Felt that tournament panels on the home screen should have had more information
  • Update a Tournament
    • Thought something would happen when clicked on player's names in the grid, but soon figured out how to update scores. 
    • Thought that Larry's row should stand out from others since that's the name of the user.  
  • Manage a Tournament (make admin/boot player)
    • same issue as User 3
  • View a Tournament
    • No problems
  • Create a Tournament
    • Make it clear that you only need to fill out either usernames or emails box
  • Join a Tournament
    • no changes
  • Update a Tournament
    • Although there was some initial confusion, everything seemed to make sense after a minute, implying that it would be easy to use/remember for the next time.
  • Manage a Tournament
    • provide more visual feedback
  • View a Tournament
    • no changes
  • Overall
    • provide more dynamic feedback of actions

Reflection

Discuss what you learned over the course of the iterative design process. If you did it again, what would you do differently? Focus in this part not on the specific design decisions of your project (which you already discussed in the Design section), but instead on the meta-level decisions about your design process: your risk assessments, your decisions about what features to prototype and which prototype techniques to use, and how you evaluated the results of your observations.

slkdjf

asldkjf

  • No labels