How to create good UX design using a BCI

Learn about the NeuroTag design system and how to take full advantage of it to create beautiful apps with the NextMind SDK.

The world is just starting to discover what brain-computer interface technology is and how to use it. And now that we’ve gotten the necessary hardware out of the lab and into developers’ hands, the next step is creating applications for neural interfaces that are just as fun and friendly to use as other modern applications.

Leading the charge is our head designer and UX expert, Nelson. He bridges the gap between our neuroscientists and software engineers to make our neurotech platform easy to use for everyone.

Today he explains the NextMind design system and gives you guidance on creating a user-centered app with our SDK.

The NeuroTag design system

A NeuroTag is a graphic overlay that makes an object mind-interactable. In the NextMind SDK we provide NeuroTag pre-fabs as a standard base. They are composed of a 50% gray background, a randomized, blinking pattern of white lines, and a neurofeedback loop that responds to your focus.

This default NeuroTag is the result of a design system relying on 4 factors.

Performance

A visual must generate brain waves that are identifiable through EEG data.Our pattern was developed by our team of neuroscientists as it creates a strong and specific reaction in the visual cortex when focused upon. It’s like a cognitive shortcut for the visual cortex. The NeuroTags can be customized, but you always have to test that they perform well.

Discreetness

Objects that are mind-interactable should be able to integrate discreetly into an application rather than distract the user. The flickering is required for their function, but finding the right level of luminosity is key. It should be comfortable to look, but still generate recognizable EEG patterns. When the right balance is found, the user can easily focus on one NeuroTag even while several are on screen at the same time.

Flexibility

As NextMind technology is offered as a Software Development Kit, NeuroTags need to work across all kinds of visuals so developers aren’t limited. They can be added onto photos, 2D elements, user interface design, and even realistic 3D renderings.

Responsiveness

Since NeuroTags are used as buttons for the brain, some kind of feedback is needed to indicate to the user that they’re successfully activating it. We incorporate a neurofeedback loop as a visual estimation of their focus to help them navigate the NextMind experience.

Our NeuroTag design is a balance between all of these factors so that it can be re-used across almost any application. But that means you have the freedom to play and customize almost every aspect of your NeuroTag. Ready to learn how?

Customize your NeuroTags

NeuroTags are meant to be adapted to any visual object so you can build everything from realistic 3D video games to daily productivity apps. Just remember, the more you customize a NeuroTag, the more important it is to test your design while wearing the NextMind Sensor. Now let’s get into different ways to customize!

“You can be creative when customizing your NeuroTags, just test your designs to see what works best!”

Nelson, NextMind head of graphic design

Already have the NextMind SDK installed? View an interactive version of these tips in the NeuroTag Gallery!

Shape

A NeuroTag doesn’t have to be a simple object. It can also be placed over complex shapes and grouped objects.

Choose your color

Instead of the default gray background, choose a color palette that matches your application. The background can be a solid color, a pattern, an image, etc.

Go transparent

Even if your object is partially transparent, you can still put a NeuroTag on it. Opaque objects will be easier to activate, so be sure to test with different transparency levels to find the right amount for your needs.

Constant size

If you’re designing a 3D app where your NeuroTags are moving closer or farther away from you, consider using the ConstantSize feature in the SDK. It will keep your NeuroTag texture at a constant size, and therefore be easier to activate from a distance.

Customize the texture

Instead of our default pattern, you can create your own using particle patterns, dots, lines, or even logos! Remember, always test your designs wearing the NextMind Sensor.

Stay real

If you’re working in a realistic 3D environment, you’ll probably want your NeuroTags to blend in with realistic light settings using Lit mode in the SDK. If you choose Unlit mode, your NeuroTag will also be visible no matter the lighting.

Sample scene with Unlit mode to the left and Lit mode to the right

Responsiveness

Now that you’ve thought about the overall user experience, there’s one crucial piece of User Interface design you should consider: a neurofeedback loop. This is a visual indication of the confidence value, or basically how confident themachine learning algorithms are that the user is focusing on an object.

A NeuroTag without a neurofeedback loop is like a loading page without a progress bar. And since direct brain commands are a totally new way to interact with objects, it is key to help users build their new sense of control with NextMind.

In the SDK, you can use our neurofeedback pre-fab of green lines that form a triangle. But feel free to make your own version by using a loading bar or even an image that changes based on the confidence value. Whatever you decide to use, including a neurofeedback loop will create a more satisfying and intuitive experience for your users.

To help you get started, be sure to check out our newest video tutorial on how to customize neurofeedback loops:

To see multiple methods of customizing neurofeedback loops in Unity, see documentation.

We hope you’ll put these tips to use to build the mind-enabled application of your dreams!

What would you like to create with the NextMind Dev Kit? Tell us in the comments.

You might like...