Reticle Designer

Intro

I wanted to design and develop a creative authoring tool for quickly making FUI reticle designs. Additionally, I wanted it to double as a sandbox for:

1. experimenting with custom UI controls and UX microinteractions
2. employing ideas from Daniel Cook's Mixing Games and Applications
3. practicing the use of SVG, Flexbox, React, and MobX

Reticle Designer is that creative authoring tool and sandbox. Those interested in applications that leverage gamification tactics will likely find the details below interesting. Before jumping into those however, here are a few examples of what can be built with Reticle Designer:

If you didn't already know, a reticle is a pattern of fine lines or markings built into the eyepiece of a sighting device (think telescopes, microscopes, and gunsights). Most of what I create are exaggerated and creative versions. If you watch or play futuristic science fiction movies and games you'll notice they often have similar reticles in their gunsights, HUDs, UIs, and dashboards.

You can launch the app prior to reading on to test your personal experience against the ideas of this article.

Mixing Games and Applications

Gamification is a bit of a dirty word, but it doesn't have to be. At its core the goal of gamification is to improve the enjoyment and user experience of an application through elements that are traditionally found in games. It's a bit of a dirty word in that many who are aware of the term associate tacky, corny, or otherwise cheap-trick implementations. Users unaware of the term subconsciously may feel disrespected as the gamification implementations suggest they'll fall for childish ploys. I can't fully disagree with those concerns. I do however believe there is great potential in gamification if done well.

Daniel Cook's Mixing Games and Applications lecture and document are a formal record of the aspects that make games fun. He ultimately asked himself, what can we learn from games to make non-game applications more fun to use? My summarized notes of his lengthier conclusion are:

• Games provide small challenges with subtle hints
• Users upon meeting and overcoming a challenge achieve the aha moment (dopamine rush)
• Users feel a sense of accomplishment

In contrast applications typically:

• Provide all the tools at once (intimidating, discouraging, and overwhelming)
• Users don't know where to start (potential anxiety)
• Users feel lost due to a lack of feedback informing their progress

Daniel Cook's formal record is reliant on two core concepts:

• Exploratory Learning
• Game Design Patterns

Each section below dives deeper into each.

Exploratory Learning

This idea is self-explantory but Daniel's specifics on the topic are not. His breakdown of a successful outcome with exploratory learning depends on what he calls STARS:

• Skills
• Tools & Action
• Rules
• Stimulus

In the context of Reticle Designer the concrete examples of each are:

• Skills - skills in user's head from previous computer use generally and digital design tools specifically
• Tools & Action - Reticle Designer's canvas and subsequent edit panel used with mouse and keyboard
• Rules - Reticle Designer's canvas boundary and edit panel tool restrictions
• Stimulus - instant updates in canvas and edit panel via edits in addition to progress highlight bar feedback

At the core STARS is about providing a feedback loop where user skills and tool mastery manifest as actions to meet challenges within a ruleset. Positive or negative stimuli manifest as feedback so the user can gauge their progress or lack thereof. Upon positive stimulus from meeting challenges, new skills are confirmed and acquired. The process repeats with one or more new challenges.

Prior to reading the next two paragraphs (which will bias your opinion) watch this video of the app in motion. Take some personal or mental notes regarding gamification and compare them with the mentioned goals of the paragraphs that follow.

Exploratory Learning Intro

Reticle Designer's implementation of STARS is pretty straighforward and intentionally not gimmicky, which is the type of thing that makes gamification a dirty word. I use contrast (the potent green bar at the top of the edit panel) and animation as subtle hints to focus the user toward the app's challenges. This aim is to nudge the user toward an exploratory learning experience with progressive and incremental goals. Notice it's a nudge and I'm not annoying the user with a popup modal that they'll almost certainly not read and instantly dismiss. As Daniel mentions in his article, you have to believe your user is smart.

Additionally, I leverage the interaction design principle progressive disclosure. What this equates to is less UI and tools presented up front in favor of gradually introducing them over time. This helps alleviate the aformentioned fundamental flaw of most applications where they present all the tools up front. This progressive disclosure tactic naturally lends itself to the incremental revealing of tools that are earned through accomplishing challenges. Upon goal completion there is subtle animation at work acting as the progress feedback. Fireworks, magic stars, and casino jackpot sounds aren't shooting off however. Gamification can be classier.

Game Design Patterns

There are six core patterns that games use within exploratory learning:

1. Levels
2. Items
3. Inventory
4. Quests
5. Score
6. Advancement

You can check my more detailed notes on these patterns if interested as I'll only be hitting those that Reticle Designer leverages below.

Reticle Designer leverages a blend of Levels, Inventory, Quests, and Advancement. This may sound like a lot, but there is a lot of overlap. Here are some quick bullet notes for each pattern followed by a longer video showcasing all of them:

• Levels
• new tool paired with safe environment to learn it
• passing the level requires skill acquisition (gating)
• Inventory
• item acquisition
• Quests
• explicit goal communicates something is possible
• goal completion enables measured progress
• Advancement
• the app you start with isn't the one you end with
• emergent behavior through skill, inventory, and tool combinations

Game Design Patterns in Reticle Designer

Levels

Leveling in the context of Reticle Designer manifests as a small set of tools presented within a safe environment for learning them. These tools are the controls and buttons that are progressively disclosed as a result of met challenges. In retrospect of making Reticle Designer I learned more about MobX (one of the tools I used for making the app), and could have fairly easily implemented undo/redo behavior from the outset. This would make the app that much safer as an undo would be just one shortcut or click away.

Inventory

Item acquisition, or more specifically the unlocking of new tools, occurs upon goal completion. There isn't an inventory UI similar to what you'll likely see in RPG, FPS, or certain Metroidvania games however. Instead the inventory items are the editing tools and buttons that are progressively unlocked through challenge completion (and thus skill acquisition). The inventory UI is the edit panel itself.

Quests

The Quest is the strongest pattern match for Reticle Designer as there are explicit goals stated. Each communicates that something is possible while acting as an implicit tool of measured progress once completed. I could have used the Score pattern to communicate progress but that didn't make sense and its implementation would have likely entered the tacky realm.

Advancement

Advancement is a bit of a side-effect pattern that again naturally is reflected in the UI from using progressive disclosure. What is empowering however is that the tools earned through skill acquisting can be combined to make more powerful visuals with minimal effort. Emergence is the term used when unique parts of a system, or set of tools in this case, combine in interesting and unforseen ways. There are quite a few emergent behaviors that manifest in the app. My favorite being a 2+ Divisions setting in combo with a high Spacing setting which results in a patterned and reversed reticle rendering. Here's one example of a reticle layer reflecting the behavior:

Emergent Example

Conclusion

Thinking about Reticle Designer from the outset with Daniel's Cook's Games and Applications ideas in mind was a fun design challenge. The implementation was as well and I detail notes on that experience in the final article of this three part series. It is titled Reticle Designer - Part 3: SVG, Flexbox, React, and MobX.

If you have any thoughts, don't hesitate to reach out @derekknox.