Designing Fake Illusions’ Accessibility

August 14, 2020

Fake Illusions title screen.

There have been a lot of games about opti­cal illu­sions recent­ly, but most of these have focused around impos­si­ble geom­e­try in Esh­er-esque envi­ron­ments. How­ev­er, many more inter­est­ing visu­al phe­nom­e­nons are still unex­plored in games. I had the idea of hid­ing “fake” opti­cal illu­sions inside real ones, and hav­ing the play­er point out the cheater. After an ini­tial pro­to­type with a few illu­sions, I’ve spent the last year and a half work­ing on expand­ing this idea, and I’m cur­rent­ly prepar­ing it to launch on Steam soon!

Because the game idea is so unique and visu­al-focused, it runs at a high risk of being very inac­ces­si­ble to play, for exam­ple for peo­ple with bad eye­sight, col­or­blind­ness, or oth­er hand­i­caps. I have some expe­ri­ence with this sub­ject when design­ing the acces­si­ble pre­ci­sion plat­former Mobil­i­ty, so I want­ed to ensure the same acces­si­bil­i­ty for this game, even though the two game ideas are wild­ly dif­fer­ent. Today, I’d like to run through my design choic­es for keep­ing Fake Illu­sions acces­si­ble while still embrac­ing min­i­mal­ism and surrealism.

Simplicity

Fake Illu­sions fea­tures very lit­tle text: the logo, an epilep­sy warn­ing and the cred­its. This makes a cou­ple of things more dif­fi­cult to design for me (most­ly the tuto­r­i­al and menus), but it gen­er­al­ly pays off since play­ers are not required to speak a cer­tain lan­guage to play. Also, you don’t have to wor­ry as much about font sizes & con­trast, but just to be sure, all text in the game is always rather large and has an outline.

Sim­i­lar­ly, the game can be con­trolled com­plete­ly with just the mouse and left mouse but­ton, with Escape being the only oth­er rec­og­nized but­ton. The sim­plic­i­ty of the con­trols allows play­ers to focus on the game instead of on the input methods.

Screenshot of the game, showing a number for each arrow.

The game fea­tures almost no dex­ter­i­ty elements—quite the oppo­site, the game rewards con­cen­tra­tion and thought­ful answers instead of brute-force or quick reac­tions. The num­ber next to each illu­sion allow mul­ti­ple play­ers to dis­cuss the puz­zle more eas­i­ly. Any time the play­er changes a set­ting or makes progress, the game autosaves so the play­er can quit at any time with­out los­ing progress.

Most of these fea­tures were imple­ment­ed and stan­dard­ized rather ear­ly, and as such, all of these seem­ing­ly small design choic­es real­ly bring acces­si­bil­i­ty into the core of the game’s design.

Colors

Most opti­cal illu­sions require the max­i­mum amount of con­trast you can get to achieve the strongest effect, mean­ing you’re often required to use black or white. I expand­ed this mono­chrome style even to illu­sions that do not nec­es­sar­i­ly require it, mak­ing the game as col­or­blind friend­ly as it can be with this game­play. In the rare case that an illu­sion type still trips some­one up, the play­er can sim­ply skip the illu­sion (we’ll get to this lat­er) or change the settings.

Example of an illusion that would normally be color-based, but is grayscale in this game.

Some­times the game breaks from this style for con­trast col­ors: cross­es are red while check marks are green. There’s also a sin­gle case where an illu­sion in the game does not work in mono­chrome, and keeps its orig­i­nal col­ors. Alto­geth­er, this allows for an art style that looks min­i­mal­ist and uses a lot of prim­i­tive shapes, which has the added side effect of keep­ing the scope of the art­work small enough so I can make all of the game’s art assets by myself.

Difficulty

Since this game is very focused on spot­ting visu­als, you have to take into account that not every­body’s eyes or screens are equal.

One of the playable illu­sions in the game is the Her­mann Grid, where play­ers have to find an actu­al gray square in the inter­sec­tions between larg­er black squares. When I was playtest­ing the game dur­ing a net­work lunch, I noticed that the “fak­er” gray square was not vis­i­ble on this screen. Appar­ent­ly, the mon­i­tor ignored the very light shade of gray and turned it into full white. For this rea­son, the bright­ness slid­er was very impor­tant to add.

Fake Illusions settings screen with the difficulty slider & settings button displaying a smiley.

This game has a dif­fi­cul­ty slid­er that indi­cates how much the fak­er is allowed to stand out. At the default lev­el it offers a fair chal­lenge, but it can be set much hard­er but also much eas­i­er. The range on the slid­er is actu­al­ly pret­ty wide, with the extremes mak­ing the puz­zles either triv­ial or near­ly impos­si­ble, to suit every type of play­er. I think this offers a much more dynam­ic con­trol over dif­fi­cul­ty com­pared to Easy/Medium/Hard set­tings that are cur­rent­ly the stan­dard in many games. The slid­er appears in the set­tings menu, but also in-between lev­els while play­ing the illusion.

If the play­er changes the dif­fi­cul­ty beyond a cer­tain point, a smi­ley (or frowny) in the inter­face indi­cates this. This is most­ly to make sure that the play­er knows it’s a glob­al­ly applied set­ting and to remem­ber them they’ve set it to a non-default val­ue, and that they can fol­low a bread­crumb trail to the set­tings menu where they can adjust it back.

Progression

To com­plete Fake Illu­sions, you only need to beat around half of its con­tent. Mean­ing you don’t have to play every illu­sion if you don’t want to, for what­ev­er reason.

Fake Illusions intermission screen.

The game encour­ages the play­er to take breaks, or at the very least, switch between illu­sions from time to time. There’s an inter­mis­sion screen each time the play­er beats a lev­el of the illu­sion, and if the play­er has unlocked some­thing new in the mean­time, an excla­ma­tion mark is dis­played on the “back to menu” but­ton. Then the same excla­ma­tion mark is dis­played on the thing the play­er unlocked in the lev­el select.

At first the pro­gres­sion worked that only a ful­ly com­plet­ed illu­sion would unlock oth­ers. But I changed it so that every com­plet­ed lev­el (each illu­sion has around 5) would add up to unlock things. Play­ers can still beat every­thing if they want, but it gives those who might get stuck more free­dom to con­tin­ue towards the end of the game.

Level select with an exclamation mark on one of the levels.

As a final detail, the last lev­el in the game is the Shuf­fle mode, which gives the play­er hard ver­sions of ran­dom illu­sions. The play­er will only encounter illu­sions here if they’ve already beat­en the first dif­fi­cul­ty of that illu­sion ear­li­er, to make sure they only get puz­zles for which they’ve already been onboard­ed. It’s a small fea­ture, but one of which I’m cer­tain will ease frustration.

Scaling

One thing Fake Illu­sions has that not many games do, is hav­ing a ful­ly re-scal­able win­dow. The game tries it’s best to fit in at a 16:9 res­o­lu­tion, and also fills parts of the win­dow that would nor­mal­ly be out­side the 16:9 range. As a result, the game’s graph­ics fit no mat­ter at which res­o­lu­tion you play.

Screenshot of the game in a very vertical resolution.

There’s also a zoom slid­er, in case you’d pre­fer to play the game at a dif­fer­ent or pix­el-per­fect zoom lev­el. The slid­er only appears when the win­dow is larg­er than its default res­o­lu­tion (which is 1280x720), because the win­dow can also scale a bit small­er than that for small­er win­dows or screens. (The Steam Hard­ware Sur­vey is a very good guide­line for know­ing exact­ly what kinds of screen widths and oth­er fea­tures to sup­port.) I can imag­ine peo­ple will want to set the zoom lev­el low, since they’ll have to move the mouse less, so most of the but­tons and hit­box­es in this game are quite big to help these players.

Final Words

The final thing that I’d like to talk about, is adver­tis­ing your acces­si­bil­i­ty fea­tures on your store page.

When look­ing up info about games I’m inter­est­ed in, I gen­er­al­ly like to know which set­tings are avail­able in the game so I know how acces­si­ble it is and how much I (as a play­er) am allowed to tweak. But for most games, this info is not read­i­ly avail­able, requir­ing me to dive into reviews or social media to fig­ure out what I can or can’t change.

A screenshot of the game's store page with the following text:  "Accessibility info, Color blind friendly: the game uses only greyscale, red and green colors, with adjustable brightness. Illusions that require you to spot color differences can be skipped. Textless: Very little reading is required to play Fake Illusions. Autosave: Quit the game at any time and continue where you left off next time you play. Difficulty: The game is designed to be difficult but fair. You can also set the "fake" illusion to be easier to harder or spot in the settings. This is also indicated with a smiley in the interface. Controls: Completely playable with just the mouse and left mouse button (no keyboard/controller support)."

Screen­shot of Fake Illu­sion’s Steam page.

So if you want to sig­nal that your game was designed to be acces­si­ble, please put this info up on the store page, front and cen­ter! The Game Acces­si­bil­i­ty Guide­lines also rec­om­mend you put this info in an easy-to-find loca­tion (prefer­ably also in-game). You can­not make the game acces­si­ble for every­one, but at least you can expand the range of peo­ple who can play the game, and set the expec­ta­tions for your users so they know what they can (or can­not) expect.

Thank you for read­ing, and let’s make all games more accessible!

Learn more

Wordy tuto­ri­als need to end. Why Game Design­ers should take a “Vow of Silence” by Hamish Todd
Game Acces­si­bil­i­ty Guidelines
Includ­i­fi­ca­tion by AbleGamers