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. The UI/UX designer nerds will likely find some of the details mentioned 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 or games you'll notice they often have similar reticles in their gunsights, HUDs, UIs, and dashboards.

Each section below is a reflection on a specific UI/UX decision made for Reticle Designer. Feel free to share thoughts or feedback @derekknox.

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

Dynamically Positioned Edit Panel

Dynamically Positioned Edit Panel

This feature differs from virtually all creative authoring tools (Photoshop, Illustrator, Sketch, Figma, etc.) in that the layers and properties panels move as a unit relative to the canvas interaction point. This is unique as the aforementioned tools edge-anchor which increases the distance for subsequent editing. The advantage of this dynamically positioned edit panel approach is embodied in Fitt's law. At it's core, closer and larger targets often equate to quicker access of them. Additionally the panel's presence and its controls leverage the progressive disclosure interaction design principle.

This approach may be susceptible on smaller displays, but the minimize edit panel button exists to mitigate this. When hit, it brings focus to the design while minimizing the potentially overlaid panel. On the design target of wide monitors you get the best of both worlds.

Real-Time Preview

Real-Time Preview Color

Real-Time Preview Graphic

Real-Time Preview Scale

All edits are reflected in real-time with the interaction control of focus. There is no "preview" checkbox. You see the effect instantly. The obvious benefits are rich feedback, iteration speed, and empowered creativity and playfulness. All three are embodied in a few examples illustrated in the animations above:

• Color change on hover with Color Wheel Slice updates
• Color Wheel Palette swap on hover
• Graphic swap on hover (in focused color)
• Graphic button reflects focused graphic in focused color
• Scale swap on hover
• Scale button reflects focused scale setting

Weighted Track Slider

Weighted Track Slider

The more interesting reticles are those that are divided into a single arc, distributed arcs, or distributed graphics. All three of these examples are accomplished by changing the Divisions value from zero to one for a single arc and two or more for distributed arcs and graphics.

Since the Division's slider control pixel width is much less than the available value range, dragging its thumb a few pixels can drastically change the Divisions count. A solution for this could be to change the control type to a dropdown or planar slider. The former would kill the ability to quickly iterate via the real-time preview, so that's a no-go. The latter could work, but the value scale only exists on one axis and planar sliders are ideal for dual axis values (like the below mentioned ScaleX/ScaleY Planar Slider).

As such, I created a custom slider that I call the Weighted Track Slider. It behaves just like a normal track slider but a specific drag range is weighted for specific values. In this use case values one through ten take up a greater share of physical drag real estate where key arrow input still updates linearly for precise incrementing and decrementing.

Planar Slider

Planar Slider

Manipulating two values with one interaction, especially when the values are in some way coupled, can result in efficient output with minimal input. I've coined this as MIMO (minimum input maximium output). I've written about the Planar Slider component in my Considering the Underused Planar Slider Component in User Interfaces article. This implementation is a slight variation. Ultimately its usefulness is in manipulating multiple values mapped to movement along both the x-axis and y-axis simultaneously. Scaling on both the X and Y axis is a perfect fit. This control in conjunction with Real-Time Preview is an empowering combo.

Layer to Canvas Highlight

Layer to Canvas Highlight

In the past when working on many layered Photoshop and Illustrator documents (often with poor layering naming conventions), I often wished hovering the layer in the layers palette would highlight its corresponding canvas graphic(s). Since I'm building my own editor this feature made the cut. This feature is very helpful in quickly determining which layer to edit via simple mouse movement within the layers panel vs actual hits on each layer one-by-one.

Precision Select

Precision Select

When using an editor that has overlapped or tiny graphics on a canvas, it can be a pain in the ass to select the graphic layer you actually want. Ever fought to have your mouse cursor at the exact pixel you need to interact with something? Me too. PIA. Traditionally, the layer that sits on top in the stack is selected since it is the first hit. Often times transparency of the bounding box that frames the graphic(s) isn't ignored either during selection. Precision Select is my solution to this issue.

Precision Select works with the right-click of a mouse on a canvas. A small buffer is added to calculate which layers are potential targets based on the mouse coordinate position. After the click, a small sub-menu displays for precise selection. The above mentioned Layer to Canvas Highlight pattern reemerges and further empowers this approach within the sub-menu. I have grander visions (in the 3D realm) for this style of sub-menu, but I've tabled them for the sake of time.

Cursor Portal

I wanted to additionally add a Cursor Portal feature where a keyboard shortcut or specific action sequence would automatically portal the mouse cursor position to a desired area. This would improve the UX of making an edit just after a precise selection for example where the cursor would portal to the last focused control in the edit panel based on the layer just selected. This is not possible in the browser JavaScript API for security reasons, so no-go on this one. Sad face.

Conclusion

All in all there are some feature ideas that I'm biased in thinking would be welcome additions to existing authoring tools. Maybe someday they will be, but some may have landed and I'm just not aware of them. If the latter is the case or you have any other thoughts, don't hesitate to reach out @derekknox.