Leveraging basic principles of Natural User Interface (NUI) Design

As time is passing by, the types of digital smart devices will constantly increase in the market. And so will the number of devices that we own and use daily. With this trend going upward, the role of designers in the tech industry is bound to strengthen with time. As more and more devices get added to our daily routine, our time spent on each of them will be reduced to a finite amount. According to Exploding Topics’ 2022 statistics, people spent 3 hrs 15 mins (average) on their phones per day. Assume this number stays intact but is reduced for phones overall and taken by smartwatches, smart TVs, tablets, and other unknown devices like the Surface Table.

I found a hidden gem on Quora by Dan Saffer — author and interaction designer, who wrote the 11 basic principles of NUI (Natural User Interface) design. While going thru’ them, made me realize that these are the golden rules of designing that will continue to ring true even when our handheld or wrist-friendly devices changes their physical forms. Let’s revisit these golden rules and explore what they mean.

#1 Design for Fingers, not Cursors

Touch targets need to be much larger than for desktop: 8–10mm for tips, 10–14mm for finger pads.

Even when creating websites, as designers we should consider them being open and interacting on a touch screen device. A large amount of web traffic is driven by mobile devices. That’s because mobile devices are always with us and they provide us with a level of comfort and convenience that other devices don’t. Hence, when designing any interface, consider the touch area of several interactive components like links, different types of buttons, and swipe targets. Devices like Desktop computers use a mouse or trackpad to select a target or click on an object. Cursors on laptop devices are made for precision and hence, are available on high-density devices. While fingers are used as inputs for lower precision, touch screen devices like mobiles, smart watches, and tablets¹.

#2 Remember physiology and kinesiology

Don’t make users do overextensions or repetitive tasks.

Don’t let the user perform the same repetitive tasks again and again. A task done more than a couple of times becomes boring and mundane. As a designer, we should look at data and user insights to derive whether we can automate the tasks instead of using rule-based automation. Doesn’t need to be anything fancy. Just take care of all the manual repetitive tasks and the users will stick around with your product longer.

#3 No gorilla arm

Humans weren’t meant to do many tasks with hands up in front of their bodies for long periods of time. Sorry Minority Report.

Imagine having a big screen like the Surface Tablet to design your next interface. Exciting isn’t it? Although a big screen provides lots of real estate to design, it can also be troublesome for the users’ arms to reach all of the interface controls. Anything beyond simple interactions becomes mundane and tiring for the user. If users are extending any one of their arms for long durations to interact with the screen then it causes fatigue and soreness which is also known as the gorilla arm².

#4 Screen coverage

Fingers are attached to a palm, which can cover the screen while you are trying to do a gesture. Avoid putting essential elements like labels below a control, as it can be obscured by the user’s own hand. Place items like menus at the bottom of the screen to avoid this phenomenon.

When designing a pressed interaction that reveals options in a floating manner or even when revealing the tooltip, please take into account that the user’s palm will likely hide all the information that is below the finger. This also applies to the fat fingers issues. Instead, design the interaction to reveal objects above or around the finger. Pinterest’s long press to save pin interaction is a good example of how it should be done.

Pinterest Interaction from UI Sources

#5 Know the technology

The kind of touchscreen, sensor or camera determines the kind of gestures you can design for. The more challenging the gesture, the fewer people who will be able to (or want to) perform it.

If you are designing a product that requires gestures then it is recommended to fall back on the widely known list of gestures that can easily be performed and are also known by the users. Also, taking your demographic into account, you should always provide gesture cues and probably an accessibility option to convert gestures to taps or voice control for people with special needs.

ICONS FOR TEACHING TOUCH

#6 Trigger actions on release, not on the press

In a user testing session, I was talking to the older generations and one of the notable things is that they were scared to make a wrong tap or action on their mobile devices. Since the act of recovering (undoing) from action was something they weren’t used to, they often only released their fingers when they were sure that they performed the right action else they would keep the finger pressed on the action. This experience was very unique to me and something that we should always take care of. When a user is performing the press action then accommodate and let them know that the button has been pressed but the action will only be performed when the finger is released.

#7 Attraction affordance

Use a simple gesture to get users to start using the system.

When onboarding your users into a new experience, don’t overcomplicate things for them. Start simple, use progressive disclosure to allow them to get accustomed to your app and common actions that need to be performed. The simpler you make your actions, the quicker your users will master the functions of your app. Apps that make people feel like geniuses go a long way but the ones that ridicule users and their sensibilities quickly see their user base churned off.

#8 Avoid unintentional triggers

A variety of everyday movements on the user’s part can accidentally trigger the system. Avoid.

Especially for larger devices, the software should account for accident taps and touches. Based on the surface area, touch duration, angle, and other aspects, the software should cleverly discard the accidental triggers and also provide a way to recover from them in case they get admitted as genuine actions. As a designer I see the possibilities increasing with device dimensions increasing and more manageable for small form factors like mobile phones.

#9 Gestures and Command Keys

Provide an easy (buttons, sliders, menu items, etc.) ways to access functionality, but provide advanced, learnable gestures as shortcuts.

Point 9 is similar to what I mentioned above. For complex gesture-controlled apps, provide an alternate tap and swipe-based UI interface. For example, a user can rotate a canvas using the rotate two-finger action or they can use a tap-based menu bar to choose the degree of rotation and confirm the action to make rotation happen. Both are ways that can be learned and probably appeal to different audience age groups. When designing for gestures, take into account non-gesture-friendly users too.

#10 Requisite variety

There’s a wide range of ways to perform any gesture. Account for that.

When performing gestures account and test for users using both left and right hands. Probably people who have difficulty performing certain gestures will rest their palms on the screens. All these are genuine interaction patterns that different types of users utilize when using touch screen interfaces. As designers, we should account for various motor disabilities and people with different usage patterns when utilizing both simple and complex gestures.

#11 Match the complexity of the gesture to the complexity and frequency of the task

Simple, frequently used tasks should have equally simple gestures to trigger them.

Beyond one finger, any two-finger gesture is trouble and rigorous for most users. Going by this idea, complex gestures should be reserved for one-off actions. For frequent actions, rely on simple tap, two tap, and swipe actions. Since they are frequent actions, users can easily face fatigue and discomfort when using two fingers.

Further reads on the topics discussed here: