...
GAMES The available games are displayed as individual boxes on the main page of the site. Primary attributes are all formatted consistently in the same size, location, and color across all games. The skill level attribute is displayed as a progress bar so that users can quickly scan down the page and get a sense of the difficulty of the games. There are also question marks next to the "Location" and "Skill Level" attributes that users can click on to obtain tooltips about those specific fields. Having the information hidden simplifies the look of the box. At the same time, vaving the information display on the user's command gives control to the user. These question marks behave consistently throughout the website. The game boxes themselves are colored according to the user's role in the game. We chose to design the boxes in this way so that users will be able to quickly visually distinguish between his/her different roles in each game. We include large buttons for adjust adjusting the game itself (edit/delete) or the user's participation in the game (join/leave/watch/unwatch). We made the buttons glow when the mouse hovered over them to give more feedback to the user.
FILTER Games may be filtered according to several desire parameters. When the site is first loaded, the filters box is minimized so the user is not confronted with too much information. Clicking on Show Filters expands the box and allows the user to choose which games to display. The filter works using AJAX to keep the displayed games up to date as the user sets controlsClicking to filter the date pops up a calendar next to the mouse, making it more efficient and visible for the user to choose a date. Similarly, clicking on time drops down a list of times the user can choose. Filtering by skill level invovles sliding two buttons across a slider, which again serves to help visibility.
SHOW MORE Once the user scrolls down to the bottom of the list of displayed games, he/she can click on Show More Games to display additional games that fit the filter parameters. This button saves the page from having to load excessive information and allows the user to choose how much to display.
...
DETAILS Game names with blue links can be clicked to pop up a complete game box with full details. The remainder of the page is shaded to reduce visually conflicting information. This gives the user efficiency because instead of being redirected to a separate page containing details about the game, a simple pop up appears. This way, the user can easily close the pop up and resume his/her actions.
USER The upper right corner shows which user is currently logged in. Mousing over the name drops down a menu with which the user can use to view profile, change password, or logout. All of these tasks were grouped for similar functionality. The search bar allows the user to search through all established profiles.
PROFILE User fills in relevant personal information to create a profile viewable by the community. Large visible icons indicate capabilities to edit profile and change profile picture.
...
UPCOMING Upcoming games are displayed using the same game box structure as in the main page. This achieves consistently throughout the site and improves learnability. Game history for past games also uses the box structure.
...