Intuitiveness: The Secret Ingredient (Animations)

“Intuitive, a dance of understanding,

Where knowledge flows effortlessly,

No need for guidance or demanding,

Instinctive connection, beautifully.”

By ChatGPT.

photo source: wallpapers.com

Everyone wants the app they develop or design to be intuitive. The goal is for the user to easily navigate and understand the app’s layout, components and flows, knowing where to look for the desired information right from the first interaction.

One of the key aspect of intuition is the loading time. The longer the user waits for data to load or for a screen to appear without any indication, the less intuitive the app feels. One of the tools we have to address this issue is animations. Proper use of animations can enhance intuitiveness. Let’s go through some example videos to illustrate their use and capabilities.

Shimmering — Simulating the location of data on the screen before it arrives from the server.

for native iOS we can use:

Conform any view to ShimmeringViewProtocol which identifies that shimmering animation will be applied to it or specified subviews. Define which subviews are animated in shimmeringAnimatedItems.

final class SampleTableViewCell: UITableViewCell, ShimmeringViewProtocol {
    
    @IBOutlet weak var profileImageBackgroundView: UIView!
    @IBOutlet weak var nameLabel: UILabel!
    @IBOutlet weak var actionButton: UIButton!
    @IBOutlet weak var secondLabel: UILabel!
    @IBOutlet weak var secondActionButton: UIButton!
    
    var shimmeringAnimatedItems: [UIView] {
        [
            profileImageBackgroundView,
            nameLabel,
            actionButton,
            secondLabel,
            secondActionButton
        ]
    }
}

Then call setShimmeringAnimationWithSubviews(template:superviewBackgroundColor:) extension of UIViewfor any view (basically a superview). This function finds all descendand subviews to be set as template and applies animation. Before the call, make sure the view is loaded.

For UITableViewCell, to mark as template, view you call on willDisplay delegate.

cell.setTemplateWithSubviews(isLoading, viewBackgroundColor: .systemBackground)

and the results should look like this, depends on you’r view:

source: swiftpackageindex.com

for native Android we can use this lib for example:

add to your app build.gradle file

dependencies {
implementetion  'com.omjoonkim.library:skeleton-loading-view:0.1.3'
}

and use it like this in your layout componnt

<com.omjoonkim.skeletonloadingview.SkeletonLoadingView
			android:id="@+id/skeletonView"
			android:layout_width="100dp"
			android:layout_height="12dp"
			app:baseColor="#fbfbfb" //customize baseColor  default : #fbfbfb
			app:deepColor="#f2f2f2" //customize deepColor  default : #f2f2f2
			app:duration="1500" //customize duration  default : 1500
			app:interval="1000" //customize interval of animation  default : 0
			app:progressLength="120dp" //customize progressLength  default : 120dp
			app:radius="5dp" //customize radius default : 5dp
			app:autoStart="true" //customize autoStart. default : true
			/>

and the results should look like this, depends on you’r view:

source: SkeletonLoadingView

Here are some examples with and without shimmering effect for understanding the value of using shimmer effect:

1. Loading page without shimmering effect:

2.Page with shimmering effect

Using shimmering creates an understanding of the app’s new screen structure for the user, making them feel familiar with the screen even if it’s their first time accessing it.

one more animation effect we can use to manipulate loading time is Transitioning, Transition between screens can make the necessary page loading time feels lesser and smoother by utilize the loading time required to fetch data from the server.

So in which cases do you think the screen transition feels faster or more intuitive? example A. or B.

A. Sending the service request and displaying the loader in the middle of the screen, transitioning to the next screen only after the data returns and the user moves to the next screen.

B. Transition animation to the next screen while sending the service request, if necessary.

In this animation, we can see a short transition animation to the next screen while the service is being initiated, so in most cases, the service request is already finished at the end of the transition animation between the 2 pages.

Mixed animations — Combining all of the capabilities to provide the user with screen structure comprehension, while creating a flow and a minimal loading time sensation.

The result compared to a simple loader:

1. Combining those transition animations and shimmering effect:

2. Simple page loader

animations can be beautiful or pleasant, but the meaningful use that gives an impact is what matters.

Thanks for reading my article, If you have any comments or suggestions please feel free to send us so we can also improve.