UI Interactions (Part 4)

Monthly Dose of Design’s previous three articles discusses The Fundamentals of How You Can Build a Digital Platform for Research Purposes, step by step from wireframing to user interface design, to copywriting for digital platforms. We’ve now reached the final topic in our four-part series – User Interface (UI) Interactions. This topic will cover what UI interactions are, how they can help researchers and how to improve UI interactions.  

What are UI interactions?

Interaction design focusses on specific points where user interacts with your digital platform. These points occur when the user has triggered an action and the action must be communicated to them. For example, clicking a button or loading a new page, animations, and page transitions.

How will UI interactions help researchers?

Interactions are crucial elements to consider when building your digital platform for two reasons:

1. Telling a user that an action has/can be triggered and that something is about to happen

A simple example of this is a cursor hover which changes the color of text or images. This informs the user that they can click on the object and that by clicking on the object it will change color, leading them away from the current location. This can be used in online concept evaluations where concepts need to be assessed in different colors. 

2. Providing interactive information that improves user experience

Displaying a loading animation when users upload a document communicates that the upload is progressing and the remaining wait time. This gives the user an expected timing of when the function is completed and is one of the earliest forms of user interaction design. Engaging loading animations are important to keep the attention of users who are conducting tasks like uploading self-ethnography videos. Losing their attention in the uploaded process risks losing valuable video insights. 

Four ways researchers can improve UI interactions

1. Timing

Timing is a fundamental aspect of animations used in user interactions. A lengthy transition will frustrate users, but one which is too quick to deliver useful information lacks functionality. The general timing for most UI animations is 0.3 to 0.6 seconds. However, elaborated motions like transitions may take longer. This is important to consider when quickly displaying advertising stimulus in attempting to recreate real-world interactions with adverts.  

2. Anticipation

Anticipation is essential to UI design. It tells the user what’s about to happen, meaning they can prepare themselves accordingly. For example, having the appearance of a button change when the user hovers over it builds anticipation and tells the user that this is a clickable link. 

3. Staging

The order of how objects are placed on a digital platform is crucial as it helps direct the user’s attention to specific objects. For example, if uploading multiple stimuli, users are most likely going to engage more with the first and last stimulus uploaded. Understanding these biases means you eliminate them from your platform or allow you test hypotheses around framing biases. 

4. Exaggeration

The most important elements of your UI can be exaggerated by using animation to make them stand out and help the user achieve your overall goal. For example, having your call-to-action appear 1-2 seconds after the rest of your content makes the call-to-action stand out. This exaggeration of call-to-actions should be applied when trying to engage clients with insights communicated on microsites. 

So to recap the main parts of building a digital platform: 

Wireframing 

Designing a platform’s structure to lay out a blueprint for your content and functionality before any design is done.

User Interface Design

The “skin” and visual characteristics of your platform consisting of colors, shapes, images, and fonts.

Copy Writing for Digital Platforms

The ways people read the copy on a digital platform differs from print. Be sensitive to these differences to maximize digital copy’s impact.

UI Interactions

Using animations and interactions to communicate and improve the user experience.

We’ve hoped you’ve enjoyed this series!

Header Image: Alvaro Reyes, Unsplash