Pinkstratdesign

Classic Videogames Design

User Interface (UI) Design and User Experience (UX) Design  of a serie of classic videogames designed for multi-user tables.

Classic Videogames serie - UX Design

 

SOFTWARE WEBSITE

-

launched on

March, 2016 - Installed on an important cruise ship

keywords

UX Design | Social Interaction Study | Multitouch Applications | Wireframing | Sketching |  Usability Test

 

 

This is a 6-months project for Practix: I worked on the UX-design of a 10 classic- games-suite. 

  • Maijhong;
  • Poker;
  • Blackjack;
  • Solitaire;
  • Chess;
  • Backgammon;
  • Checkers;
  • Memory;
  • Air-Hockey;
  • Sudoku;

The suite is installed on 14 multitouch tables on an important American Cruise Ship.

During a preliminary study I developed an explainatory design in order to demonstrate visually the reachability of every User Interface element on the table (Figures below).

Furthermore, I developed the games' flow-charts (chart 1), I investigated and looked for interaction patterns  in order to create consistency across different games. 

In the next section I will describe an example of pattern.

Transitions between personal and group work

In our games both personal activities and group activities are involved in the user interaction on the multitouch screen. For example, we investigated the usage of two different messages inside personal areas for personal activities and  inside a centered Group Dialog Windows for group activities. Location and orientation of these messages are crucial to attract the attention of the user or the group when involved in the interaction.

Example of Personal to Group Interaction - Closing action of an application

Closing an application is always a delicate task to design properly, especially in a group workspace. An “Exit button” (Fig.1) is to be found in each personal area (Fig. 2) around the table, oriented toward the owner of the area: every user can decide to press it independently (Personal Decision). 

Figure 1 - EXIT BUTTON inside personal area of the user

Figure 1 - EXIT BUTTON inside personal area of the user

Figure 2 - Personal user’s area: each user has a personal workspace area where controls are grouped.

Figure 2 - Personal user’s area: each user has a personal workspace area where controls are grouped.

Once EXIT is selected by one of the customers, a lighter layer will obscure the interface and highlight the Group Dialog Window. The aim of this “separation layer” is to create a clear cognitive and interactive contrast between personal and group decisions. The Group Dialog Window is placed at the center of the screen and it continuously rotates by 360°. Both position and orientation are neutral if compared with user’s positions around the table (Fig. 3-4).

Figure 3 - Example of Group Dialog Window

Figure 3 - Example of Group Dialog Window

Fig. 4 - Group Decision wireframe with silhouettes

This design pattern was developed in order to elicit a urgency of cooperation between users around the table in order to push them to make a shared decision.

Usability Testing

We tested our final design with 4 users with great performances across all games. The satisfaction on the ship after several months and thousands of users is rated at 4 across 5 stars. Here a short resume video of the usability test:

 

Low-Fidelity Wireframes

 

What we’ve accomplished:

 

1.

We worked with the Customer's design team remotely (They are from the US);

 

2.

A classic game serie has been tested by users before the release;

 

3.

The complete satisfaction of the customer, an important cruise company;

 

4.

We'll start the development of other games on autumn 2016.