Design

Desktop vs. Mobile: Annoying Differences in Services

Desktop vs. Mobile: Annoying Differences in Services

Try four in-demand design specialties for free. Take a free design course and expand your skills. Create four impressive case for your portfolio and choose the future development path

Learn more

Sometimes design teams of large companies make very unusual decisions. They can remove important features from mobile applications, while adding elements that are not particularly necessary to the desktop versions.

Sometimes this approach is actually justified. For example, Zoom users are uncomfortable drawing on a virtual whiteboard from a mobile device, and therefore there is no point in burdening the mobile version with an unnecessary feature. However, in most cases, these are just misunderstandings. Let's analyze the desktop and mobile versions of popular platforms to find out which aspects irritate users the most.

Yandex Music

Icons in the mobile app and on the desktop version can differ significantly. These graphic elements in the interface help you quickly perceive information: for example, if you like a song, just tap the heart—this clearly indicates that you've added it to your favorites.

Yandex Music decided to get a little creative: now the heart in the mobile app performs two additional functions—"Shelf" and "Subscribe to podcast." Users will have to study the text more carefully, and not rely solely on symbols.

In the mobile app. By the way, I still haven't found the "Add to queue" option on the desktop. Screenshot: "Yandex Music" / Skillbox Media.
Also in the mobile app. Screenshot: "Yandex Music" / Skillbox Media.
On the desktopScreenshot: "Yandex Music" / Skillbox Media

Differences in design versions usually arise when different groups take on its development, each of which has its own idea of ​​what the user experience should be.

To improve the user experience, it is recommended to unify the icons for both the desktop and mobile versions. This will create a more holistic perception of the interface. Additionally, it's worth developing different icons for different functions to make interaction more intuitive and speed up the process.

Telegram

Recording circles from a desktop computer is not possible. In the mobile version, this feature allows you to save time and diversify text content if you manage your own channel. However, unfortunately, there are no circles on Windows or the web version.

This can only be done in the mobile app. Screenshot: Skillbox Media

How can efficiency be improved? Telegram has concluded that this feature is not relevant for desktop users — what is the reason for this? After all, a PC has a camera too!

Ozon

A visit to the marketplace brings to mind one single word - noise.

The labels are red, green, blue, orange - in short, eye-catching. Screenshot: Ozon / Skillbox Media
On desktopScreenshot: Ozon / Skillbox Media

The website has a more calming atmosphere: large product photos soften the bright and provocative labels, but this does not eliminate the problem completely. In this context, unified standards for product images could be helpful. For example, Yandex Market provides similar information, but in a more restrained format:

Like Yandex Market - white background everywhereScreenshot: Ozon / Skillbox Media

Different versions of the app feature different icons for the shopping cart. Some product cards feature two buttons, each offering its own delivery terms: one promises delivery within half an hour, the other - same day. Let's leave aside the question of how this solution looks less than ideal and pay attention to the icons: the mobile version of the app and the website use different images for the shopping cart.

On the desktop Screenshot: Ozon / Skillbox Media
In the mobile appScreenshot: Ozon / Skillbox Media

In the mobile version, the search function is overloaded. It is located at the top of the screen, where there are already quite a lot of indicators and information about delivery. This creates a feeling of crampedness and clutter for an element that is used quite often.

In the mobile appScreenshot: Ozon / Skillbox Media

If we apply blur to the page in the desktop version, it turns out that the search bar attracts the most attention.

On the desktopScreenshot: Ozon / Skillbox Media

How to improve:

  • First of all, you should consider removing two buttons, including the red one. Initially, it was planned to simplify the purchasing process, but in reality it only became more confusing. It would be more reasonable to leave only one button—"Add to Cart"—and offer all delivery options in the next step.
  • Standardize icons. Since users spend a significant amount of time in online stores, icons help make information easier to perceive, eliminating the need to read text navigation elements.
  • You can simplify access to the search bar on the mobile version by changing the position of the airplane icon for ticket sales, as well as the chat icon. Additionally, it's worth considering moving the search bar lower, closer to the center of the screen, as is done in Eapteka. An alternative option would be to place this line at the bottom of the screen, which would make it more convenient to use.
In the Eapteka mobile app, searching seems simplified, although, as in Ozon, space is taken up by voice search and barcode scanning. Screenshot: Eapteka / Skillbox Media

LitRes

As an avid reader, I can confidently say that searching for books in the mobile app and on the desktop version of LitRes are two completely different realities. Sometimes I encounter a situation where I can't find certain works in the mobile app, even though they're easily found on the website. Perhaps this is just a mystery.

Continuing our investigation, we encounter an unusual selection of available currencies in the app. I wonder why the ruble is missing? For comparison, this was not noticeable on the desktop version.

In the mobile applicationScreenshot: "LitRes" / Skillbox Media

At the moment, there is no option to listen to the text. I can be lazy and switch to audio format in the mobile app, but on the desktop, alas, I'll have to read it myself. This feature is not available.

In the mobile application Screenshot: liters / Skillbox Media
On the desktop. The book is the same, but there is no icon with the option to listen to the book. Screenshot: "LitRes" / Skillbox Media

It is recommended to implement the voice-over icon in the desktop version, which will also contribute to inclusivity. Additionally, it's worth standardizing the bookmark icons, as they currently differ between the mobile and desktop versions.

Stepik

For those unfamiliar, it's an online platform that allows anyone interested to develop their own courses.

That's right, now the educational process can be organized not only at a desk, sitting on an uncomfortable chair, but also simply lying on the couch with a phone. This is wonderful! However, don't get too comfortable. On the Stepik platform, you will still have to return to traditional learning, because the video player in the mobile app does not adapt to the screen size.

On the desktop Screenshot: Stepik / Skillbox Media
In the mobile appScreenshot: Stepik / Skillbox Media

How can it be improved? Configure the player embed so that the video fills the entire screen, and there is no need to scroll the page. This is especially important because the primary use case for educational apps on mobile devices is viewing lectures.

Zoom

In today's world, we've become accustomed to meetings taking place directly on our smartphone screens. However, the question arises: why doesn't the mobile version of the app offer the ability to record these meetings?

On desktopScreenshot: Zoom / Skillbox Media
In the mobile appScreenshot: Zoom / Skillbox Media

In the mobile version of the chat, the settings are hidden from the user's view. Let me give you an analogy: a sign indicating a pedestrian crossing is always located next to the crossing itself. This is not just a rule, but a necessity. If the sign is on another street, it will refer to a different crossing. Objects located in close proximity to each other are perceived as a single whole. This makes information easier to digest.

Why are the chat settings in the mobile version of Zoom so far away from the chat itself? Finding them requires navigating through three levels of navigation. Imagine how inconvenient it is to switch tabs in an application during a meeting.

In the mobile application Screenshot: Zoom / Skillbox Media

In the desktop version, everything works without problems - both the chat and the settings are in place.

On desktopScreenshot: Zoom / Skillbox Media

How to optimize the process? Place the settings close to the function or integrate them directly into the function itself. This will save users time and mental effort, and will not distract them from the meeting.

HeadHunter

The mobile app includes a surprise feature that allows users to see how many job seekers have already responded to a vacancy. However, it's worth noting that this information is not available on the desktop version.

In the mobile application Screenshot: HeadHunter / Skillbox Media
On the desktopScreenshot: HeadHunter / Skillbox Media

How can it be improved? Implement a hidden function in the desktop version, since otherwise it looks a bit unfair.

Lamoda

Image search is available only in the mobile version. The minimalist design of the Lamoda online store made a lasting impression. It's stripped of unnecessary details, icons are framed by thin lines, and bright colors are absent—making it easy to browse clothes throughout the day without getting tired. In addition, Lamoda offers a function for searching clothes by photo, but, unfortunately, it is available only in the mobile app.

In the mobile appScreenshot: Lamoda / Skillbox Media

Unfortunately, only the standard search is available in the desktop version.

On the desktopScreenshot: Lamoda / Skillbox Media

How can the system be improved? Enable image search in the desktop version. Lamoda may not have decided that this feature is a priority, but it's so practical that it's hard to imagine anyone who wouldn't find it useful.

Finally

Large platforms constantly test their solutions on users, and this doesn't happen in one go, but repeatedly, through iterations. Therefore, my comments can hardly be considered simple errors; most likely, the developers have their own explanation for each of them. However, it's possible that there is another point of view.

We have a lot of fascinating materials about design in our Telegram channel. Join us!

Alternative resources for interface development.

  • "Interface": basic principles for creating user-friendly systems
  • There are a number of common mistakes in interface design that can cause user dissatisfaction. Here are the eight main problems to avoid:

    1. Inconsistent Visual Style. When interface elements don't follow a consistent style, users may become confused and unsure how to interact with the app.

    2. Complex Navigation Structures. If users have difficulty finding the sections or features they need, this can lead to frustration and even abandonment.

    3. Poor Text Legibility. Using small fonts, insufficient contrast, or complex fonts makes information difficult to understand.

    4. Neglecting Mobile Design. In today's mobile-first world, the lack of responsive design can lead to poor user experience.

    5. Information Overload. Too much data or elements on the screen can be distracting and make it difficult to perceive the information they need.

    6. Unintuitive Controls. If buttons or other interface elements aren't obvious to the user, this can lead to errors and misunderstandings.

    7. Long Load Times. Users don't like to wait, and if an app or website takes a long time to load, it can become annoying.

    8. Lack of Feedback. If the user doesn't receive any information about the result of their actions, this can create a feeling of uncertainty and dissatisfaction.

    Avoiding these common mistakes can significantly improve the interface and make it more comfortable for users.

  • Interface Design: Eight Fundamental Principles Every UX Designer Should Consider.
  • Errors in Interface Logic
  • "A Psychiatric Clinic Under the Control of Patients." How to develop interfaces correctly.

Specifics of a professional graphic designer's work

You will master the process of developing corporate identity elements and graphic design for business. Create a portfolio that will demonstrate your unique style and confirm your design skills. This will open up opportunities for you to start a career both in the studio and as a freelancer.

Find out more