Back to MetaDeck Project Home

GR3 - Paper Prototyping

Overview

We sequentially tested two paper prototypes on six different users. Each user is referred to as User A to User F. Users A, B, C tested prototype version 1 and Users D, E, F tested prototype version 2.

Due to the nature of our application, we wanted to emphasize testing the usability of our user interactions. As such, we focused primarily on trying to figure out the user's intuition for performing various interactions. Our goal is to have common actions be highly intuitive, so this prototype is our chance to test if they are intuitive enough. Our prototype is therefore low fidelity in breadth; the side panels are not very accurately represented since they should not be used in the tasks at all.

Unfortunately, one problem of the paper prototype is that it is not a computer. The user may not apply the same intuition as he would if he were using a computer application with the same mechanics. Therefore, we were not too picky with the details of running the prototype. If the user seems to be performing the right interaction, we let it pass. We did not expect users to be very accurate with their finger pointers, for example, in dragging in the exact position of the card. Most of the users ended up just saying general things like "I will drag this card into the middle."

Summary of Interactions

With cards on main table

Input

Action

left click

select top card at location

double left click

select entire stack of cards at location

nothing selected, drag

select box

card(s) selected, drag

move selected card(s)

nothing selected, right click

nothing

card(s) selected, right click

flip selected card(s)

card(s) selected, right click hold

enter rotate mode

With cards in player’s hand

* Note: In the hand, up cards are selected cards. Down cards are unselected cards.

Input

Action

left click on down card

puts card up

left click on up card

puts card down

left double click on down card

puts card up

left double click on up card

puts card down

right click

nothing

left drag on down card

moves grabbed card

left drag on any up card

move all up cards

Briefing

Metadeck by Haitao Mao and Victor J Wang

Metadeck is a card playing user interface that emphasizes user control. The main objective is to provide users with intuitive interactions with a virtual deck of playing cards in free-form, mimicking the experience as if users were playing with an actual deck of cards.

You have three tasks:

  1. Shuffle the deck of cards.
  2. Deal deck of cards evenly to 4 players. Every player should end up with 13 cards.
  3. Play cards from your hand onto the table (as instructed by the facilitator).## First, player one card that the facilitator picks.## Second, play a group of cards that the facilitator picks (for example, all the hearts in your hand).

Important things to keep in mind:

  • Pretend that your hand is the mouse cursor to interact with the UI. Feel free to move your hand around and point to where you want to click
  • Please tell us when you want to single click, double click, left click, right click, or drag your simulated mouse cursor (i.e. your hand)
  • Do NOT pick up the playing cards - the facilitator will perform all the system's changes for you

Scenario Tasks

1. Shuffle the deck of cards
2. Deal deck of cards evenly to 3 other players
3. Play cards (as instructed by the facilitator)

Version 1 Testing

Observations
  • User A felt our had difficulty selecting the entire deck and became visibly flustered
  • Users B and C were surprised when single right click on a card flipped the card over rather than show a pop-up menu
  • During dealing, Users B and C felt manually giving each player a single card sequentially was very inefficient, both asking “is there a faster way?”
  • Users C had difficulties selecting 13 cards simultaneously from the stack using dragging
  • User A and C expected to use the shift key in parallel with left clicking on cards to select multiple cards. Both were disappointed when nothing happened.
Usability Analysis
Visibility
  • not all options visible. users had to explore and use trial and error
  • ungreying of shuffle button not obvious
Learnability
  • users had difficulty selecting groups of cards in a stack
Efficiency
  • manual dealing took long time, “faster” method required verbal hinting
  • playing multiple cards simultaneously from hand was enjoyable
Errors
  • users expected right click to produce pop up menu, but card flipped instead. easily recoverable error however

Version 2 Changes (From Version 1)

We made three major modifications to the second iteration.

Modification 1) Pop-up Menu

  • Right click on selected cards produces pop-up menu of options.
  • Menu options include Flip card, Shuffle, Deal Evenly, and Give to Player X

Modification 2) Simpler group selection of multiple cards in a stack

  • Left click on card in middle of stack inclusively selects all cards above.
  • This also removes the functionality of selecting an arbitrary card from the middle of a stack. We figured this is not a common task in playing cards.

Modification 3) Quick play of cards in hand

  • Double click on “down” card in your hand immediately plays that card onto the table, to a position just in front of you.
  • Double click on “up” card plays all “up” cards onto the table.

Version 2 Testing

Photos

Menu

Dealing

Playing

Observations
  • Users D, E, F all selected entire deck using double click after at most 2 tries
  • Users D, E, F all efficiently dealt cards without error after performing shuffling task
  • Users D, E, F all played single desired card from hand after at most 2 tries (either discovering dragging or double clicking)
  • User F mentioned that "people don't like dragging." We found this somewhat surprising. Maybe it's because it's the paper prototype, and dragging feels a little strange to do with your finger on a piece of paper. Nonetheless, we will consider providing alternatives to interactions so that drag based interactions are not as cumbersome.
Usability Analysis
Visibility
  • menu displays all available options (even ones that are greyed out)
  • there is no indication that right clicking produces a menu, this just has to be discovered
Learnability
  • right click during shuffling task revealed dealing option for use during later dealing task
  • User E specifically mentioned that all interactions were “straightforward”
Efficiency
  • user initiation of automated actions enabled very efficient completion of shuffling and dealing tasks
Errors
  • many errors related to multiple card selection were avoided by using pop-up menu
  • error recovery was easily learned and it seems that people will not experience much frustration with fixing errors

Conclusion

In our first iteration we tried to produce a highly intuitive look and feel by having the cards behave similar to icons of their own. Multiple cards are selected by dragging a box surrounding them or double clicking. We figured this would be familiar for users because many other computer applications use this kind of selection mechanic. Cards are moved between stacks by dragging and dropping, just like icons on your desktop or files in a file manager. 

In our second iteration we took the observations from our first iteration and got rid of some of the less frequently used input options. Instead, we decided to make a right click menu contain the common tasks. Shuffling and dealing are more or less "one-time" actions, in that they are generally performed only once per round. This means that putting them away in a menu should not hinder the look and feel of the interface too much. The game itself will still feel just as natural.

  • No labels

1 Comment

    • Would have liked a bit more specific description of what card game was being played
    • Good job of prototyping a very mouse-oriented interaction
    • I would question the decision to place features in a hidden context menu, maybe a little row of buttons (icons, no text) that pop up when cards are selected? Both? Just brainstorming here.