In web design, there is a time and place for features that “wow” users. Jaw-dropping animations, complex graphical effects, and immersive multimedia are a few items that come to mind.
These elements can enhance the user experience (UX). However, one size does not fit all. People consume the web in different ways. There are various screen sizes and connection speeds to consider. Thus, what produces smiles for one user may result in a headache for others.
That’s why it can be hard to duplicate desktop experiences on mobile devices. Some elements may translate perfectly. But others could be cumbersome. It’s here where designers must choose between refactoring or removing the feature.
Today, we’ll take a look at some desktop features that you should consider leaving out on mobile. Generally speaking, these items are likely to get in the way. And they may prevent users from getting the most out of your website.
Complex UI Animations
Animation can be a great tool for grabbing a user’s attention. CSS and JavaScript frameworks make adding movement easier than ever.
But some animations are a better fit for large screens than mobile devices. Consider complex page transition effects. Or UI layouts that include highly-synchronized sequences. On a desktop, they can add personality. Not so much on a phone.
Quickly accessing information is crucial for mobile users. For example, think of a person on the go who is looking for directions to a store. Making them wait while the store’s address cascades into place isn’t efficient – it’s an obstacle.
That’s not to say animation isn’t beneficial on small screens. It may be just the thing for onboarding new users. Context matters, however.
Before passing an animation from desktop to mobile, think about its purpose. How will it impact usability? If it’s purely decorative or could get in the way, you may want to skip it.
Full-Width Sliders and Videos
The use of sliders in modern web design is debatable. On the one hand, a full-width slideshow can still create a compelling visual experience. Yet it can also hog both screen real estate and system resources.
Those drawbacks are exacerbated on mobile devices. And the visual benefit could be nullified as well – especially if the presentation maintains a wide aspect ratio. The images appear smaller on the screen. But the same amount of code is loaded regardless.
With Google pushing its Core Web Vitals metrics, a slider makes achieving a high score that much harder. As such, it could be the difference in whether a website passes muster.
Usability is also a concern. A cropped presentation may make slides harder to read or interact with. You can make an effort to improve the mobile experience. Yet it still may not be enough to justify the performance hit.
Jettisoning a slider doesn’t mean settling for a boring UX, however. Replacing it with a traditional hero area could help maintain messaging without the excess bloat.
Clickable Elements That Require Precise Interaction
Interactive UI elements bring a level of polish to a design. Data visualization tools such as charts and infographics can help users grasp complex concepts. And even simplistic items like accordions and tabbed layouts make for a tidier desktop experience.
But the benefits aren’t always universal. In some instances, interacting with these elements is difficult for mobile users. Specifically, we’re talking about features that require a precise click or touch.
Imagine an interactive pie chart where clicking a “slice” reveals data. Desktop users have more screen real estate to play with. They are also likely to have a pointing device or keyboard to help them navigate.
On a phone, those elements may shrink to fit the smaller screen. And they require the user to touch the chart in precisely the right spot. There’s less margin for error. It may be possible for them to zoom in. But they may have to zoom out again to comfortably read the text.
There is a possible workaround. You could refactor the chart for mobile users. Instead of requiring a touch to access data, displaying a color-coded key would remove this barrier.
One Website, Multiple User Experiences
It’s easy to get caught in the trap of trying to replicate the desktop experience on mobile. It might be well-intentioned. However, there’s also the risk of making things harder for mobile users.
That’s where the concept of progressive enhancement comes in. By building the essential features first, we ensure everyone can access the information they need. From there, we can add those shiny bells and whistles for the devices that benefit from them.
Sometimes that means eschewing or altering a desktop feature for mobile users. Still, clients may not necessarily understand the reasoning behind this logic.
Thus, it’s worth pointing out that a user’s experience with a website will largely depend on their device. The goal isn’t to create a singular UX. Rather, it’s about creating a cohesive one that caters to users.
Hopefully, stakeholders will buy into this concept. Then you can work together towards a website that serves every user.
