...
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).
Implementation
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.
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.
...
- 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
- Search for/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.
- indicate with instructions that names must be comma delimited
- Search for/Join a Tournament
- no changes
- Update a Tournament
- Although there was some confusion,
- Overall - after a few minutes everything seemed to make sense. Implied that after learning how to do it once with a little trial and error, it would be very easy the second time around.
- Manage a Tournament
- View a Tournament
- as
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.
...