Role of Proximity in Product Interaction Design (IxD)

Let’s learn how proximity can be used to increase usability and create more delightful human-product experiences

Nitish Khagwal
Muzli - Design Inspiration
6 min readNov 8, 2019

--

Have you ever noticed, whenever you make or answer the phone call and bring a smartphone closer to your ear, the screen automatically turns off — this is how proximity plays a role in interaction design.

Getting Started

The dictionary meaning of “Proximity” states “nearness in space, time, or relationship”.

By making use of the proximity, we can observe the user’s action or trigger path and in-return make an app or product respond accordingly.

Usability focuses upon how easily a user can access or use the product, app or website. Usability peaks whenever a user makes the minimum effort to achieve primary goals with maximum possible ease.

Interaction design is the subset of the User experience
IxD helps to enhance the overall user experience

Interaction design (IxD) is a subset of user experience which examines how users and products respond to each other. The primary objective of interaction design is to let users achieve their goals in the best way possible.

Proximity can be leveraged in interaction design to predict the user’s primary goal and let the product respond more smartly.

Real-world Proximity IxD Example

In the Google Maps app, Navigation View uses the ambient light sensor to automatically choose the dark or light color scheme.

Proximity in Google Maps App
Credits — Google Maps App : Dark and Light Color Schemes

Whenever a user interacts with the map in low light conditions, the map’s display switches to the dark mode to avoid eye strains, which gives a better interaction interface and usability to the user.

We can incorporate the proximity constraints in both the apps and websites to deliver more usability rich experiences.

Proximity rich interactions strengthen the following aspects of user experience —

Increased Productivity

Interaction between products/apps and the user should be fast so that a user should never wait for the reciprocal response.

Proximity helps to anticipate user’s action and makes an app respond early or even simultaneously.

Predicting User’s Action - Opening a Contact Form

In the above example, if we track the cursor’s movement we can predict the user wants to open the contact form next, thus we have opened the contact form simultaneously, to save both the user’s time and effort.

Proximate interactions also justify Doherty Threshold, as the early response from the app escalates the pace and keep the user’s attention.

Doherty Threshold — Productivity soars when a computer and its users interact at a pace (<400ms) that ensures that neither has to wait on the other.

Reinforced Feedbacks

Constant feedbacks helps the user to understand whether they succeeded or failed while performing an action. Proximity gives early/parallel feedback to the users to assist their actions adhesively.

Generally validations errors are shown when the form is submitted however, we can predict the user’s action of clicking button and warn him progressively when he comes closer to the button, which will result in instant visual feedback.

Intuitive Behaviour

Humans can do daily or repetitive chores in the unconscious state like singing a song while riding a bicycle; similarly, a user should be able to use the product or app even without any conscious reasoning, which in-return makes the user-app interaction more intuitive.

In the above example, when a user moves closer to the menu button, the off-canvas menu slides in progressively, which guides the user about its role even before when a user clicks or interact with it.

The intuitive interface has a low learning curve which is a sign of increased playful behaviour which strengthens the usability.

When proximity accomplishes the user’s action, it becomes playful, which decreases the learning curve and elevates the intuitive factor in the products.

Proximity and Triggers

Whenever a user performs an action like opening an app or deleting an image, the system responds to the user either with the change in state or some choices to perform an action again, which leads to a recursive loop.

User Product Interaction Loop

A user initialises the action with a trigger. Clicks and Swipes are a few of the most popular triggers. Different environments like desktops with mouse and portable devices with touch screens have different triggers.

The mode of interaction and triggers changes on different devices, so respective triggers should be observed with proximity to predict the user’s action.

Proximity in Cursor Oriented Desktop Interfaces

As we know, most of the time a digital mouse is used to interact with interfaces on desktops. We can observe the mouse’s movement or behaviour to predict the user’s primary action or goal.

Let’s see how we can predict the user’s action with a use case —

Use Case — Back to Top

Web pages with lengthy contents or infinite scrolling often have a “Back to Top” button, which helps the user to navigate easily to the header.

“Back to Top” is a much-needed option, but sometimes it overlaps the primary or main content (either an image or text), which is not a good thing.

We can leverage the proximity to show and hide the “Back to Top” button by predicting when a user needs it.

Whenever a user wants to go back to the top of the page or header, he will scroll-up, we can observe scroll-up trigger to predict the user’s action and then progressively show the “Back to top” button.

Similarly, we can observe the scroll-down trigger to hide the “Back to Top” button, which will result in a less cluttered interface giving more room to read and view.

Proximity in Touch Oriented Mobile Interfaces

Smartphones or touch devices have a set of gestures and sensors. We can observe the swipe trigger or leverage the different available sensors to predict the user’s primary action.

Let’s see a practical use case where proximity can be used to improve the app usability on touch screens —

Use Case — Form Validation

A form validation error occurs whenever a user misses the mandatory field or provides the wrong type of information, which alerts the user to fill the mandatory and correct type of information.

Long forms cannot fit within the device height which results in overflow. User swipes down to fill each field.

Validation errors are generally displayed when the form is saved/submitted. In such a scenario finding a field with the error annoys the user.

Inline errors can fix this to some extent, but showing inline validation errors results in data/microcopy injection, which pushes the entire content down creating a visual distress.

We can leverage the swipe down gesture to alert the users if they skip or fill the wrong type of information. It will help the user to keep track without manually hunting the missed or incorrect fields.

You can see how predicting the user’s action with proximity helps to create more intuitive interfaces, which result in increased productivity. We need to make a precise and accurate prediction else leveraging proximity in interaction design will be a bane rather than a boon.

Thank you very much for giving such a long passage a big read 🙌 🙌

If you loved this article, clap clap — it’s free.

Feel free to get in touch elsewhere — Instagram, Twitter, or Dribbble.

Cheerio! Bie 👋 👋

--

--

I bring utility & beauty closer. I build design that scale. I write about user experience & design systems. Say hello! at khagwal.com