Shop Heroes - Opaque UI

Shop Heroes is an item-shop game released on mobile and Kongregate in mid 2014 by CloudCade. The gameplay consists of crafting equipment for heroes, who then go on quests to find materials, which are used to craft more equipment. Players can gather in Towns to share the costs incurred by leveling up buildings, which unlock more heroes and quests.

CloudCade advertise striving for useability and superior gameplay. I understand that when they launched Shop Heroes, they were still a small studio. But their UI needs more work: it has too many screens, too many taps to start an action, too much information, and fragmentation/duplicate information. Sometimes, information is not just missing or duplicated. It's purposefully hidden, misleading, or manipulative.

Manipulating emotions

An example of UI manipulating emotions is the Roulette, which gives players one random award among 12. The UI shows each award equally likely to happen - 1 in 12, or 8% each. Yet the actual chance of keys, gems, and blueprint fragments is less than 1%. Why raise players' hopes so high if it never delivers? So they get 10 seconds of fiero after 10 months of frustration? It's as if a slot machine displayed the jackpot symbol with the same chance as others, but was actually rigged to nearly never stop on it. The gambling industry actually forbids such machines. One could argue that the Roulette is a minor mechanic in Shop Heroes, and that players may understand that it's rigged. A sincere UI would make the area of a reward on the wheel proportional to its likelihood.

Hidding information

An example of UI purposefully hidding important information can be found in the screen where players build their quest teams. Players send heroes on quests dozens of times per day. When heroes are strong enough to tackle the quest, a green smiley is displayed above their head. When they are not strong enough, the smiley turns to yellow or red, showing that they are more likely to be injured. Injured heroes are unusable for several hours, so players strive for green smileys. But each of the 8 equipment slots of each hero has a 1-10% chance to break during a quest. Therefore players equip their heroes with just enough equipment to reach green smileys, so as to minimize the costs incurred by broken equipment.

Yet players noticed discrepancies in the odds of injury. They asked on the forum whether increasing power above green smiley reduces the chance of injury. The community manager did not answer clearly at first, saying it's fun for those playing to figure out, and that it's impossible to create a tutorial for every single detail in the game. Players replied that 1) they are not asking for a tutorial but for explicit numbers to be displayed, 2) core mechanics should not be hidden, and 3) discovering 1%-likelihood mechanics is annoying and time-consuming. The community manager eventually cleared the matter, but why was this important information not explicitly provided inside the game? The in-game UI should, and can, do a better job at displaying the chance of injury, however small it is. One way would be to display the green smiley only when the chance is exactly 0%. Another way would be to display the percentage number, rounded up (0.123% would be 1%). Providing feedback through numbers is the only way that hardcore players can theorycraft and reverse-engineer the most intricate mechanics.

Hearthstone - crafting

Hearthstone has a soft currency called dust. Dust is used to purchase a desired card from Blizzard. Common cards cost 40 dust, legendary 1600. Dust is obtained from trashing cards: 5 for common cards, 400 for legendary. Players who want a specific legendary card are very unlikely to find it in a card pack. But they can trash the cards in the card pack for dust, and use that dust to buy it.

Blizzard gave a special name to purchasing with dust and trashing cards for dust: crafting and disenchanting. Yet this mechanic is far from the crafting we are used to in RPGs: no additional material is required beside dust, and all cards follow the same recipe. Rarity only increases cost. So why calling it crafting/disenchanting, and not buying/trashing? Why make a fancy UI, pretending that players are actually creating a card themselves, and not buying it from the store? I think it was so that players perceive dust as a regular game element, and not a currency. That way, players don't feel like they are purchasing dust (through card packs) with real money at all.

Blizzard actually introduced direct-purchasing (aka crafting) as a solution to what they say is a common trading-card game issue: when players obtain a rare card, they want to keep it, and they'll never trade it with other players. But that rationale is flawed. People who buy card packs will sell their duplicates if the game provides them an auction house. Blizzard probbaly did not want to go that route after their Diablo 3 auction house was overrun by gold farmers.

The search bar of Firefox 34

When I use my web browser, I am usually doing a search. I am rarely typing a URL from memory. Also, I try doing everything through my keyboard. Using my mouse means thousands of back-and-forths with my right hand every day, which cost me time and energy. And sometimes I have to look at the mouse to grab it, which makes me lose my focus on the things I was doing on the screen. For what I do, all-keyboard is better.

Up to Firefox 33, my typical web-search steps were: 1) alt-tab to web browser, 2) ctrl-K to focus on the search bar, 3) ctrl-down to select the appropriate search engine, 4) type query and enter. Step 3) is a power user step. Its goal is to save time by not using the mouse and skipping a web page load. For example, I want to know who Seth Green is. I could run the search through Google or DuckDuckGo, and then click the Wikipedia link (usually in the top 3 results). But if I select Wikipedia as my search engine, I directly land on the page for Seth Green. So ctrl-down saves me a page load and a mouse click. Some users even have more than 30 engines!

In their new search interface, called Find it Faster, FF34 basically replaced ctrl-down by a mouse click on tiny buttons. FiF saves me a page load, but it's at the cost of a mouse click. Below is a GIF demonstrating the new search feature.

Average users do not switch search engines - they always use the default one. So FiF is a feature targeted to power users, and yet it apparently forces them to use their mouse. Obviously, the feature has annoyed many users, including me.

There are two solutions. A first solution is rejecting the change: go to about:config, and switch browser.search.showOneOffButtons to false. Another solution is learning the change: the search steps used to be 3) ctrl-down, then 4) type query and enter. Now the steps are 3) type query, then 4) press tab to switch search engines, and enter. This new process is not as good as the old one: switching search engine after having typed, rather than before, loses the benefit from autocomplete/search suggestions anymore. Anyway, Mozilla should emphasize on their FiF release page that tab replaces ctrl-down.

Edit 3/17/2015: to disable it, go to about:config, and turn

browser.search.showOneOffButtons

to false.

Mobile crap - clones

This series of articles is a rant about mobile game design. It may extend to console and PC gaming, but I only talk about what I experienced through most games featured on the iPad app store in the past year or so.

Ideally, designers should keep a working recipe and incorporate new mechanics into it, or at least aim for a fresh take on an old recipe. These days, entire genres should be avoided entirely: designs involving a match-three mechanic have nearly all been done, one way or another. I covered Clash of Clans clones before, Raph Koster and others came up with a small family tree of shmups, and somebody probably covered the lineage of match-three games. I won't talk much about cloning in itself - everybody knows it is omnipresent in the game industry. So I focus on the imperfect features that cloners should upgrade or replace, but actually keep by laziness.

UI-wise, some developers are really lazy: instead of trying to improve an existing one, they just copy-paste it blindly. For example, Dungeon Keeper's UI HUD is a near-exact copy of Clash of Clans. Yet CoC had, and still has, several UI issues raised on the CoC forums by the players. For example, the default battle zoom-in forced players to always zoom-out before starting a fight. The team behind CoC fixed it, but the Dungeon Keeper team could have thought about it too. Another CoC example is the spells that remain selected when players try to deploy troops, thereby wasting a spell. One solution would be to deselect the spell after it has been cast, but this issue has not been fixed yet, and it's easy to spot with playtesters. A last example of UI laziness can be found in Plundernauts. Plundernauts adapted the item game made famous by WoW and Diablo to spaceship battles. They changed nothing to the UI when displaying equipment stats. In short, if you are cloning a mechanic, at least try to question and improve the interface.

Finally, the name. I understand that developers target a particular audience. Sometimes, this audience needs to know that the game is a puzzle game. So they make the name of their game rhyme with puzzle: Birzzle, Chuzzle, and so on. It's nice, but it looks like even the names are clones!

Solstice Arena UI

Lots of things to say about the UI of Solstice Arena (SA), an ipad MOBA by Zynga.

Gameplay of Solstice Arena

SA is a traditional MOBA adapted for the ipad. Players first pick a character among the dozen available. Characters can get various advantages by selecting/buying a potion before the game starts. Matches are 3 vs 3, and typically last from 5 to 10 minutes. One team starts on the left, the other on the right.

Players can buy equipment using coins, which they gain automatically at a rate of around 1 per second, as well as by collecting a chest standing in the middle of the map (100 coins at once per character in the team). Players also amass energies to increase their power. All the controls are based on the player's taps. Players can also send signals such as "retreat" or "attack this target" to each other.

There is no character leveling within a match: during a match, a character becomes stronger only by collecting energies and buying equipment. Completing a battle rewards a character with XP, and the player with valor points. Valor points can be used to buy characters or potions, or level up characters without fighting with them. When characters level up, the player can improve one of that character's skills. Gems are the in-game currency bought with real money.

UI problems

To get from the main screen to a game with 2 other human players takes 9 taps and about a minute of waiting when I'm not doing anything but watching a blank screen. Plus it's 10 to 20% of a match's duration! This is way too long...

Let's look at some of these 9 screens and critique them.

• 75% of the screen, in width and height, are taken by an ad.
• The left icons all have a blue background with some swords, and it takes a few seconds to distinguish them.
• The Redeem Code button is next to my nickname and level, which is itself next to my valor points, my gems, and my friends. Quite a mess.
• Communities keep the game alive - and the giant ad to join the forum says that too. Then why is the Friends button so small? Why do I need to tap the button to see which of my friends are online and I can play with?
• Logout button: Zynga has decided to not use the iOS's built-in game center, but rather forces players to authenticate through their own servers. Hence the need to log in... As a result, I can't invite the friends I'm playing with in other iOS games.

• It took me a week to spot the button to invite friends to join a fight.
• Too much information: when I'm going to fight, I do not care about the price in gems or valor points of a character. I should not have to scroll to pick Kyra, which I have unlocked and reached max level (15) with. In fact, all characters should fit on one screen.
• There is no difference between the "previous screen" button (left arrow at the top left of the screen) and the top-right corner cross. Why having both?

• There is so much information in such small font that I did not notice the potion slot in the middle of the screen.
• If "one potion is always free", why not selecting it by default and save me two clicks that I ALWAYS will do, unless I forget?

• Why displaying the small picture, and not rotating/animating the full 3D model like in the previous screen?
• Play tip: good.
• 30-second waiting time for a 5-minute match is way too much.

• The ready check is here only to check that players did not leave within the 30 seconds (or more) that they were in the queue. If you reduce the time in queue, you may not need the ready check anymore.
• If one of the 3 players does not click within 10 seconds, the whole match is cancelled, all players return at the end of the queue, and wait for another 30 seconds. The players who ready-checked should be sent to the head of the queue instead.

• My character has 100 sun for 0% cooldown reduction (what is the point of sun, then?), and 10 moon for 3.51 movement speed (then why is my character aligned with sun?). I was expecting the other way. I guess it is thanks to the fury potion, but it is quite unclear.
• Exit button is not a red cross, and is not in the top right corner.
• The head equipment bubble could target my character's head, but it's instead targeting his belly. Why? Because there is actually a much smaller and quasi transparent model superposed over my character's pelvis.

• Why is the reason I'm reporting not next to the player I'm reporting? It looks like the reason is common to both players...
• The reporting window/box does not have to overlay the victory screen. The reporting could take place in the victory screen itself.
• When reporting a player, I only see his name and the name of his character. I should also see what his avatar looked like, instead of having to remember it. I could also see some stats about that character (eg number of kills or time spent in the base). Recognition rather than recall.

[Literature] Fundamentals of Game Design, ch 8: User Experience

Rules: be consistent, give good feedback, player should always be in control, few steps to do an action, easy undo/redo, minimize physical stress, no recall, group controls and feedback elements together when they are related, provide shortcuts. No more than 2 clicks between the start/loading screen and actual play.

At all times, the player must be able to answer:

Player question	In-game solution(s)
Where am I?	Minimap, ambient environment sounds
What am I doing right now?	Visual and audio feedback cues
What challenges am I facing?	Quest or mission log
Did my action succeed/fail?	Visual cues
Am I in danger of losing the game?	HP, gauges
What should I do next?	Quest helper

First, define gameplay modes: camera perspective, interaction model (= mapping player input to game actions), and gameplay (= challenges and actions). Then, figure out which visual elements and controls are needed for each UI mode.

Interaction models can be avatar-based (FPS), omnipresent (RTS), party-based (RPG), desktop-like, or contestant (TV game shows).

Solutions for complicated game elements

Solution	Description	Example
Abstraction	Replace a detailed feature by a less accurate one, or aggregate it with another.	Fuel is never seen in racing games
Automation	Let the computer handle the annoying or repetitive parts of a process.	Path finding in RTS is handled by the AI.
Choice of automation	Let the player decide if a feature should be automated or not.	Racing games: manually switching gears is often more efficient than automatic gear.

Broad interface: all buttons are directly on the screen. It takes time to learn and remember where each of them are. Example: plane cockpit.
Deep interface: the information is categorized in hierarchies, menus, and options.
Consoles usually have deep interfaces with menus because there's no mouse pointer and few buttons given to the player. A keyboard, on the other hand, gives a lot of breadth.

The interface should be context-sensitive. Only show the possible actions and buttons in a given situation. Give also visual cues of the consequences. Example: When pointing the cursor to a tree, the pointer should change into an axe.