User Interface Design – Tablet MOBA

I thought about how impressive Infinity Blade II was on the tablet, and I dreamed up the idea of having other high quality games on tablets, especially starting with the iPad 3. I thought about how unique the tablet interface was, and wondered if it were possible to create a user interface for a “gamer’s game.” I thought about what kind of game might be possible with the technology, and concluded that a simple MOBA may be possible. The big issue with a MOBA however is the flow, control, and interface need to be precise and easy to understand. With a tablet, this proves to be difficult because your fingers aren’t always as accurate as mouse precision. Regardless, I thought it would be a fun challenge to dream up a potential starting point for an interface for an imaginary MOBA that could be played on a tablet.

(My Designed UI Tablet Quick Mockup – Game Image, Minimap, Portrait, and Team bar are from DOTA2. Item icons from League of Legends. Click image for larger viewing.)

The image above is a rough HUD template that could be used as a starting point. I didn’t want to the interface to feel any less like a computer-based MOBA just because it’s on a tablet. Granted, this took several iterations to actually design a feasible interface, as I constantly ran into a variety of issues that a MOBA on a computer never had to deal with. For example, in a traditional MOBA, players tend to micro-manage their character’s movement by rapidly clicking on the map near their character. For any hardcore gamer, this is incredibly important, and needed to translate smoothly to a tablet interface. Obviously, you could allow the player to tap on the map and the character moves, just like you would with the mouse. While this should be allowed, by having the player constantly tap on the map, their hand would cover a fair portion of the bottom corner of the screen. This opens the player up to being killed (ganked) by their opponent, seeing as the player’s hand could block line of sight from that direction. This seemed really unfair, making tap-to-move reserved for special situations, such as moving to a specific point across the map.

(Image reference for how a gamer may hold their tablet during gameplay.)

To solve this issue, I designed a virtual pad in the HUD, which would react similar to a pad or joystick on an Xbox controller. This way, the player could still micro-manage their character, but their hand wouldn’t always be in the field of view.

Another major issue with a MOBA is camera control. In a MOBA, you can control the camera by locking it to your character, click a location on the minimap, or move your mouse cursor to the edge of the screen (with the camera moving in that direction). Of course, since a tablet doesn’t have a mouse per say, the edge screen movement would be far more difficult to use, as well as potentially creating the same hand-blocking problem as before. The screen edge problem could be solved however through the tablet-specific functionality of dragging your finger. By dragging your finger across the field of view, you can move the camera a short distance in the direction you dragged. Theoretically, this would produce a similar effect that screen edging would provide. Taking from the standard MOBA, you could relocate and even lock your camera by tapping the character portrait in the main HUD, as well as moving the camera through the minimap by dragging your finger to the location.

(DOTA2 reference for standard ability icon locations on a computer platform.)

The last major issue was how to use abilities. When you look at a standard MOBA, the abilities are located in the bottom center of the screen. This is great if you have a mouse or keyboard, but having to stretch your thumbs across an entire tablet could become tiresome. Aside from having the abilities at the bottom edges of the screen, which is already being occupied by the minimap and virtual pad, the best place to have them was on the side of the screen. This allows for quick and easy access to each ability, provided they are slightly transparent, and creates visibility on the screen.

**Note: I believe having a righty / lefty option for players to choose from for HUD directional layout would improve player experience.


Below is a list of interface actions that I designed based on the anticipated needs of the players who would be playing this imaginary MOBA on a tablet:

– Player Movement –

1) Tapping on Map in Viewport – Move character to tapped location.

2) Dragging on Virtual Pad – Constantly moves the character relative to the finger location on the pad.

– Player Actions –

1) Tapping Enemy Unit – Auto-attack tapped target.

2) Tapping Single Target Ability + Unit – Use the selected ability on the tapped unit.

3) Tapping Area of Effect Ability + Viewport

– Step 1: Tap AoE ability icon.

– Step 2: Tap location in viewport. An AoE circle / icon would appear at tapped location. This could be repositioned as many times by the player as they feel necessary.

– Step 3: Re-tap the initial AoE ability icon. The AoE ability now activates.

4) Tapping an “On-Activate” Item – Activates the item ability.

5) Tapping Teammate Icon – Targets / Selects unit.

– Camera Control –

1) Dragging on Map in Viewport – Moves the camera slightly in the direction dragged.

2) Dragging on Minimap – Drags viewport around to current finger location.

3) (Single) Tapping Character Portrait – Returns viewport to character.

4) (Double) Tapping Character Portrait – Locks camera to character.

5) (While Camera Locked) Tapping Character Portrait – Unlocks camera.

– Miscellaneous –

1) Tapping “Stats” box – Shows more detailed stats window.

2) Tapping “Gold” box – Opens up shop window.

3) Tapping K/D/A – Opens gamewide K/D/A window.

4) Tapping Minimap – Pings minimap at tapped location.


~ by rhickman-design on April 16, 2012.