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 sur­re­al­ism.

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 out­line.

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 meth­ods.

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 set­tings.

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 illu­sion.

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 rea­son.

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 frus­tra­tion.

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 play­ers.

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:

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 acces­si­ble!

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 Guide­lines
Includ­i­fi­ca­tion by AbleGamers


  or subscribe here!