Versions Compared

Key

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

...

After joining the game, Kevin decides to look at George’s profile. He clicks on George’s name in the games list and comes across Geroge’s profile page. The profile page includes George’s personal information as well as a list of his future games and past games. Near George’s name is an Add Buddy button which Kevin clicks. (Side note: When Kevin views his own profile, the Edit Profile button replaces the Add Buddy button). The right side pane displays all of George’s buddies. Clicking on a buddy will redirect Kevin to that buddy’s profile page.

Design

...

2

When Kevin arrives on the home page he is greeted with an array of active games for him to join. They appear in large boxes arranged in a three column array. To show more rows, Kevin can press the button labeled "Show more games" that will set off a javascript action. To search through the different games, Kevin enters the location he would like to play at and the time at which he would like to play. He can set a minimum Player Count to filter out games that aren't heavily populated. Using a sliding range arrows, Kevin can set an upper and lower bound on the range of Skill levels he would prefer to play with. Clicking on one of the boxes will bring up a game details page.

...

The boxes on the home page make the games very visible. Given that the core functionality of the site is to connect players with games that they would be interested in, this design decision makes sense. The parameters are laid out logically to enable good learnability. If we use javascript on the filter selections, then the user would be able to figure out the implications of each option with great immediacy. However, some efficiency is sacrificed with the design. Many games cannot be viewed at once when the games take up large screen area. It wouldn't make sense from a speed standpoint to load all available games at once so a button must be clicked to display additional games. An expert user might rather have a large list of games without the box interface to assimilate more information quickly. The drop downs on the time option and the slide bars on the skill range will help limit error prevention. If we can implement a standard list of valid locations we can also do some error prevention on the location criterion.

Design 3

This design uses simple lists to display all the information. This design mostly relies on text to convey the information. Lists are sortable, and the list of games is searchable through filters. 

Storyboard

Task: Register

[page_login.jpg|^page_login.jpg]


Kevin makes his way to the Pickfind site, and he encounters the login page. He must first login or create a new account in order to view the game listings. Kevin registers for an account by clicking on the “Register” link. To register, Kevin is led to the “Profile Page”, where he is asked to fill in his personal information and preference in order to create his profile.

Task: Create Game

[page_mycreategame.jpg|^page_mycreategame.jpg]

Kevin’s friend, George Karl, creates a new game so that others can join. He fills in all the necessary fields, and creates it so that the game can be found on the public listings. 

Task: Search/Filter for Game

page_main.jpg

After Kevin registers, he is directed to the main page, where has can see a list of all available games at his location and has the option of creating and joining games. The menu bar on the left allows the user to access their profile, buddy list, game history and also to create a new game. Kevin uses the search filters to find the game created by George Karl. Wanting to get more information about the game before joining, so he clicks the “Details” arrow. 

Task: Join Game

page_gamedetails.jpg

Kevin browses details about the game, and finds that it is a good match for him. He sees that his friends are playing, so he decides to join. 

Task: Add buddies

page_mybuddy.jpg

Kevin then decides to add the other players signed up in George Karl’s game to his buddy list. After adding them, he goes to see his entire list of friends by clicking the “My buddies” link on the left menu. 

Task: Edit Public Profile

page_myprofile.jpg

Kevin, thinking he should put up a little message/note to introduce himself on his public profile, goes back to his profile page to update his information.

page_mygames.jpg

Kevin goes through the main listings and joins a few more games he’s interested in. Before closing the PickFind window, Kevin does a quick check on the status of his games. He clicks “My Games” on the left menu, and sees a list of games he has joined. Happy with what he sees, he closes PickFind, and goes to study for a looming mid-term. 

Design Analysis

Pros:

-          The left menu allowing access to the user’s profile, buddy list, game history and game creation is continuously visible and easily assessable.

-          Representing information with lists makes the UI more organized, easily sortable and selectable.

-          The view is compact, easily understandable, and fairly simple.

-          The design scales well to large data sets (ex. a large number of games).

Cons:

-          Not a very visual design - users need to read through lots of text for each listing. The compact displaying of information may make the site harder for a user to process and manipulate information.

-          Design has very little direct manipulation and is not very flexible.