Versions Compared

Key

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

...

Entire stack selection
Prototype: double click
Final: click inside green circle that appears on stack
We originally thought that double clicking to select the entire stack would be a very useful feature for efficiency. However after the paper prototype and heuristic evaluation, we received criticism that this was not obvious and inconsistent functionality. Therefore, we decided to change our approach to focus on making this action more visible. Users now can select the entire stack by clicking on the green circle that appears on the stack. An alternative design we considered was adding a card fold tab to the stop of the stack (analogous to a page fold tab found in e-books).

Wiki Markup\[img: select-all.png\]

Hover mouse icons
Prototype: none
Final: present
One critique we received from our Heuristic Evaluations was the lack of affordances showing interactivity. We decided to change the mouse cursor into a hand pointer when the mouse hovered a card to denote a clickable action.

Select part of stack
Prototype: none
Final: present
This feature was added to give users more control over manipulating their deck. We hoped to increase visibility and feedback by showing the size of each stack.
unmigrated-wiki-markup
\[img: select-some.png\]

Re-stacking cards
Prototype: none
Final: present
This feature was also added to give user more direct control when manipulating stacks on the table. We used a green highlight border to give feedback when a stack was dragged near another stack. An alternative design would have been having a dragged stack pre-snap onto the receiving stack when nearby.unmigrated-wiki-markup

\[img: restack.png\]

Right click select and menu
Prototype: pop-up menu
Final: select entire stack + pop-up menu
One major criticism we received during our Heuristic Evaluation was how right clicking on cards brought up a pop-up menu but did not select that card, leading to confusion. We fixed this and added the additional function of also selecting the entire stack for efficiency purposes.

...

Play from hand
Prototype: double click on card in hand area
Final: drag and drop
We discovered this feature to be very limiting during Heuristic Evaluation because our first prototype only allowed playing one card at a time. To expand this feature, we allowed users to play multiple cards simultaneously. Also, for consistency, we made playing cards from the hand also drag and drop.

[img: play-mult.png]

Selection box
Prototype: none
Final: present
We added this feature to the final version to enhance user control and efficiency. Users would be able to effectively group multiple stacks quicker. However, we observed that this function was rarely discovered and therefore rarely used during our User Testing.

[img: selection-box.png]

Implementation

We implemented MetaDeck in Java, using primarily swing components for the front end. We used a standard client-server message protocol, and had a standard MVC architecture on the client side. The model contained all the data that was persistent in the game state, meaning that the different players' clients should have models that are eventually consistent with one another. The view contained the state that was specific to one client, such as the cards that player is currently selecting. Only that player can see the state contained in the view; it does not propagate to their other players' clients. The controller contains all the input listeners, and processes them, changing the model and view appropriately. On the server side, there is a lock for each stack of cards, ensuring that two clients cannot try to move the same cards at the same time. The server also contains its own model, which is necessary since new clients must be able to request the full game state from the server.

...