Design
Remember to include images!!!!!
Our final design is composed of 3 main tasks:
...
In GR5, the list implementation was replaced by drop-down menus (as suggested by one of our heuristic evaluators). 6 menus were displayed -- 3 for location preferences and 3 for cuisine preferences, with each menu set to a default va
lue value of "Random". This made the system model more transparent to the user, allowing them to select up to 3 preferences for each category without having to provide error feedback for unsupported tasks. With the drop-down menu, the task of adding preferences was made simpler and the task of removing preferences no longer became an issue. The drop-down menus clearly provided more flexibility for selecting preferences and clarified the user model for players.
...
During the paper prototyping session (GR3), the betting task was designed as 3 separate screens for each category of location, price, and cuisine. That meant each player had to navigate through 3 screens to place their bets, lengthening the betting process. Furthermore, because the preferences were split up across 3 screens, it was hard for the user to visualize the distribution of their chips among the 3 categories, so they would often have to move back and forth between bet
ween the screens to recall their earlier bets. In GR5, users were not allowed to undo their bets if they changed their minds or accidentally dragged the chips to the wrong preferences. As a result, players had to start over with the entire betting process if they made one small slip.
...
- Lack of user control and efficiency (spinning the wheel)
- Lack of visibility visibility for decisions
- Lack of responsiveness of spinner
...
To make the process more efficient while still preserving the element of fun, we allowed users to tap the wheel to stop the spinning at any point. FurthermoreFurthermo
re, a pop-up message was dispalyed displayed at the center of the screen (where the user's attention was focused) to display the decision for each category at the end of each spin. We also designed the wheel to be more responsive to the orientation and speed spe
ed of the user's flick.
Implementation
Setting Preferences
...
- The betting screen was implemented by drawing texts, numbers and figures on an Android canvas. The content of texts, values of numbers and the position of figures are decided by user’s actions, which are detected by tracking the position and behavior of user’s finger.
- The whole screen is divided into different rectangular areas (I call them boxes) that represent different alternatives in each category(location, price, cuisine) as well as the three piles of chips(5, 10 and 25). Each box keeps record of the number of each type of chips currently inside the box. The numbers (chips left, total points for a category) are updated based on the record of each box.
- OnTouch event is used to capture user’s actions. When the user taps the screen, the app checks if the position is inside any box and changes the value of a status variable to record the starting box of current action. If the starting box has chips, when the user moves his finger, there is going to be a chip following his/her finger. At the same time, each box recalculates the number of chips in it or the total points of chips left to decide the updated number of chips to show in the box. When user’s finger leaves the screen, the position is checked and we decide based on the position whether or not it’s a effective action to put the chip in a new location(box). Then all the numbers and status are updated and redrawn.
- To make the th e app more playable and enable all the direct manipulations that a user can expect. The betting screen enables users to “drag” chips instead of just clicking the chip and clicking one destination. Also, it enables users to move chips freely, including moving from chip piles to betting table, moving within the betting table, removing from the betting table.
- To make clearer feedback of wrong actions, vibration is added when the user fails to put a chip in an effective place.
- Making it more realistic by making a chip pile empty when the chips left is smaller than the face value of a pile.The betting screen was implemented by drawing texts, numbers and figures on an Android canvas. The content of texts, values of numbers and the position of figures are decided by user’s actions, which are detected by tracking the position and behavior of user’s finger.
...